#panel:has(.gomoku-game) {width: min(950px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);}
.gomoku-game {color: #423123;}
.gomoku-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0;}
.gomoku-game button:not([data-square]), .gomoku-game select, .gomoku-game input {font: inherit; border: 2px solid #9b774d; border-radius: 10px; background: #fff8e9; color: #513621; padding: 10px 14px; min-height: 44px; box-sizing: border-box;}
.gomoku-game button:not([data-square]) {cursor: pointer; font-weight: 700; box-shadow: 0 3px 0 #ac8a58; transition: background .12s, transform .12s;}
.gomoku-game button:not([data-square]):hover:enabled {background: #f3dfb6;}
.gomoku-game button:not([data-square]):active:enabled {transform: translateY(2px); box-shadow: 0 1px 0 #ac8a58;}
.gomoku-game button[aria-pressed='true']:not([data-square]), .gomoku-game button[data-gm='start'], .gomoku-game button[data-gm='ready'] {background: #356b59; border-color: #244e40; color: #fff; box-shadow: 0 3px 0 #244e40;}
.gomoku-game button:disabled {cursor: default; opacity: .5; box-shadow: none;}
.gomoku-game :is(button, select, input):focus-visible {outline: 3px solid #267d76; outline-offset: 2px;}
.gomoku-actions label {display: flex; flex-wrap: wrap; align-items: center; gap: 6px;}
.gomoku-actions input {width: 8em; text-transform: uppercase;}
.gomoku-layout {display: grid; grid-template-columns: minmax(0, 620px) minmax(150px, 1fr); gap: 20px; align-items: start;}
.gomoku-board {display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; background: linear-gradient(130deg, #f9dfa2, #e8bf7e 55%, #f4d99f); border: 5px solid #795136; border-radius: 10px; box-shadow: inset 0 0 20px #93683955, 0 6px 16px #42312325; box-sizing: border-box; padding: 6px;}
.gomoku-board button[data-square] {position: relative; min-width: 0; min-height: 0; border: 0; border-radius: 0; padding: 0; background: linear-gradient(#79513688, #79513688) center / 1px 100% no-repeat, linear-gradient(#79513688, #79513688) center / 100% 1px no-repeat; cursor: pointer; opacity: 1; touch-action: manipulation; display: grid; place-items: center;}
.gomoku-board button span {display: block; width: 82%; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; pointer-events: none;}
.gomoku-board .occupied span {box-shadow: 1px 2px 3px #402c2277;}
.gomoku-board .black.occupied span {background: radial-gradient(circle at 35% 28%, #666, #151919 70%); border: 1px solid #171c1c;}
.gomoku-board .white.occupied span {background: radial-gradient(circle at 35% 28%, #fff, #e1e2d8 70%); border: 1px solid #9c998b;}
.gomoku-board button.last::after {content: ''; position: absolute; width: 17%; aspect-ratio: 1; background: #e95b3f; border-radius: 50%; pointer-events: none;}
.gomoku-board button.winning span {outline: 3px solid #258970; outline-offset: 1px;}
.gomoku-board button:not(:disabled):hover span {background: #237d7655; border: 2px solid #237d76;}
.gomoku-status {background: #356b59; color: #fff; font-weight: 700; border-radius: 10px; padding: 12px 14px; margin: 12px 0;}
.gomoku-feedback {color: #a12b25; font-weight: 600;}
.gomoku-guide {font-size: 14px; line-height: 1.65;}
.gomoku-guide h3 {margin-bottom: 4px;}
.gomoku-guide summary {cursor: pointer; font-weight: 700; padding: 10px; border: 1px solid #a7875d; border-radius: 8px; background: #fff8e9;}
.gomoku-players {font-weight: 700;}
.gomoku-game [hidden] {display: none !important;}
@media (max-width: 650px) {
    .gomoku-layout {grid-template-columns: minmax(0, 1fr); gap: 8px;}
    .gomoku-board {max-width: 600px; margin: 0 auto; padding: 3px; border-width: 3px;}
    .gomoku-guide {font-size: 13px;}
    .gomoku-game button:not([data-square]), .gomoku-game select, .gomoku-game input {padding: 8px 10px; font-size: 13px;}
}