/* Player portal: shared components and responsive v3 layout.
   Client game imagery; self-hosted OFL fonts; tenant primary/accent colours. */

:root {
  --ink: var(--bg, #140e0a);
  --lacquer: var(--surface, #1d1510);
  --lacquer-2: #281d15;
  --well: #0d0906;
  --line: #3a2b1f;
  --line-2: #574230;
  --gilt: var(--primary, #d9a441);
  --gilt-hi: #f0cf86;
  --gilt-a: rgba(217, 164, 65, .38);
  --cinnabar: var(--accent, #a8261d);
  --bone: var(--text, #ece0c6);
  --muted: #bba98b;
  --jade: #7ccb96;
  --ember: #f08467;
  --shade: rgba(14, 10, 8, .9);
  --display: 'Hahmlet', 'Noto Serif', Georgia, serif;
  --body: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'DejaVu Sans Mono', Consolas, monospace;
  --head-h: 68px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ink); color: var(--bone);
  font: 400 1.0625rem/1.55 var(--body); }
main { flex: 1 0 auto; }
main:focus { outline: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 1rem; }
a { color: var(--gilt-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff1cc; }
:focus-visible { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.narrowcol { max-width: calc(46rem + 2 * var(--gutter)); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--gilt); color: #1b1108; padding: .6rem 1rem; font-weight: 700; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.block { display: block; }
.wrapany { overflow-wrap: anywhere; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 1.25rem;
  border: 1px solid transparent; border-radius: 2px; font: 700 1rem/1.1 var(--body); letter-spacing: .01em; text-decoration: none;
  cursor: pointer; text-align: center; transition: background-color .15s, border-color .15s, color .15s, filter .15s; }
.btn-sm { min-height: 38px; padding: 0 .95rem; font-size: .95rem; }
.btn-lg { min-height: 52px; padding: 0 1.75rem; font-size: 1.125rem; }
.btn-block { display: flex; width: 100%; }
.btn-red { background: linear-gradient(#b9352b, #8c1f17); border-color: rgba(240, 207, 134, .55); color: #fff4df;
  box-shadow: inset 0 1px 0 rgba(255, 210, 170, .25), 0 2px 0 rgba(0, 0, 0, .45); }
.btn-red:hover { filter: brightness(1.12); color: #fff; }
.btn-gold { background: linear-gradient(#f3d690, #c8923a); border-color: #f7e1a8; color: #23160a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .45); }
.btn-gold:hover { filter: brightness(1.08); color: #160d05; }
.btn-line { background: rgba(14, 10, 8, .45); border-color: var(--gilt-a); color: var(--gilt-hi); }
.btn-line:hover { border-color: var(--gilt); background: rgba(217, 164, 65, .12); color: #fff1cc; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.done { border-color: var(--jade); color: var(--jade); }
.linkbtn { background: none; border: 0; padding: .5rem 0; color: var(--muted); font: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--gilt-hi); text-decoration: underline; }

/* ----------------------------------------------------------------- masthead */
.masthead { position: sticky; top: 0; z-index: 50; background: rgba(17, 12, 9, .97); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(217, 164, 65, .18), 0 8px 24px rgba(0, 0, 0, .35); }
.masthead-in { display: flex; align-items: center; gap: 2rem; min-height: var(--head-h); }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--gilt-hi); flex: none; }
.brand span { font: 700 1.25rem/1 var(--display); white-space: nowrap; }
.navpanel { flex: 1; display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem; align-self: stretch; }
.mainnav { display: flex; align-items: stretch; }
.mainnav a, .loginlink { position: relative; display: flex; align-items: center; padding: 0 .9rem; color: var(--bone);
  font: 600 1.0625rem/1 var(--display); text-decoration: none; white-space: nowrap; }
.mainnav a:hover, .loginlink:hover { color: var(--gilt-hi); }
/* active: gilt label + gilt rule on the masthead edge with a small diamond, as the in-game tab markers */
.mainnav a.on, .loginlink.on { color: var(--gilt-hi); }
.mainnav a.on::after, .loginlink.on::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: -1px; height: 3px; background: var(--gilt); }
.mainnav a.on::before, .loginlink.on::before { content: ''; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px;
  background: var(--gilt); border: 2px solid #110c09; transform: translateX(-50%) rotate(45deg); z-index: 1; }
.useractions { display: flex; align-items: center; gap: 1rem; }
.useractions .loginlink { align-self: stretch; }
.userchip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 .9rem; border: 1px solid var(--line-2);
  color: var(--bone); text-decoration: none; font-weight: 700; }
.userchip:hover, .userchip.on { border-color: var(--gilt); color: var(--gilt-hi); }
.btn.on { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
.navtoggle { display: none; margin-left: auto; width: 46px; height: 46px; background: transparent; border: 1px solid var(--line-2);
  border-radius: 2px; cursor: pointer; align-items: center; justify-content: center; }
.navtoggle .bars, .navtoggle .bars::before, .navtoggle .bars::after { display: block; width: 20px; height: 2px; background: var(--gilt-hi); position: relative; }
.navtoggle .bars::before, .navtoggle .bars::after { content: ''; position: absolute; left: 0; }
.navtoggle .bars::before { top: -6px; } .navtoggle .bars::after { top: 6px; }
.navtoggle[aria-expanded="true"] .bars { background: transparent; }
.navtoggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1180px) and (min-width: 981px) {
  .masthead-in { gap: 1.25rem; }
  .navpanel { gap: .75rem; }
  .mainnav a, .loginlink { padding: 0 .55rem; font-size: 1rem; }
  .mainnav a.on::after, .loginlink.on::after { left: .55rem; right: .55rem; }
  .brand span { font-size: 1.1rem; }
  .useractions { gap: .75rem; }
}
@media (max-width: 980px) {
  .masthead-in { flex-wrap: wrap; gap: 0 1rem; }
  .navtoggle { display: none; }
  .navpanel { flex-basis: 100%; flex-wrap: wrap; gap: 0; }
  .mainnav { flex-wrap: wrap; }
  .mainnav a, .loginlink { min-height: 48px; padding: 0 .75rem; }
  .js .navtoggle { display: inline-flex; }
  .js .navpanel { display: none; flex-direction: column; align-items: stretch; padding: .5rem 0 1rem; border-top: 1px solid var(--line); }
  .js .navpanel.open { display: flex; }
  .js .mainnav { flex-direction: column; }
  .js .mainnav a, .js .loginlink { min-height: 50px; padding: 0 1rem; border-bottom: 1px solid rgba(58, 43, 31, .6); }
  .js .mainnav a.on::before, .js .loginlink.on::before { display: none; }
  .js .mainnav a.on::after, .js .loginlink.on::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .js .mainnav a.on, .js .loginlink.on { background: linear-gradient(90deg, rgba(217, 164, 65, .14), transparent 70%); }
  .js .useractions { padding: 1rem 1rem 0; flex-wrap: wrap; }
  .js .useractions .loginlink { border: 0; padding: 0; min-height: 44px; }
}

/* -------------------------------------------------------------------- flash */
.flashwrap { padding-top: 1rem; }
.flash { margin: 0 0 1rem; padding: .85rem 1rem; background: var(--lacquer); border: 1px solid var(--line-2); border-left-width: 4px; }
.flash-ok { border-color: rgba(124, 203, 150, .4); border-left-color: var(--jade); }
.flash-err { border-color: rgba(240, 132, 103, .45); border-left-color: var(--ember); background: #2a1310; }
.flash-info { border-left-color: var(--gilt); }
.flash ul { margin: 0; padding-left: 1.1rem; }

.cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* ------------------------------------------------------------- status strip */
.statusstrip { position: relative; z-index: 2; margin-top: -3.75rem; }
.statusstrip { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; padding: 0;
  background: #120d0a; border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); width: calc(100% - 2 * var(--gutter)); max-width: calc(1240px - 2 * var(--gutter)); }
.ss-main { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.5rem; background: linear-gradient(90deg, rgba(124, 203, 150, .1), transparent); }
.is-down .ss-main { background: linear-gradient(90deg, rgba(240, 132, 103, .14), transparent); }
.ss-main b { display: block; font: 700 1.125rem/1.2 var(--display); }
.ss-main small, .ss-online small { display: block; color: var(--muted); font-size: .85rem; }
.ss-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.ss-list li { display: flex; align-items: center; gap: .55rem; padding: .75rem 1.25rem; border-right: 1px solid var(--line); }
.ss-name { font-weight: 700; }
.ss-state { font: 700 .8rem/1 var(--display); letter-spacing: .04em; padding: .3rem .45rem; border: 1px solid currentColor; }
.ss-list li:has(.dot.up) .ss-state { color: var(--jade); }
.ss-list li:has(.dot.down) .ss-state { color: var(--ember); }
.ss-online { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: .7rem 1.5rem; border-left: 1px solid var(--line); text-align: right; min-width: 12rem; }
.ss-online .ss-name { color: var(--muted); font-weight: 600; font-size: .9rem; }
.ss-online .count { font: 800 2.1rem/1 var(--display); color: var(--gilt-hi); }
.ss-online .count.stale { color: var(--muted); }
.ss-online .count.na { color: var(--muted); }
.dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot.up { background: var(--jade); box-shadow: 0 0 0 3px rgba(124, 203, 150, .18); }
.dot.down { background: var(--ember); box-shadow: 0 0 0 3px rgba(240, 132, 103, .18); }
.ss-main .dot { width: 14px; height: 14px; }
@media (max-width: 860px) {
  .statusstrip { grid-template-columns: 1fr; margin-top: -3rem; width: calc(100% - 2 * var(--gutter)); }
  .ss-list { border-left: 0; border-top: 1px solid var(--line); }
  .ss-list li { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .ss-online { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; border-left: 0; text-align: left; padding: .9rem 1.5rem; }
  .ss-online small { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- home body */
.home-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; margin-top: 4rem; margin-bottom: 4.5rem; }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .65rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.sechead h2, .sectitle { font-weight: 700; font-size: 1.75rem; }
.sectitle { margin-bottom: 1rem; }
.sechead.center { justify-content: center; border: 0; padding: 0; margin-bottom: .75rem; }
.intro { font-size: 1.125rem; color: var(--bone); max-width: 42rem; margin-left: auto; margin-right: auto; }
.newsgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.newscard { position: relative; display: flex; flex-direction: column; background: var(--lacquer); border: 1px solid var(--line); transition: border-color .15s; }
.newscard img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.newscard:hover { border-color: var(--gilt-a); }
.newscard:focus-within { outline: 2px solid var(--gilt-hi); outline-offset: 2px; }
.nc-body { padding: 1.15rem 1.35rem 1.35rem; }
.newscard time { display: block; color: var(--muted); font-size: .9rem; margin-bottom: .35rem; }
.newscard h2, .newscard h3 { font-weight: 700; font-size: 1.3rem; margin-bottom: .55rem; }
.newscard h2 a, .newscard h3 a { color: var(--bone); text-decoration: none; }
.newscard:hover h2 a, .newscard:hover h3 a { color: var(--gilt-hi); }
.newscard a:focus-visible { outline: none; }
.newscard p { color: var(--muted); margin: 0; }
.stretch::after { content: ''; position: absolute; inset: 0; }
.newscard.lead { grid-column: 1 / -1; flex-direction: row; }
.newscard.lead img { width: 56%; aspect-ratio: auto; min-height: 280px; }
.newscard.lead .nc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.75rem 2rem; }
.newscard.lead h2, .newscard.lead h3 { font-size: 1.85rem; }
.nc-more { display: inline-block; margin-top: 1rem; color: var(--gilt-hi); font-weight: 700; }
.toplist { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.toplist li { display: grid; grid-template-columns: 1.9rem 36px minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.tl-rank { font: 800 1.25rem/1 var(--display); color: var(--muted); text-align: center; }
.toplist li:nth-child(1) .tl-rank { color: var(--gilt-hi); }
.toplist li:nth-child(2) .tl-rank { color: #d3d6da; }
.toplist li:nth-child(3) .tl-rank { color: #d79e6c; }
.tl-who { min-width: 0; }
.tl-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-who small, .tl-lv small { display: block; color: var(--muted); font-size: .8rem; }
.tl-lv { text-align: right; font: 800 1.35rem/1 var(--display); color: var(--gilt-hi); }
.tl-lv small { font-family: var(--body); font-weight: 400; }
@media (max-width: 980px) {
  .home-body { grid-template-columns: 1fr; margin-top: 3rem; }
}
@media (max-width: 720px) {
  .newsgrid { grid-template-columns: 1fr; }
  .newscard.lead { flex-direction: column; }
  .newscard.lead img { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  .newscard.lead .nc-body { padding: 1.15rem 1.35rem 1.35rem; }
  .newscard.lead h2, .newscard.lead h3 { font-size: 1.5rem; }
}

/* ------------------------------------------------------------------- footer */
.footer { flex: none; border-top: 1px solid var(--line); background: #0e0a07; padding: 3rem 0 2.5rem; color: var(--muted); }
.footer-in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 2rem; align-items: start; }
.footbrand { display: flex; gap: 1.25rem; align-items: flex-start; }
.footbrand img { width: 96px; height: auto; opacity: .85; flex: none; }
.footbrand strong { display: block; font: 700 1.2rem/1.2 var(--display); color: var(--gilt-hi); margin-bottom: .4rem; }
.footbrand p { margin: 0 0 .3rem; font-size: .95rem; }
.footnav { display: flex; flex-direction: column; gap: .2rem; }
.footnav a { color: var(--bone); text-decoration: none; padding: .3rem 0; }
.footnav a:hover { color: var(--gilt-hi); text-decoration: underline; }
.langs { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.langs > span { margin-right: .25rem; }
.langs a { padding: .35rem .75rem; border: 1px solid var(--line-2); color: var(--bone); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.langs a.on { border-color: var(--gilt); color: var(--gilt-hi); background: rgba(217, 164, 65, .1); }
@media (max-width: 860px) {
  .footer-in { grid-template-columns: 1fr; }
  .footnav { flex-direction: row; flex-wrap: wrap; gap: .25rem 1.25rem; }
}

/* --------------------------------------------------------------- page banner */
.pagebanner { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 230px;
  background: var(--ink) var(--pb, none) 50% 38% / cover no-repeat; border-bottom: 1px solid var(--line); }
.pagebanner::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--ink) 0%, rgba(14, 10, 8, .62) 45%, rgba(14, 10, 8, .38) 100%), linear-gradient(90deg, rgba(14, 10, 8, .7), rgba(14, 10, 8, 0) 65%); }
.pb-army { --pb: url(/static/img/game/banner-army.webp); }
.pb-ruins { --pb: url(/static/img/game/banner-ruins.webp); }
.pb-storm { --pb: url(/static/img/game/banner-storm.webp); }
.pb-courtyard { --pb: url(/static/img/game/hero-courtyard.webp); }
.pb-slim { min-height: 170px; }
.pb-in { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.25rem 2rem; padding-top: 3rem; padding-bottom: 1.75rem; }
.pagebanner h1 { font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.5rem); color: #fff3d8; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.pagebanner p { margin: .5rem 0 0; font-size: 1.0625rem; max-width: 44rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.pagebanner .ver { color: var(--muted); white-space: nowrap; }
.pb-article time { display: block; color: var(--bone); margin-bottom: .4rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.pb-article h1 { font-size: clamp(2rem, 4vw, 3rem); }
.wallet { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; background: rgba(13, 9, 6, .88); border: 1px solid var(--gilt-a); padding: .8rem 1.1rem; }
.wallet > img { image-rendering: pixelated; }
.w-bal small { display: block; color: var(--muted); font-size: .85rem; }
.w-bal b { font: 800 1.5rem/1.1 var(--display); color: var(--gilt-hi); white-space: nowrap; }
.w-act { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.w-hist { font-size: .95rem; }
@media (max-width: 720px) {
  .pagebanner { min-height: 170px; }
  .pb-in { padding-top: 2.25rem; padding-bottom: 1.25rem; }
  .wallet { width: 100%; }
}

/* -------------------------------------------------------------------- panels */
.panel { background: var(--lacquer); border: 1px solid var(--line); padding: 1.5rem; }
.panel h2 { font-weight: 700; font-size: 1.375rem; margin-bottom: 1rem; }
.panelhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panelhead h2 { margin: 0; }

/* --------------------------------------------------------------------- forms */
.form label, .hero-box label { display: block; margin: 0 0 1rem; font-weight: 700; font-size: .95rem; }
.form input:not([type=checkbox]), .hero-box input:not([type=checkbox]) { display: block; width: 100%; margin-top: .35rem; min-height: 46px; padding: .55rem .8rem;
  background: var(--well); border: 1px solid var(--line-2); border-radius: 2px; color: var(--bone); font: 400 1rem var(--body); }
.form input:focus, .hero-box input:focus { outline: 2px solid rgba(240, 207, 134, .55); outline-offset: 0; border-color: var(--gilt); }
.form label small { display: block; margin-top: .35rem; font-weight: 400; color: var(--muted); font-size: .875rem; }
.hint-under { display: block; margin: -.5rem 0 1rem; color: var(--muted); font-size: .875rem; }
.form .check { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; }
.form .check input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--gilt); flex: none; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.formlinks { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin: 1.1rem 0 0; font-size: .95rem; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- login / register gate */
.gate { position: relative; isolation: isolate; min-height: calc(100vh - var(--head-h)); display: flex; align-items: center;
  background: var(--ink) var(--gate, none) 70% 30% / cover no-repeat; }
.gate::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14, 10, 8, .96) 0%, rgba(14, 10, 8, .86) 34%, rgba(14, 10, 8, .2) 62%, rgba(14, 10, 8, .1) 100%), linear-gradient(0deg, rgba(14, 10, 8, .7), transparent 30%); }
.gate-warrior { --gate: url(/static/img/game/gate-warrior.webp); }
.gate-ninja { --gate: url(/static/img/game/gate-ninja.webp); }
.gate-samahi { --gate: url(/static/img/game/gate-samahi.webp); }
.gate-in { padding-top: 3rem; padding-bottom: 3rem; }
.gate-copy { max-width: 460px; margin-bottom: 1.5rem; }
.gate-name { font: 800 2.4rem/1 var(--display); color: var(--gilt-hi); margin: 0 0 .5rem; }
.gate-copy p:not(.gate-name) { margin: 0; color: var(--bone); font-style: italic; font-size: 1.15rem; }
.gatebox { max-width: 440px; background: rgba(15, 10, 7, .93); border: 1px solid var(--gilt-a); border-top: 3px solid var(--cinnabar);
  padding: 1.75rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.gatebox-wide { max-width: 580px; }
.gatebox h1 { font-weight: 800; font-size: 1.9rem; margin-bottom: 1.25rem; }
@media (max-width: 760px) {
  .gate { display: block; min-height: 0; background-size: auto 300px; background-position: 72% 0; }
  .gate::before { background: linear-gradient(180deg, rgba(14, 10, 8, .15) 0, rgba(14, 10, 8, .6) 160px, var(--ink) 290px); }
  .gate-in { padding-top: 150px; padding-bottom: 2.5rem; }
  .gate-name { font-size: 2rem; }
  .gatebox { padding: 1.35rem; }
}

/* ------------------------------------------------------------ big messages */
.bigmsg { position: relative; isolation: isolate; min-height: 62vh; display: flex; align-items: center; text-align: center;
  background: var(--ink) var(--pb, none) 50% 50% / cover no-repeat; }
.bigmsg::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(14, 10, 8, .55), rgba(14, 10, 8, .93) 72%); }
.bigmsg-in { max-width: 44rem; padding-top: 4rem; padding-bottom: 4rem; }
.bigmsg .bm-code { font: 900 clamp(6rem, 18vw, 10.5rem)/.9 var(--display); color: var(--gilt-hi); margin: 0 0 .5rem; text-shadow: 0 6px 30px rgba(0, 0, 0, .8); }
.bigmsg h1 { font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1rem; color: #fff3d8; }
.bigmsg p { font-size: 1.125rem; }

/* -------------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; }
.rank { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rank th { text-align: left; font-weight: 700; font-size: .875rem; color: var(--muted); padding: .7rem .9rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.rank td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rank tbody tr:hover { background: rgba(255, 240, 210, .025); }
.rank .r { text-align: right; }
.rank .num { width: 3.5rem; font: 700 1.05rem/1 var(--display); color: var(--muted); text-align: center; }
.rank .who { font-weight: 700; }
.rank .lv { font: 700 1.1rem/1 var(--display); }
.rank tr.top td { background: rgba(217, 164, 65, .05); }
.rank tr.top .num { font-size: 1.35rem; }
.rank tr.top1 .num { color: var(--gilt-hi); }
.rank tr.top2 .num { color: #d3d6da; }
.rank tr.top3 .num { color: #d79e6c; }
.job, .emp { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.st { font-weight: 700; }
.st-delivered, .st-credited { color: var(--jade); }
.st-debited, .st-created { color: var(--gilt-hi); }
.st-refunded, .st-failed { color: var(--ember); }
.neg { color: var(--ember); } .pos { color: var(--jade); }
@media (max-width: 640px) { .hide-s { display: none; } .rank th, .rank td { padding: .6rem .5rem; } }

/* ------------------------------------------------------------------ rankings */
.rankwrap { margin-top: 2rem; margin-bottom: 4rem; }
.rankbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg a { padding: .65rem 1.3rem; color: var(--bone); text-decoration: none; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.seg a + a { border-left: 1px solid var(--line-2); }
.seg a:hover { color: var(--gilt-hi); }
.seg a.on { background: var(--gilt); color: #1d1208; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .85rem; border: 1px solid var(--line); color: var(--bone); text-decoration: none; }
.chips a:hover { border-color: var(--gilt-a); }
.chips a.on { border-color: var(--gilt); color: var(--gilt-hi); background: rgba(217, 164, 65, .1); font-weight: 700; }
.rankwrap .tablewrap { background: var(--lacquer); border: 1px solid var(--line); }
.rankwrap .empty { padding: 1.5rem; margin: 0; }
.pager { display: flex; justify-content: space-between; margin-top: 1.25rem; }

/* --------------------------------------------------------------------- shop */
.shopwrap { margin-top: 2rem; margin-bottom: 4.5rem; }
.delivery { color: var(--muted); border-left: 3px solid var(--gilt); padding-left: .9rem; margin-bottom: 2rem; max-width: 60rem; }
.offers { margin-bottom: 2.75rem; }
.offergrid, .itemgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.offergrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.itemgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.item { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; align-items: start;
  background: var(--lacquer); border: 1px solid var(--line); padding: 1rem; }
.item:hover, .item:focus-within { border-color: var(--gilt-a); }
.slotwell { position: relative; display: grid; place-items: center; width: 88px; height: 88px; background: radial-gradient(circle at 50% 42%, rgba(217, 164, 65, .2), rgba(13, 9, 6, 0) 68%), var(--well);
  border: 1px solid var(--line-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 22px rgba(0, 0, 0, .85); cursor: help; }
.slotwell img { width: 64px; height: 64px; image-rendering: pixelated; }
.slotwell.h2, .slotwell.h3 { height: 120px; }
.slotwell.h2 img { width: 48px; height: 96px; image-rendering: auto; }
.slotwell.h3 img { width: 32px; height: 96px; image-rendering: auto; }
.slotwell svg { width: 48px; height: 48px; fill: none; stroke: var(--gilt); stroke-width: 2; }
.qty { position: absolute; right: 5px; bottom: 3px; font: 700 .85rem/1 var(--display); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.seal { position: absolute; top: .55rem; left: .55rem; z-index: 2; padding: .25rem .45rem; background: var(--cinnabar); color: #fff4df;
  font: 800 .9rem/1 var(--display); border: 1px solid rgba(255, 220, 170, .45); transform: rotate(-5deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; }
.item-body h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: .4rem; }
.item-body .cnt { color: var(--muted); font-weight: 600; }
.desc { color: var(--muted); font-size: .95rem; margin: 0 0 .75rem; }
.meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.meta span { font-size: .82rem; color: var(--muted); border: 1px solid var(--line); padding: .1rem .45rem; }
.meta:empty { display: none; }
.buyrow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }
.price { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.price img { image-rendering: pixelated; }
.price s { color: var(--muted); }
.price b { font: 800 1.4rem/1 var(--display); color: var(--gilt-hi); }
.buyform { margin: 0; }
.item.soldout { opacity: .55; }
.item-big { grid-template-columns: 124px minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem;
  background: linear-gradient(135deg, #2b1e14, var(--lacquer) 60%); border-color: var(--gilt-a); }
.item-big .slotwell { width: 124px; height: 124px; }
.item-big .slotwell.h2, .item-big .slotwell.h3 { height: 140px; }
.item-big .item-body h3 { font-size: 1.35rem; }
.item-big .seal { top: .7rem; left: .7rem; font-size: 1.05rem; }
/* Catalogue tooltip: CSS frame, available on hover and keyboard focus. */
.tip { display: none; position: absolute; z-index: 20; left: .75rem; top: calc(88px + 1.6rem); width: calc(100% - 1.5rem); max-width: 340px; text-align: left;
  border: 12px solid transparent; border-color: var(--line-2); background: var(--well); padding: .2rem .25rem;
  background: rgba(6, 4, 3, .95); background-clip: padding-box; box-shadow: 0 12px 30px rgba(0, 0, 0, .65); font-size: .95rem; pointer-events: none; }
.item-big .tip { top: calc(124px + 2rem); }
.slotwell:hover ~ .tip, .slotwell:focus ~ .tip { display: block; }
.tip strong { display: block; font: 700 1.05rem/1.25 var(--display); color: var(--gilt-hi); margin-bottom: .3rem; }
.tip span { display: block; }
.t-desc { color: var(--bone); }
.t-time { color: var(--jade); margin-top: .3rem; }
.t-price { color: var(--gilt-hi); font-weight: 700; margin-top: .4rem; }
.store { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; align-items: start; }
.rail { position: sticky; top: calc(var(--head-h) + 1rem); background: var(--lacquer); border: 1px solid var(--line); padding: .5rem 0 .75rem; }
.rail-title { font-weight: 700; font-size: 1.1rem; padding: .6rem 1.25rem .75rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .62rem 1.25rem; color: var(--bone); text-decoration: none; border-left: 3px solid transparent; }
.rail a small { color: var(--muted); font-variant-numeric: tabular-nums; }
.rail a:hover { background: var(--lacquer-2); color: var(--gilt-hi); }
.rail a.on { border-left-color: var(--gilt); background: linear-gradient(90deg, rgba(217, 164, 65, .16), transparent); color: var(--gilt-hi); font-weight: 700; }
.shelf-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.shelf-head h2 { font-weight: 800; font-size: 1.85rem; }
@media (max-width: 980px) {
  .store { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .rail { position: static; background: none; border: 0; padding: 0; }
  .rail-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rail ul { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; overscroll-behavior-x: contain; }
  .rail a { white-space: nowrap; border: 1px solid var(--line-2); padding: .55rem .9rem; min-height: 44px; }
  .rail a.on { border-color: var(--gilt); background: rgba(217, 164, 65, .14); }
}
@media (max-width: 420px) {
  .itemgrid { grid-template-columns: 1fr; }
  .item { grid-template-columns: 72px minmax(0, 1fr); padding: .85rem; gap: .85rem; }
  .item:not(.item-big) .slotwell { width: 72px; height: 72px; }
  .item:not(.item-big) .slotwell.h2, .item:not(.item-big) .slotwell.h3 { height: 110px; }
  .item:not(.item-big) .tip { top: calc(72px + 1.4rem); }
  .item-big { grid-template-columns: 88px minmax(0, 1fr); padding: 1rem; gap: 1rem; }
  .item-big .slotwell { width: 88px; height: 88px; }
  .item-big .tip { top: calc(88px + 1.6rem); }
}

/* ----------------------------------------------------------------- top-up */
.histwrap { display: grid; gap: 1.25rem; margin-top: 2rem; margin-bottom: 4.5rem; }
.topwrap { margin-top: 2rem; margin-bottom: 4.5rem; }
.packages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.pkg { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; background: var(--lacquer); border: 1px solid var(--line); padding: 1.5rem 1.25rem 1.25rem; }
.pkg p { margin: 0; }
.pkg-top { border-color: var(--gilt); background: linear-gradient(180deg, #2c1f14, var(--lacquer) 65%); }
.pkg-label { font: 700 1.05rem/1.2 var(--display); color: var(--muted); }
.pkg-top .pkg-label { color: var(--gilt-hi); }
.coinbig { image-rendering: pixelated; margin: .35rem 0; }
.pkgmd { font: 800 2.25rem/1 var(--display); color: var(--gilt-hi); }
.pkgmd small { font-size: 1rem; color: var(--muted); }
.pkg-bonus { color: var(--jade); font-weight: 700; }
.pkgprice { font-size: 1.25rem; font-weight: 700; margin-top: .25rem !important; }
.pkg form, .pkg > .btn { width: 100%; margin-top: .85rem; display: grid; gap: .5rem; }

/* ------------------------------------------------------------------ account */
.acctwrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; margin-bottom: 4.5rem; align-items: start; }
.acctwrap > .roster, .acctwrap > .wide { grid-column: 1 / -1; }
.acctwrap > .profile { grid-row: span 2; align-self: stretch; }
.charcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.charcard { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: var(--lacquer); border: 1px solid var(--line); padding: 1rem 1.1rem; }
.charcard img { border: 1px solid var(--line-2); }
.cc-who b { display: block; font: 700 1.2rem/1.2 var(--display); }
.cc-who span, .cc-who small { display: block; }
.cc-lv { text-align: right; font: 800 2rem/1 var(--display); color: var(--gilt-hi); }
.cc-lv small { display: block; font: 400 .8rem var(--body); color: var(--muted); }
.kv { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: .7rem 1rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.reveal { font: 700 1rem var(--mono); letter-spacing: .18em; background: var(--well); border: 1px dashed var(--line-2); color: var(--gilt-hi); padding: .3rem .7rem; min-height: 36px; cursor: pointer; }
.reveal:hover { border-color: var(--gilt); }
@media (max-width: 860px) {
  .acctwrap { grid-template-columns: 1fr; }
  .acctwrap > .profile { grid-row: auto; }
  .kv { grid-template-columns: 1fr; gap: .15rem; }
  .kv dd { margin-bottom: .7rem; }
}

/* ---------------------------------------------------------------- downloads */
.dlwrap { display: grid; gap: 1.75rem; margin-top: 2rem; margin-bottom: 4.5rem; }
.osgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.osgrid.one { grid-template-columns: minmax(0, 1fr); }
.ostile { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 400px; border: 1px solid var(--gilt-a); }
.ostile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.ostile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 7, 5, .97) 25%, rgba(10, 7, 5, .55) 62%, rgba(10, 7, 5, .2)); }
.ostile:hover { border-color: var(--gilt); }
.ot-body { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 2rem; width: 100%; }
.ot-body h3 { font-weight: 800; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: #fff3d8; }
.ot-body p { margin: 0; font-size: 1.0625rem; }
.ot-body .sz { font-weight: 400; opacity: .85; font-size: .9em; }
.ot-more { font-weight: 700; }
.cmdline { width: 100%; max-width: 34rem; background: rgba(0, 0, 0, .65); border: 1px solid var(--line-2); padding: .6rem .8rem; }
.cmdline code, .cmd code, .hash { font-family: var(--mono); font-size: .9rem; overflow-wrap: anywhere; word-break: break-all; }
.dldetails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.dldetails:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.dlsec { scroll-margin-top: calc(var(--head-h) + 1rem); }
.steps { list-style: none; counter-reset: s; margin: 1.25rem 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 2.6rem; margin: 0 0 .8rem; min-height: 1.9rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; width: 1.85rem; height: 1.85rem; display: grid; place-items: center;
  border: 1px solid var(--gilt); border-radius: 50%; font: 700 .95rem/1 var(--display); color: var(--gilt-hi); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.hashbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "code btn"; align-items: center; gap: .35rem .9rem;
  margin: 1rem 0; padding: .75rem .9rem; background: var(--well); border: 1px solid var(--line); }
.hb-label { grid-area: label; color: var(--muted); font-size: .85rem; font-weight: 700; }
.hashbox .hash { grid-area: code; display: block; line-height: 1.55; color: var(--bone); letter-spacing: .02em; }
.hashbox .btn { grid-area: btn; }
.cmdbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; margin: 1rem 0; padding: .75rem .9rem; background: var(--well); border: 1px solid var(--line); }
.cmd { margin: 0; white-space: pre-wrap; }
.note { color: var(--muted); font-size: .95rem; margin: 0; }
.filelist { list-style: none; margin: 0; padding: 0; }
.filelist li { border-top: 1px solid var(--line); padding: 1rem 0 .25rem; }
.filelist li:first-child { border-top: 0; padding-top: 0; }
.fl-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; font-weight: 700; margin-bottom: .4rem; }
.filelist p { margin: 0 0 .5rem; }
@media (max-width: 860px) {
  .osgrid, .dldetails { grid-template-columns: minmax(0, 1fr); }
  .ostile { min-height: 330px; }
  .ot-body { padding: 1.4rem; }
}
@media (max-width: 520px) {
  .hashbox, .cmdbox { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "code" "btn"; }
  .hashbox .btn, .cmdbox .btn { justify-self: start; }
}

/* -------------------------------------------------------------------- prose */
.newspage { margin-top: 2rem; margin-bottom: 4.5rem; }
.prose { font-size: 1.125rem; line-height: 1.7; margin: 2.25rem 0 2rem; }
.prose h2 { font-weight: 700; font-size: 1.6rem; margin: 2.2rem 0 .75rem; }
.prose h3 { font-weight: 700; font-size: 1.3rem; margin: 1.8rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.prose li { margin: .35rem 0; }
.prose li::marker { color: var(--gilt); }
.prose blockquote { margin: 1.25rem 0; padding: .25rem 0 .25rem 1.1rem; border-left: 3px solid var(--gilt); color: var(--muted); }
.prose img { display: block; margin: 1.25rem 0; border: 1px solid var(--line); }
.prose strong { color: #fff3d8; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--well); padding: .1rem .3rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .5rem .6rem; text-align: left; }
.backlink { margin: 0 0 4.5rem; font-weight: 700; }

@media (max-width: 560px) { :root { --gutter: 16px; } body { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .masthead, .footer, .hero-box, .navtoggle { display: none; } body { background: #fff; color: #000; } }

/* v3: an original moonlit realm, an editorial home and task-led navigation. */
:root { --ink: #0b1219; --lacquer: #121e28; --lacquer-2: #1a2934; --well: #080f16; --line: #293640; --line-2: #42505a; --gilt: var(--primary, #d4ad71); --gilt-hi: #ebcfa0; --bone: #e5e9e9; --muted: #aab8bf; --head-h: 80px; }
body { background: var(--ink); font-family: 'Segoe UI', system-ui, sans-serif; font-size: .975rem; line-height: 1.65; }
h1,h2,h3 { font-weight: 500; }
.wrap { max-width: 1320px; padding-left: 40px; padding-right: 40px; }
.utility { background: #080e14; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.utility-in { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.utility-in > div { display: flex; gap: 22px; }
.utility a { color: var(--muted); text-decoration: none; padding: 5px 0; }
.utility a[aria-current] { color: var(--gilt-hi); }
.masthead { background: #0b131bf5; box-shadow: none; border-color: var(--line); }
.masthead-in { gap: 28px; }
.brand { gap: 12px; }
.brand span { font-size: 1.15rem; color: var(--bone); }
.navpanel { gap: 18px; }
.mainnav { flex: 1; justify-content: center; }
.mainnav a,.loginlink { font: 500 .85rem/1.25 'Segoe UI',system-ui,sans-serif; padding: 0 12px; }
.mainnav a.on::before,.loginlink.on::before { display:none; }
.mainnav a.on::after,.loginlink.on::after { height:2px; background:var(--gilt-hi); }
.useractions { gap: 16px; }
.btn { border-radius: 4px; font-family: 'Segoe UI',system-ui,sans-serif; font-size: .875rem; font-weight: 600; min-height: 46px; box-shadow: none; }
.btn-lg { min-height: 54px; padding: 0 24px; }
.btn-gold { background: #dfbd85; border-color: #dfbd85; color: #14202b; }
.btn-red { background: #983c35; border-color: #b45a4c; }
.btn-line { background: #101b2580; border-color: #637078; color: var(--bone); }
.btn:hover { transform: translateY(-1px); }
.eyebrow { font: 600 .7rem/1.6 'Segoe UI',system-ui,sans-serif; text-transform: uppercase; letter-spacing: .19em; color: var(--gilt-hi); margin-bottom: 22px; }
.realm-hero { background: #0e1b26; position: relative; }
.realm-hero::before { content:''; position: absolute; inset:0; background:linear-gradient(90deg,#0b1219 0%,#0b1219e8 22%,#0b121986 48%,transparent 75%),linear-gradient(0deg,#0b1219,transparent 25%); }
.realm-inner { min-height: 660px; position:relative; display:flex; align-items:center; }
.realm-copy { width: 55%; padding: 58px 0 80px; }
.realm-name { color:var(--muted); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px; }
.realm-copy h1 { font-size:clamp(2.5rem,4.3vw,4.25rem); letter-spacing:-.045em; line-height:1.12; max-width:650px; color:#f2eee5; }
.realm-lead { max-width:470px; color:#b6c3ca; font-size:1rem; margin:24px 0 30px; }
.realm-facts { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:.75rem; color:var(--muted); margin:25px 0 0; }
.realm-facts span::before { content:'◇'; margin-right:8px; color:var(--gilt-hi); }
.realm-caption { position:absolute; right:40px; bottom:70px; color:var(--muted); display:flex; gap:16px; font-size:.75rem; text-decoration:none; }
.statusstrip { margin:0 auto; border:1px solid var(--line); background:#101b24; box-shadow:none; width:calc(100% - 80px); max-width:1240px; padding:22px 28px; border-radius:6px; }
.ss-main { border-right-color:var(--line); }
.ss-main b { font-family:inherit; font-size:.9rem; }
.ss-state { color:var(--muted); }
.journey { padding-top:70px; padding-bottom:55px; }
.section-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:32px; }
.section-intro .eyebrow { margin:0; }
.section-intro h2 { font-size:1.6rem; }
.journey-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:24px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.journey-steps li { display:flex; gap:20px; padding:30px 22px; border-right:1px solid var(--line); }
.journey-steps li:first-child { padding-left:0; }
.journey-steps li:last-child { border-right:0; }
.step-number { color:var(--gilt-hi); font-family:var(--display); font-size:1.1rem; }
.journey-steps h3 { font-family:inherit; font-size:.95rem; font-weight:600; margin:0 0 8px; }
.journey-steps h3 a { color:var(--bone); text-decoration:none; }
.journey-steps h3 a span { color:var(--gilt-hi); margin-left:10px; }
.journey-steps p { font-size:.85rem; color:var(--muted); margin:0; }
.home-body { padding-top:16px; padding-bottom:70px; grid-template-columns:minmax(0,1fr) 320px; gap:45px; }
.sechead { margin-bottom:24px; border:0; }
.sechead h2 { font-size:1.65rem; }
.sechead a { font-size:.8rem; }
.newscard { border-radius:6px; border:1px solid var(--line); background:var(--lacquer); }
.newsgrid.n1 { grid-template-columns:1fr; }
.newsgrid.n1 .newscard { display:grid; grid-template-columns:40% 1fr; }
.newsgrid.n1 .newscard > img { height:100%; min-height:250px; object-fit:cover; object-position:75%; }
.nc-body { padding:26px; }
.nc-body time { color:var(--gilt-hi); font-size:.7rem; letter-spacing:.06em; }
.nc-body h2,.nc-body h3 { font-size:1.35rem; }
.nc-body p { color:var(--muted); font-size:.875rem; }
.topblock { background:none; border:0; padding:0; }
.toplist li { border-color:var(--line); }
.worldband { display:flex; flex-wrap:wrap; gap:20px; align-items:center; background:linear-gradient(110deg,#182a36,#111d28); border:1px solid var(--line); border-radius:6px; margin-bottom:80px; padding-top:38px; padding-bottom:38px; width:calc(100% - 80px); max-width:1240px; }
.worldband > div { flex:1; min-width:200px; }
.worldband .eyebrow { margin-bottom:12px; }
.worldband h2 { font-size:1.8rem; }
.worldband p:last-child { color:var(--muted); margin:12px 0 0; }
.pagebanner { min-height:225px; background:radial-gradient(ellipse at 85% 0,#263e4c,transparent 65%),#101d28; }
.pagebanner::before { background:linear-gradient(0deg,#0b121999,transparent); }
.pagebanner h1 { font-size:clamp(2rem,4vw,3rem); font-weight:500; text-shadow:none; }
.pagebanner .eyebrow { margin-bottom:14px; }
.pagebanner p { color:var(--muted); text-shadow:none; }
.pb-in { padding-top:46px; padding-bottom:40px; }
.panel,.wallet,.gatebox { border-radius:6px; background:var(--lacquer); border-color:var(--line); box-shadow:none; }
.wallet { padding:18px 22px; }
.wallet b { font-size:1.4rem; }
.gate { background:#0e1b26 var(--gate) right center / cover; min-height:740px; }
.gate::before { background:linear-gradient(90deg,#0b1219ed,#0b1219a8 50%,transparent); }
.gate-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); align-items:center; gap:80px; padding-top:60px; padding-bottom:60px; }
.gate-copy { margin:0; max-width:460px; }
.gate-copy .gate-name { font-weight:500; font-size:3rem; line-height:1.2; color:#f2eee5; }
.gate-copy p:not(.gate-name) { font-size:1.1rem; font-style:normal; color:var(--muted); margin-top:24px; }
.gatebox { max-width:none; padding:34px; border-top:2px solid var(--gilt-hi); background:#101b24f5; }
.gatebox h1 { font-weight:500; }
.form input:not([type=checkbox]),.form select { border-radius:4px; background:#0b141d; border-color:#4a5964; min-height:46px; }
.form label { font-size:.875rem; }
.form small { color:var(--muted); }
.ostile { border-radius:6px; border-color:var(--line); }
.ostile > img { opacity:.3; object-position:right; }
.ostile::after { background:linear-gradient(90deg,#111d28e8,#111d2855); }
.item,.itemcard { border-radius:6px; }
.rail a.on { border-color:var(--gilt-hi); }
.itemgrid,.offergrid { gap:18px; }
.rank th { background:#182733; }
.rank td { border-color:var(--line); }
.guidewrap,.supportwrap { padding-top:40px; padding-bottom:70px; }
.guide-nav { display:flex; gap:30px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line); }
.guide-nav a { color:var(--muted); text-decoration:none; font-size:.875rem; }
.guide-section { padding:50px 0; scroll-margin-top:100px; }
.guide-section h2,.faq h2 { font-size:2rem; margin-bottom:24px; }
.guide-section .intro { color:var(--muted); max-width:650px; }
.path-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; padding:0; gap:16px; margin-top:30px; }
.path-grid li { padding:24px 18px; border:1px solid var(--line); border-radius:6px; background:var(--lacquer); }
.path-grid img { margin-bottom:24px; }
.path-grid h3 { font-size:1.1rem; margin-bottom:16px; }
.path-grid p { font-size:.85rem; color:var(--muted); margin:0; }
.world-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; border-top:1px solid var(--line); }
.empire-list { display:flex; gap:24px; flex-wrap:wrap; margin:24px 0; }
.empire-list span { display:flex; gap:8px; align-items:center; }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.help-grid .panel { padding:32px; margin:0; }
.help-index { color:var(--gilt-hi); display:block; font-family:var(--display); margin-bottom:25px; }
.help-grid h2 { font-size:1.4rem; margin-bottom:16px; }
.help-grid p { color:var(--muted); max-width:480px; }
.faq { max-width:850px; margin:70px auto 0; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; padding:24px 0; font-weight:600; }
.faq details p { color:var(--muted); margin-bottom:24px; }
.footer { background:#080f16; border-color:var(--line); }
.footer-in { padding-top:40px; padding-bottom:40px; }
.footbrand > img { width:48px; height:48px; opacity:.7; }
.footbrand strong { font-size:1.2rem; }
.footnav { gap:8px 24px; }
.footnav a,.langs a { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:1180px) { .masthead-in { gap:16px; } .mainnav a { padding:0 8px; font-size:.8rem; } .brand span { font-size:1rem; } .useractions { gap:10px; } }
@media (max-width:1050px) and (min-width:981px) { .wrap { padding-left:24px; padding-right:24px; } .mainnav a { padding:0 6px; } .brand { gap:7px; } .brand img { width:30px; } .useractions .btn { padding:0 10px; } }
@media (max-width:980px) { .masthead-in { gap:0 16px; min-height:76px; } .brand { min-height:76px; } .navpanel { align-self:auto; } .mainnav { justify-content:flex-start; } .mainnav a { font-size:.95rem; } .js .mainnav a.on { background:#24343d; } .js .navpanel { max-height:calc(100dvh - 100px); overflow-y:auto; } .realm-copy { width:65%; } .home-body { grid-template-columns:minmax(0,1fr) 270px; gap:24px; } .path-grid { grid-template-columns:repeat(3,1fr); } .gate-in { gap:35px; grid-template-columns:1fr 1.2fr; } .gate-copy .gate-name { font-size:2.3rem; } }
@media (max-width:760px) {
 .wrap { padding-left:22px; padding-right:22px; } .utility-in { min-height:36px; } .utility-in > span { font-size:.65rem; } .utility-in > div { gap:16px; } .utility-in > div > a:first-child { display:none; }
 .realm-hero { background-size:auto 540px; background-position:70% top; } .realm-hero::before { background:linear-gradient(0deg,#0b1219 8%,#0b1219c9 50%,#0b121940 100%); }
 .realm-inner { min-height:690px; display:block; padding-top:210px; } .realm-copy { width:100%; padding:0 0 40px; } .realm-copy h1 { font-size:2.75rem; max-width:500px; } .realm-copy .eyebrow { font-size:.62rem; margin-bottom:16px; } .realm-lead { margin:20px 0 24px; font-size:.95rem; max-width:450px; }
 .realm-caption { display:none; } .realm-facts { margin-top:22px; font-size:.7rem; gap:8px 16px; } .realm-copy .cta { gap:12px; } .realm-copy .btn { padding:0 16px; font-size:.8rem; }
 .statusstrip { width:calc(100% - 44px); padding:20px; display:flex; flex-wrap:wrap; gap:20px; } .ss-list { flex-wrap:wrap; flex:1; gap:12px; } .ss-main { border:0; flex-basis:100%; } .ss-online { border:0; padding:0; }
 .journey { padding-top:44px; padding-bottom:36px; } .section-intro { display:block; margin-bottom:24px; } .section-intro .eyebrow { margin-bottom:14px; } .section-intro h2 { font-size:1.45rem; }
 .journey-steps { grid-template-columns:1fr; } .journey-steps li,.journey-steps li:first-child { padding:24px 0; border-right:0; border-bottom:1px solid var(--line); } .journey-steps li:last-child { border-bottom:0; }
 .home-body { display:grid; grid-template-columns:1fr; padding-bottom:40px; gap:40px; } .newsgrid.n1 .newscard { display:block; } .newsgrid.n1 .newscard > img { height:180px; width:100%; min-height:0; } .nc-body { padding:24px; }
 .worldband { width:calc(100% - 44px); margin-bottom:44px; padding-top:28px; padding-bottom:28px; } .worldband > div { flex-basis:100%; } .worldband h2 { font-size:1.5rem; }
 .gate { min-height:0; background-size:auto 500px; background-position:70% top; } .gate::before { background:linear-gradient(0deg,#0b1219 35%,#0b12196b); } .gate-in { display:block; padding-top:110px; padding-bottom:40px; } .gate-copy { margin-bottom:28px; } .gate-copy .gate-name { font-size:2rem; } .gate-copy p:not(.gate-name) { margin-top:12px; font-size:.95rem; } .gatebox { padding:24px; }
 .path-grid { grid-template-columns:1fr 1fr; } .path-grid li { padding:20px 16px; } .world-grid,.help-grid { grid-template-columns:1fr; gap:24px; } .help-grid .panel { padding:24px; } .guide-section { padding:35px 0; } .guide-section h2,.faq h2 { font-size:1.6rem; } .guide-nav { gap:16px 24px; } .guidewrap,.supportwrap { padding-top:28px; padding-bottom:40px; } .faq { margin-top:45px; }
 .pagebanner { min-height:190px; } .pagebanner p { font-size:.9rem; } .pb-in { padding-top:32px; padding-bottom:30px; } .wallet { width:100%; padding:16px; }
 .footbrand { gap:16px; } .footbrand > img { width:36px; height:36px; } .footer-in { gap:24px; } .footnav { gap:0 24px; }
}
@media (max-width:360px) { .realm-copy h1 { font-size:2.3rem; } .realm-copy .cta { flex-direction:column; align-items:stretch; } .path-grid { grid-template-columns:1fr; } }
/* Keep the catalogue ahead of promotional content, and keep footers compact. */
.home-body { margin-top:0; margin-bottom:0; }
.newsgrid.n1 .newscard > img { width:100%; }
.newscard.lead .nc-body { padding:26px; }
.offers { margin-top:48px; }
.footer-in { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr) auto; gap:40px; align-items:start; }
.footnav { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.footnav a { font-size:.85rem; }
@media (max-width:980px) { .footer-in { grid-template-columns:1fr 1fr; } .langs { grid-column:1/-1; } }
@media (max-width:760px) { .footer-in { grid-template-columns:1fr; gap:24px; } .footnav { display:flex; flex-wrap:wrap; gap:0 24px; } .langs { grid-column:auto; } .newscard.lead .nc-body { padding:24px; } }
.account-overview,.account-security { display:grid; gap:20px; min-width:0; }
.account-overview .roster h2 { margin-bottom:20px; }
.account-overview .panel { margin:0; }
.charcard { border-radius:6px; }
.footer { padding:12px 0; }
/* Allow ledger tables to scroll inside their panel on the narrowest phones. */
.histwrap { grid-template-columns:minmax(0,1fr); }
.histwrap > .panel { min-width:0; }
.tablewrap { max-width:100%; }

/* v3: real client captures and shipped loading art. */
.realm-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center; }
.realm-hero::before { z-index:1; background:linear-gradient(90deg,#0b1219f2 0%,#0b1219c9 30%,#0b12193d 66%,#0b121917),linear-gradient(0deg,#0b1219,transparent 32%); }
.realm-inner { z-index:2; }
.pagebanner { background:#101d28 var(--pb, url(/static/img/game/banner-ruins.webp)) center 45% / cover; }
.pagebanner::before { background:linear-gradient(90deg,#0b1219eb,#0b1219a3 55%,#0b121955); }
.worldband { background:linear-gradient(90deg,#111d28f5,#111d28b0),url(/static/img/game/scene-snow.webp) center / cover; }
.path-grid li { padding:0 0 24px; overflow:hidden; }
.path-grid .class-art { display:block; width:100%; height:auto; aspect-ratio:360/518; object-fit:cover; margin:0 0 18px; }
.path-grid h3,.path-grid p,.class-identity { margin-left:18px; margin-right:18px; }
.class-identity { display:flex; align-items:center; gap:12px; height:40px; margin-bottom:14px; }
.class-identity img { margin:0; object-fit:contain; }
.class-identity .class-hanja { max-width:80px; max-height:36px; }
.ostile > img { opacity:.6; }
@media(max-width:800px) { .realm-hero::before { background:linear-gradient(90deg,#0b1219da,#0b121980),linear-gradient(0deg,#0b1219,transparent); } .pb-army { --pb:url(/static/img/game/banner-army-800.webp); } .pb-ruins { --pb:url(/static/img/game/banner-ruins-800.webp); } .pb-storm { --pb:url(/static/img/game/banner-storm-800.webp); } .pb-courtyard { --pb:url(/static/img/game/hero-courtyard-640.webp); } .worldband { background-image:linear-gradient(90deg,#111d28f5,#111d28b0),url(/static/img/game/scene-snow-960.webp); } }
/* Account names must fit the page banner even at the narrowest phone width. */
.pb-in > div { min-width:0; max-width:100%; }
.pagebanner h1 { overflow-wrap:anywhere; }

/* Polish pass 2026-10-28 (owner-approved v3 layout): one primary action colour, quieter labels,
   readable hero art on phones, aligned download tiles, left-aligned guide intro. */
.btn-red { background: #dfbd85; border-color: #dfbd85; color: #14202b; }
.btn-red:hover { filter: brightness(1.08); color: #0e1820; }
.realm-copy .eyebrow { text-transform: none; letter-spacing: 0; font: 500 1.05rem/1.4 var(--display); color: var(--gilt-hi); margin-bottom: 18px; }
.realm-scene { object-position: 62% 58%; }
.statusstrip { grid-template-columns: auto minmax(0, 1fr) auto; }
.ss-list { align-items: center; }
.ss-list li:last-child { border-right: 0; }
.guide-section .intro { margin-left: 0; margin-right: 0; }
.ostile { align-items: stretch; }
.ot-body { justify-content: flex-start; padding-top: 2.75rem; }
.path-grid li:last-child .class-art { object-position: 50% 20%; }
@media (max-width: 760px) {
  .realm-hero::before { background: linear-gradient(0deg, #0b1219 44%, #0b1219d0 58%, #0b121900 82%); }
  .realm-scene { height: 380px; object-position: 70% 60%; }
  .realm-inner { padding-top: 250px; }
  .ot-body { padding-top: 1.6rem; }
}
.ostile { min-height: 300px; }
.ot-body { padding-bottom: 2.25rem; }
@media (max-width: 760px) {
  .statusstrip .ss-main { background: none; padding: 0; }
  .ss-list li { border: 0; padding: .35rem 0; flex: 0 0 auto; }
  .ss-list { gap: 4px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
}