/* Eternal Sanctum — Combatants of Creation public site.
   Motion rules: only transform and opacity animate on the scene layers; html.paused,
   html.tier-low and reduced motion switch layers off through the selectors at the end. */

@font-face {
  font-family: "Cinzel";
  src: url("/assets/cinzel.woff") format("woff");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --navy-950: #050a18;
  --navy-900: #070d1f;
  --navy-850: #0a1330;
  --navy-800: #0e1a3d;
  --panel: rgba(8, 15, 36, .9);
  --gold-100: #f7e7b8;
  --gold-300: #e7c77c;
  --gold-500: #d0a24f;
  --gold-700: #8a6326;
  --astral: #7fc4ff;
  --astral-deep: #2f6fe0;
  --cosmic: #3c7dff;
  --inferno: #ff4a2a;
  --text: #e9edf7;
  --text-dim: #b6c0d8;
  --ok: #58e0a0;
  --warn: #ffc857;
  --bad: #ff7a6b;
  --serif: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy-950); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% 0%, #10204a 0%, transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--gold-300); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--astral); outline-offset: 3px; }
code { font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--gold-100); word-break: break-all; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 14px; background: var(--gold-300); color: #1a1206; }
.skip:focus { left: 12px; }
.small { font-size: 14px; color: var(--text-dim); }

/* ---------- starfield behind the page body (static tiles, two slow twinkle layers) ---------- */
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.starfield::before, .starfield::after { content: ""; position: absolute; inset: 0; background-repeat: repeat; }
.starfield::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 131px 97px, rgba(190,215,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 201px 173px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 77px 211px, rgba(255,226,180,.6), transparent 60%),
    radial-gradient(1px 1px at 251px 29px, rgba(190,215,255,.6), transparent 60%);
  background-size: 280px 260px; opacity: .55;
}
.starfield::after {
  background-image:
    radial-gradient(1.5px 1.5px at 61px 131px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 173px 19px, rgba(200,225,255,.8), transparent 60%),
    radial-gradient(1px 1px at 311px 241px, rgba(255,255,255,.7), transparent 60%);
  background-size: 370px 330px; animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .15; } to { opacity: .7; } }
.nebula { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  background:
    radial-gradient(900px 600px at 12% 38%, rgba(47, 111, 224, .16), transparent 70%),
    radial-gradient(800px 560px at 90% 58%, rgba(255, 74, 42, .10), transparent 70%),
    radial-gradient(1000px 700px at 50% 88%, rgba(127, 196, 255, .08), transparent 70%); }
main { position: relative; }

/* ---------- atmospheric bleed ---------- */
.bleed { position: fixed; top: 0; bottom: 0; width: 22vw; pointer-events: none; z-index: 1; opacity: .5; }
.bleed-left { left: 0; background: radial-gradient(60% 55% at 0% 50%, rgba(60, 125, 255, .22), transparent 70%); }
.bleed-right { right: 0; background: radial-gradient(60% 55% at 100% 50%, rgba(255, 74, 42, .18), transparent 70%); }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 10px clamp(16px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(5, 10, 24, .92), rgba(5, 10, 24, .55) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-100); }
.brand img { width: 36px; height: 36px; }
.brand-word { font: 600 15px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.brand-word em { font-style: normal; font-size: .8em; color: var(--gold-300); }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a, .nav-soon { font: 500 13px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--text); }
.nav a:hover { color: var(--gold-100); }
.nav-soon { color: #8d97b0; cursor: not-allowed; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.nav-soon small { font: 600 9px/1 var(--sans); letter-spacing: .12em; color: var(--gold-500); }
.status-pill { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(231, 199, 124, .35); border-radius: 999px; background: rgba(8, 15, 36, .7); font-size: 13px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #8d97b0; flex: none; }
[data-status="online"] .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
[data-status="maintenance"] .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
[data-status="offline"] .dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }

/* ---------- hero scene ---------- */
.hero { position: relative; min-height: max(100svh, 680px); display: grid; place-items: end center; overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 200px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(5, 10, 24, .75) 60%, var(--navy-950)); }
.scene { position: absolute; inset: 0; z-index: -1; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The lobby plate keeps its 16:9 composition at any viewport (cover, sized with container
   units) so the emblem and flame glows stay registered to the render's arch and chalices. */
.scene { container-type: size; }
.plate { position: absolute; left: 50%; top: 50%; width: max(100cqw, 177.78cqh); aspect-ratio: 16 / 9;
  margin-left: calc(max(100cqw, 177.78cqh) / -2); margin-top: calc(max(100cqw, 177.78cqh) * 9 / 16 / -2); }
.plate-img {
  position: absolute; inset: 0;
  background: #0a1330 url("/assets/plate-1920.webp") center / 100% 100% no-repeat;
  animation: plate-breathe 40s ease-in-out infinite alternate;
}
/* Serve the plate close to its displayed pixel size: phones get 960, 1080p gets 1920,
   1440p (or 1080p on a 1.5x screen) gets 2560, 4K gets the native frame. */
@media (max-width: 900px) and (max-resolution: 1.5dppx) { .plate-img { background-image: url("/assets/plate-960.webp"); } }
@media (min-width: 1921px), (min-width: 1300px) and (min-resolution: 1.4dppx) { .plate-img { background-image: url("/assets/plate-2560.webp"); } }
@media (min-width: 2561px), (min-width: 1921px) and (min-resolution: 1.4dppx) { .plate-img { background-image: url("/assets/plate-3840.webp"); } }
@keyframes plate-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
.plate-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 10, 24, .55) 0%, transparent 16%, transparent 58%, rgba(5, 10, 24, .6) 78%, rgba(5, 10, 24, .96) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5, 10, 24, .45) 100%); }

/* Warm light breathing over the render's six chalice fires. */
.flame { position: absolute; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 110, .55), rgba(255, 140, 50, .18) 45%, transparent 72%);
  mix-blend-mode: screen; animation: flicker 2.6s ease-in-out infinite alternate; }
.f1 { left: 12.8%; top: 58%; animation-duration: 2.3s; }
.f2 { left: 19%; top: 58%; animation-duration: 3.1s; animation-delay: -1.2s; }
.f3 { left: 27.4%; top: 60%; width: 6%; margin: -3% 0 0 -3%; animation-duration: 2.7s; animation-delay: -.6s; }
.f4 { left: 72.6%; top: 60%; width: 6%; margin: -3% 0 0 -3%; animation-duration: 2.9s; animation-delay: -1.8s; }
.f5 { left: 80.5%; top: 58%; animation-duration: 2.4s; animation-delay: -.3s; }
.f6 { left: 87.3%; top: 58%; animation-duration: 3.3s; animation-delay: -2.1s; }
@keyframes flicker { 0% { opacity: .55; transform: scale(.94); } 40% { opacity: .9; transform: scale(1.04); } 70% { opacity: .7; } 100% { opacity: 1; transform: scale(1.08); } }

/* A faint astral glow in the central archway, where the emblem hovers. */
.portal { position: absolute; left: 50%; top: 53%; width: 10%; height: 40%; transform: translate(-50%, -50%);
  border-radius: 50% 50% 8% 8% / 30% 30% 8% 8%;
  background: radial-gradient(closest-side, rgba(127, 196, 255, .35), rgba(60, 125, 255, .12) 60%, transparent); }

.motes { pointer-events: none; }

.clouds { background-repeat: repeat-x; pointer-events: none; will-change: transform;
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.clouds-near { -webkit-mask: none; mask: none; }
.clouds-near { -webkit-mask: none; mask: none; }
.clouds-far {
  top: auto; bottom: 12%; height: 320px; width: 200%;
  background-image: url("/assets/clouds-far.webp"); background-size: 1600px 320px; opacity: .5;
  animation: drift 140s linear infinite;
}
.clouds-near {
  top: auto; bottom: -70px; height: 380px; width: 200%;
  background-image: url("/assets/clouds-near.webp"); background-size: 1900px 380px; opacity: .45;
  animation: drift 90s linear infinite reverse;
}
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Emblem centrepiece. Each half is the same image inside a fixed half-width clip; the image
   turns inside its clip, the two in opposite directions, so the seam stays a clean line
   instead of opening a wedge. */
.emblem { position: absolute; left: 50%; top: 45%; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.half-clip { position: absolute; inset: 0; }
.clip-cosmic { clip-path: inset(-10% 50% -10% -10%); }
.clip-inferno { clip-path: inset(-10% -10% -10% 50%); }
.half { position: absolute; inset: 0; width: 100%; height: 100%; }
.half-cosmic { animation: turn-a 26s ease-in-out infinite alternate; }
.half-inferno { animation: turn-b 26s ease-in-out infinite alternate; }
@keyframes turn-a { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes turn-b { from { transform: rotate(6deg); } to { transform: rotate(-6deg); } }
.emblem-glow {
  position: absolute; inset: -30%;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .5), rgba(127, 196, 255, .22) 35%, rgba(255, 90, 60, .1) 55%, transparent 72%);
  animation: breathe 5.5s ease-in-out infinite;
}
.emblem-core {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 246, 220, .75) 30%, rgba(127, 196, 255, .25) 60%, transparent);
  mix-blend-mode: screen; animation: breathe 5.5s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.emblem-glow { transform-origin: center; animation-name: breathe-glow; }
@keyframes breathe-glow { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

.rays {
  position: absolute; left: 50%; top: 45%; width: 90%; aspect-ratio: 1; transform-origin: 50% 50%; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 190, .06) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 62%); mask: radial-gradient(closest-side, #000 8%, transparent 62%);
  animation: spin 160s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


.hero-copy { position: relative; z-index: 2; text-align: center; padding: 0 16px clamp(56px, 9vh, 110px); max-width: 980px; }
.hero-copy::before { /* scrim behind the text for contrast over the moving scene */
  content: ""; position: absolute; inset: -40px -120px -20px; z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 10, 24, .82), rgba(5, 10, 24, .55) 60%, transparent);
}
.title {
  margin: 0; font: 700 clamp(32px, 4.8vw, 72px)/1.02 var(--serif); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-100);
  background: linear-gradient(180deg, #fff6dc 0%, var(--gold-300) 55%, #b98a3d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .55));
}
.title span { font-size: .55em; letter-spacing: .2em; }
.tagline { margin: 18px 0 4px; font: 500 clamp(14px, 1.8vw, 20px)/1.4 var(--serif); letter-spacing: .32em; text-transform: uppercase; color: var(--text); }
.subline { margin: 0 0 28px; font-size: clamp(14px, 1.4vw, 17px); color: var(--text-dim); letter-spacing: .06em; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-meta { margin: 14px 0 0; font-size: 14px; color: var(--text-dim); }
.cta-phone, .phone-note { display: none; margin: 14px 0 0; color: var(--gold-100); font-size: 15px; }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 3px; cursor: pointer;
  font: 700 15px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), filter .2s;
}
.btn-gold {
  color: #1d1406; border: 1px solid #f5dc9c;
  background: linear-gradient(180deg, #f8e3a4 0%, #deb35f 48%, #b78534 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 30px -10px rgba(231, 199, 124, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn-gold::after { /* glint */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(0) skewX(-18deg); opacity: 0;
}
.btn-gold:hover::after, .btn-gold:focus-visible::after { animation: glint .8s var(--ease); }
@keyframes glint { 0% { opacity: 0; transform: translateX(0) skewX(-18deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(420%) skewX(-18deg); } }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 14px 38px -10px rgba(247, 225, 160, .85), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn-gold:active { transform: translateY(1px); }
.btn-pulse { animation: pulse-once 1.8s var(--ease) .9s 1 both; }
@keyframes pulse-once {
  0% { box-shadow: 0 0 0 0 rgba(247, 225, 160, .7), 0 10px 30px -10px rgba(231, 199, 124, .6); }
  60% { box-shadow: 0 0 0 18px rgba(247, 225, 160, 0), 0 10px 30px -10px rgba(231, 199, 124, .6); }
  100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 30px -10px rgba(231, 199, 124, .6), inset 0 1px 0 rgba(255, 255, 255, .6); }
}
.btn-ghost { color: var(--gold-100); border: 1px solid rgba(231, 199, 124, .6); background: rgba(8, 15, 36, .55); }
.btn-ghost:hover { border-color: var(--gold-100); background: rgba(20, 32, 70, .7); }
.btn-block { width: 100%; }
.btn-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn[disabled] { filter: grayscale(.6) brightness(.8); cursor: progress; }

/* ---------- framed panels: rails draw themselves, corners bloom last ---------- */
.band { position: relative; z-index: 2; padding: clamp(40px, 7vw, 90px) 16px; }
.frame { position: relative; }
.panel { max-width: 1120px; margin: 0 auto; padding: clamp(34px, 4.4vw, 60px); background: #0b1832; border-radius: 4px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85); }
.panel-narrow { max-width: 660px; }

/* The owner-approved ornate frame (SourceArt/UI/Lobby/OrnatePanel.png) as a nine-slice.
   Its rails sit 70-113 source px in from the art's edge, so the outset puts them exactly on
   the panel edge and lets the corner ornaments reach past it. */
.frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-style: solid; border-width: 0;
  border-image-source: url("/assets/ornate-panel.webp");
  border-image-slice: 130 fill;
  border-image-width: 88px;
  border-image-outset: 36px 24px 38px 24px;
  border-image-repeat: stretch;
}
.frame > * { position: relative; z-index: 1; }
.js .frame::before { opacity: 0; transform: scale(1.015); transition: opacity 1s var(--ease) 1.1s, transform 1.2s var(--ease) 1.1s; }
.js .frame.is-drawn::before { opacity: 1; transform: none; }

/* Drawing pass: a bright gold line races round the panel edge, then hands over to the ornate frame. */
.frame > .rail { position: absolute; pointer-events: none; overflow: visible; z-index: 2; }
.rail-outer { inset: 0; width: 100%; height: 100%; }
.rail-inner { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); }
.rail path { fill: none; stroke: #ffe6a0; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(255, 214, 120, .9)); }
.rail-outer path { stroke-width: 2; }
.rail-inner path { stroke-width: 1; opacity: .7; }
.frame.is-drawn .rail path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease); }
.frame.is-drawn .rail-inner path { transition-delay: .15s; }
.frame.is-drawn > .rail { opacity: 0; transition: opacity .9s var(--ease) 1.5s; }

/* Corner glints bloom last. */
.frame > .corner { position: absolute; width: 60px; height: 60px; pointer-events: none; opacity: 0; transform: scale(.2) rotate(-40deg); z-index: 3; }
.corner-tl { left: -30px; top: -30px; }
.corner-tr { right: -30px; top: -30px; }
.corner-bl { left: -30px; bottom: -30px; }
.corner-br { right: -30px; bottom: -30px; }
.corner svg { width: 100%; height: 100%; overflow: visible; }
.glint-star { fill: #fff6d8; }
.glint-x { opacity: .7; }
.frame.is-drawn > .corner { animation: glint-bloom 1.6s var(--ease) 1.7s both; }
@keyframes glint-bloom { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 45% { opacity: 1; transform: scale(1.15) rotate(0); } 100% { opacity: .55; transform: scale(.7) rotate(12deg); } }

.section-title { margin: 0 0 26px; padding-bottom: 16px; position: relative; font: 600 clamp(22px, 2.6vw, 32px)/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-100); }
/* Title flourish: a gold diamond with a double rule running off it. */
.section-title::before {
  content: ""; position: absolute; left: 1px; bottom: 1px; width: 8px; height: 8px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff3cf, var(--gold-500)); box-shadow: 0 0 8px rgba(231, 199, 124, .6);
}
.section-title::after {
  content: ""; position: absolute; left: 18px; bottom: 2px; width: min(calc(100% - 18px), 340px); height: 6px;
  background:
    linear-gradient(90deg, var(--gold-300), rgba(231, 199, 124, .5) 45%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(231, 199, 124, .4), transparent 65%) 0 5px / 70% 1px no-repeat;
}
.section-title.center { text-align: center; }
.section-title.center::before { left: calc(50% - 4px); }
.section-title.center::after { left: 50%; width: 340px; transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent, var(--gold-300) 44%, transparent 44% 56%, var(--gold-300) 56%, transparent) 0 3px / 100% 1px no-repeat; }

/* ---------- download ---------- */
.download-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.download-grid > *, .facts dd { min-width: 0; }
.install, .facts dd { overflow-wrap: anywhere; }
.facts { margin: 26px 0 0; display: grid; gap: 10px; }
.facts > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: baseline; padding-bottom: 10px; position: relative;
  background: linear-gradient(90deg, rgba(231, 199, 124, .5), rgba(231, 199, 124, .12) 60%, transparent) 0 100% / 100% 1px no-repeat; }
.facts > div::before { content: ""; position: absolute; left: -4px; bottom: -3px; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold-300); background: #0b1832; }
.facts dt { font: 600 12px/1.4 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.facts dd { margin: 0; }
.verify { margin: 22px 0 0; }
.verify summary { display: inline-block; cursor: pointer; font: 600 12px/1.4 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.verify summary:hover { color: var(--gold-100); }
.verify p { margin: 10px 0 0; }
.sha-line { display: flex; gap: 10px; align-items: flex-start; }
.copy { flex: none; padding: 3px 10px; font: 600 12px/1.4 var(--sans); color: var(--gold-100); background: transparent; border: 1px solid rgba(231, 199, 124, .5); border-radius: 3px; cursor: pointer; }
.copy:hover { border-color: var(--gold-100); }
.fallback { margin: 14px 0 0; color: var(--warn); font-size: 14px; }
.install h3, .success h3 { margin: 0 0 10px; font: 600 18px/1.3 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-100); }
.install ol { margin: 0 0 14px; padding-left: 22px; }
.install li { margin-bottom: 8px; color: var(--text); }
.install li::marker { color: var(--gold-300); font-family: var(--serif); }

/* ---------- register ---------- */
.register { display: grid; gap: 16px; }
.field label { display: block; margin-bottom: 6px; font: 600 12px/1.4 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.field input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 3px;
  color: var(--text); background: rgba(3, 7, 18, .85); border: 1px solid rgba(182, 192, 216, .35);
  font: 16px/1.4 var(--sans); transition: border-color .2s, box-shadow .2s;
}
.field input:hover { border-color: rgba(231, 199, 124, .55); }
.field input:focus { border-color: var(--gold-300); box-shadow: 0 0 0 3px rgba(231, 199, 124, .18); outline: none; }
.field input[aria-invalid="true"] { border-color: var(--bad); }
.pw { position: relative; }
.pw input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 12px; font: 600 12px/1 var(--sans); color: var(--gold-100); background: transparent; border: 1px solid rgba(231, 199, 124, .4); border-radius: 3px; cursor: pointer; }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }
.err { margin: 6px 0 0; min-height: 0; font-size: 14px; color: var(--bad); }
.err:empty { display: none; }
.form-msg { margin: 0; font-size: 15px; }
.form-msg.is-error { color: var(--bad); }
.form-msg:empty { display: none; }
.success { text-align: center; padding: 10px 0; }
.success h3 { font-size: 22px; }
.success:focus { outline: none; }

/* ---------- class sigils ---------- */
.sigils { list-style: none; margin: 30px auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sigil { --c: var(--gold-500); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; cursor: default; }
.sigil[data-class="assassin"] { --c: #ff4b4b; }
.sigil[data-class="tempestarii"] { --c: #4c9dff; }
.sigil[data-class="exorcist"] { --c: #b06cff; }
.sigil[data-class="reaver"] { --c: #ff8a3d; }
.sigil[data-class="hierophant"] { --c: #9fd0ff; }
.sigil[data-class="warden"] { --c: #f0c96a; }
.sigil img { width: clamp(96px, 10vw, 140px); height: auto; aspect-ratio: 1;
  filter: grayscale(.85) brightness(.5); transition: transform .4s var(--ease), filter .8s var(--ease); }
.s-name { font: 600 15px/1.2 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.s-role { font-size: 13px; color: var(--text-dim); }
.sigil.is-lit img { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 60%, transparent)); }
.sigil:hover img { transform: translateY(-4px) scale(1.07); filter: drop-shadow(0 0 22px var(--c)) brightness(1.12); }

/* ---------- status + news ---------- */
.band-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 72px; max-width: 1200px; margin: 0 auto; }
.band-split .panel { margin: 0; width: 100%; }
.status-big { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; font: 600 22px/1.2 var(--serif); letter-spacing: .08em; }
.status-big .dot { width: 12px; height: 12px; }
.news-date { margin: 0 0 6px; color: var(--gold-300); font: 600 13px/1.4 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.news-date:empty { display: none; }
.news-body { margin: 0 0 16px; font-size: 17px; }
.soon { font-style: italic; }
.privacy p { margin: 0; color: var(--text); }

.footer { position: relative; z-index: 2; text-align: center; padding: 50px 16px 60px; border-top: 1px solid rgba(231, 199, 124, .15); }
.footer-mark { margin: 0 0 6px; font: 600 18px/1 var(--serif); letter-spacing: .4em; text-transform: uppercase; color: var(--gold-300); }

/* ---------- entrance (sections only; controls are always visible) ---------- */
.js .band .panel, .js .sigils { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .band .panel.is-in, .js .sigils.is-in { opacity: 1; transform: none; }
.js #download .panel { opacity: 1; transform: none; } /* never hide the download block */

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .status-pill { margin-left: auto; }
  .sigils { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
}
@media (max-width: 820px) {
  .download-grid, .band-split { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 28px 22px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .brand-word { display: none; }
}
@media (max-width: 520px) {
  .sigils { grid-template-columns: repeat(2, 1fr); }
  .emblem { top: 34%; }
  .hero { min-height: max(92svh, 620px); }
  .btn { width: 100%; }
  .frame::before { border-image-width: 64px; border-image-outset: 26px 17px 28px 17px; }
}

/* Non-Windows touch devices: the game needs a Windows PC. */
.is-phone .hero .btn-gold[data-download], .is-phone #download .btn-gold[data-download] { display: none; }
.is-phone .cta-phone, .is-phone .phone-note { display: block; }
.is-phone .hero .cta-meta { display: none; }

/* ---------- motion tiers ---------- */
/* Low tier: drop the costliest continuous work (rays, cloud banks, sky drift, blend). */
.tier-low .rays { display: none; }
/* The particle canvas redraws the whole hero every frame; without a GPU that re-composites the
   render under it each frame, so the light tier drops it. */
.tier-low .motes { display: none; }
.tier-low .plate-img, .tier-low .clouds-near { animation: none; }
.tier-low .flame { animation: none; opacity: .8; mix-blend-mode: normal; }
.tier-low .emblem-core { mix-blend-mode: normal; }
/* Full-screen blends are what software compositing pays for every frame: hold them still. */
.tier-low .starfield::after { animation: none; opacity: .4; }
.tier-low .emblem-glow, .tier-low .emblem-core { animation: none; opacity: .85; }

/* Paused: tab hidden or hero offscreen. */
.paused .scene *, .paused .scene *::after { animation-play-state: paused !important; }
.tab-hidden .starfield::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motes, .rays { display: none; }
  .frame > .rail { display: none; }
  .js .frame::before { opacity: 1; transform: none; }
  .frame > .corner { opacity: .55; transform: scale(.7); }
  .js .band .panel, .js .sigils { opacity: 1; transform: none; }
  .sigil img { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 60%, transparent)); }
}