:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#07111e; color:#eef7ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% 10%,#17365b 0,#07111e 52%,#030811 100%); }
.shell { width:min(1220px,100%); min-height:100vh; margin:auto; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
header,footer { display:flex; align-items:center; justify-content:space-between; gap:14px; }
h1 { margin:0; font-size:clamp(23px,4vw,42px); letter-spacing:.12em; }
.eyebrow { margin:0 0 3px; color:#55dfff; font-size:12px; letter-spacing:.18em; }
.hud { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.hud span { padding:9px 13px; border:1px solid #315476; border-radius:999px; background:#0b1b2dcc; }
.game-wrap { position:relative; display:grid; place-items:center; }
canvas { width:100%; height:auto; max-height:calc(100vh - 175px); aspect-ratio:16/9; border:1px solid #2c5477; border-radius:20px; background:#0b1724; box-shadow:0 26px 80px #0009; touch-action:manipulation; }
.message { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:max-content; max-width:90%; padding:8px 14px; border:1px solid #3b6587; border-radius:999px; background:#07111edc; text-align:center; font-size:13px; pointer-events:none; }
footer { flex-wrap:wrap; min-height:48px; align-items:flex-end; }
.battle-actions { display:flex; gap:10px; flex-wrap:wrap; }
.deck { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid #284d6c; border-radius:15px; background:#081827dd; }
.deck-label { color:#63dff8; font-size:10px; font-weight:900; letter-spacing:.14em; }
.tower-card { display:flex; align-items:center; gap:9px; min-width:190px; padding:8px 12px; color:#eaf8ff; text-align:left; border:1px solid #55718a; background:#112639; }
.tower-card.selected { border-color:#ffbd55; box-shadow:0 0 0 2px #ffad3444,0 0 18px #ffad342e; }
.tower-card strong,.tower-card small { display:block; }
.tower-card small { margin-top:2px; color:#91aabe; font-size:10px; }
.tower-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:#271400; background:linear-gradient(135deg,#ffd576,#ff9e2f); }
.mode-button[aria-pressed="true"] { border-color:#ff6b7f; color:#fff; background:#5a2030; }
#build-status { min-width:150px; color:#b6cfdf; font-size:11px; }
button { appearance:none; border:0; border-radius:12px; padding:12px 18px; font-weight:800; color:#04131d; background:linear-gradient(135deg,#64ecff,#3a9dff); cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.secondary { color:#dff5ff; border:1px solid #315476; background:#0b1b2d; }
button.skill-button { color:#03171e; background:linear-gradient(135deg,#8ef5ff,#37c9e8); box-shadow:0 0 20px #37dff02b; }
button.skill-button:disabled { box-shadow:none; }
footer p { width:100%; margin:0; color:#90a9bc; font-size:12px; text-align:center; }
@media (max-width:780px) { .shell{min-height:auto;padding:10px} header{align-items:flex-start}.hud{font-size:12px}.hud span{padding:7px 9px} h1{letter-spacing:.07em} canvas{border-radius:14px;max-height:none}.battle-actions{width:100%}.battle-actions button{flex:1}.deck{width:100%;flex-wrap:wrap}.tower-card{flex:1;min-width:165px}#build-status{width:100%;text-align:center}.message{top:8px;font-size:12px;padding:6px 10px} }

.stage-link { display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; border:1px solid #315476; color:#dff5ff; background:#0b1b2d; text-decoration:none; font-weight:800; }
.stage-link:hover { border-color:#55dfff; }

.speed-button { min-width:104px; }
.speed-button.fast { border-color:#55dfff; color:#eaffff; box-shadow:0 0 0 2px #55dfff22 inset; }

.energy-hud { border-color:#9adf65 !important; color:#eaffdc; }
.energy-flash { box-shadow:0 0 0 2px #9adf6533 inset,0 0 18px #9adf6533; }

.levels-shell { justify-content:flex-start; padding-top:40px; }
.levels-panel { border:1px solid #294b68; border-radius:20px; padding:18px; background:#091827d9; box-shadow:0 24px 70px #0007; }
.levels-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px; }
.levels-heading h2 { margin:0 0 4px; font-size:28px; }
.levels-heading p { margin:0; color:#91aabe; }
.stage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stage-card { min-height:180px; display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:16px; border:1px solid #294b68; background:linear-gradient(180deg,#10263a,#091522); position:relative; overflow:hidden; }
.stage-card.locked { opacity:.55; filter:saturate(.55); }
.stage-card.completed { border-color:#6bd98c; box-shadow:0 0 0 1px #6bd98c33 inset; }
.stage-number { font-size:34px; font-weight:950; color:#4fdcff; letter-spacing:.05em; }
.stage-state { font-size:10px; letter-spacing:.15em; font-weight:900; color:#9fc5d9; }
.stage-copy h3 { margin:6px 0 4px; font-size:18px; }
.stage-copy p { margin:0; color:#8ca7b9; font-size:12px; line-height:1.4; }
.stage-play { margin-top:auto; display:inline-flex; align-items:center; justify-content:center; min-height:42px; border-radius:11px; text-decoration:none; font-weight:900; color:#04131d; background:linear-gradient(135deg,#64ecff,#3a9dff); }
.stage-lock { margin-top:auto; color:#8ea3b4; font-weight:800; font-size:12px; }
@media (max-width:900px){ .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .stage-grid{grid-template-columns:1fr}.levels-heading{align-items:flex-start;flex-direction:column}.levels-heading button{width:100%} }

.boss-hud { position:absolute; left:50%; top:18px; transform:translateX(-50%); width:min(520px,82%); padding:10px 12px; border:1px solid #b77cff; border-radius:13px; background:#100b1de8; box-shadow:0 10px 40px #0009,0 0 22px #8f6dff33; z-index:5; }
.boss-title { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:7px; font-size:12px; letter-spacing:.08em; }
.boss-title strong { color:#f3e8ff; }
.boss-title span { color:#d9b7ff; font-size:10px; font-weight:900; }
.boss-track { height:10px; border-radius:99px; overflow:hidden; background:#21172e; border:1px solid #583c73; }
.boss-fill { height:100%; width:100%; background:linear-gradient(90deg,#8f6dff,#e264ff); transition:width .12s linear; }

.stage-stars { margin-top:10px; font-size:20px; letter-spacing:.08em; color:#526d80; }
.stage-stars.earned { color:#ffd86b; text-shadow:0 0 14px #ffd86b44; }

.levels-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.land-gate { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:14px 16px; margin:0 0 16px; border:1px solid #315476; border-radius:14px; background:#0b1b2dcc; }
.land-gate div { display:flex; flex-direction:column; gap:4px; }
.land-gate strong { font-size:14px; }
.land-gate span { color:#91aabe; font-size:12px; }
.gate-open { color:#8ff0a9; }
.gate-locked { color:#e0b878; }
.meta-section { margin-top:20px; padding-top:16px; border-top:1px solid #294b68; }
.meta-section h3 { margin:0 0 12px; }
.loadout-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.loadout-slot { min-height:74px; padding:12px; border-radius:12px; border:1px dashed #436987; background:#0b1a28; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.loadout-slot small { color:#7896ab; font-weight:800; letter-spacing:.08em; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.collection-card { padding:14px; border-radius:15px; border:1px solid #315476; background:linear-gradient(180deg,#10263a,#091522); }
.collection-card.locked { opacity:.52; filter:saturate(.55); }
.collection-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.collection-head h4 { margin:3px 0 4px; font-size:18px; }
.collection-head p { margin:0; color:#8ca7b9; font-size:12px; }
.collection-head small { color:#6dcfea; font-weight:900; letter-spacing:.1em; }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0; }
.stats-grid span { padding:8px; border-radius:9px; background:#07131f; color:#a9c0d0; font-size:11px; }
.stats-grid b { display:block; color:#e8f7ff; margin-bottom:2px; }
.card-actions { display:flex; gap:7px; flex-wrap:wrap; }
.compact { padding:8px 10px; min-height:auto; font-size:11px; }
.locked-copy { color:#8da2b3; font-size:12px; }
.meta-note { margin-top:18px; padding:13px 15px; border-radius:12px; border:1px solid #315476; background:#0a1724; display:flex; flex-direction:column; gap:5px; }
.meta-note span { color:#91aabe; font-size:12px; line-height:1.5; }
@media (max-width:760px){ .collection-grid{grid-template-columns:1fr}.loadout-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.land-gate{align-items:flex-start;flex-direction:column} }

.tower-card[data-tower-card-id="ENERGY"] { border-color:#4ccde6; }
.tower-card[data-tower-card-id="ENERGY"].selected { box-shadow:0 0 0 1px #6ee9ff inset,0 0 22px #43d9ff33; }


/* Landscape battle orientation — Design Freeze v1.17 */
@media (orientation: portrait) and (max-width: 900px) {
  body.battle-page {
    overflow: hidden;
    background: #050b12;
  }

  body.battle-page > .shell {
    visibility: hidden;
    pointer-events: none;
  }

  body.battle-page::before {
    content: "ROTATE DEVICE\A GRAM Defenders gameplay is designed for landscape mode.";
    white-space: pre-line;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 32px;
    text-align: center;
    font: 900 18px/1.5 system-ui, sans-serif;
    letter-spacing: .04em;
    color: #e8f7ff;
    background:
      radial-gradient(circle at 50% 42%, #153a55 0, #07131f 42%, #03080d 100%);
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  body.battle-page .shell { padding: 8px 12px 10px; gap: 8px; }
  body.battle-page header { min-height: 52px; }
  body.battle-page h1 { font-size: clamp(20px, 3vw, 30px); }
  body.battle-page .eyebrow { margin-bottom: 2px; }
  body.battle-page .game-wrap { min-height: 0; }
  body.battle-page canvas { max-height: calc(100vh - 190px); }
  body.battle-page footer { gap: 6px; }
  body.battle-page .battle-actions,
  body.battle-page .deck { gap: 6px; }
  body.battle-page button,
  body.battle-page .stage-link { min-height: 36px; padding: 7px 10px; font-size: 11px; }
}


/* Responsive battle viewport hotfix — preserve 16:9 and prevent HUD overflow */
body.battle-page { overflow-x:hidden; }
body.battle-page .shell { width:100%; max-width:1220px; }
body.battle-page .game-wrap {
  width:100%;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
body.battle-page canvas#game {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 250px);
  aspect-ratio:16 / 9;
  object-fit:contain;
}
body.battle-page footer {
  width:100%;
  min-width:0;
}
body.battle-page .battle-actions {
  flex:1 1 430px;
  min-width:0;
}
body.battle-page .deck {
  flex:1 1 520px;
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}
body.battle-page .tower-card {
  min-width:0;
  flex:1 1 210px;
}
body.battle-page #build-status {
  min-width:0;
  flex:1 1 150px;
}
body.battle-page .battle-actions > *,
body.battle-page .deck > * {
  max-width:100%;
}

@media (orientation: landscape) and (max-height: 650px) {
  body.battle-page .shell {
    min-height:100dvh;
    justify-content:flex-start;
    padding:6px 10px 8px;
    gap:6px;
  }
  body.battle-page header {
    min-height:0;
    flex:0 0 auto;
  }
  body.battle-page header h1 { font-size:clamp(18px,2.4vw,26px); }
  body.battle-page .hud span { padding:5px 8px; font-size:10px; }
  body.battle-page .game-wrap {
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }
  body.battle-page canvas#game {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(100dvh - 178px);
  }
  body.battle-page footer {
    flex:0 0 auto;
    align-items:center;
  }
  body.battle-page .battle-actions {
    flex:1 1 100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  body.battle-page .deck {
    flex:1 1 100%;
    display:grid;
    grid-template-columns:auto minmax(180px,1fr) auto minmax(120px,.6fr);
  }
  body.battle-page footer > p { display:none; }
}

@media (orientation: landscape) and (max-width: 900px) {
  body.battle-page .battle-actions {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%;
  }
  body.battle-page .battle-actions > * {
    min-width:0;
    padding-left:8px;
    padding-right:8px;
    white-space:nowrap;
  }
  body.battle-page .deck {
    width:100%;
  }
}

.land-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.land-tab.active{border-color:#55dfff;color:#fff;box-shadow:0 0 0 2px #55dfff22 inset}
.land-tab:disabled{opacity:.42;cursor:not-allowed}

/* Battle HUD v2 — game-first mobile landscape */
body.battle-page .shell{max-width:none;padding:4px 8px;gap:4px;justify-content:flex-start}
body.battle-page .battle-header{position:absolute;z-index:8;top:8px;left:12px;right:12px;pointer-events:none}
body.battle-page .battle-header h1{font-size:16px;opacity:.72}
body.battle-page .battle-header .eyebrow{font-size:8px}
body.battle-page .hud{margin-left:auto;gap:5px}
body.battle-page .hud span{padding:4px 7px;font-size:9px;background:#07111eaa}
body.battle-page .game-wrap{height:calc(100dvh - 82px);align-items:stretch}
body.battle-page canvas#game{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:12px}
.overlay-controls{position:absolute;top:8px;right:8px;display:flex;gap:5px;z-index:7}
.overlay-controls button{padding:6px 9px;min-height:30px;font-size:10px;background:#07111edc;color:#e8f7ff;border:1px solid #315476}
.tutorial-message{transition:opacity .45s ease;top:44px;font-size:11px}
.tutorial-message.hidden{opacity:0}
.battle-dock{height:74px;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px!important;padding:4px 2px;overflow-x:auto}
.visual-deck{display:flex;gap:5px;align-items:center;flex-wrap:nowrap}
.hero-deck{flex:0 0 auto}
.hero-deck button,.card-deck .tower-card{width:58px!important;min-width:58px!important;height:58px;padding:3px!important;border-radius:11px;display:grid;place-items:center;text-align:center;font-size:8px;overflow:hidden}
.hero-deck button.selected{border:2px solid #65ecff;box-shadow:0 0 16px #55dfff66}
.hero-card-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#173b5b;font-size:10px;font-weight:950}
.card-deck{flex:1 1 auto;overflow-x:auto}
.card-deck .tower-card span:not(.tower-icon){display:none}
.card-deck #build-status{display:none}
.battle-dock .skill-button,.battle-dock .mode-button,.battle-dock .compact-link{min-width:48px;padding:7px 8px;font-size:9px}
.power-mini{display:flex;gap:4px}.power-mini button{padding:6px;font-size:8px;min-width:42px}
.durov-power{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:9;width:54px;height:62px;padding:3px!important;border-radius:14px!important;color:#fff;background:#081827dd!important;border:1px solid #65ecff!important}
.durov-avatar{display:grid;place-items:center;margin:auto;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#62eaff,#356bff);font-size:12px;font-weight:950}
.durov-power small{display:block;font-size:8px}
.durov-power.used{opacity:.3}
.durov-quote{position:absolute;right:72px;top:50%;transform:translateY(-50%);z-index:8;padding:7px 10px;border-radius:10px;background:#07111ee8;border:1px solid #315476;font-size:10px;opacity:0;pointer-events:none;transition:opacity .2s}
.durov-quote.show{opacity:1}
@media (orientation:landscape) and (max-height:650px){
 body.battle-page .game-wrap{height:calc(100dvh - 74px)!important;flex:none!important}
 body.battle-page canvas#game{max-height:none!important}
 body.battle-page footer.battle-dock{height:68px!important;display:flex!important}
 body.battle-page .battle-actions{display:flex}
}