:root{--bg: #14110f;--bg-2: #1f1a17;--ink: #f4efe8;--muted: #a69c91;--line: #352d28;--accent: #f3a712;--accent-ink: #1a1200;--good: #a8c256;--bad: #e4572e;--radius: 14px;--tap: 44px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#root{min-height:100%}a{color:inherit}button{font:inherit;color:inherit}h1,h2{margin:0 0 .25rem;line-height:1.15}h1{font-size:2rem;letter-spacing:-.02em}h2{font-size:1.2rem}p{margin:.35rem 0}.muted{color:var(--muted)}.error{color:var(--bad)}.fineprint{font-size:.8rem;color:var(--muted)}.code{word-break:break-all;font-family:ui-monospace,Menlo,monospace}.page{max-width:560px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));min-height:100dvh;display:flex;flex-direction:column;gap:14px}.page--play{justify-content:space-between}.page--home{gap:18px}.hero{padding:24px 0 6px}.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:8px;justify-items:start}.foot{margin-top:auto;font-size:.85rem}.topbar{display:flex;align-items:center;gap:12px;min-height:var(--tap)}.back{font-weight:700;text-decoration:none;letter-spacing:-.01em;min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center}.topbar__title{display:flex;flex-direction:column;flex:1;line-height:1.2}.topbar__title .muted{font-size:.85rem}.moves{font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:700;min-width:var(--tap);text-align:right}.board{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px 6px;padding:12px 0;flex:1;align-content:center}.tube{--cap: 4;--unit: 36px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;padding:10px 2px 0;min-width:var(--tap);cursor:pointer;transition:transform .15s ease;border-radius:8px}.tube:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tube--selected{transform:translateY(-10px)}.tube--target .tube__glass{box-shadow:0 0 0 2px var(--accent)}.tube:disabled{cursor:default}.tube__glass{display:flex;flex-direction:column-reverse;justify-content:flex-start;width:40px;height:calc(var(--cap) * var(--unit) + 6px);padding:3px;gap:2px;background:#ffffff0f;border:1px solid rgba(255,255,255,.18);border-top-color:transparent;border-radius:0 0 18px 18px;transition:box-shadow .15s ease}.unit{display:block;height:calc(var(--unit) - 2px);border-radius:4px}.unit:first-child{border-radius:4px 4px 14px 14px}@media (max-width: 400px){.tube{--unit: 30px}.tube__glass{width:36px}}.hint{text-align:center;font-size:.9rem}.actions{display:grid;gap:10px}.actions--row{grid-template-columns:1fr 1fr}.btn{min-height:var(--tap);padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.btn:disabled{opacity:.45;cursor:default}.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn--ghost{background:transparent}.result{display:grid;gap:14px;flex:1;align-content:center}.result__headline{font-size:2rem;text-align:center}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:0}.stats div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;text-align:center}.stats dt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.stats dd{margin:2px 0 0;font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}.hist{display:grid;gap:3px}.hist__row{display:grid;grid-template-columns:2.2rem 1fr 2rem;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}.hist__label{text-align:right;font-variant-numeric:tabular-nums}.hist__bar{height:12px;background:var(--line);border-radius:3px;min-width:2px}.hist__row--you .hist__bar{background:var(--accent)}.hist__row--you{color:var(--ink)}.hist__row--par .hist__label{color:var(--good);font-weight:700}.knob{border:0;padding:0;margin:0}.knob legend{font-weight:700;margin-bottom:8px}.knob__row{display:flex;flex-wrap:wrap;gap:8px}.chip{min-height:var(--tap);padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer}.chip--on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.paste{display:flex;gap:8px;width:100%}.input{flex:1;min-height:var(--tap);padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;min-width:0}.input:focus{outline:2px solid var(--accent);outline-offset:1px}.doodle{display:grid;grid-template-columns:repeat(16,1fr);width:min(100%,360px);aspect-ratio:1;margin:0 auto;background:#fbf6ec;border-radius:10px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 0 0 1px var(--line)}.doodle--editable{cursor:crosshair}.doodle__px{display:block;aspect-ratio:1}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.swatch{min-height:var(--tap);border-radius:10px;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px #00000040}.swatch--on{border-color:var(--ink);transform:scale(1.06)}.guess{display:grid;gap:10px}.guess__mask{text-align:center;font-family:ui-monospace,Menlo,monospace;letter-spacing:.05em;margin:0;white-space:pre-wrap}.guess__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.guess__list li{padding:4px 10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);text-decoration:line-through;font-size:.85rem}.guess__hint{text-align:center;color:var(--muted);margin:0}.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;min-height:var(--tap)}.riddle{margin:0;padding:20px;font-size:1.3rem;line-height:1.4;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);white-space:pre-wrap;flex:1;display:flex;align-items:center}.result__reveal{text-align:center;font-size:1.1rem;margin:-6px 0 0;color:var(--muted)}.field{display:grid;gap:6px}.field>span:first-child{font-weight:600}.input--area{padding:10px 14px;resize:vertical;min-height:96px;line-height:1.4}