/* ═══════════════════════════════════════════════════════════════
   SCENTRAL ($SCNTRL) — the Sofa Crown of Solana
   Royal velvet cobalt · heraldic red · burlap · parchment · crown gold
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #17246F;
  --bg-deep:   #101A5E;
  --bg-ink:    #0C1240;
  --panel:     #1E2E8E;
  --panel-hi:  #2A3CA8;
  --red:       #C22A20;
  --red-hi:    #D8352A;
  --red-deep:  #8E1712;
  --red-velvet:#7E1613;
  --burlap:    #C79A62;
  --burlap-hi: #E0BE8C;
  --burlap-deep:#9C7440;
  --parch:     #F6EAD0;
  --parch-deep:#EAD9B4;
  --parch-line:#D8C298;
  --gold:      #F2B818;
  --gold-deep: #C28D0A;
  --ink:       #14101C;
  --text:      #F6EAD0;
  --text-dim:  #C9C4E8;
  --display:   'Grenze Gotisch', 'Georgia', serif;
  --body:      'Figtree', 'Segoe UI', system-ui, sans-serif;
  --mono:      'Spline Sans Mono', 'Consolas', monospace;
  --stitch:    2px dashed rgba(246,234,208,.55);
  --shadow-pop:0 4px 0 var(--ink);
  --r:         14px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);
  background-image:
    radial-gradient(1200px 700px at 78% -8%, rgba(42,60,168,.55), transparent 62%),
    radial-gradient(900px 620px at -10% 32%, rgba(16,26,94,.8), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 3px, transparent 3px 7px);
  color:var(--text);
  font-family:var(--body);
  font-weight:420;
  line-height:1.65;
  overflow-x:clip;
  cursor:default;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
button{font-family:inherit;cursor:pointer}

/* grain + vignette */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:80;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
@media (max-width:760px){ body::after{display:none} }

/* scrollbar */
::-webkit-scrollbar{width:13px}
::-webkit-scrollbar-track{background:var(--bg-ink)}
::-webkit-scrollbar-thumb{background:var(--burlap);border:3px solid var(--bg-ink);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ─── scent canvas & scroll rope ─── */
#scentCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#scrollRope{
  position:fixed;top:0;left:0;right:0;height:5px;z-index:200;
  background:repeating-linear-gradient(90deg,var(--burlap-deep) 0 7px,var(--burlap) 7px 14px);
  transform-origin:left;transform:scaleX(var(--sp,0));
}
#scrollCrown{
  position:fixed;top:-3px;left:0;z-index:201;font-size:15px;color:var(--gold);
  transform:translateX(calc(var(--spx,0px) - 8px));text-shadow:0 1px 0 var(--ink);
}

/* ─── type ─── */
h1,h2,h3{font-family:var(--display);font-weight:560;line-height:1.04;letter-spacing:.01em}
h2{font-size:clamp(42px,6vw,74px);margin-bottom:14px}
.mono,.mono-cap{font-family:var(--mono)}
.mono-cap{font-size:12px;letter-spacing:.14em;font-weight:500}
.kicker{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;font-weight:600;
  color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.k-rule{width:44px;height:2px;background:var(--gold);display:inline-block}
.sec-lede{max-width:62ch;color:var(--text-dim);font-size:17px;margin-bottom:26px}
.sec-parchment .sec-lede{color:#5C4A2E}

/* ─── layout ─── */
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.sec{position:relative;padding:104px 0;z-index:2}
.center{text-align:center}
.cta-row.center{justify-content:center}

.sec-deep{background:linear-gradient(180deg,var(--bg-deep),var(--bg-ink))}
.sec-deep{border-top:var(--stitch);border-bottom:var(--stitch)}

/* red velvet sections — cream fimbriation per heraldic law */
.sec-red{
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(216,53,42,.5), transparent 60%),
    linear-gradient(180deg, var(--red-velvet), #6A1210);
  border-top:4px solid var(--parch);border-bottom:4px solid var(--parch);
  box-shadow:inset 0 0 0 3px var(--red-deep);
}

/* burlap section */
.sec-burlap{
  background:
    repeating-linear-gradient(0deg, rgba(20,16,28,.05) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, rgba(20,16,28,.07) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--burlap), var(--burlap-deep));
  color:var(--ink);
  border-top:4px solid var(--parch);border-bottom:4px solid var(--parch);
}
.sec-burlap .kicker{color:var(--red-deep)}
.sec-burlap .k-rule{background:var(--red-deep)}
.sec-burlap h2{color:var(--ink)}
.sec-burlap .sec-lede{color:#3E2E16}

/* parchment section */
.sec-parchment{
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(180deg,var(--parch),var(--parch-deep));
  color:#2E2414;
  border-top:4px solid var(--gold);border-bottom:4px solid var(--gold);
}
.sec-parchment h2{color:#241A0C}
.sec-parchment .kicker{color:var(--red-deep)}
.sec-parchment .k-rule{background:var(--red-deep)}

/* ─── preloader ─── */
#preloader{transition:opacity .5s ease, visibility .5s}
#preloader.done{opacity:0;visibility:hidden}
.seal-court{text-align:center}
.seal-wax{width:120px;height:120px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.pre-line{font-family:var(--display);font-weight:560;font-size:30px;letter-spacing:.06em;margin-top:16px;color:var(--parch)}
.pre-sub{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--text-dim);margin-top:6px;text-transform:uppercase}
.dots i{animation:dotBlink 1.2s infinite;font-style:normal}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes sealStamp{
  0%{transform:translateY(-70px) scale(1.6);opacity:0}
  55%{transform:translateY(0) scale(.94);opacity:1}
  72%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
#preloader .seal-wax{animation:sealStamp .8s cubic-bezier(.2,.9,.3,1.2) both}

/* ─── nav ─── */
#topbar{
  position:sticky;top:0;z-index:300;
  background:rgba(12,18,64,.9);
  border-bottom:2px solid rgba(199,154,98,.4);
}
@supports (backdrop-filter:blur(8px)){ #topbar{background:rgba(12,18,64,.72);backdrop-filter:blur(10px)} }
#nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand-crown{width:32px;height:auto;flex:none}
.brand-word{font-family:var(--display);font-weight:600;font-size:27px;line-height:1;transform:translateY(-1px)}
.brand-tick{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold);border:1px solid rgba(242,184,24,.5);padding:3px 8px;border-radius:999px}
#navLinks{display:flex;align-items:center;gap:20px;margin-left:auto}
#navLinks > a{
  color:var(--text);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  padding:6px 2px;border-bottom:2px solid transparent;
}
#navLinks > a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.terr-chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--burlap-hi);
  border:1px dashed rgba(224,190,140,.55);padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.terr-chip b{color:var(--gold);font-weight:700}
.terr-chip.crowned{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.terr-chip.crowned b{color:var(--ink)}
.nav-buy{
  background:var(--gold);color:var(--ink)!important;font-weight:800;text-decoration:none;
  padding:10px 18px;border-radius:999px;border:2px solid var(--ink);box-shadow:var(--shadow-pop);
  font-size:14px;white-space:nowrap;transition:transform .15s, box-shadow .15s;
}
.nav-buy:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);border-bottom-color:transparent!important}
#burger{display:none;background:none;border:2px solid var(--burlap);border-radius:8px;padding:8px;margin-left:auto}
#burger span{display:block;width:22px;height:2.5px;background:var(--parch);margin:4.5px 0;border-radius:2px;transition:transform .25s,opacity .25s}
#burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── hero ─── */
#hero{position:relative;min-height:calc(100vh - 60px);display:flex;align-items:center;padding:64px 0 120px;z-index:2}
.hero-inner{max-width:1240px;margin:0 auto;padding:0 26px;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero-kicker{margin-bottom:0}
.hero-title{position:relative;margin-top:.34em;font-size:clamp(72px,10.5vw,158px);font-weight:600;color:var(--parch);text-shadow:0 5px 0 rgba(12,18,64,.85), 0 12px 34px rgba(0,0,0,.4)}
.ht-word{display:inline-block}
.crown-perch{
  position:absolute;top:-.28em;left:-.06em;width:.62em;display:inline-block;z-index:3;
  transform:rotate(-14deg);cursor:grab;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  transition:transform .5s cubic-bezier(.2,1.6,.4,1);
}
.crown-perch:active{cursor:grabbing}
.crown-perch svg{width:100%;height:auto;display:block}
.hero-tag{font-size:clamp(21px,2.6vw,30px);font-weight:700;margin:6px 0 14px;color:var(--text)}
.hero-tag em{font-style:normal;color:var(--gold);font-family:var(--display);font-weight:560;font-size:1.15em;letter-spacing:.02em}
.lede{max-width:54ch;color:var(--text-dim);font-size:17.5px}

.ca-pill{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:26px 0 20px;padding:12px 16px;max-width:640px;
  background:rgba(12,18,64,.62);border:var(--stitch);border-radius:var(--r);
}
.ca-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--burlap-hi);white-space:nowrap}
#caValue{font-family:var(--mono);font-size:14px;color:var(--gold);word-break:break-all;flex:1;min-width:120px}
#caCopy{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;font-weight:700;
  background:var(--panel-hi);color:var(--parch);border:1.5px solid rgba(246,234,208,.4);
  padding:7px 13px;border-radius:8px;transition:background .15s;
}
#caCopy:hover{background:var(--gold);color:var(--ink);border-color:var(--ink)}

.cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:800;font-size:15px;padding:13px 22px;border-radius:999px;
  border:2.5px solid var(--ink);transition:transform .15s, box-shadow .15s;
}
.btn img{flex:none}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-pop)}
.btn-gold:hover{transform:translateY(-2px) rotate(-.5deg);box-shadow:0 6px 0 var(--ink)}
.btn-line{background:rgba(12,18,64,.55);color:var(--parch);border-color:rgba(246,234,208,.45);box-shadow:0 4px 0 rgba(12,18,64,.8)}
.btn-line:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold)}
.btn-parch{background:var(--parch);color:var(--ink);box-shadow:var(--shadow-pop)}
.btn-parch:hover{transform:translateY(-2px) rotate(.5deg);box-shadow:0 6px 0 var(--ink)}

.scent-hint{
  margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--burlap-hi);
  display:inline-flex;align-items:center;gap:9px;border:1px dashed rgba(224,190,140,.45);
  border-radius:999px;padding:8px 15px;background:rgba(12,18,64,.4);
}
.paw-dot{animation:pawPulse 2.2s infinite}
@keyframes pawPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25) rotate(-10deg)}}

.hero-art{position:relative}
.portrait-frame{
  position:relative;border-radius:20px;overflow:hidden;background:var(--panel);
  border:5px solid var(--burlap);outline:3px solid var(--ink);
  box-shadow:0 14px 0 rgba(12,18,64,.9), 0 34px 70px rgba(0,0,0,.5);
  transform-style:preserve-3d;will-change:transform;
}
.portrait-frame::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border:var(--stitch);border-radius:15px;margin:7px;
}
.portrait-plate{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:linear-gradient(0deg,rgba(12,18,64,.94),rgba(12,18,64,.55) 78%,transparent);
  color:var(--parch);font-size:13.5px;padding:26px 18px 13px;text-align:center;
}
.portrait-plate .mono-cap{color:var(--gold)}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,transparent,rgba(12,18,64,.55));pointer-events:none}

/* ─── bunting marquee ─── */
.bunting{position:relative;z-index:2;overflow:clip;padding:2px 0 30px;background:linear-gradient(180deg,rgba(12,18,64,.5),transparent)}
.bunt-rope{height:6px;background:repeating-linear-gradient(90deg,var(--burlap-deep) 0 9px,var(--burlap) 9px 18px);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.bunt-track{display:flex;width:max-content;will-change:transform;animation:buntScroll 46s linear infinite}
.bunt-unit{display:flex;align-items:flex-start;flex:none}
@keyframes buntScroll{to{transform:translateX(-50%)}}
.pennant{
  flex:none;margin:0 7px;padding:12px 14px 26px;min-width:96px;text-align:center;
  font-weight:800;font-size:13px;letter-spacing:.08em;line-height:1.25;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
  transform-origin:top center;animation:pennantSway 3.6s ease-in-out infinite;
}
.pennant:nth-child(odd){animation-delay:-1.8s}
.pennant:nth-child(3n){animation-delay:-.9s}
@keyframes pennantSway{0%,100%{transform:rotate(1.6deg)}50%{transform:rotate(-1.6deg)}}
.p-red{background:var(--red-hi);color:var(--parch);box-shadow:inset 0 0 0 3px var(--parch), inset 0 0 0 5px var(--red-deep)}
.p-blue{background:var(--panel-hi);color:var(--parch);box-shadow:inset 0 0 0 3px var(--parch), inset 0 0 0 5px var(--bg-deep)}
.p-crown{flex:none;align-self:flex-start;margin:8px 7px 0;color:var(--gold);font-size:20px;text-shadow:0 2px 0 var(--ink)}

/* ─── charter ─── */
.charter-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
.parchment{
  position:relative;background:linear-gradient(180deg,#FBF3DE,var(--parch));
  border:2px solid var(--parch-line);border-radius:6px;
  padding:44px 46px 38px;font-size:17.5px;color:#33270F;
  box-shadow:0 3px 0 var(--parch-line), 0 20px 44px rgba(62,46,22,.28);
}
.parchment::before,.parchment::after{
  content:"";position:absolute;left:-2px;right:-2px;height:16px;
  background:
    radial-gradient(circle at 8% 50%, transparent 6px, #E6D4AC 6px) ,
    linear-gradient(90deg,#D9C08E,#EFDDB4 30%,#D9C08E 70%,#EFDDB4);
  border-radius:8px;box-shadow:0 3px 8px rgba(62,46,22,.35);
}
.parchment::before{top:-9px}
.parchment::after{bottom:-9px}
.parchment p + p{margin-top:16px}
.dropcap{
  float:left;font-family:var(--display);font-weight:600;font-size:78px;line-height:.8;
  color:var(--red-deep);margin:6px 12px 0 0;text-shadow:2px 2px 0 var(--gold);
}
.charter-sign{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:20px;border-top:2px dashed var(--parch-line)}
.wax-mini{width:64px;height:64px;flex:none;filter:drop-shadow(0 4px 8px rgba(62,46,22,.4));transform:rotate(-8deg)}
.sign-lines{display:flex;flex-direction:column;gap:4px}
.sign-name{font-family:var(--display);font-weight:600;font-size:34px;color:#241A0C;line-height:1}
.sign-title{color:#7A6136;font-size:10.5px}
.law-card{
  background:var(--bg-deep);color:var(--text);border-radius:var(--r);
  border:3px solid var(--burlap);padding:30px 30px 24px;
  box-shadow:0 10px 0 rgba(20,16,28,.35), 0 22px 44px rgba(20,16,28,.3);
}
.law-head{font-size:32px;color:var(--gold);margin-bottom:14px}
.law-list{list-style:none;display:flex;flex-direction:column;gap:13px;font-size:15.5px}
.law-list li{padding-left:16px;border-left:3px solid var(--red-hi)}
.law-list b{color:var(--gold);font-weight:700}
.law-note{margin-top:20px;color:var(--burlap-hi);border-top:var(--stitch);padding-top:14px}

/* ─── court ─── */
.court-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:26px;align-items:end;margin-top:16px}
.courtier{
  position:relative;background:var(--panel);border-radius:18px;overflow:hidden;
  border:4px solid var(--burlap);outline:2.5px solid var(--ink);
  box-shadow:0 10px 0 rgba(12,18,64,.85), 0 26px 48px rgba(0,0,0,.42);
  transform-style:preserve-3d;will-change:transform;cursor:pointer;
}
.courtier.is-king{border-color:var(--gold);cursor:auto}
.courtier.is-king::after{
  content:"♛";position:absolute;top:10px;right:14px;z-index:4;font-size:30px;color:var(--gold);
  text-shadow:0 2px 0 var(--ink);
}
.courtier-img{position:relative;overflow:hidden}
.courtier-img img{width:100%;transition:transform .5s ease}
.courtier:hover .courtier-img img{transform:scale(1.045)}
.courtier-banner{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 18px;border-top:3px solid var(--parch);border-bottom:3px solid var(--parch);
}
.courtier-banner h3{font-size:30px;letter-spacing:.03em}
.b-red{background:var(--red-hi)}
.b-blue{background:var(--panel-hi)}
.c-role{color:rgba(246,234,208,.85)}
.c-bio{padding:14px 18px 6px;font-size:15px;color:var(--text-dim)}
.c-stats{list-style:none;display:flex;gap:18px;padding:8px 18px 18px}
.c-stats li{color:var(--burlap-hi);font-size:10.5px}
.c-stats b{color:var(--gold);margin-left:5px}

/* ─── treasury ─── */
.sec-red .kicker{color:var(--gold)}
.sec-red .k-rule{background:var(--gold)}
.vault-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:26px 0 26px}
.vault-card{
  background:linear-gradient(180deg,#8E1712,#6A1210);
  border:3px solid var(--parch);border-radius:var(--r);
  box-shadow:inset 0 0 0 2.5px var(--red-deep), 0 8px 0 rgba(62,10,8,.7);
  padding:24px 22px;display:flex;flex-direction:column;gap:8px;
  transition:transform .2s;
}
.vault-card:hover{transform:translateY(-4px)}
.v-label{color:var(--parch);opacity:.85}
.v-value{font-size:clamp(22px,2.4vw,31px);font-weight:700;color:var(--gold);line-height:1.1;letter-spacing:.01em}
.v-note{font-size:13px;color:#F0C9B8}
.telemetry{
  background:rgba(20,16,28,.34);border:var(--stitch);border-radius:var(--r);padding:24px 26px;
}
.tel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.tel-title{color:var(--parch);font-size:14px;letter-spacing:.2em}
.tel-state{color:var(--gold);border:1px dashed rgba(242,184,24,.55);padding:5px 12px;border-radius:999px}
.tel-state.live{color:#7CE87C;border-color:rgba(124,232,124,.55)}
.tel-state.err{color:#FFB0A6;border-color:rgba(255,176,166,.5)}
.tel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tel-tile{background:rgba(12,18,64,.5);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.t-label{color:var(--burlap-hi);font-size:10px}
.t-val{font-size:20px;color:var(--parch);font-weight:600}
.t-val.up{color:#7CE87C}
.t-val.down{color:#FF8E82}
.tel-foot{margin-top:14px;color:#E7B9AD;font-size:10.5px}

/* ─── citizenship steps ─── */
.steps{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;
  counter-reset:step;position:relative;
}
.steps::before{
  content:"";position:absolute;top:34px;left:6%;right:6%;height:4px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--burlap-deep) 0 8px,var(--burlap) 8px 16px);
  border-radius:2px;
}
.step{
  position:relative;z-index:1;background:var(--panel);border:3px solid var(--burlap);
  border-radius:var(--r);padding:26px 22px 22px;
  box-shadow:0 8px 0 rgba(12,18,64,.85);transition:transform .2s;
}
.step:hover{transform:translateY(-5px)}
.step-seal{
  position:absolute;top:-22px;left:22px;width:44px;height:44px;display:grid;place-items:center;
  background:var(--red-hi);color:var(--parch);font-weight:700;font-size:17px;
  border-radius:50%;border:3px solid var(--parch);box-shadow:0 4px 0 var(--red-deep);
}
.step img{margin:8px 0 12px}
.step h3{font-size:26px;margin-bottom:8px}
.tick-inline{font-family:var(--mono);font-size:.68em;font-weight:700;letter-spacing:.02em;vertical-align:.06em}
.step p{font-size:14.5px;color:var(--text-dim)}
.step a{font-weight:700}

/* ─── the annexation ─── */
.game-frame{
  background:linear-gradient(180deg,#B4884E,#A07642);
  border:4px solid var(--ink);border-radius:18px;padding:18px;
  box-shadow:inset 0 0 0 3px var(--burlap-hi), 0 12px 0 rgba(62,46,22,.55), 0 30px 60px rgba(20,16,28,.35);
}
.game-hud{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  color:var(--ink);padding:4px 6px 14px;font-size:12px;letter-spacing:.12em;
}
.game-hud b{color:var(--red-deep);font-size:15px;margin-left:6px}
#gLives{letter-spacing:.2em;color:var(--red-deep)}
.mew-btn{
  margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:700;
  background:var(--panel-hi);color:var(--parch);border:2.5px solid var(--ink);
  border-radius:999px;padding:9px 18px;box-shadow:0 4px 0 var(--ink);transition:transform .12s, box-shadow .12s;
}
.mew-btn b{color:var(--gold);font-size:13px}
.mew-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.mew-btn:disabled{opacity:.45;transform:none;box-shadow:0 3px 0 var(--ink);cursor:not-allowed}
.game-stage{position:relative;border-radius:10px;overflow:hidden;border:3px solid var(--ink)}
#gameCanvas{display:block;width:100%;height:auto;background:var(--bg-ink);touch-action:none}
.game-overlay{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:30px;background:rgba(12,18,64,.86);color:var(--parch);
}
.go-title{font-family:var(--display);font-weight:560;font-size:clamp(30px,4vw,46px);line-height:1.1}
.go-sub{max-width:56ch;font-size:14.5px;color:var(--text-dim)}
.go-sub b{color:var(--gold)}
.go-best{color:var(--burlap-hi)}
.dpad{display:none;flex-direction:column;align-items:center;gap:8px;padding-top:16px}
.dpad button{
  width:56px;height:48px;font-size:18px;background:var(--panel);color:var(--parch);
  border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);
}
.dpad button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.dpad-mid{display:flex;gap:64px}
@media (pointer:coarse){ .dpad{display:flex} }

/* ─── conquest / roadmap ─── */
.phases{list-style:none;position:relative;margin-top:34px;display:flex;flex-direction:column;gap:34px;padding-left:34px}
.phases::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:6px;
  background:repeating-linear-gradient(0deg,var(--burlap-deep) 0 9px,var(--burlap) 9px 18px);border-radius:3px;
}
.phase{position:relative;display:flex;gap:20px;align-items:flex-start}
.ph-flag{
  position:absolute;left:-34px;top:2px;width:26px;height:30px;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
}
.f-red{background:var(--red-hi);box-shadow:inset 0 0 0 2.5px var(--parch)}
.f-blue{background:var(--panel-hi);box-shadow:inset 0 0 0 2.5px var(--parch)}
.ph-body h3{font-size:31px;margin-bottom:6px}
.ph-body p{max-width:64ch;color:var(--text-dim);font-size:15.5px}
.ph-stamp{display:inline-block;margin-top:10px;padding:5px 13px;border-radius:999px;border:1.5px dashed rgba(224,190,140,.6);color:var(--burlap-hi)}
.phase.done .ph-stamp{color:#7CE87C;border-color:rgba(124,232,124,.5)}
.phase.now .ph-stamp{color:var(--gold);border-color:rgba(242,184,24,.6)}

/* ─── fealty ─── */
.sec-fealty{padding:120px 0}
.fealty-title{font-size:clamp(58px,9vw,120px);color:var(--parch);text-shadow:0 5px 0 var(--red-deep), 0 14px 34px rgba(0,0,0,.4);margin-bottom:8px}
.sec-fealty .sec-lede{margin-left:auto;margin-right:auto;color:#F0C9B8}

/* ─── footer ─── */
#foot{background:var(--bg-ink);padding:54px 0 40px;position:relative;z-index:2;border-top:var(--stitch)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--text-dim);text-decoration:none;font-size:14px;font-weight:600}
.foot-links a:hover{color:var(--gold)}
#audioToggle{background:none;border:1.5px dashed rgba(224,190,140,.5);color:var(--burlap-hi);padding:6px 13px;border-radius:999px}
#audioToggle[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}
.foot-ledger{display:flex;gap:26px;flex-wrap:wrap;margin:26px 0 18px;color:var(--burlap-hi);border:var(--stitch);border-radius:var(--r);padding:14px 20px}
.foot-ledger b{color:var(--gold)}
.foot-disclaimer{max-width:88ch;font-size:12.5px;color:#8B87B8;line-height:1.7}
.foot-copy{margin-top:18px;color:#6B679C}

/* ─── toasts (POPCAT announces) ─── */
#toasts{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(94vw,560px)}
.toast{
  background:var(--parch);color:var(--ink);border:3px solid var(--ink);border-radius:12px;
  box-shadow:0 6px 0 rgba(12,18,64,.8), 0 16px 34px rgba(0,0,0,.4);
  padding:12px 20px;font-size:14.5px;font-weight:600;text-align:center;
  animation:toastIn .45s cubic-bezier(.2,1.4,.4,1) both;max-width:100%;
}
.toast .t-from{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--red-deep);margin-bottom:3px}
.toast.gone{animation:toastOut .4s ease both}
.toast.t-big{font-size:19px;border-color:var(--red-deep);background:var(--gold)}
@keyframes toastIn{from{opacity:0;transform:translateY(-18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px) scale(.94)}}

/* ─── stare overlay (MEW egg) ─── */
#stareOverlay{
  position:fixed;inset:0;z-index:600;background:rgba(8,10,30,.93);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
}
.stare-eyes{display:flex;gap:70px}
.s-eye{
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 50% 52%, #14101C 0 26%, #35B6E8 27% 44%, #EAF6FF 45% 74%, #D8EAF8 100%);
  box-shadow:0 0 60px rgba(53,182,232,.5), inset 0 -10px 24px rgba(20,16,28,.3);
  animation:eyeLoom 3s ease-in-out infinite;
}
@keyframes eyeLoom{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.stare-line{font-family:var(--mono);font-size:15px;letter-spacing:.22em;color:#EAF6FF;text-align:center;padding:0 20px}
.stare-ring{
  width:210px;height:8px;border-radius:4px;background:rgba(234,246,255,.15);overflow:hidden;position:relative;display:block;
}
.stare-ring::after{
  content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--stp,0));
  background:#35B6E8;border-radius:4px;
}

/* ─── key spill (keyboard egg) ─── */
.key-spill{
  position:fixed;z-index:450;font-family:var(--mono);font-weight:700;color:var(--gold);
  text-shadow:0 2px 0 var(--ink);pointer-events:none;animation:spillFall 1.6s ease-in both;
}
@keyframes spillFall{
  0%{opacity:0;transform:translateY(-30px) rotate(0)}
  15%{opacity:1}
  100%{opacity:0;transform:translateY(46vh) rotate(var(--spin,80deg))}
}

/* click sparks */
.click-spark{position:fixed;z-index:460;pointer-events:none;font-size:15px;animation:sparkPop .7s ease-out both}
@keyframes sparkPop{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.5) translateY(-26px)}}

/* pennant confetti */
.confetti{position:fixed;top:-30px;z-index:470;width:14px;height:18px;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);animation:confFall linear both}
@keyframes confFall{to{transform:translateY(110vh) rotate(var(--cr,300deg));opacity:.9}}

/* ─── reveals ─── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ─── responsive ─── */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-art{max-width:560px;margin:0 auto}
  .vault-grid{grid-template-columns:repeat(2,1fr)}
  .tel-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 22px}
  .steps::before{display:none}
  .court-grid{grid-template-columns:1fr;max-width:520px;margin:16px auto 0}
}
@media (max-width:900px){
  #navLinks > a:not(.nav-buy){display:none}
  .terr-chip{display:none}
  #burger{display:block}
  .charter-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* burger panel — absolute under sticky nav (never fixed: backdrop-filter containing block) */
  #navLinks{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-ink);border-bottom:3px solid var(--burlap);
  }
  #navLinks.open{display:flex}
  #navLinks > a{display:block!important;padding:15px 26px;border-bottom:1px solid rgba(199,154,98,.2);font-size:16px}
  .nav-buy{margin:14px 26px 18px;text-align:center;border-radius:12px!important}
  .terr-chip{display:none!important}
  #nav{position:relative}
}
@media (max-width:640px){
  .sec{padding:74px 0}
  .wrap{padding:0 18px}
  .hero-inner{padding:0 18px}
  #hero{padding:40px 0 80px}
  .vault-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero-title{font-size:clamp(64px,17vw,96px)}
  .cta-row .btn{flex:1 1 44%;justify-content:center}
  .game-hud{gap:12px}
  .mew-btn{margin-left:0}
  .foot-ledger{gap:12px;flex-direction:column}
  .stare-eyes{gap:40px}
  .s-eye{width:84px;height:84px}
}

/* ─── reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-ok) *,html:not(.motion-ok) *::before,html:not(.motion-ok) *::after{
    animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;
  }
  html:not(.motion-ok){scroll-behavior:auto}
  html:not(.motion-ok) .reveal{opacity:1;transform:none}
  html:not(.motion-ok) .bunt-track{animation:none;transform:none}
  html:not(.motion-ok) .pennant{animation:none}
}