/* HERO SQUAD: CITY OF LEGENDS — shared comic UI kit. Palette from the plan §5.2. */
:root{--navy:#091E33;--ink:#111;--yellow:#FFE539;--cyan:#159ED9;--red:#E63A32;--purple:#7945A8;--ivory:#FFF2D4;--green:#3fae49;--panel:#FFF2D4;--navy2:#123a63;
 --disp:'Bangers','Anton','Impact','Arial Narrow',sans-serif;--body:'Trebuchet MS','Segoe UI',Arial,sans-serif;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--navy);color:var(--ink);font-family:var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer;color:inherit}img{user-select:none;-webkit-user-drag:none}
#app{display:grid;height:100%;grid-template-columns:96px 1fr;grid-template-rows:56px 1fr;grid-template-areas:"top top" "nav main"}
#topbar{grid-area:top;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--cyan);border-bottom:4px solid var(--ink);background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.5px);background-size:5px 5px}
.logo{font:italic 900 26px/1 var(--disp);color:var(--red);-webkit-text-stroke:1.5px var(--ink);text-shadow:2px 2px 0 var(--yellow);letter-spacing:1px;background:var(--yellow);padding:4px 14px 4px 10px;border:3px solid var(--ink);transform:skewX(-8deg);white-space:nowrap}
.logo small{font:900 14px var(--disp);color:var(--ink);-webkit-text-stroke:0;text-shadow:none;margin-left:6px}
.res{display:flex;gap:6px;margin-left:auto;flex-wrap:nowrap}.res .chip{display:flex;align-items:center;gap:6px;background:var(--ivory);border:3px solid var(--ink);padding:2px 10px;font:italic 800 18px var(--disp);letter-spacing:.5px;white-space:nowrap}
.chip b{font-weight:900}.chip.mini{font-size:15px;padding:1px 7px}
#nav{grid-area:nav;display:flex;flex-direction:column;gap:6px;padding:8px 6px;background:var(--navy);border-right:4px solid var(--ink);overflow-y:auto}
#nav button{background:var(--navy2);border:3px solid var(--ink);border-radius:2px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font:italic 800 13px var(--disp);letter-spacing:.5px;min-height:56px}
#nav button.on{background:var(--yellow);color:var(--ink)}#nav button .icon{filter:drop-shadow(0 0 0 #000)}
#main{grid-area:main;position:relative;overflow:hidden;min-width:0;min-height:0}
.screen{position:absolute;inset:0;display:grid;min-height:0}
.scene{background-size:cover;background-position:center;background-color:var(--navy2)}
.scene::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1.5px);background-size:4px 4px;pointer-events:none;mix-blend-mode:multiply}
/* banners & panels */
.banner{display:inline-block;background:var(--yellow);border:3px solid var(--ink);padding:4px 22px 4px 14px;font:italic 900 26px var(--disp);letter-spacing:1px;transform:skewX(-8deg);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
.banner.sm{font-size:18px;padding:2px 14px 2px 10px}.banner.red{background:var(--red);color:#fff}.banner.blue{background:var(--cyan)}
.sub{display:inline-block;background:var(--ivory);border:2px solid var(--ink);padding:2px 10px;font:italic 700 13px var(--body);text-transform:uppercase}
.panel{background:var(--panel);border:4px solid var(--ink);box-shadow:5px 5px 0 rgba(0,0,0,.55);padding:10px;position:relative;min-height:0;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(rgba(0,0,0,.07) 1px,transparent 1.4px);background-size:5px 5px}
.panel h3{margin:0;font:italic 900 20px var(--disp);letter-spacing:.5px;background:var(--yellow);border:2px solid var(--ink);padding:1px 10px;align-self:flex-start;transform:skewX(-6deg)}
.scroll{overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.row{display:flex;align-items:center;gap:8px}.col{display:flex;flex-direction:column;gap:6px}.grow{flex:1;min-width:0}.gap{gap:12px}.wrap{flex-wrap:wrap}.right{margin-left:auto}
.btn{background:var(--ivory);border:3px solid var(--ink);padding:8px 14px;font:italic 900 18px var(--disp);letter-spacing:.5px;box-shadow:3px 3px 0 var(--ink);min-height:44px;transition:transform .05s}
.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.btn.primary{background:var(--yellow);font-size:26px;padding:10px 22px;transform:skewX(-8deg)}.btn.primary>*{display:inline-block;transform:skewX(8deg)}.btn.red{background:var(--red);color:#fff}.btn.blue{background:var(--cyan)}.btn.sm{font-size:14px;padding:4px 10px;min-height:32px}
.tag{display:inline-block;border:2px solid var(--ink);padding:0 6px;font:800 12px var(--body);text-transform:uppercase;background:#fff}.tag.high{background:var(--red);color:#fff}.tag.med{background:#f7a21b}.tag.low{background:#8fd16f}.tag.ok{background:#8fd16f}.tag.warn{background:#f7a21b}.tag.bad{background:var(--red);color:#fff}.tag.info{background:#bfe6f7}
.bar{height:12px;border:2px solid var(--ink);background:#ddd;position:relative}.bar>i{position:absolute;inset:0 auto 0 0;background:var(--green)}.bar.red>i{background:var(--red)}.bar.blue>i{background:var(--cyan)}.bar.gold>i{background:var(--yellow)}
.list>*{border-bottom:2px solid rgba(0,0,0,.25);padding:6px 4px;display:flex;gap:8px;align-items:center}.list>.sel{background:#ffe9a0;outline:3px solid var(--ink)}.list>[data-click]{cursor:pointer}
/* chars */
.portrait{width:64px;height:64px;border:3px solid var(--ink);background:linear-gradient(#2a4f7e,#123a63);overflow:hidden;position:relative;flex:none}.portrait img,.portrait .token{position:absolute;left:50%;top:0;height:260%;transform:translateX(-50%);width:auto;max-width:none}
.portrait .token{height:100%;width:100%;transform:none;left:0;display:grid;place-items:center;font:900 28px var(--disp);color:#fff}.portrait.lg{width:96px;height:96px}
.char.token{display:grid;place-items:center;font:900 60px var(--disp);color:#fff;border:3px solid var(--ink);min-width:80px;min-height:140px}
.icon{object-fit:contain;vertical-align:middle}.ficon{display:inline-grid;place-items:center;background:var(--navy2);color:#fff;border:2px solid var(--ink);font:800 11px var(--body);border-radius:3px}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);background:var(--yellow);border:3px solid var(--ink);padding:8px 18px;font:italic 800 18px var(--disp);z-index:99;box-shadow:4px 4px 0 var(--ink);max-width:90vw}.toast.bad{background:var(--red);color:#fff}
.modal-bg{position:fixed;inset:0;background:rgba(5,15,30,.75);display:grid;place-items:center;z-index:50;padding:12px}.modal{max-width:min(720px,100%);max-height:100%;overflow:auto}
.hint{font-size:12px;opacity:.75}.muted{opacity:.6}.big{font:italic 900 34px var(--disp)}
/* phone */
@media (max-width:820px){
 #app{grid-template-columns:1fr;grid-template-rows:auto 1fr calc(70px + var(--safe-b));grid-template-areas:"top" "main" "nav"}
 #topbar{flex-wrap:wrap;padding:calc(4px + var(--safe-t)) 8px 4px;gap:4px;justify-content:center}.logo{font-size:20px}.logo small{display:none}.res{margin:0;width:100%;justify-content:space-between}.res .chip{font-size:14px;padding:1px 5px;gap:3px}.res .chip .icon{width:18px;height:18px}.res .chip .lbl{display:none}.res{gap:3px}
 #nav{flex-direction:row;border-right:0;border-top:4px solid var(--ink);padding:4px 4px calc(4px + var(--safe-b));gap:4px;overflow-x:auto}#nav button{flex:1 0 56px;min-height:52px;font-size:12px;padding:3px 2px;justify-content:center;line-height:1}#nav button .icon{width:24px;height:24px}#nav button.extra{display:none}
 .btn.primary{font-size:22px}.banner{font-size:20px}
}
.hide-phone{}@media (max-width:820px){#app.in-battle{grid-template-rows:0 1fr 0}#app.in-battle #topbar{display:none}}
@media (min-width:821px){#app.in-battle{grid-template-columns:0 1fr}}
@media (max-width:820px){.hide-phone{display:none!important}}
body.reduce *{animation:none!important;transition:none!important}
/* story scenes */
.scene-bg{align-items:end;padding-bottom:max(12px,var(--safe-b))}.scene-box{width:min(760px,100%);cursor:pointer}.scene-name{font:italic 900 20px var(--disp);letter-spacing:.5px}.scene-text{font:italic 600 18px/1.35 var(--body);min-height:3.2em}
.portrait.ico{display:grid;place-items:center;background:var(--navy2)}.portrait.ico .icon{position:static;height:auto;width:72px;transform:none}
/* battle: one layout predicate (data-layout set by battle-view layoutFor) drives the shell too */
#app.in-battle[data-layout="portrait"],#app.in-battle[data-layout="landscape"]{grid-template-rows:0 1fr 0}
#app.in-battle[data-layout="portrait"] #topbar,#app.in-battle[data-layout="landscape"] #topbar{display:none}

/* visual-sweep fixes: tap targets, wide screens */
.btn.sm{min-height:36px}
@media (max-width:1180px),(pointer:coarse){.btn.sm{min-height:44px}select,.a-select{min-height:44px}}
@media (min-width:1900px) and (min-height:1000px){.screen:not(.battle-root):not(:has(.cx-grid)){zoom:1.25}}
@media (min-width:2400px) and (min-height:1300px){.screen:not(.battle-root):not(:has(.cx-grid)){zoom:1.45}}

/* title / new campaign (non-battle layout only) */
#app:has(.title-root){grid-template-columns:0 1fr;grid-template-rows:0 1fr}#app:has(.title-root) #topbar{display:none}
@media (max-width:820px){#app:has(.title-root){grid-template-columns:1fr;grid-template-rows:0 1fr 0}}
.ti-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.ti-muts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}
.ti-card,.ti-mut{background:#fff;border:3px solid var(--ink);padding:8px 10px;text-align:left;display:flex;flex-direction:column;gap:4px;min-height:44px;font-size:14px}
.ti-card b,.ti-mut b{font:italic 900 18px var(--disp)}.ti-card .hint,.ti-mut .hint{opacity:1;font-size:13px}.ti-rules{margin:0;padding-left:18px;font-size:13px;line-height:1.3}
.ti-card.on,.ti-mut.on{background:#ffe9a0;outline:4px solid var(--red);outline-offset:-2px}.ti-mut:disabled{opacity:.45;cursor:not-allowed}
.ti-sum{border:2px solid var(--ink);background:#fff8e6;padding:4px 8px}
/* phone landscape (non-battle): single-row top bar + left nav rail; #app.in-battle untouched */
@media (max-height:500px) and (orientation:landscape){
 #app:not(.in-battle){grid-template-columns:76px 1fr;grid-template-rows:42px 1fr;grid-template-areas:"top top" "nav main"}
 #app:not(.in-battle) #topbar{flex-wrap:nowrap;padding:0 8px;gap:8px;justify-content:flex-start;border-bottom-width:3px}
 #app:not(.in-battle) .logo{font-size:18px;padding:2px 10px 2px 8px;flex:none}
 #app:not(.in-battle) .res{width:auto;margin-left:auto;gap:3px;flex-wrap:nowrap}#app:not(.in-battle) .res .chip{font-size:14px;padding:0 6px;gap:3px}#app:not(.in-battle) .res .chip .lbl{display:none}#app:not(.in-battle) .res .chip .icon{width:18px;height:18px}
 #app:not(.in-battle) #nav{flex-direction:column;border-right:4px solid var(--ink);border-top:0;overflow-y:auto;padding:4px;gap:4px}
 #app:not(.in-battle) #nav button{flex:none;min-height:44px;font-size:10px;padding:2px;line-height:1}#app:not(.in-battle) #nav button .icon{width:22px;height:22px}
 #app:has(.title-root){grid-template-columns:0 1fr;grid-template-rows:0 1fr}
}

/* desktop top bar must fit at 1024-1180 (battle layout rules untouched) */
@media (min-width:821px) and (max-width:1250px){#app:not(.in-battle) .logo small{display:none}#app:not(.in-battle) .res .chip .lbl{display:none}#app:not(.in-battle) .res .chip{padding:2px 8px}}