:root{--bg: #0f1220;--bg2: #171b30;--panel: #1e2340;--tile: #2b3160;--tile-sel: #ffd23f;--tile-sel-ink: #1a1030;--ink: #eef1ff;--muted: #9aa3cc;--teal: #24d3c4;--good: #3ddc84;--bad: #ff5d6c;--dup: #ffb038;--miss: #7c86c9;--accent: #ffd23f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:radial-gradient(120% 100% at 50% 0%,#1a1f3d 0%,var(--bg) 55%);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}#app{min-height:100%;display:flex;flex-direction:column}.screen{flex:1;width:100%;max-width:560px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px 24px;display:flex;flex-direction:column;align-items:center}.logo{font-weight:900;letter-spacing:2px;font-size:clamp(30px,8vw,46px);margin:8px 0 4px}.logo span{color:var(--accent)}.tag{color:var(--muted);margin:0 0 22px;text-align:center}button{font-family:inherit;cursor:pointer;border:none;color:var(--ink);font-weight:700}.primary{background:var(--accent);color:#241700;padding:15px 22px;border-radius:14px;font-size:18px;width:100%;max-width:340px;box-shadow:0 8px 24px #ffd23f47;transition:transform .08s}.primary:active{transform:translateY(2px)}.primary:disabled{opacity:.55;box-shadow:none}.ghost{background:transparent;border:1.5px solid var(--tile);color:var(--ink);padding:15px 22px;border-radius:14px;font-size:16px}.loading{justify-content:center}.bar{width:100%;max-width:340px;height:12px;background:var(--panel);border-radius:20px;overflow:hidden;margin-top:14px}.bar-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--teal),var(--accent));transition:width .15s ease}.load-label{margin-top:14px;color:var(--ink);font-weight:600}.load-hint{margin-top:8px;color:var(--muted);font-size:13px;text-align:center}.menu{justify-content:center}.field{width:100%;max-width:340px;margin-bottom:18px}.field>label{display:block;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px}.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seg button{background:var(--panel);border:1.5px solid transparent;border-radius:12px;padding:12px 6px;display:flex;flex-direction:column;gap:3px;line-height:1.1}.seg button small{color:var(--muted);font-weight:600;font-size:11px}.seg button.on{border-color:var(--accent);background:#2a2f57;color:var(--accent)}.seg button.on small{color:var(--accent)}.select{width:100%;background:var(--panel);color:var(--ink);border:1.5px solid var(--tile);border-radius:12px;padding:13px 12px;font-size:16px;font-family:inherit}.rating{margin-top:14px;color:var(--muted);font-size:14px;text-align:center}.rating strong{color:var(--teal)}.src-note,.src-warn{margin-top:6px;font-size:12px;color:var(--muted)}.src-warn{color:var(--dup)}.rules{margin-top:22px;max-width:360px;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}.rules strong{color:var(--ink)}.play{justify-content:flex-start}.hud{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.stat{display:flex;flex-direction:column}.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.stat .v{font-size:26px;font-weight:900}.timer{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--teal);min-width:70px;text-align:center}.timer.unlim{color:var(--muted)}.timer.warn{color:var(--dup)}.timer.danger{color:var(--bad);animation:pulse .5s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.quit{background:var(--panel);border:1.5px solid var(--tile);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--muted)}.current{height:40px;font-size:26px;font-weight:800;letter-spacing:3px;display:flex;align-items:center;justify-content:center;color:var(--muted)}.current.active{color:var(--accent);position:relative}.current.active[data-msg]:after{content:attr(data-msg);position:absolute;right:8px;top:-2px;font-size:13px;letter-spacing:0;color:var(--good)}.board-wrap{position:relative;width:100%;max-width:380px;aspect-ratio:1 / 1;margin:6px auto 14px;touch-action:none}.board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;width:100%;height:100%;touch-action:none;z-index:1}.trace{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}.trace polyline{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.55}.trace circle{fill:var(--accent);opacity:.85}.tile{background:var(--tile);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:clamp(26px,9vw,40px);font-weight:800;user-select:none;min-height:48px;box-shadow:inset 0 -4px #00000040;transition:background .08s,transform .08s,color .08s}.tile span{pointer-events:none}.tile.sel{background:var(--tile-sel);color:var(--tile-sel-ink);transform:scale(1.06)}.tile.flash-good{background:var(--good);color:#06301c}.tile.flash-bad{background:var(--bad);color:#3a0510}.tile.flash-dup{background:var(--dup);color:#3a2600}.found-panel{width:100%;background:var(--bg2);border-radius:16px;padding:12px;flex:1;min-height:90px;display:flex;flex-direction:column}.found-head{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px}.found-list{display:flex;flex-wrap:wrap;gap:6px;overflow-y:auto;align-content:flex-start}.chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border-radius:20px;padding:5px 10px;font-size:13px}.chip b{font-weight:700;letter-spacing:.5px}.chip i{font-style:normal;color:var(--teal);font-size:11px}.chip.good{background:#14351f}.chip.good i{color:var(--good)}.chip.miss{background:#24284a}.chip.miss i{color:var(--miss)}.end{justify-content:flex-start}.end h2{font-size:22px;margin:6px 0 2px;color:var(--muted)}.final-score{font-size:clamp(52px,16vw,80px);font-weight:900;line-height:1;color:var(--accent)}.final-sub{color:var(--muted);text-align:center;margin:8px 0 18px;font-size:14px}.final-sub b{color:var(--ink)}.end-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:18px}.end-col h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 8px}.wlist{display:flex;flex-wrap:wrap;gap:6px;max-height:230px;overflow-y:auto;align-content:flex-start}.empty{color:var(--muted);font-size:13px}.end-actions{display:flex;gap:12px;width:100%;max-width:360px}.end-actions .primary,.end-actions .ghost{flex:1;width:auto}@media (max-width: 380px){.end-cols{grid-template-columns:1fr}}