:root{font-family:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;background:#06121c;color:#eaf5fc;--ink:#eaf5fc;--muted:#a9c4d2;--line:#35556c;--blue:#5fd1ff;--surface:#102332}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 60% 0,#20426c55,transparent 46%),linear-gradient(#071421,#030b13);min-height:100dvh}button,select{font:inherit}button{cursor:pointer}select{width:100%;min-height:42px;background:#10273b;color:white;border:1px solid #4b7890;border-radius:9px;padding:8px}.hidden{display:none!important}.top{height:69px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #345067;max-width:960px;margin:0 auto}.brand{font-size:17px;letter-spacing:3px;font-weight:800;color:#fff}.brand b{color:#63c8f7}.top small{display:block;color:#95b9c8;font-size:9px;letter-spacing:2px}.qa{font-size:10px;color:#ffdfaf;border:1px solid #825e36;border-radius:16px;padding:6px 9px;background:#332618}.layout{max-width:960px;margin:0 auto;padding:10px 14px 18px}.intro h1{margin:10px 0 4px;font-size:28px}.intro p{color:var(--muted);line-height:1.65;font-size:13px}.eyebrow{font-size:11px;color:#64cef7;letter-spacing:3px}.hero-art{width:min(100%,450px);margin:12px auto;border:1px solid #6c9cbe;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 20px 55px #000b;background:#182e42}.hero-art img{display:block;width:100%;height:min(53vh,460px);object-fit:cover;object-position:center 29%}.hero-tag{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000e);padding:30px 12px 12px;font-size:12px;text-align:center}.panel{border:1px solid var(--line);background:#102333dd;border-radius:12px;padding:13px;margin-bottom:12px}.setup{max-width:600px;margin:0 auto 12px;display:grid;gap:12px}.setup label{font-size:12px;color:#bbd8e6}.setup label select{margin-top:6px}.desc{font-size:12px;line-height:1.5;color:#d4e5f0;margin:0}.btn{min-height:44px;min-width:0;padding:9px 12px;color:white;border:1px solid #50748c;border-radius:10px;background:#163245;font-size:13px;font-weight:750}.btn:disabled{opacity:.35;cursor:default}.btn.primary{background:linear-gradient(#25769b,#10496d);border-color:#86deff}.btn.ghost{background:#122433}.btn.attack{background:#1d5074;border-color:#6bc4e8}.btn.compact{min-height:34px;font-size:11px;padding:6px 10px}.info{max-width:600px;margin:auto;font-size:12px;color:#9ec4d6}.info p{line-height:1.6}.battle{display:grid;gap:9px}.battle-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#cde8f4}.battle-side{padding:12px;border:1px solid #3a6079;background:#081925ef;border-radius:12px}.enemy-side{border-color:#9b5961;background:#27191e}.name-row{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:14px;margin-bottom:9px}.name-row span{font-size:10px;color:#a5b9c9}.hp-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:11px}.hp-row strong{font-variant-numeric:tabular-nums}.hp-bar{border-radius:12px;height:11px;border:1px solid #748794;background:#243040;overflow:hidden}.hp-bar>div{background:linear-gradient(90deg,#4fb899,#8fe4d2);height:100%;width:100%;transition:width .2s}.enemy-side .hp-bar>div{background:linear-gradient(90deg,#e08181,#b84a63)}.resource{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;font-size:10px}.resource>*{border:1px solid #345d73;border-radius:7px;background:#0b2736;padding:6px 8px}.battle-center{height:155px;display:grid;place-items:center;position:relative;border-radius:12px;overflow:hidden;border:1px solid #314c65;background:radial-gradient(circle at 50% 30%,#1d4566,#071622 68%)}.mech-portrait{height:100%;width:100%;text-align:center;position:relative}.mech-portrait img{height:100%;width:100%;object-fit:contain;object-position:center center;filter:drop-shadow(0 3px 12px #000b)}.mech-portrait span{position:absolute;bottom:5px;right:12px;font-size:10px;background:#06131bdd;padding:4px 8px;border-radius:5px}.equipment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:10px}.equip-cell{border:1px solid #3b627b;border-radius:8px;padding:7px 6px;font-size:11px;background:#102d3a}.equip-cell strong{display:block;font-size:10px;color:#b4dced}.equip-cell span{display:block;margin-top:4px;color:white;word-break:break-word}.equip-cell em{display:block;font-size:10px;color:#a4cadc;font-style:normal}.units{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.unit{border:1px solid #586f7e;background:#142837;border-radius:8px;font-size:10px;padding:7px}.unit b{display:block}.unit button{margin-top:5px;min-height:33px;font-size:11px}.hand-panel,.controls,.log-box{border-radius:12px;background:#102431;border:1px solid #3f6880;padding:10px}.hand-heading{display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:12px;color:#b4d2e3}.hand-heading span{font-size:10px}.hand-list{display:flex;gap:7px;overflow:auto;padding:8px 1px 6px;scroll-snap-type:x proximity}.small-card{flex:0 0 126px;width:126px;min-height:155px;scroll-snap-align:center;border:1px solid #38758f;border-radius:10px;background:linear-gradient(150deg,#1d4e68,#0b1f2e 45%,#0e293b);padding:8px;display:flex;flex-direction:column;gap:4px;text-align:left;color:white}.small-card:focus-visible{outline:2px solid white}.small-card .kind{font-size:10px;color:#95d9ef}.small-card b{font-size:12px;line-height:1.35;min-height:34px}.small-card .stat{font-size:10px;color:#d6e5ef}.small-card p{font-size:9px;color:#aac6d7;margin:auto 0 0}.controls label{display:block;font-size:11px;color:#bad3e1}.controls select{margin-top:5px}.action-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:7px}.action-grid button{font-size:11px;min-height:48px;padding:5px}.command-btns{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}.command-btns button{font-size:11px}.log-box{font-size:12px}.log-box summary{cursor:pointer;font-weight:700}.log-box #battleLogs{max-height:210px;overflow:auto;margin-top:7px;color:#b9d8e6}.log-box p{border-top:1px solid #2e5166;margin:4px 0 0;padding:5px 0;line-height:1.4}.result{font-size:18px;position:absolute;inset:auto 0 0;background:#0b283cee;text-align:center;padding:10px;color:white;font-weight:bold}.footer{text-align:center;padding:14px;color:#60849a;font-size:10px}.error{color:#ffa49c;min-height:0;font-size:12px}dialog{max-width:min(95vw,510px);max-height:90dvh;overflow:auto;border-radius:16px;border:1px solid #5c9ab7;background:#0b2031;color:white;padding:17px;box-shadow:0 18px 45px #000b}dialog::backdrop{background:#000a}dialog h2{margin:0 0 10px;font-size:19px}dialog p{line-height:1.6;font-size:13px;color:#c1d7e3}dialog select{margin-top:5px}dialog label{font-size:12px;display:block;margin-top:8px}.dialog-actions{display:flex;gap:8px;margin-top:14px}.dialog-actions button{flex:1}#cardStats{color:#75e0ff;font-size:13px}#cardFields{display:grid;gap:7px}@media(min-width:800px){.battle{grid-template-columns:1fr 1fr}.battle-head{grid-column:span 2}.enemy-side{grid-column:1}.battle-center{grid-column:2;height:230px}.player-side{grid-column:1/3}.hand-panel{grid-column:1}.controls{grid-column:2}.log-box{grid-column:1/3}}@media(max-width:380px){.top{padding:10px}.brand{font-size:14px}.qa{font-size:9px}.layout{padding:8px}.small-card{flex-basis:110px;width:110px}.battle-center{height:125px}.action-grid .btn{font-size:10px;padding:4px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Prevent scrollable hand flexbox from inflating the single-column mobile grid. */
.layout,.battle,.battle>*,.hand-panel,.hand-list{min-width:0;max-width:100%}
.battle{grid-template-columns:minmax(0,1fr)}
.hand-list{width:100%}
@media(min-width:800px){.battle{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}