/* A dedicated playing surface; setup retains the site's normal navigation. */
.card-category-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .65rem; padding: .5rem .7rem; border-bottom: 2px solid #b8c4aa; background: #ebefdf; color: #305b44; }
.card-category-heading h3 { min-width: 0; margin: 0; font: 800 .78rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
@media screen {
  .card-neighborhood-track { flex: 0 1 auto; min-height: 44px; padding: .45rem .6rem; border: 1px solid #7d9476; border-radius: 5px; background: #fffdf3; color: #254d38; font: 700 .72rem/1.3 var(--sans); cursor: pointer; }
  .card-neighborhood-track[aria-pressed="true"]:not(:disabled) { background: #305b44; border-color: #305b44; color: #fff9e8; }
  .card-neighborhood-track:disabled { color: #6b716a; background: #e5e8df; border-color: #c1c7b9; cursor: default; }
  .card-neighborhood-track:focus-visible, .tracked-neighborhoods button:focus-visible { outline: 3px solid #b57a26; outline-offset: 2px; }
  .card-category.is-neighborhood-tracked { box-shadow: inset 3px 0 #628149; }
  .tracked-neighborhoods { padding: .85rem; border: 1px solid #aab997; border-radius: 8px; background: #eef2e4; color: #284b38; }
  .tracked-neighborhoods h3 { margin: 0; font: 700 1rem/1.35 var(--sans); }
  .tracked-neighborhoods > p { margin: .4rem 0; font: .8rem/1.5 var(--sans); }
  .tracked-neighborhoods > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem 0; border-top: 1px solid #cbd4bf; }
  .tracked-neighborhoods strong, .tracked-neighborhoods small { display: block; overflow-wrap: anywhere; }
  .tracked-neighborhoods strong { font: 700 .85rem/1.4 var(--sans); }
  .tracked-neighborhoods small { margin-top: .2rem; font: .75rem/1.4 var(--sans); }
  .tracked-neighborhoods button { min-height: 44px; padding: .4rem .6rem; border: 1px solid #95a38a; border-radius: 5px; background: #fffdf5; color: #284b38; font: 700 .75rem/1.35 var(--sans); cursor: pointer; }
  .tracked-neighborhoods.is-inactive { background: #eeeee8; border-color: #c9cdc3; color: #656d61; }
  .tracked-neighborhoods button:disabled { color: #6b716a; background: #e5e8df; border-color: #c1c7b9; cursor: default; }
  .neighborhood-comparisons { list-style: none; padding: 0; margin: .7rem 0 0; }
  .neighborhood-comparisons li { display: grid; gap: .35rem; padding: .6rem 0; border-top: 1px solid #c6cbb9; overflow-wrap: anywhere; }
  .neighborhood-comparisons .line-reference-link { justify-self: start; text-align: left; }
  .neighborhood-comparisons small { font-size: .75rem; line-height: 1.5; }
  .full-player-rack { position: relative; }
  .full-player-rack .game-tile[draggable="true"] { user-select: none; -webkit-user-select: none; -webkit-user-drag: element; }
  .full-player-rack .game-tile[draggable="true"] * { pointer-events: none; -webkit-user-drag: none; }
  .full-player-rack.is-reordering .game-tile,
  .full-player-rack.is-reordering .game-tile:hover,
  .full-player-rack.is-reordering .game-tile:focus-visible { transform: none; transition: none; outline: none; }
  .full-player-rack.is-reordering .is-dragging { opacity: .35; }
  .full-player-rack.is-drop-ready { outline: 2px solid #bd6c44; outline-offset: -2px; }
  .rack-drop-marker { position: absolute; z-index: 8; width: 4px; margin-left: -2px; border-radius: 3px; background: #b94c32; box-shadow: 0 0 0 2px #fff8df; pointer-events: none; }
  .rack-drop-marker::before { content: ""; position: absolute; left: -4px; top: -7px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #b94c32; }
  .game-tile.rack-drag-ghost { position: fixed; z-index: 2000; margin: 0; pointer-events: none; transform: rotate(2deg); opacity: .94; box-shadow: 0 8px 0 #83ad99, 0 12px 20px #17322d50; }
  .table-votes { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .6rem 0; }
  .table-votes li { flex: 1 1 180px; padding: .5rem .65rem; border-left: 3px solid #b7a16a; border-radius: 4px; background: #f3efdf; font-size: .8rem; }
  .table-votes strong, .table-votes span { display: block; }
  .table-votes span { margin-top: .25rem; line-height: 1.4; color: #515f52; }
  .is-playing .second-charleston-choice { padding: .65rem; }
  .is-playing .second-charleston-choice h3 { font-size: 1.1rem; }
  .is-playing .second-charleston-choice > p { font-size: .8rem; }
  .is-playing .table-response { margin: .3rem 0; font-size: .8rem; line-height: 1.4; }
  .courtesy-table-details { font-size: .75rem; margin-top: .5rem; }
  .courtesy-table-details summary { cursor: pointer; min-height: 32px; }
  .table-vote-details { margin: .4rem 0; font-size: .8rem; }
  .table-vote-details summary { cursor: pointer; padding: .4rem 0; color: #355d46; font-weight: 700; }
  .tracked-pass-coaching { margin-top: 1.2rem; border-top: 2px solid #cfbc8e; padding-top: .8rem; }
  .tracked-pass-coaching h4 { font: 700 1rem/1.3 var(--sans); margin: 0 0 .4rem; }
  .tracked-pass-coaching > p { font-size: .8rem; line-height: 1.5; color: #526458; }
  .tracked-pass-coaching article { border: 1px solid #c6cbb9; border-radius: 8px; padding: .8rem; margin-top: .75rem; background: #f4f5ea; }
  .tracked-pass-coaching article > strong { font-size: .8rem; color: #326047; }
  .tracked-pass-coaching h5 { margin: .5rem 0; font: 700 .95rem/1.4 var(--sans); }
  .tracked-pass-coaching article p, .tracked-pass-coaching details { font-size: .8rem; line-height: 1.5; }
  .tracked-pass-coaching details { margin-top: .5rem; }
  .tracked-pass-coaching:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
  .full-card-coach { margin-top: 1rem; font-size: .85rem; }
  .full-card-coach > summary { padding: .65rem 0; cursor: pointer; font-weight: 700; }
  .is-playing .call-decision-heading h3 { font-size: 1.2rem; }
  .is-playing .call-decision-heading { grid-template-columns: auto minmax(0,1fr) auto; gap: .5rem; }
  .is-playing .call-decision-heading > button { margin-left: auto; }
  .is-playing .call-options { grid-template-columns: 1fr; }
  .card-view-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
  .card-filter-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .65rem; border: 1px solid #a9b6a5; border-radius: 6px; background: #f1f3e8; color: #234637; font: 700 .8rem/1.25 var(--sans); cursor: pointer; }
  .card-filter-toggle:has(input:checked) { background: #e5edda; border-color: #527449; }
  .card-filter-toggle:focus-within { outline: 2px solid #ac6c27; outline-offset: 2px; }
  .card-filter-toggle input { width: 1rem; height: 1rem; margin: 0; accent-color: #2f6249; flex: 0 0 auto; }
  .card-filter-status { margin: .7rem 0; color: #425b48; font: 600 .8rem/1.5 var(--sans); }
  .card-filter-empty { padding: 1rem; margin: 1rem 0; border: 1px solid #d2be90; border-radius: 8px; background: #faf3e3; color: #4f452e; font: .9rem/1.5 var(--sans); }
  .card-filter-empty p { margin: .4rem 0 .8rem; }
  .game-card-panel .card-category[hidden], .game-card-panel .game-card-line[hidden],
  .card-filter-toggle[hidden], .card-filter-status[hidden], .card-filter-empty[hidden] { display: none !important; }
  .is-playing .game-card-panel.is-expanded { bottom: 10px; }
  .is-playing .game-card-lines { background: transparent; border: 0; }
  .is-playing .card-category { background: #fffdf5; border: 1px solid #ccd1bd; margin-bottom: .7rem; }
  .is-playing .card-category > h3 { background: #ebefdf; color: #305b44; }
  .is-playing .game-card-line { grid-template-columns: minmax(0,1fr) auto; gap: .35rem .5rem; background: #fffdf5; }
  .is-playing .game-card-line.is-tracked { background: #fff5d9; }
  .is-playing .card-line-copy { grid-column: 1 / -1; gap: .35rem; }
  .is-playing .card-line-pattern { font-family: var(--sans); font-size: 1.2rem; font-weight: 800; }
  .is-playing .card-line-progress { display: flex; align-items: baseline; gap: .5rem; text-align: left; }
  .is-playing .card-line-progress small { font-size: .65rem; line-height: 1.4; text-transform: none; }
  .is-playing .card-line-track { min-height: 32px; }
  body.is-playing { overflow: hidden; background: #103b31; }
  .is-playing > .site-header, .is-playing > .site-footer,
  .is-playing .game-lab-hero { display: none; }
  .is-playing .game-workspace { height: 100dvh; padding: 0; display: flex; flex-direction: column; --dock-height: 280px; }
  .is-playing .game-toolbar { flex: 0 0 auto; min-height: 54px; padding: .45rem 1rem; align-items: center; border: 0; background: #0d3028; color: #f5efd9; }
  .is-playing .game-toolbar > div:first-child { min-width: 0; }
  .is-playing .game-toolbar .game-kicker { font-size: .65rem; margin: 0; color: #d9bf85; }
  .is-playing .game-toolbar h2 { font: 600 .8rem/1.3 var(--sans); color: #e9e8d9; max-width: 48vw; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .is-playing .game-toolbar-actions { flex-wrap: nowrap; align-items: center; gap: .35rem; }
  .is-playing .game-toolbar-actions > button, .is-playing .game-tools-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: .5rem .85rem; border: 1px solid #6c8979; border-radius: 6px; background: #1b493c; color: #fff9e8; font: 700 .8rem/1.2 var(--sans); white-space: nowrap; }
  .is-playing .game-tools-menu[open] > summary { background: #e7d19f; color: #173f32; border-color: #e7d19f; }
  .is-playing .game-toolbar-actions > button[aria-expanded="true"], .is-playing .game-toolbar-actions > button[aria-pressed="true"] { background: #e7d19f; color: #173f32; border-color: #e7d19f; }
  .is-playing .game-tools-menu { z-index: 40; }
  .is-playing .game-tools-menu > div { right: 0; left: auto; min-width: 230px; max-height: 65dvh; overflow-y: auto; }
  .game-tools-menu .options-group-label { margin: .2rem 0 0; padding: .5rem .3rem .2rem; color: #687367; font: 800 .65rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
  .game-tools-menu .options-group-label:not(:first-child) { border-top: 1px solid #d4d9ca; margin-top: .4rem; }
  .game-tools-menu [data-open-panel] { text-align: left; }
  .is-playing .game-play-grid { display: block; flex: 1; min-height: 0; margin: 0; background: transparent; }
  .is-playing .table-column { height: 100%; display: flex; flex-direction: column; padding: 0; background: #103b31; overflow-y: auto; }
  .is-playing .board-stage { position: relative; flex: 1; min-height: 300px; display: flex; flex-direction: column; padding: 5px 12px 0; }
  .is-playing .board-stage:has(.latest-discard:not([hidden])) { min-height: 390px; }
  .is-playing .game-phase-track { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; margin: 0; border: 0; background: transparent; gap: .8rem; }
  .is-playing .game-phase-track li { display: block; padding: .2rem .4rem; border: 0; background: transparent; color: #a9bfb0; }
  .is-playing .game-phase-track li > span, .is-playing .game-phase-track small { display: none; }
  .is-playing .game-phase-track strong { font-size: .65rem; }
  .is-playing .game-phase-track .is-current { color: #ffe3a4; border-bottom: 2px solid #e4c584; }
  /* Separate grid cells reserve real space for growing exposures, not overlapping layers. */
  .is-playing .mahjong-table { flex: 1; min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 200px); grid-template-rows: auto minmax(120px, 1fr) auto; grid-template-areas: "left opponent right" "left center right" "left human right"; gap: 12px; padding: 53px 34px 33px; border-width: 7px; border-radius: 24px; box-shadow: inset 0 0 0 2px #dbc28e, inset 0 0 65px #052a233b; }
  .is-playing .mahjong-table:not(:has(.latest-discard:not([hidden]))) { grid-template-rows: auto minmax(80px, 1fr) auto; }
  .is-playing .mahjong-table::before { inset: 45px; }
  .is-playing .wall-north { top: 28px; bottom: auto; }
  .is-playing .wall-south { bottom: 10px; top: auto; }
  .is-playing .wall-north, .is-playing .wall-south { width: 53%; }
  .is-playing .wall-east, .is-playing .wall-west { height: 68%; }
  .is-playing .wall-east { right: 9px; }
  .is-playing .wall-west { left: 9px; }
  .is-playing .wall-north .wall-stack, .is-playing .wall-south .wall-stack { height: 16px; }
  .is-playing .wall-east .wall-stack, .is-playing .wall-west .wall-stack { width: 16px; }
  .is-playing .table-player { position: relative; inset: auto; transform: none; align-self: center; justify-self: center; width: 100%; max-width: 100%; min-width: 0; padding: .4rem .5rem; }
  .is-playing .player-north { grid-area: human; width: 200px; }
  .is-playing .player-south { grid-area: opponent; width: max-content; min-width: min(200px, 100%); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; }
  .is-playing .player-south .mini-exposures { grid-column: 1 / -1; }
  .is-playing .player-east { grid-area: right; }
  .is-playing .player-west { grid-area: left; }
  .is-playing :is(.player-east, .player-west):has(.mini-exposures:not([hidden])) { align-self: center; display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
  .is-playing :is(.player-east, .player-west) :is(.player-heading, .mini-player-rack) { flex: 0 0 auto; }
  .is-playing .table-player:is(.player-east, .player-west) .mini-exposures { min-height: 0; max-height: none; }
  .is-playing .player-heading { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; line-height: 1.2; margin-bottom: .25rem; letter-spacing: .015em; }
  .is-playing .player-heading small { font-size: .6rem; line-height: 1.2; color: #c6d8cb; }
  .exposure-inspect-link { padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .exposure-inspect-link:hover, .exposure-inspect-link:focus-visible { color: #ffe3a4; outline: 1px solid currentColor; outline-offset: 2px; }
  .is-playing .mini-player-rack { flex-wrap: wrap; min-height: 0; gap: 2px; overflow: visible; }
  .is-playing .table-player.is-human .mini-player-rack { display: none; }
  .is-playing .mini-player-rack .mini-tile-back { width: 10px; height: 17px; flex: 0 0 10px; }
  .is-playing .mini-player-rack .mini-game-tile { width: 23px; height: 33px; flex: 0 0 23px; }
  .is-playing .table-player .mini-exposures { display: flex; flex-wrap: wrap; min-width: 0; max-height: 110px; margin-top: 4px; padding: 4px 2px 5px; overflow: auto; }
  .is-playing .table-player .mini-exposures[hidden] { display: none; }
  .is-playing .table-player .mini-exposures:focus-visible { outline: 2px solid #ffe4ab; outline-offset: 1px; }
  .is-playing .table-player .mini-exposure { min-width: 0; max-width: 100%; gap: 2px; padding: 3px 4px 5px; }
  .is-playing .table-player .mini-exposure-tiles { min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 5px; }
  .is-playing .mini-exposure .mini-game-tile { width: 25px; height: 36px; flex: 0 0 25px; }
  .is-playing .mini-exposure-label { font-size: .6rem; }
  .is-playing .table-center { position: relative; inset: auto; grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; border: 0; background: transparent; min-width: 0; min-height: 0; }
  .is-playing .draw-source { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .5rem; width: auto; max-width: 100%; padding: .3rem .6rem; }
  .is-playing .draw-source span, .is-playing .draw-source strong, .is-playing .draw-source small { font: 600 .7rem/1.3 var(--sans); margin: 0; }
  .is-playing .latest-discard { flex: 0 0 auto; width: fit-content; max-width: min(100%, 250px); min-width: 0; min-height: 0; padding: 8px 10px; gap: 10px; }
  .is-playing .latest-discard > span { min-width: 0; overflow-wrap: anywhere; }
  .is-playing .latest-discard .latest-discard-tile { width: 44px; height: 63px; flex-basis: 44px; }
  .is-playing .latest-discard strong { font-size: 1rem; }
  .is-playing .table-discards { flex: 1 1 0; min-height: 0; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: auto; scrollbar-color: #a8bda8 #164b3f; }
  .is-playing [data-discard-empty] { text-align: center; color: #b8d1c0; font: italic .9rem var(--serif); }
  .is-playing .discard-pond { --discard-scale: 1; --discard-tile-width: clamp(28px, 2.8vw, 39px); display: block; padding: 0; }
  .is-playing .discard-pile { padding: 0; margin: 0; border: 0; background: transparent; }
  .is-playing .discard-pile header { padding: .3rem .2rem; color: #e4ead9; font-size: .65rem; }
  .is-playing .discard-pile > div { min-height: 0; max-height: none; justify-content: center; gap: calc(8px * var(--discard-scale)); padding: calc(6px * var(--discard-scale)) calc(4px * var(--discard-scale)); overflow: visible; }
  .is-playing .shared-discard-pile > div { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scroll-snap-type: y mandatory; scroll-padding-top: calc(6px * var(--discard-scale)); overscroll-behavior: contain; }
  .is-playing .shared-discard-pile > div:focus-visible { outline: 2px solid #ffe4ab; outline-offset: -2px; }
  .is-playing .discard-scroll-hint { margin: 2px 0 0; color: #d5e2d0; text-align: center; font: 600 calc(11px * var(--discard-scale))/1.5 var(--sans); }
  .is-playing .discard-scroll-hint[hidden] { display: none; }
  .is-playing .discard-pile .mini-game-tile { width: var(--discard-tile-width); height: calc(var(--discard-tile-width) * 1.45); flex-basis: var(--discard-tile-width); }
  .is-playing .discard-stack { min-width: 44px; padding: 0 calc(10px * var(--discard-scale)) calc(10px * var(--discard-scale)) 0; border: 0; border-radius: 7px; background: transparent; cursor: zoom-in; scroll-snap-align: start; }
  .is-playing .discard-stack:hover, .is-playing .discard-stack:focus-visible, .is-playing .discard-stack[aria-expanded="true"] { outline: 2px solid #ffe4ab; outline-offset: 2px; }
  .is-playing .discard-stack .tile-corner { top: calc(3px * var(--discard-scale)); left: calc(3px * var(--discard-scale)); color: #111; font-size: clamp(10px, calc(var(--discard-tile-width) * .24), 20px); }
  .is-playing .discard-stack > b { min-width: calc(24px * var(--discard-scale)); padding: calc(4px * var(--discard-scale)); font-size: clamp(12px, calc(var(--discard-tile-width) * .28), 22px); line-height: 1; }
  .discard-closeup { position: fixed; z-index: 1500; display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: center; gap: 16px; width: min(304px, calc(100vw - 16px)); padding: 25px 16px 18px; border: 2px solid #c8ac72; border-radius: 14px; background: #fffaf0; color: #193d32; box-shadow: 0 12px 45px #09271f66; }
  .discard-closeup[hidden] { display: none; }
  .discard-closeup [data-discard-closeup-tile] .game-tile { display: block; width: 104px; height: 150px; margin: 0; transform: none; }
  .discard-closeup .tile-corner { top: 8px; left: 8px; font-size: 1rem; }
  .discard-closeup .game-tile small { font-size: .65rem; }
  .discard-closeup-copy p { margin: 0 20px .35rem 0; font: 800 .6rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #667467; }
  .discard-closeup-copy h3 { margin: 0 0 .55rem; font: 600 1.45rem/1.1 var(--serif); }
  .discard-closeup-copy strong { display: block; font: 800 1rem/1.3 var(--sans); }
  .discard-closeup-copy small { display: block; margin-top: .75rem; color: #667467; font: 500 .65rem/1.4 var(--sans); }
  .discard-closeup-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #365447; font-size: 1.5rem; cursor: pointer; }
  .discard-closeup-close:hover, .discard-closeup-close:focus-visible { background: #e8eadb; outline: 2px solid #ad884c; outline-offset: -3px; }
  .is-playing .wall-readout { flex: 0 0 auto; margin: 0; padding: .25rem .5rem; border: 0; border-radius: 0; background: transparent; }
  .is-playing .wall-readout > div p { display: flex; gap: .7rem; align-items: center; }
  .is-playing .wall-readout strong, .is-playing .wall-readout small { color: #e4e7d8; font-size: .7rem; }
  .is-playing .wall-readout > p { display: none; }
  .is-playing .play-dock { flex: 0 0 auto; max-height: 48dvh; overflow-y: auto; padding: .4rem clamp(.5rem, 2vw, 2rem) max(.4rem, env(safe-area-inset-bottom)); background: #ede9db; border-top: 4px solid #bba078; box-shadow: 0 -6px 24px #06271e30; }
  .is-playing .player-rack-panel { width: min(100%, 64rem); padding: 0; margin: 0 auto; border: 0; background: transparent; box-shadow: none; }
  .is-playing .player-rack-heading { align-items: center; gap: .5rem; padding: 0; }
  .is-playing .player-rack-heading p { font-size: clamp(9px, .55rem, 12px); }
  .is-playing .player-rack-heading h3 { font: 700 .8rem/1.3 var(--sans); }
  .is-playing .player-rack-heading :is(p, h3) { margin: 0; }
  .is-playing .rack-heading-tools { display: flex; align-items: center; max-width: 50%; gap: .6rem; }
  .is-playing .rack-heading-tools select { width: auto; max-width: 230px; min-height: 36px; padding: .4rem; font-size: .75rem; }
  .is-playing .rack-heading-tools label > span { display: none; }
  .is-playing .rack-help-disclosure { position: relative; font-size: .75rem; }
  .is-playing .rack-help-disclosure summary { min-height: 36px; padding: .4rem; font-size: .75rem; cursor: pointer; }
  .is-playing .rack-help-disclosure p { position: absolute; bottom: 100%; right: 0; width: 250px; z-index: 10; padding: 1rem; border: 1px solid #b5beab; border-radius: 8px; background: #fffdf5; font: 400 .85rem/1.5 var(--sans); text-align: left; text-transform: none; letter-spacing: 0; }
  .is-playing .full-player-rack { justify-content: center; flex-wrap: nowrap; min-height: 0; margin: .3rem 0 0; padding: 14px 8px 9px; gap: 5px; border-bottom-width: 7px; }
  .is-playing .full-player-rack:empty { display: none; }
  .is-playing .game-tile { flex: 0 0 clamp(40px, 5vw, 58px); width: clamp(40px, 5vw, 58px); height: clamp(58px, 7.2vw, 84px); }
  .is-playing .tile-risk-badge { display: none; }
  .is-playing .game-tile.is-drawn { margin-left: 14px; }
  .is-playing .rack-selection-controls { justify-content: center; margin: .35rem 0 0; min-height: 0; padding: .25rem .5rem; gap: .4rem; box-shadow: none; }
  .is-playing .rack-selection-controls > strong { flex-basis: auto; margin-right: 0; font-size: .75rem; }
  .is-playing .game-button { min-height: 38px; padding: .5rem .8rem; font-size: .8rem; }
  /* A centered action rail connects the table to the rack. DOM order matches
     this visual order so keyboard users encounter the same next action. */
  .is-playing .game-turn-controls { grid-template-columns: minmax(0,1fr); justify-items: center; width: min(100%, 64rem); margin: 0 auto .55rem; padding: .45rem .65rem .6rem; border-left-width: 1px; border-top-width: 3px; box-shadow: none; gap: .35rem; text-align: center; }
  .is-playing .turn-action-summary { justify-content: center; min-width: 0; }
  .is-playing .turn-action-summary p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15rem .6rem; }
  .is-playing .turn-action-buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; min-width: 0; max-width: 100%; }
  .is-playing .turn-action-buttons > [data-next-move] { min-width: 0; padding: .6rem 1rem; font-size: .85rem; }
  .is-playing .quick-coach-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex-shrink: 0; min-height: 44px; border-color: #b8964e; background: #fff2cf; color: #614d21; white-space: nowrap; }
  .is-playing .quick-coach-button[hidden] { display: none; }
  .quick-coach-button > span { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid currentColor; border-radius: 50%; font-weight: 800; }
  .is-playing .quick-coach-button:hover, .is-playing .quick-coach-button[aria-expanded="true"] { background: #e8cc88; color: #3a321c; }
  .preplay-action > .quick-coach-button, .charleston-side > .quick-coach-button { margin-top: .5rem; justify-self: start; }
  .coach-move-context { margin-top: 1rem; border-top: 1px solid #c8cdbd; }
  .coach-move-context > summary { min-height: 44px; align-items: center; justify-content: flex-start; gap: .5rem; color: #365a44; font-size: .85rem; }
  .coach-move-context > summary::before { content: "+"; }
  .coach-move-context[open] > summary::before { content: "−"; }
  .coach-move-context > h3 { font-size: 1.15rem; }
  .tracked-play-coaching > .tracked-pass-coaching { margin: 0; border: 0; padding: 0; }
  .tracked-play-coaching .recommendation-evidence { font-size: .8rem; line-height: 1.5; }
  .tracked-play-coaching [data-apply-tracked-play] { min-height: 44px; white-space: normal; }
  .is-playing .turn-action-summary strong { font-size: .65rem; }
  .is-playing .turn-action-summary span:last-child { font-size: .8rem; }
  .is-playing .turn-secondary-actions .game-button { min-height: 38px; font-size: .75rem; }
  .is-playing .preplay-panel { margin: .4rem 0 0; border: 0; border-radius: 8px; }
  .is-playing .preplay-stage { grid-template-columns: 1fr minmax(230px,.65fr); }
  .is-playing .preplay-copy, .is-playing .preplay-action { padding: .7rem; }
  .is-playing .preplay-copy { grid-template-columns: 30px 1fr; gap: .6rem; }
  .is-playing .preplay-step-number { width: 28px; height: 28px; }
  .is-playing .preplay-copy h3 { font-size: 1.1rem; margin: .15rem 0; }
  .is-playing .preplay-copy p, .is-playing .preplay-action p { font-size: .8rem; line-height: 1.4; }
  .is-playing .preplay-facts { display: none; }
  .is-playing .wall-die { width: 32px; height: 32px; font-size: 2rem; }
  .is-playing .charleston-workspace { grid-template-columns: 1fr minmax(180px,.33fr); }
  .is-playing .charleston-main, .is-playing .charleston-side { padding: .6rem; }
  .is-playing .charleston-heading { margin: 0 0 .3rem; align-items: center; }
  .is-playing .charleston-heading h3 { font: 700 1rem/1.25 var(--sans); margin: .1rem 0; }
  .is-playing .charleston-heading p { font-size: .75rem; }
  .is-playing .charleston-heading > div > p:last-child, .is-playing .charleston-help { display: none; }
  .is-playing .pass-direction { min-width: 75px; padding: .3rem; }
  .is-playing .pass-direction strong { font-size: .9rem; margin: 0; }
  .is-playing .pass-zone { min-height: 38px; padding: .25rem .5rem; }
  .is-playing .pass-zone .mini-game-tile, .is-playing .pass-zone .mini-tile-back { width: 25px; height: 36px; flex-basis: 25px; }
  .is-playing .charleston-status { font-size: .75rem; }
  .is-playing .blind-choice { margin: .25rem 0; padding: .5rem; }
  .is-playing .blind-choice p { font-size: .75rem; }
  .is-playing .blind-buttons button { min-height: 40px; font-size: .75rem; }
  /* Concealed tiles and public sets share one compact hand area. Only the
     concealed zone is a drag target; an exposure can never join the rack. */
  .is-playing .player-hand-row { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-top: .3rem; }
  .is-playing .concealed-rack-zone { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  .is-playing .player-hand-row .full-player-rack { margin-top: 0; }
  .is-playing .user-exposures { display: grid; flex: 0 0 auto; min-width: 0; max-width: calc(100% - 90px); gap: 5px; margin: 0; padding: 7px 8px 9px; border: 1px solid #a98a47; border-radius: 8px; background: #fcf6e6; box-shadow: inset 0 0 0 2px #fffaf1; }
  .is-playing .user-exposures[hidden] { display: none; }
  .is-playing .user-exposure-heading { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 3px 9px; text-align: center; line-height: 1.2; }
  .is-playing .user-exposure-heading strong { color: #70541f; text-transform: uppercase; letter-spacing: .07em; font-size: 12px; }
  .is-playing .user-exposure-heading span { color: #655f4c; font-size: 11px; }
  .is-playing .user-exposure-sets { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 7px; }
  .is-playing .user-exposures .mini-exposure { min-width: 0; max-width: 100%; gap: 4px; padding: 3px 4px 5px; border: 1px solid #d2bd8a; border-radius: 5px; box-shadow: none; }
  .is-playing .user-exposures .mini-exposure-label { font-size: 10px; }
  .is-playing .user-exposures .mini-exposure-tiles { gap: 3px; max-width: 100%; flex-wrap: wrap; justify-content: center; }
  .is-playing .user-exposures .mini-exposure .mini-game-tile { width: 44px; height: 64px; flex: 0 0 44px; }
  .is-playing .user-exposures .tile-corner { font-size: 13px; top: 3px; left: 3px; }
  .is-playing .call-decision { position: fixed; z-index: 20; top: 66px; left: 16px; bottom: calc(var(--dock-height) + 12px); width: min(560px, calc(100vw - 32px)); overflow: auto; overscroll-behavior: contain; margin: 0; padding: .8rem; border-radius: 10px; box-shadow: 0 8px 30px #052a2377; }
  .is-playing .call-decision > p { font-size: .8rem; }
  .is-playing .call-option { padding: .5rem; }
  .is-playing .call-option strong { font-size: .95rem; }
  .is-playing .call-option small { font-size: .75rem; }
  .call-rules-note { margin-top: .6rem; font-size: .8rem; line-height: 1.4; }
  .call-rules-note summary { cursor: pointer; }
  .is-playing .turn-secondary-actions:has([data-call-mahjong][hidden]) { display: none; }
  .is-playing .play-flyout { position: fixed; z-index: 30; top: 62px; right: 12px; bottom: calc(var(--dock-height) + 12px); width: min(620px, calc(100vw - 24px)); max-height: none; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 0 1rem 1rem; border: 1px solid #adbaaa; border-radius: 12px; background: #fffdf5; box-shadow: 0 12px 44px #041d1899; display: block; }
  .is-playing .play-flyout[hidden], .is-playing [data-side-content][hidden] { display: none !important; }
  .is-playing .coach-column.play-flyout { width: min(460px, calc(100vw - 24px)); align-self: stretch; height: calc(100dvh - var(--dock-height) - 74px); }
  .flyout-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; padding: .6rem 0; margin-bottom: .5rem; border-bottom: 1px solid #c8cdbd; background: #fffdf5; color: #224c3b; font: 700 .85rem/1.4 var(--sans); }
  .flyout-bar button { min-height: 40px; padding: .45rem .8rem; border: 1px solid #a9b6a5; border-radius: 6px; color: #234637; background: #f1f3e8; font: 700 .8rem var(--sans); cursor: pointer; white-space: nowrap; }
  .is-playing .game-card-lines { column-count: 1; }
  .is-playing .game-card-heading { display: block; }
  .is-playing .game-card-key { justify-content: flex-start; margin-top: .6rem; font-size: .7rem; }
  .is-playing .game-card-heading h2 { font-size: 1.4rem; }
  .is-playing .card-line-pattern { font-size: 1.3rem; }
  .is-playing .game-card-line { padding: .65rem; }
  .is-playing .card-line-note { font-size: .8rem; }
  .is-playing .card-line-name { font-size: .72rem; }
  .is-playing .card-line-track { min-height: 40px; font-size: .75rem; }
  .is-playing .candidate-panel, .is-playing .move-coach, .is-playing .game-history { padding: .75rem; margin-bottom: .75rem; }
  .is-playing .defense-guide { display: block; }
  .is-playing .defense-guide[hidden] { display: none; }
  .is-playing .coach-disabled-note { font-size: .9rem; line-height: 1.5; }
  .is-playing .hand-result { position: fixed; z-index: 25; top: 66px; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-height) + 12px); width: min(900px, calc(100vw - 32px)); margin: 0; overflow: auto; }
  .reference-note { margin: 0 0 .9rem; color: #59695f; font: 400 .85rem/1.5 var(--sans); }
  .player-detail { scroll-margin-top: 74px; }
  .player-detail .mini-exposures { display: grid; gap: .6rem; overflow: visible; }
  .player-detail .exposed-set { display: flex; flex-wrap: wrap; max-width: 100%; overflow: visible; gap: 5px; padding: .5rem .5rem .8rem; }
  .player-detail .exposed-set-label { flex-basis: 100%; margin: 0 0 .2rem; }
  .reference-body:focus-visible { outline: 2px solid #ad8f4c; outline-offset: -2px; border-radius: 8px; }
  .history-privacy { margin: 0 0 .8rem; }
  .history-privacy > summary { min-height: 36px; align-items: center; justify-content: flex-start; gap: .5rem; color: #59695f; font-size: .8rem; }
  .history-privacy > summary::before { content: "+"; font-size: 1rem; }
  .history-privacy[open] > summary::before { content: "−"; }
  .is-playing .game-history li { padding-left: 2.5rem; }
  .is-playing .game-history li::before { content: attr(value); width: 28px; height: 28px; }
  .game-history .history-coaching { display: block; margin-top: .35rem; padding: .4rem .55rem; border-left: 2px solid #cab67e; background: #f4f0e3; }
  .table-settings-group { margin-bottom: 1rem; }
  .table-settings-group h3 { margin: 0 0 .5rem; font: 700 .9rem/1.4 var(--sans); color: #2a5741; }
  .table-settings-group dl { margin: 0; border: 1px solid #d4d9ca; border-radius: 8px; overflow: hidden; }
  .table-settings-group dl > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .8rem; padding: .7rem; background: #f4f5ec; font-size: .85rem; line-height: 1.45; }
  .table-settings-group dl > div + div { border-top: 1px solid #d4d9ca; }
  .table-settings-group dt { color: #59695f; }
  .table-settings-group dd { margin: 0; color: #264b3a; font-weight: 600; overflow-wrap: anywhere; }
}

@media screen and (max-width: 700px) {
  .is-playing .game-toolbar { flex-direction: row; min-height: 50px; padding: .3rem .4rem; gap: .3rem; }
  .is-playing .game-toolbar h2 { display: none; }
  .is-playing .game-toolbar-actions { gap: .2rem; }
  .is-playing .game-toolbar-actions > button, .is-playing .game-tools-menu > summary { min-height: 42px; padding: .5rem; font-size: .72rem; }
  .is-playing .board-stage { min-height: 260px; padding: 2px 3px 0; }
  .is-playing .board-stage:has(.latest-discard:not([hidden])) { min-height: 430px; }
  .is-playing .mahjong-table { grid-template-columns: minmax(0, 24%) minmax(0, 1fr) minmax(0, 24%); grid-template-rows: auto minmax(180px, 1fr) auto; grid-template-areas: "opponent opponent opponent" "left center right" "human human human"; gap: 8px; padding: 38px 17px 23px; border-width: 4px; border-radius: 16px; }
  .is-playing .game-phase-track { gap: .2rem; top: 4px; }
  .is-playing .game-phase-track li { padding: .15rem .25rem; }
  .is-playing .game-phase-track strong { font-size: .58rem; }
  .is-playing .table-player { padding: .3rem; }
  .is-playing .player-south { width: max-content; min-width: 45%; max-width: 85%; }
  .is-playing .player-north { width: 45%; }
  .is-playing :is(.player-east, .player-west) { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
  .is-playing :is(.player-east, .player-west) .mini-player-rack { flex: 0 0 auto; }
  .is-playing :is(.player-east, .player-west) .mini-exposures { min-height: 0; }
  .is-playing .player-heading { font-size: .62rem; }
  .is-playing .player-heading small { font-size: .55rem; }
  .is-playing .mini-player-rack .mini-tile-back { width: 6px; height: 11px; flex-basis: 6px; }
  .is-playing .mini-player-rack .mini-game-tile { width: 19px; height: 27px; flex-basis: 19px; }
  .is-playing .table-player .mini-exposure { padding: 1px; }
  .is-playing .mini-exposure .mini-game-tile { width: 18px; height: 26px; flex-basis: 18px; }
  .is-playing .mini-exposure-label { font-size: .5rem; }
  .is-playing .wall-east { right: 4px; }
  .is-playing .wall-west { left: 4px; }
  .is-playing .wall-north { top: 23px; }
  .is-playing .wall-south { bottom: 6px; }
  .is-playing .wall-north .wall-stack, .is-playing .wall-south .wall-stack { height: 10px; min-width: 3px; }
  .is-playing .wall-east .wall-stack, .is-playing .wall-west .wall-stack { width: 10px; min-height: 3px; }
  .is-playing .table-center { gap: .2rem; }
  .is-playing .table-center:has(.latest-discard:not([hidden])) .draw-source { display: none; }
  .is-playing .draw-source { padding: .2rem; }
  .is-playing .draw-source span, .is-playing .draw-source small { display: none; }
  .is-playing .draw-source strong { font-size: .65rem; }
  .is-playing .latest-discard { padding: .3rem; gap: .3rem; width: 100%; }
  .is-playing .latest-discard .latest-discard-tile { width: 32px; height: 46px; flex-basis: 32px; }
  .is-playing .latest-discard small { font-size: .5rem; }
  .is-playing .latest-discard strong { font-size: .75rem; }
  .is-playing .discard-pile header { font-size: .55rem; }
  .is-playing .discard-pile header span { display: none; }
  .is-playing .wall-readout { padding: .2rem .4rem; }
  .is-playing .wall-readout > div p { gap: .35rem; }
  .is-playing .wall-readout strong, .is-playing .wall-readout small { font-size: .58rem; }
  .is-playing .play-dock { max-height: 54dvh; padding: .35rem .4rem max(.4rem, env(safe-area-inset-bottom)); }
  .is-playing .player-rack-heading { flex-direction: row; }
  .is-playing .player-rack-heading p { display: none; }
  .is-playing .player-rack-heading h3 { font-size: .7rem; }
  .is-playing .rack-heading-tools { max-width: 44%; }
  .is-playing .rack-heading-tools select { min-height: 36px; max-width: 100%; font-size: .7rem; }
  .is-playing .rack-help-disclosure { display: none; }
  .is-playing .full-player-rack { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); justify-items: center; gap: 12px 3px; padding: 12px 3px 8px; overflow: visible; }
  .is-playing .game-tile { width: min(100%, 44px); height: auto; aspect-ratio: 58 / 84; min-width: 0; }
  .is-playing .game-tile.is-drawn { margin-left: 0; outline: 2px solid #b88e30; outline-offset: 1px; }
  .is-playing .game-tile.is-drawn::before { font-size: .55rem; }
  .is-playing .player-hand-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .is-playing .concealed-rack-zone { width: 100%; }
  .is-playing .user-exposures { align-self: center; max-width: 100%; padding: 5px 6px 7px; }
  .is-playing .user-exposures .mini-exposure .mini-game-tile { width: 36px; height: 52px; flex-basis: 36px; }
  .is-playing .user-exposures .tile-corner { font-size: 12px; }
  .is-playing .player-hand-row:has(.user-exposures:not([hidden])) .full-player-rack { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 6px; }
  .is-playing .player-hand-row:has(.user-exposures:not([hidden])) .full-player-rack .game-tile { flex: 0 0 44px; width: 44px; }
  .is-playing .rack-selection-controls { flex-wrap: wrap; padding: .2rem; }
  .is-playing .rack-selection-controls > strong { font-size: .7rem; }
  .is-playing .rack-selection-controls:has([data-rack-arrange-toggle]) > strong { display: none; }
  .is-playing .rack-selection-controls:has([data-rack-arrange-toggle]:disabled) { display: none; }
  .is-playing .game-button { min-height: 42px; padding: .4rem .6rem; font-size: .75rem; }
  .is-playing .game-turn-controls { grid-template-columns: 1fr; padding: .4rem; }
  .is-playing .turn-action-summary span:last-child { display: none; }
  .is-playing .turn-action-buttons { justify-content: center; flex-wrap: wrap; width: 100%; }
  .is-playing .turn-action-buttons > [data-next-move] { flex: 1 1 140px; font-size: .8rem; }
  .is-playing .preplay-stage { grid-template-columns: 1fr; }
  .is-playing .preplay-copy, .is-playing .preplay-action { padding: .5rem; }
  .is-playing .preplay-copy p, .is-playing .preplay-action p { font-size: .75rem; }
  .is-playing .charleston-workspace { grid-template-columns: 1fr; }
  .is-playing .charleston-side { display: flex; flex-wrap: wrap; align-items: center; padding-top: .2rem; }
  .is-playing .charleston-side > button { flex: 1; }
  .is-playing .charleston-side .charleston-status { display: none; }
  .is-playing .charleston-heading { flex-direction: row; text-align: left; gap: .4rem; }
  .is-playing .pass-direction { width: auto; }
  .is-playing .charleston-heading h3 { font-size: .85rem; }
  .is-playing .charleston-heading .game-kicker { font-size: .6rem; }
  .is-playing .charleston-main { padding: .4rem; }
  .is-playing .play-flyout, .is-playing .coach-column.play-flyout { top: 55px; right: 4px; width: calc(100vw - 8px); bottom: calc(var(--dock-height) + 4px); padding: 0 .6rem .6rem; }
  .is-playing .coach-column.play-flyout { bottom: 8px; height: auto; }
  .is-playing .game-card-line { grid-template-columns: minmax(0,1fr) auto; }
  .is-playing .card-line-copy { grid-column: 1 / -1; }
  .is-playing .card-line-pattern { font-size: 1.18rem; }
  .is-playing .card-line-note { font-size: .75rem; }
}

/* Reference panels are temporary overlays on short phones: leave room to read
   the recommendation, then return to the rack when selecting or closing. */
@media screen and (max-width: 700px) and (max-height: 650px) {
  .is-playing .play-flyout, .is-playing .coach-column.play-flyout { bottom: 8px; height: auto; }
  .is-playing .move-coach .panel-heading h2 { font-size: 1.25rem; }
}
@media screen and (max-width: 480px) {
  .is-playing .game-toolbar > div:first-child { display: none; }
  .is-playing .game-toolbar { justify-content: center; }
}

@media print {
  .card-neighborhood-track { display: none !important; }
  .card-category-heading { display: block; padding: .04in .06in; background: white; }
  .card-category-heading h3 { font-size: 6pt; }
  .discard-closeup { display: none !important; }
  .flyout-bar, .game-toolbar, .game-play-grid { display: none !important; }
  .game-card-panel { position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  .card-filter-status, .card-filter-empty { display: none !important; }
  .game-card-panel .card-category[hidden] { display: inline-block !important; }
  .game-card-panel .game-card-line[hidden] { display: grid !important; }
}

@media screen {
  .table-compass { position: absolute; width: 40px; height: 40px; top: 8px; left: 5%; color: #c5d4b5; opacity: .7; border: 1px solid #b1c5a444; border-radius: 50%; font: 600 .5rem/1 var(--sans); pointer-events: none; }
  .table-compass::before, .table-compass::after { content: ""; position: absolute; background: #b1c5a444; }
  .table-compass::before { top: 16px; bottom: 16px; left: 50%; width: 1px; }
  .table-compass::after { left: 16px; right: 16px; top: 50%; height: 1px; }
  .table-compass span { position: absolute; }
  .compass-top { top: 5px; left: 50%; transform: translateX(-50%); }
  .compass-bottom { bottom: 5px; left: 50%; transform: translateX(-50%); }
  .compass-left { left: 5px; top: 50%; transform: translateY(-50%); }
  .compass-right { right: 5px; top: 50%; transform: translateY(-50%); }
  .table-compass .is-you { color: #ffe3a4; }
  .is-playing .table-player.is-human { padding: .2rem .5rem; }
  .is-playing .table-player.is-human .mini-exposures { display: none; }
}
@media screen and (min-width: 701px) {
  /* Give the playable tiles a slight size advantage over discards, independently
     of TV scaling. Still shrink to fit narrower desktops without clipping. */
  .is-playing .full-player-rack { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; justify-content: center; gap: 6px; padding: 16px 10px 9px; }
  .is-playing .full-player-rack .game-tile { flex: 0 1 64px; width: 64px; max-width: 64px; height: auto; min-height: 0; min-width: 0; aspect-ratio: 58 / 84; padding: 0 3px 5px 0; border-radius: 6px; }
  .is-playing .full-player-rack .game-tile .tile-corner { font-size: 14px; top: 4px; left: 4px; padding: 1px 2px; }
  .is-playing .full-player-rack .game-tile small { font-size: 8px; }
  .is-playing .full-player-rack .game-tile.is-drawn { margin-left: 14px; }
  .is-playing .full-player-rack .game-tile.is-drawn::before { font-size: 10px; top: -14px; }
  .is-playing .mahjong-table { grid-template-columns: minmax(0, min(200px, 22%)) minmax(0, 1fr) minmax(0, min(200px, 22%)); }
  .is-playing :is(.player-south, .player-north) .player-heading { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 0; }
  .is-playing .player-south .mini-exposures { margin-top: 2px; padding-top: 2px; }
  .is-playing .table-center:has(.latest-discard:not([hidden])) { display: grid; grid-template-columns: minmax(0, min(250px, 35%)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: start; justify-items: center; gap: 6px 14px; }
  .is-playing .table-center:has(.latest-discard:not([hidden])) .draw-source { display: none; }
  .is-playing .table-center:has(.latest-discard:not([hidden])) .latest-discard { grid-column: 1; grid-row: 1; width: fit-content; }
  .is-playing .table-center:has(.latest-discard:not([hidden])) .table-discards { grid-column: 2; grid-row: 1; height: 100%; }
}
/* Keep the board primary even when extra actions appear. Short windows may
   scroll the table column, rather than collapsing the board behind the dock. */
@media screen and (min-width: 901px) {
  .is-playing .board-stage { min-height: max(390px, 55dvh); }
  .is-playing .board-stage:has(.latest-discard:not([hidden])) { min-height: max(390px, 55dvh); }
  .is-playing .player-rack-panel, .is-playing .game-turn-controls { max-width: 1120px; }
  .is-playing .preplay-panel { max-width: 1120px; margin-inline: auto; }
  .is-playing .game-turn-controls { padding: 6px 10px 8px; margin-bottom: 6px; gap: 4px; }
  .is-playing .player-rack-heading { margin-bottom: 4px; }
  .is-playing .charleston-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; gap: 6px; }
  .is-playing .charleston-side > label { grid-column: 1 / -1; }
  .is-playing .charleston-side > .charleston-status { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .is-playing .charleston-side > .quick-coach-button { margin: 0; }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .is-playing .table-center:has(.latest-discard:not([hidden])) { display: flex; flex-direction: column; align-items: center; }
  .is-playing .table-center:has(.latest-discard:not([hidden])) .table-discards { height: auto; flex: 1 1 0; }
  .is-playing .mahjong-table { grid-template-rows: auto minmax(200px, 1fr) auto; }
  .is-playing .board-stage:has(.latest-discard:not([hidden])) { min-height: 480px; }
}
@media screen and (min-width: 1000px) {
  .is-playing .game-card-panel.play-flyout { left: 16px; right: 16px; width: auto; }
  .is-playing .game-card-lines { column-count: 2; column-gap: 1rem; }
  .is-playing .game-card-heading { display: flex; }
}
@media screen and (min-width: 1280px) {
  .is-playing .game-card-lines { column-count: 3; }
}
/* If the top player's sets wrap, reserve their second row even on a short screen.
   The table column can scroll; player panels must never spill into the walls. */
@media screen and (min-width: 701px) and (max-width: 900px) {
  .is-playing .board-stage:has(.player-south .mini-exposures:not([hidden])) { min-height: 560px; }
}
@media screen and (max-width: 360px) {
  .is-playing .board-stage:has(.player-south .mini-exposures:not([hidden])) { min-height: 480px; }
}
@media screen and (max-width: 700px) {
  .table-compass { width: 28px; height: 28px; top: 5px; font-size: .45rem; }
  .table-compass::before { top: 11px; bottom: 11px; }
  .table-compass::after { left: 11px; right: 11px; }
  .is-playing .play-dock { max-height: 60dvh; }
  .is-playing .charleston-workspace { display: flex; flex-direction: column; }
  .is-playing .charleston-main { display: contents; }
  .is-playing .charleston-heading { order: 0; padding: .4rem; }
  .is-playing .blind-choice { order: 1; }
  .is-playing .charleston-side { order: 2; gap: .4rem; }
  .is-playing .charleston-side label { flex: 1; font-size: .65rem; }
  .is-playing .charleston-side select { width: 100%; min-height: 38px; }
  .is-playing .pass-zone { order: 3; margin: .25rem .4rem; }
  .is-playing .table-response { order: 4; padding: 0 .4rem; }
  .is-playing .courtesy-table-details { order: 5; padding: 0 .4rem; }
  .is-playing .second-charleston-choice > p { margin: .25rem 0; font-size: .75rem; line-height: 1.4; }
  .is-playing .second-charleston-choice h3 { margin: .35rem 0; font-size: 1rem; }
  .is-playing .second-charleston-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; margin: .4rem 0; }
  .is-playing .second-charleston-actions > button:only-child { grid-column: 1/-1; }
  .card-view-actions { gap: .25rem; }
  .card-filter-toggle { font-size: .7rem; padding: .4rem; gap: .3rem; }
  .flyout-bar { font-size: .7rem; gap: .4rem; }
  .flyout-bar button { font-size: .7rem; padding: .4rem; }
}

@media screen and (max-height: 600px) {
  .is-playing .play-dock { max-height: calc(100dvh - 260px); }
}