.phaser-app {margin:0;overflow:hidden;min-height:0;background:#0b1526}
#belic-game {position:fixed;inset:0;overflow:hidden}
#belic-game>#belic-canvas {display:block!important;width:100%!important;height:100%!important;max-width:none!important;border:0!important;border-radius:0!important;aspect-ratio:auto!important;background:transparent!important}
#belic-ui {position:relative;overflow:auto;box-sizing:border-box;color:var(--text,#f3efdf);isolation:isolate}
#belic-ui canvas[data-phaser-surface] {background:transparent!important;opacity:1!important}
#belic-ui .campaign,#belic-ui .battlefield,#belic-ui .fort-map,#belic-ui .fort-field,#belic-ui .stage {background:transparent!important}
#belic-ui [data-phaser-world-host] {background:transparent!important}
.compatibility {max-width:640px;margin:10vh auto;padding:32px;color:#f3efdf;font:18px system-ui}
.canvas-dialog-shade {position:fixed;inset:0;background:#020710c9;z-index:10000}
#belic-ui .canvas-dialog[open] {display:block;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;z-index:10001;max-height:88dvh;overflow:auto}
#belic-ui [popover]:not([data-popover-open]) {display:none!important}
#belic-ui [popover][data-popover-open] {display:block!important;z-index:9000}

/* Command centre: persistent navigation and a restrained, illustrated-game shell. */
#belic-ui.command-ui .topbar {display:flex;position:fixed;inset:12px 20px auto;z-index:1000;height:60px;min-height:60px;margin:0;padding:8px 16px;border:1px solid #7492b34d;border-radius:14px;background:#0b1526f2;box-shadow:0 8px 28px #0005}
#belic-ui.command-ui .topbar .brand {font-size:21px;gap:10px}
#belic-ui.command-ui .topbar .brand-mark {width:36px;height:40px}
#belic-ui.command-ui .topbar .brand small {display:none}
#belic-ui.command-ui .topbar .edition {font:10px system-ui;letter-spacing:2px;color:#91bff0}
#belic-ui.command-ui .topbar .header-actions {margin-left:auto}
#belic-ui.command-ui #camp-navigation {position:fixed;z-index:1001;inset:96px auto auto 20px;transform:none;display:flex;flex-direction:column;gap:8px;width:84px;padding:7px;border:1px solid #7492b34d;border-radius:14px;background:#0b1526f2;box-shadow:0 8px 28px #0005}
#belic-ui.command-ui #camp-navigation .camp-dock-button {display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:80px;padding:8px 3px;border-radius:9px}
#belic-ui.command-ui #camp-navigation .camp-dock-label {font:11px/1.3 system-ui;text-align:center}
#belic-ui.command-ui #camp-navigation .camp-dock-emblem {display:grid;width:26px;height:28px}
#belic-ui.command-ui #camp-navigation [aria-current=page] {background:#25496d;border-color:#85b3d4;box-shadow:inset 3px 0 #b6d7ec;color:#f3efdf}
#belic-ui.command-ui #app {padding:88px 20px 24px 124px}
#belic-ui.command-ui .camp-shell {padding:12px 0;max-width:none}
#belic-ui.command-ui .camp-shell[data-page=conquest] {padding:0}
#belic-ui.command-ui .camp-shell[data-page=conquest] .page-heading {top:96px;left:124px;right:24px}
#belic-ui.command-ui .camp-shell[data-page=conquest] .mission-details {top:196px;left:124px}
#belic-ui.command-ui .camp-shell[data-page=conquest] .campaign-action {bottom:24px;right:24px}
#belic-ui.command-ui .conquest-map-tools {bottom:166px}
#belic-ui.command-ui .page-heading h1 {font-size:30px}
#belic-ui.command-ui .army-overview>div,#belic-ui.command-ui .panel {border-radius:12px}
#belic-ui.command-ui .fortress-base .fort-heading {top:96px;left:124px;right:24px}
#belic-ui.command-ui .fortress-base .fort-toolbar {top:182px;left:124px}
#belic-ui.command-ui .fortress-base .fort-base-camera {left:124px;bottom:24px}
#belic-ui.command-ui .fortress-base .fort-dock {bottom:24px}
#belic-ui.command-ui .fort-detail,#belic-ui.command-ui .fort-reserve,#belic-ui.command-ui .fort-training-picker {top:188px;max-height:calc(100dvh - 300px);background:#112039f5;border-color:#7492b3;border-radius:12px}
#belic-ui.command-ui button,#belic-ui.command-ui input,#belic-ui.command-ui select {min-height:44px}
#belic-ui.command-ui button {touch-action:manipulation}
.battle-mode #belic-ui.command-ui .topbar {display:none}
.battle-mode #belic-ui.command-ui #camp-navigation {display:none}
.battle-mode #belic-ui.command-ui #app {padding:0}
.battle-mode #belic-ui.command-ui .battle-shell {max-width:none;padding:12px 16px;height:100dvh;overflow:auto}
.battle-mode #belic-ui.command-ui .battle-grid {grid-template-columns:minmax(0,1fr) 280px}
.battle-mode #belic-ui.command-ui .command-panel {max-height:calc(100dvh - 160px);overflow:auto}
#belic-ui.studio-ui {background:transparent;overflow:auto}
#belic-ui.studio-ui>header {position:sticky;top:0;z-index:10;background:#112039f5;border-bottom:1px solid #7492b3}
#belic-ui.studio-ui button,#belic-ui.studio-ui select {min-height:44px}
@media(max-width:899px){
 #belic-ui.command-ui .topbar {inset:8px 12px auto;height:52px;min-height:52px;padding:4px 12px;gap:10px}
 #belic-ui.command-ui .topbar .edition,#belic-ui.command-ui .topbar .brand small,#belic-ui.command-ui .topbar>a:last-child {display:none}
 #belic-ui.command-ui .topbar .brand {font-size:18px}
 #belic-ui.command-ui .topbar .brand-mark {width:28px;height:34px}
 #belic-ui.command-ui .topbar .save-status {font-size:10px;max-width:120px}
 #belic-ui.command-ui #camp-navigation {inset:auto 12px calc(8px + env(safe-area-inset-bottom));width:auto;flex-direction:row;padding:5px;gap:4px}
 #belic-ui.command-ui #camp-navigation .camp-dock-button {flex:1;min-height:60px;gap:4px;padding:5px}
 #belic-ui.command-ui #camp-navigation .camp-dock-label {font-size:11px}
 #belic-ui.command-ui #camp-navigation [aria-current=page] {box-shadow:inset 0 -3px #b6d7ec}
 #belic-ui.command-ui #app {padding:72px 12px 90px}
 #belic-ui.command-ui .camp-shell[data-page=conquest] .page-heading {top:76px;left:12px;right:12px}
 #belic-ui.command-ui .camp-shell[data-page=conquest] .page-heading h1 {font-size:21px}
 #belic-ui.command-ui .camp-shell[data-page=conquest] .mission-details {top:168px;left:12px;width:min(310px,calc(100vw - 24px))}
 #belic-ui.command-ui .mission-details-body {max-height:calc(100dvh - 380px)}
 #belic-ui.command-ui .camp-shell[data-page=conquest] .campaign-action {left:12px;right:12px;bottom:88px;width:auto}
 #belic-ui.command-ui .conquest-map-tools {bottom:222px}
 #belic-ui.command-ui .fortress-base .fort-heading {top:76px;left:12px;right:12px}
 #belic-ui.command-ui .fortress-base .fort-toolbar {top:150px;left:12px}
 #belic-ui.command-ui .fortress-base .fort-dock {bottom:88px}
 #belic-ui.command-ui .fortress-base .fort-base-camera {left:12px;bottom:160px}
 #belic-ui.command-ui .fort-detail,#belic-ui.command-ui .fort-reserve,#belic-ui.command-ui .fort-training-picker {top:auto;bottom:160px;left:12px;right:12px;width:auto;max-height:50dvh}
 .battle-mode #belic-ui.command-ui .battle-shell {padding:8px}
 .battle-mode #belic-ui.command-ui .battle-grid {grid-template-columns:minmax(0,1fr)}
 .battle-mode #belic-ui.command-ui .command-panel {max-height:none}
 #belic-ui.studio-ui>main {grid-template-columns:1fr}
 #belic-ui.studio-ui>main>aside {display:flex;flex-wrap:wrap;gap:12px}
}
@media(max-height:550px) and (min-width:600px){
 #belic-ui.command-ui .camp-shell[data-page=conquest] .mission-details {top:150px;width:260px}
 #belic-ui.command-ui .mission-details-body {max-height:170px}
 #belic-ui.command-ui .camp-shell[data-page=conquest] .campaign-action {left:auto;width:240px;bottom:90px}
 #belic-ui.command-ui .conquest-map-tools {bottom:210px}
 .battle-mode #belic-ui.command-ui .battle-grid {grid-template-columns:minmax(0,1fr) 240px}
}
#belic-ui.command-ui [data-formation-preview] {width:180px;height:112px;max-width:100%;object-fit:contain}
@media(max-width:899px){
 .battle-mode #belic-ui.command-ui #battalion-orders,.battle-mode #belic-ui.command-ui #deployment-controls {grid-column:1 / -1}
 .battle-mode #belic-ui.command-ui .command-panel {align-items:start;grid-auto-rows:auto}
 .battle-mode #belic-ui.command-ui .command-panel>button {height:auto}
}
/* Training receives the same uninterrupted viewport as campaign combat. */
#belic-ui.command-ui:has(.fortress-combat) .topbar,#belic-ui.command-ui:has(.fortress-combat) #camp-navigation {display:none}
#belic-ui.command-ui:has(.fortress-combat) #app {padding:8px}
#belic-ui.command-ui .fortress-combat {padding:8px;max-width:none}
#belic-ui.command-ui .fortress-combat .fort-heading h1 {font-size:23px;margin:0}
#belic-ui.command-ui .fortress-combat .fort-heading p {margin:4px 0}
#belic-ui.command-ui .fortress-combat .fort-toolbar {margin:6px 0}
@media(max-height:550px) and (min-width:600px){
 #belic-ui.command-ui .fortress-combat .fort-heading p,#belic-ui.command-ui .fortress-combat .fort-heading .eyebrow,#belic-ui.command-ui .fortress-combat .fort-wallet small {display:none}
 #belic-ui.command-ui .fortress-combat .fort-wallet {display:flex;align-items:center;gap:8px}
 #belic-ui.command-ui .fortress-combat .fort-wallet strong {font-size:20px}
 #belic-ui.command-ui .fortress-combat #fort-content {display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:8px}
 #belic-ui.command-ui .fortress-combat .fort-combat-hud {grid-column:1 / -1;padding:6px;margin:0;font-size:10px}
 #belic-ui.command-ui .fortress-combat .fort-field {grid-column:1;grid-row:2 / span 4;height:calc(100dvh - 140px);min-height:200px;margin:0}
 #belic-ui.command-ui .fortress-combat .fort-inspect,#belic-ui.command-ui .fortress-combat #fort-piece-status,#belic-ui.command-ui .fortress-combat #fort-content>.fort-controls {grid-column:2;margin:0}
 #belic-ui.command-ui .fortress-combat .fort-zoom {gap:4px}
 #belic-ui.command-ui .fortress-combat .fort-zoom button {font-size:10px;padding:4px}
 #belic-ui.command-ui .fortress-combat .fort-result {grid-column:1 / -1}
}
#belic-ui .reserve-drag-ghost canvas {display:block}
