/* Shared page composition, based on work/landscape-0.16.1/reference-board.png. */
.setup-overview{min-width:0}.setup-overview .brand{margin-block:12px}.online-shell,.online-sidebar,.online-content,.round-overview,.handoff-identity,.handoff-actions{min-width:0}
.settings-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c5ad72 #15372c;padding:4px 0 10px;touch-action:pan-x}
.settings-tabs button{flex:0 0 auto;min-height:44px;padding:8px 12px;border:1px solid #a28b57;background:#15392c;color:#f0dfb6;white-space:nowrap}
.settings-tabs [aria-selected=true]{background:#e8d3a2;color:#19392f;box-shadow:inset 0 -3px #9d7e3d}
.settings-content[hidden]{display:none!important}.settings-content{padding:8px 0;min-width:0}.settings-content>label{min-width:0}.settings-content input[type=range]{width:100%;min-height:36px;accent-color:#c9a85c}
.modal:has(.settings-pages){width:min(900px,calc(100 * var(--ui-vw,1vw) - 24px));max-width:none}.settings-content .help{line-height:1.65}
#app .screen.handoff,#app .screen.scene-loading{width:100%;max-width:none;margin:0;min-height:calc(100 * var(--ui-vh,1dvh));padding:clamp(18px,4vw,64px);box-sizing:border-box}
#app .screen.handoff{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(180px,1fr) auto;gap:24px;align-content:stretch}
#app .handoff>.row{justify-content:center}#app .handoff-identity{align-self:center}#app .handoff-actions{width:min(100%,620px);justify-self:center;align-self:center}
#app .scene-loading{display:grid;grid-template-rows:auto 1fr}.scene-loading>section{width:min(100%,620px);align-self:center;justify-self:center;text-align:center;display:grid;gap:18px}.scene-loading progress{width:100%;height:14px;accent-color:#d5b76b}
@container app-viewport (orientation:landscape) and (min-width:700px){
 #app .screen.handoff{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(240px,1fr);gap:24px 5%}#app .handoff>.row{grid-column:1/-1;align-self:start}
 .settings-content{display:grid;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-content>:is(fieldset,.animation-previews,p,.style-preview){grid-column:1/-1}
}
.online-shell{display:grid;gap:20px}.online-sidebar h1{margin:0}.online-sidebar .online-tabs{flex-wrap:wrap}.online-content>form{min-width:0}.online-content input,.online-content select{max-width:100%}
.round-overview{display:grid;gap:10px;flex:none}.round-overview h1{margin:0}.handoff-identity{display:grid;gap:12px;justify-items:center;text-align:center}.handoff-identity .privacy-symbol{margin-inline:auto}.handoff-actions{align-items:stretch}
@container app-viewport (orientation:landscape) and (min-width:700px){
 .screen.setup,.screen.online-screen{max-width:1240px;padding:20px 28px 32px}
 .screen.setup{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr);gap:24px 32px;align-items:start}
 .setup>.row.between{grid-column:1/-1}.setup-overview{position:sticky;top:18px;gap:18px}.setup-overview .brand{align-items:flex-start}.setup-overview .brand h1{font-size:clamp(28px,calc(3.5 * var(--ui-vw,1vw)),44px)}.setup-overview .brand .seal{flex-shrink:0}.setup-overview .footer-note{margin-top:12px}
 .screen.setup #new-game{margin:0;padding:22px;border:1px solid #c6af6d80;border-radius:16px;background:#f5efdf;color:#183e32;box-shadow:0 8px 28px #0002;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .setup #new-game :is(input,select){background:#fffaf0;color:#183e32;border-color:#b7ab8b}.setup #new-game :is(.help,summary){color:#53634f;opacity:1}.setup #new-game .seat-setup{background:#e9e3d2;color:#183e32;border-color:#b6a775}.setup #new-game legend{color:#405a42}
 .setup #new-game>details,.setup #new-game>.seat-setup,.setup #new-game>.primary,.setup #new-game>#field-note{grid-column:1/-1}.setup #new-game label,.setup #new-game input,.setup #new-game select{min-width:0;max-width:100%}.setup .seat-slot{grid-template-columns:minmax(80px,.8fr) minmax(80px,1fr) minmax(90px,1fr)}
 .online-shell{grid-template-columns:minmax(190px,.6fr) minmax(0,1.8fr);gap:28px;align-items:start}.online-sidebar{position:sticky;top:18px;gap:18px}.online-sidebar h1{font-size:clamp(26px,calc(3 * var(--ui-vw,1vw)),38px);line-height:1.3}.online-sidebar .online-tabs{display:grid;grid-template-columns:1fr;gap:8px}.online-sidebar .online-tabs button{text-align:left;min-height:44px}.online-sidebar>.row{flex-wrap:wrap;gap:10px}
 .online-content:has(>#online-join){display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);align-items:start;gap:18px}.online-content>.online-tabs{flex-wrap:wrap}.online-content .online-paper{margin:0}.online-content #online-create .row{flex-wrap:wrap}.online-content #online-create .row>label{flex:1 1 100px;min-width:0}.online-content #online-create h2,.online-content #online-join h2{font-size:22px;line-height:1.4;margin-top:0}
 .online-content #online-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.online-content #online-options>.row,.online-content #online-options>fieldset,.online-content #online-options>.primary,.online-content #online-options>.help{grid-column:1/-1}
 .screen.round-intro{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,1.3fr);grid-template-rows:auto minmax(0,1fr) auto;max-width:1100px;gap:16px 24px;padding:16px 24px}.round-intro>header,.round-intro>.intro-enter{grid-column:1/-1}.round-intro .round-overview{align-content:start;overflow-y:auto;min-height:0;padding-right:6px}.round-intro .intro-openings{margin:0;min-height:0;overflow-y:auto;padding:16px}.round-intro .intro-field{margin:0}.round-intro .intro-scores{gap:8px}.round-intro .intro-enter{min-height:44px}
 .screen.handoff{max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;align-content:center;min-height:100%;padding:20px 28px}.handoff>.row{grid-column:1/-1;justify-content:center}.handoff-identity .privacy-symbol{width:52px;height:52px;margin-block:0 10px}.handoff-identity h1{margin-block:8px;font-size:30px}.handoff-identity .recipient{font-size:28px;margin:12px}.handoff-actions{align-self:center;gap:16px}
 .screen.result{max-width:1100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.result>*{grid-column:1/-1}.result>.round-score-formula{grid-column:auto;min-width:0;margin:0}.result>.round-score-formula:last-of-type:nth-of-type(odd){grid-column:1/-1}.result .score-equation{flex-wrap:wrap}
 .modal .display-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.modal .display-settings>*{min-width:0}
 @container app-viewport (max-width:1080px){.online-content .profile-page{display:block}.online-content .profile-statistics{border-left:0}}
}
@container app-viewport (orientation:landscape) and (min-width:600px){
 /* One compact status rail per opponent, independent of player count and rule. */
 #app .single-table{--landscape-top:clamp(132px,calc(28 * var(--ui-vh,1dvh)),270px);--landscape-bottom:clamp(144px,calc(40 * var(--ui-vh,1dvh)),320px)}
 #app .single-table.fold-captures:not(:has(.opponent[data-expanded=true])){--landscape-top:64px}
 #app .single-table.fold-captures:not(:has(.opponent[data-expanded=true])):has(.public-hand:not(.public-hand-empty)){--landscape-top:clamp(116px,calc(25 * var(--ui-vh,1dvh)),190px)}
 #app .single-table.fold-captures:has(.opponent[data-expanded=true]){--landscape-top:clamp(132px,calc(30 * var(--ui-vh,1dvh)),280px)}
 #app .single-table .table-arena .opponents{grid-template-columns:repeat(var(--opponent-count),minmax(0,1fr));gap:8px;align-items:stretch}
 #app .single-table .table-arena .opponent[data-player-seat]{display:grid;grid-area:auto;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px minmax(0,1fr);grid-template-areas:'heading toggle' 'captures captures';padding:5px 8px;gap:3px 8px;align-content:start;overflow:hidden}
 #app .single-table .table-arena .opponent:has(.public-hand:not(.public-hand-empty)){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;grid-template-areas:'heading heading toggle' 'public captures captures'}
 #app .single-table.fold-captures .table-arena .opponent[data-expanded=false]{grid-template-rows:48px;grid-template-areas:'heading toggle';grid-template-columns:minmax(0,1fr) auto;align-content:start}
 #app .single-table.fold-captures .table-arena .opponent[data-expanded=false]:not(:has(.public-hand:not(.public-hand-empty))){height:64px;align-self:start}
 #app .single-table.fold-captures .table-arena .opponent[data-expanded=false]:has(.public-hand:not(.public-hand-empty)){grid-template-rows:48px minmax(0,1fr);grid-template-areas:'heading toggle' 'public public'}
 #app .single-table .opponent .opponent-heading{grid-area:heading;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;max-width:560px;min-height:44px;padding:2px 4px;align-self:start;overflow:hidden;text-align:left}
 #app .single-table .opponent-heading>*{position:static;grid-area:auto;margin:0;flex:0 0 auto;transform:none}
 #app .single-table .opponent-heading .player-crest{width:30px;height:30px}
 #app .single-table .opponent-name{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:24px;max-width:40%}
 #app .single-table .opponent-name small{font-size:10px}
 #app .single-table .opponent-heading strong{font-size:25px;line-height:1.2;white-space:nowrap}
 #app .single-table .opponent-heading strong small{font-size:12px}
 #app .single-table .opponent-heading .seat-role{font-size:11px;width:auto;padding:2px 5px;white-space:nowrap}
 #app .single-table .opponent-heading .hand-count{font-size:12px;white-space:nowrap;margin-left:12px;display:flex;gap:3px;align-items:center}
 #app .single-table .opponent-heading .back-fan{display:none}
 #app .single-table .opponent .capture-toggle{grid-area:toggle;width:auto;height:44px;min-height:44px;align-self:center;padding:5px 10px;font-size:12px;white-space:nowrap;border:1px solid #bfa85e70;border-radius:7px;background:#e8ddbd;color:#254438}
 #app .single-table .opponent .opponent-paper{display:contents}
 #app .single-table .opponent .public-hand-empty{display:none}
 #app .single-table .opponent .public-hand:not(.public-hand-empty){grid-area:public;min-height:0;grid-template-rows:14px minmax(0,1fr);padding:4px}
 #app .single-table .opponent .public-hand>span{font-size:10px;line-height:14px}
 #app .single-table .opponent .opponent-capture-content{grid-area:captures;grid-template-rows:14px minmax(0,1fr);min-height:0;padding:3px 5px}
 #app .single-table .opponent .capture-title{font-size:10px;line-height:14px}
 #app .single-table .opponent .table-captures{grid-template-rows:repeat(4,minmax(0,1fr));min-height:0}
 #app .single-table .opponent .table-capture-row{grid-template-columns:34px minmax(0,1fr) 16px}
 #app .single-table .opponent .rank-label,#app .single-table .opponent .row-count{font-size:10px}
 #app .single-table .hand-cards .card{height:auto;aspect-ratio:72/112;max-height:100%}
 @container app-viewport (max-height:500px){
  #app .single-table:not(.fold-captures),#app .single-table.fold-captures:has(.opponent[data-expanded=true]){--landscape-bottom:128px}
  #app .single-table .hand-zone{grid-template-rows:16px minmax(0,1fr) 32px;gap:3px;padding-block:4px}
 }
 @container app-viewport (max-width:1000px){
  #app .single-table .opponent .opponent-heading{display:grid;max-width:340px;grid-template-columns:25px minmax(0,1fr) auto;grid-template-rows:20px 22px;gap:0 5px}
  #app .single-table .opponent-heading .player-crest{grid-row:1/3;width:24px;height:24px}
  #app .single-table .opponent-heading .opponent-name{grid-column:2;grid-row:1;font-size:14px;max-width:100%}
  #app .single-table .opponent-heading .seat-role{grid-column:3;grid-row:1;font-size:10px}
  #app .single-table .opponent-heading strong{grid-column:2;grid-row:2;font-size:21px}
  #app .single-table .opponent-heading .hand-count{grid-column:3;grid-row:2;font-size:10px}
  #app .single-table .opponent .capture-toggle{padding:4px;font-size:10px;max-width:86px;white-space:normal;line-height:1.25}
 }
}
@container app-viewport (orientation:landscape) and (max-height:500px){
 .screen.setup,.screen.online-screen{padding-top:12px}.setup-overview .brand .seal{width:36px;height:54px;font-size:22px}.setup-overview{gap:10px}.setup-overview .brand h1{font-size:28px}.setup-overview .brand p{font-size:12px}.setup-overview .help,.setup-overview .footer-note{font-size:11px}.setup-overview button{min-height:40px}.screen.round-intro{gap:8px 16px;padding:8px 18px}.round-intro h1{font-size:24px}.round-intro .intro-field{padding:10px}.round-intro .intro-field strong{font-size:26px}.round-intro .intro-scores{padding:8px}.handoff-actions .help{font-size:13px}
}
@container app-viewport (orientation:portrait){
 /* A folded seat without public cards needs only its heading and toggle. */
 #app .single-table.fold-captures .table-arena:not([class*=expanded-]):not(:has(.public-hand:not(.public-hand-empty))){grid-template-rows:94px minmax(0,1fr)}
 #app .single-table.fold-captures .opponent[data-expanded=false]:not(:has(.public-hand:not(.public-hand-empty))) .public-hand-empty{display:none}
 #app .single-table.fold-captures .opponent[data-expanded=false]:not(:has(.public-hand:not(.public-hand-empty))) .opponent-paper{align-self:start;background:transparent;padding:0}
 #app .single-table.fold-captures .opponent[data-expanded=false]:not(:has(.public-hand:not(.public-hand-empty))) .capture-toggle{min-height:44px}
}