:root{--bg:#0f1424;--board:#1b40b8;--board-edge:#12308f;--empty:#0c1020;--red:#ff4d5e;--yellow:#ffd23f;--text:#e8ecf8;--muted:#8b95b8;--slot:min(11vw, 68px);--gap:min(1.6vw, 10px)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(1200px 800px at 50% -10%, #1a2240, var(--bg));color:var(--text);-webkit-user-select:none;user-select:none;justify-content:center;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}#app{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:560px;padding:20px 16px 40px;display:flex}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}h1{letter-spacing:.5px;margin:0;font-size:1.6rem}.room{color:var(--muted);align-items:center;gap:8px;font-size:.9rem;display:flex}.room-label{text-transform:uppercase;letter-spacing:1px;font-size:.7rem}#room-code{color:var(--text);letter-spacing:2px;background:#ffffff0f;border-radius:6px;padding:2px 8px;font-size:1rem}button{font:inherit;color:var(--text);cursor:pointer;background:#ffffff14;border:1px solid #ffffff24;border-radius:8px;padding:6px 12px;transition:background .15s}button:hover{background:#ffffff29}button:active{transform:translateY(1px)}.status{text-align:center;min-height:1.4em;margin:0;font-size:1.1rem;font-weight:600}.board{grid-template-columns:repeat(7, var(--slot));gap:var(--gap);padding:var(--gap);background:linear-gradient(180deg, var(--board), var(--board-edge));border-radius:16px;display:grid;box-shadow:0 12px 40px #00000073,inset 0 2px #ffffff1f}.column{grid-template-rows:repeat(6, var(--slot));gap:var(--gap);cursor:pointer;display:grid}.column.disabled{cursor:default}.column:not(.disabled):hover .cell:empty:last-child,.column:not(.disabled):hover .cell.hint{box-shadow:inset 0 0 0 3px #ffffff59}.cell{width:var(--slot);height:var(--slot);background:var(--empty);border-radius:50%;transition:transform 80ms;box-shadow:inset 0 3px 6px #0000008c}.cell.red{background:radial-gradient(circle at 35% 30%, #ff9aa4, var(--red));box-shadow:inset 0 -3px 8px #00000059,0 0 12px #ff4d5e66}.cell.yellow{background:radial-gradient(circle at 35% 30%, #ffe98a, var(--yellow));box-shadow:inset 0 -3px 8px #00000059,0 0 12px #ffd23f66}.cell.win{animation:.5s infinite alternate pop}@keyframes pop{to{transform:scale(1.12)}}.controls{align-items:center;gap:14px;min-height:40px;display:flex}.conn-dot{background:var(--muted);border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 3px #ffffff0f}.conn-dot.connecting{background:var(--yellow)}.conn-dot.connected{background:#35d07f}.conn-dot.disconnected{background:var(--red)}.toast{opacity:0;pointer-events:none;background:#000c;border-radius:8px;padding:8px 16px;font-size:.9rem;transition:opacity .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}