:root{--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;--font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace}:root{color-scheme:light;--bg: #F8F1E0;--fg: #2A1F16;--muted: #6B5C4A;--line: rgba(42, 31, 22, .16);--tile: #fff;--correct: #4FA487;--present: #F4B860;--absent: #6B5C4A}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45}button{font:inherit}.app{min-height:100%;padding:clamp(8px,2vw,16px) clamp(12px,3vw,20px) 16px;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px}@media(max-width:479px){.key{height:48px}}h1,h2{margin:0;font-family:Fraunces,serif;font-weight:600;letter-spacing:-.01em}h1{font-size:28px}h2{font-size:18px}.muted{color:var(--muted);font-size:13px}.muted.small{font-size:12px}.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}@media(max-width:400px){.head-actions{width:100%;justify-content:flex-start}}.lang-row{display:flex;gap:4px;flex-wrap:wrap}.lang{height:36px;width:36px;font-size:16px;border:1px solid var(--line);background:transparent;cursor:pointer;border-radius:0}.lang.active{background:var(--fg);border-color:var(--fg)}.grid{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;width:100%;aspect-ratio:5 / 6;max-height:60vh;perspective:800px}.grid-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tile{display:flex;align-items:center;justify-content:center;background:var(--tile);border:2px solid var(--line);font-family:Fraunces,serif;font-weight:600;font-size:clamp(28px,7vw,36px);color:var(--fg);text-transform:uppercase;transform-origin:center;transition:transform .15s ease,border-color .15s ease;backface-visibility:hidden}.tile-typed{border-color:var(--fg);animation:tile-pop .12s ease-out}@keyframes tile-pop{0%{transform:scale(.92)}to{transform:scale(1)}}.tile-correct{background:var(--correct);border-color:var(--correct);color:#fff}.tile-present{background:var(--present);border-color:var(--present);color:#fff}.tile-absent{background:var(--absent);border-color:var(--absent);color:#fff}.tile.flipping{animation:tile-flip .48s ease-in-out forwards}@keyframes tile-flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.tile.win-bounce{animation:tile-bounce .6s ease-in-out forwards}@keyframes tile-bounce{0%{transform:translateY(0)}20%{transform:translateY(-12px)}50%{transform:translateY(0)}70%{transform:translateY(-4px)}to{transform:translateY(0)}}.shake{animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.keyboard{display:flex;flex-direction:column;gap:6px}.kb-row{display:flex;gap:4px;justify-content:center}.key{flex:1;height:52px;min-width:24px;background:#fff;border:1px solid var(--line);border-radius:0;font-family:Inter,sans-serif;font-weight:500;font-size:14px;text-transform:uppercase;color:var(--fg);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .18s ease,color .18s ease,border-color .18s ease}.key-wide{flex:1.6;font-size:16px}.key-correct{background:var(--correct);border-color:var(--correct);color:#fff}.key-present{background:var(--present);border-color:var(--present);color:#fff}.key-absent{background:var(--absent);border-color:var(--absent);color:#fff}.finish{display:flex;flex-direction:column;gap:8px}.finish-line{margin:0;font-family:Fraunces,serif;font-size:22px}.row-actions{display:flex;flex-wrap:wrap;gap:8px}button.primary,button.ghost{height:42px;padding:0 18px;border:1px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;border-radius:0}button.primary{background:var(--correct);border-color:var(--correct);color:#fff}button.ghost{border-color:var(--line);color:var(--muted)}.stats{display:flex;flex-direction:column;gap:8px}.dist{display:flex;flex-direction:column;gap:4px}.dist-row{display:grid;grid-template-columns:24px 1fr;gap:6px;align-items:center}.dist-label{font-family:Fraunces,serif;font-weight:500;text-align:center}.dist-bar{background:#2a1f160f;height:18px;width:100%}.dist-fill{background:var(--correct);height:100%;display:flex;align-items:center;justify-content:flex-end;padding:0 6px;color:#fff;font-size:11px;min-width:14px}.hardmode-chip{display:inline-block;margin-left:6px;padding:1px 6px;background:#e84a2d;color:#fff;font-size:10px;font-weight:700;border-radius:999px;letter-spacing:.05em}.hardmode-error{background:#e84a2df2;color:#fff;text-align:center;padding:8px 12px;font-weight:600;font-size:13px;border-radius:4px;animation:warn-flash .3s ease-in-out}@keyframes warn-flash{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-backdrop{position:fixed;inset:0;background:#14120fa6;display:flex;align-items:center;justify-content:center;z-index:200;padding:24px;animation:backdrop-in .2s ease}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:12px;max-width:420px;width:100%;border-radius:6px;animation:modal-in .22s cubic-bezier(.18,.89,.32,1.28);max-height:80vh;overflow-y:auto}@keyframes modal-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.modal-title{margin:0;font-family:Fraunces,serif;font-size:20px;font-weight:600}.setting-row{display:flex;align-items:flex-start;gap:8px;cursor:pointer;padding:8px;border:1px solid var(--line);border-radius:4px}.setting-row input{margin-top:2px}.archive-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:8px 0}.archive-day{padding:8px 4px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:11px;border-radius:4px;font-family:JetBrains Mono,monospace}.archive-day.won{background:var(--correct);color:#fff;border-color:var(--correct)}.archive-day.lost{background:var(--absent);color:#fff;border-color:var(--absent);opacity:.65}.ghost{height:36px;padding:0 12px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;border-radius:0;font-size:13px}.eyebrow{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.score-numeric,.move-count,.time-left{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.018em;line-height:.95}.score-numeric.size-hero,.move-count.size-hero,.time-left.size-hero{font-size:clamp(2.8rem,9vw,5.6rem)}.score-numeric.size-card,.move-count.size-card,.time-left.size-card{font-size:clamp(1.6rem,4vw,2.4rem)}.score-numeric .unit,.move-count .unit,.time-left .unit{font-size:.45em;font-weight:600;color:var(--muted);vertical-align:.35em;margin-left:.2em}.game-code,.level-code{font-family:var(--font-mono);font-style:italic;font-weight:500;font-size:.78rem;letter-spacing:.08em;color:var(--accent, currentColor);text-transform:uppercase}.title-hero{font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;font-size:clamp(2.4rem,7vw,4rem);line-height:.95}.title-hero em{font-style:italic;color:var(--accent, currentColor)}
