:root{--bg:#0f1320;--panel:#181e30;--panel-2:#20283f;--text:#e8ecf7;--muted:#8f9ab5;--accent:#4c7dff;--board:#2447b8;--board-dark:#1a3590;--hole:#0b0f1a;--p1:#ff4d5e;--p1-dark:#b8202f;--p2:#ffd23f;--p2-dark:#c79a00;--danger:#e5484d;--radius:12px;--board-size:min(94vw, 540px, max(280px, 100vh - 190px))}*{box-sizing:border-box}html,body{margin:0}body{background:radial-gradient(circle at 50% -20%, #1d2745, var(--bg) 60%);min-height:100vh;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}button,select,input{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.topbar{justify-content:space-between;align-items:center;gap:12px;max-width:1100px;margin:0 auto;padding:10px 16px;display:flex}.topbar h1{letter-spacing:.5px;margin:0;font-size:1.4rem}.topbar h1 span{color:var(--p2)}.layout{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px;max-width:1100px;margin:0 auto;padding:0 12px 16px;display:flex}.play-area{width:var(--board-size);flex-direction:column;align-items:center;gap:12px;max-width:100%;display:flex}.side{flex-direction:column;flex:280px;gap:14px;min-width:0;max-width:380px;display:flex}@media (width<=700px){.side{max-width:var(--board-size);flex-basis:100%}}.status{border-radius:var(--radius);background:var(--panel);text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;width:100%;min-height:2.6em;padding:8px 12px;font-weight:600;display:flex}.status .turn-no{color:var(--muted);font-size:.9em;font-weight:400}.status.over{background:var(--panel-2);font-size:1.1em}.board-wrap{width:100%}.board{border-radius:var(--radius);outline-offset:4px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;grid-template-columns:repeat(7,1fr);width:100%;display:grid}.col{cursor:pointer;flex-direction:column;min-width:0;display:flex}.board.locked .col{cursor:default}.col.full{cursor:not-allowed}.col-head{aspect-ratio:1;position:relative}.col-cells{background:var(--board);box-shadow:inset 0 -6px 0 var(--board-dark);padding:4px 0;overflow:hidden}.col:first-child .col-cells{border-radius:var(--radius) 0 0 var(--radius)}.col:last-child .col-cells{border-radius:0 var(--radius) var(--radius) 0}.cell{aspect-ratio:1;position:relative}.cell:before{content:"";background:var(--hole);border-radius:50%;position:absolute;inset:9%;box-shadow:inset 0 3px 6px #0009}.col.selected .col-cells,.board:not(.locked) .col:not(.full):hover .col-cells{background:#2d55d4}.piece{z-index:1;pointer-events:none;position:absolute;inset:0}.piece:before{content:"";background:radial-gradient(circle at 35% 30%, #ffffff73, transparent 45%), var(--c);box-shadow:inset 0 -4px 0 var(--cd), 0 2px 4px #0006;border-radius:50%;position:absolute;inset:9%}.piece.p1{--c:var(--p1);--cd:var(--p1-dark)}.piece.p2{--c:var(--p2);--cd:var(--p2-dark)}.piece.dropping{animation:drop var(--dur,.4s) linear both}@keyframes drop{0%{transform:translateY(calc(var(--fall,1) * -100%));animation-timing-function:cubic-bezier(.5,0,1,1)}70%{animation-timing-function:ease-out;transform:translateY(0)}84%{animation-timing-function:ease-in;transform:translateY(-14%)}to{transform:translateY(0)}}.ghost{opacity:0;transition:opacity .12s;position:absolute;inset:0}.board:not(.locked) .col:not(.full):hover .ghost,.board:not(.locked) .col.selected:not(.full) .ghost,.board.won .piece:not(.win){opacity:.45}.piece.win:before{animation:1s ease-in-out infinite alternate glow}@keyframes glow{0%{box-shadow:inset 0 -4px 0 var(--cd), 0 0 4px 1px var(--c);transform:scale(1)}to{box-shadow:inset 0 -4px 0 var(--cd), 0 0 18px 6px var(--c);transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.piece.win:before{animation-duration:2s}}.actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}button{background:var(--panel-2);cursor:pointer;border:1px solid #33406a;border-radius:10px;padding:9px 16px;transition:background .15s,opacity .15s}button:hover:not(:disabled){background:#2a3556}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);font-weight:600}button.primary:hover:not(:disabled){background:#6a93ff}button.danger{border-color:var(--danger);color:#ffb3b5}button.small{padding:6px 12px;font-size:.9em}.icon-btn[aria-pressed=false]{opacity:.7}.panel{background:var(--panel);border-radius:var(--radius);padding:12px 14px}.panel h2{margin:0 0 10px;font-size:1rem}.panel h2 small{color:var(--muted);font-weight:400}.field{color:var(--muted);flex-direction:column;gap:4px;margin-bottom:10px;font-size:.85rem;display:flex}.field select,.field input{background:var(--bg);border:1px solid #33406a;border-radius:8px;width:100%;min-width:0;padding:7px 9px;font-size:1rem}.field>span{align-items:center;gap:6px;display:flex}.field[hidden]{display:none}.names{grid-template-columns:1fr 1fr;gap:10px;display:grid}.names .field{margin-bottom:0}.dot{border-radius:50%;flex:none;width:.9em;height:.9em;display:inline-block}.dot.p1{background:var(--p1)}.dot.p2{background:var(--p2)}.dot.draw{background:var(--muted)}.score{flex-direction:column;gap:6px;margin-bottom:10px;display:flex}.score-item{align-items:center;gap:8px;display:flex}.score-item span{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.score-item strong{font-variant-numeric:tabular-nums;font-size:1.2em}.history{flex-direction:column;gap:3px;max-height:180px;margin:0;padding:0;font-size:.9rem;list-style:none;display:flex;overflow-y:auto}.history li{align-items:center;gap:6px;display:flex}.muted{color:var(--muted)}.panel .muted{margin:0;font-size:.9rem}.help{text-align:center;padding:0 12px 16px;font-size:.8rem}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}