:root {
  --blue: #2fa8ff;
  --blue-deep: #0b63b8;
  --red: #ff3b30;
  --gold: #ffc42e;
  --ink: #0d1b2a;
  --panel: rgba(10, 24, 40, 0.82);
  --stroke: rgba(255, 255, 255, 0.16);
  /* Strip occupied by VK's bottom banner, set from src/ads.js. Stays 0 outside
     VK, where there is no banner at all. */
  --ad-inset: 0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0a1420;
  color: #fff;
  font-family: 'Bahnschrift', 'DIN Alternate', 'Arial Black', system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app { position: fixed; inset: 0; }

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#game:active { cursor: grabbing; }

.hidden { display: none !important; }

/* ---------------- HUD ---------------- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(16px + var(--ad-inset));
  display: flex;
  flex-direction: column;
}

.hud-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  background: rgba(8, 20, 34, 0.62);
  border: 2px solid var(--stroke);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: clamp(13px, 2.4vw, 17px);
  letter-spacing: 0.09em;
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

.chip-squad {
  background: linear-gradient(180deg, rgba(47, 168, 255, 0.95), rgba(11, 99, 184, 0.95));
  border-color: rgba(255, 255, 255, 0.5);
  font-size: clamp(17px, 3.4vw, 24px);
  display: flex;
  align-items: baseline;
  gap: 9px;
  box-shadow: 0 6px 18px rgba(0, 60, 120, 0.45);
}
.chip-label { font-size: 0.6em; opacity: 0.85; letter-spacing: 0.14em; }
.chip-squad.bump { animation: bump 0.26s ease-out; }
.chip-squad.hurt { animation: hurt 0.3s ease-out; }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes hurt {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); filter: brightness(1.7) saturate(0.4); }
  75% { transform: translateX(6px); }
}

.hud-progress {
  position: relative;
  margin: 12px auto 0;
  width: min(440px, 74%);
  height: 8px;
  border-radius: 999px;
  background: rgba(4, 14, 26, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.18);
  overflow: visible;
}
.hud-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fd6ff, #7cf3a0);
  transition: width 0.12s linear;
}
.hud-progress-flag {
  position: absolute;
  right: -6px;
  top: -13px;
  font-size: 16px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.chip-kills {
  background: rgba(40, 10, 8, 0.6);
  border-color: rgba(255, 120, 100, 0.35);
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.chip-kills .chip-label { color: #ff9a8a; }

.hud-support {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 10px auto 0;
  flex-wrap: wrap;
}
.support-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 20, 34, 0.68);
  border: 2px solid rgba(124, 243, 160, 0.4);
  border-radius: 999px;
  padding: 4px 12px 4px 13px;
  font-size: 11px;
  letter-spacing: 0.18em;
  animation: bump 0.3s ease-out;
}
.support-chip.support-air { border-color: rgba(124, 227, 255, 0.45); }
.support-label { color: #7cf3a0; }
.support-air .support-label { color: #7ce3ff; }
.support-bar {
  width: 68px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 14, 26, 0.8);
  overflow: hidden;
}
.support-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7cf3a0, #d6ffb0);
  transition: width 0.15s linear;
}
.support-air .support-fill { background: linear-gradient(90deg, #7ce3ff, #c8f6ff); }

.boss-bar {
  margin: 16px auto 0;
  width: min(520px, 86%);
  text-align: center;
}
.boss-bar-label {
  font-size: 12px;
  letter-spacing: 0.28em;
  opacity: 0.9;
  margin-bottom: 5px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.boss-bar-track {
  height: 16px;
  border-radius: 999px;
  background: rgba(4, 14, 26, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.boss-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff8a3b, #ff2d20);
  transition: width 0.1s linear;
}

.hud-bottom { margin-top: auto; text-align: center; }
.hint {
  font-size: 13px;
  letter-spacing: 0.2em;
  opacity: 0.55;
  text-transform: uppercase;
  transition: opacity 0.6s;
}
.hint.faded { opacity: 0; }

/* ---------------- Screens ---------------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px calc(20px + var(--ad-inset));
  background: radial-gradient(ellipse at 50% 42%, rgba(6, 30, 56, 0.3), rgba(3, 12, 22, 0.76));
  backdrop-filter: blur(2px);
  animation: fadein 0.22s ease-out;
  z-index: 5;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.panel {
  width: min(460px, 100%);
  background: var(--panel);
  border: 2px solid var(--stroke);
  border-radius: 22px;
  padding: 28px 26px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.panel-slim { width: min(340px, 100%); }

.title {
  margin: 0;
  font-size: clamp(40px, 11vw, 62px);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.4);
}
.title span {
  display: block;
  background: linear-gradient(180deg, #7ce3ff, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline {
  margin: 8px 0 16px;
  letter-spacing: 0.42em;
  font-size: 12px;
  opacity: 0.7;
  text-transform: uppercase;
}
.blurb {
  font-size: 14px;
  line-height: 1.62;
  opacity: 0.88;
  font-family: system-ui, sans-serif;
  margin: 0 0 16px;
}

.gate-legend { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.lg {
  padding: 6px 13px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.lg-add { background: rgba(47, 214, 255, 0.85); }
.lg-mul { background: rgba(255, 196, 46, 0.85); color: #3a2500; }
.lg-sub { background: rgba(255, 59, 48, 0.85); }
.lg-div { background: rgba(155, 28, 23, 0.9); }

.btn {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 15px;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #052038;
  background: linear-gradient(180deg, #9ceaff, #2fa8ff);
  border: none;
  border-bottom: 4px solid #0b63b8;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 2px solid var(--stroke);
  font-size: 15px;
  padding: 11px;
}

.stats-line, .controls-line {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.controls-line { opacity: 0.42; }
kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 11px;
}

.brief-level { font-size: clamp(30px, 8vw, 44px); letter-spacing: 0.06em; }
.brief-sub {
  font-family: system-ui, sans-serif;
  opacity: 0.7;
  font-size: 14px;
  margin: 8px 0 22px;
}

.verdict { margin: 0 0 18px; font-size: clamp(26px, 7vw, 38px); letter-spacing: 0.06em; }
.verdict-win { color: #7cf3a0; text-shadow: 0 4px 0 rgba(0, 60, 30, 0.5); }
.verdict-lose { color: #ff6b60; text-shadow: 0 4px 0 rgba(60, 0, 0, 0.5); }

.score-rows { font-family: system-ui, sans-serif; font-size: 14px; margin-bottom: 14px; }
.score-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  opacity: 0;
  animation: rowin 0.3s ease-out forwards;
}
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } to { opacity: 0.85; transform: none; } }
.score-row b { color: #7ce3ff; }

.score-total { font-size: 20px; letter-spacing: 0.12em; margin: 6px 0 20px; }
.score-total b { color: var(--gold); }

.lose-why { font-family: system-ui, sans-serif; font-size: 14px; opacity: 0.75; margin: 0 0 16px; }

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a1420;
  letter-spacing: 0.3em;
  font-size: 13px;
  z-index: 10;
}

/* ---------------- Menu system ---------------- */

.screen { overflow-y: auto; }
.panel-menu { padding-top: 20px; }
.panel-wide { width: min(560px, 100%); }

.title-accent {
  display: block;
  background: linear-gradient(180deg, #7ce3ff, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.coin-bar {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(4, 14, 26, 0.7);
  border: 2px solid rgba(255, 196, 46, 0.45);
  border-radius: 999px;
  padding: 5px 14px 5px 10px;
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.panel { position: relative; }
.coin-icon { font-size: 15px; }

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.btn-slim { padding: 9px; font-size: 13px; }
.btn-daily {
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  border-bottom-color: #a8760a;
  animation: pulseGlow 1.6s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 196, 46, 0); }
  50% { box-shadow: 0 0 22px rgba(255, 196, 46, 0.55); }
}
/* Rewarded-ad buttons: reads as a bonus without competing with PLAY / RETRY. */
.btn-ad {
  background: linear-gradient(180deg, #7fd4ff, #2f9bd6);
  border-bottom-color: #1b6a95;
}
.btn-ad:disabled { opacity: 0.55; animation: none; }

.btn-danger { color: #ff8a80; border-color: rgba(255, 90, 80, 0.4); }

/* ---------------- Level grid ---------------- */

/* ---------------- Level map ---------------- */

.panel-map { width: min(1080px, 100%); min-width: 0; padding: 22px 18px 18px; }

.map-progress {
  font-size: clamp(12px, 2.4vw, 15px);
  letter-spacing: 0.08em;
  color: #cfe8ff;
  margin: -4px 0 12px;
}
.map-progress b { color: var(--gold); }

/* Narrow screens scroll the map sideways rather than shrinking the nodes below
   a tappable size. */
.map-scroll {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  overflow-y: hidden;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 2px solid var(--stroke);
  -webkit-overflow-scrolling: touch;
}
.map-stage {
  position: relative;
  min-width: 560px;
  line-height: 0;
}
.map-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.map-nodes { position: absolute; inset: 0; }

.map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(9, 26, 44, 0.86);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.09s, box-shadow 0.15s;
}
.map-node:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 4px 16px rgba(47, 168, 255, 0.7);
}
.map-node:disabled { cursor: not-allowed; }

/* Cleared decks read gold, the next one pulses, locked ones stay dark. */
.map-node.done {
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}
.map-node.current {
  background: linear-gradient(180deg, #7ce3ff, var(--blue));
  border-color: #fff;
  animation: pulseGlow 1.6s ease-in-out infinite;
  z-index: 2;
}
.map-node.locked {
  background: rgba(4, 12, 22, 0.88);
  border-color: rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.map-node-lock { font-size: 9px; height: 8px; line-height: 8px; opacity: 0.75; }
.map-node.boss { width: 48px; height: 48px; font-size: 18px; }

.map-node-stars {
  font-size: 8px;
  letter-spacing: 0.5px;
  height: 8px;
  color: rgba(0, 0, 0, 0.55);
}
.map-node.locked .map-node-stars,
.map-node:not(.done) .map-node-stars { color: var(--gold); }

/* ---------------- Shop ---------------- */

.shop-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 52vh;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 2px;
}
.shop-card {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(10, 30, 52, 0.62);
  border: 2px solid var(--stroke);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
}
.shop-icon { font-size: 24px; width: 30px; text-align: center; }
.shop-body { flex: 1; min-width: 0; }
.shop-name { font-size: 14px; letter-spacing: 0.06em; }
.shop-desc {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  opacity: 0.62;
  margin-top: 2px;
}
.shop-pips { display: flex; gap: 3px; margin-top: 5px; }
.shop-pip {
  width: 16px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}
.shop-pip.on { background: linear-gradient(90deg, #7ce3ff, var(--blue)); }
.shop-buy {
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #052038;
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  border: none;
  border-bottom: 3px solid #a8760a;
  border-radius: 10px;
  padding: 9px 11px;
  min-width: 74px;
  cursor: pointer;
}
.shop-buy:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
  border-bottom-color: transparent;
  cursor: not-allowed;
}
.shop-buy.maxed { background: rgba(124, 243, 160, 0.22); color: #7cf3a0; }
.shop-note {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  color: #ff8a80;
  min-height: 16px;
  margin-bottom: 8px;
}

/* ---------------- Settings ---------------- */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.setting-row input[type="range"] { flex: 1; max-width: 160px; accent-color: var(--blue); }
.seg { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.seg button {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid var(--stroke);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.seg button.on {
  background: linear-gradient(180deg, #9ceaff, var(--blue));
  color: #052038;
  border-color: transparent;
  font-weight: 800;
}

/* ---------------- Objectives + combo + toast ---------------- */

.objective-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 16px;
  font-family: system-ui, sans-serif;
  font-size: 12.5px;
}
.objective {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.72;
  text-align: left;
}
.objective.done { opacity: 1; color: #7cf3a0; }
.objective-mark { width: 15px; }

.coin-earned {
  font-size: 19px;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin: -8px 0 16px;
}

.combo {
  position: absolute;
  right: 18px;
  top: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
#combo-x {
  font-size: clamp(24px, 6vw, 38px);
  color: var(--gold);
  line-height: 1;
}
.combo-label { font-size: 10px; letter-spacing: 0.26em; opacity: 0.75; }
.combo.bump { animation: bump 0.22s ease-out; }

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(12% + var(--ad-inset));
  transform: translateX(-50%);
  background: rgba(6, 24, 42, 0.92);
  border: 2px solid var(--stroke);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: 0.08em;
  z-index: 20;
  animation: fadein 0.2s ease-out;
  pointer-events: none;
}

.support-car { border-color: rgba(255, 196, 46, 0.45); }
.support-car .support-label { color: var(--gold); }
.support-car .support-fill { background: linear-gradient(90deg, #ffc42e, #ffe9a8); }
.support-navy { border-color: rgba(160, 190, 255, 0.5); }
.support-navy .support-label { color: #b8cdff; }
.support-navy .support-fill { background: linear-gradient(90deg, #8fa8ff, #d6e2ff); }

@media (max-width: 480px) {
  .panel { padding: 22px 18px 18px; border-radius: 18px; }
  .map-node { width: 34px; height: 34px; font-size: 14px; }
  .map-node.boss { width: 40px; height: 40px; font-size: 15px; }
  .coin-bar { font-size: 13px; padding: 4px 11px 4px 8px; }
}
@media (max-height: 620px) {
  .title { font-size: clamp(30px, 8vw, 42px); }
  .tagline { margin: 4px 0 10px; }
  .btn { padding: 11px; font-size: 17px; margin-bottom: 7px; }
  .map-scroll { max-height: 52vh; }
  .shop-list { max-height: 42vh; }
}

/* ---------------- Mission stars ---------------- */

.star-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 14px;
}
.star {
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
/* Earned stars land one after another rather than all at once. */
.star.on {
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(120, 80, 0, 0.5), 0 0 18px rgba(255, 196, 46, 0.75);
  animation: starPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
@keyframes starPop {
  0%   { transform: scale(0) rotate(-140deg); opacity: 0; }
  60%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------------- Post-run upgrade suggestion ----------------
   This has to read as an offer you can act on, not as another row of results.
   Dark-on-dark next to the score rows made it easy to skip straight past, so it
   gets gold framing that nothing else on the screen uses, an explicit BUY chip,
   and it slides in after the stars have landed rather than being there all
   along. The attention glow runs three times and stops. */

.suggest {
  margin: 4px 0 14px;
  animation: suggestIn 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) 0.75s backwards;
}
@keyframes suggestIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.suggest-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 8px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.suggest-head::before { content: '⬆'; font-size: 13px; }

.suggest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  text-align: left;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 196, 46, 0.19), rgba(120, 82, 8, 0.28));
  border: 2px solid rgba(255, 196, 46, 0.62);
  border-radius: 15px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s, transform 0.08s, box-shadow 0.2s;
  animation: suggestGlow 1.7s ease-in-out 1.2s 3;
}
@keyframes suggestGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
  50%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 22px rgba(255, 196, 46, 0.6); }
}
.suggest-card:hover:not(:disabled) {
  border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(255, 196, 46, 0.45);
}
.suggest-card:active:not(:disabled) { transform: translateY(2px); }

/* Cannot afford it yet: still visible as a goal, but plainly not actionable. */
.suggest-card:disabled {
  cursor: not-allowed;
  background: rgba(10, 30, 52, 0.75);
  border-color: var(--stroke);
  box-shadow: none;
  animation: none;
}

.suggest-icon {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.suggest-body { flex: 1; min-width: 0; }
.suggest-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 800;
  flex-wrap: wrap;
}
.suggest-best {
  font-size: 8px;
  letter-spacing: 0.14em;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffe08a, var(--gold));
}
.suggest-desc {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  opacity: 0.78;
  margin-top: 3px;
}

/* Looks like the button it is, rather than a price label. */
.suggest-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 13px;
  border-radius: 11px;
  background: linear-gradient(180deg, #9ceaff, var(--blue));
  border-bottom: 3px solid var(--blue-deep);
  color: #052038;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.suggest-cta b { font-size: 14px; letter-spacing: 0; }
.suggest-card:disabled .suggest-cta {
  background: none;
  border-bottom: none;
  color: #ff9a8a;
  padding: 4px 6px;
  font-size: 11px;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .suggest, .suggest-card { animation: none; }
}

/* ---------------- Changelog ---------------- */

.changelog {
  text-align: left;
  max-height: 52vh;
  overflow-y: auto;
  margin-bottom: 16px;
}
.release + .release { margin-top: 18px; }
.release-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.release-ver { font-size: 19px; font-weight: 800; color: var(--blue); }
.release-date { font-size: 11px; opacity: 0.5; font-family: system-ui, sans-serif; }
.release-list {
  margin: 9px 0 0;
  padding-left: 18px;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.9;
}
.release-list li { margin-bottom: 5px; }

/* ---------------- Landscape phone ----------------
   A phone on its side leaves ~250-400px of height. By default the HUD stacks
   chips, the progress bar and the support bars down the top of the screen while
   VK's banner takes the bottom strip — together they left barely a third of the
   view for the game. Landscape has width to spare and none to spare vertically,
   so anything that can move sideways does, and everything else tightens up. */
@media (max-height: 520px) {
  #hud { padding: max(6px, env(safe-area-inset-top)) 10px calc(6px + var(--ad-inset)); }
  .hud-top { gap: 6px; }
  .chip { padding: 3px 10px; font-size: clamp(11px, 1.9vw, 13px); }
  .chip-squad { font-size: clamp(14px, 2.5vw, 17px); gap: 6px; }
  .chip-label { letter-spacing: 0.1em; }

  .hud-progress { margin-top: 5px; height: 6px; width: min(380px, 54%); }
  .hud-progress-flag { top: -11px; font-size: 13px; }

  /* Out of the vertical flow entirely: the deck is centred, so the water down
     the left edge is dead space. `.combo` already lives in the mirror of it. */
  .hud-support {
    position: absolute;
    left: max(8px, env(safe-area-inset-left));
    top: 46%;
    transform: translateY(-50%);
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .support-chip { padding: 2px 9px; font-size: 9px; letter-spacing: 0.12em; gap: 6px; }
  .support-bar { width: 42px; height: 4px; }

  .boss-bar { margin-top: 6px; width: min(420px, 66%); }
  .boss-bar-label { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 3px; }
  .boss-bar-track { height: 10px; }
  .hint { font-size: 11px; letter-spacing: 0.14em; }
  .combo { top: 34%; }

  /* Panels: centring a panel taller than the viewport with align-items makes
     its top unreachable, so centre with auto margins instead. */
  .screen { align-items: flex-start; padding: 10px 10px calc(10px + var(--ad-inset)); }
  .panel { margin: auto; padding: 12px 14px 10px; border-radius: 16px; }
  .verdict { margin: 0 0 8px; font-size: clamp(18px, 4.6vw, 26px); }
  .btn { padding: 9px; font-size: 15px; margin-bottom: 6px; }

  /* The map only scrolled sideways, so on a short screen most of the route was
     clipped away and untappable. Let it pan both ways and keep nodes big. */
  /* Suggestion stays prominent but shallower on a landscape phone. */
  .suggest { margin: 2px 0 8px; }
  .suggest-head { font-size: 9px; margin-bottom: 5px; }
  .suggest-card { padding: 7px 9px; gap: 9px; }
  .suggest-icon { font-size: 22px; }
  .suggest-name { font-size: 13px; }
  .suggest-desc { display: none; }
  .suggest-cta { padding: 5px 10px; }

  /* The map goes full-bleed: with a title, a progress line and a BACK button
     the panel chrome left the map itself about 40px of height. Title is dropped,
     progress and BACK float over the map, and the map takes the whole screen
     above the banner and pans in both directions. */
  #screen-levels { padding: 0 0 var(--ad-inset); }
  #screen-levels .panel-map {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }
  #screen-levels .verdict { display: none; }
  #screen-levels .map-progress {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(4, 12, 22, 0.72);
    border: 1px solid var(--stroke);
  }
  #screen-levels .map-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: none;
    margin: 0;
    border: none;
    border-radius: 0;
  }
  #screen-levels [data-back] {
    position: absolute;
    left: 8px;
    top: 6px;
    z-index: 3;
    width: auto;
    margin: 0;
    padding: 6px 14px;
    font-size: 13px;
  }
  .map-stage { min-width: 620px; }
  .map-node { width: 36px; height: 36px; font-size: 14px; }
  .map-node.boss { width: 42px; height: 42px; font-size: 16px; }
}