/* ===== King Exchange 365 — THRONE RAIL redesign (v3) =====
   Desktop: fixed LEFT vertical rail nav. Mobile/tablet: sticky top bar + burger.
   Royal serif display (Cinzel) + gold ticker + chapter numerals. */
:root{
  --bg:#140a24;
  --bg-2:#1d0f33;
  --panel:#241241;
  --panel-2:#2e1751;
  --line:#3d2566;
  --gold:#f4c430;
  --gold-2:#ffdf6b;
  --gold-deep:#c8940f;
  --purple:#7b3ff2;
  --purple-soft:#9b6bff;
  --txt:#f3ecff;
  --txt-dim:#c3b3e0;
  --ink:#1a0e2e;
  --ink-2:#2a1a00;
  --wa:#25D366;
  --radius:16px;
  --radius-sm:10px;
  --maxw:1080px;
  --rail:236px;
  --font:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --disp:'Cinzel','Open Sans',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{overflow-x:clip;max-width:100%;margin:0;background:
  radial-gradient(1100px 560px at 85% -6%,rgba(123,63,242,.18),transparent 60%),
  radial-gradient(800px 460px at -4% 14%,rgba(244,196,48,.07),transparent 55%),
  var(--bg);
  color:var(--txt);font-family:var(--font);line-height:1.65;font-size:16.5px}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{line-height:1.22;margin:.2em 0 .5em;font-weight:800;color:#fff}
h1,h2{font-family:var(--disp);letter-spacing:.5px}
h1{font-size:clamp(1.55rem,4vw,2.45rem)}
h2{font-size:clamp(1.25rem,2.8vw,1.7rem)}
h3{font-size:1.16rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink-2);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:200}
.skip-link:focus{left:0}

/* ---------- header: top bar (mobile) / LEFT RAIL (desktop) ---------- */
.hdr{position:sticky;top:0;z-index:100;width:100%;max-width:100vw;
  background:rgba(20,10,36,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a{color:var(--txt-dim);padding:8px 12px;border-radius:8px;font-weight:600;font-size:.94rem}
.nav a:hover{color:#fff;background:var(--panel)}
.nav a[aria-current=page]{color:var(--gold);background:var(--panel)}
.nav .btn-id{margin-left:4px}
.btn{display:inline-block;border:none;cursor:pointer;font-weight:800;border-radius:999px;
  padding:11px 22px;font-size:.95rem;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold))!important;
  color:var(--ink-2)!important;box-shadow:0 8px 22px rgba(244,196,48,.28)}
.btn-wa{background:var(--wa)!important;color:#04250F!important;box-shadow:0 8px 22px rgba(37,211,102,.3)}
.burger{display:none;background:var(--panel);border:1px solid var(--line);color:#fff;
  width:44px;height:42px;border-radius:10px;font-size:1.3rem;cursor:pointer}
.rail-extra{display:none}

@media(max-width:1100px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;background:var(--bg-2);border-bottom:1px solid var(--line);padding:0 10px;
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .28s ease}
  .nav.open{max-height:520px;visibility:visible;padding:10px 10px 16px}
  .nav a{padding:12px 14px}
  .nav .btn-id{margin:6px 0 0;text-align:center}
}

/* ---- desktop: transform header into fixed left rail ---- */
@media(min-width:1101px){
  .hdr{position:fixed;top:0;left:0;bottom:0;width:var(--rail);max-width:var(--rail);
    border-bottom:none;border-right:1px solid var(--line);
    background:linear-gradient(180deg,#1a0d30,#140a24)}
  .hdr::after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:1px;
    background:linear-gradient(180deg,transparent,var(--gold-deep),transparent);opacity:.55}
  .hdr-in{flex-direction:column;align-items:stretch;height:100%;max-width:none;
    padding:26px 18px 20px;gap:24px}
  .brand{justify-content:center}
  .brand img{height:46px}
  .nav{flex-direction:column;align-items:stretch;gap:4px;flex:1}
  .nav a{padding:12px 14px;border-left:3px solid transparent;border-radius:0 9px 9px 0;
    font-size:.97rem}
  .nav a[aria-current=page]{border-left-color:var(--gold);background:var(--panel);color:var(--gold-2)}
  .nav .btn-id{margin:14px 0 0;text-align:center;border-radius:999px}
  .rail-extra{display:block;text-align:center;font-size:.78rem;color:var(--txt-dim);
    border-top:1px solid var(--line);padding-top:16px}
  .rail-extra .wa-num{display:block;margin-top:4px}
  .rail-extra .age{display:block;margin-top:8px;opacity:.75}
  /* shift page content right of the rail */
  .ticker,main,.ftr{margin-left:var(--rail)}
}

/* ---------- gold ticker strip ---------- */
.ticker{background:linear-gradient(90deg,#2a1502,#3a2103,#2a1502);border-bottom:1px solid var(--gold-deep);
  overflow:hidden;white-space:nowrap;position:relative}
.ticker .tk{display:inline-flex;gap:0;animation:tkslide 30s linear infinite;will-change:transform}
.ticker span{display:inline-block;padding:8px 26px;color:var(--gold-2);font-size:.8rem;
  font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.ticker span::after{content:"◆";margin-left:26px;color:var(--gold-deep);font-size:.6rem;vertical-align:1px}
@keyframes tkslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- login card base ---------- */
.lcard{background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.45);padding:22px;max-width:400px;width:100%;
  position:relative}
.lcard::before{content:"";position:absolute;inset:6px;border:1px solid rgba(244,196,48,.28);
  border-radius:12px;pointer-events:none}
.lcard .crown{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.lcard .crown img{height:34px}
.lcard h2{font-size:1.28rem;margin:.1em 0}
.lcard .sub{color:var(--txt-dim);font-size:.9rem;margin-bottom:14px}
.fld{width:100%;background:#160b28;border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;color:#fff;font-size:.95rem;margin-bottom:11px;font-family:var(--font)}
.fld::placeholder{color:#8f7fb5}
.go{display:block;width:100%;text-align:center;padding:13px;border-radius:10px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold))!important;color:var(--ink-2)!important;
  font-weight:800;font-size:1rem;margin-top:4px}
.go:hover{color:var(--ink-2)!important;filter:brightness(1.05)}
.lcard .row{display:flex;justify-content:space-between;align-items:center;
  font-size:.83rem;color:var(--txt-dim);margin:2px 0 12px}
.note{font-size:.78rem;color:var(--txt-dim);text-align:center;margin-top:12px}
.note a{color:var(--gold-2);font-weight:700}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:36px 0 28px}
.hero::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  border:2px solid rgba(244,196,48,.14);border-radius:50%;pointer-events:none}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:230px;height:230px;
  border:1px solid rgba(155,107,255,.18);border-radius:50%;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:center}
.hero .eyebrow{display:inline-block;background:var(--panel);border:1px solid var(--line);
  color:var(--gold-2);font-size:.78rem;font-weight:700;padding:6px 13px;border-radius:999px;
  letter-spacing:.4px;text-transform:uppercase;margin-bottom:14px}
.hero p.lead{font-size:1.05rem;color:var(--txt-dim);max-width:52ch}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;font-size:.86rem;color:var(--txt-dim)}
.trust-row b{color:var(--gold-2)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:24px}.lcard{margin:0 auto}}

/* ---------- game tile rail ---------- */
.grail{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent}
.grail::-webkit-scrollbar{height:8px}
.grail::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:4px}
.gt{flex:0 0 158px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:transform .18s,border-color .18s}
.gt:hover{transform:translateY(-4px);border-color:var(--gold)}
.gt img{width:100%;aspect-ratio:640/672;object-fit:cover}
.gt span{display:block;text-align:center;padding:9px 6px;font-size:.83rem;font-weight:700;color:var(--txt-dim)}
.gt:hover span{color:var(--gold-2)}

/* ---------- content ---------- */
main{max-width:100%;overflow-x:clip;display:block}
.sec{padding:28px 0}
.sec p,.sec li{color:#e7ddfa}
.sec h2{position:relative;padding-left:16px}
.sec h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  border-radius:3px;background:linear-gradient(var(--gold),var(--gold-deep))}
/* chapter-numbered variant (home) */
.chapters{counter-reset:chap}
.chapters .sec h2{padding-left:0;text-align:center}
.chapters .sec h2::before{content:"";position:static;display:block;width:auto;height:auto;background:none}
.chapters .sec h2::after{content:"";display:block;width:74px;height:3px;margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.chapters .sec>h2 em{display:block;font-style:normal;font-size:.72rem;letter-spacing:3px;
  color:var(--gold-deep);font-family:var(--font);font-weight:700;margin-bottom:6px}
.chapters .sec>h2 em::before{counter-increment:chap;content:"CHAPTER " counter(chap,upper-roman)}
.lead-answer{background:var(--panel);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;
  padding:15px 18px;color:#efe7ff;font-size:1.02rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:14px 14px 14px 56px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:14px;
  width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:var(--ink-2);font-weight:800;display:grid;place-items:center}
table.kv{width:100%;border-collapse:collapse;margin:10px 0;font-size:.94rem}
table.kv th,table.kv td{border:1px solid var(--line);padding:10px 13px;text-align:left}
table.kv th{background:var(--panel-2);color:var(--gold-2)}
table.kv td{background:rgba(255,255,255,.02)}

/* figure */
.shot{margin:26px auto;max-width:820px;width:100%}
.shot img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.shot figcaption{margin-top:9px;font-size:.85rem;color:var(--txt-dim);text-align:center}

/* faq */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:2px 18px;margin-bottom:11px}
.faq summary{cursor:pointer;font-weight:700;color:#fff;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--gold);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:14px;margin:0;color:#e7ddfa}

/* seo box */
.seo-box{max-height:270px;overflow-y:auto;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;margin:30px 0 10px}
.seo-box h2{font-size:1.15rem;margin-top:0}
.seo-box h3{font-size:1rem;color:var(--gold-2)}
.seo-box p,.seo-box li{font-size:.9rem;color:var(--txt-dim)}

/* also search */
.also-search{margin:22px 0}
.also-search h2{font-size:1.05rem;color:var(--txt-dim)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips a{background:var(--panel);border:1px solid var(--line);color:var(--txt-dim);
  padding:7px 13px;border-radius:999px;font-size:.85rem}
.chips a:hover{color:#fff;border-color:var(--gold)}

/* trustpilot badge */
.tp-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#191919;
  padding:8px 14px;border-radius:8px;font-weight:700;font-size:.85rem}
.tp-badge .star{background:#00b67a;color:#fff;padding:3px 6px;border-radius:4px;font-size:.8rem}

/* ---------- footer ---------- */
.ftr{background:var(--bg-2);border-top:1px solid var(--line);margin-top:34px;padding:34px 0 26px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:26px}
.ftr h4{color:var(--gold-2);font-size:.95rem;margin-bottom:12px}
.ftr a:not([class]){display:block;color:var(--txt-dim);padding:5px 0;font-size:.9rem}
.ftr a:not([class]):hover{color:#fff}
.ftr .blurb{color:var(--txt-dim);font-size:.9rem}
.socials{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.socials a{width:34px;height:34px;display:grid;place-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:9px;transition:transform .15s}
.socials a:hover{transform:translateY(-3px);border-color:var(--gold)}
.socials svg{width:18px;height:18px;fill:var(--txt-dim)}
.socials a:hover svg{fill:var(--gold-2)}
.ftr-btm{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:.82rem;color:var(--txt-dim)}
.wa-num{color:var(--gold-2);font-weight:700}
@media(max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr-grid{grid-template-columns:1fr}}

/* WhatsApp float */
.wa-float{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;z-index:120;
  box-shadow:0 10px 26px rgba(37,211,102,.45);animation:wapulse 2.2s infinite}
.wa-float svg{width:33px;height:33px;fill:#fff}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.breadcrumb{font-size:.82rem;color:var(--txt-dim);padding:16px 0 0}
.breadcrumb a{color:var(--txt-dim)}
.breadcrumb a:hover{color:var(--gold-2)}