:root {
  color-scheme: dark;
  --gold: #ffd76a;
  --gold-dim: #e0a02c;
  --ink: #140c06;
  --panel: rgba(28, 18, 8, .88);
  --arcade-cyan: #4fd8a6;
  --arcade-pink: #e8543a;
  --arcade-violet: #b8862f;
  --arcade-lime: #7fe3a8;
}

* { box-sizing: border-box; }
body {
  position: relative;
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: #fff0c9;
  font-family: "Trebuchet MS", "Noto Sans Thai", Tahoma, sans-serif;
  background:
    radial-gradient(circle at 14% 5%, rgba(232, 84, 58, .38), transparent 23rem),
    radial-gradient(circle at 86% 8%, rgba(58, 234, 255, .34), transparent 26rem),
    radial-gradient(circle at 50% 100%, rgba(125, 82, 255, .36), transparent 34rem),
    linear-gradient(145deg, #11062f 0%, #1d0a55 46%, #07153c 100%);
}
body::before,
body::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
}
body::before {
  opacity: .42;
  background:
    linear-gradient(rgba(91, 241, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 89, 190, .13) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .86), transparent 88%);
}
body::after {
  opacity: .6;
  background-image:
    radial-gradient(circle at 8% 28%, #fff4a6 0 1px, transparent 2px),
    radial-gradient(circle at 93% 36%, #8ef8ff 0 1px, transparent 2px),
    radial-gradient(circle at 78% 81%, #ff9ad7 0 1px, transparent 2px),
    radial-gradient(circle at 23% 74%, #faff9c 0 1px, transparent 2px);
  background-size: 210px 190px, 280px 230px, 330px 270px, 250px 220px;
}

.app-shell { position: relative; z-index: 1; width: min(1500px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 64px; }
.hero { max-width: 760px; margin: 0 0 24px; }
.hero h1 { margin: 4px 0 8px; font-family: Impact, "Arial Black", "Noto Sans Thai", sans-serif; font-size: clamp(36px, 5vw, 60px); line-height: .98; letter-spacing: .025em; color: var(--gold); text-shadow: 3px 3px 0 #6c2cc6, 0 0 18px rgba(255, 215, 106, .5); }
.hero p { margin: 0; color: #c6f8ff; font-weight: 700; }
.eyebrow { font: 800 11px/1 Arial, sans-serif; letter-spacing: .17em; color: var(--arcade-pink) !important; text-shadow: 0 0 8px rgba(232, 84, 58, .55); }

.controls { position: relative; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; padding: 16px 18px; margin-bottom: 24px; border: 2px solid rgba(88, 238, 255, .75); border-radius: 22px; background: linear-gradient(125deg, rgba(31, 12, 88, .94), rgba(18, 58, 110, .86)); box-shadow: 0 0 0 3px rgba(232, 84, 58, .14), 0 14px 30px rgba(5, 2, 31, .42), inset 0 1px rgba(255, 255, 255, .18); backdrop-filter: blur(10px); }
.controls label { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.board-settings-panel { display: grid; min-width: 0; gap: 12px; padding: 4px 0 0; }
.board-settings-panel .eyebrow { margin: 0; }
.board-settings-panel h2 { margin: 0 0 2px; }
.board-settings-panel label { display: grid; gap: 7px; justify-items: start; }
.appearance-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid rgba(118, 248, 255, .3); border-radius: 14px; background: rgba(8, 24, 67, .42); }
.appearance-settings .settings-group-title { grid-column: 1 / -1; margin: 0; color: #fff19b; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.appearance-settings label { min-width: 0; }
.appearance-settings select { width: 100%; min-width: 0; }
.appearance-settings .match-appearance-toggle { grid-column: 1 / -1; display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 9px; }
.appearance-settings .match-appearance-toggle input { margin: 0; }
.appearance-settings.is-matched #piece-set { opacity: .72; }
.board-material-marble { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58)) drop-shadow(0 0 22px rgba(226, 187, 93, .22)); }
.board-material-marble .captured-slot { border-color: #b48635; background: #f2dfaa; box-shadow: 0 0 0 1px rgba(255, 236, 173, .76), 0 0 7px rgba(212, 166, 74, .4); }
.piece-set-marble .piece, .piece-set-marble .captured-piece { filter: drop-shadow(0 4px 3px rgba(0, 10, 14, .58)); }
.board-material-cloud-star { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58)) drop-shadow(0 0 23px rgba(76, 220, 234, .22)); }
.board-material-cloud-star .captured-slot { border-color: #d6a643; background: #70e0e8; box-shadow: 0 0 0 1px rgba(255, 229, 151, .86), 0 0 8px rgba(67, 224, 235, .48); }
.piece-set-cloud-star .piece, .piece-set-cloud-star .captured-piece { filter: drop-shadow(0 4px 3px rgba(0, 15, 46, .6)); }
.board-settings-panel .round-clock-toggle { grid-template-columns: 18px 1fr; align-items: center; gap: 9px; }
.board-settings-panel input[type="range"] { width: 100%; min-width: 0; }
.board-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.round-clock-toggle { cursor: pointer; color: #fff4bd; }
.round-clock-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.controls output { min-width: 64px; color: var(--arcade-lime); font-variant-numeric: tabular-nums; }
input[type="range"] { flex: 1 1 260px; accent-color: var(--gold); }
button, select { border: 2px solid rgba(79, 216, 166, .72); border-radius: 999px; color: #ffeec2; background: linear-gradient(180deg, #8a5a22, #2a1a0a); box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 3px 0 #160e05; font: 800 14px/1.2 "Trebuchet MS", "Noto Sans Thai", sans-serif; }
button { padding: 8px 12px; cursor: pointer; transition: transform .14s ease, filter .14s ease, background .14s ease; }
button:hover { background: linear-gradient(180deg, #c4622a, #8a5a22); filter: brightness(1.12); transform: translateY(-2px); }
button:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(0, 0, 0, .2), 0 1px 0 #160e05; }
select { min-width: 72px; padding: 5px 28px 5px 10px; }
/* Native select menus vary by browser. Give the menu rows a deliberately
   light surface and dark text so the active/highlighted choice stays legible
   in the neon theme as well. */
body[data-theme="arcade"] select option { color: #170831; background: #f5e8ff; font-weight: 700; }
body[data-theme="arcade"] select option:checked { color: #170831; background: #ffe76a; }
/* Chromium renders optgroup headings as separate native popup rows. Give
   those headings their own high-contrast color instead of inheriting white. */
body[data-theme="arcade"] select optgroup { color: #170831; background: #f5e8ff; font-weight: 900; }
.game-tools { display: flex; flex-wrap: wrap; gap: 7px; }
.game-tools button { padding: 7px 9px; font-size: 13px; }
.online-tools { display: flex; flex: 1 1 360px; flex-wrap: wrap; gap: 7px; align-items: center; }
.online-tools input { width: 90px; padding: 7px; border: 2px solid rgba(79, 216, 166, .72); border-radius: 999px; color: #ffeec2; background: #1d1054; font: inherit; text-transform: uppercase; }
.online-tools output { color: #aaf8ff; font-size: 12px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #76f8ff; outline-offset: 3px; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); gap: 26px; align-items: start; }
.board-card { --board-size: 760px; margin: 0; min-width: 0; overflow: visible; }
.board-card:has(.board-style-classic) { padding-block: 4%; }
.board-stage { position: relative; width: min(var(--board-size), 100%); margin: 0 auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58)) drop-shadow(0 0 20px rgba(79, 216, 166, .18)); }
.board-stage > #board-image { display: block; width: 100%; height: auto; }
/* Captured pieces adapt to the physical tray layout of the selected board. */
.captured-tray { position: absolute; z-index: 5; display: flex; align-items: end; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; }
.captured-slot-layer { position: absolute; inset: 0; overflow: hidden; }
.captured-pieces { position: absolute; inset: 0; overflow: visible; }
.captured-slot-layer { z-index: 0; }
.captured-pieces { z-index: 1; }
/* The near/front tray is physically in front of the board. Tall captured
   pieces are therefore allowed to rise above the board instead of clipping. */
.captured-tray-bottom { z-index: 7; }
.captured-slot { position:absolute; width:11px; height:11px; border:2px solid #562208; border-radius:50%; background:#fff1a8; box-shadow:0 0 0 1px rgba(255, 232, 154, .65),0 0 7px rgba(255, 178, 56, .3); transform:translate(-50%,-50%); }
.captured-piece { position: absolute; display: block; object-fit: contain; background-repeat: no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.captured-piece.face-right { transform: scaleX(-1); }
.captured-piece.overlap-front { filter: drop-shadow(0 0 1px #ff9b35) drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
/* All displayed tray pieces are fully opaque; their PNG canvas alone remains transparent. */
.captured-piece.is-preview { opacity: 1; }
/* Integrated front/back bays. */
.board-style-captured-bays .captured-tray-top { top: 6.5%; right: 19%; left: 19%; height: 8.5%; }
.board-style-captured-bays .captured-tray-bottom { right: 13%; bottom: 7.5%; left: 13%; height: 11.5%; }
/* Integrated left/right bays: the far player is shown on the left, the front player on the right. */
.board-style-side-bays .captured-tray { top: 22%; bottom: auto; width: 11%; height: 53%; align-items: center; }
.board-style-side-bays .captured-tray-top { right: auto; left: 6.5%; }
.board-style-side-bays .captured-tray-bottom { right: 6.5%; left: auto; }
/* The original board has no physical bays. Its virtual tray is transparent:
   only the pieces and their placement anchors are shown. A tall upper
   silhouette may still rise outside the distant anchor area in perspective. */
.board-style-classic .captured-tray-top { top: -2%; right: 14%; left: 14%; height: 12%; }
.board-style-classic .captured-tray-bottom { right: 14%; bottom: -6%; left: 14%; height: 16%; }
.piece-layer, #cell-overlay, #move-overlay, .drag-ghost-layer, .piece-reference-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.piece-layer { z-index: 3; pointer-events: none; }
/* Coordinates and center guides are intentionally behind pieces. */
#cell-overlay { z-index: 1; pointer-events: none; overflow: visible; }
#move-overlay { z-index: 2; pointer-events: none; overflow: visible; }
.drag-ghost-layer { z-index: 2.5; pointer-events: none; }
.drag-origin-ghost { position: absolute; display: block; object-fit: contain; background-repeat: no-repeat; opacity: .32; filter: grayscale(.18) drop-shadow(0 3px 2px rgba(0, 0, 0, .34)); }
.drag-origin-ghost.face-right { transform: scaleX(-1); }
.piece-reference-layer { z-index: 4; pointer-events: none; }
.game-start { position: absolute; z-index: 6; inset: 26% 20%; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 18px; border: 2px solid var(--arcade-pink); border-radius: 20px; text-align: center; background: linear-gradient(145deg, rgba(73, 19, 140, .94), rgba(11, 35, 88, .94)); box-shadow: 0 0 0 3px rgba(79, 216, 166, .18), 0 14px 28px rgba(0, 0, 0, .5); }
.game-start[hidden] { display: none; }
.game-start h2 { margin: 0; color: #ffe9b8; text-shadow: 2px 2px 0 #7a4a10; }
.game-start p { margin: 0; color: #e8dcc4; }
.color-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.color-choices button { min-width: 128px; }
.piece { position: absolute; display: grid; place-items: end center; cursor: grab; touch-action: none; pointer-events: auto; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
.piece .piece-art { display: block; width: 100%; height: 100%; object-fit: contain; background-repeat: no-repeat; }
.piece.face-right .piece-art { transform: scaleX(-1); }
.piece.is-selected { filter: drop-shadow(0 0 6px #fff9ae) drop-shadow(0 0 15px #ff4dc1) drop-shadow(0 0 22px #56eeff) drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
.piece.khon.black { filter: none; }
.piece.khon.black.is-selected { filter: drop-shadow(0 0 4px #fff0a6) drop-shadow(0 0 9px rgba(255, 179, 0, .68)); }
.piece.overlap-front { filter: drop-shadow(0 0 1px #ff9b35) drop-shadow(0 3px 2px rgba(0, 0, 0, .48)); }
.piece.overlap-front.is-selected { filter: drop-shadow(0 0 1.2px #ffbd68) drop-shadow(0 0 3px rgba(255, 179, 0, .45)) drop-shadow(0 3px 2px rgba(0, 0, 0, .48)); }
.piece.khon.black.overlap-front { filter: drop-shadow(0 0 1px #ff9b35); }
.piece.khon.black.overlap-front.is-selected { filter: drop-shadow(0 0 1.2px #ffbd68) drop-shadow(0 0 3px rgba(255, 179, 0, .45)); }
.piece.is-dragging { z-index: 20000 !important; cursor: grabbing; opacity: .9; filter: drop-shadow(0 10px 7px rgba(0, 0, 0, .62)); }
.piece.is-computer-moving { z-index: 20000 !important; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .62)) drop-shadow(0 0 6px rgba(255, 209, 115, .52)); }
.piece-reference-point { position:absolute; width:16px; height:16px; border:3px solid #fff; border-radius:50%; background:#f0139d; box-shadow:0 0 0 2px #5b063b,0 0 12px 3px #ff3fbd; pointer-events:none; transform:translate(-50%,-50%); }
.captured-piece-reference { position:absolute; }
.piece-reference-point::before,.piece-reference-point::after { content:""; position:absolute; top:50%; left:50%; background:#fff; transform:translate(-50%,-50%); }
.piece-reference-point::before { width:2px; height:22px; }
.piece-reference-point::after { width:22px; height:2px; }
.cell-dot { fill: #fff1a8; stroke: #562208; stroke-width: 3; vector-effect: non-scaling-stroke; }
.cell-dot.selected { fill: #76f8ff; stroke: #0b3a44; r: 10; }
.perspective-axis { fill: none; stroke: rgba(116, 239, 247, .52); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.cell-label { fill: #2a0e02; stroke: #ffe89a; stroke-width: .6; paint-order: stroke; font: 700 15px Georgia, "Noto Serif Thai", serif; text-anchor: middle; dominant-baseline: middle; }
.board-coordinate { fill: #f6cf77; stroke: #291004; stroke-width: 1.5; paint-order: stroke; font-family: Georgia, "Noto Serif Thai", serif; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.move-highlight { fill: rgba(82, 240, 255, .5); stroke: #e4fffb; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.move-highlight.capture { fill: rgba(255, 82, 181, .62); stroke: #fff2b5; }
.move-highlight.drop-target { fill: rgba(102, 255, 170, .76); stroke: #fff8cf; stroke-width: 5; filter: drop-shadow(0 0 8px #2fff8c); }
.move-highlight.capture.drop-target { fill: rgba(255, 94, 94, .78); filter: drop-shadow(0 0 8px #ff4c4c); }
.markers-hidden .cell-dot, .markers-hidden .cell-label, .markers-hidden .perspective-axis, .markers-hidden .piece-reference-point, .markers-hidden .captured-slot { display: none; }
.board-coordinates-hidden .board-coordinate { display: none; }
figcaption { max-width: var(--board-size); margin: 12px auto 0; color: #bdf9ff; text-align: center; }
code { color: #fff19b; }

.inspection-panel { display: grid; gap: 16px; padding: 18px; border: 2px solid rgba(232, 84, 58, .7); border-radius: 22px; background: linear-gradient(155deg, rgba(38, 16, 101, .9), rgba(8, 31, 76, .9)); box-shadow: 0 0 0 3px rgba(79, 216, 166, .12), 0 15px 30px #0007; backdrop-filter: blur(10px); }
.inspection-panel section { padding-bottom: 16px; border-bottom: 1px solid rgba(112, 226, 255, .34); }
.inspection-panel .game-event-panel { padding: 16px; border: 2px solid var(--arcade-lime); border-radius: 16px; background: radial-gradient(circle at 50% 0%, rgba(79, 216, 166, .56), #172d79 72%); box-shadow: inset 0 0 22px rgba(127, 227, 168, .16), 0 0 16px rgba(79, 216, 166, .18); }
.game-event-panel .eyebrow { margin: 0 0 6px; }
.game-event { display: block; color: #fff8c2; font-size: 20px; font-weight: 900; line-height: 1.25; text-align: center; text-shadow: 2px 2px 0 #3d1f8e; text-wrap: balance; }
.game-event-panel[data-event="check"] { border-color: #fff153; background: radial-gradient(circle at 50% 0%, rgba(255, 152, 27, .86), #552568 75%); }
.game-event-panel[data-event="checkmate"] { border-color: #ff5bbd; background: radial-gradient(circle at 50% 0%, rgba(240, 36, 143, .92), #401066 75%); animation: game-event-pulse .72s ease-in-out 2; }
.game-event-panel[data-event="count"] { border-color: var(--arcade-cyan); background: radial-gradient(circle at 50% 0%, rgba(34, 179, 237, .78), #17265e 75%); }
.game-event-panel[data-event="draw"] { border-color: #c4a6ff; }
@keyframes game-event-pulse { 50% { box-shadow: 0 0 25px #ff5bbd, inset 0 0 25px rgba(255, 190, 80, .35); } }
h2 { margin: 0 0 10px; font-size: 20px; color: var(--gold); text-shadow: 1px 1px 0 #7a4a10; }
.coordinate-picker { display: flex; gap: 12px; }
.coordinate-picker label { display: grid; gap: 5px; }
.position-analysis-panel .eyebrow { margin: 0 0 5px; }
.analysis-card { display: grid; gap: 9px; margin-top: 12px; padding: 10px; border: 1px solid rgba(79, 216, 166, .45); border-radius: 12px; color: #dffcff; background: rgba(10, 7, 47, .74); font-family: "Trebuchet MS", "Noto Sans Thai", sans-serif; }
.analysis-summary { display: flex; gap: 10px; align-items: center; justify-content: space-between; min-width: 0; padding: 2px 2px 10px; border-bottom: 1px solid rgba(255, 255, 255, .11); }
.analysis-summary-copy { display: grid; min-width: 0; gap: 4px; }
.analysis-summary-copy small, .analysis-detail small, .analysis-score small { color: #aeb8d4; font-size: 9px; font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.analysis-verdict { color: #fff0b5; font-size: 16px; line-height: 1.25; }
.analysis-score { display: grid; min-width: 74px; gap: 3px; padding: 7px 8px; border: 1px solid rgba(255, 224, 133, .32); border-radius: 8px; text-align: right; background: rgba(5, 3, 31, .45); }
.analysis-score strong { color: #ffe18a; font: 900 18px/1 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.analysis-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.analysis-detail { display: grid; min-width: 0; gap: 4px; padding: 9px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; background: rgba(3, 4, 28, .3); }
.analysis-detail strong { color: #edf7ff; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.analysis-detail-wide { grid-column: 1 / -1; }
.analysis-card[data-advantage="black"] .analysis-verdict::before, .analysis-card[data-advantage="ivory"] .analysis-verdict::before, .analysis-card[data-advantage="balanced"] .analysis-verdict::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; content: ""; vertical-align: .1em; box-shadow: 0 0 7px currentColor; }
.analysis-card[data-advantage="black"] .analysis-verdict::before { background: #322016; }
.analysis-card[data-advantage="ivory"] .analysis-verdict::before { background: #fff0bd; }
.analysis-card[data-advantage="balanced"] .analysis-verdict::before { background: #65e2dd; }
.analysis-empty { display: grid; justify-items: center; gap: 5px; padding: 13px 8px; text-align: center; }
.analysis-empty > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(79, 216, 166, .46); border-radius: 50%; color: var(--arcade-cyan); font-size: 18px; }
.analysis-empty strong { color: #fff0b5; font-size: 13px; }
.analysis-empty small { max-width: 270px; color: #aeb8d4; font-size: 10px; line-height: 1.45; }
.turn-status { display: block; padding: 11px 12px; border: 2px solid var(--arcade-pink); border-radius: 12px; color: #fff8c2; background: linear-gradient(115deg, #44146f, #1c2864); font-weight: bold; }
.clock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.game-clock { display: block; padding: 10px; border: 2px solid rgba(255, 190, 80, .85); border-radius: 12px; background: #100a39; color: #ffe9b8; font: 900 22px/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; text-shadow: 0 0 10px rgba(255, 230, 95, .6); font-variant-numeric: tabular-nums; }
.game-clock.active { border-color: var(--arcade-cyan); box-shadow: 0 0 16px rgba(79, 216, 166, .58); }
.game-clock.flagged { color: #ffd0ed; border-color: var(--arcade-pink); }
.rating-result { display: block; margin-bottom: 9px; color: #d9bf8f; font-size: 13px; }
.notation-list { display: grid; gap: 4px; max-height: 210px; margin: 0; padding: 0; overflow: auto; color: #e8faff; font: 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; list-style: none; }
.notation-list li { display: grid; grid-template-columns: 5.5ch minmax(0, 1fr); gap: 8px; min-width: 0; padding: 4px 6px; border: 1px solid rgba(79, 216, 166, .18); border-radius: 8px; background: rgba(20, 9, 69, .62); }
.notation-turn { color: #fff05d; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.notation-move { min-width: 0; overflow-wrap: anywhere; }
.ai-decision { grid-column: 1 / -1; margin: 1px 0 2px; padding: 5px 7px; border: 1px solid rgba(196, 134, 46, .55); border-radius: 5px; background: rgba(70, 32, 11, .45); }
.ai-decision summary { color: #ffd88d; font: 700 12px/1.3 Arial, "Noto Sans Thai", sans-serif; }
.ai-decision-body { margin-top: 7px; color: #ecd3a2; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-line; overflow-wrap: anywhere; }
.counting-status { display: block; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(79, 216, 166, .42); border-radius: 12px; color: #dffcff; background: rgba(10, 7, 47, .74); font-size: 14px; line-height: 1.4; white-space: pre-line; }
.counting-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.counting-actions button { font-size: 14px; }
.counting-actions .cancel-count { border-color: #a44c35; color: #ffd1c4; }
details summary { cursor: pointer; color: var(--gold); font-weight: bold; }

/* Wooden classic theme — the original calm presentation remains the default.
   The neon rules above are used only when the player selects Arcade. */
body[data-theme="classic"] { --gold: #f4c36b; --gold-dim: #c68c34; --ink: #100703; --panel: rgba(41, 18, 8, .88); color: #f5ddac; font-family: Georgia, "Noto Serif Thai", serif; background: radial-gradient(circle at 50% 0%, #623719, #1c0b04 50%, #090302 100%); }
body[data-theme="classic"]::before, body[data-theme="classic"]::after { display: none; }
body[data-theme="classic"] .hero h1 { font-family: Georgia, "Noto Serif Thai", serif; font-size: clamp(32px, 5vw, 58px); line-height: 1; letter-spacing: normal; color: var(--gold); text-shadow: none; }
body[data-theme="classic"] .hero p { color: #dec08a; font-weight: 400; }
body[data-theme="classic"] .eyebrow { color: #e5a849 !important; text-shadow: none; }
body[data-theme="classic"] .controls { border: 1px solid #8a501d; border-radius: 12px; background: var(--panel); box-shadow: none; backdrop-filter: none; }
body[data-theme="classic"] .round-clock-toggle { color: #f5ddac; }
body[data-theme="classic"] .controls output { color: var(--gold); }
body[data-theme="classic"] button, body[data-theme="classic"] select { border: 1px solid #a96825; border-radius: 7px; color: #ffe1a1; background: #43200d; box-shadow: none; font: inherit; }
body[data-theme="classic"] button { transition: none; }
body[data-theme="classic"] button:hover { background: #663214; filter: none; transform: none; }
body[data-theme="classic"] button:active { transform: none; box-shadow: none; }
body[data-theme="classic"] select { padding: 5px 8px; }
body[data-theme="classic"] select option { color: #2a1004; background: #fff1c6; }
body[data-theme="classic"] select optgroup { color: #2a1004; background: #fff1c6; font-weight: 900; }
body[data-theme="classic"] .online-tools input { border: 1px solid #a96825; border-radius: 7px; color: #ffe1a1; background: #281106; }
body[data-theme="classic"] .online-tools output { color: #d9bf8f; }
body[data-theme="classic"] .board-stage { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58)); }
body[data-theme="classic"] .game-start { border: 1px solid #d79b3b; border-radius: 11px; background: linear-gradient(145deg, rgba(49, 20, 7, .96), rgba(15, 5, 2, .94)); box-shadow: 0 14px 28px rgba(0, 0, 0, .5); }
body[data-theme="classic"] .game-start h2 { color: var(--gold); text-shadow: none; }
body[data-theme="classic"] .game-start p { color: #f0d09b; }
body[data-theme="classic"] .piece.is-selected { filter: drop-shadow(0 0 6px #fff0a6) drop-shadow(0 0 15px #ffb300) drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
body[data-theme="classic"] .move-highlight { fill: rgba(89, 234, 199, .46); stroke: #c9ffdc; }
body[data-theme="classic"] .move-highlight.capture { fill: rgba(239, 70, 80, .58); stroke: #ffe0d1; }
body[data-theme="classic"] figcaption { color: #d8b87d; }
body[data-theme="classic"] code { color: #ffda87; }
body[data-theme="classic"] .inspection-panel { border: 1px solid #8a501d; border-radius: 12px; background: var(--panel); box-shadow: 0 15px 30px #0005; backdrop-filter: none; }
body[data-theme="classic"] .inspection-panel section { border-bottom-color: #70401c; }
body[data-theme="classic"] .inspection-panel .game-event-panel { border: 1px solid #c4862e; border-radius: 10px; background: radial-gradient(circle at 50% 0%, rgba(121, 65, 18, .85), #241006 72%); box-shadow: inset 0 0 22px rgba(255, 185, 74, .13); }
body[data-theme="classic"] .game-event { color: #fff0c7; font-weight: 700; text-shadow: none; }
body[data-theme="classic"] .game-event-panel[data-event="check"] { border-color: #ffb746; background: radial-gradient(circle at 50% 0%, rgba(164, 76, 16, .96), #2b0d03 75%); }
body[data-theme="classic"] .game-event-panel[data-event="checkmate"] { border-color: #ff6658; background: radial-gradient(circle at 50% 0%, rgba(154, 29, 20, .98), #290504 75%); }
body[data-theme="classic"] .game-event-panel[data-event="count"] { border-color: #71dce4; background: radial-gradient(circle at 50% 0%, rgba(20, 104, 119, .9), #071e27 75%); }
body[data-theme="classic"] .game-event-panel[data-event="draw"] { border-color: #bda26c; }
body[data-theme="classic"] h2 { color: var(--gold); text-shadow: none; }
body[data-theme="classic"] .analysis-card { border-color: rgba(196, 134, 46, .42); color: #fff0c7; background: #190a04; }
body[data-theme="classic"] .analysis-summary { border-color: rgba(196, 134, 46, .22); }
body[data-theme="classic"] .analysis-summary-copy small, body[data-theme="classic"] .analysis-detail small, body[data-theme="classic"] .analysis-score small, body[data-theme="classic"] .analysis-empty small { color: #a99069; }
body[data-theme="classic"] .analysis-verdict, body[data-theme="classic"] .analysis-empty strong { color: #f5d899; }
body[data-theme="classic"] .analysis-score { border-color: rgba(196, 134, 46, .35); background: rgba(8, 3, 1, .45); }
body[data-theme="classic"] .analysis-score strong { color: #f4c36b; }
body[data-theme="classic"] .analysis-detail { border-color: rgba(196, 134, 46, .18); background: rgba(8, 3, 1, .3); }
body[data-theme="classic"] .analysis-detail strong { color: #f4dfb4; }
body[data-theme="classic"] .turn-status { border: 1px solid #bd7d25; border-radius: 8px; color: #fff0c7; background: #241006; }
body[data-theme="classic"] .game-clock { border: 1px solid #9e6124; border-radius: 7px; background: #170703; color: #ffe7ae; font-weight: 700; text-shadow: none; }
body[data-theme="classic"] .game-clock.active { border-color: #70e8f5; box-shadow: 0 0 12px rgba(112, 232, 245, .4); }
body[data-theme="classic"] .game-clock.flagged { color: #ffc0a2; border-color: #ff6c56; }
body[data-theme="classic"] .notation-list { color: #ffe1a4; }
body[data-theme="classic"] .notation-list li { border: 0; border-radius: 4px; background: rgba(20, 7, 3, .58); }
body[data-theme="classic"] .notation-turn { color: #f4c36b; }
body[data-theme="classic"] .counting-status { border: 1px solid #80511f; border-radius: 8px; color: #f6d89f; background: #1c0c04; }

/* Cartoon Thai Makruk theme — illustrated game-night background, intentionally
   restricted to navy, teal, mint, cream and warm yellow (no violet). */
body[data-theme="cartoon"] { --gold: #ffe77a; --gold-dim: #f2bd48; --ink: #031a30; --panel: rgba(3, 26, 48, .88); color: #f8f5d6; font-family: "Trebuchet MS", "Noto Sans Thai", Tahoma, sans-serif; background: #041b33 url("/assets/backgrounds/thai-makruk-cartoon-arcade.png") center / cover fixed no-repeat; }
body[data-theme="cartoon"][data-cartoon-background="ocean"] { background-image: url("/assets/backgrounds/thai-makruk-cartoon-ocean.png"); }
body[data-theme="cartoon"]::before, body[data-theme="cartoon"]::after { display: none; }
body[data-theme="cartoon"] .hero h1 { font-family: Impact, "Arial Black", "Noto Sans Thai", sans-serif; letter-spacing: .02em; color: #fff09a; text-shadow: 3px 3px 0 #08788f, 0 0 18px rgba(255, 231, 122, .56); }
body[data-theme="cartoon"] .hero p { color: #d9fff1; font-weight: 700; }
body[data-theme="cartoon"] .eyebrow { color: #ffe272 !important; text-shadow: 0 0 8px rgba(103, 255, 226, .55); }
body[data-theme="cartoon"] .controls { border-color: rgba(104, 255, 229, .8); background: linear-gradient(125deg, rgba(3, 42, 67, .92), rgba(4, 74, 100, .84)); box-shadow: 0 0 0 3px rgba(255, 226, 114, .15), 0 14px 30px rgba(1, 16, 31, .48), inset 0 1px rgba(255, 255, 255, .18); }
body[data-theme="cartoon"] .round-clock-toggle { color: #fff6bc; }
body[data-theme="cartoon"] .controls output { color: #a4ffe6; }
body[data-theme="cartoon"] button, body[data-theme="cartoon"] select { border-color: rgba(164, 255, 230, .78); color: #fffad1; background: linear-gradient(180deg, #117e94, #06465f); box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 3px 0 #022d42; }
body[data-theme="cartoon"] button:hover { background: linear-gradient(180deg, #e6b743, #0b8c8d); filter: brightness(1.08); }
body[data-theme="cartoon"] button:active { box-shadow: inset 0 1px rgba(0, 0, 0, .2), 0 1px 0 #022d42; }
body[data-theme="cartoon"] select option { color: #08283c; background: #fff7cf; font-weight: 700; }
body[data-theme="cartoon"] select option:checked { color: #08283c; background: #b6ffe8; }
body[data-theme="cartoon"] select optgroup { color: #08283c; background: #fff7cf; font-weight: 900; }
body[data-theme="cartoon"] .online-tools input { border-color: rgba(164, 255, 230, .78); color: #fffad1; background: #063c56; }
body[data-theme="cartoon"] .online-tools output { color: #baffed; }
body[data-theme="cartoon"] .board-stage { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58)) drop-shadow(0 0 20px rgba(94, 255, 230, .24)); }
body[data-theme="cartoon"] .game-start { border-color: #ffe272; background: linear-gradient(145deg, rgba(5, 76, 99, .95), rgba(2, 35, 62, .95)); box-shadow: 0 0 0 3px rgba(103, 255, 226, .18), 0 14px 28px rgba(0, 0, 0, .5); }
body[data-theme="cartoon"] .game-start h2, body[data-theme="cartoon"] h2 { color: #fff19a; text-shadow: 2px 2px 0 #076878; }
body[data-theme="cartoon"] .game-start p { color: #e2fff5; }
body[data-theme="cartoon"] .piece.is-selected { filter: drop-shadow(0 0 6px #fff9ae) drop-shadow(0 0 15px #ffcb4c) drop-shadow(0 0 22px #67ffe2) drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
body[data-theme="cartoon"] .move-highlight { fill: rgba(103, 255, 226, .5); stroke: #effffc; }
body[data-theme="cartoon"] .move-highlight.capture { fill: rgba(255, 191, 72, .62); stroke: #fff5ca; }
body[data-theme="cartoon"] figcaption { color: #caffed; }
body[data-theme="cartoon"] code { color: #fff09a; }
body[data-theme="cartoon"] .inspection-panel { border-color: rgba(255, 226, 114, .8); background: linear-gradient(155deg, rgba(3, 51, 76, .91), rgba(2, 28, 56, .91)); box-shadow: 0 0 0 3px rgba(103, 255, 226, .13), 0 15px 30px #0007; }
body[data-theme="cartoon"] .inspection-panel section { border-bottom-color: rgba(164, 255, 230, .34); }
body[data-theme="cartoon"] .inspection-panel .game-event-panel { border-color: #a4ffe6; background: radial-gradient(circle at 50% 0%, rgba(18, 161, 158, .62), #053a5a 72%); box-shadow: inset 0 0 22px rgba(255, 226, 114, .15), 0 0 16px rgba(103, 255, 226, .18); }
body[data-theme="cartoon"] .game-event { color: #fff8c2; text-shadow: 2px 2px 0 #076878; }
body[data-theme="cartoon"] .game-event-panel[data-event="check"] { border-color: #fff16c; background: radial-gradient(circle at 50% 0%, rgba(230, 166, 35, .85), #07516b 75%); }
body[data-theme="cartoon"] .game-event-panel[data-event="checkmate"] { border-color: #ffcc61; background: radial-gradient(circle at 50% 0%, rgba(232, 135, 27, .88), #064c64 75%); }
body[data-theme="cartoon"] .game-event-panel[data-event="count"] { border-color: #a4ffe6; background: radial-gradient(circle at 50% 0%, rgba(30, 162, 190, .76), #043651 75%); }
body[data-theme="cartoon"] .game-event-panel[data-event="draw"] { border-color: #fff0a4; }
body[data-theme="cartoon"] .analysis-card, body[data-theme="cartoon"] .counting-status { border-color: rgba(164, 255, 230, .46); color: #e3fff6; background: rgba(2, 31, 53, .8); }
body[data-theme="cartoon"] .analysis-summary-copy small, body[data-theme="cartoon"] .analysis-detail small, body[data-theme="cartoon"] .analysis-score small, body[data-theme="cartoon"] .analysis-empty small { color: #a9dbd2; }
body[data-theme="cartoon"] .analysis-verdict, body[data-theme="cartoon"] .analysis-empty strong { color: #fff3a8; }
body[data-theme="cartoon"] .analysis-score { border-color: rgba(255, 226, 114, .38); background: rgba(1, 22, 39, .45); }
body[data-theme="cartoon"] .analysis-score strong { color: #ffe272; }
body[data-theme="cartoon"] .analysis-detail { border-color: rgba(164, 255, 230, .17); background: rgba(1, 22, 39, .34); }
body[data-theme="cartoon"] .analysis-detail strong { color: #e3fff6; }
body[data-theme="cartoon"] .turn-status { border-color: #ffe272; color: #fff8c2; background: linear-gradient(115deg, #086f80, #064260); }
body[data-theme="cartoon"] .game-clock { border-color: #55dfe5; background: #042a45; color: #fff19a; text-shadow: 0 0 10px rgba(255, 231, 122, .6); }
body[data-theme="cartoon"] .game-clock.active { border-color: #a4ffe6; box-shadow: 0 0 16px rgba(103, 255, 226, .58); }
body[data-theme="cartoon"] .game-clock.flagged { color: #fff4c1; border-color: #ffca61; }
body[data-theme="cartoon"] .notation-list { color: #e8fff7; }
body[data-theme="cartoon"] .notation-list li { border-color: rgba(164, 255, 230, .18); background: rgba(3, 39, 64, .7); }
body[data-theme="cartoon"] .notation-turn { color: #fff09a; }

@media (max-width: 940px) { .content-grid { grid-template-columns: 1fr; } .inspection-panel { max-width: 760px; margin: 0 auto; } }
@media (max-width: 540px) { .app-shell { width: min(100% - 20px, 1500px); padding-top: 22px; } .hero h1 { font-size: 38px; } .controls { gap: 10px; padding: 12px; } .controls > label { width: 100%; justify-content: space-between; } .game-tools,.online-tools { width: 100%; } .game-tools button { flex: 1 1 42%; } .online-tools button { flex: 1 1 42%; } button, select, .online-tools input { min-height: 44px; } .game-clock { font-size: 19px; } .game-start { inset: 18% 7%; padding: 13px; } .game-start h2 { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.engine-version { display: block; margin: 6px 0 2px; color: #d7ac6c; font-size: 12px; opacity: .75; }

/* ======================================================================
   ARCADE CABINET SCREENS
   The lobby, leaderboard, profile and rules are not documents; they are the
   attract-mode screens of a Makruk cabinet. Everything below builds one
   object -- a CRT behind glass -- rather than cards on a page.
   ====================================================================== */

.lobby-page { min-height: 100vh; }
.lobby-page .app-shell {
  width: min(1500px, calc(100% - 32px));
  max-width: none;
}

/* --- Control panel: the row of buttons under the screen ---------------- */
.site-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 7px;
  border: 2px solid #6b4a1f; border-radius: 10px; background: linear-gradient(#1c1109, #130b06);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .07), 0 6px 0 #0a0420;
}
.site-nav a {
  flex: 1 1 auto; padding: 9px 14px; border: 2px solid #7a5527; border-radius: 6px;
  color: #d9c08a; font: 800 11px/1 ui-monospace, "Courier New", monospace; letter-spacing: .16em;
  text-align: center; text-decoration: none; text-transform: uppercase;
  background: linear-gradient(#241609, #170e06); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08);
}
.site-nav a:hover { color: var(--gold); border-color: var(--gold); }
.site-nav a[aria-current="page"] {
  color: #1a1006; border-color: #ffc83d; background: linear-gradient(#ffdc7e, #dd9520);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 16px rgba(255, 200, 90, .45);
}
.site-nav a:focus-visible { outline: 3px solid var(--arcade-cyan); outline-offset: 2px; }

/* --- Marquee: the lit header board above the screen -------------------- */
.lobby-page .hero {
  position: relative; margin: 0 0 14px; padding: 12px 16px; border: 3px solid #b8862f;
  border-radius: 8px; text-align: center; background: linear-gradient(#2f1d0b, #170e05);
  box-shadow: 0 0 26px rgba(255, 190, 80, .45), inset 0 0 24px rgba(255, 255, 255, .06);
}
.lobby-page .hero h1 {
  margin: 0; font-family: Impact, "Arial Black", "Noto Sans Thai", sans-serif;
  font-size: clamp(26px, 4.4vw, 44px); line-height: 1.05; letter-spacing: .04em; color: #ffe9b8;
  text-shadow: 0 0 6px #ffc83d, 0 0 22px rgba(240, 170, 60, .75), 3px 3px 0 #7a4a10;
}

/* --- The screen itself ------------------------------------------------- */
.lobby-standalone {
  position: relative; display: grid; gap: 12px; padding: 18px; overflow: hidden;
  border: 3px solid #6b4a1f; border-radius: 12px; background: linear-gradient(rgba(14, 9, 5, .93), rgba(8, 5, 3, .95));
  box-shadow: inset 0 0 60px rgba(79, 216, 166, .07), inset 0 0 0 2px rgba(255, 255, 255, .04), 0 10px 0 #060402;
}
/* Phosphor scanlines and tube vignette. Kept faint: this has to survive being
   read for ten minutes, not just screenshotted once. */
.lobby-standalone::before {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
.lobby-standalone::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .5));
}
.lobby-standalone > * { position: relative; z-index: 1; }

.lobby-page .eyebrow {
  margin: 0; padding-bottom: 9px; border-bottom: 2px solid #3d2a14;
  font: 800 11px/1 ui-monospace, "Courier New", monospace; letter-spacing: .22em;
  color: var(--arcade-cyan) !important; text-shadow: 0 0 9px rgba(79, 216, 166, .6);
}

/* --- Menu rows: the one shape every screen is built from --------------- */
.lobby-list, .leaderboard-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lobby-page .lobby-list { max-height: min(56vh, 440px); overflow-y: auto; }
.lobby-list li, .leaderboard-list li {
  position: relative; display: grid; align-items: center; gap: 12px;
  padding: 11px 12px 11px 30px; border: 0; border-left: 3px solid transparent; border-radius: 0;
  background: rgba(255, 255, 255, .022); box-shadow: none;
}
.lobby-list li { grid-template-columns: minmax(0, 1fr) auto; }
.leaderboard-list li { grid-template-columns: 4.5ch minmax(0, 1fr) auto auto; }
.lobby-list li:nth-child(odd), .leaderboard-list li:nth-child(odd) { background: rgba(255, 255, 255, .05); }
/* The selection cursor. An arcade menu has one; a web list does not. */
.lobby-list li::before, .leaderboard-list li::before {
  content: "\25B6"; position: absolute; left: 20px; color: var(--gold); font-size: 12px; opacity: 0;
}
.lobby-list li:hover, .lobby-list li:focus-within,
.leaderboard-list li:hover { border-left-color: var(--gold); background: rgba(255, 200, 61, .1); }
.lobby-list li:hover::before, .lobby-list li:focus-within::before,
.leaderboard-list li:hover::before { opacity: 1; animation: cursor-blink .55s steps(1, end) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }

.lobby-detail { min-width: 0; color: #e8dcc4; font-size: 13px; line-height: 1.5; }
.lobby-name { display: block; margin-bottom: 2px; color: var(--gold); font-size: 15px; }
.lobby-list button {
  min-width: 92px; padding: 9px 14px; border: 2px solid #4fd8a6; border-radius: 4px; color: #0a2418;
  font: 800 11px/1 ui-monospace, "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(#8ff0c4, #3aa87c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.lobby-list button:hover:not(:disabled) {
  background: linear-gradient(#b6f7da, #55c497);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 16px rgba(127, 227, 168, .6);
}

/* --- Scores: numbers belong on a fixed grid ---------------------------- */
.rank-place { color: var(--gold); font: 800 17px/1 ui-monospace, "Courier New", monospace; }
.rank-name { min-width: 0; color: #e8dcc4; font-size: 14px; overflow-wrap: anywhere; }
.rank-rating { color: var(--arcade-lime); font: 800 15px/1 ui-monospace, "Courier New", monospace; font-variant-numeric: tabular-nums; }
.rank-games { color: #8a7757; font: 600 11px/1 ui-monospace, "Courier New", monospace; }
.leaderboard-list li:nth-child(-n+3) .rank-place { color: #fff; text-shadow: 0 0 10px var(--gold), 0 0 20px rgba(240, 170, 60, .8); }

/* A status line reads as a terminal, so it ends in a blinking block. */
.lobby-status { display: block; color: var(--arcade-lime); font-size: 12.5px; }
.lobby-status:not(:empty)::after { content: "\258C"; margin-left: 3px; animation: cursor-blink .8s steps(1, end) infinite; }

/* --- Forms: cabinet dials, not web inputs ------------------------------ */
.table-config-fields { display: grid; gap: 11px; }
.table-config-fields label {
  display: grid; gap: 5px; color: #b09a76;
  font: 700 10.5px/1.3 ui-monospace, "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase;
}
.table-config-fields .round-clock-toggle {
  display: flex; align-items: center; gap: 9px; color: #e8dcc4;
  font-size: 12.5px; letter-spacing: .02em; text-transform: none;
}
.table-config-fields select, .table-config-fields input[type="text"] {
  width: 100%; padding: 9px 11px; border: 2px solid #5c421e; border-radius: 4px; color: #ffe9b8;
  font: 700 13px/1.2 ui-monospace, "Courier New", monospace; background: #0d0805;
  letter-spacing: .02em; text-transform: none;
}
.table-config-fields select:focus-visible, .table-config-fields input:focus-visible { outline: 3px solid var(--arcade-cyan); outline-offset: 1px; }
.lobby-page .color-choices button {
  width: 100%; padding: 13px 16px; border: 2px solid #ffc83d; border-radius: 5px; color: #1a1006;
  font: 800 13px/1 ui-monospace, "Courier New", monospace; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(#ffdc7e, #dd9520);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 20px rgba(255, 200, 90, .35);
}
.lobby-page .color-choices button:hover:not(:disabled) { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 30px rgba(255, 200, 90, .7); }
.lobby-page .game-tools button, .lobby-page .game-tools input {
  padding: 9px 13px; border: 2px solid #7a5527; border-radius: 5px; color: #d9c08a;
  font: 700 11px/1 ui-monospace, "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(#241609, #170e06);
}
.lobby-page .game-tools input { color: #ffe9b8; background: #0d0805; }

.lobby-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lobby-grid-single { display: grid; grid-template-columns: minmax(0, 1fr); }

/* --- Profile: a score readout, not a definition list ------------------- */
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0; }
.profile-stats dt { color: #8a7757; font: 700 10px/1 ui-monospace, "Courier New", monospace; letter-spacing: .18em; text-transform: uppercase; }
.profile-stats dd {
  margin: 4px 0 0; color: var(--gold); font: 800 34px/1 ui-monospace, "Courier New", monospace;
  font-variant-numeric: tabular-nums; text-align: left; text-shadow: 0 0 14px rgba(255, 200, 90, .55);
}

/* --- Rules: readable prose still lives inside the tube ----------------- */
.rules { line-height: 1.65; }
.rules-list { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 7px 16px; margin: 0; color: #e8dcc4; }
.rules-list dt { color: var(--gold); font-weight: 800; }
.rules-list dd { margin: 0; }
.rules-bullets { margin: 0; padding-left: 19px; color: #e8dcc4; }
.rules-bullets li { margin-bottom: 6px; }
.rules a { color: var(--arcade-cyan); }

@media (max-width: 860px) { .lobby-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .leaderboard-list li { grid-template-columns: 4ch minmax(0, 1fr) auto; }
  .rank-games { display: none; }
  .lobby-list li { grid-template-columns: minmax(0, 1fr); }
  .lobby-list button { width: 100%; }
}
/* A blinking cursor is atmosphere, not information. */
@media (prefers-reduced-motion: reduce) {
  .lobby-list li::before, .leaderboard-list li::before, .lobby-status:not(:empty)::after { animation: none; }
}

/* --- Corrections after looking at the rendered screens ------------------ */
/* [hidden] must beat any display rule set on the same element, or a field
   meant only for two-player tables shows up in the one-player form. */
[hidden] { display: none !important; }

/* The generic pill button styling has to lose inside the cabinet, or every
   control reverts to the same violet lozenge. */
.lobby-page button, .lobby-page select { border-radius: 5px; box-shadow: none; }
.lobby-page button { transition: none; }
.lobby-page button:hover { transform: none; filter: none; }
.lobby-list button {
  border-color: #4fd8a6; color: #0a2418;
  background: linear-gradient(#8ff0c4, #3aa87c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.lobby-list button:hover:not(:disabled) { background: linear-gradient(#b6f7da, #55c497); }
.lobby-page .color-choices button { background: linear-gradient(#ffdc7e, #dd9520); color: #1a1006; }
.lobby-page .color-choices button:hover:not(:disabled) { background: linear-gradient(#ffeec2, #f0b23a); }
.lobby-page .game-tools button:hover { background: linear-gradient(#3a2410, #1f1408); color: var(--gold); }

/* Give each row room to breathe; the detail line was wrapping mid-phrase. */
.lobby-detail { font-size: 12.5px; line-height: 1.55; }
.lobby-list li { padding: 13px 14px 13px 32px; }
.lobby-standalone { padding: 20px; }

/* --- The cabinet screens opt out of the board's theme chrome ------------
   body[data-theme=...] button outranks a single class, so every control here
   is scoped through body.lobby-page to win cleanly rather than by !important. */
body.lobby-page button, body.lobby-page select, body.lobby-page input[type="text"] {
  border-radius: 5px; box-shadow: none; transition: none; font: inherit;
}
body.lobby-page button:hover { transform: none; filter: none; }

body.lobby-page .site-nav a { border-radius: 6px; }

body.lobby-page .lobby-list button {
  min-width: 92px; padding: 9px 14px; border: 2px solid #4fd8a6; border-radius: 4px; color: #0a2418;
  font: 800 11px/1 ui-monospace, "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(#8ff0c4, #3aa87c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}
body.lobby-page .lobby-list button:hover:not(:disabled) {
  background: linear-gradient(#b6f7da, #55c497);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 16px rgba(127, 227, 168, .6);
}

body.lobby-page .color-choices button {
  width: 100%; padding: 13px 16px; border: 2px solid #ffc83d; color: #1a1006;
  font: 800 13px/1 ui-monospace, "Courier New", monospace; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(#ffdc7e, #dd9520);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 20px rgba(255, 200, 90, .35);
}
body.lobby-page .color-choices button:hover:not(:disabled) { background: linear-gradient(#ffeec2, #f0b23a); }

body.lobby-page .table-config-fields select,
body.lobby-page .table-config-fields input[type="text"] {
  border: 2px solid #5c421e; color: #ffe9b8; background: #0d0805;
  font: 700 13px/1.2 ui-monospace, "Courier New", monospace; text-transform: none;
}
body.lobby-page .game-tools button, body.lobby-page .game-tools input {
  border: 2px solid #7a5527; color: #d9c08a; background: linear-gradient(#241609, #170e06);
  font: 700 11px/1 ui-monospace, "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase;
}
body.lobby-page .game-tools input { color: #ffe9b8; background: #0d0805; }
body.lobby-page .game-tools button:hover { background: linear-gradient(#3a2410, #1f1408); color: var(--gold); }

/* --- Top bar, rebuilt -------------------------------------------------
   Five stretched boxes read as a form toolbar. This is a HUD strip: the
   machine's name on the left, the menu on the right, and the same cursor
   the lists inside the screens use to show what is selected. */
.site-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 0 0 16px; padding: 0 0 10px;
  border: 0; border-bottom: 2px solid rgba(184, 134, 47, .45); border-radius: 0;
  background: none; box-shadow: none;
}

.nav-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; }
/* The board addresses its first file 'ก'. Using it as the mark ties the
   wordmark to the game's own notation instead of a generic glyph. */
.nav-brand-mark {
  display: grid; width: 30px; height: 30px; place-items: center;
  border: 2px solid var(--gold); border-radius: 7px; color: var(--gold);
  font: 800 17px/1 Georgia, "Noto Serif Thai", serif;
  background: linear-gradient(160deg, rgba(255, 200, 90, .2), rgba(0, 0, 0, .3));
  box-shadow: 0 0 12px rgba(255, 200, 90, .3);
}
.nav-brand-name {
  color: var(--gold); font: 700 17px/1 Georgia, "Noto Serif Thai", serif; letter-spacing: .01em;
  text-shadow: 0 0 14px rgba(255, 200, 90, .35);
}
.nav-brand:hover .nav-brand-name { color: #ffe9b8; }

.nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.nav-menu a {
  position: relative; padding: 8px 13px 8px 22px; border: 0; border-radius: 5px;
  color: #b09a76; font: 700 13px/1 Georgia, "Noto Serif Thai", serif; letter-spacing: .01em;
  text-decoration: none; background: none;
}
/* The selection cursor, same as the menu rows inside each screen. */
.nav-menu a::before {
  content: "\25B6"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--gold); opacity: 0;
}
.nav-menu a:hover { color: #ffe9b8; background: rgba(255, 200, 90, .08); }
.nav-menu a:hover::before { opacity: .55; }
.nav-menu a[aria-current="page"] {
  color: var(--gold); background: rgba(255, 200, 90, .14);
  box-shadow: inset 0 -2px 0 var(--gold);
}
.nav-menu a[aria-current="page"]::before { opacity: 1; animation: cursor-blink .55s steps(1, end) infinite; }
.nav-menu a:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }

@media (max-width: 620px) {
  .site-nav { gap: 8px 10px; }
  .nav-brand-name { display: none; }
  .nav-menu { flex: 1 1 100%; justify-content: space-between; }
  .nav-menu a { padding: 8px 8px 8px 18px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .nav-menu a[aria-current="page"]::before { animation: none; } }

body.lobby-page .site-nav a { border-radius: 5px; }
body.lobby-page .nav-menu a { border: 0; background: none; box-shadow: none; }
body.lobby-page .nav-menu a[aria-current="page"] { color: var(--gold); background: rgba(255, 200, 90, .14); box-shadow: inset 0 -2px 0 var(--gold); }

/* The wordmark is an <a> inside .site-nav, so it inherited the old button
   styling. It is a mark, not a control. */
.site-nav .nav-brand, body.lobby-page .site-nav .nav-brand {
  flex: 0 0 auto; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; text-transform: none; letter-spacing: normal;
}
.site-nav .nav-menu a, body.lobby-page .site-nav .nav-menu a {
  flex: 0 0 auto; text-transform: none; letter-spacing: .01em;
  font: 700 13px/1 Georgia, "Noto Serif Thai", serif;
}

/* --- Marquee carries the menu -----------------------------------------
   One header per screen: the title, and the menu on the same board. */
.lobby-page .hero { padding: 14px 18px 10px; }
.lobby-page .hero h1 { margin-bottom: 10px; }
.site-nav, body.lobby-page .site-nav {
  display: flex; justify-content: center; margin: 0; padding: 8px 0 0;
  border: 0; border-top: 2px solid rgba(184, 134, 47, .32); border-radius: 0;
  background: none; box-shadow: none;
}
.nav-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }

/* ======================================================================
   SHARED ARCADE MARQUEE
   The play board and every supporting screen use this exact cabinet head.
   It is intentionally compact so the board remains the star of the game.
   ====================================================================== */
.hero.arcade-hero,
body.lobby-page .hero.arcade-hero {
  --marquee-edge: #c48b31;
  --marquee-light: #ffe477;
  --marquee-screen: #130b06;
  --marquee-ink: #fff0c3;
  position: relative;
  max-width: none;
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--marquee-edge);
  border-radius: 16px;
  text-align: left;
  background:
    linear-gradient(105deg, rgba(255, 211, 100, .1), transparent 28%),
    linear-gradient(180deg, #321b0a, var(--marquee-screen));
  box-shadow:
    0 0 0 3px rgba(31, 12, 4, .9),
    0 0 0 5px rgba(196, 139, 49, .32),
    0 14px 30px rgba(0, 0, 0, .46),
    inset 0 0 28px rgba(255, 196, 76, .08);
  isolation: isolate;
}
.hero.arcade-hero::before,
body.lobby-page .hero.arcade-hero::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .24;
  background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, .3) 3px 4px);
  mix-blend-mode: multiply;
}
.hero.arcade-hero::after,
body.lobby-page .hero.arcade-hero::after {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 9px;
  bottom: 8px;
  left: 9px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(255, 236, 171, .16);
  clip-path: polygon(0 0, 18px 0, 18px 1px, calc(100% - 18px) 1px, calc(100% - 18px) 0, 100% 0, 100% 18px, calc(100% - 1px) 18px, calc(100% - 1px) calc(100% - 18px), 100% calc(100% - 18px), 100% 100%, calc(100% - 18px) 100%, calc(100% - 18px) calc(100% - 1px), 18px calc(100% - 1px), 18px 100%, 0 100%, 0 calc(100% - 18px), 1px calc(100% - 18px), 1px 18px, 0 18px);
}
.arcade-hero-display {
  position: relative;
  z-index: 1;
  padding: 12px 20px 11px;
}
.hero .arcade-kicker,
body.lobby-page .hero .arcade-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 7px;
  color: var(--marquee-light);
  font: 900 10px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 0 9px color-mix(in srgb, var(--marquee-light) 56%, transparent);
}
.arcade-ready {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--arcade-lime);
  letter-spacing: .12em;
  white-space: nowrap;
}
.arcade-ready i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: arcade-ready-pulse 1.1s steps(2, end) infinite;
}
@keyframes arcade-ready-pulse { 50% { opacity: .35; } }
.arcade-title-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}
.arcade-title-emblem {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 2px solid var(--marquee-light);
  border-radius: 8px;
  color: #1a0c03;
  font: 1000 17px/1 Impact, "Arial Black", "Noto Sans Thai", sans-serif;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .45), transparent 42%),
    linear-gradient(180deg, #ffe98f, #d78718);
  box-shadow: inset 0 -5px 0 rgba(70, 29, 2, .24), 0 0 16px rgba(255, 205, 77, .34);
  text-transform: uppercase;
}
.hero.arcade-hero h1,
body.lobby-page .hero.arcade-hero h1,
body[data-theme="classic"] .hero.arcade-hero h1,
body[data-theme="cartoon"] .hero.arcade-hero h1 {
  margin: 0;
  color: var(--marquee-ink);
  font-family: Impact, "Arial Black", "Noto Sans Thai", sans-serif;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: .035em;
  text-shadow: 3px 3px 0 #6f350a, 0 0 16px rgba(255, 220, 102, .38);
  text-wrap: balance;
}
.hero .arcade-page-code,
body.lobby-page .hero .arcade-page-code {
  margin: 6px 0 0;
  color: #d7bd8a;
  font: 800 10px/1.25 ui-monospace, "Courier New", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.arcade-version {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 6px 2px;
  border: 1px solid var(--arcade-cyan);
  color: var(--arcade-cyan);
  line-height: 1;
  box-shadow: 0 0 9px color-mix(in srgb, var(--arcade-cyan) 40%, transparent);
}

.hero.arcade-hero .site-nav,
body.lobby-page .hero.arcade-hero .site-nav {
  position: relative;
  z-index: 5;
  display: block;
  margin: 0;
  padding: 9px 12px 10px;
  border: 0;
  border-top: 2px solid rgba(255, 211, 100, .24);
  border-radius: 0;
  background: rgba(5, 4, 3, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.hero.arcade-hero .nav-menu,
body.lobby-page .hero.arcade-hero .nav-menu {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.hero.arcade-hero .nav-menu a,
body.lobby-page .hero.arcade-hero .nav-menu a {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid #66451f;
  border-radius: 0;
  color: #d5bd91;
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(67, 42, 18, .8), rgba(19, 12, 7, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -3px rgba(0, 0, 0, .32);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.hero.arcade-hero .nav-menu a::before,
body.lobby-page .hero.arcade-hero .nav-menu a::before {
  display: none;
}
.nav-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid currentColor;
  color: #dba747;
  font: 900 13px/1 ui-monospace, "Courier New", monospace;
  background: rgba(0, 0, 0, .25);
}
.nav-copy { display: grid; min-width: 0; gap: 2px; }
.nav-label {
  overflow: hidden;
  color: inherit;
  font: 900 13px/1.1 "Trebuchet MS", "Noto Sans Thai", Tahoma, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-code {
  overflow: hidden;
  color: #8d7959;
  font: 800 8px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .11em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero.arcade-hero .nav-menu a:hover,
body.lobby-page .hero.arcade-hero .nav-menu a:hover {
  color: #fff2c2;
  border-color: #c89031;
  background: linear-gradient(180deg, rgba(117, 69, 20, .9), rgba(35, 20, 8, .95));
  transform: none;
  filter: none;
}
.hero.arcade-hero .nav-menu a:hover .nav-icon,
body.lobby-page .hero.arcade-hero .nav-menu a:hover .nav-icon { color: #ffe477; }
.hero.arcade-hero .nav-menu a[aria-current="page"],
body.lobby-page .hero.arcade-hero .nav-menu a[aria-current="page"] {
  color: #1a1006;
  border-color: #ffe985;
  background: linear-gradient(180deg, #ffe990, #d99522);
  box-shadow: inset 0 -4px rgba(87, 44, 5, .27), 0 0 15px rgba(255, 204, 76, .38);
}
.hero.arcade-hero .nav-menu a[aria-current="page"] .nav-icon,
body.lobby-page .hero.arcade-hero .nav-menu a[aria-current="page"] .nav-icon {
  color: #281305;
  border-color: rgba(40, 19, 5, .58);
  background: rgba(255, 255, 255, .2);
}
.hero.arcade-hero .nav-menu a[aria-current="page"] .nav-code,
body.lobby-page .hero.arcade-hero .nav-menu a[aria-current="page"] .nav-code { color: #5e350a; }
.hero.arcade-hero .nav-menu a:focus-visible,
body.lobby-page .hero.arcade-hero .nav-menu a:focus-visible {
  outline: 3px solid var(--arcade-cyan);
  outline-offset: 2px;
}

/* The saved theme still changes the whole room; the cabinet layout stays
   familiar while its light tubes follow the selected palette. */
body[data-theme="arcade"] .hero.arcade-hero {
  --marquee-edge: #5beaf1;
  --marquee-light: #fff16c;
  --marquee-screen: #12062d;
  --marquee-ink: #fff4af;
  background:
    radial-gradient(circle at 82% 10%, rgba(58, 234, 255, .2), transparent 28%),
    linear-gradient(135deg, #35105e, #10072b 70%);
  box-shadow: 0 0 0 3px #14062c, 0 0 0 5px rgba(232, 84, 58, .4), 0 0 25px rgba(91, 234, 241, .34), 0 14px 30px rgba(0, 0, 0, .48);
}
body[data-theme="arcade"] .arcade-title-emblem { color: #19082f; background: linear-gradient(180deg, #fff38f, #ea8d28); }
body[data-theme="arcade"] .hero.arcade-hero .nav-menu a { border-color: #4a4c8a; background: linear-gradient(180deg, rgba(55, 35, 111, .94), rgba(20, 9, 52, .96)); }
body[data-theme="arcade"] .hero.arcade-hero .nav-menu a:hover { border-color: #5beaf1; background: linear-gradient(180deg, rgba(77, 58, 142, .96), rgba(28, 13, 66, .98)); }
body[data-theme="arcade"] .hero.arcade-hero .nav-menu a[aria-current="page"] { border-color: #fff16c; background: linear-gradient(180deg, #fff58d, #f29b2e); }

body[data-theme="cartoon"] .hero.arcade-hero {
  --marquee-edge: #67ffe2;
  --marquee-light: #ffe272;
  --marquee-screen: #03243d;
  --marquee-ink: #fff6b2;
  background:
    radial-gradient(circle at 84% 6%, rgba(103, 255, 226, .22), transparent 30%),
    linear-gradient(135deg, #07566f, #03243d 72%);
  box-shadow: 0 0 0 3px #031c31, 0 0 0 5px rgba(255, 226, 114, .38), 0 0 24px rgba(103, 255, 226, .3), 0 14px 30px rgba(0, 0, 0, .48);
}
body[data-theme="cartoon"] .arcade-title-emblem { color: #03283c; background: linear-gradient(180deg, #fff5ad, #e8ae37); }
body[data-theme="cartoon"] .hero.arcade-hero h1 { text-shadow: 3px 3px 0 #08788f, 0 0 16px rgba(255, 231, 122, .42); }
body[data-theme="cartoon"] .hero.arcade-hero .nav-menu a { border-color: #287f8a; background: linear-gradient(180deg, rgba(6, 81, 103, .95), rgba(2, 36, 61, .97)); }
body[data-theme="cartoon"] .hero.arcade-hero .nav-menu a:hover { border-color: #67ffe2; background: linear-gradient(180deg, rgba(12, 111, 126, .96), rgba(3, 49, 75, .98)); }
body[data-theme="cartoon"] .hero.arcade-hero .nav-menu a[aria-current="page"] { border-color: #fff3a8; background: linear-gradient(180deg, #fff4a3, #eab13a); }

@media (max-width: 760px) {
  .hero.arcade-hero .nav-menu,
  body.lobby-page .hero.arcade-hero .nav-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero.arcade-hero .nav-menu a:nth-child(n + 4),
  body.lobby-page .hero.arcade-hero .nav-menu a:nth-child(n + 4) { grid-column: span 1; }
}
@media (max-width: 520px) {
  .hero.arcade-hero,
  body.lobby-page .hero.arcade-hero { border-radius: 12px; }
  .arcade-hero-display { padding: 11px 13px 10px; }
  .arcade-kicker { letter-spacing: .1em; }
  .arcade-ready { font-size: 0; }
  .arcade-title-emblem { width: 44px; height: 44px; font-size: 14px; }
  .hero.arcade-hero h1,
  body.lobby-page .hero.arcade-hero h1 { font-size: clamp(27px, 10vw, 38px); }
  .hero .arcade-page-code,
  body.lobby-page .hero .arcade-page-code { font-size: 8.5px; letter-spacing: .08em; }
  .hero.arcade-hero .nav-menu,
  body.lobby-page .hero.arcade-hero .nav-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero.arcade-hero .nav-menu a,
  body.lobby-page .hero.arcade-hero .nav-menu a { grid-template-columns: 25px minmax(0, 1fr); padding: 7px; }
  .nav-icon { width: 24px; height: 24px; font-size: 11px; }
  .nav-label { font-size: 11px; }
  .nav-code { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { .arcade-ready i { animation: none; } }

/* ======================================================================
   SUPPORTING SCREENS
   Lobby, scores, profile and rules now sit inside one cabinet screen whose
   bezel, status strip and inner modules share the marquee's visual grammar.
   ====================================================================== */
.arcade-content-shell {
  --console-edge: #c48b31;
  --console-accent: #f4c36b;
  --console-live: #7fe3a8;
  --console-line: rgba(196, 139, 49, .4);
  --console-panel: rgba(17, 9, 5, .94);
  position: relative;
  gap: 14px;
  padding: 0 14px 16px;
  overflow: hidden;
  border: 3px solid var(--console-edge);
  border-radius: 16px;
  background:
    linear-gradient(115deg, rgba(255, 215, 106, .06), transparent 28%),
    linear-gradient(180deg, #211208, #0b0603 72%);
  box-shadow:
    0 0 0 3px rgba(31, 12, 4, .88),
    0 0 0 5px rgba(196, 139, 49, .24),
    0 14px 30px rgba(0, 0, 0, .46),
    inset 0 0 42px rgba(255, 196, 76, .045);
}
.arcade-content-shell::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, .42) 3px 4px);
}
.arcade-content-shell > * { position: relative; z-index: 4; }
.arcade-screen-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -14px;
  padding: 10px 15px 9px;
  border-bottom: 2px solid var(--console-line);
  color: var(--console-accent);
  font: 900 10px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .19em;
  background: rgba(4, 3, 2, .72);
  text-shadow: 0 0 9px color-mix(in srgb, var(--console-accent) 42%, transparent);
}
.arcade-screen-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--console-live);
  letter-spacing: .11em;
  white-space: nowrap;
}
.arcade-screen-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

body.lobby-page .arcade-content-shell .lobby-standalone {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--console-line);
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(127, 227, 168, .055), transparent 48%),
    var(--console-panel);
  box-shadow:
    inset 0 0 38px rgba(79, 216, 166, .045),
    inset 0 0 0 1px rgba(255, 255, 255, .025);
}
body.lobby-page .arcade-content-shell .lobby-standalone::after {
  background: radial-gradient(ellipse 110% 110% at 50% 50%, transparent 66%, rgba(0, 0, 0, .34));
}
body.lobby-page .arcade-content-shell .eyebrow {
  padding-bottom: 10px;
  border-bottom-color: var(--console-line);
  color: var(--console-accent) !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--console-accent) 40%, transparent);
}
.arcade-content-shell.lobby-grid { align-items: stretch; }
.arcade-content-shell.lobby-grid > .lobby-standalone { align-content: start; }

/* The lobby's command buttons are the cabinet controls directly above its
   screen, so they use the same hard edge and metal trim. */
body.lobby-page .controls {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 2px solid var(--console-edge, #c48b31);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(42, 24, 10, .94), rgba(15, 9, 5, .96));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .06);
}

/* High scores occupy the full tube; stronger separators make wide rows read
   like a scoreboard rather than a stretched web list. */
.arcade-content-shell[data-screen="leaderboard"] .leaderboard-list {
  border-top: 1px solid var(--console-line);
  border-bottom: 1px solid var(--console-line);
}
.arcade-content-shell[data-screen="leaderboard"] .leaderboard-list li {
  min-height: 49px;
  padding-inline: 36px 18px;
}
.arcade-content-shell[data-screen="leaderboard"] .rank-place { font-size: 20px; }
.arcade-content-shell[data-screen="leaderboard"] .rank-name { font-size: 15px; }

/* Profile fields and score counters behave like two halves of one player
   console. Keeping both panels equally tall removes the old card layout. */
.arcade-content-shell[data-screen="profile"] .lobby-standalone { height: 100%; }
.arcade-content-shell[data-screen="profile"] .profile-stats {
  align-content: center;
  min-height: 150px;
}
.arcade-content-shell[data-screen="profile"] .profile-stats > div { min-width: 0; }

/* Manual screen: an illustrated move guide followed by three compact rule modules. */
.arcade-content-shell .rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.arcade-content-shell .rules::before,
.arcade-content-shell .rules::after { display: none; }
.rules-module {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--console-line);
  border-left: 4px solid var(--console-accent);
  border-radius: 5px;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--console-accent) 5%, transparent), transparent 35%),
    rgba(8, 6, 4, .72);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .24);
}
.rules-module .eyebrow { margin: 0 0 13px; }
.rules-module .rules-list { grid-template-columns: minmax(100px, 150px) minmax(0, 1fr); }
.rules-module .rules-bullets { padding-left: 21px; }

.rules-piece-manual {
  grid-column: 1 / -1;
  padding: clamp(16px, 2vw, 26px);
  border-left-width: 1px;
  border-top: 4px solid var(--console-accent);
  background:
    radial-gradient(circle at 9% 0, color-mix(in srgb, var(--console-accent) 12%, transparent), transparent 30%),
    radial-gradient(circle at 94% 100%, color-mix(in srgb, var(--console-live) 9%, transparent), transparent 32%),
    rgba(5, 7, 6, .78);
}
.rules-manual-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--console-line);
}
.rules-manual-heading .eyebrow { margin: 0 0 7px; }
.rules-manual-heading h2 {
  margin: 0;
  color: #fff1b0;
  font: 900 clamp(25px, 2.4vw, 36px)/1.1 "Trebuchet MS", "Noto Sans Thai", sans-serif;
  letter-spacing: -.025em;
  text-shadow: 0 2px 14px rgba(255, 214, 106, .18);
}
.rules-manual-heading p:not(.eyebrow) { max-width: 620px; margin: 7px 0 0; color: #d8e9de; }
.move-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
  max-width: 410px;
}
.move-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--console-line);
  border-radius: 999px;
  color: #e9f5ee;
  background: rgba(0, 0, 0, .23);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.move-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.legend-origin { background: #ffd76a; box-shadow: 0 0 0 3px rgba(255, 215, 106, .18); }
.legend-move { background: #5cecc0; box-shadow: 0 0 7px rgba(92, 236, 192, .72); }
.legend-capture { background: #ff9b55; box-shadow: 0 0 7px rgba(255, 155, 85, .72); }

.piece-move-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.piece-guide-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--console-line) 82%, transparent);
  border-radius: 13px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--console-accent) 6%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(19, 27, 22, .96), rgba(4, 11, 9, .93));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 8px 22px rgba(0, 0, 0, .24);
}
.piece-guide-card::before {
  position: absolute;
  top: 0;
  right: 16px;
  width: 42px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  content: "";
  background: var(--console-accent);
  box-shadow: 0 0 11px color-mix(in srgb, var(--console-accent) 55%, transparent);
}
.piece-guide-identity {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 143px;
  padding: 14px 15px 8px;
}
.piece-portrait {
  position: relative;
  display: grid;
  place-items: end center;
  height: 118px;
}
.piece-portrait::after {
  position: absolute;
  z-index: 0;
  bottom: 4px;
  width: 76px;
  height: 17px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(ellipse, rgba(255, 215, 106, .33), transparent 70%);
  filter: blur(3px);
}
.piece-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 88px;
  height: 118px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 6px rgba(255, 226, 145, .12));
}
.piece-guide-identity h3 {
  margin: 2px 0 3px;
  color: #fff1b0;
  font-size: 23px;
  line-height: 1.05;
}
.piece-guide-identity p { margin: 0; color: #cadbd0; font-size: 13px; line-height: 1.45; }
.piece-guide-identity .piece-code {
  color: var(--console-live);
  font: 900 9px/1.2 ui-monospace, "Courier New", monospace;
  letter-spacing: .15em;
}
.move-map-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 236px;
  padding: 15px 12px 9px;
  border-top: 1px solid color-mix(in srgb, var(--console-line) 62%, transparent);
  background: rgba(0, 0, 0, .13);
}
.move-front-label {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 50%;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff0a8;
  background: rgba(2, 10, 7, .82);
  font: 900 9px/1.2 ui-monospace, "Courier New", monospace;
  letter-spacing: .06em;
  transform: translateX(-50%);
  white-space: nowrap;
}
.move-diagram { display: block; width: min(100%, 220px); height: auto; overflow: visible; }
.move-board-bg { fill: rgba(13, 48, 38, .76); stroke: rgba(255, 224, 126, .28); stroke-width: 2; }
.move-board-grid { fill: none; stroke: rgba(144, 222, 186, .18); stroke-width: 1; }
.move-routes,
.capture-routes { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.move-routes { stroke: #5cecc0; color: #5cecc0; filter: drop-shadow(0 0 4px rgba(92, 236, 192, .58)); }
.capture-routes { stroke: #ff9b55; color: #ff9b55; filter: drop-shadow(0 0 4px rgba(255, 155, 85, .58)); }
.move-diagram marker path { fill: #5cecc0; }
.move-diagram marker#arrow-capture path { fill: #ff9b55; }
.knight-routes { stroke-dasharray: 5 5; }
.boat-routes { stroke-width: 4.5; }
.move-targets circle { fill: #5cecc0; stroke: #e5fff6; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(92, 236, 192, .7)); }
.capture-targets circle { fill: #ff9b55; stroke: #fff0d0; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255, 155, 85, .7)); }
.move-origin { fill: #4b2d13; stroke: #ffd76a; stroke-width: 4; filter: drop-shadow(0 0 6px rgba(255, 215, 106, .55)); }
.move-origin-label { fill: #fff3bd; font: 900 18px/1 "Noto Sans Thai", Tahoma, sans-serif; text-anchor: middle; }
.piece-guide-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 43px;
  padding: 9px 13px;
  border-top: 1px solid color-mix(in srgb, var(--console-line) 58%, transparent);
  color: #a9c0b2;
  font-size: 11px;
}
.piece-guide-card footer strong { color: var(--console-accent); text-align: right; }

body[data-theme="arcade"] .piece-guide-card {
  background: linear-gradient(160deg, rgba(54, 19, 94, .96), rgba(15, 8, 45, .96));
}
body[data-theme="arcade"] .move-board-bg { fill: rgba(25, 15, 69, .9); stroke: rgba(91, 234, 241, .4); }
body[data-theme="arcade"] .move-board-grid { stroke: rgba(91, 234, 241, .2); }
body[data-theme="cartoon"] .piece-guide-card {
  background: linear-gradient(160deg, rgba(6, 72, 91, .97), rgba(2, 27, 47, .96));
}
body[data-theme="cartoon"] .move-board-bg { fill: rgba(2, 46, 64, .9); stroke: rgba(255, 226, 114, .4); }
body[data-theme="cartoon"] .move-board-grid { stroke: rgba(103, 255, 226, .22); }

body[data-theme="arcade"] .arcade-content-shell {
  --console-edge: #5beaf1;
  --console-accent: #fff16c;
  --console-live: #79f5bb;
  --console-line: rgba(91, 234, 241, .38);
  --console-panel: rgba(15, 7, 42, .94);
  background:
    radial-gradient(circle at 84% 5%, rgba(58, 234, 255, .15), transparent 28%),
    linear-gradient(145deg, #2b0d51, #10072b 70%);
  box-shadow: 0 0 0 3px #14062c, 0 0 0 5px rgba(232, 84, 58, .28), 0 0 24px rgba(91, 234, 241, .22), 0 14px 30px rgba(0, 0, 0, .48);
}
body[data-theme="arcade"].lobby-page .controls { border-color: #5beaf1; background: linear-gradient(180deg, rgba(49, 27, 94, .96), rgba(18, 8, 48, .97)); }

body[data-theme="cartoon"] .arcade-content-shell {
  --console-edge: #67ffe2;
  --console-accent: #ffe272;
  --console-live: #a4ffe6;
  --console-line: rgba(103, 255, 226, .34);
  --console-panel: rgba(2, 31, 52, .94);
  background:
    radial-gradient(circle at 84% 5%, rgba(103, 255, 226, .16), transparent 28%),
    linear-gradient(145deg, #064d67, #03243d 72%);
  box-shadow: 0 0 0 3px #031c31, 0 0 0 5px rgba(255, 226, 114, .27), 0 0 24px rgba(103, 255, 226, .22), 0 14px 30px rgba(0, 0, 0, .48);
}
body[data-theme="cartoon"].lobby-page .controls { border-color: #67ffe2; background: linear-gradient(180deg, rgba(5, 76, 98, .96), rgba(2, 31, 53, .97)); }

@media (max-width: 900px) {
  .arcade-content-shell .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-piece-manual { grid-column: 1 / -1; }
  .piece-move-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-module:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .arcade-content-shell { padding-inline: 9px; padding-bottom: 11px; border-radius: 12px; }
  .arcade-screen-status { margin-inline: -9px; padding-inline: 11px; font-size: 8.5px; letter-spacing: .11em; }
  body.lobby-page .arcade-content-shell .lobby-standalone { padding: 14px; }
  .arcade-content-shell .rules { grid-template-columns: minmax(0, 1fr); padding: 4px; gap: 9px; }
  .rules-module,
  .rules-piece-manual,
  .rules-module:last-child { grid-column: auto; }
  .rules-module { padding: 13px; }
  .rules-module .rules-list { grid-template-columns: minmax(86px, 110px) minmax(0, 1fr); gap: 7px 10px; }
  .rules-manual-heading { display: grid; gap: 13px; margin-bottom: 14px; padding-bottom: 13px; }
  .move-legend { justify-content: start; }
  .piece-move-gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .piece-guide-identity { grid-template-columns: 82px minmax(0, 1fr); min-height: 129px; padding: 10px 12px 6px; }
  .piece-portrait { height: 106px; }
  .piece-portrait img { width: 78px; height: 106px; }
  .move-map-wrap { min-height: 226px; }
}

/* ======================================================================
   PROFESSIONAL MATCH SCORE SHEET
   One full turn per row, with fixed Black/White files and compact status
   badges. This keeps the record scannable even after a long game.
   ====================================================================== */
.history-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.history-heading .eyebrow { margin: 0 0 5px; font-size: 9px; }
.history-heading h2 { margin: 0; }
.history-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(127, 227, 168, .52);
  border-radius: 999px;
  color: var(--arcade-lime);
  font: 800 8px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}
.history-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.inspection-panel .rating-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(196, 134, 46, .42);
  border-radius: 9px;
  color: inherit;
  background: rgba(9, 6, 4, .42);
  font-size: 12px;
  white-space: normal;
}
.rating-caption {
  align-self: center;
  color: #bca37a;
  font: 800 9px/1.2 ui-monospace, "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rating-scores { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.rating-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  font: 800 10px/1 ui-monospace, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}
.rating-chip strong { font-size: 13px; }
.rating-chip-black { color: #ffe5ae; background: #160d08; }
.rating-chip-ivory { color: #2d1908; background: #f2d8a5; }
.rating-eligibility {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px 10px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(196, 134, 46, .22);
  color: var(--arcade-lime);
  font-size: 10px;
}
.rating-eligibility strong {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 800 9px/1 ui-monospace, "Courier New", monospace;
}
.rating-eligibility small {
  min-width: 0;
  color: #c9b48d;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.rating-eligibility.is-unrated { color: #ffc46b; }

.notation-score-sheet {
  overflow: hidden;
  border: 1px solid rgba(196, 134, 46, .46);
  border-radius: 9px;
  background: rgba(8, 5, 3, .44);
}
.notation-table-head {
  display: grid;
  grid-template-columns: 34px repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(196, 134, 46, .48);
  color: #e1bd78;
  background: linear-gradient(180deg, rgba(93, 52, 16, .62), rgba(38, 21, 8, .78));
  font: 800 9px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .08em;
  text-align: center;
}
.notation-table-head span { padding: 7px 5px; }
.notation-table-head span + span { border-left: 1px solid rgba(196, 134, 46, .28); }
.notation-list {
  display: block;
  max-height: 310px;
  margin: 0;
  padding: 0;
  overflow: auto;
  color: #f2e4c9;
  font: 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  scrollbar-color: rgba(196, 134, 46, .7) rgba(0, 0, 0, .2);
  list-style: none;
}
.notation-list .notation-row {
  display: grid;
  grid-template-columns: 34px repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(196, 134, 46, .16);
  border-radius: 0;
  background: rgba(16, 9, 5, .58);
}
.notation-list .notation-row:nth-child(even) { background: rgba(50, 27, 9, .35); }
.notation-list .notation-row:last-child { border-bottom: 0; }
.notation-turn {
  display: grid;
  min-width: 0;
  padding: 10px 4px;
  place-items: start center;
  border-right: 1px solid rgba(196, 134, 46, .24);
  color: #d4ad67;
  font: 800 11px/1 ui-monospace, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.notation-entry {
  display: flex;
  min-width: 0;
  min-height: 39px;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 4px 5px;
  padding: 8px;
}
.notation-entry + .notation-entry { border-left: 1px solid rgba(196, 134, 46, .2); }
.notation-entry.is-empty { color: #6f6049; justify-content: center; }
.notation-move {
  min-width: 0;
  color: #f4e5c6;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.notation-move.is-capture { color: #ffd28a; }
.notation-tags { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.notation-tag {
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font: 800 7px/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .03em;
}
.notation-tag.capture { color: #ffbd6a; }
.notation-tag.check { color: #ff7b65; }
.notation-tag.mate { color: #fff0a1; background: rgba(181, 50, 27, .55); }
.notation-row .notation-analysis {
  width: 100%;
  min-width: 0;
  flex: 1 0 100%;
  margin: 3px 0 0;
  padding: 6px 8px;
  box-sizing: border-box;
}
.notation-row .notation-analysis[data-side="ivory"] { border-left-color: #e8cf9f; }
.notation-row .notation-analysis summary { font-size: 10px; }
.notation-row .ai-decision-body { font-size: 10px; }

body[data-theme="classic"] .notation-score-sheet,
body[data-theme="classic"] .inspection-panel .rating-result { border-color: rgba(196, 134, 46, .46); background: rgba(18, 8, 3, .62); }
body[data-theme="classic"] .notation-list .notation-row { border-radius: 0; background: rgba(20, 7, 3, .58); }
body[data-theme="classic"] .notation-list .notation-row:nth-child(even) { background: rgba(58, 28, 9, .4); }
body[data-theme="classic"] .notation-turn { color: #d4ad67; }

body[data-theme="arcade"] .notation-score-sheet,
body[data-theme="arcade"] .inspection-panel .rating-result { border-color: rgba(91, 234, 241, .46); background: rgba(13, 5, 42, .66); }
body[data-theme="arcade"] .notation-table-head { border-color: rgba(91, 234, 241, .38); color: #fff16c; background: linear-gradient(180deg, rgba(64, 44, 122, .78), rgba(24, 10, 65, .9)); }
body[data-theme="arcade"] .notation-list .notation-row { border-color: rgba(91, 234, 241, .16); background: rgba(20, 9, 69, .62); }
body[data-theme="arcade"] .notation-list .notation-row:nth-child(even) { background: rgba(47, 24, 96, .58); }
body[data-theme="arcade"] .notation-entry + .notation-entry,
body[data-theme="arcade"] .notation-turn { border-color: rgba(91, 234, 241, .2); }

body[data-theme="cartoon"] .notation-score-sheet,
body[data-theme="cartoon"] .inspection-panel .rating-result { border-color: rgba(164, 255, 230, .44); background: rgba(2, 31, 53, .72); }
body[data-theme="cartoon"] .notation-table-head { border-color: rgba(164, 255, 230, .34); color: #fff09a; background: linear-gradient(180deg, rgba(7, 91, 108, .84), rgba(3, 48, 72, .92)); }
body[data-theme="cartoon"] .notation-list .notation-row { border-color: rgba(164, 255, 230, .15); background: rgba(3, 39, 64, .7); }
body[data-theme="cartoon"] .notation-list .notation-row:nth-child(even) { background: rgba(4, 56, 78, .72); }
body[data-theme="cartoon"] .notation-entry + .notation-entry,
body[data-theme="cartoon"] .notation-turn { border-color: rgba(164, 255, 230, .18); }

@media (max-width: 390px) {
  .inspection-panel .rating-result { grid-template-columns: minmax(0, 1fr); }
  .rating-scores { justify-content: start; }
  .notation-table-head,
  .notation-list .notation-row { grid-template-columns: 30px repeat(2, minmax(0, 1fr)); }
  .notation-entry { padding: 7px 5px; }
  .notation-list { font-size: 11px; }
}

/* Right-side console tabs keep game information and file utilities separate. */
.inspection-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(196, 134, 46, .48);
  border-radius: 10px;
  background: rgba(8, 5, 3, .52);
}
.inspection-tab,
body[data-theme="classic"] .inspection-tab,
body[data-theme="arcade"] .inspection-tab,
body[data-theme="cartoon"] .inspection-tab {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #bca47b;
  background: transparent;
  box-shadow: none;
  font: 800 11px/1 "Trebuchet MS", "Noto Sans Thai", sans-serif;
  letter-spacing: .03em;
}
.inspection-tab:hover,
body[data-theme] .inspection-tab:hover {
  color: #ffe7ad;
  background: rgba(196, 134, 46, .12);
  filter: none;
  transform: none;
}
.inspection-tab[aria-selected="true"],
body[data-theme] .inspection-tab[aria-selected="true"] {
  border-color: #d79b3b;
  color: #241006;
  background: linear-gradient(180deg, #ffe39a, #d99a35);
  box-shadow: inset 0 -3px rgba(76, 37, 5, .2), 0 0 10px rgba(255, 201, 90, .18);
}
.inspection-tab-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.inspection-tab-panel[hidden] { display: none; }
.inspection-tab-panel > section { min-width: 0; }

.history-tab-panel, .tools-tab-panel, .settings-tab-panel { min-height: 440px; align-content: start; }
.inspection-panel .game-utility-panel {
  display: grid;
  gap: 12px;
  padding: 4px 0 0;
  border-bottom: 0;
}
.game-utility-panel .eyebrow { margin: 0; }
.game-utility-panel h2 { margin: 0; }
.utility-description {
  margin: -3px 0 3px;
  color: #bea77f;
  font-size: 12px;
  line-height: 1.5;
}
.utility-actions { display: grid; gap: 8px; }
.utility-actions button,
body[data-theme="classic"] .utility-actions button,
body[data-theme="arcade"] .utility-actions button,
body[data-theme="cartoon"] .utility-actions button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(196, 134, 46, .48);
  border-radius: 7px;
  color: #f4dfb4;
  text-align: left;
  background: linear-gradient(180deg, rgba(70, 37, 12, .72), rgba(25, 13, 6, .82));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}
.utility-actions button > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(244, 195, 107, .5);
  border-radius: 5px;
  color: #f4c36b;
  background: rgba(7, 4, 2, .35);
  font: 900 18px/1 ui-monospace, "Courier New", monospace;
}
.utility-actions button > span:last-child { display: grid; min-width: 0; gap: 3px; }
.utility-actions button strong { color: inherit; font-size: 13px; }
.utility-actions button small { color: #ac936d; font-size: 10px; font-weight: 500; line-height: 1.3; }
.utility-actions button:hover,
body[data-theme] .utility-actions button:hover {
  border-color: #efbd66;
  color: #fff0c9;
  background: linear-gradient(180deg, rgba(100, 53, 17, .78), rgba(39, 20, 7, .9));
  filter: none;
  transform: translateX(2px);
}
.utility-actions #toggle-sound[aria-pressed="true"] > span:first-child { color: var(--arcade-lime); border-color: currentColor; box-shadow: 0 0 8px color-mix(in srgb, var(--arcade-lime) 35%, transparent); }
.utility-actions #toggle-sound[aria-pressed="false"] { opacity: .72; }

body[data-theme="arcade"] .inspection-tabs { border-color: rgba(91, 234, 241, .44); background: rgba(13, 5, 42, .55); }
body[data-theme="arcade"] .inspection-tab[aria-selected="true"] { border-color: #fff16c; background: linear-gradient(180deg, #fff58d, #f29b2e); }
body[data-theme="arcade"] .utility-actions button { border-color: rgba(91, 234, 241, .4); background: linear-gradient(180deg, rgba(55, 35, 111, .7), rgba(20, 9, 52, .82)); }
body[data-theme="arcade"] .utility-actions button:hover { border-color: #5beaf1; background: linear-gradient(180deg, rgba(77, 58, 142, .8), rgba(28, 13, 66, .9)); }
body[data-theme="arcade"] .utility-actions button > span:first-child { border-color: rgba(91, 234, 241, .55); color: #fff16c; }

body[data-theme="cartoon"] .inspection-tabs { border-color: rgba(164, 255, 230, .42); background: rgba(2, 31, 53, .58); }
body[data-theme="cartoon"] .inspection-tab[aria-selected="true"] { border-color: #fff3a8; background: linear-gradient(180deg, #fff4a3, #eab13a); }
body[data-theme="cartoon"] .utility-actions button { border-color: rgba(164, 255, 230, .38); background: linear-gradient(180deg, rgba(6, 81, 103, .72), rgba(2, 36, 61, .84)); }
body[data-theme="cartoon"] .utility-actions button:hover { border-color: #67ffe2; background: linear-gradient(180deg, rgba(12, 111, 126, .8), rgba(3, 49, 75, .92)); }
body[data-theme="cartoon"] .utility-actions button > span:first-child { border-color: rgba(164, 255, 230, .55); color: #ffe272; }