/* ============================================================
   ROYALTOMB THEME — MAIN STYLES
   Single screen, in-place stage swap, dark/light themes.
   Ported 1:1 from the approved mockup (v9 final).
   ============================================================ */
:root {
  --font-head: 'Cinzel', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --gold: #c8a45c;
  --gold-soft: #dfc389;
  --radius: 14px;
}
:root[data-theme="dark"] {
  --tint: linear-gradient(180deg, rgba(8,8,12,0.74), rgba(8,8,12,0.56) 40%, rgba(8,8,12,0.84));
  --text: #efeae0;
  --text-muted: #b3ab9c;
  --surface: rgba(16,15,20,0.72);
  --surface-2: rgba(255,255,255,0.05);
  --card: rgba(14,13,18,0.80);
  --border: rgba(200,164,92,0.25);
  --border-soft: rgba(255,255,255,0.10);
  --input-bg: rgba(255,255,255,0.06);
  --success: #55d98a;
  --shadow: 0 20px 60px rgba(0,0,0,0.55);
}
:root[data-theme="light"] {
  --tint: linear-gradient(180deg, rgba(246,242,233,0.90), rgba(246,242,233,0.74) 40%, rgba(246,242,233,0.93));
  --text: #2a2418;
  --text-muted: #7a7060;
  --surface: rgba(255,253,248,0.80);
  --surface-2: rgba(42,36,24,0.05);
  --card: rgba(253,251,246,0.88);
  --border: rgba(150,116,50,0.38);
  --border-soft: rgba(42,36,24,0.12);
  --input-bg: rgba(42,36,24,0.05);
  --success: #1e9e57;
  --shadow: 0 20px 60px rgba(80,60,20,0.16);
}

* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }   /* the hidden attribute always wins, whatever the display rule */
html, body { height:100%; overflow:hidden; }        /* PAGE NEVER SCROLLS */
body { font-family:var(--font-body); color:var(--text); }

/* WP admin bar (visible to logged-in admins) must not break the layout */
body.admin-bar .app { height:calc(100dvh - 32px); }

/* ---------- FIXED SCENE ---------- */
.scene {
  position:fixed; inset:-30px; z-index:-2;
  background:url('../img/bg.jpg') center 30% / cover no-repeat;
  filter:blur(6px); transform:scale(1.04);
}
.scene-tint { position:fixed; inset:0; z-index:-1; background:var(--tint); transition:background .4s ease; }

/* ---------- APP GRID ---------- */
.app {
  height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto auto auto auto;
  width:100%; padding:0 24px;               /* full width; each section manages its own width */
}

/* minimalistic foot line */
.footline {
  text-align:center;
  font-size:.68rem; letter-spacing:.08em;
  color:var(--text-muted);
  padding:2px 0 10px;
  opacity:.8;
  line-height:1.8;
}
.footline a { color:var(--text-muted); text-decoration:none; transition:color .2s; }
.footline a:hover { color:var(--gold); }

/* policies panel typography */
.policy-body h4 {
  font-family:var(--font-head); font-size:1.05rem; font-weight:700;
  letter-spacing:.08em; color:var(--gold);
  margin:4px 0 2px;
}
.policy-body h5 {
  font-family:var(--font-head); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  margin:14px 0 6px;
}
.policy-body .policy-updated { display:block; font-size:.72rem; color:var(--text-muted); margin-bottom:10px; }
.policy-body p { font-size:.88rem; line-height:1.7; color:var(--text-muted); margin-bottom:8px; }
.policy-body ul { padding-left:20px; margin:4px 0 10px; }
.policy-body li { font-size:.88rem; line-height:1.65; color:var(--text-muted); margin-bottom:4px; }
.policy-body .tabs { margin-bottom:18px; }

/* trailer embed */
.trailer-frame {
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow);
  background:#000;
}
.trailer-frame iframe { position:absolute; inset:0; width:100%; height:100%; }

/* ============ HEADER ============ */
header.rt {
  position:relative;
  width:min(100%, 1232px); margin:0 auto;   /* centered, capped */
  display:flex; align-items:center; justify-content:center;
  gap:20px; padding:clamp(40px, 6vh, 58px) 0 10px;  /* nav below the corner actions */
}
nav.top {
  display:flex; align-items:center; gap:4px;
  background:var(--surface);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:6px;
  box-shadow:var(--shadow);
}
nav.top a {
  position:relative;
  font-family:var(--font-head);
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-muted); text-decoration:none;
  padding:11px 18px; border-radius:8px;
  transition:color .25s, background .25s;
}
nav.top a::after {
  content:"";
  position:absolute; left:50%; bottom:6px;
  width:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:translateX(-50%);
  transition:width .25s ease;
}
nav.top a:hover { color:var(--text); }
nav.top a:hover::after { width:55%; }
nav.top a.active { color:var(--gold); background:var(--surface-2); }
nav.top a.active::after { width:55%; }

/* server clock now lives in the status strip (Server Status cell) */
.cell .clock-line { font-variant-numeric:tabular-nums; letter-spacing:.03em; }

/* ============ DISCORD PAGE-FOLD CORNER (top-left) ============
   Looks like the page corner is folded back, revealing Discord blurple
   underneath. Hover unrolls the invitation panel. */
.discord-corner {
  position:fixed; top:0; left:0; z-index:80;
  width:480px; height:320px;                    /* roomy — never clips the invite card or its shadow */
  pointer-events:none;                          /* only the fold + panel are interactive */
}
body.admin-bar .discord-corner { top:32px; }
.dc-face {
  position:absolute; top:0; left:0;
  width:78px; height:78px;
  background:linear-gradient(135deg, #7983f5 0%, #5865F2 55%, #4650c9 100%);
  clip-path:polygon(0 0, 100% 0, 0 100%);       /* the blurple underneath */
  pointer-events:auto; cursor:pointer;
  transition:width .4s cubic-bezier(.25,.8,.35,1), height .4s cubic-bezier(.25,.8,.35,1);
}
.dc-face img {
  position:absolute; top:21px; left:15px;
  width:50px; height:auto;                       /* centered ON the fold line: exactly half hidden */
}
.dc-fold {
  position:absolute; top:0; left:0;
  width:78px; height:78px;
  clip-path:polygon(100% 0, 100% 100%, 0 100%);  /* the turned page corner */
  background:
    linear-gradient(315deg,
      rgba(0,0,0,.14) 0%, rgba(0,0,0,.04) 34%,
      rgba(255,255,255,.10) 46%, rgba(255,255,255,.03) 52%,
      transparent 58%),
    var(--surface);
  filter:drop-shadow(-1px -1px 3px rgba(0,0,0,.18));
  pointer-events:none;
  transition:width .4s cubic-bezier(.25,.8,.35,1), height .4s cubic-bezier(.25,.8,.35,1);
}
/* hover: the page corner opens wider, revealing the full icon underneath */
.discord-corner:hover .dc-face,
.discord-corner:hover .dc-fold { width:130px; height:130px; }

/* the invitation, revealed on hover */
.dc-panel {
  position:absolute; top:12px; left:144px;      /* clear of the fold even when it opens */
  width:300px; padding:20px 22px;
  background:var(--card);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-soft);
  border-left:3px solid #5865F2;
  border-radius:12px;
  box-shadow:var(--shadow);
  opacity:0; transform:translateX(-10px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.discord-corner:hover .dc-panel { opacity:1; transform:translateX(0); pointer-events:auto; }
/* invite card — centered, Discord-style */
.dc-panel { text-align:center; }
.dc-kicker {
  display:block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  line-height:1.6;
  color:var(--text-muted);
  margin-bottom:8px;
}
.dc-name {
  display:block;
  font-family:var(--font-head); font-size:1.25rem; font-weight:700;
  letter-spacing:.04em; color:var(--text);
  margin-bottom:10px;
}
.dc-hint {
  display:block;
  font-size:.88rem; color:#5865F2; font-weight:600;
  margin-bottom:14px;
}
.dc-meta {
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:.82rem; color:var(--text-muted);
  padding-top:12px;
  border-top:1px solid var(--border-soft);      /* count anchored at the bottom */
}
.dc-dot { width:9px; height:9px; border-radius:50%; background:#3ba55d; }

/* actions: pinned to the top-right corner of the site */
.actions {
  position:fixed; top:18px; right:20px; z-index:80;
  display:flex; align-items:center; gap:14px;
}
body.admin-bar .actions { top:50px; }
.btn {
  font-family:var(--font-body);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 20px; border-radius:8px;
  border:1px solid var(--border-soft);
  background:transparent; color:var(--text);
  cursor:pointer; text-decoration:none;
  transition:all .2s; white-space:nowrap;
}
.btn:hover { border-color:var(--gold); color:var(--gold); }
.btn.text {
  border-color:transparent; background:transparent;
  color:var(--text-muted); padding:11px 10px;
}
.btn.text:hover { color:var(--gold); }
.btn.gold {
  background:linear-gradient(160deg, var(--gold-soft), var(--gold) 55%, #9a7a38);
  border-color:transparent; color:#241a06;
  box-shadow:0 6px 22px rgba(200,164,92,.35);
}
.btn.gold:hover { transform:translateY(-1px); color:#241a06; box-shadow:0 10px 26px rgba(200,164,92,.45); }
.btn.big { padding:15px 34px; font-size:.86rem; border-color:var(--border); }

.toggle {
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border-soft); background:var(--surface-2);
  color:var(--text); font-size:1rem; cursor:pointer;
  display:grid; place-items:center; transition:transform .2s, border-color .2s;
}
.toggle:hover { transform:rotate(18deg); border-color:var(--gold); }
:root[data-theme="dark"] .i-sun { display:none; }
:root[data-theme="light"] .i-moon { display:none; }

.burger { display:none; width:42px; height:40px; border:1px solid var(--border-soft); background:transparent; border-radius:8px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span { width:18px; height:2px; background:var(--text); border-radius:2px; transition:.25s; }
body.menu .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu .burger span:nth-child(2){ opacity:0; }
body.menu .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.sheet {
  position:fixed; inset:0; z-index:90; display:none;
  background:var(--card);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:90px 30px 30px;
}
body.menu .sheet { display:block; }
.sheet a {
  display:block; text-decoration:none; color:var(--text);
  font-family:var(--font-head); font-size:1.15rem; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 4px; border-bottom:1px solid var(--border-soft);
}
.sheet a:hover, .sheet a.active { color:var(--gold); }

/* ============ STAGE : swappable panels ============ */
.stage { position:relative; min-height:0; display:grid; }
.panel {
  grid-area:1/1;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  min-height:0; padding:14px 0;
}
.panel.show { display:flex; animation:rise .3s ease; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } }

/* --- HOME panel --- */
.orn {
  color:var(--gold); font-size:.85rem; letter-spacing:.5em;
  display:flex; align-items:center; gap:16px; margin-bottom:18px;
}
.orn::before, .orn::after { content:""; width:70px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); }
.orn::after { background:linear-gradient(90deg, var(--gold), transparent); }
h1 {
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(2.3rem, 5.8vw, 4.1rem);
  letter-spacing:.1em; line-height:1.12; text-align:center;
}
h1 b { font-weight:700; letter-spacing:.16em; display:block; font-size:1.28em; }
.stronger {
  font-family:'Great Vibes', cursive;
  font-size:clamp(2.5rem, 5.4vw, 4rem);
  color:var(--gold);
  transform:rotate(-5deg);
  margin-top:-.5em;
  text-shadow:0 2px 20px rgba(200,164,92,.4);
}
.sub {
  margin-top:16px; text-align:center;
  font-size:.92rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-muted); line-height:2;
}
.cta { display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; justify-content:center; }

/* --- CONTENT panels (glass card) --- */
.pcard {
  width:min(560px, 100%);
  max-height:100%;
  background:var(--card);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.pcard.wide { width:min(780px, 100%); }
.pcard.xl   { width:min(900px, 100%); }
.p-head {
  display:flex; align-items:center; gap:12px;
  padding:20px 26px 15px;
  border-bottom:1px solid var(--border-soft);
}
.p-head h3 {
  font-family:var(--font-head); font-size:1.02rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-right:auto;
}
.x {
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border-soft); background:transparent;
  color:var(--text-muted); font-size:.95rem; cursor:pointer; transition:.2s;
}
.x:hover { color:var(--text); border-color:var(--gold); }
.p-body { padding:22px 26px; overflow-y:auto; font-size:.92rem; line-height:1.65; }
.p-body p.muted { color:var(--text-muted); font-size:.85rem; }
.p-foot {
  padding:16px 26px 20px;
  border-top:1px solid var(--border-soft);
  display:flex; gap:12px; justify-content:flex-end;
}

/* steps */
.steps { display:flex; gap:8px; padding:16px 26px 0; }
.step { flex:1; height:3px; border-radius:3px; background:var(--surface-2); }
.step.on { background:var(--gold); }

/* forms */
.field { margin-bottom:15px; }
.field label {
  display:block; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:6px;
}
.field input {
  width:100%; padding:12px 14px;
  background:var(--input-bg);
  border:1px solid var(--border-soft);
  border-radius:8px;
  color:var(--text); font-size:.95rem; font-family:var(--font-body);
  outline:none; transition:border-color .2s;
}
.field input:focus { border-color:var(--gold); }
.check { display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--text-muted); margin-top:14px; cursor:pointer; }
.check input { margin-top:4px; accent-color:var(--gold); }

/* dashboard: section titles + rank note (Character Hub) */
.dash-title {
  font-family:var(--font-head); font-size:.8rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:18px 0 10px;
}
.rank-note {
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--gold);
  border-radius:10px;
  padding:12px 16px; margin-bottom:6px;
  font-size:.9rem;
}
.rank-note b { display:block; margin-bottom:2px; }
.rank-note .muted { color:var(--text-muted); font-size:.8rem; }

/* reset-password identity box: one clean row per fact (key left, value right) */
#reset-identity { grid-template-columns:1fr; gap:0; padding:6px 16px; }
#reset-identity .row { padding:10px 0; border-bottom:1px solid var(--border-soft); }
#reset-identity .row:last-child { border-bottom:none; }

/* dashboard: floating SIDE RAIL (left of the page, logged-in only).
   Hidden by default; the DASHBOARD button toggles body.rail-open. */
.side-rail {
  position:fixed; left:22px;
  top:calc(50% - 115px);                     /* centered on the STAGE (between header & status bar) */
  transform:translate(-130%, -50%);          /* parked off-screen */
  z-index:70;
  display:flex; flex-direction:column;
  width:210px;
  background:var(--surface);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-soft);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
body.rail-open .side-rail { transform:translate(0, -50%); opacity:1; }
.sr-item {
  display:flex; align-items:center; gap:13px;
  padding:19px 20px;                          /* taller rows — more presence */
  background:transparent; border:none; border-bottom:1px solid var(--border-soft);
  font-family:var(--font-head); font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted); text-decoration:none; text-align:left;
  cursor:pointer; transition:color .2s, background .2s;
}
.sr-item:last-child { border-bottom:none; }
.sr-item i { font-style:normal; color:var(--gold); font-size:.9rem; width:16px; text-align:center; }
.sr-item:hover { color:var(--text); background:var(--surface-2); }
.sr-item.active { color:var(--gold); background:var(--surface-2); }
.sr-item.sr-danger:hover { color:#e05252; }
.dash-details {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:8px 20px; margin-top:6px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:10px; padding:14px 16px;
}
.dash-details .row { display:flex; justify-content:space-between; gap:10px; font-size:.88rem; }
.dash-details .k { color:var(--text-muted); }
.dash-details .v { font-weight:600; }
.dash-actions { display:flex; gap:10px; flex-wrap:wrap; }
.field select {
  width:100%; padding:12px 14px;
  background:var(--input-bg);
  border:1px solid var(--border-soft);
  border-radius:8px;
  color:var(--text); font-size:.95rem; font-family:var(--font-body);
  outline:none; transition:border-color .2s;
}
.field select:focus { border-color:var(--gold); }
@media (max-width: 700px) {
  .dash-details { grid-template-columns:1fr; }
  .dash-actions .btn { width:100%; }
  /* rail overlays content on phones (mobile sheet also lists the sections) */
  .side-rail { z-index:85; left:14px; }
}

/* form helpers (register / login) */
.field small.hint  { display:block; margin-top:5px; font-size:.72rem; color:var(--text-muted); }
.field small.avail { display:block; margin-top:5px; font-size:.75rem; color:var(--text-muted); }
.avail.ok  { color:var(--success); }
.avail.bad { color:#e05252; }
.g-recaptcha { margin:6px 0 12px; }
:root[data-theme="dark"]  .field input { color-scheme:dark; }   /* native date picker matches theme */
:root[data-theme="light"] .field input { color-scheme:light; }

/* inline form feedback (vote, later login/register) */
.form-status {
  margin:0 0 14px;
  padding:11px 14px;
  border-radius:8px;
  font-size:.86rem;
  border:1px solid var(--border-soft);
  background:var(--surface-2);
  color:var(--text-muted);
}
.form-status.success { color:var(--success); border-color:color-mix(in srgb, var(--success) 40%, transparent); }
.form-status.error   { color:#e05252; border-color:rgba(224,82,82,.4); }

.rules-box {
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:14px 18px 16px;
  max-height:260px; overflow-y:auto;
  font-size:.84rem; color:var(--text-muted);
}
.rules-box b { color:var(--text); }
.rules-box ol { padding-left:18px; display:grid; gap:8px; margin-top:6px; }
.rules-box p { line-height:1.7; }
.rules-box h5 {
  font-family:var(--font-head); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  margin:16px 0 6px;
}
.rules-box h5:first-child { margin-top:2px; }
.rules-box .rules-signoff { margin-top:16px; padding-top:12px; border-top:1px solid var(--border-soft); }
.rules-box .rules-signoff i { color:var(--gold); font-style:italic; }

/* mirrors */
.mirror {
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  font-family:var(--font-body);
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:15px 18px; margin-bottom:10px;
  color:var(--text); text-decoration:none;
  cursor:pointer; transition:border-color .2s, transform .15s;
  font-size:.92rem;
}
.mirror:hover { border-color:var(--gold); transform:translateX(4px); }
.mirror b { display:block; font-size:.95rem; }
.mirror small { color:var(--text-muted); }
.mirror .go { margin-left:auto; color:var(--gold); }

/* tables */
.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tab {
  padding:8px 18px; border-radius:20px;
  font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--border-soft); background:transparent; color:var(--text-muted);
  cursor:pointer; transition:.2s; font-family:var(--font-body);
}
.tab.on { background:var(--gold); border-color:var(--gold); color:#241a06; }
table.rank { width:100%; border-collapse:collapse; font-size:.9rem; }
table.rank th {
  text-align:left; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted); padding:8px 10px;
  border-bottom:1px solid var(--border-soft);
}
table.rank td { padding:10px; border-bottom:1px solid var(--border-soft); }
table.rank tr:last-child td { border-bottom:none; }
table.rank .pos { font-family:var(--font-head); font-weight:700; color:var(--text-muted); width:36px; }

/* rankings: podium rows + live line + horizontal scroll on phones */
table.rank tr.podium .pos { font-size:1.05rem; }
table.rank tr.p1 .pos { color:#e7c352; }                     /* gold */
table.rank tr.p2 .pos { color:#b7bec9; }                     /* silver */
table.rank tr.p3 .pos { color:#c9895a; }                     /* bronze */
table.rank tr.podium { background:color-mix(in srgb, var(--gold) 5%, transparent); }
.rank-updated {
  display:flex; align-items:center; gap:8px;
  font-size:.75rem; color:var(--text-muted);
  margin:-6px 0 12px;
}
.table-scroll { overflow-x:auto; }
.table-scroll table { min-width:520px; }

/* golden EXP progress: 10 segments = the in-game 1000% bar */
.exp-wrap { display:flex; align-items:center; gap:8px; }
.expbar {
  position:relative; display:block;
  width:104px; height:11px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}
.expbar i {
  position:absolute; top:0; left:0; bottom:0;
  display:block; width:0;
  background:linear-gradient(90deg, #8a6a2f, var(--gold) 55%, #e9cb74);
  box-shadow:0 0 6px rgba(200,164,92,.5);
}
.expbar::after {                              /* the 10 segment dividers */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0, transparent calc(10% - 1px),
    var(--border) calc(10% - 1px), var(--border) 10%);
  pointer-events:none;
}
.exp-label { font-size:.72rem; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ============ DROPLIST ACCORDION ============ */
.dl-notice {
  display:flex; align-items:center; gap:11px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--gold);
  border-radius:10px;
  padding:12px 16px; margin-bottom:16px;
  font-size:.85rem; color:var(--text-muted); line-height:1.5;
}
.dl-notice-ic { color:var(--gold); font-size:.7rem; flex:0 0 auto; }
.dl-row { border-bottom:1px solid var(--border-soft); }
.dl-head {
  display:flex; align-items:center; gap:14px;
  width:100%; padding:13px 6px;
  background:transparent; border:none;
  font-family:var(--font-body); color:var(--text); text-align:left;
  cursor:pointer; transition:background .15s;
}
.dl-head:hover { background:var(--surface-2); }
.dl-head b { font-size:.95rem; font-weight:600; }
.dl-lv {
  font-size:.72rem; font-weight:600; letter-spacing:.08em;
  color:var(--gold);
  border:1px solid var(--border);
  border-radius:14px; padding:2px 9px;
}
.dl-arrow { margin-left:auto; font-style:normal; font-size:.7rem; color:var(--text-muted); transition:transform .2s; }
.dl-row.open .dl-arrow { transform:rotate(90deg); color:var(--gold); }
.dl-boss {
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#1a1408; background:var(--gold);
  border-radius:14px; padding:2px 9px;
}
.dl-body { padding:4px 6px 16px; }
.dl-money { font-size:.82rem; color:var(--gold-soft); margin:2px 0 10px; font-variant-numeric:tabular-nums; }
.dl-items { display:flex; flex-wrap:wrap; gap:7px; }
.dl-tile {
  width:54px; padding:0; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:transparent; border:none; cursor:pointer;
  font-family:var(--font-body); color:var(--text);
}
.dl-ic {
  position:relative;
  width:45px; height:45px;
  display:grid; place-items:center;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:7px;
  overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.dl-tile:hover .dl-ic, .dl-tile:focus-visible .dl-ic { border-color:var(--gold); transform:scale(1.12); }
.dl-tile:focus-visible { outline:none; }
.dl-ic img { width:32px; height:32px; object-fit:contain; image-rendering:pixelated; }
.dl-ic-text i {
  font-style:normal; font-size:.5rem; line-height:1.15;
  color:var(--text-muted); text-align:center;
  padding:2px; word-break:break-word;
}
.dl-qty {
  position:absolute; right:2px; bottom:1px;
  font-size:.6rem; font-weight:700; line-height:1;
  color:#fff; text-shadow:0 0 2px #000, 0 0 3px #000;
  font-variant-numeric:tabular-nums; pointer-events:none;
}
.dl-pct { font-size:.62rem; line-height:1; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dl-info { font-size:.8rem; color:var(--text-muted); margin:12px 0 0; min-height:1.3em; }
.dl-info b { color:var(--text); font-weight:600; }

/* news */
.news-item { display:block; text-decoration:none; color:var(--text); padding:16px 4px; border-bottom:1px solid var(--border-soft); transition:background .2s; }
.news-item:last-child { border-bottom:none; }
.news-item:hover { background:var(--surface-2); }
.news-item .ni-head { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.news-item time { font-size:.72rem; font-weight:600; letter-spacing:.12em; color:var(--text-muted); text-transform:uppercase; }
.news-item h4 { font-size:1rem; margin:0 0 4px; }
.news-item p { font-size:.85rem; color:var(--text-muted); }

.news-badge {
  display:inline-block;
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px;
  border:1px solid var(--border);
  color:var(--gold);
}
.news-badge.nb-update { color:var(--success); border-color:color-mix(in srgb, var(--success) 40%, transparent); }

/* full article view */
.na-title { font-family:var(--font-head); font-size:1.3rem; letter-spacing:.03em; margin:10px 0 4px; }
.na-meta { font-size:.78rem; color:var(--text-muted); margin-bottom:16px; }
.na-content { font-size:.92rem; line-height:1.75; }
.na-content strong { color:var(--text); }
.na-content em { color:var(--text-muted); }

.success-box { text-align:center; padding:20px 0 10px; }
.success-box .big-ic { font-size:3rem; display:block; margin-bottom:12px; }
.success-box h3 { font-family:var(--font-head); letter-spacing:.1em; margin-bottom:8px; }

/* ============ STATUS STRIP ============ */
.status {
  display:grid; grid-template-columns:repeat(4, 1fr);
  width:min(100%, 1232px);                   /* centered, capped — independent of the gallery */
  margin:0 auto;                             /* the section title below provides the separation */
  background:var(--surface);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.cell {
  padding:18px 24px;
  display:flex; flex-direction:column; gap:3px;
  align-items:center; text-align:center;     /* all status text centered */
  border-right:1px solid var(--border-soft);
  cursor:default; transition:background .2s;  /* informational only — not clickable */
}
.cell .v { justify-content:center; }
.cell:hover { background:var(--surface-2); }
.cell:last-child { border-right:none; }
.cell .k { font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.cell .v { font-family:var(--font-head); font-size:1.05rem; font-weight:600; letter-spacing:.06em; display:flex; align-items:center; gap:9px; }
.cell .m { font-size:.75rem; color:var(--text-muted); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 10px var(--success); animation:pulse 2s infinite; }
@keyframes pulse { 50% { opacity:.5; } }
.v.on { color:var(--success); }
.v.off { color:#e05252; }

/* ============ SECTION TITLE (between status and pictures) ============ */
.explore-title {
  display:flex; align-items:center; justify-content:center; gap:18px;
  width:min(92vw, 100%); margin:clamp(10px, 1.8vh, 20px) auto clamp(12px, 2vh, 22px);
  font-family:var(--font-head); font-weight:600;
  font-size:.92rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--text); white-space:nowrap;
}
.explore-title::before, .explore-title::after {
  content:""; height:1px; flex:0 1 clamp(60px, 16vw, 260px);
}
.explore-title::before { background:linear-gradient(90deg, transparent, var(--gold)); }
.explore-title::after  { background:linear-gradient(90deg, var(--gold), transparent); }
.explore-title i {                            /* tiny diamonds at the line tips */
  font-style:normal; color:var(--gold); font-size:.6rem;
}

/* ============ PICTURE CARDS (Explore row — decorative) ============ */
.gallery {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:32px;
  width:min(92vw, 100%);                     /* wider than the status bar, never overflows */
  margin:0 auto clamp(10px, 2vh, 22px);      /* the foot line below carries the bottom gap */
}
.gcard {
  position:relative; display:block;
  height:clamp(118px, 15vh, 168px);          /* scales with screen height */
  border-radius:12px;
  border:1px solid var(--border-soft);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--surface-2);               /* photo lives ONLY in the blur layer below */
  cursor:pointer; text-decoration:none;      /* cards open their info panels */
  transition:border-color .3s ease, transform .3s ease;
}
.gcard:hover { border-color:var(--gold); transform:translateY(-3px); }

/* info panels (explore cards) — rules-style readability:
   muted body, bold anchors pop, gold section headings, airy lines */
.info-copy p { font-size:.9rem; line-height:1.8; color:var(--text-muted); }
.info-copy p b { color:var(--text); }
.info-copy p + p { margin-top:12px; }
.info-copy .dash-title { margin-top:22px; }
.info-copy .dash-title:first-child { margin-top:0; }
.info-copy .dash-details { margin-top:4px; }
.info-copy .cta { justify-content:flex-start; margin-bottom:4px; }
.gcard::before {                             /* frosted veil — hover melts it away */
  content:""; position:absolute; inset:0;
  background:var(--img) center / cover no-repeat;
  filter:blur(7px) brightness(.92);
  transform:scale(1.12);                     /* blur fringe clipped outside the card */
  transition:filter .45s ease, transform .45s ease;
}
.gcard:hover::before { filter:blur(0) brightness(1); transform:scale(1.02); }
.gcard::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,12,.03) 25%, rgba(8,8,12,.72));
  transition:background .45s ease;
}
/* light mode: milky veil, dark captions */
:root[data-theme="light"] .gcard::before { filter:blur(9px) brightness(1.15) saturate(.85); }
:root[data-theme="light"] .gcard:hover::before { filter:blur(0) brightness(1) saturate(1); }
:root[data-theme="light"] .gcard::after {
  background:linear-gradient(180deg, rgba(246,242,233,.15), rgba(246,242,233,.06) 45%, rgba(246,242,233,.70));
}
:root[data-theme="light"] .gcard:hover::after {
  background:linear-gradient(180deg, rgba(246,242,233,0) 40%, rgba(246,242,233,.85));
}
/* light mode: ornament lines flip to dark (gold vanishes on milk) */
:root[data-theme="light"] .gcard .cap b::before { background:linear-gradient(90deg, transparent, #2a2418); }
:root[data-theme="light"] .gcard .cap b::after  { background:linear-gradient(90deg, #2a2418, transparent); }

.gcard .cap {
  position:absolute; left:0; right:0; bottom:11px; z-index:1;
  text-align:center;                         /* captions centered */
}
.gcard .cap b {
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-head); font-weight:600;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text);                         /* dark captions on the milky light veil */
}
.gcard .cap b::before, .gcard .cap b::after {
  content:""; width:22px; height:1px;        /* same ornament language as the hero */
}
.gcard .cap b::before { background:linear-gradient(90deg, transparent, var(--gold)); }
.gcard .cap b::after  { background:linear-gradient(90deg, var(--gold), transparent); }
.gcard .cap small { font-size:.72rem; color:var(--text-muted); }

/* dark mode captions must stay light on the dark gradient */
:root[data-theme="dark"] .gcard .cap b { color:#efeae0; }
:root[data-theme="dark"] .gcard .cap small { color:rgba(239,234,224,.65); }

/* ============ SHOP (PayPal -> Gold KC) ============ */
.shop-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px;
}
.shop-grid.shop-locked { opacity:.55; pointer-events:none; }
.shop-card {
  display:flex; flex-direction:column; gap:4px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:16px;
  text-align:center;
  transition:border-color .2s;
}
.shop-card:hover { border-color:var(--gold); }
.sc-kc {
  font-family:var(--font-head); font-size:1rem; font-weight:700;
  letter-spacing:.04em; color:var(--gold);
}
.sc-price { font-size:1.3rem; font-weight:600; }
.sc-hint { font-size:.7rem; color:var(--text-muted); margin-bottom:10px; }
.sc-slot { min-height:38px; }
.shop-card.sc-guest { opacity:.85; }

.shop-login-note {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--gold);
  border-radius:10px;
  padding:14px 18px;
  margin-bottom:16px;
}
.shop-login-note b { font-family:var(--font-head); letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; }
.shop-login-note span { font-size:.82rem; color:var(--text-muted); }
.shop-login-note .btn { margin-top:6px; }

/* ============ GLOBAL POPUP (RT.popup) ============ */
.rt-popup-overlay {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,12,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:24px;
}
.rt-popup {
  width:min(420px, 100%);
  background:var(--card);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:28px 28px 24px;
  text-align:center;
  animation:rise .28s ease;
}
.rt-popup-orn { color:var(--gold); font-size:1.6rem; margin-bottom:8px; }
.rt-popup.success .rt-popup-orn { color:var(--success); }
.rt-popup.error .rt-popup-orn { color:#e05252; }
.rt-popup h3 {
  font-family:var(--font-head); font-size:1.05rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:10px;
}
.rt-popup p { font-size:.92rem; color:var(--text-muted); line-height:1.6; margin-bottom:20px; }
.rt-popup .btn { min-width:120px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1020px) {
  nav.top { display:none; }
  .burger { display:flex; }
  .actions .hide-m { display:none; }
  header.rt { justify-content:flex-end; }
  /* the burger turns into an X when the menu is open — it must sit ABOVE
     the sheet (z90), or bricks have no way out except picking a page */
  body.menu .actions { z-index:95; }
  .sheet { overflow-y:auto; }
}
@media (max-width: 1020px) and (min-width: 701px) {
  .status { grid-template-columns:repeat(2, 1fr); }
  .cell:nth-child(2) { border-right:none; }
  .cell:nth-child(-n+2) { border-bottom:1px solid var(--border-soft); }
  .gallery { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .app { padding:0 14px; }
  .discord-corner { width:78px; height:78px; }   /* phones: fold only, tap = direct invite */
  .dc-panel { display:none; }
  .status { grid-template-columns:1fr; margin-bottom:14px; }
  .cell { border-right:none; border-bottom:1px solid var(--border-soft); padding:12px 18px; }
  .cell:last-child { border-bottom:none; }
  .gallery { grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:22px; width:100%; }
  .gcard { height:96px; }
  .gcard .cap { bottom:8px; }
  .pcard, .pcard.wide { width:100%; }
  .sub { letter-spacing:.2em; }
  .p-head { padding:16px 18px 12px; }
  .p-body { padding:18px; }
  .p-foot { padding:14px 18px 16px; }
  .explore-title { font-size:.72rem; letter-spacing:.2em; gap:10px; }
}
@media (max-height: 800px) {
  .gallery, .explore-title { display:none; } /* short screens: keep it one clean piece */
  .status { margin-bottom:56px; }
}
@media (max-height: 660px) {
  .cta { margin-top:20px; }
  .status { margin-bottom:24px; }
  .status .m { display:none; }
}

/* ============================================================
   MOBILE PASS (<= 820px): the single-screen launcher becomes a
   normally SCROLLING page, and panels open as FULL-SCREEN SHEETS.
   Everything below is scoped to this media query — desktop is
   untouched by design. Revert: delete this whole block
   (backup: NEW/_backups/mobile-pass/).
   ============================================================ */
@media (max-width: 820px) {

  /* ---- the page scrolls like a normal website ---- */
  html, body { height:auto; overflow:visible; }
  body { overflow-x:hidden; }                     /* no sideways wiggle */
  .app { height:auto; min-height:100dvh; }
  body.admin-bar .app { height:auto; }

  /* hero keeps a full-screen presence; the rest waits below the fold */
  .stage { min-height:calc(100dvh - 190px); }
  .panel { padding:24px 0; }

  /* short-screen rules above hid the gallery — on a scrolling phone
     page there is room for everything again */
  .explore-title { display:flex; }
  .gallery {
    display:grid; grid-template-columns:1fr;      /* cards stacked, full width */
    gap:14px; width:100%; margin-bottom:26px;
  }
  .gcard { height:132px; }

  /* ---- Discord corner on touch: fold only, tap = straight to invite ----
     The clip-path also clips the TAP AREA to the triangle — thumbs landing
     on the icon's lower half would hit nothing ("button doesn't work").
     Fix: the anchor becomes an unclipped invisible square (full 78x78
     tappable), and the blurple triangle moves to its ::before (visual only). */
  .discord-corner { width:78px; height:78px; }
  .dc-panel { display:none; }
  .dc-face { clip-path:none; background:transparent; }
  .dc-face::before {
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg, #7983f5 0%, #5865F2 55%, #4650c9 100%);
    clip-path:polygon(0 0, 100% 0, 0 100%);
  }
  .dc-face img { position:absolute; }               /* stays above the ::before triangle */

  .gcard::before { filter:blur(0) brightness(.96); transform:scale(1.02); }  /* no hover on touch: photo unveiled */
  :root[data-theme="light"] .gcard::before { filter:blur(0) brightness(1) saturate(1); }
  .status { margin-bottom:14px; }
  .footline { padding-bottom:18px; }

  /* ---- panels become full-screen sheets (home stays in the page) ---- */
  body.sheet-open { overflow:hidden; }            /* no scrolling behind an open sheet */
  .panel.show:not([data-panel="home"]) {
    position:fixed; inset:0; z-index:88;
    padding:0;
    background:var(--card);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  }
  /* WP admin bar (admins only): the page auto-shifts below it, but a
     fixed sheet does not — start the sheet under the bar (46px <=782px) */
  body.admin-bar .panel.show:not([data-panel="home"]) { inset:46px 0 0; }
  .panel.show:not([data-panel="home"]) .pcard,
  .panel.show:not([data-panel="home"]) .pcard.wide,
  .panel.show:not([data-panel="home"]) .pcard.xl {
    width:100%; height:100%; max-height:none;
    border:none; border-radius:0; box-shadow:none;
    background:transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  /* the p-head (title + X) stays pinned on top; only the body scrolls */
  .panel.show:not([data-panel="home"]) .p-body { flex:1; min-height:0; }
}