/* Valtaren Prologue: one canvas of light, CSS/SVG for the rest. Nation themes: Grimdur lava, Belnor meadow. */
:root {
  --bg: #050403; --ivory: #efe6d2; --muted: #a99b82; --gold: #c9a25a; --gold-hi: #f3d48a; --line: rgba(201, 162, 90, .3);
  --accent: #f3d48a; --accent2: #c9a25a; --serif: "Cinzel", "Trajan Pro", Georgia, serif; --sans: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --hold: 0;
}
body[data-nation="grimdur"] { --accent: #ff8a3d; --accent2: #c2322b; }
body[data-nation="belnor"] { --accent: #ffe39a; --accent2: #7fbf5a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
html[lang="tr"] [data-en], html[lang="en"] [data-tr] { display: none !important; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ivory); font: 16px/1.6 var(--sans); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
input { user-select: text; -webkit-user-select: text; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(0, 0, 0, .78) 100%); }

/* The land under the scene: molten cracks or a blooming meadow, faded in by the chosen/hovered nation. */
.land { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.land > div { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.lava { background:
  radial-gradient(ellipse 120% 45% at 50% 108%, rgba(255, 110, 30, .55), transparent 60%),
  radial-gradient(ellipse 60% 30% at 20% 100%, rgba(194, 50, 43, .5), transparent 70%),
  radial-gradient(ellipse 60% 30% at 85% 104%, rgba(255, 70, 20, .45), transparent 70%),
  linear-gradient(#0a0302, #1d0704 70%, #2a0a04); }
.lava::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ff7a2a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M0 150l60-20 40 30 70-40 30 20 60-50 40 40 80-20 50 30 70-40 100 30'/%3E%3Cpath d='M90 200l20-50M260 200l-10-60 40-20M420 200l10-40 50-30M540 200l-20-50' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat;
  filter: drop-shadow(0 0 6px #ff5a14) drop-shadow(0 0 16px #ff3c0a); animation: magma 3.2s ease-in-out infinite alternate; }
@keyframes magma { from { opacity: .55; } to { opacity: 1; } }
.meadow { background:
  radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255, 228, 150, .45), transparent 60%),
  radial-gradient(ellipse 130% 50% at 50% 115%, rgba(80, 150, 60, .65), transparent 65%),
  linear-gradient(#0d1408, #142410 60%, #1f3a14); }
.meadow::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 24%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath fill='%232f5e22' d='M77.7 100Q79.4 76.1 81.9 60.2Q80.7 76.1 79.8 100ZM128.6 100Q123.7 67.7 116.2 46.2Q125.6 67.7 131.7 100ZM9.0 100Q4.2 65.1 -3.0 41.8Q5.5 65.1 11.1 100ZM101.9 100Q97.7 49.8 91.4 16.3Q99.2 49.8 104.3 100ZM150.6 100Q151.4 45.0 152.7 8.4Q153.2 45.0 153.4 100ZM234.3 100Q238.3 80.2 244.3 67.0Q239.9 80.2 236.9 100ZM34.6 100Q32.5 77.4 29.3 62.3Q34.8 77.4 38.4 100ZM43.4 100Q44.9 59.3 47.3 32.2Q46.7 59.3 46.1 100ZM131.5 100Q126.5 79.6 119.1 65.9Q128.0 79.6 133.8 100ZM163.3 100Q161.2 65.3 158.1 42.2Q163.2 65.3 166.5 100ZM108.8 100Q112.1 70.3 117.0 50.5Q114.2 70.3 112.2 100ZM58.6 100Q58.9 59.6 59.3 32.7Q61.3 59.6 62.5 100ZM175.1 100Q180.4 70.8 188.5 51.3Q181.8 70.8 177.3 100ZM100.3 100Q96.5 52.5 90.6 20.8Q98.3 52.5 103.4 100ZM9.4 100Q12.4 55.9 16.8 26.6Q14.4 55.9 12.6 100ZM210.1 100Q212.3 69.8 215.6 49.6Q214.3 69.8 213.4 100ZM139.2 100Q143.0 64.2 148.7 40.3Q145.5 64.2 143.2 100ZM113.8 100Q108.9 56.1 101.5 26.8Q111.0 56.1 117.3 100ZM155.3 100Q158.9 43.3 164.3 5.4Q160.5 43.3 157.9 100ZM92.6 100Q87.2 55.9 79.2 26.5Q89.1 55.9 95.5 100ZM40.3 100Q35.4 77.4 28.0 62.4Q37.7 77.4 44.0 100ZM31.0 100Q29.8 72.3 28.0 53.9Q32.2 72.3 34.9 100ZM19.3 100Q19.9 64.5 20.7 40.8Q22.3 64.5 23.2 100ZM196.6 100Q194.1 48.3 190.4 13.8Q195.9 48.3 199.5 100ZM86.1 100Q91.2 47.5 98.9 12.5Q92.6 47.5 88.4 100ZM42.3 100Q39.3 73.0 34.8 54.9Q41.2 73.0 45.3 100ZM141.4 100Q135.8 71.8 127.5 52.9Q137.6 71.8 144.2 100ZM88.6 100Q93.7 59.9 101.3 33.2Q95.9 59.9 92.1 100ZM123.7 100Q125.7 57.9 128.7 29.9Q127.0 57.9 125.8 100ZM215.9 100Q220.1 51.6 226.4 19.3Q222.4 51.6 219.6 100ZM94.2 100Q89.7 66.4 83.1 44.1Q91.8 66.4 97.5 100ZM14.9 100Q11.7 79.4 6.8 65.6Q13.1 79.4 17.2 100ZM81.6 100Q76.0 79.9 67.6 66.6Q77.4 79.9 83.9 100ZM24.4 100Q19.0 67.8 11.1 46.4Q21.5 67.8 28.2 100ZM147.4 100Q144.6 76.2 140.4 60.3Q146.3 76.2 150.1 100ZM87.4 100Q91.3 77.2 97.2 62.0Q93.9 77.2 91.5 100ZM111.8 100Q107.2 63.1 100.2 38.6Q108.5 63.1 114.0 100ZM82.2 100Q85.9 71.7 91.4 52.8Q87.3 71.7 84.5 100ZM5.5 100Q5.9 44.9 6.3 8.2Q7.3 44.9 7.8 100ZM130.4 100Q130.7 80.9 131.1 68.2Q133.2 80.9 134.5 100ZM207.2 100Q204.5 54.8 200.5 24.7Q206.2 54.8 209.9 100ZM40.1 100Q40.5 51.9 41.0 19.8Q42.7 51.9 43.8 100ZM79.1 100Q82.6 73.3 87.8 55.5Q85.2 73.3 83.2 100ZM204.6 100Q208.2 50.6 213.5 17.6Q210.4 50.6 208.2 100ZM54.4 100Q52.8 61.8 50.4 36.4Q54.0 61.8 56.4 100ZM6.7 100Q4.0 71.1 -0.0 51.8Q6.2 71.1 10.2 100ZM229.6 100Q234.5 64.6 241.8 40.9Q237.0 64.6 233.7 100ZM229.2 100Q226.1 67.8 221.4 46.3Q227.6 67.8 231.6 100ZM47.2 100Q48.6 74.0 50.7 56.7Q51.1 74.0 51.1 100ZM201.7 100Q203.4 63.3 206.0 38.8Q205.7 63.3 205.4 100ZM20.3 100Q24.9 56.2 31.8 27.1Q27.2 56.2 24.0 100ZM180.0 100Q176.4 63.4 171.0 38.9Q178.7 63.4 183.7 100ZM79.8 100Q85.1 50.8 93.0 17.9Q86.8 50.8 82.6 100ZM96.3 100Q98.9 45.1 102.6 8.5Q100.3 45.1 98.6 100ZM30.5 100Q35.0 76.1 41.8 60.2Q37.4 76.1 34.2 100ZM35.1 100Q40.5 49.8 48.5 16.3Q42.6 49.8 38.5 100ZM84.1 100Q80.0 60.6 73.8 34.3Q81.2 60.6 86.0 100ZM233.0 100Q233.3 56.7 233.8 27.8Q235.8 56.7 237.0 100ZM104.1 100Q107.8 48.0 113.2 13.3Q109.3 48.0 106.5 100ZM60.4 100Q57.5 70.6 53.2 51.0Q59.6 70.6 63.7 100ZM62.2 100Q58.1 65.7 51.9 42.8Q60.6 65.7 66.2 100ZM84.9 100Q85.8 64.1 87.2 40.2Q88.3 64.1 88.9 100ZM101.0 100Q101.0 46.2 101.0 10.3Q102.9 46.2 104.1 100ZM125.6 100Q125.0 81.3 124.0 68.8Q126.4 81.3 128.0 100ZM0.9 100Q-2.7 50.8 -8.2 18.1Q-0.9 50.8 3.9 100ZM174.0 100Q172.1 60.3 169.2 33.8Q174.0 60.3 177.1 100ZM133.3 100Q128.9 51.4 122.3 19.0Q130.9 51.4 136.5 100ZM59.6 100Q62.7 71.2 67.3 52.0Q64.6 71.2 62.7 100ZM134.8 100Q139.4 52.4 146.4 20.6Q141.3 52.4 137.7 100ZM147.0 100Q147.1 62.3 147.3 37.1Q149.3 62.3 150.5 100Z'/%3E%3Ccircle cx='109.1' cy='51.3' r='2.6' fill='%23ffe39a'/%3E%3Ccircle cx='121.8' cy='39.9' r='2.6' fill='%23f2b8c6'/%3E%3Ccircle cx='216.4' cy='65.7' r='2.6' fill='%23fff4e6'/%3E%3Ccircle cx='197.5' cy='35.5' r='2.6' fill='%23f6d6dc'/%3E%3Ccircle cx='95.5' cy='42.6' r='2.6' fill='%23fff4e6'/%3E%3Ccircle cx='103.7' cy='38.5' r='2.6' fill='%23f2b8c6'/%3E%3Ccircle cx='184.7' cy='65.9' r='2.6' fill='%23fff4e6'/%3E%3Ccircle cx='220.2' cy='55.7' r='2.6' fill='%23f2b8c6'/%3E%3Ccircle cx='38.6' cy='65.3' r='2.6' fill='%23ffe39a'/%3E%3C/svg%3E") bottom left/240px 100% repeat-x;
  opacity: .9; transform-origin: bottom; animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: skewX(-1.5deg); } to { transform: skewX(1.5deg); } }
body[data-land="grimdur"] .lava, body[data-land="belnor"] .meadow { opacity: 1; }

.pbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) clamp(16px, 3vw, 36px) 10px; }
.pbar .home img { width: 28px; height: 28px; opacity: .85; }
.dots { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.dots li { width: 22px; height: 2px; background: rgba(239, 230, 210, .18); transition: background .6s; }
.dots li.done { background: var(--accent2); } .dots li.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.lang { display: flex; }
.skip { white-space: nowrap; }
.tools { display: flex; gap: 10px; align-items: center; }
.lang button, .skip { background: none; border: 1px solid var(--line); color: var(--muted); font: 600 11px/1 var(--sans); letter-spacing: .12em;
  padding: 8px 10px; cursor: pointer; }
.lang button.on { color: var(--gold-hi); border-color: var(--gold); }
.skip { color: var(--ivory); text-transform: uppercase; }
.skip:hover, .lang button:hover { color: var(--gold-hi); }

main { position: relative; z-index: 5; }
.ch { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 70px 16px 32px;
  opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; overflow-y: auto; }
.ch.on { opacity: 1; visibility: visible; transition: opacity 1.2s ease .2s, visibility 0s; }
.stage { width: min(1080px, 100%); margin: auto; }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.narrow { width: min(560px, 100%); }
.kicker { font: 600 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; text-align: center; }
.title { font: 500 clamp(24px, 3.6vw, 42px)/1.2 var(--serif); margin: 0 0 28px; text-align: center; text-shadow: 0 0 24px rgba(0, 0, 0, .8); }
.title.big { font-size: clamp(28px, 5vw, 60px); margin-top: 24px; }
.line { font: 500 clamp(18px, 2.4vw, 26px)/1.4 var(--serif); color: var(--muted); margin: 0 0 30px; letter-spacing: .04em; }

/* Hold-to-act buttons: a ring that fills while held. */
.hold { position: relative; width: 168px; height: 168px; border-radius: 50%; border: 0; background: none; color: var(--ivory); cursor: pointer;
  font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 34px; touch-action: none; }
.hold svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hold .trk { fill: rgba(5, 4, 3, .35); stroke: rgba(239, 230, 210, .14); stroke-width: 1.5; }
.hold .arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: calc(289 - 289 * var(--hold));
  filter: drop-shadow(0 0 6px var(--accent)); }
.hold:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
.hold.rune .runes text { transform-box: fill-box; font: 700 9px var(--serif); fill: var(--accent); text-anchor: middle; dominant-baseline: middle; opacity: calc(.25 + var(--hold)); }
.hold.rune .runes { transform: rotate(90deg); transform-origin: 50px 50px; }

.next, .ghost { margin-top: 26px; font: 600 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; padding: 16px 30px;
  color: #140d05; background: linear-gradient(#ffe7a8, var(--gold)); border: 0; box-shadow: 0 0 28px rgba(243, 212, 138, .35); transition: transform .2s, box-shadow .2s; }
.next:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(243, 212, 138, .6); }
.ghost { background: none; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.ghost:hover { color: var(--gold-hi); }

/* 1. Awakening */
.crest { position: relative; width: min(560px, 86vw); display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; min-height: 10px; }
.emblem { width: min(220px, 46vw); height: auto; opacity: 0; transform: scale(.82); filter: brightness(2.2) blur(6px) drop-shadow(0 0 30px #ffb347);
  transition: opacity 1.4s ease, transform 2.4s cubic-bezier(.2, .8, .2, 1), filter 2.6s ease; }
.wordmark { width: 100%; height: auto; margin-top: 10px; clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 14px rgba(255, 200, 120, .55));
  transition: clip-path 2.2s cubic-bezier(.6, 0, .2, 1) .9s; }
body.lit .emblem { opacity: 1; transform: none; filter: brightness(1) blur(0) drop-shadow(0 0 22px rgba(255, 190, 90, .45)); }
body.lit .wordmark { clip-path: inset(0 0 0 0); }
body:not(.lit) .crest { height: 0; overflow: visible; }
body.lit #ch0 .line, body.lit #breathe { display: none; }

/* 2. Oath */
.banners { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 4vw, 70px); max-width: 860px; margin: 0 auto; }
.banner:focus { outline: 0; } .banner:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.banner { position: relative; background: none; border: 0; color: var(--ivory); cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 10px; transition: transform .5s, opacity .5s, filter .5s; }
.banner .cloth { width: min(200px, 34vw); height: auto; transform-origin: top center; animation: wave 6s ease-in-out infinite; }
.banner.belnor .cloth { animation-delay: -3s; }
@keyframes wave { 0%, 100% { transform: skewX(0) } 50% { transform: skewX(1.6deg) } }
.grimdur .cloth > path { fill: #2a0b07; stroke: #c2322b; stroke-width: 2; }
.grimdur .sig path { fill: none; stroke: #ff7a2a; stroke-width: 3; filter: drop-shadow(0 0 6px #ff5a14); }
.grimdur .sig .in { fill: #ff8a3d; }
.belnor .cloth > path { fill: #efe6d2; stroke: #c9a25a; stroke-width: 2; }
.belnor .sig * { fill: none; stroke: #b0862f; stroke-width: 3; }
.belnor .sig circle { fill: #ffe39a; filter: drop-shadow(0 0 6px #ffd27a); }
.nname { font: 700 clamp(22px, 3vw, 34px)/1 var(--serif); letter-spacing: .12em; margin-top: 8px; }
.grimdur .nname { color: #ff9a5a; } .belnor .nname { color: #f6e7b8; }
.creed { font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.banner q { quotes: none; font: italic 400 clamp(13px, 1.4vw, 15px)/1.5 Georgia, serif; color: var(--muted); max-width: 30ch; min-height: 4.5em; opacity: .55; transition: opacity .5s; }
.banner:hover q, .banner.on q { opacity: 1; color: var(--ivory); }
.banners.chosen .banner:not(.on) { opacity: .28; filter: grayscale(.8); transform: scale(.94); }
.banner.on { transform: translateY(-6px); }
.seal { display: flex; justify-content: center; margin-top: 18px; }

/* 3. Calling */
.relics { display: flex; justify-content: center; gap: clamp(8px, 2vw, 22px); flex-wrap: wrap; }
.relic { width: clamp(76px, 18vw, 130px); aspect-ratio: 3 / 4; background: linear-gradient(rgba(30, 22, 14, .6), rgba(10, 8, 6, .8)); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: all .35s; }
.relic svg { width: 52%; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.relic b { font: 600 clamp(10px, 1.2vw, 12px)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.relic:hover, .relic.on { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 26px -6px var(--accent), inset 0 0 30px -12px var(--accent); }
.relic.on svg { filter: drop-shadow(0 0 8px var(--accent)); }
.altar { text-align: center; margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.creedline { font: 500 clamp(17px, 2.2vw, 24px)/1.4 var(--serif); margin: 0 0 6px; max-width: 40ch; }
.hint { color: var(--muted); font-size: 13px; letter-spacing: .06em; margin: 0 0 12px; }
.arena { position: relative; width: min(720px, 100%); height: clamp(180px, 30vh, 280px); border: 1px solid var(--line); touch-action: none; cursor: crosshair;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .04), transparent 70%); }
.count { position: absolute; right: 10px; bottom: 8px; font: 600 11px var(--sans); letter-spacing: .2em; color: var(--muted); }

/* 4. Trial */
.gatewrap { position: relative; width: min(560px, 90vw, 58svh); aspect-ratio: 1; overflow: hidden; border-radius: 50% 50% 0 0 / 38% 38% 0 0; border: 1px solid var(--line);
  box-shadow: 0 0 60px -20px var(--accent); }
.vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.15); transition: opacity 2s ease .6s, transform 6s ease .6s; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform 2.6s cubic-bezier(.7, 0, .2, 1);
  background: repeating-linear-gradient(90deg, #17110b 0 18px, #120d08 18px 20px), linear-gradient(#1d150d, #0d0906); box-shadow: inset 0 0 50px #000; }
.door.l { left: 0; border-right: 1px solid #3a2a16; } .door.r { right: 0; border-left: 1px solid #3a2a16; }
.gate { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1s; }
.gate .rn { cursor: pointer; }
.gate .rn circle { fill: rgba(10, 7, 4, .85); stroke: #4a3720; stroke-width: 2; transition: all .3s; }
.gate .rn text { font: 700 26px var(--serif); fill: #6a5536; text-anchor: middle; dominant-baseline: central; transition: all .3s; pointer-events: none; }
.gate .rn:hover circle { stroke: var(--gold); }
.gate .rn.lit circle { stroke: var(--accent); fill: rgba(60, 30, 10, .9); filter: drop-shadow(0 0 10px var(--accent)); }
.gate .rn.lit text { fill: #fff3d0; filter: drop-shadow(0 0 6px var(--accent)); }
.gate .rn.pulse circle { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { stroke: var(--accent); stroke-width: 4; } }
.gate .ring { fill: none; stroke: #3a2a16; stroke-width: 2; }
.gate .link { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 5px var(--accent)); }
.gatewrap.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px) } 40%, 80% { transform: translateX(7px) } }
.gatewrap.open .door.l { transform: translateX(-102%); } .gatewrap.open .door.r { transform: translateX(102%); }
.gatewrap.open .gate { opacity: 0; pointer-events: none; }
.gatewrap.open .vista { opacity: 1; transform: scale(1); }
.hessa { font: italic 400 clamp(15px, 1.8vw, 19px)/1.55 Georgia, serif; color: var(--ivory); max-width: 44ch; min-height: 3.2em; margin: 18px 0 0; }
.hessa b { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; font-style: normal; }

/* 5. Name */
.namefield { width: 100%; }
#hero { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ivory); text-align: center; outline: 0;
  font: 500 clamp(30px, 6vw, 54px)/1.3 var(--serif); letter-spacing: .08em; padding: 6px 0; caret-color: var(--accent); }
#hero:focus { border-color: var(--accent); box-shadow: 0 10px 20px -16px var(--accent); }
.nstate { min-height: 1.6em; font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.nstate.ok { color: #9fe39a; } .nstate.bad { color: #ff8a7a; }
.reserve { width: 100%; margin-top: 18px; padding: 18px; border: 1px solid var(--line); background: rgba(10, 8, 6, .7); backdrop-filter: blur(6px); }
.sub { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.sub b { color: var(--gold-hi); }
.tabs { display: flex; gap: 0; margin-bottom: 12px; }
.tabs button { flex: 1; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); padding: 10px; cursor: pointer; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.tabs button.on { color: var(--gold-hi); border-color: var(--gold); }
#acct { display: flex; flex-direction: column; gap: 10px; }
#acct input { background: rgba(0, 0, 0, .4); border: 1px solid var(--line); color: var(--ivory); padding: 12px; font: 15px var(--sans); outline: 0; }
#acct input:focus { border-color: var(--gold); }
#acct .next { margin-top: 6px; }
.err { min-height: 1.4em; color: #ff8a7a; font-size: 13px; margin: 0; }
#acct.login [name="Email"] { display: none; }

/* 6. Road */
.oathcard { width: min(360px, 90vw); padding: 26px 22px 20px; text-align: center; border: 1px solid var(--accent2); position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 220, 150, .12), transparent 70%), rgba(10, 8, 6, .82);
  box-shadow: 0 0 60px -18px var(--accent), inset 0 0 0 4px rgba(5, 4, 3, .9), inset 0 0 0 5px var(--line); animation: rise 1.4s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.oathcard img { margin: 0 auto 8px; width: 64px; height: 64px; }
.otitle { font: 600 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.oname { font: 700 clamp(26px, 4vw, 36px)/1.1 var(--serif); margin: 0 0 6px; letter-spacing: .06em; }
.ometa { color: var(--muted); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.ostate { font-size: 13px; color: var(--ivory); margin: 0; opacity: .8; }
.ctas { display: flex; flex-direction: column; align-items: center; }
.dl { display: inline-block; text-decoration: none; padding: 20px 46px; font: 700 15px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: #140d05; background: linear-gradient(#fff0c4, var(--gold)); box-shadow: 0 0 44px rgba(243, 212, 138, .5); animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 70px rgba(243, 212, 138, .8); } }
.dlmeta { color: var(--muted); font-size: 13px; margin: 10px 0 4px; min-height: 1.4em; }
.links { font-size: 14px; color: var(--muted); }
.links a { color: var(--gold-hi); text-decoration: none; border-bottom: 1px solid rgba(243, 212, 138, .3); }
.launchnote { font-size: 13px; color: var(--muted); max-width: 46ch; }

@media (max-width: 640px) {
  .pbar { gap: 8px; } .dots { gap: 4px; } .dots li { width: 8px; } .tools { gap: 6px; } .lang button { padding: 8px 7px; } .skip { padding: 8px; font-size: 10px; letter-spacing: .06em; }
  .banners { gap: 8px; } .banner q { font-size: 12px; } .creed { font-size: 9px; letter-spacing: .14em; }
  .hold { width: 140px; height: 140px; padding: 26px; font-size: 10px; }
  .relics { gap: 6px; } .relic { width: calc(25% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}