/* Fiddleday shared UI for the game pages and the how-to page (load it after /assets/theme.css; a game's own <style> may follow it):
   tablet + desktop layout, the desktop side panel, the below-the-fold copy + FAQ, the archive solution panel and the SVG board colours.
   Phones (< 600px) are deliberately untouched except for the copy + FAQ under the game. */
:root{
  /* on paper (how-to-play): theme.css tokens */
  --fd-text:var(--ink); --fd-muted:var(--mute); --fd-card:var(--card); --fd-line:var(--line); --fd-acc:var(--gold); --fd-acc-t:var(--gold-ink);
  /* board pictures (assets/board-svg.js: how-to examples, archive solutions): the Pondlight pond in both themes,
     because the board is its own surface like a game colour */
  --bw-w:#3A2D70; --bw-grid:rgba(248,242,228,.08); --bw-rock:#A39BB5; --bw-pad:#8A73C8; --bw-bud:#F2B9C6; --bw-bud-line:#C98AA6;
  --bw-stone:#F0B840; --bw-num:#F8F2E4; --bw-ripple:#F8F2E4; --bw-ring:#F8F2E4; --bw-lit:#F0B840; --bw-petal:#FBE3EA;
  --bw-wet:#F08664; --bw-cancel:#F8F2E4;
}
/* on a game's colour world (<body class="world" data-game="...">): cream text on deep game-colour cards, gold accents.
   The side panel, the copy + FAQ block and the archive solution panel read these; a game can still override any of them. */
body.world{
  --fd-text:var(--cream); --fd-muted:rgba(248,242,228,.8); --fd-card:var(--g-deep); --fd-line:rgba(248,242,228,.2);
  --fd-acc:var(--gold); --fd-acc-t:var(--gold-tint);
}
.fd-bsvg{display:block;width:100%;height:auto}

/* ---- below the fold: what it is + FAQ (all screen sizes) ---- */
.fd-seo{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--fd-line);color:var(--fd-muted);font-size:16px;line-height:1.6;text-align:left}
.fd-seo h2{margin:0 0 10px;font-size:22px;line-height:1.25;color:var(--fd-text);letter-spacing:-.01em}
.fd-seo h3{margin:0 0 4px;font-size:16px;line-height:1.4;color:var(--fd-text)}
.fd-seo p{margin:0 0 12px}
.fd-seo a{color:var(--fd-acc-t)}
.fd-seo .fd-faq{margin-top:6px}
.fd-seo .fd-faq h2{font-size:19px;margin-top:26px}
.fd-seo .fd-qa{margin:0 0 14px}
.fd-seo .fd-qa p{margin:0}
.fd-seo .fd-more{display:flex;flex-wrap:wrap;gap:4px 18px;margin:18px 0 0;font-size:14px}
.fd-seo .fd-more a{display:inline-flex;align-items:center;min-height:44px}

/* the desktop-only pieces are hidden everywhere else */
.dk-side,.dk-keys{display:none}
.fd-ad-slot[hidden]{display:none}

/* ---- tablet (600-959): a wider single column, bigger board ---- */
@media (min-width:600px){
  .app{max-width:680px}
}

/* ---- desktop (>= 960) ---- */
@media (min-width:960px){
  .app{max-width:1280px;padding-left:24px;padding-right:24px}
  .dk-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:0 32px;align-items:start;justify-content:center}
  .dk-center{min-width:0}
  .dk-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:16px;margin-top:4px}
  .dk-card{background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--radius,14px);padding:16px;color:var(--fd-text)}
  .dk-card h2{margin:0 0 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--fd-muted)}
  .dk-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
  .dk-sgrid b{display:block;font-size:28px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
  .dk-sgrid span{display:block;font-size:13px;color:var(--fd-muted);margin-top:2px}
  .dk-next{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--fd-line);font-size:14px;color:var(--fd-muted);text-align:center}
  .dk-next b{display:block;font-size:22px;color:var(--fd-text);font-variant-numeric:tabular-nums;letter-spacing:.03em}
  .dk-how ol{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.5;color:var(--fd-muted)}
  .dk-how li{margin:0 0 6px}
  .dk-how li b{color:var(--fd-text)}
  .dk-how a{font-size:14px;font-weight:600;color:var(--fd-acc-t)}
  .dk-nextgame{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fd-text);transition:border-color .2s,transform .15s}
  .dk-nextgame:hover{border-color:var(--ng,var(--fd-acc))}
  .dk-nextgame:active{transform:scale(.985)}
  .dk-nextgame i{flex:none;width:44px;height:44px;border-radius:12px;background:var(--ng,var(--fd-acc));display:grid;place-items:center;font-style:normal;font-size:22px}
  .dk-nextgame small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--fd-muted)}
  .dk-nextgame b{display:block;font-size:17px;line-height:1.25}
  .dk-nextgame span{display:block;font-size:14px;color:var(--fd-muted)}
  .fd-ad-slot{width:300px;min-height:250px;max-width:100%}
  .fd-ad-slot:not([hidden]){display:block}
  .dk-keys{display:block;margin:14px auto 0;text-align:center;font-size:14px;line-height:2;color:var(--fd-muted)}
  .dk-keys kbd{display:inline-block;min-width:26px;padding:0 7px;margin:0 2px;border:1px solid var(--fd-line);border-bottom-width:2px;border-radius:7px;background:var(--fd-card);color:var(--fd-text);font:600 13px/22px var(--font);text-align:center}
  .dk-keys span{white-space:nowrap;margin:0 8px}
  .fd-seo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;margin-top:56px}
  .fd-seo .fd-copy,.fd-seo .fd-faq{min-width:0}
  .fd-seo .fd-faq h2{margin-top:0}
  .fd-seo .fd-more{grid-column:1/-1}
}
@media (min-width:1240px){
  .dk-cols{grid-template-columns:minmax(0,1fr) 320px;gap:0 48px}
  .dk-side{width:320px}
}

/* ================= archived-day solution (assets/oldsol.js) ================= */
.fd-sol{margin:22px 0 0;background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--radius,14px);padding:16px;text-align:center;color:var(--fd-muted);font-size:15px}
.fd-sol[hidden]{display:none}
.fd-sol h2{margin:0 0 6px;font-size:17px;color:var(--fd-text)}
.fd-sol p{margin:0 0 10px}
.fd-sol button{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;color:var(--fd-text);background:var(--fd-card);border:1px solid var(--fd-line);border-radius:14px;min-height:44px;padding:0 18px;font-weight:700;font-size:15px;cursor:pointer}
.fd-sol button[hidden]{display:none}
.fd-sol .fd-solfig{max-width:280px;margin:12px auto 0}
.fd-sol ol{margin:12px auto 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:14px}
.fd-sol ol li{background:var(--fd-line);color:var(--fd-text);border-radius:999px;padding:3px 11px;font-weight:600}
.fd-sol .fd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0}
.fd-sol .fd-steps figcaption{font-size:13px;margin-top:4px}