:root{--bg:#05070d;--panel:#0d1424;--panel2:#141e33;--line:#2a3b5e;--txt:#d8e6ff;--dim:#7d8fb3;--acc:#38e1c6;--warn:#ffb340;--bad:#ff4d5e;--good:#5dff8a;--vio:#a77bff;
--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:ui-monospace,Menlo,"SF Mono",Consolas,monospace;font-size:14px;overflow:hidden;overscroll-behavior:none}
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:var(--st) var(--sr) 0 var(--sl)}
.screen.active{display:flex}
button{font:inherit;color:var(--txt);background:linear-gradient(#1b2a48,#111b30);border:1px solid var(--line);border-radius:8px;padding:9px 12px;touch-action:manipulation;cursor:pointer;min-height:40px}
button:active{filter:brightness(1.5)}
button:disabled{opacity:.35}
button.ghost{background:transparent}
button.big{font-size:18px;padding:14px 18px;width:100%;margin:6px 0;letter-spacing:2px}
button.sm{min-height:32px;padding:4px 10px}
button.wide{flex:1}
button.on{border-color:var(--acc);color:var(--acc);box-shadow:0 0 8px #38e1c655 inset}
button.danger{border-color:var(--bad);color:#ffc0c6}
.hidden{display:none!important}
/* title */
#titleCanvas{position:absolute;inset:0;width:100%;height:100%}
.title-wrap{position:relative;margin:auto;width:min(92vw,420px);text-align:center;padding:20px}
#logoCanvas{width:100%;height:auto;display:block;margin:0 auto 18px;filter:drop-shadow(0 3px 6px #000c)}
#scr-title .title-wrap{margin:auto auto 9vh}
#scr-title button.big{background:#141a26e6;border-color:#c9b48a;color:#f1e6cc;font-weight:700;letter-spacing:3px}
.logo{font-size:40px;font-weight:900;letter-spacing:6px;color:#e8c766;text-shadow:0 2px 0 #3a2a0c;line-height:1;margin-bottom:22px;font-family:Georgia,'Times New Roman',serif}
.logo span{font-size:30px;color:#e0b84a;letter-spacing:9px}
.tag{margin:10px 0 26px;color:#f0d6a2;letter-spacing:3px;text-transform:uppercase}
.credit{margin-top:18px;color:var(--dim);font-size:11px}
/* bars */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);font-weight:bold;letter-spacing:1px;gap:8px}
.bottombar{display:flex;gap:8px;padding:8px 10px calc(8px + var(--sb));background:var(--panel);border-top:1px solid var(--line);align-items:center}
.speeds{display:flex;gap:4px;flex:1}
.speeds button{flex:1;padding:6px 2px;font-size:12px}
.geo-map-wrap{position:relative;flex:1;min-height:150px;overflow:hidden;background:#020812}
#geoCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hint{position:absolute;right:8px;bottom:6px;font-size:11px;color:var(--dim);pointer-events:none}
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;background:var(--panel2)}
.reg{font-size:11px;padding:4px 6px;border:1px solid var(--line);border-radius:6px}
.reg .bar{height:5px;background:#222;border-radius:3px;margin-top:3px;overflow:hidden}
.reg .bar i{display:block;height:100%}
.reg.out{opacity:.4;text-decoration:line-through}
.ticker{font-size:11px;color:var(--dim);padding:4px 10px;height:46px;overflow:hidden;background:var(--panel2);border-top:1px solid var(--line)}
@media (orientation:landscape) and (max-height:500px){.regions{grid-template-columns:repeat(6,1fr)}.ticker{height:30px}}
/* base */
.tabs{display:flex;gap:4px;padding:6px;background:var(--panel2)}
.tab{flex:1;padding:8px 2px}
.tab.active{border-color:var(--acc);color:var(--acc)}
.base-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px 20px;-webkit-user-select:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
.card h3{margin:0 0 6px;font-size:15px;color:#fff;display:flex;justify-content:space-between;gap:6px;align-items:center}
.card .sub{color:var(--dim);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;font-size:11px;margin:6px 0;text-align:center}
.stats b{display:block;color:var(--acc);font-size:13px}
.eq{display:grid;grid-template-columns:1fr 1fr;gap:6px}
select{font:inherit;font-size:13px;color:var(--txt);background:#0a1120;border:1px solid var(--line);border-radius:6px;padding:7px 4px;width:100%}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed #1f2c47}
.row:last-child{border-bottom:none}
.pbar{height:8px;background:#1a2238;border-radius:4px;overflow:hidden;margin:6px 0}
.pbar i{display:block;height:100%;background:var(--acc)}
.tagp{font-size:11px;padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--dim)}
.tagp.ok{color:var(--good);border-color:#2d7a45}.tagp.bad{color:var(--bad);border-color:#7a2d36}.tagp.warn{color:var(--warn);border-color:#7a5a2d}
h4{margin:12px 0 6px;color:var(--vio);letter-spacing:1px;font-size:13px;text-transform:uppercase}
.chk{display:flex;align-items:center;gap:6px;font-size:13px}
.chk input{width:22px;height:22px}
/* tactical */
#tacCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;background:#000}
.tac-top{position:relative;z-index:2;display:flex;align-items:center;gap:6px;padding:6px 8px;background:#05070dd0;border-bottom:1px solid var(--line)}
#tacTurn{font-weight:bold;color:var(--acc);white-space:nowrap;font-size:12px}
#tacMsg{flex:1;font-size:12px;color:var(--warn);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tac-top-btns{display:flex;gap:4px;align-items:center}
.tac-panel{position:absolute;left:0;right:0;bottom:0;z-index:2;background:#05070de6;border-top:1px solid var(--line);padding:6px 8px calc(6px + var(--sb)) ;padding-left:calc(8px + var(--sl));padding-right:calc(8px + var(--sr))}
.unit-card{display:flex;gap:8px;align-items:center;font-size:12px;min-height:38px}
.unit-card .nm{font-weight:bold;color:#fff;font-size:13px}
.ubar{height:6px;background:#1a2238;border-radius:3px;overflow:hidden;width:90px;display:inline-block;vertical-align:middle}
.ubar i{display:block;height:100%}
.actions{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:6px}
.actions button{padding:6px 2px;font-size:12px;min-height:44px;line-height:1.15}
.actions button small{display:block;font-size:10px;color:var(--dim)}
.actions button.fire{border-color:#ff8a5c;color:#ffd2c0}
.alien-banner{position:absolute;top:40%;left:0;right:0;text-align:center;font-size:22px;letter-spacing:6px;color:var(--bad);text-shadow:0 0 12px var(--bad);pointer-events:none;z-index:3;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
/* modal */
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.modal-box{background:var(--panel);border:1px solid var(--acc);border-radius:12px;padding:12px 14px;width:min(94vw,440px);max-height:86vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 30px #38e1c633}
.modal-box h2{margin:0 0 6px;font-size:17px;color:var(--acc);letter-spacing:1px;flex:0 0 auto}
#modalBody{font-size:13px;line-height:1.45;overflow-y:auto;min-height:0;flex:1 1 auto}
#modalBody p{margin:6px 0}
.modal-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;flex:0 0 auto}
.modal-btns button{flex:1 1 40%}
@media (orientation:landscape){
  .modal-box{width:min(94vw,640px);max-height:88vh;padding:10px 12px}
  .modal-btns button{flex:1 1 30%;min-height:40px;font-size:12px;padding:6px 8px}
}
.airfight{font-size:12px;height:120px;overflow-y:auto;background:#060a14;border:1px solid var(--line);border-radius:6px;padding:6px;margin-top:6px}
.hpbars{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px}
/* ---- desert-military tactical panel (original design) ---- */
.tac-panel{background:linear-gradient(#2a261c,#1a1812);border-top:2px solid #8a7a52;box-shadow:0 -2px 0 #0e0d09}
.tac-panel,.tac-panel button{font-family:Impact,"Arial Narrow","Helvetica Neue",Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}
.unit-card .nm{color:#efe2bd;font-size:15px;letter-spacing:2px}
.unit-card .sub{color:#a99a74}
.bars{display:grid;grid-template-columns:auto 1fr auto auto 1fr auto;gap:2px 6px;align-items:center;font-size:11px;color:#cbb98a;margin-top:2px}
.bars b{color:#efe2bd;font-weight:normal;min-width:22px;text-align:right}
.bars .ubar{width:100%;height:7px;background:#0e0d09;border:1px solid #4a4330;border-radius:1px}
.actions button{background:linear-gradient(#4a4430,#36321f);border:1px solid #8a7a52;color:#efe2bd;border-radius:3px;box-shadow:inset 0 1px 0 #6a6040}
.actions button small{color:#bfae80}
.actions button:disabled{opacity:.45}
.actions button.danger{background:linear-gradient(#5a2a1c,#3e1c12);border-color:#b0603c}
.actions button.on{background:linear-gradient(#5a6a32,#3e4a22);border-color:#a8b86a}
.actions .handbox{background:#14130d;border:2px solid #8a7a52;display:flex;flex-direction:column;align-items:center;justify-content:center}
.handbox .hicon{font-size:15px;color:#e8c766;letter-spacing:0}
#tacTurn{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px}
.alien-banner{color:#e8b04a;text-shadow:0 0 10px #000;font-family:Impact,"Arial Narrow",sans-serif}
#invPanel{position:fixed;inset:0;z-index:50;background:#000a;display:flex;align-items:flex-end;justify-content:center;padding:10px;padding-bottom:calc(10px + var(--sb))}
.invbox{width:min(100%,560px);max-height:92vh;overflow:auto;background:linear-gradient(#2e2a1e,#1c1a12);border:2px solid #8a7a52;border-radius:6px;padding:10px;color:#efe2bd;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px}
.invhead{display:flex;gap:10px;align-items:center;margin-bottom:8px}.invhead b{flex:1;font-size:16px}
.invhead button{background:#5a6a32;border:1px solid #a8b86a;color:#fff;padding:6px 14px;border-radius:3px}
.invgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.slot{background:#14130d;border:1px solid #5a5238;border-radius:3px;padding:5px}
.slot.drop{border-color:#e8c766}
.slot[data-slot="pack"],.slot[data-slot="ground"]{grid-column:span 2}
.sl{font-size:11px;color:#cbb98a;display:flex;justify-content:space-between}.sl small{color:#8a7f60}
.cells{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;margin-top:3px}
.slot:not([data-slot="pack"]):not([data-slot="ground"]) .cells{grid-template-columns:repeat(4,1fr)}
.ec{height:24px;background:#22201a;border:1px dashed #3e3828}
.ic{height:24px;background:#5a5232;border:1px solid #c9b47a;color:#fff;font-size:10px;padding:0 2px;overflow:hidden;white-space:nowrap;border-radius:2px;min-height:0;font-family:inherit}
.ic.sel{background:#8a6a1c;border-color:#ffd84d}
/* appearance editor + supply list */
.lkwrap{display:flex;gap:10px;align-items:flex-start}
.lkprev{width:96px;height:144px;image-rendering:pixelated;background:#14100a;border:1px solid #8a7a52;flex:none}
.lkform{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.lkform label{display:flex;flex-direction:column;font-size:11px;color:#cbb98a;gap:2px}
.lkform input,.lkform select{font:inherit;font-size:13px;padding:4px;background:#14130d;color:#efe2bd;border:1px solid #5a5238;border-radius:3px;min-width:0}
.wstat{font-family:ui-monospace,monospace;font-size:10.5px;color:#d8c27a}
.row.locked{opacity:.6}
.regions{grid-template-columns:.7fr 1fr 1fr 1fr}
.reg.tab{cursor:pointer}
.reg.tab.on{border-color:#e8c766;background:#3a3220;box-shadow:inset 0 0 0 1px #e8c76655}
.reg .sub2{font-size:9px;opacity:.7}
@media (orientation:landscape) and (max-height:500px){.regions{grid-template-columns:repeat(4,1fr)}}
/* ---- metallic beveled battle panel ---- */
.tac-panel{background:linear-gradient(#3b3d38,#24251f 40%,#1a1b16);border-top:3px solid #9a9c90;box-shadow:0 -1px 0 #000,inset 0 1px 0 #d8dacc66}
.actions button,.stance button{background:linear-gradient(#80847a,#55594f 45%,#40443b 55%,#4c5046);border:2px solid;border-color:#c4c8b8 #2a2c26 #22241f #b0b4a4;color:#f4f0dc;text-shadow:0 1px 0 #000;border-radius:2px;box-shadow:inset 0 0 0 1px #00000055}
.actions button:active:not(:disabled),.stance button:active:not(:disabled){border-color:#22241f #b0b4a4 #c4c8b8 #2a2c26;background:linear-gradient(#40443b,#55594f)}
.actions button small,.stance button small{color:#e2d9a8}
.actions button.danger{background:linear-gradient(#a0503a,#6a2a1c 50%,#5a2216);border-color:#e09070 #3a120a #2a0e08 #c0705a}
.actions button.on{background:linear-gradient(#8a9a52,#5a6a2e 50%,#4a5a26);border-color:#d0e090 #2a3210 #222a0c #b0c070}
.actions .handbox{background:linear-gradient(#141510,#22231c);border:3px solid;border-color:#2a2c26 #b0b4a4 #c4c8b8 #22241f;padding:2px}
.handbox img{width:92%;max-height:26px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 1px 0 #000)}
.stance{display:flex;gap:5px;align-items:stretch;margin-top:5px}
.stance .stl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;color:#c8c0a0;letter-spacing:2px;align-self:center}
.stance button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;font-size:13px;padding:3px 4px}
.stance button svg{flex:none}
.stance button small{font-size:9px;margin-left:2px}
.stance button.on{background:linear-gradient(#d8b850,#a08028 50%,#8a6c1c);border-color:#fff0a0 #4a3a08 #3a2c04 #e8d070;color:#1a1408;text-shadow:none}
.stance button.on small{color:#3a2c08}
.rankbadge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:20px;padding:0 4px;margin-right:6px;background:linear-gradient(#f0d870,#b08a28);border:1px solid;border-color:#fff4b0 #5a4410 #4a380a #e0c060;color:#2a1e04;font-size:11px;letter-spacing:0;border-radius:2px;vertical-align:middle;text-shadow:none}
.unit-card .portrait{width:34px;height:50px;background:#0e0f0b;border:2px solid;border-color:#2a2c26 #b0b4a4 #c4c8b8 #22241f;flex:none}
/* ---- inventory (full body portrait layout) ---- */
.xframe{background:linear-gradient(#2a2d26,#191b16);border:4px solid;border-color:#b8bcac #2a2c26 #22241f #a0a494;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #00000088}
.invlay{display:grid;grid-template-columns:1fr 132px 1fr;gap:6px;align-items:start}
.invcol{display:flex;flex-direction:column;gap:6px}
.invmid{display:flex;flex-direction:column;align-items:center;background:radial-gradient(#3a3c30,#14150f);border:3px solid;border-color:#22241f #b0b4a4 #c4c8b8 #2a2c26;padding:4px 0}
.invfig{width:128px;height:192px;image-rendering:pixelated}
.invread{display:flex;flex-direction:column;font-size:11px;align-items:center;color:#d8d0a8}.invread b{color:#fff}
.invrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
.ammo{background:#14130d;border:1px solid #5a5238;border-radius:3px;padding:5px;font-size:11px;display:grid;grid-template-columns:70px 1fr;gap:4px;align-items:center}
.ammo .sl{grid-column:span 2}.ammo img{width:70px}
.slot{background:linear-gradient(#171812,#0f100b)}
.cells{grid-template-columns:repeat(4,1fr)!important}
.slot[data-slot="pack"] .cells,.slot[data-slot="ground"] .cells{grid-template-columns:repeat(8,1fr)!important}
.ec{height:30px;background:#1c1e17;border:1px solid #2e3026;box-shadow:inset 1px 1px 0 #00000088}
.ic{height:30px;position:relative;background:linear-gradient(#4a4e3e,#2e3126);border:1px solid #9aa08a;padding:1px}
.ic img{width:100%;height:100%;object-fit:contain}
.ic i{position:absolute;left:1px;bottom:0;font-size:7px;font-style:normal;color:#e8e0b8;text-shadow:0 0 2px #000;letter-spacing:0}
.invbtns{display:flex;gap:8px;justify-content:center}
.invbtns button{flex:1;max-width:140px;padding:9px 6px;font-family:inherit;font-size:13px;letter-spacing:2px;color:#f4f0dc;background:linear-gradient(#80847a,#55594f 45%,#40443b 55%,#4c5046);border:3px solid;border-color:#c4c8b8 #2a2c26 #22241f #b0b4a4;border-radius:2px}
.invbtns button.ok{background:linear-gradient(#8a9a52,#5a6a2e 50%,#4a5a26);border-color:#d0e090 #2a3210 #222a0c #b0c070}
.invbtns button:disabled{opacity:.4}
@media (max-width:420px){.invlay{grid-template-columns:1fr 104px 1fr}.invfig{width:100px;height:150px}}
.sl{font-size:9px;white-space:nowrap;overflow:hidden}.sl small{font-size:8px}
.slot{padding:3px 4px}
.slot[data-slot="pack"] .cells,.slot[data-slot="ground"] .cells{grid-template-columns:repeat(9,1fr)!important}
.ec,.ic{height:26px}
.invbox{padding:8px;max-height:96vh}
.invhead{margin-bottom:4px}
.ammo{font-size:10px}
.stance button{font-size:12px;min-height:36px}
.stance button.on small{display:none}
.actions button{min-height:40px;padding:4px 2px}
.actions{gap:4px;margin-top:5px}
.actions button.deploy{grid-column:span 4;font-size:18px;letter-spacing:3px;min-height:52px}
/* ---- base screen: art grid + right-hand button column ---- */
#scr-base{background:#141510}
.baseWrap{flex:1;display:flex;min-height:0}
#scr-base .base-body{flex:1;min-width:0}
.baseNav{width:112px;flex:none;display:flex;flex-direction:column;gap:5px;padding:6px 6px calc(6px + var(--sb));background:linear-gradient(#2e3128,#1a1c16);border-left:3px solid;border-color:#9a9e8e;box-shadow:inset 2px 0 0 #000}
.bnHead{display:flex;flex-direction:column;gap:2px;padding:4px;margin-bottom:2px;background:#0e0f0b;border:2px solid;border-color:#22241f #b0b4a4 #c4c8b8 #2a2c26;font-size:10px;color:#cfc6a0;line-height:1.2}
.bnHead b{font-size:12px;color:#f4e8b8;letter-spacing:1px}
#baseFunds{color:#e8d070;font-weight:bold}
.navb{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:12px;padding:8px 4px;min-height:38px;color:#f4f0dc;text-shadow:0 1px 0 #000;background:linear-gradient(#80847a,#55594f 45%,#40443b 55%,#4c5046);border:3px solid;border-color:#c4c8b8 #2a2c26 #22241f #b0b4a4;border-radius:2px}
.navb.active{background:linear-gradient(#d8b850,#a08028 50%,#8a6c1c);border-color:#fff0a0 #4a3a08 #3a2c04 #e8d070;color:#1a1408;text-shadow:none}
.navb.build{margin-top:auto;background:linear-gradient(#8a9a52,#5a6a2e 50%,#4a5a26);border-color:#d0e090 #2a3210 #222a0c #b0c070}
.navb.map{background:linear-gradient(#5a7a8a,#36505e 50%,#2a4250);border-color:#a8d0e0 #10222a #0c1a22 #90b8c8}
.bgrid{display:grid;gap:0;aspect-ratio:1;width:100%;max-width:calc(100vh - 70px);margin:0 auto;border:4px solid;border-color:#22241f #b0b4a4 #c4c8b8 #2a2c26;background:#b49468;box-shadow:0 0 0 2px #000}
.bcell{position:relative;min-height:0;padding:0;border:0;border-radius:0;background-size:100% 100%;image-rendering:pixelated;box-shadow:inset 0 0 0 1px #00000030}
.bcell.empty span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:#ffffff55}
.bcell.empty.hint{animation:hintp 1s infinite alternate}
@keyframes hintp{to{box-shadow:inset 0 0 0 3px #ffe14d}}
.bcell .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:bold 15px Impact,"Arial Narrow",sans-serif;color:#ffe14d;text-shadow:0 0 3px #000,0 0 2px #000}
.bcell .blab{position:absolute;left:2px;bottom:1px;font:9px ui-monospace,monospace;font-style:normal;color:#fff;background:#0008;padding:0 2px;opacity:0;transition:opacity .2s}
.bgrid.labels .blab{opacity:.85}
.bfoot{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:6px}
@media (orientation:landscape){.baseNav{width:150px}.navb{min-height:30px;padding:5px 4px;font-size:12px}#scr-base .base-body{padding-top:6px}.bgrid{max-width:calc(100vh - 64px)}}
.navb{flex:0 0 auto;height:auto;min-height:0;padding:10px 4px}
.lkpics{display:flex;flex-direction:column;gap:4px;align-items:center;flex:none}
.lkprev{width:128px;height:160px;image-rendering:auto;object-fit:cover}
.lkspr{width:64px;height:96px;image-rendering:pixelated;background:#b49468;border:1px solid #8a7a52}
.invmid{position:relative}
.invfig.paint{width:128px;height:160px;image-rendering:auto;object-fit:cover;border:1px solid #000}
.invmini{position:absolute;right:2px;top:110px;width:40px;height:60px;image-rendering:pixelated;filter:drop-shadow(0 0 2px #000)}
.aarstrip{display:flex;gap:6px;overflow-x:auto;padding:6px 2px;margin:6px 0;background:#0c0d09;border:3px solid;border-color:#22241f #b0b4a4 #c4c8b8 #2a2c26}
.aarstrip figure{margin:0;flex:none;width:84px;text-align:center}
.aarstrip img{width:84px;height:105px;object-fit:cover;border:2px solid #8a7a52}
.aarstrip figure.kia img{filter:grayscale(1) brightness(.6);border-color:#a03a2a}
.aarstrip figcaption{font-size:10px;color:#e8dcb0;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px}
@media (max-width:420px){.invfig.paint{width:100px;height:125px}.invmini{top:80px}}
/* ---- main menu: teal beveled frame over a duotone collage ---- */
#scr-menu{background:#000;padding:0}
.tealframe{border:10px solid;border-color:#7fd8d0 #0e4a48 #0a3a38 #5ab8b0;box-shadow:0 0 0 2px #000,inset 0 0 0 3px #062826,inset 0 0 0 5px #3a9a94;background:#0a0c06}
.mmframe{position:absolute;inset:calc(env(safe-area-inset-top) + 4px) calc(env(safe-area-inset-right) + 4px) calc(env(safe-area-inset-bottom) + 4px) calc(env(safe-area-inset-left) + 4px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}
#menuArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;z-index:0}
.mmtitle{position:relative;z-index:1;margin-top:5%;text-align:center}
#menuLogo{width:min(86vw,560px);height:auto;aspect-ratio:132/22;image-rendering:pixelated;filter:drop-shadow(0 0 6px #d8f060) drop-shadow(0 0 14px #a8c030aa) drop-shadow(0 3px 0 #000)}
.mmver{font:11px ui-monospace,monospace;color:#d8e070;letter-spacing:3px;text-shadow:0 1px 0 #000;margin-top:4px}
.mmgrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(92%,560px);margin-bottom:6%}
.mmb{font-family:Impact,"Arial Narrow",sans-serif;font-size:17px;letter-spacing:2px;text-transform:uppercase;padding:14px 6px;color:#eafff8;text-shadow:0 2px 0 #062826;background:linear-gradient(#4ab8b0,#21807a 48%,#16625e 52%,#1c7470);border:4px solid;border-color:#a8fff4 #0a3634 #072a28 #84e4dc;border-radius:0;box-shadow:0 0 0 2px #000}
.mmb:active:not(:disabled){border-color:#072a28 #84e4dc #a8fff4 #0a3634;background:linear-gradient(#16625e,#21807a)}
.mmb:disabled{opacity:.45}
@media (orientation:landscape){.mmgrid{grid-template-columns:repeat(3,1fr);width:min(80%,720px);margin-bottom:4%}.mmtitle{margin-top:3%}#menuLogo{width:min(60vw,520px)}.mmb{padding:10px 6px}}
/* after-action screen uses the same frame */
.tealscreen{border:8px solid;border-color:#7fd8d0 #0e4a48 #0a3a38 #5ab8b0;box-shadow:inset 0 0 0 3px #062826;background:#0a0c08}
.tealscreen .topbar{background:linear-gradient(#21807a,#16625e);color:#eafff8;border-bottom:3px solid #0a3634;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:3px}
.tealscreen .bottombar{background:#0a0c08;border-top:3px solid #0a3634}
.tealscreen #btnDebriefOk{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:3px;color:#eafff8;background:linear-gradient(#4ab8b0,#21807a 48%,#16625e 52%,#1c7470);border:4px solid;border-color:#a8fff4 #0a3634 #072a28 #84e4dc;border-radius:0}
.fmwrap .row.fm{display:flex;gap:8px;align-items:center}.fmwrap .row.fm img{width:76px;flex:none}
#btnStart{animation:blink 1.2s infinite alternate}@keyframes blink{to{opacity:.55}}
/* appearance editor: no horizontal overflow on phones */
.lkform{min-width:0}.lkform label{min-width:0}
.lkprev{object-position:50% 15%}
@media (max-width:520px){.lkwrap{flex-direction:column;align-items:stretch}.lkpics{flex-direction:row;justify-content:center;align-items:flex-end;gap:10px}.lkprev{width:150px;height:200px}.lkspr{width:72px;height:108px}}
#toast{position:fixed;left:50%;top:calc(54px + env(safe-area-inset-top));transform:translate(-50%,-10px);background:#2a1610ee;color:#ffd9c0;border:1px solid #ff8a5c;padding:8px 14px;border-radius:6px;font:600 13px ui-monospace,monospace;z-index:90;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:80vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.tac-panel button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.tac-panel button.pressed{filter:brightness(1.35);transform:translateY(1px)}
.stance button.off{opacity:.55}
/* ===== LANDSCAPE-ONLY BATTLE LAYOUT: map on the left, XCOM-style control column on the right ===== */
:root{--tpw:clamp(268px,33vw,318px)}
@media (orientation:landscape){
  #scr-tac #tacCanvas{right:auto;width:calc(100% - var(--tpw))}
  #scr-tac .tac-top{position:absolute;left:0;right:var(--tpw);top:0;padding:4px 8px;padding-left:max(8px,env(safe-area-inset-left));min-height:40px}
  #scr-tac .tac-top button.sm{min-height:36px;min-width:40px}
  #tacMsg{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  #scr-tac .tac-panel{left:auto;top:0;bottom:0;right:0;width:var(--tpw);border-top:none;border-left:3px solid #9a9c90;display:flex;flex-direction:column;gap:3px;overflow-y:auto;overscroll-behavior:contain;
    padding:max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) 6px}
  #scr-tac .unit-card{min-height:0;gap:6px;font-size:10px}
  #scr-tac .unit-card .nm{font-size:12px;letter-spacing:1px;line-height:1.15}
  #scr-tac .unit-card .portrait{width:30px;height:44px}
  #scr-tac .stance{margin-top:2px;gap:3px}
  #scr-tac .stance .stl{display:none}
  #scr-tac .stance button{min-height:44px;flex-direction:column;gap:0;font-size:10px;padding:2px}
  #scr-tac .stance button small{font-size:8px;margin:0}
  #scr-tac .actions{grid-template-columns:repeat(3,1fr);gap:3px;margin-top:2px}
  #scr-tac .actions button{min-height:44px;font-size:10px;padding:2px 1px;letter-spacing:.5px}
  #scr-tac .actions button small{font-size:8px}
  #scr-tac .actions button.deploy{grid-column:span 3;min-height:56px}
  #scr-tac .alien-banner{right:var(--tpw)}
}
/* rotate-your-phone overlay (game is landscape only) */
#rotate{display:none}
@media (orientation:portrait){
  #rotate{display:flex;position:fixed;inset:0;z-index:999;background:radial-gradient(#1a2016,#05070a);flex-direction:column;align-items:center;justify-content:center;gap:22px;color:#d8e8a0;font:700 16px ui-monospace,monospace;letter-spacing:2px;text-align:center;padding:30px;touch-action:none}
  #rotate svg{width:110px;height:110px;animation:rotph 2.2s ease-in-out infinite}
  #rotate small{color:#9aa27a;font-size:12px;letter-spacing:1px;font-weight:400}
}
@keyframes rotph{0%,15%{transform:rotate(0)}45%,70%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
/* landscape inventory: body slots + portrait on the left, belt/ammo/pack/ground + buttons on the right, all on one screen */
@media (orientation:landscape){
  .invbox{width:min(98vw,900px);max-height:calc(100vh - 8px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 8px;padding:6px 8px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .invbox .invhead{grid-column:1/3;margin:0}
  .invbox .invlay{grid-template-columns:1fr 120px 1fr;gap:4px}
  .invbox .invfig.paint{width:116px;height:150px;object-fit:cover}
  .invbox .invside{display:flex;flex-direction:column;gap:4px;min-width:0}
  .invbox .invside .sub{font-size:10px;margin:2px 0!important}
  .invbox .invbtns button{min-height:44px}
  .invbox .invcol{gap:4px}
}
/* landscape theater map: map fills the left, controls in a right column */
@media (orientation:landscape){
  #scr-geo.active{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,26vw,250px);grid-template-rows:auto minmax(0,1fr) auto auto}
  #scr-geo .topbar{grid-column:1/3}
  #scr-geo .geo-map-wrap{grid-column:1;grid-row:2/5;min-height:0}
  #scr-geo .regions{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;align-content:start;overflow-y:auto;border-left:1px solid var(--line)}
  #scr-geo .regions > *{min-height:44px}
  #scr-geo .ticker{grid-column:2;grid-row:3;height:58px;border-left:1px solid var(--line);font-size:10px}
  #scr-geo .bottombar{grid-column:2;grid-row:4;flex-wrap:wrap;gap:4px;padding:5px 6px max(5px,var(--sb));border-left:1px solid var(--line)}
  #scr-geo .speeds{flex:1 1 100%}
  #scr-geo .speeds button,#scr-geo .bottombar>button{min-height:44px;padding:4px 6px}
  #scr-geo .bottombar>button#btnBase{flex:1}
}
/* contact buttons + ENEMY SPOTTED banner */
.contacts{position:absolute;z-index:3;left:max(6px,env(safe-area-inset-left));top:48px;display:flex;flex-direction:column;gap:5px;max-height:calc(100% - 60px);overflow-y:auto}
.contacts button{width:44px;height:44px;min-height:44px;padding:0;border-radius:4px;font:700 18px Impact,"Arial Narrow",sans-serif;color:#fff;background:linear-gradient(#d0402e,#8a1a10);border:2px solid;border-color:#ff9a80 #4a0a04 #3a0602 #e07060;box-shadow:0 2px 0 #000a;text-shadow:0 1px 0 #000}
.contacts button.on{background:linear-gradient(#ffe070,#c08a10);color:#2a1a00;border-color:#fff4b0 #5a3a00 #4a2a00 #ffe080;animation:cpulse 1s infinite}
@keyframes cpulse{50%{box-shadow:0 0 0 4px #ff4d3c88}}
.spot-banner{position:absolute;z-index:4;left:50%;top:50px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;min-height:44px;padding:6px 18px;background:linear-gradient(#8a1a10ee,#4a0a06ee);border:2px solid #ff8a6c;border-radius:4px;color:#fff;font:600 12px ui-monospace,monospace;letter-spacing:1px;box-shadow:0 0 18px #ff3a2a88}
.spot-banner b{font:700 17px Impact,"Arial Narrow",sans-serif;letter-spacing:3px;color:#ffe0d0}
.spot-banner small{font-size:9px;color:#ffc0a8}
.spot-banner.hidden{display:none}
.spot-banner.pop{animation:spop .35s ease-out}
@keyframes spop{0%{transform:translateX(-50%) scale(1.3);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
@media (orientation:landscape){.spot-banner{left:calc((100% - var(--tpw)) / 2)}}
.rpatch{width:19px;height:16px;vertical-align:-3px;margin-right:4px;border-radius:2px;box-shadow:0 1px 0 #0008}
.rankbadge .rpatch{width:16px;height:13px}
/* ---- squad roster list + operator profile (military look, landscape-first) ---- */
.bso{font-style:normal;color:#8f8462;font-size:10px}
.rhead{margin:0 0 6px}
.roster{display:flex;flex-direction:column;gap:4px}
.rrow{display:grid;grid-template-columns:40px 22px 46px minmax(0,1.6fr) minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:52px;padding:4px 10px 4px 4px;text-align:left;background:linear-gradient(#2e2a1e,#221f16);border:1px solid #6a5e40;border-radius:5px;color:#efe2bd}
.rrow:active{filter:brightness(1.3)}
.rthumb{width:40px;height:48px;object-fit:cover;object-position:50% 12%;border:1px solid #8a7a52;border-radius:2px;background:#14100a}
.rrow .rpatch{width:22px;height:19px;margin:0}
.rrank{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px;color:#d8c48a;font-size:14px}
.rname{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rspec{font-size:12px;color:#bfae80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rstat .tagp{white-space:nowrap}
.prof{background:linear-gradient(#2e2a1e,#1c1a12);border:2px solid #8a7a52;border-radius:6px;padding:6px 8px;color:#efe2bd}
.prof-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #5a5238;padding-bottom:5px;margin-bottom:6px}
.prof-nm{min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prof-nm h2{margin:0;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px;font-weight:normal;font-size:20px;color:#f0dca0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pspec{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:2px;font-size:12px;color:#1c1a12;background:#b8a46a;padding:2px 7px;border-radius:2px}
.prof-btns{display:flex;gap:5px;flex-shrink:0}
.prof-btns button{min-height:44px;min-width:44px;background:linear-gradient(#4a4430,#2e2a1e);border-color:#8a7a52;color:#f0dca0}
.prof-btns button.on{border-color:#d8c48a;box-shadow:0 0 8px #d8c48a44 inset;color:#fff3c8}
.prof-main{display:grid;grid-template-columns:minmax(150px,30%) minmax(0,1fr);gap:10px}
.prof-pic{border:2px solid #8a7a52;border-radius:3px;background:#14100a;overflow:hidden;align-self:start}
.prof-pic img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.prof-info{min-width:0;display:flex;flex-direction:column;gap:6px}
.pmeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 10px;font-size:12px}
.pmeta div{display:flex;flex-direction:column;min-width:0}
.pmeta span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#a8986a}
.pmeta b{font-weight:normal;color:#f0e4c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta div:first-child{grid-column:span 2}
.pstats{background:#14130d;border:1px solid #5a5238;border-radius:3px;padding:4px 6px}
.pst{display:grid;grid-template-columns:118px 46px minmax(0,1fr);align-items:center;gap:6px;height:19px;font-size:12px}
.pl{color:#d8c89a;white-space:nowrap}
.pv{font-weight:normal;text-align:right;color:#fff3c8;font-variant-numeric:tabular-nums}
.pg{font-style:normal;color:#9fe08a;font-size:10px;margin-left:2px}
.pbar{position:relative;height:11px;background:#0b0a07 repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / 14 - 1px),#3a3626 calc(100% / 14 - 1px),#3a3626 calc(100% / 14));border:1px solid #3e3a2a}
.pbar i{position:absolute;left:0;top:0;bottom:0;box-shadow:inset 0 1px 0 #ffffff30,inset 0 -2px 0 #00000040}
.pbar i.pgain{box-shadow:inset 0 1px 0 #ffffff60;opacity:.95}
.pscale{height:12px}.pbar.sc{background:none;border:0;height:12px}
.pbar.sc em{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:9px;color:#8f8462}
.pbar.sc em:first-child{transform:none}.pbar.sc em:last-child{transform:translateX(-100%)}
.pfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pfoot button{min-height:44px}
.ptog{min-height:44px;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid #8a7a52;border-radius:6px;background:#2e2a1e}
.ptog input{width:22px;height:22px}
.plegend i{display:inline-block;width:18px;height:8px;background:#c8e0a0;vertical-align:0;margin-right:3px}
.modal .eq label{display:flex;flex-direction:column;font-size:11px;gap:2px;color:#cbb98a}
.modal .eq select{min-height:40px}
@media (orientation:portrait){.prof-main{grid-template-columns:1fr}.prof-pic{max-width:240px}.pmeta{grid-template-columns:1fr 1fr}}
.pmeta{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.6fr))}
.pmeta div:first-child{grid-column:auto}
.pmeta div.pmr{grid-column:1 / -1}
.pbar i.pgain{outline:1px solid #ffffffa0;outline-offset:-1px}
/* landscape base nav: tabs in a 2-column grid so Build + Theater Map always fit (44px targets) */
@media (orientation:landscape){
  .baseNav{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;align-content:start;gap:5px;width:160px;overflow-y:auto;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .baseNav .bnHead{grid-column:1 / -1}
  .baseNav .navb{min-height:44px;padding:4px 2px;font-size:11px;letter-spacing:.5px}
  .baseNav .navb.build,.baseNav .navb.map{grid-column:1 / -1;margin-top:0}
}
/* view-level control: ▼ LVL n/4 ▲ in one action cell */
.actions .lvctl{display:grid;grid-template-columns:1fr auto 1fr;gap:2px;align-items:stretch;min-height:44px}
.actions .lvctl button{min-height:44px;padding:0;font-size:16px;line-height:1}
.actions .lvctl b{align-self:center;text-align:center;font-size:10px;line-height:1.1;color:#f4f0dc;letter-spacing:.5px;padding:0 1px}
.actions .lvctl b small{display:block;font-size:8px;color:#e2d9a8}
/* ---- pre-mission loadout (Navy SEAL styling) ---- */
#loPanel{position:fixed;inset:0;z-index:60;background:#0b0c09;display:flex;align-items:stretch;justify-content:center;padding:4px max(6px,env(safe-area-inset-right)) 4px max(6px,env(safe-area-inset-left));touch-action:pan-x;-webkit-user-select:none;user-select:none}
.lo-box{width:min(100%,960px);display:grid;grid-template-rows:auto 1fr auto auto;gap:3px;color:#c9c79a;font-family:"Stencil Std","Stencil",Impact,"Arial Narrow",sans-serif;letter-spacing:1px;text-transform:uppercase;min-height:0}
.lo-box.shake{animation:loShake .25s}
@keyframes loShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.lo-head{display:flex;align-items:center;gap:6px;min-height:38px;border-bottom:2px solid #3a3d2c;padding-bottom:2px}
.lo-rank{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(#5a5e3c,#34361f);border:1px solid #a8a878;color:#f0e8b8;padding:2px 6px;font-size:13px}
.lo-rank .rpatch{height:18px}
.lo-name{flex:1;min-width:0;color:#9fbf6a;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-name small{color:#c8b880;font-size:12px}
.lo-idx{color:#8a8a6a;font-size:12px}
.lo-btn{min-height:36px;min-width:44px;padding:2px 10px;font-family:inherit;font-size:14px;letter-spacing:1px;background:linear-gradient(#80847a,#55594f 45%,#40443b 55%,#4c5046);border:2px solid;border-color:#c4c8b8 #2a2c26 #22241f #b0b4a4;color:#f4f0dc;text-shadow:0 1px 0 #000;border-radius:2px}
.lo-btn.ok{background:linear-gradient(#8a9a52,#5a6a2e 50%,#4a5a26);border-color:#d0e090 #2a3210 #222a0c #b0c070;min-width:56px}
.lo-btn:active{filter:brightness(1.3)}
.lo-mid{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr) minmax(0,1.35fr);gap:5px;min-height:0;align-items:start}
.lo-col,.lo-side{display:flex;flex-direction:column;gap:3px;min-width:0}
.lo-fig{display:flex;align-items:center;justify-content:center;height:100%}
.lo-fig img{width:88px;height:132px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 2px #000)}
.lo-slot,.lo-gnd{background:#12130e;border:1px solid #3a3d2c;padding:2px 3px}
.lo-slot.drop,.lo-gnd.drop{border-color:#8aa052;box-shadow:inset 0 0 6px #8aa05255}
.lo-sl{font-size:10px;color:#9fbf6a;display:flex;justify-content:space-between;gap:4px;line-height:12px}
.lo-sl small{color:#b8a870;font-size:9px}
.lo-cells{display:grid;grid-auto-rows:22px;grid-auto-flow:row dense;gap:2px;margin-top:1px}
.lo-ec{background:#1c1e15;border:1px solid #2c2f22;box-shadow:inset 1px 1px 0 #00000088}
.lo-it{position:relative;min-height:0;height:auto;padding:1px;margin:0;background:linear-gradient(#4a4e36,#2c2f1f);border:1px solid #8a8f6a;border-radius:1px;touch-action:none;overflow:hidden}
.lo-it.wpn{background:linear-gradient(#3e4a34,#232b1c)}
.lo-it img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.lo-it i{position:absolute;left:2px;bottom:0;font-size:8px;font-style:normal;color:#ece4b8;text-shadow:0 0 2px #000;pointer-events:none;white-space:nowrap}
.lo-it b{position:absolute;right:2px;top:0;font-size:9px;color:#ffe28a;text-shadow:0 0 2px #000;pointer-events:none}
.lo-it.sel{border-color:#ffe28a;box-shadow:0 0 0 2px #ffe28a88;background:linear-gradient(#7a6a2a,#4a3e14)}
.lo-read{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;color:#c9c79a;align-items:center}
.lo-read b{color:#e8dca0}.lo-read b.bad,.lo-read em{color:#ff8a6a;font-style:normal}
.lo-ammo{display:flex;align-items:center;gap:5px;font-size:10px;color:#9fbf6a;line-height:12px;width:100%}
.lo-ammo img{width:40px;height:22px;object-fit:contain}
.lo-msg{font-size:10px;color:#a8a67a;min-height:13px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
.lo-msg.bad{color:#ff8a6a}
.lo-gcells{display:grid;grid-auto-flow:column dense;grid-template-rows:repeat(2,22px);grid-auto-columns:30px;gap:2px;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.lo-gcells .lo-it{grid-row:span 1!important}
@media (min-height:420px){.lo-cells{grid-auto-rows:25px}.lo-fig img{width:100px;height:150px}.lo-mid{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr) minmax(0,1.35fr)}.lo-gcells{grid-template-rows:repeat(2,25px);grid-auto-columns:34px}}
/* ---- facility picker + placement ---- */
#bpPanel{position:fixed;inset:0;z-index:70;background:#000c;display:flex;align-items:center;justify-content:center;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left))}
.bp-box{width:100%;max-width:1000px;height:100%;max-height:420px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(#2a2c24,#17180f);border:2px solid #8a8c74;border-radius:4px;padding:6px 8px;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px;color:#e8e2c0}
.bp-head{display:flex;align-items:center;gap:10px}.bp-head>b{color:#d8c070;font-size:17px}.bp-head span{flex:1;font-size:12px;color:#c8c4a0}
.bp-close{min-height:38px;padding:2px 14px;background:linear-gradient(#80847a,#55594f 45%,#40443b 55%,#4c5046);border:2px solid;border-color:#c4c8b8 #2a2c26 #22241f #b0b4a4;color:#f4f0dc;border-radius:2px;font-family:inherit}
.bp-row{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,calc((100% - 30px)/5.4));gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.bp-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;min-height:0;background:linear-gradient(#3a3d32,#23251c);border:2px solid;border-color:#9a9c88 #2a2c26 #22241f #8a8c78;padding:4px}
.bp-card.off{filter:saturate(.35) brightness(.75)}
.bp-art{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;background:#151610;border:1px solid #44473a}
.bp-art img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
.bp-nm{font-size:13px;color:#f0e6b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-ds{font:10px/12px "Helvetica Neue",Arial,sans-serif;letter-spacing:0;color:#c8c4a4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:24px}
.bp-st{display:flex;flex-wrap:wrap;gap:2px 6px;font-size:10px;color:#d8c070}
.bp-why{font-size:10px;color:#ff9a7a}
.bp-build{min-height:36px;padding:2px;font-family:inherit;letter-spacing:2px;background:linear-gradient(#8a9a52,#5a6a2e 50%,#4a5a26);border:2px solid;border-color:#d0e090 #2a3210 #222a0c #b0c070;color:#f4f0dc;border-radius:2px}
.bp-build:disabled{background:linear-gradient(#55584c,#3a3c33);border-color:#77796a #22231e #1c1d18 #66685a;color:#9a9a88;opacity:1}
.placebar{display:flex;align-items:center;gap:8px;padding:4px 6px;margin-bottom:4px;background:#1e2a14;border:1px solid #8aa052;color:#e8e4c0;font-size:13px}.placebar span{flex:1}
.bgrid.placing .bcell{opacity:.55}
.bgrid.placing .bcell.pv{opacity:1;box-shadow:inset 0 0 0 2px #9fdc5a,inset 0 0 12px #9fdc5a66;animation:pvp 1s infinite alternate}
@keyframes pvp{to{box-shadow:inset 0 0 0 2px #cfff8a,inset 0 0 18px #9fdc5aaa}}
.bgrid.placing .bcell.pg.ok{opacity:1;box-shadow:inset 0 0 0 3px #5aff7a}
.bgrid.placing .bcell.pg.bad{opacity:1;box-shadow:inset 0 0 0 3px #ff4a3a,inset 0 0 14px #ff4a3a88}
.pghost{pointer-events:none;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;opacity:.7}
.pghost img{width:100%;height:100%;object-fit:fill;image-rendering:pixelated}
.pghost.ok{outline:3px solid #5aff7a;background:#5aff7a33}.pghost.bad{outline:3px solid #ff4a3a;background:#ff4a3a44}
/* insertion element split (Black Hawk / Little Bird) */
#insSplit{position:fixed;inset:0;z-index:70;background:rgba(6,7,5,.82);display:flex;align-items:center;justify-content:center;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));-webkit-user-select:none;user-select:none;touch-action:none}
#insSplit .isPanel{width:min(820px,100%);max-height:100%;display:flex;flex-direction:column;gap:6px;background:linear-gradient(#1d2117,#12140e);border:1px solid #4a5236;border-radius:8px;padding:8px 10px;box-shadow:0 8px 30px #000;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px;color:#c9c6a4;text-transform:uppercase}
#insSplit .isHead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}#insSplit .isHead b{color:#d9c27a;font-size:17px}#insSplit .isHead span{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0;font-size:11px;color:#8f9472}
#insSplit .isCols{display:flex;gap:8px;min-height:0;flex:1}
#insSplit .isCol{flex:1;background:#0d0f0a;border:1px solid #3a4128;border-radius:6px;padding:5px;display:flex;flex-direction:column;min-height:0}
#insSplit .isT{display:flex;gap:6px;align-items:baseline;font-size:14px;color:#a9b07a;margin-bottom:4px}#insSplit .isT .isAc{flex:1;font-size:11px;color:#7d8460}#insSplit .isT b{color:#e8d28a}#insSplit .isT b.bad{color:#e06050}
#insSplit .isList{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;overflow-y:auto;min-height:96px;align-content:start}
#insSplit .isChip{background:linear-gradient(#3a3f2c,#272b1d);border:1px solid #5a6142;border-radius:5px;padding:5px 6px;min-height:34px;display:flex;flex-direction:column;justify-content:center;touch-action:none;cursor:grab;color:#ddd8b4;font-size:13px;line-height:1.1}
#insSplit .isChip small{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0;font-size:10px;color:#9a9c80}
#insSplit .isChip.drag{position:relative;z-index:3;box-shadow:0 6px 16px #000;border-color:#d9c27a;opacity:.92}
#insSplit .isFoot{display:flex;gap:8px;align-items:center}#insSplit .isMsg{flex:1;font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0;font-size:11px;color:#e0a060}
#insSplit .isFoot button{min-height:40px;padding:0 16px;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:15px;border-radius:6px;border:1px solid #6a7150;background:linear-gradient(#5a6142,#3a3f2a);color:#eee6c0}
#insSplit .isFoot button.ghost{background:#1a1c14;color:#a9a98a}#insSplit .isFoot button.isGo{background:linear-gradient(#7a8a3a,#4a5a22);border-color:#a0b050}#insSplit .isFoot button:disabled{opacity:.4}

.lo-uni{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-left:auto}
.lo-uni .lo-btn{min-width:0;padding:2px 7px;font-size:11px;letter-spacing:.4px}
.uni-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.uni-row>span{font-size:12px;letter-spacing:1px;opacity:.8}