@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  color-scheme:dark;
  --cream:#f4e6c5; --gold:#e2ba69; --muted:#b0b6a8;
  --board-size:min(68vh,max(380px,calc(100vh - 325px)),calc(100vw - 510px),780px);
  font-family:Manrope,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--cream);background:#08130f;min-height:100vh}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 30%,#48705036,transparent 56%),radial-gradient(ellipse at 38% 87%,#c6954918,transparent 45%),linear-gradient(110deg,#0004,transparent 50%,#0005)}
button,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,select:focus-visible{outline:2px solid #ffe3a0;outline-offset:4px}
[hidden]{display:none!important}
.salon{position:relative;max-width:1540px;margin:auto;padding:20px clamp(20px,3.5vw,55px) 30px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 18px;border-bottom:1px solid #d9b36630;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:8px}
.brand-piece{width:54px;height:54px;flex:none}
.brand p{margin:0 0 3px;font-size:12px;letter-spacing:.24em;color:#c8aa71}
.brand h1{margin:0;font:600 clamp(25px,2.5vw,36px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.015em}
.new-game{padding:10px 17px;color:#f1dab0;background:linear-gradient(#d0ad631c,#d0ad6308);border:1px solid #d5ad6560;border-radius:5px;font-size:14px}
.new-game:hover{background:#c79f462b}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,3vw,55px);align-items:center}
.table{display:flex;flex-direction:column;align-items:center;min-width:0;position:relative;padding:0 12px 10px}
.table::before{content:'';position:absolute;pointer-events:none;inset:18% 0 3%;background:radial-gradient(ellipse,#c5a36220,transparent 65%);filter:blur(16px)}
.player-bar{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;width:265px;max-width:90%;padding:6px 15px 6px 5px;border:1px solid #b39a664d;border-radius:6px;background:linear-gradient(120deg,#182d23,#0a1b15);box-shadow:0 8px 26px #0005;z-index:5}
.black-player{order:0;align-self:flex-end;margin-right:4%}.white-player{order:2;align-self:flex-start;margin-left:4%}
.black-player.at-bottom{order:2;align-self:flex-start;margin:0 0 0 4%}.white-player.at-top{order:0;align-self:flex-end;margin:0 4% 0 0}
.player-bar.active{border-color:#e8c471;box-shadow:0 0 0 1px #f6d9911a,0 8px 25px #0006,inset 0 0 22px #caad4710}
.player-avatar{width:46px;height:46px;flex:none}
.player-avatar .piece-sprite{width:100%;height:100%}
.player-copy{flex:1}.player-copy strong{display:block;font:600 23px/1 'Cormorant Garamond',Georgia,serif}
.player-copy small{display:block;font-size:12px;color:#b3bba8;margin-top:4px;white-space:nowrap}
.table-clock{font:600 28px/1 'Cormorant Garamond',Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.board-space{order:1;position:relative;margin:3px 0;width:calc(var(--board-size) + 52px);height:calc(var(--board-size) + 39px);display:grid;place-items:center}
.board-assembly{position:relative;width:100%;aspect-ratio:1;padding:25px;border-radius:6px;border:1px solid #a27643;transform:perspective(calc(var(--board-size) * 5)) rotateX(23deg);transform-origin:50% 60%;background:linear-gradient(140deg,#edd09b16,transparent 34%,#0005),repeating-linear-gradient(93deg,#4d2f1c 0 2px,#563624 3px 7px,#3c2318 8px 10px,#68412b 11px 18px);box-shadow:0 9px 0 #2a190f,0 11px 0 #936638,0 13px 0 #1b110d,0 35px 50px #0009,inset 0 0 0 3px #27160e,inset 0 0 0 5px #c59b54,inset 0 0 22px #160c0899}
.board-assembly::before{content:'';position:absolute;inset:12px;border:1px solid #d7ac626b;box-shadow:0 0 0 2px #27180c88;pointer-events:none}
.board-lip{width:100%;aspect-ratio:1;border:2px solid #dcb971;padding:3px;background:#140e09;box-shadow:0 0 0 2px #100b07,0 0 10px #000b}
.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));isolation:isolate}
.square{position:relative;min-width:0;min-height:0;border:0;padding:0;display:grid;place-items:center;overflow:visible}
.square.light{background:radial-gradient(ellipse at 30% 20%,#fff8e5bb,transparent 65%),linear-gradient(135deg,#eee0b8,#caba92)}
.square.dark{background:radial-gradient(ellipse at 30% 20%,#54836555,transparent 65%),linear-gradient(135deg,#214e3c,#103628)}
.square::before{content:'';position:absolute;inset:0;box-shadow:inset 0 1px #ffffff12,inset 0 0 9px #0000000b;pointer-events:none}
/* Keep tiles below every piece; visual row order supplies the pieces' depth. */
.square.last-move::before{background:#d9b75724;box-shadow:inset 0 0 0 2px #f4ce7970}
.square.computer-from::before{background:#e8bd622b;box-shadow:inset 0 0 0 2px #f7d383b3}
.square.computer-to::before{background:#f0c76d55;box-shadow:inset 0 0 0 3px #ffe19a,inset 0 0 18px #f6d27755}
.square.computer-pulse::before{animation:computer-square-pulse var(--cue-cycle) ease-in-out var(--cue-delay) 2}
@keyframes computer-square-pulse{0%,100%{background-color:#e9bf6333;box-shadow:inset 0 0 0 2px #e9c26eaa}50%{background-color:#ffe39c99;box-shadow:inset 0 0 0 4px #fff0bb,inset 0 0 22px #ffe29c99}}
.square.selected::before{background:#ebc46745;box-shadow:inset 0 0 0 3px #ffdb80,inset 0 0 26px #f2c45130}
.square.in-check::before{background:#c84f4766;box-shadow:inset 0 0 0 3px #f09074}
.square.legal::after{content:'';position:absolute;width:17%;aspect-ratio:1;border-radius:50%;background:#eed896bb;box-shadow:0 0 0 2px #0c352870,0 2px 5px #0004;pointer-events:none}
.square.legal.has-piece::after{width:82%;background:none;border:3px solid #ffdb80;box-shadow:none}
.square:focus-visible{outline-offset:-3px}
.piece-sprite{display:block;background-image:url('./assets/chess-pieces-3d.png');background-size:600% 200%;background-repeat:no-repeat;background-position-y:0;pointer-events:none}
.piece-sprite.black{background-position-y:100%}.piece-p{background-position-x:0}.piece-n{background-position-x:20%}.piece-b{background-position-x:40%}.piece-r{background-position-x:60%}.piece-q{background-position-x:80%}.piece-k{background-position-x:100%}
.square>.piece-sprite{--facing:1;position:absolute;width:112%;aspect-ratio:1;left:50%;bottom:32%;transform:translateX(-50%) scaleX(var(--facing)) scaleY(1.07);transform-origin:50% 84%;filter:contrast(1.06) saturate(.9) drop-shadow(2px 5px 2px #0005);transition:filter .15s ease;z-index:2}
.square>.piece-sprite.black{filter:brightness(1.22) contrast(1.08) drop-shadow(2px 5px 2px #0007)}
.square>.piece-sprite.faces-right{--facing:-1}
.square.selected>.piece-sprite{filter:brightness(1.1) drop-shadow(0 0 4px #fbd38077)}
.square.computer-pulse>.piece-sprite{animation:computer-piece-pulse var(--cue-cycle) ease-in-out var(--cue-delay) 2}
@keyframes computer-piece-pulse{0%,100%{filter:brightness(1.12) drop-shadow(2px 5px 2px #0006)}50%{filter:brightness(1.45) drop-shadow(0 0 7px #ffe2a4)}}
.coordinate{position:absolute;pointer-events:none;z-index:4;font:600 12px/1 'Cormorant Garamond',Georgia,serif;opacity:.8}
.coordinate.rank{top:4px;left:5px}.coordinate.file{bottom:4px;right:5px}.light .coordinate{color:#264330}.dark .coordinate{color:#e2d5b0}
.game-panel{position:relative;align-self:stretch;display:flex;flex-direction:column;min-height:545px;padding:30px 25px 23px;border:1px solid #dab36850;border-radius:8px;background:radial-gradient(ellipse at 80% 0%,#46745b26,transparent 50%),linear-gradient(150deg,#153328,#0a1b15);box-shadow:0 20px 45px #0005,inset 0 1px #fff1}
.game-panel::before{content:'';position:absolute;inset:8px;border:1px solid #dab36814;border-radius:3px;pointer-events:none}
.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:600;color:#d2b57f;margin:0}
h2{font:600 39px/1.03 'Cormorant Garamond',Georgia,serif;margin:12px 0 8px;color:#fff0cd}
.status-detail{min-height:40px;margin:0;font-size:13px;line-height:1.55;color:#b4c0ae}
.thinking{font-size:33px}
.status-rule{display:flex;align-items:center;gap:10px;margin:18px 0}
.status-rule::before,.status-rule::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,#dfb66a66,transparent)}.status-rule::after{transform:rotate(180deg)}.status-rule span{width:6px;height:6px;transform:rotate(45deg);border:1px solid #dbb572}
.match-settings{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:#ddceb0;margin-bottom:18px}
.match-settings button{border:0;border-bottom:1px solid #d7b36780;padding:2px 0;background:none;color:#e3c588;font-size:13px}
.captured-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid #dbb77526;border-bottom:1px solid #dbb77526;padding:14px 0;margin-bottom:20px}
.mini-label{display:block;font-size:12px;color:#aaba9f}.captured{color:#ead9b7;font:22px/1.25 Georgia,serif;min-height:30px;padding-top:8px;word-break:break-word}
.move-section{display:flex;flex-direction:column;flex:1;min-height:95px}.section-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#c2ac80}
.move-list{list-style:none;min-height:55px;max-height:160px;overflow:auto;scrollbar-color:#796138 transparent;padding:0;margin:10px 0 18px;font-size:14px}
.move-list li{display:grid;grid-template-columns:30px 1fr 1fr;padding:7px 5px;border-bottom:1px solid #fff1}.move-number{color:#91a18e}.move-list li:last-child:not(.empty-moves){background:#e0c0730c;color:#ffe6a8}.move-list .empty-moves{display:block;font:italic 17px/1.4 'Cormorant Garamond',Georgia,serif;color:#a4af97;padding-left:0}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.primary-action,.secondary-action{min-height:45px;padding:10px 12px;border-radius:4px;font-size:14px;font-weight:600}
.primary-action{border:1px solid #e2bd76;color:#2b1b09;background:linear-gradient(155deg,#f1d69b,#b48742);box-shadow:inset 0 1px #fff7,0 4px 12px #0003}.primary-action:hover:not(:disabled){background:linear-gradient(155deg,#ffe3a8,#c09450)}
.secondary-action{border:1px solid #c3a36570;color:#e8d1a3;background:#d8bc6a08}.secondary-action:hover{background:#d8bc6a20}
.panel-note{font-size:12px;line-height:1.5;text-align:center;color:#a2ad97;margin:12px 0 0}
.game-dialog{width:min(490px,calc(100vw - 30px));max-height:calc(100vh - 40px);padding:30px;border:1px solid #d5b16b;border-radius:10px;color:var(--cream);background:linear-gradient(150deg,#1d3b2d,#0a1c14);box-shadow:0 30px 90px #000b}
.game-dialog::backdrop{background:#020705bd;backdrop-filter:blur(6px)}
.game-dialog h2{font-size:36px;margin:8px 0 25px}.game-dialog label{display:block;font-size:14px;margin:0 0 8px}
.game-dialog select{width:100%;min-height:46px;padding:9px;color:#f9e9c2;background:#11271d;border:1px solid #d2b56a60;border-radius:4px;font-size:14px}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.dialog-note{font-size:13px;line-height:1.6;color:#b1bea7;margin:22px 0}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px}
.promotion-options{display:flex;gap:8px}.promotion-options button{flex:1;aspect-ratio:1;min-width:0;padding:0;border:1px solid #b39a67;background:#244833;border-radius:4px}.promotion-options .piece-sprite{width:100%;height:100%}
@media(max-width:1000px){:root{--board-size:min(70vw,640px)}.game-layout{grid-template-columns:1fr;gap:30px}.table{width:100%;max-width:740px;margin:auto}.game-panel{width:min(100%,710px);min-height:0;margin:auto}.move-list{max-height:130px}.salon{padding:18px 20px 30px}.masthead{margin-bottom:18px}}
@media(max-width:600px){:root{--board-size:calc(100vw - 59px)}.salon{padding:14px 10px 24px}.brand-piece{width:40px;height:40px}.brand{gap:4px}.brand h1{font-size:24px}.brand p{font-size:10px;letter-spacing:.14em}.new-game{font-size:13px;padding:9px}.new-game span{display:none}.masthead{gap:10px;padding-bottom:14px}.table{padding:0 9px 8px}.board-space{width:calc(var(--board-size) + 26px);height:calc(var(--board-size) + 18px);margin:8px 0}.board-assembly{padding:12px;border-radius:4px;box-shadow:0 5px #2a190f,0 7px #936638,0 9px #1b110d,0 22px 35px #0009,inset 0 0 0 2px #27160e,inset 0 0 0 4px #c59b54}.board-assembly::before{inset:7px}.board-lip{border-width:1px;padding:2px}.coordinate{font-size:10px;opacity:.7}.player-bar{width:245px;min-height:52px}.table-clock{font-size:25px}.player-copy strong{font-size:21px}.player-avatar{width:40px;height:40px}.game-panel{padding:25px 22px 20px}h2{font-size:36px}.game-layout{gap:18px}.game-dialog{padding:24px}.setup-grid{grid-template-columns:1fr}.actions{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Shared online games keep the same table and controls. */
.online-panel { margin: 16px 0; padding: 14px; border: 1px solid #b89b5740; border-radius: 10px; }
.online-panel[hidden], [hidden] { display: none !important; }
.online-panel input { width: 100%; min-width: 0; margin: 9px 0; padding: 10px; color: #eee0be; background: #091710; border: 1px solid #b89b5760; border-radius: 6px; font: inherit; font-size: 12px; }
.online-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.online-actions button { flex: 1; }
#setupError { color: #e7be7e; }
#inviteCode { text-align: center; font-size: 22px; letter-spacing: 3px; font-weight: 700; }
#joinCode { width: 100%; margin: 8px 0; padding: 12px; color: #eee0be; background: #091710; border: 1px solid #b89b5760; border-radius: 6px; font: inherit; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; }
.victory-fireworks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

/* Size the table from the available screen, including both clocks and controls. */
html, body { height: 100%; min-height: 0; }
.salon { height: 100dvh; max-width: none; padding: 10px 18px 12px; display: grid; grid-template-rows: 48px minmax(0, 1fr); gap: 10px; }
.masthead { min-width: 0; margin: 0; padding: 0 0 8px; }
.brand-piece { width: 38px; height: 38px; }
.brand h1 { font-size: 29px; }
.brand p { font-size: 10px; }
.game-layout { min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(270px, 25vw, 340px); gap: 18px; align-items: start; }
.table { container-type: size; width: 100%; height: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; }
.player-bar { flex: none; width: 290px; max-width: 100%; min-height: 40px; height: 40px; padding: 3px 12px 3px 4px; gap: 8px; }
.black-player, .white-player.at-top { margin: 0; align-self: flex-end; }
.white-player, .black-player.at-bottom { margin: 0; align-self: flex-start; }
.player-avatar { width: 32px; height: 32px; }
.player-copy strong { font-size: 20px; }
.player-copy small { margin-top: 2px; font-size: 10px; }
.table-clock { font-size: 25px; }
.board-space { --board-size: min(calc(100cqh - 96px), calc(100cqw - 12px)); flex: none; width: var(--board-size); height: var(--board-size); margin: 4px auto 10px; }
.board-assembly { padding: 18px; transform: perspective(calc(var(--board-size) * 5)) rotateX(12deg); transform-origin: 50% 50%; }
.board-assembly::before { inset: 9px; }
.game-panel { width: 100%; height: 100%; min-height: 0; min-width: 0; margin: 0; padding: 16px 18px; }
.game-panel h2 { font-size: clamp(28px, 2.7vw, 36px); margin: 8px 0 6px; }
.status-detail { min-height: 0; font-size: 12px; line-height: 1.4; }
.status-rule { margin: 10px 0; }
.match-settings { margin-bottom: 8px; font-size: 12px; }
.captured-wrap { padding: 8px 0; margin-bottom: 8px; }
.captured { min-height: 24px; padding-top: 3px; font-size: 19px; }
.move-section { min-height: 0; overflow: hidden; }
.move-list { flex: 1; min-height: 0; max-height: none; margin: 6px 0 8px; font-size: 12px; }
.move-list li { padding: 4px; }
.move-list .empty-moves { font-size: 15px; }
.primary-action, .secondary-action { min-height: 34px; padding: 7px 9px; font-size: 12px; }
.panel-note { font-size: 10px; line-height: 1.35; margin-top: 7px; }
.online-panel { flex: none; margin: 6px 0 8px; padding: 9px; }
.online-panel input { padding: 5px; margin: 5px 0; }
#inviteCode { font-size: 21px; }
.game-dialog { padding: 22px; }
.game-dialog h2 { margin-bottom: 16px; }
.dialog-note { margin: 12px 0; }

@media (max-height: 680px) and (min-width: 700px) {
  .salon { padding: 6px 12px 8px; grid-template-rows: 40px minmax(0, 1fr); gap: 6px; }
  .brand h1 { font-size: 25px; }
  .game-panel { padding: 10px 14px; }
  .game-panel h2 { font-size: 26px; margin: 4px 0; }
  .eyebrow, .mini-label { font-size: 10px; }
  .status-rule { margin: 6px 0; }
  .captured-wrap { padding: 5px 0; margin-bottom: 5px; }
  .online-panel { margin: 4px 0; padding: 6px 8px; }
  #inviteFeedback { font-size: 9px; }
  .panel-note { margin-top: 4px; }
}

/* Narrow screens keep the board above a compact, two-column control panel. */
@media (max-width: 699px) {
  .salon { padding: 6px 8px 8px; grid-template-rows: 40px minmax(0, 1fr); gap: 6px; }
  .masthead { padding-bottom: 4px; gap: 8px; }
  .brand-piece { width: 30px; height: 30px; }
  .brand h1 { font-size: 23px; }
  .brand p { font-size: 8px; margin-bottom: 2px; }
  .new-game { padding: 6px 9px; font-size: 11px; }
  .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 7px; }
  .player-bar { height: 32px; min-height: 32px; width: 235px; padding: 2px 9px 2px 3px; }
  .player-avatar { width: 26px; height: 26px; }
  .player-copy strong { font-size: 17px; }
  .player-copy small { font-size: 9px; margin-top: 0; }
  .table-clock { font-size: 22px; }
  .board-space { --board-size: min(calc(100cqh - 78px), calc(100cqw - 8px)); margin: 3px auto 9px; }
  .board-assembly { padding: 11px; }
  .board-assembly::before { inset: 6px; }
  .board-lip { border-width: 1px; padding: 2px; }
  .game-panel { height: auto; padding: 9px 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; align-content: start; }
  .game-panel::before { inset: 4px; }
  #matchLabel { grid-column: 1 / -1; font-size: 9px; }
  .game-panel h2 { grid-column: 1 / -1; font-size: 25px; margin: 0; }
  .status-detail { grid-column: 1 / -1; font-size: 10px; line-height: 1.3; }
  .status-rule { display: none; }
  .match-settings { grid-column: 1 / -1; margin: 0; font-size: 11px; }
  .match-settings button { font-size: 11px; }
  .online-panel { grid-column: 1 / -1; margin: 0; padding: 5px 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
  .online-panel .mini-label { grid-column: 1; font-size: 9px; }
  #inviteCode { grid-column: 1; margin: 2px 0; padding: 3px; font-size: 17px; letter-spacing: 2px; }
  .online-actions { grid-column: 2; grid-row: 1 / 3; gap: 4px; flex-wrap: nowrap; }
  .online-actions button { padding: 6px; font-size: 10px; }
  #inviteFeedback { grid-column: 1 / -1; font-size: 9px; margin-top: 2px; }
  .captured-wrap { grid-column: 1; margin: 0; padding: 4px 0; gap: 5px; }
  .mini-label { font-size: 9px; }
  .captured { font-size: 16px; min-height: 19px; padding-top: 1px; line-height: 1; }
  .move-section { grid-column: 2; height: 42px; }
  .section-heading { font-size: 10px; }
  .move-list { margin: 2px 0 0; font-size: 10px; }
  .move-list li { padding: 2px 0; grid-template-columns: 18px 1fr 1fr; }
  .move-list .empty-moves { font-size: 11px; }
  .actions { grid-column: 1 / -1; gap: 6px; }
  .primary-action, .secondary-action { min-height: 29px; padding: 5px 7px; font-size: 11px; }
  #undoHint { grid-column: 1 / -1; margin: 0; font-size: 9px; }
  .coordinate { font-size: 9px; }
  .game-dialog { padding: 16px; }
  .game-dialog h2 { font-size: 28px; margin-bottom: 12px; }
  .setup-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .game-dialog select { min-height: 36px; padding: 6px; font-size: 12px; }
  .game-dialog label { font-size: 12px; margin-bottom: 5px; }
  .dialog-note { font-size: 11px; line-height: 1.3; margin: 10px 0; }
}

@media (max-height: 520px) and (min-width: 700px) {
  .salon { grid-template-rows: 34px minmax(0, 1fr); gap: 5px; padding: 4px 10px 6px; }
  .brand-piece { width: 28px; height: 28px; }
  .brand h1 { font-size: 23px; }
  .brand p { font-size: 8px; }
  .new-game { padding: 5px 9px; font-size: 11px; }
  .player-bar { min-height: 32px; height: 32px; }
  .player-avatar { width: 26px; height: 26px; }
  .player-copy strong { font-size: 17px; }
  .player-copy small { font-size: 9px; }
  .board-space { --board-size: min(calc(100cqh - 78px), calc(100cqw - 12px)); margin: 3px auto 9px; }
  .board-assembly { padding: 12px; }
  .game-panel { padding: 8px 12px; }
  .game-panel h2 { font-size: 23px; margin: 3px 0; }
  .status-detail { font-size: 10px; }
  .status-rule { margin: 4px 0; }
  .match-settings { margin-bottom: 3px; font-size: 11px; }
  .online-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; align-items: center; margin: 3px 0; padding: 4px 6px; }
  .online-panel .mini-label { grid-column: 1; font-size: 9px; }
  #inviteCode { grid-column: 1; font-size: 16px; letter-spacing: 2px; margin: 0; padding: 3px; }
  .online-actions { grid-column: 2; grid-row: 1 / 3; gap: 4px; flex-wrap: nowrap; }
  .online-actions button { font-size: 10px; padding: 5px; }
  #inviteFeedback { grid-column: 1 / -1; margin-top: 1px; font-size: 8px; }
  .captured-wrap { padding: 3px 0; margin-bottom: 4px; }
  .captured { font-size: 16px; min-height: 18px; padding-top: 1px; }
  .move-list { margin: 3px 0 4px; }
  .primary-action, .secondary-action { min-height: 27px; padding: 5px 7px; font-size: 10px; }
  .panel-note { font-size: 9px; margin-top: 3px; }
}
@media (max-height: 520px) {
  .game-dialog { padding: 14px; max-height: calc(100dvh - 12px); }
  .game-dialog h2 { font-size: 26px; margin: 5px 0 10px; }
  .game-dialog label { font-size: 12px; margin-bottom: 4px; }
  .game-dialog select { min-height: 34px; padding: 5px; font-size: 12px; }
  .setup-grid { grid-template-columns: 1fr 1fr; margin-top: 10px; gap: 10px; }
  .dialog-note { margin: 8px 0; font-size: 11px; line-height: 1.3; }
}