:root{--bg: #0c0f16;--panel: #161b27;--grid: #1d2433;--empty: #131825;--line: #2a3346;--ink: #eef1f7;--muted: #93a0bd;--R: #ef4444;--Y: #eab308;--B: #3b82f6;--O: #f97316;--G: #22c55e;--P: #a855f7;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(900px 500px at 50% -10%,#182033,var(--bg));color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;user-select:none}.wrap{max-width:440px;margin:0 auto;padding:16px 14px 34px}header h1{margin:0;font-size:2rem;letter-spacing:2px;background:linear-gradient(90deg,var(--R),var(--Y),var(--G),var(--B),var(--P));-webkit-background-clip:text;background-clip:text;color:transparent}.tag{margin:3px 0 0;color:var(--muted);font-size:.8rem;line-height:1.35}.bar{display:flex;align-items:center;gap:8px;margin:12px 0;flex-wrap:wrap}.spacer{flex:1}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:0;padding:7px 12px;font-size:.8rem;cursor:pointer}.seg button.active{background:linear-gradient(180deg,#5b6bff,#3a49d6);color:#fff;font-weight:700}select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:.8rem}button.primary{background:linear-gradient(180deg,#5b6bff,#3a49d6);color:#fff;border:0;border-radius:10px;padding:8px 15px;font-weight:700;font-size:.88rem;cursor:pointer}button.primary:active{transform:translateY(1px)}.play{display:flex;gap:12px;align-items:flex-start}.boardwrap{position:relative}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(16,1fr);gap:2px;width:min(58vw,256px);aspect-ratio:8 / 16;background:var(--grid);border:1px solid var(--line);border-radius:10px;padding:4px}.cell{border-radius:4px;background:var(--empty);position:relative}.cell.R{background:var(--R)}.cell.Y{background:var(--Y)}.cell.B{background:var(--B)}.cell.O{background:var(--O)}.cell.G{background:var(--G)}.cell.P{background:var(--P)}.cell.pill{box-shadow:inset 0 2px 2px #ffffff59,inset 0 -2px 3px #0000004d}.cell.germ{border-radius:50%;box-shadow:inset 0 0 0 2px #00000059}.cell.germ:after{content:"";position:absolute;inset:28%;border-radius:50%;background:#00000073}.cell.active{outline:2px solid rgba(255,255,255,.55);outline-offset:-2px}.side{display:flex;flex-direction:column;gap:10px;flex:1}.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}.panelbox .k{font-size:.6rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.panelbox b{font-size:1.2rem;display:block}.next{display:flex;gap:4px;margin-top:4px}.next .cell{width:20px;height:20px}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.pad button{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:12px 0;font-size:1.1rem;cursor:pointer}.pad button:active{background:#222b3d}.pad .wide{grid-column:span 3}.pad .drop{background:linear-gradient(180deg,#5b6bff,#3a49d6);color:#fff;font-weight:700}.hint{margin:12px 0 0;color:var(--muted);font-size:.74rem;line-height:1.45}.hint b.R{color:var(--R)}.hint b.B{color:var(--B)}.hint b.P{color:var(--P)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080b12d1;border-radius:10px;backdrop-filter:blur(2px);text-align:center}.overlay.hidden{display:none}.overlay .card{padding:16px}.overlay h2{margin:0 0 6px;font-size:1.4rem}.overlay p{margin:0 0 14px;color:var(--muted);font-size:.85rem;line-height:1.5}.overlay b{color:var(--ink)}.overlay .row{display:flex;gap:8px;justify-content:center}