/* The map paints edge to edge; only controls respect device cutouts. */
:root[data-native]{color-scheme:light;--safe-left:max(10px,env(safe-area-inset-left));--safe-right:max(10px,env(safe-area-inset-right));--safe-top:env(safe-area-inset-top);--safe-bottom:max(8px,env(safe-area-inset-bottom))}
[data-native] .table{--market-bottom:var(--safe-bottom)}
[data-native] body{background-color:#FBFBF9}
[data-native] .site-page>.mast,[data-native] .creation-page>.mast{padding-left:calc(var(--safe-left) + 18px);padding-right:calc(var(--safe-right) + 18px)}
[data-native] :is(.home-hero,.home-panel,.tutorial-shell,.creation-content,.site-content,.rules-layout){padding-left:calc(var(--safe-left) + 18px);padding-right:calc(var(--safe-right) + 18px)}
[data-native] :is(.home,.site-page){padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
[data-native] .table .topbar{top:calc(var(--safe-top) + 10px);right:var(--safe-right)}
[data-native] .table .jupiter-watch{left:var(--safe-left)}
[data-native] .table .opponent-hud,[data-native] .table .hand-controls{left:var(--safe-left)}
[data-native] .table .hand-controls,[data-native] .table .hand-area{bottom:var(--safe-bottom)}
[data-native] .table .side{right:var(--safe-right);bottom:var(--safe-bottom)}
[data-native] .table:not(.setup-table) .hand-area{left:calc(var(--safe-left) + var(--market-width) + 12px);right:calc(var(--safe-right) + var(--right-hud-width) + 12px)}
[data-native] .table .country-overview{right:calc(var(--safe-right) + var(--right-hud-width) + 12px)}
[data-native] .setup-table .campaign-setup{left:calc(var(--safe-left) + 200px);right:calc(var(--safe-right) + 24px);bottom:var(--safe-bottom)}
[data-native] .setup-generals{left:var(--safe-left);bottom:var(--safe-bottom)}
[data-native] .setup-table .country-overview{right:var(--safe-right);bottom:var(--safe-bottom)}
[data-native] dialog:not(.map-tour){inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);max-width:calc(100vw - 2 * max(var(--safe-left),var(--safe-right)) - 16px);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px)}
[data-native] .score-reveal{padding-left:calc(var(--safe-left) + 12px);padding-right:calc(var(--safe-right) + 12px);padding-bottom:calc(var(--safe-bottom) + 16px)}

@media(orientation:landscape) and (max-height:550px){
 [data-native] .site-page .mast{padding-top:10px;padding-bottom:10px;flex-wrap:nowrap;align-items:center}
 [data-native] .home-hero{display:grid;grid-template-columns:1.5fr 1fr;min-height:0;gap:18px;padding-top:8px;padding-bottom:8px}
 [data-native] .home h1{font-size:34px;margin:8px 0 12px}
 [data-native] .home-intro{font-size:13px;line-height:1.5}
 [data-native] .home-actions{margin-top:14px;gap:8px}
 [data-native] .home-actions button{padding:9px 12px;font-size:12px}
 [data-native] .home .eyebrow{font-size:9px;margin:6px 0}
 [data-native] .home .gate-note{font-size:10px;margin:8px 0}
 [data-native] .home-scene{width:100%;height:230px;max-width:none}
 [data-native] .home-god{height:140px;margin-bottom:0}
 [data-native] .home-god img{width:150px}
 [data-native] .home-generals{height:90px}
 [data-native] .home-generals img{height:95px}
 [data-native] .home #home-status:empty{display:none}
 [data-native] .site-page .legal-footer{margin-top:10px;padding:12px 0 4px}
 [data-native] .creation-content{padding-top:10px;padding-bottom:12px}
 [data-native] .creation-page .setup{gap:10px;padding:14px 20px}
 [data-native] .creation-page .setup h1{font-size:26px;margin-bottom:3px}
 [data-native] .creation-page .setup p{font-size:12px}
 [data-native] .creation-page .setup-columns{grid-template-columns:1fr 1.5fr;gap:24px}
 [data-native] .creation-page .setup-basics{gap:12px}
 [data-native] .creation-page #seats{gap:5px}
 [data-native] .creation-page .setup .seat-row{grid-template-columns:minmax(0,1fr) 100px}
 [data-native] .creation-page .setup label{font-size:10px;gap:2px}
 [data-native] .creation-page .setup input,[data-native] .creation-page .setup select{font-size:12px;padding:5px}
 [data-native] .breadcrumbs{margin-bottom:10px}
 [data-native] .lesson{grid-template-columns:30% 1fr;min-height:0;padding:18px;gap:18px;margin:12px 0}
 [data-native] .lesson .lesson-art{height:180px}
 [data-native] .lesson-art>img{height:180px}
 [data-native] .lesson h1{font-size:27px}
 [data-native] .lesson li{font-size:12px}
 [data-native] .lesson p.lesson-lead{font-size:16px}
 [data-native] .lesson-nav{position:sticky;bottom:0;padding:8px 0;background:var(--marble);z-index:3}

 /* Setup keeps complete, readable cards beside a compact heading. */
 [data-native] .setup-table .campaign-setup{top:42px;left:calc(var(--safe-left) + 95px);right:var(--safe-right);bottom:calc(var(--safe-bottom) + 48px);overflow:auto;pointer-events:auto;justify-content:flex-start}
 [data-native] .setup-table .setup-heading{padding:7px 14px;margin:0 0 6px;max-width:100%}
 [data-native] .setup-steps{font-size:9px;gap:14px}
 [data-native] .setup-table .setup-heading h1{font-size:23px;margin:3px 0}
 [data-native] .setup-table .setup-heading p{font-size:11px;line-height:1.3}
 [data-native] .setup-table .draft-cards{max-width:100%;padding:3px 8px 7px;gap:12px;justify-content:flex-start;pointer-events:auto}
 [data-native] .setup-table .draft-cards .card.card{width:172px;--cw:172px;height:clamp(164px,calc(100dvh - var(--safe-bottom) - 180px),286px);min-height:0;grid-template-rows:minmax(38px,1fr) 22px 65px;--card-title:15px;--card-body:10px;--card-meta:8px;--card-stat:14px;--card-icon:16px;padding:6px 6px 22px;gap:4px}
 [data-native] .setup-table .mission-screen .card-text{font-size:10px}
 [data-native] .setup-generals{right:var(--safe-right);width:auto;flex-direction:row;gap:6px;height:40px}
 [data-native] .setup-general{flex:1;min-height:0;min-width:0;padding:3px 7px;gap:6px}
 [data-native] .setup-general>.piece{height:34px;width:26px}
 [data-native] .setup-general b{font-size:10px}
 [data-native] .setup-general small{font-size:8px;margin-top:1px}
 [data-native] .setup-table .campaign-setup.map-setup{top:44px;left:calc(var(--safe-left) + 95px);bottom:auto;overflow:visible;pointer-events:none}
 [data-native] .setup-table:has(.card-setup) .country-overview{display:none}

 /* Wide, short screens use four Market columns and a compact bottom hand. */
 [data-native] .table{--hand-height:128px;--right-hud-width:clamp(220px,31vw,300px);--market-width:148px;--shared-market-padding:4px;--shared-market-gap:4px}
 [data-native] .table .jupiter-watch,[data-native] .table.setup-table .jupiter-watch{top:6px;left:var(--safe-left);width:74px}
 [data-native] .table .jupiter-watch img,[data-native] .table.setup-table .jupiter-watch img{width:74px;height:74px}
 [data-native] .table .jupiter-status .altar{left:74px;top:8px;width:45px;gap:2px}
 [data-native] .table .jupiter-status .cube{width:6px;height:6px}
 [data-native] .table .topbar{top:6px;left:auto;right:var(--safe-right);gap:8px;height:auto}
 [data-native] .table .topbar>.roundline{font-size:11px}
 [data-native] .table .hud-icon{width:32px;height:32px;padding:6px}
 [data-native] .table .side{top:42px;bottom:var(--safe-bottom);width:var(--right-hud-width);max-width:none;gap:8px;overflow:visible}
 [data-native] .table .side .panel[data-panel=forum].active{width:100%;height:calc(100% - var(--hand-height) - 8px);aspect-ratio:auto;grid-template-columns:1fr 1fr;gap:8px;padding:4px;overflow:auto}
 [data-native] .table .forum-grid,[data-native] .table .reserve{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px}
 [data-native] .table :is(.forum-grid,.reserve)>.card.card{width:100%;height:100%;min-height:0;aspect-ratio:auto;--card-stat:10px;--card-icon:12px}
 [data-native] .table .opponent-hud{top:84px;gap:4px;width:148px}
 [data-native] .table .opponent-hud .general-hud{height:40px;min-height:0;grid-template-columns:24px minmax(0,1fr);padding:3px;gap:1px 4px;--general-stat-size:13px}
 [data-native] .table .opponent-hud .general-avatar{width:24px;height:34px}
 [data-native] .table .opponent-hud .general-info>strong{font-size:10px;padding-right:0}
 [data-native] .table .opponent-hud .general-resources{gap:5px}
 [data-native] .table .opponent-hud .general-resources>span{font-size:9px}
 [data-native] .table .opponent-hud .general-resources .ic{width:11px;height:11px}
 [data-native] .table .self-general .general-avatar{top:6px!important;width:36px!important;height:54px!important}
 [data-native] .table .self-general .general-info{top:12px;left:44px;gap:3px}
 [data-native] .table .self-general .general-info>strong{font-size:10px!important}
 [data-native] .table .self-general .hud-health b{font-size:18px!important}
 [data-native] .table .self-general>.hud-vp{font-size:17px;top:65px;right:7px}
 [data-native] .table .self-general .general-cards{bottom:36px;left:9px;gap:12px}
 [data-native] .table .self-general .general-resources{bottom:8px;font-size:10px;gap:7px}
 [data-native] .table .hand-area{height:var(--hand-height)}
 [data-native] .table .hand-area>#play-all{width:38px;height:38px;border-radius:10px}
 [data-native] .table .hand-area>#play-all svg{width:27px;height:27px}
 [data-native] .table .side .play-area{flex-basis:var(--hand-height)}
 [data-native] .table .turn-resources{font-size:18px;gap:10px}
 [data-native] .table .turn-resources .ic{width:22px;height:22px}
 [data-native] .table .play-area-footer #end-turn{min-height:34px;padding:6px 9px;font-size:11px}
 [data-native] .table .country-overview{width:64px;height:48px;left:auto;bottom:calc(var(--safe-bottom) + var(--hand-height) + 10px)}
 [data-native] .table .side>.undo-control{left:-114px;width:34px;height:34px;padding:6px;bottom:calc(var(--hand-height) + 14px)}
 [data-native] .table .statue-deadline{top:40px;padding:5px 10px;font-size:11px}
 [data-native] .statue-deadline strong{font-size:13px}
 [data-native] dialog.card-popup{width:250px;padding:8px}
 [data-native] :is(.card-popup,.choice-dialog) .card-large .card.card{height:calc(100dvh - var(--safe-bottom) - 36px);min-height:0;width:220px;--cw:220px;grid-template-rows:minmax(30px,1fr) 24px 90px;padding-bottom:30px;--card-body:11px;--card-title:18px}
 [data-native] .choice-prompt{grid-template-columns:220px minmax(0,1fr);gap:12px}
 [data-native] .choice-prompt:before{top:20px;bottom:20px;left:185px;right:0}
 [data-native] .choice-prompt .choice-options{padding:14px}
 [data-native] dialog.choice-dialog{padding:8px}
 [data-native] dialog.chance-dialog{width:min(310px,calc(100dvh - var(--safe-bottom) - 20px))}
 [data-native] dialog.chance-dialog .chance-card{--card-title:17px;--card-body:11px;grid-template-rows:minmax(0,1fr) 24px 76px}
 [data-native] dialog.recap-dialog{padding:16px}
 [data-native] .map-tour-card{max-height:calc(100dvh - var(--safe-bottom) - 20px);padding:15px}
 [data-native] .map-tour h2{font-size:24px}
 [data-native] .map-tour progress{margin:6px 0 10px}
 [data-native] .map-tour nav{margin-top:12px}
}
@media(orientation:landscape) and (max-height:550px){
 [data-native] .table .hand-controls .self-general{display:block}
 [data-native] .table .self-general .general-avatar,[data-native] .table .self-general .general-info,[data-native] .table .self-general .general-resources,[data-native] .table .self-general .general-cards,[data-native] .table .self-general .general-spoils{position:absolute}
 [data-native] .table .self-general .general-info>strong{padding-right:0}
 [data-native] .table .self-general .general-resources{top:65px;left:7px;bottom:auto}
 [data-native] .table .self-general .general-cards{bottom:7px;left:10px;padding:0}
 [data-native] .table .self-general .general-spoils{top:auto;bottom:6px;left:75px;right:4px;max-height:32px;overflow:auto;flex-wrap:nowrap;gap:5px;padding:0}
 [data-native] .table .self-general .general-spoils .ic{width:18px;height:18px}
 [data-native] .table .self-general>.hud-vp{top:86px;right:7px}
 [data-native] .table .self-general.has-spoils>.hud-vp{top:6px}
 [data-native] .table .self-general.has-spoils .general-info>strong{padding-right:28px}
}

[data-native] dialog.map-tour{padding-left:var(--safe-left);padding-right:var(--safe-right);padding-bottom:var(--safe-bottom)}
[data-native] .map-question{max-width:calc(100vw - 2 * max(var(--safe-left),var(--safe-right)) - 16px)}
[data-native] .map-tour-card{max-width:calc(100vw - 2 * max(var(--safe-left),var(--safe-right)) - 24px);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)}

/* Native pages keep the brand on the front door and navigation in context. */
.native-home-rulebook,.native-home-account{display:none}
[data-native] .native-home-rulebook,[data-native] .native-home-account{display:inline-flex}
[data-native] .site-page>.mast,[data-native] .creation-page>.mast{display:none}
[data-native] .home[data-home-screen=home]>.mast{display:flex;border:0}
[data-native] .home[data-home-screen=home]>.mast nav{display:none}
[data-native] .score-reveal>header>.wm,[data-native] .setup>.wm{display:none}
[data-native] .table .side>.undo-control{display:grid;place-items:center;box-sizing:border-box;line-height:1;padding:6px}
[data-native] .table .side>.undo-control[hidden]{display:none}
[data-native] .table .side>.undo-control svg{display:block;width:100%;height:100%;margin:0;max-width:24px;max-height:24px}
@media(orientation:landscape) and (max-height:550px){
 [data-native] .table .opponent-hud{gap:4px}
 [data-native] .table .opponent-hud .general-hud,[data-native] .table .opponent-hud .general-hud.has-spoils{height:auto;min-height:54px;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;padding:4px;gap:2px 5px}
 [data-native] .table .opponent-hud .general-avatar{position:static;grid-column:1;grid-row:1;width:28px;height:32px}
 [data-native] .table .opponent-hud .general-info{position:static;grid-column:2;grid-row:1;padding:0;gap:0;align-self:center;line-height:1.05}
 [data-native] .table .opponent-hud .general-info>strong{margin:0;padding:0;font-size:10px;line-height:12px}
 [data-native] .table .opponent-hud .hud-health{margin:0;line-height:14px}
 [data-native] .table .opponent-hud .general-resources{position:static;grid-column:1 / -1;grid-row:2;gap:2px 6px;align-self:start;line-height:12px}
 [data-native] .table .opponent-hud .general-resources .general-spoils{margin:0}
 [data-native] .table .self-general>.hud-vp,[data-native] .table .self-general.has-spoils>.hud-vp{top:6px;right:7px;font-size:17px}
 [data-native] .table .self-general .general-info{top:10px;left:44px;right:6px;gap:1px}
 [data-native] .table .self-general .general-info>strong,[data-native] .table .self-general.has-spoils .general-info>strong{padding-right:31px;box-sizing:border-box}
 [data-native] .table .self-general .general-resources{top:53px;left:7px;right:6px;gap:3px 7px}
 [data-native] .table .self-general .general-cards{left:auto;right:6px;bottom:7px;gap:5px}
 [data-native] .table .self-general .general-spoils{left:6px;right:64px;bottom:7px;max-height:40px;gap:3px;flex-wrap:wrap;align-items:center;overflow:auto}
 [data-native] .table .self-general .general-spoils .capital-spoils{flex-wrap:wrap;gap:4px}
 [data-native] .table .self-general .general-spoils .card-illustration{width:20px;height:20px}
 [data-native] .table .self-general .general-spoils .ic{width:18px;height:18px}
 [data-native] .table .self-general .general-potions{gap:1px;font-size:10px}
 [data-native] .table .hand-controls .general-cards .deck-stack{width:25px;height:33px}
 [data-native] .table .hand-controls .general-cards .mission-card{width:23px;height:31px}
}
@media(orientation:landscape) and (max-height:550px){
 [data-native] .table .opponent-hud{top:76px;max-height:calc(100dvh - var(--safe-bottom) - var(--hand-height) - 82px);overflow-y:auto;gap:3px}
 [data-native] .table .opponent-hud .general-hud,[data-native] .table .opponent-hud .general-hud.has-spoils{min-height:50px;padding:3px;gap:1px 5px;flex-shrink:0}
 [data-native] .table .opponent-hud .general-avatar{height:28px}
}
@media(orientation:landscape) and (max-height:390px){[data-native] .table{--hand-height:116px}}

@media(orientation:landscape) and (max-height:550px){
 [data-native] .deck-dialog .pile-cards>.card.card{height:min(275px,calc(100dvh - var(--safe-top) - var(--safe-bottom) - 112px))}
}

[data-native] .home[data-home-screen=home]>.legal-footer{display:none}
[data-native] .home[data-home-screen=home] .mobile-home-legal{display:block;margin-left:auto;font-size:11px;padding:8px}
@media(orientation:landscape) and (max-height:550px){
 [data-native] .home[data-home-screen=home] .mast{min-height:50px;flex:none;margin:0 auto;padding-top:7px;padding-bottom:7px}
 [data-native] .home[data-home-screen=home] #home{display:flex;align-items:center;min-height:0}
 [data-native] .home[data-home-screen=home] .home-hero{width:100%;grid-template-columns:2fr 1fr;gap:12px;padding-top:0;padding-bottom:4px}
 [data-native] .home[data-home-screen=home] h1{font-size:28px;margin:5px 0 10px}
 [data-native] .home[data-home-screen=home] .home-intro{font-size:12px;line-height:1.45;margin:8px 0}
 [data-native] .home[data-home-screen=home] .home-actions{margin-top:10px;gap:6px}
 [data-native] .home[data-home-screen=home] .home-actions :is(button,a){font-size:11px;padding:7px 9px;min-height:34px}
 [data-native] .home[data-home-screen=home] .gate-note{margin:7px 0;font-size:10px}
 [data-native] .home[data-home-screen=home] .home-scene{height:210px;min-width:0}
 [data-native] .home[data-home-screen=home] .home-god{height:130px}
 [data-native] .home[data-home-screen=home] .home-generals{height:80px}
 [data-native] .home[data-home-screen=home] .home-generals img{height:85px}
}

@media(orientation:portrait){
 [data-native] .home[data-home-screen=home] .mast{flex:none;margin:0 auto;padding-top:14px;padding-bottom:10px}
 [data-native] .home[data-home-screen=home] .home-hero{gap:8px;padding-top:8px;padding-bottom:8px}
 [data-native] .home[data-home-screen=home] h1{font-size:clamp(32px,8vw,40px);margin:8px 0 14px}
 [data-native] .home[data-home-screen=home] .home-intro{font-size:14px;line-height:1.5}
 [data-native] .home[data-home-screen=home] .home-actions{margin-top:18px;gap:8px}
 [data-native] .home[data-home-screen=home] .home-actions :is(button,a){font-size:13px;padding:9px 11px;min-height:40px}
 [data-native] .home[data-home-screen=home] .gate-note{margin:10px 0;font-size:11px}
 [data-native] .home[data-home-screen=home] .home-scene{height:clamp(135px,calc(100dvh - 590px),250px)}
 [data-native] .home[data-home-screen=home] .home-god{height:60%;margin-bottom:0}
 [data-native] .home[data-home-screen=home] .home-generals{height:40%}
 [data-native] .home[data-home-screen=home] .home-generals img{height:100%}
 [data-native] .home[data-home-screen=home] #home-status:empty{display:none}
}

@media(orientation:landscape) and (max-height:550px){
 [data-native] .tutorial-shell{padding-top:8px;padding-bottom:6px}
 [data-native] .tutorial-progress{margin:4px 0 6px}
 [data-native] .lesson{margin:8px 0;padding:14px;gap:14px}
 [data-native] .lesson .lesson-art,[data-native] .lesson-art>img{height:160px}
 [data-native] .lesson h1{font-size:25px;margin:0 0 10px}
 [data-native] .lesson p.lesson-lead{margin:8px 0;font-size:16px;line-height:1.35}
 [data-native] .lesson ul{margin:8px 0;padding-left:18px}
 [data-native] .lesson li{line-height:1.4;margin-bottom:5px}
 [data-native] .lesson-nav{padding:4px 0}
}

@media(orientation:landscape) and (max-height:550px){
 [data-native] .lesson:has(li:nth-child(5)){grid-template-columns:64px minmax(0,1fr);gap:4px 14px}
 [data-native] .lesson:has(li:nth-child(5)) .lesson-copy{display:contents}
 [data-native] .lesson:has(li:nth-child(5)) .lesson-art{grid-column:1;grid-row:1 / 3;height:64px}
 [data-native] .lesson:has(li:nth-child(5)) .lesson-art>img{height:64px}
 [data-native] .lesson:has(li:nth-child(5)) h1,[data-native] .lesson:has(li:nth-child(5)) .lesson-lead{grid-column:2;margin:0}
 [data-native] .lesson:has(li:nth-child(5)) ul{grid-column:1 / -1;columns:2;column-gap:24px}
 [data-native] .lesson:has(li:nth-child(5)) li{break-inside:avoid;font-size:11.5px}
}
@media(orientation:landscape) and (max-height:550px){[data-native] .setup-map-toggle{font-size:10px;padding:6px 8px;min-height:28px}}

/* Card choices are centred on the screen, with equal clearance on both sides. */
[data-native] .setup-table .campaign-setup.card-setup{left:max(var(--safe-left),var(--safe-right));right:max(var(--safe-left),var(--safe-right));bottom:calc(var(--safe-bottom) + 72px)}
[data-native] .setup-table:has(.card-setup) .setup-generals{left:max(var(--safe-left),var(--safe-right));right:max(var(--safe-left),var(--safe-right));width:auto;height:60px;flex-direction:row;gap:8px}
[data-native] .setup-table:has(.card-setup) .setup-general{flex:1;min-width:0;min-height:0}
@media(orientation:landscape) and (max-height:550px){
 [data-native] .setup-table .campaign-setup.card-setup{bottom:calc(var(--safe-bottom) + 48px)}
 [data-native] .setup-table:has(.card-setup) .setup-generals{height:40px;gap:6px}
}

@media(orientation:landscape) and (max-height:550px){
 [data-native] .lesson:has(li:nth-child(5)){padding:10px;grid-template-columns:44px minmax(0,1fr)}
 [data-native] .lesson:has(li:nth-child(5)) .lesson-art,[data-native] .lesson:has(li:nth-child(5)) .lesson-art>img{height:44px}
 [data-native] .lesson:has(li:nth-child(5)) ul{margin:4px 0}
 [data-native] .lesson:has(li:nth-child(5)) li{line-height:1.35;margin-bottom:3px}
 [data-native] .lesson-nav{padding:0}
}

.native-breadcrumb{display:none}[data-native] .native-breadcrumb{display:block}

/* Compact gameplay margins follow the actual camera side, not both safe edges. */
[data-native][data-camera-side=left] .table:not(.setup-table){--safe-right:10px}
[data-native][data-camera-side=right] .table:not(.setup-table){--safe-left:10px}
[data-native] .table:not(.setup-table){--safe-bottom:8px}
[data-native] .table:not(.setup-table) .opponent-hud{top:auto;bottom:calc(var(--safe-bottom) + var(--hand-height) + 8px)}

@media(orientation:landscape) and (max-height:550px){
 /* Keep all three resource pairs on a clean row below the General. */
 [data-native] .table .self-general .general-avatar{height:46px!important;width:32px!important}
 [data-native] .table .self-general .general-resources{top:57px;left:7px;right:7px;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px}
 [data-native] .table .self-general .general-resources>span{grid-template-columns:13px max-content;gap:3px;font-size:10px;line-height:14px;min-width:0}
 [data-native] .table .self-general .general-resources>span>.ic{width:13px;height:13px}
 [data-native] .table .self-general .general-spoils{max-height:32px}

 /* Scale the same artwork and corner cues together on small card faces. */
 [data-native] .table :is(.forum-grid,.reserve)>.card.card{--card-inset:3px;--card-stat:8px;--card-icon:10px}
 [data-native] .table :is(.forum-grid,.reserve)>.card.card>.card-resources>span{gap:1px}
 [data-native] .table :is(.hand,.played-cards)>.card.card{--card-inset:4px;--card-title:9px;--card-body:6px;--card-meta:6px;--card-stat:8px;--card-icon:10px;grid-template-rows:minmax(0,1fr) 11px 19px;padding:4px 4px 18px;gap:3px}
 [data-native] .table :is(.hand,.played-cards)>.card.card>.card-art{padding:3px 12%}
 [data-native] .table :is(.hand,.played-cards)>.card.card>.card-resources{font-size:8px;gap:2px}
 [data-native] .table :is(.hand,.played-cards)>.card.card>.card-resources>span{min-height:10px}
 [data-native] .table :is(.hand,.played-cards)>.card.card>.card-resources .ic{width:10px;height:10px}
 [data-native] .table :is(.hand,.played-cards)>.card.card>.card-family{max-width:calc(100% - 24px)}

 /* A held card is a proportional full face, with room for its complete rules. */
 [data-native] dialog.card-popup{--preview-height:min(420px,calc(100dvh - var(--safe-top) - var(--safe-bottom) - 40px));width:calc(var(--preview-height) * .61905 + 16px);padding:8px}
 [data-native] dialog.card-popup:has(.buttons>.primary){--preview-height:min(420px,calc(100dvh - var(--safe-top) - var(--safe-bottom) - 86px))}
 [data-native] .card-popup .card-large .card.card{width:100%;height:var(--preview-height);min-height:0;--cw:calc(var(--preview-height) * .61905);--card-inset:calc(var(--preview-height) * .02381);--card-title:16px;--card-body:11px;--card-meta:9px;--card-stat:15px;--card-icon:19px;grid-template-rows:minmax(0,1fr) 21px 90px;padding:var(--card-inset) var(--card-inset) 30px;gap:4px}
 [data-native] .card-popup .card-large .card.card>.card-art{padding:4px 14%}
}