.game-page { background: #eee7d9; }
.game-lab-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 7vw, 7rem); align-items: end; padding: clamp(4.5rem, 8vw, 8rem) clamp(1.5rem, 7vw, 8rem); background: var(--green); color: white; }
.game-lab-hero h1 { max-width: 900px; margin: 0; font-size: clamp(3.2rem, 6.3vw, 6.8rem); }
.game-lab-hero > div:first-child > p:last-child { max-width: 720px; margin: 2rem 0 0; color: rgba(255,255,255,.76); font-size: 1.05rem; }
.game-lab-promise { padding: 1.5rem; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.12); box-shadow: 8px 8px 0 rgba(215,167,65,.22); }
.game-lab-promise > span, .game-kicker, .game-card-heading p, .panel-heading p { color: var(--gold); text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; font-weight: 900; }
.game-lab-promise strong { display: block; margin: .55rem 0; font: 500 1.6rem/1.12 var(--serif); }
.game-lab-promise p { margin: 0; color: rgba(255,255,255,.72); font-size: .82rem; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.game-lobby { margin: clamp(1rem,3vw,3rem); border: 1px solid var(--line); background: #fffdf7; box-shadow: 10px 10px 0 rgba(18,63,53,.08); }
.setup-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: clamp(1.3rem,3vw,2.5rem); border-bottom: 1px solid var(--line); }
.setup-heading p { margin: .55rem 0 0; color: #5e6b67; font-size: .82rem; }.setup-heading h2 { margin: 0; font-size: clamp(2rem,4vw,3.6rem); letter-spacing: -.045em; }
.setup-heading > span { flex: 0 0 auto; padding: .55rem .7rem; border: 1px solid #a9b1ac; color: var(--green); text-transform: uppercase; letter-spacing: .09em; font-size: .6rem; font-weight: 900; }
.setup-steps { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); background: #eee7d9; }
.setup-steps li { border-right: 1px solid var(--line); }.setup-steps li:last-child { border-right: 0; }
.setup-steps button { width: 100%; min-height: 84px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-content: center; gap: 0 .7rem; padding: .8rem 1rem; border: 0; background: transparent; color: #707b77; text-align: left; cursor: pointer; }
.setup-steps button > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; align-self: center; border: 1px solid currentColor; border-radius: 50%; font-size: .6rem; font-weight: 900; }
.setup-steps strong { align-self: end; font-size: .74rem; }.setup-steps small { align-self: start; margin-top: .15rem; font-size: .56rem; }
.setup-steps .is-current button { background: #fff8e8; color: var(--coral); box-shadow: inset 0 -4px 0 var(--coral); }.setup-steps .is-complete button { color: var(--green-2); }.setup-steps .is-complete button > span { border-color: var(--green-2); background: var(--green-2); color: white; }
.setup-panel { min-height: 520px; padding: clamp(1.3rem,3vw,2.5rem); }.setup-panel[hidden] { display: none; }
.setup-panel-intro { display: grid; grid-template-columns: 90px minmax(0,800px); gap: clamp(1rem,3vw,2.5rem); align-items: start; margin-bottom: 2rem; }
.setup-panel-intro .setup-number { margin: 0; color: rgba(18,63,53,.16); font: 500 clamp(3.5rem,7vw,7rem)/.8 var(--serif); }.setup-panel-intro h3 { margin: 0; font-size: clamp(1.7rem,3vw,2.8rem); letter-spacing: -.04em; }.setup-panel-intro > div > p:last-child { max-width: 720px; margin: .7rem 0 0; color: #5d6965; font-size: .82rem; line-height: 1.55; }
.setup-choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--line); }
.setup-choice-card { position: relative; min-height: 220px; display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.4rem; background: #fffdf7; cursor: pointer; }.setup-choice-card:has(input:checked) { z-index: 1; background: #fff5dd; box-shadow: inset 0 0 0 3px var(--coral); }
.setup-choice-card input { position: absolute; top: 1rem; right: 1rem; accent-color: var(--coral); }.setup-choice-card > span:last-child { display: flex; flex-direction: column; }.choice-icon { width: 49px; height: 60px; display: grid; place-items: center; border: 1px solid #9da9a2; border-radius: 4px; background: white; color: var(--green); font: 900 .72rem/1 var(--sans); box-shadow: 0 5px 0 #9fc2b0; }
.setup-choice-card strong { max-width: 220px; padding-right: 1.2rem; font: 500 1.25rem/1.1 var(--serif); }.setup-choice-card small { margin-top: .7rem; color: #5f6b67; font-size: .72rem; line-height: 1.5; }.setup-choice-card em { margin-top: auto; padding-top: 1rem; color: var(--coral); text-transform: uppercase; letter-spacing: .09em; font-size: .52rem; font-style: normal; font-weight: 900; }
.setup-trust-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding: .8rem 1rem; border-left: 4px solid var(--green-2); background: #edf5ef; }.setup-trust-note > span { color: var(--green-2); }.setup-trust-note p { margin: 0; color: #55625d; font-size: .67rem; }
.scan-choice-icon { font-size: 1.25rem; }
.scanned-card-manager { display: grid; grid-template-columns: minmax(0,1fr); gap: .8rem; margin-top: 1rem; padding: 1.2rem; border: 1px solid #9fb2aa; background: #edf5ef; }
.scanned-card-manager p,.scanned-card-manager strong,.scanned-card-manager small { display: block; margin: 0; }
.scanned-card-manager strong { margin-top: .35rem; overflow-wrap: anywhere; font: 500 1.25rem/1.2 var(--serif); }
.scanned-card-manager small { margin-top: .35rem; max-width: 75ch; color: #5e6c67; font-size: .8rem; line-height: 1.5; }
.scanned-card-manager > p { grid-column: 1 / -1; color: #53645e; font-size: .8rem; }
.scanned-card-manager > p.is-ready { color: var(--green-2); font-weight: 700; }
.scanned-card-manager > p.is-error { color: #a64035; }
.scanned-card-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.scanned-card-actions > button { min-height: 44px; }
.scanned-card-actions > [hidden] { display: none; }

.card-scan-dialog { width: min(1120px,calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid #8b9d95; background: #fffdf7; color: var(--ink); box-shadow: 0 24px 80px rgba(6,31,25,.38); }.card-scan-dialog::backdrop { background: rgba(7,31,25,.72); backdrop-filter: blur(3px); }.card-scan-shell { min-height: min(760px,calc(100vh - 2rem)); display: flex; flex-direction: column; }.card-scan-header { display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); background: var(--green); color: white; }.card-scan-header h2 { margin: .15rem 0 .35rem; color: white; font-size: clamp(1.9rem,4vw,3.2rem); }.card-scan-header p { max-width: 720px; margin: 0; color: rgba(255,255,255,.73); font-size: .72rem; line-height: 1.5; }.card-scan-header .game-kicker { color: var(--gold); }.card-scan-close { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.45); background: transparent; color: white; font: 300 1.8rem/1 var(--sans); cursor: pointer; }.card-scan-close:hover,.card-scan-close:focus-visible { background: white; color: var(--green); }
.card-scan-steps { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; border-bottom: 1px solid var(--line); background: #eee7d9; list-style: none; }.card-scan-steps li { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 0 .6rem; align-content: center; min-height: 70px; padding: .7rem 1rem; border-right: 1px solid var(--line); color: #69756f; }.card-scan-steps li:last-child { border-right: 0; }.card-scan-steps span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; align-self: center; border: 1px solid currentColor; border-radius: 50%; font-size: .55rem; font-weight: 900; }.card-scan-steps strong { align-self: end; font-size: .68rem; }.card-scan-steps small { align-self: start; font-size: .52rem; }.card-scan-steps .is-current { background: #fff5dd; color: var(--coral); box-shadow: inset 0 -4px 0 var(--coral); }.card-scan-steps .is-complete { color: var(--green-2); }.card-scan-steps .is-complete span { border-color: var(--green-2); background: var(--green-2); color: white; }
.card-scan-panel { flex: 1; overflow: auto; padding: 1.4rem 1.6rem; }.card-scan-panel[hidden] { display: none; }.card-scan-intro { display: grid; grid-template-columns: 60px minmax(0,720px); gap: 1rem; margin-bottom: 1.2rem; }.card-scan-intro > span { color: rgba(18,63,53,.18); font: 500 3.2rem/.9 var(--serif); }.card-scan-intro h3 { margin: 0; font-size: clamp(1.45rem,3vw,2.2rem); }.card-scan-intro p { margin: .35rem 0 0; color: #5c6964; font-size: .7rem; line-height: 1.5; }
.card-image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.card-image-drop { position: relative; min-height: 280px; display: grid; place-items: center; overflow: hidden; border: 2px dashed #8fa198; background: #f8f3e9; cursor: pointer; }.card-image-drop:hover,.card-image-drop:focus-within { border-color: var(--coral); background: #fff8e8; }.card-image-placeholder { display: grid; justify-items: center; gap: .35rem; padding: 1rem; text-align: center; }.card-image-placeholder b { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font: 500 1rem var(--serif); }.card-image-placeholder strong { font: 500 1.2rem var(--serif); }.card-image-placeholder small { color: #69746f; font-size: .58rem; }.card-image-drop img { width: 100%; height: 100%; max-height: 360px; object-fit: contain; background: #e5dfd2; }.card-quality-badge { position: absolute; right: .6rem; bottom: .6rem; padding: .4rem .55rem; border: 1px solid #9da9a2; background: rgba(255,253,247,.93); color: #67736e; text-transform: uppercase; letter-spacing: .07em; font-size: .5rem; font-weight: 900; }.card-quality-badge.is-ready { border-color: var(--green-2); color: var(--green-2); }.card-quality-badge.is-error { border-color: #b85a4d; color: #a64035; }
.card-scan-privacy { display: flex; gap: .6rem; margin-top: 1rem; padding: .8rem 1rem; border-left: 4px solid var(--green-2); background: #edf5ef; }.card-scan-privacy > span { color: var(--green-2); }.card-scan-privacy p { margin: 0; color: #52615c; font-size: .63rem; line-height: 1.5; }
.card-quality-results { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.card-quality-report { padding: 1rem; border: 1px solid var(--line); background: #f8f3e9; }.card-quality-report header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }.card-quality-report h4 { margin: 0; font: 500 1.15rem var(--serif); }.card-quality-report header span { padding: .25rem .4rem; border: 1px solid currentColor; color: var(--green-2); text-transform: uppercase; font-size: .48rem; font-weight: 900; }.card-quality-report.is-error header span { color: #a64035; }.card-quality-report dl { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin: .8rem 0 0; background: var(--line); }.card-quality-report dl > div { padding: .5rem; background: #fffdf7; }.card-quality-report dt { color: #6b7672; text-transform: uppercase; font-size: .46rem; font-weight: 900; }.card-quality-report dd { margin: .22rem 0 0; font-size: .62rem; font-weight: 800; }.card-quality-report > p { margin: .65rem 0 0; color: #65716d; font-size: .58rem; line-height: 1.45; }
.card-ocr-progress { margin-top: 1rem; padding: 1rem; border: 1px solid #aab6b0; background: #f5faf6; }.card-ocr-progress > span { display: block; height: 8px; overflow: hidden; background: #d8e1db; }.card-ocr-progress i { display: block; width: 0; height: 100%; background: var(--green-2); transition: width .2s ease; }.card-ocr-progress p { margin: .55rem 0 0; color: #4f5e58; font-size: .62rem; }.card-scan-warning { margin-top: 1rem; padding: 1rem; border-left: 4px solid var(--gold); background: #fff7dc; }.card-scan-warning strong { font: 500 1rem var(--serif); }.card-scan-warning p { margin: .3rem 0 0; color: #655e4b; font-size: .63rem; line-height: 1.5; }
.scan-review-images { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }.scan-review-images figure { position: relative; min-height: 150px; max-height: 250px; display: grid; place-items: center; overflow: hidden; margin: 0; border: 1px solid #aab3ae; background: #e9e3d8; }.scan-review-images img { width: 100%; height: 100%; max-height: 250px; object-fit: contain; }.scan-review-images figcaption { position: absolute; right: .4rem; bottom: .4rem; padding: .25rem .4rem; background: rgba(18,63,53,.9); color: white; text-transform: uppercase; letter-spacing: .08em; font-size: .45rem; font-weight: 900; }
.scan-saved-edit-note { margin-bottom: 1rem; padding: .9rem 1rem; border-left: 4px solid var(--green-2); background: #edf5ef; }.scan-saved-edit-note strong { font: 500 1rem var(--serif); }.scan-saved-edit-note p { margin: .3rem 0 0; color: #52615c; font-size: .63rem; line-height: 1.5; }
.card-profile-title { display: grid; gap: .35rem; max-width: 460px; margin-bottom: 1rem; }.card-profile-title span { color: #62706a; text-transform: uppercase; letter-spacing: .08em; font-size: .52rem; font-weight: 900; }.card-profile-title input { min-height: 44px; padding: .65rem .75rem; border: 1px solid #a9b3ae; background: white; font: 600 .72rem var(--sans); }.scan-review-summary { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid #a6b3ad; background: #edf5ef; color: #52615b; font-size: .63rem; line-height: 1.5; }.scan-review-summary.is-error { border-color: #c18d83; background: #fff0ec; color: #8d4034; }.scan-line-review { display: grid; gap: .7rem; }.scan-line-card { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: .8rem; padding: .9rem; border: 1px solid var(--line); background: #f8f3e9; }.scan-line-card.is-invalid { border-color: #c18074; background: #fff0ec; }.scan-line-card-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid #d9d3c7; }.scan-line-card-heading strong { font: 500 1rem var(--serif); }.scan-line-card-heading span { color: var(--coral); text-transform: uppercase; letter-spacing: .08em; font-size: .49rem; font-weight: 900; }.scan-line-fields { display: grid; grid-template-columns: minmax(120px,.35fr) minmax(220px,1fr) 74px; gap: .55rem; }.scan-line-fields label { display: grid; gap: .25rem; }.scan-line-fields label:nth-child(4) { grid-column: 1 / -1; }.scan-line-fields span,.scan-line-confirm span { color: #68736f; text-transform: uppercase; letter-spacing: .07em; font-size: .46rem; font-weight: 900; }.scan-line-fields input { min-width: 0; min-height: 38px; padding: .5rem; border: 1px solid #acb5b0; background: #fffdf7; color: var(--ink); font: 700 .61rem var(--sans); }.scan-line-fields input[data-scan-line-pattern] { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .04em; }.scan-line-confirm { display: grid; align-content: start; gap: .55rem; }.scan-line-confirm label { display: flex; gap: .4rem; align-items: center; font-size: .58rem; font-weight: 800; }.scan-line-status { margin: 0; color: #68736f; font-size: .54rem; line-height: 1.4; }.scan-line-status.is-ready { color: var(--green-2); font-weight: 900; }.scan-line-status.is-error { color: #9f4135; }.scan-line-remove { align-self: end; padding: .4rem; border: 1px solid #b7aca1; background: transparent; color: #775f56; font: 800 .5rem var(--sans); cursor: pointer; }.scan-add-line { justify-self: start; }.scan-notation-help { margin: .8rem 0 0; color: #65716c; font-size: .56rem; line-height: 1.55; }.scan-notation-help code { padding: .08rem .2rem; background: #eee7d9; color: var(--green); }.scan-raw-text { margin-top: 1rem; border: 1px solid var(--line); background: #f8f3e9; }.scan-raw-text summary { padding: .65rem .8rem; cursor: pointer; font-size: .6rem; font-weight: 900; }.scan-raw-text pre { max-height: 220px; overflow: auto; margin: 0; padding: .8rem; border-top: 1px solid var(--line); white-space: pre-wrap; font: .55rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.card-scan-actions { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.6rem; border-top: 1px solid var(--line); background: #f4efe5; }.card-scan-actions p { margin: 0; color: #5c6863; font-size: .61rem; line-height: 1.4; text-align: center; }.card-scan-actions p.is-error { color: #a64035; font-weight: 800; }.card-scan-actions p.is-ready { color: var(--green-2); font-weight: 800; }
.player-setup-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }.player-setup-card { min-width: 0; min-height: 225px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 1rem; padding: 1.2rem; background: #fffdf7; }.player-setup-card.human-card { background: #edf5ef; }.player-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font: 500 1.2rem var(--serif); box-shadow: 3px 3px 0 var(--gold); }
.player-setup-card p { margin: .1rem 0 .2rem; color: var(--coral); text-transform: uppercase; letter-spacing: .1em; font-size: .52rem; font-weight: 900; }.player-setup-card h4 { margin: 0; font: 500 1.6rem/1 var(--serif); }.player-setup-card small { display: block; margin-top: .5rem; color: #63706b; font-size: .65rem; line-height: 1.45; }.player-setup-card label { grid-column: 1 / -1; display: grid; gap: .35rem; }.player-setup-card label > span { color: #66736e; text-transform: uppercase; letter-spacing: .08em; font-size: .52rem; font-weight: 900; }.player-setup-card select { width: 100%; padding: .7rem; border: 1px solid #aeb5af; background: white; color: var(--ink); font: 800 .68rem var(--sans); }.bot-identity button { margin-top: .55rem; padding: 0; border: 0; border-bottom: 1px solid #7c8983; background: none; color: #5e6b66; font: 700 .58rem var(--sans); cursor: pointer; }.human-chip { grid-column: 1 / -1; align-self: end; width: max-content; padding: .4rem .55rem; background: var(--green); color: white; text-transform: uppercase; letter-spacing: .08em; font-size: .52rem; font-weight: 900; }
.barbara-note { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid #d6bc78; background: #fff7dc; }.barbara-note .player-avatar { flex: 0 0 auto; background: var(--coral); }.barbara-note p { margin: 0; color: #665b43; font-size: .7rem; line-height: 1.5; }
.rules-layout { display: grid; grid-template-columns: .8fr 1.2fr 1.2fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }.rules-card { min-width: 0; padding: 1.2rem; background: #fffdf7; }.standard-rules { background: var(--green); color: white; }.rules-card-heading { padding-bottom: .8rem; border-bottom: 1px solid rgba(108,124,117,.32); }.rules-card-heading span { display: block; margin-bottom: .25rem; color: var(--coral); text-transform: uppercase; letter-spacing: .1em; font-size: .52rem; font-weight: 900; }.standard-rules .rules-card-heading span { color: var(--gold); }.rules-card-heading strong { font: 500 1.25rem var(--serif); }.standard-rules ul { display: grid; gap: .75rem; margin: 1rem 0 0; padding-left: 1.1rem; color: rgba(255,255,255,.8); font-size: .68rem; line-height: 1.45; }
.rule-toggle, .rule-select { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid #ddd7ca; cursor: pointer; }.rule-toggle:last-child, .rule-select:last-child { border-bottom: 0; }.rule-toggle input { margin-top: .2rem; accent-color: var(--coral); }.rule-toggle span, .rule-select > span { display: grid; }.rule-toggle strong, .rule-select strong { font-size: .7rem; line-height: 1.3; }.rule-toggle small, .rule-select small { margin-top: .22rem; color: #66726e; font-size: .6rem; line-height: 1.4; }.rule-select { grid-template-columns: 1fr; }.rule-select select { width: 100%; padding: .62rem; border: 1px solid #aeb5af; background: white; color: var(--ink); font: 700 .64rem var(--sans); }.rules-caution { margin: 1rem 0 0; padding: .75rem 1rem; border-left: 4px solid var(--coral); background: #fff0e8; color: #695c55; font-size: .68rem; line-height: 1.5; }
.east-roll-area { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.6fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }.east-roll-area.is-settled .dice-table { grid-column: 1 / -1; }.dice-table { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }.dice-player { min-height: 220px; display: grid; place-items: center; align-content: center; gap: .7rem; padding: 1rem; background: #f8f3e9; text-align: center; }.dice-player.is-contender { background: #fff7dc; }.dice-player.is-east { background: #edf5ef; box-shadow: inset 0 0 0 3px var(--green-2); }.dice-player.is-out { opacity: .5; }.dice-player p { margin: 0; color: #68746f; text-transform: uppercase; letter-spacing: .08em; font-size: .53rem; font-weight: 900; }.dice-player strong { font: 500 1.25rem var(--serif); }.die-face { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid #9da7a1; border-radius: 10px; background: #fffdf7; color: var(--coral); font: 500 4.2rem/.8 var(--serif); box-shadow: 0 7px 0 #a9cdbb, 0 9px 8px rgba(23,50,45,.14); }.dice-player small { color: #60706a; font-size: .58rem; }.roll-controls, .seat-result { padding: 1.3rem; background: #fffdf7; }.roll-controls { display: grid; align-content: center; gap: .8rem; }.roll-controls[hidden] { display: none; }.roll-controls p { margin: 0; color: #64706c; font-size: .68rem; line-height: 1.5; }.seat-result { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .35rem 1.5rem; align-items: center; border-top: 1px solid var(--line); background: #edf5ef; }.seat-result[hidden] { display: none; }.seat-result > p, .seat-result > h4 { margin: 0; }.seat-result h4 { font-size: 1.8rem; }.seat-result > p:last-of-type { grid-column: 1 / 3; color: #5f6d67; font-size: .63rem; }.seat-reroll { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: .4rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #65726d; font: 800 .54rem var(--sans); cursor: pointer; }.seat-reroll:hover,.seat-reroll:focus-visible { color: var(--coral); }.seat-order { display: flex; flex-wrap: wrap; gap: .45rem; }.seat-chip { padding: .45rem .55rem; border: 1px solid #9caaa3; background: white; color: #53625c; font-size: .6rem; }.seat-chip strong { color: var(--green); }
.setup-navigation { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: center; padding: 1rem clamp(1.3rem,3vw,2.5rem); border-top: 1px solid var(--line); background: #f2ecdf; }.setup-navigation p { margin: 0; color: #65716d; text-align: center; font-size: .64rem; }.setup-navigation [hidden] { display: none; }

.game-setup-bar { display: grid; grid-template-columns: 1fr 1.35fr .8fr; gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.game-setup-bar fieldset, .game-setup-actions { min-width: 0; margin: 0; padding: 1.25rem clamp(1rem, 2.5vw, 2.2rem); border: 0; background: #fffaf0; }
.game-setup-bar legend { float: left; width: 100%; margin-bottom: .65rem; color: #64716d; text-transform: uppercase; letter-spacing: .12em; font-size: .58rem; font-weight: 900; }
.game-setup-bar label { display: inline-flex; align-items: flex-start; gap: .55rem; margin: .2rem 1rem .2rem 0; cursor: pointer; }
.game-setup-bar label span { display: grid; line-height: 1.15; }
.game-setup-bar label strong { font-size: .77rem; }.game-setup-bar label small { margin-top: .2rem; color: #6a7672; font-size: .62rem; }
.game-setup-bar input { margin-top: .13rem; accent-color: var(--coral); }
.game-setup-actions { display: grid; align-content: center; gap: .65rem; }
.game-setup-actions p { margin: 0; color: #65716e; font-size: .62rem; line-height: 1.4; }.game-setup-actions p span { color: var(--green-2); }

.game-button, .game-toolbar button { appearance: none; padding: .72rem .9rem; border: 1px solid #9ca69f; border-radius: 2px; background: #fffdf7; color: var(--ink); font: 800 .72rem/1 var(--sans); cursor: pointer; }
.game-button:hover, .game-button:focus-visible, .game-toolbar button:hover, .game-toolbar button:focus-visible { border-color: var(--coral); outline: 2px solid rgba(232,95,69,.18); outline-offset: 2px; }
.game-button-primary { border-color: var(--green); background: var(--green); color: white; box-shadow: 3px 3px 0 var(--gold); }
.game-button[disabled] { cursor: default; opacity: .48; box-shadow: none; }

.game-workspace { padding: clamp(1rem, 2.4vw, 2.4rem); }
.game-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; border: 1px solid var(--line); background: #fffdf7; }
.game-toolbar p { margin: 0 0 .25rem; }.game-toolbar h2 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 2rem); letter-spacing: -.025em; }
.game-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }

.game-card-panel { margin-top: 1px; padding: 1.35rem; border: 1px solid var(--line); background: #f7ecca; box-shadow: inset 0 0 0 5px rgba(255,255,255,.34); }
.game-card-heading { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; padding-bottom: .8rem; border-bottom: 2px solid var(--ink); }
.game-card-heading p { margin: 0 0 .15rem; color: #a74e3a; }.game-card-heading h2 { margin: 0; font-size: clamp(1.55rem, 2.4vw, 2.3rem); }
.game-card-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.game-card-key span { display: flex; align-items: center; gap: .28rem; }.game-card-key i { width: 8px; height: 8px; border-radius: 50%; }.key-red { background: #b94838; }.key-green { background: #16735a; }.key-blue { background: #176f8b; }.game-card-key .key-match, .game-card-key .key-joker { width: 13px; height: 13px; border-radius: 2px; }.key-match { border: 1px solid #4c8e75; background: #dff1e6; }.key-joker { border: 1px solid #b78925; background: #fff0b8; }
.game-card-key .key-dragon { width: auto; height: auto; border-radius: 0; color: #b94838; font: 800 1rem/1 var(--sans); font-style: normal; }
.game-card-note { margin: .75rem 0; color: #5e6966; font-size: .72rem; }
.game-card-lines { column-count: 2; column-gap: 1px; padding: 1px; border: 1px solid rgba(23,50,45,.22); background: rgba(23,50,45,.22); }
.card-category { width: 100%; display: inline-block; margin: 0 0 1px; break-inside: avoid; background: rgba(255,255,255,.34); }.card-category > h3 { margin: 0; padding: .5rem .7rem; border-bottom: 2px solid rgba(23,50,45,.34); background: rgba(255,255,255,.42); color: #844334; text-transform: uppercase; letter-spacing: .11em; font: 900 .56rem/1.2 var(--sans); }.card-category-lines { display: grid; }
.game-card-line { display: grid; grid-template-columns: minmax(0, 1fr) 50px 62px; gap: .55rem; align-items: center; min-height: 68px; padding: .55rem .65rem; border-bottom: 1px solid rgba(23,50,45,.18); background: rgba(255,255,255,.18); color: var(--ink); }.game-card-line:last-child { border-bottom: 0; }.game-card-line.is-tracked { background: #fff8e7; box-shadow: inset 5px 0 0 var(--coral); }
.game-card-line.is-blocked { background: rgba(122,64,53,.08); opacity: .62; }.game-card-line.is-blocked .card-line-progress strong { color: #9a493a; font-size: .66rem; }
.card-line-copy { min-width: 0; display: grid; gap: .14rem; }.card-line-name { color: #404a47; text-transform: uppercase; letter-spacing: .05em; font-size: .48rem; }.card-line-pattern { display: flex; flex-wrap: wrap; align-items: center; gap: .08rem; font: 900 clamp(.98rem, 1.4vw, 1.25rem)/1 var(--serif); letter-spacing: .01em; }.card-line-note { color: #5d6865; font-size: .55rem; font-style: italic; line-height: 1.25; }
.pattern-group { display: inline-flex; align-items: center; gap: 1px; }.pattern-red { color: #b94838; }.pattern-green { color: #16735a; }.pattern-blue { color: #176f8b; }.pattern-neutral { margin: 0 .07rem; color: #3a3933; font-style: normal; }.pattern-slot { min-width: .66em; display: inline-grid; place-items: center; padding: .08em .05em; border: 1px solid transparent; border-radius: 2px; font-style: normal; }.pattern-slot.is-natural-match { border-color: #77a992; background: #dff1e6; box-shadow: inset 0 -2px 0 #4c8e75; }.pattern-slot.is-joker-match { border-color: #c19a43; background: #fff0b8; box-shadow: inset 0 -2px 0 #b78925; }
.card-line-progress { display: grid; min-width: 52px; text-align: right; }.card-line-progress strong { font-size: .9rem; }.card-line-progress small { color: #65716e; font-size: .5rem; text-transform: uppercase; }
.card-line-track { padding: .4rem .42rem; border: 1px solid #8d938c; border-radius: 2px; background: #fffdf7; color: var(--ink); font: 900 .5rem/1 var(--sans); text-transform: uppercase; cursor: pointer; }.card-line-track:hover, .card-line-track:focus-visible { border-color: var(--coral); outline: 2px solid rgba(232,95,69,.17); }.game-card-line.is-tracked .card-line-track { border-color: var(--coral); color: var(--coral); }

.official-card-private { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem 2rem; align-items: start; padding: 1.3rem; border: 1px dashed #8b806d; background: rgba(255,255,255,.34); }
.official-card-private > div:first-child > span { float: left; margin: .1rem .8rem .5rem 0; font-size: 2rem; }.official-card-private h3 { margin: 0; font: 500 1.5rem/1.1 var(--serif); }.official-card-private p { margin: .5rem 0 0; color: #596460; font-size: .73rem; }.official-card-private > p { grid-column: 1 / -1; padding-top: .8rem; border-top: 1px solid rgba(23,50,45,.16); }
.private-targets { display: grid; gap: .5rem; }.private-target { display: grid; grid-template-columns: 1fr 76px; gap: .45rem; }.private-target input, .private-target select { width: 100%; padding: .62rem; border: 1px solid #a99e8c; background: #fffdf7; color: var(--ink); font: 700 .7rem var(--sans); }

.game-play-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 1px; margin-top: 1px; background: var(--line); }.game-play-grid.is-coaching-hidden { grid-template-columns: minmax(0,1fr); }.coach-column[hidden] { display: none !important; }
.table-column { min-width: 0; padding: 1.2rem; background: #f8f3e9; }.coach-column { display: grid; align-content: start; gap: 1px; background: var(--line); }
.game-phase-track { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 1rem; padding: 0; list-style: none; border: 1px solid var(--line); background: #fffdf7; }
.game-phase-track li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 .55rem; padding: .65rem .75rem; border-right: 1px solid var(--line); color: #75807c; }.game-phase-track li:last-child { border: 0; }
.game-phase-track li > span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .58rem; font-weight: 900; }.game-phase-track strong { font-size: .72rem; line-height: 1.2; }.game-phase-track small { font-size: .52rem; line-height: 1.2; }
.game-phase-track .is-complete { color: var(--green-2); }.game-phase-track .is-complete > span { background: var(--green-2); color: white; }.game-phase-track .is-current { color: var(--coral); background: #fff6ee; }

.preplay-panel { margin-bottom: 1rem; border: 1px solid var(--line); background: #fffdf7; }.preplay-panel[hidden] { display: none; }
.preplay-stage { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 1px; background: var(--line); }.preplay-copy, .preplay-action { padding: clamp(1rem,2.5vw,1.6rem); background: #fffdf7; }.preplay-copy { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; }.preplay-step-number { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); font-size: .65rem; font-weight: 900; }.preplay-copy h3 { margin: .1rem 0 .45rem; font-size: clamp(1.45rem,2.3vw,2.1rem); letter-spacing: -.035em; }.preplay-copy p { max-width: 720px; margin: 0; color: #5d6965; font-size: .74rem; line-height: 1.55; }.preplay-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }.preplay-facts span { padding: .42rem .55rem; border: 1px solid #b8b3a8; background: #f8f3e9; color: #57645f; font-size: .58rem; font-weight: 800; }.preplay-action { display: grid; align-content: center; gap: .7rem; background: #f6efdf; }.preplay-action p { margin: 0; color: #64706c; font-size: .65rem; line-height: 1.5; }.wall-dice { display: flex; align-items: center; gap: .5rem; }.wall-die { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #9da7a1; border-radius: 8px; background: white; color: var(--coral); font: 500 3.2rem/.8 var(--serif); box-shadow: 0 5px 0 #a9cdbb; }.wall-dice strong { margin-left: .25rem; font: 500 1.5rem var(--serif); }
.charleston-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: .85rem; }.charleston-heading h3 { margin: .1rem 0 .3rem; font-size: clamp(1.4rem,2.2vw,2rem); }.charleston-heading p { margin: 0; color: #5e6b66; font-size: .68rem; line-height: 1.45; }.pass-direction { flex: 0 0 auto; min-width: 94px; padding: .65rem; border: 1px solid #c0ae7b; background: #fff7dc; color: #735826; text-align: center; }.pass-direction span { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .48rem; font-weight: 900; }.pass-direction strong { display: block; margin-top: .2rem; font: 500 1.2rem var(--serif); }
.charleston-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.42fr); gap: 1px; background: var(--line); }.charleston-main, .charleston-side { padding: 1.1rem; background: #fffdf7; }.pass-zone { min-height: 90px; display: flex; align-items: center; gap: .45rem; padding: .75rem; border: 2px dashed #b3a88f; background: #f8f3e9; }.pass-zone.is-ready { border-style: solid; border-color: var(--green-2); background: #edf5ef; }.pass-zone.is-over { border-color: var(--coral); background: #fff0e8; }.pass-placeholder { color: #697570; font-size: .65rem; }.pass-zone .mini-game-tile, .pass-zone .mini-tile-back { width: 34px; height: 48px; flex-basis: 34px; font-size: .7rem; }
.charleston-help { margin: .65rem 0 0; color: #65716d; font-size: .6rem; line-height: 1.45; }.charleston-side { display: grid; align-content: start; gap: .65rem; background: #f6efdf; }.charleston-side label { display: grid; gap: .35rem; color: #57645f; font-size: .6rem; font-weight: 800; }.charleston-side select { padding: .62rem; border: 1px solid #aeb5af; background: white; color: var(--ink); font: 700 .65rem var(--sans); }.charleston-status { margin: 0; color: #5e6b66; font-size: .62rem; line-height: 1.5; }
.blind-choice { margin-bottom: .85rem; padding: .8rem; border-left: 4px solid var(--gold); background: #fff7dc; }.blind-choice strong { display: block; font: 500 1.05rem var(--serif); }.blind-choice p { margin: .3rem 0 .65rem; color: #665e4b; font-size: .62rem; line-height: 1.45; }.blind-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }.blind-buttons button { padding: .5rem .6rem; border: 1px solid #a89a73; background: white; color: var(--ink); font: 800 .58rem var(--sans); cursor: pointer; }
.second-charleston-choice { padding: 1.2rem; text-align: center; }.second-charleston-choice h3 { margin: .2rem 0 .5rem; font-size: 1.7rem; }.second-charleston-choice p { max-width: 650px; margin: 0 auto 1rem; color: #5e6b66; font-size: .7rem; line-height: 1.55; }.second-charleston-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }

.mahjong-table { position: relative; width: 100%; min-height: 720px; overflow: hidden; border: 13px solid #9b744a; border-radius: 34px; background: #164d41; box-shadow: inset 0 0 0 3px #d8b37a, 0 12px 0 #6b4b2e; }
.mahjong-table::before { content: ""; position: absolute; inset: 96px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; }
.game-wall { position: absolute; z-index: 3; display: grid; gap: 2px; }
.wall-north, .wall-south { left: 50%; width: min(70%, 620px); grid-template-columns: repeat(19, 1fr); transform: translateX(-50%); }.wall-north { top: 19px; }.wall-south { bottom: 19px; }
.wall-east, .wall-west { top: 50%; height: min(65%, 485px); grid-template-rows: repeat(19, 1fr); transform: translateY(-50%); }.wall-east { right: 22px; }.wall-west { left: 22px; }
.wall-stack { position: relative; min-width: 8px; min-height: 8px; border: 1px solid #779887; border-radius: 1px; background: linear-gradient(to bottom, #f8f7ed 0 47%, #5f8473 48% 54%, #dbe9de 55%); box-shadow: 1px 1px 0 #9cbea9; transition: opacity .2s ease; }
.wall-north .wall-stack, .wall-south .wall-stack { height: 25px; }.wall-east .wall-stack, .wall-west .wall-stack { width: 25px; background: linear-gradient(to right, #f8f7ed 0 47%, #5f8473 48% 54%, #dbe9de 55%); }
.wall-stack.is-spent { opacity: .08; box-shadow: none; }.wall-stack.is-half { opacity: .5; }.wall-stack.is-next { border: 2px solid var(--coral); background-color: #fff3e8; box-shadow: 0 0 0 3px rgba(232,95,69,.24); }
.wall-stack.is-counted { border-color: var(--gold); background: linear-gradient(to bottom,#fff4c8 0 47%,#b98b24 48% 54%,#f4d989 55%); }.wall-east .wall-stack.is-counted, .wall-west .wall-stack.is-counted { background: linear-gradient(to right,#fff4c8 0 47%,#b98b24 48% 54%,#f4d989 55%); }.wall-stack.is-open { border: 2px solid var(--coral); box-shadow: 0 0 0 3px rgba(232,95,69,.24); }.wall-stack.is-open::after { content: "OPEN"; position: absolute; z-index: 8; top: -18px; left: 50%; transform: translateX(-50%); color: white; font: 900 .4rem/1 var(--sans); letter-spacing: .06em; }
.wall-stack.is-next::after { content: "NEXT"; position: absolute; z-index: 8; top: -18px; left: 50%; transform: translateX(-50%); color: white; font: 900 .42rem/1 var(--sans); letter-spacing: .08em; }

.table-player { position: absolute; z-index: 4; width: 260px; padding: .65rem; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; background: rgba(7,40,33,.88); color: white; box-shadow: 4px 4px 0 rgba(0,0,0,.16); }.table-player.is-active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(215,167,65,.25); }
.player-north { top: 60px; left: 50%; transform: translateX(-50%); }.player-south { bottom: 60px; left: 50%; transform: translateX(-50%); }.player-east { top: 50%; right: 58px; transform: translateY(-50%); }.player-west { top: 50%; left: 58px; transform: translateY(-50%); }
.player-heading { display: flex; justify-content: space-between; margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .08em; font-size: .55rem; font-weight: 900; }.player-heading small { color: rgba(255,255,255,.55); }
.mini-player-rack { min-height: 38px; display: flex; align-items: flex-end; justify-content: center; gap: 1px; overflow: hidden; }.mini-game-tile, .mini-tile-back { width: 16px; height: 28px; flex: 0 0 16px; display: grid; place-items: center; border: 1px solid #b7af9f; border-radius: 2px; background: #fffdf7; color: var(--ink); font: 900 .47rem/1 var(--sans); box-shadow: 0 2px 0 #8eb09e; }.mini-tile-back { border-color: #df947d; background: repeating-linear-gradient(45deg,#f8d7ca 0 3px,#e85f45 3px 5px); color: transparent; }
.mini-exposures { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: .45rem; padding: .45rem .2rem .1rem; border-top: 1px solid rgba(255,255,255,.28); }.mini-exposure { display: grid; justify-items: center; gap: 3px; padding: 4px 5px 6px; border: 2px solid var(--gold); border-radius: 4px; background: #fff8e5; color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.22); }.mini-exposure-label { color: #735826; text-transform: uppercase; letter-spacing: .08em; font: 900 .43rem/1 var(--sans); }.mini-exposure-tiles { display: inline-flex; align-items: flex-end; gap: 2px; }.mini-exposure .mini-game-tile { width: 22px; height: 32px; flex-basis: 22px; font-size: .55rem; box-shadow: 0 3px 0 #8eb09e; }.mini-exposure .mini-game-tile.is-called-tile { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral),0 3px 0 #8eb09e; }

.table-center { position: absolute; z-index: 2; inset: 180px 245px; display: grid; place-items: center; align-content: center; gap: .55rem; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(7,40,33,.2); }
.draw-source { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: .35rem; padding: .45rem .65rem; border-radius: 3px; background: #fff8e9; color: var(--ink); font-size: .55rem; }.draw-source span { color: var(--coral); font-weight: 900; text-transform: uppercase; }.draw-source strong { font-family: var(--serif); font-size: .86rem; }.draw-source small { color: #65716e; }
.latest-discard { min-width: 210px; display: flex; align-items: center; justify-content: center; gap: .65rem; padding: .5rem .65rem; border: 2px solid var(--gold); border-radius: 5px; background: #fff7dc; color: var(--ink); box-shadow: 0 5px 0 rgba(0,0,0,.16); }.latest-discard[hidden] { display: none; }.latest-discard > span { display: grid; gap: .12rem; }.latest-discard small { color: var(--coral); text-transform: uppercase; letter-spacing: .09em; font-size: .45rem; font-weight: 900; }.latest-discard strong { max-width: 150px; font: 500 .78rem/1.15 var(--serif); }.latest-discard .latest-discard-tile { width: 38px; height: 52px; flex-basis: 38px; font-size: .75rem; box-shadow: 0 4px 0 #8eb09e; animation: discard-arrive .35s ease-out both; }.latest-discard .mini-soap-frame { width: 18px; height: 23px; }.discard-pond { width: min(100%, 340px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }.discard-pond.is-shared { grid-template-columns: 1fr; }.discard-pile { min-width: 0; padding: .3rem; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: rgba(4,31,25,.42); }.discard-pile header { display: flex; justify-content: space-between; gap: .35rem; margin-bottom: .25rem; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .06em; font-size: .42rem; font-weight: 900; }.discard-pile header strong { color: var(--gold); white-space: nowrap; }.discard-pile > div { min-height: 38px; max-height: 74px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: center; gap: 5px; overflow-y: auto; padding: 4px 4px 10px; scroll-padding-bottom: 10px; }.discard-stack { position: relative; display: inline-flex; padding: 0 9px 9px 0; }.discard-stack > b { position: absolute; z-index: 2; right: 0; bottom: 1px; min-width: 19px; padding: 3px 4px; border: 1px solid rgba(32,59,52,.28); border-radius: 10px; background: var(--gold); color: #203b34; text-align: center; font: 900 .5rem/1 var(--sans); box-shadow: 0 2px 0 rgba(0,0,0,.24); }.discard-pile .mini-game-tile { width: 20px; height: 29px; flex-basis: 20px; font-size: .48rem; box-shadow: 0 2px 0 #8eb09e; }.discard-pile-empty { color: rgba(255,255,255,.35); }.table-center > p { margin: 0; color: rgba(255,255,255,.58); text-transform: uppercase; letter-spacing: .12em; font-size: .5rem; font-weight: 900; }
@keyframes discard-arrive { from { opacity: 0; transform: translateY(-16px) scale(1.25); } to { opacity: 1; transform: translateY(0) scale(1); } }

.wall-readout { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .75rem .9rem; border: 1px solid var(--line); background: #fffdf7; }.wall-readout > div { display: flex; align-items: center; gap: .65rem; }.wall-readout-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(232,95,69,.16); }.wall-readout p { margin: 0; color: #66716e; font-size: .63rem; }.wall-readout > div p { display: grid; }.wall-readout strong { color: var(--ink); font-size: .75rem; }.wall-readout small { font-size: .56rem; }

.player-rack-panel { margin-top: 1px; padding: 1rem; border: 1px solid var(--line); background: #eee6d7; }.player-rack-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }.player-rack-heading p { margin: 0; color: var(--coral); text-transform: uppercase; letter-spacing: .1em; font-size: .55rem; font-weight: 900; }.player-rack-heading h3 { margin: .15rem 0 0; font: 500 1.25rem/1.1 var(--serif); }.rack-heading-tools { max-width: 520px; display: grid; justify-items: end; gap: .5rem; color: #68736f; text-align: right; font-size: .62rem; }.rack-sort-row { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }.rack-heading-tools label { display: flex; align-items: center; gap: .45rem; }.rack-heading-tools label > span { color: #53625c; text-transform: uppercase; letter-spacing: .07em; font-size: .49rem; font-weight: 900; }.rack-heading-tools select { max-width: 260px; padding: .42rem .5rem; border: 1px solid #9ea9a3; background: #fffdf7; color: var(--ink); font: 700 .6rem var(--sans); }.rack-heading-tools button { padding: .48rem .55rem; border: 1px solid #9ea9a3; background: #fffdf7; color: var(--ink); font: 800 .55rem/1 var(--sans); cursor: pointer; }
.user-exposures { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: .8rem; padding: .8rem; border: 2px solid #b49b62; background: #fff8e5; box-shadow: inset 0 0 0 2px rgba(255,255,255,.65); }.user-exposures > strong { color: #7b5d1b; text-transform: uppercase; letter-spacing: .08em; font-size: .57rem; }.exposed-set { display: inline-flex; align-items: center; gap: 3px; padding: .45rem; border: 2px solid #c4ad75; border-radius: 3px; background: #fffdf7; box-shadow: 0 3px 0 rgba(32,59,52,.12); }.exposed-set-label { margin-right: .35rem; color: #665a3f; font-size: .57rem; font-weight: 900; text-transform: uppercase; }.exposed-set .mini-game-tile { width: 32px; height: 45px; flex-basis: 32px; font-size: .72rem; box-shadow: 0 3px 0 #8eb09e; }.exposed-set .mini-game-tile.is-called-tile { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral),0 3px 0 #8eb09e; }
.joker-exchanges { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .35rem .75rem; align-items: center; margin-top: .55rem; padding: .7rem; border: 1px solid #82a795; background: #edf6ef; }.joker-exchanges > strong { grid-row: 1 / 3; color: var(--green); font: 500 1rem/1.05 var(--serif); }.joker-exchanges p { margin: 0; color: #5c6964; font-size: .58rem; }.joker-exchange-actions { display: flex; flex-wrap: wrap; gap: .4rem; }.joker-exchange-actions button { padding: .5rem .6rem; border: 1px solid #6e9683; background: #fffdf7; color: var(--green); font: 800 .56rem/1.2 var(--sans); cursor: pointer; }.joker-exchange-actions button:hover,.joker-exchange-actions button:focus-visible { border-color: var(--coral); outline: 2px solid rgba(232,95,69,.16); }
.full-player-rack { min-height: 116px; display: flex; align-items: flex-end; gap: 6px; margin-top: .8rem; padding: 1.2rem .8rem .9rem; overflow-x: auto; border-bottom: 12px solid #4f7c69; border-radius: 4px; background: rgba(18,63,53,.08); }.game-tile { position: relative; flex: 0 0 58px; width: 58px; height: 84px; padding: 0 3px 5px 0; border: 0; border-radius: 6px; background: linear-gradient(135deg,#dcece2,#a9cdbb); color: var(--ink); box-shadow: 0 5px 0 #83ad99,2px 7px 5px rgba(23,50,45,.18); cursor: default; }.game-tile .tile-face { font-size: 1.7rem; }.game-tile .tile-corner { position: absolute; z-index: 2; top: 5px; left: 5px; color: #111; font: 900 .53rem/1 var(--sans); }.game-tile small { position: relative; z-index: 2; margin-top: .2rem; font: 900 .34rem/1 var(--sans); letter-spacing: .08em; }.game-tile.is-drawn { margin-left: 18px; box-shadow: 0 5px 0 var(--gold),2px 7px 5px rgba(23,50,45,.18); }.game-tile.is-drawn::before { content: "DRAWN"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); color: var(--coral); font: 900 .4rem/1 var(--sans); letter-spacing: .06em; }.game-tile.can-discard { cursor: pointer; }.game-tile.can-discard:hover, .game-tile.can-discard:focus-visible { transform: translateY(-7px); outline: 3px solid var(--coral); outline-offset: 2px; }
.game-tile[draggable="true"] { cursor: grab; }.game-tile[draggable="true"]:active { cursor: grabbing; }.game-tile.is-dragging { opacity: .3; transform: translateY(-8px); }.game-tile.is-drop-target { box-shadow: -5px 0 0 var(--coral),0 5px 0 #83ad99; }
.tile-risk-badge { position: absolute; z-index: 4; top: -10px; right: -4px; padding: 3px 4px; border: 1px solid currentColor; border-radius: 8px; background: #fffdf7; font: 900 .34rem/1 var(--sans); letter-spacing: .04em; box-shadow: 0 2px 3px rgba(18,63,53,.18); }.game-tile.risk-hot .tile-risk-badge { color: #a33f31; background: #fff0ec; }.game-tile.risk-caution .tile-risk-badge { color: #806019; background: #fff5d8; }.game-tile.risk-lower .tile-risk-badge { color: #23624f; background: #edf6ef; }.game-tile.risk-hot.can-discard { box-shadow: 0 5px 0 #bd6a5c,2px 7px 5px rgba(23,50,45,.18); }.game-tile.risk-caution.can-discard { box-shadow: 0 5px 0 #c8a748,2px 7px 5px rgba(23,50,45,.18); }
.game-tile.is-pass-selected { transform: translateY(-9px); outline: 3px solid var(--gold); outline-offset: 2px; }.game-tile.is-blind { color: transparent !important; background: repeating-linear-gradient(45deg,#f8d7ca 0 5px,#e85f45 5px 8px); }.game-tile.is-blind .tile-face { visibility: hidden; }
.game-tile.bam { color: #16735a; }.game-tile.dot, .game-tile.soap { color: #176f8b; }.game-tile.crak, .game-tile.red { color: #c74736; }.game-tile.green { color: #16735a; }.game-tile.wind { color: #735826; }.game-tile.flower { color: #aa3d70; }.game-tile.joker { color: #9a6500; background: linear-gradient(135deg,#f0e5ae,#c9ae55); box-shadow: 0 5px 0 #ad913f,2px 7px 5px rgba(23,50,45,.18); }
.simple-pips { width: 31px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }.simple-pips i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: currentColor; }.simple-bams { max-width: 35px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }.simple-bams i { width: 5px; height: 17px; border-radius: 1px; background: currentColor; box-shadow: inset 0 4px 0 #d7a741; }.simple-soap { width: 32px; height: 39px; border: 4px double currentColor; }.mini-soap-frame { width: 9px; height: 13px; border: 2px double currentColor; }.simple-bird { font-size: 1.55rem; }
.game-turn-controls { position: relative; display: grid; grid-template-columns: minmax(230px,1fr) auto; gap: 1rem; align-items: center; margin-top: 1px; padding: 1rem 1.1rem; border: 2px solid #91aa9f; background: linear-gradient(110deg,#f4faf6,#fffdf7); box-shadow: 0 4px 0 rgba(18,63,53,.13); }.turn-action-summary { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; }.turn-action-dot { width: 14px; height: 14px; border: 4px solid #dbe8e0; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 1px var(--green-2); }.turn-action-summary p { min-width: 0; display: grid; gap: .22rem; margin: 0; }.turn-action-summary strong { color: var(--coral); text-transform: uppercase; letter-spacing: .11em; font-size: .58rem; }.turn-action-summary span:last-child { color: #3f4f49; font: 500 .78rem/1.35 var(--sans); }.turn-action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }.turn-action-buttons > [data-next-move] { min-width: 235px; padding: .95rem 1.15rem; font-size: .78rem; }.turn-secondary-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }.turn-secondary-actions .game-button { padding: .58rem .65rem; color: #4f5d58; font-size: .58rem; }.game-turn-controls.is-human-action { border-color: var(--coral); background: linear-gradient(110deg,#fff4e9,#fffdf7); box-shadow: 0 5px 0 rgba(232,95,69,.2); }.game-turn-controls.is-human-action .turn-action-dot { background: var(--coral); box-shadow: 0 0 0 1px var(--coral),0 0 0 7px rgba(232,95,69,.12); }.game-turn-controls.is-rack-choice .turn-action-buttons > [data-next-move] { border: 2px dashed var(--green-2); background: #f4faf6; color: var(--green); opacity: 1; box-shadow: none; }.game-turn-controls.is-call-action { border-color: var(--gold); background: linear-gradient(110deg,#fff7dc,#fffdf7); }.game-turn-controls.is-call-action .turn-action-dot { background: var(--gold); box-shadow: 0 0 0 1px #9b771c,0 0 0 7px rgba(216,177,72,.18); }
.defense-guide { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: .8rem; align-items: center; margin-top: .75rem; padding: .8rem; border: 1px solid #9fb2aa; background: #f7fbf8; }.defense-guide-copy > p { margin: 0; }.defense-guide-copy > strong { display: block; margin: .15rem 0 .3rem; font: 500 1.05rem/1.1 var(--serif); }.defense-guide-copy > p:last-child,.defense-clear { color: #5c6964; font-size: .57rem; line-height: 1.45; }.defense-alerts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }.defense-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border: 1px solid #a9b4af; background: #fffdf7; }.defense-chip .mini-game-tile { width: 22px; height: 31px; flex-basis: 22px; font-size: .5rem; }.defense-chip strong { font-size: .5rem; text-transform: uppercase; letter-spacing: .04em; }.defense-chip.risk-hot { border-color: #c77a6c; color: #963b2f; background: #fff0ec; }.defense-chip.risk-caution { border-color: #c6a958; color: #775813; background: #fff8e2; }.defense-clear { margin: 0; padding: .7rem; border-left: 4px solid var(--green-2); background: #edf6ef; }
.call-decision { margin-top: 1px; padding: 1rem; border: 2px solid var(--gold); background: #fff8e2; }.call-decision-heading { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center; }.call-decision-heading .mini-game-tile { width: 36px; height: 50px; flex-basis: 36px; font-size: .75rem; }.call-decision-heading p { margin: 0; color: var(--coral); text-transform: uppercase; letter-spacing: .08em; font-size: .5rem; font-weight: 900; }.call-decision-heading h3 { margin: .15rem 0 0; font: 500 1.35rem/1.05 var(--serif); }.call-decision > p { margin: .65rem 0; color: #59645f; font-size: .68rem; line-height: 1.45; }.call-options { display: flex; flex-wrap: wrap; gap: .5rem; }.call-option { min-width: 150px; display: grid; gap: .18rem; padding: .65rem .75rem; border: 1px solid #9d8b62; background: #fffdf7; color: var(--ink); text-align: left; cursor: pointer; }.call-option:hover,.call-option:focus-visible { border-color: var(--coral); outline: 2px solid rgba(232,95,69,.18); }.call-option strong { font: 500 1rem/1 var(--serif); }.call-option small { color: #68736f; font-size: .52rem; }.call-pass { border-color: #a9aea8; background: transparent; }
.hand-result { margin-top: 1px; padding: 1.15rem; border: 3px solid var(--green-2); background: #edf6ef; box-shadow: 0 6px 0 rgba(18,63,53,.16); }.hand-result:focus { outline: 4px solid rgba(215,167,65,.35); outline-offset: 3px; }.hand-result.is-wall-game { border-color: var(--gold); background: #fff8e2; }.hand-result-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,.36fr); gap: 1rem; align-items: stretch; }.hand-result p { margin: 0; }.hand-result .game-kicker { color: var(--green-2); }.hand-result.is-wall-game .game-kicker { color: #8a6515; }.hand-result h3 { margin: .2rem 0 .4rem; font: 500 1.75rem/1.05 var(--serif); }.hand-result-summary { max-width: 780px; color: #53615c; font-size: .72rem; line-height: 1.55; }.hand-result-facts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }.hand-result-facts span { padding: .35rem .5rem; border: 1px solid #a7b8b0; background: #fffdf7; font-size: .55rem; font-weight: 800; }.hand-result-sequence { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: .85rem 0 0; padding: 0; list-style: none; background: #d8c99f; counter-reset: result-step; }.hand-result-sequence li { display: grid; grid-template-columns: auto 1fr; gap: .45rem; align-content: start; padding: .65rem; background: rgba(255,253,247,.92); color: #5b635f; font-size: .58rem; line-height: 1.4; counter-increment: result-step; }.hand-result-sequence li::before { content: counter(result-step); width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #203b34; font-size: .5rem; font-weight: 900; }.hand-result-sequence strong { display: block; color: var(--ink); font-size: .62rem; }.hand-result-next { min-width: 0; display: grid; align-content: center; gap: .5rem; padding: 1rem; border-left: 4px solid var(--gold); background: #fffdf7; }.hand-result-next strong { display: block; font: 500 1.1rem/1.1 var(--serif); }.hand-result-next small { color: #66716d; font-size: .58rem; line-height: 1.45; }.hand-result-next .game-button { width: 100%; margin-top: .25rem; }.game-turn-controls.is-hand-complete { border-color: var(--gold); background: #fffaf0; }.game-turn-controls.is-hand-complete .turn-action-dot { background: var(--gold); box-shadow: 0 0 0 1px #9b771c,0 0 0 7px rgba(216,177,72,.18); }.game-turn-controls.is-hand-complete .turn-action-buttons > [data-next-move] { border-color: #b8aa83; background: #eee9dc; color: #736c5b; box-shadow: none; }
.wall-readout.is-hot-wall { border-color: #b45b49; background: #fff0ec; }.wall-readout.is-hot-wall .wall-readout-dot { background: #b45b49; box-shadow: 0 0 0 5px rgba(180,91,73,.15); }.wall-readout.is-hot-wall > p { color: #873e31; font-weight: 800; }
.exposure-adjustment { width: 100%; padding: .7rem; border: 1px solid #b99c52; background: #fff8e2; }.exposure-adjustment strong { display: block; font: 500 1rem/1.1 var(--serif); }.exposure-adjustment p { margin: .25rem 0 .55rem; color: #645d4c; font-size: .58rem; line-height: 1.4; }.exposure-adjustment-actions { display: flex; flex-wrap: wrap; gap: .35rem; }.exposure-adjustment-actions button { padding: .45rem .6rem; border: 1px solid #9d8b62; background: #fffdf7; color: var(--ink); font: 800 .56rem/1 var(--sans); cursor: pointer; }.exposure-adjustment-actions button.is-current { border-color: var(--green-2); background: var(--green-2); color: #fff; }

.candidate-panel, .move-coach, .game-history { padding: 1.2rem; background: #fffdf7; }.panel-heading p { margin: 0 0 .25rem; color: var(--coral); }.panel-heading h2 { margin: 0 0 1rem; font-size: 1.65rem; letter-spacing: -.03em; }
.candidate-list { display: grid; gap: .55rem; }.candidate-card { position: relative; overflow: hidden; padding: .75rem; border: 1px solid var(--line); background: #f8f3e9; }.candidate-card::before { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: linear-gradient(to right,var(--green-2) var(--progress),#d8d3c7 var(--progress)); }.candidate-card > div:first-child { display: flex; justify-content: space-between; gap: .5rem; }.candidate-card p { margin: .4rem 0 0; color: #68736f; font-size: .52rem; text-transform: uppercase; letter-spacing: .05em; }.candidate-card > div:first-child p { margin: 0; }.candidate-card h3 { margin: .25rem 0 .45rem; font: 500 1rem/1.1 var(--serif); }.candidate-card strong { color: var(--green-2); font-size: .9rem; white-space: nowrap; }.candidate-slots { display: grid; grid-template-columns: repeat(14,1fr); gap: 2px; }.candidate-slots i { height: 6px; background: #d8d3c7; }.candidate-slots i.is-filled { background: var(--green-2); }.candidate-actions { display: flex; justify-content: space-between; gap: .4rem; margin-top: .6rem; }.candidate-actions span { display: flex; gap: .25rem; }.candidate-actions button { padding: .38rem .48rem; border: 1px solid #a4aca7; background: #fffdf7; color: var(--ink); font: 800 .53rem/1 var(--sans); cursor: pointer; }.candidate-actions button:disabled { opacity: .35; cursor: default; }.candidate-actions button:hover:not(:disabled), .candidate-actions button:focus-visible { border-color: var(--coral); }.candidate-footnote { margin: .8rem 0 0; color: #6b7572; font-size: .57rem; line-height: 1.5; }
.candidate-card.is-blocked { border-color: #bd8578; background: #f7eae5; }.candidate-card.is-blocked::before { background: #a85643; }.candidate-card.is-blocked > div:first-child strong { color: #9a493a; font-size: .65rem; text-transform: uppercase; }
.coach-summary { margin: 0 0 .85rem; font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; }.coach-evidence { display: grid; gap: 1px; margin: 0; background: var(--line); }.coach-evidence > div { display: grid; grid-template-columns: 94px 1fr; gap: .55rem; padding: .55rem; background: #f8f3e9; }.coach-evidence dt { color: #6c7773; font-size: .55rem; font-weight: 900; text-transform: uppercase; }.coach-evidence dd { margin: 0; font-size: .65rem; font-weight: 700; line-height: 1.35; }.coach-callout { margin-top: .8rem; padding: .75rem; border-left: 4px solid var(--gold); background: #fff6db; }.coach-callout strong { color: #8a6515; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }.coach-callout p { margin: .2rem 0 0; font-size: .65rem; }
.game-history ol { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; counter-reset: history; }.game-history li { position: relative; padding-left: 1.75rem; color: #52605c; font-size: .65rem; line-height: 1.45; counter-increment: history; }.game-history li::before { content: counter(history); position: absolute; left: 0; top: .05rem; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #aeb5af; border-radius: 50%; color: var(--coral); font-size: .5rem; font-weight: 900; }.game-history li strong { display: block; color: var(--ink); }


@media (max-width: 1180px) {
  .game-play-grid { grid-template-columns: 1fr; }.coach-column { grid-template-columns: repeat(3, 1fr); }.candidate-panel, .move-coach, .game-history { min-width: 0; }
  .game-setup-bar { grid-template-columns: 1fr 1fr; }.game-setup-actions { grid-column: 1 / -1; }
  .player-setup-grid { grid-template-columns: 1fr 1fr; }.rules-layout { grid-template-columns: 1fr 1fr; }.standard-rules { grid-column: 1 / -1; }.east-roll-area { grid-template-columns: 1fr; }.roll-controls { text-align: center; }.seat-result { grid-column: auto; }
}
@media (max-width: 900px) {
  .game-lab-hero { grid-template-columns: 1fr; }.game-card-lines { column-count: 1; }
  .game-card-line { grid-template-columns: minmax(0,1fr) 48px 60px; }.coach-column { grid-template-columns: 1fr; }
  .mahjong-table { min-height: 650px; }.table-player { width: 220px; }.player-east { right: 45px; }.player-west { left: 45px; }.mini-player-rack { gap: 1px; }.mini-player-rack .mini-game-tile,.mini-player-rack .mini-tile-back { width: 13px; height: 24px; flex-basis: 13px; font-size: .39rem; }.mini-exposure .mini-game-tile { width: 20px; height: 30px; flex-basis: 20px; font-size: .5rem; }.table-center { inset: 175px 205px; }
  .official-card-private { grid-template-columns: 1fr; }.official-card-private > p { grid-column: auto; }
  .setup-choice-grid { grid-template-columns: 1fr; }.setup-choice-card { min-height: 160px; }.dice-table { grid-template-columns: 1fr 1fr; }
  .scanned-card-manager { grid-template-columns: repeat(3,1fr); }.scanned-card-manager > div { grid-column: 1 / -1; }.scanned-card-manager > button { width: 100%; }.card-quality-report dl { grid-template-columns: repeat(3,1fr); }.scan-line-card { grid-template-columns: 1fr; }.scan-line-confirm { grid-template-columns: auto 1fr auto; align-items: center; }.scan-line-fields { grid-template-columns: 1fr 1fr 74px; }
  .preplay-stage, .charleston-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .game-setup-bar { grid-template-columns: 1fr; }.game-setup-actions { grid-column: auto; }.game-setup-bar label { display: flex; margin-right: 0; }
  .game-workspace { padding: .65rem; }.game-toolbar { align-items: start; flex-direction: column; }.game-toolbar-actions { justify-content: flex-start; }
  .game-card-heading { align-items: start; flex-direction: column; }.game-card-key { justify-content: flex-start; }.game-card-line { grid-template-columns: minmax(0,1fr) 44px 54px; gap: .4rem; padding: .5rem; }.card-line-pattern { font-size: .92rem; }
  .game-phase-track { grid-template-columns: 1fr 1fr; }.game-phase-track li:nth-child(2) { border-right: 0; }.game-phase-track li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .table-column { padding: .6rem; }.mahjong-table { min-height: 610px; border-width: 8px; border-radius: 20px; }.mahjong-table::before { inset: 62px; }.wall-north,.wall-south { width: 84%; }.wall-east,.wall-west { height: 75%; }.wall-east { right: 10px; }.wall-west { left: 10px; }
  .table-player { width: 165px; padding: .4rem; }.player-north { top: 48px; }.player-south { bottom: 48px; }.player-east { top: 42%; right: 29px; }.player-west { top: 58%; left: 29px; }.mini-player-rack { min-height: 29px; }.mini-player-rack .mini-game-tile,.mini-player-rack .mini-tile-back { width: 10px; height: 21px; flex-basis: 10px; font-size: .35rem; }.mini-exposures { gap: 3px; margin-top: .3rem; padding: .35rem .1rem .05rem; }.mini-exposure { gap: 2px; padding: 3px 4px 5px; }.mini-exposure-label { font-size: .36rem; }.mini-exposure-tiles { gap: 1px; }.mini-exposure .mini-game-tile { width: 17px; height: 27px; flex-basis: 17px; font-size: .44rem; }
  .table-center { inset: 178px 102px; }.draw-source { font-size: .48rem; }.draw-source strong { font-size: .7rem; }.latest-discard { min-width: 0; width: 92%; gap: .35rem; padding: .35rem; }.latest-discard strong { max-width: 95px; font-size: .58rem; }.latest-discard .latest-discard-tile { width: 30px; height: 42px; flex-basis: 30px; font-size: .6rem; }.discard-pond { width: 100%; max-width: 170px; gap: 3px; }.discard-pile { padding: .2rem; }.discard-pile header { align-items: flex-start; flex-direction: column; gap: .12rem; font-size: .34rem; }.discard-pile > div { min-height: 31px; max-height: 60px; gap: 3px; padding: 3px 3px 8px; scroll-padding-bottom: 8px; }.discard-stack { padding: 0 7px 7px 0; }.discard-stack > b { min-width: 16px; padding: 2px 3px; font-size: .4rem; }.discard-pile .mini-game-tile { width: 14px; height: 21px; flex-basis: 14px; font-size: .34rem; }
  .wall-readout, .player-rack-heading { align-items: flex-start; flex-direction: column; }.wall-readout > p, .rack-heading-tools { max-width: none; justify-items: start; text-align: left; }.rack-sort-row { align-items: flex-start; flex-direction: column; }.rack-heading-tools label { align-items: flex-start; flex-direction: column; }.rack-heading-tools select { max-width: min(100%, 320px); }.game-turn-controls { grid-template-columns: 1fr; padding: .9rem; }.turn-action-buttons { display: grid; justify-content: stretch; }.turn-action-buttons > [data-next-move] { width: 100%; min-width: 0; }.turn-secondary-actions { justify-content: flex-start; }.call-options { display: grid; }.call-option { width: 100%; }.hand-result-grid { grid-template-columns: 1fr; }.hand-result-sequence { grid-template-columns: 1fr; }.hand-result-next { min-width: 0; border-left: 0; border-top: 4px solid var(--gold); }.user-exposures { align-items: flex-start; flex-direction: column; }.exposed-set { max-width: 100%; overflow-x: auto; }.joker-exchanges,.defense-guide { grid-template-columns: 1fr; }.joker-exchanges > strong { grid-row: auto; }.defense-alerts { justify-content: flex-start; }
  .game-lobby { margin: .65rem; box-shadow: none; }.setup-heading { align-items: start; flex-direction: column; gap: 1rem; }.setup-heading h2 { font-size: 2.25rem; }.setup-heading > span { align-self: flex-start; }
  .setup-steps { grid-template-columns: 1fr 1fr; }.setup-steps li:nth-child(2) { border-right: 0; }.setup-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.setup-steps button { min-height: 70px; padding: .6rem; }.setup-steps small { display: none; }
  .setup-panel { min-height: 0; padding: 1.1rem; }.setup-panel-intro { grid-template-columns: 1fr; gap: .75rem; }.setup-panel-intro .setup-number { display: none; }.player-setup-grid, .rules-layout { grid-template-columns: 1fr; }.standard-rules { grid-column: auto; }.player-setup-card { min-height: 190px; }.dice-table { grid-template-columns: 1fr 1fr; }.dice-player { min-height: 170px; }.die-face { width: 58px; height: 58px; font-size: 3.4rem; }.seat-result { grid-template-columns: 1fr; }.seat-result > p:last-of-type,.seat-reroll { grid-column: 1; grid-row: auto; }.seat-reroll { justify-self: start; }
  .scanned-card-manager { grid-template-columns: 1fr; align-items: stretch; }.scanned-card-manager > div { grid-column: 1; }.card-scan-dialog { width: 100vw; max-width: none; max-height: 100vh; border: 0; }.card-scan-shell { min-height: 100vh; }.card-scan-header { padding: 1rem; }.card-scan-header h2 { font-size: 2rem; }.card-scan-steps li { grid-template-columns: 26px 1fr; min-height: 62px; padding: .5rem; }.card-scan-steps span { width: 24px; height: 24px; }.card-scan-steps small { display: none; }.card-scan-panel { padding: 1rem; }.card-scan-intro { grid-template-columns: 1fr; }.card-scan-intro > span { display: none; }.card-image-grid,.card-quality-results { grid-template-columns: 1fr; }.card-image-drop { min-height: 220px; }.card-quality-report dl { grid-template-columns: 1fr 1fr; }.scan-line-fields { grid-template-columns: 1fr; }.scan-line-fields label:nth-child(4) { grid-column: 1; }.scan-line-confirm { grid-template-columns: 1fr; }.card-scan-actions { position: sticky; bottom: 0; grid-template-columns: 1fr 1fr; padding: .75rem 1rem; }.card-scan-actions p { grid-column: 1 / -1; grid-row: 1; text-align: left; }.card-scan-actions button { width: 100%; }
  .setup-navigation { grid-template-columns: 1fr 1fr; }.setup-navigation p { grid-column: 1 / -1; grid-row: 1; text-align: left; }.setup-navigation button { width: 100%; }
  .preplay-copy { grid-template-columns: 1fr; }.preplay-step-number { width: 34px; height: 34px; }.charleston-heading { flex-direction: column; }.pass-direction { align-self: stretch; }.blind-buttons button { flex: 1 1 42%; }
}

/* Practice-table readability: the overview is a map; decisions live beside the rack. */
@media screen {
  .game-page:has(.game-workspace:not([hidden])) .game-lab-hero { display: none; }
  .game-lab-hero { padding-block: clamp(2.5rem,5vw,5rem); }
  .game-lab-hero h1 { font-size: clamp(2.6rem,5.2vw,5rem); }
  .game-button, .game-toolbar button, .rack-heading-tools button, .candidate-actions button, .blind-buttons button, .joker-exchange-actions button { min-height: 44px; font-size: .875rem; line-height: 1.25; }
  .game-page :is(button,a,select,input,summary):focus-visible { outline: 3px solid #c34e35; outline-offset: 4px; }
  .game-page :is(select,input) { font-size: 1rem; }
  .game-page :is(.setup-choice-card small,.setup-trust-note p,.player-setup-card small,.barbara-note p,.rules-card p,.rules-card li,.rule-option small,.setup-navigation p,.roll-controls p,.seat-result p,.scanned-card-manager small,.scanned-card-manager > p) { font-size: .875rem; line-height: 1.55; }
  .game-page :is(.setup-steps strong,.setup-heading > span,.setup-choice-card em,.player-setup-card label > span,.bot-identity button,.game-kicker,.panel-heading p) { font-size: .75rem; }
  .setup-steps small { font-size: .75rem; }
  .game-tools-menu { position: relative; }
  .game-tools-menu summary { min-height: 44px; padding: .7rem .85rem; border: 1px solid #9ca69f; background: #f5f0e6; cursor: pointer; font-size: .875rem; font-weight: 800; }
  .game-tools-menu > div { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); width: 230px; display: grid; gap: .35rem; padding: .65rem; border: 1px solid #abb3ac; background: #fffdf7; box-shadow: 0 12px 30px #17322d26; }
  .game-view-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .4rem 1.3rem; padding: .5rem 1rem; background: #123f35; color: #fffdf7; font-size: .875rem; }
  .game-view-nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
  .game-view-nav a:hover { color: #ffe2a1; text-decoration: underline; }
  .game-play-grid,.coach-column { background: #f8f3e9; }
  .table-column { container-type: inline-size; container-name: game-table; }
  .game-tile.risk-lower .tile-risk-badge { display: none; }
  #practice-table, #your-rack, #table-discards, #candidate-title, .game-card-panel { scroll-margin-top: 1rem; }
  .game-phase-track small { margin-top: .25rem; font-size: .75rem; }
  .game-phase-track strong { font-size: .875rem; }
  .preplay-panel { margin: 1rem 0 0; border: 2px solid #a1b7aa; border-top: 5px solid var(--coral); }
  .preplay-copy p,.preplay-action p,.charleston-heading p,.charleston-help,.charleston-status,.blind-choice p,.second-charleston-choice p { font-size: .9375rem; line-height: 1.55; }
  .preplay-facts span,.charleston-side label,.pass-placeholder { font-size: .875rem; }
  .pass-direction span { font-size: .75rem; }
  .charleston-side { align-content: center; }
  .game-turn-controls { margin-top: 1rem; }
  .turn-action-summary strong { font-size: 1.1rem; }
  .turn-action-summary p > span,.turn-secondary-actions .game-button { font-size: .875rem; }
  .turn-action-buttons > [data-next-move] { font-size: .9375rem; }
  .player-rack-panel { container-type: inline-size; padding: 1rem; }
  .player-rack-heading { align-items: start; flex-wrap: wrap; }
  .player-rack-heading h3 { font-size: 1.5rem; }
  .player-rack-heading p,.rack-heading-tools label > span { font-size: .75rem; }
  .rack-heading-tools { max-width: none; font-size: .875rem; line-height: 1.5; }
  .rack-heading-tools select { max-width: 100%; min-height: 44px; font-size: 1rem; }
  .full-player-rack { display: grid; grid-template-columns: repeat(14,minmax(0,1fr)); gap: 6px; padding: 1.6rem .5rem 1rem; overflow: visible; }
  .full-player-rack .game-tile { width: 100%; min-width: 0; max-width: 72px; height: auto; aspect-ratio: .67; min-height: 68px; }
  .game-tile .tile-corner { font-size: .875rem; top: 4px; left: 4px; padding: 1px 2px; background: #fffdf7e6; border-radius: 2px; }
  .game-tile small { font-size: .5rem; letter-spacing: .03em; }
  .game-tile.is-drawn { margin-left: 0; outline: 2px solid #a57a19; outline-offset: 2px; }
  .game-tile.is-drawn::before { font-size: .65rem; top: -16px; }
  .game-tile.is-selected { transform: translateY(-7px); outline: 3px solid var(--coral); outline-offset: 2px; }
  .exposed-set .tile-preview { display: inline-block; width: 48px; height: 70px; flex: 0 0 48px; }
  .exposed-set .tile-preview .tile-face { font-size: 1.5rem; }
  .exposed-set .tile-preview.is-called-tile { outline: 2px solid var(--coral); outline-offset: 1px; }
  .player-rack-panel:has(.full-player-rack:empty) { display: none; }
  .rack-selection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; padding: .8rem; border: 1px solid #b7b0a0; background: #fffdf7; }
  .rack-selection-controls > strong { margin-right: auto; font-size: 1rem; }
  .rack-selection-controls button { min-width: 44px; }
  .tile-risk-badge { top: -12px; right: -2px; font-size: .5rem; }
  .game-card-line { padding: 1rem .8rem; gap: .75rem; grid-template-columns: minmax(0,1fr) 65px 72px; }
  .game-card-key,.game-card-note,.card-line-note { font-size: .875rem; line-height: 1.5; }
  .card-line-pattern { font-size: clamp(1.25rem,1.6vw,1.5rem); line-height: 1.3; }
  .card-line-name,.card-category > h3,.card-line-progress small { font-size: .75rem; }
  .card-line-track { min-height: 44px; font-size: .75rem; }
  .card-return { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1rem; font-size: .875rem; }
  .candidate-card p,.candidate-footnote,.coach-evidence dt,.game-history li,.coach-callout p,.coach-evidence dd { font-size: .875rem; line-height: 1.5; }
  .candidate-card h3 { font-size: 1.2rem; }
  .coach-evidence > div { grid-template-columns: minmax(80px,.35fr) 1fr; }
  .coach-evidence dt { font-size: .75rem; }
  .coach-callout strong { font-size: .75rem; }
  .game-history li::before { font-size: .75rem; }
  .wall-readout { margin-bottom: .5rem; }
  .wall-readout p,.wall-readout small { font-size: .875rem; }
  .wall-readout strong { font-size: 1rem; }
  /* Mahjong seating, not geographic compass points: East → South → West → North. */
  .player-south { top: 60px; bottom: auto; }
  .player-north { top: auto; bottom: 60px; }
  .wall-south { top: 19px; bottom: auto; }
  .wall-north { top: auto; bottom: 19px; }
  .mahjong-table { min-height: 640px; }
  .player-east,.player-west { top: 54%; width: 240px; }
  .player-heading { font-size: .75rem; letter-spacing: .02em; gap: .4rem; }
  .player-heading small { color: #e0e8e1; font-size: .75rem; }
  .table-center { inset: 155px 30% 150px; border: 0; background: none; }
  .draw-source { font-size: .875rem; padding: .6rem; }
  .draw-source strong { font-size: 1.1rem; }
  .draw-source small { font-size: .8rem; }
  .latest-discard { min-width: 0; width: 200px; max-width: 100%; }
  .latest-discard strong { font-size: 1rem; }
  .latest-discard small { font-size: .7rem; }
  .latest-discard .latest-discard-tile { width: 46px; height: 64px; flex-basis: 46px; font-size: 1rem; }
  .table-discard-link { color: #fff3d6; font-size: .8rem; text-align: center; padding: .6rem; }
  .table-discards { margin-top: 1rem; padding: 1rem; border: 1px solid #a4b4aa; background: #e7eee7; }
  .table-discards .panel-heading h2 { margin-bottom: .5rem; }
  .discard-field-help,.table-discards > p { font-size: .875rem; color: #4c5f54; margin: 0 0 .8rem; }
  .discard-pond { width: 100%; max-width: none; gap: .7rem; }
  .discard-pile { padding: .75rem; background: #164d41; }
  .discard-pile header { font-size: .8rem; align-items: center; flex-direction: row; color: #fffdf7; }
  .discard-pile > div { max-height: 160px; gap: 8px; padding: 6px 6px 12px; justify-content: flex-start; }
  .discard-pile .mini-game-tile { width: 34px; height: 46px; flex-basis: 34px; font-size: .875rem; }
  .discard-stack { padding: 0 11px 10px 0; }
  .discard-stack > b { min-width: 23px; padding: 4px; font-size: .75rem; }
  .discard-pile-empty { color: #e4ebe6; font-size: .875rem; }
  .table-detail-panel { margin-top: 1rem; border: 1px solid #a4b4aa; background: #fffdf7; }
  .table-detail-panel summary { padding: 1rem; cursor: pointer; font-weight: 800; }
  [data-table-details] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding: 0 1rem 1rem; }
  .player-detail { min-width: 0; padding: 1rem; background: #f1ece1; }
  .player-detail h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
  .player-detail p { font-size: .875rem; margin: .5rem 0; }
  .player-detail-rack { display: flex; flex-wrap: wrap; gap: 5px; }
  .player-detail .mini-game-tile,.player-detail .mini-tile-back { width: 30px; height: 43px; flex-basis: 30px; font-size: .875rem; }
  .player-detail .mini-exposures { justify-content: flex-start; border-color: #9ca99f; }
  .player-detail .mini-exposure-label { font-size: .75rem; }
  .game-page :is(.call-decision > p,.call-option small,.joker-exchanges p,.defense-guide-copy > p:last-child,.defense-clear,.hand-result-summary,.hand-result-sequence li,.hand-result-next small) { font-size: .875rem; line-height: 1.5; }
  .exposure-adjustment-actions button { min-height: 44px; font-size: .875rem; }
  .hand-result-sequence strong,.hand-result-facts span,.exposed-set-label { font-size: .875rem; }
  .game-page :is(.card-scan-header p,.card-scan-intro p,.card-scan-privacy p,.card-scan-warning p,.scan-review-summary,.scan-saved-edit-note p,.scan-line-status,.scan-notation-help,.card-scan-actions p) { font-size: .875rem; line-height: 1.5; }
  .scan-line-fields span,.scan-line-confirm span,.scan-line-confirm label { font-size: .75rem; }
  .scan-line-fields input,.card-profile-title input { font-size: 1rem; min-height: 44px; }
}
@media screen and (min-width: 1181px) {
  .coach-column { position: sticky; top: 1rem; align-self: start; max-height: calc(100dvh - 2rem); overflow-y: auto; }
}
@container (max-width: 720px) {
  .full-player-rack { grid-template-columns: repeat(7,minmax(0,1fr)); justify-items: center; row-gap: 1.5rem; }
}
@container (max-width: 360px) {
  .full-player-rack { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media screen and (max-width: 700px) {
  .game-workspace { padding: .5rem; }
  .game-toolbar { padding: 1rem; }
  .game-toolbar-actions { gap: .5rem; }
  .game-tools-menu > div { left: 0; right: auto; }
  .game-view-nav { gap: 0 1rem; padding: .4rem .8rem; font-size: .8rem; }
  .table-column { padding: .5rem; }
  .mahjong-table { min-height: 720px; }
  .table-player { width: 180px; padding: .5rem; }
  .player-south { top: 50px; bottom: auto; }
  .player-north { top: auto; bottom: 50px; }
  .player-east,.player-west { top: 62%; width: 42%; }
  .player-east { right: 23px; }
  .player-west { left: 23px; }
  .player-heading { flex-direction: column; gap: .12rem; font-size: .8rem; }
  .mini-player-rack { flex-wrap: wrap; overflow: visible; gap: 2px; }
  .mini-player-rack .mini-game-tile,.mini-player-rack .mini-tile-back { width: 14px; height: 23px; flex-basis: 14px; font-size: .625rem; }
  .table-player .mini-exposures { display: none; }
  .table-center { inset: 160px 25px auto; gap: .4rem; }
  .draw-source { padding: .4rem; font-size: .75rem; }
  .draw-source strong { font-size: .9rem; }
  .draw-source small { font-size: .75rem; }
  .latest-discard { width: 220px; padding: .5rem; }
  .latest-discard strong { max-width: none; font-size: 1rem; }
  .table-discard-link { padding: .3rem; font-size: .75rem; }
  .player-rack-panel { padding: .75rem .4rem; }
  .player-rack-heading { padding: 0 .3rem; }
  .rack-sort-row,.rack-heading-tools label { width: 100%; }
  .rack-heading-tools select { width: 100%; }
  .full-player-rack { gap: 5px; row-gap: 1.5rem; padding-inline: .2rem; }
  .game-tile .tile-face { font-size: 1.4rem; }
  .game-tile .tile-corner { font-size: .75rem; top: 2px; left: 2px; }
  .game-tile small { font-size: .44rem; }
  .rack-selection-controls { padding: .65rem; }
  .rack-selection-controls > strong { flex-basis: 100%; }
  .game-card-line { grid-template-columns: minmax(0,1fr) auto; padding: 1rem .65rem; }
  .card-line-copy { grid-column: 1 / -1; }
  .card-line-progress { text-align: left; }
  .card-line-pattern { font-size: 1.3rem; }
  .card-line-track { padding: .6rem 1rem; }
  .game-card-key { gap: .6rem; font-size: .8rem; }
  [data-table-details] { grid-template-columns: 1fr; }
  .discard-pond { grid-template-columns: 1fr; }
  .charleston-main,.charleston-side { padding: .85rem; }
}
/* Reserve separate vertical bands when the table cannot fit three columns.
   This also covers desktop tables narrowed by the coaching sidebar. */
@container game-table (max-width: 850px) {
  .mahjong-table { min-height: 720px; }
  .table-center { inset: 165px 25px auto; gap: .4rem; }
  .player-east,.player-west { top: 62%; width: min(240px,42%); }
  .table-player .mini-exposures { display: none; }
}

/* A calm playing surface keeps the current decision, tiles, and coaching distinct. */
@media screen {
  .game-page { background: #eee9df; }
  .game-lobby { overflow: hidden; border-color: #d0c7b6; border-radius: 12px; box-shadow: 0 10px 32px #17322d0b; }
  .game-toolbar { border-color: #d0c7b6; border-radius: 10px 10px 0 0; background: #fffdf7; }
  .game-toolbar h2 { line-height: 1.2; }
  .game-view-nav { gap: .2rem 1.5rem; background: #123f35; box-shadow: inset 0 1px 0 #ffffff15; }
  .game-view-nav a { text-underline-offset: 5px; }
  .game-button, .game-toolbar button, .rack-heading-tools button, .candidate-actions button,
  .blind-buttons button, .joker-exchange-actions button, .exposure-adjustment-actions button {
    border-radius: 6px;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .game-button:not(:disabled):hover, .game-toolbar button:not(:disabled):hover {
    border-color: #557a68;
    background: #edf3ec;
    box-shadow: 0 2px 6px #17322d12;
  }
  .game-button-primary {
    border-color: #123f35;
    background: linear-gradient(160deg, #24634f, #123f35);
    box-shadow: 0 3px 0 #bba162, inset 0 1px 0 #ffffff26;
  }
  .game-button-primary:not(:disabled):hover {
    border-color: #123f35;
    background: linear-gradient(160deg, #2a715a, #174c3e);
    box-shadow: 0 3px 0 #bba162, 0 4px 10px #17322d21;
  }
  .game-tools-menu summary { border-color: #c8c7b9; border-radius: 6px; }
  .game-tools-menu > div { border-radius: 8px; box-shadow: 0 12px 30px #17322d26; }
  .game-phase-track { overflow: hidden; border-color: #d4ccbd; border-radius: 8px; }
  .game-phase-track li { padding-block: .85rem; }
  .game-phase-track .is-current { color: #88472f; background: #fff5df; box-shadow: inset 0 -3px 0 #d0a34e; }
  .game-phase-track .is-current > span { border-color: #b18c47; background: #fffdf7; }
  .preplay-panel, .game-turn-controls, .call-decision, .hand-result { border-radius: 10px; }
  .preplay-panel { border-width: 1px; border-top-width: 4px; overflow: hidden; box-shadow: 0 5px 16px #17322d0a; }
  .preplay-step-number { border-color: #c9ad71; background: #faf3e0; color: #735826; }
  .pass-zone { border-radius: 7px; background: #f5f1e7; }
  .pass-zone.is-ready { background: #eaf4ed; }
  .pass-direction { border-radius: 7px; }
  .game-turn-controls { border-width: 1px; border-left-width: 5px; box-shadow: 0 4px 14px #17322d0d; }
  .game-turn-controls.is-human-action { border-color: #c76b4c; box-shadow: 0 4px 18px #ae634314; }
  .turn-action-summary strong { color: #9c452f; letter-spacing: .045em; }
  .game-turn-controls.is-call-action { border-color: #b18c47; }
  .call-decision { margin-top: .75rem; border-color: #c4a15c; background: #fcf5e3; }
  .call-option { border-radius: 7px; padding: .85rem; }
  .call-option strong { font-size: 1.125rem; line-height: 1.3; }

  .mahjong-table {
    border-color: #967b56;
    border-top-color: #b49b73;
    border-bottom-color: #765b3e;
    background:
      radial-gradient(ellipse at 42% 28%, #3c786528, transparent 70%),
      repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px),
      repeating-linear-gradient(90deg, #00000003 0 1px, transparent 1px 3px),
      #164b3f;
    box-shadow: inset 0 0 0 2px #dbc28e, inset 0 0 55px #052a233b, 0 7px 0 #614b34, 0 16px 26px #17322d1a;
  }
  .mahjong-table::before { border-color: #d9e9db21; box-shadow: inset 0 0 0 1px #092b221f; }
  .wall-stack { border-color: #8fbaa5; box-shadow: 0 2px 0 #507b68, 1px 3px 3px #092b2247; }
  .wall-stack.is-spent { opacity: .07; border-style: dashed; }
  .wall-stack.is-half { opacity: .72; }
  .wall-stack.is-next, .wall-stack.is-open { border-color: #f1c778; box-shadow: 0 0 0 2px #f1c7783d, 0 2px 0 #7d642e; }
  .wall-stack.is-next::after, .wall-stack.is-open::after { padding: 2px 4px; border-radius: 3px; background: #103a30; color: #ffe2a1; }
  .table-player { border-color: #d5e3d52b; border-radius: 8px; background: linear-gradient(160deg, #123e34f5, #0e342ce8); box-shadow: 0 4px 8px #06271e33; }
  .table-player.is-active { border-color: #e5c783; box-shadow: 0 0 0 2px #e5c78340, 0 5px 12px #06271e4d; }
  .table-player.is-active .player-heading { color: #ffe6ad; }
  .player-heading small { letter-spacing: 0; font-weight: 600; }
  .mini-tile-back { border-color: #8ab19b; background: repeating-linear-gradient(45deg, #ffffff12 0 1px, transparent 1px 5px), linear-gradient(145deg, #7aab91, #33654f); box-shadow: 0 2px 0 #214c3b; }
  .draw-source { border: 1px solid #f7ead62b; border-radius: 7px; background: #0b352beb; color: #f9f3e7; box-shadow: 0 3px 8px #052c2226; }
  .draw-source span { color: #edcc8e; }
  .draw-source small { color: #d5e3da; }
  .latest-discard { width: 238px; gap: .8rem; padding: .65rem .75rem; border: 1px solid #d0b579; border-radius: 10px; background: linear-gradient(140deg, #fffdf7, #f5ecd7); box-shadow: 0 5px 0 #0b322a5e, 0 10px 20px #052c223d; }
  .latest-discard .latest-discard-tile { width: 58px; height: 82px; flex: 0 0 58px; }
  .latest-discard strong { max-width: 145px; font-size: 1.125rem; line-height: 1.3; }
  .latest-discard small { color: #9c452f; font-size: .6875rem; }
  .table-discard-link { text-underline-offset: 4px; }
  .wall-readout { border-color: #d0c7b6; border-radius: 8px; background: #faf8f1; }

  .player-rack-panel { margin-top: .75rem; border-color: #c4c5b5; border-radius: 10px; background: linear-gradient(145deg, #f1eddf, #e8e4d6); box-shadow: inset 0 1px 0 #ffffffc4; }
  .player-rack-heading h3 { color: #173f32; }
  .rack-heading-tools label > span { color: #53695b; }
  .full-player-rack { border-bottom-color: #376d54; border-radius: 7px; background: linear-gradient(180deg, #d9e4d780, #edf2e85e); box-shadow: inset 0 1px 0 #ffffff94, 0 3px 0 #25513e; }
  .rack-selection-controls { border-color: #acbdac; border-radius: 7px; background: #fbfcf5; }
  .user-exposures { border-radius: 8px; border-width: 1px; border-color: #bba162; background: #fcf6e6; }
  .exposed-set { border-width: 1px; border-radius: 6px; }
  .table-discards { border-color: #afc0b1; border-radius: 10px; background: #e8eee5; }
  .discard-pile { border-color: #42715b; border-radius: 8px; background: #174b3d; }
  .discard-pile > div { min-height: 82px; max-height: 186px; gap: 10px; padding: 8px 6px 14px; scroll-padding-block: 14px; scrollbar-color: #8caf99 #174b3d; }
  .discard-pile .mini-game-tile { width: 40px; height: 58px; flex-basis: 40px; }
  .discard-stack { padding: 0 11px 11px 0; }
  .discard-stack > b { right: 0; bottom: 0; z-index: 4; min-width: 25px; padding: 4px 5px; border: 1px solid #967135; background: #f4d99b; color: #303d2c; box-shadow: 0 2px 2px #082b224d; }
  .mini-game-tile.mj-mini-art { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .mini-game-tile.mj-mini-art > .tile-face { width: 100%; height: 100%; }
  .table-detail-panel { border-color: #c8cbbc; border-radius: 9px; }
  .table-detail-panel summary { min-height: 48px; align-items: center; gap: 1rem; }
  .player-detail { border: 1px solid #dedbcb; border-radius: 8px; background: #f7f4e9; }

  .coach-column { gap: .75rem; padding-block: 1.2rem; padding-right: .75rem; background: transparent; }
  .candidate-panel, .move-coach, .game-history { min-width: 0; border: 1px solid #d6ccba; border-radius: 10px; background: #fffdf7; }
  .panel-heading p { color: #9c452f; letter-spacing: .1em; }
  .panel-heading h2 { line-height: 1.2; }
  .candidate-card { border-radius: 7px; border-color: #d8d5c5; background: #f8f6ed; }
  .candidate-card p { color: #54645b; text-transform: none; letter-spacing: 0; }
  .candidate-card > div:first-child p { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
  .candidate-card > div:first-child strong { font-size: 1rem; }
  .candidate-actions { flex-wrap: wrap; }
  .candidate-slots i { border-radius: 2px; }
  .coach-summary { color: #284e3c; font-size: 1.125rem; }
  .coach-evidence { gap: .35rem; background: transparent; }
  .coach-evidence > div { border-radius: 5px; background: #f5f3e8; }
  .coach-callout { border-radius: 0 6px 6px 0; }
  .game-history li { padding-bottom: .55rem; border-bottom: 1px solid #e5dfd1; }
  .game-history li:last-child { padding-bottom: 0; border: 0; }

  .coach-recommendation, .decision-coach {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid #abc0ad;
    border-top: 3px solid #3d7657;
    border-radius: 8px;
    background: linear-gradient(135deg, #edf5eb, #fafbf4);
    color: #193c2d;
  }
  .coach-recommendation[hidden], .decision-coach[hidden] { display: none !important; }
  .decision-coach { margin-top: .85rem; margin-bottom: .5rem; padding: .9rem 1rem; }
  .recommendation-kicker { margin: 0 0 .3rem; color: #3f6b4e; font: 800 .6875rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .1em; }
  .coach-recommendation h3, .decision-coach h3 { margin: 0; font: 600 1.25rem/1.3 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
  .recommendation-reason { margin: .6rem 0 0; color: #345441; font-size: .9375rem; line-height: 1.6; }
  .recommendation-tiles { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; margin: .8rem 0; padding-bottom: .3rem; }
  .recommendation-tiles:empty { display: none; }
  .recommendation-tiles .tile-preview { display: inline-block; flex: 0 0 58px; width: 58px; height: 84px; margin: 0; cursor: default; }
  .recommendation-evidence { margin: .85rem 0 0; padding-left: 1.2rem; color: #3f5445; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
  .recommendation-evidence li + li { margin-top: .4rem; }
  .recommendation-evidence li::marker { color: #5d8463; }
  .recommendation-caution { margin: .85rem 0 0; padding: .55rem .7rem; border-left: 3px solid #c6a466; background: #faf4e5; color: #6a5637; font-size: .8125rem; line-height: 1.55; overflow-wrap: anywhere; }
  .recommendation-details { margin-top: .75rem; border-top: 1px solid #c7d3c2; }
  .recommendation-details > summary { min-height: 44px; align-items: center; justify-content: flex-start; gap: .5rem; color: #31553d; font-size: .875rem; line-height: 1.4; }
  .recommendation-details > summary::before { content: "+"; flex: 0 0 16px; font-size: 1.125rem; text-align: center; }
  .recommendation-details[open] > summary::before { content: "−"; }
  .recommendation-details > ul { margin-top: .2rem; }
  .game-button[data-apply-recommendation] { max-width: 100%; min-height: 44px; margin-top: .85rem; padding: .75rem 1rem; border-color: #2f6245; background: #24533c; color: #fffdf7; font-size: .875rem; line-height: 1.4; white-space: normal; box-shadow: 0 2px 0 #bca46c; }
  .game-button[data-apply-recommendation]:not(:disabled):hover { border-color: #24533c; background: #346b4b; box-shadow: 0 2px 0 #bca46c; }
}
@media screen and (max-width: 1180px) {
  .coach-column { padding: .75rem 1.2rem 1.2rem; }
}
@media screen and (min-width: 701px) {
  .decision-coach { display: grid; grid-template-columns: minmax(0,1fr) minmax(186px,220px); gap: .25rem 1.25rem; align-items: start; }
  .decision-coach > .recommendation-kicker { grid-column: 1; grid-row: 1; margin: 0; }
  .decision-coach > h3 { grid-column: 1; grid-row: 2; }
  .decision-coach > .recommendation-reason { grid-column: 1; grid-row: 3; margin: .3rem 0 0; }
  .decision-coach > .recommendation-tiles { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; justify-content: flex-end; margin: 0; padding-bottom: .25rem; }
  .decision-coach > .recommendation-details, .decision-coach > .recommendation-caution { grid-column: 1; grid-row: 4; margin-top: .55rem; }
  .decision-coach > .game-button[data-apply-recommendation] { grid-column: 2; grid-row: 4; justify-self: stretch; align-self: start; margin-top: .55rem; }
  .decision-coach:not(:has(.recommendation-tiles)) > :is(.recommendation-kicker,h3,.recommendation-reason) { grid-column: 1 / -1; }
}
@media screen and (max-width: 700px) {
  .game-toolbar { border-radius: 8px 8px 0 0; }
  .game-phase-track li { padding-block: .65rem; }
  .mahjong-table { border-radius: 24px; }
  .latest-discard { width: 238px; max-width: 100%; }
  .latest-discard strong { max-width: none; font-size: 1rem; }
  .game-turn-controls { padding: .9rem .75rem; }
  .turn-action-summary strong { font-size: 1rem; }
  .coach-column { padding: .5rem; }
  .candidate-panel, .move-coach, .game-history { padding: 1rem; }
  .table-discards { padding: .85rem; }
  .discard-pile { padding: .65rem; }
  .discard-pile header { flex-wrap: wrap; }
  .coach-recommendation, .decision-coach { padding: .85rem; }
  .coach-recommendation h3, .decision-coach h3 { font-size: 1.2rem; }
  .recommendation-tiles { gap: .35rem; margin-block: .65rem; }
  .game-button[data-apply-recommendation] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .game-page *, .game-page *::before, .game-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* A numbered row is only meaningful together with its printed section. */
.call-choice { flex: 1 1 270px; min-width: 0; }
.call-choice > .call-option { width: 100%; min-width: 0; }
.call-options > .call-pass { flex: 1 1 150px; align-self: flex-start; }
.call-option .call-required-set { color: var(--ink); font-weight: 700; }
.call-card-scope { padding: .7rem .8rem; border-left: 3px solid var(--gold); background: #fffdf7; }
.call-line-details { margin: .35rem 0 0; padding: 0 .65rem; border: 1px solid #d5cfbd; border-radius: 7px; background: #fffdf7; }
.call-line-details > summary { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; min-height: 44px; font-size: .875rem; color: #31553d; }
.call-line-details > summary::before { content: "+"; font-size: 1.125rem; }
.call-line-details[open] > summary::before { content: "−"; }
.line-reference-detail { margin: .7rem 0; padding: .75rem; border: 1px solid #c7d3c2; border-radius: 6px; background: #fffdf7; overflow-wrap: anywhere; }
.line-reference-detail p { margin: 0 0 .65rem; color: #3e5047; font-size: .875rem; line-height: 1.55; }
.line-reference-detail strong, .line-reference-detail p > span { display: block; }
.line-reference-detail p > span { color: #6a6958; font-size: .8rem; }
.line-reference-detail .line-reference-note { font-size: .8rem; }
.line-reference-link { min-height: 44px; max-width: 100%; padding: .5rem .7rem; border: 1px solid #66816d; border-radius: 5px; color: #244b36; background: #edf3e9; font: 700 .875rem/1.4 var(--sans); text-align: left; cursor: pointer; }
.line-reference-link:hover, .line-reference-link:focus-visible { background: #e0ebda; outline: 2px solid #b99a51; outline-offset: 2px; }
.game-card-line.is-referenced { outline: 3px solid var(--gold); outline-offset: -3px; background: #fff7dc; scroll-margin-block: 2rem; }
.game-card-line.is-referenced .card-line-name::before { content: "Referenced line · "; color: #745814; }
@media screen and (max-width: 700px) {
  .call-options { grid-template-columns: minmax(0, 1fr); }
  .call-line-details { padding-inline: .4rem; }
  .line-reference-detail { padding: .65rem; }
}

@page { size: landscape; margin: .3in; }
@media print {
  html, body.game-page { margin: 0 !important; background: white !important; }
  body.game-page > .site-header, body.game-page > .site-footer, body.game-page > main > :not(.game-workspace), .game-toolbar, .game-play-grid, .game-view-nav, .card-return { display: none !important; }
  body.game-page > main, .game-workspace { display: block !important; margin: 0 !important; padding: 0 !important; }
  .game-card-panel, .game-card-panel[hidden] { display: block !important; margin: 0; padding: .12in; border: 0; box-shadow: none; background: white; }
  .game-card-heading { padding-bottom: .05in; }.game-card-heading h2 { font-size: 17pt; }.game-card-note { margin: .05in 0; font-size: 7pt; }
  .game-card-lines { column-count: 2; column-gap: 1px; border-color: #555; background: #555; }
  .card-category { break-inside: avoid; background: white; }.card-category > h3 { padding: .04in .06in; font-size: 6pt; }.game-card-line { min-height: 0; padding: .035in .05in; break-inside: avoid; grid-template-columns: minmax(0,1fr) 38px; background: white; }
  .card-line-name { font-size: 5pt; }.card-line-pattern { font-size: 9pt; }.card-line-note { font-size: 5.5pt; }.card-line-progress strong { font-size: 7pt; }.card-line-progress small { font-size: 4.5pt; }
  .game-card-line.is-referenced { outline: none; background: white; }.game-card-line.is-referenced .card-line-name::before { content: none; }
  .pattern-slot.is-natural-match, .pattern-slot.is-joker-match { background: transparent; box-shadow: none; }
  .card-line-track, .official-card-private, .game-card-key .key-match, .game-card-key .key-joker { display: none !important; }
  .game-card-panel, .game-card-panel * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}