/* ==========================================================================
   Guard the Tower 2D — ui.css
   Unified main menu, HUD, armory, reward & offer surfaces, buttons,
   notifications, power indicators.
   ========================================================================== */

/* ==========================================================================
   THE UNIFIED MAIN MENU
   ========================================================================== */

/*
  Like the HUD, the menu is laid out at desktop proportions and scaled as a
  unit so landscape mobile shows the same panel, tabs and cards rather than
  a reduced variant. Dividing the box metrics by the scale keeps it filling
  the same share of the screen after the transform.
*/
.menu-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1140px, calc(96vw / var(--menu-scale, 1)));
  max-height: calc(94vh / var(--menu-scale, 1));
  /*
    `.screen` is a column flex container, so this panel sits on its MAIN
    axis and would otherwise shrink to the raw viewport height — collapsing
    the pre-scale layout box and leaving the panel far shorter than its
    max-height. Opting out of shrinking lets max-height govern instead.
  */
  flex-shrink: 0;
  transform-origin: center center;
  padding: 20px 26px 16px;
  border-radius: var(--radius-xl);
  /*
    Gradient border via a padding-box / border-box background pair. This is
    a static paint — unlike an animated masked gradient it never
    re-rasterizes, which matters because the shell covers most of the screen.
  */
  background:
    linear-gradient(160deg, rgba(15, 16, 19, 0.93), rgba(5, 6, 7, 0.965) 60%) padding-box,
    linear-gradient(115deg,
      rgba(196, 204, 216, 0.85), rgba(120, 128, 142, 0.5) 35%,
      rgba(150, 160, 176, 0.7) 62%, rgba(196, 204, 216, 0.85)) border-box;
  border: 1px solid transparent;
  box-shadow:
    var(--shadow-float),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 46px rgba(196, 204, 216, 0.12);
  animation: shell-in 0.75s var(--ease-out) both;
  overflow: hidden;
  /*
    One transform carries both jobs: the uniform UI scale, and translateZ(0)
    to promote the panel to its own compositor layer (without which this
    large translucent surface is re-composited against the animated
    background every frame). They must share a single declaration —
    a second `transform` would silently discard the first.
  */
  transform: scale(var(--menu-scale, 1)) translateZ(0);
  contain: paint;
}

/* Thin highlight along the top edge, catching light from above. */
.menu-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.75), transparent);
  pointer-events: none;
}

/* ---------------- Header ---------------- */
.menu-header {
  text-align: center;
  flex-shrink: 0;
  position: relative;
}

.menu-crest {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(196, 204, 216, 0.6));
  animation: crest-hover 4.5s ease-in-out infinite;
}

.menu-title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  letter-spacing: var(--ls-wide);
  line-height: 1.05;
  color: var(--c-parchment);
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.7),
    0 3px 12px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(196, 204, 216, 0.4);
  animation: title-in 0.9s var(--ease-out) both;
}

/*
  The accent word stays solid gold; a narrow white band travels across it.
  Keeping the base colour bright at every stop avoids the word dimming to
  a muddy brown as the highlight passes.
*/
.menu-title .accent {
  background: linear-gradient(100deg,
    var(--c-gold-bright) 0%, var(--c-gold-bright) 38%,
    #fffdf5 47%, #ffffff 50%, #fffdf5 53%,
    var(--c-gold-bright) 62%, var(--c-gold-bright) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /*
    The glyphs are transparent, so the parent's dark text-shadow would show
    straight through them and muddy the gold. Clear it and use a drop-shadow
    filter, which follows the painted gradient instead of sitting behind it.
  */
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 18px rgba(196, 204, 216, 0.45));
  animation: shine-sweep 5s linear infinite;
}

.menu-subtitle {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin: 4px 0 12px;
  animation: fade-in 1.1s 0.3s var(--ease-out) both;
}

/* ---------------- Tabs ---------------- */
.menu-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 5px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(3, 4, 5, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow-inset);
  animation: rise-in 0.6s 0.15s var(--ease-out) both;
}

.menu-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.menu-tab .tab-icon { font-size: 15px; transition: transform var(--t-med) var(--ease-bounce); }

.menu-tab:hover {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}

.menu-tab:hover .tab-icon { transform: scale(1.22) rotate(-8deg); }

.menu-tab.active {
  color: #0e1013;
  background: linear-gradient(180deg, var(--c-gold-bright), var(--c-gold) 60%, var(--c-gold-dim));
  box-shadow: var(--glow-gold-lg), var(--shadow-btn);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---------------- Body ---------------- */
.menu-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 204, 216, 0.4) transparent;
}

.menu-body::-webkit-scrollbar { width: 8px; }
.menu-body::-webkit-scrollbar-thumb {
  background: rgba(196, 204, 216, 0.35);
  border-radius: 999px;
}

.menu-panel { animation: panel-in 0.4s var(--ease-out) both; }

.panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 9px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-shadow: 0 0 14px rgba(196, 204, 216, 0.4);
}

.panel-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(196, 204, 216, 0.5), transparent);
}

.menu-panel > .panel-heading:first-child { margin-top: 2px; }

.panel-note {
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  margin-bottom: 8px;
  line-height: 1.6;
}

/* ---------------- Footer ---------------- */
.menu-footer {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  animation: fade-in 1s 0.5s both;
}

/* ==========================================================================
   CrazyGames account chip & profile card
   --------------------------------------------------------------------------
   The chip lives in the top-right corner of the menu shell, exactly where
   the platform recommends. It is styled as quiet chrome, well below the
   START BATTLE button in the visual hierarchy, so it can never read as the
   main call to action. Guests get one extra "Log in" pill next to it.
   ========================================================================== */
.menu-account {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fade-in 0.9s 0.4s both;
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 200px;
  padding: 5px 11px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(3, 4, 5, 0.72);
  box-shadow: var(--shadow-inset);
  color: var(--c-text-dim);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}

.account-chip.signed-in { color: var(--c-text); }

.account-chip:hover {
  color: var(--c-hover);
  border-color: var(--c-hover);
  box-shadow: var(--glow-hover);
}

.account-chip:active {
  color: var(--c-press);
  border-color: var(--c-press);
  box-shadow: var(--glow-press);
  transform: translateY(1px);
}

.account-avatar,
.profile-avatar,
.friend-avatar,
.badge-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.account-avatar { width: 24px; height: 24px; }
.profile-avatar { width: 56px; height: 56px; }
.friend-avatar  { width: 26px; height: 26px; }
.badge-avatar   { width: 26px; height: 26px; }

/* Shown instead of the picture when the remote avatar cannot be loaded. */
.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.85em;
}
.profile-avatar.avatar-fallback { font-size: 28px; }

.account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Secondary by design — never styled like .start-btn. */
.account-login {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast),
              background var(--t-fast), box-shadow var(--t-fast);
}

.account-login:hover {
  color: var(--c-hover);
  border-color: var(--c-hover);
  background: var(--c-hover-soft);
  box-shadow: var(--glow-hover);
}

.account-login:active {
  color: var(--c-press);
  border-color: var(--c-press);
  background: var(--c-press-soft);
  box-shadow: var(--glow-press);
}

/* ---------------- Profile card ---------------- */
.profile-box { text-align: left; }

.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.profile-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.profile-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--c-parchment);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-id small { font-size: var(--fs-xs); color: var(--c-text-faint); }

.account-note {
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  line-height: 1.65;
  margin-bottom: 12px;
}

.profile-box .menu-btn { width: 100%; }

.friend-block { margin-top: 14px; }

.friend-block h4 {
  font-size: var(--fs-sm);
  color: var(--c-gold);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.friend-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.friend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- Account actions ----------------
   One stack of controls, shared by the profile card and the Settings tab,
   so the account offers the same options wherever the player finds it. */
.account-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.account-actions .menu-btn {
  width: 100%;
  /* These are long, explanatory labels — never clipped to a single line. */
  white-space: normal;
  line-height: 1.35;
}

/* The "who is signed in?" enquiry: available, but never competing with the
   action above it. */
.account-actions .menu-btn.subtle {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--c-text-dim);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  padding-top: 8px;
  padding-bottom: 8px;
}

.account-actions .menu-btn.subtle:hover { color: var(--c-hover); }

/* ---------------- Saved-data block ---------------- */
.account-data {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.account-data h4 {
  font-size: var(--fs-sm);
  color: var(--c-gold);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.account-data .danger-btn { width: 100%; }

/* ---------------- Account row in the Settings tab ---------------- */
.settings-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.settings-account-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-parchment);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

/* ---------------- Result-screen name plate ---------------- */
.player-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* `.result-shell` is a centring column flex container. */
  flex-shrink: 0;
  margin: 0 auto 14px;
  padding: 6px 14px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(3, 4, 5, 0.6);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.badge-name { font-weight: 600; }
.badge-sync { font-size: var(--fs-xs); color: var(--c-text-faint); }

/* ---------------- Mode cards ---------------- */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 132px;
  padding: 12px;
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(155deg, rgba(34, 44, 74, 0.6), rgba(12, 17, 32, 0.72));
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast),
              box-shadow var(--t-fast), background var(--t-fast);
  animation: pop-in 0.35s var(--ease-out) both;
}

.mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.09) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--t-slow) var(--ease-out);
  pointer-events: none;
}

.mode-card:hover::after { transform: translateX(120%); }

.mode-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 204, 216, 0.55);
  box-shadow: var(--shadow-card), var(--glow-gold);
}

.mode-card.selected {
  border-color: var(--c-gold);
  background: linear-gradient(155deg, rgba(196, 204, 216, 0.2), rgba(26, 20, 8, 0.72));
  box-shadow: var(--shadow-card), var(--glow-gold-lg);
}

.mode-card.selected::before {
  content: "✓";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-gold-bright);
  text-shadow: var(--glow-gold);
  animation: pop-in 0.3s var(--ease-bounce) both;
}

.mode-card .mode-icon {
  font-size: 24px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  transition: transform var(--t-med) var(--ease-bounce);
}

.mode-card:hover .mode-icon { transform: scale(1.18) rotate(-6deg); }

.mode-card .mode-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-parchment);
  text-shadow: var(--shadow-text);
}

.mode-card .mode-desc { font-size: var(--fs-xs); color: var(--c-text-dim); flex: 1; }
.mode-card .mode-objective { font-size: var(--fs-xs); color: var(--c-success); }
.mode-card .mode-fail { font-size: var(--fs-xs); color: var(--c-danger); }
.mode-card .mode-best { font-size: var(--fs-xs); color: var(--c-gold); }

/* ---------------- Difficulty ---------------- */
.diff-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.diff-card {
  padding: 14px 10px;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg, rgba(18, 20, 24, 0.9), rgba(7, 8, 10, 0.94));
  box-shadow: var(--shadow-card);
  transition: all var(--t-fast) var(--ease-out);
  animation: pop-in 0.35s var(--ease-out) both;
}

.diff-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 204, 216, 0.5);
  box-shadow: var(--shadow-card), var(--glow-gold);
}

.diff-card.selected {
  border-color: var(--c-gold);
  background: linear-gradient(160deg, rgba(196, 204, 216, 0.2), rgba(26, 20, 8, 0.7));
  box-shadow: var(--shadow-card), var(--glow-gold-lg);
}

.diff-card .diff-icon {
  font-size: 26px;
  margin-bottom: 4px;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.65));
  transition: transform var(--t-med) var(--ease-bounce);
}

.diff-card:hover .diff-icon { transform: scale(1.2) translateY(-2px); }

.diff-card .diff-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-parchment);
  text-shadow: var(--shadow-text);
}

.diff-card .diff-desc { margin-top: 4px; font-size: var(--fs-xs); color: var(--c-text-dim); }

/* ---------------- Missions ---------------- */
.mission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mission-chip {
  padding: 7px 13px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: var(--c-text-dim);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast);
}

.mission-chip:hover:not(:disabled) {
  border-color: var(--c-gold);
  color: var(--c-gold-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm), var(--glow-gold);
}

.mission-chip.done { color: var(--c-success); border-color: rgba(76, 201, 100, 0.4); }

.mission-chip.selected {
  border-color: var(--c-gold);
  color: #0e1013;
  background: linear-gradient(180deg, var(--c-gold-bright), var(--c-gold));
  box-shadow: var(--glow-gold);
}

.mission-chip:disabled { opacity: 0.32; cursor: not-allowed; }

/* ---------------- Locations ---------------- */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.location-card {
  --loc-accent: var(--c-gold);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg, rgba(18, 20, 24, 0.9), rgba(7, 8, 10, 0.94));
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all var(--t-fast) var(--ease-out);
  animation: pop-in 0.3s var(--ease-out) both;
}

.location-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--loc-accent);
  box-shadow: var(--shadow-card), 0 0 22px color-mix(in srgb, var(--loc-accent) 45%, transparent);
}

.location-card.selected {
  border-color: var(--loc-accent);
  box-shadow: var(--shadow-card), 0 0 12px var(--loc-accent), 0 0 36px color-mix(in srgb, var(--loc-accent) 40%, transparent);
}

.location-card.selected::after {
  content: "✓";
  position: absolute;
  top: 6px; right: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--loc-accent);
}

.loc-swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: var(--radius-sm);
  font-size: 24px;
  box-shadow: var(--shadow-inset), 0 2px 8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.loc-swatch span {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  transition: transform var(--t-med) var(--ease-bounce);
}

.location-card:hover .loc-swatch span { transform: scale(1.25) rotate(8deg); }

.loc-random {
  background: conic-gradient(from 0deg,
    #ff7ab8, #ffab5e, #4fd67f, #5fd6ff, #78808e, #ff6b7d, #ff7ab8);
  animation: spin-slow 12s linear infinite;
}

.loc-random span { animation: spin-slow-rev 12s linear infinite; }

.loc-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--c-parchment);
  text-align: center;
}

.loc-desc { font-size: 0.66rem; color: var(--c-text-faint); text-align: center; }

.location-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-fast);
}

.location-summary b { flex: 1; text-align: left; color: var(--c-gold-bright); }
.location-summary:hover { border-color: var(--c-gold); box-shadow: var(--shadow-sm), var(--glow-gold); }

/* ---------------- Start button ---------------- */
.start-btn {
  position: relative;
  display: block;
  width: min(360px, 100%);
  margin: 20px auto 6px;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0e1013;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6f8fb, var(--c-gold-bright) 35%, var(--c-gold) 70%, #7d838d);
  box-shadow:
    0 6px 0 #4b515a,
    0 12px 26px rgba(0, 0, 0, 0.55),
    var(--glow-gold-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}

/*
  The breathing halo lives on a pseudo-element whose opacity is animated.
  Animating the button's own box-shadow instead would repaint a 100px-blur
  shadow every frame.
*/
.start-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(196, 204, 216, 0.55), transparent 68%);
  animation: breathe-glow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
}

.start-btn:hover { transform: translateY(-3px); }
.start-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #4b515a, 0 6px 14px rgba(0,0,0,0.5), var(--glow-press); }

/* ---------------- Achievements & records ---------------- */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.achievement {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-xs);
  opacity: 0.55;
  transition: all var(--t-fast);
}

.achievement.earned {
  opacity: 1;
  border-color: rgba(196, 204, 216, 0.45);
  background: linear-gradient(120deg, rgba(196, 204, 216, 0.13), rgba(255, 255, 255, 0.03));
  box-shadow: var(--shadow-sm), 0 0 16px rgba(196, 204, 216, 0.18);
}

.ach-icon { font-size: 21px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); }
.ach-info { display: flex; flex-direction: column; min-width: 0; }
.ach-info b { font-size: var(--fs-sm); color: var(--c-text); }
.ach-info small { font-size: 0.68rem; color: var(--c-text-faint); }

.best-list { display: flex; flex-direction: column; gap: 4px; }

.best-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

/* ---------------- Banner slot ---------------- */
.banner-slot {
  position: relative;
  width: 100%;
  max-width: 728px;
  min-height: 92px;
  margin: 18px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}

.banner-slot.banner-empty { display: none; }

.banner-label {
  position: absolute;
  top: 3px;
  left: 8px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ==========================================================================
   REWARD & OFFER SURFACES
   ========================================================================== */

.reward-box {
  text-align: center;
  border-color: rgba(196, 204, 216, 0.45);
  box-shadow: var(--shadow-float), var(--glow-gold-lg);
  animation: reward-in 0.45s var(--ease-bounce) both;
}

.reward-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--c-text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all var(--t-fast);
}

.reward-close:hover { color: #fff; background: rgba(255, 255, 255, 0.14); transform: rotate(90deg); }

.reward-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold-bright);
  text-shadow: var(--shadow-text), var(--glow-text-gold);
  margin-bottom: 10px;
}

.reward-tags {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.reward-tag {
  padding: 4px 11px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  animation: pop-in 0.35s var(--ease-bounce) both;
}

.reward-tag.perfect { color: var(--c-gold-bright); border-color: var(--c-gold-dim); box-shadow: var(--glow-gold); }
.reward-tag.swift { color: var(--c-frost); border-color: rgba(143, 214, 255, 0.4); box-shadow: var(--glow-frost); }
.reward-tag.crate { color: var(--c-success); border-color: rgba(76, 201, 100, 0.4); }

.reward-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  text-align: left;
}

.reward-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-sm);
  animation: slide-in-left 0.35s var(--ease-out) both;
}

.reward-row:nth-child(1) { animation-delay: 0.05s; }
.reward-row:nth-child(2) { animation-delay: 0.12s; }
.reward-row:nth-child(3) { animation-delay: 0.19s; }
.reward-row:nth-child(4) { animation-delay: 0.26s; }
.reward-row:nth-child(5) { animation-delay: 0.33s; }

.rr-icon { font-size: 17px; }
.rr-label { flex: 1; color: var(--c-text-dim); }
.rr-value { color: var(--c-gold-bright); font-variant-numeric: tabular-nums; }

.reward-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, rgba(196, 204, 216, 0.16), rgba(196, 204, 216, 0.05));
  border: 1px solid rgba(196, 204, 216, 0.35);
  box-shadow: var(--glow-gold);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- rewarded offer promo ---- */
.offer-promo {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(120, 128, 142, 0.42);
  background: linear-gradient(120deg, rgba(120, 128, 142, 0.16), rgba(20, 24, 44, 0.6));
  box-shadow: var(--glow-violet);
  animation: pulse-border-violet 3s ease-in-out infinite;
}

.offer-promo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.offer-promo-icon {
  font-size: 30px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
  animation: float-y 3s ease-in-out infinite;
}

.offer-promo-head b { display: block; font-size: var(--fs-md); color: var(--c-parchment); }
.offer-promo-head small { display: block; font-size: var(--fs-xs); color: var(--c-text-dim); margin-top: 2px; }

.offer-hero {
  font-size: 52px;
  margin: 6px 0 10px;
  filter: drop-shadow(0 5px 16px rgba(0, 0, 0, 0.8));
  animation: float-y 3.4s ease-in-out infinite;
}

.offer-body {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  margin-bottom: 14px;
  line-height: 1.6;
}

.offer-notice {
  font-size: var(--fs-xs);
  color: var(--c-warning);
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: rgba(240, 160, 48, 0.1);
  border: 1px solid rgba(240, 160, 48, 0.28);
}

/*
  Offer buttons.
  The platform requires that declining is exactly as prominent as accepting,
  so every button in this row shares identical geometry, typography and
  colour. Only the leading icon differs.
*/
.offer-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.offer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(46, 56, 88, 0.9), rgba(20, 26, 44, 0.95));
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-btn);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
}

.offer-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-btn), 0 0 18px rgba(255, 255, 255, 0.14);
}

.offer-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.offer-btn-icon { font-size: 19px; }
.offer-btn-label { font-weight: 700; letter-spacing: 0.03em; }
.offer-btn-sub { font-size: 0.66rem; color: var(--c-text-faint); }

/* ==========================================================================
   HUD
   ========================================================================== */

/*
  The HUD is laid out in a virtual space and then scaled down as one piece.
  Sizing the box at 100%/scale and transforming from the top-left corner
  means a landscape phone gets the exact desktop arrangement — every
  control, in the same order and symmetry — simply rendered smaller.
  Pointer hit-testing is transformed with it, so touch targets stay aligned.
*/
#hud {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--hud-scale, 1));
  height: calc(100% / var(--hud-scale, 1));
  transform: scale(var(--hud-scale, 1));
  transform-origin: 0 0;
  z-index: var(--z-hud);
  pointer-events: none;
  font-size: 1rem;
}

#hud > * { pointer-events: none; }
#hud button, #hud .panel-interactive { pointer-events: auto; }

/* Safe-area insets are real device pixels, so they are divided by the HUD
   scale to land correctly inside the transformed coordinate space. */
#hud-top {
  position: absolute;
  top: calc(var(--hud-pad) + var(--safe-t) / var(--hud-scale, 1));
  left: calc(var(--hud-pad) + var(--safe-l) / var(--hud-scale, 1));
  right: calc(var(--hud-pad) + var(--safe-r) / var(--hud-scale, 1));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#hud-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hud-corner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 200px;
  flex-shrink: 0;
}

#hud-right { width: 260px; align-items: flex-end; overflow: visible; }
#elite-panel { display: flex; flex-direction: column; gap: 5px; width: 100%; }

/* ---------------- Tower health ---------------- */
#tower-status { width: min(420px, 44vw); }

#tower-health-wrap {
  position: relative;
  height: 20px;
  border: 1px solid var(--c-panel-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  box-shadow: var(--shadow-inset), 0 2px 8px rgba(0, 0, 0, 0.5);
}

#tower-health-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(180deg, #6fe087, var(--c-health) 55%, #2c9147);
  transition: width 180ms ease-out, background var(--t-med);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(76, 201, 100, 0.5);
}

#tower-health-bar.low {
  background: linear-gradient(180deg, #ff8b6b, var(--c-health-low) 55%, #a02c2c);
  box-shadow: 0 0 16px rgba(224, 70, 70, 0.65);
  animation: pulse-soft 1.2s ease-in-out infinite;
}

#tower-shield-bar {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(180deg, rgba(160, 216, 255, 0.9), rgba(150, 160, 176, 0.85));
  z-index: 2;
  opacity: 0.85;
  border-radius: 999px;
  box-shadow: var(--glow-frost);
  transition: width 180ms ease-out;
}

#tower-health-text {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ---------------- Boss bar ---------------- */
#boss-bar-wrap { margin-top: 6px; text-align: center; }

#boss-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--c-boss);
  text-shadow: var(--shadow-text), var(--glow-danger);
  text-transform: uppercase;
}

#boss-bar {
  margin-top: 3px;
  height: 10px;
  border: 1px solid rgba(255, 77, 77, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  box-shadow: var(--shadow-inset);
}

#boss-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff7b4d, var(--c-boss));
  box-shadow: var(--glow-danger);
  transition: width 200ms ease-out;
  border-radius: 999px;
}

/* ---------------- Counters ---------------- */
#hud-counters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.counter {
  background: var(--c-glass);
  border: var(--border-ornate);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  box-shadow: var(--shadow-btn);
  white-space: nowrap;
}

.counter b { color: var(--c-text); font-variant-numeric: tabular-nums; }

/* ---------------- Kill streak badge ---------------- */
#streak-slot { min-height: 0; }

.streak-badge {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(196, 204, 216, 0.22), rgba(20, 16, 8, 0.7));
  border: 1px solid rgba(196, 204, 216, 0.5);
  box-shadow: var(--glow-gold);
  animation: streak-in 0.35s var(--ease-bounce) both;
}

.streak-badge.tier {
  border-color: var(--c-gold-bright);
  box-shadow: var(--glow-gold-lg);
  animation: streak-in 0.35s var(--ease-bounce) both, pulse-soft 0.7s ease-in-out infinite;
}

.streak-count {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-gold-bright);
  text-shadow: var(--glow-text-gold);
}

.streak-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* ---------------- Special power panel ---------------- */
#power-panel { align-items: flex-start; }

/*
  On short viewports (landscape phones) ten stacked power slots would run off
  the bottom of the screen. Reflowing into two symmetric columns keeps all
  ten visible and in their numbered order — 1-5 in the first column, 6-0 in
  the second — instead of hiding any of them.
*/
body.eff-short #power-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  gap: 5px;
  width: 300px;
}

body.eff-short.eff-narrow #power-panel { width: 256px; }

.power-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--c-glass);
  border: var(--border-ornate);
  border-radius: var(--radius-md);
  padding: 5px 8px;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
  overflow: hidden;
}

.power-slot:hover { transform: translateX(4px); box-shadow: var(--shadow-btn), var(--glow-violet); }
.power-slot.locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.8); }

.power-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.power-icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(rgba(5, 8, 16, 0.85) calc(var(--cd, 0) * 360deg), transparent 0deg);
  pointer-events: none;
}

.power-info { flex: 1; min-width: 0; }

.power-name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.power-meter {
  display: block;
  margin-top: 3px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.power-meter-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-mana), #9aa2ae);
  transition: width 120ms linear, background 160ms linear;
}

/* Full meter = ready to fire, so it takes the same green as every other
   "you can act on this" signal in the interface. */
.power-slot.ready .power-meter-fill {
  background: linear-gradient(90deg, #2ea866, var(--c-hover));
}

.power-key {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-faint);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

.power-slot.ready { border-color: rgba(120, 128, 142, 0.65); }
.power-slot.ready .power-icon { box-shadow: var(--glow-violet); }
.power-slot.ready .power-key { color: var(--c-gold); border-color: var(--c-gold-dim); }

/* ---------------- Elite ability panel ---------------- */
.elite-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(90deg, rgba(200, 92, 255, 0.14), var(--c-glass));
  border: 1px solid rgba(200, 92, 255, 0.45);
  border-radius: var(--radius-md);
  padding: 5px 8px;
  box-shadow: var(--shadow-btn), 0 0 16px rgba(130, 138, 152, 0.18);
}

.elite-entry.boss-entry {
  border-color: rgba(255, 77, 77, 0.55);
  background: linear-gradient(90deg, rgba(255, 77, 77, 0.16), var(--c-glass));
  box-shadow: var(--shadow-btn), var(--glow-danger);
}

.elite-icon { font-size: 20px; flex-shrink: 0; }
.elite-info { flex: 1; min-width: 0; }

.elite-name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-elite);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boss-entry .elite-name { color: var(--c-boss); }

.elite-desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elite-timer {
  display: block;
  height: 4px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.elite-timer-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-elite), #e6b3ff);
  transition: width 150ms linear;
}

/* ---------------- Objective bar ----------------
   A single horizontal strip above the minimap rather than a stacked card,
   so the top-right column reads as one instrument panel. */
/*
  Sized to its content rather than the column. `#hud-right` aligns its
  children to the right edge, so a bar wider than the column grows leftward
  into the empty sky instead of overflowing off-screen — which is what lets
  three objectives stay legible on one line.
*/
#mission-tracker {
  width: max-content;
  /*
    Capped so the bar can never reach the centre column. The HUD is scaled
    as a whole, so viewport units are divided by --hud-scale to land back in
    HUD space; 230px is half the tower-status width plus the edge padding.
  */
  max-width: min(560px, calc(48vw / var(--hud-scale, 1) - 230px));
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  background: var(--c-glass);
  border: var(--border-ornate);
  border-radius: var(--radius-md);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--c-text-dim);
  box-shadow: var(--shadow-btn);
}

#mission-tracker h4 {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-gold);
}

/* Objectives run along the bar, separated by hairlines instead of newlines. */
.obj-list {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.obj-list > span {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-list > span + span {
  border-left: 1px solid var(--c-panel-border);
  padding-left: 8px;
}

.obj-list .obj-done { color: var(--c-success); text-decoration: line-through; }
.obj-list .obj-fail { color: var(--c-danger); }

/* ---------------- Notifications ---------------- */
/* Sits above the menu and its dialogs — account and save notices answer
   actions taken there — but still below the ad overlay. */
#notification-area {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(560px, 90vw);
  pointer-events: none;
}

.notice {
  padding: 6px 18px;
  background: var(--c-glass-strong);
  border: var(--border-ornate);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--c-text);
  box-shadow: var(--shadow-btn);
  text-align: center;
}

.notice.gold { color: var(--c-gold-bright); border-color: var(--c-gold-dim); box-shadow: var(--shadow-btn), var(--glow-gold); }
.notice.danger { color: var(--c-danger); border-color: rgba(224, 70, 70, 0.5); }
.notice.success { color: var(--c-success); }
.notice.achievement {
  border-color: var(--c-gold);
  box-shadow: var(--glow-gold-lg);
  font-family: var(--font-display);
}

.wave-banner {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-wide);
  color: var(--c-parchment);
  text-shadow: var(--shadow-text-deep), var(--glow-text-gold);
  text-align: center;
  text-transform: uppercase;
}

.wave-banner small {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  text-transform: none;
}

.wave-banner.danger-banner { color: var(--c-boss); text-shadow: var(--shadow-text), var(--glow-danger); }

/* Sits clear of the weapon row. */
#caption-area {
  position: absolute;
  bottom: calc(112px + var(--safe-b) / var(--hud-scale, 1));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.72);
  border-radius: var(--radius-sm);
  padding: 4px 14px;
  font-size: var(--fs-sm);
  color: #fff;
}

/* ---------------- Bottom bar ---------------- */
/*
  Only the weapon row and quick actions live at the bottom now — heavy
  ordnance moved to the top-right column under the minimap.
*/
#hud-bottom {
  position: absolute;
  bottom: calc(var(--hud-pad) + var(--safe-b) / var(--hud-scale, 1));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

#weapon-bar {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--c-glass);
  border: var(--border-ornate);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.weapon-slot {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: transform var(--t-fast) var(--ease-bounce), border-color var(--t-fast), box-shadow var(--t-fast);
}

.weapon-slot:hover { transform: translateY(-4px); box-shadow: var(--glow-gold); }

.weapon-slot.selected {
  border-color: var(--c-gold);
  box-shadow: var(--glow-gold-lg);
  background: rgba(196, 204, 216, 0.12);
}

.weapon-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }

.weapon-lvl {
  font-size: 9px;
  font-weight: 700;
  color: var(--c-gold);
  letter-spacing: 0.05em;
}

.weapon-reload {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.weapon-reload-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-gold);
  border-radius: 999px;
}

/*
  Laid out as a row, in line with the weapon bar. A vertical stack fits a tall
  desktop window but climbs into the ordnance strip above it, so both share
  one horizontal band instead.
*/
#quick-actions { display: flex; align-items: flex-end; gap: 6px; }

.qa-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--c-glass);
  border: var(--border-ornate);
  font-size: 20px;
  box-shadow: var(--shadow-btn);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.qa-btn:hover { transform: scale(1.1); border-color: var(--c-gold); box-shadow: var(--shadow-btn), var(--glow-gold); }
.qa-btn.ready { border-color: var(--c-gold); box-shadow: var(--shadow-btn), var(--glow-gold); }

.qa-btn .qa-cost {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  font-size: 8px;
  color: var(--c-gold);
  font-weight: 700;
}

/* ---------------- Armory ---------------- */
#armory-panel {
  position: absolute;
  top: calc(60px + var(--safe-t) / var(--hud-scale, 1));
  bottom: calc(90px + var(--safe-b) / var(--hud-scale, 1));
  right: calc(var(--hud-pad) + var(--safe-r) / var(--hud-scale, 1));
  width: min(360px, 92vw);
  background: var(--c-glass-strong);
  border: var(--border-ornate);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), var(--glow-gold);
  padding: 14px;
  overflow-y: auto;
  pointer-events: auto;
  animation: slide-in-right 0.32s var(--ease-out) both;
}

#armory-panel h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--c-gold);
  letter-spacing: var(--ls-wide);
  text-align: center;
  text-shadow: var(--glow-text-gold);
  margin-bottom: 4px;
}

#armory-panel .armory-gold {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  margin-bottom: 10px;
}

.armory-tabs { display: flex; gap: 5px; margin-bottom: 10px; }

.armory-tab {
  flex: 1;
  padding: 6px 3px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-dim);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}

.armory-tab.active {
  color: var(--c-gold);
  border-color: var(--c-gold-dim);
  background: rgba(196, 204, 216, 0.1);
  box-shadow: var(--glow-gold);
}

.shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 6px;
  background: var(--c-panel-inner);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  animation: fade-in 0.3s ease both;
}

.shop-item.owned { border-color: rgba(76, 201, 100, 0.35); }
.shop-item.maxed { border-color: var(--c-gold-dim); }
.shop-item.bonus-item { border-color: rgba(120, 128, 142, 0.4); background: linear-gradient(100deg, rgba(120, 128, 142, 0.1), var(--c-panel-inner)); }

.shop-icon { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
.shop-info { flex: 1; min-width: 0; }
.shop-name { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); }
.shop-name small { color: var(--c-gold); font-weight: 700; margin-left: 4px; }
.shop-desc { font-size: var(--fs-xs); color: var(--c-text-dim); }
.shop-stats { font-size: var(--fs-xs); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }

.bonus-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.shop-buy {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-gold);
  background: rgba(196, 204, 216, 0.1);
  border: 1px solid var(--c-gold-dim);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all var(--t-fast);
}

.shop-buy:hover:not(:disabled) { background: rgba(196, 204, 216, 0.25); box-shadow: var(--glow-gold); transform: translateY(-1px); }
.shop-buy:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   SHARED BUTTONS, SETTINGS, RESULTS
   ========================================================================== */

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, 84vw);
  margin: 0 auto;
}

.menu-btn {
  position: relative;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.12em;
  color: var(--c-parchment);
  background: linear-gradient(180deg, rgba(38, 48, 82, 0.92), rgba(19, 25, 46, 0.96));
  border: var(--border-ornate);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn);
  text-transform: uppercase;
  overflow: hidden;
  transition: all var(--t-fast) var(--ease-out);
}

.menu-btn:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-bright);
  box-shadow: var(--shadow-btn), var(--glow-gold-lg);
  transform: translateY(-2px);
}

.menu-btn.primary {
  background: linear-gradient(180deg, rgba(196, 204, 216, 0.28), rgba(107, 114, 128, 0.22));
  border-color: var(--c-gold);
  box-shadow: var(--shadow-btn), var(--glow-gold);
}

.menu-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.danger-btn {
  width: 100%;
  padding: 9px;
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-danger);
  border: 1px solid rgba(224, 70, 70, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(224, 70, 70, 0.08);
  transition: all var(--t-fast);
}

.danger-btn:hover { background: rgba(224, 70, 70, 0.2); box-shadow: var(--glow-danger); }

/* ---------------- Settings ---------------- */
.settings-section { margin-bottom: 14px; }

.settings-section h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-gold);
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(196, 204, 216, 0.35);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 10px;
  margin-bottom: 3px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--fs-sm);
  color: var(--c-text);
  transition: background var(--t-fast);
}

.setting-row:hover { background: rgba(255, 255, 255, 0.04); }
.setting-row label { flex: 1; }

.setting-row input[type="range"] { width: 150px; accent-color: var(--c-gold); }

.setting-row select {
  background: var(--c-bg-raised);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-text-dim);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast) var(--ease-out);
}

.toggle.on { background: rgba(196, 204, 216, 0.4); border-color: var(--c-gold-dim); box-shadow: var(--glow-gold); }
.toggle.on::after { left: 22px; background: var(--c-gold); }

.keybind-btn {
  min-width: 84px;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
}

.keybind-btn.listening { border-color: var(--c-gold); color: var(--c-gold); animation: pulse-border 0.9s infinite; }

/* ---------------- Help ---------------- */
.help-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

.help-columns h4 {
  color: var(--c-gold);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-sm);
}

.help-columns li { padding: 3px 0; line-height: 1.5; }

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: var(--shadow-xs);
}

/* ---------------- Stats / results ---------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 9px;
  width: min(620px, 94vw);
  margin: 12px auto;
}

.stat-box {
  background: var(--c-glass);
  border: var(--border-ornate);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.stat-box .stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--c-gold);
  text-shadow: var(--glow-text-gold);
  font-variant-numeric: tabular-nums;
}

.stat-box .stat-label {
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Result screens scale as one unit, like the menu and the HUD. */
.result-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(760px, calc(94vw / var(--menu-scale, 1)));
  max-height: calc(94vh / var(--menu-scale, 1));
  /* Same column-flex shrink opt-out as .menu-shell. */
  flex-shrink: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: scale(var(--menu-scale, 1));
  transform-origin: center center;
}

.result-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  text-shadow: var(--shadow-text-deep);
}

.result-title.victory { color: var(--c-gold-bright); }
.result-title.defeat { color: var(--c-danger); text-shadow: var(--shadow-text-deep), var(--glow-danger); }

.result-sub { color: var(--c-text-dim); text-align: center; margin-top: 4px; font-size: var(--fs-md); }

/* ---------------- Pause menu ---------------- */
#pause-box h2, #modal-box h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-wide);
  color: var(--c-gold);
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--glow-text-gold);
  margin-bottom: 18px;
}

.pause-stats {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.8;
}

/* ---------------- Perf overlay ---------------- */
#perf-overlay {
  position: absolute;
  bottom: var(--hud-pad);
  left: var(--hud-pad);
  font-family: var(--font-mono);
  font-size: 11px;
  color: #7fe0a0;
  background: rgba(0, 0, 0, 0.65);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  white-space: pre;
  pointer-events: none;
}

/* ==========================================================================
   HEAVY ORDNANCE (Numpad 1-7) + CHARGE PIPS
   ========================================================================== */

/*
  One long horizontal box under the minimap. The slots share the row evenly
  (flex: 1) so the strip always spans the column width whatever the count.
*/
#ordnance-bar {
  display: flex;
  width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--c-glass);
  border: 1px solid rgba(255, 123, 57, 0.32);
  box-shadow: var(--shadow-panel), 0 0 18px rgba(255, 123, 57, 0.16);
}

.ord-slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-bounce), border-color var(--t-fast), box-shadow var(--t-fast);
}

.ord-slot:hover { transform: translateY(-3px); }

.ord-slot.ready {
  border-color: var(--c-fire);
  box-shadow: 0 0 10px rgba(255, 123, 57, 0.5), 0 0 24px rgba(255, 123, 57, 0.25);
}

/* Out of charges: clearly spent, not merely cooling down. */
.ord-slot.empty { opacity: 0.4; filter: grayscale(0.85); }

.ord-icon { font-size: 17px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }

.ord-key {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-fire);
}

/* Cooldown drains from the bottom of the tile. */
.ord-cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(5, 8, 16, 0.72);
  pointer-events: none;
  transition: height 120ms linear;
}

.ord-charges,
.power-charges {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ord-charges { position: relative; z-index: 1; height: 4px; }
.power-charges { margin-top: 3px; height: 4px; justify-content: flex-start; }

/* One pip per remaining use — the "magazine" read. */
.pip {
  display: block;
  width: 5px;
  height: 4px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.ord-charges .pip.on { background: var(--c-fire); box-shadow: 0 0 4px rgba(255, 123, 57, 0.8); }
.power-charges .pip.on { background: var(--c-gold); box-shadow: 0 0 4px rgba(196, 204, 216, 0.75); }

.pip-more { font-size: 8px; color: var(--c-gold); font-weight: 700; }

.power-slot.empty { opacity: 0.5; filter: grayscale(0.7); }
.power-slot.empty .power-key { color: var(--c-danger); border-color: rgba(224, 70, 70, 0.5); }

/* ==========================================================================
   MENU CHIP GRIDS (weather / fortress design)
   ========================================================================== */

.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 8px;
}

.chip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg, rgba(18, 20, 24, 0.9), rgba(7, 8, 10, 0.94));
  box-shadow: var(--shadow-card);
  transition: all var(--t-fast) var(--ease-out);
  animation: pop-in 0.3s var(--ease-out) both;
}

.chip-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold);
  box-shadow: var(--shadow-card), var(--glow-gold);
}

.chip-card.selected {
  border-color: var(--c-gold);
  background: linear-gradient(160deg, rgba(196, 204, 216, 0.2), rgba(26, 20, 8, 0.7));
  box-shadow: var(--shadow-card), var(--glow-gold-lg);
}

.chip-icon { font-size: 22px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); }

.chip-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  color: var(--c-parchment);
}

.chip-desc { font-size: 0.66rem; color: var(--c-text-faint); line-height: 1.4; }

.tower-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: var(--radius-sm);
  font-size: 20px;
  box-shadow: var(--shadow-inset), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tower-swatch span { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85)); }

.camera-row.selected {
  background: rgba(196, 204, 216, 0.1);
  border-left: 3px solid var(--c-gold);
}

/* ==========================================================================
   INTERACTIVE STATES
   --------------------------------------------------------------------------
   The chrome is graphite, so hover and press have to carry the feedback.
   Green answers the pointer, amber answers the click — two different
   colours so a held button never reads as merely hovered.

   This block sits last on purpose: the per-component rules above set their
   own hover borders in the neutral accent, and at equal specificity the
   later declaration wins. `:not(:disabled)` keeps dead controls inert.
   ========================================================================== */

.start-btn:hover:not(:disabled),
.menu-tab:hover:not(:disabled),
.mode-card:hover:not(:disabled),
.diff-card:hover:not(:disabled),
.location-card:hover:not(:disabled),
.chip-card:hover:not(:disabled),
.tower-chip:hover:not(:disabled),
.mission-chip:hover:not(:disabled),
.camera-row:hover:not(:disabled),
.setting-row:hover:not(:disabled),
.armory-tab:hover:not(:disabled),
.shop-buy:hover:not(:disabled),
.offer-btn:hover:not(:disabled),
.reward-close:hover:not(:disabled),
.qa-btn:hover:not(:disabled),
.weapon-slot:hover:not(:disabled),
.power-slot:hover:not(:disabled),
.ord-slot:hover:not(:disabled),
.ghost-btn:hover:not(:disabled) {
  border-color: var(--c-hover);
  background-color: var(--c-hover-soft);
  box-shadow: var(--shadow-btn), var(--glow-hover);
}

.menu-tab:hover:not(:disabled),
.armory-tab:hover:not(:disabled),
.ghost-btn:hover:not(:disabled),
.mode-card:hover:not(:disabled) .mode-name,
.diff-card:hover:not(:disabled) .diff-name,
.chip-card:hover:not(:disabled),
.camera-row:hover:not(:disabled) {
  color: var(--c-hover);
}

/* Held state: amber, pressed inward. */
.start-btn:active:not(:disabled),
.menu-tab:active:not(:disabled),
.mode-card:active:not(:disabled),
.diff-card:active:not(:disabled),
.location-card:active:not(:disabled),
.chip-card:active:not(:disabled),
.tower-chip:active:not(:disabled),
.mission-chip:active:not(:disabled),
.camera-row:active:not(:disabled),
.setting-row:active:not(:disabled),
.armory-tab:active:not(:disabled),
.shop-buy:active:not(:disabled),
.offer-btn:active:not(:disabled),
.reward-close:active:not(:disabled),
.qa-btn:active:not(:disabled),
.weapon-slot:active:not(:disabled),
.power-slot:active:not(:disabled),
.ord-slot:active:not(:disabled),
.ghost-btn:active:not(:disabled) {
  border-color: var(--c-press);
  background-color: var(--c-press-soft);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), var(--glow-press);
  transform: translateY(1px) scale(0.985);
}

/* Keyboard focus gets the same green so it is never invisible. */
button:focus-visible,
.menu-tab:focus-visible,
.setting-row:focus-visible,
.camera-row:focus-visible {
  outline: 2px solid var(--c-hover);
  outline-offset: 2px;
}