/* A compact shell, then bounded game stages. Never crop content to fake a fit. */
body.anime-theme header {
 height:66px;min-height:66px;padding:6px 22px;grid-template-columns:110px 1fr 110px;
 background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 border:0;box-shadow:none;
}
.anime-theme.in-hub header #home>.brand-wordmark{width:196px;height:56px}
.anime-theme #hub-left-dialog .dialog-top:before{background-image:url('assets/menu/icons/explore-v1.webp')}
.anime-theme.in-campaign>header{display:none}
.on-hub-home main{min-height:calc(100dvh - 66px)}

/* Story selection, saga overview and starter selection share the available viewport. */
body.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball],[data-hub-view=choose]){
 height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball],[data-hub-view=choose]) main{
 flex:1;min-height:0;max-height:none;padding:10px 22px 18px;overflow:hidden;align-items:stretch;
}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball],[data-hub-view=choose]) main>.hub-page{
 flex:1;display:flex;flex-direction:column;min-height:0;height:100%;margin:0;padding:0;
}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball],[data-hub-view=choose]) .hub-back{
 flex:none;align-self:flex-start;margin-bottom:8px;
}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball]) .hub-section-heading{
 flex:none;gap:14px;margin:0 0 10px;padding-bottom:10px;
}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball]) .section-emblem{width:54px;height:58px;flex-basis:54px}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball]) .section-emblem .menu-icon{width:54px;height:58px}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball]) .hub-section-heading h1{font-size:38px;margin:0;line-height:1.1}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball]) .hub-section-heading p{font-size:15px;line-height:1.35;margin:5px 0 0}
.anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball]) .hub-section-heading .hub-kicker{display:none}
.anime-theme.in-hub[data-hub-view=universes] .hub-universes{
 flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:18px;width:100%;max-width:none;margin:0;
}
.anime-theme.in-hub[data-hub-view=universes] .hub-universe{
 height:min(100%,430px);max-height:100%;min-height:0;padding:clamp(60px,13dvh,98px) 15% clamp(24px,5dvh,38px);
 grid-template-rows:minmax(28px,1fr) 20px 34px minmax(0,1fr) 44px;gap:5px;
}
.anime-theme.in-hub[data-hub-view=universes] .universe-emblem .universe-icon{width:64px;height:64px;max-width:100%;max-height:100%;object-fit:contain}
.anime-theme.in-hub[data-hub-view=universes] .hub-universe h2{font-size:29px}
.anime-theme.in-hub[data-hub-view=universes] .hub-universe p{font-size:14px;line-height:1.3}
.anime-theme.in-hub[data-hub-view=dragonball] .hub-campaign-actions{flex:none;margin:0 0 12px;gap:10px}
.anime-theme.in-hub[data-hub-view=dragonball] .campaign-roadmap{flex:1;min-height:0;margin:0;padding:16px;display:flex;flex-direction:column}
.anime-theme.in-hub[data-hub-view=dragonball] .saga-roadmap{flex:1;min-height:0;margin-top:12px;align-items:stretch}
.anime-theme.in-hub[data-hub-view=dragonball] .saga-block{padding:12px;min-width:0}
.anime-theme.in-hub[data-hub-view=dragonball] .saga-block ol{font-size:14px;line-height:1.5;margin-top:8px}
.anime-theme.in-hub[data-hub-view=choose] .starter-page>h1{font-size:36px;margin:8px 0;line-height:1.1}
.anime-theme.in-hub[data-hub-view=choose] .starter-page>p{font-size:15px;line-height:1.4;margin:5px 0 10px;max-width:1000px}
.anime-theme.in-hub[data-hub-view=choose] .starter-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:none;align-items:stretch}
.anime-theme .starter.hero-starter{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:0;height:100%;max-height:430px;padding:16px;
 border:1px solid #dab97980;border-radius:14px;background:linear-gradient(145deg,#293c58dd,#101c34ec);text-align:center;
}
.anime-theme .hero-starter:before,.anime-theme .hero-starter:after{content:none}
.anime-theme .hero-starter>.avatar{flex:1;min-height:80px;max-height:230px;width:100%;height:auto;margin:0;display:flex;align-items:center;justify-content:center}
.anime-theme .hero-starter>.avatar .character-portrait{width:100%;height:100%;max-height:230px;object-fit:contain}
.anime-theme .hero-starter strong{font-size:42px;line-height:1.1}
.anime-theme .hero-starter small{font-size:15px;line-height:1.35}
.anime-theme .hero-starter .select-label{font-size:16px;font-weight:800;color:#ffe0a4}

/* During a run the game commands replace the outer branding header. */
.anime-theme.in-campaign main{padding:8px 12px;max-width:1680px}
.anime-theme.in-campaign .run-top{margin-bottom:8px;gap:12px;min-height:64px}
.anime-theme.in-campaign .run-top h1{font-size:26px}
.anime-theme.in-campaign .campaign-commands .command{min-height:62px;padding:7px 8px;gap:6px}
.anime-theme.in-campaign .campaign-commands .command-icon,.anime-theme.in-campaign .campaign-commands .command-icon .menu-icon{width:30px;height:32px;flex-basis:30px}
.anime-theme.in-campaign .command-copy strong{font-size:15px}
.anime-theme.in-campaign .command-copy small{font-size:12px;line-height:1.25}
.anime-theme.in-campaign .layout>.side{overflow:auto;overscroll-behavior:contain}

/* Recruitment and choices: image beside the options instead of above them. */
.anime-theme.in-campaign .choice-panel,.anime-theme.in-campaign .event-panel{
 display:grid;grid-template-columns:minmax(130px,.7fr) minmax(0,1.6fr);
 grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
 grid-template-areas:'eyebrow eyebrow' 'heading heading' 'flavor flavor' 'help help' 'art choices' 'footer footer';
 gap:7px 16px;padding:14px;overflow:hidden;
}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.eyebrow{grid-area:eyebrow}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>h2{grid-area:heading;margin:0;font-size:28px}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.node-flavor{grid-area:flavor;font-size:15px!important;line-height:1.4;margin:0;padding:7px 10px}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>p:not(.node-flavor){grid-area:help;font-size:15px;line-height:1.35;margin:0}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.event-illustration{
 grid-area:art;height:100%!important;min-height:0;max-height:100%;width:100%;margin:0;aspect-ratio:auto;
}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.offer-grid{
 grid-area:choices;flex:none;min-height:0;margin:0;overflow:visible;align-content:center;align-items:stretch;gap:8px;
 grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);
}
.anime-theme.in-campaign :is(.choice-panel,.event-panel):not(:has(>.event-illustration))>.offer-grid{grid-column:1/-1}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.text-button{grid-area:footer;margin:0;min-height:36px;justify-self:start}
.anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card{
 min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 6px;gap:4px;
}
.anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card .avatar{width:100%;height:clamp(50px,10dvh,96px);max-height:96px;margin:0;min-height:0}
.anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card .character-portrait{width:100%;height:100%;object-fit:contain}
.anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card h3{font-size:24px;line-height:1.1;margin:0}
.anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card p{font-size:14px;line-height:1.3;margin:0}
.anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card>span{font-size:14px;margin-top:3px}
.anime-theme.in-campaign .recovery-visual{min-height:120px}
.anime-theme.in-campaign .recovery-visual>img{height:clamp(120px,20dvh,165px)}
.anime-theme.in-campaign .recovery-content{padding:12px 18px}
.anime-theme.in-campaign .recovery-team article{padding:6px 4px}
.anime-theme.in-campaign .recovery-services{margin-top:10px}
.anime-theme.in-campaign .recovery-services button{padding:8px;min-height:54px}

/* Reserve space for a real arena and a complete reward row. */
.anime-theme.in-campaign .battle-panel{
 --arena-floor:240px;--battle-log-size:42px;display:grid;min-height:0;
 grid-template-rows:auto auto auto auto minmax(var(--arena-floor),1fr) auto auto auto;
 grid-template-areas:'heading' 'demo' 'benches' 'intel' 'arena' 'toolbar' 'prep' 'reward';
 overflow:hidden!important;
}
.anime-theme.in-campaign .battle-panel>.battle-head{grid-area:heading;padding:6px 12px;min-height:36px}
.anime-theme.in-campaign .battle-head h2{font-size:25px;line-height:1.1}
.anime-theme.in-campaign .battle-panel>.demo-note{grid-area:demo;padding:4px 12px}
.anime-theme.in-campaign .battle-panel>.duel-benches{grid-area:benches;--bench-art:40px;padding:4px 12px;gap:18px}
.anime-theme.in-campaign .bench>div{margin-top:3px}
.anime-theme.in-campaign .bench>span{font-size:14px}
.anime-theme.in-campaign .bench-unit small{font-size:11px;margin-top:2px}
.anime-theme.in-campaign .battle-panel>.encounter-intel{grid-area:intel;position:relative;font-size:14px;padding:4px 12px;min-height:28px}
.anime-theme.in-campaign .encounter-intel summary{min-height:20px}
.anime-theme.in-campaign .encounter-intel .enemy-scout-list{position:absolute;z-index:12;top:100%;left:8px;right:8px;max-height:220px;overflow:auto;margin:0;padding:10px;background:#101a32fa;border:1px solid #d7b77666;border-radius:8px}
.anime-theme.in-campaign .battle-panel>.arena{grid-area:arena;display:block;height:100%;min-height:var(--arena-floor)}
.anime-theme.in-campaign .battle-panel>.battle-toolbar{grid-area:toolbar;padding:5px 12px;gap:8px}
.anime-theme.in-campaign .battle-toolbar button{padding:6px 10px;min-height:36px}
.anime-theme.in-campaign .battle-toolbar>span{font-size:13px;line-height:1.25}
.anime-theme.in-campaign .battle-toolbar .matchup-chip{font-size:12px;margin:2px 0 0}
.anime-theme.in-campaign .battle-panel>.prep-note{grid-area:prep;font-size:13px;line-height:1.3;padding:4px 12px}
.anime-theme.in-campaign .battle-panel>.combat-log{grid-area:log;height:auto;min-height:0;padding:4px 12px;overflow:auto}
.anime-theme.in-campaign .combat-log p{font-size:13px;line-height:1.3}
.anime-theme.in-campaign .battle-panel>.reward{grid-area:reward;display:flex;align-items:center;min-height:76px;gap:12px;padding:10px 14px;overflow:visible}
.anime-theme.in-campaign .reward>div{min-width:0;flex:1}
.anime-theme.in-campaign .reward h3{font-size:28px;line-height:1.15;margin:0}
.anime-theme.in-campaign .reward p{font-size:14px;line-height:1.35;margin:4px 0 0}
.anime-theme.in-campaign .reward>.primary{flex:none;min-height:42px}
.anime-theme.in-campaign[data-run-phase=reward] .battle-toolbar{display:none}
.anime-theme.in-campaign[data-run-phase=reward] .battle-panel{--battle-log-size:34px}

@media(max-width:1000px){
 .anime-theme.in-campaign .run-top{flex-direction:column;gap:6px;align-items:stretch}
 .anime-theme.in-campaign .run-top>div:first-child{display:flex;align-items:center;gap:12px}
 .anime-theme.in-campaign .run-top .progress{display:none}
 .anime-theme.in-campaign .campaign-commands{max-width:none}
 .anime-theme.in-campaign .campaign-commands .command{min-height:48px}
 .anime-theme.in-campaign .command-copy small{display:none}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel){grid-template-columns:minmax(100px,.55fr) minmax(0,1.6fr);gap:6px 10px}
}
@media(max-width:760px){
 body.anime-theme header{height:60px;min-height:60px;padding:4px 10px;grid-template-columns:75px 1fr 75px}
 .anime-theme.in-hub header #home>.brand-wordmark{width:min(170px,40vw);height:52px}
 .on-hub-home main{min-height:calc(100dvh - 60px)}
 .anime-theme.in-hub:is([data-hub-view=universes],[data-hub-view=dragonball],[data-hub-view=choose]) main{padding:6px 10px 10px}
 .anime-theme.in-hub[data-hub-view=universes] .hub-universes{gap:5px}
 .anime-theme.in-hub[data-hub-view=universes] .hub-universe{padding:60px 10% 28px;height:min(100%,370px);grid-template-rows:minmax(20px,1fr) 28px 34px minmax(0,1fr) 52px;gap:4px}
 .anime-theme.in-hub[data-hub-view=universes] .hub-universe h2{font-size:23px}
 .anime-theme.in-hub[data-hub-view=universes] .hub-universe p{font-size:13px}
 .anime-theme.in-hub[data-hub-view=universes] .hub-universe>small{font-size:10px;letter-spacing:0}
 .anime-theme.in-hub[data-hub-view=universes] .hub-universe button{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
 .anime-theme.in-hub[data-hub-view=dragonball] .saga-roadmap{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
 .anime-theme.in-hub[data-hub-view=dragonball] .saga-block{padding:8px}
 .anime-theme.in-hub[data-hub-view=dragonball] .saga-block ol{font-size:12px;line-height:1.35;margin-top:4px}
 .anime-theme.in-hub[data-hub-view=dragonball] .saga-block>small{display:none}
 .anime-theme.in-hub[data-hub-view=choose] .starter-grid{gap:7px}
 .anime-theme .starter.hero-starter{padding:10px 6px;gap:7px}
 .anime-theme .hero-starter strong{font-size:29px}
 .anime-theme .hero-starter small{font-size:13px}
 .anime-theme .hero-starter .select-label{font-size:14px}
 .anime-theme.in-campaign .campaign-commands{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
 .anime-theme.in-campaign .campaign-commands .command{flex-direction:column;justify-content:center;min-height:50px;padding:4px;gap:3px}
 .anime-theme.in-campaign .campaign-commands .command-icon,.anime-theme.in-campaign .campaign-commands .command-icon .menu-icon{width:23px;height:24px;flex-basis:auto}
 .anime-theme.in-campaign .command-copy strong{font-size:12px}
 .anime-theme.in-campaign .run-top h1{font-size:22px}
 .anime-theme.in-campaign .run-top .eyebrow{font-size:11px}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel){grid-template-columns:1fr;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;grid-template-areas:'eyebrow' 'heading' 'flavor' 'help' 'choices' 'footer';padding:10px}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel)>.event-illustration{display:none}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card h3{font-size:22px}
 .anime-theme.in-campaign .battle-panel>.duel-benches{--bench-art:32px;padding:4px 8px;gap:10px}
 .anime-theme.in-campaign .reward{flex-direction:row;align-items:center}
 .anime-theme.in-campaign .reward p{font-size:12px}
 .anime-theme.in-campaign .reward>.primary{font-size:13px;padding:7px}
}
@media(max-height:680px){
 .anime-theme.in-campaign .battle-panel{--arena-floor:190px;--battle-log-size:32px}
 .anime-theme.in-campaign .battle-panel>.duel-benches{--bench-art:30px}
 .anime-theme.in-campaign .battle-panel>.prep-note,.anime-theme.in-campaign .battle-panel>.demo-note{display:none}
 .anime-theme.in-campaign .battle-head{min-height:30px}
 .anime-theme.in-campaign .battle-head h2{font-size:22px}
 .anime-theme.in-campaign .run-top h1{font-size:23px}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card .avatar{height:52px}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card h3{font-size:21px}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel) .offer-card p{font-size:13px}
 .anime-theme.in-hub[data-hub-view=dragonball] .campaign-roadmap{padding:10px}
 .anime-theme.in-hub[data-hub-view=dragonball] .saga-block ol{font-size:12px;line-height:1.35}
 .anime-theme.in-hub[data-hub-view=choose] .starter-page>.eyebrow,.anime-theme.in-hub[data-hub-view=choose] .starter-page>p:not(.warning){display:none}
}
@media(max-height:520px) and (orientation:landscape){
 .anime-theme.in-campaign .battle-panel{--arena-floor:125px;--battle-log-size:28px}
 .anime-theme.in-campaign .battle-panel>.duel-benches{--bench-art:24px}
 .anime-theme.in-campaign .bench-unit small{display:none}
 .anime-theme.in-campaign .reward{min-height:62px;padding:7px 10px}
 .anime-theme.in-campaign .reward h3{font-size:24px}
 .anime-theme.in-campaign .run-top{min-height:44px}
}

/* Five-member replacement/training choices use the whole width in a single row. */
.anime-theme.in-campaign :is(.choice-panel,.event-panel):has(>.offer-grid>:nth-child(4))>.event-illustration{display:none}
.anime-theme.in-campaign :is(.choice-panel,.event-panel):has(>.offer-grid>:nth-child(4))>.offer-grid{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr))}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.offer-grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.offer-grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.anime-theme.in-campaign :is(.choice-panel,.event-panel)>.offer-grid:has(>:only-child){grid-template-columns:1fr}
.anime-theme.in-campaign .battle-panel:has(.encounter-intel[open]){overflow:hidden!important}
@media(max-width:480px){
 .anime-theme.in-hub[data-hub-view=universes] .hub-universe p{display:none}
 .anime-theme.in-hub[data-hub-view=universes] .hub-universe{grid-template-rows:minmax(30px,1fr) 28px 40px 0 52px;padding-left:7%;padding-right:7%}
 .anime-theme.in-hub[data-hub-view=dragonball] .roster-title{gap:8px}
 .anime-theme.in-hub[data-hub-view=dragonball] .roster-title h3{font-size:21px}
 .anime-theme.in-hub[data-hub-view=dragonball] .saga-block strong{font-size:14px;line-height:1.2}
 .anime-theme.in-hub[data-hub-view=dragonball] .saga-block ol{font-size:11px;line-height:1.25}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel):has(>.offer-grid>:nth-child(4)) .offer-card p{display:none}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel):has(>.offer-grid>:nth-child(4)) .offer-card h3{font-size:16px;overflow-wrap:anywhere}
 .anime-theme.in-campaign :is(.choice-panel,.event-panel)>.offer-grid{gap:5px}
 .anime-theme.in-campaign .choice-panel>p:not(.node-flavor){font-size:13px;line-height:1.3}
 .anime-theme.in-campaign .battle-toolbar>span{max-width:140px}
}

.anime-theme.in-campaign .rift-panel .temporal-rift-art{height:clamp(100px,18dvh,145px);margin:8px 0;flex:none}
.anime-theme.in-campaign .rift-panel .rift-story{font-size:16px!important;line-height:1.4!important;margin:6px 0 10px!important}
.anime-theme.in-campaign .rift-recruit{padding:8px 12px;gap:14px}
.anime-theme.in-campaign .rift-recruit>div:first-child{width:80px;height:100px}
.anime-theme.in-campaign .rift-recruit h3{font-size:25px;margin-bottom:4px}
.anime-theme.in-campaign .rift-recruit p{font-size:14px;line-height:1.3}