:root {
  /* Luxora palette — gold crown + royal purple gem */
  --bg-deep: #05020c;
  --bg-felt: #0c0618;
  --bg-panel: #140a24;
  --bg-panel-2: #1a0f2e;
  --purple: #6b2fb5;
  --purple-deep: #3a1468;
  --purple-glow: rgba(122, 58, 200, 0.35);
  --accent: #d4af37;
  --accent-bright: #f0d060;
  --accent-dim: #9a7a28;
  --danger: #d46a5c;
  --success: #5ecf9a;
  --text: #f7f1e4;
  /* WCAG AA contrast on dark felt (~7:1) */
  --text-muted: #c9bdd8;
  --border: rgba(212, 175, 55, 0.38);
  --border-purple: rgba(122, 58, 200, 0.4);
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 28px rgba(240, 208, 96, 0.22);
  --glow-purple: 0 0 40px rgba(107, 47, 181, 0.35);
  --radius: 14px;
  --font-display: "Cinzel", Georgia, serif;
  --font-ui: "Outfit", system-ui, sans-serif;
  --header-h: 64px;
  --rim-w: 2px;
  --rim-duration: 2.6s;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes borderAngleSpin {
  to {
    --border-angle: 360deg;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(107, 47, 181, 0.28), transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(212, 175, 55, 0.08), transparent 50%),
    radial-gradient(ellipse 40% 35% at 10% 70%, rgba(58, 20, 104, 0.35), transparent 55%),
    linear-gradient(165deg, var(--bg-deep) 0%, var(--bg-felt) 48%, #080414 100%);
  background-attachment: fixed;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 720px) {
  :root {
    --header-h: 172px;
  }

  body {
    background-attachment: scroll;
  }
}

a {
  color: var(--accent-bright);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
a {
  font-family: inherit;
}

button,
.chip-btn,
.mode-btn,
.spin-btn,
.btn,
.nav a {
  touch-action: manipulation;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

/* WCAG 2.1 AA — keyboard focus */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: #ffe08a;
  color: #1a1005;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Age gate 18+ — site-styled modal (not a system alert) */
.age-gate,
.age-blocked-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(107, 47, 181, 0.35), transparent 55%),
    rgba(5, 2, 12, 0.88);
  backdrop-filter: blur(10px);
}

.age-gate__panel {
  width: min(420px, 100%);
  padding: 1.6rem 1.4rem 1.45rem;
  border-radius: 16px;
  border: 1px solid rgba(240, 208, 96, 0.45);
  background: linear-gradient(165deg, #1e0f38 0%, #10071f 55%, #080414 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(107, 47, 181, 0.3);
  text-align: center;
}

.age-gate__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  border: 2px solid #ffe08a;
  background: linear-gradient(160deg, #3a1468, #120824);
  color: #ffe9a8;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

.age-gate__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: #ffe9a8;
}

.age-gate__text {
  margin: 0 0 1.25rem;
  color: #e8dff4;
  font-size: 0.95rem;
  line-height: 1.5;
}

.age-gate__text strong {
  color: #fff4c4;
}

.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.age-gate__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 2px solid #ffe08a;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}

.age-gate__btn--yes {
  background: linear-gradient(180deg, #ffe08a, #d4af37 55%, #b8922a);
  color: #1a1005;
}

.age-gate__btn--no {
  background: transparent;
  color: #ffe9a8;
}

.age-gate__btn:hover {
  filter: brightness(1.06);
}

.age-gate__btn:focus-visible {
  outline: 3px solid #f0d060;
  outline-offset: 3px;
}

body.age-gate-open,
body.age-blocked,
body.session-reminder-open {
  overflow: hidden;
}

body.age-blocked > :not([data-age-blocked]) {
  display: none !important;
}

/* Session time reminder modal */
.session-reminder {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.session-reminder[hidden] {
  display: none !important;
}

.session-reminder__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 2, 12, 0.72);
  backdrop-filter: blur(6px);
  border: 0;
  cursor: pointer;
}

.session-reminder__panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 1.5rem 1.35rem 1.4rem;
  border-radius: 16px;
  border: 1px solid rgba(240, 208, 96, 0.4);
  background: linear-gradient(165deg, #1e0f38 0%, #10071f 55%, #080414 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 36px rgba(107, 47, 181, 0.28);
  text-align: center;
}

.session-reminder__eyebrow {
  display: inline-block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff4c4;
}

.session-reminder__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #ffe9a8;
}

.session-reminder__text {
  margin: 0 0 0.75rem;
  color: #e8dff4;
  font-size: 0.98rem;
  line-height: 1.5;
}

.session-reminder__text strong {
  color: #ffe08a;
  font-variant-numeric: tabular-nums;
}

.session-reminder__hint {
  margin: 0 0 1.2rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.session-reminder__hint a {
  color: var(--accent-bright);
}

.session-reminder__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.session-reminder__btn {
  appearance: none;
  min-height: 2.85rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 2px solid #ffe08a;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.session-reminder__btn--break {
  background: linear-gradient(180deg, #ffe08a, #d4af37 55%, #b8922a);
  color: #1a1005;
}

.session-reminder__btn--continue {
  background: transparent;
  color: #ffe9a8;
}

.session-reminder__btn:focus-visible {
  outline: 3px solid #f0d060;
  outline-offset: 3px;
}

/* Session / responsible play timer */
.session-timer {
  position: fixed;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  max-width: none;
  padding: 0.4rem 0.5rem 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 208, 96, 0.4);
  background: rgba(12, 5, 28, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
}

.session-timer__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe9a8;
  white-space: nowrap;
}

.session-timer__value {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  min-width: 2.75rem;
  white-space: nowrap;
}

.session-timer__btn,
.session-timer__link {
  appearance: none;
  flex-shrink: 0;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(107, 47, 181, 0.35);
  color: #ffe9a8;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.session-timer__link:hover,
.session-timer__btn:hover {
  background: rgba(107, 47, 181, 0.55);
  text-decoration: none;
}

body.cookie-banner-open .session-timer {
  bottom: max(10.5rem, calc(env(safe-area-inset-bottom) + 9.5rem));
}

/* Tablet */
@media (max-width: 1100px) and (min-width: 721px) {
  .session-timer {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Mobile — compact pill above cookie FAB, full readable row */
@media (max-width: 720px) {
  .session-timer {
    left: 50%;
    right: auto;
    bottom: max(5.75rem, calc(env(safe-area-inset-bottom) + 5.25rem));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 1.5rem);
    gap: 0.35rem;
    padding: 0.35rem 0.4rem 0.35rem 0.55rem;
  }

  .session-timer__label {
    display: none;
  }

  .session-timer__value {
    font-size: 0.95rem;
    min-width: 2.6rem;
    padding-inline: 0.15rem;
  }

  .session-timer__btn,
  .session-timer__link {
    min-height: 2.15rem;
    min-width: 2.15rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
  }

  body.cookie-banner-open .session-timer {
    bottom: max(15.5rem, calc(env(safe-area-inset-bottom) + 14.5rem));
  }
}

@media (max-width: 380px) {
  .session-timer {
    gap: 0.28rem;
    padding: 0.3rem 0.35rem 0.3rem 0.45rem;
  }

  .session-timer__btn,
  .session-timer__link {
    padding: 0.28rem 0.5rem;
    font-size: 0.7rem;
  }
}