:root { color-scheme: dark; font-family: Inter, Pretendard, system-ui, sans-serif; --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); background: #111827; color: #f8fafc; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; overflow: hidden; }
body { background: #111827; }
button { min-height: 44px; border: 0; border-radius: 7px; font: inherit; font-weight: 850; letter-spacing: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
button:disabled { cursor: not-allowed; filter: grayscale(.6); opacity: .42; }
#app { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100vw; height: 100vh; height: 100dvh; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); background: #111827; }
.topbar { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(390px, 1.7fr) minmax(150px, .7fr); min-height: 66px; align-items: center; gap: 12px; padding: 8px clamp(10px, 2vw, 22px); border-bottom: 1px solid #35445d; background: #172033; }
.brand { display: grid; min-width: 0; }
.brand strong { color: #fde047; font-size: clamp(.9rem, 2vw, 1.2rem); }
.brand span { color: #9fb1ca; font-size: .64rem; font-weight: 900; }
.battle-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.base-bar { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 7px; font-size: .66rem; font-weight: 900; }
.base-bar i, .resource-row i { display: block; height: 8px; overflow: hidden; background: #080d18; }
.base-bar b, .resource-row b { display: block; height: 100%; }
.player-base b { width: 100%; background: #38bdf8; }
.enemy-base b { width: 100%; background: #fb7185; }
.timer { color: #f8fafc; font: 900 .8rem ui-monospace, monospace; }
.top-actions { display: flex; justify-content: flex-end; gap: 6px; }
.icon-btn { width: 43px; min-height: 43px; padding: 0; border: 1px solid #43536c; background: #222e44; color: #f8fafc; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 27vw, 390px); min-height: 0; }
.battlefield { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 10px; background: #101827; }
#game { display: block; width: min(100%, calc((100dvh - 86px) * 24 / 13)); height: auto; max-height: 100%; aspect-ratio: 24 / 13; border: 1px solid #43536c; border-radius: 7px; background: #8ecae6; box-shadow: 0 22px 60px #0007; }
.command-rail { display: grid; grid-template-rows: auto auto auto auto minmax(60px, 1fr); min-height: 0; gap: 9px; padding: 10px; border-left: 1px solid #35445d; background: #141d2e; }
.resource-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.resource-row > div { display: grid; grid-template-columns: 1fr auto; gap: 5px; padding: 8px; border: 1px solid #35445d; border-radius: 7px; background: #1d283c; }
.resource-row span { color: #9fb1ca; font-size: .65rem; font-weight: 900; }
.resource-row strong { font-size: .9rem; }
.resource-row i { grid-column: 1 / -1; }
#energyBar { width: 50%; background: #38bdf8; }
#powerBar { width: 0; background: #fde047; }
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.unit-grid button { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-width: 0; min-height: 62px; align-content: center; align-items: center; padding: 7px; border: 1px solid #3c4c65; background: #202c42; color: #f8fafc; text-align: left; }
.unit-icon { grid-row: span 2; color: #fde047; font-size: 1.35rem; text-align: center; }
.unit-grid strong, .unit-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-grid strong { font-size: .78rem; }
.unit-grid small, .upgrade-row small, .power-btn small { color: #9fb1ca; font-size: .62rem; font-weight: 650; }
.upgrade-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.upgrade-row button { display: grid; min-width: 0; gap: 3px; padding: 7px; border: 1px solid #495870; background: #2a3549; color: #f8fafc; }
.upgrade-row strong { font-size: .7rem; }
.power-btn { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; min-height: 58px; padding: 8px; background: #fde047; color: #1d2330; text-align: left; }
.power-btn > span { grid-row: span 2; font-size: 1.65rem; text-align: center; }
.power-btn small { color: #554914; }
.log { min-height: 0; margin: 0; padding: 7px 7px 7px 25px; overflow: auto; border-top: 1px solid #35445d; color: #8194af; font-size: .67rem; line-height: 1.55; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px); place-items: center; background: rgba(5, 10, 20, .76); backdrop-filter: blur(8px); }
.hidden { display: none !important; }
.modal-panel { display: grid; width: min(500px, 100%); max-height: 100%; gap: 16px; padding: clamp(18px, 4vw, 28px); overflow: auto; border: 1px solid #52627a; border-radius: 8px; background: #182236; box-shadow: 0 30px 80px #0009; }
.eyebrow { margin: 0; color: #fde047; font-size: .68rem; font-weight: 950; }
.modal h1, .modal h2 { margin: 0; letter-spacing: 0; }
.modal h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
.difficulty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; background: #0c1321; }
.difficulty button { background: #2b3850; color: #d8e2ef; }
.difficulty button.selected { background: #38bdf8; color: #082f49; }
.loadout-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.loadout-summary span { padding: 10px 7px; border: 1px solid #384861; background: #202c42; color: #aebed2; font-size: .7rem; font-weight: 750; text-align: center; }
.primary { width: 100%; background: #fde047; color: #20220d; }
.result-panel p { margin: 0; color: #b4c2d4; }
@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr auto; min-height: 52px; padding: 5px 8px; }
  .battle-status { position: fixed; z-index: 5; right: calc(var(--safe-right) + 8px); bottom: calc(var(--safe-bottom) + 7px); width: min(430px, calc(100vw - 16px)); padding: 7px; border: 1px solid #43536c; background: #172033ed; }
  .base-bar { grid-template-columns: auto minmax(38px, 1fr); }
  .base-bar > strong { display: none; }
  .layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 56dvh) minmax(0, 44dvh); }
  .battlefield { padding: 5px; }
  #game { width: min(100%, calc(55dvh * 24 / 13)); }
  .command-rail { grid-template-columns: .75fr 1.5fr 1fr; grid-template-rows: auto auto; padding: 7px 7px calc(var(--safe-bottom) + 58px); border-top: 1px solid #35445d; border-left: 0; }
  .resource-row { grid-row: span 2; grid-template-columns: 1fr; }
  .unit-grid { grid-row: span 2; }
  .upgrade-row { grid-template-columns: 1fr; }
  .log { display: none; }
}
@media (max-width: 520px) and (orientation: portrait) {
  .brand span { display: none; }
  .layout { grid-template-rows: minmax(0, 39dvh) minmax(0, 61dvh); }
  #game { width: min(100%, calc(38dvh * 24 / 13)); }
  .command-rail { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 6px; }
  .resource-row { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .unit-grid { grid-row: auto; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .unit-grid button { grid-template-columns: 1fr; min-height: 68px; text-align: center; }
  .unit-icon { grid-row: auto; font-size: 1rem; }
  .unit-grid small { display: none; }
  .upgrade-row { grid-template-columns: 1fr 1fr; }
  .power-btn { min-height: 54px; }
  .loadout-summary { grid-template-columns: 1fr; }
}