#ui .hud-meters { display:none !important; }
#ui .hud-stat.hp-status .hud-value { color:#2ecc71; transition:color 180ms ease,text-shadow 180ms ease; }
#ui .hud-stat.hp-status.hp-warning .hud-value { color:#f39c12; }
#ui .hud-stat.hp-status.hp-critical .hud-value { color:#e74c3c; text-shadow:0 0 7px rgba(231,76,60,.55); }
#ui .hud-stat.shield-status .hud-value { color:#38bdf8; transition:color 180ms ease,text-shadow 180ms ease; }
#ui .hud-stat.shield-status.shield-warning .hud-value { color:#f39c12; }
#ui .hud-stat.shield-status.shield-critical .hud-value { color:#e74c3c; text-shadow:0 0 7px rgba(231,76,60,.55); }
@media (max-width:700px) {
  #ui { height:auto !important; min-height:0 !important; padding:7px 8px !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; pointer-events:none !important; }
  #ui .hud-primary { display:flex !important; width:calc(100% - 34px) !important; gap:7px !important; flex:none !important; align-items:center !important; }
  #ui .hud-stat { display:flex !important; position:static !important; flex:1 1 0 !important; min-width:0 !important; width:auto !important; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; flex-direction:row !important; align-items:baseline !important; justify-content:center !important; gap:3px !important; }
  #ui .hud-stat.difficulty, #ui .hud-stat.boss { display:none !important; }
  #ui .hud-stat .hud-label { display:inline !important; font-size:7px !important; line-height:1 !important; margin:0 !important; letter-spacing:.08em !important; white-space:nowrap !important; }
  #ui .hud-stat .hud-value { display:inline !important; font-size:12px !important; line-height:1 !important; max-width:none !important; overflow:visible !important; white-space:nowrap !important; }
  #ui .hud-stat.coins .coin-icon { width:11px !important; height:14px !important; min-width:11px !important; min-height:14px !important; }
  #ui .hud-actions { display:flex !important; position:absolute !important; top:6px !important; right:7px !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; pointer-events:auto !important; z-index:30 !important; }
  #ui #pause-btn { width:24px !important; height:24px !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
}

/* Final mobile HUD: keep HP visible alongside the existing coin/score/stage indicators. */
@media (max-width:700px) {
  #ui .hud-primary > .hud-stat.hp-status {
    display:flex !important;
    position:absolute !important;
    top:max(7px, env(safe-area-inset-top)) !important;
    left:188px !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    flex:none !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    overflow:visible !important;
    z-index:13 !important;
    pointer-events:none !important;
  }
  #ui .hud-primary > .hud-stat.hp-status .hud-label {
    display:inline !important;
    font-size:7px !important;
    line-height:1 !important;
    margin:0 !important;
    color:#94a3b8 !important;
    white-space:nowrap !important;
  }
  #ui .hud-primary > .hud-stat.hp-status .hud-value {
    display:inline !important;
    font-size:13px !important;
    line-height:1 !important;
    max-width:none !important;
    overflow:visible !important;
    white-space:nowrap !important;
    color:#2ecc71 !important;
  }
  #ui .hud-primary > .hud-stat.hp-status.hp-warning .hud-value { color:#f39c12 !important; }
  #ui .hud-primary > .hud-stat.hp-status.hp-critical .hud-value { color:#e74c3c !important; text-shadow:0 0 7px rgba(231,76,60,.55) !important; }
}

/* Mobile-only HUD fix: Pause and Upgrade are a dedicated vertical stack. */
@media (max-width:700px) {
  #ui .hud-actions {
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    width: 24px !important;
    height: auto !important;
    min-width: 24px !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #ui .hud-actions > #pause-btn,
  #ui .hud-actions > #upgrade-btn {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ================================================================
   UPGRADE BAY — single-page layout / Nova-safe header
   ================================================================ */
#stage-screen {
  overflow: hidden !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}
#stage-screen .overlay-fit {
  width: 100% !important;
  max-width: 1120px !important;
  padding-top: 112px !important; /* reserved lane for Nova */
  box-sizing: border-box !important;
}
#stage-screen .upgrade-panel {
  width: min(1080px, 96vw) !important;
  max-width: none !important;
  padding: 9px !important;
  margin: 0 auto 7px !important;
  border-color: rgba(34,211,238,.38) !important;
  background: linear-gradient(180deg, rgba(5,18,32,.92), rgba(3,10,20,.94)) !important;
}
#stage-screen .upgrade-header {
  margin-bottom: 6px !important;
  font-size: 11px !important;
}
#stage-screen .upgrade-ship-layout {
  min-height: 155px !important;
  max-width: none !important;
  margin: 4px 0 7px !important;
  border: 1px solid rgba(34,211,238,.28);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, rgba(8,54,82,.28), rgba(2,10,20,.05) 58%, transparent 75%);
}
#stage-screen .upgrade-ship-art {
  width: 96px !important;
  height: 142px !important;
}
#stage-screen .upgrade-ship-glow {
  width: 112px !important;
  height: 112px !important;
}
/* Tabs are no longer part of the Upgrade Bay. */
#stage-screen .upgrade-tabs { display: none !important; }

/* Fixed-price repair kits sit above the permanent upgrades. They are
   consumables, so their price never scales with previous purchases. */
#stage-screen .upgrade-repair-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin: 0 0 7px;
}
#stage-screen .repair-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 66px;
  padding: 7px 9px;
  border: 1px solid rgba(56,189,248,.42);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(6,24,39,.96), rgba(2,10,20,.98));
  box-shadow: inset 0 0 18px rgba(15,23,42,.5);
}
#stage-screen .repair-card-hp {
  border-color: rgba(248,113,113,.62);
  background: linear-gradient(145deg, rgba(69,10,18,.34), rgba(12,8,16,.96));
}
#stage-screen .repair-card-shield {
  border-color: rgba(56,189,248,.62);
  background: linear-gradient(145deg, rgba(8,35,58,.48), rgba(2,10,20,.96));
}
#stage-screen .repair-card-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 9px;
  font-size: 22px;
  font-weight: 900;
}
#stage-screen .repair-card-hp .repair-card-icon { color: #fb7185; background: rgba(127,29,29,.28); }
#stage-screen .repair-card-shield .repair-card-icon { color: #38bdf8; background: rgba(8,47,73,.42); }
#stage-screen .repair-card-copy { min-width: 0; }
#stage-screen .repair-card-copy strong {
  display: block;
  color: #f8fafc;
  font-size: 11px;
  line-height: 1.05;
  letter-spacing: .06em;
}
#stage-screen .repair-card-copy span {
  display: block;
  margin-top: 3px;
  color: #67e8f9;
  font-size: 7px;
  line-height: 1.15;
}
#stage-screen .repair-card-copy small {
  display: block;
  margin-top: 4px;
  color: #cbd5e1;
  font-size: 7px;
}
#stage-screen .repair-button {
  min-width: 104px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(56,189,248,.65);
  border-radius: 7px;
  background: rgba(8,47,73,.75);
  color: #e0f2fe;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .04em;
}
#stage-screen .repair-card-hp .repair-button {
  border-color: rgba(248,113,113,.7);
  background: rgba(127,29,29,.55);
  color: #fecaca;
}
#stage-screen .repair-card.nova-recommended {
  border-color: rgba(103,232,249,.8) !important;
  box-shadow: 0 0 20px rgba(34,211,238,.14), inset 0 0 14px rgba(34,211,238,.06);
}
#stage-screen .repair-button.nova-recommended-button {
  box-shadow: 0 0 12px rgba(34,211,238,.2);
}
#stage-screen .repair-button:disabled { opacity: .38; cursor: default; filter: saturate(.55); }
#stage-screen .upgrade-coin-icon,
#stage-screen .upgrade-header-coin {
  display: inline-block;
  width: 11px;
  height: 14px;
  vertical-align: -3px;
  flex: 0 0 auto;
}
#stage-screen .upgrade-balance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
#stage-screen .coin-price {
  display: inline-block;
  margin-left: 2px;
}
#stage-screen .upgrade-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 100% !important;
}
#stage-screen .upgrade-category {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: stretch !important;
  padding: 6px !important;
  border: 1px solid rgba(56,189,248,.35);
  border-radius: 11px;
  background: rgba(3,12,23,.72);
  box-shadow: inset 0 0 18px rgba(15,23,42,.45);
}
#stage-screen .upgrade-category-header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  text-align: left;
  border: 1px solid rgba(56,189,248,.26);
  background: linear-gradient(135deg, rgba(8,35,58,.72), rgba(3,12,23,.5));
}
#stage-screen .upgrade-category-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56,189,248,.55);
  border-radius: 9px;
  font-size: 23px;
  background: rgba(8,30,48,.82);
  box-shadow: 0 0 14px rgba(34,211,238,.12) inset;
}
#stage-screen .upgrade-category-copy { min-width: 0; }
#stage-screen .upgrade-category-copy strong {
  display: block;
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: .06em;
}
#stage-screen .upgrade-category-copy span {
  display: block;
  margin-top: 3px;
  color: #67e8f9;
  font-size: 8px;
  line-height: 1.2;
}
#stage-screen .upgrade-category-grid {
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
#stage-screen .upgrade-card {
  display: flex !important;
  min-width: 0;
  min-height: 61px !important;
  padding: 6px 7px !important;
  gap: 3px !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(6,20,34,.95), rgba(2,10,20,.96)) !important;
}
#stage-screen .upgrade-card strong {
  font-size: 9px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#stage-screen .upgrade-card small {
  display: none !important;
}
#stage-screen .upgrade-current-value { display: none !important; }
#stage-screen .upgrade-card button {
  min-height: 21px;
  padding: 3px 5px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  margin-top: auto !important;
}
/* Heat is red, not purple. */
#stage-screen .upgrade-category-heat {
  border-color: rgba(248,113,113,.72) !important;
  background: linear-gradient(180deg, rgba(69,10,18,.22), rgba(15,5,10,.48)) !important;
}
#stage-screen .upgrade-category-heat .upgrade-category-header {
  border-color: rgba(248,113,113,.62) !important;
  background: linear-gradient(135deg, rgba(92,16,29,.72), rgba(28,7,14,.55));
}
#stage-screen .upgrade-category-heat .upgrade-category-icon {
  border-color: rgba(248,113,113,.75) !important;
  background: rgba(77,12,24,.7);
  box-shadow: 0 0 16px rgba(239,68,68,.16) inset;
}
#stage-screen .upgrade-category-heat .upgrade-category-copy span { color: #fca5a5 !important; }
#stage-screen .upgrade-category-heat .upgrade-card { border-color: rgba(248,113,113,.38) !important; }
#stage-screen .upgrade-category-heat .upgrade-card button {
  border-color: rgba(248,113,113,.62) !important;
  background: rgba(127,29,29,.42) !important;
  color: #fecaca !important;
}
#stage-screen .upgrade-category-heat .upgrade-card button:hover:not(:disabled) {
  background: rgba(153,27,27,.72) !important;
}
/* Keep all categories visible even if an older class is still present in markup. */

@media (max-width: 700px) {
  #stage-screen { padding: 8px !important; }
  #stage-screen .overlay-fit { padding-top: 82px !important; }
  #stage-screen .upgrade-panel { width: 100% !important; padding: 6px !important; }
  #stage-screen .upgrade-ship-layout { min-height: 112px !important; margin: 2px 0 5px !important; }
  #stage-screen .upgrade-ship-art { width: 72px !important; height: 104px !important; }
  #stage-screen .upgrade-ship-glow { width: 82px !important; height: 82px !important; }
  #stage-screen .upgrade-repair-row {
    gap: 4px;
  }
  #stage-screen .repair-card {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    min-height: 48px;
    padding: 4px;
  }
  #stage-screen .repair-card-icon { width: 26px; height: 26px; font-size: 14px; }
  #stage-screen .repair-card-copy strong { font-size: 7px; }
  #stage-screen .repair-card-copy span,
  #stage-screen .repair-card-copy small { font-size: 5px; }
  #stage-screen .repair-button {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    min-height: 17px;
    font-size: 6px;
  }
  #stage-screen .upgrade-category {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 4px !important;
  }
  #stage-screen .upgrade-category-header { padding: 4px; gap: 4px; }
  #stage-screen .upgrade-category-icon { width: 29px; height: 29px; flex-basis: 29px; font-size: 16px; }
  #stage-screen .upgrade-category-copy strong { font-size: 8px; }
  #stage-screen .upgrade-category-copy span { font-size: 5px; }
  #stage-screen .upgrade-category-grid { gap: 4px !important; }
  #stage-screen .upgrade-card { min-height: 47px !important; padding: 4px !important; }
  #stage-screen .upgrade-card strong { font-size: 7px !important; }
  #stage-screen .upgrade-card button { min-height: 17px; font-size: 6px !important; }
}

/* Upgrade Bay: the ship mirrors the real hull/shield state instead of being a static picture. */
#stage-screen .upgrade-ship-layout .upgrade-ship-condition,
#stage-screen .upgrade-ship-layout .upgrade-ship-shield,
#stage-screen .upgrade-ship-layout .upgrade-ship-repair-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 220px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}
#stage-screen .upgrade-ship-condition { opacity: var(--ship-condition-opacity, 0); transition: opacity 180ms ease; filter: saturate(var(--ship-condition-saturation, 1)) brightness(var(--ship-condition-brightness, 1)); }
#stage-screen .upgrade-ship-layout .upgrade-ship-art { transition: filter 180ms ease, opacity 180ms ease; }
#stage-screen .upgrade-ship-layout.hull-light .upgrade-ship-art { filter: saturate(.84) brightness(.98); }
#stage-screen .upgrade-ship-layout.hull-medium .upgrade-ship-art { filter: saturate(.72) brightness(.93); }
#stage-screen .upgrade-ship-layout.hull-critical .upgrade-ship-art { filter: saturate(.60) brightness(.86) contrast(1.08); }
.upgrade-hull-crack { position:absolute; border-top:1.5px solid rgba(226,232,240,.9); filter: drop-shadow(0 0 2px rgba(239,68,68,.6)); }
.upgrade-hull-crack.crack-a { left:31%; top:49%; width:28%; transform:rotate(-24deg); }
.upgrade-hull-crack.crack-b { left:43%; top:58%; width:22%; transform:rotate(34deg); }
.upgrade-hull-burn { position:absolute; border-radius:50%; background:rgba(239,68,68,.72); box-shadow:0 0 8px rgba(239,68,68,.75); }
.upgrade-hull-burn.burn-a { left:31%; top:47%; width:8px; height:8px; }
.upgrade-hull-burn.burn-b { right:29%; top:58%; width:5px; height:5px; }
.upgrade-hull-sparks { position:absolute; left:50%; top:55%; width:4px; height:4px; border-radius:50%; background:#fbbf24; box-shadow: -18px 8px 0 -1px #f97316, 14px -10px 0 -1px #fbbf24, 20px 7px 0 -2px #ef4444; animation: upgrade-hull-spark 520ms steps(2,end) infinite; }
.upgrade-ship-shield {
  opacity:0;
  width:190px !important;
  height:300px !important;
  border:2px solid rgba(103,232,249,.65);
  border-radius:50% 50% 48% 48% / 46% 46% 54% 54% !important;
  box-shadow:0 0 18px rgba(34,211,238,.58), 0 0 42px rgba(34,211,238,.16), inset 0 0 28px rgba(34,211,238,.10);
  background:radial-gradient(ellipse at 50% 45%, rgba(34,211,238,.10), rgba(34,211,238,.035) 48%, transparent 72%);
  transition:opacity 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
#stage-screen .upgrade-ship-layout.shield-mid .upgrade-ship-shield { opacity:.42; transform:translate(-50%,-50%) scale(.98); }
#stage-screen .upgrade-ship-layout.shield-low .upgrade-ship-shield { opacity:.68; transform:translate(-50%,-50%) scale(.94); border-color:rgba(251,191,36,.72); }
#stage-screen .upgrade-ship-layout.shield-full .upgrade-ship-shield { opacity:.82; transform:translate(-50%,-50%) scale(1); }
.upgrade-ship-repair-fx { opacity:0; border-radius:50%; box-shadow:0 0 0 0 rgba(134,239,172,0); }
#stage-screen .upgrade-ship-layout.hp-repairing .upgrade-ship-repair-fx,
#stage-screen .upgrade-ship-layout.shield-repairing .upgrade-ship-repair-fx { animation: upgrade-repair-wave .85s ease-out 1; }
#stage-screen .upgrade-ship-layout.shield-repairing .upgrade-ship-repair-fx { box-shadow:0 0 22px 7px rgba(56,189,248,.28); }
#stage-screen .upgrade-ship-layout.hp-repairing .upgrade-ship-repair-fx { box-shadow:0 0 22px 7px rgba(134,239,172,.24); }
@keyframes upgrade-repair-wave { 0% { opacity:0; transform:translate(-50%,-50%) scale(.65); } 18% { opacity:.9; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.25); } }
@keyframes upgrade-hull-spark { 0%,100% { opacity:.35; transform:translate(0,0); } 50% { opacity:1; transform:translate(3px,-2px); } }
@media (max-width:699px) {
  #stage-screen .upgrade-ship-layout .upgrade-ship-condition,
  #stage-screen .upgrade-ship-layout .upgrade-ship-repair-fx { width:110px; height:165px; }
  #stage-screen .upgrade-ship-layout .upgrade-ship-shield { width:180px !important; height:280px !important; }
}


/* V16.2.13: restore the larger shield bubble and make room below the ship. */
#stage-screen .upgrade-ship-layout {
  min-height: 285px !important;
  margin-bottom: 8px !important;
}
#stage-screen .upgrade-ship-layout .upgrade-ship-shield {
  width: 190px !important;
  height: 300px !important;
}
#stage-screen .upgrade-return-btn {
  margin-top: 68px !important;
  margin-bottom: 18px !important;
}
@media (max-width:700px) {
  #stage-screen .upgrade-ship-layout {
    min-height: 285px !important;
  }
  #stage-screen .upgrade-ship-layout .upgrade-ship-shield {
    width: 180px !important;
    height: 280px !important;
  }
  #stage-screen .upgrade-return-btn {
    margin-top: 62px !important;
    margin-bottom: 20px !important;
  }
}

/* V16.2.14: keep the large shield bubble, but give it subtle living energy. */
#stage-screen .upgrade-ship-layout .upgrade-ship-shield::before,
#stage-screen .upgrade-ship-layout .upgrade-ship-shield::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 7px;
  border-radius: inherit;
}

#stage-screen .upgrade-ship-layout .upgrade-ship-shield::before {
  border: 1px solid rgba(165,243,252,.38);
  border-left-color: rgba(34,211,238,.78);
  border-right-color: rgba(34,211,238,.16);
  box-shadow: inset 0 0 14px rgba(34,211,238,.08), 0 0 10px rgba(34,211,238,.12);
  animation: upgrade-shield-arc-spin 5.5s linear infinite;
}

#stage-screen .upgrade-ship-layout .upgrade-ship-shield::after {
  inset: 18px;
  border: 1px dashed rgba(125,211,252,.20);
  box-shadow: inset 0 0 18px rgba(34,211,238,.06);
  animation: upgrade-shield-inner-pulse 2.2s ease-in-out infinite;
}

@keyframes upgrade-shield-arc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes upgrade-shield-inner-pulse {
  0%, 100% { opacity: .35; transform: scale(.985); }
  50% { opacity: .85; transform: scale(1.015); }
}

/* A little more energy at full strength; the existing state opacity still controls visibility. */
#stage-screen .upgrade-ship-layout.shield-full .upgrade-ship-shield::before {
  box-shadow: inset 0 0 16px rgba(34,211,238,.11), 0 0 14px rgba(34,211,238,.18);
}

#stage-screen .upgrade-ship-layout.shield-low .upgrade-ship-shield::before {
  border-left-color: rgba(251,191,36,.82);
  border-top-color: rgba(251,191,36,.34);
}

/* V16.2.16: keep Nova fixed; move only the Upgrade Bay content below her slightly downward. */
#stage-screen .overlay-fit {
  padding-top: 130px !important;
}
@media (max-width:700px) {
  #stage-screen .overlay-fit {
    padding-top: 94px !important;
  }
}

/* V16.2.17: move the Upgrade Bay content further down; Nova stays fixed. */
#stage-screen .overlay-fit {
  padding-top: 190px !important;
}
@media (max-width:700px) {
  #stage-screen .overlay-fit {
    padding-top: 154px !important;
  }
}

/* V16.2.18: physically move the Upgrade Bay block downward; Nova remains untouched. */
#stage-screen .overlay-fit {
  position: relative !important;
  top: 95px !important;
}
@media (max-width:700px) {
  #stage-screen .overlay-fit {
    top: 120px !important;
  }
}

/* V16.2.19: balanced Upgrade Bay position. Nova stays fixed; keep the full bay visible. */
#stage-screen .overlay-fit {
  padding-top: 190px !important;
  top: 20px !important;
}
@media (max-width:700px) {
  #stage-screen .overlay-fit {
    padding-top: 154px !important;
    top: 25px !important;
  }
}

/* ===== Upgrade-scherm leesbaarheid ===== */
.upgrade-card strong { font-size: 13px !important; }
.upgrade-card small {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #cbd5e1 !important;
    min-height: 0 !important;
}
.upgrade-current-value { font-size: 10px !important; }
.upgrade-card button { font-size: 11px !important; padding: 7px 8px !important; }
.upgrade-tab-btn { font-size: 12px !important; letter-spacing: .1em !important; }
.upgrade-header { font-size: 13px !important; }
.stat-label { font-size: 9px !important; }
.overlay-screen p { font-size: 13px !important; color: #cbd5e1 !important; }

.upgrade-card button:disabled { opacity: 0.75 !important; }
.upgrade-card.maxed button { opacity: 1 !important; }

.upgrade-panel { max-width: 460px !important; }

@media (max-width: 700px) {
    .upgrade-tabs {
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
        margin: 0 0 10px !important;
        pointer-events: auto !important;
    }
    .upgrade-tab-btn {
        position: static !important;
        transform: none !important;
        width: auto !important;
        min-height: 44px !important;
    }
    .upgrade-zone-line { display: none !important; }
    .upgrade-card small { font-size: 11px !important; }
}

/* ================================================================
   Desktop HUD: net zo minimalistisch als op de gsm.
   Geen halfdoorzichtige balk, geen kaartjes, geen blur, niets afgekapt.
   Alleen icoon/label + waarde, onder elkaar linksboven (Nova staat rechts ernaast).
   ================================================================ */
@media (min-width: 701px) {
  body.hud-compact-phone #ui {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 12 !important;
  }
  body.hud-compact-phone #ui::before,
  body.hud-compact-phone #ui .hud-stat::after { display: none !important; }

  body.hud-compact-phone #ui .hud-primary {
    position: absolute !important;
    top: calc(112px + env(safe-area-inset-top)) !important; /* onder Nova */
    left: max(12px, env(safe-area-inset-left)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  body.hud-compact-phone #ui .hud-primary > .hud-stat {
    display: flex !important;
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.hud-compact-phone #ui .hud-stat.difficulty,
  body.hud-compact-phone #ui .hud-stat.boss,
  body.hud-compact-phone #ui .boss-timer-stat,
  body.hud-compact-phone #ui .hud-meters { display: none !important; }

  /* Waardes: nooit afkappen. */
  body.hud-compact-phone #ui .hud-primary > .hud-stat .hud-value {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-shadow: 0 0 7px rgba(2,6,23,.95), 0 0 8px currentColor !important;
  }
  /* Icoontjes (★ ▲ 🛡) op één regel met de waarde. */
  body.hud-compact-phone #ui .hud-stat.score .hud-value::before,
  body.hud-compact-phone #ui .hud-stat.stage .hud-value::before,
  body.hud-compact-phone #ui .hud-stat.shield-status .hud-value::before {
    display: inline !important;
    margin: 0 !important;
    font-size: 12px !important;
  }
  /* Alleen HP houdt een (klein) tekstlabel, net als op de gsm. */
  body.hud-compact-phone #ui .hud-stat.hp-status .hud-label {
    display: inline !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    color: #94a3b8 !important;
    text-shadow: 0 0 6px rgba(2,6,23,.95) !important;
  }
  body.hud-compact-phone #ui .hud-stat.stage .hud-value { color: #c4b5fd !important; }
  body.hud-compact-phone #ui .hud-stat.coins .hud-value { color: #fbbf24 !important; }
  body.hud-compact-phone #ui .hud-stat.shield-status .hud-value { color: #7dd3fc !important; }
  body.hud-compact-phone #ui .hud-stat.hp-status.hp-warning .hud-value,
  body.hud-compact-phone #ui .hud-stat.shield-status.shield-warning .hud-value { color: #f39c12 !important; }
  body.hud-compact-phone #ui .hud-stat.hp-status.hp-critical .hud-value,
  body.hud-compact-phone #ui .hud-stat.shield-status.shield-critical .hud-value { color: #e74c3c !important; }

  /* Pause + Upgrade: kale knoppen rechtsboven, niet meer boven aan de rand afgekapt. */
  body.hud-compact-phone #ui .hud-actions {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    z-index: 30 !important;
  }
  body.hud-compact-phone #ui .hud-actions > .hud-action {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}