/* One field, one order panel. Keep the battle readable at normal browser zoom. */
body.onlineApp.liveMode .onlineMain{width:100%;max-width:none;padding:6px 14px 16px}
#liveBattlePanel.liveBattleView{width:100%;max-width:1560px;margin:0 auto}
#liveBattlePanel.liveBattleView .liveEncounter{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"score side" "field side" "notice side";gap:0 12px;max-width:100%;align-items:start}
#liveBattlePanel.liveBattleView .liveEncounter>.liveScore{grid-area:score;padding:9px 12px;font-size:12px}
#liveBattlePanel.liveBattleView .liveEncounter>.liveStage{grid-area:field;width:100%;max-width:none;min-width:0;margin:0;aspect-ratio:1000/560}
#liveBattlePanel.liveBattleView .liveEncounter>.liveSidebar{grid-area:side;display:flex;flex-direction:column;gap:9px;padding:10px;min-width:0;max-height:none;overflow:visible}
#liveBattlePanel.liveBattleView .liveEncounter>.liveNotice{grid-area:notice;font-size:14px;line-height:1.4;min-height:34px;margin:0;border-top:1px solid #a28d6255;text-align:left}
#liveBattlePanel.liveBattleView .liveNotice:empty{display:none}
#liveBattlePanel.liveBattleView .liveHeading h1{font-size:24px!important}
#liveBattlePanel.liveBattleView .liveHeading button{min-height:40px!important;font-size:13px!important}
#liveBattlePanel.liveBattleView .battleHeaderActions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#liveBattlePanel.liveBattleView [data-live-network]{font-size:12px;padding-block:3px}
#liveBattlePanel .liveSidebar .liveObjective{font-size:13px;line-height:1.5;padding:0}
#liveBattlePanel .liveSidebar [data-live-actions]{padding:0;max-height:none;overflow:visible;min-width:0}
#liveBattlePanel .liveSidebar .liveJournal{margin:0}
#liveBattlePanel button:disabled{opacity:.73;color:#c3c9c8;background:#263032;cursor:not-allowed}
#liveBattlePanel .squadPickRow{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
#liveBattlePanel .squadPickRow button{padding:5px 2px!important;min-height:58px!important;display:flex;flex-direction:column;text-align:center;min-width:0}
#liveBattlePanel .squadPickRow img{width:38px;height:48px}
#liveBattlePanel .squadPickRow button span{font-size:11px;white-space:normal;overflow-wrap:anywhere}
#liveBattlePanel .squadPickRow button small{font-size:10px}
#liveBattlePanel .squadTargets button{min-height:47px!important}
#liveBattlePanel .squadTurnPrompt{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:8px;background:#35443a;color:#f3dfae}
#liveBattlePanel .squadTurnPrompt strong{font-size:17px}
#liveBattlePanel .squadAttackChoices{display:grid;grid-template-columns:1fr;gap:7px}
#liveBattlePanel .squadAttackChoices button{min-height:44px!important;font-size:14px!important}
#liveBattlePanel .squadEnergyHelp{font-size:12px;color:#c7d5df}
#liveBattlePanel .squadActionFocus{padding:14px;border:1px solid #c8a97a;border-radius:10px;background:#26352f;text-align:center;width:100%}
#liveBattlePanel .squadActionFocus>span{font:700 12px Arial;color:#ebcc8d;letter-spacing:1px}
#liveBattlePanel .squadActionFocus>div{display:flex;align-items:center;gap:6px;justify-content:center;margin:14px 0}
#liveBattlePanel .squadActionFocus img{width:60px;height:90px;object-fit:contain}
#liveBattlePanel .squadActionFocus strong{font-size:15px;line-height:1.4}
#liveBattlePanel .missionOrderGroup{gap:7px}
#liveBattlePanel .missionOrderGroup button{min-height:44px!important;font-size:13px!important}
#liveBattlePanel .missionOrderHint{font-size:13px;line-height:1.5}
#liveBattlePanel[data-camp=true] .liveStage>[data-live-actions]{position:absolute;inset:4%;z-index:6;display:flex;align-items:center;padding:10px;max-height:92%;overflow:auto;background:#0b182be8;border:1px solid #bca16b;border-radius:12px;backdrop-filter:blur(4px)}
#liveBattlePanel[data-camp=true] .survivalCamp{background:transparent;border:0;padding:12px;gap:18px}
#liveBattlePanel[data-camp=true] .survivalCamp header{flex-direction:column;gap:8px}
#liveBattlePanel[data-camp=true] .survivalCamp header strong{font:24px Georgia}
#liveBattlePanel[data-camp=true] .campRecruits{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
#liveBattlePanel[data-camp=true] .campRecruits>small{grid-column:1/-1}
#liveBattlePanel[data-camp=true] .campRecruits button{display:flex;flex-direction:column;padding:8px!important}
#liveBattlePanel[data-camp=true] .campRecruits img{width:65px;height:95px;object-fit:contain}
#liveBattlePanel[data-camp=true] .campUpgrades{display:flex;flex-wrap:wrap;gap:10px}
#liveBattlePanel[data-camp=true] .campUpgrades small{width:100%}
#liveBattlePanel[data-camp=true] [data-camp-continue]{margin-left:auto;min-height:44px!important}
#liveBattlePanel[data-mode=assault] .liveSidebar .assaultHandCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#liveBattlePanel[data-mode=assault] .liveSidebar .assaultHandCard{display:flex;flex-direction:column;gap:4px;min-height:120px!important;text-align:center;justify-content:center;padding:5px!important}
#liveBattlePanel[data-mode=assault] .liveSidebar .assaultHandCard img{width:58px!important;height:74px!important}
#liveBattlePanel[data-mode=assault] .liveSidebar .assaultHandCard strong{font-size:12px;align-self:center}
#liveBattlePanel[data-mode=assault] .liveSidebar .assaultPowerChoices{grid-template-columns:1fr}
#liveBattlePanel[data-mode=assault] .liveSidebar .assaultPowerButton{min-height:48px!important}
#liveBattlePanel[data-phase=finished].liveBattleView .liveEncounter{display:block}
#liveBattlePanel[data-phase=finished] .liveSidebar{display:none!important}
#liveBattlePanel .liveResult,.gladiatorResult,.operationResult,.squadResult,.onlineApp #result,#modalBody{color:#eee5d4}
.battleResultChoices{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.battleResultChoices button,.gladiatorResult button,.onlineApp #result button{min-height:44px;font-size:14px}
.territoryFinalScore,#resultScores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.territoryFinalScore article,#resultScores article{display:grid;gap:7px;padding:10px!important;border:1px solid #b69c6066;border-radius:8px;background:#173139}
.territoryFinalScore span{font-size:13px}.territoryFinalScore strong{font-size:25px}
/* The board remains three territories; each team has a grounded formation. */
.duelMode .mapsBoard.threeTerritories{min-height:510px!important;height:auto!important}
.duelMode .threeTerritories .mapCard{grid-template-rows:66px minmax(200px,1fr) minmax(200px,1fr)!important}
.duelMode .threeTerritories .territoryCore{height:66px!important}
.duelMode .threeTerritories .laneUnits{position:relative;isolation:isolate;grid-template-rows:repeat(var(--territory-rows,1),minmax(132px,1fr))!important;grid-auto-rows:132px!important}
.duelMode .threeTerritories .miniUnit{min-height:132px!important;max-height:none!important;overflow:visible!important}
.duelMode .threeTerritories .miniUnit::before{content:'';position:absolute;left:10%;right:10%;height:15px;bottom:30px;border-radius:50%;background:radial-gradient(ellipse,#111e1c99,transparent 72%);border-bottom:1px solid #c1bb8055;pointer-events:none}
.duelMode .threeTerritories .laneSide{background:linear-gradient(0deg,#273131d9,#111b2370 36%,transparent)!important}
.duelMode .threeTerritories .laneResult{display:none!important}
.duelMode .threeTerritories .unitOverlay span{display:none!important}
.duelMode .threeTerritories .unitOverlay strong{font-size:12px!important}
.duelMode .threeTerritories .laneSide h4 span{display:none!important}
.duelMode .threeTerritories .unitHealth{height:12px!important}
.duelMode .threeTerritories .unitHealth small{font-size:10px!important;line-height:12px!important}
.duelMode .threeTerritories .territoryPlayback .battleFeed{font-size:14px;min-height:40px!important}
.duelMode .duelDock #hand .handCard{width:145px!important;min-width:145px!important;max-width:145px!important;flex-basis:145px!important;height:100px!important;grid-template-columns:55px minmax(0,1fr)!important}
.duelMode .duelDock #hand .handCard img{width:53px!important;height:80px!important;object-fit:cover!important;object-position:center 35%!important}
.onlineApp .citadelNav button,.onlineApp .citadelQuickLinks a{font-size:14px;min-height:44px}
.onlineApp .profileHeader strong{font-size:14px}
.onlineApp .profileHeader small,.onlineApp .citadelProgress small,.onlineApp .citadelOverview small{font-size:12px}
.onlineApp .profileHeader progress{height:7px;min-width:130px}
@media(max-width:900px){
 #liveBattlePanel.liveBattleView .liveEncounter{grid-template-columns:1fr;grid-template-areas:"score" "field" "notice" "side";gap:0}
 #liveBattlePanel.liveBattleView .liveEncounter>.liveSidebar{max-height:none;overflow:visible}
 #liveBattlePanel .squadAttackChoices{grid-template-columns:1fr 1fr}
 #liveBattlePanel[data-mode=assault] .liveSidebar .assaultPowerChoices{grid-template-columns:repeat(3,minmax(0,1fr))}
 #liveBattlePanel[data-mode=assault] .liveSidebar .assaultPowerButton{flex-direction:column;font-size:12px!important}
 #liveBattlePanel.liveBattleView .liveHeading>div:last-child{flex-wrap:wrap}
 #liveBattlePanel.liveBattleView .liveHeading button{min-height:44px!important}
 #liveBattlePanel[data-camp=true] .liveStage>[data-live-actions]{inset:0;border-radius:0;max-height:100%;padding:5px}
 #liveBattlePanel[data-camp=true] .campRecruits{grid-template-columns:repeat(4,minmax(0,1fr))}
 #liveBattlePanel[data-camp=true] .campRecruits img{height:60px;width:45px}
 #liveBattlePanel[data-camp=true] .survivalCamp{gap:10px;padding:5px}
 #liveBattlePanel[data-camp=true].liveBattleView .liveStage{aspect-ratio:auto;min-height:0}
 #liveBattlePanel[data-camp=true] .liveStage>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.25}
 #liveBattlePanel[data-camp=true] .liveStage>[data-live-actions]{position:relative;inset:auto;max-height:none;width:100%;overflow:visible;align-items:stretch;padding:12px}
 #liveBattlePanel[data-camp=true] .survivalCamp{width:100%}
 #liveBattlePanel[data-camp=true] .campUpgrades button{min-height:44px!important}
 #liveBattlePanel[data-camp=true] [data-camp-continue]{width:100%;margin:0}
}
@media(max-width:700px){
 body.onlineApp.liveMode .onlineMain{padding:4px}
 #liveBattlePanel.liveBattleView .liveHeading h1{font-size:21px!important}
 #liveBattlePanel.liveBattleView .liveEncounter>.liveNotice{font-size:12px}
 .duelMode .threeTerritories .mapCard{grid-template-rows:66px minmax(160px,1fr) minmax(160px,1fr)!important}
 .duelMode .threeTerritories .miniUnit{min-height:125px!important}
 .duelMode .mapsBoard.threeTerritories{min-height:0!important}
 .duelMode .mapsBoard.threeTerritories .mapCard{height:auto!important;min-height:260px!important;grid-template-rows:66px minmax(180px,auto)!important}
 .duelMode .mapsBoard.threeTerritories .laneUnits{height:auto!important;min-height:146px!important;grid-template-rows:repeat(var(--territory-rows,1),146px)!important;grid-auto-rows:146px!important;flex:0 0 auto!important}
 .duelMode .mapsBoard.threeTerritories .miniUnit{height:146px!important;min-height:146px!important;max-height:146px!important;align-self:end!important}
 .duelMode .duelDock #hand .handCard{width:112px!important;min-width:112px!important;max-width:112px!important;flex-basis:112px!important;height:72px!important;grid-template-columns:42px minmax(0,1fr)!important}
 .duelMode .duelDock #hand .handCard img{width:40px!important;height:60px!important}
 .territoryFinalScore,#resultScores{grid-template-columns:1fr}
}
@media(min-width:700px) and (max-height:600px) and (orientation:landscape){
 #liveBattlePanel.liveBattleView .liveEncounter{grid-template-columns:minmax(0,1fr) 245px;grid-template-areas:"score side" "field side" "notice side"}
 #liveBattlePanel.liveBattleView .liveEncounter>.liveSidebar{max-height:calc(100dvh - 90px);overflow:auto}
 #liveBattlePanel[data-camp=true] .campRecruits img{height:45px}
}

/* Survival: the field takes the row; a compact command strip sits below it. */
#liveBattlePanel[data-mode=survival].liveBattleView .liveEncounter{grid-template-columns:minmax(0,1fr);grid-template-areas:"score" "field" "notice" "side";gap:0}
#liveBattlePanel[data-mode=survival].liveBattleView .liveEncounter>.liveStage{width:100%;max-width:none;min-width:0;aspect-ratio:1000/560}
#liveBattlePanel[data-mode=survival].liveBattleView .liveEncounter>.liveSidebar{display:grid;grid-template-columns:minmax(160px,1fr) minmax(260px,2fr);gap:8px 16px;max-height:none;padding:10px 12px}
#liveBattlePanel[data-mode=survival] .liveSidebar>.liveObjective,#liveBattlePanel[data-mode=survival] .liveSidebar>.liveProgress{grid-column:1}
#liveBattlePanel[data-mode=survival] .liveSidebar>[data-live-actions]{grid-column:2;grid-row:1 / span 2}
#liveBattlePanel[data-mode=survival] .missionOrderGroup{display:flex;flex-wrap:wrap;gap:6px}
#liveBattlePanel[data-mode=survival] .missionOrderGroup>strong{display:none}
#liveBattlePanel[data-mode=survival] .missionOrderGroup button{min-height:44px!important;flex:1}
#liveBattlePanel[data-mode=survival] .liveSidebar>.liveJournal{grid-column:1/-1}
#liveBattlePanel[data-mode=survival] .campRecruitHint{margin:0;color:#d0dfd4;font-size:13px}
@media(max-width:700px){
 #liveBattlePanel[data-mode=survival].liveBattleView .liveEncounter>.liveSidebar{display:flex;padding:8px;gap:7px}
 #liveBattlePanel[data-mode=survival] .missionOrderHint{display:none}
 #liveBattlePanel[data-mode=survival] .campUpgrades button{flex:1;min-width:100px}
}