/* Risk of Fate: cinematic S11 refresh. Original art and native navigation. */

@font-face { font-family: "Cormorant"; src: url(/static/cormorant-var.cbaa23ea4c69e665.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(/static/cormorant-italic-of.e4baed4bcb245f04.woff2) format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; unicode-range: U+0026, U+0066, U+006F; }
@font-face { font-family: "Spectral"; src: url(/static/spectral-400.6d8811f0280ea9f8.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url(/static/spectral-400i.8486ba0f7764ca87.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url(/static/spectral-600.3f0321ce10a3611d.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant fb"; src: local("Georgia"); size-adjust: 86.8%; }
@font-face { font-family: "Spectral fb"; src: local("Georgia"); size-adjust: 99.4%; }
@property --ray { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: dark;
  --bg: #0b2035; --bg-2: #081a2c; --surface: #102d43; --raise: #1b4057; --stone: #123249;
  --fg: #eee9dc; --hi: #fff4d4; --muted: #bfced8; --line: #345a70; --line-2: #507787; --edge: #87a8b8;
  --bronze: #c5ad78; --gold: #efd59b; --war: #8bd1c4; --on-war: #102c3a;
  --human: #9dceef; --akkan: #e6b99b; --ok: #9bd3ac; --bad: #ffb2ab; --focus: #8de4ee;
  --staff-bg: #c5ad78; --staff-fg: #102c3a;
  --scrim: 11 32 53; --ember: 139 209 196; --cold: 150 185 235;
  --display: "Cormorant", "Cormorant fb", Georgia, serif;
  --text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 76rem; --gut: max(1rem, (100% - var(--wrap)) / 2);
  --s0: .25rem; --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem; --s8: 7rem;
  --glow: 0 0 .25em rgb(var(--ember) / .55), 0 0 .9em rgb(var(--ember) / .3), 0 0 2.4em rgb(var(--ember) / .18);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 1.0625rem/1.65 var(--text); font-variant-numeric: lining-nums proportional-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--fg); text-decoration-color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: var(--s3); top: -4rem; z-index: 20; padding: var(--s1) var(--s3); background: var(--fg); color: var(--bg); }
.skip:focus { top: var(--s3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc, .kicker, th, dt, legend, .cap b { text-transform: uppercase; letter-spacing: .12em; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.02; margin: 0 0 var(--s3); text-wrap: balance; color: var(--hi); }
h2 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); text-shadow: none; }
h3 { font-size: 1.75rem; }
p { margin: 0 0 var(--s3); }
dd { margin: 0; }
.kicker { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); color: var(--gold); font-weight: 600; font-size: 1.0625rem; }
.kicker::before, .kicker::after { content: ""; height: 1px; width: 2.5rem; background: linear-gradient(90deg, transparent, var(--bronze)); }
.kicker::after { transform: scaleX(-1); }
.center { text-align: center; }
.center .kicker { justify-content: center; }
.lede { font-size: 1.25rem; line-height: 1.55; max-width: 36rem; }
.muted { color: var(--muted); }
.error { border-left: 2px solid var(--bad); padding: var(--s2) var(--s3); background: rgb(0 0 0 / .45); }
.error::before { content: "Error: "; font-weight: 600; color: var(--bad); }
.cap { margin: 0; font-size: .8125rem; font-style: italic; color: var(--muted); }
.cap b { font-style: normal; color: var(--gold); margin-right: var(--s1); }

/* ---- Controls ---- */
label { display: block; font-weight: 600; margin: var(--s3) 0 var(--s0); }
input:not([type=radio], [type=checkbox], [type=hidden]), select { width: 100%; min-height: 3rem; padding: var(--s1) var(--s3); font: inherit; color: var(--fg); background: var(--bg-2); border: 1px solid var(--edge); border-radius: 4px; box-shadow: none; }
input:hover, select:hover { border-color: var(--gold); }
input:focus-visible, select:focus-visible { border-color: var(--focus); outline-offset: 0; }
input[type=radio], input[type=checkbox] { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--bronze); flex: none; }
button, .button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 3.25rem; padding: 0 var(--s5);
  font: 600 .875rem/1.3 var(--text); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; cursor: pointer;
  color: var(--hi); background: rgb(0 0 0 / .45); border: 1px solid var(--bronze); border-radius: 0;
  box-shadow: inset 0 0 0 3px rgb(0 0 0 / .6), inset 0 0 0 4px rgb(208 138 85 / .35);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
button:hover, .button:hover { color: var(--hi); background-color: rgb(208 138 85 / .22); box-shadow: inset 0 0 0 3px rgb(0 0 0 / .6), inset 0 0 0 4px var(--gold), 0 0 1.5rem rgb(var(--ember) / .25); }
.war { color: var(--on-war); background: var(--war); border-color: #f08a5d; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), inset 0 -3px 0 rgb(0 0 0 / .25), 0 0 1.25rem rgb(var(--ember) / .35); }
.war:hover { color: var(--on-war); background-color: #abe9db; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -3px 0 rgb(0 0 0 / .25), 0 0 2.25rem rgb(var(--ember) / .55); }
.link { display: inline-flex; align-items: center; gap: var(--s1); min-height: 2.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: var(--s4) 0 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--line); vertical-align: baseline; }
th { color: var(--muted); font-weight: 600; border-bottom-color: var(--line-2); }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; }
.session-table button { padding-inline: 1rem; }
.scroll-hint { color: var(--muted); font-size: .8125rem; margin: 0 0 .75rem; }
@media (min-width: 60rem) { .scroll-hint { display: none; } }

/* ---- Ladder ---- */
.framed { border: 32px solid; padding: var(--s2); background: linear-gradient(rgb(26 22 18 / .92), rgb(11 32 53 / .96)); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .5); }
.share { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); }
.share b { font: 500 2.25rem/1 var(--display); text-shadow: 0 0 1rem currentColor; }
.share span { font-variant-caps: normal; letter-spacing: .12em; color: var(--muted); }
.share .h b, .h-c { color: var(--human); }
.share .k b, .k-c { color: var(--akkan); }
.share .k { text-align: right; }
meter { width: 100%; height: .75rem; display: block; appearance: none; background: var(--akkan); border: 0; box-shadow: 0 0 1rem rgb(var(--ember) / .3); }
meter::-webkit-meter-bar { background: var(--akkan); border: 0; border-radius: 0; height: .75rem; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--human); box-shadow: 3px 0 0 var(--hi), 3px 0 .75rem var(--hi); }
meter::-moz-meter-bar { background: var(--human); }
.versus thead th { text-align: center; }
.versus thead th.race { font: 500 1.75rem/1 var(--display); letter-spacing: .02em; font-variant-caps: normal; text-shadow: 0 0 .8rem currentColor; }
.versus .hh, .versus td.h { text-align: right; }
.versus th[scope="row"] { width: 4rem; text-align: center; font: 500 1.875rem/1 var(--display); color: var(--muted); border-inline: 1px solid var(--line); font-variant-numeric: lining-nums; }
.versus tr:nth-child(-n+3) th[scope="row"] { color: var(--gold); font-size: 2.5rem; text-shadow: 0 0 .9rem rgb(233 185 122 / .5); }
.versus tr:first-child th[scope="row"] { color: var(--war); text-shadow: var(--glow); }
.versus td b { font: 600 1.3125rem/1.1 var(--display); display: block; color: var(--hi); }
.versus tr:nth-child(-n+3) td b { font-size: 1.625rem; }
.versus td small { color: var(--muted); font-size: .875rem; }
.versus td small .f { display: none; }
.versus td.num { width: 7rem; }
.versus td.num.h { text-align: left; }
.versus tbody tr { transition: background-color .2s; }
.versus tbody tr:hover { background: rgb(208 138 85 / .08); }
.ladder-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); margin-top: var(--s3); color: var(--muted); font-size: .9375rem; }
@media (max-width: 47.99rem) {
  .framed { border-width: 20px; border-image-width: 20px; padding: 0; }
  .versus th, .versus td { padding: var(--s1) var(--s0); }
  .versus td b, .versus tr:nth-child(-n+3) td b { font-size: 1.0625rem; }
  .versus td small .g { display: none; }
  .versus .num { display: none; }
  .versus td small .f { display: inline; }
  .versus td small { font-size: .75rem; }
  .versus td.num { width: auto; font-size: .875rem; }
  .versus th[scope="row"], .versus tr:nth-child(-n+3) th[scope="row"] { width: 2rem; font-size: 1.5rem; }
  .versus thead th.race { font-size: 1.25rem; }
  .versus thead tr + tr th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
  .share { grid-template-columns: 1fr 1fr; } meter { grid-area: 2 / 1 / 2 / 3; }
}

.purse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.coin { display: block; width: 4.5rem; height: 4.5rem; flex: none; background: url(/static/icon-points-v7.b865afadc9a45769.webp) center / contain no-repeat; }
.purse p { margin: 0; }
.purse .pts { font: 500 3rem/1 var(--display); color: var(--hi); text-shadow: var(--glow); }
.pts::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .25em; background: url(/static/icon-points-v7.b865afadc9a45769.webp) center / contain no-repeat; vertical-align: -.06em; }
.purse .pts::before { display: none; }
.wares { display: grid; gap: var(--s5); margin: var(--s6) 0; }
@media (min-width: 52rem) { .wares { grid-template-columns: 1fr 1fr; } }
.ware { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-rows: 12rem auto; border: 32px solid; background: var(--surface); transition: box-shadow .3s, translate .3s; }
.ware > picture { grid-row: 1; position: relative; overflow: clip; margin: calc(-1 * var(--s1)) calc(-1 * var(--s1)) 0; }
.ware > picture img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.75); transition: scale .8s, filter .8s; }
.ware > picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--surface), transparent 60%); }
.ware:hover { box-shadow: 0 0 2.5rem rgb(var(--ember) / .25); translate: 0 -4px; }
.ware:hover > picture img { scale: 1.06; filter: saturate(1) brightness(.9); }
.ware-in { padding: var(--s2) var(--s3) var(--s3); display: grid; gap: var(--s1) var(--s4); grid-template-columns: 1fr auto; align-items: end; }
.ware h2 { font-size: 2.25rem; margin: 0; text-shadow: none; }
.ware p { margin: 0; }
.ware .price { text-align: right; grid-row: 1 / 3; grid-column: 2; }
.ware .price .pts { font: 500 2.25rem/1 var(--display); color: var(--hi); }
.ware .price .aud { display: block; color: var(--muted); font-size: .9375rem; margin-top: var(--s0); }
@media (max-width: 47.99rem) { .ware-in { grid-template-columns: 1fr; } .ware .price { grid-area: auto; text-align: left; } }
.ware .act { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.packs fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.packs legend { font-size: 1.25rem; margin-bottom: var(--s3); }
.pack { position: relative; display: grid; justify-items: center; gap: var(--s1); margin: 0; padding: var(--s5) var(--s3) var(--s4); text-align: center; font-weight: 400; cursor: pointer; border: 32px solid; background: radial-gradient(80% 60% at 50% 30%, rgb(208 138 85 / .14), transparent), var(--surface); transition: box-shadow .3s, background-color .3s; }
.pack:hover { box-shadow: 0 0 2rem rgb(var(--ember) / .2); }
.packgrid .pack { cursor: default; }
.pack:has(:checked) { background: radial-gradient(80% 60% at 50% 30%, rgb(233 185 122 / .3), transparent), var(--raise); box-shadow: 0 0 0 2px var(--gold), 0 0 3rem rgb(var(--ember) / .4); }
.pack input { position: absolute; top: var(--s1); left: var(--s1); }
.stack { display: grid; width: 8rem; height: 6rem; align-items: center; justify-items: center; }
.stack i { grid-area: 1 / 1; width: 4.5rem; height: 4.5rem; background: url(/static/icon-points-v7.b865afadc9a45769.webp) center / contain no-repeat; }
.stack i:nth-child(2) { translate: -.7rem -.2rem; } .stack i:nth-child(3) { translate: .7rem .1rem; } .stack i:nth-child(4) { translate: -1.4rem .35rem; } .stack i:nth-child(5) { translate: 1.4rem .5rem; }
.pack .pts { font: 500 2.5rem/1 var(--display); color: var(--hi); }
.pack .pts::before { display: none; }
.pack .aud { font: 600 1.375rem/1 var(--display); color: var(--gold); }
.terms { margin: var(--s6) 0 0; padding: var(--s4) 0 0 var(--s4); border-top: 1px solid rgb(208 138 85 / .3); color: var(--muted); font-size: .9375rem; max-width: 50rem; }
.terms li:first-child { color: var(--fg); }
.pay { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.cols { display: grid; gap: var(--s5); margin: var(--s6) 0; }
.cols > * { min-width: 0; }
@media (min-width: 60rem) { .cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.panel { border: 32px solid; background: var(--surface); padding: var(--s2) var(--s3); }
.panel h2 { font-size: 2.5rem; text-shadow: none; }
dl.ledger { margin: var(--s3) 0 0; }
dl.ledger div { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0; border-top: 1px solid var(--line); }
dl.ledger dt { color: var(--muted); }
dl.ledger .total { border-top: 1px solid var(--gold); }
dl.ledger .total dd { font: 500 1.75rem/1 var(--display); color: var(--hi); }
.consent { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 400; margin: var(--s4) 0; padding: var(--s3); border: 1px solid var(--line-2); background: rgb(0 0 0 / .35); cursor: pointer; }
.consent:has(:checked) { border-color: var(--gold); }

/* ---- Sign-in ---- */
.gate { min-height: clamp(44rem, 100svh, 54rem); display: grid; grid-template-columns: var(--gut) minmax(0, 1fr) var(--gut); align-items: center; }
.gate > :not(.layers) { grid-column: 2; }
.gate .panel { max-width: 30rem; padding: var(--s3) var(--s4) var(--s4); margin: 9rem 0 6rem; background: rgb(11 32 53 / .9); box-shadow: 0 2rem 5rem rgb(0 0 0 / .7); }
.gate h1 { font-size: 3.5rem; text-shadow: var(--glow); }
.gate form.signin button { width: 100%; margin-top: var(--s3); }
.after { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.after a { display: inline-flex; align-items: center; min-height: 2.5rem; }

/* ==== Pages without a comp: the same language, usable first ==== */
.status { border-left: 2px solid var(--ok); padding: var(--s2) var(--s3); background: rgb(0 0 0 / .45); }
.small { font-size: .875rem; }
code { font-size: .875em; overflow-wrap: anywhere; }
.when { white-space: nowrap; }
.state { display: inline-block; padding: 0 var(--s1); border: 1px solid var(--edge); font-size: .8125rem; line-height: 1.6; }
td.plus { color: var(--ok); }
td.minus { color: var(--bad); }
.narrow { max-width: 36rem; }
.content { margin: var(--s6) 0; }
.content > h2, .cols h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); text-shadow: none; }
.profile { margin: 0; }
.profile dt { color: var(--muted); margin-top: var(--s2); }
.profile dd { font-size: 1.125rem; }
.links { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.links a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.purse .small { margin-left: var(--s1); }
.store-hero .actions { margin-top: var(--s3); }
.wares h3 { font-size: 2.25rem; margin: 0; text-shadow: none; }
.shopgroup { margin: var(--s7) 0 0; }
.shopgroup > h2 { text-align: center; font-size: clamp(2rem, 4vw, 3rem); }
.pick { display: grid; gap: var(--s1); margin-top: var(--s2); }
.pick label { margin: var(--s1) 0 0; font-size: .9375rem; }
.pick p { margin: var(--s2) 0 0; }
.pick .pay { margin-top: var(--s2); }
.ware .act .pick, .ware-in .pick { grid-column: 1 / -1; }
.money { font: 500 2.25rem/1 var(--display); color: var(--hi); }
.packs.band { padding: var(--s6) 0 0; }
.packgrid { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pack.off { cursor: not-allowed; opacity: .6; }
.pack .over-cap { font-size: .875rem; color: var(--muted); }
.track { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.track li { position: relative; padding: 0 0 var(--s4) var(--s5); color: var(--muted); }
.track li::before { content: ""; position: absolute; left: .3rem; top: .45rem; width: .7rem; height: .7rem; border: 1px solid var(--edge); border-radius: 50%; background: var(--bg); }
.track li:not(:last-child)::after { content: ""; position: absolute; left: .62rem; top: 1.3rem; bottom: .1rem; border-left: 1px solid var(--line-2); }
.track b { display: block; font: 500 1.5rem/1.3 var(--display); color: var(--hi); }
.track .done::before { background: var(--ok); border-color: var(--ok); }
.track [aria-current="step"]::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 .6rem var(--gold); }
.track [aria-current="step"] b { color: var(--gold); }
.spec { margin: 0; display: grid; grid-template-columns: max-content 1fr; }
.spec dt, .spec dd { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.spec dt { padding-right: var(--s5); }
.hash { margin: var(--s4) 0; padding: var(--s3) var(--s4); background: rgb(0 0 0 / .4); border: 1px solid var(--line-2); }
.hash figcaption { color: var(--muted); font-size: .9375rem; margin-bottom: var(--s1); }
.hash code { display: block; font: 500 1rem/1.5 ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--fg); }
.cmd { display: block; margin-top: var(--s2); padding: var(--s2) var(--s3); background: rgb(0 0 0 / .45); border-left: 2px solid var(--bronze); font-family: ui-monospace, Consolas, monospace; font-size: .875rem; }
.soon { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 var(--s4); border: 1px dashed var(--edge); color: var(--muted); font-variant-caps: normal; letter-spacing: .12em; font-size: 1.125rem; }
.codes { list-style: none; margin: var(--s3) 0; padding: 0; columns: 2 10rem; }
.codes li { padding: var(--s0) 0; }
.codes code { font: 500 1.0625rem ui-monospace, Consolas, monospace; }
.split { display: grid; gap: var(--s3) var(--s6); margin: var(--s6) 0; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.split h2 { font-size: clamp(2rem, 4vw, 3rem); }
.ranks-wrap { margin: var(--s6) 0; }
.ranks-wrap .framed { max-width: 64rem; margin-inline: auto; }
@media (max-width: 47.99rem) { .hide-sm { display: none; } .paths > li { grid-template-columns: 6rem 1fr; } }
.cols .panel + section { margin-top: var(--s5); }
.gauges { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.gauges .down::before { content: ""; display: inline-block; width: .35em; height: .35em; margin-right: .2em; border-radius: 50%; background: var(--bad); vertical-align: .15em; }
@media (max-width: 47.99rem) { .gauges { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; } }
.store-hero .hero-cap, .gate .hero-cap { bottom: var(--s3); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.steps li { counter-increment: r; display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line-2); }
.steps li::before { content: counter(r, upper-roman); font: 500 2.75rem/1 var(--display); color: var(--gold); grid-row: span 2; }
.steps h3 { margin: 0 0 var(--s1); font-size: 1.75rem; text-shadow: none; }
.steps p { margin: 0; color: var(--muted); }

/* ==== Staff: dense and utilitarian, same tokens ==== */
body.staff { --gut: 1rem; font-size: .9375rem; line-height: 1.45; background: var(--bg); }
body.staff::before { content: "Staff console \2014  every action is audited"; display: block; padding: .3rem var(--gut); background: var(--staff-bg); color: var(--staff-fg); font: 600 .8125rem/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.staff header.site { background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
.staff .brand a, .staff nav a { min-height: 2.5rem; }
.staff nav a { font-size: 1rem; }
.staff nav a::after { bottom: .3rem; }
.staff .wm { font-size: 1.125rem; }
.staff .mark { width: 1.5rem; height: 1.5rem; filter: none; }
.staff h1, .staff h2, .staff h3 { text-shadow: none; color: var(--fg); }
.staff main > h1:first-child { margin: var(--s4) 0 var(--s2); font-size: 2rem; }
.staff h2 { font-size: 1.375rem; margin: var(--s4) 0 var(--s1); }
.staff .panel, .staff .framed { border: 1px solid var(--line-2); border-image: none; box-shadow: none; padding: var(--s3); background: var(--surface); }
.staff .cols { margin: var(--s3) 0; }
.staff button, .staff .button { min-height: 2rem; font-size: 1rem; padding: 0 var(--s2); box-shadow: none; }
.staff input:not([type=radio], [type=checkbox], [type=hidden]), .staff select { max-width: 28rem; min-height: 2.5rem; box-shadow: none; }
.staff th, .staff td { padding: .2rem var(--s1); font-size: .875rem; white-space: nowrap; }
.staff td code { display: inline-block; max-width: 24rem; white-space: normal; overflow-wrap: anywhere; }
.staff tbody tr:nth-child(even) { background: var(--surface); }
.staff tbody tr:hover { background: var(--raise); }
.staff main { padding-bottom: var(--s5); }
.staff footer.site { padding-block: var(--s2); }
.staff dl:not(.facts) { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--s3); margin: 0 0 var(--s3); }
.staff dl:not(.facts) dt, .staff dl:not(.facts) dd { margin: 0; padding: .15rem 0; overflow-wrap: anywhere; }
.staff .facts { display: flex; flex-flow: wrap; width: fit-content; margin: 0 0 var(--s3); border: 1px solid var(--line); }
.staff .facts div { padding: var(--s1) var(--s3); border-right: 1px solid var(--line); }
.staff .facts div:last-child { border-right: 0; }
.staff .facts dt { color: var(--muted); font-size: .875rem; }
.staff .facts dd { font-weight: 600; font-size: 1.25rem; }
form.filter { display: flex; flex-flow: wrap; gap: var(--s2) var(--s3); align-items: end; margin: var(--s2) 0 var(--s3); }
form.filter div { display: grid; }
form.filter label { margin: 0 0 var(--s0); }
form.filter p { margin: 0; }
.staff .status, .staff .error { margin: var(--s2) 0; }
@media (max-width: 30rem) { body.staff::before { font-size: .6875rem; letter-spacing: .06em; } }

caption { text-align: left; padding: 0 0 var(--s2); color: var(--muted); }
.staff td { vertical-align: top; }
.framed caption { padding: var(--s1) var(--s2); }

/* Last, so no later `font` shorthand resets it. */
.num, table, .pts, .aud, .money, .realm, dl.ledger dd, .gauges dd, .share b, body.staff { font-variant-numeric: lining-nums tabular-nums; }


/* Shared navigation stays in normal flow and remains visible on every page. */
html { scroll-padding-top: 10rem; }
h2[id] { scroll-margin-top: 2rem; }
body { background: var(--bg); }
body > header.site { --nav-muted: #d1e3ea; --nav-ok: #b6e9c5; --nav-bad: #ffd0c7; container: site-navigation / inline-size; position: sticky; top: 1rem; z-index: 30; margin: 1rem 1rem -8rem; padding: 0 1.25rem; background: #102d43; border: 1px solid rgb(216 242 245 / .48); border-radius: 12px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .23), inset 0 -1px 0 rgb(194 225 227 / .08), 0 16px 40px rgb(3 17 30 / .3); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body > header.site { background: linear-gradient(120deg, rgb(23 57 75 / .36), rgb(8 26 44 / .30)); -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(45%); backdrop-filter: blur(18px) saturate(150%) brightness(45%); }
}
.live { display: flex; justify-content: space-between; align-items: center; min-height: 1.875rem; gap: 1rem; border-bottom: 1px solid rgb(255 255 255 / .08); font-size: .6875rem; }
.live-title { text-transform: uppercase; color: var(--nav-muted); letter-spacing: .16em; }
.realm { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; color: var(--nav-muted); }
.realm div { display: flex; gap: .35rem; align-items: baseline; }
.realm dd { color: var(--fg); }
.up { color: var(--ok); }
.down { color: var(--bad); }
header.site .up { color: var(--nav-ok); }
header.site .down { color: var(--nav-bad); }
.realm .up::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem; background: var(--ok); border-radius: 50%; }
.nav-bar { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.desktop-nav { flex: 1; min-width: 0; }
.desktop-nav nav, .desktop-nav ul { width: 100%; }
.desktop-nav .nav-account { margin-left: auto; }
.desktop-nav .nav-account a { color: var(--nav-muted); }
.desktop-nav .nav-account a:hover, .desktop-nav .nav-account a[aria-current=page] { color: var(--gold); }
.brand { margin: 0; flex-shrink: 0; }
.brand a { display: inline-flex; gap: .625rem; align-items: center; min-height: 3rem; text-decoration: none; }
.mark { width: 2rem; height: 2rem; color: var(--gold); }
.wm { font: 600 1.4rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--hi); }
.wm i { font-weight: 500; color: var(--gold); text-transform: none; margin-inline: .08em; }
nav { display: flex; align-items: center; gap: 1rem; min-width: 0; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.15rem; align-items: center; }
nav a { display: flex; align-items: center; min-height: 3rem; color: var(--fg); text-decoration: none; font: 600 .75rem/1.3 var(--text); letter-spacing: .025em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color .2s, background-color .2s, border-color .2s; }
nav a:hover, nav a[aria-current] { color: var(--gold); border-bottom-color: var(--gold); }
nav .nav-play { order: 5; }
nav .nav-play a { border: 1px solid #94d6ca; border-radius: 6px; padding: 0 1.25rem; background-color: var(--war); background-image: linear-gradient(rgb(255 255 255 / .20), rgb(255 255 255 / 0)); color: var(--on-war); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 4px 16px rgb(139 209 196 / .12); }
nav .nav-play a:hover { background-color: #b6eddf; box-shadow: 0 0 22px rgb(139 209 196 / .24); }
.signout { margin: 0; }
.signout button { font-size: .6875rem; min-height: 2.5rem; padding: 0 .75rem; }
.mobile-menu { display: none; }
.mobile-menu summary { display: flex; align-items: center; justify-content: center; gap: .625rem; list-style: none; min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgb(135 168 184 / .55); border-radius: 6px; background: rgb(255 255 255 / .05); color: var(--fg); cursor: pointer; font-size: .875rem; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.menu-lines { width: 1rem; height: .65rem; border-block: 1px solid currentColor; }
.mobile-menu[open] .menu-lines { border-bottom: 0; transform: rotate(-45deg); height: 0; }
@container site-navigation (max-width: 79.99rem) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu nav { position: absolute; top: calc(100% + .5rem); left: -1px; right: -1px; border: 1px solid rgb(194 225 227 / .3); border-radius: 12px; padding: 1rem var(--gut) 1.5rem; background: linear-gradient(140deg, #18394b, #081a2c); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 20px 40px rgb(0 0 0 / .4); display: block; max-height: calc(100svh - 7.5rem); overflow-y: auto; }
  .mobile-menu nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
  .mobile-menu nav a { min-height: 2.75rem; padding-inline: .75rem; border: 1px solid var(--line-2); }
  .mobile-menu .signout { margin-top: 1rem; }
  .nav-bar { min-height: 4rem; }
}
@media (max-width: 35rem) { .live-title, .realm div:last-child:not(:first-child) { display: none; } .live { justify-content: center; } .wm { font-size: 1.2rem; } .mark { width: 1.5rem; } }

main { flex: 1; width: 100%; display: grid; grid-template-columns: var(--gut) minmax(0, 1fr) var(--gut); align-content: start; }
main > * { grid-column: 2; min-width: 0; }
main > .bleed { grid-column: 1 / -1; }
main:focus { outline: none; }
.skip { z-index: 50; }
h1, h2, h3 { text-shadow: none; }
.kicker { font-size: .75rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .2em; }
.kicker::before { width: 1.5rem; }
.kicker::after { display: none; }
.lede { font-size: 1.125rem; line-height: 1.65; }
.button, button { border-radius: 6px; letter-spacing: .025em; font-variant-caps: normal; text-transform: none; box-shadow: none; }
.war { background-color: var(--war); background-image: linear-gradient(rgb(255 255 255 / .20), rgb(255 255 255 / 0)); border-color: #b4e8db; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 4px 24px rgb(var(--ember) / .2); }
.war:hover { box-shadow: 0 8px 30px rgb(var(--ember) / .3); }
.button.big { min-height: 3.5rem; padding: 0 1.75rem; font-size: .9375rem; }
.button.secondary { border-color: var(--edge); background: rgb(11 32 53 / .8); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.button.secondary:hover { border-color: var(--gold); background: var(--surface); }

/* Original artwork supplies depth; overlays keep text readable. */
.cine { position: relative; isolation: isolate; overflow: clip; background: #102d43; }
.layers, .layers > * { position: absolute; inset: 0; }
.layers { z-index: -1; pointer-events: none; }
.l-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.l-scrim { background: linear-gradient(90deg, rgb(11 32 53 / .95), rgb(11 32 53 / .78) 28%, rgb(11 32 53 / .08) 72%), linear-gradient(0deg, #102d43, transparent 35%); }
.l-fog { background: radial-gradient(ellipse at 60% 80%, rgb(177 202 210 / .1), transparent 60%); }
.l-embers::before, .l-embers::after { content: ""; position: absolute; bottom: 18%; right: 14%; width: 2px; height: 2px; border-radius: 50%; background: #e9b97a; box-shadow: -60px -100px #d08a55, 90px -200px #e9b97a, 160px -55px #d08a55, -150px -15px #e9b97a; opacity: .6; }
.l-embers::after { right: 26%; bottom: 6%; opacity: .3; }
.hero { min-height: min(64rem, 100svh); padding: 10rem var(--gut) 7.5rem; display: flex; align-items: center; border-bottom: 2px solid var(--bronze); }
.hero-in { width: min(100%, 37rem); margin-left: auto; text-align: center; }
.hero .kicker, .hero .actions { justify-content: center; }
.hero .l-sky img { object-position: 0% 50%; }
.hero .l-scrim { background: linear-gradient(90deg, transparent 15%, rgb(11 32 53 / .25) 45%, rgb(11 32 53 / .86) 72%), linear-gradient(0deg, rgb(11 32 53 / .5), transparent 45%); }
.hero h1 img { width: min(100%, 34rem); margin-inline: auto; height: auto; filter: drop-shadow(0 6px 16px rgb(8 26 44 / .7)); }
.hero-lede { margin-inline: auto; }
.brand-logo { width: 12.5rem; height: auto; }
.footer-logo { width: 16rem; height: auto; }
.hero h1 { font: 600 clamp(4rem, 6.8vw, 6.25rem)/.9 var(--display); letter-spacing: -.035em; color: var(--hi); margin: 1.5rem 0; }
.hero h1 i { font-weight: 400; color: var(--gold); font-size: .7em; }
.hero-line { font: 500 clamp(2rem, 3vw, 3rem)/1.1 var(--display); margin-bottom: 1.25rem; color: var(--hi); }
.hero-lede { max-width: 29rem; font-size: 1rem; line-height: 1.7; color: var(--fg); }
.hero .actions { gap: .75rem; margin-top: 1.75rem; }
.hero-platform { margin: 1rem 0 0; color: var(--muted); font-size: .75rem; letter-spacing: .025em; }
.hero-platform span { margin-inline: .4rem; }
.hero-art-note { position: absolute; right: var(--gut); bottom: 4.5rem; margin: 0; font-size: .6875rem; color: var(--muted); padding: .25rem .5rem; background: rgb(11 32 53 / .9); }
.scroll-cue { position: absolute; bottom: 1.5rem; right: var(--gut); min-height: 2.5rem; display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--fg); text-decoration: none; }
.scroll-cue span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--edge); border-radius: 50%; }
.still { position: absolute; bottom: 1.5rem; left: var(--gut); display: inline-flex; align-items: center; gap: .625rem; margin: 0; min-height: 2.5rem; padding: 0 .75rem; font-size: .6875rem; font-weight: 400; color: var(--muted); border: 1px solid var(--line-2); background: #102d43; cursor: pointer; }
.still input { width: 1.5rem; height: 1.5rem; }
.cine:has(.still input:checked) *, .cine:has(.still input:checked) *::before, .cine:has(.still input:checked) *::after { animation-play-state: paused !important; }
.art-note { position: absolute; bottom: 1rem; right: var(--gut); font-size: .6875rem; color: var(--muted); padding: .25rem .5rem; background: rgb(11 32 53 / .9); margin: 0; }
.liveband { position: relative; padding: 1.75rem var(--gut); background: radial-gradient(ellipse at 50% -30%, rgb(139 209 196 / .17), transparent 70%), linear-gradient(110deg, #0d3549, #102d43 60%, #103d48); border-block: 1px solid rgb(194 225 227 / .28); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.liveband .center { margin: 0; }
.gauges { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem; margin: 0 0 .5rem; }
.gauges div { display: flex; flex-direction: column-reverse; align-items: center; gap: .25rem; border-left: 1px solid var(--line-2); }
.gauges div:first-child { border: 0; }
.gauges dd { font: 500 2rem/1.2 var(--display); color: var(--hi); }
.gauges dt { font-size: .625rem; color: var(--muted); }
.gauges .up { color: var(--ok); }
.gauges .down { color: var(--bad); }

/* Every section is visible without scroll scripts or view-timeline support. */
.torn { position: relative; isolation: isolate; padding: 6rem var(--gut); background: var(--bg); }
.night { background: radial-gradient(ellipse at 50% 0, #153a50, var(--bg) 75%); }
.world { background: radial-gradient(ellipse at 10% 0, #19495b, transparent 65%), linear-gradient(160deg, #102d43, #0b2035); border-block: 1px solid rgb(135 168 184 / .2); }
.world .band-head p:not(.kicker), .world .thumb { color: var(--fg); }
.bronze { background: radial-gradient(ellipse at 5% 20%, rgb(48 127 145 / .18), transparent 50%), radial-gradient(ellipse at 95% 80%, rgb(70 111 147 / .16), transparent 55%), var(--bg); }
.band-head { margin-bottom: 2.5rem; }
.band-head h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
.band-head p:not(.kicker) { max-width: 38rem; color: var(--muted); line-height: 1.7; }
.center.band-head p:not(.kicker) { margin-inline: auto; }
.band-head.center .kicker { justify-content: center; }
.doors { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 80rem; margin-inline: auto; }
.door { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; background: radial-gradient(ellipse at 85% 5%, rgb(83 162 194 / .14), transparent 70%), #0c293e; border: 1px solid rgb(157 206 239 / .28); border-radius: 14px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 24px 60px rgb(3 17 30 / .2); overflow: clip; }
.door > picture { position: relative; display: block; min-height: 30rem; align-self: stretch; overflow: clip; mask-image: linear-gradient(90deg, #000 65%, transparent); }
.door.akkan { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); background: radial-gradient(ellipse at 15% 5%, rgb(139 209 196 / .12), transparent 70%), #102d3b; border-color: rgb(230 185 155 / .25); }
.door.akkan > picture { grid-column: 2; grid-row: 1; mask-image: linear-gradient(270deg, #000 75%, transparent); }
.door.akkan .door-content { grid-column: 1; grid-row: 1; }
.door > picture img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 0%; transition: transform .6s ease; }
.door:hover > picture img { transform: scale(1.025); }
.door-content { position: relative; min-width: 0; padding: clamp(1.5rem, 4vw, 4rem); }
.faction-number { font-size: .625rem; color: var(--gold); letter-spacing: .18em; }
.door h3 { font-size: clamp(3rem, 5vw, 4.5rem); margin: .5rem 0; }
.door .sc { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.door .flavour { margin: 1rem 0 1.5rem; color: var(--fg); line-height: 1.7; }
.class-list { border-top: 1px solid var(--line-2); }
.class-list summary { min-height: 3rem; padding: .75rem 0; color: var(--gold); cursor: pointer; font-size: .875rem; }
.paths { padding: .5rem 0 1rem; margin: 0; list-style: none; display: grid; gap: .75rem; }
.paths > li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.paths > li > span { color: var(--gold); font-size: .75rem; font-weight: 600; }
.paths ul { list-style: none; margin: 0; padding: 0; }
.paths ul li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .5rem; }
.paths b { font: 600 1.25rem/1.35 var(--display); }
.paths small { color: var(--muted); font-size: .625rem; text-transform: uppercase; }
.door .cap { font-size: .6875rem; margin-top: .75rem; }
.siege { min-height: 44rem; display: flex; align-items: center; padding: 7rem var(--gut); border-block: 1px solid rgb(194 225 227 / .2); }
.siege-art, .closing-art { position: absolute; inset: 0; z-index: -2; }
.siege-art img, .closing-art img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.siege::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 32 53 / .96), rgb(11 32 53 / .82) 30%, rgb(11 32 53 / .05) 85%), linear-gradient(0deg, #102d43, transparent 30%); }
.siege-copy { max-width: 29rem; }
.siege h2 { font-size: clamp(3rem, 4.5vw, 4.5rem); }
.siege-copy p:not(.kicker) { font-size: 1rem; line-height: 1.8; }
.siege-features { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 1.5rem 0; gap: .5rem; }
.siege-features li { font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; border: 1px solid rgb(194 225 227 / .35); border-radius: 4px; padding: .5rem .75rem; background: rgb(16 45 67 / .8); }
.siege .link { font-size: .875rem; }
.tabs { min-width: 0; border: 0; margin: 0; padding: 0; }
.tab-in { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--war); grid-row: 2; }
.tab-p { margin: 0; }
.world .tab-p { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); gap: 0; background: linear-gradient(145deg, #193e52, #102d43); border: 1px solid rgb(194 225 227 / .38); border-radius: 12px; overflow: clip; box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 24px 60px rgb(3 17 30 / .4); }
.world .tab-p picture { display: flex; align-items: center; justify-content: center; background: #081a2c; min-height: 24rem; }
.world .tab-p img { width: 100%; height: auto; max-height: 30rem; object-fit: contain; }
.world .tab-p figcaption { align-self: center; padding: 2rem; color: var(--fg); font-size: .9375rem; line-height: 1.7; }
.world .tab-p figcaption b { display: block; font: 500 2rem/1.2 var(--display); color: var(--hi); margin-bottom: 1rem; }
.world .tab-p figcaption .muted { display: block; margin-top: 1rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; }
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.thumb { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; gap: .5rem; margin: 0; cursor: pointer; font-size: .75rem; font-weight: 500; color: var(--muted); }
.thumb picture { grid-column: 1/-1; grid-row: 1; overflow: clip; border: 1px solid var(--line-2); border-radius: 6px; }
.thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .65; transition: opacity .2s; }
.thumb:hover img { opacity: 1; }
.thumb:has(#pl-gate:checked), .thumb:has(#pl-lamp:checked), .thumb:has(#pl-harbour:checked), .thumb:has(#pl-tower:checked) { color: var(--gold); }
.thumb:has(#pl-gate:checked) picture, .thumb:has(#pl-lamp:checked) picture, .thumb:has(#pl-harbour:checked) picture, .thumb:has(#pl-tower:checked) picture { border-color: var(--gold); }
.thumb:has(#pl-gate:checked) img, .thumb:has(#pl-lamp:checked) img, .thumb:has(#pl-harbour:checked) img, .thumb:has(#pl-tower:checked) img { opacity: 1; }
.thumb:has(#pl-gate:focus-visible), .thumb:has(#pl-lamp:focus-visible), .thumb:has(#pl-harbour:focus-visible), .thumb:has(#pl-tower:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.tabs:has(#pl-gate:not(:checked)) .p-gate, .tabs:has(#pl-lamp:not(:checked)) .p-lamp, .tabs:has(#pl-harbour:not(:checked)) .p-harbour, .tabs:has(#pl-tower:not(:checked)) .p-tower { display: none; }
.reborn { background: var(--bg-2); }
.reborn-scene { position: relative; isolation: isolate; min-height: 43rem; display: flex; align-items: center; padding: 6rem var(--gut); overflow: clip; }
.reborn-art { position: absolute; inset: 0; z-index: -2; }
.reborn-art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.reborn-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b2035 0%, rgb(11 32 53 / .96) 22%, rgb(11 32 53 / .86) 40%, transparent 68%), linear-gradient(0deg, #081a2c, transparent 25%); }
.reborn-copy { width: min(100%, 32rem); }
.reborn-copy h2 { font: 600 clamp(3.5rem, 5vw, 5rem)/1.02 var(--display); letter-spacing: -.025em; color: var(--hi); margin: 1.25rem 0 1.75rem; }
.reborn-copy p:not(.kicker) { color: var(--fg); line-height: 1.75; }
.reborn-copy p.reborn-lede { font-size: 1.25rem; color: var(--gold); }
.reborn-copy .button { margin-top: 1rem; }
.reborn-foundations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 2.5rem var(--gut) 3rem; background: radial-gradient(ellipse at 50% 0, rgb(139 209 196 / .1), transparent 80%), #081a2c; border-top: 1px solid rgb(194 225 227 / .28); }
.reborn-foundations dt { font-size: .8125rem; color: var(--gold); }
.reborn-foundations dd { margin: .625rem 0 0; font-size: .8125rem; line-height: 1.65; color: var(--muted); }
.ladder .band-head { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; align-items: end; }
.ladder .band-head .kicker { grid-column: 1/-1; justify-content: flex-start; }
.ladder .band-head h2 { margin: 0; }
.ladder .band-head p:not(.kicker) { margin: 0; text-align: left; }
.ladder .band-head.center { text-align: left; }
.framed, .panel { border: 1px solid var(--line-2); border-image: none; background: var(--surface); padding: 1.5rem; box-shadow: none; border-radius: 8px; }
.ladder .framed, .ranks-wrap .framed { max-width: none; }
.closing { min-height: 35rem; padding: 6rem var(--gut); display: flex; align-items: center; justify-content: center; text-align: center; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgb(11 32 53 / .88) 15%, rgb(11 32 53 / .5) 75%), linear-gradient(0deg, #081a2c, transparent 35%); }
.closing-copy { max-width: 45rem; }
.closing h2 { font-size: clamp(3rem, 5vw, 4.5rem); }
.closing .kicker, .closing .actions { justify-content: center; }
.closing .actions { margin-top: 2rem; }
.closing .actions a { min-width: 12rem; }

/* Account, shop and download pages inherit the same scene and calmer controls. */
.store-hero { padding: 11rem var(--gut) 4rem; min-height: 28rem; }
.store-hero h1 { font-size: clamp(3rem, 5vw, 4.5rem); margin-bottom: 1rem; }
.store-hero .lede { max-width: 36rem; }
.store-hero .l-scrim { background: linear-gradient(90deg, rgb(11 32 53 / .96), rgb(11 32 53 / .84) 45%, rgb(11 32 53 / .3)), linear-gradient(0deg, #102d43, transparent); }
.store-hero .still { position: static; width: fit-content; margin-top: 1.5rem; }
.gate { min-height: 42rem; display: grid; grid-template-columns: var(--gut) minmax(0, 1fr) var(--gut); align-items: center; }
.gate > :not(.layers) { grid-column: 2; }
.gate .panel { max-width: 30rem; width: 100%; padding: 2rem; margin: 11rem 0 3rem; background: #102d43; box-shadow: 0 16px 50px rgb(0 0 0 / .2); }
.gate h1 { font-size: 3rem; }
.gate form.signin button { width: 100%; margin-top: 1.25rem; }
.gate .still { position: static; width: fit-content; margin-bottom: 2rem; }
.ware { border: 1px solid var(--line-2); border-image: none; border-radius: 8px; grid-template-rows: 6.5rem auto; }
.ware > picture { display: none; }
.ware::before { content: "Quartermaster supplies"; grid-row: 1; display: flex; align-items: center; padding: 1rem 8rem 1rem 1.5rem; color: var(--gold); font: 600 .6875rem/1.5 var(--text); letter-spacing: .12em; text-transform: uppercase; background: url(/static/icon-supplies-v7.e3498498f5d475d2.webp) right 1rem center / 6rem no-repeat, radial-gradient(ellipse at 90% 0, rgb(139 209 196 / .17), transparent 70%), #102d43; border-bottom: 1px solid var(--line-2); }
.ware-in { padding: 1.5rem; }
.ware:hover { translate: none; border-color: var(--bronze); box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.pack { border: 1px solid var(--edge); border-image: none; border-radius: 8px; padding: 2rem 1rem; }
.pack:has(:checked) { box-shadow: 0 0 0 2px var(--gold); }
.shopgroup > h2 { text-align: left; }
.cols .panel + .panel { margin-top: 1.5rem; }
.spec dt { color: var(--gold); }
footer.site { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: 3.5rem var(--gut); background: radial-gradient(ellipse at 10% 0, rgb(139 209 196 / .08), transparent 65%), #081a2c; border-top: 1px solid rgb(194 225 227 / .25); color: var(--muted); }
footer.site p { margin: 0; }
footer.site ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 1.5rem; }
footer.site a { display: flex; align-items: center; min-height: 2.5rem; font-size: .8125rem; }
footer.site p:last-child { grid-column: 1/-1; font-size: .6875rem; line-height: 1.7; max-width: 60rem; }
.staff .nav-bar { min-height: 3.5rem; }
.staff .panel, .staff .framed { border-radius: 6px; }
.staff .desktop-nav ul { gap: 1rem; }
.staff footer.site { display: block; }

@media (max-width: 47.99rem) {
  .hero { min-height: 48rem; padding: 19rem var(--gut) 6.5rem; align-items: flex-end; }
  .hero .l-sky { height: 30rem; }
  .hero .l-sky img { object-position: 15% 50%; }
  .hero .l-scrim { background: linear-gradient(0deg, #102d43 0 40%, rgb(16 45 67 / .82) 58%, transparent 88%); }
  .hero h1 { font-size: clamp(3.5rem, 13vw, 5rem); margin-block: 1rem; }
  .hero-line { font-size: 2rem; }
  .hero-lede { font-size: .9375rem; }
  .hero .actions { display: grid; grid-template-columns: 1fr; }
  .hero .actions a { width: 100%; }
  .hero .scroll-cue { display: none; }
  .hero .still { bottom: 1.5rem; }
  .hero-art-note { bottom: 4.75rem; }
  .hero-platform { font-size: .625rem; }
  .torn { padding-block: 3.5rem; }
  .doors { gap: 2rem; }
  .door, .door.akkan { grid-template-columns: 1fr; }
  .door > picture, .door.akkan > picture { height: 25rem; min-height: 0; grid-column: auto; grid-row: auto; mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .door.akkan .door-content { grid-column: auto; grid-row: auto; }
  .door-content { padding: 1.5rem; }
  .paths > li { grid-template-columns: 5.5rem 1fr; gap: .75rem; }
  .siege { min-height: 42rem; padding: 17rem var(--gut) 3.5rem; align-items: flex-end; }
  .siege-art { height: 23rem; }
  .siege-art img { object-position: 72% 50%; }
  .siege::before { background: linear-gradient(0deg, #102d43 0 47%, rgb(16 45 67 / .55) 80%, transparent); }
  .siege h2 { font-size: 3rem; }
  .siege .art-note { bottom: .5rem; }
  .world .tab-p { grid-template-columns: 1fr; }
  .world .tab-p picture { min-height: 0; }
  .world .tab-p figcaption { padding: 1.5rem; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .reborn-scene { min-height: 0; padding: 23rem var(--gut) 4rem; }
  .reborn-art { height: 28rem; }
  .reborn-art img { object-position: 82% 50%; }
  .reborn-scene::before { background: linear-gradient(0deg, #0b2035 0 30%, rgb(11 32 53 / .9) 46%, transparent 72%); }
  .reborn-copy h2 { font-size: clamp(3rem, 10vw, 4rem); }
  .reborn-foundations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .ladder .band-head { grid-template-columns: 1fr; }
  .ladder .band-head p:not(.kicker) { margin-top: .75rem; }
  .framed { padding: .75rem; }
  .gauges { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .gauges div:nth-child(odd) { border: 0; }
  .gauges div:last-child { grid-column: 1/-1; border: 0; }
  .closing { min-height: 30rem; padding: 4rem var(--gut); }
  .closing h2 { font-size: 2.75rem; }
  .closing .actions { display: grid; }
  .store-hero { min-height: 0; padding-block: 10rem 3rem; }
  .gate { min-height: 0; }
  .gate .panel { padding: 1.5rem; margin-block: 10rem 2rem; }
  .gate h1 { font-size: 2.5rem; }
  .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: 0; padding-bottom: .25rem; }
  .spec dd { border-top: 0; padding-top: 0; }
  footer.site { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-in { animation: arrive .75s ease-out; }
  .hero .l-fog { animation: mist 18s ease-in-out infinite alternate; }
  .hero .l-embers::before, .hero .l-embers::after { animation: sparks 14s linear infinite; }
  .hero .l-embers::after { animation-duration: 20s; }
  @keyframes arrive { from { opacity: 0; transform: translateY(12px); } }
  @keyframes mist { to { transform: translateX(-5%); opacity: .5; } }
  @keyframes sparks { to { transform: translateY(-100px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .still { display: none; } }

/* Open, blue section fields carry the brighter adventure identity. */
.intro { background: radial-gradient(ellipse at 5% 30%, #1a4c60, transparent 65%), linear-gradient(140deg, #123249, #0b2035); text-align: left; }
.intro::after { content: ""; position: absolute; inset: auto 20% 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(135 168 184 / .35), transparent); }
.intro .band-head { max-width: 32rem; margin: 0; }
.intro h2 { font-size: clamp(3rem, 4.2vw, 4.5rem); font-weight: 600; }
.journey-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin: 3.5rem 0 0; }
.journey-pillars dt { color: var(--gold); font: 600 1.75rem/1.2 var(--display); text-transform: none; letter-spacing: 0; }
.journey-pillars dd { color: var(--muted); font-size: .9375rem; line-height: 1.7; margin-top: .75rem; }
.staff main { padding-top: 9rem; }
@media (max-width: 47.99rem) {
  body > header.site { margin-inline: .5rem; padding-inline: .75rem; top: .5rem; }
  .brand-logo { width: 10.5rem; }
  .staff .brand-logo { width: 9rem; }
  .hero-in { margin-inline: auto; }
  .journey-pillars { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 25rem) {
  .nav-bar { gap: .5rem; flex-wrap: wrap; }
  .brand-logo, .staff .brand-logo { width: min(9rem, 40vw); }
  .mobile-menu summary { padding-inline: .625rem; }
  .staff .brand .sc { display: none; }
  .reborn-foundations { grid-template-columns: 1fr; }
}
@media (max-height: 30rem) {
  body > header.site { position: relative; top: 0; }
  .mobile-menu nav { position: static; max-height: none; padding-inline: 0; box-shadow: none; }
  .nav-bar:has(.mobile-menu[open]) { flex-wrap: wrap; }
  .mobile-menu[open] { width: 100%; }
  .mobile-menu[open] summary { width: fit-content; margin-left: auto; }
  html { scroll-padding-top: 1rem; }
}

/* Adventure polish: light, layered media and deliberately varied section scale. */
.hero { border-bottom: 1px solid rgb(239 213 155 / .6); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 6rem; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgb(8 26 44 / .7), transparent); }
.hero-line { font-size: clamp(2.25rem, 3.3vw, 3.5rem); font-weight: 600; }
.hero h1 { margin-bottom: 1rem; }
.hero .button.war { box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 8px 32px rgb(139 209 196 / .28); }
.hero .button.secondary { background: rgb(8 26 44 / .72); }
.liveband::after { content: ""; position: absolute; inset: auto 10% -1px; height: 1px; background: linear-gradient(90deg, transparent, #8bd1c4, transparent); pointer-events: none; }
.realm-empty { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 2rem; }
.realm-empty p { margin: 0; }
.realm-empty .kicker { margin-right: auto; }
.realm-empty .link { font-size: .875rem; }
.intro-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.intro h2 span { color: var(--human); }
.intro-window { position: relative; margin: 0; padding: .75rem; border: 1px solid rgb(194 225 227 / .38); border-radius: 12px; background: linear-gradient(145deg, #254b5c, #102d43); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 24px 70px rgb(3 17 30 / .35), 0 0 60px rgb(139 209 196 / .08); }
.intro-window picture { display: block; overflow: clip; border-radius: 6px; background: #081a2c; }
.intro-window img { width: 100%; height: auto; }
.intro-window figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .875rem .25rem .25rem; font-size: .6875rem; color: var(--muted); }
.intro-window .sc { color: var(--gold); }
.journey-pillars > div { position: relative; padding: 1.5rem 0 0 6rem; border-top: 1px solid rgb(194 225 227 / .23); min-height: 8rem; }
.journey-icon { position: absolute; width: 5rem; height: 5rem; object-fit: contain; top: 1.35rem; left: 0; }
.journey-pillars dt { font-size: 1.5rem; }
.journey-pillars dd { font-size: .875rem; }
.sides { background: radial-gradient(ellipse at 0 30%, rgb(73 147 173 / .16), transparent 55%), radial-gradient(ellipse at 100% 75%, rgb(139 209 196 / .1), transparent 50%), #0b2035; }
.sides .band-head { margin-bottom: 3.5rem; }
.door .faction-number { display: inline-flex; align-items: center; gap: .75rem; }
.door .faction-number::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.door .class-list summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; list-style: none; }
.door .class-list summary::-webkit-details-marker { display: none; }
.door .class-list summary::after { content: "+"; flex: none; font-size: 1.25rem; }
.door .class-list[open] summary::after { content: "−"; }
.door .class-list[open] { padding-inline: 1rem; border: 1px solid rgb(194 225 227 / .25); border-radius: 6px; background: rgb(8 26 44 / .5); }
.siege-copy { max-width: 31rem; }
.siege h2, .reborn-copy h2 { color: var(--hi); }
.siege .kicker, .reborn .kicker { color: #a8ded5; }
.world { background: radial-gradient(ellipse at 50% -10%, #20596d, transparent 70%), linear-gradient(#123c52, #0b2035); }
.world .band-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: .5rem 3rem; }
.world .band-head .kicker { grid-column: 1/-1; }
.world .band-head h2 { margin: 0; }
.world .band-head p:not(.kicker) { margin: 0; }
.world .thumb picture { border-radius: 8px; box-shadow: 0 6px 20px rgb(3 17 30 / .2); }
.world .thumb:has(:checked) picture { box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgb(139 209 196 / .12); }
.world .tab-p figcaption { border-left: 1px solid rgb(194 225 227 / .18); }
.reborn-scene { border-block: 1px solid rgb(194 225 227 / .22); }
.reborn-foundations > div { padding-left: 1rem; border-left: 2px solid rgb(139 209 196 / .45); }
.ladder { background: radial-gradient(ellipse at 100% 0, #1c4658, transparent 70%), #0b2035; }
.ladder .framed { padding: 1.5rem 2rem; border-color: rgb(194 225 227 / .32); border-radius: 12px; background: linear-gradient(125deg, #163c50, #102d43); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 24px 50px rgb(3 17 30 / .2); }
.ladder .versus tbody tr:first-child { background: rgb(239 213 155 / .055); }
.ladder-empty { padding: 2rem; border: 1px solid rgb(194 225 227 / .25); border-radius: 12px; background: #102d43; }
.closing { min-height: 38rem; border-top: 1px solid rgb(194 225 227 / .25); }
.closing h2 { font-weight: 600; font-size: clamp(3rem, 5vw, 5rem); }
body:not(.staff) .panel { background: radial-gradient(ellipse at 0 0, rgb(139 209 196 / .08), transparent 65%), #102d43; border-color: rgb(194 225 227 / .33); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 20px 50px rgb(3 17 30 / .22); }
footer.site a { font-weight: 600; font-size: .875rem; }
footer.site p:last-child { opacity: .9; }
@media (max-width: 47.99rem) {
  .hero-line { font-size: 2rem; }
  .hero h1 { margin-block: .75rem; }
  .hero-lede { line-height: 1.6; }
  .hero .actions { margin-top: 1.25rem; }
  .intro-stage { grid-template-columns: 1fr; gap: 2rem; }
  .intro-window { padding: .5rem; }
  .journey-pillars { gap: 1.5rem; margin-top: 2rem; }
  .sides .band-head { margin-bottom: 2rem; }
  .door > picture, .door.akkan > picture { height: 24rem; }
  .world .band-head { grid-template-columns: 1fr; gap: 1rem; }
  .world .tab-p figcaption { border-left: 0; border-top: 1px solid rgb(194 225 227 / .18); }
  .ladder .framed { padding: .75rem; }
  .closing { min-height: 30rem; }
}
@media (prefers-reduced-transparency: reduce) {
  body > header.site { background: #102d43; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Updates: ordinary page links keep both views usable without JavaScript. */
.update-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.update-tabs a { display: block; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: .5rem; font-size: 1rem; text-transform: none; background: var(--bg-2); }
.update-tabs a[aria-current] { color: var(--hi); border-color: var(--war); background: linear-gradient(120deg, #214f60, #102d43); box-shadow: inset 0 -3px var(--war); }
.update-tabs span { display: block; margin-top: .4rem; color: var(--muted); font-size: .75rem; font-weight: 400; }
.update-feed { padding-block: 3rem 5rem; }
.update-heading { max-width: 48rem; margin-bottom: 2.5rem; }
.update-heading h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.update-feature { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line-2); border-radius: .75rem; background: linear-gradient(125deg, #1b4057, #0b2639); }
.update-copy { padding: clamp(1.5rem, 4vw, 3rem); }
.update-feature h3 { font-size: clamp(2rem, 3vw, 3rem); }
.update-feature figure { margin: 0; display: flex; flex-direction: column; background: var(--bg-2); }
.update-feature figure img { width: 100%; height: 100%; min-height: 16rem; object-fit: cover; flex: 1; }
.update-feature figcaption { padding: .8rem 1.25rem; color: var(--muted); font-size: .75rem; }
.update-state { color: var(--war); text-transform: uppercase; font-size: .7rem; font-weight: 600; letter-spacing: .1em; }
.update-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.update-grid article { position: relative; padding: 2rem; border: 1px solid var(--line); border-radius: .75rem; background: radial-gradient(ellipse at top right, #1b4057, #102d43 80%); }
.update-grid h3 { font-size: 2rem; }
.update-icon { float: right; width: 3.75rem; height: 3.75rem; margin: 0 0 1rem 1rem; }
.update-note { margin-top: 2.5rem; padding: 1rem 1.5rem; border-left: 2px solid var(--gold); background: var(--bg-2); }
@media (max-width: 47.99rem) { .update-feature, .update-grid { grid-template-columns: 1fr; } .update-tabs a { padding: .9rem .7rem; } .update-feature figure img { height: 16rem; } .update-grid article { padding: 1.5rem; } }