/* Fiddleday design system: tokens + components. Documented in _docs/THEME.md.
   Load it FIRST on every page (before a page's own CSS). The hub and static pages use it now; the four game pages
   adopt it in phase 2 (set <body data-game="stakes|paint|brim|scout"> to get that game's colour world in --g/--g-deep/--g-tint). */

@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/schibsted-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/schibsted-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ================= tokens ================= */
:root{
  /* surfaces + text (light) */
  --paper:#F4EDE0; --ink:#1E1A14; --mute:#6B6153; --cream:#F8F2E4; --card:#FBF7EC; --card-2:#EDE4D2;
  --line:rgba(30,26,20,.13); --line-strong:rgba(30,26,20,.28); --scrim:rgba(30,26,20,.55);
  /* the five colour sets: base / deep (shadows, pressed, hard offset) / tint (highlights, light fills) */
  --gold:#F0B840;  --gold-deep:#BD8A1E;  --gold-tint:#F8D37A;
  --green:#1F6A47; --green-deep:#164E34; --green-tint:#2F8A5E;
  --red:#D94A2E;   --red-deep:#A83420;   --red-tint:#F08664;
  --lake:#2F7FB0;  --lake-deep:#225E85;  --lake-tint:#9AD2EE;
  --plum:#45377F;  --plum-deep:#2F2459;  --plum-tint:#8A73C8;
  /* text-on-paper versions of the game colours (AA on paper) */
  --green-ink:#1F6A47; --red-ink:#B83A22; --lake-ink:#225E85; --plum-ink:#45377F; --gold-ink:#8C6210;
  /* default colour world = the site itself (ink). Game pages and tiles override via [data-game] */
  --g:var(--ink); --g-deep:#000; --g-tint:var(--mute); --g-ink:var(--ink);
  /* type */
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-display:clamp(34px,6vw,46px); --fs-poster:clamp(56px,9vw,100px); --fs-h2:clamp(26px,3.4vw,34px); --fs-h3:22px;
  --fs-body:16px; --fs-small:14px; --fs-kicker:12px; --lh-body:1.5;
  --track-display:-.035em; --track-kicker:.14em;
  /* shape + depth */
  --radius-s:12px; --radius:18px; --radius-l:22px; --radius-pill:999px;
  --shadow-card:0 10px 30px rgba(50,35,10,.14); --shadow-float:0 18px 40px rgba(50,35,10,.22);
  --hard:5px; --hard-s:4px; /* the offset "block" shadow of buttons: box-shadow:0 var(--hard) 0 <deep> */
  --ease-spring:cubic-bezier(.3,1.5,.5,1); --t-fast:.15s; --t:.22s;
  /* aliases for older CSS (site.css, fd-ui.css board colours, side panel) */
  --bg:var(--paper); --text:var(--ink); --muted:var(--mute); --accent:var(--gold); --acc-t:var(--gold-ink); --on-accent:var(--ink);
  --pink:var(--red); --pink-t:var(--red-ink); --amber:var(--gold); --amber-t:var(--gold-ink); --warn:var(--red-ink); --shadow:var(--shadow-card);
  --card2:var(--card-2);
  color-scheme:light;
}
/* dark: deep-ink paper, same game colours (they sit on their own surfaces), cream text */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16130E; --ink:#F4EDE0; --mute:#A99D8A; --card:#211C15; --card-2:#2B251C;
    --line:rgba(244,237,224,.14); --line-strong:rgba(244,237,224,.3); --scrim:rgba(0,0,0,.6);
    --green-ink:#5CB987; --red-ink:#F5876B; --lake-ink:#8FC9EC; --plum-ink:#B3A1E6; --gold-ink:#F0B840;
    --g-deep:#000; --shadow-card:0 10px 30px rgba(0,0,0,.45); --shadow-float:0 18px 40px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#16130E; --ink:#F4EDE0; --mute:#A99D8A; --card:#211C15; --card-2:#2B251C;
  --line:rgba(244,237,224,.14); --line-strong:rgba(244,237,224,.3); --scrim:rgba(0,0,0,.6);
  --green-ink:#5CB987; --red-ink:#F5876B; --lake-ink:#8FC9EC; --plum-ink:#B3A1E6; --gold-ink:#F0B840;
  --g-deep:#000; --shadow-card:0 10px 30px rgba(0,0,0,.45); --shadow-float:0 18px 40px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* colour worlds: put data-game on <body> (whole page) or on a component (one tile) */
[data-game="stakes"]{--g:var(--green);--g-deep:var(--green-deep);--g-tint:var(--green-tint);--g-ink:var(--green-ink)}
[data-game="paint"]{--g:var(--red);--g-deep:var(--red-deep);--g-tint:var(--red-tint);--g-ink:var(--red-ink)}
[data-game="brim"]{--g:var(--lake);--g-deep:var(--lake-deep);--g-tint:var(--lake-tint);--g-ink:var(--lake-ink)}
[data-game="scout"],[data-game="pond"]{--g:var(--plum);--g-deep:var(--plum-deep);--g-tint:var(--plum-tint);--g-ink:var(--plum-ink)}
[data-game="gold"]{--g:var(--gold);--g-deep:var(--gold-deep);--g-tint:var(--gold-tint);--g-ink:var(--gold-ink)}

/* ================= base ================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100dvh;font-size:var(--fs-body);line-height:var(--lh-body)}
/* a game page paints the whole page in its colour: <body data-game="paint" class="world"> */
body.world{background:var(--g);color:var(--cream)}
a{color:var(--g-ink)}
/* the outline follows the element's own corners (a pill stays a pill when focused); bare text links get soft corners */
a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a:not([class]):focus-visible,.topnav a:focus-visible,.site-foot a:focus-visible{border-radius:6px;outline-offset:2px}
.display{font-weight:900;letter-spacing:var(--track-display);line-height:.96}
.kicker{font-size:var(--fs-kicker);font-weight:800;letter-spacing:var(--track-kicker);text-transform:uppercase}
.kicker.rule{display:inline-flex;align-items:center;gap:8px}
.kicker.rule::before{content:"";width:22px;height:2px;background:currentColor}
.num{font-variant-numeric:tabular-nums}
.page{max-width:1240px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
@media (min-width:600px){.page{padding-left:24px;padding-right:24px}}
@media (min-width:1024px){.page{padding:26px 40px 28px}}

/* ================= buttons ================= */
/* A bare <button> is reset to nothing (font, colour, background, border, padding): the games style their own controls
   (handles, swatches, cards, switches, tabs) from a clean slate and never need a local reset.
   The card-button look is opt-in: .btn is the base; .btn-primary / button.primary (gold with hard shadow), .btn-ink (ink pill),
   .btn-ghost (outline on a coloured world) carry it too, with or without .btn. .btn-cream / .playpill is the cream "Play" pill
   (hub tiles, next-game cards) and only adds its own look. .btn-block fills its row. */
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;min-width:0;min-height:0;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.45;cursor:default}
button svg{width:18px;height:18px;flex:none}
.btn,.btn-primary,:where(button).primary,.btn-ink,.btn-ghost{font:inherit;font-weight:800;font-size:16px;line-height:1.2;color:var(--ink);background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--radius);min-height:46px;min-width:44px;padding:0 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;touch-action:manipulation;transition:transform var(--t-fast) var(--ease-spring),background var(--t),box-shadow var(--t),opacity var(--t),color var(--t);white-space:nowrap}
.btn:active,:is(.btn-primary,button.primary,.btn-ink,.btn-ghost):active:not(:disabled){transform:translateY(2px)}
.btn[aria-disabled="true"]{opacity:.45;cursor:default}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary,button.primary{background:var(--gold);color:#1E1A14;border-color:transparent;box-shadow:0 var(--hard) 0 var(--gold-deep);border-radius:var(--radius-pill);padding:0 24px}
.btn-primary:active,button.primary:active:not(:disabled){box-shadow:0 2px 0 var(--gold-deep);transform:translateY(3px)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:transparent;border-radius:var(--radius-pill);min-height:42px;padding:0 18px;font-size:15px}
.btn-ghost{background:transparent;color:inherit;border:1.5px solid rgba(248,242,228,.4);border-radius:var(--radius)}
.btn-cream,.playpill{display:inline-flex;align-items:center;justify-content:center;font-weight:800;line-height:1.2;white-space:nowrap;background:var(--cream);color:var(--g-deep);border-color:transparent;border-radius:var(--radius-pill);box-shadow:0 var(--hard-s) 0 var(--g-deep);min-height:44px;padding:0 18px 0 20px;font-size:15px;gap:8px;transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast)}
.btn-cream:active,.playpill:active{box-shadow:0 1px 0 var(--g-deep);transform:translateY(3px)}
.playpill svg{width:15px;height:15px}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
/* round icon button (top bars, sheet close): every one presses in */
.ib{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:50%;background:rgba(0,0,0,.14);border:0;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--t-fast) var(--ease-spring),background var(--t)}
.ib svg{width:20px;height:20px;display:block}
.ib:active{transform:scale(.92)}
.ib{position:relative}
.ib::after{content:"";position:absolute;inset:-2px;border-radius:50%} /* 44px hit area around the 40px disc */
body:not(.world) .ib{background:var(--card-2)}
/* hover only where there is a pointer that hovers: a finger tap must not leave a button stuck in its hover look */
@media (hover:hover){
  .btn:hover{background:var(--card-2)}
  .btn-primary:hover,button.primary:hover{background:var(--gold-tint)}
  .btn-ink:hover{opacity:.88}
  .btn-ghost:hover{background:rgba(248,242,228,.1)}
  .btn-cream:hover,.playpill:hover{transform:translateY(-1px);box-shadow:0 calc(var(--hard-s) + 1px) 0 var(--g-deep)}
  .ib:hover{background:rgba(0,0,0,.24)}
  body:not(.world) .ib:hover{background:var(--line-strong)}
  .topnav a:hover{text-decoration:underline;text-underline-offset:4px}
  .gtop.tools .acts .ib:hover{background:rgba(0,0,0,.16)}
  .tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
  body:not(.world) .chip:hover{background:var(--card-2)}
  .site-foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
}

/* ================= top bar (hub + static pages) ================= */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.wordmark svg{width:34px;height:34px;flex:none}
.wordmark b{font-weight:900;font-size:30px;letter-spacing:-.04em;line-height:1}
@media (max-width:359px){.wordmark b{font-size:25px}.wordmark svg{width:28px;height:28px}.topnav{gap:12px}.topnav .btn-ink{padding:0 13px}}
.wordmark b i{font-style:normal;color:var(--red)}
.topnav{display:flex;align-items:center;gap:18px;font-size:15px;font-weight:700}
.topnav a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.topnav .btn-ink{min-height:40px}
/* week dots + streak text */
.week{display:inline-flex;align-items:center;gap:7px;color:var(--mute);font-weight:500;font-size:15px;white-space:nowrap}
.week i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);display:block;flex:none}
.week i.on{background:var(--ink)}
.week i.today{border-color:var(--red);background:var(--red)}
.week i.today.off{background:transparent}
.week i.fz{border-style:dashed;border-color:var(--lake-ink)}  /* a day saved by the weekly streak freeze */
.week .fzn{margin-left:2px;font-size:12px;font-weight:800;color:var(--lake-ink)}
button.week{font:inherit;font-weight:500;font-size:15px;color:var(--mute);min-height:44px;padding:0 4px;margin:0 -4px;border-radius:10px}
@media (hover:hover){button.week:hover span{color:var(--ink)}}
.week span{margin-left:4px}

/* game-page top bar (phase 2): back, title, number */
.gtop{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;min-height:48px}
.gtop .t{text-align:center;font-weight:900;font-size:24px;letter-spacing:-.04em;line-height:1}
.gtop .no{font-size:13px;opacity:.75;font-weight:600;text-align:right;white-space:nowrap}
/* the game pages' variant with tool buttons (all four games use exactly this):
   <header class="gtop tools"><a class="ib back" href="/">…</a>
     <div class="mid"><span class="t">Brim</span><span class="no">No. 292 · Tue 20 Oct</span></div>
     <div class="acts"><button class="ib">help</button><button class="ib">stats</button><button class="ib">settings</button></div></header>
   The icon buttons on the right are transparent (only a hover tint); the back button keeps the .ib disc. */
.gtop.tools{grid-template-columns:1fr auto 1fr;gap:6px;min-height:56px}
.gtop.tools .back{justify-self:start}
.gtop.tools .mid{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.gtop.tools .t{white-space:nowrap}
.gtop.tools .no{text-align:center}
.gtop.tools .acts{justify-self:end;display:flex;gap:4px}
.gtop.tools .acts .ib{background:transparent}
@media (min-width:960px){.gtop.tools{margin-bottom:10px}}
@media (max-width:379px){.gtop.tools .ib{width:36px;height:36px;min-width:36px;min-height:36px}.gtop.tools .ib::after{inset:-4px}.gtop.tools .acts{gap:2px}.gtop.tools .t{font-size:21px}}

/* ================= stat card ("Your purse") ================= */
.stat{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--g-deep);color:var(--cream);border-radius:var(--radius);padding:12px 16px}
.stat .l{display:flex;align-items:center;gap:10px;font-size:14px;opacity:.85;font-weight:600}
.stat .l svg{width:26px;height:26px}
.stat b{font-weight:900;font-size:34px;color:var(--gold);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat b small{font-size:11px;color:var(--cream);opacity:.6;font-weight:700;letter-spacing:.1em;margin-left:6px;vertical-align:middle}
/* on paper (hub, static pages) the stat card is a cream card */
body:not(.world) .stat{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
body:not(.world) .stat b{color:var(--gold-ink)}
body:not(.world) .stat b small{color:var(--mute);opacity:1}

/* ================= tile (game card on the hub) ================= */
.tile{position:relative;display:flex;flex-direction:column;min-height:296px;border-radius:var(--radius-l);background:var(--g);color:var(--cream);overflow:hidden;text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.08);transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t)}
.tile:active{transform:scale(.99)}
.tile .art{position:relative;width:100%;height:168px;margin-top:14px;flex:none;display:block}
.tile .art svg{width:100%;height:100%;display:block}
.tile .txt{margin-top:auto;padding:14px 110px 24px 24px}
.tile.wide-pill .txt{padding-right:150px}
.tile h3,.tile h2{margin:0;font-size:34px;font-weight:900;line-height:1;letter-spacing:-.035em;color:inherit}
.tile p{margin:7px 0 0;font-size:14.5px;line-height:1.35;color:rgba(248,242,228,.86);max-width:236px}
.tile .playpill{position:absolute;right:22px;bottom:22px}
/* narrow tiles (tiny phones, and three-up between 700 and 1199): the pill sits under the text instead of beside it */
@media (max-width:359px),(min-width:700px) and (max-width:1199px){.tile .txt,.tile.wide-pill .txt{padding:12px 24px 12px}.tile .playpill{position:static;align-self:flex-start;margin:0 0 22px 24px}.tile p{max-width:none}}
.tile .state{position:absolute;left:24px;top:18px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);color:var(--cream);border-radius:var(--radius-pill);padding:5px 11px;font-size:13px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;z-index:1}
.tile .state.gold{background:var(--gold);color:#1E1A14}
.tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ================= poster band (Stakes on the hub) ================= */
.poster{position:relative;display:block;border-radius:var(--radius-l);background:var(--g);color:var(--cream);overflow:hidden;text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.poster .tag{color:var(--gold)}
.poster h2{margin:0;font-size:var(--fs-poster);color:inherit}
.poster p{margin:0;font-size:17px;line-height:1.4;max-width:520px;color:rgba(248,242,228,.9)}
.poster p b{color:var(--gold);font-weight:700}
.poster .note{font-size:14px;color:rgba(248,242,228,.72)}
.poster .note b{color:var(--cream);font-weight:700}

/* ================= chips (bet presets, filters) ================= */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:1.5px solid rgba(248,242,228,.32);border-radius:var(--radius-s);padding:0 12px;font-weight:800;font-size:14px;color:inherit;background:transparent;white-space:nowrap;text-decoration:none;transition:transform var(--t-fast) var(--ease-spring),background var(--t),color var(--t)}
.chip:active{transform:translateY(1px)}
a.chip{min-height:44px}
.chip.on{background:var(--cream);color:var(--g);border-color:var(--cream)}
.chip.hot{background:var(--red);border-color:var(--red);color:var(--cream)}
body:not(.world) .chip{border-color:var(--line-strong);color:var(--ink);background:var(--card)}
body:not(.world) .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip b{font-variant-numeric:tabular-nums}

/* ================= cards on paper ================= */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;color:var(--ink)}
.card.tint{background:var(--card-2);border-color:transparent}
.rounds{display:flex;align-items:center;gap:4px}
.rounds i{flex:1;height:5px;border-radius:3px;background:rgba(248,242,228,.18)}
.rounds i.w{background:var(--gold)} .rounds i.cur{background:var(--cream)}
.rounds span{font-size:11px;opacity:.6;font-weight:700;margin-left:6px;white-space:nowrap}

/* ================= modal (centred sheet on desktop, bottom sheet on phones) ================= */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);padding:0}
.modal[hidden]{display:none}
.modal .sheet{width:100%;max-height:min(88vh,88dvh);overflow:auto;background:var(--paper);color:var(--ink);border-radius:var(--radius-l) var(--radius-l) 0 0;padding:18px 20px max(20px,env(safe-area-inset-bottom));box-shadow:var(--shadow-float);animation:fd-rise .25s var(--ease-spring)}
.modal .sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.modal .sheet-h h2{margin:0;font-size:var(--fs-h3);font-weight:900;letter-spacing:-.02em}
@media (min-width:600px){
  .modal{align-items:center;padding:24px}
  .modal .sheet{max-width:480px;border-radius:var(--radius-l);padding:22px 24px}
}
@keyframes fd-rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* ================= toast ================= */
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);max-width:calc(100vw - 32px);text-align:center;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:opacity .22s ease-out,transform .3s var(--ease-spring);z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ================= footer ================= */
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:22px;font-size:14px;color:var(--mute)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:0 18px}
.site-foot a{color:var(--mute);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-foot a.cur{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ================= motion ================= */
/* reduced motion: nothing travels or springs; a short opacity/colour change may stay (sheets and toasts still fade in) */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.modal .sheet,.toast{transition:opacity .15s ease-out!important}}
:root[data-reduced="1"] *{animation:none!important;transition:none!important}
:root[data-reduced="1"] :is(.modal .sheet,.toast){transition:opacity .15s ease-out!important}

/* ================= language menu (filled by assets/i18n.js into any [data-lang-picker]) ================= */
.langsel{font:600 15px/1.2 var(--font);color:inherit;background:transparent;border:1.5px solid currentColor;border-radius:var(--radius-pill);min-height:44px;padding:0 34px 0 14px;
  appearance:none;-webkit-appearance:none;cursor:pointer;max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.langsel option{color:#1E1A14;background:#FBF7EC}
.langsel:focus-visible{outline:3px solid var(--gold);outline-offset:2px}