:root {
  --ink: #fff9e9;
  --muted: #d3dcc8;
  --faint: #aabca3;
  --bg: #153c20;
  --panel: #173c25;
  --panel-2: #214a2d;
  --line: #527044;
  --felt: #2b7829;
  --felt-deep: #205e27;
  --wood: #8b371c;
  --blue: #b9e8ed;
  --green: #f5ce57;
  --amber: #ffd05b;
  --red: #f49a80;
  --radius: 12px;
  --wood-grain: repeating-linear-gradient(2deg, #48150c16 0 1px, transparent 1px 5px), linear-gradient(180deg, #a84b28, #7e2d17);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-width: 320px; margin: 0; color: var(--ink); background: radial-gradient(ellipse at 50% 0, #2b6334, #153c20 75%); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.35; overflow-x: hidden; }
button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid #c9a05a33; background: #12381e; position: relative; z-index: 20; }
.brand-block h1, h2, h3, p { margin-top: 0; }
.brand-block h1 { margin-bottom: 2px; font-size: clamp(19px, 2vw, 25px); letter-spacing: -.035em; }
.subhead { margin: 0; color: var(--muted); font-size: 11px; }
.eyebrow { margin: 0 0 4px; color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.header-actions, .toolbar-actions, .you-line, .campaign-header, .coach-heading, .modal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.header-actions { justify-content: flex-end; }
.save-state { color: var(--muted); font-size: 11px; white-space: nowrap; }
.button { min-width: 44px; min-height: 44px; padding: 9px 13px; color: var(--ink); border: 1px solid #e5d29b3b; border-radius: 7px; background: #315d33; font-size: 13px; font-weight: 750; cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.button:hover { background: #426b3e; }
.button:active { transform: translateY(1px); }
.button:focus-visible, select:focus-visible, .hand-tile:focus-visible, .board-endpoint:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.button.secondary { background: #1a422b; border-color: #8caa6b55; }
.button.primary { background: #dfad39; border-color: #ffe291; color: #35210c; box-shadow: 0 2px 0 #93682c; }
.button.active { background: #936d22; border-color: var(--green); }
.button.warn { background: #9b7127; border-color: #ffe29166; }
.button.compact { min-height: 40px; padding: 7px 10px; font-size: 12px; }
.mobile-play-control { display: inline-flex; align-items: center; justify-content: center; }
.app-shell { width: min(1080px, 100%); margin: 0 auto; padding: 18px; }
.game-card, .campaign-card { border: 1px solid #bd925759; border-radius: var(--radius); background: #1c4828; box-shadow: 0 14px 40px #08200c55; }
.game-card { overflow: hidden; }
.campaign-card { margin-top: 12px; padding: 16px; }
.campaign-header { justify-content: space-between; }
.campaign-header h2 { margin: 0; font-size: 18px; }
.game-toolbar { display: flex; flex-direction: column; gap: 0; background: var(--wood-grain); border-bottom: 3px solid #e2b569; box-shadow: 0 3px 4px #14270d88; position: relative; z-index: 8; }
.toolbar-actions { width: 100%; min-height: 38px; padding: 0 10px; gap: 6px; background: #4b1d1238; border-bottom: 1px solid #471c1644; flex-wrap: nowrap; }
.table-title { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.table-title-name { font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.round-badge { color: #f0d8b3; font-size: 10px; font-weight: 600; white-space: nowrap; }
.toolbar-actions .button { min-height: 32px; background: #51271960; border-color: #eebd7a55; font-size: 10px; padding: 4px 9px; }
.score-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.score-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 16px 8px; border-top: 3px solid transparent; border-right: 1px solid #4b1c1244; position: relative; text-shadow: 0 1px 2px #39140d; }
.score-chip:last-child { border-right: 0; }
.score-chip.current { border-top-color: #ffdf69; background: linear-gradient(180deg, #efbc5534, #efbc5505); }
.score-copy { min-width: 0; }
.score-chip .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f2ddc3; font-size: 11px; font-weight: 650; }
.score-chip .points { display: block; font-size: 23px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-chip.current .points, .score-chip.current .name { color: #ffe06e; }
.player-avatar { display: block; flex: 0 0 auto; width: 38px; height: 38px; border: 2px solid #f0e1bc; border-radius: 8px; box-shadow: 0 2px 3px #33160e66; overflow: hidden; }
.player-avatar svg { display: block; width: 100%; height: 100%; }
.score-chip.current .player-avatar { border-color: #ffe06e; }
.table-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 38px minmax(0, 1fr) 110px; grid-template-areas: "left top right" "board board board" "you you you"; gap: 0; height: clamp(530px, calc(100svh - 255px), 850px); min-height: 0; padding: 0 12px; border: 0; background: radial-gradient(ellipse at 42% 25%, #307f2b22, transparent 70%), repeating-linear-gradient(83deg, #00000003 0 1px, transparent 1px 3px), linear-gradient(150deg, var(--felt), var(--felt-deep)); box-shadow: inset 0 0 44px #15390b22; overflow: hidden; }
.player-seat { z-index: 5; min-width: 0; }
.seat-top, .seat-left, .seat-right { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 3px; align-self: stretch; text-align: center; }
.seat-top { grid-area: top; }
.seat-left { grid-area: left; }
.seat-right { grid-area: right; }
.seat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 68px; color: #d9e6c9; font-size: 9px; font-weight: 600; }
.player-seat.current .seat-name { color: #ffe07c; }
.hand-backs { display: flex; justify-content: center; gap: 2px; min-height: 23px; overflow: hidden; }
.back-tile { width: 10px; height: 22px; flex: 0 0 auto; border: 1px solid #d4cbb1; border-radius: 2px; background: linear-gradient(100deg, #fffdf1, #e5e0cd); box-shadow: 0 2px 0 #89836a, 0 3px 3px #203a2266; }
.tile-count { min-width: 12px; color: #d8e3cd; font-size: 9px; }
.seat-note { display: none; }
.seat-you { grid-area: you; align-self: stretch; position: relative; margin: 0 -12px; padding: 7px 16px 4px; background: linear-gradient(180deg, #143b2388, #163c2299); border-top: 1px solid #9fb27244; }
.seat-you::after { content: ""; position: absolute; z-index: 2; pointer-events: none; left: 0; right: 0; bottom: 0; height: 8px; background: var(--wood-grain); border-top: 1px solid #dda75b; box-shadow: 0 -2px 3px #18391c55; }
.you-line { justify-content: space-between; gap: 4px; }
.you-line strong { color: #e6edda; font-size: 10px; font-weight: 650; }
.seat-score { display: none; }
.turn-label { color: #e1ead4; font-size: 10px; }
.seat-you.current .turn-label { color: #ffdf79; font-weight: 750; }
.seat-you.current .turn-label::before { content: ""; display: inline-block; vertical-align: 1px; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #ffda66; box-shadow: 0 0 7px #ffdf7988; }
.board-surface { grid-area: board; position: relative; min-width: 0; min-height: 0; border: 0; background: transparent; overflow: hidden; overscroll-behavior: contain; touch-action: none; }
.board-connections, .board-tiles, .board-endpoints { position: absolute; inset: 0; width: var(--board-content-width, 100%); height: var(--board-content-height, 100%); min-width: var(--board-content-width, 100%); min-height: var(--board-content-height, 100%); }
.board-connections { z-index: 1; overflow: visible; visibility: hidden; }
.board-tiles { z-index: 3; }
.board-endpoints { z-index: 4; }
.board-nav { position: sticky; top: 8px; left: 8px; z-index: 8; display: block; margin: 8px; }
.board-surface:not(.scrollable) .board-nav { visibility: hidden; pointer-events: none; }
.board-edge { fill: none; stroke: transparent; }
.board-empty { position: absolute; left: 50%; top: 47%; z-index: 2; width: min(280px, 80%); transform: translate(-50%, -50%); color: #d0e4b9a3; text-align: center; font-size: 12px; pointer-events: none; }
.board-surface.has-board .board-empty { display: none; }
.layout-note { position: absolute; left: 50%; bottom: 29px; z-index: 6; transform: translateX(-50%); color: var(--amber); font-size: 9px; pointer-events: none; text-align: center; }
.table-readout { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.table-readout span { color: #d7e5c4; font-size: 10px; font-weight: 700; }
.table-readout strong { color: #fff5d4; font-size: 17px; font-weight: 800; }
.table-readout small { color: #c1d5b1; font-size: 9px; }
.board-status { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; justify-content: center; align-items: center; min-height: 28px; padding: 3px 8px; background: #173f231c; }
.board-status small { margin-left: 8px; padding-left: 12px; border-left: 1px solid #d2d9a777; }
.table-feedback { position: absolute; left: 50%; top: 14%; z-index: 7; display: grid; justify-items: center; gap: 4px; min-width: 105px; padding: 9px 12px; transform: translateX(-50%); border: 1px solid #f7d17777; border-radius: 10px; background: #233d20e8; box-shadow: 0 8px 22px #112a1155; pointer-events: none; animation: feedback-in .18s ease-out both; }
.table-feedback-points { color: var(--amber); font-size: clamp(28px, 7vw, 40px); font-weight: 950; line-height: 1; text-shadow: 1px 2px #653b10; }
.table-feedback-label { color: #f4edce; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.table-feedback .domino { --tile-long: 64px; --tile-short: 32px; }
.board-tile.recent .domino { filter: drop-shadow(0 0 4px #ffdc71); }
@keyframes feedback-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.domino { --tile-long: 56px; --tile-short: 28px; display: block; width: var(--tile-long); height: var(--tile-short); flex: 0 0 auto; border-radius: 4px; box-shadow: 0 2px 2px #20361d70; user-select: none; }
.domino.double { border-color: #d2d9d5; }
.tile-face { display: block; width: 100%; height: 100%; overflow: visible; }
.board-tile { position: absolute; transform: translate(-50%, -50%) rotate(var(--rotation, 0deg)); transform-origin: center; }
.board-tile .domino, .hand-tile .domino { --tile-long: inherit; --tile-short: inherit; }
.hand-rack { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 3px; width: min(490px, 100%); height: 78px; padding: 1px 0 3px; margin: 0 auto; overflow: visible; }
.hand-tile { display: grid; place-items: center; position: relative; width: 100%; min-width: 0; height: 76px; padding: 0; border: 0; border-radius: 7px; background: transparent; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .14s ease; }
.hand-tile .domino { pointer-events: none; --tile-long: 68px; --tile-short: 34px; transform: rotate(90deg); box-shadow: 2px 0 2px #122b1555; }
.hand-tile:hover, .hand-tile[aria-pressed="true"] { transform: translateY(-5px); }
/* Flat local fidget: keep the original rack footprint and input geometry. */
#yourHand.fidget-eligible .hand-tile { touch-action: pan-y; }
#yourHand .hand-tile.is-fidgeting { overflow: hidden; isolation: isolate; transform: none; }
#yourHand .hand-tile.is-fidgeting .domino { pointer-events: none; transition: none; will-change: transform; }

.hand-tile[aria-pressed="true"] .domino { outline: 2px solid #ffe174; outline-offset: 2px; filter: drop-shadow(0 0 5px #f5c64a99); }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); opacity: .96; filter: drop-shadow(0 8px 12px #10271488); }
.drag-ghost .domino { --tile-long: 64px; --tile-short: 32px; }
.board-endpoint { position: absolute; width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); border: 2px dashed transparent; border-radius: 9px; background: transparent; opacity: 0; cursor: pointer; pointer-events: none; }
.board-endpoint.legal { opacity: 1; pointer-events: auto; border-color: #ffe58b; background: #f9d75a26; box-shadow: 0 0 0 3px #f9d75a0d; }
.board-endpoint.legal::after { content: "+"; display: block; margin: auto; color: #ffe99b; font-size: 24px; font-weight: 400; line-height: 1; }
.board-endpoint.drop-hover { border-color: #fff3b4; background: #f5d15a66; box-shadow: 0 0 0 5px #f2b84b33, 0 0 14px #f2b84b55; }
.board-surface.drop-open { box-shadow: inset 0 0 0 2px #ffdb7388; }
.move-area { min-height: 40px; padding: 6px 10px; text-align: center; background: #173e24; }
.move-instruction { min-height: 13px; margin: 0; color: #d4dfc6; font-size: 10px; }
.move-actions { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.move-actions:not(:empty) { margin-top: 6px; }
.move-actions .button { min-height: 44px; padding: 6px 10px; font-size: 11px; }
.target-options { display: flex; gap: 6px; }
.match-tools { padding: 12px 0 6px; }
.coach-panel { margin-top: 10px; padding: 14px; border: 1px solid #27658a; border-left: 4px solid var(--blue); border-radius: 13px; background: #0b3040; }
.coach-heading { justify-content: space-between; }
.coach-heading h2 { margin: 0; font-size: 17px; }
.coach-state { padding: 5px 8px; border-radius: 999px; color: #b7f3ce; background: #1a6b40; font-size: 11px; font-weight: 850; }
.coach-message { margin: 11px 0; padding: 10px; border-radius: 9px; background: #092b38; font-size: 13px; }
.coach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.coach-grid h3 { margin: 0 0 7px; font-size: 13px; }
.intelligence-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.intelligence-table td { padding: 5px 3px; border-bottom: 1px solid #37647888; }
.intelligence-table td:last-child { color: var(--muted); text-align: right; }
.checklist { margin: 0; padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }

.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: #000b; }
.result-modal { width: min(600px, 100%); max-height: min(90svh, 720px); overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(180deg, #10291f, #0b1c15); box-shadow: 0 24px 80px #000a; }
.result-modal h2 { margin: 0 0 14px; font-size: 24px; }
.result-modal p { color: var(--muted); }
.result-summary { display: grid; gap: 8px; margin: 12px 0 18px; }
.result-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #0b2118; font-size: 13px; }
.result-row strong { color: var(--green); }
.replay-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.replay-section h3 { margin: 0 0 8px; font-size: 14px; }
.replay-list { max-height: 230px; margin: 0; padding-left: 24px; overflow: auto; color: var(--muted); font-size: 12px; line-height: 1.55; }
.replay-list li { padding: 3px 0; }
.replay-list strong { color: var(--ink); }
.modal-actions { justify-content: flex-end; margin-top: 18px; }
.settings-modal { max-width: 480px; }
.lesson-modal { max-width: 680px; }
.lesson-prompt { margin: 14px 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #0b2118; font-size: 14px; }
.lesson-choices { display: grid; gap: 8px; }
.lesson-choice { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #173328; text-align: left; cursor: pointer; }
.lesson-choice:hover, .lesson-choice:focus-visible { border-color: var(--blue); background: #1a4637; }
.lesson-choice.correct { border-color: var(--green); background: #155536; }
.lesson-choice.incorrect { border-color: var(--red); background: #522622; }
.lesson-feedback { margin-top: 12px; }
.lesson-feedback.good { border-left-color: var(--green); background: #143b24; }
.lesson-feedback.warn { border-left-color: var(--amber); background: #4b3412; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.setting-row select { min-height: 40px; padding: 7px 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.checkbox-row input { width: 22px; height: 22px; accent-color: var(--green); }
.setting-help { margin: 14px 0 8px; color: var(--muted); font-size: 11px; }
.settings-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.file-button { display: inline-flex; align-items: center; }


[hidden] { display: none !important; }
@media (max-width: 760px) {
  .app-header { display: none; }
  .in-play .app-header { display: none; }
  .app-shell { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .game-card { border: 0; border-radius: 0; box-shadow: none; }
  .toolbar-actions { min-height: 36px; padding: 0 9px; gap: 5px; }
  .table-title { display: block; }
  .table-title-name { display: block; font-size: 9px; letter-spacing: .13em; line-height: 1.3; }
  .round-badge { display: block; font-size: 8px; line-height: 1.4; }
  .in-play .mobile-play-control { display: inline-flex; min-height: 44px; }
  .toolbar-actions .button { min-height: 44px; }
  .score-chip { padding: 7px 7px 7px; gap: 6px; }
  .player-avatar { width: 27px; height: 29px; border-width: 1px; border-radius: 5px; }
  .score-chip .name { font-size: 9px; }
  .score-chip .points { font-size: 19px; }
  .table-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 34px minmax(0, 1fr) 110px; height: max(340px, calc(100svh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); padding: 0 5px; }
  .seat-top, .seat-left, .seat-right { gap: 3px; }
  .seat-name { font-size: 8px; max-width: 33px; }
  .hand-backs { gap: 1px; min-height: 20px; }
  .back-tile { width: 7px; height: 18px; }
  .tile-count { min-width: 9px; font-size: 8px; }
  .seat-you { margin: 0 -5px; padding: 7px 14px 4px; }
  .in-play .board-surface { overflow: hidden; touch-action: none; }
  .coach-grid { grid-template-columns: 1fr; gap: 12px; }
  .coach-panel { margin: 10px; }
  /* Reserve one action row even before selection: Pass stays in view and
     selecting a tile never makes the board jump to a different layout. */
  .move-area { min-height: 76px; padding: 5px 9px; }
  .move-instruction { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .move-actions { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; padding: 0 0 3px; }
  .move-actions .button { flex: 0 0 auto; }
  .layout-note { display: none; }
  .campaign-card { margin: 10px; }
}
@media (max-width: 350px) {
  .score-chip { padding: 7px 5px; gap: 4px; }
  .player-avatar { width: 22px; height: 26px; }
  .score-chip .name { font-size: 8px; }
  .score-chip .points { font-size: 18px; }
  .seat-you { padding-left: 6px; padding-right: 6px; }
  .hand-rack { gap: 0; }
  .hand-tile .domino { --tile-long: 62px; --tile-short: 31px; }
  .seat-name { max-width: 27px; }
  .back-tile { width: 6px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .app-header { display: none; }
  .app-shell { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Private multiplayer controls live in a sheet; the established table stays intact. */
.room-field { display: grid; gap: 6px; margin: 12px 0; color: var(--muted); font-size: 12px; }
.room-field input, .room-field select { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font: inherit; font-size: 16px; }
.room-field input:focus-visible, .room-field select:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.room-field input::placeholder { color: #bbc9ae; }
.room-create-row { display: flex; align-items: flex-end; gap: 10px; }
.room-create-row .room-field { flex: 0 0 90px; margin: 6px 0 0; }
.room-create-row .button { flex: 1; }
.room-divider { margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.room-code-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.room-code-row strong { color: var(--amber); font: 700 17px ui-monospace, monospace; letter-spacing: .07em; }
.room-members { display: grid; gap: 7px; list-style: none; margin: 15px 0; padding: 0; }
.room-members li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; }
.room-members li span:first-child { overflow-wrap: anywhere; }
.room-members li span:last-child { color: var(--muted); text-align: right; }
.voice-panel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.voice-panel h3 { font-size: 16px; margin-bottom: 5px; }
.voice-optional { font-size: 11px; font-weight: 500; color: var(--muted); }
.voice-participants { display: grid; gap: 7px; list-style: none; padding: 0; margin: 12px 0; }
.voice-participants li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.voice-participants .voice-person { min-width: 0; overflow-wrap: anywhere; }
.voice-speaking::before { content: '●'; display: inline-block; margin-right: 6px; color: var(--green); }
.room-recovery { margin-top: 16px; padding: 12px; border: 1px solid var(--amber); border-radius: 8px; }
.room-recovery p { margin: 0 0 10px; font-size: 12px; }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
#tableTalkQuickButton.voice-live { border-color: var(--green); color: var(--green); }
#roomStatus[data-connection="offline"], #roomStatus[data-connection="unavailable"], #roomStatus[data-connection="error"] { color: var(--amber); }
@media (max-width: 380px) { .toolbar-actions { gap: 3px; } .toolbar-actions .button { padding-left: 6px; padding-right: 6px; font-size: 9px; } }

.guest-welcome { margin: 16px 0 4px; color: var(--ink); font-size: 15px; font-weight: 600; }
.room-signin { display: inline-flex; align-items: center; text-decoration: none; margin-top: 6px; }
#roomIdentityHelp, #roomSessionStatus { line-height: 1.5; }

/* Friends beta: keep the familiar table, make its social state unmistakable. */
.play-mode-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 6px 13px; border-bottom: 1px solid #b3c99033; background: #123b25; }
.play-mode-strip > span { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.play-mode-strip strong { font-size: 11px; white-space: nowrap; }
.play-mode-strip small { font-size: 10px; color: #c1d2b7; }
.play-mode-strip[data-mode="friends"] strong::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #b5ed91; }
.play-mode-strip[data-mode="interrupted"], .play-mode-strip[data-mode="paused"] { background: #55401b; }
.mode-action { flex: 0 0 auto; border: 0; background: none; color: #ffe49b; min-height: 36px; padding: 5px 0 5px 8px; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.mode-action:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.table-talk-modal { width: min(680px, 100%); padding: 0; border-color: #829361; background: #102b20; scrollbar-gutter: stable; }
.friends-sheet-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; background: #143729; border-bottom: 1px solid #78945355; }
.friends-sheet-header h2 { margin: 0; font-size: clamp(21px, 4vw, 28px); letter-spacing: -.04em; }
.friends-sheet-header .button { flex-shrink: 0; font-size: 11px; min-height: 44px; }
.friends-sheet-body { padding: 18px 22px 20px; }
.room-status { margin: 0 0 18px; line-height: 1.5; font-size: 13px; overflow-wrap: anywhere; }
.friends-intro { margin: 22px 0; }
.friends-intro .guest-welcome { font-size: 28px; font-weight: 800; color: #fff6db; letter-spacing: -.04em; }
.friends-intro > p:last-child { margin: 6px 0 0; font-size: 14px; max-width: 44ch; line-height: 1.55; }
.saved-seat-card { display: flex; align-items: center; gap: 18px; padding: 17px; margin: 0 0 18px; border: 1px solid #d6b65e; border-radius: 12px; background: linear-gradient(120deg, #55451f77, #283d22); }
.saved-seat-card h3 { margin: 2px 0 6px; font-size: 18px; }
.saved-seat-card p:last-child { margin: 0; line-height: 1.5; font-size: 12px; }
.saved-seat-card .button { flex: 0 0 155px; }
.saved-seat-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:0 0 min(330px,50%); }
.saved-seat-actions:has(#dismissSavedRoomButton[hidden]) { grid-template-columns:1fr; }
.saved-seat-actions .button { min-width:0; }
.invite-arrival { display: flex; gap: 12px; align-items: center; margin: 6px 0 20px; padding: 16px; border: 1px solid #98ba6e55; border-radius: 12px; background: #1f4e33; }
.invite-mark { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 2px solid #e8dbaa; border-radius: 8px; background: #f4eed8; color: #36512d; font-weight: 900; font-size: 26px; }
.invite-arrival strong { font-size: 17px; }
.invite-arrival p { margin: 4px 0 0; font-size: 12px; }
.room-entry-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.room-entry-options.has-invite { grid-template-columns: 1fr; }
.room-option { padding: 17px; border: 1px solid #82946766; border-radius: 12px; background: #1a3f2b; min-width: 0; }
.room-option h3 { margin: 0; font-size: 15px; }
.room-option p { margin: 10px 0; line-height: 1.5; font-size: 12px; }
.room-option .room-field { margin: 14px 0; }
.room-option > .button { width: 100%; }
.room-option .room-create-row { display: grid; gap: 10px; }
.room-option .room-create-row .room-field { margin: 0; }
.room-entry-options.has-invite .join-option { background: #214a31; border-color: #d5ba6999; }
.room-field input, .room-field select { border-color: #94ad7266; background: #0d2b1d; }
.room-field input[aria-invalid="true"] { border-color: var(--red); }
.identity-options { border-top: 1px solid #78945344; padding-top: 14px; }
.identity-options summary { padding: 8px 0; color: #cdd9ba; font-size: 12px; cursor: pointer; min-height: 40px; }
.identity-options summary:focus-visible { outline: 2px solid var(--amber); }
.friends-footnote { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: #b4c8a8 !important; }
.invite-card { padding: 18px; border: 1px solid #bb9a4b; border-radius: 12px; background: linear-gradient(120deg, #6e59232e, #2a4529); }
.invite-card .eyebrow { margin-bottom: 12px; }
.room-code-row strong { font-size: clamp(18px, 4vw, 23px); letter-spacing: .05em; color: #fff1b9; }
.room-target-badge { padding: 5px 9px; border-radius: 20px; background: #091d1755; color: #dce6ca; font-size: 11px; white-space: nowrap; }
.invite-actions { display: flex; gap: 10px; margin-top: 16px; }
.invite-actions .button { flex: 1; }
.invite-card > p:last-child { margin: 12px 0 0; font-size: 11px; line-height: 1.5; }
.invite-link-fallback input { font-size: 13px; }
.room-members { gap: 9px; }
.room-members li { align-items: center; padding: 12px; gap: 12px; border-radius: 10px; background: #183a28; min-height: 55px; }
.room-members .room-seat-number { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 50%; border: 1px solid #a4bc7655; color: #e5edce; font-size: 12px; font-weight: 750; background: #294a30; }
.room-members .room-seat-name { flex: 1; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.room-members .room-seat-state { font-size: 11px; }
.room-members .seat-open { background: transparent; border-style: dashed; }
.room-members .seat-open .room-seat-name { font-weight: 400; color: #b3c7a5; }
.room-members .seat-ready { border-color: #8eb97699; }
.room-members .seat-ready .room-seat-state { color: #c8eaa9; }
.lobby-next-step { border-radius: 10px; padding: 15px; background: #24432d; }
.lobby-next-step > p { margin: 0; font-size: 13px; line-height: 1.5; }
.lobby-next-step .settings-tools:not(:empty) { margin-top: 12px; }
.lobby-next-step .button { flex: 1; }
.voice-panel { border: 1px solid #71895966; border-radius: 12px; padding: 16px; margin-top: 18px; }
.voice-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.voice-heading h3 { margin: 0; }
.voice-panel .setting-help { line-height: 1.55; }
.table-departure { display: grid; gap: 14px; padding: 18px 0; margin-top: 6px; }
.table-departure strong { font-size: 13px; }
.table-departure p { font-size: 12px; margin: 6px 0 0; line-height: 1.5; }
.departure-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.danger-button { color: #f4b89c; border-color: #b7805666 !important; }
.friends-beta-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid #78945344; color: #c9b773 !important; font-size: 9px; letter-spacing: .1em; }
.friends-beta-note span { color: #b9c9ad; letter-spacing: 0; font-size: 10px; }
.scoring-gate-help { margin: 3px 0 0; color: #e7d6a5; font-size: 10px; line-height: 1.35; }
.table-readout { flex-wrap: wrap; gap: 3px 7px; }
.board-status { min-height: 28px; padding: 4px 6px; }
.table-readout .scoring-gate { flex: 0 0 100%; margin: 0; padding: 0; border: 0; font-size: 10px; color: #ffe3a1; text-align: center; }
.table-readout .scoring-gate.unlocked { color: #c2dfa9; }
@media (max-width: 760px) {
  .play-mode-strip { min-height: 44px; padding: 4px 10px; }
  .play-mode-strip > span { display: grid; gap: 2px; }
  .play-mode-strip strong { font-size: 10px; }
  .play-mode-strip small { font-size: 9px; }
  .mode-action { min-height: 40px; font-size: 10px; }
  .table-wrap { height: max(340px, calc(100svh - 236px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  .move-area { min-height: 92px; }
  .friends-overlay { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .table-talk-modal { max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); border-radius: 15px; }
  .friends-sheet-header { padding: 16px; gap: 10px; }
  .friends-sheet-header .eyebrow { font-size: 8px; }
  .friends-sheet-header .button { padding: 7px 9px; font-size: 10px; }
  .friends-sheet-body { padding: 16px; }
  .saved-seat-card { display: grid; gap: 12px; padding: 14px; }
  .saved-seat-card .button { width: 100%; }
  .room-entry-options { grid-template-columns: 1fr; }
  .room-option .room-create-row { grid-template-columns: 110px minmax(0, 1fr); align-items: end; }
  .room-code-row strong { font-size: 20px; }
  .room-members li { gap: 8px; padding: 10px; }
  .room-members .room-seat-name { font-size: 12px; }
  .room-members .room-seat-state { max-width: 94px; font-size: 10px; }
  .departure-actions { display: grid; grid-template-columns: 1fr; }
  .friends-footnote { font-size: 11px; }
}
@media (max-width: 350px) {
  .friends-sheet-header { padding: 12px; }
  .friends-sheet-header h2 { font-size: 19px; }
  .friends-sheet-body { padding: 12px; }
  .room-code-row strong { font-size: 18px; }
  .room-option .room-create-row { grid-template-columns: 96px minmax(0, 1fr); }
}
.inline-button { min-height: 40px; padding: 5px 0; border: 0; background: transparent; color: #f2d991; text-decoration: underline; text-underline-offset: 3px; font-size: 11px; cursor: pointer; }
.inline-button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Table personality stays light: original preset badges, local photo preview,
   and silent preset reactions. No asset downloads or media capture. */
.preset-avatar { display: grid; place-items: center; background: var(--avatar-color, #99713c); }
.preset-avatar > span { font-size: 23px; line-height: 1; filter: drop-shadow(0 1px 1px #0006); }
.photo-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.player-avatar.seat-avatar { width: 22px; height: 22px; border-width: 1px; border-radius: 5px; }
.seat-avatar > span { font-size: 15px; }
.player-avatar.lobby-avatar { width: 34px; height: 34px; border-width: 1px; }
.lobby-avatar > span { font-size: 22px; }
.avatar-editor { margin-top: 18px; border: 1px solid #71895966; border-radius: 12px; background: #173b29; }
.avatar-editor > summary { padding: 15px 16px; cursor: pointer; font-size: 14px; font-weight: 750; }
.avatar-editor > summary small { display: block; margin: 5px 0 0 16px; font-size: 11px; font-weight: 400; color: #c1d2b7; }
.avatar-editor > summary:focus-visible { outline: 2px solid var(--amber); border-radius: 12px; }
.avatar-editor-body { padding: 0 16px 16px; }
.avatar-draft-row { display: flex; align-items: center; gap: 15px; margin: 7px 0 16px; }
.avatar-preview .player-avatar { width: 64px; height: 64px; border-radius: 12px; }
.avatar-preview .preset-avatar > span { font-size: 40px; }
.avatar-draft-row strong { font-size: 13px; }
.avatar-draft-row p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.avatar-presets { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin: 12px 0 18px; }
.avatar-choice { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 7px 2px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #e3e8cd; cursor: pointer; font: inherit; font-size: 9px; }
.avatar-choice .player-avatar { width: 35px; height: 35px; border-width: 1px; }
.avatar-choice[aria-pressed="true"] { background: #b1923433; border-color: #f3d574; }
.avatar-choice:focus-visible { outline: 2px solid var(--amber); }
.avatar-choice:disabled { opacity: .5; cursor: default; }
.avatar-upload-row { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-upload-row .button { font-size: 11px; cursor: pointer; }
.avatar-consent { margin: 14px 0 8px; font-size: 11px; line-height: 1.6; color: #c5d5b9; }
.table-social { display: flex; position: relative; align-items: center; min-height: 43px; gap: 10px; padding: 0 12px; background: #1b492c; border-bottom: 1px solid #a5c07a33; z-index: 10; }
.table-social > p { flex: 1; min-width: 0; margin: 0; font-size: 10px; color: #c1d2b7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-social > p.has-reaction { color: #ffebad; font-weight: 650; }
.table-social .mode-action { min-height: 42px; padding: 3px 0; }
.reaction-mute { min-height: 42px; padding: 3px 0; border: 0; background: none; font-size: 9px; color: #b9d1ac; cursor: pointer; }
.reaction-mute:focus-visible { outline: 2px solid var(--amber); }
.taunt-menu { position: absolute; right: 8px; top: calc(100% + 5px); width: min(380px, calc(100vw - 26px)); padding: 14px; border: 1px solid #b1a264; border-radius: 12px; background: #153b28; box-shadow: 0 12px 25px #07241299; }
.taunt-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.taunt-choices .button { text-align: left; padding: 8px 10px; font-size: 11px; }
.taunt-choices .button span { margin-right: 5px; font-size: 16px; }
.taunt-menu > p { margin: 12px 0 0; font-size: 10px; line-height: 1.5; color: #b5cda9; }
@media (max-width: 760px) {
  .friends-play .table-wrap { height: max(320px, calc(100svh - 279px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  .player-avatar.seat-avatar { width: 18px; height: 18px; }
  .seat-avatar > span { font-size: 12px; }
  .score-chip .preset-avatar > span { font-size: 20px; }
  .avatar-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .avatar-choice { padding: 9px 4px; font-size: 10px; }
  .avatar-choice .player-avatar { width: 42px; height: 42px; }
  .table-social { gap: 8px; padding: 0 10px; }
  .table-social > p { font-size: 9px; }
  .table-social .mode-action { font-size: 10px; }
  .reaction-mute { max-width: 55px; line-height: 1.2; }
}

.voice-beta-warning { margin: 12px 0 0; padding: 9px 11px; border-radius: 8px; border: 1px solid #bda66555; background: #725b2426; color: #e9d49f !important; font-size: 11px; line-height: 1.5; }

/* Online bot control is explicit; identity and original seat stay visible. */
.control-badge { display: inline-block; margin-left: 4px; padding: 1px 3px; border-radius: 3px; font-size: 7px; line-height: 1.25; vertical-align: 1px; font-weight: 800; letter-spacing: .025em; text-shadow: none; }
.bot-control { color: #e6ebff; background: #4e5685; }
.away-control { color: #ffebbe; background: #715229; }
.seat-name .control-badge { display: block; width: fit-content; max-width: 100%; margin: 2px auto 0; font-size: 6px; }
.room-members .seat-bot { background: #253d3a; border-color: #838db566; }
.room-members .seat-bot .room-seat-state { color: #cbd7f5; }
.room-members .seat-reconnecting { border-color: #d5ad5b88; }
.room-members .seat-reconnecting .room-seat-state { color: #f3d596; }
@media (max-width: 760px) { .score-chip .control-badge { display: block; width: fit-content; max-width: 100%; margin: 2px 0 0; font-size: 6px; } }

.entry-recovery { padding: 14px; margin-bottom: 16px; border: 1px solid #cda761; border-radius: 14px; background: #fff3d7; color: #342b1d; }
.entry-recovery h3 { margin: 0 0 6px; }
.entry-recovery p { line-height: 1.45; }
#roomEntryRecovery p { color: #342b1d; }

.sound-settings { padding-block: 8px; border-block: 1px solid #bcb59c66; margin-block: 12px; }
.sound-settings input[type="range"] { width: 45%; min-height: 44px; accent-color: #227247; }
.sound-settings output { font-size: .85em; color: #63573e; margin-left: 5px; }

.mode-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mode-actions .mode-action { padding-left: 0; min-height: 44px; }
.mode-actions .mode-action:disabled { opacity: .55; cursor: default; }


/* Private Table: one toolbar, one seat rail, a quiet board and stable rack.
   All tile positions/targets are still supplied by the unchanged layout engine. */
:root {
  --bg: #0d231c; --panel: #142f25; --panel-2: #203f31;
  --felt: #1b5742; --felt-deep: #174735; --wood: #72513a;
  --wood-grain: linear-gradient(180deg, #826347, #59432f);
  --ink: #fcf5e4; --muted: #c8d3c6; --line: #4d6953;
  --radius: 18px;
}
body { background: radial-gradient(ellipse at 50% 0, #254b37, #0d231c 75%); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app-shell { width: min(1180px, 100%); padding: 16px; }
.game-card { display: grid; grid-template-areas: "toolbar" "mode" "social" "table" "actions"; grid-template-rows: auto auto auto minmax(0, 1fr) 88px; height: calc(100svh - 32px); min-height: 600px; border: 1px solid #9a795477; border-radius: 18px; background: #142c23; box-shadow: 0 20px 60px #04110b70; }
.game-toolbar { grid-area: toolbar; background: #18372a; border-bottom: 1px solid #9a795455; box-shadow: none; }
.toolbar-actions { min-height: 56px; padding: 6px 16px; background: #132d23; border-bottom: 1px solid #c9d0ad1c; gap: 8px; }
.table-title { gap: 10px; }
.table-title-name { margin: 0; color: #f3e9cf; font-size: 17px; font-weight: 780; letter-spacing: -.03em; line-height: 1.2; }
.round-badge { font-size: 11px; color: #b7c7b7; }
.toolbar-actions .button { min-height: 44px; padding: 8px 15px; font-size: 12px; border-radius: 9px; background: #244a37; border-color: #86a47e55; }
.toolbar-actions .button.primary { color: #f6e8bc; background: #314b35; border-color: #d6bd7166; box-shadow: none; }
.button.primary { background: #dfc47b; border-color: #efdaa4; box-shadow: 0 2px 0 #8f7542; color: #302719; }
.score-strip { gap: 0; padding: 3px 8px 5px; background: #1b3b2d; }
.score-chip { display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto auto; gap: 2px 9px; margin: 2px 4px; padding: 7px 10px 6px; border: 1px solid #a8b59120; border-top: 3px solid transparent; border-radius: 11px; text-shadow: none; background: #10291f44; }
.score-chip:last-child { border-right: 1px solid #a8b59120; }
.score-chip.current { border-color: #d7bb6870; border-top-color: #ebd08b; background: #8f8b3e23; }
.score-copy { display: contents; }
.score-chip .player-avatar { grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; margin-top: 3px; border-radius: 10px; border-width: 1px; box-shadow: none; }
.score-chip .name { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 600; color: #dbe4d6; }
.score-chip .points { grid-column: 2; grid-row: 2; font-size: 25px; line-height: 1; color: #fff6dc; letter-spacing: -.04em; }
.score-chip.current .name { color: #f4e2b4; }
.score-chip.current .points { color: #ffdf8c; }
.rail-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 15px; margin-top: 4px; font-size: 10px; color: #c1d0bd; }
.rail-count { white-space: nowrap; }
.rail-state { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px; min-width: 0; max-width: 100%; }
.rail-turn { font-size: 9px; font-weight: 750; color: #f7dc92; }
.score-chip .control-badge { display: inline-block; margin: 0; font-size: 8px; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.play-mode-strip { grid-area: mode; min-height: 44px; padding: 0 17px; background: #143426; border-bottom: 1px solid #9baf7e22; gap: 8px; }
.play-mode-strip > span { gap: 9px; }
.play-mode-strip strong { font-size: 11px; }
.play-mode-strip small { font-size: 11px; color: #adbfaa; }
.mode-actions .mode-action { min-height: 44px; font-size: 11px; color: #dbcc9e; }
.table-social { grid-area: social; min-height: 40px; padding: 0 16px; background: #1b3c2c; }
.table-social .mode-action, .reaction-mute { min-height: 44px; }
.table-wrap, .friends-play .table-wrap { grid-area: table; height: auto; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) 112px; grid-template-areas: "board" "you"; padding: 0 8px; border-left: 5px solid #70513b; border-right: 5px solid #70513b; background: radial-gradient(ellipse at 50% 30%, #28614860, transparent 75%), linear-gradient(140deg, var(--felt), var(--felt-deep)); box-shadow: inset 0 0 30px #061c1435; }
.seat-top, .seat-left, .seat-right { display: none; }
.board-surface { min-height: 0; overflow: hidden; }
.board-empty { color: #cad8b591; font-size: 14px; }
.board-status { background: transparent; min-height: 26px; padding: 3px 5px; pointer-events: none; }
.table-readout .scoring-gate { font-size: 11px; color: #e4d49e; }
.table-readout .scoring-gate.unlocked { color: #b5cab0; }
.seat-you { margin: 0 -8px; padding: 8px 20px 3px; background: linear-gradient(#15392b, #122e24); border-top: 1px solid #9eb08a55; box-shadow: 0 -8px 18px #0b2b1a15; }
.seat-you::after { height: 4px; border-top: 1px solid #b2905c66; }
.you-line strong, .turn-label { font-size: 12px; }
.hand-rack { width: min(calc(var(--hand-count, 7) * 68px), 100%); grid-template-columns: repeat(var(--hand-count, 7), minmax(44px, 1fr)); height: 78px; gap: 0; }
.hand-tile { min-height: 76px; border-radius: 10px; }
.hand-tile .domino { --tile-long: 70px; --tile-short: 35px; box-shadow: 3px 1px 4px #061b1455; }
.hand-tile[aria-pressed="true"] { transform: translateY(-6px); }
.hand-tile[aria-pressed="true"] .domino { outline: 2px solid #ffe1a0; outline-offset: 3px; filter: drop-shadow(0 0 5px #e5c36b55); }
.domino { box-shadow: 0 2px 3px #061a134f; }
.board-tile.recent .domino { filter: drop-shadow(0 0 3px #e2c77888); }
.board-endpoint.legal { border-color: #f5dfa2; background: #ead69218; box-shadow: 0 0 0 3px #e7d69708; }
.board-endpoint.drop-hover { background: #eacf7066; border-color: #fff3c8; }
.move-area { grid-area: actions; display: grid; grid-template-rows: 30px 44px; height: 88px; min-height: 88px; padding: 7px 10px; background: #132e23; border-top: 1px solid #9eb08a33; text-align: center; }
.move-instruction { align-self: center; font-size: 12px; line-height: 15px; min-height: 0; margin: 0; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.move-actions, .move-actions:not(:empty) { min-height: 44px; margin: 0; gap: 7px; flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; align-items: center; padding: 0; }
.move-actions .button { flex: 0 0 auto; min-height: 44px; font-size: 12px; border-radius: 9px; padding: 7px 12px; }
.coach-panel { margin: 14px 0 0; border-color: #5d8573; border-left-color: #a9c6b1; background: #17392e; }
.coach-message { background: #102e25; }
.settings-modal { padding: 22px; background: #153328; }
.settings-modal .setting-row { min-height: 58px; }
.menu-friends-entry { display: grid; gap: 6px; }
.menu-friends-entry #friendsModeButton { display: none; }
.menu-details, .invite-code-details { margin-top: 10px; border-top: 1px solid #82976a44; }
.menu-details summary, .invite-code-details summary { min-height: 44px; display: list-item; padding: 12px 0; cursor: pointer; color: #e5d8b7; font-size: 12px; }
.menu-details summary:focus-visible, .invite-code-details summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.menu-details .scoring-gate-help { font-size: 12px; line-height: 1.55; margin: 0 0 12px; }
.invite-card { background: #233f2e; border-color: #a58a5577; }
.invite-code-details .room-code-row { padding: 4px 0 12px; }
.sound-settings output { color: #d1c59f; }
@media (max-width: 760px) {
  .app-shell { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .game-card { height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 560px; border: 0; border-radius: 0; }
  .toolbar-actions { min-height: 52px; padding: 4px 10px; gap: 7px; }
  .table-title { display: grid; gap: 2px; }
  .table-title-name { font-size: 15px; letter-spacing: -.03em; }
  .round-badge { font-size: 10px; line-height: 1.2; }
  .toolbar-actions .button { min-height: 44px; padding: 7px 12px; font-size: 12px; }
  .score-strip { padding: 3px 5px 5px; }
  .score-chip { grid-template-columns: 24px minmax(0,1fr); grid-template-rows: 25px auto auto; gap: 3px 3px; margin: 1px 2px; padding: 6px 6px 4px; border-radius: 9px; }
  .score-chip .player-avatar { grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin: 0; border-radius: 7px; }
  .score-chip .preset-avatar > span { font-size: 18px; }
  .score-chip .points { grid-column: 2; grid-row: 1; text-align: right; align-self: center; font-size: 23px; }
  .score-chip .name { grid-column: 1 / -1; grid-row: 2; font-size: 11px; line-height: 15px; }
  .rail-meta { grid-row: 3; margin: 0; font-size: 10px; min-height: 14px; flex-wrap: wrap; }
  .score-chip .control-badge { font-size: 9px; }
  .rail-turn { font-size: 10px; }
  .play-mode-strip { min-height: 44px; padding: 0 11px; }
  .play-mode-strip > span { display: flex; flex-wrap: wrap; gap: 2px 7px; }
  .play-mode-strip strong { font-size: 10px; }
  .play-mode-strip small { font-size: 10px; }
  .mode-actions .mode-action { min-height: 44px; font-size: 10px; }
  .table-wrap, .friends-play .table-wrap { height: auto; grid-template-rows: minmax(0,1fr) 108px; padding: 0 3px; border-width: 3px; }
  .seat-you { margin: 0 -3px; padding: 7px 10px 3px; }
  .hand-rack { gap: 0; height: 77px; }
  .hand-tile .domino { --tile-long: 66px; --tile-short: 33px; }
  .you-line strong, .turn-label { font-size: 11px; }
  .table-readout .scoring-gate { font-size: 10px; }
  .move-area { min-height: 88px; height: 88px; padding: 7px 8px; }
  .move-instruction { font-size: 11px; line-height: 15px; }
  .move-actions .button { min-height: 44px; font-size: 11px; padding: 7px 10px; }
  .table-social { padding: 0 11px; }
  .table-social > p { font-size: 10px; }
  .taunt-menu { top: auto; bottom: calc(100% + 4px); }
  .coach-panel { margin: 10px; }
  .settings-modal { padding: 18px; }
}
@media (max-width: 350px) {
  .toolbar-actions { gap: 5px; }
  .toolbar-actions .button { padding-inline: 10px; }
  .score-chip { padding-inline: 4px; }
  .score-chip .points { font-size: 21px; }
  .score-chip .name { font-size: 11px; }
  .seat-you { padding-inline: 3px; }
  .hand-tile .domino { --tile-long: 62px; --tile-short: 31px; }
}
/* Both the in-app choice and the OS preference suppress decorative motion. */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 2; margin-bottom: 16px; background: #153328; }
.menu-heading h2 { margin-bottom: 0; }
.menu-heading .button { flex: 0 0 auto; min-height: 44px; }

/* Laptop/desktop: reserve real board space before distributing spare height.
   renderBoard reserves another 48px for its status overlay; 240px here leaves
   192px for connected tiles and full-size endpoint targets. Short or zoomed
   windows scroll the document instead of crushing the board inside the card. */
@media (min-width: 761px) {
  .game-card {
    height: auto;
    min-height: calc(100svh - 32px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "toolbar toolbar" "mode social" "table table" "actions actions";
    grid-template-rows: auto auto minmax(352px, 1fr) 88px;
  }
  .play-mode-strip, .table-social { min-width: 0; }
  .play-mode-strip { flex-wrap: wrap; }
  .play-mode-strip > span { flex-wrap: wrap; }
  .table-wrap, .friends-play .table-wrap {
    min-height: 352px;
    grid-template-rows: minmax(240px, 1fr) 112px;
  }
  .board-surface { min-height: 240px; overscroll-behavior: auto; }
  .board-surface, .in-play .board-surface { touch-action: pan-y; }
}

/* Keep the on-table Sound/Voice actions usable at narrow widths and zoom.
   The voice action is absent in solo mode; no extra empty toolbar is added. */
.mode-actions { min-width: 0; max-width: 100%; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.mode-actions .mode-action { min-width: 44px; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#quickVoiceButton { padding-inline: 6px; border-radius: 6px; }
#quickVoiceButton:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 760px) {
  .play-mode-strip { flex-wrap: wrap; }
  .play-mode-strip > span { flex: 1 1 120px; }
  .play-mode-strip strong { white-space: normal; overflow-wrap: anywhere; }
  .mode-actions { margin-left: auto; }
}

/* Brief game announcements live in the action dock, never above playable
   dominoes or microphone controls. The card grows while one is visible. */
.event-cue { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 8px 12px; border: 1px solid #dec68b; border-left: 4px solid #f5d994; border-radius: 9px; background: #293e2b; color: #fff0bf; text-align: left; }
.event-cue > div { flex: 1; min-width: 0; }
#eventCueTitle { display: block; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: .035em; overflow-wrap: anywhere; }
#eventCueActor { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: #f6f0de; overflow-wrap: anywhere; }
.event-cue[data-kind="winner"] { border-color: #f3d07c; background: #4d4225; }
#closeEventCueButton { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #dbc38777; border-radius: 7px; background: #172d22; color: #fff0bf; font: inherit; font-size: 12px; cursor: pointer; }
#closeEventCueButton:focus-visible { outline: 2px solid #fff0bf; outline-offset: 2px; }
.move-area:has(> .event-cue:not([hidden])) { height: auto; grid-template-rows: auto 30px 44px; gap: 6px; }
.game-card:has(.event-cue:not([hidden])) { height: auto; grid-template-rows: auto auto auto minmax(348px, 1fr) auto; }
.game-card:has(.event-cue:not([hidden])) .table-wrap { min-height: 348px; grid-template-rows: minmax(240px, 1fr) 108px; }
.game-card:has(.event-cue:not([hidden])) .board-surface { min-height: 240px; overscroll-behavior: auto; touch-action: pan-y; }
@media (min-width: 761px) {
  .game-card:has(.event-cue:not([hidden])) { grid-template-rows: auto auto minmax(352px, 1fr) auto; }
  .game-card:has(.event-cue:not([hidden])) .table-wrap { min-height: 352px; grid-template-rows: minmax(240px, 1fr) 112px; }
}

/* Terminal announcements keep the established result dialog/lifecycle. */
#resultEyebrow { margin-bottom: 8px; color: #ffe3a0; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; letter-spacing: .035em; overflow-wrap: anywhere; }
#resultTitle { font-size: clamp(22px, 4vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }

/* A readable countdown without per-second screen-reader announcements. */
.turn-status { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.turn-countdown { font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; color: #f7df9c; overflow-wrap: anywhere; }
/* Private stats are optional Menu content, not a public leaderboard. */
#statsOverlay { z-index: 70; }
#statsDialog { width: min(520px, 100%); }
#statsDialog .stats-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#statsDialog h2 { overflow-wrap: anywhere; }
#closeStatsButton, #statsTarget { min-width: 44px; min-height: 44px; }
#statsTarget { color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 8px; }
#statsStatus, #statsScope, .stats-help { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#statsValues { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; margin: 16px 0; }
#statsValues dt, #statsValues dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
#statsValues dt { color: var(--muted); font-size: 13px; }
#statsValues dd { text-align: right; font-size: 17px; font-weight: 700; }
#statsDialog :focus-visible { outline: 2px solid #ffe3a0; outline-offset: 2px; }
/* Each definition pair is grouped as a small card in the actual stats markup. */
#statsValues > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
#statsValues dd { margin-top: 5px; text-align: left; }
#statsDialog .setting-help { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* Qualification is separate from current score; keep its check visible even
   when a long player name ellipsizes inside a narrow four-seat rail. */
.score-chip .rail-name { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.score-chip .rail-name .name { flex: 1 1 auto; min-width: 0; }
.qualified-mark { flex: 0 0 auto; font-size: 14px; font-weight: 800; line-height: 1; color: #bceca3; }
@media (max-width: 760px) {
  .score-chip .rail-name { grid-column: 1 / -1; grid-row: 2; }
}

/* Compact, opt-in guidance: never overlays the table or forces a refresh. */
.update-notice { max-width: 1240px; margin: 6px auto; padding: 8px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid #c7ae6a; border-radius: 9px; background: #263d2b; color: #f6edd4; }
.update-notice p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.update-notice .button { flex: 0 0 auto; min-height: 44px; }
.rules-grid { display: grid; gap: 12px; padding-bottom: 12px; }
.rules-grid section { padding: 12px; border: 1px solid #839c7444; border-radius: 9px; background: #102a22; }
.rules-grid h3 { margin: 0 0 6px; font-size: 15px; color: #f2dfae; }
.rules-grid p, .rules-grid .scoring-gate-help { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.entry-examples { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.entry-examples caption { text-align: left; font-size: 12px; line-height: 1.4; margin-bottom: 6px; color: #cbd9c8; }
.entry-examples th, .entry-examples td { padding: 7px 8px; text-align: left; border-bottom: 1px solid #92ad7e33; }
.entry-examples th { color: #e9d59e; }
@media (max-width: 420px) { .update-notice { margin: 4px; padding: 6px 8px; gap: 6px; } .update-notice .button { padding: 6px 9px; font-size: 12px; } .rules-grid section { padding: 10px; } }

/* Hand preparation uses the existing table and action dock, never an overlay. */
.hand-setup .move-area { height: auto; min-height: 96px; grid-template-rows: auto 44px; gap: 6px; }
.hand-setup .game-card { height: auto; min-height: calc(100svh - 32px); grid-template-rows: auto auto auto minmax(348px, 1fr) auto; }
.hand-setup .table-wrap { min-height: 348px; grid-template-rows: minmax(240px, 1fr) 108px; }
.hand-setup .board-empty { color: #f0ead7; font-size: clamp(16px, 4vw, 21px); line-height: 1.4; }
.setup-hand-note { grid-column: 1 / -1; width: min(100%, 300px); margin: 0; padding: 6px; text-align: center; color: #e1dbc9; font-size: 13px; line-height: 1.4; }
.rail-setup { color: #e9d59c; font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.hand-setup .hand-tile:disabled { opacity: 1; cursor: default; }
@media (min-width: 760px) { .hand-setup .game-card { grid-template-rows: auto auto minmax(352px, 1fr) auto; } .hand-setup .table-wrap { min-height: 352px; grid-template-rows: minmax(240px, 1fr) 112px; } }

.setup-scene-host { position:absolute; left:50%; top:58%; transform:translate(-50%,-40%); width:min(330px,90%); pointer-events:none; }
.hand-setup .board-empty { top:7%; transform:translate(-50%,0); width:90%; font-size:clamp(14px,3.5vw,18px); }
.setup-scene { width:min(330px,100%); margin:auto; pointer-events:none; --pickup-x:0px; --pickup-y:65px; }
.setup-scene svg { display:block; width:100%; overflow:visible; }
.setup-hand { opacity:0; transform-box:fill-box; transform-origin:center; }
.setup-bone { transform-box:fill-box; transform-origin:center; }
.setup-scene--wash .setup-bone { animation:setup-wash-bone 760ms ease-in-out both; }
.setup-scene--wash .setup-hand { animation:setup-wash-hand 760ms ease-in-out both; }
.setup-scene--wash .setup-hand--right { --hand-sweep:-14px; }
.setup-scene--wash .setup-hand--left { --hand-sweep:14px; }
@keyframes setup-wash-bone { 0%,100%{transform:none}35%{transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}72%{transform:translate(calc(var(--dx)*-.65),calc(var(--dy)*-.65)) rotate(calc(var(--turn)*-.6))} }
@keyframes setup-wash-hand { 0%,100%{opacity:0;transform:translateY(10px)}16%,80%{opacity:.95}40%{transform:translate(var(--hand-sweep),-7px) rotate(8deg)}70%{transform:translate(calc(var(--hand-sweep)*-.55),3px) rotate(-5deg)} }
.setup-scene--seat-1 { --pickup-y:-65px; }.setup-scene--seat-2 { --pickup-x:-100px; --pickup-y:-55px; }.setup-scene--seat-3 { --pickup-x:100px; --pickup-y:-55px; }
.setup-scene--pickup .setup-bone--pickup { animation:setup-pickup-bone 500ms ease-in-out both; }
.setup-scene--pickup .setup-hand { animation:setup-pickup-hand 500ms ease-in-out both; }
@keyframes setup-pickup-bone { 0%,20%{transform:none;opacity:1}78%,100%{transform:translate(var(--pickup-x),var(--pickup-y)) scale(.65);opacity:0} }
@keyframes setup-pickup-hand { 0%,100%{opacity:0;transform:translateY(12px)}20%,65%{opacity:.95;transform:translateY(-4px)} }
.setup-skip { min-height:44px; justify-self:center; }
.move-area:has(> .setup-skip:not([hidden])) { height:auto; grid-template-rows:auto 44px 44px; }
.reduced-motion .setup-scene .setup-bone, .reduced-motion .setup-scene .setup-hand { animation:none!important; }
.reduced-motion .setup-scene .setup-hand { opacity:0; }
@media(prefers-reduced-motion:reduce) { .setup-scene .setup-bone,.setup-scene .setup-hand { animation:none!important; }.setup-scene .setup-hand { opacity:0; } }
@media(max-width:560px) { .setup-scene-host { width:min(240px,88%); }.setup-scene { width:min(240px,100%); } }
/* Direct preparation gestures stay inside the marked pile; ordinary page areas scroll. */
.hand-setup #boardSurface { touch-action:pan-y; }
.setup-scene-host.setup-gesture-eligible { pointer-events:auto; border:1px dashed rgba(245,235,196,.52); border-radius:18px; background:rgba(7,35,24,.14); cursor:grab; }
.setup-gesture-eligible .setup-scene { pointer-events:auto; }
.setup-scene-host.setup-gesture-active { z-index:8; cursor:grabbing; }
.hand-setup #boardSurface:has(.setup-gesture-active) { overflow:visible; z-index:8; }
.setup-gesture-active .setup-bone,.setup-gesture-active .setup-hand { animation:none!important; }
.setup-gesture-active .setup-hand { opacity:0; }
.setup-gesture-eligible { box-shadow:inset 0 1px 12px rgba(3,24,16,.16),0 1px 0 rgba(255,247,215,.1); }
.setup-scene svg { filter:drop-shadow(0 3px 2px rgba(4,22,15,.28)); }
.setup-scene-host.setup-gesture-active { border-color:rgba(255,222,139,.9); }
.seat-you.setup-drop-target { outline:2px dashed rgba(243,218,155,.65); outline-offset:1px; border-radius:10px; }
.seat-you.setup-drop-ready { outline-style:solid; outline-color:#f1d28b; background:rgba(242,216,153,.12); }
.hand-setup .hand-rack:has(> .setup-hand-note) { width:min(490px,100%); grid-template-columns:minmax(0,1fr); }
/* Empty gameplay layers must not intercept the preparation arena before capture. */
.setup-scene-host { z-index:5; }
.hand-setup #boardTiles,.hand-setup #boardEndpoints,.hand-setup #boardConnections { pointer-events:none; }
/* Keep the pickup target stationary when its optional animation control disappears. */
.hand-setup .move-area { grid-template-rows:auto 44px 44px; min-height:146px; }
.hand-setup .move-area:has(> .event-cue:not([hidden])) { grid-template-rows:auto auto 44px 44px; }

/* Pickup accepts exactly this visible dock, including its heading and padding. */
.seat-you.setup-pickup-dock { outline:2px dashed rgba(243,218,155,.65); outline-offset:-4px; }
.seat-you.setup-drop-target { outline-offset:-4px; }

/* Club-table skin: original artwork and materials, inspired by a social card
   lounge. This layer changes presentation only; the playable grid, preparation
   capture layers and exact pickup dock retain their established geometry. */
:root {
  --ink:#fff4df; --muted:#c2d3d7; --faint:#9fb8be;
  --bg:#091319; --panel:#14272f; --panel-2:#203b44; --line:#49616c;
  --felt:#245c68; --felt-deep:#143744; --wood:#45334f;
  --green:#b9ebd7; --amber:#f3d083; --blue:#c8b4ee; --red:#ffb4a4;
  --wood-grain:linear-gradient(180deg,#594363,#302639);
}
html { background:var(--bg); }
body { background:radial-gradient(ellipse at 70% 0,#153236 0,transparent 62%),linear-gradient(150deg,#0b1820,#080e14); }
.game-card { border-color:#64516e; background:#102129; box-shadow:0 24px 64px #0007,0 0 0 1px #c9b4e012; }
.game-toolbar { background:#12242c; border-color:#bb9cce33; }
.toolbar-actions { background:linear-gradient(110deg,#11242a,#171d2b); border-color:#c1d7dc1f; }
.table-title-name { color:#fff3db; letter-spacing:.015em; }
.round-badge { color:#bfced2; }
.score-strip { background:linear-gradient(180deg,#182c34,#111f29); }
.score-chip,.score-chip:last-child { background:linear-gradient(145deg,#263b435e,#0c182744); border-color:#8cabb52b; }
.score-chip.current { border-color:#bca0de88; border-top-color:#d4b4fa; background:linear-gradient(135deg,#51435d88,#244a4d55); box-shadow:inset 0 1px #f7e0ff15; }
.score-chip .name,.score-chip.current .name { color:#fff0db; }
.score-chip .points,.score-chip.current .points { color:#f4cf7f; text-shadow:0 2px 8px #0004; }
.score-chip .player-avatar { border-color:#c5acd7; box-shadow:0 3px 9px #0005,inset 0 1px #fff3; }
.rail-meta { color:#c0d3d8; }
.rail-turn,.rail-setup { color:#f4d99a; }
.qualified-mark { color:#b4f0d3; }
.control-badge { background:#12232b; border-color:#8ca9b366; color:#d5e3e6; }
.play-mode-strip,.table-social { background:#11282e; border-color:#839eaa33; }
.play-mode-strip small,.table-social > p { color:#bdd0d5; }
.play-mode-strip[data-mode="interrupted"],.play-mode-strip[data-mode="paused"] { background:#51402a; }
.mode-actions .mode-action,.table-social .mode-action,.reaction-mute { color:#f0d493; }
.table-wrap,.friends-play .table-wrap {
  border-left-color:#4e3b59; border-right-color:#4e3b59;
  border-radius:30px 30px 0 0;
  background:radial-gradient(ellipse at 50% 38%,#39798477,transparent 72%),repeating-linear-gradient(95deg,#ffffff03 0,transparent 1px,transparent 5px),linear-gradient(140deg,var(--felt),var(--felt-deep));
  box-shadow:inset 0 0 0 2px #c6a5e6,inset 0 0 0 7px #47364c,inset 0 0 42px #06192388;
}
.board-empty { color:#d3e0dd; }
.hand-setup .board-empty { color:#fff1d9; }
.board-status,.table-readout .scoring-gate.unlocked { color:#c8dedc; }
.table-readout .scoring-gate { color:#f5dba3; }
.seat-you { background:linear-gradient(180deg,#132a33,#0e1d29); border-top-color:#a8c5c259; box-shadow:0 -9px 25px #0310193d; }
.seat-you::after { background:linear-gradient(90deg,#41314e,#745a7d,#41314e); border-color:#c8a6dd66; }
.you-line strong { color:#f8e8c9; letter-spacing:.035em; }
.turn-label,.setup-hand-note { color:#d7e4e2; }
.seat-you.current .turn-label { color:#f5d78f; }
.domino { box-shadow:0 3px 4px #020c1766; }
.hand-tile .domino { box-shadow:3px 2px 5px #02091199; }
.hand-tile[aria-pressed="true"] .domino { outline-color:#e3bfff; filter:drop-shadow(0 0 6px #d5b4eb77); }
.board-endpoint.legal { border-color:#e2cbfa; background:#c3e4dd18; box-shadow:0 0 0 3px #e6c8ff0d; }
.board-endpoint.drop-hover { border-color:#fff2c8; background:#ead18b66; }
.move-area { background:linear-gradient(180deg,#122731,#101d28); border-top-color:#a0d5c34a; }
.move-instruction { color:#e0ece5; }
.button,.button.secondary,.toolbar-actions .button { background:linear-gradient(180deg,#2a414c,#1a303a); border-color:#8196a36b; color:#fff0d9; border-radius:10px; }
.button:hover,.button.secondary:hover,.toolbar-actions .button:hover { background:#34515d; border-color:#bcabcb; }
.button.primary,.toolbar-actions .button.primary { background:linear-gradient(180deg,#f3d798,#d8b46c); border-color:#ffe6ad; color:#2b2217; box-shadow:0 2px 0 #765b35,0 4px 10px #0002; }
.button.primary:hover { background:#ffe4ac; }
.button.active { background:#514461; border-color:#cfb0e8; }
.button.warn { background:#6d443b; border-color:#d7a281; }
.button:focus-visible,.mode-action:focus-visible,.inline-button:focus-visible { outline-color:#f5d99b; }
.settings-modal,.modal,.campaign-card,.coach-panel { background:#142830; border-color:#8e7c9b88; color:var(--ink); }
.coach-message,.rules-grid section,.invite-card { background:#102029; border-color:#728a9455; }
.rules-grid h3,.entry-examples th { color:#f5d79a; }
.entry-examples caption { color:#c4d6d8; }
.update-notice,.event-cue { background:#1b303a; border-color:#ac8dc1; color:#fff0d7; }
.event-cue[data-kind="winner"] { background:#46374c; border-color:#efcf86; }
#closeEventCueButton { background:#10232b; border-color:#ba9dc988; }
.table-feedback { background:#1d3442f5; border-color:#d0b2e0; box-shadow:0 10px 24px #0005; }
.setup-scene-host.setup-gesture-eligible { background:#071d2938; border-color:#d8c3e6a6; box-shadow:inset 0 1px 14px #04131c33,0 0 16px #d1b6ea0c; }
.setup-scene-host.setup-gesture-active { border-color:#ffe1a2; }
.seat-you.setup-pickup-dock,.seat-you.setup-drop-target { outline-color:#cfb9ed; }
.seat-you.setup-drop-ready { outline-color:#c3f5df; background:linear-gradient(180deg,#244940,#132d34); }
@media(min-width:761px) {
  .score-chip { grid-template-columns:72px minmax(0,1fr); }
  .score-chip .player-avatar { width:72px; height:72px; margin-top:0; border-radius:18px; }
  .score-chip .name { font-size:13px; }
}
@media(max-width:760px) {
  .table-wrap,.friends-play .table-wrap { border-radius:20px 20px 0 0; box-shadow:inset 0 0 0 1px #c6a5e6,inset 0 0 0 4px #47364c,inset 0 0 30px #06192377; }
  .score-chip { grid-template-columns:40px minmax(0,1fr); grid-template-rows:41px auto auto; }
  .score-chip .player-avatar { width:40px; height:40px; border-radius:11px; }
}
@media(max-width:380px) {
  /* Four faces and three-digit scores must still fit a 320px viewport. */
  .score-chip { grid-template-columns:32px minmax(0,1fr); grid-template-rows:33px auto auto; padding-inline:4px; }
  .score-chip .player-avatar { width:32px; height:32px; border-radius:9px; }
  .score-chip .points { font-size:20px; }
}

/* End club-table skin. */

/* Original icon-first microphone: slash/state text never rely on color alone. */
#quickVoiceButton { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:44px; min-height:44px; }
.mic-icon { width:22px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
#quickVoiceButton[data-mic="on"] { background:#e4c779; color:#18251d; border-color:#e4c779; }
#quickVoiceButton[data-mic="on"] .mic-slash { display:none; }
#quickVoiceState { font-size:11px; font-weight:800; }
/* The announcement occupies its own top band; it never floats over targets. */
.event-cue { grid-area: announcement; margin:8px 8px 0; border:2px solid #141912; border-radius:3px; background:#f1e5c9; color:#161c18; box-shadow:3px 3px 0 #0a181b; transform:none; }
.event-cue[data-kind="winner"] { background:#e6c678; border-color:#141912; }
#eventCueTitle { font-family:Impact,"Arial Narrow","Franklin Gothic Medium",sans-serif; font-stretch:condensed; font-weight:1000; font-style:italic; font-size:clamp(32px,6vw,56px); letter-spacing:-.035em; line-height:.98; text-transform:uppercase; }
#eventCueActor { color:#26382c; font-weight:700; font-size:13px; }
#closeEventCueButton { background:#18251d; color:#fff6dd; border-color:#18251d; }
.game-card:has(> .event-cue:not([hidden])) { height:auto; grid-template-areas:"announcement" "toolbar" "mode" "social" "table" "actions"; grid-template-rows:auto auto auto auto minmax(348px,1fr) auto; }
@media(min-width:761px) { .game-card:has(> .event-cue:not([hidden])) { grid-template-areas:"announcement announcement" "toolbar toolbar" "mode social" "table table" "actions actions"; grid-template-rows:auto auto auto minmax(352px,1fr) auto; } }
.chat-overlay { z-index:75; }
.chat-dialog { width:min(480px,100%); max-height:calc(100svh - 24px); overflow:auto; text-align:left; }
.chat-dialog .menu-heading { position:sticky; top:-1px; z-index:1; background:#152c26; }
#chatHelp { font-size:13px; line-height:1.5; color:#d8ded3; }
.chat-messages { list-style:none; margin:12px 0; padding:0; max-height:min(36svh,320px); overflow:auto; overscroll-behavior:contain; }
.chat-messages li { padding:10px 2px; border-bottom:1px solid #d9d8c722; overflow-wrap:anywhere; }
.chat-messages strong { font-size:12px; color:#e6cb92; }
.chat-messages p { margin:4px 0 0; white-space:pre-wrap; font-size:15px; line-height:1.4; }
.chat-empty { color:#bfcbbf; font-size:14px; }
#chatDraft { display:block; width:100%; min-height:76px; resize:vertical; padding:10px; font:inherit; font-size:16px; border:1px solid #879a8c; border-radius:8px; background:#0e201b; color:#fff9e8; }
.chat-compose-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
#chatCount { margin-right:auto; font-size:12px; }
.chat-dialog button { min-height:44px; }
#chatStatus { min-height:2.8em; font-size:13px; line-height:1.4; }

.chat-messages strong,.chat-messages p { unicode-bidi:plaintext; }

/* Deadline-driven light ring, not an independent animation or a second clock. */
.score-strip[data-turn-warning="true"] .score-chip.current .player-avatar { position:relative; }
.score-strip[data-turn-warning="true"] .score-chip.current .player-avatar::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:3px; background:conic-gradient(#baffdf var(--turn-progress), #061721 0); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .score-strip .player-avatar::after { transition:none; animation:none; } }

@media(min-width:761px) { .score-strip[data-turn-warning="true"] .score-chip.current .player-avatar::after { padding:4px; } }

/* Viewport composition: fixed game frame, internally pannable board/panels. */
html,body { min-width:0; width:100%; height:100%; overflow:hidden; }
body .app-shell { width:min(1440px,100%); height:100dvh; min-height:0; margin:0 auto; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow:hidden; }
body .game-card,body.hand-setup .game-card,body .game-card:has(> .event-cue:not([hidden])) { width:100%; height:100%; min-height:0; max-height:100%; border-radius:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "mode" "table" "actions"; grid-template-rows:auto 48px minmax(0,1fr) 82px; overflow:hidden; }
.game-toolbar { min-height:0; }
.toolbar-actions { min-height:48px; height:48px; padding:2px 8px; flex-wrap:nowrap; gap:5px; }
.toolbar-actions .button,.toolbar-actions .mode-action { min-width:44px; min-height:44px; max-height:44px; padding:5px 10px; flex:0 0 auto; }
.toolbar-actions .table-title { margin-right:auto; }
.toolbar-actions #quickVoiceSpeakersButton { font-size:11px; padding-inline:5px; }
.toolbar-actions #openChatButton { color:#f0d493; }
#quickSoundToggle { display:none; }
.score-strip { padding:2px 5px; }
.score-chip { grid-template-columns:36px minmax(0,1fr); grid-template-rows:36px auto; gap:2px 5px; margin:1px 2px; padding:3px 5px; border-top-width:2px; }
.score-chip .player-avatar { grid-column:1; grid-row:1; width:36px; height:36px; margin:0; border-radius:10px; }
.score-chip .points { grid-column:2; grid-row:1; text-align:right; align-self:center; font-size:23px; }
.score-chip .rail-name { grid-column:1 / -1; grid-row:2; font-size:11px; }
.score-chip .name { font-size:11px; }
.rail-meta { grid-column:1 / -1; grid-row:3; margin:0; min-height:13px; font-size:10px; flex-wrap:nowrap; }
.rail-state { flex-wrap:nowrap; }
body .play-mode-strip { grid-area:mode; height:48px; min-height:0; padding:4px 10px; align-items:center; overflow:hidden; }
.play-mode-strip > span { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; }
.play-mode-strip strong,.play-mode-strip small { font-size:11px; line-height:15px; }
.play-mode-strip .mode-actions { display:none; }
body .event-cue { grid-area:mode; min-height:0; height:48px; margin:0 4px; padding:3px 7px; gap:5px; border-width:1px; box-shadow:none; z-index:2; }
#eventCueTitle { font-size:28px; line-height:26px; }
#eventCueActor { margin:0; font-size:11px; line-height:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#closeEventCueButton { min-height:44px; height:44px; padding:3px 6px; }
.game-card:has(> .event-cue:not([hidden])) > .play-mode-strip { visibility:hidden; }
.game-card:has(> #playModeStrip[data-critical="true"]) > .play-mode-strip { visibility:visible; }
.game-card:has(> #playModeStrip[data-critical="true"]) > .event-cue { visibility:hidden; }
body .table-wrap,body.friends-play .table-wrap,body.hand-setup .table-wrap,body .game-card:has(.event-cue:not([hidden])) .table-wrap { min-height:0; height:100%; grid-template-rows:minmax(0,1fr) 100px; padding:0 3px; border-width:2px; border-radius:14px 14px 0 0; overflow:visible; }
body .board-surface,body .game-card:has(.event-cue:not([hidden])) .board-surface { min-height:0; height:100%; overflow:hidden; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; }
body .board-surface.scrollable { overflow:auto; touch-action:pan-x pan-y pinch-zoom; scrollbar-width:thin; }
body .seat-you { height:100px; min-height:0; margin:0 -3px; padding:3px 4px 0; }
.you-line { min-height:19px; gap:3px; flex-wrap:nowrap; }
.you-line > div:first-child { flex:0 0 auto; }
.turn-status { min-width:0; }
.turn-label { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hand-rack { height:76px; }
.hand-tile { min-height:74px; }
body .move-area,body.hand-setup .move-area,body .move-area:has(> .setup-skip:not([hidden])) { position:relative; height:82px; min-height:0; padding:3px 6px; grid-template-columns:minmax(0,1fr); grid-template-rows:32px 44px; gap:0; }
.move-instruction { grid-column:1 / -1; grid-row:1; font-size:11px; line-height:15px; }
.move-actions { grid-column:1; grid-row:2; }
body.hand-setup .move-area { grid-template-columns:minmax(0,1fr) 76px; }
.setup-skip { grid-column:2; grid-row:2; min-width:44px; height:44px; min-height:44px; margin:0; padding:3px; font-size:11px; }
.hand-setup .board-empty { display:none; }
body .setup-scene-host { width:auto; height:min(calc(100% - 8px),160px); aspect-ratio:320 / 190; max-width:90%; left:50%; top:50%; transform:translate(-50%,-50%); }
body .setup-scene { width:100%; height:100%; }
body .setup-scene svg { width:100%; height:100%; }
body .overlay { inset:auto 0 auto; top:var(--panel-top,0px); height:var(--panel-height,100dvh); max-height:var(--panel-height,100dvh); padding:8px; overflow:hidden; align-items:center; }
body .result-modal { min-height:0; max-height:calc(var(--panel-height,100dvh) - 16px); overflow:auto; overscroll-behavior:contain; padding:12px; }
body .chat-dialog { display:flex; flex-direction:column; overflow:auto; }
.chat-dialog .menu-heading { flex:0 0 auto; margin-bottom:6px; }
.chat-messages { flex:1 1 auto; min-height:40px; max-height:28dvh; }
.chat-dialog #chatHelp { flex:0 0 auto; font-size:11px; line-height:14px; margin:4px 0; }
#chatDraft { flex:0 0 auto; min-height:44px; height:54px; max-height:90px; resize:none; }
.chat-compose-actions { flex:0 0 auto; margin-top:4px; }
#chatStatus { flex:0 0 auto; margin:4px 0 0; font-size:11px; line-height:14px; min-height:28px; }
body .table-social { display:flex; flex-wrap:wrap; margin:10px 0; padding:4px; min-height:44px; border-radius:8px; }
.table-social > p { flex-basis:100%; white-space:normal; }
.taunt-menu { bottom:auto; top:100%; }
body .coach-panel { margin:10px 0; }
#mobileSettingsButton[data-update="true"]::after { content:" •"; color:#baffdf; }
.viewport-guidance { display:none; }
@media(max-width:760px) {
  .toolbar-actions .table-title { display:none; }
  .toolbar-actions { justify-content:space-between; }
  .score-chip { grid-template-columns:28px minmax(0,1fr); grid-template-rows:28px auto 13px; padding:2px 4px; }
  .score-chip .player-avatar { width:28px; height:28px; border-radius:8px; }
  .score-chip .points { font-size:21px; }
  .score-chip .rail-name { line-height:13px; }
  .rail-count,.rail-turn,.rail-setup { font-size:9px; }
  .score-chip .control-badge { font-size:8px; }
}
@media(min-width:761px) and (min-height:650px) {
  .score-chip { grid-template-columns:64px minmax(0,1fr); grid-template-rows:64px auto; }
  .score-chip .player-avatar { width:64px; height:64px; border-radius:16px; }
  .score-chip .points { font-size:28px; }
}
/* Short landscape: give chrome its own sidebar instead of stacking above play. */
@media(min-width:568px) and (max-height:560px) {
  body .game-card,body.hand-setup .game-card,body .game-card:has(> .event-cue:not([hidden])) { grid-template-columns:clamp(140px,24vw,176px) minmax(0,1fr); grid-template-rows:48px minmax(0,1fr) 82px; grid-template-areas:"mode mode" "toolbar table" "toolbar actions"; }
  .game-toolbar { display:flex; flex-direction:column; border-right:1px solid #a8bcc144; }
  .toolbar-actions { height:auto; min-height:88px; padding:2px 4px; flex-wrap:wrap; justify-content:center; gap:0 4px; }
  .toolbar-actions .table-title { display:none; }
  .toolbar-actions .button,.toolbar-actions .mode-action { padding:4px 7px; }
  .score-strip { grid-template-columns:repeat(2,minmax(0,1fr)); padding:2px; }
  .score-chip { grid-template-columns:28px minmax(0,1fr); grid-template-rows:28px auto 13px; padding:2px; }
  .score-chip .player-avatar { width:28px; height:28px; border-radius:8px; }
  .score-chip .points { font-size:21px; }
  .rail-name { line-height:13px; }
  body .play-mode-strip,body .event-cue { height:48px; padding:5px; margin:0; }
  #eventCueTitle { font-size:25px; line-height:25px; }
  #eventCueActor { font-size:10px; line-height:12px; white-space:normal; max-height:24px; }
  body .event-cue { gap:2px; }
  #closeEventCueButton { font-size:10px; padding:2px; }
}
@media(max-width:319px),(max-height:319px),(max-width:567px) and (max-height:479px) {
  body .game-card { visibility:hidden; pointer-events:none; }
  .viewport-guidance { position:absolute; inset:0; display:flex; flex-wrap:wrap; align-content:center; gap:8px; padding:12px; overflow:auto; background:#102129; }
  .viewport-guidance h2 { font-size:18px; margin:0; }
  .viewport-guidance p { font-size:13px; line-height:1.4; margin:0; }
  .viewport-guidance button { min-height:44px; }
}

.friends-sheet-header { position:sticky; top:0; z-index:12; background:#142830; }
body[data-keyboard="true"] .chat-dialog #chatHelp,body[data-keyboard="true"] .chat-dialog #muteChatButton { display:none; }
body[data-keyboard="true"] .chat-messages { min-height:0; }

/* All legal branch actions stay visible; full descriptions remain accessible. */
body .move-actions,body .move-actions:not(:empty) { gap:3px; overflow-x:visible; }
body .move-actions .button { flex:1 1 0; min-width:44px; max-width:240px; padding:3px 4px; font-size:11px; line-height:12px; white-space:normal; min-height:44px; }

:root { --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px); --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); }
body[data-viewport-fit="false"] .game-card { visibility:hidden; pointer-events:none; }
body[data-viewport-fit="false"] .viewport-guidance { position:absolute; inset:0; display:flex; flex-wrap:wrap; align-content:center; gap:8px; padding:12px; overflow:auto; background:#102129; }
body[data-viewport-fit="false"] .viewport-guidance h2 { font-size:18px; margin:0; }
body[data-viewport-fit="false"] .viewport-guidance p { font-size:13px; line-height:1.4; margin:0; }
body[data-viewport-fit="false"] .viewport-guidance button { min-height:44px; }
.board-surface.scrollable .board-status,.board-surface.scrollable .layout-note { visibility:hidden; }
body .viewport-guidance { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
body .overlay { padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
/* Panel bounds subtract the same safe padding as the enclosing overlay. */
body .result-modal { max-height:max(0px,calc(var(--panel-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))); }

/* Preparation state owns the compact rail's full metadata width. */
.hand-setup .rail-meta .rail-count { display:none; }
.hand-setup .rail-state { width:100%; justify-content:space-between; gap:2px; }
.hand-setup .rail-setup { white-space:nowrap; flex:0 0 auto; overflow-wrap:normal; }
.hand-setup .rail-state .control-badge { white-space:nowrap; font-size:8px; }

.hand-setup .rail-state .control-badge { padding:1px 2px; letter-spacing:0; }
/* Short-window text budgets stay inside the reserved status band. */
@media(min-width:568px) and (max-height:560px) {
  #eventCueTitle { font-size:16px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #eventCueActor { white-space:nowrap; line-height:12px; max-height:12px; overflow:hidden; text-overflow:ellipsis; }
  .play-mode-strip > span { max-width:100%; gap:0; }
  .play-mode-strip strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; font-size:10px; line-height:12px; }
  .play-mode-strip small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:10px; line-height:12px; }
}
body[data-keyboard="true"] .chat-messages { min-height:56px; flex:0 0 56px; }
body[data-keyboard="true"] #chatDraft { height:44px; min-height:44px; }
body[data-keyboard="true"] #chatStatus { min-height:14px; }

/* The short landscape announcement spans the table; compact rails get two metadata lines. */
@media(min-width:568px) and (max-height:560px) {
  .score-chip { grid-template-columns:24px minmax(0,1fr); grid-template-rows:24px 13px 26px; gap:2px 3px; padding:2px; }
  .score-chip .player-avatar { width:24px; height:24px; border-radius:7px; }
  .score-chip .points { font-size:18px; line-height:24px; white-space:nowrap; }
  .rail-meta { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:12px 14px; gap:0; min-height:26px; }
  .rail-count { grid-row:1; white-space:nowrap; overflow-wrap:normal; font-size:9px; line-height:12px; }
  .rail-state,.hand-setup .rail-state { grid-row:2; width:100%; min-width:0; display:flex; justify-content:space-between; flex-wrap:nowrap; gap:2px; }
  .rail-turn,.rail-setup { white-space:nowrap; font-size:9px; line-height:12px; }
  .score-chip .control-badge { white-space:nowrap; padding:1px 2px; font-size:8px; letter-spacing:0; }
  #eventCueTitle { font-size:28px; line-height:27px; white-space:nowrap; }
  #eventCueActor { line-height:12px; max-height:12px; }
  body .event-cue { padding:3px 7px; }
}
@media(min-width:568px) and (max-height:560px) {
  .toolbar-actions { column-gap:0; }
  .toolbar-actions .mode-action { padding-inline:0; font-size:10px; }
  .toolbar-actions #quickVoiceSpeakersButton { padding-inline:0; font-size:10px; }
}

/* Count and presence/turn are distinct rows at every width, including AWAY +8s. */
.score-chip { grid-template-rows:36px auto 26px; }
.rail-meta { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:12px 14px; gap:0; min-height:26px; }
.rail-count { grid-row:1; white-space:nowrap; line-height:12px; }
.rail-state,.hand-setup .rail-state { grid-row:2; width:100%; justify-content:space-between; flex-wrap:nowrap; gap:2px; }
.rail-turn,.rail-setup,.score-chip .control-badge { white-space:nowrap; }
@media(max-width:760px) { .score-chip { grid-template-rows:28px auto 26px; } }
@media(min-width:761px) and (min-height:650px) { .score-chip { grid-template-rows:64px auto 26px; } }
@media(min-width:568px) and (max-height:560px) { .score-chip { grid-template-rows:24px 13px 26px; } }
#menuDialog .campaign-card { margin:10px 0; }

/* Hand-dock budget: header, rotated faces, focus ring and bottom rim all fit. */
:root { --hand-dock-height:100px; --hand-label-height:18px; --hand-button-height:72px; --hand-bottom-space:10px; }
body .table-wrap,body.friends-play .table-wrap,body.hand-setup .table-wrap,body .game-card:has(.event-cue:not([hidden])) .table-wrap { grid-template-rows:minmax(0,1fr) var(--hand-dock-height); }
body .seat-you { height:var(--hand-dock-height); display:grid; grid-template-rows:var(--hand-label-height) minmax(0,1fr); row-gap:0; padding:2px 4px var(--hand-bottom-space); }
body .you-line { height:var(--hand-label-height); min-height:0; line-height:var(--hand-label-height); align-items:center; flex-wrap:nowrap; }
.you-line .turn-status { flex-wrap:nowrap; min-width:0; max-width:75%; }
.you-line .turn-label { min-width:0; flex:1 1 auto; line-height:var(--hand-label-height); }
.you-line .turn-countdown { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body .hand-rack { height:100%; min-height:0; padding:0; align-items:center; overflow:visible; }
body .hand-tile { height:var(--hand-button-height); min-height:44px; max-height:100%; }
@media(min-width:761px) and (min-height:650px) {
  :root { --hand-dock-height:124px; --hand-label-height:20px; --hand-button-height:80px; }
}
/* Local game-sound recovery occupies the existing action row, never the hand. */
body .move-area,body .move-area:has(> .setup-skip:not([hidden])) { grid-template-columns:minmax(0,1fr) 44px; column-gap:3px; }
body.hand-setup .move-area { grid-template-columns:minmax(0,1fr) 76px 44px; }
body #quickSoundToggle { display:flex; grid-row:2; grid-column:2; flex-direction:column; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; min-height:44px; padding:2px; gap:0; color:#e9d6a2; }
body.hand-setup #quickSoundToggle { grid-column:3; }
#quickSoundToggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#quickSoundState { font-size:10px; line-height:13px; font-weight:700; }
#quickSoundToggle[data-sound="on"] .sound-slash { display:none; }
#quickSoundToggle[data-sound="off"] .sound-waves { display:none; }

/* Avatar-linked theatre: decoration never owns input or viewport allocation. */
body .game-card { position:relative; }
.table-effects { position:absolute; inset:0; width:100%; height:100%; z-index:8; pointer-events:none; overflow:hidden; }
.table-effects * { pointer-events:none; }
body .game-toolbar { z-index:10; }
body .play-mode-strip,body .event-cue,body .move-area { position:relative; z-index:9; }
body .seat-you { z-index:9; }
body .board-endpoints { z-index:9; }
body .board-nav { z-index:10; }
body.hand-setup .board-status,body.hand-setup .layout-note { visibility:hidden; }
body .setup-scene-host { left:8px; right:8px; top:8px; bottom:8px; width:auto; height:auto; max-width:none; aspect-ratio:auto; transform:none; }
body .setup-scene,body .setup-scene svg { width:100%; height:100%; max-width:none; margin:0; overflow:visible; }
body .setup-scene .setup-bone { filter:none; }
body .setup-scene-host.setup-gesture-active { z-index:8; }
body .setup-scene--wash .setup-bone,body .setup-scene--pickup .setup-bone--pickup { transform-box:fill-box; transform-origin:center; }
.table-effects .effect-label { font-style:italic; }
@media(prefers-reduced-motion:reduce) { .table-effects * { animation:none!important; transition:none!important; } }
.reduced-motion .table-effects * { animation:none!important; transition:none!important; }

body .setup-scene-host.setup-gesture-active { z-index:7; }
body.hand-setup #boardSurface:has(.setup-gesture-active) { z-index:auto; }

/* Explicit local/game lifecycle controls stay inside the scrollable Menu. */
.game-command-status { font-size:12px;line-height:1.4;margin:6px 0 10px; }
.game-command-confirm { padding:10px;border:1px solid #e0bb6d;border-radius:9px;background:#162d32; }
.game-command-confirm p { margin:0 0 10px;line-height:1.45; }
.match-tools { flex-wrap:wrap; }
#resumeSoloButton { min-height:44px; }

/* Home owns the viewport until an explicit game choice; panels scroll internally. */
body.at-home .game-card, body.at-home #viewportGuidance { display:none!important; }
.home-screen { height:100%;min-height:0;width:100%;max-width:960px;margin:auto;padding:clamp(12px,2.5dvh,28px);display:flex;flex-direction:column;justify-content:flex-start;justify-content:safe center;gap:14px;overflow:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 20%,#29504488,transparent 70%); }
.home-brand { text-align:center; }
.home-brand .eyebrow { margin:0 0 7px;font-size:12px;letter-spacing:.14em; }
.home-brand h1 { margin:0;font-size:clamp(28px,4vw,40px);line-height:1.05;font-weight:850;letter-spacing:-.025em;color:var(--ink); }
.home-brand h1 span { color:var(--amber);font-size:.8em;letter-spacing:0; }
.home-status { margin:0;text-align:center;font-size:18px;line-height:1.35;overflow-wrap:break-word; }
.home-status:empty { display:none; }
.home-continue,.home-primary { display:grid;grid-template-columns:minmax(0,1fr);gap:12px; }
.home-screen button { min-height:56px;white-space:normal;touch-action:manipulation; }
.home-screen .home-choice { min-height:82px;padding:14px 20px;text-align:left;border-radius:12px;display:flex;flex-direction:column;justify-content:center;gap:4px; }
.home-choice strong { font-size:25px;line-height:1.2;font-weight:800; }
.home-choice span { font-size:17px;line-height:1.3;font-weight:500; }
.home-primary .home-choice { background:var(--panel-2);border-color:var(--line);color:var(--ink);box-shadow:none; }
.home-primary .home-choice:hover { background:var(--panel);border-color:var(--amber); }
.home-primary .home-choice span { color:var(--muted); }
.home-continue .home-choice { border-width:2px; }
.home-tools { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.home-support { display:contents; }
.home-tools:has(.home-find:not([hidden])) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-tools button { font-size:17px;line-height:1.25; }
.home-footnote { margin:0;text-align:center;font-size:14px;line-height:1.35;color:var(--muted); }
.home-new-confirm { padding:20px;border:1px solid var(--amber);border-radius:12px;background:var(--panel); }
.home-new-confirm h2 { margin:0 0 10px;font-size:26px; }
.home-new-confirm p { margin:0 0 18px;font-size:18px;line-height:1.45; }
.home-new-confirm div { display:flex;flex-wrap:wrap;gap:12px; }
.home-new-confirm button { flex:1 1 180px;font-size:18px; }
@media(max-height:720px) {
  .home-screen { gap:10px;padding:12px; }
  .home-brand .eyebrow { margin-bottom:4px;font-size:11px; }
  .home-brand h1 { font-size:30px; }
  .home-status { font-size:16px; }
  .home-screen .home-choice { min-height:66px;padding:10px 16px;gap:3px; }
  .home-choice strong { font-size:22px; }
  .home-choice span { font-size:15px; }
  .home-screen button { min-height:48px; }
  .home-tools button { font-size:16px; }
  .home-footnote { font-size:13px; }
}
@media(max-width:567px) and (max-height:620px) {
  .home-screen { gap:8px;padding:10px; }
  .home-brand .eyebrow { font-size:10px;margin-bottom:3px; }
  .home-brand h1 { font-size:26px; }
  .home-status { font-size:15px; }
  .home-primary,.home-continue { gap:8px; }
  .home-screen .home-choice { min-height:56px;padding:8px 12px;gap:2px; }
  .home-choice strong { font-size:19px; }
  .home-choice span { font-size:13px; }
  .home-tools { gap:8px; }
  .home-tools button { min-height:44px;font-size:15px;padding:7px; }
  .home-footnote { font-size:12px; }
}
@media(max-height:560px) and (min-width:568px) {
  .home-screen { display:grid;grid-template-columns:minmax(210px,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto auto auto auto;gap:8px 20px;align-content:start;align-content:safe center;padding:12px 18px; }
  .home-brand { grid-column:1;grid-row:1;align-self:end; }
  .home-brand h1 { font-size:30px; }
  .home-status { grid-column:1;grid-row:2;font-size:15px; }
  .home-continue { grid-column:1;grid-row:3; }
  .home-primary,.home-new-confirm { grid-column:2;grid-row:1/6;align-self:center; }
  .home-primary { gap:10px; }
  .home-tools { display:contents; }
  .home-support { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column:1;grid-row:4;gap:6px; }
  .home-find { grid-column:2;grid-row:5; }
  .home-screen:has(.home-find:not([hidden])) .home-primary { grid-row:1/5; }
  .home-tools button { min-height:44px;font-size:15px;padding:7px; }
  .home-footnote { grid-column:1;grid-row:5;font-size:12px; }
  .home-continue .home-choice { min-height:60px;padding:8px 12px;text-align:center; }
  .home-continue .home-choice strong { font-size:20px; }
  .home-continue .home-choice span { font-size:14px; }
  .home-new-confirm { padding:14px; }
  .home-new-confirm h2 { font-size:22px; }
  .home-new-confirm p { font-size:16px;margin-bottom:12px; }
  .home-new-confirm button { min-height:48px;font-size:16px;flex-basis:120px; }
}

/* Exact-piece pickup: a pixel-sized grid pans only inside the felt. */
body .setup-scene-host.selection-pool { pointer-events:auto;touch-action:pan-x pan-y;overflow:auto;overscroll-behavior:contain;border:1px dashed #d8c3e6a6;border-radius:8px; }
body .selection-pool .setup-scene { width:100%;height:100%; }
body .selection-pool .setup-scene svg { max-width:none;max-height:none;overflow:visible; }
body .selection-pool .setup-bone { animation:none!important; }
body .selection-pool .setup-bone:focus { outline:none;filter:drop-shadow(0 0 3px #fff8c9); }
body .selection-pool.pool-pointer-active { z-index:7; }

/* Confirmed typed chat only. Bubbles never intercept play or take focus. */
.chat-bubble-layer { position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden; }
.chat-bubble-layer * { pointer-events:none; }
.chat-bubble { position:absolute;box-sizing:border-box;padding:10px 14px;border:2px solid #18323a;border-radius:18px 18px 18px 5px;background:#fff1d4;color:#142c31;box-shadow:none;animation:chat-bubble-in .2s ease-out both; }
.chat-bubble strong { display:block;max-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:22px; }
.chat-bubble p { margin:3px 0 0;font-size:18px;line-height:24px;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden; }
.chat-bubble small { display:block;font-size:13px;line-height:18px;margin-top:4px; }
.chat-bubble small:empty { display:none; }
.chat-bubble[data-stage="leaving"] { opacity:0;transition:opacity .25s ease-out; }
@keyframes chat-bubble-in { from { opacity:0;transform:scale(.75); } to { opacity:1;transform:scale(1); } }
.reduced-motion .chat-bubble { animation:none!important;transition:none!important; }
@media(prefers-reduced-motion:reduce) { .chat-bubble { animation:none!important;transition:none!important; } }

/* Plain next-step guidance: keep the short-screen action budget and touch targets. */
.move-instruction { font-size:13px; line-height:16px; }
body .move-actions .button { font-size:12px; line-height:15px; }
@media(min-height:650px) {
  body .game-card,body.hand-setup .game-card,body .game-card:has(> .event-cue:not([hidden])) { grid-template-rows:auto 48px minmax(0,1fr) 90px; }
  body .move-area,body.hand-setup .move-area,body .move-area:has(> .setup-skip:not([hidden])) { height:90px; grid-template-rows:40px 44px; }
  .move-instruction { font-size:16px; line-height:20px; }
  body .move-actions .button { font-size:15px; line-height:18px; }
  .turn-label { font-size:16px; }
}

/* Music stays in Menu, separate from sound effects and microphone controls. */
.music-settings { padding:12px 0; border-top:1px solid #ffffff24; }
.music-settings h3 { margin:0 0 8px; font-size:18px; color:#f8edd7; }
.music-settings .settings-tools { margin:10px 0; }
.music-settings .button { min-height:44px; }
.music-settings input[type="range"] { min-height:44px; }

/* Direct Home uses the existing confirmation, without a hunt through Menu. */
#menuDialog.direct-home > :not(.menu-heading):not(#gameCommandStatus):not(#gameCommandConfirm) { display:none!important; }
#menuDialog.direct-home { width:min(540px,100%); }
#menuDialog.direct-home .game-command-confirm { font-size:17px; }
#menuDialog.direct-home .game-command-confirm button { min-height:44px; }
#gameHomeButton { font-weight:800; }
.friends-sheet-header:has(#friendsHomeButton:not([hidden])) { flex-wrap:wrap; }
.friends-sheet-header:has(#friendsHomeButton:not([hidden])) > div { flex:1 1 160px; }
@media(max-width:760px) {
  .toolbar-actions { padding-inline:4px; gap:2px; }
  .toolbar-actions .button,.toolbar-actions .mode-action { padding-inline:5px; min-width:44px; font-size:12px; }
  .toolbar-actions #quickVoiceSpeakersButton { font-size:10px; padding-inline:0; }
}
@media(min-width:568px) and (max-height:560px) {
  .toolbar-actions { padding-inline:2px; gap:0; }
  .toolbar-actions .button,.toolbar-actions .mode-action { padding-inline:3px; }
}

/* Music has its own reserved place in the existing status row, never over play. */
body #quickMusicToggle { grid-area:mode; align-self:center; justify-self:end; z-index:10; width:80px; min-width:80px; height:44px; min-height:44px; margin:0 5px 0 0; padding:3px; font-size:12px; line-height:16px; font-weight:800; }
body .play-mode-strip { padding-right:92px; }
body .event-cue { margin-right:91px; }
@media(max-width:420px) {
  body #eventCueTitle { font-size:20px; line-height:22px; white-space:nowrap; }
  body #closeEventCueButton { padding-inline:3px; font-size:10px; }
}


/* Table-night materials: static original artwork; existing layout and hit areas stay put. */
.home-screen {
  background:radial-gradient(ellipse at 14% 12%,#d9ae591c,transparent 44%),radial-gradient(ellipse at 82% 28%,#8f679d20,transparent 48%),repeating-linear-gradient(108deg,#ffffff02 0 1px,transparent 1px 6px),linear-gradient(145deg,#183936,#10262d 55%,#171f2d);
  box-shadow:inset 0 0 0 1px #e3c28436,inset 0 0 70px #06101555;
}
.home-brand-lockup { display:flex;align-items:center;justify-content:center;gap:12px; }
.home-domino-crest { width:94px;height:75px;flex:0 0 94px; }
.home-brand h1 { text-align:left;text-shadow:0 2px 0 #061a20; }
.home-brand h1 span { color:#f3d083; }
.home-brand .eyebrow { color:#d9c598; }
.home-invitation { margin:9px 0 0;color:#deebe1;font-size:16px;line-height:1.3;font-weight:600; }
.home-primary .home-choice { background:linear-gradient(115deg,#244b4b,#193740);border-color:#77978b;box-shadow:inset 4px 0 #c0d7ac,0 3px 0 #071b23; }
.home-primary #homeFriendsButton { background:linear-gradient(115deg,#423c51,#243641);border-color:#9e879e;box-shadow:inset 4px 0 #d1b0d8,0 3px 0 #071b23; }
.home-primary #homeJoinButton { background:linear-gradient(115deg,#384b41,#203a3d);border-color:#949773;box-shadow:inset 4px 0 #dbc38c,0 3px 0 #071b23; }
.home-primary .home-choice:hover { background:#31565a;border-color:#f3d083; }
.home-primary .home-choice strong { color:#fff4df; }
.home-primary .home-choice span { color:#d7e3dc; }
.home-continue .home-choice { background:linear-gradient(110deg,#ffe3a1,#d7b36c);box-shadow:inset 0 1px #fff6d5,0 3px 0 #705735; }
.home-tools button { background:linear-gradient(180deg,#263d43,#182d35);border-color:#69818a; }
body .table-wrap,body.friends-play .table-wrap {
  background:radial-gradient(ellipse at 45% 35%,#4a8d8670,transparent 68%),repeating-linear-gradient(92deg,#fff7dc06 0 1px,transparent 1px 5px),repeating-linear-gradient(2deg,#061a2505 0 1px,transparent 1px 5px),linear-gradient(135deg,#285c62,#153943);
  border-left-color:#58405c;border-right-color:#58405c;
  box-shadow:inset 0 0 0 1px #e4c793,inset 0 0 0 4px #583e59,inset 0 0 0 5px #bc9aa43d,inset 0 0 36px #071d2b66;
}
.toolbar-actions { background:linear-gradient(105deg,#173332,#251f32); }
.score-strip { background:linear-gradient(180deg,#27333c,#17262f); }
.score-chip.current { background:linear-gradient(120deg,#60506b77,#2e625c66);border-top-color:#f3d083; }
.seat-you { background:linear-gradient(180deg,#1c3840,#14252f);border-top-color:#d0b78c6b; }
.seat-you::after { background:linear-gradient(90deg,#49374e,#86617a,#49374e);border-color:#d2b58e88; }
.board-tile .domino { box-shadow:0 3px 3px #03182288,0 1px 0 #fff2; }
.hand-tile .domino { box-shadow:3px 2px 4px #03101a99,1px 0 0 #fff2; }
@media(max-height:720px) {
  .home-invitation { display:none; }
  .home-domino-crest { width:76px;height:61px;flex-basis:76px; }
  .home-brand-lockup { gap:9px; }
}
@media(max-width:567px) and (max-height:620px) {
  .home-domino-crest { width:62px;height:50px;flex-basis:62px; }
  .home-brand-lockup { gap:7px; }
}
@media(max-height:560px) and (min-width:568px) {
  .home-brand-lockup { gap:7px; }
  .home-domino-crest { width:62px;height:50px;flex-basis:62px; }
  .home-brand h1 { font-size:28px; }
}
/* Saved choices take priority over decoration; controls retain their full size. */
.home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-invitation { display:none; }
@media(min-height:721px) and (max-height:900px) {
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) { gap:10px;padding:12px; }
}
@media(max-height:560px) and (min-width:568px) and (max-width:680px) {
  .home-domino-crest { width:40px;height:32px;flex-basis:40px; }
  .home-brand-lockup { gap:6px; }
}
/* Two saved games use rows, not a tall side stack, in short landscape. */
@media(max-height:560px) and (min-width:568px) {
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto auto;gap:6px 10px;padding:8px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-brand { grid-column:1;grid-row:1;align-self:center; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-brand .eyebrow { display:none; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-status { grid-column:2;grid-row:1;align-self:center; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-continue { grid-column:1/-1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary { grid-column:1/-1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary .home-choice { padding-left:10px;padding-right:10px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-tools { display:grid;grid-column:1/-1;grid-row:4;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-support { display:contents; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-find { grid-column:auto;grid-row:auto; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-footnote { grid-column:1/-1;grid-row:5; }
}
@media(max-height:560px) and (min-width:568px) and (max-width:800px) {
  .home-domino-crest { width:40px;height:32px;flex-basis:40px; }
  .home-brand-lockup { gap:6px; }
}
/* Minimum supported landscape: preserve touch size, compact only max-state copy. */
@media(max-height:560px) and (min-width:568px) and (max-width:620px) {
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) { gap:4px 10px;padding:6px; }
.home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary .home-choice { padding:8px 7px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary .home-choice strong { font-size:20px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary .home-choice span { font-size:14px; }
}
/* End table-night materials. */

/* Home music is an explicit gesture, separate from microphone and game sounds. */
.home-footnote > p { margin:6px 0 0; }
.home-music { display:flex;align-items:center;justify-content:center;gap:10px;text-align:left; }
.home-screen .home-music button { min-height:44px;flex:0 0 auto;padding:8px 14px;font-size:16px; }
.home-music p { margin:0;max-width:320px;font-size:14px;line-height:1.35;overflow-wrap:anywhere; }
@media(max-height:560px) and (min-width:568px) {
  .home-music { gap:6px; }
  .home-screen .home-music button { padding:7px 10px;font-size:14px; }
  .home-music p { font-size:12px; }
}

/* Keep the added music control in the existing footer row on short landscape. */
@media(max-height:560px) and (min-width:568px) {
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-footnote { display:flex;align-items:center;gap:10px;text-align:left; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-music { flex:1;justify-content:flex-start; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-footnote > p { margin:0;max-width:145px;flex:0 1 145px;font-size:12px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-brand h1 { font-size:24px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-music p { max-width:240px; }
}
/* Two saved options share a row before decorative space crowds useful controls. */
@media(max-width:567px) and (max-height:900px) {
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) { gap:8px;padding:10px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-continue { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-choice { min-height:64px;padding:9px 12px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-choice strong { font-size:21px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-choice span { font-size:14px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-brand .eyebrow { display:none; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-brand h1 { font-size:28px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-domino-crest { width:62px;height:50px;flex-basis:62px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-status { font-size:15px; }
}
@media(max-width:567px) and (max-height:620px) {
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) { gap:4px;padding:6px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-domino-crest { display:none; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-brand h1 { display:flex;align-items:baseline;justify-content:center;gap:5px;font-size:22px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-brand h1 br { display:none; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-choice { min-height:44px;padding:7px 8px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-choice strong { font-size:18px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary .home-choice span { display:none; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary, .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-continue { gap:6px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-status { font-size:14px;line-height:1.25; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-tools { gap:6px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-tools button { min-height:44px;padding:5px;font-size:14px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-footnote > p { margin-top:3px; }
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-music p { font-size:13px; }
}
/* A short landscape footer spans the table; it never squeezes into the left rail. */
@media(max-height:560px) and (min-width:568px) {
  .home-screen { gap:4px 10px;padding:6px; }
  .home-primary,.home-new-confirm,
  .home-screen:has(.home-find:not([hidden])) .home-primary { grid-row:1/4; }
  .home-primary { gap:6px; }
  .home-screen .home-primary .home-choice { min-height:56px;padding:7px 10px;gap:2px; }
  .home-primary .home-choice strong { font-size:20px; }
  .home-primary .home-choice span { font-size:13px; }
  .home-tools { display:grid;grid-column:1/-1;grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
  .home-support { display:contents; }
  .home-find { grid-column:auto;grid-row:auto; }
  .home-footnote { grid-column:1/-1;grid-row:5;display:flex;align-items:center;gap:10px;text-align:left;min-width:0; }
  .home-music { flex:1;min-width:0;justify-content:flex-start; }
  .home-music p { min-width:0;max-width:300px;overflow-wrap:break-word; }
  .home-footnote > p { margin:0;max-width:145px;flex:0 1 145px;font-size:12px; }
}

/* Minimum landscape keeps every action and distinguishes both saved-game choices. */
@media(min-width:568px) and (max-width:620px) and (max-height:360px) {
  .home-screen:has(#homeContinue:not([hidden])):has(#homeResumeSoloButton:not([hidden])):has(#homeResumeFriendsButton:not([hidden])) .home-primary .home-choice span { display:none; }
}

/* Friends entry must remain usable above a landscape software keyboard. The
   sheet is the only scroller; status, recovery and saved-seat content stay in it. */
body #friendsDialog { overflow:auto; overscroll-behavior:contain; scroll-behavior:auto; overflow-anchor:none; }
body #friendsDialog .room-field input, body #friendsDialog .room-field select { font-size:16px; }
body #friendsDialog .friends-sheet-header .button { min-width:44px; min-height:44px; }
body[data-friends-keyboard="true"] #friendsDialog { padding:0; }
body[data-friends-keyboard="true"] .friends-sheet-header { padding:6px 10px; gap:8px; }
body[data-friends-keyboard="true"] .friends-sheet-header h2 { font-size:18px; line-height:1.2; }
body[data-friends-keyboard="true"] .friends-sheet-header .eyebrow,
body[data-friends-keyboard="true"] #friendsIntro { display:none; }
body[data-friends-keyboard="true"] .friends-sheet-body { padding:10px 12px 16px; }
body[data-friends-keyboard="true"] .room-status { margin-bottom:10px; }
body[data-friends-keyboard="true"] .room-entry-options { margin:12px 0; }

/* A stable Skip slot uses the existing action dock, never an overlay.
   Reserve it even when Off so OS preference changes cannot move input targets. */
body .move-area,body.hand-setup .move-area,body .move-area:has(> .setup-skip:not([hidden])) { grid-template-columns:minmax(0,1fr) 44px 44px; }
body #quickSoundToggle,body.hand-setup #quickSoundToggle { grid-column:3; }
body.has-animation-skip .move-actions { grid-column:1; }
body.has-animation-skip .setup-skip { grid-column:2; grid-row:2; min-width:44px; min-height:44px; height:44px; }
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.table-feedback.motion-skipped { animation:none!important; transition:none!important; }

#clearSelectionButton .selection-label-compact { display:none; }
@media(max-width:380px) {
  #clearSelectionButton .selection-label-full { display:none; }
  #clearSelectionButton .selection-label-compact { display:inline; white-space:nowrap; }
  body .game-card .move-area { padding-inline:2px; column-gap:2px; }
  body .game-card .move-actions,body .game-card .move-actions:not(:empty) { gap:1px; }
  body .game-card .move-actions .button { padding:3px 1px; font-size:11px; line-height:12px; overflow-wrap:anywhere; }
}
/* House-rule status is separate from score: a checked-in zero stays checked in.
   One compact line per seat; no controls or board targets are reduced. */
.rail-qualification { grid-column:1 / -1; grid-row:4; display:flex; align-items:center; gap:3px; min-width:0; height:14px; font-size:11px; line-height:14px; font-weight:700; white-space:nowrap; color:#f2d69d; }
.rail-qualification.checked-in { color:#c7edbd; }
.rail-qualification .qualified-mark { font-size:11px; }
@media(max-width:380px),(min-width:568px) and (max-height:560px) {
  .rail-qualification { gap:2px; font-size:10px; }
}
/* Entry math takes priority over a long actor name and optional commentary.
   Reuse the existing 48px top band, including its 44px Dismiss control. */
.event-cue[data-entry="true"] #eventCueLive { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:22px 14px; column-gap:6px; align-items:center; }
body .event-cue[data-entry="true"] #eventCueTitle { font-size:23px; line-height:22px; }
#eventCueQualification { min-width:0; font-family:Arial,sans-serif; font-size:12px; line-height:16px; font-weight:800; white-space:nowrap; color:#26382c; }
.event-cue[data-entry="true"] .event-cue-details { grid-column:1 / -1; }
.event-cue[data-entry="true"] #eventCueComment { display:none; }
/* The six-action Friends toolbar needs three 44px targets per row, and each
   two-column seat needs room for its complete checked-in label. */
@media(min-width:568px) and (max-height:560px) {
  body .game-card,body.hand-setup .game-card,body .game-card:has(> .event-cue:not([hidden])) { grid-template-columns:clamp(160px,24vw,176px) minmax(0,1fr); }
  .toolbar-actions { flex-shrink:0; }
  .score-strip { padding-block:1px; }
  .score-chip { row-gap:1px; }
}

/* Group rematch consent stays with the completed result, never over the board. */
.rematch-panel { margin:10px 0; padding:10px; border:1px solid #c5b77c66; border-radius:8px; text-align:left; background:#102a2a; }
.rematch-panel h3 { margin:0 0 6px; font-size:17px; }
#rematchStatus,#rematchHelp { font-size:14px; line-height:1.4; margin:6px 0; }
.rematch-seats { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px; padding:0; margin:8px 0; }
.rematch-seats li { min-width:0; font-size:12px; line-height:16px; }
.rematch-seats li span,.rematch-seats li strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rematch-seats strong { color:#d8e8bd; }
.rematch-actions { gap:6px; margin-top:8px; }
.rematch-actions .button { min-width:44px; min-height:44px; flex:1 1 140px; white-space:normal; }

/* Cutthroat table clarity: original, quiet cues on existing touch targets.
   No new overlay, board total, geometry or animation is introduced. */
.hand-tile.is-playable:not([aria-pressed="true"]) .domino {
  outline:2px solid #94e1c5;
  outline-offset:1px;
  filter:none;
}
.hand-tile[aria-pressed="true"] .domino {
  outline:3px solid #ffe2a0;
  outline-offset:2px;
  filter:drop-shadow(0 0 3px #ffe2a055);
}
.board-endpoint.legal {
  border-color:#b9f4e0;
  background:#103f42;
  color:#fff4d8;
  box-shadow:0 0 0 2px #071c24cc;
}
.board-endpoint.legal:has(.endpoint-match)::after { content:none; }
.endpoint-match { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:20px; font-weight:800; line-height:1; pointer-events:none; }
.endpoint-match::before { content:'MATCH'; font-size:8px; line-height:10px; letter-spacing:.3px; color:#b9f4e0; }
.board-endpoint.drop-hover { border-color:#ffe2a0; background:#4b442e; }
.score-chip.current {
  border-color:#f3d083;
  box-shadow:inset 0 0 0 1px #f3d08370;
  background:linear-gradient(120deg,#514449,#214c49);
}
.score-chip.current .rail-turn { color:#fff3d0; font-weight:800; }
@media(forced-colors:active) {
  .hand-tile.is-playable .domino { outline:2px solid Highlight; }
  .hand-tile[aria-pressed="true"] .domino { outline:3px double Highlight; }
  .score-chip.current,.board-endpoint.legal { border-color:Highlight; }
}

/* Selected destinations take priority over the optional floating recenter button. */
.board-surface.has-placement-targets .board-nav { visibility:hidden; pointer-events:none; }

/* Landscape play gives the felt the main column at every sufficiently wide
   available size. Data comes only from layout viewport minus safe-area insets;
   keyboard visualViewport changes remain confined to the existing overlays. */
body[data-table-layout="landscape"] { --landscape-sidebar:clamp(160px,min(20vw,calc(var(--table-available-height,100dvh) * .16 + 64px)),224px); --landscape-actions:calc(clamp(70px,calc(var(--table-available-height,100dvh) * .05 + 42px),74px) + clamp(0px,calc(var(--table-available-height,100dvh) * .08 - 64px),16px)); --landscape-instruction:calc(var(--landscape-actions) - 46px); --landscape-avatar:calc(clamp(24px,calc(var(--table-available-height,100dvh) * .05 - 4px),28px) + clamp(0px,calc(var(--table-available-height,100dvh) * .06 - 48px),12px)); --hand-dock-height:calc(clamp(88px,calc(var(--table-available-height,100dvh) * .1 + 32px),96px) + clamp(0px,calc(var(--table-available-height,100dvh) * .14 - 112px),28px)); --hand-label-height:calc(clamp(16px,calc(var(--table-available-height,100dvh) * .025 + 2px),18px) + clamp(0px,calc(var(--table-available-height,100dvh) * .01 - 8px),2px)); --hand-button-height:calc(clamp(56px,calc(var(--table-available-height,100dvh) * .15 - 28px),68px) + clamp(0px,calc(var(--table-available-height,100dvh) * .06 - 48px),12px)); --hand-bottom-space:10px; }
body[data-table-layout="landscape"] .game-card,body[data-table-layout="landscape"].hand-setup .game-card,body[data-table-layout="landscape"] .game-card:has(> .event-cue:not([hidden])) {
    grid-template-columns:var(--landscape-sidebar) minmax(0,1fr);
    grid-template-rows:44px minmax(0,1fr) var(--landscape-actions);
    grid-template-areas:"toolbar mode" "toolbar table" "toolbar actions";
  }
body[data-table-layout="landscape"] .game-toolbar { display:flex; flex-direction:column; border-right:1px solid #a8bcc144; }
body[data-table-layout="landscape"] .toolbar-actions { height:auto; min-height:88px; flex:0 0 auto; padding:2px; flex-wrap:wrap; justify-content:center; gap:0; }
body[data-table-layout="landscape"] .toolbar-actions .table-title { display:none; }
body[data-table-layout="landscape"] .toolbar-actions .button,body[data-table-layout="landscape"] .toolbar-actions .mode-action { min-width:44px; min-height:44px; height:44px; padding:4px 5px; font-size:11px; }
body[data-table-layout="landscape"] .toolbar-actions #quickVoiceSpeakersButton { padding-inline:0; font-size:10px; }
body[data-table-layout="landscape"] .score-strip { grid-template-columns:repeat(2,minmax(0,1fr)); padding:1px 2px; }
body[data-table-layout="landscape"] .score-chip { grid-template-columns:var(--landscape-avatar) minmax(0,1fr); grid-template-rows:var(--landscape-avatar) 16px 26px 14px; padding:2px; gap:1px 3px; }
body[data-table-layout="landscape"] .score-chip .player-avatar { width:var(--landscape-avatar); height:var(--landscape-avatar); border-radius:8px; }
body[data-table-layout="landscape"] .score-chip .points { font-size:clamp(21px,calc(var(--table-available-height,100dvh) * .025 + 1px),26px); line-height:var(--landscape-avatar); white-space:nowrap; }
body[data-table-layout="landscape"] .score-chip .rail-name { font-size:11px; line-height:13px; }
body[data-table-layout="landscape"] .rail-qualification { font-size:10px; gap:2px; }
body[data-table-layout="landscape"] .play-mode-strip { height:44px; padding:2px 92px 2px 6px; }
body[data-table-layout="landscape"] .play-mode-strip > span { gap:0; }
body[data-table-layout="landscape"] .play-mode-strip strong,body[data-table-layout="landscape"] .play-mode-strip small { font-size:11px; line-height:13px; }
body[data-table-layout="landscape"] .event-cue { height:44px; min-height:44px; margin:0 91px 0 0; padding:0 5px; border-width:0; gap:4px; }
body[data-table-layout="landscape"] #closeEventCueButton { height:44px; min-height:44px; padding:2px 4px; }
body[data-table-layout="landscape"] #eventCueTitle { font-size:24px; line-height:24px; }
body[data-table-layout="landscape"] #eventCueActor { font-size:11px; line-height:13px; max-height:13px; white-space:nowrap; }
body[data-table-layout="landscape"] .move-area,body[data-table-layout="landscape"].hand-setup .move-area,body[data-table-layout="landscape"] .move-area:has(> .setup-skip:not([hidden])) {
    height:var(--landscape-actions); padding:1px 6px;
    grid-template-rows:var(--landscape-instruction) 44px;
  }
body[data-table-layout="landscape"] .move-instruction { font-size:clamp(13px,calc(var(--table-available-height,100dvh) * .015 + 1px),16px); line-height:clamp(14px,calc(var(--table-available-height,100dvh) * .03 - 10px),20px); }
body[data-table-layout="landscape"] .move-actions .button { font-size:clamp(12px,calc(var(--table-available-height,100dvh) * .015),15px); line-height:clamp(14px,calc(var(--table-available-height,100dvh) * .02 - 2px),18px); }
body[data-table-layout="landscape"] .turn-label { font-size:12px; }
body[data-table-layout="landscape"] .hand-tile .domino { --tile-long:calc(clamp(56px,calc(var(--table-available-height,100dvh) * .1),64px) + clamp(0px,calc(var(--table-available-height,100dvh) * .03 - 24px),6px)); --tile-short:calc(clamp(28px,calc(var(--table-available-height,100dvh) * .05),32px) + clamp(0px,calc(var(--table-available-height,100dvh) * .015 - 12px),3px)); }
body[data-table-layout="landscape"] .hand-tile:hover,body[data-table-layout="landscape"] .hand-tile[aria-pressed="true"] { transform:none; }
body[data-table-layout="landscape"][data-table-tier="short"] { --landscape-sidebar:clamp(160px,24vw,176px); --landscape-actions:70px; --landscape-instruction:24px; --hand-dock-height:88px; --hand-label-height:16px; --hand-button-height:56px; --hand-bottom-space:10px; }
body[data-table-layout="landscape"][data-table-tier="short"] .score-chip { grid-template-columns:24px minmax(0,1fr); grid-template-rows:24px 13px 26px 14px; }
body[data-table-layout="landscape"][data-table-tier="short"] .score-chip .player-avatar { width:24px; height:24px; border-radius:7px; }
body[data-table-layout="landscape"][data-table-tier="short"] .score-chip .points { font-size:18px; line-height:24px; }
body[data-table-layout="landscape"][data-table-tier="short"] .hand-tile .domino { --tile-long:56px; --tile-short:28px; }
body[data-table-layout="landscape"][data-table-tier="short"] .move-instruction { font-size:12px; line-height:12px; }
body[data-table-layout="landscape"][data-table-tier="short"] .turn-label { font-size:11px; }

/* Stacked tables follow available height continuously, including safe-area
   cases whose raw viewport would have triggered the older short-wide media.
   These resets deliberately cover grid, rail, toolbar, cues and the hand dock. */
body[data-table-layout="stacked"] {
  --stacked-avatar:clamp(28px,min(calc(var(--table-available-height,100dvh) * .055),calc(var(--table-available-width,100vw) * .085)),48px);
  --stacked-actions:clamp(82px,calc(var(--table-available-height,100dvh) * .1),90px);
  --hand-dock-height:clamp(100px,calc(var(--table-available-height,100dvh) * .13),124px);
  --hand-label-height:18px; --hand-button-height:clamp(72px,calc(var(--table-available-height,100dvh) * .09),80px); --hand-bottom-space:10px;
}
body[data-table-layout="stacked"] .game-card,body[data-table-layout="stacked"].hand-setup .game-card,body[data-table-layout="stacked"] .game-card:has(> .event-cue:not([hidden])) {
  grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "mode" "table" "actions";
  grid-template-rows:auto 48px minmax(0,1fr) var(--stacked-actions);
}
body[data-table-layout="stacked"] .game-toolbar { border-right:0; }
body[data-table-layout="stacked"] .toolbar-actions { height:48px; min-height:48px; padding:2px 6px; flex-wrap:nowrap; justify-content:space-between; gap:2px; }
body[data-table-layout="stacked"] .toolbar-actions .table-title { display:none; }
body[data-table-layout="stacked"] .toolbar-actions .button,body[data-table-layout="stacked"] .toolbar-actions .mode-action { min-width:44px; min-height:44px; height:44px; padding:4px 5px; font-size:12px; }
body[data-table-layout="stacked"] .toolbar-actions #quickVoiceSpeakersButton { padding-inline:0; font-size:10px; }
body[data-table-layout="stacked"] .score-strip { grid-template-columns:repeat(4,minmax(0,1fr)); padding:2px 5px; }
body[data-table-layout="stacked"] .score-chip { grid-template-columns:var(--stacked-avatar) minmax(0,1fr); grid-template-rows:var(--stacked-avatar) 14px 26px 14px; padding:2px; gap:2px 3px; }
body[data-table-layout="stacked"] .score-chip .player-avatar { width:var(--stacked-avatar); height:var(--stacked-avatar); border-radius:10px; }
body[data-table-layout="stacked"] .score-chip .points { font-size:clamp(21px,calc(var(--table-available-width,100vw) * .03),28px); line-height:1.1; white-space:nowrap; }
body[data-table-layout="stacked"] .score-chip .rail-name { font-size:11px; line-height:14px; }
body[data-table-layout="stacked"] .rail-qualification { font-size:clamp(10px,calc(var(--table-available-width,100vw) * .023),11px); }
body[data-table-layout="stacked"] .play-mode-strip { height:48px; padding:4px 92px 4px 10px; }
body[data-table-layout="stacked"] .play-mode-strip strong,body[data-table-layout="stacked"] .play-mode-strip small { font-size:11px; line-height:13px; }
body[data-table-layout="stacked"] .event-cue { height:48px; min-height:48px; margin:0 91px 0 4px; padding:2px 5px; }
body[data-table-layout="stacked"] #eventCueTitle { font-size:24px; line-height:24px; }
body[data-table-layout="stacked"] #eventCueActor { font-size:11px; line-height:13px; max-height:13px; white-space:nowrap; }
body[data-table-layout="stacked"] #closeEventCueButton { min-height:44px; height:44px; padding:2px 4px; }
body[data-table-layout="stacked"] .move-area,body[data-table-layout="stacked"].hand-setup .move-area,body[data-table-layout="stacked"] .move-area:has(> .setup-skip:not([hidden])) { height:var(--stacked-actions); padding:3px 2px; column-gap:1px; grid-template-rows:calc(var(--stacked-actions) - 50px) 44px; }
body[data-table-layout="stacked"] .move-instruction { font-size:13px; line-height:16px; }
body[data-table-layout="stacked"] .move-actions,body[data-table-layout="stacked"] .move-actions:not(:empty) { gap:1px; }
body[data-table-layout="stacked"] .move-actions .button { overflow-wrap:normal; word-break:normal; padding:3px 1px; font-size:clamp(11px,calc(var(--table-available-width,100vw) * .03),14px); line-height:clamp(12px,calc(var(--table-available-width,100vw) * .032),16px); }
body[data-table-layout="stacked"] #clearSelectionButton .selection-label-full { display:none; }
body[data-table-layout="stacked"] #clearSelectionButton .selection-label-compact { display:inline; white-space:nowrap; }
body[data-table-layout="stacked"] .turn-label { font-size:12px; }
body[data-table-layout="stacked"] .hand-tile .domino { --tile-long:clamp(62px,calc(var(--table-available-height,100dvh) * .085),70px); --tile-short:clamp(31px,calc(var(--table-available-height,100dvh) * .0425),35px); }

/* One authoritative card per viewer seat. Flatten only layout wrappers so the
   existing scoreStrip avatar order, timer ring and reaction anchors stay intact. */
body[data-table-layout] .game-toolbar,body #scoreStrip,body[data-table-layout] .table-wrap,
body.friends-play .table-wrap,body.hand-setup .table-wrap,
body .game-card:has(.event-cue:not([hidden])) .table-wrap { display:contents; }
body .game-card .toolbar-actions { grid-area:toolbar; height:48px; min-height:48px; padding:2px 6px; flex-wrap:nowrap; justify-content:space-between; gap:2px; }
body .game-card .toolbar-actions .button,body .game-card .toolbar-actions .mode-action { min-width:44px; min-height:44px; height:44px; padding:4px 5px; }
body .game-card .toolbar-actions .table-title { display:none; }
body[data-table-layout="stacked"],body[data-table-layout="landscape"] { --seat-gutter:64px; --seat-top-height:64px; --hand-label-height:32px; --hand-dock-height:calc(clamp(100px,calc(var(--table-available-height,100dvh) * .13),124px) + 14px); }
body[data-table-layout="stacked"] .game-card,body[data-table-layout="stacked"].hand-setup .game-card,body[data-table-layout="stacked"] .game-card:has(> .event-cue:not([hidden])),
body[data-table-layout="landscape"] .game-card,body[data-table-layout="landscape"].hand-setup .game-card,body[data-table-layout="landscape"] .game-card:has(> .event-cue:not([hidden])) {
  grid-template-columns:var(--seat-gutter) minmax(0,1fr) var(--seat-gutter);
  grid-template-rows:48px 48px var(--seat-top-height) minmax(0,1fr) var(--hand-dock-height) var(--stacked-actions,82px);
  grid-template-areas:"toolbar toolbar toolbar" "mode mode mode" "top top top" "left board right" "you you you" "actions actions actions";
  background:linear-gradient(145deg,var(--felt),var(--felt-deep));
}
body[data-table-layout="landscape"] { --seat-gutter:88px; }
body[data-table-layout="landscape"] .game-card,body[data-table-layout="landscape"].hand-setup .game-card,body[data-table-layout="landscape"] .game-card:has(> .event-cue:not([hidden])) { grid-template-rows:48px 44px var(--seat-top-height) minmax(0,1fr) var(--hand-dock-height) var(--landscape-actions); }
body .game-card .board-surface { grid-area:board; border:1px solid #c2dfce33; border-radius:10px; }
body .game-card .seat-you { grid-area:you; margin:0; width:100%; }
body .game-card .you-line { justify-content:flex-end; }
body .game-card .you-line > div:first-child { display:none; }
body .game-card .you-line .turn-status { max-width:90px; }
body #scoreStrip .score-chip {
  min-width:0; width:calc(var(--seat-gutter) - 4px); height:121px; padding:8px 2px 4px; margin:0;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:24px 13px 22px 24px 24px; gap:0;
  align-self:center; justify-self:center; overflow:visible; z-index:5; background:#173c3fe8;
}
body #scoreStrip .score-chip[data-seat="1"] { grid-area:left; }
body #scoreStrip .score-chip[data-seat="2"] { grid-area:top; }
body #scoreStrip .score-chip[data-seat="3"] { grid-area:right; }
body #scoreStrip .score-chip .player-avatar { grid-column:1; grid-row:1; width:24px; height:24px; margin:0; align-self:center; justify-self:center; border-radius:7px; }
body #scoreStrip .score-chip .rail-name { grid-column:1; grid-row:2; font-size:11px; line-height:13px; width:100%; text-align:center; }
body #scoreStrip .score-chip .name { font-size:11px; line-height:13px; }
body #scoreStrip .score-chip .points { grid-column:1; grid-row:3; font-size:20px; line-height:22px; text-align:center; }
body #scoreStrip .score-chip .rail-meta { grid-column:1; grid-row:4; display:grid; grid-template-rows:12px 12px; min-height:24px; gap:0; font-size:10px; }
body #scoreStrip .score-chip .rail-count { grid-row:1; text-align:center; font-size:10px; line-height:12px; }
body #scoreStrip .score-chip .rail-state { grid-row:2; justify-content:center; gap:2px; }
body #scoreStrip .score-chip .rail-qualification { grid-column:1; grid-row:5; height:24px; line-height:12px; font-size:10px; white-space:normal; justify-content:center; text-align:center; gap:2px; }
body #scoreStrip .score-chip[data-seat="2"] {
  width:min(280px,100%); height:64px; padding:8px 6px 2px; grid-template-columns:24px minmax(0,1fr) 48px; grid-template-rows:14px 20px 14px; gap:1px 3px;
}
body #scoreStrip .score-chip[data-seat="2"] .player-avatar { grid-column:1; grid-row:1 / 3; align-self:start; }
body #scoreStrip .score-chip[data-seat="2"] .rail-name { grid-column:2; grid-row:1; text-align:left; }
body #scoreStrip .score-chip[data-seat="2"] .points { grid-column:2; grid-row:2; text-align:left; line-height:20px; }
body #scoreStrip .score-chip[data-seat="2"] .rail-meta { grid-column:3; grid-row:1 / 3; grid-template-rows:14px 20px; }
body #scoreStrip .score-chip[data-seat="2"] .rail-qualification { grid-column:1 / -1; grid-row:3; height:14px; white-space:nowrap; }
body #scoreStrip .score-chip[data-seat="0"] {
  grid-area:you; align-self:start; justify-self:start; width:calc(100% - 92px); height:32px; margin:0; padding:0 4px; border:0;
  grid-template-columns:24px minmax(0,1fr) 30px 40px 68px; grid-template-rows:32px; column-gap:2px; background:transparent;
}
body #scoreStrip .score-chip[data-seat="0"] .player-avatar { grid-column:1; grid-row:1; align-self:end; }
body #scoreStrip .score-chip[data-seat="0"] .rail-name { grid-column:2; grid-row:1; align-self:center; text-align:left; }
body #scoreStrip .score-chip[data-seat="0"] .points { grid-column:3; grid-row:1; align-self:center; font-size:18px; }
body #scoreStrip .score-chip[data-seat="0"] .rail-meta { grid-column:4; grid-row:1; display:flex; align-items:center; min-height:0; }
body #scoreStrip .score-chip[data-seat="0"] .rail-state { display:none; }
body #scoreStrip .score-chip[data-seat="0"] .rail-qualification { grid-column:5; grid-row:1; align-self:center; height:auto; white-space:nowrap; }

/* Wide tables: the existing control gutter also holds the left player and the
   same legal actions. Three fixed touch columns reserve Music/Skip/Sound below
   two rows of placement choices; no new control or gameplay handler is added. */
body[data-table-layout="landscape"][data-table-tier="short"] { --seat-gutter:80px; --hand-label-height:28px; --hand-dock-height:100px; }
body[data-table-layout="landscape"] .game-card,
body[data-table-layout="landscape"].hand-setup .game-card,
body[data-table-layout="landscape"] .game-card:has(> .event-cue:not([hidden])) {
  grid-template-columns:176px minmax(0,1fr) var(--seat-gutter); grid-template-rows:var(--seat-top-height) minmax(0,1fr) var(--hand-dock-height);
  grid-template-areas:"sidebar top top" "sidebar board right" "sidebar you you";
}
body[data-table-layout="landscape"] .game-card .toolbar-actions { grid-area:sidebar; align-self:start; height:88px; min-height:88px; padding:0 2px; flex-wrap:wrap; justify-content:center; gap:0; }
body[data-table-layout="landscape"] #scoreStrip .score-chip[data-seat="1"] { grid-area:sidebar; align-self:center; margin-top:88px; margin-bottom:var(--seat-actions-height); width:172px; height:64px; padding:8px 6px 2px; grid-template-columns:24px minmax(0,1fr) 48px; grid-template-rows:14px 20px 14px; gap:1px 3px; }
body[data-table-layout="landscape"] #scoreStrip .score-chip[data-seat="1"] .player-avatar { grid-column:1; grid-row:1 / 3; align-self:start; }
body[data-table-layout="landscape"] #scoreStrip .score-chip[data-seat="1"] .rail-name { grid-column:2; grid-row:1; text-align:left; }
body[data-table-layout="landscape"] #scoreStrip .score-chip[data-seat="1"] .points { grid-column:2; grid-row:2; text-align:left; line-height:20px; }
body[data-table-layout="landscape"] #scoreStrip .score-chip[data-seat="1"] .rail-meta { grid-column:3; grid-row:1 / 3; grid-template-rows:14px 20px; }
body[data-table-layout="landscape"] #scoreStrip .score-chip[data-seat="1"] .rail-qualification { grid-column:1 / -1; grid-row:3; height:14px; white-space:nowrap; }
body[data-table-layout="landscape"] .game-card .move-area { grid-area:sidebar; align-self:end; height:var(--seat-actions-height); padding:1px 6px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:var(--seat-instruction-height) 88px 44px; gap:0 3px; }
body[data-table-layout="landscape"] .game-card .move-instruction { grid-column:1 / -1; grid-row:1; font-size:12px; line-height:14px; }
body[data-table-layout="landscape"] .game-card .move-actions { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:44px; height:88px; min-height:88px; gap:0 3px; }
body[data-table-layout="landscape"] .game-card .move-actions .button { width:100%; min-width:44px; height:44px; min-height:44px; padding:2px 1px; font-size:11px; line-height:12px; overflow-wrap:normal; word-break:normal; }
body[data-table-layout="landscape"] .game-card #skipSetupAnimationButton { grid-column:2; grid-row:3; justify-self:center; }
body[data-table-layout="landscape"] .game-card #quickSoundToggle { grid-column:3; grid-row:3; justify-self:center; }
body[data-table-layout="landscape"] .game-card #quickMusicToggle { grid-area:sidebar; align-self:end; justify-self:start; width:44px; min-width:44px; height:44px; margin:0 0 1px 10px; padding:2px; font-size:10px; line-height:12px; }
body[data-table-layout="landscape"] #scoreStrip .score-chip[data-seat="2"] { grid-area:top; width:128px; height:64px; }
body[data-table-layout="landscape"] .game-card .play-mode-strip { grid-area:top; justify-self:start; width:calc((100% - 132px) / 2); height:var(--seat-top-height); padding:4px; }
body[data-table-layout="landscape"] .game-card .event-cue { grid-area:top; justify-self:end; width:calc(100% - 132px); height:var(--seat-top-height); min-height:var(--seat-top-height); margin:0; padding:2px 4px; }
body[data-table-layout="landscape"] .game-card:has(> .event-cue:not([hidden])) #scoreStrip .score-chip[data-seat="2"],
body[data-table-layout="landscape"] .game-card:has(> #playModeStrip[data-critical="true"]) #scoreStrip .score-chip[data-seat="2"] { justify-self:start; }
body[data-table-layout="landscape"] .game-card #playModeStrip[data-critical="true"] { width:calc(100% - 132px); justify-self:end; }
body[data-table-layout="landscape"] .game-card .event-cue #eventCueTitle { font-size:20px; line-height:22px; white-space:nowrap; }
body[data-table-layout="landscape"] .game-card .event-cue #closeEventCueButton { min-width:44px; min-height:44px; padding:2px; }
body[data-table-layout="landscape"] .game-card #scoreStrip .score-chip[data-seat="0"] { width:calc(100% - 92px); }

/* The self card occupies only the reserved hand header, above its background.
   It is not an input layer and never reaches into the seven-tile row. */
body #scoreStrip .score-chip[data-seat="0"] { z-index:10; pointer-events:none; }
/* More available height buys recognizable portraits and their lift headroom,
   not bigger control chrome. The compact 320px-high arrangement stays intact. */
body[data-table-tier="regular"],body[data-table-tier="roomy"] { --seat-avatar:40px; --seat-avatar-slot:48px; --seat-top-height:80px; --hand-label-height:48px; --hand-dock-height:calc(clamp(100px,calc(var(--table-available-height,100dvh) * .13),124px) + 30px); }
body[data-table-tier="roomy"] { --seat-avatar:48px; --seat-avatar-slot:56px; --hand-label-height:56px; --hand-dock-height:calc(clamp(100px,calc(var(--table-available-height,100dvh) * .13),124px) + 38px); }
body[data-table-tier="regular"] #scoreStrip .score-chip,body[data-table-tier="roomy"] #scoreStrip .score-chip { height:calc(var(--seat-avatar) + 108px); grid-template-rows:var(--seat-avatar) 14px 26px 28px 24px; }
body[data-table-tier="regular"] #scoreStrip .score-chip .player-avatar,body[data-table-tier="roomy"] #scoreStrip .score-chip .player-avatar { width:var(--seat-avatar); height:var(--seat-avatar); }
body[data-table-tier="regular"] #scoreStrip .score-chip .points,body[data-table-tier="roomy"] #scoreStrip .score-chip .points { font-size:24px; line-height:26px; }
body[data-table-tier="regular"] #scoreStrip .score-chip[data-seat="2"],body[data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="2"] { height:80px; grid-template-columns:var(--seat-avatar-slot) minmax(0,1fr) 56px; grid-template-rows:24px 26px 14px; }
body[data-table-tier="regular"] #scoreStrip .score-chip[data-seat="2"] .rail-meta,body[data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="2"] .rail-meta { grid-template-rows:24px 26px; }
body[data-table-tier="regular"] #scoreStrip .score-chip[data-seat="0"],body[data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="0"] { height:var(--hand-label-height); grid-template-columns:var(--seat-avatar-slot) minmax(0,1fr) 30px 40px 68px; grid-template-rows:var(--hand-label-height); }
body[data-table-tier="regular"] #scoreStrip .score-chip[data-seat="0"] .points,body[data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="0"] .points { font-size:18px; }


/* Keep the same wide-table arrangement across the old short-height boundary.
   Extra height goes to the felt and readable portraits, not stacked chrome. */
body[data-table-layout="landscape"] { --seat-actions-height:166px; --seat-instruction-height:32px; }
body[data-table-layout="landscape"][data-table-tier="regular"],body[data-table-layout="landscape"][data-table-tier="roomy"] { --seat-actions-height:178px; --seat-instruction-height:44px; --seat-top-height:calc(var(--seat-avatar) + 40px); }
body[data-table-layout="landscape"][data-table-tier="regular"] #scoreStrip .score-chip[data-seat="1"],body[data-table-layout="landscape"][data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="1"] { height:80px; grid-template-columns:var(--seat-avatar-slot) minmax(0,1fr) 48px; grid-template-rows:24px 26px 14px; }
body[data-table-layout="landscape"][data-table-tier="regular"] #scoreStrip .score-chip[data-seat="1"] .rail-meta,body[data-table-layout="landscape"][data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="1"] .rail-meta { grid-template-rows:24px 26px; }
body[data-table-layout="landscape"][data-table-tier="regular"] #scoreStrip .score-chip[data-seat="2"],body[data-table-layout="landscape"][data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="2"] { height:var(--seat-top-height); padding:8px 6px 0; grid-template-columns:var(--seat-avatar) minmax(0,1fr); grid-template-rows:14px calc(var(--seat-avatar) - 16px) 14px 14px; }
body[data-table-layout="landscape"][data-table-tier="regular"] #scoreStrip .score-chip[data-seat="2"] .points,body[data-table-layout="landscape"][data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="2"] .points { line-height:calc(var(--seat-avatar) - 16px); }
body[data-table-layout="landscape"][data-table-tier="regular"] #scoreStrip .score-chip[data-seat="2"] .rail-meta,body[data-table-layout="landscape"][data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="2"] .rail-meta { grid-column:1 / -1; grid-row:3; display:flex; align-items:center; justify-content:center; gap:4px; height:14px; min-height:14px; }
body[data-table-layout="landscape"][data-table-tier="regular"] #scoreStrip .score-chip[data-seat="2"] .rail-qualification,body[data-table-layout="landscape"][data-table-tier="roomy"] #scoreStrip .score-chip[data-seat="2"] .rail-qualification { grid-row:4; }
body[data-table-layout="landscape"][data-table-tier="regular"] .game-card .move-instruction,body[data-table-layout="landscape"][data-table-tier="roomy"] .game-card .move-instruction { -webkit-line-clamp:3; }
body[data-table-layout="landscape"][data-table-tier="regular"] .game-card .move-actions .button,body[data-table-layout="landscape"][data-table-tier="roomy"] .game-card .move-actions .button { font-size:12px; line-height:14px; }
body[data-table-layout="landscape"][data-table-tier="regular"] .game-card .event-cue #eventCueTitle,body[data-table-layout="landscape"][data-table-tier="roomy"] .game-card .event-cue #eventCueTitle { font-size:24px; line-height:26px; }

/* Phone browsers keep text stable during rotation without disabling zoom.
   Native form controls stay at least 16px to avoid focus zoom on iPhone. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body .setting-row select,body #statsTarget { font-size:16px; min-height:44px; }
body[data-viewport-fit="false"] .viewport-guidance { background:#382517;color:#fff0d1; }
body[data-viewport-fit="false"] .viewport-guidance h2 { font-family:Georgia,'Times New Roman',serif; }
body[data-viewport-fit="false"] .viewport-guidance .viewport-size-help { font-size:12px;color:#e2c99e; }