/* The game table, invitations and account share the same two palettes. */
.game-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 24px 0 20px; }
.game-head h1 { font-size: 36px; margin: 5px 0 0; }
.game-head .eyebrow { font-size: 9px; }
.game-layout { display: grid; grid-template-columns: minmax(0, min(60vh, 620px)) minmax(260px, 1fr); align-items: start; gap: 32px; margin-bottom: 20px; }
.board-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
.player-strip { height: 39px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
.player-disc { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-alt); font: 20px/1 'Segoe UI Symbol', serif; }
.board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 1 / 1; border: 3px solid #354b3b; width: 100%; }
.board-with-coordinates { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto 22px; }
.board-ranks { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); }
.board-files { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.board-with-coordinates .board { grid-column: 2; grid-row: 1; }
.board-ranks span, .board-files span { display: grid; place-items: center; color: var(--muted); font: 700 12px/1 Consolas, monospace; }
.captured-line { min-height: 29px; display: flex; align-items: center; gap: 10px; padding-left: 37px; color: var(--muted); }
.captured-label { flex: none; font-size: 11px; }
.captured-pieces { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; min-width: 0; font: 27px/1 'Segoe UI Symbol', 'DejaVu Sans', serif; }
.captured-pieces.white-piece { color: #fffdf1; -webkit-text-stroke: 1px #344437; }
.captured-pieces.black-piece { color: var(--ink); }
.square { display: grid; place-items: center; position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; padding: 0; font: clamp(27px, 4vw, 53px)/1 'Segoe UI Symbol', 'DejaVu Sans', serif; transition: filter .12s; }
.square:disabled { cursor: default; opacity: 1; }
.square:not(:disabled):hover { filter: brightness(1.12); }
.square.light { background: var(--board-light); }
.square.dark { background: var(--board-dark); }
.square.last-move::before { content: ''; position: absolute; inset: 0; background: #d1f06f66; }
.square.selected { outline: 4px solid #e9ae36; outline-offset: -4px; z-index: 1; }
.square:focus-visible { outline: 4px solid #e9ae36; outline-offset: -4px; z-index: 2; }
.square .piece { position: relative; z-index: 1; line-height: 1; }
.square.white-piece { color: #fffdf1; -webkit-text-stroke: 1.2px #344437; }
.square.black-piece { color: #18281e; -webkit-text-stroke: .5px #0d1a12; }
.game-panel { padding: 26px 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.game-panel > .eyebrow { margin-bottom: 18px; font-size: 9px; }
.game-panel h2 { font-size: 30px; line-height: 1.15; margin-bottom: 13px; }
.game-panel > p { color: var(--muted); font-size: 13px; }
.invite-box { border: 1px solid var(--line); border-left: 3px solid var(--accent-ink); background: var(--accent-soft); padding: 18px; margin: 25px 0; border-radius: 0 6px 6px 0; }
.invite-box .eyebrow { color: var(--accent-ink); font-size: 9px; margin-bottom: 10px; }
.invite-box p { font-size: 12px; margin-bottom: 17px; }
.move-log { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 25px; }
.move-log .eyebrow { margin-bottom: 11px; font-size: 9px; }
.move-log p { font: 13px/1.9 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-tip { border-top: 1px solid var(--line); padding-top: 16px; font-size: 11px !important; }
.invite-page { max-width: 620px; margin: 54px auto 20px; padding: 43px; text-align: center; border: 1px solid var(--line); border-top: 4px solid var(--accent-ink); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.invite-piece { font: 108px/1.5 'Segoe UI Symbol', serif; color: var(--accent-ink); }
.invite-page h1 { font-size: 42px; margin-bottom: 20px; }
.invite-page p { color: var(--muted); max-width: 430px; margin: 0 auto 26px; font-size: 14px; }
.invite-page .error-id { font-size: 11px; margin-top: 28px; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
.game-panel { padding: 22px; }

}
@media (max-width: 850px) {
.game-layout { grid-template-columns: minmax(0, 1fr) minmax(240px, .85fr); gap: 20px; }
.game-panel { padding: 20px; }
.game-panel h2 { font-size: 26px; }
.square { font-size: clamp(26px, 5vw, 45px); }

}
@media (max-width: 650px) {
.game-head { margin: 21px 0 17px; align-items: end; }
.game-head h1 { font-size: 29px; }
.game-layout { grid-template-columns: 1fr; gap: 23px; }
.board-wrap { width: min(100%, 65vh, 520px); margin-inline: auto; padding: 7px; border-radius: 9px; }
.player-strip { height: 35px; font-size: 11px; }
.square { font-size: clamp(25px, 8vw, 44px); }
.game-panel { padding: 23px; }
.invite-page { margin: 28px auto 0; padding: 30px 22px; }
.invite-page h1 { font-size: 35px; }
.invite-page p { font-size: 13px; }

}
.match-group-invite { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 21px; }
.match-group-invite h3 { font-size: 21px; margin: 8px 0; }
.match-group-invite > p { font-size: 11px; }
.match-group-invite a { color: var(--accent-ink); font-weight: 700; }
.match-group-controls { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.match-group-controls label { font-size: 11px; font-weight: 700; }
.match-group-controls select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); }
.match-group-controls button { padding: 9px 12px; border: 0; border-radius: 5px; background: var(--accent); color: #17221b; font-weight: 700; }
.match-group-invite .invite-link { margin-top: 12px; }
.match-group-invite .invite-link input { font-size: 10px; }

.chess-start { max-width: 640px; margin: 38px auto; padding: clamp(22px, 5vw, 40px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.chess-start > .eyebrow { display: block; margin-top: 25px; }
.chess-start h1 { font-size: clamp(32px, 6vw, 46px); margin: 12px 0 16px; }
.chess-start p { color: var(--muted); font-size: 13px; }
.chess-start fieldset { min-width: 0; border: 0; padding: 0; margin: 25px 0; }
.chess-start legend { font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.chess-mode { display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.chess-mode:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-soft); }
.chess-mode input { flex: 0 0 auto; accent-color: var(--accent-ink); }
.chess-mode strong, .chess-mode small { display: block; }
.chess-mode small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.chess-time-options label { display: block; font-size: 12px; margin: 14px 0 8px; }
.chess-time-options select { width: 100%; border: 1px solid var(--line); background: var(--surface-alt); color: var(--ink); border-radius: 6px; padding: 12px; }
.chess-time-options[hidden] { display: none; }
#chess-computer-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#chess-computer-options[hidden] { display: none; }
#chess-computer-options legend, #chess-computer-options p { grid-column: 1 / -1; }
#chess-computer-options label { display: block; font-size: 12px; margin: 8px 0; }
#chess-computer-options select { grid-row: 2; width: 100%; border: 1px solid var(--line); background: var(--surface-alt); color: var(--ink); border-radius: 6px; padding: 12px; }
.chess-clock { margin-left: auto; flex-shrink: 0; font: 700 16px/1.2 Consolas, monospace; font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: 5px; border: 1px solid var(--line); }
.chess-clock.running { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); }
.chess-clock.low { color: var(--danger); border-color: var(--danger); }
.player-strip > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chess-sound-controls { margin: 16px 0 22px; }
.chess-sound-controls button { background: var(--surface-alt); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; font-size: 12px; }
.chess-sound-controls small { display: block; color: var(--muted); font-size: 11px; margin-top: 7px; }
#chess-turn-notice { display: block; color: var(--accent-ink); font-weight: 700; font-size: 12px; margin-top: 8px; }
#chess-mode-description { font-size: 12px; }
.chess-resign { color: var(--danger); border-color: var(--danger); }
.chess-rematch .button:hover { transform: none; }
.chess-promotion { max-width: 540px; }
.chess-promotion-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.chess-promotion-choices button { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); color: var(--ink); font: inherit; cursor: pointer; }
.chess-promotion-choices button:hover, .chess-promotion-choices button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; background: var(--accent-soft); }
.chess-promotion-choices span { font: 52px/1 'Segoe UI Symbol', 'DejaVu Sans', serif; color: #18281e; -webkit-text-stroke: .5px #fffdf1; }
.chess-promotion.promote-white .chess-promotion-choices span { color: #fffdf1; -webkit-text-stroke: 1.2px #344437; }

/* Compact play layout. */

.game-layout{grid-template-columns:minmax(0,min(65svh,620px)) minmax(260px,1fr);gap:24px}.game-panel{padding:18px 22px}.game-panel>.eyebrow{display:none}.game-panel h2{font-size:26px}.move-log{margin-top:16px;padding-top:0}.match-group-invite{margin-top:16px;padding-top:0}.match-group-invite>.eyebrow{display:none}.board-tip{border:0;padding:0;font-size:14px!important}.chess-start{margin:20px auto;padding:24px}.chess-start>.eyebrow{margin-top:12px}.chess-start h1{font-size:32px;margin:8px 0 10px}.chess-start fieldset{margin:16px 0}.chess-mode{padding:12px}.chess-time-options{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.chess-time-options legend,.chess-time-options p{grid-column:1/-1}.chess-time-options label{margin:8px 0}.chess-time-options select{grid-row:2}
.catalog-game{display:flex;flex-direction:column;min-width:0}.catalog-art{height:100px;min-height:0}.catalog-piece{font-size:100px;top:-8px;right:20px}.catalog-number{top:14px;left:20px;font-size:9px}.catalog-art-label{font-size:8px;bottom:12px;left:20px}.catalog-info{padding:22px;display:flex;flex-direction:column;flex:1}.catalog-info h3{font-size:29px}.catalog-info .button{margin-top:auto}
@media(max-width:850px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(230px,.8fr);gap:16px}}
@media(max-width:650px){.game-layout{grid-template-columns:1fr}.board-wrap{width:min(100%,calc(100svh - 270px),520px)}.chess-time-options{display:block}.catalog-art{height:100px;min-height:100px}.catalog-info{padding:20px}}

/* The preferred size is capped by the available window height and column width. */
.game-layout { width: min(100%, calc(var(--chess-wrap-size, min(60svh, 620px)) + 324px)); margin-inline: auto; grid-template-columns: minmax(0, 1fr) 300px; }
.game-layout .game-panel { min-width: 0; padding: 18px; }
.game-layout .game-panel h2 { margin-bottom: 10px; }
.game-layout .game-panel > p { font-size: 12px; }
.game-layout .game-panel > p:not(:empty) { margin-bottom: 10px; }
.game-layout .chess-board-controls { grid-template-columns: auto minmax(0, 1fr); margin-block: 14px; }
.game-layout .chess-sound-controls { margin: 12px 0; }
.game-layout .move-log, .game-layout .match-group-invite { margin-top: 12px; }
.game-layout .hub-disclosure > summary { padding-block: 10px; }
.board-wrap { min-width: 0; width: 100%; margin-inline: 0; }
.game-layout .board { container-type: inline-size; }
.game-layout .square { font-size: clamp(18px, 9cqw, 72px); }
.chess-board-controls { display: grid; grid-template-columns: auto minmax(120px, 1fr); align-items: center; gap: 7px 12px; margin: 18px 0; max-width: 340px; }
.chess-board-controls label { font-size: 12px; font-weight: 700; }
.chess-board-controls select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-alt); color: var(--ink); font: inherit; font-size: 12px; }
.chess-board-controls small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.square, .chess-drag-piece { user-select: none; -webkit-user-select: none; }
.square.movable:not(:disabled) { cursor: grab; touch-action: none; }
.square .piece { pointer-events: none; }
.square.legal-target::after { content: ''; position: absolute; z-index: 2; width: 26%; height: 26%; border-radius: 50%; background: #163c2d85; pointer-events: none; }
.square.legal-capture::after { width: 86%; height: 86%; border: max(3px, .65cqw) solid #163c2d9e; background: transparent; }
.square.drag-over { box-shadow: inset 0 0 0 4px #e9ae36; }
.square.drag-over::after { background: #e9ae36b0; }
.square.legal-capture.drag-over::after { border-color: #e9ae36; background: transparent; }
.board.is-dragging, .board.is-dragging .square { cursor: grabbing; }
.square.drag-source .piece { opacity: .2; }
.chess-drag-piece { position: fixed; z-index: 100; transform: translate(-50%, -50%); pointer-events: none; font-family: 'Segoe UI Symbol', 'DejaVu Sans', serif; line-height: 1; filter: drop-shadow(0 5px 4px #10201855); }
.chess-drag-piece.white-piece { color: #fffdf1; -webkit-text-stroke: 1.2px #344437; }
.chess-drag-piece.black-piece { color: #18281e; -webkit-text-stroke: .5px #0d1a12; }
@media (max-width: 950px) {
  .game-layout { width: min(100%, var(--chess-wrap-size, 60svh)); grid-template-columns: 1fr; }
  .board-wrap { width: min(100%, var(--chess-wrap-size, 60svh)); margin-inline: auto; }
}
@media (min-width: 951px) and (max-height: 800px) {
  .game-layout .game-panel { padding-block: 12px; }
  .game-layout .chess-board-controls { margin-block: 12px; }
  .game-layout .hub-disclosure > summary { padding-block: 8px; }
  .game-layout .chess-sound-controls small { line-height: 1.45; }
}