/* Language choices use the existing paper and charcoal art, equal hit areas. */
.language-view{display:flex;align-items:center;justify-content:center;}
.language-view[hidden]{display:none;}
.language-card{width:100%;text-align:center;padding:28px 16px;}
.language-card h2{font-size:28px;line-height:1.5;margin:0 0 16px;}
.language-card h2 span{font-size:24px;}
.language-card p{line-height:1.6;margin:0 0 28px;}
.language-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.language-options button{display:grid;place-items:center;text-align:center;min-height:88px;width:100%;font-size:26px;line-height:1.25;padding:18px 12px;color:var(--charcoal-ink,#26231f);background:var(--charcoal-paper,#f3eddd);border:12px solid transparent;border-image:url('/assets/optimized/charcoal-frame-v1-1254.webp') 110 stretch;}
.language-options button:focus-visible{outline:3px solid #26231f;outline-offset:4px;}
.language-waiting{position:absolute;inset:400px 540px;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--charcoal-paper,#f3eddd);border:26px solid transparent;border-image:url('/assets/optimized/charcoal-frame-v1-1254.webp') 110 stretch;padding:80px;}
.language-waiting[hidden]{display:none;}
.language-waiting h2{font-size:96px;line-height:1.35;margin:0 0 60px;}
.language-waiting h2 span{font-size:76px;}
.language-waiting p{font-size:44px;line-height:1.65;}
.display-stage[data-choosing-language="true"] :is(.action-summary,.tabletop,.player-ring){visibility:hidden;}
html[lang="en"] .controller-stage .mobile-header h1{font-size:clamp(22px,5vw,30px);line-height:1.2;}
html[lang="en"] .controller-stage :is(.host-intro h2,.target-sheet h2,.waiting-crest h2,.finish-view h2){line-height:1.25;overflow-wrap:normal;}
html[lang="en"] .controller-stage .team-status strong{font-size:clamp(18px,4.5vw,28px);line-height:1.25;}
html[lang="en"] .controller-stage .wine-counts{gap:6px;}
html[lang="en"] .controller-stage .wine-counts b>span:first-child{font-size:14px;white-space:normal;line-height:1.25;}
html[lang="en"] .controller-stage .hand-card .hand-name{height:38px;left:0;right:0;bottom:2px;padding:2px 3px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;font-size:14px;line-height:1.15;}
html[lang="en"] .controller-stage[data-visual-style] .team-game-view .hand-card{padding-bottom:40px;min-height:150px;}
html[lang="en"] .controller-stage .hand-card img{height:calc(100% - 44px);}
html[lang="en"] .controller-stage .action-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:116px;}
html[lang="en"] .controller-stage .action-grid button b{font-size:20px;line-height:1.2;}
html[lang="en"] .controller-stage .action-grid button span{font-size:14px;line-height:1.35;white-space:normal;}
html[lang="en"] .controller-stage .action-hint{line-height:1.45;}
html[lang="en"] .controller-stage .team-name-inputs{grid-template-columns:1fr;}
html[lang="en"] .controller-stage .team-name-inputs label{min-height:48px;}
html[lang="en"] .controller-stage .team-name-inputs input{font-size:18px;}
html[lang="en"] .controller-stage .target-option b{font-size:20px;white-space:normal;line-height:1.25;}
html[lang="en"] .controller-stage .catch-buttons{display:grid;gap:14px;grid-template-columns:1fr;}
html[lang="en"] .controller-stage .catch-buttons button{font-size:20px;line-height:1.3;}
html[lang="en"] .controller-stage .finish-view p{line-height:1.5;}
html[lang="en"] .controller-stage .mini-seat-order{flex-wrap:wrap;}
html[lang="en"] .controller-stage .mini-seat-name{white-space:normal;}
html[lang="en"] .display-stage .board-title strong{font-size:42px;white-space:normal;line-height:1.25;}
html[lang="en"] .display-stage .board-turn-state{font-size:26px;}
html[lang="en"] .display-stage .metric-label{font-size:27px;white-space:nowrap;}
html[lang="en"] .display-stage .table-broadcast{font-size:36px;line-height:1.4;}
html[lang="en"] .display-stage .lobby-code span{font-size:36px;white-space:normal;}
html[lang="en"] .display-stage .catch-copy h2{font-size:72px;line-height:1.2;}
html[lang="en"] .display-stage .catch-copy p{font-size:36px;line-height:1.4;}
html[lang="en"] .display-stage .winner-overlay h2{font-size:120px;line-height:1.25;}
/* Keep complete card art above its separate caption on the narrowest phone. */
body[data-phone-responsive="true"] .controller-stage[data-visual-style] .team-game-view .hand-card{height:clamp(150px,32vw,208px);min-height:150px;aspect-ratio:auto;padding:6px;}
body[data-phone-responsive="true"] .controller-stage .hand-art{top:6px;width:calc(100% - 12px);max-width:92px;height:auto;aspect-ratio:2/3;}
body[data-phone-responsive="true"] .controller-stage .hand-art img{width:100%;height:100%;}
body[data-phone-responsive="true"] .controller-stage .hand-card .hand-name{bottom:4px;left:0;right:0;height:40px;}
html[lang="en"] .display-stage .deck-pile b{gap:12px;white-space:nowrap;}
body[data-phone-responsive="true"] .controller-stage .team-game-view .action-grid button{padding:13.5px 8px 10.5px;}
body[data-phone-responsive="true"] .controller-stage .count-picker{max-width:100%;}
body[data-phone-responsive="true"] .controller-stage .team-status{display:flex;flex-wrap:wrap;gap:12px;padding:12px;}
body[data-phone-responsive="true"] .controller-stage .team-status>div:first-child{flex:1 1 90px;min-width:0;}
body[data-phone-responsive="true"] .controller-stage .team-status :is(strong,#turnStatus){white-space:normal;overflow-wrap:normal;line-height:1.3;}
body[data-phone-responsive="true"] .controller-stage .wine-counts{flex:0 0 120px;min-width:0;}
body[data-phone-responsive="true"] .controller-stage .target-view{align-items:center;justify-items:center;}
body[data-phone-responsive="true"] .controller-stage .target-sheet{max-height:calc(100dvh - 32px);overscroll-behavior:contain;scroll-padding:16px;}
body[data-phone-responsive="true"] .controller-stage[data-visual-style] .target-option{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:96px;gap:6px;padding:16px;}
body[data-phone-responsive="true"] .controller-stage .target-option i{display:none;}
body[data-phone-responsive="true"] .controller-stage .target-option b{font-size:20px;line-height:1.25;}
body[data-phone-responsive="true"] .controller-stage .target-option span{font-size:16px;line-height:1.4;}
body[data-phone-responsive="true"] .controller-stage :is(.help-sheet,.recovery-sheet){display:flex;flex-direction:column;overflow:hidden;padding:20px;gap:10px;}
body[data-phone-responsive="true"] .controller-stage :is(.help-sheet,.recovery-sheet)>h2{flex:none;margin:0;font-size:24px;}
body[data-phone-responsive="true"] .controller-stage :is(.help-sheet,.recovery-sheet)>button{flex:none;width:100%;margin:0;min-height:48px;font-size:16px;line-height:1.3;padding:12px;}
body[data-phone-responsive="true"] .controller-stage :is(.rules-copy,#recoveryList){min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px;}
body[data-phone-responsive="true"] .controller-stage .rules-copy p{font-size:18px;line-height:1.5;margin:10px 0;}
body[data-phone-responsive="true"] .controller-stage :is(#recoveryStatus,#cardDetail){flex:none;font-size:16px;line-height:1.5;margin:0;}
body[data-phone-responsive="true"] .controller-stage #cardDetail:empty{display:none;}
body[data-phone-responsive="true"] .controller-stage .recovery-team{grid-template-columns:72px minmax(0,1fr);gap:10px;padding:12px 0;}
body[data-phone-responsive="true"] .controller-stage .recovery-team img{width:72px;height:72px;}
body[data-phone-responsive="true"] .controller-stage .recovery-team :is(b,span){font-size:16px;line-height:1.4;overflow-wrap:anywhere;}
body[data-phone-responsive="true"] .controller-stage .recovery-team button{grid-column:1/-1;width:100%;min-height:48px;font-size:16px;line-height:1.3;padding:12px;white-space:normal;}
html[lang="en"] body[data-phone-responsive="true"] .controller-stage .team-game-view .action-grid button{padding:13.5px 8px 10.5px;}
html[lang="en"] .display-stage .score-ticket .board-title strong{line-height:1.4;}
html[lang="en"] .controller-stage .team-name-inputs input{min-height:44px;}
html[lang="en"] .display-stage .player-ring[data-team-count="5"] .fresh-metric{grid-template-columns:50px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:4px 8px;}
html[lang="en"] .display-stage .player-ring[data-team-count="5"] .fresh-metric>img{grid-row:1/3;}
html[lang="en"] .display-stage .player-ring[data-team-count="5"] .fresh-metric .metric-label{white-space:normal;font-size:26px;line-height:1.25;}
html[lang="en"] .display-stage .player-ring[data-team-count="5"] .fresh-metric .metric-value{grid-column:2;}
/* Keep captions in normal flow below the complete card art on every phone width. */
body[data-phone-responsive="true"]{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body[data-phone-responsive="true"] .controller-stage[data-visual-style] .team-game-view .hand-card{height:auto;min-height:0;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;padding:6px 0;}
body[data-phone-responsive="true"] .controller-stage .hand-card .hand-art{position:relative;top:auto;left:auto;transform:none;width:min(100%,92px);height:auto;aspect-ratio:2/3;flex:none;}
body[data-phone-responsive="true"] .controller-stage .hand-card .hand-name{position:static;inset:auto;width:100%;height:auto;min-height:28px;margin-top:10px;padding:0 5px;display:block;text-align:center;white-space:normal;overflow-wrap:anywhere;hyphens:auto;font-size:14px;line-height:1.3;}
/* WebKit must size wrapped hint/button text from its actual lines. */
body[data-phone-responsive="true"] .controller-stage .team-game-view{flex:1 0 auto;grid-auto-rows:minmax(min-content,auto);}
body[data-phone-responsive="true"] .controller-stage .team-game-view .action-hint{display:block;height:auto;text-align:center;}
html[lang="en"] body[data-phone-responsive="true"] .controller-stage .team-game-view .action-grid button{display:grid;height:auto;min-height:116px;gap:8px;}
html[lang="en"] body[data-phone-responsive="true"] .controller-stage .team-game-view .action-grid button :is(b,span){max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;}