.back{margin-left:auto;color:inherit;font-size:14px}

#board{position:relative;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(10,1fr);aspect-ratio:9/10;container-type:inline-size;border:4px double #98754c;border-radius:4px;background:linear-gradient(120deg,#eed6aa,#e1bd87);box-shadow:0 4px 12px #51351919}
#board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#board path{fill:none;stroke:#856746;stroke-width:.24}
#board text{font:4.6px "Songti SC",serif;fill:#795d3b}
.square{position:relative;display:grid;place-items:center;min-height:0;padding:0;border:0;background:transparent;border-radius:0}
.square:focus-visible{outline:2px solid #355941;outline-offset:-2px}
.piece{display:grid;place-items:center;border-radius:50%;border:3px double #a7895d;background:radial-gradient(at 35% 25%,#fff0cc,#e6c58e);box-shadow:0 2px 3px #50331655;font:700 6.3cqw "Songti SC","STSong",serif;color:#302c22}
.piece{width:85%;aspect-ratio:1}
.red{color:#a13526}
.selected .piece{outline:3px solid #3b6551}
.target:after{content:"";position:absolute;width:20%;aspect-ratio:1;border-radius:50%;background:#42634b}
.target:has(.piece):after{width:86%;height:86%;border:2px dashed #42634b;background:transparent}
.last{background:#fff4c552}
aside{padding:18px;border:1px solid #d4d8cb;border-radius:8px;background:#fffdf6}
.mode{font-size:13px;color:#63715f;margin:0 0 8px}
#hint,details{font-size:14px;line-height:1.65}details{margin-top:16px;border-top:1px solid #ddd9ca;padding-top:12px}summary{cursor:pointer}

#roomControls{font-size:14px;overflow-wrap:anywhere}
#roomControls [hidden]{display:none}
#roomControls input{width:100%;margin-top:8px}
#roomMessage:empty{display:none}

.table {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(235px, 31%);
  grid-template-areas: "turn tools" "board tools";
  align-items: start;
  gap: 12px clamp(18px, 3vw, 36px);
  max-width: 1020px;
  margin: auto;
  padding: 20px 0 36px;
}
.turn-strip {
  grid-area: turn;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.turn-strip, .table #board { width: min(100%, max(360px, 74vh - 54px)); justify-self: center }
#turn { display: flex; align-items: center; gap: 10px; font-size: clamp(22px, 2.4vw, 30px) }
#turn:where([data-stone]:not([data-stone=""]))::before {
  content: "";
  flex: 0 0 auto;
  width: .63em;
  height: .63em;
  border-radius: 50%;
  background: #26303c;
  border: 1px solid #253044;
}
#turn[data-stone="white"]::before { background: white; border-color: #8695a3 }
#turn[data-stone="red"]::before { background: #ad4336; border-color: #81382e }
.turn-strip .mode { margin: 0; font-size: 13px; color: #4c607b; text-align: right }
.table #board { grid-area: board; box-shadow: 0 4px 0 #ab8a63, 0 10px 24px #25334a18 }
.table aside { grid-area: tools; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 8px; padding: clamp(16px, 2vw, 26px) }
#hint { color: #465970; margin: 0 0 16px }
.table details { border-color: var(--line) }
.table summary { font-weight: 600 }
.table #agree,.table #invite { color: white; background: var(--blue) }
#roomControls:not([hidden]) { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line) }
#roomCode { margin: 0 0 10px; font-variant-numeric: tabular-nums }
@media(max-width: 650px) {
  .table { grid-template-columns: minmax(0,1fr); grid-template-areas: "turn" "board" "tools"; padding-top: 14px; gap: 12px }
  .turn-strip, .table #board { width: 100% }
  .table aside { margin-top: 4px }
}