/* ============================================================================
   Kingdoms of Teyvat
   Palette lifted from the client's own UI so site and game read as one thing.
   Everything visual here is drawn in CSS/SVG/canvas - there are no art assets
   to ship, and procedural beats a bad JPEG.
   ========================================================================== */

:root {
  --ink:        #07090e;
  --ink-2:      #0c1018;
  --panel:      #141a25;
  --panel-2:    #1a2130;
  --line:       #2b3444;
  --line-soft:  #1e2634;

  --gold:       #e8a33d;
  --gold-lt:    #ffd489;
  --gold-dim:   #a8752a;
  --ember:      #e2571c;
  --ember-dp:   #7a2a0c;
  --jade:       #6fbf8a;
  --violet:     #8b6ad4;

  --text:       #e3e9f3;
  --text-dim:   #97a2b6;
  --text-faint: #66718a;

  --radius: 3px;
  --wrap: 1180px;

  --glow-gold: 0 0 18px rgba(232,163,61,.35);
  --glow-ember: 0 0 30px rgba(226,87,28,.45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.65 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* Film grain over everything. Cheap, and it stops the flat darks from looking
   like an unstyled page. SVG turbulence rather than a texture file. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; position: relative; z-index: 2; }

h1, h2, h3, .brand-text strong, .stat-num, .rank-num, .btn {
  font-family: Cinzel, Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
}
h1, h2, h3 { font-weight: 700; }

h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; margin: 0 0 .45em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); margin: 0 0 .6em; }
h3 { font-size: 1.14rem; margin: 0 0 .45em; }

p { margin: 0 0 1em; }
a { color: var(--gold); text-decoration: none; transition: color .18s; }
a:hover { color: var(--gold-lt); }

.muted { color: var(--text-dim); }
.small { font-size: .875rem; }
.center { text-align: center; }

/* Gold gradient text for the big statements */
.shine-text {
  /* Base is gold the whole way across with ONE bright band travelling over it.
     The earlier version alternated gold and near-white across the gradient, so
     a headline caught mid-animation read as two different colours joined in the
     middle of a word. */
  background: linear-gradient(100deg,
    var(--gold-dim) 0%, var(--gold) 34%, #fff7e6 46%, var(--gold) 58%, var(--gold-dim) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 7s linear infinite;
}
@keyframes sheen { to { background-position: -250% 0; } }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .72rem/1 Inter, sans-serif; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-dim); margin: 0 0 1.1rem;
}
.kicker::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}

.lede { font-size: 1.1rem; color: var(--text-dim); max-width: 62ch; }

/* ================================================================== HEADER = */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7,9,14,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s, border-color .3s;
}
.site-head.scrolled { background: rgba(7,9,14,.94); border-bottom-color: var(--line); }

.head-inner { display: flex; align-items: center; gap: 1.5rem; height: 70px; }

.brand { display: flex; align-items: center; gap: .75rem; color: var(--text); }
/* The Ember himself, lifted straight from the client's own portrait.png so the
   site's mark and the face you meet in game are the same character.
   image-rendering: pixelated is mandatory - the source is 78x80 pixel art and
   smooth scaling turns it to mush. */
.brand-mark {
  width: 34px; height: 34px; flex: none; position: relative;
  /* Relative to THIS stylesheet, not to the page: url() in CSS resolves against
     the CSS file's own location, so "assets/ember-mark.png" resolved to
     /assets/assets/... and the mark silently failed to load. Keeping it
     relative (rather than /assets/...) also survives deployment into a
     subdirectory. */
  background: url("ember-mark.png") center/contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 7px rgba(226,87,28,.55));
  animation: emberPulse 3.5s ease-in-out infinite;
}
.brand-mark::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(232,163,61,.22);
  border-top-color: rgba(232,163,61,.7);
  animation: ringSpin 11s linear infinite;
}
@keyframes emberPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(226,87,28,.45)); }
  50%     { filter: drop-shadow(0 0 14px rgba(226,87,28,.9)); }
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text strong { font-size: 1.04rem; }
.brand-text em {
  font-style: normal; font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-faint);
}

.mainnav { margin-left: auto; display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.mainnav > a:not(.btn) {
  position: relative; padding: .55rem .85rem;
  color: var(--text-dim); font-size: .92rem; font-weight: 500;
}
.mainnav > a:not(.btn)::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.mainnav > a:not(.btn):hover { color: var(--text); }
.mainnav > a:not(.btn):hover::after, .mainnav > a.on::after { transform: scaleX(1); }
.mainnav > a.on { color: var(--gold); }

.navtoggle, .navburger { display: none; }

/* ================================================================= BUTTONS = */

.btn {
  position: relative; overflow: hidden;
  display: inline-block; padding: .6rem 1.15rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s, box-shadow .25s, border-color .25s, color .2s, background .2s;
}
.btn::before { /* shine sweep */
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); transition: left .55s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before { left: 130%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold) 45%, var(--gold-dim));
  color: #1a1206 !important; border-color: #7d5a1f;
  box-shadow: 0 4px 18px rgba(232,163,61,.22);
}
.btn-gold:hover { box-shadow: 0 8px 28px rgba(232,163,61,.4); color: #1a1206 !important; }

.btn-ghost {
  border-color: var(--line); color: var(--text) !important;
  background: rgba(20,26,37,.6); backdrop-filter: blur(4px);
}
.btn-ghost:hover { border-color: var(--gold-dim); box-shadow: var(--glow-gold); }

.btn-quiet { color: var(--text-faint) !important; }
.btn-quiet:hover { color: var(--text) !important; }
.btn-quiet::before { display: none; }

.btn-lg { padding: .85rem 1.75rem; font-size: 1rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ==================================================================== HERO = */

.hero {
  position: relative; min-height: min(88vh, 820px);
  display: flex; align-items: center;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

/* --- the scene: stacked layers, each parallaxing at its own rate --------- */
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-layer { position: absolute; inset: 0; will-change: transform; }

.sky {
  background:
    radial-gradient(120% 80% at 50% 92%, rgba(226,87,28,.30) 0%, transparent 58%),
    radial-gradient(90% 60% at 50% 100%, rgba(232,163,61,.22) 0%, transparent 60%),
    linear-gradient(180deg, #05070c 0%, #0a0f1a 42%, #14161f 72%, #241a17 100%);
}

/* stars: three tiled dot fields, each twinkling out of phase */
.stars, .stars2 {
  background-repeat: repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 70% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 40% 65%, rgba(255,240,210,.7), transparent),
    radial-gradient(1px 1px at 88% 48%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 12% 80%, rgba(255,255,255,.45), transparent);
  background-size: 420px 320px;
  animation: twinkle 5s ease-in-out infinite;
}
.stars2 { background-size: 300px 240px; opacity: .55; animation-delay: -2.5s; animation-duration: 7s; }
@keyframes twinkle { 0%,100% { opacity: .5; } 50% { opacity: .95; } }

/* god rays sweeping over the ridge */
.rays {
  background: conic-gradient(from 200deg at 50% 105%,
    transparent 0deg, rgba(255,196,110,.10) 12deg, transparent 24deg,
    transparent 40deg, rgba(255,196,110,.07) 52deg, transparent 66deg);
  mix-blend-mode: screen; animation: raySweep 22s ease-in-out infinite alternate;
}
@keyframes raySweep { from { transform: rotate(-4deg) scale(1.1); } to { transform: rotate(4deg) scale(1.2); } }

/* drifting fog banks */
.fog {
  background:
    radial-gradient(60% 30% at 20% 78%, rgba(150,175,215,.10), transparent 70%),
    radial-gradient(50% 26% at 78% 84%, rgba(226,87,28,.10), transparent 70%);
  animation: fogDrift 28s ease-in-out infinite alternate;
}
@keyframes fogDrift { from { transform: translateX(-4%) } to { transform: translateX(4%) } }

.ridge { bottom: 0; top: auto; height: 62%; width: 100%; }
.ridge svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }

/* ember particles live on this canvas */
#embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.hero .wrap { z-index: 3; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { text-shadow: 0 4px 40px rgba(0,0,0,.75); }
.hero .lede { font-size: 1.15rem; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }

/* --- the wayshrine: rotating rune rings around a living core ------------- */
.shrine { position: relative; width: min(380px, 84%); aspect-ratio: 1; margin-inline: auto; }
.shrine .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(232,163,61,.22);
}
.shrine .ring:nth-child(1) { animation: ringSpin 26s linear infinite; border-top-color: rgba(232,163,61,.7); }
.shrine .ring:nth-child(2) { inset: 11%; animation: ringSpin 18s linear infinite reverse; border-left-color: rgba(226,87,28,.65); }
.shrine .ring:nth-child(3) { inset: 22%; animation: ringSpin 34s linear infinite; border-bottom-color: rgba(139,106,212,.6); }
.shrine .runes { position: absolute; inset: 4%; animation: ringSpin 60s linear infinite; opacity: .55; }
.shrine .core {
  position: absolute; inset: 33%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff6dd 0%, #ffc978 16%, var(--ember) 46%, var(--ember-dp) 74%, #180b06 100%);
  box-shadow: 0 0 70px rgba(226,87,28,.55), 0 0 140px rgba(226,87,28,.3), inset 0 0 40px rgba(0,0,0,.5);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%     { transform: scale(1.05); filter: brightness(1.18); }
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 3; color: var(--text-faint); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scroll-hint span {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--gold-dim), transparent);
  animation: dropLine 2.2s ease-in-out infinite;
}
@keyframes dropLine { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* page banner for inner pages - same scene, shorter */
.pagehero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-soft);
}
.pagehero .sky { background:
  radial-gradient(110% 130% at 50% 130%, rgba(226,87,28,.20) 0%, transparent 60%),
  linear-gradient(180deg, #05070c, #0a0e17); }

/* =================================================================== STATS = */

.statbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 3rem 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.stat { background: linear-gradient(180deg, var(--panel), var(--ink-2)); padding: 1.3rem 1rem; text-align: center; position: relative; }
.stat::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,163,61,.5), transparent);
}
.stat-num {
  display: block; font-size: 2rem; font-weight: 700; line-height: 1.1;
  color: var(--gold); text-shadow: 0 0 22px rgba(232,163,61,.4);
}
.stat-lab { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }

/* =================================================================== BANDS = */

section.band { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0; }
section.band + section.band::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.grid { display: grid; gap: 1.35rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ------ ornate card: corner brackets + travelling top light -------------- */
.card {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(26,33,48,.9), rgba(12,16,24,.9));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.45rem;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.card::before { /* top edge light, slides across on hover */
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .35s;
}
.card::after { /* corner brackets */
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid transparent; border-radius: 2px;
  background:
    linear-gradient(var(--gold-dim),var(--gold-dim)) left top/10px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) left top/1px 10px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right top/10px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right top/1px 10px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) left bottom/10px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) left bottom/1px 10px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right bottom/10px 1px no-repeat,
    linear-gradient(var(--gold-dim),var(--gold-dim)) right bottom/1px 10px no-repeat;
  opacity: .35; transition: opacity .35s, inset .35s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(232,163,61,.45);
  box-shadow: 0 20px 45px rgba(0,0,0,.55), 0 0 40px rgba(232,163,61,.10);
}
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: .95; inset: 5px; }

.card h3 { color: var(--text); }
.card p:last-child { margin-bottom: 0; }

.card-tag {
  display: inline-block; font-family: Inter, sans-serif;
  font: 600 .66rem/1 Inter, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(232,163,61,.35); border-radius: 100px;
  padding: .38rem .7rem; margin-bottom: 1rem;
  background: rgba(232,163,61,.06);
}

/* region cards get a level badge and a glowing left rule */
.region-card { border-left: 2px solid var(--gold-dim); }
.region-card::before { background: linear-gradient(90deg, var(--gold), transparent); }
.band-lv {
  float: right; font-family: Cinzel, serif; font-weight: 700;
  color: var(--gold-dim); font-size: .85rem;
  border: 1px solid var(--line); border-radius: 100px; padding: .2rem .65rem;
}

/* class card: animated conic border on hover */
.class-card { position: relative; }
.class-card::before { background: linear-gradient(90deg, transparent, var(--violet), transparent); }

/* ================================================================ REVEALS = */

/* Hidden ONLY when JS is actually running. <html> gets .js from an inline
   script in the head, so with JS off (or if fx.js 404s) every .reveal element
   is simply visible - content must never depend on a script to be readable. */
.reveal { transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }

/* =================================================================== FORMS = */

.formwrap { max-width: 440px; margin: clamp(2rem,6vw,4rem) auto clamp(3rem,8vw,5rem); position: relative; z-index: 2; }
.formcard {
  position: relative;
  background: linear-gradient(180deg, rgba(26,33,48,.95), rgba(10,14,21,.95));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.3rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 50px rgba(232,163,61,.06);
}
.formcard::before {
  content: ""; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font: 600 .7rem/1 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: .5rem;
}
.field input {
  width: 100%; padding: .78rem .9rem; font: 400 1rem Inter, sans-serif;
  color: var(--text); background: #070a10;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus {
  outline: none; border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(232,163,61,.14), var(--glow-gold);
}

.alert { padding: .85rem 1.05rem; border-radius: var(--radius); border: 1px solid; margin-bottom: 1.3rem; font-size: .92rem; }
.alert-bad  { border-color: #7d3030; background: rgba(70,20,20,.6); color: #f0b4b4; }
.alert-good { border-color: #2f6b46; background: rgba(18,36,26,.7); color: #a9e0c0; }
.alert-info { border-color: var(--line); background: rgba(26,33,48,.7); color: var(--text-dim); }

/* =================================================================== TABLE = */

.tablewrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(12,16,24,.7); box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data th, table.data td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.data th {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  font: 600 .7rem/1 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
}
table.data tbody tr { transition: background .18s; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: rgba(232,163,61,.05); }

.rank-num { color: var(--gold); width: 3.2rem; font-weight: 700; }
.rank-1 td { background: rgba(232,163,61,.06); }
.rank-1 .rank-num { font-size: 1.25rem; text-shadow: 0 0 16px rgba(232,163,61,.6); }
.rank-2 .rank-num, .rank-3 .rank-num { color: var(--gold-lt); }

.pill {
  display: inline-block; padding: .22rem .6rem; border-radius: 100px;
  font-size: .72rem; font-weight: 600; border: 1px solid var(--line); color: var(--text-dim);
}
.pill-on {
  border-color: rgba(111,191,138,.5); color: var(--jade);
  background: rgba(111,191,138,.08);
  box-shadow: 0 0 12px rgba(111,191,138,.25);
}
.pill-off { color: var(--text-faint); }

/* ==================================================================== NEWS = */

.newsitem {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20,26,37,.85), rgba(10,14,21,.85));
  padding: 1.6rem 1.5rem; margin-bottom: 1.1rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.newsitem::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-dim), transparent);
  opacity: .5; transition: opacity .3s;
}
.newsitem:hover { border-color: rgba(232,163,61,.35); transform: translateX(4px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.newsitem:hover::before { opacity: 1; }
.newsitem h3 { margin-bottom: .35rem; }
.newsmeta { font-size: .76rem; color: var(--text-faint); letter-spacing: .08em; margin-bottom: .85rem; }
.newsbody p { color: var(--text-dim); }

/* ==================================================================== FOOT = */

.site-foot {
  position: relative; border-top: 1px solid var(--line-soft);
  margin-top: 3rem; padding: 2.6rem 0;
  background: linear-gradient(180deg, transparent, rgba(226,87,28,.05));
}
.foot-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.foot-links { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot-links a { color: var(--text-dim); font-size: .9rem; }
.foot-links a:hover { color: var(--gold); }

/* ============================================================== RESPONSIVE = */

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .kicker { justify-content: center; }
  .hero-art { order: -1; }
  .shrine { width: min(240px, 62%); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .navburger {
    display: block; margin-left: auto; width: 42px; height: 42px;
    border: 1px solid var(--line); border-radius: var(--radius);
    position: relative; cursor: pointer;
  }
  .navburger span, .navburger span::before, .navburger span::after {
    content: ""; position: absolute; left: 11px; width: 18px; height: 2px; background: var(--text);
  }
  .navburger span { top: 20px; }
  .navburger span::before { top: -6px; left: 0; }
  .navburger span::after  { top: 6px;  left: 0; }

  .mainnav {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(7,9,14,.98); border-bottom: 1px solid var(--line); padding: .7rem;
  }
  .navtoggle:checked ~ .mainnav { display: flex; }
  .mainnav > a, .mainnav .btn { text-align: center; margin: .18rem 0; }
}

/* Respect the setting. Everything above still reads fine standing still. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================ THE WORLD ==== */
/* The hero centrepiece: Teyvat itself, floating, with dragons around it.
   The landmass is the REAL continent - assets/continent.svg is generated from
   the in-game world map by tools/map_to_svg.py, so the coast, the scorched
   east and the southern desert are exactly where they are in game. */

.world-stage {
  position: relative;
  width: min(440px, 92%);
  aspect-ratio: 1;
  margin-inline: auto;
  transform-style: preserve-3d;
}

/* light spilling off the world */
.world-stage::before {
  content: ""; position: absolute; inset: -18%;
  background: radial-gradient(circle at 50% 52%,
    rgba(232,163,61,.20) 0%, rgba(226,87,28,.12) 34%, transparent 66%);
  animation: breathe 9s ease-in-out infinite;
  pointer-events: none;
}

/* orbit guides - the lattice the shrines sit on */
.orbit-ring {
  position: absolute; inset: 4%; border-radius: 50%;
  border: 1px solid rgba(232,163,61,.16);
  transform: rotateX(74deg);
}
.orbit-ring.r2 { inset: -6%; border-color: rgba(139,106,212,.14); transform: rotateX(74deg) rotate(28deg); }

.world-float {
  position: absolute; inset: 8%;
  display: grid; place-items: center;
  animation: worldBob 11s ease-in-out infinite;
}
@keyframes worldBob {
  0%,100% { transform: translateY(-1.5%) rotate(-1.2deg); }
  50%     { transform: translateY(1.5%)  rotate(1.2deg); }
}

.world-float .continent {
  width: 100%; height: 100%;
  /* Two shadows doing different jobs: a warm offset one at top-left reads as
     rim-light from the same ember glow lighting the rest of the scene, and a
     dark one below sells the landmass as floating rather than pasted on. */
  filter:
    drop-shadow(-3px -4px 0 rgba(255,214,138,.22))
    drop-shadow(0 26px 34px rgba(0,0,0,.6));
}
.continent .land-edge { animation: coastGlow 6s ease-in-out infinite; }
@keyframes coastGlow {
  0%,100% { stroke-opacity: .35; }
  50%     { stroke-opacity: .8; }
}

/* the four regions' shrines, pulsing out of phase */
.shrine-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #ffe6b0; box-shadow: 0 0 10px 3px rgba(232,163,61,.85);
  animation: dotPulse 3.4s ease-in-out infinite;
}
.shrine-dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(232,163,61,.5);
  animation: dotRing 3.4s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes dotRing  { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---- dragons ------------------------------------------------------------
   Each sits in a wrapper that rotates about the stage centre, so the dragon
   sweeps a circle without needing offset-path. The wrapper is squashed on Y
   and the dragon stretched back by the inverse, which turns the circle into a
   viewed-from-above ellipse while leaving the dragon itself undistorted. */
.dragon-orbit {
  position: absolute; inset: 0;
  animation: orbit 26s linear infinite;
  transform-origin: 50% 50%;
}
.dragon-orbit.o2 { animation-duration: 38s; animation-direction: reverse; }
.dragon-orbit.o3 { animation-duration: 46s; }

@keyframes orbit {
  from { transform: rotate(0deg)   scaleY(.46); }
  to   { transform: rotate(360deg) scaleY(.46); }
}

.dragon {
  position: absolute; top: 50%; left: 96%;
  width: 118px; margin: -26px 0 0 -59px;
  transform: scaleY(2.17);            /* undo the orbit's squash */
  color: #070a10;
}
.dragon.small { width: 78px; margin: -17px 0 0 -39px; opacity: .82; }
.dragon.tiny  { width: 56px; margin: -12px 0 0 -28px; opacity: .62; }
.dragon svg { width: 100%; height: auto; overflow: visible; display: block; }

.dragon .wing {
  transform-origin: 0px 0px;
  animation: flap 1.9s ease-in-out infinite;
}
.dragon.small .wing { animation-duration: 1.5s; }
.dragon.tiny .wing  { animation-duration: 1.2s; }
@keyframes flap {
  0%,100% { transform: scaleY(1)   skewX(0deg); }
  50%     { transform: scaleY(.42) skewX(6deg); }
}

/* one behind the world, two in front, so they pass around it */
.dragon-orbit.behind { z-index: 0; }
.world-float          { z-index: 2; }
.dragon-orbit.front   { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .dragon-orbit { animation: none; }
  .dragon-orbit.o2 { transform: rotate(140deg) scaleY(.46); }
  .dragon-orbit.o3 { transform: rotate(255deg) scaleY(.46); }
}

@media (max-width: 940px) {
  .world-stage { width: min(320px, 82%); }
}

/* ============================================================== GALLERY ==== */
/* Real captures from the running client, not mockups. One large frame with
   thumbnails under it; switching is pure CSS via radio inputs, so it works
   with JavaScript off and needs no lightbox library. */

.shots { position: relative; }

.shots input { position: absolute; opacity: 0; pointer-events: none; }

.shot-stage {
  position: relative; width: 100%; aspect-ratio: 1280 / 676;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #05070c;
  box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 60px rgba(232,163,61,.06);
}
.shot-stage::after {           /* keeps the bright game art off the page edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(5,7,12,.85);
}
.shot-stage figure {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.03);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.shot-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.6rem 1.4rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(5,7,12,.92));
}
.shot-cap strong { display: block; font-family: Cinzel, serif; font-size: 1.05rem; }
.shot-cap span { color: var(--text-dim); font-size: .9rem; }

.shot-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: .7rem; }
.shot-thumbs label {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; opacity: .5;
  transition: opacity .25s, border-color .25s, transform .25s;
}
.shot-thumbs label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-thumbs label:hover { opacity: .85; transform: translateY(-2px); }

/* the checked radio drives both the big frame and its own thumbnail */
#sh1:checked ~ .shot-stage #f1,
#sh2:checked ~ .shot-stage #f2,
#sh3:checked ~ .shot-stage #f3,
#sh4:checked ~ .shot-stage #f4,
#sh5:checked ~ .shot-stage #f5 { opacity: 1; transform: none; }

#sh1:checked ~ .shot-thumbs label[for="sh1"],
#sh2:checked ~ .shot-thumbs label[for="sh2"],
#sh3:checked ~ .shot-thumbs label[for="sh3"],
#sh4:checked ~ .shot-thumbs label[for="sh4"],
#sh5:checked ~ .shot-thumbs label[for="sh5"] {
  opacity: 1; border-color: var(--gold); box-shadow: var(--glow-gold);
}

@media (max-width: 700px) {
  .shot-thumbs { grid-template-columns: repeat(3, 1fr); }
}