/* =====================================================================
   RESPONSIVE PASS — the HUD, bet stepper, shop, chests, daily gift and
   Castle timer were all added after the original breakpoints were
   written, so none of them were covered. These rules pick up where the
   fluid clamp() sizing above can't reach: reflowing rows into columns,
   and giving touch targets a sensible minimum.
   ===================================================================== */

/* ---- Tablets and small laptops ---- */
@media (max-width: 1024px) {
  .hud { gap: 8px; }
  .hud-level { flex-basis: 100%; order: 3; max-width: none; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ---- Phones ---- */
@media (max-width: 768px) {
  /* HUD: spins and coins share a row, the level bar gets its own. */
  .hud {
    gap: 8px;
    margin: 8px auto 4px;
  }
  .hud-stat {
    flex: 1 1 0;
    min-width: 0;          /* lets the tiles actually shrink */
    padding: 7px 10px;
    gap: 7px;
  }
  .hud-icon { width: 24px; height: 24px; }
  .hud-value { font-size: 0.98rem; }
  .hud-label { font-size: 0.55rem; letter-spacing: 1px; }
  .hud-regen { font-size: 0.5rem; }
  .hud-level { padding: 7px 12px; }

  /* Control bar becomes a stack: bet row, then a full-width SPIN, then
     the secondary actions. SPIN is the primary target so it gets width. */
  .control-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .bet-group { justify-content: center; }
  .btn.spin {
    width: 100%;
    padding: 16px;
    font-size: 1.15rem;
  }
  .paid { text-align: center; }
  .control-actions {
    justify-content: center;
    gap: 6px;
  }
  .control-actions .btn {
    flex: 1 1 auto;
    min-width: 88px;
    font-size: 0.72rem;
    padding: 11px 8px;
  }
  /* Comfortable thumb targets on the stepper. */
  .bet-step { width: 40px; height: 40px; font-size: 1.2rem; }
  .bet-value { min-width: 54px; font-size: 1.1rem; }

  /* Castle timer stacks so the bar isn't squeezed to nothing. */
  .terror-timer {
    gap: 6px;
    padding: 8px 12px;
  }
  .terror-timer-track { flex-basis: 100%; }
  .terror-timer-text { font-size: 0.72rem; }

  /* Shop */
  .shop-inner { padding: 18px 12px 48px; }
  .shop-header { gap: 10px; }
  .shop-title { letter-spacing: 2px; }
  .shop-wallet { gap: 8px; width: 100%; justify-content: center; }
  .shop-wallet-item { font-size: 0.85rem; padding: 5px 10px; }
  .shop-close { width: 100%; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .shop-card { padding: 12px; }
  .shop-card-label { font-size: 0.82rem; }
  .shop-card-blurb { font-size: 0.64rem; }
  .shop-card-buy { font-size: 0.75rem; padding: 10px 6px; }

  /* Overlays: full-bleed-ish, and scrollable when content is tall. */
  .chest-modal,
  .levelup-modal,
  .daily-gift-modal {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  .daily-gift-modal { padding-top: 64px; }
  .daily-gift-banner { min-width: 86%; padding: 10px 24px; }
  .gift-icon { min-width: 70px; padding: 10px 8px; }
  .gift-icon-art { font-size: 1.7rem; }
  .gift-icon-art img { width: 34px; height: 34px; }
  .daily-gift-collect { width: 100%; padding: 15px 20px; letter-spacing: 2px; }
  .chest-visual { width: min(240px, 66vw); }
  .chest-done, .levelup-continue, .chest-open-all { width: 100%; }

  .gain-chip { font-size: 0.9rem; padding: 8px 14px; }
  .falling-coin { width: 26px; }
}

/* ---- Small phones ---- */
@media (max-width: 420px) {
  .hud-stat { padding: 6px 8px; }
  .hud-icon { width: 20px; height: 20px; }
  .hud-value { font-size: 0.88rem; }
  .hud-max { font-size: 0.66rem; }
  .bet-label { display: none; }          /* the stepper is self-evident */
  .bet-cost { font-size: 0.6rem; }
  .control-actions .btn { min-width: 0; flex: 1 1 40%; }
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .symbol-showcase-label { letter-spacing: 1px; }
}

/* ---- Short/landscape: phones held sideways have very little height,
        so trim vertical chrome rather than horizontal. ---- */
@media (max-height: 560px) and (orientation: landscape) {
  .hud { margin: 4px auto 2px; }
  .hud-regen { display: none; }
  .terror-timer { padding: 5px 12px; }
  .control-bar { padding: 8px 12px; gap: 8px; }
  .control-bar { flex-direction: row; flex-wrap: wrap; }
  .btn.spin { width: auto; padding: 12px 28px; }
  .chest-modal, .levelup-modal, .daily-gift-modal { max-height: 96vh; }
  .chest-visual { width: min(180px, 30vw); }
}

/* Pointer-coarse devices get bigger hit areas regardless of width. */
@media (pointer: coarse) {
  .bet-step { min-width: 42px; min-height: 42px; }
  .shop-card-buy { min-height: 44px; }
  .shop-close { min-height: 44px; }
  .mute-toggle, .theme-switch button { min-width: 34px; min-height: 34px; }
}

/* =====================================================================
   COIN DOUBLER BADGE — x2 pinned to the coin's top-left corner while
   the effect is running.
   ===================================================================== */
.hud-icon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.hud-icon-badge {
  position: absolute;
  /* Overhangs the coin's top-left rather than sitting inside it, so it
     never covers the coin face itself. */
  top: -6px;
  left: -8px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
  animation: doublerPop 320ms cubic-bezier(0.2, 1.5, 0.4, 1) both,
             doublerThrob 1.8s ease-in-out 320ms infinite;
}
.hud-icon-badge[hidden] { display: none; }

@keyframes doublerPop {
  from { opacity: 0; transform: scale(0.2) rotate(-25deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes doublerThrob {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* The coin itself warms up while doubled. */
.hud-stat.doubled .hud-icon {
  filter: drop-shadow(0 0 8px rgba(255, 90, 90, 0.9));
}

@media (max-width: 768px) {
  .hud-icon-badge { width: 15px; height: 15px; top: -5px; left: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-icon-badge { animation: doublerPop 200ms ease-out both; }
}

/* =====================================================================
   CHEST STAGING — the chest is the focus for a few seconds, so the rest
   of the page is pushed further back than a normal modal would.
   ===================================================================== */
.chest-overlay {
  /* Near-black with a soft pool of light behind the chest itself. */
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.97) 70%);
  backdrop-filter: blur(6px) saturate(0.6);
}

/* Once open, the pool of light warms to the chest's own rarity colour. */
.chest-overlay.opened {
  background:
    radial-gradient(ellipse at center,
      var(--chest-aura, rgba(255, 217, 77, 0.22)) 0%,
      rgba(0, 0, 0, 0.9) 55%,
      rgba(0, 0, 0, 0.98) 100%);
  transition: background 700ms ease-out;
}

/* Modal itself lifts and brightens on open so it doesn't stay flat
   while the fireworks are going off around it. */
.chest-overlay.opened .chest-modal {
  animation: chestModalLift 700ms cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
@keyframes chestModalLift {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-8px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .chest-overlay.opened .chest-modal { animation: none; }
}

/* BET MAX — at high spin counts the ceiling runs into the hundreds, so
   stepping there one press at a time isn't viable. */
.bet-max {
  appearance: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, #b8860b, #7a4f10);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 2px;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.bet-max:hover:not(:disabled) {
  transform: scale(1.06);
  background: linear-gradient(180deg, #e0a81c, #9a6413);
}
.bet-max:disabled { opacity: 0.4; cursor: default; }

/* Draws the eye only while there is genuinely headroom to jump to. */
.bet-stepper.can-raise ~ .bet-max:not(:disabled) {
  border-color: var(--gold-bright);
  box-shadow: 0 0 12px rgba(255, 217, 77, 0.4);
}

@media (max-width: 768px) {
  .bet-max { padding: 10px 16px; font-size: 0.72rem; min-height: 42px; }
}

/* =====================================================================
   STATISTICS PANEL
   ===================================================================== */
.stats-overlay,
.secret-overlay {
  position: fixed;
  inset: 0;
  z-index: 1360;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
}
.stats-overlay.open,
.secret-overlay.open { display: flex; }

.stats-modal {
  width: min(620px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-dim);
  background: linear-gradient(180deg, var(--panel-bg-2), var(--panel-bg));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85);
  animation: giftIn 420ms cubic-bezier(0.16, 1.05, 0.3, 1.3) both;
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-dim);
}
.stats-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 3px;
  color: var(--cyan-bright);
  text-shadow: 0 0 12px var(--cyan-glow);
}
.stats-close {
  appearance: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.stats-close:hover { color: var(--cyan-bright); border-color: var(--cyan); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.stats-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-dim);
  text-align: center;
}
.stats-icon { font-size: 1.4rem; line-height: 1; }
.stats-icon img { width: 26px; height: 26px; object-fit: contain; }
.stats-value {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold-bright);
}
.stats-label {
  font-size: 0.56rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* =====================================================================
   HIDDEN LOGO BONUS
   ===================================================================== */
.shop-logo {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
  margin: 0 auto 20px;
  padding: 0;
  line-height: 0;
  /* Unlabelled and unstyled on purpose — it should read as decoration
     until someone pokes it. */
  transition: transform 0.2s ease, filter 0.2s ease;
}
.shop-logo img {
  width: clamp(70px, 12vw, 110px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}
.shop-logo:hover { transform: scale(1.05); }
.shop-logo.tapped { animation: logoTap 320ms cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes logoTap {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.22) rotate(-7deg); filter: brightness(1.5); }
  100% { transform: scale(1) rotate(0deg); }
}

.secret-modal {
  position: relative;
  width: min(430px, 94vw);
  padding: 30px 26px 26px;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, #1b1405, #0a0703);
  box-shadow: 0 0 0 5px rgba(138, 90, 18, 0.4), 0 22px 60px rgba(0, 0, 0, 0.9);
  animation: giftIn 520ms cubic-bezier(0.16, 1.05, 0.3, 1.35) both;
}
.secret-rays {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 217, 77, 0.16) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 62%);
  mask-image: radial-gradient(circle, #000 10%, transparent 62%);
  animation: showcaseSpin 16s linear infinite;
  pointer-events: none;
}
.secret-logo {
  position: relative;
  width: 92px;
  height: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 18px var(--gold-bright));
  animation: doublerThrob 1.6s ease-in-out infinite;
}
.secret-kicker {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 6px;
  color: var(--cyan-bright);
}
.secret-amount {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  color: var(--gold-bright);
  text-shadow: 0 0 20px var(--gold), 0 3px 0 #000;
  margin: 4px 0 10px;
}
.secret-note {
  position: relative;
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.secret-close {
  position: relative;
  appearance: none;
  cursor: pointer;
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #b8860b, #7a4f10);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
}
.secret-close:hover { background: linear-gradient(180deg, #e0a81c, #9a6413); }

@media (prefers-reduced-motion: reduce) {
  .secret-rays, .secret-logo, .shop-logo.tapped { animation: none; }
}