/* kennel.gg — the site shell. One design language for every page.
 *
 * The palette, type and nav are lifted verbatim from /cashcup/, which is the reference
 * implementation of the brand: graphite ground, olive and brass accents, Saira Condensed
 * display over IBM Plex. Pages that still carry their own inline copy of these rules are
 * unaffected — this file is linked BEFORE any page <style>, so page-specific rules always
 * win and the two can be reconciled a page at a time.
 *
 * Sections, in order: tokens · reset · grain · nav + dropdowns + mobile menu · language
 * selector · buttons · shared type · cards and panels · footer · reveal.
 */

:root{--ground:#0B0E10;--panel:#14181C;--panel2:#0F1317;--line:#242B31;--grid:#1E2429;--bone:#E8E5DD;--muted:#B4BCC2;--dim:#828B93;--olive:#8C9A5B;--olive2:#A9B86B;--amber:#C99A3B;--amber2:#E0B24E;--cyan:#5FA9BE;--ink:#0A0D0F;--good:#5BC46A;--bad:#E8715F;--ctx:#59636A;--disp:"Saira Condensed",Impact,sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--bone);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber2);outline-offset:2px}
section[id],header[id]{scroll-margin-top:78px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- site nav (same as every kennel.gg page) ---- */
nav{position:sticky;top:0;z-index:50;background:rgba(11,14,16,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px;object-fit:contain}
.brand .n{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.5px;line-height:1;white-space:nowrap}
.navlinks{margin-left:auto;display:flex;gap:24px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.navlinks a{transition:.2s}.navlinks a:hover{color:var(--bone)}.navlinks a.on{color:var(--amber2)}
.btn{font-family:var(--disp);font-weight:800;letter-spacing:.5px;text-transform:uppercase;font-size:15px;padding:11px 20px;border-radius:9px;border:1px solid var(--line);background:#12171B;color:var(--bone);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s;white-space:nowrap;flex-shrink:0}
.btn:hover{border-color:var(--olive);transform:translateY(-1px)}
.btn.brass{background:linear-gradient(180deg,var(--amber2),#a97f2c);border-color:var(--amber2);color:#1a1305}
.btn.olive{background:linear-gradient(180deg,var(--olive),#75834b);border-color:var(--olive2);color:#0B0E10}
.btn.brass:hover,.btn.olive:hover{filter:brightness(1.08)}
.navdrop{position:relative;display:inline-flex;align-items:center}
.navdrop>a{display:inline-flex;align-items:center;gap:5px}
.dmenu{display:none;position:absolute;top:100%;left:-14px;min-width:190px;padding:6px 0;background:rgba(11,14,16,.98);border:1px solid var(--line);backdrop-filter:blur(10px);z-index:60}
.dmenu a{display:block;padding:10px 16px;font-size:12px;letter-spacing:1px;color:var(--muted);white-space:nowrap}
.dmenu a:hover{color:var(--bone);background:rgba(140,154,91,.12)}
.navdrop:hover .dmenu,.navdrop:focus-within .dmenu,.navdrop.open .dmenu{display:block}
.dcar{background:none;border:none;color:inherit;cursor:pointer;padding:4px;font:inherit;font-size:8px;line-height:1;opacity:.7}
.menubtn{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;margin-left:auto}
.menubtn span{display:block;width:22px;height:2px;background:var(--bone);border-radius:2px;transition:transform .2s,opacity .2s}
.menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menubtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilemenu{display:none;position:fixed;inset:66px 0 0 0;z-index:49;background:rgba(11,14,16,.98);backdrop-filter:blur(10px);overflow-y:auto}
.mobilemenu.open{display:block}
.mobilemenu-inner{max-width:1200px;margin:0 auto;padding:22px 24px 40px;display:flex;flex-direction:column}
.mobilemenu .mlink{display:block;padding:17px 2px;font-family:var(--mono);font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.mobilemenu .mlink.on{color:var(--amber2)}
.mobilemenu .btn{margin-top:24px;font-size:16px;padding:14px}
body.navopen{overflow:hidden}
@media(max-width:1100px){.navlinks{display:none}.menubtn{display:flex}nav .wrap>a.btn.brass{display:none}}
@media(min-width:1101px){.mobilemenu{display:none!important}}

/* ---- shared type ---- */
.klabel{font-family:var(--mono);font-size:11px;letter-spacing:4px;color:var(--amber2);text-transform:uppercase;margin-bottom:14px}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.6vw,52px);text-transform:uppercase;letter-spacing:-.5px;line-height:.96;text-wrap:balance}
h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:24px;letter-spacing:.3px;line-height:1.05}
.lead{color:var(--muted);font-size:17px;line-height:1.65;max-width:62ch;margin-top:16px}
.lead b,.lead strong{color:var(--bone);font-weight:500}
section.blk{padding:92px 0;border-top:1px solid var(--line)}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}


/* ---- language selector (the globe in the nav, and the list in the mobile menu) ---- */
.langsel{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.langsel>button{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid transparent;border-radius:8px;
  padding:7px 9px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);transition:.18s}
.langsel>button:hover{color:var(--bone);border-color:var(--line)}
.langsel>button svg{width:15px;height:15px;flex:none;opacity:.85}
.langsel>button .cur{font-weight:600}
/* the nav must never wrap onto a second line: it is a fixed 66px tall */
nav .navlinks a{white-space:nowrap}
.langsel>button .cv{font-size:8px;opacity:.7}
.langmenu{display:none;position:absolute;top:100%;right:0;margin-top:2px;min-width:210px;max-height:62vh;overflow-y:auto;
  padding:6px 0;background:rgba(11,14,16,.98);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(10px);
  z-index:70;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.langsel.open .langmenu{display:block}
.langmenu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;font-size:14px;color:var(--muted);white-space:nowrap}
.langmenu a:hover{color:var(--bone);background:rgba(140,154,91,.12)}
.langmenu a[aria-current="true"]{color:var(--amber2)}
.langmenu a .tag{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--faint,#59636A);text-transform:uppercase}
.langmenu a[aria-current="true"] .tag{color:var(--amber2)}
.mlangs{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.mlangs .h{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.mlangs .list{display:flex;flex-wrap:wrap;gap:10px 18px}
.mlangs a{font-size:15px;color:var(--muted)}
.mlangs a[aria-current="true"]{color:var(--amber2)}

/* the offer bar: shown only when the visitor's browser prefers a language this page is not
   in. It never redirects — a shared link always opens in the language it points at. */
.langoffer{display:none;background:rgba(224,178,78,.09);border-bottom:1px solid rgba(224,178,78,.28);font-size:14px;color:var(--bone)}
.langoffer.show{display:block}
.langoffer .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 24px}
.langoffer a{color:var(--amber2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.langoffer button{margin-left:auto;background:none;border:1px solid var(--line);border-radius:7px;color:var(--muted);
  font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:6px 10px;cursor:pointer}
.langoffer button:hover{color:var(--bone)}

/* a page that is only partly translated says so rather than pretending */
.langpartial{font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:var(--dim);border:1px solid var(--line);
  border-left:2px solid var(--amber);border-radius:8px;padding:10px 14px;margin:0 0 26px}
.langpartial a{color:var(--olive2);text-decoration:underline;text-underline-offset:3px}

/* ---- panels, cards, tables: the shapes /cashcup/ established ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:34px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;transition:.2s}
.card:hover{border-color:rgba(140,154,91,.55);transform:translateY(-2px)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:15px;line-height:1.6}
.ktable{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.ktable th,.ktable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.ktable th{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);font-weight:600}
.ktable td b{color:var(--bone);font-weight:600}
.ktable tr:hover td{background:rgba(140,154,91,.05)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.3px;list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--amber2);font-family:var(--mono);font-weight:400;flex:none;line-height:1.1}
.faq details[open] summary::before{content:"−"}
.faq details p{color:var(--muted);font-size:15px;line-height:1.7;margin-top:12px;max-width:74ch}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:44px 0;color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:1px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center}
footer .soc{display:flex;gap:18px}
footer .soc a{color:var(--muted)}
footer .soc a:hover{color:var(--bone)}
footer .legal{display:flex;gap:18px}
/* The app pages (/wager/, /account/) narrow .wrap for their own content. The shell's own
   bars must stay full width, so they are addressed more specifically than a bare .wrap. */
nav>.wrap,footer>.wrap,.langoffer>.wrap,.mobilemenu-inner{max-width:1200px;margin-left:auto;margin-right:auto}
nav>.wrap{padding-left:24px;padding-right:24px}

/* ---- reveal on scroll ----
 * Elements start hidden ONLY once JS has confirmed it can reveal them (html.js-rev), so a
 * browser that never fires the observer, a failed script or a stalled load shows the page
 * rather than a column of blanks. That is the laptop bug: the animation not playing must
 * never mean the content is missing. */
.js-rev .rev{opacity:0;transform:translateY(14px)}
.js-rev .rev.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){.js-rev .rev,.js-rev .rev.in{opacity:1;transform:none;transition:none}}