:root{--board-blue: #2b56b4;--board-blue-hi: #3866cf;--hole: #0d1117;--red: #e54353;--red-hi: #ff6b75;--yellow: #f2c33e;--yellow-hi: #ffdb6a}.player-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;padding:0 4px}.player-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.player-disc{width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 -2px 3px #0006,inset 0 1px 2px #ffffff40;border:1px solid rgba(0,0,0,.3)}.player-disc.red{background:radial-gradient(circle at 35% 30%,var(--red-hi) 0%,var(--red) 60%,#8c1f2a 100%)}.player-disc.yellow{background:radial-gradient(circle at 35% 30%,var(--yellow-hi) 0%,var(--yellow) 60%,#997520 100%)}.player-name{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);flex-shrink:0}.status-box.status--win{background:#ef444438;border-color:#ef44448c;color:#fecaca}.board-wrapper{width:100%;aspect-ratio:7 / 6;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #000c,0 12px 40px #0000008c,0 40px 90px #0000004d}.board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);width:100%;height:100%;background:linear-gradient(180deg,var(--board-blue-hi) 0%,var(--board-blue) 100%);padding:1.2%;gap:0}.cell{position:relative;background:transparent;border:none;outline:none;padding:0;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}.cell:before{content:"";width:84%;aspect-ratio:1;border-radius:50%;background:var(--hole);box-shadow:inset 0 3px 5px #000000b3,inset 0 -1px 2px #ffffff0f}.disc{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:84%;aspect-ratio:1;border-radius:50%;pointer-events:none;box-shadow:0 2px 4px #00000073,inset 0 -4px 8px #00000059,inset 0 3px 4px #ffffff38;border:1px solid rgba(0,0,0,.35)}.disc.dropping{animation:drop-in .35s cubic-bezier(.34,1.16,.64,1)}.disc.red{background:radial-gradient(circle at 35% 30%,var(--red-hi) 0%,var(--red) 55%,#8c1f2a 100%)}.disc.yellow{background:radial-gradient(circle at 35% 30%,var(--yellow-hi) 0%,var(--yellow) 55%,#997520 100%)}@keyframes drop-in{0%{transform:translateY(-600%)}85%{transform:translateY(8%)}to{transform:translateY(0)}}.cell.column-hover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:84%;aspect-ratio:1;border-radius:50%;opacity:.25;pointer-events:none}.board[data-turn=red] .cell.column-hover:not(.filled):after{background:var(--red)}.board[data-turn=yellow] .cell.column-hover:not(.filled):after{background:var(--yellow)}.cell.column-hover:after{display:none}.cell.column-hover.preview-slot:after{display:block}.cell.last-move .disc{box-shadow:0 0 0 3px #ffffff80,0 2px 4px #00000073,inset 0 -4px 8px #00000059,inset 0 3px 4px #ffffff38}.cell.win .disc{animation:pulse-win 1.4s ease-in-out infinite;box-shadow:0 0 0 4px #6fcf8fe6,0 0 22px #6fcf8f99,0 2px 4px #00000073,inset 0 -4px 8px #00000059,inset 0 3px 4px #ffffff38}@keyframes pulse-win{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}.cell.featured:before{box-shadow:inset 0 3px 5px #000000b3,inset 0 0 0 3px #f59e0bb3}.history-scroll{max-height:188px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.history-scroll::-webkit-scrollbar{width:4px}.history-scroll::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:99px}.history-table{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}.history-table td{padding:3px 6px;color:#556070}.history-table tr:last-child td{color:#9fb8d8}.move-num{color:#ffffff2e!important;font-size:.72rem!important;width:26px;text-align:right;padding-right:8px!important}.history-disc{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1px solid rgba(0,0,0,.4)}.history-disc.red{background:var(--red)}.history-disc.yellow{background:var(--yellow)}@media(max-width:600px){.player-bar{gap:8px}}
