/* GEAR ARENA NEXT / INDUSTRIAL HUD — v0.2 | presentation only */
:root{--ink:#d9e4e9;--muted:#8b9caa;--line:#294153;--blue:#64cee5;--surface:#111c25;--signal:#e2a36d;--danger:#e07376; color-scheme:dark}
body{background-color:#080f16;background-image:linear-gradient(145deg,#15232f 0,#080f16 58%);color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Arial,sans-serif}
button,select{font-family:inherit}
.top{height:58px;border-bottom:1px solid #405464;background:#0d161f}
.brand{font-weight:900;letter-spacing:.22em;font-size:16px}
.brand b{color:#83c9d8}
.top small{color:#6b8997;font-size:9px;letter-spacing:.22em}
.qa{background:#242117;color:#ddba86;border:1px solid #675136;border-radius:0;font-weight:800;letter-spacing:.04em}
.intro .eyebrow{font-family:monospace;color:#9db1bc;font-size:10px;letter-spacing:.22em}
.intro h1{letter-spacing:.035em}
.intro p,.desc{color:#a7bbc7}
.hero-art,.panel,.btn,.battle-side,.battle-center,.hand-panel,.controls,.log-box,.equip-cell,.unit,.small-card,dialog,select{border-radius:3px}
.hero-art{border:1px solid #486273;box-shadow:none}
.hero-tag{border-top:1px solid #64798a;background:#0b121bdb;text-transform:uppercase;letter-spacing:.05em}
.panel{background:#101b24;border-color:#304858}
.btn{background:#182632;border:1px solid #526777;border-radius:2px;font-size:12px;font-weight:850;min-height:42px;letter-spacing:.02em}
.btn.primary{background:#2a4e5d;color:#e8faff;border-color:#87aeb7}
.btn.attack{background:#164253;border-color:#78b1be}
.btn.ghost{background:#101922;color:#bccbd5}
.btn:focus-visible,.small-card:focus-visible,select:focus-visible{outline:2px solid #a7e0e7;outline-offset:1px}
.btn:disabled{opacity:.3}
@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;max-width:none;width:100%;overflow:hidden;padding:4px 6px 5px;box-sizing:border-box}
 #battle:not(.hidden){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:36px 90px minmax(90px,26dvh) 156px minmax(140px,1fr) 116px 22px;gap:4px;width:100%;height:100%;max-height:100%;min-width:0;overflow:hidden}
 #battle>*{min-height:0;min-width:0;max-width:100%;box-sizing:border-box}
 #battle .battle-head{display:grid;grid-template-columns:94px minmax(0,1fr) 58px;align-items:center;gap:5px;background:#0e1b24;border-bottom:1px solid #4e6776;padding:2px 4px}
 #battle .battle-head .compact{min-height:28px;height:28px;padding:3px;font-size:10px;border:0;border-left:2px solid #688696;background:#172632}
 #battle .battle-head #turnLabel{font-size:11px;letter-spacing:.05em;font-weight:850;color:#e4edf1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #battle .battle-side{border:1px solid #364a58;border-left:3px solid #3f788e;background:#101920;padding:6px 9px;overflow:hidden;box-shadow:none}
 #battle .battle-side.enemy-side{border-left-color:#bb7571;background:#201a1e}
 #battle .name-row{margin:0 0 5px;font-size:12px;line-height:1.1}
 #battle .name-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #battle .name-row span{font-size:9px;white-space:nowrap;letter-spacing:.06em;color:#9eabb4}
 #battle .hp-row{grid-template-columns:21px minmax(0,1fr) 64px;gap:6px;font-family:Arial,sans-serif;font-size:10px}
 #battle .hp-row strong{font-weight:900;font-size:11px;text-align:right}
 #battle .hp-bar{border-radius:0;background:#0b1219;height:7px;border:1px solid #394950}
 #battle .hp-bar>div{background:linear-gradient(to right,#468fa4,#8dcfcb)}
 #battle .enemy-side .hp-bar>div{background:linear-gradient(to right,#a9575f,#e2a49c)}
 #battle .resource{margin-top:5px;gap:4px;overflow:hidden;white-space:nowrap;flex-wrap:nowrap;font-size:9px}
 #battle .resource>*{border:none;border-left:2px solid #396778;border-radius:0;background:#152833;padding:3px 5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #battle .enemy-side .resource>*{border-left-color:#8b5558;background:#33232a}
 #battle .units{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin-top:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;max-height:48px;min-height:0}
 #battle .unit{display:flex;flex:0 0 auto;align-items:center;gap:5px;padding:4px 7px;border-radius:0;background:#152936;border-color:#3e6a7f;font-size:9px;min-height:30px}
 #battle .unit b{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #battle .unit button{margin:0;min-height:27px;font-size:9px;padding:3px 7px}
 #battle .battle-center{height:100%;border:1px solid #365263;position:relative;background:#0c1823;overflow:hidden}
 #battle .battle-center:after{content:'TACTICAL LINK / G-01';position:absolute;left:6px;top:6px;background:#0a1720ce;color:#88b8c5;border-left:2px solid #5c9cad;padding:4px 7px;font:700 9px/1.2 monospace;letter-spacing:.08em;pointer-events:none}
 #battle .mech-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 27%;filter:saturate(.78) contrast(1.05) brightness(.72)}
 #battle .mech-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#091620dd,transparent 55%),linear-gradient(90deg,#0e273333,transparent 30%,#0e273333);pointer-events:none}
 #battle .mech-portrait span{z-index:1;bottom:7px;right:8px;border-radius:0;border-right:2px solid #6b9eb0;background:#071823cf;color:#e2ebec;letter-spacing:.06em;font-size:10px}
 #battle .result{z-index:2;bottom:0;top:auto;border-top:1px solid #75b4c6;border-radius:0;background:#071925eb;font-size:15px}
 #battle .player-side{display:flex;flex-direction:column;padding:6px 9px}
 #battle .player-side .resource{flex-shrink:0}
 #battle .player-side .equipment{margin-top:6px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;flex:0 0 48px}
 #battle .equip-cell{background:#132733;border:1px solid #37586c;border-bottom:2px solid #4f8294;padding:4px 5px;height:48px;overflow:hidden}
 #battle .equip-cell strong{font-size:9px;line-height:1.2;letter-spacing:.06em;color:#9bb8c3}
 #battle .equip-cell span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:9px;line-height:1.15;margin-top:2px;word-break:normal}
 #battle .player-side .units{margin-top:5px;max-height:42px;flex:1 1 auto}
 #battle .hand-panel{height:100%;padding:6px 6px 5px;display:flex;flex-direction:column;gap:5px;background:#0d1923;border:1px solid #355869;overflow:hidden}
 #battle .hand-heading{flex:0 0 17px;min-height:0;align-items:center;font-size:11px;letter-spacing:.04em;color:#dbe6ea}
 #battle .hand-heading span{font-size:9px;white-space:nowrap;color:#7f9ead}
 #battle .hand-heading span:nth-of-type(1){display:none}
 #battle .hand-list{flex:1 1 auto;min-height:0;max-width:100%;width:100%;display:flex;flex-wrap:nowrap;gap:5px;padding:0 0 3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#427b91 #0a1720}
 #battle .small-card{flex:0 0 101px;width:101px;height:100%;min-height:0;max-height:100%;background:#172733;border:1px solid #4c7284;border-top:3px solid #86adba;padding:5px 6px;gap:3px;box-shadow:inset 0 1px 0 #ffffff0d;overflow:hidden;text-align:left}
 #battle .small-card .kind{font-size:9px;color:#82b9c6;letter-spacing:.08em;text-transform:uppercase}
 #battle .small-card b{font-size:11px;line-height:1.25;min-height:0;max-height:40px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 #battle .small-card .stat{margin-top:2px;font:700 10px/1.3 monospace;color:#d3e9ef}
 #battle .small-card p{margin:auto 0 0;font-size:9px;line-height:1.4;color:#9bb7c3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
 #battle .controls{display:grid;grid-template-rows:37px 41px minmax(0,1fr);gap:4px;overflow:hidden;padding:5px 6px;border:1px solid #476476;background:#101c27}
 #battle .controls label{display:grid;grid-template-columns:69px minmax(0,1fr);align-items:center;gap:5px;font-size:10px;letter-spacing:.02em;color:#b2cbd5;min-height:0}
 #battle .controls select{height:30px;min-height:30px;margin:0;padding:3px 7px;font-size:10px;border:1px solid #4b7689;background:#0b1d29}
 #battle .action-grid{display:grid;grid-template-columns:1fr 1fr .9fr;gap:4px;margin:0;min-height:0}
 #battle .action-grid button{height:40px;min-height:39px;font-size:11px;padding:3px 2px;font-weight:850;border-radius:2px}
 #battle .action-grid #endTurn{background:#553135;border-color:#9b6c6a;color:#fff2e9}
 #battle .command-btns{margin:0;min-height:0;display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;overflow-y:hidden}
 #battle .command-btns .btn{min-height:25px;height:25px;padding:2px 8px;font-size:9px;flex:0 0 auto;white-space:nowrap}
 #battle .log-box{padding:1px 7px;overflow:hidden;border:1px solid #314f5d;border-radius:0;background:#101c25;font-size:10px;line-height:1.6}
 #battle .log-box:not([open]){height:100%}
 #battle .log-box[open]{overflow:visible;z-index:20}
 #battle .log-box summary{color:#88adbd;letter-spacing:.06em;list-style:'▸  ';font-size:10px}
 #battle .log-box #battleLogs{position:absolute;bottom:29px;left:6px;right:6px;max-height:32dvh;overflow:auto;padding:6px 11px;background:#0b1b26f7;border:1px solid #4f788a;box-shadow:0 6px 25px #000c;font-size:10px}
 #cardDialog,#rulesDialog{border-radius:2px;background:#121d26;border:1px solid #7296a5;box-shadow:0 12px 34px #000c;padding:15px;width:min(94vw,500px);max-height:82dvh}
 #cardDialog h2,#rulesDialog h2{font-weight:900;letter-spacing:.04em;border-bottom:1px solid #436578;padding-bottom:9px;font-size:16px}
 #cardDialog #cardStats{color:#80bfcd;font:700 11px/1.6 monospace}
 #cardDialog select{font-size:12px;min-height:40px}
 #cardDialog .dialog-actions .btn{min-height:44px}
}
@media(max-width:799px) and (max-height:740px){
 #battle:not(.hidden){grid-template-rows:30px 75px minmax(84px,22dvh) 137px minmax(110px,1fr) 97px 20px;gap:3px}
 #battle .battle-head .compact{min-height:24px;height:24px}
 #battle .battle-side{padding:5px 7px}
 #battle .player-side .equipment{margin-top:4px;flex-basis:42px}
 #battle .equip-cell{height:42px}
 #battle .hand-heading span:not(#pileStatus){display:none}
 #battle .controls{grid-template-rows:31px 36px minmax(0,1fr);gap:3px;padding:3px 5px}
 #battle .action-grid button{height:34px;min-height:34px;font-size:10px}
 #battle .controls select{height:27px;min-height:27px}
 #battle .command-btns .btn{height:22px;min-height:22px}
}
@media(min-width:800px){
 .battle-side,.battle-center,.hand-panel,.controls,.log-box{border-radius:3px}
 .small-card{border-radius:3px}
 .equip-cell,.unit{border-radius:2px}
}
@media(max-width:799px) and (max-height:740px){
 /* Recover ~30px for cards on short phones without introducing page scroll. */
 #battle:not(.hidden){grid-template-rows:30px 75px minmax(76px,20dvh) 125px minmax(125px,1fr) 90px 20px}
 #battle .player-side .units{max-height:28px;overflow-x:auto}
 #battle .controls{grid-template-rows:27px 35px minmax(0,1fr)}
 #battle .action-grid button{height:35px;min-height:35px}
}
/* Touch target hardening: 44px minimum for the three primary combat actions. */
@media(max-width:799px){
 #battle .controls{grid-template-rows:34px 46px minmax(0,1fr)}
 #battle .action-grid button{min-height:46px;height:46px}
 #battle .command-btns:empty{display:none}
 #battle .unit button{min-height:31px}
}
@media(max-width:799px) and (max-height:740px){
 #battle .controls{grid-template-rows:25px minmax(44px,1fr) 0}
 #battle .action-grid button{min-height:44px;height:44px}
}
/* Low-contrast registration marks and machining lines distinguish the GEAR HUD
   from generic rounded app cards without interfering with live data. */
@media(max-width:799px){
 #battle .battle-head{background-image:repeating-linear-gradient(120deg,#9bbcc309 0 2px,transparent 2px 11px)}
 #battle .enemy-side,#battle .player-side{position:relative}
 #battle .enemy-side:before,#battle .player-side:before{content:'';position:absolute;pointer-events:none;right:0;top:0;width:31px;height:2px;background:#c78276;opacity:.85}
 #battle .player-side:before{background:#78b9c8}
 #battle .battle-center{background-image:repeating-linear-gradient(90deg,#2341571f 0 1px,transparent 1px 28px),linear-gradient(#0a1621,#142330)}
 #battle .hand-panel{box-shadow:inset 0 1px 0 #9ebbc419,inset 0 -1px 0 #162f40}
 #battle .small-card{background-image:linear-gradient(130deg,#23405388,transparent 33%),repeating-linear-gradient(135deg,#a2d6dc08 0 1px,transparent 1px 17px);box-shadow:inset 0 1px 0 #cde2ea14}
 #battle .small-card:active{border-color:#95dce5;background-color:#243747}
 #battle .controls #endTurn{background:#512b32}
}