/* Fiddleday shared UI for the game pages (loaded after each game's own inline <style>):
   tablet + desktop layout, the desktop side panel, the below-the-fold copy + FAQ, and the SVG board colours.
   Phones (< 600px) are deliberately untouched except for the copy + FAQ under the game. */
:root{
  --fd-text:var(--text); --fd-muted:var(--muted,var(--sub)); --fd-card:var(--card); --fd-line:var(--line);
  --fd-acc:var(--accent,var(--acc)); --fd-acc-t:var(--acc-t,var(--acc-ink,var(--acc)));
  --bw-w:#1B4566; --bw-grid:rgba(255,255,255,.07); --bw-rock:#5C6878; --bw-pad:#3FA46E; --bw-bud:#F6DCE8; --bw-stone:#FBF8F1; --bw-num:#fff;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --bw-w:#7DC3E3; --bw-grid:rgba(20,70,100,.12); --bw-rock:#98A2AE; --bw-pad:#5BBE88; --bw-bud:#FFE3EE; --bw-stone:#fff; --bw-num:#0B3A57; }
}
:root[data-theme="light"]{ --bw-w:#7DC3E3; --bw-grid:rgba(20,70,100,.12); --bw-rock:#98A2AE; --bw-pad:#5BBE88; --bw-bud:#FFE3EE; --bw-stone:#fff; --bw-num:#0B3A57; }
.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 Inter,system-ui,sans-serif;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}
}

/* ================= per-game layout ================= */
/* 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{font:inherit;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}

@media (min-width:600px){
  /* Pondlight: centre the board and keep everything under it exactly as wide as the board */
  .dk-center.pond .stage canvas{margin:0 auto}
  .dk-center.pond #result,.dk-center.pond .fd-sol{width:100%}
  .dk-center.pond .status,.dk-center.pond .ctrl,.dk-center.pond #how,.dk-center.pond .dk-keys,.dk-center.pond #result,.dk-center.pond .fd-sol{max-width:var(--bs,none);margin-left:auto;margin-right:auto}
  /* Paint Roller: bigger board on tablets */
  .dk-center.paint .board{max-width:560px}
  .dk-center.paint .result{max-width:520px;margin-left:auto;margin-right:auto}
  .dk-center.paint .fd-sol{max-width:520px;margin-left:auto;margin-right:auto}
}
@media (min-width:960px){
  /* ----- Paint Roller: left rail (day, target, colours, buttons) + big board ----- */
  .dk-center.paint{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:repeat(5,auto) 1fr repeat(4,auto);gap:0 28px;align-items:start}
  .dk-center.paint>*{grid-column:2}
  .dk-center.paint>.daybar{grid-column:1;grid-row:1;margin:6px 0 4px}
  .dk-center.paint>.archive{grid-column:1;grid-row:2;max-height:260px}
  .dk-center.paint>.top{grid-column:1;grid-row:3;flex-direction:column;align-items:center;text-align:center;gap:10px;margin:10px 0 6px}
  .dk-center.paint>.loader{grid-column:1;grid-row:4;margin:8px 0 0}
  .dk-center.paint>.palette{grid-column:1;grid-row:5;display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:12px 6px;margin:8px 0}
  .dk-center.paint>.actions{grid-column:1;grid-row:6;flex-wrap:wrap}
  .dk-center.paint>.board{grid-column:2;grid-row:1/span 6;width:100%;max-width:max(380px,min(660px,calc(100vh - 100px)));margin:6px auto 0;justify-self:center}
  .dk-center.paint>.plaque{grid-row:7;justify-self:center}
  .dk-center.paint>.result{grid-row:8;width:100%}
  .dk-center.paint>.fd-sol{grid-row:9;width:100%}
  .dk-center.paint>.dk-keys{grid-row:10}
  .dk-center.paint .daybar .seg{flex-direction:column;width:100%}
  .dk-center.paint .daybar .seg .sb{width:100%}
    .dk-center.paint .stats{align-items:center}
  .dk-center.paint .count{justify-content:center}
}
@media (min-width:960px){
  /* ----- Pondlight: day navigation in a left rail, board in the middle ----- */
  .dk-center.pond{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-rows:auto auto auto 1fr repeat(6,auto);gap:0 24px;align-items:start}
  .dk-center.pond>*{grid-column:2}
  .dk-center.pond>.daynav{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .dk-center.pond>.daynav #dayl{grid-column:1/-1;grid-row:1;margin-bottom:2px}
  .dk-center.pond>.daynav button{padding:0 6px}
  .dk-center.pond>.dk-archwrap{grid-column:1;grid-row:2}
  .dk-center.pond>#arch{grid-column:1;grid-row:3}
  .dk-center.pond>.stats{grid-column:1;grid-row:4;margin-top:10px}
  .dk-center.pond>.stage{grid-column:2;grid-row:1/span 4}
  .dk-center.pond>.status{grid-row:5}
  .dk-center.pond>.ctrl{grid-row:6}
  .dk-center.pond>#how{grid-row:7}
  .dk-center.pond>.dk-keys{grid-row:8}
  .dk-center.pond>#result{grid-row:9}
  .dk-center.pond>.fd-sol{grid-row:10}
  .dk-center.paint .actions{gap:8px}
  .dk-center.paint .actions .btn{flex:1;padding:0 10px;min-width:0}
  .dk-center.paint .target canvas{width:112px;height:112px}
}
@media (min-width:1240px){
  .dk-center.pond{grid-template-columns:220px minmax(0,1fr);gap:0 32px}
}