.classic-game{--ivory:#f4f1e7;--mint:#9fe6d3;--coral:#f5a78e;max-width:540px;margin:auto}.board-toolbar{flex-wrap:wrap;justify-content:space-between;gap:12px;display:flex}.board-toolbar label{flex:1;gap:6px;min-width:120px;font-size:11px;display:grid}.board-toolbar select{border-radius:10px;width:100%;min-height:48px;padding:10px;font-size:13px}.board-status{text-align:center;color:var(--mint);margin:18px 0;font-size:18px;font-weight:750}.board-status[data-side="2"]{color:var(--coral)}.classic-board{grid-template-columns:repeat(var(--board-size), minmax(0, 1fr));background:var(--ivory);outline-offset:5px;aspect-ratio:1;user-select:none;touch-action:manipulation;border-radius:20px;gap:0;padding:14px;display:grid;box-shadow:0 14px 35px #070f2055,inset 0 1px #fff}.classic-board .board-cell{aspect-ratio:1;min-width:0;min-height:0;box-shadow:none;cursor:pointer;outline-offset:-3px;background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.board-piece{z-index:1;background:var(--mint);border:1px solid #356e6480;border-radius:50%;width:76%;height:76%;display:block;position:relative;box-shadow:inset 0 2px 2px #ffffff90,inset 0 -3px 2px #0002,0 2px 3px #14212b30}.board-piece.side-2{background:var(--coral);border-color:#9d503d80}.board-piece.king{text-align:center;color:#243c43;justify-content:center;align-items:center;font-size:clamp(16px,4vw,28px);line-height:1.1;display:flex}.classic-board .cursor{z-index:2;border-radius:5px;outline:2px solid #27665d}.classic-board .preview{z-index:2;outline:3px solid #27665d;background:#a7f0e6a0!important}.board-cell.preview:empty:after{content:"";background:#9fe6d360;border:2px dashed #27665d;border-radius:50%;width:60%;height:60%}.classic-board .source{z-index:2;outline:3px solid #27665d}.classic-board .last .board-piece:after{content:"";background:#223947;border-radius:50%;position:absolute;inset:40%}.reversi .classic-board{background:#dfe9df;gap:2px}.reversi .board-cell{background:#f7f7ef;border-radius:4px}.reversi .board-cell.legal:empty:before,.checkers .board-cell.legal:empty:before{content:"";background:#3b7b7080;border-radius:50%;width:18%;height:18%}.gomoku .classic-board{background:#ede4cf;padding:16px}.gomoku .board-cell{--cell-background:linear-gradient(90deg, transparent calc(50% - .5px), #9d907c calc(50% - .5px), #9d907c calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #9d907c calc(50% - .5px), #9d907c calc(50% + .5px), transparent calc(50% + .5px));background:var(--cell-background)}.gomoku .board-piece{width:90%;height:90%;box-shadow:inset 0 1px #fff9,0 1px 2px #0004}.four-in-a-row .classic-board{aspect-ratio:7/6;background:#314d60;gap:8px}.four-in-a-row .board-cell{background:#152b3b;border-radius:50%;box-shadow:inset 0 3px 4px #09152580}.four-in-a-row .board-piece{width:90%;height:90%}.checkers .classic-board{background:#dfdfce}.checkers .dark-square{background:#77948d}.checkers .light-square{cursor:default;background:#eef0e1}.dots-and-boxes .classic-board{grid-template-rows:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;grid-template-columns:8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px;gap:0;padding:20px;position:relative}.box-dot{z-index:2;background:#263f49;border-radius:50%}.box-fill{color:#263f49;border-radius:8px;justify-content:center;align-items:center;margin:8px;font-size:18px;font-weight:750;display:flex}.box-fill.side-1{background:#9fe6d380}.box-fill.side-2{background:#f5a78e80}.classic-board .edge{aspect-ratio:auto;z-index:1;position:relative;overflow:visible}.edge:before{content:"";background:#c3c8be;border-radius:8px;position:absolute}.edge.horizontal:before{height:6px;inset:1px 2px}.edge.vertical:before{width:6px;inset:2px 1px}.edge:after{content:"";position:absolute;inset:-12px}.edge[data-side="1"]:before{background:#438f7c}.edge[data-side="2"]:before{background:#cd7258}.classic-board .edge.cursor,.classic-board .edge.preview{outline:none;background:0 0!important}.edge.cursor:before,.edge.preview:before{background:#438f7c;box-shadow:0 0 0 3px #438f7c50}.board-selection,.board-help{text-align:center;color:#bfced6;min-height:20px;margin:14px 0;font-size:12px;line-height:1.6}.board-confirm{border-radius:12px;min-width:200px;min-height:48px;margin:0 auto;font-weight:750;display:block;background:var(--mint)!important;color:#172e36!important;border-color:var(--mint)!important}.board-confirm:disabled{opacity:.4;cursor:default}.board-directions{justify-content:center;gap:10px;margin-top:14px;display:flex}.board-directions button{border-radius:10px;min-width:48px;min-height:48px;font-size:21px}.classic-game[data-ai-turn=true] .classic-board{cursor:wait}@media (width<=560px){.classic-board{border-radius:14px;padding:8px}.gomoku .classic-board{padding:10px}.four-in-a-row .classic-board{gap:5px}.dots-and-boxes .classic-board{padding:16px}.board-toolbar{gap:8px}.board-status{font-size:16px}.board-toolbar select{font-size:12px}.board-help{font-size:11px}}.classic-game .classic-board .board-cell:hover:not(:disabled){background:var(--cell-background,transparent);box-shadow:inset 0 0 0 2px #438f7c40}.classic-game.four-in-a-row .classic-board .board-cell:hover:not(:disabled){background:#152b3b}.classic-game.checkers .classic-board .dark-square:hover:not(:disabled){background:#77948d}.classic-game.checkers .classic-board .light-square:hover:not(:disabled){background:#eef0e1}.checkers .movable .board-piece{outline-offset:2px;outline:2px solid #225b50}.board-options{gap:12px;display:grid}.board-options .board-help{text-align:left;margin:0;font-size:12px}.board-options .board-toolbar{grid-template-columns:1fr;display:grid}.board-options .board-toolbar select{font-size:16px}.board-actions{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:8px;display:grid}.board-actions .board-confirm{min-width:116px;padding:10px;font-size:12px}.board-actions .board-selection{text-align:left;margin:0}#player[data-immersive=true] .classic-board{width:min(100%,max(200px,100cqh - 160px));margin-inline:auto}#player[data-immersive=true] .board-status{margin:0 0 8px;font-size:15px}#player[data-immersive=true] .board-selection{font-size:12px}#player[data-immersive=true] .board-directions{margin-top:8px}@media (height<=500px) and (width>=600px){#player[data-immersive=true] .classic-game{grid-template-columns:minmax(200px,1fr) minmax(240px,1fr);align-items:center;gap:12px 20px;max-width:720px;display:grid}#player[data-immersive=true] .classic-board{grid-area:1/1/4;width:min(100%,max(160px,100cqh - 16px))}#player[data-immersive=true] .board-status,#player[data-immersive=true] .board-actions,#player[data-immersive=true] .board-directions{grid-column:2;margin:0}}