:root{--board:#1d4ed8;--empty:#e6edff;--red:#ef4444;--yellow:#facc15;--slot:60px}*{box-sizing:border-box}body{color:#f8fafc;background:#0f172a;margin:0;font-family:system-ui,sans-serif}.app{text-align:center;max-width:560px;margin:40px auto;padding:0 16px}h1{letter-spacing:-.02em}.controls{justify-content:center;align-items:center;gap:16px;margin-bottom:20px;display:flex}button{font:inherit;color:#fff;cursor:pointer;background:#6366f1;border:none;border-radius:8px;padding:10px 18px}button:disabled{opacity:.5;cursor:default}.status{min-height:1.2em;font-weight:600}.error{color:#fca5a5}.hint{opacity:.7}.board{grid-template-columns:repeat(7, var(--slot));background:var(--board);border-radius:12px;gap:8px;width:max-content;margin:0 auto;padding:12px;display:grid}.column{grid-template-rows:repeat(6, var(--slot));border-radius:8px;gap:8px;display:grid}.column.playable{cursor:pointer}.column.playable:hover{background:#ffffff1f}.cell{width:var(--slot);height:var(--slot);place-items:center;display:grid}.disc{background:var(--empty);border-radius:50%;width:82%;height:82%;box-shadow:inset 0 3px 6px #00000040}.cell.red .disc{background:var(--red)}.cell.yellow .disc{background:var(--yellow)}