* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent:   #ff5a1f;
  --accent-d: rgba(255,90,31,0.12);
  --accent-b: rgba(255,90,31,0.30);
  --bg:       #0a0a0a;
  --bg-card:  #111111;
  --fg:       #f0ece4;
  --fg-muted: #706b65;
  --border:   rgba(240,236,228,0.07);
  --font:     'Consolas', 'Courier New', monospace;
}

/* ── Desktop base ─────────────────────────────────────── */
body {
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#page-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 0 60px rgba(255,90,31,0.15), 0 0 120px rgba(255,90,31,0.07);
  position: relative;
}

#game-wrapper { position: relative; display: inline-block; }
#gameCanvas   { display: block; cursor: crosshair; }

/* ── DOM elements hidden on desktop ──────────────────── */
#mob-hud, #mob-controls, #mob-panel, #mob-gameover { display: none; }

/* ═══════════════════════════════════════════════════════
   MOBILE  ≤ 768 px  —  full flow layout, no fixed/overlay
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Full-screen flex column */
  body {
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  #page-wrapper {
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    box-shadow: none;
  }

  /* ── 1. TOP HUD ─────────────────────────────────── */
  #mob-hud {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    gap: 10px;
    background: rgba(8,8,8,0.98);
    border-bottom: 1px solid var(--border);
    z-index: 10;
  }
  .hud-gold, .hud-day {
    font-family: var(--font); font-size: 14px; font-weight: 700;
    white-space: nowrap; flex-shrink: 0;
  }
  .hud-gold { color: #f5c842; }
  .hud-day  { color: #ff7040; }

  .hud-hp-wrap {
    flex: 1; display: flex; align-items: center; gap: 6px;
    min-width: 0;
  }
  .hud-hp-bar {
    flex: 1; height: 8px; min-width: 0;
    background: rgba(255,255,255,0.07);
    border-radius: 4px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    position: relative;
  }
  .hud-hp-bar::after {
    content: '';
    position: absolute; inset: 0;
    width: var(--hp, 100%);
    border-radius: 4px;
    background: var(--hp-color, #2ecc71);
    transition: width 0.4s ease, background 0.4s ease;
  }
  .hud-hp-txt {
    font-family: var(--font); font-size: 12px; font-weight: 700;
    color: var(--fg-muted); flex-shrink: 0; min-width: 28px;
    text-align: right;
  }

  /* ── 2. CANVAS ──────────────────────────────────── */
  #game-wrapper {
    flex: 0 0 75vw; /* 960:720 = 4:3; canvas = 133vw wide, 75vw tall */
    width: 100vw;
    overflow: hidden;
    background: var(--bg);
    position: relative;
  }
  #gameCanvas {
    /* Map area (960px) fills 100vw; panel area clips off-right */
    width:  calc(100vw * 1280 / 960) !important;
    height: auto !important;
    display: block;
    position: absolute;
    top: 0; left: 0;
    touch-action: none;
  }

  /* ── 3. CONTROLS BAR ────────────────────────────── */
  #mob-controls {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: rgba(8,8,8,0.98);
    border-top: 1px solid rgba(255,90,31,0.18);
    border-bottom: 1px solid var(--border);
    z-index: 10;
  }

  .ctrl-start {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,90,31,0.45);
    background: rgba(255,90,31,0.10);
    font-family: var(--font); font-size: 13px; font-weight: 700;
    color: var(--accent); cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s;
  }
  .ctrl-start.wave-on {
    border-color: rgba(255,80,80,0.45);
    background: rgba(255,80,80,0.10);
    color: #ff6b6b;
    animation: start-pulse 2s ease-in-out infinite;
  }
  .ctrl-start.placing {
    border-color: rgba(255,90,31,0.65);
    background: rgba(255,90,31,0.18);
  }
  @keyframes start-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

  #mob-speeds {
    display: flex; gap: 4px; flex-shrink: 0;
  }
  .ctrl-spd {
    width: 34px; height: 34px;
    border-radius: 7px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    font-family: var(--font); font-size: 12px; font-weight: 700;
    color: var(--fg-muted); cursor: pointer;
    touch-action: manipulation;
    transition: all 0.12s;
  }
  .ctrl-spd.on {
    border-color: rgba(46,204,113,0.45);
    background: rgba(46,204,113,0.08);
    color: #2ecc71;
  }
  .ctrl-spd:active { transform: scale(0.91); }

  /* ── 4. PANEL ───────────────────────────────────── */
  #mob-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #0d0d0d;
    border-top: 1px solid rgba(255,90,31,0.15);
    overflow: hidden;
  }

  /* Drag handle */
  #mob-panel-drag {
    flex-shrink: 0;
    height: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: ns-resize; touch-action: none;
  }
  #mob-panel-drag::after {
    content: '';
    width: 36px; height: 4px;
    background: rgba(240,236,228,0.15);
    border-radius: 2px;
  }

  /* Tab bar */
  #mob-panel-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 0 10px 8px;
  }
  .mob-tab {
    flex: 1; height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: transparent;
    font-family: var(--font); font-size: 11px; font-weight: 700;
    color: var(--fg-muted); cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-tab.active {
    border-color: rgba(255,90,31,0.40);
    background: var(--accent-d);
    color: var(--accent);
  }
  .mob-tab:active { transform: scale(0.95); }

  /* Scrollable body */
  #mob-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: flex 0.25s ease;
  }
  #mob-panel-body.collapsed {
    flex: 0 0 0;
    overflow: hidden;
  }
  #mob-panel-content { padding: 4px 10px 12px; }
  #mob-panel-body::-webkit-scrollbar { width: 3px; }
  #mob-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255,90,31,0.25); border-radius: 2px;
  }

  /* ── Tower rows ─────────────────────────────────── */
  .mob-section-title {
    font-family: var(--font); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--accent); padding: 2px 2px 8px;
  }
  .mob-discount-note {
    font-family: var(--font); font-size: 12px; color: #88dd44;
    padding: 0 2px 8px;
  }
  .mob-tower-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    border: 1.5px solid var(--border); background: var(--bg-card);
    margin-bottom: 6px; cursor: pointer; min-height: 52px;
    transition: border-color 0.15s, background 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-tower-row.sel { border-color: rgba(255,90,31,0.55); background: #1a1008; }
  .mob-tower-row.dim { opacity: 0.42; }
  .mob-tower-row:active { transform: scale(0.98); }
  .mob-tower-strip { width: 5px; height: 36px; border-radius: 3px; flex-shrink: 0; }
  .mob-tower-info  { flex: 1; min-width: 0; }
  .mob-tower-name  {
    font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mob-tower-desc  {
    font-family: var(--font); font-size: 11px; color: var(--fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
  }
  .mob-tower-cost { font-family: var(--font); font-size: 14px; font-weight: 700; color: #f5c842; flex-shrink: 0; }
  .mob-tower-cost.dim { color: #7a7040; }

  /* ── Upgrade panel ──────────────────────────────── */
  .mob-action-row { display: flex; gap: 8px; margin-bottom: 10px; }
  .mob-action-btn {
    flex: 1; padding: 11px 8px; border-radius: 10px;
    border: 1.5px solid rgba(240,236,228,0.15); background: #111;
    font-family: var(--font); font-size: 13px; font-weight: 700;
    color: #c0bab2; cursor: pointer; text-align: center;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .mob-action-btn.sell { border-color: rgba(180,40,40,0.40); color: #ff7070; background: #1c0808; }
  .mob-action-btn:active { transform: scale(0.97); }
  .mob-tower-header { text-align: center; margin-bottom: 8px; }
  .mob-tower-header-name  { font-family: var(--font); font-size: 17px; font-weight: 700; }
  .mob-tower-header-stats { font-family: var(--font); font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
  .mob-purchased { font-family: var(--font); font-size: 12px; color: #3cbb78; padding: 2px 0; }

  .mob-upgrade-card {
    padding: 12px 14px; border-radius: 10px;
    border: 1.5px solid var(--border); background: #0d0d0d;
    margin-bottom: 8px; cursor: pointer; min-height: 52px;
    transition: border-color 0.15s, background 0.15s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .mob-upgrade-card.afford { border-color: rgba(255,90,31,0.28); background: #130800; }
  .mob-upgrade-card.capstone.afford { border-color: rgba(255,220,80,0.45); }
  .mob-upgrade-card.dim { opacity: 0.38; }
  .mob-upgrade-card:active { transform: scale(0.98); }
  .mob-upg-badge { font-family: var(--font); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 3px; }
  .mob-upg-badge.capstone { color: #ffdd66; }
  .mob-upg-name { font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--fg);
    margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-upg-cost { font-family: var(--font); font-size: 12px; font-weight: 700; color: #f5c842; margin-bottom: 4px; }
  .mob-upg-cost.dim { color: #666640; }
  .mob-upg-desc { font-family: var(--font); font-size: 11px; color: #a09890; line-height: 1.45; }

  /* ── Tech tree ──────────────────────────────────── */
  .mob-tech-tabs { display: flex; gap: 5px; margin-bottom: 10px; }
  .mob-tech-tab {
    flex: 1; padding: 8px 4px; border-radius: 7px;
    border: 1.5px solid var(--border); background: #0a0a0a;
    font-family: var(--font); font-size: 10px; font-weight: 700;
    color: var(--fg-muted); text-align: center; text-transform: uppercase;
    letter-spacing: 0.05em; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
  }
  .mob-tech-tab.on { color: var(--accent); border-color: rgba(255,90,31,0.40); background: #1a0d00; }
  .mob-tech-item {
    padding: 12px 14px; border-radius: 10px;
    border: 1.5px solid var(--border); background: #0d0d0d;
    margin-bottom: 8px; cursor: pointer; min-height: 52px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s;
  }
  .mob-tech-item.bought { border-color: rgba(46,204,113,0.28); background: #041804; }
  .mob-tech-item.can    { border-color: rgba(255,90,31,0.25); background: #100800; }
  .mob-tech-item:active { transform: scale(0.98); }
  .mob-tech-name { font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--fg);
    margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-tech-name.done { color: #3cbb78; }
  .mob-tech-cost { font-family: var(--font); font-size: 12px; font-weight: 700; color: #f5c842; margin-bottom: 4px; }
  .mob-tech-desc { font-family: var(--font); font-size: 11px; color: var(--fg-muted); line-height: 1.4; }

  /* ── Scores ─────────────────────────────────────── */
  .mob-score-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; margin-bottom: 4px;
    font-family: var(--font);
  }
  .mob-score-row.gold-bg { background: rgba(200,160,32,0.07); }
  .mob-score-rank { font-size: 13px; font-weight: 700; width: 22px; text-align: right; flex-shrink: 0; }
  .mob-score-name { font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-score-val  { font-size: 13px; font-weight: 700; flex-shrink: 0; }
  .mob-score-week { font-family: var(--font); font-size: 9px; color: #2a2826; text-align: center; padding: 6px 0 2px; }

  /* ── Game over overlay ──────────────────────────── */
  #mob-gameover {
    display: none;
    position: absolute; /* relative to page-wrapper, not viewport */
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,0.93);
    align-items: center; justify-content: center;
    padding: 20px;
  }
  #mob-gameover.open { display: flex; }
  .go-box {
    background: #0a0a0a; border: 2.5px solid #cc2020; border-radius: 12px;
    padding: 28px 24px; width: 100%; max-width: 360px; text-align: center;
  }
  .go-title { font-family: var(--font); font-size: 22px; font-weight: 700; color: #cc2222; margin-bottom: 6px; line-height: 1.2; }
  .go-sub   { font-family: var(--font); font-size: 13px; color: var(--fg-muted); margin-bottom: 18px; }
  #mob-go-stats { margin-bottom: 20px; text-align: left; }
  .go-stat {
    display: flex; justify-content: space-between;
    font-family: var(--font); font-size: 14px; padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .go-stat-l { color: var(--fg-muted); }
  .go-stat-v { color: var(--fg); font-weight: 700; }
  #mob-go-restart {
    width: 100%; padding: 15px; border-radius: 10px;
    border: 2px solid #2ecc71; background: #051408;
    font-family: var(--font); font-size: 17px; font-weight: 700; color: #2ecc71;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  #mob-go-restart:active { background: #0a2810; }

} /* end @media mobile */