/* ============================================================
   HOODKING — pixel King-of-the-Hill mockup (Robinhood Chain)
   Pure UI + live SIMULATION of the decaying net-buy model.
   No wallet, no chain, no money.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#eafff2;
  --grn:#27ff86;
  --grn-d:#12b866;
  --grn-dim:#0f7a44;
  --gold:#ffcf4a;
  --cyan:#4be3ff;
  --violet:#b18bff;
  --amber:#ffab3d;
  --red:#ff5566;
  --sky1:#0a1330; --sky2:#122650; --sky3:#1e3f6e; --sky4:#2c6a72; --sky5:#2f8a5e;
  --panel:rgba(6,20,13,.72);
  --line:rgba(39,255,134,.30);
  --line-soft:rgba(39,255,134,.14);
  --pixt:0 0 0 rgba(0,0,0,0); /* no glow for pixel crispness */
  --f-pix:"Press Start 2P",monospace;
  --f-num:"VT323",monospace;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}

html{color-scheme:dark}
body{
  min-height:100vh;background:#04070c;color:var(--ink);
  font-family:var(--f-mono);font-size:13px;line-height:1.5;overflow-x:hidden;
  image-rendering:pixelated;-webkit-font-smoothing:none;
}
body::after{ /* scanline veil */
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 1px,transparent 1px 3px);
}
img,svg{image-rendering:pixelated}
::selection{background:rgba(39,255,134,.3);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(39,255,134,.25)}
::-webkit-scrollbar-track{background:transparent}

.wrap{max-width:1320px;margin:0 auto;padding:16px 16px 70px}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:2px solid var(--line);background:var(--panel);padding:10px 14px;margin-bottom:14px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:28px;height:28px;display:block;image-rendering:pixelated}
.buybtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-pix);font-size:10px;letter-spacing:.5px;color:#04120b;background:var(--grn);border:2px solid var(--grn);padding:7px 12px;text-decoration:none;white-space:nowrap;box-shadow:0 0 12px rgba(39,255,134,.35);cursor:pointer;transition:transform .08s,box-shadow .2s,background .2s}
.buybtn:hover{background:#4bffab;box-shadow:0 0 20px rgba(39,255,134,.65);transform:translateY(-1px)}
.buybtn:active{transform:translateY(0)}
.paidbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;border:2px solid var(--gold);background:linear-gradient(90deg,rgba(255,207,74,.05),rgba(255,207,74,.13),rgba(255,207,74,.05));box-shadow:0 0 26px rgba(255,207,74,.14),inset 0 0 20px rgba(255,207,74,.05);padding:9px 16px;margin-bottom:14px}
.paidbar__ic{font-size:16px;filter:drop-shadow(0 0 5px rgba(255,207,74,.6))}
.paidbar__lbl{font-family:var(--f-pix);font-size:8.5px;letter-spacing:1px;color:var(--gold)}
.paidbar__eth{font-family:var(--f-num);font-size:22px;color:var(--gold);line-height:1;text-shadow:0 0 12px rgba(255,207,74,.5)}
.paidbar__usd{font-family:var(--f-mono);font-size:13px;color:var(--grn-d)}
@media(max-width:560px){.paidbar__lbl{font-size:7px}.paidbar__eth{font-size:18px}}
.copyable{cursor:pointer;transition:filter .1s}
.copyable:hover{text-decoration:underline;filter:brightness(1.3)}
.copyable:active{filter:brightness(1.6)}
.copytoast{position:fixed;z-index:9999;transform:translate(-50%,-100%);background:var(--grn);color:#04120b;font-family:var(--f-mono);font-size:11px;font-weight:600;padding:3px 9px;border-radius:3px;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 0 12px rgba(39,255,134,.6);white-space:nowrap}
.copytoast.show{opacity:1}
.brand h1{font-family:var(--f-pix);font-size:15px;color:var(--grn);letter-spacing:1px;text-shadow:2px 2px 0 #063a1f}
.topbar__sp{flex:1}
.chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-soft);
  padding:4px 10px;font-size:11px;color:var(--grn-d);font-family:var(--f-mono)
}
.blink{width:8px;height:8px;background:var(--grn);box-shadow:0 0 8px var(--grn);animation:bl 1.1s steps(2) infinite}
@keyframes bl{50%{opacity:.15}}

/* ============================================================
   SCENE
   ============================================================ */
.scene{
  position:relative;height:720px;overflow:hidden;
  border:2px solid var(--line);
  background:linear-gradient(180deg,
    var(--sky1) 0 14%, var(--sky2) 14% 30%, var(--sky3) 30% 46%,
    var(--sky4) 46% 60%, var(--sky5) 60% 100%);
}
.scene__sun{
  position:absolute;left:12%;top:11%;width:46px;height:46px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 6px rgba(255,207,74,.18),0 0 40px 10px rgba(255,207,74,.35);
}
.cloud{position:absolute;height:10px;background:rgba(234,255,242,.14);box-shadow:10px 0 rgba(234,255,242,.14),22px 0 rgba(234,255,242,.10),-12px 2px rgba(234,255,242,.10)}
.cloud.c1{top:16%;left:-10%;width:30px;animation:drift 46s linear infinite}
.cloud.c2{top:26%;left:-20%;width:22px;animation:drift 63s linear infinite;animation-delay:-20s}
.cloud.c3{top:9%;left:-30%;width:26px;animation:drift 82s linear infinite;animation-delay:-40s}
@keyframes drift{to{left:120%}}

.scene__mtn{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}

/* climber layer + hero sit above the svg */
.layer{position:absolute;inset:0}

/* zoomable world (mtn + climbers + hero + ground) */
.world{position:absolute;inset:0;transform-origin:50% 15%;will-change:transform}
.scene.zoomed{cursor:grab}
.scene.grabbing{cursor:grabbing}
.zoom{position:absolute;left:12px;bottom:34px;z-index:36;display:flex;flex-direction:column;gap:6px;align-items:center}
.zoom button{width:34px;height:34px;border:2px solid var(--line);background:rgba(4,14,9,.82);color:var(--grn);font-family:var(--f-pix);font-size:11px;cursor:pointer;line-height:1}
.zoom button:hover{background:rgba(39,255,134,.16);border-color:var(--grn)}
.zoom .zhint{writing-mode:vertical-rl;font-size:9px;color:var(--grn-dim);margin-top:4px;letter-spacing:1px}

/* ---------- climbers ---------- */
.climber{
  position:absolute;width:12px;height:14px;color:var(--grn);
  transition:left .9s linear,top .9s linear,transform .9s linear;
  cursor:pointer;z-index:5;
}
.climber::before{content:"";position:absolute;left:4px;top:6px;width:4px;height:6px;background:currentColor;box-shadow:0 0 0 1px rgba(0,0,0,.6)} /* body */
.climber::after{content:"";position:absolute;left:5px;top:2px;width:3px;height:3px;background:currentColor;box-shadow:0 0 0 1px rgba(0,0,0,.6)}  /* head */
.climber:hover{filter:drop-shadow(0 0 4px currentColor);z-index:40}
.climber:hover::before{outline:1px solid #fff}
.climber.me{color:var(--cyan);z-index:60}
/* dedicated YOU marker: a down-arrow badge pinned above your climber */
.you-marker{position:absolute;z-index:999;pointer-events:none;transform:translate(-50%,-100%);display:none}
.you-marker span{position:relative;display:block;font-family:var(--f-pix);font-size:8px;color:#04120b;background:var(--cyan);padding:3px 6px;white-space:nowrap;box-shadow:0 0 0 1.5px #04120b,0 0 10px rgba(75,227,255,.95);animation:youbob .8s ease-in-out infinite}
.you-marker span::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--cyan)}
@keyframes youbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- the king hero ---------- */
/* king levitates on a throne above the peak, and dodges the cursor via --hx/--hy */
.hero{position:absolute;left:50%;top:32%;z-index:30;will-change:transform;transition:transform .06s linear;
  transform:translate(calc(-50% + var(--hx,0px)),calc(-100% + var(--hy,0px)))}
.hero__body{position:relative;animation:float 3s ease-in-out infinite;transform-origin:center bottom}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero__body::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:56px;height:12px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(75,227,255,.42),transparent 70%);animation:aura 3s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.45;width:50px}50%{opacity:.85;width:64px}}
.hero__king{height:150px;width:auto;display:block;image-rendering:pixelated;filter:drop-shadow(0 4px 0 rgba(0,0,0,.4))}

/* holder floating wallet card next to the hero */
.holder-tag{
  position:absolute;left:0;top:0;z-index:37;
  border:2px solid var(--gold);background:rgba(10,20,8,.92);padding:7px 10px;min-width:150px;
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
}
.holder-tag .ht-lbl{font-family:var(--f-pix);font-size:7px;color:var(--gold);letter-spacing:1px;margin-bottom:6px}
.holder-tag .ht-w{font-family:var(--f-mono);font-size:12px;color:var(--ink)}
.holder-tag .ht-row{display:flex;justify-content:space-between;font-size:12px;margin-top:5px;color:var(--grn-d)}
.holder-tag .ht-row b{font-family:var(--f-num);font-size:17px;color:var(--gold);line-height:1}
.holder-tag .ht-inc b{color:var(--grn)}
.holder-tag.is-you{border-color:var(--cyan);box-shadow:4px 4px 0 rgba(0,0,0,.45),0 0 16px rgba(75,227,255,.45)}
.holder-tag.is-you .ht-lbl{color:var(--cyan)}
.hero.is-you .hero__body::after{background:radial-gradient(ellipse,rgba(75,227,255,.65),transparent 70%)}

/* income coin flying up */
.coin{position:absolute;width:6px;height:6px;background:var(--gold);z-index:20;box-shadow:0 0 6px rgba(255,207,74,.7);pointer-events:none}

/* dethroned king tumbling off the mountain */
.faller{position:absolute;z-index:55;pointer-events:none;image-rendering:pixelated}
.faller svg{filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}

/* capture banner + flash */
.flash{position:absolute;inset:0;background:#eafff2;opacity:0;pointer-events:none;z-index:60}
.flash.go{animation:fl .5s ease}
@keyframes fl{0%{opacity:.7}100%{opacity:0}}
.banner{
  position:absolute;left:50%;top:40%;z-index:61;
  transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
  font-family:var(--f-pix);font-size:16px;color:var(--gold);text-shadow:2px 2px 0 #3a2400,0 0 18px rgba(255,207,74,.7);white-space:nowrap
}
.banner.go{animation:bn 1.6s ease}
@keyframes bn{10%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}

/* tooltip */
.tip{
  position:fixed;z-index:120;pointer-events:none;opacity:0;transition:opacity .1s;
  border:2px solid var(--line);background:rgba(4,14,9,.96);padding:8px 10px;font-size:12px;min-width:170px;
  box-shadow:4px 4px 0 rgba(0,0,0,.5)
}
.tip.show{opacity:1}
.tip .t-w{font-family:var(--f-mono);color:var(--ink);font-size:12px;margin-bottom:5px}
.tip .t-row{display:flex;justify-content:space-between;gap:14px;color:var(--grn-dim)}
.tip .t-row b{color:var(--grn);font-family:var(--f-num);font-size:15px}
.tip .t-crown{color:var(--gold)}

/* ============================================================
   HUD PANELS
   ============================================================ */
.grid{display:grid;gap:14px}
.cols3{grid-template-columns:1fr 1fr 1fr}
.cols2{grid-template-columns:1fr 1fr}
.mt{margin-top:14px}
/* main stage: leaderboard | mountain | live feed */
.stage{display:grid;grid-template-columns:270px minmax(0,1fr) 320px;grid-template-rows:640px;gap:14px}
.stage__side{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.stage__side .lead-scroll,.stage__side .feed{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;margin-top:6px}
.stage .scene{height:640px}
/* HOW IT WORKS — pixel cards */
.hiw-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px}
.hiw-card{display:flex;flex-direction:column;align-items:center;text-align:center;border:2px solid var(--line);background:rgba(4,14,9,.45);padding:16px 10px 0}
.hiw-num{width:26px;height:26px;border:2px solid var(--grn-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-pix);font-size:9px;color:var(--grn)}
.hiw-title{font-family:var(--f-pix);font-size:10px;color:var(--grn);letter-spacing:1px;margin-top:12px;white-space:nowrap;display:flex;align-items:center}
.hiw-title::before,.hiw-title::after{content:"";width:12px;height:2px;background:var(--grn-dim);margin:0 8px}
.hiw-art{flex:1;display:flex;align-items:center;justify-content:center;color:var(--grn);margin:18px 0}
.hiw-art svg{width:60px;height:60px;fill:currentColor;filter:drop-shadow(0 0 7px rgba(39,255,134,.35))}
.hiw-cap{width:100%;border-top:1px solid var(--line-soft);padding:11px 4px 13px;font-family:var(--f-mono);font-size:10px;color:var(--grn-d);line-height:1.6;letter-spacing:.4px}
@media(max-width:920px){.hiw-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.hiw-grid{grid-template-columns:1fr 1fr}}

.panel{position:relative;border:2px solid var(--line);background:var(--panel);padding:14px}
.panel__t{font-family:var(--f-pix);font-size:9px;color:var(--grn);letter-spacing:1px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.panel__t span.sub{font-family:var(--f-mono);font-size:10px;color:var(--grn-dim)}

.kv{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line-soft);font-size:12px}
.kv:last-child{border-bottom:0}
.kv b{font-family:var(--f-num);font-size:18px;color:var(--ink);line-height:1}
.muted{color:var(--grn-dim)}
.gold{color:var(--gold)} .red{color:var(--red)} .cyan{color:var(--cyan)} .pos{color:var(--grn)}
.addr{font-family:var(--f-mono);color:var(--grn-d)}

/* capture panel */
.amt{display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:rgba(0,0,0,.35);padding:0 10px;height:44px;margin-bottom:10px}
.amt span{color:var(--grn-dim)}
.amt input{flex:1;background:none;border:0;outline:none;color:var(--ink);font-family:var(--f-num);font-size:24px;width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{border:1px solid var(--line-soft);background:none;color:var(--grn-d);font-family:var(--f-mono);font-size:11px;padding:5px 9px;cursor:pointer}
.chips button:hover{border-color:var(--grn);color:var(--ink);background:rgba(39,255,134,.08)}
.btn{
  width:100%;height:50px;border:2px solid var(--grn);background:rgba(39,255,134,.14);color:var(--ink);
  font-family:var(--f-pix);font-size:12px;letter-spacing:1px;cursor:pointer;text-shadow:2px 2px 0 #063a1f;transition:all .12s
}
.btn:hover{background:rgba(39,255,134,.24);box-shadow:0 0 20px rgba(39,255,134,.35)}
.btn:active{transform:translateY(2px)}

/* meters */
.meter{height:12px;border:1px solid var(--line);background:rgba(39,255,134,.08);position:relative;overflow:hidden}
.meter>i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--grn-d),var(--grn));transition:width .5s}
.meter.siege>i{background:linear-gradient(90deg,var(--amber),var(--red))}
.meter__lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--grn-dim);margin-bottom:6px}

/* leaderboard */
.lead-scroll{max-height:520px;overflow-y:auto;overflow-x:hidden;margin-right:-6px;padding-right:4px}
.lead-scroll::-webkit-scrollbar{width:8px}
.lead-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.lead{width:100%;border-collapse:collapse;font-size:12px}
.lead thead th{position:sticky;top:0;background:var(--panel);z-index:1}
.lead th{text-align:left;color:var(--grn-dim);font-weight:400;font-size:10px;padding:5px 6px;border-bottom:1px solid var(--line-soft)}
.lead td{padding:6px;border-bottom:1px dashed rgba(39,255,134,.08)}
.lead .num{text-align:right;font-family:var(--f-num);font-size:15px}
.lead tr.king td{background:rgba(255,207,74,.08)}
.lead tr.me td{background:rgba(75,227,255,.08)}
.lead .rk{color:var(--grn-dim);min-width:22px;white-space:nowrap}
.hbar{height:5px;background:rgba(39,255,134,.12);margin-top:3px}
.hbar>i{display:block;height:100%;background:var(--grn)}

/* feed */
.feed{font-size:12px;max-height:220px;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.feed__row{display:flex;gap:8px;padding:4px 2px;border-bottom:1px dashed rgba(39,255,134,.07);animation:sl .3s ease}
@keyframes sl{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.feed__row .t{color:var(--grn-dim);white-space:nowrap}
.buy{color:var(--grn)} .sell{color:var(--red)} .cap{color:var(--gold)} .pay{color:var(--gold);font-weight:500}
.feed__row--pay{background:rgba(255,207,74,.07)}

/* ticker */
.ticker{overflow:hidden;border:2px solid var(--line);background:var(--panel);margin-top:14px;height:34px;display:flex;align-items:center}
.ticker__track{display:flex;gap:26px;white-space:nowrap;padding-left:100%;animation:tick 26s linear infinite;font-family:var(--f-mono);font-size:12px}
@keyframes tick{to{transform:translateX(-100%)}}

/* rules / how it works */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.rule{border:1px dashed var(--line-soft);background:rgba(6,20,13,.5);padding:12px}
.rule__i{font-size:20px;line-height:1;margin-bottom:8px}
.rule b{display:block;font-family:var(--f-pix);font-size:9px;color:var(--grn);letter-spacing:.5px;margin-bottom:6px}
.rule p{color:var(--grn-mid);font-size:12px;line-height:1.5}
.rules-note{margin-top:12px;font-size:12px;color:var(--grn-dim);border-top:1px dashed var(--line-soft);padding-top:10px}
.rules-note b{color:var(--gold)}

/* hall of fame */
.hof{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;padding:7px 6px;border-bottom:1px dashed rgba(39,255,134,.08);font-size:12.5px}
.hof:last-child{border-bottom:0}
.hof__n{color:var(--gold);font-family:var(--f-num);font-size:16px}
.hof__d{color:var(--grn-dim);font-family:var(--f-num);font-size:15px}
.hof__e{color:var(--gold);font-family:var(--f-num);font-size:16px;min-width:56px;text-align:right}

.mock{position:fixed;bottom:12px;right:12px;z-index:100;border:1px solid var(--line);background:rgba(4,14,9,.85);padding:5px 10px;font-size:10px;color:var(--grn-d)}

@media(max-width:900px){
  .cols3,.cols2{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr;grid-template-rows:auto}
  .stage__side{height:340px}
  .stage .scene{height:520px}
  .holder-tag{left:auto;right:8px;top:8px;min-width:148px;animation:none}
  .scene{height:560px}
}

/* ── coin king (left-side easter egg: poke his cheeks → coins rain out) ── */
.coinking{position:fixed;left:6px;bottom:0;z-index:45;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.coinking__img{display:block;height:230px;width:auto;image-rendering:pixelated;transform-origin:50% 100%}
.coinking.poked .coinking__img{animation:kingwiggle .42s ease-in-out}
.coinking__butt{position:absolute;left:20%;top:55%;width:60%;height:42%;border-radius:45% 45% 50% 50%;cursor:pointer;pointer-events:auto}
.coinking__butt:hover{background:radial-gradient(ellipse at 50% 45%,rgba(255,207,74,.16),transparent 70%)}
@keyframes kingwiggle{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-4deg) translateY(2px)}55%{transform:rotate(3.5deg)}80%{transform:rotate(-1.5deg)}}
.kingcoin{position:fixed;width:15px;height:15px;border-radius:50%;z-index:9998;pointer-events:none;
  background:radial-gradient(circle at 35% 28%,#fff2b4,#ffcf4a 55%,#c88a12);
  box-shadow:0 0 7px rgba(255,207,74,.8),inset 0 0 0 2px rgba(140,98,18,.75);
  animation:kingcoinfall 1.5s cubic-bezier(.35,.05,.6,1) forwards}
.kingcoin::before{content:"$";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 9px var(--f-num,monospace);color:rgba(120,82,10,.85)}
@keyframes kingcoinfall{0%{transform:translate(0,-6px) rotate(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
@media(max-width:1200px){.coinking{display:none}}