/* The viewport is the stage: only horizontal roster and category travel. */
html,body{height:100dvh;overflow:hidden}
#menu{box-sizing:border-box;touch-action:pan-x;padding:18px clamp(12px,3vw,48px);padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
#menu{padding-left:max(12px,3vw,env(safe-area-inset-left));padding-right:max(12px,3vw,env(safe-area-inset-right))}
#menu .intro{grid-template-columns:minmax(0,1fr);gap:14px;max-height:none}
.roster-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,.85fr);gap:12px}
.hero-feature{grid-template-columns:minmax(0,.7fr) minmax(0,.7fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:22px;overflow:hidden;align-items:center}
#menu .hero-stage{grid-row:1;grid-column:1;min-height:0;height:100%;align-self:stretch;background:none}
#menu .hero-stage::before{content:none}
#menu .hero-stage::after{border:0;box-shadow:none}
#hero-picture{display:block;width:100%;height:100%;min-height:0}
#menu #hero-art{display:block;width:auto;max-width:100%;height:100%;max-height:none;margin:auto;padding:0;object-position:center;mask-image:radial-gradient(ellipse at center,#000 42%,#000c 58%,transparent 80%)}
#menu .hero-copy{grid-column:2;grid-row:1;align-self:center;padding:0}
#hero-preview{grid-column:3;grid-row:1;align-self:center}
.hero-stats{margin:0 0 10px;padding:8px 0}
.class-growth{font:12px/1.3 Barlow;color:#c7cdbe;margin:0 0 8px}
.hero-move-preview button{flex-direction:row;align-items:center;min-height:64px;font-size:15px}
#hero-spell-note{display:grid;gap:3px;padding:7px 9px;margin-top:8px}
#hero-spell-note span{font-size:12px;line-height:1.3}
#hero-spell-note strong{font-size:13px}
#hero-spell-note small{font-size:10px}
.roster-browser{padding:10px 0 0;border-left:0;border-top:1px solid #bfa57155;grid-template-rows:auto auto minmax(0,1fr);min-width:0}
.roster-title{margin-bottom:4px;align-items:center;gap:10px}
.roster-title h2{font-size:23px}
.lineup-navigation{display:flex;align-items:center;gap:12px}
.lineup-navigation button{width:40px;height:36px;border:1px solid #bfa57160;background:#201c18bf;border-radius:3px;font:27px/1 Barlow,sans-serif;color:#dec794}
.lineup-navigation button:disabled{opacity:.35}
#lineup-position{font:12px Barlow;color:#e1d4b7;min-width:38px;text-align:center}
#role-filters{padding:0;margin:0 0 7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x}
#role-filters button{min-height:32px;touch-action:pan-x}
#role-filters{flex-wrap:nowrap;white-space:nowrap}#role-filters button{flex:none}
#menu .hero-picks{--visible-heroes:5;--card-gap:12px;grid-column:1;display:flex;gap:var(--card-gap);padding:3px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x;position:relative;align-items:stretch;cursor:grab}
#menu .hero-picks:active{cursor:grabbing}
#menu .hero-picks button{flex:0 0 calc((100% - (var(--visible-heroes) - 1)*var(--card-gap))/var(--visible-heroes));height:100%;min-height:0;scroll-snap-align:center;scroll-snap-stop:normal;touch-action:pan-x;padding:5px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:4px;overflow:hidden;cursor:inherit;border:0;border-radius:0;background:none;box-shadow:none;outline:none;transition:color .2s}
#menu .hero-picks button[aria-pressed=true]{border:0;background:none;box-shadow:none;color:#edd49f}
#menu .hero-picks button[aria-pressed=true]::after{content:none}
#menu .hero-picks button[aria-pressed=true]>span,#menu .hero-picks button:focus-visible>span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
#menu .hero-picks button:hover>span,#menu .hero-picks button:focus-visible>span{color:#f2ead9}
#menu .hero-picks picture{min-height:0;display:block;height:100%;width:100%;overflow:hidden}
#menu .hero-picks img{display:block;width:auto;height:100%;max-height:none;max-width:100%;margin:auto;padding:0;mask-image:radial-gradient(ellipse at center,#000 45%,#000c 60%,transparent 82%)}
#menu .hero-picks span{font-size:18px;line-height:1.15;padding:2px 0}
#menu .hero-picks small{font-size:10px;margin-top:3px}
.roster-footer{min-height:64px;padding-top:12px}
.selection-spell-art .hero-move-preview button{min-height:64px;font-size:13px}
.selection-spell-art .preview-spell-art{width:35px;height:35px}
@media(min-width:600px) and (max-width:999px){#menu .hero-picks{--visible-heroes:4}.hero-feature{gap:14px}.hero-move-preview button{font-size:12px;padding:5px}.preview-spell-art{width:32px;height:32px}#ready-legend{display:none}}
@media(max-width:599px){
 #menu{padding-inline:12px}#menu .intro{gap:9px}.roster-heading{padding-bottom:9px}.title-sigil{width:28px;height:28px}.title-lockup{gap:8px}#menu .roster-heading h1{font-size:27px}.roster-heading .match-format{max-width:94px;font-size:10px}
 .roster-layout{grid-template-rows:minmax(0,1fr) minmax(0,.9fr);gap:8px}.hero-feature{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);grid-template-rows:auto minmax(0,1fr);gap:4px 10px;align-items:stretch}
 #menu .hero-stage{grid-row:1/3;grid-column:1}#menu .hero-copy{grid-column:2;grid-row:1;align-self:start}#menu .hero-copy h2{font-size:26px}#menu .hero-copy>span{font-size:10px;margin-top:3px}#menu .hero-copy p{font-size:12px;line-height:1.25;margin-top:5px}
 #hero-preview{grid-column:2;grid-row:2;align-self:center}.hero-stats{padding:5px 0;margin:2px 0 6px}.hero-stats dd{font-size:13px}.hero-stats dt{font-size:8px}.hero-move-preview{gap:5px}.hero-move-preview button{min-height:46px;font-size:11px;padding:4px;gap:5px}.preview-spell-art{width:26px;height:30px}.hero-move-preview small{font-size:8px}
 .roster-browser{padding-top:7px}.roster-title h2{font-size:19px}.roster-title>span,#roster-count{font-size:10px}.lineup-navigation{gap:5px}.lineup-navigation button{width:32px;height:32px}#lineup-position{font-size:10px;min-width:32px}#role-filters{margin-bottom:4px}#role-filters button{padding:5px 8px;font-size:11px;min-height:32px}
 #menu .hero-picks{--visible-heroes:3;--card-gap:6px}#menu .hero-picks span{font-size:13px}#menu .hero-picks small{font-size:8px}
 .roster-footer{display:grid;grid-template-columns:1fr;gap:5px;padding-top:8px;min-height:0}.start-action{display:block}#menu .roster-footer .primary{width:100%;min-height:45px;font-size:19px}#ready-legend{display:none}.roster-footer .menu-links{justify-content:space-between;gap:8px}.roster-footer .menu-links button{font-size:12px;min-height:32px}
}
@media(max-height:650px){#menu .hero-copy p{display:none}#menu .intro{gap:7px}.roster-heading{padding-bottom:7px}.roster-heading p{margin-top:3px}.hero-stats{padding:4px 0;margin:0 0 4px}.hero-move-preview button{min-height:40px}.roster-footer{padding-top:7px}.roster-browser{padding-top:5px}}
@media(max-height:480px) and (min-width:600px){
 #menu{padding:max(8px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.roster-heading{padding-bottom:5px}.title-sigil{width:30px;height:30px}#menu .roster-heading h1{font-size:27px}.roster-heading p{display:none}.roster-heading .match-format{font-size:11px;max-width:none}
 .roster-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr);gap:16px}.hero-feature{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);grid-template-rows:auto minmax(0,1fr);gap:4px 8px}#menu .hero-stage{grid-row:1/3}#menu .hero-copy{grid-column:2;grid-row:1}#menu .hero-copy h2{font-size:22px}#menu .hero-copy>span{font-size:9px;margin-top:2px}#hero-preview{grid-column:2;grid-row:2}.hero-stats dt{font-size:8px}.hero-stats dd{font-size:13px;margin-top:3px}.hero-move-preview button{min-height:42px;font-size:10px;padding:3px;gap:4px}.preview-spell-art{width:24px;height:26px}.hero-move-preview small{font-size:8px}
 .roster-browser{border-left:1px solid #bfa57155;border-top:0;padding:0 0 0 14px}.roster-title h2{font-size:17px}.lineup-navigation{gap:5px}#roster-count{font-size:10px}#lineup-position{font-size:10px;min-width:28px}.lineup-navigation button{width:30px;height:30px}#role-filters button{font-size:10px;padding:4px 6px;min-height:30px}#menu .hero-picks{--card-gap:6px}#menu .hero-picks span{font-size:11px}#menu .hero-picks small{font-size:8px}
 .roster-footer{min-height:45px;padding-top:6px}#menu .roster-footer .primary{min-height:40px;width:230px;font-size:18px}#ready-legend{display:none}.roster-footer .menu-links button{font-size:12px;min-height:36px}
}
@media(prefers-reduced-motion:reduce){#menu *{animation:none!important;transition:none!important}}

/* Each spell has three short information pages and a persistent learning action. */
.health #mana-fill{top:auto;bottom:-11px;height:7px;background:linear-gradient(180deg,#5d88b5,#3c6491);width:98%;box-shadow:0 0 0 1px #000}
.health #mana-text{top:calc(100% + 2px);bottom:auto;line-height:8px;font-size:8px;color:#faf7f1;height:9px}
.health #xp-fill{bottom:-15px}
.abilities .mana-cost{position:absolute;bottom:9px;left:0;right:0;font:8px Barlow;color:#eee4cf;text-align:center;text-shadow:0 1px 2px #1b1712;pointer-events:none}
.ability.mana-empty{border-color:#6690c1}.ability.mana-empty b{font-size:11px}.ability.return-ready{border-color:#f6c68c}.ability.return-ready b{font-size:13px}
.spell-list,.spell-detail-scroll,.spellbook-layout{overflow:hidden}
.spell-row{min-height:0}
.spell-info-tabs{display:flex;flex:none;gap:5px;margin-bottom:7px}
.spell-info-tabs button{flex:1;min-height:34px;font:600 12px Barlow;letter-spacing:.4px;background:linear-gradient(180deg,#2a251f,#1c1814);border:1px solid #4d4337;border-radius:2px;color:#d6ccb8}
.spell-info-tabs button[aria-pressed=true]{border-color:var(--mr-gold);color:#f3dca6;background:linear-gradient(180deg,#4a3a25,#2b2117)}
.spell-detail-scroll>[class],.spell-detail-scroll>h3{display:none}
.spell-detail-scroll[data-tab=overview]>.spell-visual,.spell-detail-scroll[data-tab=overview]>h3,.spell-detail-scroll[data-tab=overview]>.spell-description,.spell-detail-scroll[data-tab=overview]>.spell-tags{display:block}
.spell-detail-scroll[data-tab=progression]>.spell-stats,.spell-detail-scroll[data-tab=progression]>.rank-track,.spell-detail-scroll[data-tab=progression]>.spell-tips,.spell-detail-scroll[data-tab=combo]>.spell-tips{display:flex}
.spell-detail-scroll[data-tab=progression]>.spell-tips,.spell-detail-scroll[data-tab=combo]>.spell-tips{display:block}
.spell-detail-scroll[data-tab=progression] .combo-note,.spell-detail-scroll[data-tab=combo] .upgrade-note{display:none}
.spell-visual{width:min(160px,18dvh);margin:0 auto -9px}
.spell-detail h3{font-size:28px}.spell-detail .spell-description{font-size:17px}
.spell-detail .primary{min-height:44px;font-size:17px}
@media(max-width:700px){
 .spellbook-heading{min-height:50px;flex-wrap:nowrap;margin-bottom:7px;padding-bottom:7px}.spellbook-heading>img{width:30px;height:37px}.spellbook-heading h2{font-size:19px}.spellbook-heading p{font-size:12px}.point-count{font-size:13px}.point-count>span:last-child{font-size:11px}
 .spellbook-layout{display:grid;grid-template-columns:1fr;grid-template-rows:112px minmax(0,1fr);gap:7px}.spell-list{grid-template-rows:repeat(2,minmax(0,1fr));gap:5px;padding:0}.spell-row{min-height:0;padding:5px;grid-template-columns:35px minmax(0,1fr);gap:5px}.spell-row-icon{width:35px;height:38px}.spell-row-copy>b{font-size:12px}.rank-pips{margin-top:5px}
 .spell-detail{display:flex;flex-direction:column;min-height:0;overflow:hidden;margin:0;padding:7px 0 0}.spell-detail-scroll{min-height:0;flex:1;overflow:hidden}.spell-info-tabs button{min-height:32px;font-size:11px}.spell-visual{width:min(125px,16dvh);margin:0 auto -7px}.spell-detail h3{font-size:23px;margin:4px 0 6px}.spell-detail .spell-description{font-size:14px;line-height:1.3;margin-bottom:7px}.spell-tags{font-size:11px;padding:4px 6px}.spell-stats{font-size:14px}.spell-detail .primary{min-height:42px;font-size:15px}.spellbook-footer{min-height:45px;margin-top:7px;padding-block:7px}.spellbook-footer p{font-size:10px}.spellbook-footer .row-btn{min-height:36px}
}
@media(max-height:600px){.spell-visual{width:75px;margin:0 auto -5px}.spell-info-tabs{margin-bottom:4px}.spell-detail h3{font-size:21px;margin:3px 0 5px}.spell-detail .spell-description{font-size:13px}.spell-tags{font-size:10px}.spell-detail .primary{min-height:38px;font-size:14px}.spell-detail .upgrade-note,.spell-detail .combo-note{font-size:13px}.spell-learn-action{padding-block:3px}.training-feedback{font-size:10px!important}}

/* Other dialogs use measured pages for long instructions, shops and match results. */
dialog:not(.spellbook-sheet){height:min(650px,calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:36px 18px 12px;overflow:hidden}
dialog:not(.spellbook-sheet) #sheet-content{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 40px;gap:7px;overflow:hidden}
.panel-pages{min-height:0;overflow:hidden}.panel-page{display:flow-root;height:100%;min-height:0;overflow:hidden}.panel-page[hidden]{display:none}
.panel-pagination{display:flex;align-items:center;justify-content:center;gap:18px}.panel-pagination[hidden]{visibility:hidden;display:flex}.panel-pagination button{width:52px;height:36px;background:linear-gradient(180deg,#2a251f,#1c1814);border:1px solid var(--mr-bronze);border-radius:2px;box-shadow:inset 0 1px 0 #ffffff0d;color:var(--mr-parchment);font:25px Barlow,sans-serif}.panel-pagination button:disabled{opacity:.35}.panel-pagination output{font:13px Barlow;color:#cfc4a8}
.paged-group.market-grid{max-height:none;overflow:hidden;grid-template-columns:1fr 1fr}.paged-group.market-grid button{min-height:58px}.paged-group.market-builds,.paged-group.market-tabs{display:flex;flex-wrap:wrap}.panel-page>li{list-style:none;padding:8px 0;font:16px/1.4 Barlow;color:#d9d5cd}.panel-page>.market-layout{min-height:0}
#tactical-map{max-height:calc(100dvh - 270px);width:auto;max-width:100%;margin:auto;aspect-ratio:1;border:2px solid #7d6240;box-shadow:0 0 0 1px #000,inset 0 0 18px #000}
.panel-page h2{font-size:25px;margin-bottom:12px}.panel-page p{font-size:15px;margin-block:9px}.panel-page .market-detail p{font-size:14px}.panel-page>.primary{min-height:44px;font-size:18px}
@media(max-height:480px){.spellbook-heading{min-height:45px}.spellbook-heading h2{font-size:21px}.spellbook-heading p{font-size:12px}.spellbook-heading>img{height:38px;width:38px}.spellbook-heading{margin-bottom:5px;padding-bottom:5px}.spellbook-footer{margin-top:5px;padding-block:5px;min-height:38px}.spellbook-footer .row-btn{min-height:32px}.spell-info-tabs button{min-height:29px}.spell-visual{float:left;width:65px;margin:0 9px 3px 0}.spell-row{min-height:0}.spell-row-icon{height:32px;width:32px}.spell-list{gap:5px}.spell-row{grid-template-columns:32px 18px minmax(0,1fr) auto 12px}.spell-row-copy>b{font-size:13px}.spell-detail .spell-description{font-size:12px}.spell-detail h3{font-size:20px}.spell-tags{clear:both}.spell-detail .primary{min-height:33px;font-size:13px}.spell-tips p{margin-top:4px}.panel-page h2{font-size:23px}.panel-page p,.panel-page>li{font-size:13px;line-height:1.3}.selection-spell-art .hero-stats{display:none}.selection-spell-art .hero-move-preview button{min-height:42px}.selection-spell-art .preview-spell-art{height:26px;width:26px}}

@media(max-width:599px){.hero-stats dd{font-size:clamp(10px,2.9vw,13px)}.class-growth{font-size:9px;line-height:1.2;margin-bottom:5px}}
@media(max-height:480px){.class-growth{font-size:9px;margin-bottom:4px}}
@media(max-width:599px),(max-height:480px){#hero-spell-note{gap:2px;padding:4px 6px;margin-top:5px}#hero-spell-note span{font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#hero-spell-note strong{font-size:11px}#hero-spell-note small{display:none}}

/* The spellbook header shows the hero's bust in a bronze ring. */
.spellbook-heading>img{height:auto;aspect-ratio:1;border:2px solid #7d6240;border-radius:50%;object-fit:cover;background:#14110e;box-shadow:0 0 0 1px #000,0 0 0 2px #c9a66b40,0 4px 12px #000a}
/* The Night Market is not cut into pages: the pager put a long relic detail and the item list on later pages, so a
   category opened on an empty page. The whole market scrolls as one panel instead. */
dialog.market #sheet-content{display:block;height:auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-y}
dialog.market .market-grid{max-height:none}
@media(max-width:649px){dialog.market .market-layout{display:flex;flex-direction:column;gap:8px}dialog.market .market-grid{order:-1;margin:0}}