:root{font-family:'Rajdhani',system-ui,sans-serif;color:#fff;background:#071322}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 15%,#1f5f91,#050a12 80%);overflow:hidden}.game-shell{position:relative;width:min(100vw,480px);height:min(100vh,854px);aspect-ratio:9/16;overflow:hidden;background:#183b4e;box-shadow:0 20px 70px #0009;border:1px solid #8bb0cf33}.game-shell:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#04214e99 0%,transparent 30%,transparent 73%,#071018b8 100%)}#battlefield{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.top-hud,.resources,.command-dock,.supporters,.gift-panel,.battle-label,.event-toast,.end-modal{position:absolute;z-index:3}.top-hud{inset:14px 10px auto}.live-pill{display:inline-flex;gap:10px;align-items:center;background:#ed2d37;padding:8px 13px;border-radius:9px;font-weight:700;letter-spacing:.8px;box-shadow:0 3px 0 #941823}.live-pill span{background:#102a46;padding:8px 11px;border-radius:8px;font-weight:600;color:#d8e9f6}.score-row{display:flex;align-items:center;gap:0;margin-top:10px}.score-card{height:75px;flex:1;display:flex;align-items:center;gap:8px;padding:8px;border:2px solid #071322;border-radius:16px;box-shadow:0 5px 0 #0008;min-width:0}.red-card{background:linear-gradient(135deg,#9d1c1c,#47090d)}.blue-card{background:linear-gradient(135deg,#1265b5,#072c62);text-align:right;justify-content:flex-end}.score-card b{display:block;font-size:12px;letter-spacing:.6px}.score-card strong{display:block;font-size:24px;line-height:22px}.score-card em{font-style:normal;font-size:15px;font-weight:700}.crest{font-size:28px;filter:drop-shadow(0 2px 0 #000)}.score-bar{height:9px;background:#091321;border-radius:10px;margin-top:5px;overflow:hidden}.score-bar i{display:block;height:100%;width:76%;background:linear-gradient(90deg,#ff6a38,#e82718);border-radius:10px}.blue-card .score-bar i{background:linear-gradient(90deg,#31d6ff,#1681ff);width:54%}.vs{margin:0 -3px;z-index:2;width:54px;height:54px;display:grid;place-items:center;background:#182332;border:3px solid #09111a;clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%);font-size:20px;font-weight:700;color:#ffbf30}.timer{margin:5px auto 0;width:90px;text-align:center;background:#071522;border:2px solid #07101b;border-radius:10px;font-size:26px;font-weight:700;line-height:38px;box-shadow:0 4px 0 #0007}.battle-label{top:188px;left:50%;transform:translateX(-50%);padding:5px 14px;border:1px solid #fff4;background:#071421c9;border-radius:20px;font-size:12px;letter-spacing:2px}.gift-panel{right:9px;top:170px;width:73px;padding:8px 6px;background:#091a2bde;border:2px solid #132f44;border-radius:13px;box-shadow:0 4px 0 #0007;text-align:center}.gift-icon{font-size:27px}.gift-panel b{font-size:13px}.gift-item{display:none}.gift-panel button{font:600 10px inherit;color:#fff;background:#183b55;border:1px solid #396783;border-radius:5px;padding:5px 2px;margin-top:8px}.event-toast{top:290px;left:50%;transform:translateX(-50%) translateY(-15px);opacity:0;padding:8px 14px;background:#071522e8;border:1px solid #fff5;border-radius:20px;font-weight:600;transition:.25s;white-space:nowrap}.event-toast.show{opacity:1;transform:translateX(-50%)}.resources{left:10px;right:10px;bottom:220px;display:flex;gap:8px;align-items:center}.resource{flex:1;display:flex;gap:7px;align-items:center;padding:7px 9px;background:#091522e8;border:2px solid #0b111c;border-radius:16px;box-shadow:0 4px 0 #0008;min-width:0}.resource b{font-size:11px;letter-spacing:1px}.resource strong{font-size:18px}.resource-icon{font-size:26px}.resource-bar{height:9px;width:100px;max-width:14vw;background:#101723;border-radius:8px;overflow:hidden}.resource-bar i{display:block;height:100%;width:78%;background:#f23b24}.blue-resource .resource-bar i{width:63%;background:#23b8ff}.crossed{width:55px;height:55px;display:grid;place-items:center;background:#162736;border:2px solid #d8b160;border-radius:50%;font-size:29px;color:#fff;box-shadow:0 3px 0 #0008}.command-dock{left:8px;right:8px;bottom:55px;display:flex;gap:6px}.command-team{flex:1;padding:8px 7px 9px;border-radius:15px;border:2px solid #260b0b;box-shadow:0 4px 0 #0009}.red-commands{background:linear-gradient(#4c1514eF,#220908ef);border-color:#8d1f1b}.blue-commands{background:linear-gradient(#0d4070ef,#071d39ef);border-color:#0b5bb7}.command-team h3{font-size:11px;margin:0 0 7px;text-align:center;letter-spacing:.5px}.red-commands h3{color:#ffb6ad}.blue-commands h3{color:#a5d9ff}.command-team small{font-size:8px;color:#fff9}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.command-btn{min-height:70px;border-radius:10px;border:2px solid #d53b2f;background:linear-gradient(#8a261f,#3a0f12);color:#fff;padding:4px 2px;font:700 10px inherit;cursor:pointer;transition:transform .12s,filter .12s}.blue-commands .command-btn{border-color:#1b82e0;background:linear-gradient(#0e5da0,#082855)}.command-btn:hover{filter:brightness(1.3)}.command-btn:active{transform:translateY(2px) scale(.98)}.command-btn .icon{display:block;font-size:25px;line-height:30px}.command-btn .cost{display:block;margin-top:2px;color:#ffd060;font-size:11px}.supporters{bottom:8px;left:8px;right:8px;height:40px;display:flex;align-items:center;gap:8px;padding:4px 8px;background:#0c1621ef;border:2px solid #4a5663;border-radius:13px;font-size:9px;white-space:nowrap}.supporters>div{display:flex;align-items:center;gap:3px}.supporters strong{color:#ffd35c}.supporters button{margin-left:auto;border:1px solid #607184;background:#172432;color:#fff;border-radius:6px;font-size:18px;cursor:pointer}.end-modal{inset:0;background:#03101dcc;display:none;place-items:center}.end-modal.show{display:grid}.end-card{width:80%;padding:26px 20px;text-align:center;background:linear-gradient(150deg,#213b58,#0b1627);border:2px solid #55baf7;border-radius:22px;box-shadow:0 18px 50px #000}.end-crown{font-size:42px;color:#ffc34d}.end-card h2{margin:5px 0;font-size:32px}.end-card p{color:#bfd4e4}.end-card button{background:#ed3828;color:#fff;border:0;border-radius:10px;padding:12px 25px;font:700 15px inherit;cursor:pointer}@media(max-height:700px){.top-hud{transform:scale(.88);transform-origin:top center}.resources{bottom:192px}.command-dock{bottom:44px}.supporters{bottom:5px}}
.command-team{min-width:0}.command-team h3{white-space:nowrap;overflow:hidden}.buttons{grid-template-columns:repeat(4,minmax(0,1fr))}.command-btn{min-width:0}
.battle-status{position:absolute;top:220px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #cfeaff55;background:#071522cc;border-radius:14px;font-size:10px;white-space:nowrap;z-index:3;box-shadow:0 3px 10px #0005}.battle-status b{color:#ffcf68;letter-spacing:.7px}.status-dot{width:7px;height:7px;background:#ef4437;border-radius:50%;box-shadow:0 0 8px #ef4437}.battle-status.repairing .status-dot{background:#5fe4ff;box-shadow:0 0 10px #5fe4ff}.battle-status.repairing b{color:#8feaff}
.command-btn{font-size:9px;line-height:10px;white-space:normal;overflow:hidden}.command-btn .icon{font-size:22px;line-height:26px}

/* ── GDD §11/§16/§27 additions: cooldown feedback, banners, MVP stats, debug ── */
.command-btn{position:relative;overflow:hidden}
.command-btn .cd{position:absolute;left:0;bottom:0;width:100%;height:0;background:#000a;pointer-events:none;transition:height .1s linear}
.command-btn[data-queued]:not([data-queued=""]):after{content:attr(data-queued);position:absolute;top:2px;right:3px;font-size:9px;background:#ffd060;color:#241000;border-radius:6px;padding:0 4px;font-weight:700}
.command-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.phase-banner{position:absolute;top:250px;left:50%;transform:translateX(-50%) scale(.9);opacity:0;z-index:4;padding:8px 20px;border-radius:12px;font-size:17px;font-weight:700;letter-spacing:2px;white-space:nowrap;border:2px solid #fff3;background:#0a1725f2;transition:.2s}
.phase-banner.show{opacity:1;transform:translateX(-50%) scale(1)}
.phase-banner[data-tone=red]{border-color:#ef4437;color:#ffcfc8;box-shadow:0 0 22px #ef44374d}
.phase-banner[data-tone=blue]{border-color:#3ab6ff;color:#cfeaff;box-shadow:0 0 22px #3ab6ff4d}
.timer.urgent{animation:pulse 1s steps(2,end) infinite;color:#ff6f5e}
@keyframes pulse{50%{opacity:.45}}
.supporter-list{display:flex;gap:8px;align-items:center;overflow:hidden}
.supporter-list>div{display:flex;align-items:center;gap:3px}
.end-stats{display:grid;gap:4px;margin:12px 0 16px;font-size:11px}
.end-stats>div{display:flex;justify-content:space-between;gap:10px;padding:4px 8px;background:#0a172899;border-radius:7px}
.end-stats span{color:#a9c3d8;letter-spacing:.5px}
.debug-panel{position:absolute;inset:auto 8px 8px;z-index:6;display:none;max-height:62%;overflow:auto;padding:8px;background:#050d16f5;border:1px solid #2b4a63;border-radius:12px;font-size:10px}
.debug-panel.open{display:block}
.debug-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.debug-row>label{width:74px;color:#8fb6d4;text-transform:uppercase;letter-spacing:.6px;flex:none}
.debug-controls{display:flex;flex-wrap:wrap;gap:4px}
.debug-panel button,.debug-panel select,.debug-panel input{font:600 10px inherit;color:#fff;background:#14293c;border:1px solid #2f5674;border-radius:5px;padding:3px 6px;cursor:pointer}
.debug-readout{margin-top:6px;padding-top:6px;border-top:1px solid #22405a;color:#7fd4ff;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.phase-banner,.command-btn .cd{transition:none}.timer.urgent{animation:none}}