/* ===========================================================================
   Theme system. All colors flow through the semantic variables below; each
   [data-theme] block re-skins the whole game. Default = Midnight.
   --------------------------------------------------------------------------- */
:root,
[data-theme="midnight"] {
  --bg:#0f1729; --surface:#1b2640; --surface-2:#243152; --surface-hover:#2c3b5e;
  --text:#e8edf7; --text-dim:#9aa7c4; --border:#2f3d5e; --edge:#4a5a82;
  --node-ink:#f5f8ff;
  --pink:#4a2740; --pink-edge:#f472b6;
  --blue:#1e3a5f; --blue-edge:#60a5fa;
  --frog:#14352a; --frog-edge:#34d399;
  --accent:#34d399;
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --shadow:rgba(0,0,0,.5); --overlay:rgba(5,8,18,.72);
}
[data-theme="neon"] {
  --bg:#0a0a12; --surface:#16121f; --surface-2:#211a30; --surface-hover:#2d2342;
  --text:#f0e9ff; --text-dim:#9d8fc0; --border:#38294f; --edge:#6b4fa0;
  --node-ink:#ffffff;
  --pink:#3a0f2e; --pink-edge:#ff2d95;
  --blue:#0f2a3a; --blue-edge:#22d3ee;
  --frog:#10331f; --frog-edge:#39e75f;
  --accent:#39e75f;
  --ok:#39e75f; --warn:#ffd23f; --bad:#ff4d6d;
  --shadow:rgba(0,0,0,.6); --overlay:rgba(4,2,10,.78);
}
[data-theme="forest"] {
  --bg:#11160f; --surface:#1b2417; --surface-2:#263322; --surface-hover:#324429;
  --text:#eaf0e2; --text-dim:#9db18c; --border:#33422b; --edge:#4f6342;
  --node-ink:#f3f7ec;
  --pink:#3d2a1c; --pink-edge:#e6a157;
  --blue:#1d3329; --blue-edge:#5fb98a;
  --frog:#2a3a1a; --frog-edge:#b6e36a;
  --accent:#b6e36a;
  --ok:#b6e36a; --warn:#e6b34a; --bad:#e07a5f;
  --shadow:rgba(0,0,0,.5); --overlay:rgba(8,12,6,.74);
}
[data-theme="slate"] {
  --bg:#15181d; --surface:#20242b; --surface-2:#2a2f37; --surface-hover:#333a44;
  --text:#e6e9ee; --text-dim:#9aa3af; --border:#353b45; --edge:#515a67;
  --node-ink:#f3f5f8;
  --pink:#3a2630; --pink-edge:#f0a3bf;
  --blue:#233244; --blue-edge:#8fb6e0;
  --frog:#1f3a36; --frog-edge:#5eead4;
  --accent:#5eead4;
  --ok:#5eead4; --warn:#e3c069; --bad:#ef9a9a;
  --shadow:rgba(0,0,0,.5); --overlay:rgba(6,8,12,.72);
}
[data-theme="dusk"] {
  --bg:#171327; --surface:#221b38; --surface-2:#2d2348; --surface-hover:#382a59;
  --text:#ece7fb; --text-dim:#a99fc9; --border:#392c5b; --edge:#5a4a86;
  --node-ink:#f6f2ff;
  --pink:#3c1f44; --pink-edge:#d96ad6;
  --blue:#26244f; --blue-edge:#8b7bf0;
  --frog:#2a2150; --frog-edge:#b794f6;
  --accent:#b794f6;
  --ok:#86e3a8; --warn:#f6c177; --bad:#f47ea3;
  --shadow:rgba(0,0,0,.55); --overlay:rgba(8,5,18,.74);
}
[data-theme="ocean"] {
  --bg:#071a22; --surface:#0e2730; --surface-2:#143542; --surface-hover:#1c4654;
  --text:#e2f4f7; --text-dim:#8fb3bd; --border:#1d4250; --edge:#356b7c;
  --node-ink:#f1fbfd;
  --pink:#3a2230; --pink-edge:#ff9aa2;
  --blue:#0d3540; --blue-edge:#34d3e0;
  --frog:#0f3a33; --frog-edge:#3ee0b0;
  --accent:#3ee0b0;
  --ok:#3ee0b0; --warn:#ffcf5c; --bad:#ff8095;
  --shadow:rgba(0,0,0,.5); --overlay:rgba(2,12,16,.74);
}
[data-theme="ember"] {
  --bg:#1a1110; --surface:#251714; --surface-2:#33201b; --surface-hover:#412a22;
  --text:#f7e9e2; --text-dim:#c2a193; --border:#43271f; --edge:#6e4636;
  --node-ink:#fff3ec;
  --pink:#3e1a1a; --pink-edge:#ff5c5c;
  --blue:#33270f; --blue-edge:#ffd166;
  --frog:#2c2410; --frog-edge:#ff8a3d;
  --accent:#ff8a3d;
  --ok:#9be36b; --warn:#ffce54; --bad:#ff4d4d;
  --shadow:rgba(0,0,0,.55); --overlay:rgba(14,6,4,.76);
}
[data-theme="candy"] {
  --bg:#1c1030; --surface:#291640; --surface-2:#351e52; --surface-hover:#432865;
  --text:#fce9ff; --text-dim:#bfa0d8; --border:#43285f; --edge:#6b4290;
  --node-ink:#ffffff;
  --pink:#4a173e; --pink-edge:#ff5bbd;
  --blue:#1c2a5a; --blue-edge:#4d8bff;
  --frog:#123f3a; --frog-edge:#36e6c0;
  --accent:#ffd23f;
  --ok:#5ce6a0; --warn:#ffb83f; --bad:#ff5d8f;
  --shadow:rgba(0,0,0,.5); --overlay:rgba(10,4,22,.76);
}

* { box-sizing: border-box; }
body { margin:0; font-family: "Varela Round", system-ui, sans-serif; color: var(--text); background: var(--bg);
  transition: background .3s ease, color .3s ease; }
#beta-badge {
  position: fixed; top: 2px; right: 10px; z-index: 50; pointer-events: none;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: lowercase;
  color: var(--text); opacity: .35;
}
header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; }
main { display:flex; gap:24px; padding:20px; align-items:flex-start; flex-wrap:wrap; }
#board-col { flex: 1 1 360px; position: relative; }
#pause-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 5; }
#pause-overlay[hidden] { display: none; }
.pause-title { font-size: 32px; font-weight: 800; color: var(--accent); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
#resume-btn { padding: 10px 22px; font-size: 16px; font-weight: 700; border: 1px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
#resume-btn:hover { background: var(--surface-hover); }
/* Fixed heights (not min-height) so these never grow when text first appears —
   they sit above the board, and a 1px reflow would otherwise nudge it down. */
#tracing { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; letter-spacing: 3px; color: var(--accent); user-select: none; }
/* Submit feedback, just below the traced word — slightly smaller than it. */
#trace-result { height: 30px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; font-size: 24px; font-weight: 700; user-select: none; }
.result-found { color: var(--ok); }
.result-already { color: var(--warn); }
.result-notword { color: var(--bad); }
.result-invalid, .result-short { color: var(--text-dim); }
#sidebar { flex: 0 1 240px; }
#found-words { list-style:none; padding:0; }
#progress { margin-bottom: 12px; }
#progress-track { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 6px; transition: width .35s ease; }
#progress-label { display: block; margin-top: 4px; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
#rotate-btn {
  position: absolute; top: 0; right: 0; z-index: 5;
  width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s ease;
}
#rotate-btn:hover { background: var(--surface-hover); }
#board svg { width: 100%; height: auto; touch-action: none; user-select: none; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.edge { stroke: var(--edge); stroke-width: 7.5; stroke-linecap: round; transition: opacity .35s; }
.edge.faded { opacity: 0; }
.node circle { stroke-width: 3; transition: fill .35s, stroke .35s; cursor: pointer; }
.node.pink circle { fill: var(--pink); stroke: var(--pink-edge); }
.node.blue circle { fill: var(--blue); stroke: var(--blue-edge); }
.node.frog circle { fill: var(--frog); stroke: var(--frog-edge); }
.node text { font: 700 26px "Varela Round", system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; fill: var(--node-ink);
  transition: transform .45s cubic-bezier(.4,0,.2,1); }
/* Letters in the word being traced: thicker ring + glow so the current path is
   easy to follow against the untraced letters. */
.node.selected circle { stroke-width: 7; stroke: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
.node.selected text { fill: var(--accent); }
/* --- reward feedback (see feedback.js) --- */
.node { transform-box: fill-box; transform-origin: center; }
@keyframes fb-frog-pop { 0% { transform: scale(.55); } 55% { transform: scale(1.28); } 78% { transform: scale(.94); } 100% { transform: scale(1); } }
.node.fb-frog { animation: fb-frog-pop .65s cubic-bezier(.3,1.5,.5,1); }
.node.fb-frog circle { filter: drop-shadow(0 0 10px var(--frog-edge)); }
.fb-overlay { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9998; }
.fb-confetti { position: absolute; width: 9px; height: 14px; border-radius: 2px; will-change: transform, opacity; }
/* Word-found burst: the bubble's disc grows out of it + a ghost letter springs up. */
.fb-disc { position: fixed; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 9998; will-change: transform, opacity; }
.fb-ghost { position: fixed; font-family: "Varela Round", system-ui, sans-serif; font-weight: 800; line-height: 1; color: var(--node-ink); pointer-events: none; z-index: 9999; will-change: transform, opacity; }
.fb-banner { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%); font-size: 30px; font-weight: 800; color: var(--accent); text-shadow: 0 2px 14px rgba(0,0,0,.65); white-space: nowrap; z-index: 9999; }
@media (prefers-reduced-motion: reduce) { .node.fb-frog { animation: none; } #board svg, .node text { transition: none; } }
.trace { stroke: var(--accent); stroke-width: 7; fill: none; stroke-linecap: round; pointer-events: none; opacity: .7; }
#controls button { margin-left: 8px; padding: 8px 14px; border:1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor:pointer; font-size:14px; }
#controls button:hover { background: var(--surface-hover); }
#controls button.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent); font-weight: 700; }
#status { min-height: 24px; font-weight: 600; margin-bottom: 12px; }
#status.win { color: var(--accent); }
#found-words li { padding: 4px 0; border-bottom: 1px solid var(--border); text-transform: lowercase; }
#found-words li a { color: inherit; text-decoration: none; }
#found-words li a:hover { text-decoration: underline; }
#found-words li.longest { font-weight: 700; color: var(--accent); }

/* --- polish --- */
h1 { font-size: 26px; margin: 0; }
#puzzle-date { font-size: 16px; font-weight: 400; color: var(--text-dim); }
.random-link { font: inherit; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.random-link:hover { text-decoration-style: solid; }
main { justify-content: center; }
#board-col { max-width: 460px; margin: 0 auto; }
#sidebar { min-width: 200px; }
#howto { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin: 8px auto 28px; max-width: 640px; padding: 0 20px; text-align: center; }
@media (max-width: 640px) {
  main { flex-direction: column; align-items: stretch; padding: 12px; }
  #board-col, #sidebar, #debug { flex: 1 1 auto; max-width: 100%; }
  /* Stretch the board to the full column width. Without this, `margin:0 auto`
     collapses the column to the SVG's 300px fallback width, leaving the board
     (and its letters/circles) smaller than the screen allows. */
  #board-col { margin: 0; width: 100%; }
  header { flex-wrap: wrap; gap: 8px; }
}

/* timer + game controls bar */
#gamebar { display:flex; align-items:center; gap:12px; padding:0 20px 4px; }
#timer { font-variant-numeric: tabular-nums; font-weight:700; font-size:20px; min-width:64px; color: var(--text); }
#gamebar button { padding:6px 12px; border:1px solid var(--border); border-radius:8px; background: var(--surface); color: var(--text); cursor:pointer; font-size:14px; }
#gamebar button:hover:not(:disabled) { background: var(--surface-hover); }
#gamebar button:disabled { opacity:.45; cursor:default; }
#gamebar button#finish.confirm { border-color: var(--warn); color: var(--warn); font-weight: 700; }

/* blur the board while paused so the letters can't be studied for free */
body.paused #board { filter: blur(10px); pointer-events:none; }

/* end / score screen */
#endscreen { position:fixed; inset:0; background: var(--overlay); display:flex; align-items:center; justify-content:center; z-index:10; }
#endscreen[hidden] { display:none; }
#endcard { background: var(--surface); color: var(--text); border-radius:16px; padding:24px 28px; width:min(92vw,360px); box-shadow:0 12px 40px var(--shadow); text-align:center; border:1px solid var(--border); }
#endcard h2 { margin:0 0 8px; }
.score-total { font-size:40px; font-weight:800; color: var(--accent); margin-bottom:16px; }
.score-rows { text-align:left; margin-bottom:20px; }
.score-rows div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--border); font-size:14px; }
.score-rows b { font-variant-numeric: tabular-nums; color: var(--accent); }
.score-actions { display:flex; gap:10px; justify-content:center; }
.score-actions button { padding:8px 16px; border:1px solid var(--border); border-radius:8px; background: var(--surface); color: var(--text); cursor:pointer; font-size:14px; }
.score-actions button:first-child { background: var(--surface-2); border-color: var(--accent); }
.score-actions button:hover { background: var(--surface-hover); }

/* debug panel */
#debug { flex: 0 1 220px; min-width: 180px; border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); align-self: flex-start; }
.debug-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.debug-header button { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.debug-reset { color: var(--bad); border-color: var(--bad) !important; }
.debug-reset:hover { background: var(--surface-hover) !important; }
.debug-list { list-style: none; padding: 0; margin: 8px 0 0; columns: 2; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.debug-list li { padding: 2px 0; break-inside: avoid; }
.debug-list li.done { color: var(--accent); text-decoration: line-through; }
.debug-freq { font-size: 11px; font-weight: 700; opacity: .85; }
.debug-freq.tier-easy { color: var(--ok); }
.debug-freq.tier-normal { color: var(--text-dim); }
.debug-freq.tier-hard { color: var(--warn); }
.debug-freq.tier-extreme { color: var(--bad); }
.debug-theme { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.debug-theme select { margin-left: 6px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }