.board-screen.is-active{display:flex;flex-direction:column;gap:10px;padding:16px;overflow:auto;background:#123d3c}
.board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.board-toolbar h2{margin:0;font-size:28px;color:#ffd35c}.board-toolbar p{margin:5px 0;min-height:24px}.board-toolbar label{display:grid;gap:4px;font-size:12px;color:#c9ddd4}.board-toolbar select{font:inherit;font-size:15px;padding:10px;border:2px solid #78a599;border-radius:6px;background:#fff8e8;color:#123d3c}
.board-score{display:flex;gap:24px;justify-content:center;font-size:14px}.board-score strong{font-size:20px;color:#ffd35c}.board-stage{flex:1;min-height:180px;display:grid;place-items:center;container-type:size}.board-grid{width:min(100cqw,100cqh);height:min(100cqw,100cqh);display:grid;grid-template-columns:repeat(var(--cells),1fr);grid-template-rows:repeat(var(--cells),1fr);border:6px solid #f5d464;box-shadow:0 6px 0 #071f20;border-radius:5px;background:#eac887}
.board-cell{appearance:none;position:relative;display:grid;place-items:center;border:0;border-radius:0;padding:0;min-width:0;min-height:0;background:#eee2b9;cursor:pointer;touch-action:manipulation}.board-cell.dark{background:#327f74}.othello .board-cell{background:#24776b;border:1px solid #164a43}.gomoku .board-cell{background:linear-gradient(90deg,transparent calc(50% - .5px),#947647 calc(50% - .5px),#947647 calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#947647 calc(50% - .5px),#947647 calc(50% + .5px),transparent calc(50% + .5px));background-color:#eac887}
.stone{position:relative;width:78%;height:78%;border-radius:50%;display:grid;place-items:center;font-size:clamp(12px,3vw,24px);font-weight:900;box-shadow:0 2px 2px #0006;border:2px solid #0c2829;pointer-events:none}.stone.black{background:#163c3e;color:#ffd35c}.stone.white{background:#fff9e9;color:#163c3e;border-color:#c5bea8}.board-cell.legal:after{content:'';width:26%;height:26%;border-radius:50%;background:#ffe078;position:absolute}.board-cell.selected{box-shadow:inset 0 0 0 4px #ffd35c}.board-cell.last .stone:after{content:'';position:absolute;width:18%;height:18%;border-radius:50%;background:#ed765b}.board-cell.pending:after{content:'';position:absolute;width:70%;height:70%;border:3px dashed #123d3c;border-radius:50%;background:#123d3c55}.board-cell:focus-visible{outline:3px solid #ef694a;outline-offset:-3px;z-index:1}.board-cell[aria-disabled=true]{cursor:default}
.board-bottom{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}.board-bottom button{background:#ffd35c;color:#123d3c;border:2px solid #071f20;border-bottom-width:5px;border-radius:8px;min-height:46px;padding:8px 24px;font:inherit;font-weight:900;cursor:pointer}.board-bottom button:disabled{opacity:.6;cursor:default}.board-bottom details{font-size:13px;max-width:700px}.board-bottom summary{cursor:pointer;padding:10px}.board-bottom p{margin:4px;line-height:1.6}
@media(max-width:600px){.board-screen.is-active{padding:12px;gap:10px}.board-toolbar{flex-wrap:wrap}.board-toolbar h2{font-size:24px}.board-toolbar label{width:100%}.board-toolbar p{font-size:14px}.board-score{gap:16px}.board-score>span:last-child{display:none}.board-grid{border-width:4px}.board-bottom{gap:6px}.board-bottom button{padding:8px 18px}}