*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

:root{
  --bg:        #0e1a0f;
  --bg2:       #121f13;
  --bg3:       #0a1209;
  --panel:     #17261a;
  --panel2:    #1e3022;
  --bamboo1:   #4a7c3f;
  --bamboo2:   #6aaa5a;
  --bamboo3:   #8fd67a;
  --lime:      #d4b85a;
  --gold:      #e8c84a;
  --brown:     #5c3d1e;
  --brown2:    #8b5e2e;
  --mist:      rgba(180,220,160,.08);
  --ink:       #0a0f08;
  --txt:       #ede4c8;
  --txt2:      #c9b888;
  --txt3:      #8a7a5a;
  --red:       #d64030;
  --white:     #f5ecd4;
}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Nunito',sans-serif;
  overflow-x:hidden;
  cursor:none;
}

/* ── GRAIN ── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.045;mix-blend-mode:overlay;
}

/* ── CURSOR ── */
#cur{display:none;}
body, .home-fullbg, .tab-btn, button, a, input{cursor:auto !important;}

/* ── FLOATING BAMBOO PARTICLES ── */
#bamboo-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.bam-p{position:absolute;opacity:0;animation:bamFall linear infinite;}
@keyframes bamFall{
  0%{opacity:0;transform:translateY(-20px) rotate(0deg);}
  8%{opacity:.5;}90%{opacity:.12;}
  100%{opacity:0;transform:translateY(108vh) rotate(360deg);}
}

/* ── BAMBOO STALKS BG ── */
.bamboo-stalks{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  overflow:hidden;
}
.stalk{
  position:absolute;bottom:0;
  background:linear-gradient(180deg,transparent 0%,var(--bamboo1) 15%,var(--bamboo2) 50%,var(--bamboo1) 85%,transparent 100%);
  opacity:.06;
  animation:stalkSway ease-in-out infinite alternate;
}
@keyframes stalkSway{from{transform:rotate(-.8deg);}to{transform:rotate(.8deg);}}

/* ── MIST OVERLAY ── */
.mist-layer{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 40% at 20% 80%,rgba(100,180,80,.06),transparent),
    radial-gradient(ellipse 60% 30% at 80% 20%,rgba(80,160,60,.04),transparent),
    radial-gradient(ellipse 100% 50% at 50% 100%,rgba(30,60,20,.4),transparent);
}

/* ── LOADER ── */
#loader{
  position:fixed;inset:0;z-index:9998;
  background:var(--bg3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  transition:opacity .7s,visibility .7s;
}
#loader.out{opacity:0;visibility:hidden;pointer-events:none;}
.ld-panda{font-size:90px;animation:ldBounce 1s ease-in-out infinite alternate;}
@keyframes ldBounce{from{transform:translateY(0) rotate(-3deg);}to{transform:translateY(-14px) rotate(3deg);}}
.ld-bamboo{display:flex;gap:6px;align-items:flex-end;height:40px;}
.ld-b{
  width:6px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--bamboo3),var(--bamboo1));
  animation:ldBar .6s ease-in-out infinite alternate;
}
.ld-b:nth-child(1){height:20px;animation-delay:0s;}
.ld-b:nth-child(2){height:32px;animation-delay:.1s;}
.ld-b:nth-child(3){height:40px;animation-delay:.2s;}
.ld-b:nth-child(4){height:28px;animation-delay:.3s;}
.ld-b:nth-child(5){height:36px;animation-delay:.4s;}
@keyframes ldBar{from{transform:scaleY(1);}to{transform:scaleY(.5);}}
.ld-title{
  font-family:'Bangers',cursive;font-size:3rem;letter-spacing:.2em;
  color:var(--lime);text-shadow:0 0 30px rgba(184,245,66,.4);
}
.ld-bar{width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;}
.ld-fill{height:100%;width:0;background:linear-gradient(90deg,var(--bamboo2),var(--lime));border-radius:99px;animation:ldFill 2.2s ease forwards;}
@keyframes ldFill{to{width:100%;}}
.ld-sub{font-family:'Kalam',cursive;font-size:.95rem;color:var(--txt3);}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 2rem;
  background:rgba(10,18,8,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:2px solid rgba(74,124,63,.35);
}
.nav-logo{
  font-family:'Bangers',cursive;font-size:1.8rem;letter-spacing:.1em;
  color:var(--lime);display:flex;align-items:center;gap:.4rem;
  text-shadow:0 0 20px rgba(184,245,66,.3);
}

/* TAB NAV */
.tab-nav{display:flex;gap:.15rem;background:rgba(255,255,255,.04);border:1px solid rgba(74,124,63,.25);padding:.2rem;border-radius:6px;}
.tab-btn{
  background:none;border:none;cursor:none;
  font-family:'Bangers',cursive;font-size:1rem;letter-spacing:.08em;
  color:var(--txt3);padding:.38rem 1rem;border-radius:4px;
  transition:all .2s;white-space:nowrap;
}
.tab-btn:hover{color:var(--txt);background:rgba(74,124,63,.2);}
.tab-btn.active{background:var(--bamboo1);color:var(--white);box-shadow:0 0 12px rgba(74,124,63,.4);}

.nav-r{display:flex;gap:.6rem;align-items:center;}
.nav-price{font-family:'Kalam',cursive;font-size:.85rem;color:var(--lime);font-weight:700;}
#sndBtn{
  background:rgba(74,124,63,.3);border:1px solid rgba(74,124,63,.4);
  color:var(--txt2);width:32px;height:32px;border-radius:50%;
  cursor:none;font-size:.85rem;transition:all .2s;
}
#sndBtn:hover{background:var(--bamboo1);color:var(--white);}

/* ══════════════════════════════════════
   SPA PAGE TRANSITIONS
   Pages fade + slide between each other.
   No reload. Smooth like a real app.
══════════════════════════════════════ */
.tab-section{
  display:none;
  min-height:100vh;
  padding-top:68px;
  position:relative;
  z-index:2;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
.tab-section.active{display:block;}
.tab-section.in{opacity:1;transform:translateY(0);}
.tab-section.out{opacity:0;transform:translateY(-14px);pointer-events:none;}

/* Route progress bar (thin line across top during transition) */
#routeBar{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9995;
  background:linear-gradient(90deg,var(--bamboo2),var(--lime),var(--bamboo3));
  box-shadow:0 0 12px rgba(184,245,66,.6);
  transition:width .35s ease, opacity .25s ease;
  opacity:0;pointer-events:none;
}
#routeBar.run{opacity:1;}

/* Pulsing dot under active nav tab */
.tab-btn.active{position:relative;}
.tab-btn.active::after{
  content:'';position:absolute;left:50%;bottom:-6px;
  width:4px;height:4px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 8px rgba(184,245,66,.8);
  transform:translateX(-50%);
  animation:dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:.5;transform:translateX(-50%) scale(.8);}50%{opacity:1;transform:translateX(-50%) scale(1.3);}}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .tab-section{transition:opacity .15s linear;transform:none;}
  .tab-section.out{transform:none;}
}

/* ══════════════════════════════════════
   TAB 1 — INTRODUCTION
══════════════════════════════════════ */
#tab-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  max-width:1400px;margin:0 auto;
  padding:3rem clamp(1.25rem,4vw,4rem);
  gap:3rem;
  min-height:100vh;
}
#tab-intro.active{display:grid;}

/* diagonal hatch bg */
#tab-intro::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(74,124,63,.03) 20px,rgba(74,124,63,.03) 21px);
}

.intro-left{}
.intro-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(74,124,63,.2);border:1px solid rgba(74,124,63,.4);
  padding:.28rem .85rem;border-radius:3px;
  font-family:'Kalam',cursive;font-size:.8rem;color:var(--bamboo3);
  margin-bottom:1.4rem;
}
.intro-badge::before{content:'';width:6px;height:6px;background:var(--lime);border-radius:50%;animation:blink 1.2s step-end infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

.intro-h1{
  font-family:'Bangers',cursive;
  font-size:clamp(3.5rem,8vw,8rem);
  line-height:.88;letter-spacing:.04em;
  color:var(--white);
}
.intro-h1 .green{
  color:var(--lime);
  -webkit-text-stroke:1px rgba(74,124,63,.5);
  text-shadow:0 0 40px rgba(184,245,66,.3),4px 4px 0 rgba(74,124,63,.4);
}
.intro-h1 .gold{color:var(--gold);-webkit-text-stroke:1px rgba(139,94,46,.4);}

.intro-sub{
  margin-top:1.2rem;font-size:1rem;line-height:1.7;
  color:var(--txt2);max-width:420px;font-weight:600;
}
.intro-sub strong{color:var(--white);font-weight:900;}

.intro-btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem;}
.btn-main{
  display:inline-block;text-decoration:none;
  background:var(--lime);color:var(--ink);
  font-family:'Bangers',cursive;font-size:1.3rem;letter-spacing:.1em;
  padding:.7rem 2rem;border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--bamboo1);transition:all .18s;cursor:none;
}
.btn-main:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--bamboo1);}
.btn-sec{
  display:inline-block;text-decoration:none;
  background:transparent;color:var(--lime);
  font-family:'Bangers',cursive;font-size:1.3rem;letter-spacing:.1em;
  padding:.7rem 2rem;border:2.5px solid var(--bamboo1);
  box-shadow:4px 4px 0 rgba(74,124,63,.3);transition:all .18s;cursor:none;
}
.btn-sec:hover{transform:translate(-2px,-2px);background:rgba(74,124,63,.15);}

.intro-stats{
  display:flex;gap:0;margin-top:2rem;
  border:2px solid rgba(74,124,63,.3);
  background:rgba(23,38,26,.8);
}
.istat{padding:.9rem 1.4rem;border-right:1px solid rgba(74,124,63,.25);flex:1;}
.istat:last-child{border:none;}
.istat-v{font-family:'Bangers',cursive;font-size:1.8rem;color:var(--lime);display:block;letter-spacing:.04em;}
.istat-l{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt3);font-weight:800;}

/* intro right — panda */
.intro-right{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:500px;
}
.intro-right::before{
  content:'';position:absolute;
  width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(74,124,63,.2) 0%,rgba(74,124,63,.06) 50%,transparent 75%);
  filter:blur(30px);animation:auraAnim 4s ease-in-out infinite;
}
@keyframes auraAnim{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

.panda-hero-svg{
  position:relative;z-index:2;
  width:clamp(260px,35vw,450px);
  animation:pandaFloat 5s ease-in-out infinite;
  filter:drop-shadow(0 20px 50px rgba(74,124,63,.3)) drop-shadow(0 4px 12px rgba(0,0,0,.5));
  cursor:none;
}
@keyframes pandaFloat{0%,100%{transform:translateY(0) rotate(-.8deg);}50%{transform:translateY(-18px) rotate(.8deg);}}

.htag{
  position:absolute;z-index:5;
  font-family:'Kalam',cursive;font-weight:700;font-size:.8rem;
  padding:.35rem .85rem;
  background:rgba(23,38,26,.9);
  border:1.5px solid rgba(74,124,63,.5);
  color:var(--bamboo3);white-space:nowrap;
  animation:tagWobble var(--td,4s) ease-in-out var(--dl,0s) infinite;
}
@keyframes tagWobble{0%,100%{transform:rotate(var(--r,-2deg)) translateY(0);}50%{transform:rotate(var(--r,-2deg)) translateY(-7px);}}
.ht1{top:10%;left:0%;--r:-3deg;--td:3.8s;--dl:0s;}
.ht2{top:10%;right:0%;--r:3deg;--td:4.2s;--dl:.4s;}
.ht3{bottom:28%;left:0%;--r:-2deg;--td:5s;--dl:.8s;}
.ht4{bottom:12%;right:0%;--r:3deg;--td:3.5s;--dl:.2s;}

/* TICKER */
.ticker-strip{
  overflow:hidden;height:36px;
  border-top:2px solid rgba(74,124,63,.3);border-bottom:2px solid rgba(74,124,63,.3);
  background:rgba(10,18,8,.9);
  display:flex;align-items:center;
  position:relative;z-index:10;
}
.ticker-inner{display:flex;animation:tickMove 40s linear infinite;white-space:nowrap;}
@keyframes tickMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.titem{
  padding:0 2rem;font-family:'Kalam',cursive;font-size:.82rem;font-weight:700;
  color:var(--txt3);border-right:1px solid rgba(74,124,63,.2);line-height:36px;
}
.titem .up{color:var(--lime);}.titem .dn{color:var(--red);}.titem .hl{color:var(--bamboo3);}

/* ══════════════════════════════════════
   TAB 2 — GAME
══════════════════════════════════════ */
#tab-game{padding-top:68px;}
#tab-game.active{display:block;}

.game-wrap{max-width:1200px;margin:0 auto;padding:3rem clamp(1.25rem,4vw,3rem);}
.sec-stamp{
  display:inline-block;font-family:'Bangers',cursive;font-size:.75rem;
  letter-spacing:.25em;color:var(--lime);background:rgba(74,124,63,.25);
  border:1px solid rgba(74,124,63,.4);padding:.22rem .8rem;margin-bottom:.8rem;
}
.sec-h2{
  font-family:'Bangers',cursive;
  font-size:clamp(2.5rem,6vw,5rem);
  letter-spacing:.04em;line-height:.88;color:var(--white);
}
.sec-h2 .outline{-webkit-text-stroke:2px var(--bamboo1);-webkit-text-fill-color:transparent;}
.sec-note{font-size:.92rem;color:var(--txt2);margin-top:.6rem;max-width:480px;line-height:1.65;font-weight:600;}

.game-layout{display:grid;grid-template-columns:1fr 280px;gap:1.5rem;margin-top:2rem;align-items:start;}

#gc{
  width:100%;aspect-ratio:5/3;display:block;
  border:2.5px solid rgba(74,124,63,.5);
  box-shadow:0 0 0 1px rgba(74,124,63,.15), 4px 4px 0 rgba(10,18,8,.8);
}

.g-panel{
  background:var(--panel);
  border:2px solid rgba(74,124,63,.35);
  box-shadow:4px 4px 0 rgba(10,18,8,.6);
}

/* username input */
.g-username{
  padding:.8rem 1rem;
  border-bottom:1.5px solid rgba(74,124,63,.2);
  background:rgba(74,124,63,.07);
}
.g-username label{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);font-weight:800;display:block;margin-bottom:.35rem;}
.g-username-row{display:flex;gap:.4rem;}
#usernameInput{
  flex:1;padding:.4rem .6rem;
  background:rgba(0,0,0,.3);border:1.5px solid rgba(74,124,63,.35);
  color:var(--txt);font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:800;
  outline:none;cursor:text;
}
#usernameInput::placeholder{color:var(--txt3);}
#setNameBtn{
  padding:.4rem .75rem;background:var(--bamboo1);border:1.5px solid rgba(74,124,63,.5);
  color:var(--white);font-family:'Bangers',cursive;font-size:.9rem;letter-spacing:.06em;cursor:none;
}
#activeUser{font-size:.68rem;color:var(--bamboo3);font-weight:800;margin-top:.28rem;min-height:.9rem;}

.g-hud{padding:.9rem 1rem;}
.hrow{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid rgba(74,124,63,.12);}
.hrow:last-child{border:none;}
.hk{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);font-weight:800;}
.hv{font-family:'Bangers',cursive;font-size:1.5rem;letter-spacing:.04em;color:var(--white);}
.hv.green{color:var(--lime);}
.hv.red{color:var(--red);}

.gbtns{display:flex;gap:.4rem;margin:.6rem 1rem;}
.gbtn{
  flex:1;padding:.55rem 0;
  background:rgba(0,0,0,.3);border:1.5px solid rgba(74,124,63,.35);
  color:var(--txt2);cursor:none;
  font-family:'Bangers',cursive;font-size:.95rem;letter-spacing:.08em;
  transition:all .15s;
}
.gbtn:hover{border-color:var(--bamboo2);color:var(--white);}
.gbtn.prime{background:var(--bamboo1);border-color:var(--bamboo2);color:var(--white);}
.gbtn.prime:hover{background:var(--bamboo2);}

.lb{border-top:1.5px solid rgba(74,124,63,.2);margin-top:.4rem;}
.lb-head{
  padding:.5rem 1rem;font-family:'Bangers',cursive;font-size:.85rem;
  letter-spacing:.12em;color:var(--bamboo3);
  border-bottom:1px solid rgba(74,124,63,.15);
  background:rgba(74,124,63,.06);
}
.lb-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.42rem 1rem;border-bottom:1px solid rgba(74,124,63,.07);
  font-size:.8rem;transition:background .14s;
}
.lb-row:hover{background:rgba(74,124,63,.06);}
.lb-row:last-child{border:none;}
.lb-n{color:var(--txt3);width:16px;font-size:.58rem;font-weight:800;}
.lb-name{flex:1;color:var(--txt);font-weight:800;}
.lb-sc{font-family:'Bangers',cursive;color:var(--lime);font-size:1.05rem;}

.mob-ctrl{display:flex;gap:.4rem;margin-top:.4rem;}
.mbtn{
  flex:1;padding:.9rem;background:rgba(74,124,63,.15);
  border:1.5px solid rgba(74,124,63,.3);
  color:var(--txt);font-size:1.2rem;cursor:none;font-weight:900;
}
.mbtn:active{background:rgba(74,124,63,.35);}
@media(min-width:801px){.mob-ctrl{display:none;}}

/* ══════════════════════════════════════
   TAB 3 — HOME (panda art placeholder)
══════════════════════════════════════ */
#tab-home{padding-top:68px;}
#tab-home.active{display:flex;flex-direction:column;}

.home-wrap{
  max-width:1200px;margin:0 auto;
  padding:4rem clamp(1.25rem,4vw,3rem);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;flex:1;
  min-height:calc(100vh - 68px);
  justify-content:center;
}

.home-title{
  font-family:'Bangers',cursive;
  font-size:clamp(2.5rem,6vw,5rem);
  letter-spacing:.06em;color:var(--white);
  margin-bottom:.5rem;
}
.home-sub{font-size:.95rem;color:var(--txt2);font-weight:600;max-width:420px;line-height:1.65;margin-bottom:3rem;}

/* The big clickable panda art area */
.home-panda-zone{
  width:clamp(280px,50vw,520px);
  aspect-ratio:1;
  border:3px dashed rgba(74,124,63,.4);
  background:rgba(23,38,26,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:none;
  position:relative;
  transition:all .25s;
  overflow:hidden;
}
.home-panda-zone::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(74,124,63,.08),transparent 70%);
  animation:auraAnim 4s ease-in-out infinite;
}
.home-panda-zone:hover{
  border-color:rgba(74,124,63,.7);
  background:rgba(23,38,26,.8);
  box-shadow:0 0 40px rgba(74,124,63,.15);
}
.home-panda-zone:hover .home-panda-emoji{transform:scale(1.08) rotate(3deg);}

/* Panda art image — swap src when art is ready */
#homePandaImg{
  width:85%;height:85%;object-fit:contain;
  position:relative;z-index:2;
  display:none; /* hidden until art is uploaded */
  animation:pandaFloat 5s ease-in-out infinite;
}
.home-panda-emoji{
  font-size:clamp(80px,15vw,140px);
  position:relative;z-index:2;
  animation:pandaFloat 5s ease-in-out infinite;
  transition:transform .3s;
  display:block;
}
.home-panda-placeholder{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
}
.home-art-label{
  font-family:'Kalam',cursive;font-size:.85rem;
  color:var(--txt3);font-weight:700;
  background:rgba(74,124,63,.15);border:1px solid rgba(74,124,63,.3);
  padding:.3rem .9rem;border-radius:3px;
}

/* info cards below panda */
.home-cards{
  display:flex;gap:1rem;margin-top:2.5rem;flex-wrap:wrap;justify-content:center;
}
.home-card{
  background:var(--panel);border:1.5px solid rgba(74,124,63,.25);
  padding:1.2rem 1.8rem;flex:1;min-width:180px;max-width:220px;
  text-align:center;
}
.home-card-v{font-family:'Bangers',cursive;font-size:2rem;color:var(--lime);letter-spacing:.05em;}
.home-card-l{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--txt3);font-weight:800;margin-top:.2rem;}

/* upload hint */
.home-upload-hint{
  margin-top:1.5rem;
  font-family:'Kalam',cursive;font-size:.82rem;color:var(--txt3);
  display:flex;align-items:center;gap:.5rem;
}

/* ══════════════════════════════════════
   TAB 4 — MEME GALLERY
══════════════════════════════════════ */
#tab-memes{padding-top:68px;}
#tab-memes.active{display:block;}

.memes-wrap{max-width:1200px;margin:0 auto;padding:3rem clamp(1.25rem,4vw,3rem);}

/* upload area */
.meme-upload-zone{
  border:2.5px dashed rgba(74,124,63,.4);
  background:rgba(23,38,26,.6);
  padding:2.5rem;text-align:center;
  margin-bottom:2rem;cursor:none;
  transition:all .22s;position:relative;
}
.meme-upload-zone:hover{border-color:var(--bamboo2);background:rgba(23,38,26,.85);}
.meme-upload-zone input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.muz-icon{font-size:2.5rem;display:block;margin-bottom:.75rem;}
.muz-title{font-family:'Bangers',cursive;font-size:1.8rem;letter-spacing:.06em;color:var(--white);margin-bottom:.35rem;}
.muz-sub{font-size:.85rem;color:var(--txt3);font-weight:600;}

/* meme grid */
.meme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:3px;
  background:rgba(74,124,63,.2);
  border:2px solid rgba(74,124,63,.3);
}
.meme-cell{
  aspect-ratio:1;
  background:var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;cursor:none;
  transition:background .2s;
}
.meme-cell:hover{background:var(--panel2);}
.meme-cell img{
  width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .3s;
}
.meme-cell:hover img{transform:scale(1.05);}

/* meme cell overlay */
.meme-overlay{
  position:absolute;inset:0;
  background:rgba(10,18,8,.88);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  opacity:0;transition:opacity .22s;padding:.75rem;
}
.meme-cell:hover .meme-overlay{opacity:1;}
.meme-overlay-del{
  font-family:'Bangers',cursive;font-size:.9rem;letter-spacing:.08em;
  color:var(--red);background:rgba(214,64,48,.15);
  border:1px solid rgba(214,64,48,.4);padding:.3rem .8rem;cursor:pointer;
}
.meme-overlay-del:hover{background:rgba(214,64,48,.3);}

/* empty gallery state */
.meme-empty{
  grid-column:1/-1;
  padding:4rem 2rem;text-align:center;
}
.meme-empty-icon{font-size:3rem;display:block;margin-bottom:.75rem;opacity:.4;}
.meme-empty-txt{font-family:'Kalam',cursive;font-size:1rem;color:var(--txt3);}

/* meme count */
.meme-count{
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--txt3);font-weight:800;margin-bottom:1rem;
}

/* ══════════════════════════════════════
   SHARED SECTION STYLES (tokenomics, lore, community in intro)
══════════════════════════════════════ */
.full-section{
  position:relative;z-index:2;
  padding:4rem clamp(1.25rem,4vw,4rem);
  max-width:1400px;margin:0 auto;
}

.comic-rule{height:3px;background:rgba(74,124,63,.25);position:relative;z-index:2;}

/* TOKENOMICS */
.toke-table{
  margin-top:2.5rem;
  border:2px solid rgba(74,124,63,.3);
  background:var(--panel);
  box-shadow:4px 4px 0 rgba(10,18,8,.6);
}
.trow{
  display:grid;grid-template-columns:220px 1fr 70px;
  align-items:center;gap:2rem;
  padding:1.2rem 1.6rem;
  border-bottom:1px solid rgba(74,124,63,.12);
  transition:background .15s;cursor:default;
}
.trow:last-child{border:none;}
.trow:hover{background:rgba(74,124,63,.06);}
.tlbl{display:flex;align-items:center;gap:.75rem;}
.ticon{font-size:1.3rem;}
.tname{font-family:'Bangers',cursive;font-size:1.05rem;letter-spacing:.06em;color:var(--white);}
.tdesc{font-size:.68rem;color:var(--txt3);font-weight:700;}
.ttrack{height:5px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;}
.tfill{height:100%;width:0;transition:width 1.5s cubic-bezier(.25,1,.5,1);border-radius:99px;}
.tpct{font-family:'Bangers',cursive;font-size:2.2rem;color:var(--white);text-align:right;}
.supply-bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-top:1.2rem;padding:1.3rem 1.6rem;
  background:rgba(10,18,8,.8);border:2px solid rgba(74,124,63,.3);
  box-shadow:4px 4px 0 rgba(74,124,63,.2);
}
.sb-item .sb-l{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt3);font-weight:800;}
.sb-item .sb-v{font-family:'Bangers',cursive;font-size:2rem;color:var(--lime);}

/* LORE (comic panels) */
.comic-panels{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:2.5rem;
  border:2px solid rgba(74,124,63,.3);
  box-shadow:5px 5px 0 rgba(10,18,8,.6);
  background:rgba(74,124,63,.15);
  gap:2px;
}
.cpanel{
  background:var(--panel);padding:1.7rem 1.4rem;
  position:relative;overflow:hidden;transition:background .18s;
}
.cpanel:hover{background:var(--panel2);}
.cpanel::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(74,124,63,.1) 1px,transparent 1px);
  background-size:10px 10px;opacity:0;transition:opacity .3s;
}
.cpanel:hover::before{opacity:1;}
.cp-num{font-family:'Bangers',cursive;font-size:4rem;color:rgba(74,124,63,.1);position:absolute;top:.25rem;right:.75rem;line-height:1;}
.cp-em{font-size:2rem;display:block;margin-bottom:.8rem;}
.cp-t{font-family:'Bangers',cursive;font-size:1.05rem;letter-spacing:.06em;color:var(--bamboo3);margin-bottom:.45rem;}
.cp-b{font-size:.8rem;line-height:1.7;color:var(--txt2);font-weight:700;}

/* COMMUNITY */
.comm-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-top:2.5rem;}
.comm-num{
  font-family:'Bangers',cursive;
  font-size:clamp(4rem,9vw,8rem);
  line-height:.85;color:var(--white);
  text-shadow:0 0 40px rgba(184,245,66,.2), 4px 4px 0 rgba(74,124,63,.4);
}
.comm-sub{font-family:'Kalam',cursive;font-size:1.05rem;color:var(--txt2);font-weight:700;margin-top:.4rem;}
.comm-desc{margin-top:1.1rem;font-size:.9rem;line-height:1.7;color:var(--txt2);font-weight:700;max-width:320px;}
.comm-panda-svg{width:160px;margin-top:1.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));animation:pandaFloat 5s ease-in-out infinite;display:block;}

.soc-list{display:flex;flex-direction:column;gap:.6rem;}
.soc-btn{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;
  background:var(--panel);border:2px solid rgba(74,124,63,.3);
  text-decoration:none;color:var(--txt);
  box-shadow:3px 3px 0 rgba(10,18,8,.5);
  transition:all .18s;cursor:none;
}
.soc-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(10,18,8,.5);background:var(--panel2);border-color:var(--bamboo2);}
.soc-inner{display:flex;align-items:center;gap:.85rem;}
.soc-ico{font-size:1.2rem;}
.soc-name{font-family:'Bangers',cursive;font-size:1.05rem;letter-spacing:.08em;color:var(--white);}
.soc-handle{font-size:.68rem;color:var(--txt3);font-weight:700;}
.soc-arr{color:var(--txt3);font-size:1rem;transition:all .18s;}
.soc-btn:hover .soc-arr{color:var(--lime);transform:translateX(4px);}

/* FOOTER */
footer{
  position:relative;z-index:2;
  border-top:2px solid rgba(74,124,63,.25);
  background:rgba(8,14,7,.95);
  padding:2rem clamp(1.25rem,4vw,4rem);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem;
}
.ft-logo{font-family:'Bangers',cursive;font-size:1.7rem;letter-spacing:.12em;color:var(--lime);text-shadow:0 0 20px rgba(184,245,66,.3);}
.ft-disc{font-size:.7rem;line-height:1.65;color:var(--txt3);max-width:460px;}
.ft-tag{font-family:'Kalam',cursive;font-size:.85rem;color:rgba(184,245,66,.3);}

/* popups */
.cpop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-family:'Bangers',cursive;font-size:2.8rem;color:var(--lime);letter-spacing:.08em;z-index:9994;pointer-events:none;text-shadow:0 0 20px rgba(184,245,66,.5);animation:cpopA .85s ease forwards;}
@keyframes cpopA{0%{transform:translate(-50%,-50%) scale(0)}35%{transform:translate(-50%,-55%) scale(1.15)}70%{transform:translate(-50%,-58%) scale(1.05);opacity:1}100%{transform:translate(-50%,-74%) scale(.8);opacity:0}}
.kfl{position:fixed;inset:0;background:rgba(74,124,63,.15);z-index:9000;pointer-events:none;animation:kfa .5s ease forwards;}
@keyframes kfa{0%{opacity:1}100%{opacity:0}}

/* SCROLL REVEAL */
[data-r]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
[data-r].vis{opacity:1;transform:none;}
[data-r="d1"]{transition-delay:.1s;}[data-r="d2"]{transition-delay:.2s;}[data-r="d3"]{transition-delay:.3s;}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:.75rem 1.25rem;}
  .tab-nav{gap:.08rem;}
  .tab-btn{font-size:.85rem;padding:.32rem .7rem;letter-spacing:.04em;}
  #tab-intro{grid-template-columns:1fr;padding:2rem 1.25rem;gap:2rem;}
  .intro-right{min-height:280px;}
  .intro-h1{font-size:clamp(3rem,12vw,5rem);}
  .intro-sub{max-width:100%;}
  .htag{display:none;}
  .game-layout{grid-template-columns:1fr;}
  .comm-layout{grid-template-columns:1fr;gap:2rem;}
  .comic-panels{grid-template-columns:1fr 1fr;}
  .trow{grid-template-columns:1fr auto;gap:.75rem;padding:1rem 1.1rem;}
  .tpct{grid-row:1;grid-column:2;font-size:1.5rem;}
  .ttrack{grid-column:1/-1;}
  .full-section{padding:3rem 1.25rem;}
  footer{flex-direction:column;align-items:flex-start;padding:1.5rem 1.25rem;}
}
@media(max-width:640px){
  .nav-price{display:none;}
  .tab-btn{font-size:.75rem;padding:.28rem .55rem;letter-spacing:.02em;}
  #tab-intro{padding-top:2rem;}
  .intro-btns{flex-direction:column;gap:.5rem;}
  .btn-main,.btn-sec{width:100%;text-align:center;font-size:1.1rem;}
  .intro-stats{flex-direction:column;}
  .istat{border-right:none;border-bottom:1px solid rgba(74,124,63,.2);}
  .istat:last-child{border:none;}
  .comic-panels{grid-template-columns:1fr;}
  .home-cards{flex-direction:column;align-items:center;}
  .home-card{max-width:100%;width:100%;}
  .meme-grid{grid-template-columns:repeat(2,1fr);}
  .full-section{padding:2.5rem 1rem;}
  footer{padding:1.5rem 1rem;}
}
@media(max-width:400px){
  .intro-h1{font-size:clamp(2.5rem,14vw,4rem);}
  .tab-btn{font-size:.7rem;padding:.25rem .45rem;}
}

/* ══════════════════════════════════════
   PER-PAGE BACKGROUND HOOKS
   Each body.page-XXX can have its own vibe.
   For now they share the bamboo green; you
   can customize each one separately later.
══════════════════════════════════════ */
body.page-intro { /* default green forest — already styled */ }
body.page-game  { /* override later for game vibe   */ }
body.page-home  { /* override later for home vibe   */ }
body.page-memes { /* override later for memes vibe  */ }

/* ══════════════════════════════════════
   HOME PAGE — CLICKABLE PANDA SCENE
══════════════════════════════════════ */
.home-scene-clickable{
  position:relative;
  margin:2rem auto 1.5rem;
  max-width:1100px;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:18px;
  overflow:hidden;
  cursor:none;
  background:linear-gradient(180deg,#1a2a18,#0e1a0f);
  border:2px solid rgba(74,124,63,.45);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(184,245,66,.08) inset,
    0 0 40px rgba(74,124,63,.15);
  transition:transform .4s cubic-bezier(.4,0,.2,1),
             box-shadow .4s cubic-bezier(.4,0,.2,1),
             border-color .4s;
}
.home-scene-clickable:hover{
  transform:translateY(-4px) scale(1.005);
  border-color:rgba(184,245,66,.55);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(184,245,66,.25) inset,
    0 0 60px rgba(74,124,63,.35);
}
.home-scene-clickable:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:4px;
}

.home-scene-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.4,0,.2,1), filter .4s;
}
.home-scene-clickable:hover .home-scene-img{
  transform:scale(1.04);
  filter:brightness(1.06) saturate(1.1);
}

/* Dark overlay with hint text — fades in on hover */
.home-scene-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,18,8,0) 0%,
    rgba(10,18,8,0) 55%,
    rgba(10,18,8,.65) 100%);
  opacity:0;
  transition:opacity .4s;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:1.8rem;
  pointer-events:none;
}
.home-scene-clickable:hover .home-scene-overlay{opacity:1;}

.home-scene-hint{
  display:flex;align-items:center;gap:.6rem;
  background:rgba(10,18,8,.78);
  border:1.5px solid rgba(184,245,66,.4);
  padding:.65rem 1.2rem;
  border-radius:99px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:translateY(10px);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.home-scene-clickable:hover .home-scene-hint{transform:translateY(0);}
.home-scene-hint-ico{font-size:1.2rem;}
.home-scene-hint-txt{
  font-family:'Kalam',cursive;
  font-size:.95rem;
  color:var(--lime);
  letter-spacing:.02em;
}

/* Floating Z's — match the sleeping panda */
.home-sleep-z{
  position:absolute;
  font-family:'Bangers',cursive;
  font-size:2.2rem;
  color:rgba(240,245,236,.85);
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  pointer-events:none;
  animation:floatZ 3s ease-in-out infinite;
  right:18%;
}
.home-sleep-z.z1{bottom:32%;font-size:1.8rem;animation-delay:0s;opacity:.7;}
.home-sleep-z.z2{bottom:38%;font-size:2.4rem;right:22%;animation-delay:1s;opacity:.85;}
.home-sleep-z.z3{bottom:46%;font-size:3rem;right:26%;animation-delay:2s;opacity:1;}
@keyframes floatZ{
  0%  {transform:translate(0,0) rotate(-6deg);opacity:0;}
  20% {opacity:1;}
  100%{transform:translate(-30px,-50px) rotate(8deg);opacity:0;}
}

/* Corner stamp */
.home-scene-stamp{
  position:absolute;top:1rem;left:1rem;
  font-family:'Bangers',cursive;
  font-size:.95rem;
  letter-spacing:.12em;
  color:var(--lime);
  background:rgba(10,18,8,.75);
  border:1.5px solid rgba(184,245,66,.35);
  padding:.4rem .85rem;
  border-radius:6px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-shadow:0 0 12px rgba(184,245,66,.4);
  animation:stampPulse 2.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes stampPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(184,245,66,.4);}
  50%    {box-shadow:0 0 0 8px rgba(184,245,66,0);}
}

/* Hide old placeholder panda + drag-drop bits that aren't used on the new home */
.home-panda-zone,
.home-panda-placeholder,
.home-panda-emoji,
.home-art-label,
#homePandaImg{display:none !important;}

@media (max-width:768px){
  .home-scene-clickable{aspect-ratio:4/3;}
  .home-sleep-z{font-size:1.5rem !important;}
  .home-scene-hint-txt{font-size:.85rem;}
  .home-scene-stamp{font-size:.8rem;padding:.3rem .65rem;}
}

/* ══════════════════════════════════════
   FULLSCREEN HOME PAGE
   Background art fills the viewport.
   SVG polygon hotspots sit on top of the
   panda and the door (point-and-click style).
══════════════════════════════════════ */
.home-fullscreen{
  padding-top:0 !important;
  min-height:100vh;
  margin:0 !important;
  max-width:none !important;
  display:block;
}
.home-fullbg{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  background-image:url('assets/home-bg.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  z-index:1;
}
@media (max-width:768px){
  body.page-home,
  body.page-home main#page{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  body.page-home .home-fullbg{
    position:relative !important;
    width:177vh !important;
    height:100vh !important;
    height:100dvh !important;
    inset:auto !important;
    background-size:100% 100% !important;
    background-position:center !important;
  }
  body.page-home .home-hotspots{
    width:100% !important;
    height:100% !important;
  }
}
/* Hide global bg layers on Home (the artwork IS the background) */
body.page-home #bamboo-bg,
body.page-home .mist-layer,
body.page-home .bamboo-stalks{display:none !important;}
body.page-home::after{display:none !important;}

/* ── SVG hotspot overlay ── */
.home-hotspots{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:2;
  pointer-events:none; /* container ignores clicks; only polygons accept */
}
.home-hotspot{
  fill:rgba(184,245,66,0);              /* invisible by default */
  stroke:rgba(184,245,66,0);
  stroke-width:.25;
  cursor:pointer;
  pointer-events:all;
  transition:fill .25s ease, stroke .25s ease, filter .25s ease;
  vector-effect:non-scaling-stroke;
}
.home-hotspot:hover,
.home-hotspot:focus-visible,
.home-hotspot:focus{
  outline:none;
}

/* ── Popup card ── */
.home-popup{
  position:fixed;inset:0;
  z-index:1000;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(10,18,8,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:popupFade .3s ease forwards;
}
.home-popup.show{display:flex;}
@keyframes popupFade{from{opacity:0;}to{opacity:1;}}

.home-popup-card{
  position:relative;
  background:linear-gradient(180deg,#17261a,#0e1a0f);
  border:2px solid rgba(184,245,66,.4);
  border-radius:14px;
  padding:2.5rem 2.5rem 2rem;
  max-width:560px;width:88%;
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 60px rgba(184,245,66,.15);
  transform:translateY(20px) scale(.95);
  animation:popupIn .4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes popupIn{to{transform:translateY(0) scale(1);}}

.home-popup-close{
  position:absolute;top:.8rem;right:.8rem;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(184,245,66,.3);
  color:var(--txt2);
  font-size:.9rem;cursor:none;
  transition:all .2s;
}
.home-popup-close:hover{
  background:var(--bamboo1);color:#fff;
  border-color:var(--bamboo2);
}

.home-popup-content{
  color:var(--txt);
  font-family:'Kalam',cursive;
  font-size:1.15rem;
  line-height:1.6;
  text-align:center;
}
.home-popup-content h3{
  font-family:'Bangers',cursive;
  color:var(--lime);
  font-size:2rem;letter-spacing:.1em;
  margin-bottom:.8rem;
  text-shadow:0 0 20px rgba(184,245,66,.3);
}

@media (max-width:600px){
  .home-popup-card{padding:1.8rem 1.5rem 1.5rem;}
  .home-popup-content{font-size:1rem;}
  .home-popup-content h3{font-size:1.6rem;}
}
/* ── HOME ROOM (inside view) ── */
.home-room{
  position:fixed;inset:0;
  background-image:url('assets/room-bg.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:50;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}
.home-room.show{opacity:1;pointer-events:auto;}

.home-room-back{
  position:absolute;top:90px;left:30px;
  background:rgba(10,18,8,.78);
  border:1.5px solid rgba(184,245,66,.4);
  color:var(--lime);
  font-family:'Bangers',cursive;
  font-size:1rem;letter-spacing:.1em;
  padding:.55rem 1.1rem;
  border-radius:8px;
  cursor:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:all .2s;
}
.home-room-back:hover{background:var(--bamboo1);color:#fff;}
/* ── Panda speech bubble ── */
.panda-bubble{
  position:absolute;
  bottom:38%;
  right:8%;
  max-width:280px;
  background:#f4f1e8;
  color:#1a1a1a;
  font-family:'Kalam',cursive;
  font-size:1.05rem;
  line-height:1.4;
  padding:1rem 1.2rem;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:5;
  opacity:0;
  transform:translateY(10px) scale(.9);
  pointer-events:none;
  transition:opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
}
.panda-bubble.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.panda-bubble::after{
  content:'';
  position:absolute;
  bottom:-14px;
  right:30%;
  width:0;height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:18px solid #f4f1e8;
}
@media (max-width:600px){
  .panda-bubble{
    max-width:220px;
    font-size:.9rem;
    right:5%;
    bottom:42%;
  }
}
/* ── Intro page background ── */
body.page-intro{
  background:#0e1a0f url('assets/intro-bg.png') center top / cover no-repeat fixed;
}
/* ── Game page background ── */
body.page-game{
  background:#0e1a0f url('assets/game-bg.png') center top / cover no-repeat fixed;
}
/* ── Intro centered hero ── */
.intro-center{
  max-width:900px;
  margin:0 auto;
  padding:3rem 1.5rem 4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  position:relative;
  z-index:2;
  text-align:center;
}
.panda-hero-img{
  width:min(360px,70vw);
  height:auto;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))
         drop-shadow(0 0 60px rgba(184,245,66,.18));
  animation:pandaFloat 5s ease-in-out infinite alternate;
}
@keyframes pandaFloat{
  from{transform:translateY(0);}
  to  {transform:translateY(-12px);}
}
.intro-center .intro-h1{line-height:1.05;}
.intro-center .intro-sub{max-width:640px;}
.intro-center .intro-btns,
.intro-center .intro-stats{justify-content:center;}
body.page-intro main#page{display:block !important;}
/* ── Navbar background image ── */
nav{
  background:
    linear-gradient(rgba(10,18,8,.7), rgba(10,18,8,.7)),
    url('assets/navbar-bg.png') center/cover no-repeat,
    rgba(10,18,8,.95);
}
.tab-btn{outline:none !important;}
.tab-btn:focus,
.tab-btn:focus-visible{outline:none !important;box-shadow:none !important;}
.tab-btn,
.tab-btn:hover,
.tab-btn:active,
.tab-btn:visited{text-decoration:none !important;}
.nav-logo,
.nav-logo:hover,
.nav-logo:visited{text-decoration:none !important;}
.ld-panda-img{
  width:140px;height:auto;
  filter:drop-shadow(0 10px 30px rgba(184,245,66,.25));
  animation:ldBounce 1s ease-in-out infinite alternate;
}
/* ── DexHunter swap widget ── */
.swap-widget{
  margin-top:2rem;
  width:min(440px, 96%);
  background:linear-gradient(180deg,#17261a,#0e1a0f);
  border:1.5px solid rgba(184,245,66,.35);
  border-radius:14px;
  padding:1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(184,245,66,.08);
}
.swap-widget-head{
  font-family:'Bangers',cursive;
  letter-spacing:.12em;
  color:var(--lime);
  text-align:center;
  font-size:1.1rem;
  margin-bottom:.7rem;
  text-shadow:0 0 16px rgba(184,245,66,.25);
}
.swap-widget iframe{
  width:100%;
  height:520px;
  border:none;
  border-radius:10px;
  background:#0a1209;
  display:block;
}
.swap-widget-link{
  display:block;
  text-align:center;
  margin-top:.7rem;
  color:var(--txt2);
  font-family:'Kalam',cursive;
  font-size:.9rem;
  text-decoration:none;
}
.swap-widget-link:hover{color:var(--lime);}
html, body{
  width:100%;
  overflow-x:hidden;
}
@media (max-width:768px){
  nav{
    width:100% !important;
    left:0 !important;
    right:0 !important;
  }
  .home-fullbg{
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
  }
}
@media (max-width:768px){
  nav{
    flex-wrap:wrap;
    gap:.4rem;
    padding:.5rem .8rem;
    background-size:cover !important;
  }
  .nav-logo{
    font-size:1.1rem !important;
    flex-shrink:0;
  }
  .tab-nav{
    order:3;
    width:100%;
    justify-content:space-between;
    gap:.3rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:.2rem 0;
  }
  .tab-btn{
    font-size:.75rem !important;
    padding:.4rem .6rem !important;
    white-space:nowrap;
    flex-shrink:0;
  }
  .nav-r{
    margin-left:auto;
  }
  main#page{
    padding-top:130px !important;
  }
}
@media (max-width:768px){
  body.page-home .home-room{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    background-size:cover !important;
    background-position:center !important;
    z-index:1000 !important;
  }
  body.page-home .home-room.show{
    pointer-events:auto !important;
  }
  body.page-home .home-room-back{
    top:20px !important;
    left:20px !important;
    z-index:1001 !important;
  }
}
/* ── Door zoom + flash transition ── */
.home-fullbg.door-zoom{
  transition:transform .9s cubic-bezier(.6,0,.8,.2), filter .9s ease;
  transform:scale(3.5);
  transform-origin:67% 48%;
  filter:brightness(1.3);
}
.door-flash{
  position:fixed;
  inset:0;
  background:#fff;
  opacity:0;
  z-index:60;
  pointer-events:none;
  transition:opacity .25s ease;
}
.door-flash.show{opacity:1;}
@media (max-width:768px){
  body.page-home .door-flash{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:9998 !important;
  }
  body.page-home .home-room{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    background-size:cover !important;
    background-position:center !important;
    z-index:9999 !important;
  }
  body.page-home .home-room-back{
    z-index:10000 !important;
    top:20px !important;
    left:20px !important;
  }
  /* When room is open, lock page scroll */
  body.page-home:has(.home-room.show){
    overflow:hidden !important;
  }
  body.page-home:has(.home-room.show) main#page{
    overflow:hidden !important;
  }
}
.home-room.show{
  background-image:url('assets/room-bg.png') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  pointer-events:auto !important;
  display:block !important;
}
@media (max-width:768px){
  body.page-home .home-room{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    background:url('assets/room-bg.png') center/cover no-repeat #0e1a0f !important;
    z-index:99999 !important;
    transform:none !important;
  }
  body.page-home .home-room.show{
    opacity:1 !important;
    pointer-events:auto !important;
    display:block !important;
  }
  body.page-home .door-flash{
    position:fixed !important;
    inset:0 !important;
    z-index:99998 !important;
  }
}