/* Layout: scena 3D a tutto schermo; HUD come strumentazione da carro — barra alta, rinforzi a destra, unità in basso, mappa in basso a sinistra */
:root{
  --bg:#141612; --panel:rgba(20,22,18,.86); --panel2:rgba(34,36,29,.92); --line:#3c3f33; --line2:#575a49;
  --fg:#ebe5d1; --muted:#a8a28c; --brass:#c9a24a; --brass2:#e3c06e; --ok:#7fae5a; --bad:#d0573f;
  --axis:#c9573a; --allies:#4f86c9;
  --f-disp:"Saira Stencil One","Stencil","Impact",sans-serif; --f-ui:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif; --f-num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);overflow:hidden}
body{font-family:var(--f-ui);font-size:15px;-webkit-user-select:none;user-select:none;touch-action:none}
#app{position:fixed;inset:0}
#view,#ov{position:absolute;inset:0}
#view canvas{display:block;width:100%;height:100%}
#ov{width:100%;height:100%;z-index:2;cursor:default}
#ov.mode-a{cursor:crosshair}
.hud{position:absolute;z-index:5;pointer-events:none}
.hud>*{pointer-events:auto}
button{font-family:var(--f-ui);font-size:15px;color:var(--fg);background:var(--panel2);border:1px solid var(--line2);border-radius:3px;padding:7px 12px;cursor:pointer;letter-spacing:.03em}
button:hover:not(:disabled){border-color:var(--brass);color:var(--brass2)}
button:focus-visible,input:focus-visible{outline:2px solid var(--brass2);outline-offset:2px}
button:disabled{opacity:.42;cursor:not-allowed}
button.primary{background:linear-gradient(#4a4228,#3a3420);border-color:var(--brass);color:#f3e2b2;font-weight:600}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
/* barra superiore */
#top{top:env(safe-area-inset-top,0px);left:0;right:0;display:flex;align-items:stretch;justify-content:space-between;gap:10px;padding:8px max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
.plate{background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
#res{display:flex;align-items:center;gap:12px;padding:6px 12px}
#res .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#res .big{font-family:var(--f-num);font-size:20px;color:var(--brass2)}
#res .big.rm{color:#d8d2a8}#res .big.ra{color:#f0a868}#res .big.rf{color:#8fc3e8}
.rc{display:inline-block;font-style:normal;font-family:var(--f-num);font-size:12px;line-height:16px;padding:0 5px;margin-left:3px;border-radius:3px;color:#fff;background:#555}.rc.rm{background:#5b6b3a}.rc.ra{background:#8a4b1f}.rc.rf{background:#2f5c7a}
#sideTag{font-family:var(--f-disp);font-size:16px;letter-spacing:.04em;padding:2px 8px;border-radius:2px}
#score{flex:1;max-width:560px;display:flex;flex-direction:column;justify-content:center;padding:6px 12px;gap:5px}
.tix{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px}
.tbar{height:8px;background:#0c0d0a;border:1px solid var(--line);position:relative;overflow:hidden}
.tbar i{position:absolute;top:0;bottom:0;left:0}
#flagsRow{display:flex;justify-content:center;gap:6px}
.fchip{font-size:11px;letter-spacing:.06em;padding:1px 6px;border:1px solid var(--line2);border-radius:2px;color:var(--fg);white-space:nowrap;background:#1d1f19}
#topBtns{display:flex;gap:6px;align-items:center;padding:6px}
#topBtns button{padding:6px 10px}
/* messaggi */
#msgs{top:calc(env(safe-area-inset-top,0px) + 74px);left:max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:4px;pointer-events:none;max-width:min(380px,70vw)}
/* i messaggi non fermano i clic sulla mappa (.hud>* li riaccendeva per tutti), solo quelli cliccabili ("Sotto tiro") */
#msgs>.msg{pointer-events:none}
#msgs>.msg.click{pointer-events:auto;cursor:pointer}
.msg{background:rgba(16,17,14,.78);border-left:3px solid var(--brass);padding:4px 10px;font-size:14px;animation:fin .25s ease-out;transition:opacity .6s}
@keyframes fin{from{transform:translateX(-12px);opacity:0}to{transform:none;opacity:1}}
/* rinforzi */
#shop{right:max(12px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 74px);width:236px;max-height:calc(100% - 300px);display:flex;flex-direction:column}
#shop .hd{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;border-bottom:1px solid var(--line)}
#shop .hd b{font-family:var(--f-disp);font-weight:400;font-size:17px;letter-spacing:.05em;color:var(--brass2)}
.tabs{display:flex;gap:4px}
.tabs button{padding:3px 8px;font-size:13px}
.tabs button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass2)}
#shopList{overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:4px}
.card{display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;padding:6px 8px;background:#1f211b;border:1px solid var(--line)}
.card .n{font-weight:600;font-size:15px}
.card .c{font-family:var(--f-num);color:var(--brass2);font-size:14px}
.card .d{grid-column:1/-1;font-size:12px;color:var(--muted);line-height:1.25}
#queue{padding:6px 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;font-size:13px}
#queue:empty{display:none}
.qi{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.qi .pb{grid-column:1/-1;height:3px;background:#0c0d0a}.qi .pb i{display:block;height:100%;background:var(--brass)}
#shopToggle{display:none}
/* minimappa */
#mini{left:max(12px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);padding:4px}
#mini canvas{display:block;width:196px;height:196px;cursor:pointer}
#mini.big canvas{width:392px;height:392px}
#mini .miniBtns{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:center;gap:3px}
#mini .miniBtns button{width:26px;height:26px;padding:0;font-size:16px;line-height:1;background:rgba(20,20,16,.75)}
#mini .miniBtns span{font-size:11px;color:var(--fg);background:rgba(20,20,16,.75);padding:1px 3px;border-radius:2px}
/* selezione */
#sel{left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);min-width:340px;max-width:min(620px,calc(100% - 470px));padding:8px 12px;display:flex;flex-direction:column;gap:6px}
#sel:empty{display:none}
.selrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.uname{font-family:var(--f-disp);font-size:19px;letter-spacing:.03em}
.stars{color:var(--brass2);letter-spacing:2px}
.bars{display:grid;grid-template-columns:auto 120px auto;gap:3px 8px;align-items:center;font-size:12px;color:var(--muted)}
.bar{height:7px;background:#0c0d0a;border:1px solid var(--line)}.bar i{display:block;height:100%}
.armor{display:flex;gap:6px;font-size:12px;color:var(--muted)}.armor b{font-family:var(--f-num);color:var(--fg);font-weight:500}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{font-size:13px;padding:3px 8px}
.acts{display:flex;gap:4px;flex-wrap:wrap}
.acts button{padding:4px 9px;font-size:13px}
.hint{font-size:12px;color:var(--muted)}
/* schermate */
.screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:radial-gradient(ellipse at 30% 40%,rgba(10,10,8,.15),rgba(10,10,8,.72));overflow-y:auto}
.menuBox{width:min(980px,100%);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.titleBlock{padding:8px 4px}
.titleBlock h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(46px,8vw,92px);line-height:.9;margin:0;color:#f1e7c8;text-shadow:0 3px 0 rgba(0,0,0,.45);letter-spacing:.01em;text-wrap:balance}
.titleBlock .sub{font-size:18px;color:var(--brass2);letter-spacing:.18em;text-transform:uppercase;margin-top:10px}
.titleBlock p{max-width:46ch;color:#d6cfb8;font-size:16px;line-height:1.45}
.stamp{display:inline-block;border:2px solid var(--bad);color:var(--bad);font-family:var(--f-disp);padding:2px 10px;transform:rotate(-3deg);margin-top:6px;font-size:14px;letter-spacing:.1em;opacity:.85}
.box{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.box h2{font-family:var(--f-disp);font-weight:400;font-size:20px;margin:0;color:var(--brass2);letter-spacing:.04em}
.box h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:4px 0 0;font-weight:600}
.sidePick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sidePick button{padding:10px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.sidePick button b{font-family:var(--f-disp);font-weight:400;font-size:20px}
.sidePick button span{font-size:12px;color:var(--muted)}
.sidePick button[aria-pressed="true"].s0{border-color:var(--axis);box-shadow:inset 0 0 0 1px var(--axis)}
.sidePick button[aria-pressed="true"].s1{border-color:var(--allies);box-shadow:inset 0 0 0 1px var(--allies)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row>button{flex:1}
#lobbyList{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}
.lob{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#1f211b;border:1px solid var(--line);padding:6px 10px}
.lob .code{font-family:var(--f-num);color:var(--brass2);letter-spacing:.12em}
input[type=text]{font-family:var(--f-num);font-size:16px;letter-spacing:.14em;text-transform:lowercase;background:#0f100d;color:var(--fg);border:1px solid var(--line2);border-radius:3px;padding:7px 10px;width:9ch;flex:1;min-width:0}
select#mapPick{font-family:var(--f-ui);font-size:17px;background:#0f100d;color:var(--fg);border:1px solid var(--line2);border-radius:3px;padding:7px 10px;width:100%;cursor:pointer}
select#mapPick:focus{outline:none;border-color:var(--brass)}
#mapDescr{margin-top:-6px}
.note{font-size:13px;color:var(--muted);line-height:1.4}
#waitLink{-webkit-user-select:text;user-select:text;word-break:break-all;font-family:var(--f-num);color:var(--fg)}
.bigcode{font-family:var(--f-num);font-size:42px;letter-spacing:.24em;color:var(--brass2);text-align:center;padding:6px 0}
.help{width:min(820px,100%)}
.help .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.help ul{margin:0;padding-left:18px;line-height:1.5;color:#d9d2bc}
.help kbd{font-family:var(--f-num);font-size:12px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:3px;padding:0 5px;background:#1d1f19}
.endBox{width:min(520px,100%);text-align:center}
.endBox h2{font-size:44px}
.stats{display:grid;grid-template-columns:1fr auto auto;gap:4px 16px;text-align:left;font-size:15px}
.stats .num{text-align:right}
@media (max-width:820px){
  .menuBox{grid-template-columns:1fr}
  #shop{width:200px;max-height:calc(100% - 330px)}
  #shop.closed #shopBody{display:none}
  #shopToggle{display:inline-block}
  #sel{left:max(12px,env(safe-area-inset-left,0px));transform:none;right:max(12px,env(safe-area-inset-right,0px));min-width:0;max-width:none;bottom:calc(env(safe-area-inset-bottom,0px) + 132px)}
  #mini canvas{width:112px;height:112px}
  #mini.big canvas{width:224px;height:224px}
  #score{max-width:none}
  #res .lab{display:none}
  .help .cols{grid-template-columns:1fr}
  #flagsRow .fname{display:none}
}
@media (prefers-reduced-motion:reduce){.msg{animation:none}}

.natPick{grid-template-columns:repeat(3,1fr)}
.natPick button b{font-size:16px}
.sidePick button:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}
/* ---------- pannello dell'unità ---------- */
#sel.one{min-width:min(720px,calc(100% - 470px));max-width:min(820px,calc(100% - 470px))}
.ugrid{display:grid;grid-template-columns:168px minmax(0,1fr) auto;gap:12px;align-items:start}
.portrait{width:168px;height:124px;border:1px solid var(--line);border-radius:3px;background:radial-gradient(ellipse at 50% 70%,#3a3a2c 0%,#1b1c16 70%);overflow:hidden;position:relative}
.portrait canvas{display:block;width:100%!important;height:100%!important}
.portrait::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.umid{display:flex;flex-direction:column;gap:6px;min-width:0}
.utop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.utop .uname{font-family:var(--f-disp);font-size:20px;color:var(--fg);letter-spacing:.02em}
.utop .unat{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.utop .lvl{margin-left:auto;font-family:var(--f-num);font-size:12px;color:#1a160c;background:var(--brass2);padding:1px 7px;border-radius:2px}
.umid .bars{grid-template-columns:auto minmax(80px,1fr) auto}
.weapons{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:5px}
.wrow b{color:var(--fg);font-weight:600;margin-right:6px}
.wst b{color:var(--brass2);font-family:var(--f-num);font-weight:500}
.wst i{font-style:normal;color:#9fb7c9;margin-right:4px}
.uright{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:124px}
.uright .lab,.segs .lab{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.armorSvg{width:104px;height:130px}
.armorSvg polygon,.armorSvg rect{fill:rgb(110,160,80);stroke:#11120e;stroke-width:1.5;transition:fill .4s}
.armorSvg rect.gun{fill:#4a4a3e}
.armorSvg text{font-family:var(--f-num);font-size:11px;fill:#fff;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#000;stroke-width:2.5px;pointer-events:none}
.comps{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:12px}
.comp{display:flex;align-items:center;gap:5px;color:var(--fg)}
.comp i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1px #000}
.comp.dm i{background:#e0a33a}.comp.ko i{background:var(--bad)}.comp.ko{color:#ff9a85}
.segs{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.segs .lab{min-width:58px}
.segs button{padding:3px 8px;font-size:12px}
.segs button[aria-pressed="true"],.acts button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass2);background:#2c2a1e}
.fortCard .n::before{content:"⛨ ";color:var(--brass)}
@media (max-width:900px){
  #sel.one{min-width:0;max-width:none}
  .ugrid{grid-template-columns:110px minmax(0,1fr)}
  .portrait{width:110px;height:84px}
  .uright{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .armorSvg{width:70px;height:88px}
}
#shop{width:262px}
#shop .tabs{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
#shop .tabs button{padding:3px 6px;font-size:12px}
/* ---------- aerei ---------- */
.airCard .acts{grid-column:1/-1;margin-top:3px}
/* ---------- rinforzi e costruzioni: pannello compatto (ottobre 2026) ---------- */
#shop{width:272px;max-height:calc(100% - 74px - 230px - env(safe-area-inset-top,0px));overflow:hidden}
#shopBody{display:flex;flex-direction:column;min-height:0;flex:1}
#shopList{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:6px;gap:4px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
#shopList.grid{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:5px}
#shopList.grid .hint,#shopList.grid .shopSec{grid-column:1/-1}
.shopSec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:4px 2px 0;border-bottom:1px solid var(--line);margin-bottom:1px}
.tile{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;gap:1px 6px;align-items:center;text-align:left;padding:6px 7px;background:#1f211b;border:1px solid var(--line);min-height:50px}
.tile svg,.card.row1 svg{width:22px;height:22px;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;grid-row:1/3}
.tile .n{font-weight:600;font-size:13px;line-height:1.1}
.tile .c{font-family:var(--f-num);color:var(--brass2);font-size:12px}
.tile:hover:not(:disabled) svg,.card.row1:hover:not(:disabled) svg{stroke:var(--brass2)}
.tile:disabled svg,.card.row1:disabled svg{stroke:var(--muted)}
.card.row1{grid-template-columns:22px 1fr auto;align-items:center;gap:0 8px;padding:5px 8px}
.card.row1 svg{grid-row:auto}
.card.row1 .n{font-size:14px}
#shopInfo{flex:none;min-height:46px;max-height:64px;overflow:hidden;padding:6px 9px;border-top:1px solid var(--line);font-size:12px;line-height:1.3;color:#cfc8b2;background:rgba(12,13,10,.35)}
#shopInfo:empty{display:none}
#res{flex-wrap:wrap}
@media (max-width:820px){#shop{width:220px}#shopList.grid{grid-template-columns:1fr}}
/* radar: pannello della stazione */
.radarTag{display:inline-block;font-size:11px;padding:1px 6px;border:1px solid var(--line2);border-radius:2px;color:#9fd3c0;margin-left:6px}

.tile.fortCard .n::before{content:none}
#shopInfo{min-height:0;font-size:11.5px}

/* menu secondo la selezione: senza fabbrica, tenda, aeroporto o soldati il pannello resta piccolo */
#shop.idle .tabs button:not(#shopToggle){display:none}
#shop.idle #shopInfo{display:none}
.ctxHint{font-size:12.5px;line-height:1.4;color:#d6cfb8;padding:4px 2px}
.ctxHint b{color:var(--brass2);font-weight:600}
/* avversario: CPU o giocatore online */
.oppPick button[aria-pressed="true"]{border-color:var(--brass2);box-shadow:inset 0 0 0 1px var(--brass2)}
#cpuBox,#netBox{display:flex;flex-direction:column;gap:10px}
#cpuBox[hidden],#netBox[hidden]{display:none}
#lobbyList{display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto}
.lob{grid-template-columns:1fr}
.lob.hl{border-color:var(--brass2)}
.lobT{font-size:13px}
.lobB{display:flex;gap:6px;flex-wrap:wrap}
.lobB button{padding:5px 9px;font-size:12px}
#netState{font-size:12px}
#waitLink{word-break:break-all;font-family:var(--f-num);color:var(--brass2)}

/* schede delle costruzioni (22 ottobre 2026): produzione, fanteria, genio, muri */
.subtabs{grid-column:1/-1;display:flex;gap:3px;margin:0 0 2px}
.subtabs button{flex:1 1 0;min-width:0;padding:5px 2px;font-size:12px;letter-spacing:.04em;background:#1a1c17;border:1px solid var(--line);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subtabs button[aria-pressed="true"]{color:var(--brass2);border-color:var(--brass);background:#24261e}
.subtabs button:hover{color:var(--brass2)}

/* schermaglia (24 ottobre 2026, sera): ruolo, preparazione, scelta del ruolo nel menu (06zc-schermaglia.js) */
#res .num.skRole{font-family:var(--f-num);font-size:15px;letter-spacing:.08em}
#res .num.skPrep{font-family:var(--f-num);font-size:18px;color:var(--brass2)}
#res #skRis{font-family:var(--f-num);font-size:18px;color:var(--brass2)}
#res #skRis.low{color:#d8553c}
#shopList .c.dear{color:#d0a03f}
#shopList .c.dear .rc{background:#9a6a1e}
.rolePick{grid-template-columns:1fr 1fr 1fr}
.rolePick button[aria-pressed="true"]{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
#topBtns #bPronto{border-color:var(--brass);color:var(--brass2)}
#topBtns #bResa{color:#e08a72}
#topBtns #bAir[aria-pressed="true"]{border-color:var(--brass);color:var(--brass2)}
@media (max-width:700px){.rolePick{grid-template-columns:1fr}}
/* casella delle coordinate dell'artiglieria (26 ottobre 2026) */
#sel input.coordIn{width:9.5em;padding:3px 6px;font:600 13px "IBM Plex Mono",monospace;color:var(--fg);background:rgba(10,10,8,.6);border:1px solid rgba(232,226,207,.35);border-radius:3px;text-transform:uppercase}
#sel input.coordIn:focus{outline:none;border-color:#e3c06e}
#mini .miniBtns button[aria-pressed="true"]{background:rgba(227,192,110,.35)}
/* guida a mano degli aerei (26 ottobre 2026, 02zz-pilotaggio.js): riquadro di volo sopra la minimappa */
#volo{left:max(12px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 230px);width:262px;padding:7px 10px 6px;display:flex;flex-direction:column;gap:4px;font-size:13px;pointer-events:none}
#volo .vt{font-family:var(--f-disp);font-size:15px;letter-spacing:.04em;color:var(--brass2);line-height:1.15}
#volo .vr{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:6px}
#volo .vr.nb{grid-template-columns:62px 1fr}
#volo .vr.nb b{text-align:right}
#volo .vl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
#volo .vr b{font-weight:500;color:var(--fg);white-space:nowrap}
#volo .tbar{min-width:40px}
#volo .vw{font-weight:700;font-size:12px;letter-spacing:.04em;line-height:1.25}
#volo .vh{font-size:11px;color:var(--muted)}
/* contatore dei fotogrammi (F8, 26 ottobre 2026) */
#fps{left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 66px);padding:3px 10px;font-size:13px;pointer-events:none}
/* ---------- pannello dell'unità a striscia bassa (27 ottobre 2026) ----------
   Prima era un blocco alto al centro (ritratto, barre e armi sopra; postura, ordini e pulsanti sotto) che copriva la vista.
   Ora è una striscia lungo il bordo basso, dalla minimappa al bordo destro, con le parti affiancate: a sinistra la scheda
   dell'unità (ritratto | nome e barre | armi e note | corazza), a destra i comandi (.ucmd, 10-main.js). Stessi contenuti, colori e
   pulsanti. Sotto i 900 px di larghezza (telefoni, finestre strette) i comandi tornano sotto la scheda, come prima. */
.ucmd{display:flex;flex-direction:column;gap:6px;min-width:0}
@media (min-width:901px){
  #sel{left:calc(max(12px,env(safe-area-inset-left,0px)) + 214px);right:max(12px,env(safe-area-inset-right,0px));transform:none;min-width:0;max-width:none;
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);padding:7px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,420px);column-gap:14px;align-items:start;
    background:rgba(20,22,18,.75);max-height:calc(100% - 300px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  #mini.big ~ #sel{left:calc(max(12px,env(safe-area-inset-left,0px)) + 410px)}
  /* più unità: l'elenco dei tipi è corto, la striscia è larga solo quanto serve */
  #sel:not(.one){right:auto;grid-template-columns:minmax(0,560px) minmax(330px,420px)}
  #sel.one{min-width:0;max-width:none}
  #sel>.ucmd{gap:4px}
  .ugrid{grid-template-columns:124px minmax(0,1fr) auto;gap:12px}
  .portrait{width:124px;height:96px}
  .umid{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:4px}
  .umid .utop{grid-column:1/-1}
  .umid .utop .uname{font-size:18px}
  .umid .bars{grid-column:1;grid-row:2;gap:2px 8px;grid-template-columns:auto minmax(70px,1fr) auto}
  .umid>.hint{grid-column:1;grid-row:3;align-self:end}
  .umid .weapons{grid-column:2;grid-row:2/span 2;max-height:94px;overflow-y:auto;border-top:none;border-left:1px solid var(--line);padding:0 0 0 10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .uright{display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:2px;align-items:center;min-width:0}
  .uright .lab{grid-column:1;justify-self:center}
  .uright .armorSvg{grid-column:1;width:66px;height:82px}
  .uright .comps{grid-column:2;grid-row:1/span 2;grid-template-columns:1fr;gap:3px}
  #sel .segs,#sel .acts{gap:3px}
  #sel .acts button{padding:3px 8px;font-size:12.5px}
  #sel .ucmd>.hint{font-size:11.5px}
}
@media (min-width:901px) and (max-width:1180px){
  /* finestre medie: i comandi vanno sotto la scheda, la striscia resta larga e bassa */
  #sel{grid-template-columns:minmax(0,1fr);row-gap:6px}
}
/* Fronte: economia (js/fronte/07-economia-ui.js, 27 ottobre 2026) */
#res .big.rv{color:#d9b46a}.rc.rv{background:#7a5a24}
#res .big.low,#res .num.low{color:var(--bad)!important}
#res .big.full{text-decoration:underline dotted}
.ecoBox{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;padding:4px 2px 6px;font-size:14px}
.ecoRow{display:contents}.ecoRow .lab{color:var(--muted)}.ecoRow .num{font-family:var(--f-num);font-size:13px}.ecoRow .bad{color:var(--bad)}
#shopList .acts .lab{align-self:center;color:var(--muted);font-size:13px;min-width:74px}
.subtabs{flex-wrap:wrap}.subtabs button{min-width:72px}
/* Fronte online (js/fronte/08-online.js) */
#onBox h3{margin-top:10px}
.onList{display:flex;flex-direction:column;gap:4px}
.onRow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:rgba(0,0,0,.18)}
.onPick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;margin:6px 0}
.onPick label{display:flex;align-items:center;gap:6px;justify-content:space-between}
.onPick input{width:54px;background:#22241d;color:var(--fg);border:1px solid var(--line);border-radius:3px;padding:3px 5px;font:inherit}
.onIng{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
#onRit{border-color:var(--bad);color:#ffb3a4}
#menu{overflow-y:auto}
/* Fronte (28 ottobre 2026): la descrizione di un pulsante del menu esce a sinistra del menu, intera (10-main.js, showInfo) */
#shopTip{position:fixed;z-index:30;pointer-events:none;background:rgba(20,21,17,.94);border:1px solid var(--line2);border-left:3px solid var(--brass2);border-radius:3px;padding:7px 10px;color:#e6dfc8;font-size:12.5px;line-height:1.4;box-shadow:0 4px 14px rgba(0,0,0,.45)}
#shopTip[hidden]{display:none}
/* Fronte: Obiettivi (28 ottobre 2026) — il prossimo passo sotto la barra in alto, al centro; l'elenco nel pannello Comando */
#frObj{position:absolute;top:calc(env(safe-area-inset-top,0px) + 66px);left:50%;transform:translateX(-50%);width:min(440px,60vw);background:rgba(20,21,17,.88);border:1px solid var(--line2);border-left:3px solid var(--brass2);border-radius:3px;padding:6px 10px 7px;color:#e6dfc8;font-size:12.5px;line-height:1.35;pointer-events:auto;z-index:5}
#frObj .obT{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass2)}
#frObj .obP{color:#9fd36b;text-transform:none;letter-spacing:0}
#frObj .obX{margin-left:auto;background:none;border:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
#frObj .obS{font-weight:600;font-size:14px;margin-top:2px}
#frObj .obH{color:#bdb59e;margin-top:2px}
.obList{display:flex;flex-direction:column;gap:2px;padding:2px 2px 6px}
.obRow{display:flex;gap:7px;font-size:12.5px;line-height:1.3;color:#d6cfb8}
.obRow .obK{flex:none;width:16px;text-align:center;color:var(--muted)}
.obRow.ok{color:var(--muted)}.obRow.ok .obK{color:#9fd36b}
.obRow i{color:#9fd36b;font-style:normal}
@media (max-width:820px){#frObj{width:min(300px,70vw);font-size:11.5px}}

/* base nuova del Fronte: scritta in cima al menu bloccato (js/fronte/07-economia-ui.js, 28 ottobre 2026) */
#shopList .frPkNote{grid-column:1/-1;color:#e3c06e;font-size:13px;font-weight:600;padding:6px 4px}
#shopList button.frPkOk{outline:2px solid #e3c06e;outline-offset:-2px}
/* Fronte: finestra "Giocatori e attacchi" del centro di comando e attacco (js/fronte/08-online.js, 28 ottobre 2026) */
.frWin{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);-webkit-user-select:text;user-select:text}
.frWinBox{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 60px);display:flex;flex-direction:column;background:var(--panel2);border:1px solid var(--line2);border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.frWinHead{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);font-size:17px;color:var(--brass2)}
.frWinX{font-size:20px;line-height:1;padding:2px 9px}
.frWinBody{overflow:auto;padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px}
.frWinBody .onRow span{flex:1}
.frSto div{padding:2px 0;border-bottom:1px dotted var(--line)}
.frSearch{background:#22241d;color:var(--fg);border:1px solid var(--line);border-radius:3px;padding:5px 7px;font:inherit}
.frModes{display:flex;gap:6px;align-items:center}.frModes .lab{color:var(--muted);margin-right:4px}
.frModes button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass2)}
.frAuto{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}.frAuto .note{flex-basis:100%}
.frAuto select{background:#22241d;color:var(--fg);border:1px solid var(--line);border-radius:3px;padding:3px 5px;font:inherit}
.frBar{height:10px;border:1px solid var(--line2);border-radius:3px;background:rgba(0,0,0,.3);margin:8px 0;overflow:hidden}
.frBar i{display:block;height:100%;width:0;background:var(--brass);transition:width .2s}
.note.bad{color:var(--bad)}
/* attacco: pulsanti in alto accesi quando il modo automatico o la ritirata sono attivi (js/fronte/08-online.js) */
#topBtns button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass2);background:rgba(201,162,74,.18)}
#topBtns button:disabled{opacity:.75;cursor:default}
/* notifiche dal comando (js/10-main.js, 28 ottobre 2026): registro dei messaggi, si apre dal pulsante Notifiche in alto */
#bLog #logN{display:inline-block;min-width:18px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-family:var(--f-num);font-size:11px;line-height:17px;text-align:center}
#bLog #logN[hidden]{display:none}
#bLog[aria-pressed="true"]{border-color:var(--brass);color:var(--brass2)}
#logBox{top:calc(env(safe-area-inset-top,0px) + 74px);left:max(12px,env(safe-area-inset-left,0px));width:min(400px,calc(100vw - 24px));max-height:min(62vh,560px);display:flex;flex-direction:column;z-index:20;-webkit-user-select:text;user-select:text}
#logBox[hidden]{display:none}
.logHd{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--brass2);font-size:15px}
.logHd span{display:flex;gap:4px}.logHd button{padding:3px 9px}
#logList{overflow:auto;padding:6px 8px 8px;display:flex;flex-direction:column;gap:3px}
.logRow{display:flex;gap:8px;padding:4px 8px;border-left:3px solid var(--brass);background:rgba(0,0,0,.22);font-size:13.5px;line-height:1.35}
.logT{flex:none;color:var(--muted);font-family:var(--f-num);font-size:12px;padding-top:1px}
.logX{flex:1}
.logEmpty{color:var(--muted);padding:8px}
/* pannello Comando a schede (js/fronte/07-economia-ui.js, 28 ottobre 2026): Risorse, Obiettivi, Reparti */
.cmdTabs{margin:0 0 6px}
.resCards{display:flex;flex-direction:column;gap:5px;margin:0 0 6px}
.resCard{padding:5px 8px 6px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:3px}
.resCard.bad{border-color:var(--bad)}
.rcTop{display:flex;justify-content:space-between;align-items:baseline}
.rcName{color:var(--fg);font-size:14px;letter-spacing:.02em}
.rcNum{font-family:var(--f-num);font-size:15px;color:var(--brass2)}.rcNum small{font-size:11px;color:var(--muted)}
.rcBar{height:4px;margin:4px 0 3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.rcBar i{display:block;height:100%;background:var(--brass)}
.resCard.bad .rcBar i{background:var(--bad)}
.rcSub{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)}
.rcSub .up{color:#9fd36b;font-family:var(--f-num)}.rcSub .down{color:var(--bad);font-family:var(--f-num)}.rcSub span:first-child{font-family:var(--f-num)}
.razRow .lab{min-width:76px}
.acts button.alarm{border-color:var(--bad)}
.ecoBox.popBox .num{font-family:var(--f-ui);font-size:13.5px}

/* tabellone del mondo nel menu (29 ottobre 2026, fronte/11-mondo.js) */
.frMondo{display:flex;flex-direction:column;gap:6px;width:100%;max-width:440px}
.frMondoTela{display:block;border:1px solid var(--line2);border-radius:3px;cursor:pointer;touch-action:manipulation;background:#0c0d0a}
.frMondoInfo{min-height:2.6em}
#onScelta,#onMondo{display:flex;flex-direction:column;gap:8px}