:root{--bg: #fff;--ink: #111;--muted: #77736a;--card: #f6f3ec;--miss: #e2ded4;--line: #ddd6c8;--hit: #2e8b4f;--hit-bg: #d6eedc;--bad: #c9392c;--burning: #e8590c;--hot: #f08c00;--warm: #f2c14e;--cold: var(--miss)}*{box-sizing:border-box}body{margin:0;min-height:100dvh;color:var(--ink);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}main{display:flex;flex-direction:column;align-items:center;width:min(100%,492px);margin:0 auto;padding:28px 16px}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}button:disabled{opacity:.35;cursor:default}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px;margin-bottom:28px}#tools button{display:flex;align-items:center;gap:10px;padding:4px 0;border:0;background:none;font-size:1.15rem;font-weight:400}#tools button:hover:not(:disabled){text-decoration:underline;text-underline-offset:4px}#tools svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#mode{margin:-14px 0 14px;color:var(--muted);font-size:.9rem;text-align:center}#guess{display:flex;gap:8px;width:100%}#guess input{flex:1;min-width:0;padding:14px 16px;border:0;border-radius:10px;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);color:var(--ink);font:inherit;font-size:1.15rem;font-weight:700}#guess input::placeholder{color:var(--muted);font-weight:400}#guess input:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ink)}#guess button,#next{border:0;border-radius:12px;background:var(--ink);color:var(--card);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.04em}#guess button{padding:0 22px}#next{padding:14px 28px;margin-bottom:16px}#msg{min-height:1.5em;margin:20px 0 12px;font-weight:500;text-align:center}#msg.ok{color:var(--hit)}#msg.bad{color:var(--bad)}.guesses{display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none}.guesses.latest{margin-bottom:16px;padding-bottom:16px;border-bottom:2px solid var(--card)}.guess{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;overflow:hidden;border-radius:10px;background:var(--card);font-weight:800;text-transform:uppercase;letter-spacing:.02em;animation:arrive .3s cubic-bezier(.3,1.3,.6,1) both}.guess>:not(.bar){position:relative}.bar{position:absolute;inset:0 auto 0 0;width:calc(var(--closeness) * 100%);background:var(--heat);opacity:.5;transform-origin:left;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}.guess.found{--heat: var(--hit-bg);color:var(--hit)}.guess.found .bar{opacity:1}.guess.burning{--heat: var(--burning)}.guess.hot{--heat: var(--hot)}.guess.warm{--heat: var(--warm)}.guess.cold{--heat: var(--cold)}.guess.current{box-shadow:inset 0 0 0 2px var(--ink)}.typed{color:var(--muted);font-weight:500}.guess.found .typed{color:inherit}.rank{font-variant-numeric:tabular-nums}.nearest{width:100%;margin-top:28px}.nearest h2{margin:0 0 10px;color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.nearest ol{columns:2;gap:24px;margin:0;padding:0;list-style:none}.nearest li{padding:2px 0;overflow:hidden;break-inside:avoid;white-space:nowrap;text-overflow:ellipsis}.nearest li.guessed{font-weight:700}.nearest .rank{display:inline-block;min-width:2.2em;color:var(--muted);font-weight:500}#board{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-top:24px;color:var(--muted);font-size:.9rem}#board b{margin-left:4px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}dialog{max-width:min(90vw,420px);padding:24px 28px;border:0;border-radius:16px;color:var(--ink);background:var(--bg);box-shadow:0 20px 60px #0003}dialog::backdrop{background:#00000059}dialog h2{margin:0 0 12px;font-size:1.3rem;font-weight:800}dialog p{margin:0 0 10px;line-height:1.5}dialog form{margin-top:16px;text-align:right}dialog form button{padding:10px 20px;border:0;border-radius:10px;background:var(--ink);color:var(--card);font-weight:700}@keyframes arrive{0%{opacity:0;transform:translateY(-10px) scale(.97)}}@keyframes grow{0%{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.guess,.bar{animation:none}}