@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* Selectable visual modes layered over the core Go room styles. */

.warrior-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: url("assets/warrior-duel-bg-v3.png") center / cover no-repeat;
  filter: saturate(1.08) contrast(1.03) brightness(1.08);
  transition: opacity .55s ease;
}
.warrior-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 5, .04), transparent 30% 80%, rgba(4, 7, 5, .1));
}
.ink-landscape,
.backdrop-sun,
.seal-mark,
.backdrop-script { transition: opacity .45s ease; }
body[data-background="warriors"] .china-backdrop {
  background: linear-gradient(180deg, #100e0a, #080d0a);
}
body[data-background="warriors"] .warrior-backdrop { opacity: 1; }
body[data-background="warriors"] .ink-landscape,
body[data-background="warriors"] .backdrop-sun,
body[data-background="warriors"] .seal-mark,
body[data-background="warriors"] .backdrop-script { opacity: 0; }
.board-title-row { align-items: flex-end; gap: 16px; }
.board-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.visual-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--subtle);
  font: 500 7px "DM Mono", monospace;
  letter-spacing: .13em;
}
.visual-select select {
  max-width: 132px;
  border: 0;
  border-bottom: 1px solid rgba(154, 192, 141, .34);
  border-radius: 0;
  outline: 0;
  background: rgba(7, 15, 11, .62);
  color: var(--jade);
  padding: 5px 18px 5px 6px;
  font: 600 8px "DM Mono", monospace;
  letter-spacing: .06em;
  cursor: pointer;
}
.visual-select select:focus-visible { box-shadow: 0 0 0 2px rgba(154, 192, 141, .3); }
.bot-toggle { position: relative; padding-left: 12px; }
.bot-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--subtle);
  transform: translateY(-50%);
}
.bot-toggle.active::before { background: var(--jade); box-shadow: 0 0 9px rgba(154, 192, 141, .75); }

.board-zone { perspective: 1500px; perspective-origin: 50% 42%; }
.board-frame {
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.2, .75, .2, 1), box-shadow .5s ease, filter .5s ease;
  will-change: transform;
}
.board-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -17px;
  height: 18px;
  background:
    linear-gradient(90deg, rgba(63, 32, 12, .92), rgba(146, 87, 35, .96) 14%, rgba(95, 50, 20, .95) 84%, rgba(45, 24, 11, .95)),
    repeating-linear-gradient(92deg, transparent 0 10px, rgba(255, 218, 150, .09) 10px 11px);
  clip-path: polygon(1.2% 0, 98.8% 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 16px rgba(0, 0, 0, .38);
  pointer-events: none;
}
body[data-board-view="3d"] .board-frame {
  transform: rotateX(4.8deg) translateY(-4px) scale(.985);
  box-shadow:
    0 34px 48px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 225, 164, .16) inset,
    -14px 0 26px rgba(87, 51, 23, .13) inset,
    18px 0 30px rgba(255, 218, 145, .1) inset;
  filter: saturate(1.04) contrast(1.02);
}
body[data-board-view="2d"] .board-frame { transform: none; }
body[data-board-view="2d"] .board-frame::after { opacity: 0; }
body[data-board-view="3d"] .board-light {
  opacity: .3;
  background-image:
    linear-gradient(115deg, rgba(255, 244, 207, .2), transparent 32%, rgba(69, 35, 12, .16) 86%),
    repeating-linear-gradient(91deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(73, 42, 15, .2) 0 1px, transparent 1px 7px);
}
body[data-board-view="3d"] .stone.black {
  background: radial-gradient(circle at 31% 20%, #78897f 0%, #233129 15%, #09110d 50%, #010302 100%);
  box-shadow: 3px 5px 5px rgba(31, 15, 5, .54), -2px -2px 2px rgba(255, 255, 255, .14) inset, 0 8px 10px rgba(25, 13, 5, .2);
}
body[data-board-view="3d"] .stone.white {
  background: radial-gradient(circle at 31% 19%, #fffef9 0%, #f1f1e7 37%, #b8c0b3 76%, #89958a 100%);
  box-shadow: 3px 5px 5px rgba(31, 15, 5, .48), -2px -2px 2px white inset, 0 8px 10px rgba(25, 13, 5, .18);
}
.board-frame.is-thinking {
  box-shadow: 0 30px 58px rgba(0, 0, 0, .44), 0 0 0 1px rgba(154, 192, 141, .32), 0 0 34px rgba(154, 192, 141, .1);
}
.go-board.bot-turn .intersection { cursor: wait; }
.go-board.bot-turn .intersection:not(.occupied):hover .preview { display: none; }

@media (max-width: 900px) {
  .board-title-row { align-items: center; }
  .board-tools { gap: 7px; }
  .visual-select { font-size: 6px; }
  .visual-select select { max-width: 116px; font-size: 7px; }
  body[data-board-view="3d"] .board-frame { transform: rotateX(3.2deg) translateY(-2px) scale(.99); }
  .board-frame::after { bottom: -11px; height: 12px; }
}

@media (max-width: 590px) {
  .board-title-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .board-tools { width: 100%; justify-content: space-between; }
  .visual-select { gap: 3px; }
  .visual-select select { max-width: 105px; padding-right: 12px; }
  .board-tools .text-button { font-size: 6px; }
  body[data-board-view="3d"] .board-frame { transform: rotateX(2deg) scale(.995); }
  .board-frame::after { bottom: -7px; height: 8px; }
  .warrior-backdrop { background-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  .warrior-backdrop,
  .ink-landscape,
  .backdrop-sun,
  .seal-mark,
  .backdrop-script,
  .board-frame { transition: none; }
}


/* Elevated lacquered goban — material, depth, and lighting inspired by the
   physical-board presentation used by the Thai Chess room. */
.board-zone {
  position: relative;
  perspective: 1250px;
  perspective-origin: 50% 32%;
}
.board-zone::before,
.board-zone::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 7%;
  right: 7%;
  bottom: 1.5%;
  height: 12%;
  border-radius: 50%;
  pointer-events: none;
}
.board-zone::before {
  background: radial-gradient(ellipse, rgba(0, 0, 0, .62), transparent 70%);
  filter: blur(18px);
  transform: translateY(28px);
}
.board-zone::after {
  left: 15%;
  right: 15%;
  background: radial-gradient(ellipse, rgba(204, 151, 75, .11), transparent 68%);
  filter: blur(12px);
  transform: translateY(18px);
}

.board-frame {
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(255, 224, 164, .24);
  border-radius: 3px;
  background:
    radial-gradient(circle at 16px 16px, #7d5323 0 2px, #d5a55c 2.4px 3.2px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 16px) 16px, #7d5323 0 2px, #d5a55c 2.4px 3.2px, transparent 3.6px),
    radial-gradient(circle at 16px calc(100% - 16px), #7d5323 0 2px, #d5a55c 2.4px 3.2px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), #7d5323 0 2px, #d5a55c 2.4px 3.2px, transparent 3.6px),
    linear-gradient(122deg, rgba(255, 244, 207, .24), transparent 24%, rgba(95, 46, 14, .12) 77%),
    repeating-linear-gradient(91deg, rgba(255, 240, 199, .07) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, #e8c884 0%, #d5a45b 46%, #b97834 100%);
  box-shadow: 0 19px 46px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(92, 46, 15, .2);
}
.board-frame::before {
  z-index: 5;
  inset: 8px;
  border: 1px solid rgba(74, 35, 11, .32);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 186, .13),
    0 0 0 1px rgba(255, 244, 211, .07);
}
.board-light {
  z-index: 1;
  opacity: .32;
  background-image:
    linear-gradient(118deg, rgba(255, 249, 223, .28), transparent 28%, rgba(72, 33, 9, .18) 88%),
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(86, 43, 13, .12) 0 1px, transparent 1px 9px);
  mix-blend-mode: soft-light;
}
.go-board { z-index: 2; }

.goban-plaque {
  display: none;
  position: absolute;
  z-index: 7;
  right: 6.5%;
  bottom: -26px;
  align-items: center;
  gap: 7px;
  color: rgba(255, 225, 167, .88);
  font: 700 8px/1 "Noto Serif SC", serif;
  letter-spacing: .18em;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .72);
}
.goban-plaque span {
  padding: 3px 5px 4px;
  border: 1px solid rgba(245, 200, 116, .48);
  background: rgba(48, 20, 7, .55);
}
.goban-plaque i {
  color: rgba(221, 177, 102, .65);
  font: 500 6px/1 "DM Mono", monospace;
  letter-spacing: .16em;
}

body[data-board-view="3d"] .board-frame {
  transform: rotateX(14deg) translateY(-17px) scale(.972);
  transform-style: preserve-3d;
  box-shadow:
    0 46px 62px rgba(0, 0, 0, .49),
    0 12px 18px rgba(0, 0, 0, .26),
    inset 0 1px rgba(255, 244, 207, .35),
    inset -18px -12px 30px rgba(104, 52, 16, .14),
    inset 16px 10px 28px rgba(255, 231, 175, .11);
  filter: saturate(1.08) contrast(1.025);
}
body[data-board-view="3d"] .board-frame::after {
  z-index: -1;
  left: -1px;
  right: -1px;
  bottom: -39px;
  height: 40px;
  border: 1px solid rgba(43, 19, 6, .72);
  border-top-color: rgba(244, 196, 112, .22);
  border-radius: 0 0 7px 7px;
  background:
    linear-gradient(90deg, rgba(31, 12, 3, .72), transparent 4% 96%, rgba(31, 12, 3, .72)),
    linear-gradient(180deg, rgba(82, 35, 10, .05), rgba(30, 10, 2, .74)),
    url("assets/goban-lacquer-raster-v1.png") center bottom / 100% auto no-repeat;
  background-color: #5c2c10;
  background-blend-mode: multiply, multiply, normal;
  clip-path: polygon(.1% 0, 99.9% 0, 98.5% 100%, 1.5% 100%);
  box-shadow:
    0 16px 21px rgba(0, 0, 0, .47),
    inset 0 1px rgba(255, 226, 164, .18),
    inset 0 -7px 12px rgba(20, 7, 2, .42);
}
body[data-board-view="3d"] .goban-plaque { display: flex; }
body[data-board-view="3d"] .board-light {
  opacity: .43;
  background-image:
    radial-gradient(ellipse at 28% 4%, rgba(255, 252, 232, .32), transparent 36%),
    linear-gradient(116deg, rgba(255, 244, 207, .2), transparent 34%, rgba(68, 29, 7, .19) 88%),
    repeating-linear-gradient(91deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(73, 35, 10, .16) 0 1px, transparent 1px 9px);
}
body[data-board-view="3d"] .intersection::before,
body[data-board-view="3d"] .intersection::after {
  background: rgba(52, 27, 9, .76);
  box-shadow: 0 1px rgba(255, 231, 178, .07);
}
body[data-board-view="3d"] .intersection.star .star-point {
  background: #49240c;
  box-shadow: 0 1px rgba(255, 231, 178, .18), 0 0 0 1px rgba(49, 21, 7, .22);
}
body[data-board-view="3d"] .stone {
  width: 91%;
  left: 4.5%;
  top: 1.8%;
  border: 1px solid rgba(255, 255, 255, .08);
  box-sizing: border-box;
}
body[data-board-view="3d"] .stone::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 8%;
  width: 48%;
  height: 29%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .28), transparent 70%);
  filter: blur(.5px);
  transform: rotate(-18deg);
}
body[data-board-view="3d"] .stone.black {
  background:
    radial-gradient(ellipse at 32% 18%, #8c9c92 0%, #33423a 12%, #111b16 35%, #050906 67%, #010201 100%);
  box-shadow:
    4px 7px 7px rgba(35, 15, 4, .52),
    0 10px 13px rgba(32, 13, 3, .2),
    inset -3px -5px 6px rgba(0, 0, 0, .72),
    inset 2px 2px 3px rgba(255, 255, 255, .12);
}
body[data-board-view="3d"] .stone.white {
  border-color: rgba(94, 83, 63, .22);
  background:
    radial-gradient(ellipse at 31% 18%, #fff 0%, #fbfaf1 29%, #e7e5d7 55%, #b7b7aa 83%, #8f9288 100%);
  box-shadow:
    4px 7px 7px rgba(35, 15, 4, .45),
    0 10px 13px rgba(32, 13, 3, .17),
    inset -3px -5px 7px rgba(97, 99, 90, .27),
    inset 2px 2px 4px rgba(255, 255, 255, .92);
}
body[data-board-view="3d"] .stone.white::before {
  background: radial-gradient(ellipse, rgba(255, 255, 255, .92), transparent 70%);
}
body[data-board-view="3d"] .stone.last::after {
  z-index: 2;
  background: #a7df90;
  box-shadow: 0 0 0 1px rgba(15, 38, 22, .72), 0 0 9px rgba(139, 209, 124, .72);
}

body[data-board-view="2d"] .board-zone::before,
body[data-board-view="2d"] .board-zone::after,
body[data-board-view="2d"] .goban-plaque { display: none; }
body[data-board-view="2d"] .board-frame {
  border-radius: 1px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(252, 220, 150, .19);
}

.side-select select { max-width: 146px; }
.player-panel {
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.player-panel.is-human {
  border-color: rgba(154, 192, 141, .48);
  background: linear-gradient(90deg, rgba(139, 209, 124, .035), transparent);
}
.player-panel.is-bot h2::after {
  content: "RUST · WASM";
  display: block;
  margin-top: 7px;
  color: var(--jade);
  font: 600 6px/1 "DM Mono", monospace;
  letter-spacing: .16em;
}

@media (max-width: 900px) {
  body[data-board-view="3d"] .board-frame {
    transform: rotateX(9deg) translateY(-8px) scale(.982);
  }
  body[data-board-view="3d"] .board-frame::after {
    bottom: -20px;
    height: 21px;
  }
  .goban-plaque { bottom: -18px; }
  .side-select select { max-width: 126px; }
}

@media (max-width: 590px) {
  body[data-board-view="3d"] .board-frame {
    transform: rotateX(6deg) translateY(-3px) scale(.99);
  }
  body[data-board-view="3d"] .board-frame::after {
    bottom: -11px;
    height: 12px;
  }
  .goban-plaque { display: none !important; }
  .side-select { order: 3; }
  .side-select select { max-width: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-panel { transition: none; }
}


/* Raster goban surface: precision grid stays live above a hand-rendered board. */
.board-frame {
  padding: clamp(25px, 4vw, 47px);
  border: 0;
  background: url("assets/goban-lacquer-raster-v1.png") center / 100% 100% no-repeat;
}
.board-frame::before {
  inset: 5.15%;
  border-color: rgba(64, 27, 8, .42);
  box-shadow:
    0 0 0 1px rgba(255, 224, 159, .14),
    inset 0 0 9px rgba(81, 38, 8, .12);
}
.board-light {
  opacity: .16;
  background:
    linear-gradient(118deg, rgba(255, 252, 231, .2), transparent 31%, rgba(73, 29, 6, .08) 90%);
  mix-blend-mode: soft-light;
}
body[data-board-view="3d"] .board-light { opacity: .19; }

/* Chinese lacquer arcade cabinet surrounding the physical goban. */
:root {
  --arcade-gold: #d5a24d;
  --arcade-gold-light: #f3ce7b;
  --arcade-jade: #83d5a1;
  --arcade-panel: rgba(10, 11, 8, .94);
  --arcade-line: rgba(213, 162, 77, .42);
}
.app-shell {
  position: relative;
  width: min(1540px, calc(100% - 28px));
  min-height: calc(100vh - 24px);
  margin: 12px auto;
  padding: 0 18px 15px;
  overflow: visible;
  border: 3px solid var(--arcade-gold);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -18%, rgba(131, 213, 161, .075), transparent 42%),
    linear-gradient(115deg, rgba(255, 217, 132, .045), transparent 24%),
    linear-gradient(180deg, rgba(24, 15, 8, .96), rgba(6, 9, 7, .96) 38%, rgba(7, 6, 4, .97));
  box-shadow:
    0 0 0 3px rgba(32, 13, 4, .94),
    0 0 0 6px rgba(213, 162, 77, .22),
    0 22px 50px rgba(0, 0, 0, .55),
    inset 0 0 54px rgba(246, 190, 85, .035);
}
.app-shell::before {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: 15px;
  pointer-events: none;
  opacity: .07;
  background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, .42) 3px 4px);
}
.app-shell::after {
  content: "";
  position: absolute;
  z-index: 19;
  inset: 7px;
  border: 1px solid rgba(243, 206, 123, .13);
  border-radius: 11px;
  pointer-events: none;
}

.topbar {
  min-height: 76px;
  margin: 0 -18px;
  padding: 13px 20px;
  border-bottom: 2px solid var(--arcade-gold);
  border-radius: 14px 14px 0 0;
  background:
    linear-gradient(90deg, rgba(213, 162, 77, .08), transparent 22% 78%, rgba(213, 162, 77, .08)),
    linear-gradient(180deg, rgba(51, 28, 12, .98), rgba(15, 10, 6, .98));
  box-shadow: 0 5px 0 rgba(25, 9, 3, .8), 0 9px 20px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 238, 193, .09);
}
.brand-mark {
  border: 2px solid var(--arcade-gold);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(213, 162, 77, .2);
}
.brand-mark span { background: var(--arcade-gold-light); }
.game-meta {
  padding: 8px 13px;
  border: 1px solid rgba(131, 213, 161, .34);
  border-radius: 5px;
  color: #d7e6d9;
  background: rgba(2, 13, 9, .62);
  box-shadow: inset 0 0 14px rgba(89, 211, 145, .045);
}
.meta-dot {
  background: var(--arcade-jade);
  box-shadow: 0 0 10px var(--arcade-jade);
}

.game-layout {
  gap: clamp(14px, 2.25vw, 38px);
  padding: clamp(27px, 4vh, 54px) 14px clamp(27px, 3.5vh, 46px);
}
.side-panel {
  position: relative;
  min-height: 206px;
  padding: 17px 16px 19px;
  overflow: hidden;
  border: 1px solid var(--arcade-line);
  border-left: 4px solid var(--arcade-gold);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(213, 162, 77, .055), transparent 36%),
    linear-gradient(180deg, rgba(17, 24, 19, .96), rgba(5, 10, 7, .94));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .045),
    inset 0 0 24px rgba(0, 0, 0, .2),
    0 9px 24px rgba(0, 0, 0, .28);
}
.side-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  width: 42px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--arcade-gold);
  box-shadow: 0 0 10px rgba(213, 162, 77, .34);
}
.side-panel.is-human {
  border-color: rgba(131, 213, 161, .62);
  border-left-color: var(--arcade-jade);
  background:
    linear-gradient(145deg, rgba(131, 213, 161, .075), transparent 38%),
    linear-gradient(180deg, rgba(16, 29, 21, .97), rgba(4, 12, 8, .95));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .05),
    inset 0 0 27px rgba(72, 190, 124, .045),
    0 0 18px rgba(72, 190, 124, .08),
    0 9px 24px rgba(0, 0, 0, .3);
}
.side-panel.is-human::before {
  background: var(--arcade-jade);
  box-shadow: 0 0 10px rgba(131, 213, 161, .42);
}

.board-title-row {
  min-height: 49px;
  margin-bottom: 16px;
  padding: 8px 10px;
  border: 1px solid var(--arcade-line);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(49, 29, 13, .88), rgba(13, 10, 7, .91));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 7px 17px rgba(0, 0, 0, .25);
}
.board-title-row > p { color: var(--arcade-gold-light); }
.visual-select { color: #ad936a; }
.visual-select select {
  min-height: 29px;
  border: 1px solid rgba(213, 162, 77, .44);
  border-radius: 5px;
  color: #f3d490;
  background: linear-gradient(180deg, rgba(66, 38, 16, .96), rgba(22, 13, 8, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.visual-select select:hover { border-color: var(--arcade-gold-light); }
.text-button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(131, 213, 161, .3);
  border-radius: 5px;
  color: var(--arcade-jade);
  background: rgba(3, 19, 12, .52);
}
.text-button:hover { border-color: var(--arcade-jade); background: rgba(31, 92, 57, .22); }

.board-caption {
  min-height: 31px;
  margin-top: 17px;
  padding: 7px 10px;
  border: 1px solid rgba(131, 213, 161, .25);
  border-radius: 5px;
  background: rgba(2, 12, 8, .7);
  box-shadow: inset 0 0 16px rgba(73, 201, 126, .035);
}
.board-caption #statusText {
  color: #a9efbf;
  text-shadow: 0 0 9px rgba(131, 213, 161, .24);
}

.control-strip {
  margin: 0 14px;
  padding: 13px 15px;
  border: 2px solid var(--arcade-gold);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(51, 29, 13, .97), rgba(15, 10, 7, .98));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .06);
}
.control-button,
.quiet-button {
  border: 1px solid rgba(213, 162, 77, .5);
  border-radius: 6px;
  color: #f4dfb7;
  background: linear-gradient(180deg, rgba(83, 45, 17, .86), rgba(29, 16, 8, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 3px 0 rgba(10, 5, 2, .72);
}
.control-button:hover:not(:disabled),
.quiet-button:hover {
  border-color: var(--arcade-gold-light);
  color: #fff0c8;
  background: linear-gradient(180deg, rgba(112, 61, 21, .92), rgba(42, 22, 9, .98));
  transform: translateY(-1px);
}
.primary-control {
  border-color: rgba(131, 213, 161, .7);
  color: #c8f4d5;
  background: linear-gradient(180deg, rgba(34, 102, 62, .75), rgba(8, 37, 20, .92));
}
.danger-control {
  border-color: rgba(201, 87, 69, .65);
  color: #efb4aa;
}
.legend-row { padding-inline: 18px; }

@media (max-width: 900px) {
  .app-shell {
    width: min(760px, calc(100% - 22px));
    margin-block: 10px;
    padding-inline: 12px;
  }
  .topbar { margin-inline: -12px; padding-inline: 14px; }
  .game-layout { padding-inline: 4px; }
  .side-panel { min-height: 148px; }
  .control-strip { margin-inline: 4px; }
}
@media (max-width: 590px) {
  .app-shell {
    width: calc(100% - 12px);
    min-height: calc(100vh - 12px);
    margin: 6px;
    padding-inline: 8px;
    border-width: 2px;
    border-radius: 12px;
  }
  .topbar { margin-inline: -8px; padding-inline: 10px; border-radius: 9px 9px 0 0; }
  .game-layout { padding-inline: 0; }
  .board-title-row { padding: 7px; }
  .side-panel { padding: 13px; border-left-width: 3px; }
  .control-strip { margin-inline: 0; padding: 10px 8px; }
  .board-frame { padding: 5.1%; }
}


/* Let the selected battlefield remain vivid behind the arcade structure. */
body[data-background="warriors"] .app-shell {
  background:
    radial-gradient(circle at 50% -18%, rgba(131, 213, 161, .055), transparent 42%),
    linear-gradient(115deg, rgba(255, 217, 132, .035), transparent 24%),
    linear-gradient(180deg, rgba(24, 15, 8, .76), rgba(6, 9, 7, .7) 38%, rgba(7, 6, 4, .76));
}
body[data-background="warriors"] .side-panel {
  background:
    linear-gradient(145deg, rgba(213, 162, 77, .045), transparent 36%),
    linear-gradient(180deg, rgba(17, 24, 19, .84), rgba(5, 10, 7, .8));
}


/* Shared five-page arcade navigation on the live board screen. */
.game-site-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 11px 0 -3px;
  padding: 0 14px;
}
.game-site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 104px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgba(213, 162, 77, .3);
  border-radius: 5px;
  color: #bdb49e;
  text-decoration: none;
  background: rgba(7, 12, 8, .58);
  font: 700 7px/1 "DM Mono", monospace;
  letter-spacing: .09em;
}
.game-site-nav a i { color: var(--arcade-gold); font: 700 13px "Noto Serif SC", serif; font-style: normal; }
.game-site-nav a:hover,
.game-site-nav a[aria-current="page"] {
  border-color: var(--arcade-jade);
  color: #d5f3dd;
  background: rgba(24, 72, 42, .54);
  box-shadow: 0 0 12px rgba(131, 213, 161, .08);
}
@media (max-width: 720px) {
  .game-site-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .game-site-nav a { flex: 0 0 75px; min-width: 75px; }
  .game-site-nav a span { display: none; }
}
/* Full-bleed Play page: keep arcade controls, remove the enclosing cabinet. */
.app-shell,
body[data-background="warriors"] .app-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell::before,
.app-shell::after,
.china-backdrop::before { content: none; }

@media (max-width: 590px) {
  .app-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}

/* Pixel-arcade typography and console-sized board controls. */
:root { --arcade-font: "Press Start 2P", "DM Mono", "Noto Serif SC", monospace; }
body,
button, input, select {
  font-family: var(--arcade-font);
}
body :where(p, span, strong, button, select, option, a, label, output, small, code, b, h1, h2, h3, h4, h5, h6) {
  font-family: var(--arcade-font) !important;
}

.board-tools .text-button {
  min-height: 38px;
  padding: 0 15px;
  border-width: 2px;
  font-family: var(--arcade-font);
  font-size: 8px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: .035em;
}
.board-coordinate {
  color: #fff0bd;
  font-family: var(--arcade-font);
  font-size: 8px;
  font-weight: 400;
  text-shadow: -1px 0 #210b02, 1px 0 #210b02, 0 -1px #210b02, 0 1px #210b02, 0 2px 3px rgba(20, 6, 1, .9);
}

@media (max-width: 590px) {
  .board-tools .text-button {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 7px;
  }
}

/* Keep the five-page menu inside the same arcade header on Play. */
.topbar {
  flex-wrap: wrap;
  row-gap: 7px;
}
.topbar .game-site-nav {
  flex: 1 1 auto;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.topbar .game-site-nav a {
  min-width: 104px;
  min-height: 37px;
  padding: 7px 9px;
  border-color: rgba(213, 162, 77, .34);
  color: #d9ccb0;
  background: rgba(15, 12, 8, .62);
  font-size: 8px;
}
.topbar .game-site-nav a:hover,
.topbar .game-site-nav a[aria-current="page"] {
  border-color: var(--arcade-gold-light);
  color: #281205;
  background: linear-gradient(180deg, #f3cf7f, #cf8d2f);
  box-shadow: 0 3px 0 #6c3612;
}
.topbar .game-site-nav a:hover i,
.topbar .game-site-nav a[aria-current="page"] i { color: #5c2c0d; }

@media (max-width: 1220px) {
  .topbar .game-site-nav {
    order: 3;
    flex: 1 0 100%;
    padding-top: 7px;
  }
}

@media (max-width: 720px) {
  .topbar .game-site-nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .topbar .game-site-nav a {
    flex: 0 0 82px;
    min-width: 82px;
  }
}

/* Play uses the exact same five-page arcade header as every companion page. */
.topbar {
  min-height: 84px;
  margin: 0 -18px;
  padding: 14px 20px;
  flex-wrap: nowrap;
  gap: 20px;
  border-bottom: 1px solid var(--arcade-gold);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(58, 31, 13, .98), rgba(15, 9, 5, .98));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
}
.page-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f5edda;
  text-decoration: none;
}
.page-brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid #e0ab50;
  border-radius: 6px;
  color: #f4d58e;
  background: #32150a;
  box-shadow: 0 0 14px rgba(224, 171, 80, .18);
  font: 800 24px "Noto Serif SC", serif;
}
.page-brand strong {
  display: block;
  color: #f5edda;
  font-weight: 800;
  font-size: 21px;
  line-height: 1;
  letter-spacing: .08em;
}
.page-brand small {
  display: block;
  margin-top: 5px;
  color: #afaa97;
  font-weight: 600;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .18em;
}
.page-status-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 0 auto;
  color: var(--arcade-jade);
  font-size: 8px;
  letter-spacing: .13em;
}
.page-status-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.topbar .game-site-nav {
  order: initial;
  flex: 0 1 auto;
  width: auto;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.topbar .game-site-nav a {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 37px;
  padding: 7px 9px;
  font-size: 8px;
  letter-spacing: .08em;
}
.game-command-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 58px;
  margin: 0 -18px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(213, 162, 77, .28);
  background: rgba(7, 10, 7, .84);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}
.game-command-bar .game-meta { margin-left: auto; }

@media (max-width: 960px) {
  .topbar { flex-wrap: wrap; }
  .topbar .game-site-nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    overflow-x: auto;
    padding-top: 6px;
  }
  .topbar .game-site-nav a {
    flex: 1 0 112px;
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .topbar {
    margin-inline: -8px;
    padding: 11px;
  }
  .page-status-chip { display: none; }
  .topbar .game-site-nav a { flex-basis: 82px; }
  .topbar .game-site-nav a span { display: none; }
  .game-command-bar {
    margin-inline: -8px;
    padding: 8px;
  }
  .game-command-bar .game-meta,
  .game-command-bar .quiet-button { display: flex; }
  .game-command-bar .game-meta {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 8px;
    font-size: 6px;
  }
  .game-command-bar .quiet-button {
    flex: 0 0 auto;
    padding: 9px;
    font-size: 7px;
  }
}

/* Match the companion pages' 1320px header width and flush top edge. */
.app-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding-top: 0;
}
.topbar,
.game-command-bar {
  width: min(1320px, calc(100% + 36px));
  margin-inline: auto;
}
@media (max-width: 590px) {
  .topbar,
  .game-command-bar { width: calc(100% + 16px); }
}

/* Compact single-row match toolbar directly below the shared main menu. */
.game-command-bar {
  justify-content: flex-start;
  gap: 8px;
  min-height: 50px;
  padding: 6px 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(213, 162, 77, .52) rgba(8, 10, 7, .8);
}
.game-command-bar .compact-toolbar {
  display: flex;
  flex: 1 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.game-command-bar .compact-toolbar > p {
  flex: 0 0 auto;
  margin: 0;
  padding-right: 8px;
  border-right: 1px solid rgba(213, 162, 77, .28);
  color: var(--arcade-gold-light);
  font-size: 6px;
  line-height: 1.25;
  letter-spacing: .07em;
  white-space: nowrap;
}
.game-command-bar .compact-toolbar .board-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: auto;
}
.game-command-bar .compact-toolbar .visual-select {
  flex: 0 0 auto;
  gap: 3px;
  font-size: 5px;
  letter-spacing: .045em;
  white-space: nowrap;
}
.game-command-bar .compact-toolbar .visual-select select {
  min-height: 28px;
  padding: 4px 16px 4px 6px;
  font-size: 6px;
  line-height: 1;
}
.game-command-bar .compact-toolbar .visual-select:nth-child(1) select { width: 126px; }
.game-command-bar .compact-toolbar .visual-select:nth-child(2) select { width: 105px; }
.game-command-bar .compact-toolbar .visual-select:nth-child(3) select { width: 142px; }
.game-command-bar .compact-toolbar .visual-select:nth-child(4) select { width: 122px; }
.game-command-bar .compact-toolbar .board-tools .text-button {
  min-height: 28px;
  padding-inline: 7px;
  border-width: 1px;
  font-size: 6px;
  line-height: 1.2;
  white-space: nowrap;
}
.game-command-bar .game-meta {
  flex: 0 0 auto;
  gap: 7px;
  margin-left: 0;
  padding: 6px 8px;
  font-size: 6px;
  white-space: nowrap;
}
.game-command-bar .quiet-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 30px;
  padding: 7px 9px;
  font-size: 6px;
  white-space: nowrap;
}
@media (max-width: 590px) {
  .game-command-bar .compact-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }
  .game-command-bar .compact-toolbar .board-tools {
    width: auto;
    justify-content: flex-start;
  }
  .game-command-bar .compact-toolbar .board-tools .text-button {
    min-height: 28px;
    padding-inline: 7px;
    font-size: 6px;
  }
}

/* Match state floats over the unused goban rim instead of consuming toolbar height. */
.board-zone { position: relative; }
.board-match-badge {
  position: absolute;
  z-index: 15;
  top: 9px;
  right: 9px;
  display: flex;
  gap: 6px;
  min-height: 25px;
  margin: 0;
  padding: 5px 7px;
  border-color: rgba(131, 213, 161, .46);
  color: #dcebdd;
  background: rgba(4, 15, 10, .86);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .3), inset 0 0 10px rgba(89, 211, 145, .04);
  font-size: 6px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.board-match-badge .meta-divider { height: 10px; }
@media (max-width: 590px) {
  .board-match-badge {
    top: 5px;
    right: 5px;
    display: flex;
    padding: 4px 6px;
    font-size: 5px;
  }
}

/* High-contrast native selects: readable both closed and inside the option list. */
.game-command-bar .compact-toolbar .visual-select select {
  border-color: rgba(244, 213, 142, .72);
  color: #fff3cf;
  background: #1b0d07;
  box-shadow: inset 0 1px rgba(255, 244, 211, .08), 0 0 0 1px rgba(31, 12, 4, .7);
  text-shadow: 0 1px 1px #090301;
}
.game-command-bar .compact-toolbar .visual-select select:hover,
.game-command-bar .compact-toolbar .visual-select select:focus-visible {
  border-color: #f4d58e;
  color: #fff9e8;
  background: #281307;
}
.game-command-bar .compact-toolbar .visual-select select option {
  color: #fff3cf;
  background: #160a05;
  text-shadow: none;
}

/* Desktop cabinet fits one viewport; board size follows available height. */
@media (min-width: 901px) {
  body { overflow-y: hidden; }
  .app-shell {
    height: 100vh;
    min-height: 0;
    padding-bottom: 6px;
    overflow: hidden;
  }
  .game-layout {
    flex: 1 1 auto;
    min-height: 0;
    padding: 7px 14px 5px;
  }
  .board-zone {
    width: min(810px, calc(100vh - 260px), 100%);
    justify-self: center;
  }
  .board-caption {
    min-height: 27px;
    margin-top: 7px;
    padding: 5px 8px;
  }
  .control-strip {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 7px 12px;
  }
  .control-button { padding: 8px 12px; }
  .legend-row {
    flex: 0 0 auto;
    min-height: 15px;
    margin-top: 7px;
  }
}