/* Тёмная премиальная тема — только для /coins и /quests. Чёрный + золото, в тон общему
   бренду (та же гамма, что у --gold/--ink в основной теме), не молочный неон-казино. */

.neon-page {
  --n-bg-1: #1c1712;
  --n-bg-2: #080705;
  --n-panel: rgba(255, 255, 255, .05);
  --n-panel-border: rgba(212, 184, 118, .18);
  --n-text: #f7f1e3;
  --n-muted: #b3a688;
  --n-gold: #d4b876;
  --n-gold-deep: #b8923f;
  --n-green: #33d76a;

  background:
    radial-gradient(120% 55% at 50% -8%, rgba(212, 184, 118, .22), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(184, 146, 63, .16), transparent 55%),
    linear-gradient(180deg, var(--n-bg-1) 0%, var(--n-bg-2) 55%);
  margin: 0;
  padding: 22px 22px calc(var(--tabbar) + env(safe-area-inset-bottom) + 28px);
  min-height: 100vh;
  color: var(--n-text);
}

.neon-page .wordmark,
.neon-page .lead,
.neon-page .muted,
.neon-page .hall-card-note {
  color: var(--n-text);
}

.neon-page .lead { color: var(--n-muted); }
.neon-page .muted { color: var(--n-muted); }
.neon-page .wordmark span { color: var(--n-gold); font-style: italic; }

.neon-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: rgba(213, 180, 102, .05);
  border: 1px solid rgba(213, 180, 102, .18);
  border-radius: 14px;
  padding: 4px;
}

.neon-nav a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  text-align: center;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: #9b9079;
  text-decoration: none;
  transition: transform .1s ease, background-color .15s ease, color .15s ease;
}

.neon-nav a:active { transform: scale(.96); }

.neon-nav a.is-active {
  background: #d5b466;
  color: #171512;
  font-weight: 600;
}

.neon-page .card {
  background: var(--n-panel);
  border: 1px solid var(--n-panel-border);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}

.neon-page .card-title { color: var(--n-text); }

.neon-page .btn-primary {
  background: linear-gradient(120deg, var(--n-gold), var(--n-gold-deep));
  border: none;
  color: #1c1712;
  box-shadow: 0 10px 24px rgba(184, 146, 63, .28);
}

.neon-page .btn-primary:disabled {
  background: rgba(255, 255, 255, .08);
  color: var(--n-muted);
  box-shadow: none;
}

.neon-page .wheel-wrap { margin: 6px auto 0; }

.neon-page .wheel {
  border: 2px solid rgba(213, 180, 102, .65);
  box-shadow: 0 0 0 6px rgba(213, 180, 102, .07), 0 0 0 7px rgba(213, 180, 102, .2), 0 16px 34px rgba(0, 0, 0, .55);
}

.neon-page .wheel-center {
  background: #0b0a09;
  border: 2px solid var(--n-gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

.neon-page .wheel-center-icon { filter: invert(94%) sepia(6%) saturate(220%) hue-rotate(3deg) brightness(102%); }

.neon-page .wheel-pointer {
  border-top-color: #d5b466;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
}

.neon-page .wheel-label-light { color: #f1ece2; }
.neon-page .wheel-label-dark { color: #171512; }
.neon-page .wheel-label-text { font-size: 12px; font-weight: 500; letter-spacing: .01em; }

/* ---------- заголовок и баланс колеса ---------- */

.wheel-heading {
  margin: 4px 0 2px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: #f1ece2;
}

.wheel-heading span { display: block; font-style: italic; color: #d5b466; }

.wheel-subheading { margin: 0 0 16px; font-size: 12.5px; color: #a99b7d; }

.wheel-balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(213, 180, 102, .05);
  border: 1px solid rgba(213, 180, 102, .18);
  border-radius: 14px;
}

.wheel-balance-label { font-size: 12.5px; color: #a99b7d; }

.wheel-balance-value {
  font-family: var(--serif);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: #f1ece2;
}

.wheel-freespin {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(213, 180, 102, .05);
  border: 1px solid rgba(213, 180, 102, .18);
  border-radius: 14px;
  text-align: center;
}

.wheel-freespin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--n-gold), var(--n-gold-deep));
  color: #171512;
  font-weight: 600;
  font-size: 14.5px;
}

.wheel-freespin-btn svg { width: 18px; height: 18px; }

.wheel-freespin-timer { margin: 8px 0 0; font-size: 12.5px; color: #a99b7d; }

.wheel-spin-btn { margin-top: 18px; }

.wheel-result-brand {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #a99b7d;
}

/* ---------- задания ---------- */

.quest-progress {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 12.5px;
  color: #a99b7d;
}

.quest-progress-reward { color: #d5b466; font-weight: 600; }

.quest-progress-bar {
  margin-top: 8px;
  height: 2px;
  background: rgba(213, 180, 102, .15);
  border-radius: 2px;
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: #d5b466;
  transition: width .3s ease;
}

.quest-section + .quest-section { margin-top: 22px; }

.quest-section-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #716c64;
}

.quest-list { display: flex; flex-direction: column; gap: 8px; }

.quest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  background: rgba(213, 180, 102, .05);
  border: 1px solid rgba(213, 180, 102, .16);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  transition: opacity .15s ease, transform .15s ease;
}

.quest-row:not([disabled]):active { transform: scale(.99); opacity: .9; }
.quest-row.is-locked { opacity: .55; }
.quest-row.is-busy { opacity: .6; }

.quest-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d5b466;
  background: rgba(213, 180, 102, .08);
  border: 1px solid rgba(213, 180, 102, .18);
}

.quest-icon svg { width: 19px; height: 19px; }

.quest-body { flex: 1; min-width: 0; }
.quest-title { font-weight: 500; font-size: 14.5px; color: #f1ece2; }
.quest-note { font-size: 12px; color: #a99b7d; margin-top: 2px; }

.quest-reward {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: #d5b466;
  white-space: nowrap;
}

.quest-row.is-claimed .quest-reward { color: #716c64; font-weight: 400; }
.quest-row.is-locked .quest-reward { color: #716c64; }

/* ---------- карточка купона ---------- */

.coupon-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Явный display на .coupon-modal перебивает нативный [hidden] — возвращаем его силой
   (та же причина, что у .cart-bar/.cart-sheet в style.css). */
.coupon-modal[hidden] { display: none; }

.coupon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
}

.coupon-modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, #1c1712 0%, #0f0c09 100%);
  border: 1px solid rgba(212, 184, 118, .3);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  text-align: center;
}

.coupon-modal-card .card-title { font-size: 20px; color: #f7f1e3; }
.coupon-modal-card .muted { color: #b3a688; }

/* ---------- игры ---------- */

.games-info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #a99b7d;
  font-size: 13px;
  border: 1px solid rgba(213, 180, 102, .3);
}

.game-card {
  display: block;
  padding: 18px;
  background: rgba(213, 180, 102, .05);
  border: 1px solid rgba(213, 180, 102, .16);
  border-radius: 18px;
  text-decoration: none;
  transition: transform .16s ease, opacity .16s ease;
}

.game-card.is-pressed { transform: scale(.985); opacity: .9; }

.game-card-art {
  color: #d5b466;
  margin-bottom: 10px;
}

.game-card-art svg { width: 100px; height: 58px; }

.game-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-card-title {
  font-family: var(--serif);
  font-size: 20px;
  color: #f1ece2;
}

.game-card-arrow { color: #a99b7d; font-size: 16px; }

.game-card-record {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(213, 180, 102, .14);
}

.game-card-record-label {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #716c64;
}

.game-card-record-value {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 28px;
  color: #f1ece2;
  font-variant-numeric: tabular-nums;
}

.game-card-record-holder {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: #a99b7d;
}

.game-card-reward {
  margin-top: 10px;
  font-size: 12px;
  color: #a99b7d;
}

.game-card-reward b { color: #d5b466; font-weight: 600; }