/* Shared responsive layout. Loaded last on both entry points. */
:root{--ui-touch:44px;--ui-gap:10px;--ui-page:clamp(12px,2.2vw,30px);--ui-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
html{scroll-padding-block:12px 84px;-webkit-text-size-adjust:100%}
body.onlineApp,body.localApp{min-width:0;overflow-x:clip}
:is(.onlineApp,.localApp) :is(button,input,select,textarea,summary,a){-webkit-tap-highlight-color:#e0ad7d26}
:is(.onlineApp,.localApp) :is(button,.primary,.ghost){min-height:38px;padding:8px 12px;font-size:13px;line-height:1.3;touch-action:manipulation}
:is(.onlineApp,.localApp) :is(input,select,textarea){min-height:42px;min-width:0;font-size:16px;padding:9px 11px}
:is(.onlineApp,.localApp) :is(summary,button){cursor:pointer}
:is(.onlineApp,.localApp) summary{min-height:38px;padding:9px 10px;line-height:1.4}
:is(.onlineApp,.localApp) :is(button,a,input,select,summary):focus-visible{outline:2px solid #f3d4a5;outline-offset:3px}
:is(.onlineApp,.localApp) :is(.onlineMain,.appMain,.arsenalWorkspace,.arsenalLibrary,.heroSheet,.inventoryGrid,.runeInspector,.liveEncounter,.battleCenter,.handPanel){min-width:0}
:is(.onlineApp,.localApp) :is(.hidden,[hidden]){display:none!important}
.onlineApp:not(.duelMode):not(.championMode):not(.operationMode):not(.liveMode):not([data-page=ascent]) .onlineMain{width:100%;max-width:1560px;padding:0 var(--ui-page) 28px}
.onlineApp .onlineHeader{min-height:44px;padding:4px var(--ui-page);gap:8px}
.onlineApp .onlineHeader button{min-height:36px;padding:6px 9px;font-size:12px}
.onlineApp .onlineHeader>a span{font-size:10px;letter-spacing:1px}
.onlineApp .citadelMasthead{min-height:64px;padding:8px 0;gap:12px}
.onlineApp .citadelNav{gap:3px;flex-wrap:wrap}
.onlineApp .citadelNav button{min-height:40px;padding:8px 12px;font-size:14px}
.onlineApp .profileHeader{gap:7px}
.onlineApp .profileHeader #homeButton{min-height:38px;padding:7px 10px;font-size:12px}
.onlineApp .citadelSectionHeader{padding:14px 0}
.onlineApp .citadelSectionHeader>.eyebrow{margin-bottom:4px;font-size:10px}
.onlineApp .citadelSectionHeader h2{font-size:clamp(25px,2.8vw,34px)}
.onlineApp .citadelWelcome{display:grid!important;min-height:320px;height:auto!important;max-height:none!important;grid-template-columns:1.1fr 1fr}
.onlineApp .citadelCopy{padding:24px 0}
.onlineApp .citadelCopy h1{font-size:clamp(36px,4.8vw,60px);margin:12px 0 16px;letter-spacing:-1px}
.onlineApp .citadelCopy>p{margin-bottom:18px;line-height:1.5}
.onlineApp .citadelChampion{height:320px}
.onlineApp .citadelActions{gap:8px}
.onlineApp .citadelActions button{min-height:44px;padding:10px 16px;font-size:14px}
.onlineApp .citadelChampionLabel{bottom:12px}
.onlineApp .citadelEncounters{padding-top:14px}
.onlineApp .citadelEncounters>header{margin-bottom:10px}
.onlineApp .citadelDestinations{gap:12px}
.onlineApp .citadelDestination{min-height:128px;padding:16px}
.onlineApp .citadelDestination>span{display:none}
.onlineApp .homeSecondary{gap:8px;margin-block:14px}
.onlineApp .homeSecondary button{min-height:44px}
.onlineApp .playHeading{padding-block:8px;margin-bottom:12px}
.onlineApp .modeGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.onlineApp .modeTile{min-height:0}
.onlineApp .modeGrid>.modeTile,.onlineApp .modeGrid>.modeTile.modeFeatured{grid-column:auto!important;height:210px}
.onlineApp .modeTile>.modeArt{height:100%;min-height:0}
.onlineApp .modeLaunch{padding:0;min-height:0}
.onlineApp .modeArt{height:clamp(125px,14vw,185px);min-height:0}
.onlineApp .modeTileBody{padding:14px}
.onlineApp .modeTitle{font-size:clamp(19px,2vw,25px);margin-block:8px}
.onlineApp .modeTileFoot{font-size:12px;line-height:1.4}
.onlineApp :is(.modeEnter,.modeLaunch){min-height:44px;padding:10px 14px;font-size:14px}
.onlineApp .playFilters{gap:6px;flex-wrap:wrap}
.onlineApp .playFilters button{min-height:40px;padding:8px 14px;font-size:13px}
/* Collection and rune images remain proportional, without giant inventory tiles. */
:is(.onlineApp,.localApp) .arsenalWorkspace{grid-template-columns:minmax(280px,.95fr) minmax(0,1.2fr);gap:18px;align-items:start}
:is(.onlineApp,.localApp) .arsenalMaster .heroCollection{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:calc(100dvh - 208px);overflow:auto;padding:3px}
:is(.onlineApp,.localApp) .arsenalMaster .collectionCard{min-height:0;padding:9px;gap:5px;border-radius:12px}
:is(.onlineApp,.localApp) .arsenalMaster .collectionCard>img{height:128px;max-height:none;width:100%;object-fit:contain}
:is(.onlineApp,.localApp) .arsenalWorkspace .heroCollection .collectionCard{padding:9px!important;height:auto!important;min-height:0!important}
:is(.onlineApp,.localApp) .arsenalWorkspace .heroCollection .collectionCard>img.fullHeroArt{height:128px!important}
:is(.onlineApp,.localApp) .arsenalMaster .arsenalBalance{padding:6px 0 10px!important}
:is(.onlineApp,.localApp) .arsenalMaster .heroSearchBar{margin-bottom:8px;padding-bottom:3px}
:is(.onlineApp,.localApp) .arsenalMaster .collectionCard strong{font-size:13px;line-height:1.3}
:is(.onlineApp,.localApp) .arsenalMaster .collectionCard small{font-size:12px}
:is(.onlineApp,.localApp) .arsenalMaster .cardQuickStats{display:none}
:is(.onlineApp,.localApp) .arsenalWorkspace .heroSheet{padding:16px!important}
:is(.onlineApp,.localApp) .heroSheet .heroIdentity{grid-template-columns:38% minmax(0,1fr);gap:12px;margin-bottom:12px}
:is(.onlineApp,.localApp) .heroSheet .heroIdentity>img{height:190px}
:is(.onlineApp,.localApp) .heroSheet .heroIdentity h2{font-size:clamp(24px,2.5vw,32px);overflow-wrap:anywhere}
:is(.onlineApp,.localApp) .heroSheet .upgradeGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px}
:is(.onlineApp,.localApp) .heroSheet .upgradeCell{padding:8px 4px!important;min-width:0}
:is(.onlineApp,.localApp) .heroSheet .upgradeCell>span{font-size:12px}
:is(.onlineApp,.localApp) .heroSheet .upgradeCell>div{display:flex;gap:4px;justify-content:center}
:is(.onlineApp,.localApp) .heroSheet .upgradeCell button{min-width:38px;min-height:38px;height:auto;font-size:18px;padding:5px}
:is(.onlineApp,.localApp) .heroSheet .heroUpgradeFooter{padding-top:10px;margin:10px 0;gap:8px}
:is(.onlineApp,.localApp) .heroSheet .runeLoadout{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
:is(.onlineApp,.localApp) .equippedRuneArt{width:36px!important;height:36px!important;object-fit:contain}
:is(.onlineApp,.localApp) .ownedInventory .inventoryGrid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px}
:is(.onlineApp,.localApp) .ownedInventory .runePanel{display:flex;flex-direction:row;align-items:center;gap:9px;min-height:82px;padding:10px!important;text-align:left;min-width:0}
:is(.onlineApp,.localApp) .ownedInventory .runePanel img{width:42px!important;height:42px!important;flex:0 0 42px}
:is(.onlineApp,.localApp) .ownedInventory .runePanel>span{min-width:0}
:is(.onlineApp,.localApp) .ownedInventory .runePanel strong{display:block;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
:is(.onlineApp,.localApp) .ownedInventory .runePanel small{font-size:12px;line-height:1.35}
:is(.onlineApp,.localApp) .ownedInventory .runePanel small:first-of-type{display:none}
:is(.onlineApp,.localApp) .runeIdentity{gap:12px}
:is(.onlineApp,.localApp) .runeIdentity>img{width:76px!important;height:76px!important;object-fit:contain}
:is(.onlineApp,.localApp) .inventoryFilters{gap:8px}
:is(.onlineApp,.localApp) :is(.runeInspector,.heroSheet) :is(select,input){font-size:16px}
:is(.onlineApp,.localApp) :is(.hubForm,.entryActions,.upgradeActions){gap:8px}
:is(.onlineApp,.localApp) :is(dialog,.modalCard,.modeDialog){max-width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
:is(.onlineApp,.localApp) :is(.dialogX,.detailClose,.modeDialogClose){min-width:44px;min-height:44px;font-size:24px}
/* Combat sizing: preserve renderer aspect ratio; reclaim width lost to old vh caps. */
body.onlineApp:is(.liveMode,.championMode,.operationMode),body.onlineApp[data-page=ascent]{--combat-space:12px}
body.onlineApp:is(.liveMode,.championMode,.operationMode) .onlineMain,body.onlineApp[data-page=ascent] .onlineMain{padding:6px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));max-width:1580px;width:100%}
body.onlineApp:is(.liveMode,.championMode,.operationMode)>.onlineHeader{display:none}
body.onlineApp:has(#ascentPanel:not(.hidden) .expeditionArena)>.onlineHeader{display:none}
body.onlineApp:is(.liveMode,.championMode,.operationMode,.duelMode) .onlineMobileNav{display:none!important}
:is(#liveBattlePanel,#championArena,#ascentPanel,#squadPanel,#assaultPanel){width:100%;max-width:1560px;margin:0 auto;min-width:0}
#liveBattlePanel[data-mode=assault]{max-width:1560px}
.championMode #championArena.gladiatorView{max-width:1560px;padding:4px 0 12px}
:is(#liveBattlePanel,#championArena,#ascentPanel,#squadPanel,#assaultPanel) :is(button,.primary,.ghost){min-height:40px!important;height:auto!important;padding:8px 11px!important;font-size:13px!important;line-height:1.3!important}
:is(.liveHeading,.gladiatorHeading,.ascentTop,.squadHeading,.assaultHeading,.operationHeading){gap:8px;padding:7px 10px!important;min-height:46px!important;flex-wrap:wrap}
:is(.liveHeading,.gladiatorHeading,.ascentTop,.squadHeading,.assaultHeading,.operationHeading) h1{font-size:clamp(18px,2.5vw,24px)!important;line-height:1.2;margin:0!important}
:is(.liveHeading,.gladiatorHeading,.ascentTop,.squadHeading,.assaultHeading,.operationHeading) .eyebrow{display:none}
:is(.liveHeading,.gladiatorHeading)>div:last-child{gap:6px!important;flex-wrap:wrap}
#liveBattlePanel .liveEncounter,#liveBattlePanel[data-mode=assault] .liveEncounter{width:100%;max-width:100%;margin:0 auto}
#liveBattlePanel .liveEncounter:has(>.liveSidebar){display:grid;grid-template-columns:minmax(0,1fr)}
#liveBattlePanel .liveSidebar{display:contents}
#liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveScore{grid-row:1}
#liveBattlePanel .liveSidebar>.liveObjective{grid-row:2}
#liveBattlePanel .liveSidebar>.liveProgress{grid-row:3}
#liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveNotice{grid-row:4}
#liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveStage{grid-row:5}
#liveBattlePanel .liveSidebar>[data-live-actions]{grid-row:6}
#liveBattlePanel .liveSidebar>.liveToolbar{grid-row:7}
#liveBattlePanel .liveSidebar>.liveJournal{grid-row:8}
#liveBattlePanel .liveStage,#liveBattlePanel[data-mode=squad] .liveStage.squadStage,#liveBattlePanel[data-mode=siege] .liveStage,#liveBattlePanel[data-mode=survival] .liveStage,#squadPanel .squadStage,#assaultPanel .assaultStage{width:100%;min-width:0;max-width:calc((100dvh - 205px)*1.785714);aspect-ratio:1000/560;margin-inline:auto}
#liveBattlePanel .liveScore{padding:6px 10px;gap:8px}
#liveBattlePanel .liveScore b{font-size:12px;line-height:1.3;min-width:0}
#liveBattlePanel .liveObjective,#liveBattlePanel .liveNotice{font-size:13px;padding:6px 10px;min-height:0;line-height:1.4}
#liveBattlePanel :is([data-live-network],.liveNotice,.liveProgress,.liveObjective):empty{display:none}
#liveBattlePanel .liveActions{padding:8px;gap:8px}
#liveBattlePanel .squadTurnPrompt{font-size:14px;gap:8px}
#liveBattlePanel .squadTurnPrompt span{font-size:12px}
#liveBattlePanel .squadPickRow{grid-template-columns:68px repeat(5,minmax(0,1fr));gap:7px}
#liveBattlePanel .squadPickRow>small{font-size:12px}
#liveBattlePanel .squadPickRow button{min-height:52px!important;padding:6px!important;gap:5px}
#liveBattlePanel .squadPickRow button span{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#liveBattlePanel .squadPickRow button small{font-size:11px}
#liveBattlePanel .squadAttackChoices button{min-height:44px!important;min-width:0;flex:1}
#liveBattlePanel .campRecruits button{min-height:52px!important}
#liveBattlePanel .campRecruits>small,#liveBattlePanel .campUpgrades>small{font-size:12px}
#liveBattlePanel .liveJournal{margin:6px 8px;padding:0}
#liveBattlePanel .liveJournal summary{font-size:13px;min-height:40px}
#liveBattlePanel .siegeOrders>strong{font-size:14px}
#liveBattlePanel .siegeOrders>small{font-size:12px}
#liveBattlePanel .liveProgress{padding:6px 8px;gap:6px}
#liveBattlePanel .missionCheckpoint b{font-size:12px}
#liveBattlePanel .missionCheckpoint small{font-size:11px}
#liveBattlePanel .waveCheckpoint{width:28px;height:28px;font-size:13px}
#liveBattlePanel .liveToolbar small{display:none}
#liveBattlePanel .assaultDock{padding:8px}
#liveBattlePanel .assaultDock .assaultHandCard,#assaultPanel .assaultDock .assaultHandCard{min-height:72px!important;padding:6px!important;grid-template-columns:38px minmax(0,1fr);grid-template-rows:1fr auto;text-align:left}
.assaultHandCard img{width:36px!important;height:52px!important;grid-row:1/3}
.assaultHandCard strong{font-size:13px}
.assaultHandCard small{font-size:12px!important}
#liveBattlePanel .assaultTouchLanes button,#assaultPanel .assaultTouchLanes button{min-width:44px;min-height:40px!important;font-size:13px!important;padding:7px 10px!important}
.assaultDockFoot{font-size:12px;gap:6px;flex-wrap:wrap}
.assaultResource{gap:8px;font-size:12px}
.assaultResource span{font-size:12px}
#championArena.gladiatorView .gladiatorHud{gap:12px;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);margin:6px 0;align-items:center}
#championArena.gladiatorView .gladiatorHud>.gladiatorVitals{grid-column:1;grid-row:1;min-width:0}
#championArena.gladiatorView .gladiatorHud>.gladiatorVitals:nth-child(2){grid-column:3;grid-row:1}
#championArena.gladiatorView .gladiatorTimer{grid-column:2;grid-row:1;position:static;transform:none;inset:auto;min-width:0}
#championArena.gladiatorView .gladiatorVitals{padding:6px 8px}
#championArena.gladiatorView .gladiatorVitals strong{font-size:14px}
#championArena.gladiatorView .gladiatorTimer b{font-size:22px}
#championArena.gladiatorView .gladiatorStage{height:auto;min-height:0;aspect-ratio:1376/768;width:100%;max-width:calc((100dvh - 260px)*1.791667);margin-inline:auto}
#championArena.gladiatorView .gladiatorControls{grid-template-areas:none;grid-template-columns:minmax(240px,.8fr) minmax(0,2fr) 130px;gap:10px;padding:10px;align-items:center}
#championArena.gladiatorView .gladiatorMovement{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;grid-area:auto;min-width:0;width:100%}
#championArena.gladiatorView .gladiatorMovement small{grid-column:1/-1;white-space:normal;margin:0;font-size:11px;line-height:1.35}
#championArena.gladiatorView .gladiatorMovement button{min-width:0;width:100%;min-height:44px!important;white-space:normal;overflow-wrap:break-word}
#championArena.gladiatorView .gladiatorActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;grid-area:auto}
#championArena.gladiatorView .gladiatorActions .battleCommand{min-height:58px!important;padding:7px!important}
#championArena.gladiatorView .gladiatorStyle{grid-area:auto;min-height:44px!important;max-width:none;width:100%}
#championArena.gladiatorView .autoCombat{grid-area:auto;grid-column:1/-1;gap:8px;padding:0;flex-wrap:wrap}
#championArena.gladiatorView .autoCombat button{min-height:40px!important}
#ascentPanel .ascentTop{margin:0 0 6px}
#ascentPanel .expeditionCamp{gap:12px;grid-template-columns:minmax(230px,.75fr) minmax(0,1.4fr)}
#ascentPanel .expeditionJourney{min-height:340px}
#ascentPanel .expeditionPreparation{padding:14px}
#ascentPanel .expeditionBattleHeading{padding:6px 10px;min-height:0}
#ascentPanel .expeditionBattleHeading h2{font-size:20px;margin:3px 0}
#ascentPanel .expeditionArena.groundedBattleStage{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1000/560;background-color:#182325;background-image:linear-gradient(#0b161b25,#0d171e20),var(--encounter-image);background-repeat:no-repeat;background-size:100% 100%,var(--scene-width,100%) var(--scene-height,100%);background-position:center,var(--scene-left,50%) var(--scene-top,50%)}
#ascentPanel .expeditionCommand{grid-template-columns:150px minmax(0,1fr);gap:8px;padding:8px!important;margin-top:6px}
#ascentPanel .expeditionActionButtons{gap:8px}
#ascentPanel .battleCommand{min-height:58px!important;padding:7px!important}
#ascentPanel .battleFeed{font-size:13px;padding:7px 10px;min-height:0}
#ascentPanel .expeditionUtilities{gap:8px;margin:6px 0;flex-wrap:wrap}
#ascentPanel .expeditionUtilities small{display:none}
/* Descriptions stay available in an explicit disclosure and accessible button text. */
.compactCommands .battleCardCopy small{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important}
.compactCommands .battleCardCopy b{font-size:14px!important;line-height:1.25}
.compactCommands .battleCardCost{font-size:12px!important;line-height:1.25}
.commandHelp{grid-column:1/-1;margin:0!important;padding:0!important;min-width:0;border:0!important;background:transparent!important;font-size:13px}
.commandHelp>summary{min-height:38px;padding:8px 10px;font-size:13px;color:#dfc79e}
.commandHelp dl{margin:0;padding:8px 12px;max-width:680px;background:#161b1be8;border-radius:8px}
.commandHelp dt{font-weight:650;margin-top:7px}
.commandHelp dd{margin:3px 0 8px;color:#cbc2b5;font:13px/1.5 system-ui}
.autoCombat .commandHelp{flex:0 1 auto;position:relative}
.autoCombat .commandHelp[open]{flex-basis:100%}
.battleExpand{white-space:nowrap}
:is(.onlineApp,.localApp) .accessibilityTrigger{position:static!important;inset:auto!important;flex:0 0 44px;min-width:44px;max-width:44px;min-height:44px!important;font-size:16px!important;padding:7px!important;box-shadow:none;border-radius:9px}
/* Territorial board: three visible fields, no tabs or horizontal carousel. */
.duelMode #gameView.active,.onlineApp.duelMode #arena{height:auto!important;min-height:0!important;grid-template-rows:none!important;grid-auto-rows:auto!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:8px!important;overflow:visible;max-width:100%;min-width:0}
.onlineApp.duelMode .onlineMain{padding:6px 10px 16px;max-width:1580px;width:100%}
.duelMode :is(.duelHud,.gameMeta,.duelDock,.mapsBoard,.handPanel,.legendDock,.actionDock){min-width:0;max-width:100%;box-sizing:border-box}
.duelMode .duelHud{height:auto!important;min-height:48px!important;gap:12px}
.duelMode .gameMeta{display:flex;flex-wrap:wrap;align-items:center;height:auto!important;min-height:38px;gap:6px 12px;margin:0!important}
.duelMode .gameMeta #roundStatus{flex:1 1 260px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.onlineApp.duelMode #arena .roundReport{position:relative;inset:auto;display:block!important;grid-column:1/-1;min-width:0;width:100%;max-width:100%;padding:0;margin:0;z-index:4}
.onlineApp.duelMode #arena .roundReport summary{min-height:36px;padding:7px 10px;font-size:12px}
.onlineApp.duelMode #arena .roundReport[open]{max-height:none;overflow:visible}
.duelMode :is(#arena,#gameView) #battleHighlights:not([hidden]){position:relative!important;inset:auto!important;display:block!important;grid-column:1/-1;min-width:0;width:100%;max-width:100%;margin:0;z-index:4}
.duelMode #battleHighlights .roundSummary{position:relative;inset:auto;margin:0;max-width:100%;min-width:0}
.duelMode #battleHighlights .roundSummary>summary{min-height:32px;padding:6px 10px;font-size:12px}
.duelMode #battleHighlights .roundSummary[open]{max-height:none;overflow:visible;box-shadow:none}
.duelMode #battleHighlights .roundSummary[open] .combatHighlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;min-width:0;overflow:visible}
.duelMode .mapsBoard .scenicBackdrop{inset:0!important;overflow:hidden}
.duelMode .mapsBoard.threeTerritories{height:auto!important;min-height:400px!important;grid-auto-rows:auto!important;grid-template-rows:none!important;gap:10px!important}
.duelMode .mapsBoard.threeTerritories .mapCard{height:auto!important;min-height:400px!important;grid-template-rows:76px minmax(142px,1fr) minmax(142px,1fr)!important}
.duelMode .threeTerritories .territoryCore{height:76px!important}
.duelMode .threeTerritories .laneSide{min-height:0!important;padding:8px!important;overflow:visible!important}
.duelMode .threeTerritories .laneUnits{height:auto!important;min-height:118px!important;grid-template-rows:repeat(var(--territory-rows,1),minmax(118px,1fr))!important;grid-auto-rows:118px!important;overflow:visible!important}
.duelMode .threeTerritories .miniUnit{min-height:118px!important;max-width:180px!important;overflow:visible!important}
.duelMode .threeTerritories .unitOverlay{bottom:14px!important;padding:3px 4px!important;min-height:31px;overflow:visible!important}
.duelMode .threeTerritories .unitOverlay strong{font-size:11px!important;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15!important;overflow-wrap:anywhere}
.duelMode .threeTerritories .unitOverlay span,.duelMode .threeTerritories .unitOverlay b{font-size:10px!important;line-height:1.15}
.duelMode .threeTerritories .unitHealth{height:13px!important}
.duelMode .threeTerritories .unitHealth small{font-size:10px!important;line-height:13px}
.duelMode .threeTerritories .miniUnit .unitDetail img,.duelMode .threeTerritories .miniUnit.cutoutUnit .unitDetail img{padding-bottom:46px!important}
.duelMode .threeTerritories .territoryPlayback{position:relative!important;inset:auto;grid-column:1/-1!important}
.duelMode .mapsBoard.threeTerritories:has(.territoryPlayback){padding-bottom:0!important}
.duelMode .threeTerritories .territoryPlayback .battleFeed{white-space:normal;overflow-wrap:anywhere}
.duelMode .duelDock{padding:8px!important;gap:8px!important;grid-template-columns:minmax(0,1fr) 100px 170px!important;max-height:none!important;align-items:start!important}
.duelMode .onlineRune img{width:36px!important;height:36px!important}
.duelMode .onlineRune small{display:none}
.duelMode .actionDock>button{min-height:44px!important;font-size:13px!important;padding:8px!important}
.duelMode .dockLabel small{font-size:12px}
.localApp #homeView .heroBanner{min-height:330px}
.localApp #homeView .heroCopy{padding:24px 0}
.localApp #homeView .heroCopy h1{font-size:clamp(34px,4.5vw,56px);margin:12px 0}
.localApp #homeView .heroArtwork{max-height:340px}
.localApp .setupPanel{padding:16px}
.localApp .setupPanel .primary.large{min-height:44px;font-size:14px}
.localApp .appFooter{padding-block:10px;font-size:11px}
@media(min-width:801px) and (min-height:601px){
 .duelMode #gameView.active,.onlineApp.duelMode #arena{display:flex!important;flex-direction:column!important;height:calc(100dvh - 68px)!important;min-height:0!important;max-height:none;gap:7px!important;align-content:normal;overflow-x:clip;overflow-y:visible}
 .duelMode :is(#arena,#gameView)>:not(.mapsBoard){flex:0 0 auto;min-width:0;max-width:100%;margin-block:0}
 .duelMode :is(#arena,#gameView):has(.roundSummary[open],.roundReport[open]){height:auto!important;min-height:calc(100dvh - 68px)!important}
 .duelMode .mapsBoard.threeTerritories{flex:1 1 0!important;height:100%!important;min-height:0!important;max-height:560px;grid-template-rows:minmax(0,1fr)!important;grid-auto-rows:auto!important;align-items:stretch;overflow:hidden!important}
 .duelMode :is(#arena,#gameView):has(.roundSummary[open],.roundReport[open]) .mapsBoard.threeTerritories{flex:0 0 390px!important;height:390px!important}
 .duelMode .mapsBoard.threeTerritories .mapCard{height:100%!important;min-height:0!important;max-height:none;grid-template-rows:72px minmax(0,1fr) minmax(0,1fr)!important}
 .duelMode .threeTerritories .territoryCore{height:72px!important}
 .duelMode .threeTerritories .laneSide{min-height:0!important;padding:6px 8px!important;gap:4px!important;overflow:visible!important}
 .duelMode .threeTerritories .laneUnits{height:100%!important;min-height:0!important;max-height:none!important;grid-template-rows:repeat(var(--territory-rows,1),minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;align-items:end!important;overflow:visible!important}
 .duelMode .threeTerritories .miniUnit{height:100%!important;min-height:0!important;max-height:155px!important;align-self:end!important;margin:0!important;overflow:visible!important}
 .duelMode .threeTerritories .laneSide h4{flex:0 0 16px;min-height:16px;max-height:16px}
 .duelMode .threeTerritories .dropHint{min-height:20px!important;padding:3px 5px!important;line-height:1.2!important;flex:0 0 20px}
 .duelMode .duelDock{flex:0 0 auto!important;min-height:0!important;max-height:none!important}
 .duelMode .handPanel .hand{padding:2px 0!important}
 .duelMode #hand .handCard,.onlineApp.duelMode #hand[data-count="5"] .handCard{height:84px!important;min-height:0!important}
 .duelMode #hand .handCard img{height:62px!important}
}
/* Battle controls share one readable hierarchy: selected order, objective, then help. */
#liveBattlePanel :is(.missionOrders,.escortOrders){display:grid;gap:12px;width:100%;min-width:0}
#liveBattlePanel .missionOrderGroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0;padding-bottom:10px;border-bottom:1px solid #a58b5d30}
#liveBattlePanel .missionOrderGroup>strong{grid-column:1/-1;font-size:13px;color:#dfc89e;font-weight:600}
#liveBattlePanel .missionOrderGroup button{min-width:0;min-height:44px!important;line-height:1.35!important}
#liveBattlePanel .missionOrderHint{margin:0;padding:9px 10px;border-left:3px solid #d4b473;border-radius:4px;background:#c49f5010;color:#eee0c5;font:13px/1.45 system-ui,sans-serif}
#liveBattlePanel :is(.missionOrders,.escortOrders,.siegeOrders) button[aria-pressed=true]{background:#425d4c;color:#fff2cd;border:2px solid #e4c47d;box-shadow:inset 0 0 0 1px #26372a}
#liveBattlePanel :is(.campRecruits,.campUpgrades){display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
#liveBattlePanel :is(.campRecruits,.campUpgrades)>small{flex-basis:100%;font-size:13px}
#liveBattlePanel :is(.campRecruits,.campUpgrades) button{flex:1 1 115px;display:flex;align-items:center;gap:7px;min-width:0;min-height:60px!important;text-align:left}
#liveBattlePanel .campRecruits button img{width:38px;height:48px;object-fit:contain;flex:0 0 38px}
#liveBattlePanel .campRecruits button span{min-width:0;line-height:1.35}
#ascentPanel .ascentFighter[data-selected=true]>strong{background:#614728ed!important;color:#fff0c9;border:1px solid #f0c26f}
#ascentPanel .ascentFighter[data-selected=true] .expeditionRing{border-color:#ffe0a0!important;box-shadow:0 0 12px #e6bd5266}
/* Wide displays keep commands beside the battlefield, within the same viewport. */
@media(min-width:1100px) and (min-height:601px){
 #liveBattlePanel .liveEncounter:has(>.liveSidebar){display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,320px);grid-template-rows:auto minmax(0,1fr) auto;column-gap:10px;align-items:start;overflow:visible;background:#141c1e}
 #liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveScore{grid-column:1;grid-row:1;align-self:start;min-height:34px}
 #liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveStage{grid-column:1;grid-row:2;max-width:calc((100dvh - 170px)*1.785714);width:100%;margin:auto;align-self:start}
 #liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveNotice{grid-column:1;grid-row:3;align-self:start;margin:0}
 #liveBattlePanel .liveEncounter>.liveSidebar{display:flex;flex-direction:column;gap:10px;grid-column:2;grid-row:1/4;min-width:0;max-height:calc(100dvh - 105px);overflow-y:auto;padding:10px;background:#1b2221;border-left:1px solid #a3895833;border-radius:0 8px 8px 0;overscroll-behavior:contain;scrollbar-width:thin}
 #liveBattlePanel .liveSidebar>*{flex-shrink:0;min-width:0;max-width:100%;width:100%;margin:0}
 #liveBattlePanel .liveSidebar>.liveObjective{order:0;font-size:14px;line-height:1.5;padding:3px 0 9px}
 #liveBattlePanel .liveSidebar>.liveProgress{order:1;flex-wrap:wrap;padding:0;gap:6px}
 #liveBattlePanel .liveSidebar>[data-live-actions]{order:2;padding:0;display:block}
 #liveBattlePanel .liveSidebar>.liveToolbar{order:3;padding:8px 0}
 #liveBattlePanel .liveSidebar>.liveJournal{order:4}
 #liveBattlePanel .liveSidebar .missionCheckpoint{max-width:none;flex:1 1 100%;padding:7px 9px}
 #liveBattlePanel .liveSidebar .squadTeamHealth{padding:0;min-width:0;font-size:12px}
 #liveBattlePanel .liveSidebar .squadTurnControls{gap:9px}
 #liveBattlePanel .liveSidebar .squadTurnPrompt{display:grid;gap:5px;border-left:3px solid #d5b470;padding:8px 9px;background:#e6b9660c}
 #liveBattlePanel .liveSidebar .squadTurnPrompt strong{font-size:16px}
 #liveBattlePanel .liveSidebar .squadTurnPrompt span{font-size:13px;line-height:1.45}
 #liveBattlePanel .liveSidebar .squadPickRow{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch}
 #liveBattlePanel .liveSidebar .squadPickRow>small{grid-column:1/-1;font-size:12px}
 #liveBattlePanel .liveSidebar .squadPickRow button{min-height:48px!important;min-width:0;padding:5px!important;gap:4px}
 #liveBattlePanel .liveSidebar .squadPickRow button span{white-space:normal;font-size:12px;line-height:1.2;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
 #liveBattlePanel .liveSidebar .squadPickRow button small{font-size:11px;margin-top:3px}
 #liveBattlePanel .liveSidebar .squadPickRow img{height:36px;width:26px;flex:0 0 26px;object-fit:contain}
 #liveBattlePanel .liveSidebar .squadAttackChoices{display:grid;grid-template-columns:1fr;gap:7px}
 #liveBattlePanel .liveSidebar .squadAttackChoices button{min-height:44px!important;font-size:14px!important}
 #liveBattlePanel .liveSidebar .assaultDock{padding:8px;border:1px solid #a8884f44;border-radius:8px}
 #liveBattlePanel .liveSidebar .assaultHandRow{grid-template-columns:minmax(0,1fr) 58px;gap:6px}
 #liveBattlePanel .liveSidebar .assaultHandCards{flex-direction:column;gap:7px}
 #liveBattlePanel .liveSidebar .assaultDock .assaultHandCard{min-height:74px!important;grid-template-columns:40px minmax(0,1fr);font-size:13px!important;padding:7px!important}
 #liveBattlePanel .liveSidebar .assaultHandCard strong{font-size:13px;white-space:normal;padding-right:9px}
 #liveBattlePanel .liveSidebar .assaultDock .assaultPowerButton{min-height:100px!important;align-self:stretch}
 #liveBattlePanel .liveSidebar .assaultPowerButton small{white-space:normal;text-align:center;font-size:12px!important}
 #liveBattlePanel .liveSidebar .assaultResource{flex-wrap:wrap;gap:6px}
 #liveBattlePanel .liveSidebar .assaultResource progress{flex:1;min-width:100px}
 #liveBattlePanel .liveSidebar .assaultResource span{flex-basis:100%;text-align:left;font-size:12px}
 #liveBattlePanel .liveSidebar .assaultDockFoot{display:grid;gap:8px;justify-items:start;font-size:12px}
 #liveBattlePanel .liveSidebar .assaultTouchLanes{width:100%;gap:5px}
 #liveBattlePanel .liveSidebar .assaultTouchLanes button{flex:1;font-size:13px!important;min-height:44px!important}
 #liveBattlePanel[data-phase=finished] .liveEncounter:has(>.liveSidebar){display:block}
 #liveBattlePanel[data-phase=finished] .liveSidebar{display:none}
 #championArena.gladiatorView .gladiatorStage{max-width:calc((100dvh - 285px)*1.791667);margin-inline:auto}
 #championArena.gladiatorView .gladiatorControls{max-width:1240px;margin:8px auto 0}
 #ascentPanel:has(.expeditionCommand){display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:8px 12px;align-items:start}
 #ascentPanel:has(.expeditionCommand)>.ascentTop{grid-column:1/-1;grid-row:1}
 #ascentPanel:has(.expeditionCommand)>.ascentNotice{grid-column:1/-1}
 #ascentPanel:has(.expeditionCommand)>.opponentIntent{grid-column:1;grid-row:2;margin:0}
 #ascentPanel:has(.expeditionCommand)>.battleLayout{grid-column:1;grid-row:3/6;min-width:0}
 #ascentPanel:has(.expeditionCommand)>.expeditionCommand{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;align-items:stretch;margin:0;gap:12px;padding:12px!important;min-width:0}
 #ascentPanel .expeditionCommand>div:first-child{width:auto;min-width:0}
 #ascentPanel .expeditionCommand h2{font-size:24px;margin:4px 0}
 #ascentPanel .expeditionCommand p{font-size:14px;line-height:1.5;margin:6px 0}
 #ascentPanel .expeditionActionButtons{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:9px}
 #ascentPanel .expeditionActionButtons .battleCommand{min-height:65px!important}
 #ascentPanel .expeditionCommand .commandHelp{min-width:0}
 #ascentPanel:has(.expeditionCommand)>.expeditionUtilities{grid-column:2;grid-row:4;display:grid;align-items:stretch;margin:0;gap:10px}
 #ascentPanel .expeditionUtilities .autoCombat{display:flex;flex-wrap:wrap;justify-content:flex-start;min-width:0}
 #ascentPanel .expeditionUtilities .autoCombat small{font-size:12px;max-width:100%;white-space:normal}
 #ascentPanel .expeditionArena.groundedBattleStage{max-width:calc((100dvh - 225px)*1.6);margin-inline:auto}
 #ascentPanel:has(.expeditionCommand)>:is(.expeditionHelp,.expeditionInspect,.expeditionRecover){grid-column:1/-1}
}
/* Tablet / portrait: single purpose screens rather than compressed two-pane editors. */
@media(max-width:900px){
 .onlineApp .profileHeader strong{max-width:145px}
 .onlineApp .profileHeader progress{width:110px}
 .onlineApp .citadelNav button{padding-inline:9px}
 .onlineApp .modeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 :is(.onlineApp,.localApp) .arsenalWorkspace{grid-template-columns:minmax(230px,.9fr) minmax(0,1.2fr);gap:12px}
 :is(.onlineApp,.localApp) .arsenalMaster .heroCollection{grid-template-columns:repeat(2,minmax(0,1fr))}
 :is(.onlineApp,.localApp) .heroSheet .runeLoadout{grid-template-columns:1fr}
 #championArena.gladiatorView .gladiatorControls{grid-template-columns:1fr 110px}
 #championArena.gladiatorView .gladiatorActions{grid-column:1/-1;grid-row:1}
 #championArena.gladiatorView .gladiatorMovement{grid-column:1;grid-row:2}
 #championArena.gladiatorView .gladiatorStyle{grid-column:2;grid-row:2}
}
@media(max-width:700px){
 :root{--ui-page:12px}
 :is(.onlineApp,.localApp) :is(button,.primary,.ghost){min-height:44px;padding:10px 12px;font-size:14px}
 :is(.onlineApp,.localApp) summary{min-height:44px;padding:11px 10px;font-size:14px}
 .onlineApp:not(.duelMode):not(.championMode):not(.operationMode):not(.liveMode):not([data-page=ascent]) .onlineMain{padding:0 12px var(--ui-bottom)}
 .onlineApp .onlineHeader{min-height:44px;gap:6px;padding:3px 10px}
 .onlineApp .onlineHeader button{min-height:40px;font-size:12px;padding:7px}
 .onlineApp .onlineHeader>a span{display:none}
 .onlineApp #connection{font-size:11px;margin-left:auto}
 .onlineApp .citadelMasthead{padding:9px 0;min-height:58px;flex-wrap:nowrap}
 .onlineApp .citadelMasthead .citadelNav{display:none}
 .onlineApp .profileHeader{width:100%;flex:1;gap:8px}
 .onlineApp .profileHeader>div{flex:1;min-width:0}
 .onlineApp .profileHeader strong{max-width:none;font-size:13px}
 .onlineApp .profileHeader progress{width:min(100%,180px)}
 .onlineApp .profileHeader #logoutAccount{min-height:44px;font-size:12px}
 .onlineApp .profileHeader #homeButton{display:none}
 .onlineApp .citadelWelcome{min-height:250px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);overflow:hidden}
 .onlineApp .citadelCopy{grid-column:1;grid-row:1;width:auto!important;max-width:none!important;padding:14px 0}
 .onlineApp .citadelCopy h1{font-size:clamp(30px,8vw,42px);letter-spacing:-1px;margin:10px 0 14px}
 .onlineApp .citadelCopy>.eyebrow{font-size:9px;letter-spacing:1px}
 .onlineApp .citadelCopy>p{display:none}
 .onlineApp .citadelActions{display:grid;gap:7px}
 .onlineApp .citadelActions button{width:100%;padding:10px;font-size:13px;min-height:44px}
 .onlineApp .citadelChampion{grid-column:2;grid-row:1;height:250px!important;min-height:0!important;width:100%!important;align-self:end;overflow:visible;position:relative!important;inset:auto!important}
 .onlineApp .citadelChampion .citadelLeader{width:155%;left:-30%;height:100%}
 .onlineApp .citadelChampion .citadelCompanion{display:none}
 .onlineApp .citadelChampionLabel{display:none}
 .onlineApp .citadelDestinations{grid-template-columns:1fr;gap:8px}
 .onlineApp .citadelDestination{min-height:92px;padding:12px 16px;background-position:center 40%}
 .onlineApp .citadelDestination strong{font-size:21px}
 .onlineApp .citadelDestination small{font-size:12px}
 .onlineApp .citadelEncounters>header h2{font-size:22px}
 .onlineApp .homeSecondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .onlineApp .onlineMobileNav{display:flex;position:fixed;inset:auto 8px max(6px,env(safe-area-inset-bottom));z-index:100;padding:4px;border-radius:16px;gap:0}
 .onlineApp .onlineMobileNav button{flex:1;min-width:0;min-height:52px;padding:5px 2px;font-size:11px;gap:3px}
 .onlineApp .onlineMobileNav button>span{font-size:20px}
 .onlineApp.accessGate .onlineMobileNav,.onlineApp[data-page=ascent] .onlineMobileNav{display:none!important}
 .onlineApp .playFilters{display:flex;flex-wrap:nowrap;overflow:auto;padding-bottom:4px;scrollbar-width:thin}
 .onlineApp .playFilters button{flex:0 0 auto;min-height:44px;font-size:14px}
 .onlineApp .modeGrid{grid-template-columns:1fr;gap:12px}
 .onlineApp .modeGrid>.modeTile,.onlineApp .modeGrid>.modeTile.modeFeatured{display:grid!important;grid-template-columns:112px minmax(0,1fr);align-items:stretch;height:auto;min-height:155px}
 .onlineApp .modeTile>.modeArt{position:relative;inset:auto;grid-column:1;grid-row:1;z-index:0;width:100%;height:100%;min-height:155px;border-radius:12px 0 0 12px;overflow:hidden}
 .onlineApp .modeTile>.modeTileBody{position:relative;inset:auto;grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:12px;min-width:0}
 .onlineApp .modeTile>.modePill{font-size:10px;left:7px;top:8px;max-width:96px;padding:5px 7px}
 .onlineApp .modeTile .modeArt .modeFigure:nth-child(2){left:-30%;right:auto;bottom:0;width:160%;height:105%;transform:none}
 .onlineApp .modeTile .modeArt .modeFigure:nth-child(n+3){display:none}
 .onlineApp .modeTile .modeEnter{display:grid;place-items:center;min-width:36px;width:36px;min-height:36px;padding:0;flex:0 0 36px;font-size:22px}
 .onlineApp .modeTitle{font-size:21px}
 .onlineApp .modeTileFoot{font-size:12px}
 .onlineApp .modeEnter{width:100%;min-height:44px;font-size:14px}
 :is(.onlineApp,.localApp) .arsenalWorkspace{display:block}
 :is(.onlineApp,.localApp) .arsenalMaster .heroCollection{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;gap:7px}
 :is(.onlineApp,.localApp) .arsenalMaster .collectionCard{padding:7px}
 :is(.onlineApp,.localApp) .arsenalMaster .collectionCard>img{height:105px}
 :is(.onlineApp,.localApp) .arsenalWorkspace .heroCollection .collectionCard{padding:7px!important}
 :is(.onlineApp,.localApp) .arsenalWorkspace .heroCollection .collectionCard>img.fullHeroArt{height:105px!important}
 :is(.onlineApp,.localApp) .arsenalMaster .collectionCard>strong{margin-top:4px}
 :is(.onlineApp,.localApp) .arsenalWorkspace .heroSheet{padding:10px!important}
 :is(.onlineApp,.localApp) .heroSheet .heroIdentity{grid-template-columns:36% minmax(0,1fr);gap:10px;margin:8px 0 14px}
 :is(.onlineApp,.localApp) .heroSheet .heroIdentity>img{height:155px}
 :is(.onlineApp,.localApp) .heroSheet .heroIdentity h2{font-size:26px}
 :is(.onlineApp,.localApp) .heroSheet .upgradeCell button{min-width:44px;min-height:44px;height:44px}
 :is(.onlineApp,.localApp) .heroSheet .upgradeGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 :is(.onlineApp,.localApp) .arsenalWorkspace .heroSheet .heroStatsEdit .upgradeGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 :is(.onlineApp,.localApp) .arsenalWorkspace .heroSheet .upgradeCell button{min-width:44px!important;min-height:44px!important;height:44px!important}
 :is(.onlineApp,.localApp) .heroSheet .heroLifeCell{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 12px!important}
 .onlineApp .citadelSectionHeader>.eyebrow{display:none}
 .onlineApp .citadelSectionHeader{padding:10px 0 8px}
 :is(.onlineApp,.localApp) .arsenalMaster[data-inspect=false] .heroSheet,:is(.onlineApp,.localApp) .arsenalMaster:not([data-inspect]) .heroSheet{display:none!important}
 :is(.onlineApp,.localApp) .arsenalMaster[data-inspect=true] .arsenalLibrary{display:none!important}
 :is(.onlineApp,.localApp) .mobileInspectorBack{display:inline-flex;align-items:center;min-height:44px}
 :is(.onlineApp,.localApp) .inventoryFilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 :is(.onlineApp,.localApp) .inventoryFilters>input{grid-column:1/-1}
 :is(.onlineApp,.localApp) .ownedInventory .inventoryGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 :is(.onlineApp,.localApp) .ownedInventory .runePanel{min-height:84px;gap:7px}
 :is(.onlineApp,.localApp) .ownedInventory .runePanel img{width:36px!important;height:36px!important;flex-basis:36px}
 :is(.onlineApp,.localApp) .ownedInventory .runePanel strong{font-size:13px}
 :is(.onlineApp,.localApp) .ownedInventory:not([data-inspect=true]) .runeInspector{display:none!important}
 :is(.onlineApp,.localApp) .ownedInventory[data-inspect=true]>.inventoryGrid,:is(.onlineApp,.localApp) .ownedInventory[data-inspect=true]>.inventoryFilters{display:none!important}
 :is(.onlineApp,.localApp) :is(.runeEquipSelectors,.entryActions,.hubForm){grid-template-columns:1fr;flex-wrap:wrap}
 :is(.onlineApp,.localApp) :is(.runeEquipSelectors,.entryActions,.hubForm)>*{min-width:0;max-width:100%}
 :is(#liveBattlePanel,#championArena,#ascentPanel,#squadPanel,#assaultPanel) :is(button,.primary,.ghost){min-height:44px!important;font-size:14px!important;padding:9px 10px!important}
 :is(.liveHeading,.gladiatorHeading,.ascentTop){padding:6px 8px!important;gap:6px}
 :is(.liveHeading,.gladiatorHeading,.ascentTop) h1{font-size:18px!important}
 #liveBattlePanel .liveHeading>div:last-child{width:100%;display:flex;justify-content:flex-end}
 #liveBattlePanel .liveHeading>div:last-child button{min-height:40px!important;font-size:12px!important;padding:7px 9px!important}
 #liveBattlePanel .liveStage,#liveBattlePanel[data-mode=squad] .liveStage.squadStage,#liveBattlePanel[data-mode=siege] .liveStage,#liveBattlePanel[data-mode=survival] .liveStage,#squadPanel .squadStage,#assaultPanel .assaultStage{max-width:100%;width:100%;min-width:0}
 #liveBattlePanel .liveScore b{font-size:11px}
 #liveBattlePanel .squadPickRow{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 #liveBattlePanel .squadPickRow>small{grid-column:1/-1}
 #liveBattlePanel .squadPickRow button{flex-direction:column;text-align:center;min-height:66px!important;padding:5px 3px!important}
 #liveBattlePanel .squadPickRow button span{font-size:12px;line-height:1.25}
 #liveBattlePanel .squadPickRow button small{font-size:11px}
 #liveBattlePanel .squadTurnPrompt{align-items:flex-start;flex-direction:column}
 #liveBattlePanel .liveActions[data-live-actions]{display:block}
 #liveBattlePanel .assaultDock .assaultHandCard,#assaultPanel .assaultDock .assaultHandCard{grid-template-columns:1fr;grid-template-rows:38px auto auto;justify-items:center;text-align:center;min-height:86px!important;padding:5px!important}
 .assaultHandCard img{grid-row:1;width:30px!important;height:38px!important}
 .assaultHandCard strong{font-size:12px;padding-right:0;max-width:100%}
 .assaultHandCard small{font-size:11px!important}
 .assaultHandRow{grid-template-columns:minmax(0,1fr) 56px;gap:6px}
 #liveBattlePanel .assaultDock .assaultPowerButton{min-height:86px!important;padding:5px!important}
 #liveBattlePanel .assaultTouchLanes button,#assaultPanel .assaultTouchLanes button{min-height:44px!important;min-width:44px}
 #championArena.gladiatorView .gladiatorStage{max-width:100%;min-width:0;width:100%;height:auto;aspect-ratio:1376/768}
 #championArena.gladiatorView .gladiatorHud{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:6px}
 #championArena.gladiatorView .gladiatorVitals strong{font-size:13px}
 #championArena.gladiatorView .gladiatorControls{padding:7px;gap:7px}
 #championArena.gladiatorView .gladiatorActions{gap:6px}
 #championArena.gladiatorView .gladiatorActions .battleCommand{min-height:62px!important;padding:6px!important;display:flex!important;flex-direction:column;justify-content:center}
 #championArena.gladiatorView .gladiatorActions .commandSymbol{display:none}
 #championArena.gladiatorView .gladiatorMovement small{display:none}
 .compactCommands .battleCardCopy b{font-size:13px!important}
 .compactCommands .battleCardCost{font-size:11px!important}
 #ascentPanel .expeditionCamp{grid-template-columns:1fr;gap:10px}
 #ascentPanel .expeditionJourney{min-height:190px}
 #ascentPanel .expeditionPath{inset:85px 0 30px;padding:12px 18px}
 #ascentPanel .expeditionJourney>div:first-child{padding:12px}
 #ascentPanel .expeditionJourney>div:first-child p{display:none}
 #ascentPanel .expeditionCommand{grid-template-columns:1fr;padding:7px!important;gap:7px}
 #ascentPanel .expeditionCommand>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px}
 #ascentPanel .expeditionCommand h2{font-size:17px;margin:0}
 #ascentPanel .expeditionCommand p{font-size:13px;margin:0}
 #ascentPanel .expeditionCommand .eyebrow{display:none}
 #ascentPanel .battleCommand{display:flex;flex-direction:column;justify-content:center;min-height:64px!important}
 #ascentPanel .battleCommand .commandSymbol{display:none}
 #ascentPanel .battleRosterDisclosure{position:static;max-width:none;width:100%;order:2}
 #ascentPanel .battleRosterDisclosure>summary{min-height:44px;font-size:13px}
 #ascentPanel .expeditionRoster>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .duelMode #gameView.active,.onlineApp.duelMode #arena{grid-template-rows:auto auto auto auto!important;gap:6px!important;padding:5px 5px calc(188px + env(safe-area-inset-bottom,0px))!important}
 .duelMode .duelHud{display:grid!important;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);gap:6px;min-height:48px!important;height:auto!important;padding:0!important;align-items:center}
 .duelMode .duelHud .duelist{display:grid!important;grid-template-columns:minmax(0,1fr) 28px;gap:4px;min-width:0;width:100%;align-items:center}
 .duelMode .duelHud .duelist.ally{grid-template-columns:28px minmax(0,1fr)}
 .duelMode .duelHud .duelist img{display:none}
 .duelMode .duelHud .duelist>div{min-width:0;max-width:100%;width:100%;padding:0}
 .duelMode .duelHud .duelist span{display:block;font-size:10px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
 .duelMode .duelHud .duelist strong{font-size:11px;line-height:1.3;letter-spacing:0;overflow-wrap:anywhere}
 .duelMode .duelHud .duelist>b{width:28px;min-width:0;height:30px;display:grid;place-items:center;padding:0;font-size:18px;line-height:1}
 .duelMode .duelHud .duelCrest{min-width:0;max-width:62px;width:100%;text-align:center}
 .duelMode .duelHud .duelCrest>span{font-size:7px;letter-spacing:0;white-space:normal}
 .duelMode .duelHud .duelCrest strong{font-size:14px;letter-spacing:.6px;line-height:1.2;display:block}
 .duelMode .duelHud .duelCrest small{font-size:7px;letter-spacing:0;overflow-wrap:anywhere}
 .duelMode #battleHighlights .roundSummary[open] .combatHighlights{grid-template-columns:1fr}
 .duelMode .mapsBoard.threeTerritories{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-rows:auto!important;min-height:0!important;gap:9px!important}
 .duelMode .mapsBoard.threeTerritories .mapCard{height:auto!important;min-height:220px!important;grid-template-rows:76px minmax(140px,1fr)!important}
 .duelMode .threeTerritories .territoryCore{height:76px!important}
 .duelMode .threeTerritories .territoryObjective{top:36px!important}
 .duelMode .threeTerritories .territoryScore{top:37px!important}
 .duelMode .threeTerritories .laneSide{padding:5px!important}
 .duelMode .threeTerritories .miniUnit{min-height:92px!important;max-height:110px!important}
 .duelMode .threeTerritories .laneUnits{min-height:92px!important;grid-template-rows:repeat(var(--territory-rows,1),minmax(92px,1fr))!important;grid-auto-rows:92px!important}
 .duelMode .threeTerritories .unitOverlay strong{font-size:11px!important;line-height:1.2!important}
 .duelMode .threeTerritories .unitOverlay span,.duelMode .threeTerritories .unitOverlay b{font-size:9px!important}
 .duelMode .duelDock{position:fixed!important;inset:auto 8px max(4px,env(safe-area-inset-bottom,0px))!important;z-index:65;display:grid!important;grid-template-columns:minmax(0,1fr) 38px!important;grid-template-rows:90px 44px!important;grid-template-areas:"hand rune" "actions actions"!important;width:auto!important;max-width:none;min-width:0;min-height:0!important;height:153px!important;max-height:153px!important;gap:5px 7px!important;padding:7px!important;margin:0!important;border-color:#be9d6680!important;background:#141d20f5!important;box-shadow:0 -8px 24px #0007;backdrop-filter:blur(10px)}
 .duelMode :is(#arena,#gameView) .duelDock>.handPanel{grid-area:hand!important;min-width:0;width:100%;padding:0!important;margin:0!important;min-height:0!important;height:90px!important;max-height:90px!important;align-self:start!important}
 .duelMode :is(#arena,#gameView) .duelDock>.onlineRune{grid-area:rune!important;display:flex!important;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:0!important;min-width:0;min-height:0!important;height:90px!important;max-height:90px!important}
 .duelMode :is(#arena,#gameView) .duelDock>.onlineRune>:not(img){display:none!important}
 .duelMode :is(#arena,#gameView) .duelDock>.actionDock{grid-area:actions!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:6px!important;align-items:stretch;min-width:0;min-height:0!important;height:44px!important;max-height:44px!important;width:100%!important;padding:0!important;margin:0!important}
 .duelMode .duelDock .dockLabel{margin:0 0 2px!important;gap:5px;flex-wrap:nowrap;min-height:13px}
 .duelMode .duelDock .dockLabel strong,.duelMode .duelDock .dockLabel span{font-size:10px}
 .duelMode .duelDock .dockLabel #deploymentHint{display:none!important}
 .duelMode .duelDock .onlineRune img{width:30px!important;height:30px!important}
 .duelMode .duelDock .onlineRune strong,.duelMode .duelDock .onlineRune span{font-size:9px!important;line-height:1.2;text-align:center;overflow-wrap:anywhere;max-width:44px}
 .duelMode .duelDock:has(.onlineRune #runeImage[hidden]){grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"hand" "actions"!important}
 .duelMode .duelDock>.actionDock>button{flex:1 1 0;min-height:44px!important;min-width:0!important;width:auto!important;max-width:none!important;margin:0!important;padding:7px!important;font-size:12px!important}
 .duelMode :is(#arena,#gameView) .actionDock #confirmRound{height:44px!important;min-height:44px!important;max-height:44px!important;min-width:0!important;width:auto!important;flex:1 1 0!important;border:1px solid #d7bd81!important;border-radius:8px!important;box-shadow:none!important;padding:7px!important;font:700 12px/1.2 system-ui,sans-serif!important;letter-spacing:0!important}
 .duelMode .duelDock>.actionDock .autoCombat{flex:1 1 0;min-width:0;display:flex;justify-content:stretch;padding:0}
 .duelMode .duelDock>.actionDock .autoCombat button{width:100%;min-height:44px!important;font-size:12px!important;padding:6px!important}
 .duelMode .duelDock .handPanel .hand{height:72px!important;min-height:0!important;max-height:72px!important;gap:5px!important;margin:0;overflow-x:auto;flex-wrap:nowrap!important;padding:0!important}
 .duelMode .duelDock #hand .handCard{width:90px!important;min-width:90px!important;max-width:90px!important;flex:0 0 90px!important;height:72px!important;grid-template-columns:26px minmax(0,1fr)!important;gap:2px 4px!important;padding:5px!important}
 .duelMode .duelDock #hand .handCard img{width:26px!important;height:48px!important}
 .duelMode .duelDock #hand .cardMeta{font-size:10px!important;min-width:0}
 .duelMode .duelDock #hand .handStats{gap:4px!important;min-width:0}
 .duelMode .duelDock #hand .handStats span{font-size:9px!important}
 .duelMode .onlineRune{display:flex!important;gap:7px;align-items:center}
 .duelMode .onlineRune span{font-size:11px!important}
 .duelMode .actionDock{display:flex!important;flex-wrap:wrap}
 .duelMode .handPanel .hand{gap:7px!important;overflow-x:auto}
 .localApp #homeView .heroBanner{min-height:300px;overflow:hidden}
 .localApp #homeView .heroCopy{width:62%;max-width:62%;padding:20px 0}
 .localApp #homeView .heroCopy h1{font-size:32px}
 .localApp #homeView .heroCopy p{display:none}
 .localApp #homeView .heroArtwork{width:45%;height:260px}
 .localApp #homeView .heroActions{display:grid;gap:7px}
 .localApp #homeView .heroActions button{font-size:13px;min-height:44px}
}
/* Landscape phones / short displays: field on the left, controls on the right. */
@media(min-width:700px) and (max-height:600px) and (orientation:landscape){
 .duelMode #gameView.active,.onlineApp.duelMode #arena{display:flex!important;flex-direction:column;height:auto!important;min-height:0!important;gap:6px!important;padding:5px 5px 145px!important}
 .duelMode .duelHud{height:auto!important;min-height:44px!important}
 .duelMode .mapsBoard.threeTerritories{flex:0 0 auto!important;height:auto!important;min-height:340px!important;grid-template-rows:none!important;grid-auto-rows:auto!important}
 .duelMode .mapsBoard.threeTerritories .mapCard{height:auto!important;min-height:340px!important;grid-template-rows:72px minmax(128px,1fr) minmax(128px,1fr)!important}
 .duelMode .threeTerritories .laneUnits{min-height:88px!important;grid-template-rows:repeat(var(--territory-rows,1),minmax(88px,1fr))!important;grid-auto-rows:88px!important;overflow:visible!important}
 .duelMode .threeTerritories .miniUnit{min-height:88px!important;max-height:115px!important}
 .duelMode .duelDock{position:fixed!important;inset:auto 8px 4px!important;z-index:65;display:grid!important;grid-template-columns:minmax(0,1fr) 70px 190px!important;min-height:0!important;max-height:133px!important;gap:7px!important;padding:7px!important;margin:0!important;align-items:center!important;background:#141d20f5!important;border-color:#be9d6680!important;box-shadow:0 -8px 24px #0007}
 .duelMode :is(#arena,#gameView) .duelDock>.handPanel{min-width:0;min-height:0!important;height:auto!important;max-height:115px!important;padding:0!important}
 .duelMode :is(#arena,#gameView) .duelDock>.onlineRune{min-width:0;min-height:0!important;height:auto!important;max-height:115px!important;padding:0!important}
 .duelMode .duelDock>.onlineRune img{width:30px!important;height:30px!important}
 .duelMode .duelDock>.onlineRune strong{font-size:11px;max-width:70px;overflow-wrap:anywhere}
 .duelMode :is(#arena,#gameView) .duelDock>.actionDock{min-width:0;min-height:0!important;height:auto!important;max-height:115px!important;padding:0!important;gap:5px!important}
 .duelMode .duelDock>.actionDock>button{min-height:40px!important;font-size:12px!important;margin:0!important}
 .duelMode .duelDock>.actionDock .autoCombat{padding:0;justify-content:center}
 .duelMode .duelDock .dockLabel{margin:0!important;min-height:13px}
 .duelMode .duelDock .dockLabel #deploymentHint{display:none!important}
 .duelMode .duelDock #hand .handCard{flex:0 0 100px!important;width:100px!important;min-width:100px!important;max-width:100px!important;height:72px!important;padding:5px!important;gap:3px!important}
 .duelMode .duelDock #hand .handCard img{width:30px!important;height:52px!important}
 body.onlineApp:is(.liveMode,.championMode,.operationMode) .onlineMain{padding:4px max(6px,env(safe-area-inset-left)) 6px}
 #liveBattlePanel .liveEncounter{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:0 8px;align-items:start}
 #liveBattlePanel .liveEncounter:has(>.liveSidebar){grid-template-columns:minmax(0,1fr) 232px}
 #liveBattlePanel .liveEncounter>.liveSidebar{display:flex;flex-direction:column;gap:6px;grid-column:2;grid-row:1/4;max-height:calc(100dvh - 95px);overflow-y:auto;overscroll-behavior:contain;padding:6px;min-width:0}
 #liveBattlePanel .liveSidebar>*{flex-shrink:0;min-width:0;width:100%;max-width:100%}
 #liveBattlePanel .liveSidebar>.liveObjective{order:0}
 #liveBattlePanel .liveSidebar>[data-live-actions]{order:1;max-height:none;overflow:visible;padding:0}
 #liveBattlePanel .liveSidebar>.liveProgress{order:2}
 #liveBattlePanel .liveSidebar>.liveToolbar{order:3}
 #liveBattlePanel .liveSidebar>.liveJournal{order:4}
 #liveBattlePanel .liveSidebar .liveProgress{flex-wrap:wrap}
 #liveBattlePanel .liveSidebar .missionCheckpoint{flex:1 1 100%;max-width:none}
 #liveBattlePanel .liveSidebar .liveObjective{font-size:12px;padding:3px}
 #liveBattlePanel .liveSidebar .siegeOrders>small{display:none}
 #liveBattlePanel .liveSidebar .liveJournal{margin:0}
 #liveBattlePanel .liveScore{grid-column:1;grid-row:1}
 #liveBattlePanel .liveObjective{grid-column:1;grid-row:2}
 #liveBattlePanel .liveProgress{grid-column:1;grid-row:3}
 #liveBattlePanel .liveEncounter>.liveNotice{grid-column:1;grid-row:4;padding-block:3px;font-size:12px}
 #liveBattlePanel .liveStage,#liveBattlePanel[data-mode=squad] .liveStage.squadStage,#liveBattlePanel[data-mode=siege] .liveStage,#liveBattlePanel[data-mode=survival] .liveStage{grid-column:1;grid-row:5;width:100%;min-width:0;max-width:calc((100dvh - 145px)*1.785714)}
 #liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveStage{grid-row:2;max-width:calc((100dvh - 125px)*1.785714)}
 #liveBattlePanel .liveEncounter:has(>.liveSidebar)>.liveNotice{grid-row:3}
 #liveBattlePanel [data-live-actions]{grid-column:2;grid-row:1/6;max-height:calc(100dvh - 100px);overflow-y:auto;min-width:0;overscroll-behavior:contain}
 #liveBattlePanel .liveJournal{grid-column:1/-1;grid-row:6;margin:3px 8px}
 #liveBattlePanel .liveToolbar{grid-column:2;grid-row:6}
 #liveBattlePanel .liveLanes,#liveBattlePanel .liveEnergy{grid-column:1}
 #liveBattlePanel .squadPickRow{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 #liveBattlePanel .squadPickRow>small{grid-column:1/-1;font-size:12px}
 #liveBattlePanel .squadPickRow button{flex-direction:column;text-align:center;min-height:58px!important;padding:4px!important}
 #liveBattlePanel .squadPickRow button span{font-size:11px}
 #liveBattlePanel .squadPickRow img{height:26px;width:22px}
 #liveBattlePanel .squadTurnPrompt{flex-direction:column;font-size:13px}
 #liveBattlePanel .squadAttackChoices{flex-direction:column;gap:6px}
 #liveBattlePanel .squadAttackChoices button{min-height:44px!important;font-size:14px!important}
 #liveBattlePanel .assaultHandRow{grid-template-columns:1fr 50px;gap:5px}
 #liveBattlePanel .assaultHandCards{flex-direction:column;gap:6px}
 #liveBattlePanel .assaultDock .assaultHandCard{flex:none;min-height:58px!important;grid-template-columns:32px minmax(0,1fr);grid-template-rows:1fr auto;padding:5px!important}
 #liveBattlePanel .assaultHandCard img{height:42px!important;width:30px!important}
 #liveBattlePanel .assaultDock .assaultPowerButton{min-height:58px!important;align-self:start}
 #liveBattlePanel .assaultHandCard strong{font-size:12px}
 #liveBattlePanel .assaultResource{flex-wrap:wrap;gap:5px}
 #liveBattlePanel .assaultResource progress{flex-basis:60%}
 #liveBattlePanel .assaultDockFoot{gap:7px}
 #liveBattlePanel .assaultDockFoot>span{font-size:11px}
 #liveBattlePanel .siegeOrders>div{display:grid;grid-template-columns:1fr;gap:6px}
 #liveBattlePanel .campRecruits{gap:5px}
 #liveBattlePanel .campRecruits button{width:calc(50% - 3px);font-size:12px!important}
 #liveBattlePanel[data-phase=finished] .liveEncounter{display:block}
 #liveBattlePanel[data-phase=finished] .liveEncounter:has(>.liveSidebar){display:block}
 #liveBattlePanel[data-phase=finished] .liveSidebar{display:none}
 #liveBattlePanel[data-phase=finished] .liveStage{max-width:calc((100dvh - 95px)*1.785714)}
 #championArena.gladiatorView:not([data-phase=champion-ready]){display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:5px 8px}
 #championArena.gladiatorView .gladiatorHeading{grid-column:1/-1;margin:0}
 #championArena.gladiatorView .gladiatorHud{grid-column:1;grid-row:2;margin:0}
 #championArena.gladiatorView .gladiatorStage{grid-column:1;grid-row:3;max-width:calc((100dvh - 125px)*1.791667);width:100%;height:auto}
 #championArena.gladiatorView .gladiatorControls{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;margin:0;padding:7px;max-height:calc(100dvh - 65px);overflow-y:auto}
 #championArena.gladiatorView .gladiatorActions{grid-template-columns:1fr;width:100%;order:0}
 #championArena.gladiatorView .gladiatorActions .battleCommand{min-height:48px!important}
 #championArena.gladiatorView .gladiatorMovement{width:100%;order:1}
 #championArena.gladiatorView .gladiatorStyle{width:100%;order:2}
 #championArena.gladiatorView .autoCombat{order:3}
 #championArena.gladiatorView .gladiatorJournal{grid-column:1/-1;margin:0}
 #ascentPanel:has(.expeditionCommand){display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:6px 8px}
 #ascentPanel .ascentTop{grid-column:1/-1}
 #ascentPanel .battleLayout{grid-column:1;grid-row:2/4}
 #ascentPanel .expeditionCommand{grid-column:2;grid-row:2;display:flex;flex-direction:column;max-height:calc(100dvh - 105px);overflow-y:auto;margin:0}
 #ascentPanel .expeditionActionButtons{display:grid;grid-template-columns:1fr}
 #ascentPanel .expeditionUtilities{grid-column:2;grid-row:3}
 #ascentPanel .expeditionArena.groundedBattleStage{max-width:calc((100dvh - 160px)*1.6);margin-inline:auto}
 #ascentPanel .expeditionHelp{grid-column:1/-1}
}
@media(pointer:coarse){
 :is(.onlineApp,.localApp) :is(button,.primary,.ghost){min-height:44px}
 :is(.onlineApp,.localApp) :is(input,select,textarea){font-size:16px!important;min-height:44px}
 :is(#liveBattlePanel,#championArena,#ascentPanel,#squadPanel,#assaultPanel) button{min-height:44px!important}
 .commandHelp>summary{min-height:44px}
}
@media(max-width:360px){
 .onlineApp .modeGrid>.modeTile,.onlineApp .modeGrid>.modeTile.modeFeatured{grid-template-columns:88px minmax(0,1fr)}
 :is(.onlineApp,.localApp) .arsenalMaster .heroCollection{grid-template-columns:repeat(2,minmax(0,1fr))}
 :is(.onlineApp,.localApp) .ownedInventory .inventoryGrid{grid-template-columns:1fr}
 .onlineApp .citadelCopy h1{font-size:29px}
}
/* Expanded mode also works on browsers without the Fullscreen API. */
body.battleExpanded{overflow:hidden!important}
body .battleExpandedPanel{position:fixed!important;inset:0!important;z-index:1000!important;width:100%!important;height:100dvh!important;max-width:none!important;margin:0!important;padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;overflow:auto!important;background:#141615;overscroll-behavior:contain}
.battleExpandedPanel:fullscreen{background:#141615}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.battleExpandedPanel{transition:none}}

/* Temporary recording control, removable with recording-speed.js. */
.recordingSpeed{min-height:44px!important;padding:7px 10px!important;white-space:nowrap;font:600 12px Arial,sans-serif!important;flex:0 0 auto!important;width:auto!important}
.recordingSpeed[aria-pressed=true]{border-color:#d5b36f!important;background:#493b20!important;color:#ffe5a8!important}

/* One entry catalogue; no promotional screen between the player and the modes. */
.onlineApp[data-page=home]::before{opacity:.18!important}.onlineApp .citadelHome .playHeading{margin:12px 0 20px}.onlineApp .citadelHome .playHeading h1{font-size:32px}.onlineApp .citadelHome .modeGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.onlineApp .citadelHome .modeTile,.onlineApp .citadelHome .modeTile.modeFeatured{display:block!important;grid-column:auto;height:clamp(148px,20vh,200px)}.citadelHome .modeTitle{font-size:clamp(19px,1.8vw,26px)}.citadelHome .modeTileBody{bottom:15px;left:18px;right:18px}.citadelHome .modePill{top:12px;left:14px}.onlineApp #accountProfile #dailyMissions{display:block}.onlineApp .onlineMobileNav{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:850px){.onlineApp .citadelHome .modeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.onlineApp .citadelHome .modeTile{height:180px}}
@media(max-width:550px){.onlineApp .citadelHome .playHeading h1{font-size:27px}.onlineApp .citadelHome .playHeading{margin:8px 0 14px;gap:12px}.onlineApp .citadelHome .modeGrid{gap:8px}.onlineApp .citadelHome .modeTile,.onlineApp .citadelHome .modeTile.modeFeatured{height:150px}.citadelHome .modeTitle{font-size:18px;line-height:1.15}.citadelHome .modeTileBody{left:10px;right:10px;bottom:12px}.citadelHome .modePill{top:8px;left:8px;padding:4px 7px;font-size:9px}.citadelHome .modeTileFoot{font-size:9px;margin-top:8px}.citadelHome .modeLine{display:none}.onlineApp .citadelHome .playFilters button{min-height:40px;padding:7px 10px;font-size:11px}}

.onlineApp .citadelHome .modeTile>.modeArt{position:absolute;inset:0;grid-column:auto;grid-row:auto;width:100%;height:100%;min-height:0;border-radius:0;z-index:-1}.onlineApp .citadelHome .modeTile>.modeTileBody{position:absolute;inset:auto 16px 14px;display:block;padding:0;grid-column:auto;grid-row:auto}.onlineApp .citadelHome .modeTile .modeFigure:nth-child(n+3){display:block}.onlineApp .citadelHome .modeTile .modeFigure:nth-child(2){left:8%;right:auto;width:48%;height:91%;bottom:12%}.onlineApp .citadelHome .modeTile .modeTitle{margin:0;max-width:100%}.onlineApp .citadelHome .modeTile .modePill{max-width:calc(100% - 18px)}
@media(max-width:550px){.onlineApp .citadelHome .modeTile>.modeTileBody{inset:auto 10px 12px}.onlineApp .citadelHome .modeTile .modeFigure:nth-child(n+3){display:none}.onlineApp .citadelHome .modeTile .modeFigure:nth-child(2){left:15%;width:80%;height:90%;bottom:8%}.onlineApp .citadelHome .modeTile .modeTitle{font-size:18px}.onlineApp .citadelHome .modeTileFoot{font-size:9px}.onlineApp .citadelHome .modeEnter{min-width:20px;min-height:20px;width:20px;flex-basis:20px;font-size:17px}}