/* Dekaron Online — website theme. Dark/gold, no game-client assets: everything here is CSS/SVG. */

700;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #0a0907;
  --bg-alt: #16130e;
  --panel: #1b160f;
  --panel-2: #221c13;
  --border: #4a3a20;
  --border-soft: #33291a;
  --gold: #d4af37;
  --gold-bright: #f3d878;
  --gold-dim: #8a6d2f;
  --text: #eae2d0;
  --text-dim: #ab9d84;
  --text-faint: #786c58;
  --danger: #e0574a;
  --danger-bg: #2a1512;
  --success: #59c78a;
  --radius: 8px;
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --shadow-gold: 0 0 0 1px rgba(212, 175, 55, .18), 0 8px 24px rgba(0, 0, 0, .45);
  --max-w: 1120px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 480px at 50% -10%, rgba(212, 175, 55, .08), transparent 60%),
    linear-gradient(180deg, var(--bg-alt), var(--bg) 420px);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; color: var(--gold-bright); margin: 0 0 .5em; }
p { margin: 0 0 1em; color: var(--text-dim); }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 9, 7, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; height: 64px;
}
.brand {
  font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--gold-bright);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.brand:hover { text-decoration: none; filter: brightness(1.1); }
.brand-mark { color: var(--gold); font-size: 20px; }
.brand-accent { color: var(--text); font-weight: 500; }
.site-nav { display: flex; gap: 4px; flex: 1; }
.site-nav a {
  color: var(--text-dim); font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 6px;
}
.site-nav a:hover { color: var(--gold-bright); text-decoration: none; background: rgba(212, 175, 55, .07); }
.site-nav a.active { color: var(--gold-bright); background: rgba(212, 175, 55, .1); }
.header-auth { display: flex; align-items: center; gap: 10px; }
.header-user { font-size: 13px; color: var(--text-dim); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  padding: 9px 18px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  transition: filter .15s, transform .1s, background .15s; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #211a0c; border-color: var(--gold);
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-play {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #211a0c; border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212, 175, 55, .35);
}
.btn-play:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn-danger { background: transparent; color: var(--danger); border-color: #5a2a24; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- hero ---------- */
.hero {
  padding: 88px 20px 64px; text-align: center; position: relative;
  border-bottom: 1px solid var(--border-soft);
}
.hero-crest { font-size: 40px; margin-bottom: 12px; color: var(--gold); }
.hero h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 14px; text-shadow: 0 0 30px rgba(212, 175, 55, .25); }
.hero .tagline { font-size: 18px; color: var(--text-dim); max-width: 560px; margin: 0 auto 32px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { padding: 13px 28px; font-size: 15px; }

/* ---------- sections / panels ---------- */
section { padding: 56px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 26px; }
.section-head .sub { color: var(--text-faint); font-size: 14px; }

.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-gold);
}
.panel-pad { padding: 24px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 14px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.feature-card { padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border-soft); }
.feature-card .icon { font-size: 26px; color: var(--gold); margin-bottom: 10px; display: block; }
.feature-card h3 { font-size: 16px; margin-bottom: 6px; }
.feature-card p { font-size: 14px; margin: 0; }

/* ---------- news ---------- */
.news-list { display: flex; flex-direction: column; gap: 14px; }
.news-item {
  display: grid; grid-template-columns: 96px 1fr; gap: 18px;
  padding: 18px 20px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--gold-dim);
}
.news-item .date { color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding-top: 3px; }
.news-item .tag {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gold-bright); background: rgba(212, 175, 55, .12); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 7px; margin-bottom: 6px;
}
.news-item h3 { font-size: 16px; margin: 0 0 6px; color: var(--text); }
.news-item p { margin: 0; font-size: 14px; }

/* ---------- forms ---------- */
.auth-shell { max-width: 400px; margin: 64px auto; padding: 0 20px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; letter-spacing: .02em; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; font-family: var(--font-body); font-size: 14px; outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .15); }
.field textarea { resize: vertical; min-height: 100px; }
.field .hint { font-size: 12px; color: var(--text-faint); margin-top: 5px; }
.form-msg { padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; display: none; }
.form-msg.error { display: block; background: var(--danger-bg); color: var(--danger); border: 1px solid #5a2a24; }
.form-msg.ok { display: block; background: rgba(89, 199, 138, .1); color: var(--success); border: 1px solid #2c5a41; }
.form-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-dim); }

/* ---------- forums ---------- */
.category-list { display: flex; flex-direction: column; gap: 12px; }
.category-row {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.category-row:hover { border-color: var(--gold-dim); }
.category-row .name { font-family: var(--font-display); font-size: 17px; color: var(--gold-bright); }
.category-row .desc { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.category-row .count { margin-left: auto; text-align: right; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.category-row .count b { color: var(--gold); font-size: 15px; display: block; font-family: var(--font-display); }

.thread-list { display: flex; flex-direction: column; gap: 10px; }
.thread-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.thread-row .title { color: var(--text); font-weight: 600; font-size: 15px; }
.thread-row .title:hover { color: var(--gold-bright); }
.thread-row .meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.thread-row .pin { color: var(--gold); font-size: 12px; margin-right: 6px; }
.thread-row .stat { margin-left: auto; text-align: center; font-size: 12px; color: var(--text-faint); min-width: 56px; }
.thread-row .stat b { display: block; color: var(--gold-bright); font-size: 15px; font-family: var(--font-display); }

.breadcrumb { font-size: 13px; color: var(--text-faint); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-dim); }

.post {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px;
  padding: 20px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.post + .post { margin-top: 12px; }
.post .author { font-family: var(--font-display); color: var(--gold-bright); font-size: 14px; word-break: break-word; }
.post .author .op-tag { display: block; font-family: var(--font-body); font-size: 10px; color: var(--gold); text-transform: uppercase; margin-top: 4px; }
.post .when { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.post .body { font-size: 14px; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }

/* ---------- rankings ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-soft); }
table.rankings { width: 100%; border-collapse: collapse; background: var(--panel); }
table.rankings th, table.rankings td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border-soft); }
table.rankings th { font-family: var(--font-display); color: var(--gold-bright); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; background: var(--panel-2); }
table.rankings tr:last-child td { border-bottom: none; }
table.rankings tr:hover td { background: rgba(212, 175, 55, .04); }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 12px; }
.rank-badge.r1 { background: linear-gradient(180deg, #f3d878, #b8892a); color: #241a05; }
.rank-badge.r2 { background: linear-gradient(180deg, #e4e4e4, #9c9c9c); color: #222; }
.rank-badge.r3 { background: linear-gradient(180deg, #d79a6c, #9c5a2f); color: #24140a; }

.empty-state {
  text-align: center; padding: 56px 24px; color: var(--text-dim);
  background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
}
.empty-state .icon { font-size: 32px; color: var(--gold-dim); margin-bottom: 10px; display: block; }
.empty-state h3 { color: var(--text); margin-bottom: 6px; font-size: 16px; }
.empty-state p { margin: 0; font-size: 13px; }

.skeleton { color: var(--text-faint); font-size: 13px; padding: 24px; text-align: center; }

/* ---------- downloads ---------- */
.download-card { display: flex; align-items: center; gap: 20px; padding: 26px; flex-wrap: wrap; }
.download-card .file-icon { font-size: 34px; color: var(--gold); }
.download-card .info { flex: 1; min-width: 200px; }
.download-card .info .fname { font-family: var(--font-display); font-size: 16px; color: var(--gold-bright); }
.download-card .info .fmeta { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--border-soft);
  font-size: 14px; color: var(--text-dim);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 12px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--panel-2); border: 1px solid var(--gold-dim); color: var(--gold-bright);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.steps li b { color: var(--text); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border-soft); padding: 32px 20px; margin-top: 48px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.site-footer p { margin: 0; font-size: 13px; color: var(--text-faint); }
.site-footer .foot-links { display: flex; gap: 18px; }
.site-footer .foot-links a { color: var(--text-dim); font-size: 13px; }

@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 12px 20px; gap: 10px; }
  .site-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
  .header-auth { margin-left: auto; }
  .hero { padding: 56px 16px 40px; }
  .post { grid-template-columns: 1fr; }
  .post .author { display: flex; align-items: center; gap: 8px; }
  .news-item { grid-template-columns: 1fr; }
}
/* Modern portal: independently generated fantasy artwork, native fonts, no external resources. */
:root { --bg:#0c1013; --bg-alt:#141a1e; --panel:#151c21; --panel-2:#1b242b; --border:#39454b; --border-soft:#28333a; --gold:#caa77d; --gold-bright:#ebca9f; --gold-dim:#9f8160; --text:#f1f0e9; --text-dim:#aab3b9; --text-faint:#9ba6ae; --danger:#ff9c8e; --danger-bg:#35201f; --success:#8bd5b3; --radius:3px; --font-display:Georgia,'Times New Roman',serif; --font-body:'Segoe UI',system-ui,sans-serif; --shadow-gold:none; --max-w:1240px; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { background:var(--bg); font-size:16px; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 0 45%,#17262950,transparent 50%); z-index:-1; }
h1,h2,h3 { color:var(--text); font-weight:400; letter-spacing:-.035em; }
h2 { line-height:1.1; }
a:hover { text-decoration:none; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--gold-bright); outline-offset:5px; }
main { min-height:calc(100vh - 290px); }
.wrap { padding:0 32px; }
section { padding:80px 0; }
.site-header { background:#0c1013ed; backdrop-filter:blur(18px); border-color:#ffffff12; }
.header-inner { max-width:1440px; height:88px; padding:0 32px; gap:24px; }
.brand { color:var(--text); font-size:22px; font-weight:400; letter-spacing:-.03em; gap:12px; }
.brand small { font:10px var(--font-body); display:block; letter-spacing:.3em; color:var(--gold); margin-top:2px; }
.brand-mark { font-family:Georgia,serif; font-size:30px; color:var(--gold); border:1px solid #caa77d66; width:39px; height:45px; display:grid; place-items:center; clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); }
.site-nav { justify-content:center; gap:12px; }
.site-nav a { font-size:12px; text-transform:none; letter-spacing:.02em; padding:9px 4px; border-radius:0; }
.site-nav a.active { background:transparent; color:var(--text); border-bottom:1px solid var(--gold); }
.site-nav a:hover { background:transparent; color:var(--text); }
.header-auth { gap:7px; }
.header-auth .btn { font-size:11px; padding:9px 11px; }
.header-user { display:none; }
.btn { border-radius:2px; padding:13px 21px; font-size:12px; font-weight:600; letter-spacing:.04em; transition:background .2s,transform .2s,border-color .2s; }
.btn-play,.btn-gold { background:var(--gold); border-color:var(--gold); box-shadow:none; color:#141719; }
.btn-play:hover,.btn-gold:hover { background:#ecd2b3; transform:translateY(-2px); filter:none; }
.btn-ghost { border-color:#ffffff33; background:#0c101333; }
.btn-ghost:hover { background:#ffffff08; }
.text-link { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.035em; color:var(--gold-bright); }
.eyebrow { display:block; font:10px var(--font-body); font-weight:600; letter-spacing:.2em; color:var(--gold); margin-bottom:18px; text-transform:uppercase; }
.line { display:inline-block; width:28px; height:1px; background:var(--gold); vertical-align:middle; margin-right:12px; }
.cinematic-hero { position:relative; text-align:left; min-height:690px; border:0; padding:0; overflow:hidden; background:linear-gradient(90deg,#0c1013f2 0%,#0c1013b5 35%,#0c101320 75%),linear-gradient(0deg,#0c1013 0%,transparent 50%),url('../../client-assets/launcher-background-v1.png') center 25% / cover; }
.hero-inner { padding-top:110px; padding-bottom:135px; position:relative; }
.hero h1 { font-size:clamp(58px,6.9vw,96px); line-height:1.03; margin-bottom:26px; text-shadow:none; letter-spacing:-.055em; }
.hero h1 em { color:var(--gold-bright); font-weight:400; }
.hero .tagline { max-width:440px; margin:0 0 30px; font-size:16px; line-height:1.8; color:#c6cbd0; }
.hero-cta { justify-content:flex-start; gap:12px; }
.hero-cta .btn { font-size:12px; padding:16px 25px; }
.hero-notes { display:flex; gap:20px; margin-top:24px; color:#aeb6bb; font-size:10px; }
.hero-notes span + span::before { content:'·'; margin-right:20px; color:var(--gold); }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; padding-bottom:28px; border-bottom:1px solid var(--border-soft); font-size:11px; }
.hero-bottom a { color:#c2c9ce; }
.hero-bottom a span { margin-left:22px; }
.service-status { color:var(--text-dim); }
.service-status::before { content:''; display:inline-block; height:5px; width:5px; border-radius:50%; background:var(--text-faint); margin-right:9px; }
.service-status.connected::before { background:var(--success); }
.intro-strip { display:grid; grid-template-columns:1fr 2fr 1fr; gap:30px; align-items:center; padding-top:42px; padding-bottom:42px; border-bottom:1px solid var(--border-soft); }
.intro-strip > span { font-size:9px; letter-spacing:.2em; color:var(--gold); }
.intro-strip p { font:26px/1.35 var(--font-display); margin:0; color:var(--text); }
.intro-strip .text-link { justify-self:end; }
.section-head { align-items:end; margin-bottom:32px; }
.section-head h2 { font-size:clamp(30px,3.5vw,44px); }
.section-head .eyebrow { margin-bottom:13px; }
.section-head .sub { max-width:270px; line-height:1.7; margin:0; font-size:12px; }
.dispatch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dispatch-grid > :only-child { grid-column:1/-1; }
.dispatch-card { padding:30px; border-top:1px solid var(--gold-dim); border-bottom:1px solid var(--border-soft); background:#151c2166; }
.dispatch-card .eyebrow { font-size:9px; }
.dispatch-card h3 { font-size:26px; max-width:520px; line-height:1.3; }
.dispatch-card p { font-size:13px; line-height:1.8; }
.class-section { background:#131a1f; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.class-explorer { display:grid; grid-template-columns:1fr 1.5fr; border:1px solid var(--border-soft); }
.class-menu { display:grid; grid-template-columns:1fr 1fr; align-content:start; padding:18px; gap:1px; background:#0c101399; }
.class-option { display:flex; gap:12px; align-items:center; text-align:left; border:0; color:var(--text-dim); background:none; padding:15px 12px; font:12px var(--font-body); cursor:pointer; }
.class-option span { color:var(--gold-dim); font-size:9px; }
.class-option:hover,.class-option.selected { background:#caa77d16; color:var(--gold-bright); }
.class-option.selected { box-shadow:inset 2px 0 var(--gold); }
.class-detail { padding:60px 45px; position:relative; overflow:hidden; background:linear-gradient(130deg,#1c2a31,#12181d); display:flex; flex-direction:column; justify-content:center; }
.class-detail > :not(.class-art-mark) { position:relative; z-index:1; }
.class-detail h3 { font-size:clamp(32px,4vw,52px); margin-bottom:25px; }
.class-detail p { font-size:14px; line-height:1.9; max-width:380px; }
.class-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:22px 0; margin:10px 0 25px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.class-stats strong { display:block; font:27px var(--font-display); color:var(--gold-bright); }
.class-stats span { font-size:9px; color:var(--text-faint); }
.class-art-mark { position:absolute; right:-25px; bottom:-40px; font:390px Georgia; color:#caa77d07; line-height:1; }
.world-gallery { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.world-card { height:290px; margin:0; position:relative; overflow:hidden; background:#141c24; }
.world-card-wide { grid-column:1/-1; height:380px; }
.world-card img { width:100%; height:133%; object-fit:cover; position:absolute; inset:0; object-position:center 27%; transition:transform .8s; }
.world-card:hover img { transform:scale(1.025); }
.world-illustration { position:absolute; inset:0; overflow:hidden; }
.moon-gate { background:radial-gradient(circle at 58% 19%,#efe7ca 0 4%,#b3bbbd44 4.5% 9%,transparent 21%),linear-gradient(155deg,#152b38,#07111b 76%); }
.moon-gate::before { content:''; position:absolute; width:48%; height:95%; left:27%; top:18%; border-radius:48% 48% 0 0; border:18px solid #243039; box-shadow:0 0 0 4px #8b827d22,30px 0 45px #050a10,-30px 0 45px #050a10,inset 0 0 45px #50788877; background:linear-gradient(0deg,#07111b,#496b8133); }
.ember-depths { background:radial-gradient(ellipse at 65% 50%,#e7a56555,transparent 17%),radial-gradient(ellipse at 35% 70%,#ad263d77,transparent 42%),linear-gradient(135deg,#1a1721,#171c22 50%,#2c1720); }
.ember-depths::before { content:''; position:absolute; inset:-10%; background:repeating-conic-gradient(from 20deg at 58% 70%,transparent 0 15deg,#0a0e16cc 17deg 29deg,transparent 31deg 50deg); }
.ember-depths::after { content:''; position:absolute; width:3px; height:70%; left:58%; top:10%; background:linear-gradient(transparent,#b85943,#edb97b,transparent); transform:rotate(21deg); box-shadow:0 0 25px #dc6434; }
.world-card::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#070d13ed,transparent 80%); }
.world-card figcaption { position:absolute; bottom:30px; left:30px; z-index:1; }
.world-card figcaption span { font-size:9px; letter-spacing:.18em; color:var(--gold-bright); }
.world-card h3 { margin:10px 0 0; font-size:28px; }
.start-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border-soft); }
.start-card { padding:38px 30px; background:#151c2140; }
.start-card + .start-card { border-left:1px solid var(--border-soft); }
.step-number { font:32px var(--font-display); color:var(--gold-dim); }
.start-card h3 { margin:32px 0 15px; font-size:27px; }
.start-card p { font-size:13px; line-height:1.9; min-height:74px; }
.faq-section { display:grid; grid-template-columns:1fr 1.4fr; gap:70px; }
.faq-section h2 { font-size:40px; }
.faq-list details { border-bottom:1px solid var(--border-soft); padding:22px 0; }
.faq-list details:first-child { padding-top:0; }
.faq-list summary { cursor:pointer; font-size:14px; color:var(--text); }
.faq-list p { margin:20px 0 0; font-size:13px; line-height:1.8; }
.closing-cta { text-align:center; padding:80px 0; background:linear-gradient(90deg,#0c1013dc,#0c1013aa),url('../../client-assets/launcher-background-v1.png') center 25% / cover; border-top:1px solid var(--border-soft); }
.closing-cta h2 { font-size:clamp(42px,5vw,64px); margin-bottom:28px; }
.site-footer { background:#090d10; padding:50px 0; margin-top:0; }
.site-footer .brand { font-size:19px; }
.site-footer p { font-size:11px; line-height:1.9; }
.site-footer .foot-links a { font-size:11px; }
.auth-shell { max-width:1120px; padding:0 32px; margin:80px auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.auth-story { min-height:540px; padding:50px 38px; background:linear-gradient(0deg,#0c1013ef,transparent),url('../../client-assets/launcher-background-v1.png') center 20% / cover; display:flex; flex-direction:column; justify-content:flex-end; }
.auth-story h2 { font-size:47px; margin:0 0 20px; }
.auth-story p { font-size:14px; line-height:1.9; max-width:330px; }
.auth-shell > .panel { background:transparent; border:0; box-shadow:none; padding:0; }
.auth-shell h1 { font-size:38px!important; text-align:left!important; }
.auth-shell > .panel > p { text-align:left!important; font-size:13px; line-height:1.8; }
.field { margin-bottom:21px; }
.field label { color:#c4ccd1; font-size:12px; }
.field input,.field textarea,.field select { min-height:47px; border:1px solid var(--border); background:#0b1115; border-radius:2px; font-size:14px; }
.field .hint,.hint { font-size:11px; line-height:1.75; color:var(--text-faint); }
.form-msg { font-size:12px; padding:14px; border-radius:2px; line-height:1.7; }
.form-msg:empty { display:none; }
.form-foot { margin-top:25px; padding-top:22px; border-top:1px solid var(--border-soft); }
.auth-security { display:block; font-size:10px; color:var(--text-faint); line-height:1.7; text-align:center; margin-top:20px; }
.panel-pad { padding:32px; }
.account-actions .btn { white-space:normal; }
.account-summary { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:30px; gap:15px; }
.account-stat { background:var(--panel); border:1px solid var(--border-soft); padding:25px; }
.account-stat span { display:block; color:var(--text-dim); font-size:11px; }
.account-stat strong { display:block; font:28px var(--font-display); margin-top:9px; overflow-wrap:anywhere; }
.category-row { padding:25px; background:linear-gradient(100deg,#1a2329,#121a20); border-radius:3px; transition:background .2s; }
.category-row:hover { background:#202b32; }
.category-row .name { font-size:22px; color:var(--text); }
.category-row .desc { font-size:12px; margin-top:7px; }
.thread-row { padding:22px; }
.empty-state { border-style:solid; padding:70px 25px; background:linear-gradient(130deg,#182128,#11181d); }
.empty-state h3 { font-size:25px; }
.empty-state .icon { font-size:25px; }
table.rankings th { font:10px var(--font-body); letter-spacing:.1em; padding:18px 22px; }
table.rankings td { padding:21px 22px; font-size:13px; }
.download-card { padding:35px; background:linear-gradient(100deg,#202d34,#141b20); }
.download-card .file-icon { font:33px Georgia; }
.download-card .info .fname { font-size:27px; }
.download-card .info .fmeta { font-size:12px; }
.steps li { padding:22px 0 22px 52px; line-height:1.9; font-size:13px; }
.steps li::before { top:23px; border-radius:0; background:transparent; }
.feature-card { padding:28px; }
.feature-card h3 { font-size:23px; }
.feature-card p { line-height:1.8; font-size:13px; }
@media(max-width:1100px) { .header-inner { gap:16px; } .site-nav { gap:9px; } .header-auth .btn { padding:8px; } .brand { font-size:19px; } .header-inner > .btn { padding:12px 15px; } }
@media(max-width:900px) { .header-inner { flex-wrap:wrap; height:auto; padding:15px 24px; } .site-nav { order:3; flex-basis:100%; justify-content:flex-start; gap:26px; border-top:1px solid var(--border-soft); padding-top:9px; } .header-auth { margin-left:auto; } .class-explorer { grid-template-columns:1fr; } .class-menu { grid-template-columns:repeat(3,1fr); } .auth-shell { gap:32px; } .auth-story { padding:30px; } .auth-story h2 { font-size:38px; } }
@media(max-width:640px) { .wrap { padding-left:22px; padding-right:22px; } section { padding:55px 0; } .header-inner { padding:13px 18px; gap:12px; } .brand-mark { width:30px; height:35px; font-size:24px; } .brand { font-size:17px; gap:8px; } .brand small { font-size:8px; } .header-inner > .btn-play { display:none; } .header-auth .btn { padding:9px; font-size:10px; } .site-nav { gap:25px; justify-content:space-between; } .site-nav a { font-size:11px; } .cinematic-hero { min-height:650px; background-position:65% 25%; } .hero-inner { padding-top:80px; padding-bottom:80px; } .hero h1 { font-size:58px; } .hero .tagline { font-size:14px; } .hero-notes { font-size:8px; gap:10px; flex-wrap:wrap; } .hero-notes span + span::before { margin-right:10px; } .hero-bottom { font-size:9px; padding-bottom:22px; } .intro-strip { grid-template-columns:1fr; gap:18px; padding-top:30px; padding-bottom:30px; } .intro-strip .text-link { justify-self:start; } .dispatch-grid,.world-gallery,.start-grid,.faq-section { grid-template-columns:1fr; } .class-menu { grid-template-columns:1fr 1fr; } .class-option { padding:13px 7px; gap:8px; font-size:11px; } .class-detail { padding:35px 24px; } .class-stats span { font-size:8px; } .world-card-wide { grid-column:auto; height:290px; } .world-card h3 { font-size:24px; } .world-card figcaption { left:24px; bottom:24px; } .start-card + .start-card { border-left:0; border-top:1px solid var(--border-soft); } .start-card p { min-height:0; } .faq-section { gap:25px; } .auth-shell { grid-template-columns:1fr; padding:0 24px; margin:45px auto; } .auth-story { min-height:220px; padding:28px; } .auth-story h2 { font-size:33px; } .auth-story p { margin-bottom:0; } .account-summary { grid-template-columns:1fr; gap:10px; } .account-stat { padding:20px; } .account-actions { flex-direction:column; } .panel-pad { padding:23px; } .category-row .name { font-size:19px; } .site-footer .wrap { align-items:start; flex-direction:column; gap:22px; } .category-row { padding:20px; } .post { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; background:var(--gold); color:#101519; padding:14px 20px; font-size:13px; } .skip-link:focus { top:15px; }
.mode-badge { display:inline-block; font-size:10px; padding:6px 9px; border:1px solid var(--border); color:var(--text-dim); white-space:nowrap; } .mode-badge.verified { color:var(--success); background:#8bd5b30b; border-color:#8bd5b338; }
/* Account ownership stays visible when a player moves between private servers. */
.server-account-context{display:flex;flex-direction:column;gap:7px;padding:15px 18px;margin:18px 0 22px;border:1px solid #a5874844;border-radius:9px;background:#101923;color:#deca9f;overflow-wrap:anywhere}
.server-account-context span{font-size:12px;color:#c8d2e1}
.server-account-context small{font-size:11px;line-height:1.6;color:#9aadc5}
/* Phone/tablet account pages only; original in-game windows and desktop site keep their sizing. */
html.phone-auth{overflow:hidden;scroll-behavior:auto}
html.phone-auth body.account-auth-page{position:fixed;top:var(--phone-top,0px);height:var(--phone-height,100dvh);width:100%;margin:0;overflow:hidden;}
html.phone-auth .account-auth-page>.site-header,html.phone-auth .account-auth-page>.site-footer,html.phone-auth .auth-story{display:none}
html.phone-auth .account-auth-page>main{height:100%;min-height:0;overflow:hidden}
html.phone-auth .auth-shell{height:100%;width:min(480px,100%);display:block;max-width:none;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 22px max(16px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;scroll-padding:16px}
html.phone-auth .auth-shell>.panel{padding:0}
html.phone-auth .auth-shell h1{font-size:29px!important;margin:0 0 10px}
html.phone-auth .auth-shell>.panel>p{font-size:16px;line-height:1.45;margin-bottom:18px}
html.phone-auth .field{margin-bottom:16px}
html.phone-auth .field label{font-size:16px;margin-bottom:7px}
html.phone-auth .field input{font-size:16px;min-height:48px;padding:12px}
html.phone-auth .field .hint{font-size:13px;line-height:1.4;margin-top:5px}
html.phone-auth .btn{min-height:48px;font-size:16px;padding:12px 16px}
html.phone-auth .form-msg{font-size:15px;padding:12px;line-height:1.4}
html.phone-auth .form-foot{font-size:16px;line-height:1.4;margin-top:14px;padding-top:12px}
html.phone-auth .form-foot a{display:inline-flex;align-items:center;min-height:44px}
html.phone-auth .auth-security{font-size:12px;line-height:1.4;margin-top:12px}
html.phone-auth .server-account-context{padding:12px;margin:12px 0 16px;gap:4px;border-radius:4px}
html.phone-auth .server-account-context strong,html.phone-auth .server-account-context span{font-size:14px}
html.phone-auth .server-account-context small{font-size:12px;line-height:1.4}