/* 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; }
}

.record-page .tray-tools { display: flex; flex-wrap: wrap; }
.record-page .tray-tools .text-btn { font-size: 16px; padding: 8px; }
.hk-conversion { width: 100%; max-width: 440px; margin: 16px 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hk-conversion caption { text-align: left; font-weight: 700; padding: 0 0 8px; }
.hk-conversion th, .hk-conversion td { padding: 8px 12px; border-bottom: 1px solid var(--border, #d9dfd1); text-align: left; }
.hk-conversion td { text-align: right; }

/* Fixed physical seats, with wind and dealer labels that follow game state. */
.play-page .felt-board.compass-board { background:transparent; color:var(--ink); padding:0; border-radius:0; }
.compass-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.compass-toolbar > span { color:var(--muted); }
.compass-toolbar strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.compass-toolbar button { min-height:44px; padding:10px 14px; font-size:16px; }
.play-page .compass-seats { display:grid; grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr); gap:14px; align-items:stretch; margin:0 auto; max-width:700px; }
.compass-seats .seat-0 { grid-area:3/1/4/4; justify-self:center; width:52%; }
.compass-seats .seat-1 { grid-area:2/3; }
.compass-seats .seat-2 { grid-area:1/1/2/4; justify-self:center; width:52%; }
.compass-seats .seat-3 { grid-area:2/1; }
.play-page .compass-seats .player-panel { display:flex; padding:0; border:0; background:#e9eddf; border-radius:14px; overflow:hidden; min-height:118px; min-width:0; }
.seat-copy { padding:14px; flex:1; min-width:0; }
.seat-kicker { display:block; font-size:12px; font-weight:600; letter-spacing:.04em; color:#52684c; }
.play-page .compass-seats .player-name { font-size:16px; line-height:1.4; margin:4px 0 10px; overflow-wrap:anywhere; }
.play-page .compass-seats .player-score { font-size:clamp(22px,2.4vw,32px); line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.play-page .compass-seats .player-score.negative { color:#a6382b; }
.seat-wind { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:12px 8px; background:#dce5cd; min-width:62px; }
.play-page .compass-seats .wind-medal { color:#23553d; background:#f6f5e9; border:0; width:40px; height:40px; font-size:28px; }
.play-page .compass-seats .player-wind { font-size:12px; color:#23553d; margin:0; }
.play-page .compass-seats .dealer { background:#164d37; color:#fffbed; }
.play-page .compass-seats .dealer .seat-kicker { color:#e6d49b; }
.play-page .compass-seats .dealer .seat-wind { background:#0f3c2a; }
.play-page .compass-seats .dealer .player-wind { color:#f5f3dd; }
.play-page .compass-seats .dealer .wind-medal { background:#f4f1dd; color:#164d37; }
.play-page .compass-seats .dealer .player-score.negative { color:#ffb9a3; }
.compass-center { grid-area:2/2; display:flex; flex-direction:column; gap:5px; justify-content:center; align-items:center; text-align:center; }
.compass-center > span { font-size:10px; letter-spacing:.12em; color:var(--muted); }
.compass-center > b { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:#285840; color:#fff9e6; font:30px Georgia,serif; }
.compass-center > strong { font-size:12px; font-weight:600; }
.seat-order { text-align:center; color:var(--muted); font-size:14px; margin:20px 0; }
.seat-order span { color:var(--green); padding-left:8px; }
.seat-order small { display:block; font-size:12px; margin-top:4px; }
.position-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.position-preview div { padding:10px; background:#edf1e6; border-radius:8px; min-width:0; }
.position-preview span,.position-preview strong { display:block; font-size:16px; overflow-wrap:anywhere; }
.position-preview span { color:var(--muted); margin-bottom:4px; }
.form-error { color:#a6382b; }
.setup-compass { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0; }
.setup-compass .seat-0 { grid-area:3/2/4/4; }
.setup-compass .seat-1 { grid-area:2/3/3/5; }
.setup-compass .seat-2 { grid-area:1/2/2/4; }
.setup-compass .seat-3 { grid-area:2/1/3/3; }
#start-form .seat-entry { min-width:0; margin:0; font-size:16px; }
.seat-entry input { min-width:0; padding:10px; }
.seat-entry small { display:block; color:var(--green); font-size:12px; margin-top:5px; }
.record-page .compass-winners { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.compass-winners .seat-0 { grid-area:3/2/4/4; }
.compass-winners .seat-1 { grid-area:2/3/3/5; }
.compass-winners .seat-2 { grid-area:1/2/2/4; }
.compass-winners .seat-3 { grid-area:2/1/3/3; }
.record-page .compass-winners .winner-choice { flex-direction:row; padding:12px; min-width:0; }
.record-page .compass-winners .winner-name { font-size:16px; overflow-wrap:anywhere; }
.record-page .winner-choice small { font-size:12px; }
/* Touch hover must never look like a checked option. */
.record-page .flower { position:relative; transition:background-color .12s, border-color .12s; }
.record-page .flower:not(.selected):hover { background:var(--paper); border-color:var(--line); }
.record-page .flower.selected { background:#285840; border-color:#285840; color:#fffbed; }
.record-page .flower.selected > span { color:#fffbed; }
.selection-check { position:absolute; top:4px; right:4px; display:none; width:18px; height:18px; align-items:center; justify-content:center; border-radius:50%; background:#fffbed; color:#285840; }
.selection-check .icon { width:14px; height:14px; }
.flower.selected .selection-check { display:flex; }
.record-page .check-row.is-selected { background:#e3ecd6; box-shadow:inset 3px 0 #285840; padding-left:10px; }
.record-page .check-row input { accent-color:#285840; flex-shrink:0; }
.record-page .check-row strong,.record-page .method-choice strong { font-size:16px; }
.record-page .check-row small,.record-page .method-choice small { font-size:13px; }
@media(max-width:600px) {
 .play-page .compass-seats { grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); gap:8px; }
 .play-page .compass-seats .player-panel { flex-direction:column-reverse; border-radius:10px; min-height:0; }
 .compass-seats .seat-0,.compass-seats .seat-2 { width:50%; }
 .seat-wind { flex-direction:row; gap:6px; padding:6px 8px; min-width:0; }
 .play-page .compass-seats .wind-medal { width:28px; height:28px; font-size:23px; }
 .seat-copy { padding:10px; }
 .play-page .compass-seats .player-name { margin:3px 0 8px; }
 .play-page .compass-seats .player-score { font-size:24px; }
 .compass-center > b { width:42px; height:42px; font-size:27px; }
 .compass-center > strong { font-size:11px; }
 .record-page .compass-winners .winner-choice { padding:10px 8px; gap:8px; }
 .record-page .compass-winners .winner-name { font-size:16px; }
 .setup-compass { gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .record-page .flower { transition:none; }
}