:root{--bg: #0c1020;--panel: #161c33;--panel2: #1e2746;--line: #2c3760;--ink: #e7ecfb;--muted: #8b97c2;--p1: #f5a623;--p1d: #b9760d;--p2: #2dd4d4;--p2d: #128a8a;--accent: #6d8bff}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at 50% -10%,#18213f,var(--bg));color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.wrap{max-width:520px;margin:0 auto;padding:18px 16px 50px}h1{font-size:38px;letter-spacing:7px;margin:14px 0 8px;font-weight:800;background:linear-gradient(90deg,var(--p1),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}h3{margin:18px 0 8px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.tag{color:#c4ccea;line-height:1.55}.tag b{color:var(--ink)}.muted{color:var(--muted)}button{font-family:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);border-radius:10px}button:hover{border-color:var(--accent)}.primary{background:var(--accent);color:#0a0f22;border:none;font-weight:700;padding:11px 20px}.ghost{background:transparent;color:var(--muted);padding:11px 18px}.link{background:transparent;border:none;color:var(--muted);padding:6px 8px}.link:hover{color:var(--ink)}.modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.mode{text-align:left;padding:13px 15px;display:flex;flex-direction:column;gap:3px}.mode b{font-size:16px}.mode span{color:var(--muted);font-size:12px}.mode.wide{grid-column:1 / -1}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}#rw-hud:not(:empty){display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-2px 0 12px}.status{font-size:16px}.status .p1t{color:var(--p1)}.status .p2t{color:var(--p2)}.board{display:grid;grid-template-columns:repeat(4,auto);gap:9px;padding:14px;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:16px}.board.thinking{opacity:.85}.tube{display:flex;flex-direction:column;gap:5px;padding:6px;background:#0e1430;border:1px solid var(--line);border-radius:12px;align-items:center;transition:border-color .15s,transform .1s}.tube:not(.locked):hover{border-color:var(--accent);transform:translateY(-2px)}.tube:not(.locked):hover .slot:not(.p1):not(.p2):last-child{box-shadow:inset 0 0 0 2px var(--accent)}.tube.locked{cursor:default}.slot{width:34px;height:34px;border-radius:50%;background:#070b1c;box-shadow:inset 0 2px 4px #00000080}.slot.p1{background:radial-gradient(circle at 35% 30%,#ffd07a,var(--p1) 55%,var(--p1d));box-shadow:0 1px 3px #0006}.slot.p2{background:radial-gradient(circle at 35% 30%,#9af4f4,var(--p2) 55%,var(--p2d));box-shadow:0 1px 3px #0006}.slot.win{box-shadow:0 0 0 3px #fff,0 0 12px 2px #fff;animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 3px #fff,0 0 18px 5px #fff}}.legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}.dot{width:13px;height:13px;border-radius:50%;display:inline-block}.dot.p1{background:var(--p1)}.dot.p2{background:var(--p2);margin-left:8px}.hintnote{flex-basis:100%;font-size:12px;margin-top:4px}.result{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:center}.rmsg{font-size:15px;margin-bottom:8px}.score{font-size:20px;margin-bottom:10px}.score b{color:var(--p1)}.rbtns{display:flex;gap:10px;justify-content:center}@media(max-width:480px){.modes{grid-template-columns:1fr}.board{gap:7px;padding:10px}.tube{gap:4px;padding:5px}.slot{width:30px;height:30px}}