:root {
  --bg: #eef6fb;
  --paper: #ffffff;
  --ink: #132238;
  --muted: #66758a;
  --line: #d8e3ec;
  --ice: #dff2ff;
  --ice-strong: #8fcff3;
  --green: #4f8a5b;
  --yellow: #d1a62d;
  --navy: #203a5f;
  --danger: #a84c4c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at top, rgba(255,255,255,.9), transparent 34rem),
  var(--bg); }
button, input { font: inherit; }
button { cursor: pointer; }

.shell { width: min(920px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 60px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.eyebrow, .section-label { margin:0 0 6px; letter-spacing:.13em; font-size:.72rem; font-weight:800; color:#5e7b96; }
h1 { margin:0; font-size:clamp(2.2rem, 7vw, 4rem); line-height:.9; letter-spacing:-.055em; }
h2 { margin:0; font-size:1.25rem; }
.attempt-counter { background:var(--navy); color:white; border-radius:18px; padding:12px 16px; min-width:126px; text-align:center; font-size:1.5rem; font-weight:850; box-shadow:0 8px 26px rgba(32,58,95,.15); }
.attempt-counter .slash { opacity:.45; padding:0 3px; }
.attempt-counter small { display:block; margin-top:1px; font-size:.7rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }

.theme-card, .clue-strip, .play-card, .history-card, .rules-card {
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:22px; box-shadow:0 12px 40px rgba(44,74,105,.08);
}
.theme-card { padding:22px; margin-bottom:14px; }
.theme-display { display:flex; flex-wrap:wrap; gap:8px 13px; margin:12px 0 18px; min-height:43px; align-items:center; }
.theme-word { display:flex; gap:4px; }
.theme-letter { width:26px; height:34px; border-bottom:3px solid #a7bacb; display:grid; place-items:center; font-size:1.25rem; font-weight:850; text-transform:uppercase; }
.theme-letter.revealed { border-color:var(--navy); }
.theme-misses { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:28px; margin:-5px 0 13px; color:var(--muted); font-size:.78rem; }
.theme-misses[hidden] { display:none; }
.theme-miss-label { font-weight:750; }
.struck-letter { min-width:24px; border:1px solid #d7e1e9; border-radius:999px; padding:3px 7px; background:#f7fafc; color:#7b8995; text-align:center; font-weight:850; text-decoration-thickness:2px; }
.theme-form { display:flex; gap:9px; }
.theme-form input { width:100%; border:1.5px solid #cbd9e5; border-radius:12px; padding:11px 12px; color:var(--ink); background:white; outline:none; }
.theme-form input:focus { border-color:#79b7df; box-shadow:0 0 0 4px rgba(121,183,223,.16); }
.theme-form button, .primary { border:0; border-radius:12px; background:var(--navy); color:white; padding:11px 16px; font-weight:800; white-space:nowrap; }
.secondary { border:1.5px solid #b9cbd8; border-radius:12px; background:#f8fbfd; color:var(--navy); padding:10px 14px; font-weight:800; white-space:nowrap; }
.theme-form button:disabled, .primary:disabled, .secondary:disabled { opacity:.45; cursor:not-allowed; }
.microcopy { margin:8px 0 0; color:var(--muted); font-size:.78rem; }

.clue-strip { padding:16px 20px; margin-bottom:14px; }
.hint-list { display:flex; flex-wrap:wrap; gap:8px; }
.hint-chip { min-width:82px; padding:8px 11px; border-radius:999px; border:1px solid var(--line); background:#f8fbfd; color:var(--muted); font-weight:800; font-size:.85rem; }
.hint-chip.solved { color:#245c31; border-color:#b8d6be; background:#eef8f0; }
.hint-chip.exhausted { color:#805151; border-color:#e2c5c5; background:#fbf1f1; }

.play-card { padding:22px; }
.play-header { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; margin-bottom:8px; }
.hint-attempt-status { margin:5px 0 0; color:var(--muted); font-size:.78rem; }
.length-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.length-tab { border:1px solid #c8d7e2; background:#f9fcfe; color:var(--navy); border-radius:10px; min-width:48px; padding:7px 10px; font-weight:850; display:grid; gap:1px; justify-items:center; }
.length-tab .tab-label { line-height:1.05; }
.length-tab .tab-attempts { font-size:.62rem; font-weight:750; opacity:.66; }
.length-tab.active { background:var(--navy); color:white; border-color:var(--navy); }
.length-tab.solved { box-shadow:inset 0 -4px 0 var(--green); }
.length-tab.exhausted { color:#8b5050; border-color:#d9b7b7; background:#fcf3f3; box-shadow:inset 0 -4px 0 var(--danger); }
.length-tab.active.exhausted { color:white; background:#744747; border-color:#744747; }

.snowflake-form { display:grid; gap:8px; }
.board-stage { display:grid; grid-template-columns:minmax(0, 1fr) 240px; gap:18px; align-items:start; }
.board-wrap { width:100%; margin:0 auto; min-width:0; }
.board-instruction { margin:8px 0 0; display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; text-align:center; color:var(--muted); font-size:.8rem; }
.line-indicator { color:var(--navy); background:#e8f4fb; border:1px solid #b9d9eb; border-radius:999px; padding:4px 9px; }
.snowflake-board { width:100%; height:min(64vw, 470px); min-height:320px; display:block; overflow:visible; touch-action:manipulation; }
.board-keyboard { position:fixed; left:-9999px; top:auto; width:1px; height:1px; opacity:0; pointer-events:none; }
.crystal-stem, .crystal-tip {
  stroke:#91a8b8;
  stroke-linecap:round;
  fill:none;
  pointer-events:none;
}
.crystal-stem { stroke-width:3; opacity:.48; }
.crystal-tip { stroke-width:3; opacity:.7; }
.crystal-stem.selected { stroke:#2f719c; stroke-width:5; opacity:.72; }
.crystal-tip.selected { stroke:#225f89; stroke-width:4; opacity:.95; }
.hex-group { cursor:pointer; outline:none; }
.hex-group.shake { animation:fixed-letter-shake 220ms ease-in-out; transform-box:fill-box; transform-origin:center; }
@keyframes fixed-letter-shake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-7px); }
  50% { transform:translateX(7px); }
  75% { transform:translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hex-group.shake { animation:none; }
}
.hex-cell { stroke:#6b8297; stroke-width:2; fill:rgba(255,255,255,.82); transition:fill .12s ease, stroke .12s ease, stroke-width .12s ease; }
.hex-cell.horizontal { stroke-width:4; stroke:var(--navy); }
.hex-cell.active-line { fill:rgba(231,244,251,.84); stroke:#5ba4cf; stroke-width:3; }
.hex-cell.horizontal.active-line { stroke:#285f88; stroke-width:4; }
.hex-cell.active-cell { fill:rgba(207,234,251,.90); stroke:#1676ad; stroke-width:5; }
.hex-cell.green { fill:rgba(110,169,121,.90); }
.hex-cell.yellow { fill:rgba(224,189,86,.90); }
.hex-cell.ice { fill:rgba(143,207,243,.88); }
.hex-cell.given { fill:#6ea979; stroke:#315e3a; stroke-width:4; }
.hex-cell.given.active-line { fill:#6ea979; stroke:#315e3a; stroke-width:4; }
.hex-cell.given.active-cell { fill:#6ea979; stroke:#244f2d; stroke-width:5; }
.hex-cell.locked-green { cursor:default; }
.hex-cell.green.active-line, .hex-cell.green.active-cell { fill:#6ea979; }
.hex-cell.yellow.active-line, .hex-cell.yellow.active-cell { fill:#e0bd56; }
.hex-cell.ice.active-line, .hex-cell.ice.active-cell { fill:var(--ice-strong); }
.hex-letter { fill:var(--ink); font-weight:900; font-size:24px; text-anchor:middle; dominant-baseline:central; pointer-events:none; user-select:none; }
.hex-letter.on-green { fill:white; }
.hex-letter.given { fill:white; }
.legend { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; color:var(--muted); font-size:.75rem; margin-top:-4px; }
.swatch { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:4px; vertical-align:-1px; border:1px solid rgba(0,0,0,.1); }
.swatch.green { background:#6ea979; } .swatch.yellow { background:#e0bd56; } .swatch.neutral { background:#d9e0e5; } .swatch.ice { background:var(--ice-strong); } .swatch.given { background:#6ea979; border:2px solid #315e3a; }

.snapshot-panel {
  min-width:0;
  border-left:1px solid #e2eaf0;
  padding-left:14px;
  margin-top:8px;
}
.snapshot-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.snapshot-heading .section-label { margin-bottom:0; }
.snapshot-help { color:var(--muted); font-size:.68rem; white-space:nowrap; }
.snapshot-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; max-height:470px; overflow:auto; padding-right:3px; }
.snapshot-list.empty { color:var(--muted); font-size:.75rem; line-height:1.35; }
.snapshot-item {
  border:1px solid #dce6ed;
  background:#f8fbfd;
  border-radius:14px;
  padding:10px;
}
.snapshot-item.exhausted { border-color:#ddc0c0; background:#fcf5f5; }
.snapshot-meta { display:flex; justify-content:space-between; align-items:center; color:#607589; font-size:.76rem; margin-bottom:6px; }
.snapshot-meta strong { color:var(--navy); }
.snapshot-meta span { border:1px solid #c9d8e3; border-radius:999px; padding:1px 5px; background:white; font-weight:800; }
.snapshot-svg { width:100%; height:132px; display:block; overflow:visible; }
.snapshot-hex { stroke:#718697; stroke-width:1.2; fill:#d9e0e5; }
.snapshot-hex.horizontal { stroke:#2f526f; stroke-width:1.8; }
.snapshot-hex.green { fill:#6ea979; }
.snapshot-hex.yellow { fill:#e0bd56; }
.snapshot-hex.ice { fill:#8fcff3; }
.snapshot-hex.given { fill:#6ea979; stroke:#315e3a; stroke-width:2.4; }
.snapshot-letter { fill:#182b3f; font-weight:900; font-size:10px; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.snapshot-letter.on-green { fill:white; }
.snapshot-letter.given { fill:white; }

.board-actions { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.snowflake-buttons { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.word-readout { min-height:38px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; color:var(--muted); font-size:.78rem; }
.word-pill { border:1px solid var(--line); border-radius:999px; padding:6px 9px; background:#f8fbfd; }
.word-pill.hint { border-color:#8fa7ba; color:var(--navy); font-weight:850; }
.word-pill.selected { background:#e7f4fb; border-color:#6eb2d7; box-shadow:0 0 0 2px rgba(110,178,215,.14); }
.submission-message { min-height:1.25em; margin:0; text-align:center; color:var(--muted); font-size:.82rem; }
.submission-message.error { color:var(--danger); }
.submission-message.good { color:#2e6f3c; }

.history-card { margin-top:14px; padding:18px 20px; }
.history-head { display:flex; justify-content:space-between; align-items:center; }
.text-button { border:0; padding:4px; background:transparent; color:#54738f; text-decoration:underline; }
.history.empty { color:var(--muted); font-size:.85rem; }
.history-row { display:flex; gap:10px; align-items:center; border-top:1px solid #e6edf2; padding:10px 0; font-size:.86rem; }
.history-row:first-child { border-top:0; }
.history-badge { width:26px; height:26px; border-radius:50%; background:#edf3f7; display:grid; place-items:center; font-weight:850; color:#50687e; flex:0 0 auto; }
.history-row strong { color:var(--ink); }

.rules-card { margin-top:14px; padding:15px 18px; color:var(--muted); font-size:.88rem; }
.rules-card summary { color:var(--ink); cursor:pointer; font-weight:800; }
.rules-card li { margin:7px 0; }

.modal { position:fixed; inset:0; background:rgba(13,29,48,.62); padding:22px; display:grid; place-items:center; z-index:20; }
.modal[hidden] { display:none; }
.modal-card { width:min(430px, 100%); background:white; border-radius:22px; padding:26px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.modal-card h2 { font-size:2rem; margin:4px 0 8px; }
.modal-card p { color:var(--muted); }

@media (max-width: 760px) {
  .shell { width:min(100% - 18px, 620px); padding-top:18px; }
  .play-header { align-items:flex-start; flex-direction:column; }
  .length-tabs { justify-content:flex-start; }
  .board-stage { grid-template-columns:1fr; }
  .snapshot-panel { border-left:0; border-top:1px solid #e2eaf0; padding-left:0; padding-top:10px; }
  .snapshot-list { flex-direction:row; overflow-x:auto; overflow-y:hidden; max-height:none; padding:0 0 5px; }
  .snapshot-item { flex:0 0 190px; }
  .snapshot-svg { height:118px; }
  .snowflake-board { height:390px; }
}
@media (max-width: 480px) {
  .theme-form { flex-direction:column; }
  .topbar { align-items:center; }
  .attempt-counter { min-width:92px; }
  .play-card, .theme-card { padding:17px; }
  .snowflake-board { height:340px; min-height:300px; }
  .hex-letter { font-size:22px; }
}