/* ─────────────────────────────────────────────────────────────
   BASE · page reset, text styles and pieces shared by all sections
   ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); height: 100%; overflow: hidden; }
body { margin: 0; background: var(--night); color: var(--ivory); font-family: var(--f-body); font-size: 16px; line-height: 1.6; height: 100%; overflow: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--night); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.center { text-align: center; }

/* section headings */
.eyebrow { margin: 0; font: italic 700 .84rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 12px rgba(233,189,103,.35); }
.eyebrow::before { content: "◆"; margin-right: .8em; font-size: .72em; vertical-align: .14em; color: var(--magenta); text-shadow: 0 0 8px var(--magenta); }
h2 {
  font: 400 clamp(1.6rem, 3.6vw, 2.8rem)/1.2 var(--f-display); margin: .6rem 0 0; text-wrap: balance; letter-spacing: .01em;
  background: linear-gradient(180deg, #fffdf6 30%, #f1d9b4 75%, #d9a8d6); background-size: 100% 220%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(20,6,40,.7)) drop-shadow(0 0 18px rgba(217,54,127,.25));
  animation: hShim 6s ease-in-out infinite;
  clip-path: inset(-20% -5% -20% -5%); transition: clip-path .8s cubic-bezier(.7,0,.2,1);
}
h2 em { font: italic 900 1.12em/1 var(--f-ui); letter-spacing: .01em; padding-right: .08em; background: linear-gradient(180deg, #fff3cf, #e9bd67 60%, #c98a2e); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes hShim { 50% { background-position: 0 100%; } }
.lede { color: var(--mist); max-width: 62ch; font-size: 1.06rem; }
.ornament { display: flex; align-items: center; gap: 14px; color: var(--gold); margin: 18px 0; }
.ornament::before, .ornament::after { content: ""; height: 1px; flex: 1; max-width: 120px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.sec-head--center { text-align: center; }
.sec-head--center .lede { margin-inline: auto; }
.sec-head--center .ornament { justify-content: center; }
.sec-head--left .ornament { justify-content: flex-start; }
.note { font-size: .8rem; color: var(--muted); letter-spacing: .06em; margin-top: 18px; }

/* things that pop in when their stage opens */
.rv { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.wait { opacity: 0; transform: translateY(36px); }
.rv.wait h2 { clip-path: inset(-20% 105% -20% -5%); }

/* game-HUD corner brackets, used by several boxes */
.hud-corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--gold-soft); pointer-events: none; filter: drop-shadow(0 0 6px rgba(233,189,103,.7)); z-index: 2; }
.hud-corner.tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.hud-corner.tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.hud-corner.bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.hud-corner.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

/* shared button */
.btn { cursor: pointer; border: 1.5px solid var(--gold); background: linear-gradient(180deg, var(--crimson-hi), var(--crimson)); padding: 14px 30px; border-radius: 999px; letter-spacing: .18em; text-transform: uppercase; font: italic 800 .84rem/1 var(--f-ui); color: #fff8ec; text-shadow: 0 2px 0 rgba(60,4,24,.8); }
.btn:hover { box-shadow: 0 0 30px rgba(217,54,127,.6); }

/* copy-to-clipboard toast and click ring */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--gold); color: var(--night); padding: 10px 20px; border-radius: 999px; font: 700 .84rem/1 var(--f-ui); z-index: 90; }
.ring { position: fixed; z-index: 95; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #f5dca4; pointer-events: none; animation: ring .7s ease-out forwards; }
@keyframes ring { to { transform: scale(14); opacity: 0; border-width: .5px; } }

#spark { position: fixed; inset: 0; pointer-events: none; z-index: 70; width: 100%; height: 100%; }

/* shared keyframes */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .8; } }
@keyframes sweep { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}