/* Spires of Azeroth v2 - the stage. 1920x1080 design space scaled by transform; every px below is a stage px.
   Layer order: backdrop, fog, vignette, actors (WebGL), fx (canvas), ui. game.css still styles the legacy screens. */
@font-face { font-family: "frizqt"; src: url("/assets/fonts/frizqt.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FrizQuadrata"; src: url("/assets/fonts/frizqt.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "morpheus"; src: url("/assets/fonts/morpheus.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "arialn"; src: url("/assets/fonts/arialn.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "skurri"; src: url("/assets/fonts/skurri.woff2") format("woff2"); font-display: swap; }

.sp-stage-host, .spires-app.sp-stage-host { --f-title: "morpheus", "Palatino Linotype", Georgia, serif; --f-ui: "frizqt", "Palatino Linotype", Georgia, serif; --f-num: "arialn", "Arial Narrow", Arial, sans-serif; --f-rune: "skurri", serif;
  --t-xs: 20px; --t-sm: 24px; --t-md: 30px; --t-lg: 40px; --t-xl: 64px; --t-hero: 168px; --btn-h: 96px; --gold: #ffd100; --gold-soft: #e8c36a; --ink: #f4e9cc; }

/* site chrome collapses to a 40 px strip while the stage is mounted */
body.sp-stage-on { overflow: hidden; background: #050407; }
body.sp-stage-on .wgf-shell-topbar { position: fixed; top: 0; left: 0; right: 0; height: 40px; overflow: hidden; z-index: 60; background: rgba(8,6,4,.92); border-bottom: 1px solid rgba(201,162,75,.35); }
body.sp-stage-on .wgf-shell-topbar__inner { height: 40px; min-height: 0; padding-top: 0; padding-bottom: 0; align-items: center; }
body.sp-stage-on .wgf-shell-nav, body.sp-stage-on .wgf-shell-searchband, body.sp-stage-on .wgf-shell-right, body.sp-stage-on .wgf-shell-nav-toggle, body.sp-stage-on .wgf-site-footer { display: none !important; }
body.sp-stage-on .wgf-shell-logo { font-size: 15px; line-height: 40px; }
body.sp-stage-on .wgf-skip-link { z-index: 70; }

body.sp-stage-on main.spires-app.sp-stage-host { position: fixed; top: 40px; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; background: #050407; }

.sp-stage { position: absolute; transform-origin: 0 0; overflow: hidden; background: #07060a; contain: layout paint; user-select: none; -webkit-user-select: none; }
.sp-layer { position: absolute; inset: 0; }
.sp-layer-backdrop { overflow: hidden; background: linear-gradient(180deg, #0b0d12, var(--bd-tint, #10131a)); }
.sp-bd-slot { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.08); will-change: transform, opacity; }
.sp-bd-slot.on { opacity: 1; }
.sp-bd-slot img { position: absolute; max-width: none; display: block; }
.sp-bd-ground { position: absolute; left: -10%; right: -10%; height: 260px; pointer-events: none;
  background: radial-gradient(ellipse 55% 42% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 72%), linear-gradient(180deg, transparent, rgba(0,0,0,.28) 50%, transparent); }
.sp-layer-fog { pointer-events: none; mix-blend-mode: screen; opacity: .9; }
.sp-layer-fog canvas { width: 100%; height: 100%; display: block; }
.sp-layer-vignette { pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 48%, rgba(0,0,0,.72) 100%), linear-gradient(180deg, rgba(0,0,0,.4), transparent 16%, transparent 60%, rgba(0,0,0,.6)); }
.sp-layer-actors, .sp-layer-fx { pointer-events: none; }
.sp-layer-ui { pointer-events: none; }
.sp-layer-ui > * { pointer-events: auto; }

/* legacy (document-style) screens: unscaled, scrollable, centred column */
.sp-stage.sp-fluid .sp-layer-ui { overflow-y: auto; overflow-x: hidden; padding: 12px 16px 96px; box-sizing: border-box; pointer-events: auto; }
.sp-stage.sp-fluid .sp-layer-ui > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.sp-stage.sp-fluid .sp-layer-vignette { background: radial-gradient(ellipse 90% 80% at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.8)); }
.sp-stage.sp-portrait { --t-xl: 84px; --t-hero: 150px; --btn-h: 150px; --t-md: 44px; --t-sm: 36px; --t-xs: 30px; }

/* WoW red button, nine-slice from /assets/ui/128-redbutton-* (left cap + tiled centre + right cap) */
.sp-wowbtn { --h: var(--btn-h, 96px); position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--h); min-width: calc(var(--h) * 3.2); padding: 0 calc(var(--h) * .5); box-sizing: border-box; cursor: pointer; color: #ffe9a8; font-family: var(--f-ui, "frizqt", serif); font-size: calc(var(--h) * .36); letter-spacing: .02em; text-shadow: 0 2px 2px #000, 0 0 8px rgba(0,0,0,.6);
  border: max(2px, calc(var(--h) * .035)) solid #c9a24b; border-radius: calc(var(--h) * .14); background: linear-gradient(180deg, #d4332c 0%, #9e1b17 52%, #4d0a0a 100%);
  box-shadow: inset 0 2px 0 rgba(255,225,190,.55), inset 0 -3px 6px rgba(0,0,0,.45), 0 0 0 1px #1a0705, 0 5px 9px rgba(0,0,0,.6); transition: filter .12s, transform .08s, border-color .12s; -webkit-tap-highlight-color: transparent; }
.sp-wowbtn::after { content: ""; position: absolute; left: 6%; right: 6%; top: 4%; height: 42%; border-radius: calc(var(--h) * .1) calc(var(--h) * .1) 40% 40% / calc(var(--h) * .1) calc(var(--h) * .1) 100% 100%; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.sp-wowbtn:hover { color: #fff3a8; border-color: #ffd75e; filter: brightness(1.12); }
.sp-wowbtn:active { transform: translateY(2px); background: linear-gradient(180deg, #9e1b17 0%, #6e100d 55%, #330606 100%); box-shadow: inset 0 3px 7px rgba(0,0,0,.6), 0 0 0 1px #1a0705, 0 2px 4px rgba(0,0,0,.6); }
.sp-wowbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.sp-wowbtn:disabled { background: linear-gradient(180deg, #6a6a6a, #3d3d3d 55%, #262626); border-color: #6f6a5c; color: #aaa; filter: none; cursor: not-allowed; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 0 0 1px #111, 0 3px 6px rgba(0,0,0,.5); }
.sp-wowbtn:disabled::after { opacity: .4; }
.sp-wowbtn--lg { --h: calc(var(--btn-h, 96px) * 1.45); min-width: calc(var(--h) * 3); }
.sp-wowbtn--sm { --h: calc(var(--btn-h, 96px) * .72); min-width: calc(var(--h) * 3.2); }

/* title screen: the first stage-native screen */
.sp-title-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; color: var(--ink); text-align: center; }
.sp-title-screen__logo { margin-top: 118px; display: flex; flex-direction: column; align-items: center; }
.sp-title-screen__eyebrow { font-family: var(--f-ui); font-size: var(--t-md); letter-spacing: .5em; text-transform: uppercase; color: var(--gold-soft); text-shadow: 0 2px 6px #000; margin: 0 0 6px .5em; }
.sp-title-screen h1 { margin: 0; font-family: var(--f-title); font-weight: 400; font-size: var(--t-hero); line-height: .95; letter-spacing: .01em; color: #f6d879;
  background: linear-gradient(180deg, #fff6c8 8%, #f6c94a 46%, #a8741a 74%, #f1d27a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #2a1704) drop-shadow(0 10px 22px rgba(0,0,0,.85)); }
.sp-title-screen__rule { width: 880px; max-width: 80%; height: 6px; margin: 22px 0 18px; background: linear-gradient(90deg, transparent, #c9a24b 25%, #fff0a8 50%, #c9a24b 75%, transparent); border-radius: 3px; box-shadow: 0 0 14px rgba(255,209,0,.45); }
.sp-title-screen__tag { font-family: var(--f-ui); font-size: var(--t-lg); color: var(--ink); text-shadow: 0 2px 8px #000, 0 0 3px #000; margin: 0; max-width: 1200px; padding: 0 40px; }
.sp-title-screen__menu { margin-top: auto; margin-bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sp-title-screen__row { display: flex; gap: 36px; }
.sp-title-screen__stats { font-family: var(--f-num); font-size: var(--t-sm); color: var(--gold-soft); text-shadow: 0 2px 4px #000; letter-spacing: .06em; margin: 6px 0 0; }
.sp-title-screen__foot { position: absolute; left: 0; right: 0; bottom: 26px; margin: 0; font-family: var(--f-num); font-size: var(--t-xs); color: rgba(244,233,204,.7); text-shadow: 0 1px 3px #000; }
.sp-stage.sp-portrait .sp-title-screen__logo { margin-top: 240px; }
.sp-stage.sp-portrait .sp-title-screen__menu { margin-bottom: 190px; gap: 36px; }
.sp-stage.sp-portrait .sp-title-screen__row { flex-direction: column; gap: 30px; }
.sp-stage.sp-portrait .sp-title-screen h1 { padding: 0 30px; }
.sp-stage.sp-portrait .sp-title-screen__tag { font-size: 44px; }

@media (prefers-reduced-motion: reduce) {
  .sp-bd-slot { transition: none; }
  .sp-wowbtn, .sp-wowbtn::after { transition: none; }
}
body.sp-stage-on .sp-reduce .sp-bd-slot { transition: none; }
/* fullscreen: the stage host fills the screen on black */
.sp-stage-host:fullscreen { background: #000; width: 100vw; height: 100vh; }
.sp-stage-host:-webkit-full-screen { background: #000; width: 100vw; height: 100vh; }