:root{
  --v0:#2a0878; --v1:#4f0cf0; --v2:#6a1cff; --v3:#8a3dff; --lil:#cdb8ff; --milk:#f5f0ff; --ink:#1a0646;
  --display:Archivo,system-ui,sans-serif; --body:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--milk);background:linear-gradient(180deg,#6a1cff 0%,#4f0cf0 30%,#3a08c4 65%,#22066e 100%);overflow-x:clip;line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:900;font-style:italic;letter-spacing:-.025em;line-height:1}
.kicker{font:800 13px/1 var(--display);letter-spacing:.26em;color:var(--lil);margin-bottom:16px}
h2{font-size:clamp(36px,4.8vw,78px);margin-bottom:20px;text-shadow:0 0 40px rgba(205,184,255,.35)}

.notice{position:relative;z-index:30;background:#16043f;color:#d9cbff;text-align:center;font:600 13px/1.4 var(--body);padding:9px 16px}

/* ---- bubble buttons: speech-bubble tail, two eyes that watch the cursor ---- */
.bub{--bg:linear-gradient(180deg,#9b5cff,#6a1cff 55%,#5410f2);--fg:#fff;--eye:#fff;--tail:#5a12f4;position:relative;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px 0 26px;border:0;border-radius:999px;cursor:pointer;
  background:var(--bg);color:var(--fg);font:900 italic 16px/1 var(--display);letter-spacing:.04em;text-decoration:none;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 12px rgba(30,0,90,.35),0 10px 24px rgba(20,0,80,.45),0 0 0 1px rgba(255,255,255,.18);
  transition:transform .35s cubic-bezier(.3,1.9,.4,1)}
.bub::before{content:"";position:absolute;left:16px;right:30%;top:6px;height:10px;border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.bub::after{content:"";position:absolute;right:-9px;bottom:6px;width:22px;height:16px;background:var(--tail);border-radius:0 12px 12px 4px;transform:skewX(-18deg);z-index:-1;box-shadow:0 8px 16px rgba(20,0,80,.35)}
.bub.white{--bg:linear-gradient(180deg,#fff,#efe7ff 55%,#ddd0ff);--fg:#4f0cf0;--eye:#5410f2;--tail:#ddd0ff}
.bub.ghost{--bg:rgba(255,255,255,.12);--fg:#fff;--eye:#fff;--tail:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.eyes{display:flex;gap:4px}
.eyes b{display:block;width:6px;height:13px;border-radius:4px;background:var(--eye);transform:translate(var(--ex,0),var(--ey,0));transition:transform .15s,height .1s}
.bub:hover{transform:scale(1.06,.94)}
.bub:hover .eyes b{height:5px}
.bub:active{transform:scale(.94,1.04)}
.bub:focus-visible{outline:3px solid #fff;outline-offset:4px}
.bub.sm{height:42px;padding:0 15px 0 19px;font-size:13px;gap:9px}
.bub.sm .eyes b{width:5px;height:10px}

/* ---- header ---- */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:14px 4vw;transition:background .3s,box-shadow .3s}
.bar.stuck{background:rgba(40,8,120,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(205,184,255,.25)}
.brand{display:flex;align-items:center;gap:10px;font:900 italic 26px/1 var(--display);text-decoration:none;color:#fff}
.brand svg{width:38px;height:30px;filter:drop-shadow(0 0 10px rgba(255,255,255,.6));transition:transform .4s cubic-bezier(.3,1.9,.4,1)}
.brand:hover svg{transform:rotate(-12deg) scale(1.1)}
.links{display:flex;gap:4px;margin-left:auto}
.links a{padding:9px 14px;border-radius:999px;font:700 14px/1 var(--display);text-decoration:none;color:#e6dcff}
.links a:hover{background:rgba(255,255,255,.14)}

/* ---- hero ---- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:2vw;min-height:calc(100svh - 110px);padding:20px 4vw 80px;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10%;top:-20%;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(closest-side,rgba(180,120,255,.55),transparent);pointer-events:none}
.clouds{position:absolute;left:0;right:0;bottom:-6vw;height:24vw;pointer-events:none}
.clouds i{position:absolute;bottom:0;border-radius:50%;background:radial-gradient(closest-side,rgba(226,206,255,.85),rgba(190,150,255,.35) 60%,transparent);filter:blur(6px);animation:drift 18s ease-in-out infinite alternate}
.clouds i:nth-child(1){left:-5%;width:34vw;height:16vw}
.clouds i:nth-child(2){left:22%;width:28vw;height:12vw;animation-delay:-4s}
.clouds i:nth-child(3){left:44%;width:38vw;height:18vw;animation-delay:-9s}
.clouds i:nth-child(4){left:72%;width:34vw;height:15vw;animation-delay:-2s}
.clouds i:nth-child(5){left:88%;width:26vw;height:13vw;animation-delay:-12s}
@keyframes drift{to{transform:translateX(3vw) scale(1.05)}}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(78px,10.6vw,200px);margin-left:-.04em;padding-right:.12em;background:linear-gradient(180deg,#fff 30%,#d9c7ff 62%,#a57cff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 rgba(40,0,140,.45)) drop-shadow(0 0 40px rgba(220,200,255,.55))}
.sub{margin-top:6px;font:900 italic clamp(22px,2.4vw,38px)/1.1 var(--display);color:#fff}
.lead{margin-top:16px;max-width:31em;font-size:clamp(16px,1.3vw,19px);color:#e2d7ff}
.cta{display:flex;flex-wrap:wrap;gap:18px 20px;margin-top:30px}
.cta.center{justify-content:center}
.stage{position:relative;z-index:1;height:min(78vh,720px);min-height:420px}
#ghost3d{position:absolute;inset:-10% -10% -6%;width:120%;height:116%;display:block;cursor:pointer;touch-action:pan-y}
.fallback{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain}
.skins{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(30,0,100,.45);backdrop-filter:blur(8px);z-index:2}
.skins button{border:0;border-radius:999px;padding:9px 16px;background:none;color:#e6dcff;font:800 13px/1 var(--display);cursor:pointer}
.skins button.on{background:#fff;color:#4f0cf0}
.say{position:absolute;left:52%;top:6%;z-index:2;max-width:270px;padding:12px 16px;border-radius:20px 20px 20px 6px;background:#fff;color:#2a0878;font:800 15px/1.3 var(--display);box-shadow:0 14px 30px rgba(20,0,80,.4);
  opacity:0;transform:translateY(10px) scale(.9);transform-origin:0 100%;transition:opacity .2s,transform .3s cubic-bezier(.3,1.9,.4,1);pointer-events:none}
.say.on{opacity:1;transform:none}
.say small{display:block;margin-top:4px;font:700 12px/1 var(--body);color:#7a5bd6}

/* ---- news ---- */
.news{padding:12vh 4vw;background:url(assets/portal.jpg) 100% 50%/cover no-repeat;position:relative}
.news::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,6,140,.85) 0%,rgba(60,10,200,.55) 45%,transparent 75%),linear-gradient(180deg,#4f0cf0,transparent 18%,transparent 82%,#4a0be6)}
.news-card{position:relative;max-width:640px;padding:36px 34px;border-radius:32px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 60px rgba(20,0,80,.35)}
.news-card h2{font-size:clamp(32px,3.6vw,56px)}
.news-card p:not(.kicker){margin-bottom:16px;font-size:17px;color:#ece4ff}
.news-card .bub{margin-top:10px}

/* ---- ghost odds ---- */
.odds{padding:12vh 4vw}
.wallet{display:inline-flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);margin-bottom:28px}
.wallet span{font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--lil)}
.wallet b{font:900 italic 28px/1 var(--display);font-variant-numeric:tabular-nums}
.wallet button{border:0;border-radius:999px;padding:9px 14px;background:#fff;color:#4f0cf0;font:800 12px/1 var(--display);cursor:pointer}
.markets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mk{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:28px;background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px rgba(20,0,80,.3)}
.mk h3{font-size:22px;line-height:1.15}
.mk .viz{height:150px;border-radius:20px;background:rgba(20,0,70,.4);display:grid;place-items:center;overflow:hidden;position:relative}
.mk canvas{width:100%;height:100%;display:block}
.face{position:relative;width:110px;height:96px;background:#f5f0ff;border-radius:50% 50% 46% 54%/56% 56% 44% 44%;box-shadow:inset -10px -12px 20px rgba(120,80,220,.35),0 10px 20px rgba(0,0,0,.25)}
.face::after{content:"";position:absolute;right:-26px;bottom:18px;width:40px;height:26px;background:#f5f0ff;border-radius:0 20px 20px 8px;transform:rotate(-18deg);box-shadow:inset -6px -6px 10px rgba(120,80,220,.3)}
.face b{position:absolute;top:30px;width:13px;height:30px;border-radius:7px;background:#5410f2;transition:height .08s,top .08s}
.face b:first-child{left:30px}.face b:last-child{left:52px}
.face.blink b{height:4px;top:44px}
.tapper{border:0;background:none;cursor:pointer;transition:transform .12s}
.tapper:active{transform:scale(.9)}
.tapper .count{position:absolute;right:12px;top:10px;font:900 italic 22px/1 var(--display);color:#fff}
.mk .prices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk .prices button{border:0;border-radius:16px;padding:13px 10px;font:900 italic 17px/1 var(--display);cursor:pointer;transition:transform .2s cubic-bezier(.3,1.9,.4,1)}
.mk .yes{background:linear-gradient(180deg,#fff,#e2d6ff);color:#4f0cf0}
.mk .no{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.mk .prices button:hover{transform:translateY(-2px)}
.mk .prices button:disabled{opacity:.45;cursor:default;transform:none}
.mk .stakes{display:flex;gap:8px;align-items:center;font:700 12px/1 var(--display);color:var(--lil)}
.mk .stakes button{border:0;border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.12);color:#fff;font:800 12px/1 var(--display);cursor:pointer}
.mk .stakes button.on{background:#fff;color:#4f0cf0}
.mk .status{min-height:22px;font:700 14px/1.3 var(--display);color:#efe7ff}
.mk.won{box-shadow:0 0 0 2px #b8ff6a,0 24px 50px rgba(20,0,80,.3)}
.mk.lost{box-shadow:0 0 0 2px #ff6aa8,0 24px 50px rgba(20,0,80,.3)}
.log{list-style:none;margin-top:22px;display:flex;flex-direction:column-reverse;gap:6px;max-width:640px;font:600 14px/1.4 var(--body);color:#d9cbff}
.log li:nth-child(n+6){display:none}

/* ---- moods ---- */
.moods{padding:12vh 4vw;text-align:center}
.mood-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;align-items:end}
.mood img{height:clamp(160px,18vw,260px);width:auto;margin:0 auto 18px;filter:drop-shadow(0 26px 30px rgba(20,0,80,.45));animation:float 4s ease-in-out infinite;transition:scale .4s cubic-bezier(.3,1.9,.4,1)}
.mood:nth-child(2) img{animation-delay:-1.3s}.mood:nth-child(3) img{animation-delay:-2.6s}
.mood:hover img{scale:1.08 .94}
@keyframes float{50%{translate:0 -14px}}
.mood figcaption{max-width:280px;margin:0 auto;color:#e2d7ff}
.mood b{display:block;font:900 italic 26px/1.1 var(--display);color:#fff;margin-bottom:6px}

/* ---- buy ---- */
.buy{padding:12vh 4vw 14vh;text-align:center}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0 36px;text-align:left}
.steps li{padding:26px 24px;border-radius:28px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.steps i{display:grid;place-items:center;width:46px;height:46px;border-radius:50% 50% 50% 14px;background:#fff;color:#4f0cf0;font:900 italic 22px/1 var(--display);margin-bottom:16px}
.steps h3{font-size:26px;margin-bottom:8px}
.steps p{color:#e2d7ff}
.ca{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:7px 18px 7px 20px;border-radius:999px;background:rgba(20,0,70,.55);border:1px solid rgba(255,255,255,.25)}
.ca code{font:600 15px/1 ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buy .cta{margin-top:30px}

footer{background:#16043f;padding:26px 4vw calc(26px + env(safe-area-inset-bottom));text-align:center;font-size:13px;color:#a796d8}
footer p{max-width:62em;margin:auto}

#toast{position:fixed;left:50%;bottom:26px;z-index:50;padding:13px 20px;border-radius:20px 20px 20px 6px;background:#fff;color:#4f0cf0;font:900 italic 15px/1 var(--display);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.25s;box-shadow:0 16px 30px rgba(20,0,80,.4)}
#toast.on{opacity:1;transform:translate(-50%,0)}

.rv{opacity:0;transform:translateY(30px) scale(.98);transition:opacity .7s,transform .8s cubic-bezier(.2,.9,.2,1.15)}
.rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .links{display:none}
  .bar .bub.ghost{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:0}
  .stage{order:-1;height:62vw;min-height:320px;max-height:520px}
  .say{left:46%;top:2%}
  .markets,.mood-row,.steps{grid-template-columns:1fr}
  .mood-row{gap:46px}
  .news{background-position:78% 50%}
  .news::before{background:linear-gradient(180deg,#4f0cf0,rgba(60,10,200,.55) 30%,rgba(40,6,140,.8))}
}
@media (max-width:560px){
  .bar{padding:12px 16px;gap:10px}
  .brand{font-size:21px}
  .hero,.odds,.moods,.buy{padding-left:18px;padding-right:18px}
  .news{padding:10vh 16px}
  .news-card{padding:26px 20px}
  .cta .bub{flex:1 1 auto;justify-content:center}
  .say{left:30%;max-width:230px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .clouds i,.mood img{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}