/*
 GEAR ARENA NEXT / ENGAGEMENT FIELD 01
 Original tactical battlefield theme, 4-zone no-scroll mobile layout.
 Visual-only extension of MobileHUD2. The JS engine and save format stay untouched.
*/
:root{--arena-slate:#091621;--arena-edge:#416274;--arena-teal:#85d4e3;--arena-hostile:#dc8f80;--arena-text:#e1e9ea}
#battle .arena-top-hud,#battle .arena-bottom-hud{position:relative;min-width:0;min-height:0}
#battle .arena-top-hud{display:grid;grid-template-rows:32px minmax(0,1fr);gap:3px}
#battle .arena-bottom-hud{display:grid;grid-template-rows:minmax(0,1fr) minmax(48px,45%);gap:3px}
#battle .battle-center{position:relative;isolation:isolate;overflow:hidden}
#battle .battle-center:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
 background:
   linear-gradient(90deg,transparent 0 16%,#53768a15 16% 16.2%,transparent 16.2% 83.8%,#53768a15 83.8% 84%,transparent 84%),
   repeating-linear-gradient(90deg,transparent 0 56px,#8cd6f009 57px,transparent 58px),
   linear-gradient(160deg,#111e29 0%,#071522 52%,#0e2531 100%);
}
#battle .arena-radar{position:absolute;inset:20% 0;z-index:0;pointer-events:none;opacity:.7;
 background:radial-gradient(ellipse 33% 66% at 50% 50%,transparent 65%,#497f9847 66%,transparent 68%),
            radial-gradient(ellipse 22% 52% at 50% 50%,transparent 62%,#3c768d3f 64%,transparent 67%),
            linear-gradient(90deg,transparent calc(50% - 1px),#8cc5d636 50%,transparent calc(50% + 1px));
}
#battle .arena-radar:after{content:'';position:absolute;inset:-10%;transform:perspective(180px) rotateX(55deg) scale(1.35);opacity:.5;
 background:repeating-linear-gradient(90deg,#78b7c51b 0 1px,transparent 1px 30px),
            repeating-linear-gradient(0deg,#78b7c51b 0 1px,transparent 1px 30px);
 mask-image:linear-gradient(transparent 5%,black 28%,black 72%,transparent 100%);
}
#battle .field-sector{position:relative;z-index:2;display:grid;grid-template-rows:17px minmax(0,1fr);min-width:0;min-height:0;padding:3px 7px;gap:2px}
#battle .sector-title{display:flex;align-items:center;justify-content:space-between;font:700 9px/1.1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;color:#8ea8b5}
#battle .enemy-sector .sector-title{color:#d9a6a0}
#battle .ally-sector .sector-title{color:#a3dbe8}
#battle .field-positions{position:relative;min-height:0;isolation:isolate}
#battle .slot-underlay,#battle .field-positions>.units{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;min-width:0;min-height:0}
#battle .slot-underlay{z-index:0;pointer-events:none}
#battle .empty-position{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
 border:1px solid #4c6876;background:linear-gradient(140deg,#162a354c,#0615205c 70%);
 clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
#battle .empty-position:before{content:'';position:absolute;inset:5px;border:1px solid #668e9b22;pointer-events:none}
#battle .empty-position>span{color:#567483;font:700 10px/1 monospace;letter-spacing:.1em}
#battle .enemy-sector .empty-position{border-color:#7b565c;background:linear-gradient(135deg,#40252b42,#0c161d5c)}
#battle .field-positions>.units{z-index:1;margin:0;max-height:none;overflow:visible;align-items:stretch;grid-auto-rows:1fr;pointer-events:none}
#battle .field-positions>.units .unit{display:flex;flex-direction:column;justify-content:space-between;gap:1px;min-width:0;height:100%;max-width:none;overflow:hidden;margin:0;padding:3px 2px;background:#113148ed;border:1px solid #75bacc;border-bottom:2px solid #86d1e5;box-shadow:0 1px 8px #0008;pointer-events:auto}
#battle .enemy-sector .unit{border-color:#b77e7b;border-bottom-color:#e0a59b;background:#35242aea}
#battle .unit b{display:block;width:100%;max-width:none;font-size:9px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#battle .unit>span{font-size:8px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bcd7e5}
#battle .unit button{flex:0 0 auto;min-height:21px;height:21px;max-width:100%;margin:0;padding:0 1px;font-size:8px;line-height:1;border:1px solid #5eafbd;border-radius:1px;color:#e8faff;background:#174b61}
#battle .unit button:disabled{opacity:.4}
#battle .field-conflict{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;
 background:radial-gradient(ellipse at 50% 50%,#3e879520 0,transparent 56%),linear-gradient(90deg,transparent 9%,#607f893d 9.3%,transparent 9.6%,transparent 90%,#607f893d 90.3%,transparent 90.6%);
}
#battle .field-conflict .mech-portrait{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#battle .field-conflict .mech-portrait img{width:36%;max-width:190px;height:110%;object-fit:contain;object-position:center 36%;filter:grayscale(.25) saturate(.72) contrast(1.18) drop-shadow(0 4px 14px #55b4d149);opacity:.66}
#battle .field-conflict .mech-portrait span{position:absolute;bottom:3px;right:6px;max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 9px/1.1 system-ui;background:#0a1e28d9;border:1px solid #457d8c;padding:3px 5px;z-index:2}
#battle .field-conflict .mech-portrait:after{content:'';position:absolute;pointer-events:none;inset:0;background:linear-gradient(90deg,#071722 5%,transparent 25%,transparent 75%,#071722 95%);opacity:.4}
#battle .combat-coordinate{position:absolute;top:50%;transform:translateY(-50%);color:#7f9fab;font:700 8px/1.4 ui-monospace,monospace;letter-spacing:.08em;max-width:30%;pointer-events:none}
#battle .combat-coordinate span{display:block;opacity:.7;font-size:7px}
#battle .coord-left{left:10px;text-align:left}
#battle .coord-right{right:10px;text-align:right}
#battle .conflict-line{position:absolute;left:9%;right:9%;top:49%;height:1px;background:linear-gradient(90deg,transparent,#4d9ab0a5,transparent);z-index:1;pointer-events:none}
#battle .field-emblem{font:900 45px/1 Arial,sans-serif;color:#6ce9f719;position:absolute;z-index:0;pointer-events:none;transform:skew(-10deg)}
#battle .result{position:absolute;z-index:10;inset:auto 8px 22%;margin:0;background:#101d2af4;padding:10px;border:1px solid #92dce2;color:white;font-size:15px;font-weight:900;text-align:center;box-shadow:0 8px 25px #000b}
#battle .arena-bottom-hud .log-box{position:absolute;z-index:30;right:5px;top:4px;min-width:53px;height:auto;padding:3px 7px;background:#18313d;border:1px solid #618f9c;max-height:none;overflow:visible}
#battle .arena-bottom-hud .log-box summary{display:block;cursor:pointer;font-size:10px;color:#c6e4ec;white-space:nowrap}
#battle .arena-bottom-hud .log-box #battleLogs{position:absolute;bottom:auto;top:calc(100% + 4px);right:0;left:auto;width:min(350px,92vw);max-height:35dvh;overflow-y:auto;background:#091824f7;box-shadow:0 8px 23px #000c;padding:7px 10px;z-index:45;border:1px solid #4a8193}
#battle .arena-bottom-hud .log-box:not([open]) #battleLogs{display:none}
@media(min-width:800px){
 #battle:not(.hidden){max-width:900px;margin:auto;display:grid;grid-template-rows:95px minmax(270px,46vh) 165px 190px;gap:5px}
 #battle .field-sector{min-height:80px}
 #battle .arena-bottom-hud{grid-template-rows:75px 85px}
}
@media(max-width:799px){
 body:has(#battle:not(.hidden)){height:100dvh;overflow:hidden}
 body:has(#battle:not(.hidden)) .top,body:has(#battle:not(.hidden)) .footer{display:none!important}
 body:has(#battle:not(.hidden)) .layout{height:100dvh;width:100%;max-width:none;overflow:hidden;padding:4px 5px 5px;box-sizing:border-box}
 #battle:not(.hidden){display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,12%) minmax(0,1fr) minmax(0,22%) minmax(0,23%);gap:4px;height:100%;width:100%;min-height:0;overflow:hidden}
 #battle .arena-top-hud,#battle .arena-bottom-hud,#battle .battle-center,#battle .hand-panel{height:100%;min-height:0;min-width:0;overflow:hidden}
 #battle .arena-top-hud{grid-template-rows:27px minmax(0,1fr);gap:3px}
 #battle .battle-head{min-height:0;height:27px;display:flex;padding:2px 4px;background:#0c1a24;border:1px solid #385666;border-left:3px solid #93c1ca;border-radius:0}
 #battle .battle-head .compact{min-height:22px;height:22px;max-height:22px;padding:2px 8px;font-size:10px}
 #battle #turnLabel{font-size:11px;font-weight:800;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #battle .battle-side.enemy-side{height:100%;min-height:0;overflow:hidden;border:1px solid #57434b;border-left:3px solid #d88b84;border-radius:0;padding:4px 8px;background:#211b20}
 #battle .enemy-side .name-row{margin:0 0 3px;min-height:15px;font-size:11px}
 #battle .enemy-side .name-row span{font-size:9px}
 #battle .enemy-side .hp-row{height:15px;grid-template-columns:21px minmax(0,1fr) 66px;font-size:10px}
 #battle .enemy-side .hp-row strong{font-size:11px}
 #battle .enemy-side .resource{display:flex;flex-wrap:nowrap;margin-top:2px;gap:4px;font-size:9px;white-space:nowrap;overflow:hidden}
 #battle .enemy-side .resource>*{padding:1px 5px;border-left:2px solid #b77378;border-radius:0;border-top:0;border-bottom:0;border-right:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 #battle .battle-center{display:grid;grid-template-rows:minmax(0,29%) minmax(0,1fr) minmax(0,29%);border:1px solid #365665;border-radius:0;box-shadow:inset 0 0 30px #0008;background:transparent}
 #battle .battle-center:after{content:'ARENA / ENGAGEMENT FIELD 01';position:absolute;top:auto;bottom:50%;left:7px;transform:translateY(50%);z-index:2;font:700 8px/1.3 ui-monospace,monospace;letter-spacing:.12em;color:#b6e5e9;border-left:2px solid #8ad8e0;padding:3px 5px;background:#081923c7;pointer-events:none}
 #battle .field-sector{grid-template-rows:14px minmax(0,1fr);padding:2px 5px;gap:2px}
 #battle .sector-title{font-size:8px}
 #battle .field-positions>.units .unit{font-size:8px;padding:2px 2px}
 #battle .field-conflict .mech-portrait img{width:39%;height:123%}
 #battle .combat-coordinate{font-size:7px}
 #battle .arena-bottom-hud{grid-template-rows:minmax(0,55%) minmax(0,1fr);gap:3px;overflow:visible}
 #battle .player-side{display:block;min-height:0;padding:3px 7px;background:#0d202b;border:1px solid #3e7285;border-left:3px solid #8dd5dc;overflow:hidden;border-radius:0}
 #battle .player-side .pilot-vitals{min-height:0}
 #battle .player-side .name-row{margin:0 0 2px;max-width:calc(100% - 60px);font-size:11px;min-height:13px}
 #battle .player-side .name-row span{font-size:8px}
 #battle .player-side .hp-row{height:13px;grid-template-columns:21px minmax(0,1fr) 66px;font-size:9px;gap:5px}
 #battle .player-side .hp-row strong{font-size:10px}
 #battle .player-side .resource{gap:5px;margin:2px 0 0;font-size:9px;white-space:nowrap;min-height:17px;flex-wrap:nowrap}
 #battle .player-side .resource>*{border:none;border-left:2px solid #4c99b5;border-radius:0;background:#13303c;padding:2px 6px;white-space:nowrap}
 #battle .player-side .equipment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:3px 0 0;max-height:43px;min-height:0}
 #battle .player-side .equip-cell{min-width:0;min-height:0;max-height:43px;height:100%;padding:2px 4px;overflow:hidden;background:#102c37;border:1px solid #476f7f;border-bottom:1px solid #64b3c8;border-radius:0}
 #battle .player-side .equip-cell strong{font-size:8px;line-height:1.2;letter-spacing:.02em}
 #battle .player-side .equip-cell span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;font-size:8px;margin-top:1px;line-height:1.2;overflow:hidden}
 #battle .arena-bottom-hud .controls{min-height:0;display:grid;grid-template-rows:minmax(19px,1fr) 44px;gap:2px;padding:2px 4px;border:1px solid #3c6174;background:#0e1d28;border-radius:0;overflow:hidden}
 #battle .controls label{min-height:0;display:grid;grid-template-columns:55px minmax(0,1fr);align-items:center;gap:4px;color:#a9cad6;font-size:9px;line-height:1}
 #battle .controls select{width:100%;min-height:0;height:22px;padding:1px 7px;margin:0;font-size:10px;border-radius:0;background:#0b2533;border:1px solid #4a7c92}
 #battle .controls .action-grid{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:4px;margin:0;min-height:44px;height:44px}
 #battle .controls .action-grid button{height:44px;min-height:44px;width:100%;padding:3px 2px;font-size:10px;line-height:1.1;border-radius:0}
 #battle .controls .action-grid .attack{background:#1b566b;border:1px solid #74bccc}
 #battle .controls #endTurn{border:1px solid #bb8a83;background:#5b3135;color:#fff2f1}
 #battle .controls .command-btns{display:none!important}
 #battle .log-box{max-width:55px;min-height:0;overflow:visible;padding:2px 6px;line-height:1.2}
 #battle .log-box summary{font-size:9px}
 #battle .hand-panel{display:flex;flex-direction:column;gap:2px;padding:4px 5px 5px;border-radius:0;border:1px solid #466c7d;background:#0a1a26;box-shadow:inset 0 1px 0 #bedee514}
 #battle .hand-heading{display:flex;align-items:center;justify-content:space-between;flex:0 0 20px;min-height:0;font-size:11px;line-height:1;color:#d6e6eb}
 #battle .hand-heading span{font-size:9px;color:#93b6c5}
 #battle .hand-heading span:nth-of-type(1){display:none}
 #battle .hand-list{display:flex;flex-wrap:nowrap;flex:1 1 auto;min-height:0;height:100%;overflow-x:auto;overflow-y:hidden;gap:5px;margin:0;padding:1px 1px 3px;scrollbar-width:thin;scroll-snap-type:x proximity}
 #battle .small-card{display:flex;flex:0 0 100px;width:100px;min-width:100px;max-width:100px;height:100%;min-height:0;max-height:none;gap:3px;padding:5px;border:1px solid #477f8e;border-top:2px solid #a8cfdd;border-radius:0;box-shadow:inset 0 1px 0 #e0f6fa17;background:linear-gradient(140deg,#1d3a49,#0a1e2b 75%);color:#edfaff;overflow:hidden;scroll-snap-align:center}
 #battle .small-card .kind{font:700 9px/1.1 ui-monospace,monospace;color:#80cee1;letter-spacing:.06em}
 #battle .small-card b{font-size:10px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:28px;overflow:hidden;min-height:0}
 #battle .small-card .stat{font:700 10px/1.25 ui-monospace,monospace;color:#d5ebf0}
 #battle .small-card p{font-size:9px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:#a9c4d0;margin:auto 0 0}
 #battle .small-card:focus-visible{outline:2px solid #9de8ee;outline-offset:1px}
 #battle .unit button{min-height:21px!important;height:21px!important;font-size:8px!important}
 #cardDialog,#rulesDialog{z-index:1000;max-height:86dvh;overflow:auto}
}
@media(max-width:799px) and (max-height:700px){
 #battle:not(.hidden){grid-template-rows:minmax(0,12%) minmax(0,1fr) minmax(0,24%) minmax(0,20%);gap:3px}
 #battle .arena-top-hud{grid-template-rows:26px minmax(0,1fr)}
 #battle .arena-bottom-hud{grid-template-rows:minmax(0,54%) minmax(0,1fr)}
 #battle .arena-bottom-hud .controls{grid-template-rows:minmax(15px,1fr) 44px;padding:1px 3px}
 #battle .player-side .equipment{max-height:26px}
 #battle .player-side .equip-cell{max-height:26px}
 #battle .hand-heading{flex-basis:15px}
 #battle .small-card{min-width:91px;width:91px;flex-basis:91px}
 #battle .field-sector{grid-template-rows:12px minmax(0,1fr)}
 #battle .sector-title{font-size:7px}
}

/* Fix inherited grid place-items:center: the 3 horizontal lanes need full width. */
#battle .battle-center{place-items:stretch !important;grid-template-columns:minmax(0,1fr) !important}
#battle .field-sector,#battle .field-conflict{width:100%;height:100%;min-width:0;min-height:0}
/* Log belongs to top navigation, not over the friendly HP meter. */
@media(max-width:799px){
 #battle .arena-top-hud{overflow:visible}
 #battle .arena-top-hud .battle-head{z-index:40;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px;align-items:center;overflow:visible}
 #battle .arena-top-hud .battle-head .log-box{display:block;position:relative;top:auto;right:auto;min-width:44px;width:auto;height:22px;min-height:0;max-height:none;margin:0;padding:2px 4px;border:1px solid #4a7787;background:#17303c;border-radius:0;overflow:visible}
 #battle .arena-top-hud .battle-head .log-box summary{font-size:10px;color:#c6e4ec;text-align:center;list-style:none;cursor:pointer;white-space:nowrap}
 #battle .arena-top-hud .battle-head .log-box #battleLogs{position:absolute;top:calc(100% + 4px);bottom:auto;left:auto;right:0;width:min(350px,90vw);max-height:40dvh;overflow:auto;border:1px solid #548493;background:#091a26f7;padding:7px 10px;z-index:80;box-shadow:0 9px 23px #000d}
 #battle .arena-top-hud .battle-head .log-box:not([open]) #battleLogs{display:none}
}
/* Compact-phone legibility refinements. */
@media(max-width:799px){
 #battle:not(.hidden){grid-template-rows:minmax(84px,12%) minmax(0,1fr) minmax(0,22%) minmax(0,23%)}
 #battle .field-conflict .mech-portrait img{
   opacity:.87;mix-blend-mode:screen;
   -webkit-mask-image:radial-gradient(ellipse 61% 72% at 50% 48%,#000 33%,transparent 100%);
   mask-image:radial-gradient(ellipse 61% 72% at 50% 48%,#000 33%,transparent 100%);
 }
 #battle .ally-sector .unit{position:relative;padding-bottom:14px}
 #battle .ally-sector .unit button{position:absolute;inset:0;width:100%;height:100%!important;min-height:0!important;max-width:none;opacity:0.01;z-index:4;cursor:pointer}
 #battle .ally-sector .unit:after{content:'指示';position:absolute;inset:auto 0 0;background:#1d5266;color:#daeff3;font:700 9px/1.35 system-ui;text-align:center;pointer-events:none;border-top:1px solid #6fb3c1}
 #battle .ally-sector .unit:has(button:disabled):after{content:'待機';background:#17343f;color:#7f9dab}
 #battle .ally-sector .unit:focus-within{outline:2px solid #86e1f0;outline-offset:1px}
}
@media(max-width:799px) and (max-height:700px){
 #battle:not(.hidden){grid-template-rows:minmax(84px,12%) minmax(0,1fr) minmax(0,24%) minmax(0,20%)}
}