/* DGN Zone — About / Contact / Competition Rules.
   Mobile-first. Shares the black/green/gold tokens used across the site. */
:root{
  --bg:#050505;--surface:#0f110f;--inset:#090a09;--ink:#f4f5f1;--muted:#9aa09c;--subtle:#666c68;
  --line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);
  --green:#b4f724;--green2:#d3ff5c;--gold:#f0a32a;--gold2:#ffc155;
  --fd:"Archivo",system-ui,sans-serif;--fb:"Geist",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.65 var(--fb);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}

/* visible focus for keyboard users */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:.35rem}
/* Off-screen vertically, not horizontally — a negative left value widens the
   layout box and can force horizontal overflow on mobile. */
.skip{position:absolute;left:0;top:0;z-index:60;padding:.7rem 1rem;background:var(--green);color:#111900;font:800 .8rem var(--fd);border-radius:0 0 .5rem 0;text-decoration:none;transform:translateY(-120%)}
.skip:focus{transform:translateY(0)}

/* header — same lockup as the rest of the site */
.site-head{min-height:74px;display:flex;align-items:center;gap:1.1rem;padding:0 clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line);background:rgba(5,5,5,.9);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:.65rem;flex:0 0 auto;font:800 1rem var(--fd);letter-spacing:.05em;text-decoration:none}
.brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(180,247,36,.28))}
.brand b{color:var(--green)}
.site-tabs{display:flex;align-items:center;gap:.22rem;margin-left:auto;flex-wrap:wrap}
.site-tabs a{border:1px solid transparent;border-radius:.55rem;padding:.62rem .75rem;color:var(--muted);font:700 .66rem var(--fd);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.site-tabs a:hover{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.035)}
.site-tabs a.active{color:#111900;background:linear-gradient(var(--green2),var(--green));border-color:var(--green)}

main{max-width:1280px;margin:auto;padding:0 clamp(1rem,4vw,3rem) 4rem}
.eyebrow{font:700 .7rem var(--fd);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

.page-hero{position:relative;padding:clamp(2.6rem,8vw,4.6rem) 0 clamp(1.6rem,4vw,2.4rem);border-bottom:1px solid var(--line);overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:-40% -30% auto -30%;height:140%;z-index:-1;background:radial-gradient(50% 60% at 14% 26%,rgba(180,247,36,.16),transparent 68%),radial-gradient(45% 55% at 88% 70%,rgba(240,163,42,.14),transparent 70%)}
h1{font-family:var(--fd);font-size:clamp(2.5rem,9vw,4.4rem);font-weight:900;font-stretch:125%;font-variation-settings:"wght" 900,"wdth" 125;line-height:.9;letter-spacing:-.03em;text-transform:uppercase;margin:.7rem 0 0}
h1 em{font-style:normal;color:var(--green)}
.page-hero p{color:var(--muted);max-width:62ch;margin-top:1.1rem;font-size:clamp(1rem,2.2vw,1.1rem)}
.updated{margin-top:1rem;color:var(--muted);font:700 .62rem var(--fd);letter-spacing:.12em;text-transform:uppercase}

section{padding:clamp(2rem,5vw,2.9rem) 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-family:var(--fd);font-size:clamp(1.5rem,4.4vw,2.1rem);font-weight:900;text-transform:uppercase;line-height:1.05;letter-spacing:-.01em}
h2 .num{color:var(--green);margin-right:.55rem;font-size:.72em}
h3{font-family:var(--fd);font-size:clamp(1.02rem,2.6vw,1.15rem);font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-top:1.5rem;color:var(--ink)}
section>p,li{color:var(--muted)}
section>p{margin-top:.9rem;max-width:70ch}
ul,ol{margin:.85rem 0 0 1.15rem;display:grid;gap:.5rem;max-width:70ch}
li::marker{color:var(--green)}
strong,b{color:var(--ink)}
a.inline{color:var(--green);text-underline-offset:3px}

.callout{margin-top:1.2rem;padding:1rem 1.15rem;border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:.6rem;background:var(--inset)}
.callout p{color:var(--muted);margin:0;max-width:none}
.callout p+p{margin-top:.6rem}
.callout.green{border-left-color:var(--green)}

.grid{display:grid;gap:.8rem;margin-top:1.2rem}
.card{padding:1.15rem;border:1px solid var(--line);border-radius:.8rem;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--surface)}
.card h3{margin-top:0}
.card p{color:var(--muted);font-size:.9rem;margin-top:.5rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;border-radius:.6rem;padding:.95rem 1.25rem;font:800 .76rem var(--fd);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;transition:transform .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(var(--green2),var(--green));color:#111900}
.btn.ghost{border:1px solid var(--line2);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}

.tablewrap{margin-top:1.1rem;overflow-x:auto;border:1px solid var(--line);border-radius:.7rem}
table{width:100%;border-collapse:collapse;min-width:26rem;font-size:.9rem}
th,td{padding:.72rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--inset);color:var(--ink);font:800 .6rem var(--fd);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}

/* Sticky section jump-bar. --head-h is measured at runtime because the site
   header wraps to two rows on narrow screens, so a fixed offset would clip it. */
.section-nav{position:sticky;top:var(--head-h,74px);z-index:20;margin:0 calc(-1 * clamp(1rem,4vw,3rem));padding:.55rem clamp(1rem,4vw,3rem);background:#050505;border-bottom:1px solid var(--line)}
.section-nav-track{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.section-nav-track::-webkit-scrollbar{display:none}
.section-nav a{flex:0 0 auto;color:var(--muted);text-decoration:none;padding:.5rem .72rem;border:1px solid var(--line);border-radius:999px;font:700 .68rem var(--fd);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.section-nav a:hover{color:var(--ink);border-color:var(--line2);background:rgba(255,255,255,.04)}
.section-nav a[aria-current="true"]{color:#111900;background:linear-gradient(var(--green2),var(--green));border-color:var(--green)}
/* keep anchor targets clear of both sticky bars */
section[id]{scroll-margin-top:calc(var(--head-h,74px) + 4rem)}

footer{max-width:1280px;margin:auto;padding:2.4rem clamp(1rem,4vw,3rem) 3rem;display:grid;gap:1.2rem;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line)}
footer b{color:var(--ink);font-family:var(--fd)}
.foot-links{display:flex;flex-wrap:wrap;gap:.9rem}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.responsible{padding-top:1.1rem;border-top:1px solid var(--line);font-size:.73rem}

@media(min-width:700px){
  .grid.two{grid-template-columns:1fr 1fr}
  .toc{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
}
@media(max-width:640px){
  .site-head{align-items:stretch;flex-direction:column;padding-top:.7rem;gap:.5rem}
  .site-tabs{margin-left:0;padding-bottom:.6rem;gap:.25rem}
  .site-tabs a{padding:.5rem .55rem;font-size:.59rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}

/* Header social icons — monochrome, green hover with a gold glow. */
.social{display:flex;align-items:center;gap:.08rem;flex:0 0 auto;margin-left:.5rem;padding-left:.6rem;border-left:1px solid rgba(255,255,255,.12)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.45rem;color:#7d847f;text-decoration:none;transition:color .18s ease,background .18s ease,filter .18s ease}
.social a:hover{color:#b4f724;background:rgba(255,255,255,.05);filter:drop-shadow(0 0 7px rgba(240,163,42,.45))}
.social a:focus-visible{outline:2px solid #b4f724;outline-offset:2px}
.social svg{width:1.05rem;height:1.05rem;display:block;fill:currentColor}
@media(max-width:1040px){.social{margin-left:0;padding-left:0;border-left:0}}
@media(max-width:640px){.social a{width:1.85rem;height:1.85rem}.social svg{width:.98rem;height:.98rem}}

/* ---- Header layout v2 -------------------------------------------------
   One shared max-width container on every page. Three areas: brand left,
   navigation distributed across the centre, social + action on the right.
   Appended last so it supersedes the earlier .site-head/.site-tabs rules. */
.site-head{display:block;min-height:0;padding:0;gap:0}
.head-inner{max-width:1280px;margin:0 auto;min-height:74px;padding:0 clamp(1rem,4vw,3rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,3vw,2.4rem)}
.head-inner>.brand{margin:0}
.site-tabs{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(.2rem,1.1vw,.9rem);margin-left:0;margin-right:0}
.head-right{display:flex;align-items:center;gap:.55rem;justify-self:end}
.head-right .social{margin-left:0;padding-left:0;border-left:0}
.head-right .kick-pill{position:static;margin-left:.15rem}

@media(max-width:1180px){
  .site-tabs a{padding:.55rem .5rem;font-size:.62rem}
  .head-inner{gap:1rem}
}
/* stack before anything can collide */
@media(max-width:1040px){
  .head-inner{grid-template-columns:1fr auto;grid-template-areas:"brand right" "tabs tabs";row-gap:.45rem;padding-top:.65rem;padding-bottom:.6rem}
  .head-inner>.brand{grid-area:brand}
  .head-right{grid-area:right}
  .site-tabs{grid-area:tabs;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem}
  .site-tabs::-webkit-scrollbar{display:none}
  .site-tabs a{flex:0 0 auto}
}
@media(max-width:640px){
  .head-inner{min-height:0}
  .site-tabs a{padding:.5rem .55rem;font-size:.59rem}
  .head-right .kick-pill{display:none}
}

/* ---- Casino offers page — comparison rows ---------------------------- */
.offer-list{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.85rem;max-width:none}
.offer-row{display:grid;grid-template-columns:minmax(9rem,13rem) minmax(0,1fr) minmax(11rem,13rem);align-items:center;gap:1.4rem;padding:1.25rem 1.4rem;border:1px solid var(--line);border-radius:.9rem;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.008)),var(--surface);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.offer-row:hover{border-color:rgba(180,247,36,.38);transform:translateY(-2px)}

.offer-brand{display:flex;align-items:center;justify-content:center;min-height:3.4rem}
.offer-logo{max-width:100%;max-height:3.4rem;width:auto;height:auto;object-fit:contain;display:block}
.offer-wordmark{font:900 clamp(1.35rem,2.6vw,1.75rem)/1 var(--fd);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.offer-wordmark b{color:var(--gold)}

.offer-body{min-width:0}
.offer-tag{display:inline-block;padding:.3rem .6rem;border-radius:999px;font:800 .55rem var(--fd);letter-spacing:.12em;text-transform:uppercase}
.offer-tag.main{color:#111900;background:linear-gradient(var(--green2),var(--green))}
.offer-tag.new{color:#1a1200;background:linear-gradient(var(--gold2),var(--gold))}
.offer-headline{margin:.55rem 0 0;font:900 clamp(1.15rem,2.6vw,1.5rem)/1.15 var(--fd);text-transform:uppercase;color:var(--ink)}
.offer-headline em{display:block;font-style:normal;font-size:.66em;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:.15rem}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0 0;padding:0;max-width:none}
.chips li{display:flex;align-items:baseline;gap:.35rem;padding:.42rem .65rem;border:1px solid var(--line);border-radius:.45rem;background:var(--inset);color:var(--ink);font:700 .74rem var(--fb)}
.chips li::marker{content:""}
.chips span{color:var(--subtle);font:800 .55rem var(--fd);letter-spacing:.1em;text-transform:uppercase}
.offer-note{margin:.8rem 0 0;color:var(--muted);font-size:.82rem;max-width:62ch}

.offer-cta{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;text-align:center}
.offer-cta .btn{width:100%}
.offer-cta small{color:var(--subtle);font:700 .58rem var(--fd);letter-spacing:.1em;text-transform:uppercase}

@media(max-width:900px){
  .offer-row{grid-template-columns:1fr;gap:1rem;text-align:left}
  .offer-brand{justify-content:flex-start;min-height:0}
  .offer-cta{align-items:stretch}
}

/* ---- Casino offer artwork --------------------------------------------
   Compact first-party artwork beside each offer. Deliberately capped so the
   partner creatives support the comparison instead of taking over the page. */
.offer-row{grid-template-columns:minmax(13rem,16rem) minmax(0,1fr) minmax(11rem,13rem)}
.offer-brand{flex-direction:column;gap:.65rem;width:100%}
.offer-brand .offer-logo{max-width:9rem;max-height:2.7rem}
.offer-brand .lockly-logo{max-width:8.5rem;max-height:3.1rem;filter:drop-shadow(0 0 9px rgba(240,163,42,.18))}
.offer-brand .duelbits-logo{max-width:8.8rem;max-height:3.2rem}
.offer-brand .cocobet-logo{max-width:8.8rem;max-height:2.25rem}
.offer-visual{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;border:1px solid var(--line2);border-radius:.65rem;background:#080908}
.offer-visual.wide{aspect-ratio:4.2/1}
.offer-visual.promo{aspect-ratio:2.6/1}
.offer-banner{display:block;width:100%;height:100%;object-fit:cover}
.offer-visual.wide .offer-banner{object-fit:contain}
.offer-visual-label{position:absolute;right:.45rem;bottom:.4rem;padding:.28rem .48rem;border-radius:.35rem;background:rgba(5,5,5,.86);color:var(--green);font:900 .55rem var(--fd);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 2px 12px rgba(0,0,0,.45)}
@media(max-width:900px){
  .offer-row{grid-template-columns:1fr}
  .offer-brand{align-items:flex-start;max-width:22rem}
}

/* Offer rows v2 — more breathing room, larger brand column and artwork */
.offer-list{gap:1.15rem}
.offer-row{grid-template-columns:minmax(16rem,20.5rem) minmax(0,1fr) minmax(11.5rem,13rem);gap:1.8rem;padding:1.65rem 1.75rem}
.offer-brand{gap:.9rem}
.offer-brand .offer-logo{max-width:11rem;max-height:3.2rem}
.offer-brand .lockly-logo{max-width:10.5rem;max-height:3.6rem}
.offer-brand .duelbits-logo{max-width:11rem;max-height:4rem}
.offer-brand .cocobet-logo{max-width:10.5rem;max-height:2.7rem}
.offer-brand .degen-logo{max-width:11rem;max-height:3rem}
.offer-visual.duelbits-visual{aspect-ratio:934/238}
.offer-visual.duelbits-visual .offer-banner{object-fit:cover}
.offer-headline{margin:.7rem 0 0}
.chips{gap:.5rem;margin:1rem 0 0}
.chips li{padding:.5rem .78rem;line-height:1.25}
.offer-note{margin:.9rem 0 0;line-height:1.55}
.offer-cta{gap:.65rem}

/* Long operator terms collapse so the row stays scannable — no text removed */
.offer-terms{margin:.9rem 0 0}
.offer-terms>summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;color:var(--subtle);font:800 .58rem var(--fd);letter-spacing:.1em;text-transform:uppercase}
.offer-terms>summary::-webkit-details-marker{display:none}
.offer-terms>summary::after{content:"+";font-size:.9rem;line-height:1}
.offer-terms[open]>summary::after{content:"–"}
.offer-terms>summary:hover{color:var(--green)}
.offer-terms>summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:.25rem}
.offer-terms .offer-note{margin-top:.55rem}

@media(max-width:900px){
  .offer-row{grid-template-columns:1fr;gap:1.15rem;padding:1.35rem 1.25rem}
  .offer-brand{max-width:24rem}
  .offer-brand .offer-logo,.offer-brand .lockly-logo,.offer-brand .duelbits-logo,.offer-brand .cocobet-logo,.offer-brand .degen-logo{max-width:9.5rem}
}