/* Customer play surfaces: local to the table, setup and recording flow. */
.record-page { max-width: 1240px; }
.record-page .page-heading h1 { font-size: clamp(24px, 2.6vw, 32px); }
.record-page .record-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
.record-page .step-title { margin-bottom: 16px; gap: 10px; }
.record-page .step-title > span { background: var(--green); color: #fffdf4; border: 0; width: 28px; height: 28px; font-weight: 600; }
.record-page .step-title h2 { font-size: 18px; }
.record-page .winner-grid { gap: 10px; margin-bottom: 22px; }
.record-page .winner-choice { position: relative; border: 0; box-shadow: inset 0 0 0 1px #d9dfd2; padding: 16px 8px; gap: 10px; background: #fffdf7; transition: background-color .15s, box-shadow .15s; }
.record-page .winner-choice.selected { background: #e7eedc; box-shadow: inset 0 0 0 2px #295b43; }
.winner-seat { display: grid; place-items: center; width: 40px; height: 46px; border-radius: 7px; color: #285840; background: #f1f0e6; font: 28px Georgia,serif; box-shadow: 0 3px 0 #d5deca; }
.selected .winner-seat { background: #285840; color: #fff8de; box-shadow: 0 3px 0 #173d2c; }
.winner-name { display: block; font-weight: 600; line-height: 1.4; }
.winner-name small { display: block; color: #667264; font-weight: 400; font-size: 12px; margin-top: 4px; }
.winner-check { position: absolute; top: 8px; right: 8px; width: 17px; height: 17px; border-radius: 50%; background: #285840; color: white; opacity: 0; }
.winner-check .icon { width: 13px; height: 13px; }
.selected .winner-check { opacity: 1; }
.win-method { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.win-method legend { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.method-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.method-choice { position: relative; margin: 0; padding: 14px; display: flex; align-items: center; gap: 12px; background: #fffdf7; border-radius: 10px; box-shadow: inset 0 0 0 1px #d9dfd2; cursor: pointer; }
.method-choice:has(input:checked) { background: #e7eedc; box-shadow: inset 0 0 0 2px #295b43; }
.method-choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.method-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.method-choice strong { display: block; font-size: 14px; font-weight: 600; }
.method-choice small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: #667264; }
.method-art { display: flex; align-items: center; color: #2b6248; gap: 3px; flex-shrink: 0; }
.method-art .tile { width: 24px; min-width: 24px; height: 34px; min-height: 34px; border-radius: 4px; pointer-events: none; }
.method-art > .icon { width: 22px; height: 22px; }
.discarder-field { max-width: 340px; }
.discarder-field label { margin-bottom: 0; font-size: 14px; }
.record-page .hand-tray { background: #1e4937; border: 0; padding: 16px; border-radius: 12px; box-shadow: inset 0 2px 8px #0b281d33; }
.tray-caption { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #e3ead9; margin-bottom: 14px; }
.tray-caption > .icon { width: 16px; height: 16px; }
#winning-label { color: #ebcc83; margin-left: auto; font-size: 11px; }
.record-page .tray-placeholder { color: #d0deca; padding: 8px 0; font-size: 14px; }
.empty-tiles { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }
.empty-tiles i { width: 25px; height: 34px; border: 1px solid #a5bda16b; border-radius: 4px; background: #a5bda112; transform: rotate(-8deg); }
.empty-tiles i:nth-child(2) { transform: translateY(-3px); }
.empty-tiles i:last-child { transform: rotate(8deg); }
.record-page .tray-tools { border-color: #ffffff26; gap: 4px; }
.record-page .tray-tools .text-btn { color: #f4efdf; font-size: 13px; padding: 8px 4px; min-height: 44px; }
.record-page .tray-tools .text-btn.selected { color: #ffdf8c; background: #ffffff10; }
.record-page .tray-tools .danger { color: #e6c1b3; }
.record-page .tray-tools .icon { width: 16px; height: 16px; }
.record-page .meld small { color: #d0deca; }
.record-page .meld .icon-btn { color: #f4efdf; }
.record-page .choosing-winning { outline: 2px solid var(--gold); outline-offset: 3px; }
.record-page #tile-help { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; margin: 12px 0 20px; }
#tile-help .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; }
.record-page #tile-count { font-size: 13px; background: #e5e9dd; color: #4b624c; padding: 5px 8px; border-radius: 6px; }
.record-page #tile-count.complete { background: #285840; color: #fffdf4; }
.record-page .mode-field { max-width: none; font-size: 14px; margin-bottom: 8px; }
.mode-example { display: flex; align-items: center; gap: 12px; margin: 10px 0 22px; color: #667264; font-size: 12px; line-height: 1.5; min-height: 38px; }
.mode-mini { display: flex; gap: 3px; flex-shrink: 0; }
.mode-mini .tile { width: 22px; min-width: 22px; height: 30px; min-height: 30px; border-radius: 3px; border-bottom-width: 2px; pointer-events: none; }
.record-page .tile-group-label { font-size: 13px; font-weight: 600; color: #47604d; }
.record-page .tile-row .tile { max-width: 62px; }
.record-page .check-row { align-items: center; gap: 12px; padding: 14px 8px; border-radius: 8px; }
.record-page .check-row:has(input:checked) { background: #e7eedc; }
.record-page .check-row strong { font-size: 14px; font-weight: 600; }
.record-page .check-row small { font-size: 12px; line-height: 1.6; margin-top: 3px; }
.condition-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; color: #52704f; background: #e8ecdf; border-radius: 8px; }
.condition-icon .icon { width: 19px; height: 19px; }
.record-page .score-preview { border: 0; border-radius: 14px; background: #fffdf7; box-shadow: 0 4px 24px #173d2c0c; padding: 24px; }
.preview-heading { display: flex; align-items: center; gap: 10px; color: #285840; }
.preview-heading > .icon { color: #997127; width: 22px; height: 22px; }
.preview-heading h2 { margin: 0; font-size: 18px; }
.preview-player { color: #687464; font-size: 13px; line-height: 1.6; margin: 10px 0 20px; overflow-wrap: anywhere; }
.hand-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: #edf1e5; padding: 16px; border-radius: 8px; }
.hand-progress > span { font-size: 13px; color: #52654d; }
.hand-progress strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.hand-progress small { font-size: 13px; font-weight: 400; }
.hand-progress progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 8px; overflow: hidden; accent-color: #285840; background: #d5deca; }
.hand-progress progress::-webkit-progress-bar { background: #d5deca; }
.hand-progress progress::-webkit-progress-value { background: #285840; }
.record-page .preview-empty { border: 0; padding-top: 26px; margin-bottom: 20px; }
.record-page .preview-empty > .icon { color: #6d8867; }
.record-page .preview-empty p { font-size: 13px; line-height: 1.6; }
.record-page .score-preview > .helper { font-size: 12px; line-height: 1.6; }
.record-page .preview-total { color: #285840; font-size: 64px; border-bottom: 1px solid #e3e8db; padding-bottom: 16px; }
.record-page .validity { font-size: 13px; align-items: flex-start; line-height: 1.6; }
.record-page .validity .icon { flex-shrink: 0; margin-top: 2px; }
.record-page .score-line { font-size: 14px; }
.record-page .score-line b { color: #285840; }
.record-page .payout-heading { font-size: 13px; }
.record-page .payout-list > div { font-size: 14px; align-items: center; }
.record-page .payout-list > div > span { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.record-page .payout-list .icon { width: 16px; height: 16px; flex-shrink: 0; }
.record-page .payout-list b { background: #edf1e5; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.record-page .payout-list b.positive { color: #285840; background: #e3edda; }
.record-page .payout-list b.negative { color: #a43c2d; background: #f5e8e0; }
.play-page .felt-board { background: #1e4937; border: 0; border-radius: 16px; }
.play-page .player-panel { background: #ffffff08; border: 1px solid #ffffff12; border-radius: 10px; }
.play-page .player-panel.dealer { background: #e7eedc; border-color: transparent; color: #244332; }
.play-page .player-panel.dealer .player-wind { color: #5e725a; }
.play-page .player-panel.dealer .wind-medal { background: #285840; color: #fff8df; }
.play-page .player-name { font-weight: 600; }
.play-page .player-score { font-size: clamp(32px,4vw,52px); font-weight: 700; }
.play-page .player-score small { font: 400 12px "Plus Jakarta Sans",sans-serif; margin-left: 7px; opacity: .7; }
.play-page .board-caption { color: #b1c7a4; }
.play-page .game-actions > .button { flex: 1; }
.play-page .session-info h3 { display: flex; align-items: center; gap: 8px; }
.play-page .section-title h2 { display: flex; align-items: center; gap: 8px; }
#start-form .players-form label { position: relative; font-size: 14px; }
#start-form .seat-number { color: #fff8df; background: #285840; border: 0; }
#start-form .rule-summary { font-size: 13px; line-height: 1.7; }
@media(max-width:1000px) {
 .record-page .record-layout { grid-template-columns: minmax(0,1fr) 300px; gap: 24px; }
 .method-choice { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media(max-width:800px) {
 .record-page .record-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
 .record-page .score-preview { position: static; }
 .method-choice { flex-direction: row; align-items: center; }
}
@media(max-width:600px) {
 .record-page { padding-top: 18px; }
 .record-page .page-heading { margin-bottom: 24px; }
 .record-page .winner-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 .record-page .winner-choice { flex-direction: row; text-align: left; padding: 12px; gap: 10px; justify-content: flex-start; }
 .record-page .winner-name { font-size: 13px; padding-right: 5px; }
 .winner-seat { width: 30px; height: 36px; font-size: 24px; flex-shrink: 0; }
 .winner-check { top: 6px; right: 6px; width: 14px; height: 14px; }
 .winner-check .icon { width: 11px; height: 11px; }
 .method-choice { padding: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
 .method-choice strong { font-size: 13px; }
 .method-choice small { font-size: 11px; }
 .method-art { height: 34px; }
 .record-page .step-title h2 { font-size: 16px; }
 .record-page .hand-tray { padding: 12px; }
 .record-page .tile-row { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
 .record-page .score-preview { padding: 20px; }
 .record-page .check-row { padding-left: 0; padding-right: 0; gap: 10px; }
 .record-page .condition-icon { width: 30px; height: 30px; }
 .play-page .game-actions > .button { font-size: 14px; }
 .play-page .player-name { font-size: 15px; }
}
@media(max-width:359px) {
 .record-page .tile-row,.record-page .tile-group:last-child .tile-row { grid-template-columns: repeat(5,minmax(0,1fr)); }
 .record-page .winner-choice { padding: 10px 8px; gap: 7px; }
 .winner-name small { font-size: 11px; }
 .record-page .step-title { gap: 7px; }
 .record-page .step-title h2 { font-size: 14px; }
 .record-page .step-title > span { width: 24px; height: 24px; }
 #winning-label { font-size: 10px; }
}

/* A redeemed customer access stays with its selected table. */
.table-binding-note { display:flex; align-items:center; gap:10px; margin:0 0 18px; color:var(--muted); font-size:16px; }
.table-binding-note > .icon { flex-shrink:0; }
.table-binding-note > span { flex:1; min-width:0; }
.table-binding-note a { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-height:44px; font-weight:600; }
.table-card.table-locked:disabled { opacity:1; color:var(--muted); background:transparent; cursor:not-allowed; transform:none; box-shadow:none; }
.table-locked .table-name { color:var(--muted); }
.table-locked .table-card-bottom > span:last-child { display:inline-flex; align-items:center; gap:6px; }
@media (max-width:600px) {
  .table-binding-note { flex-wrap:wrap; align-items:flex-start; }
  .table-binding-note > span { flex-basis:calc(100% - 34px); }
  .table-binding-note a { margin-left:30px; }
}