/* ============================================================
   JADEN.PRO — shared design system (Site Standard 2026-10-19)
   Original voxel/block art only. No third-party game assets.
   ============================================================ */
:root{
  --grass:#5dbb3a; --grass-d:#3d8b24; --dirt:#8a5a2b;
  --diamond:#4fe3e0; --gold:#ffd83d; --storm:#7b2ff7; --rose:#ff5d7a;
  --bg:#0b0f1a; --card:#1b2230; --card2:#232c40;
  --text:#f2f6ff; --muted:#c3cfe2;
  --radius:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Rubik',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text);
  overflow-x:hidden; line-height:1.55}
#wallpaper{position:fixed; inset:0; z-index:-2; width:100%; height:100%}
#shade{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,20,.22),rgba(6,10,20,.68) 55%,rgba(6,10,20,.92))}
.skip{position:absolute; left:-999px; top:0; background:var(--gold); color:#20160a; padding:10px 16px;
  font-weight:800; z-index:99; border-radius:0 0 12px 0}
.skip:focus{left:0}
a{color:var(--diamond)}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}

/* ---------- HEADER with live voxel wallpaper strip ---------- */
header{position:sticky; top:0; z-index:40; border-bottom:3px solid #00000066; overflow:hidden;
  background:rgba(10,14,24,.88); backdrop-filter:blur(10px)}
#navCanvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55}
.hwrap{position:relative; max-width:1020px; margin:0 auto; padding:10px 14px; display:flex;
  align-items:center; justify-content:space-between; gap:10px}
.logo{font-family:'Press Start 2P',monospace; font-size:16px; color:#fff; text-decoration:none;
  text-shadow:0 2px 0 #000; padding:6px 4px}
.logo b{color:var(--grass)} .logo i{color:var(--diamond); font-style:normal}
.dnav{display:none; gap:4px}
.dnav a{color:var(--text); text-decoration:none; font-weight:800; font-size:14.5px; padding:9px 12px;
  border-radius:11px; border:2px solid transparent; transition:transform .15s, background .15s, border-color .15s}
.dnav a:hover{background:#ffffff14; transform:translateY(-2px)}
.dnav a.on{border-color:var(--gold); background:#241d05; color:var(--gold)}
@media(min-width:760px){ .dnav{display:flex} #burger{display:none} }

/* Animated hamburger */
#burger{width:48px; height:44px; border:2px solid #ffffff33; background:#ffffff10; border-radius:12px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px}
#burger span{display:block; width:22px; height:3.5px; border-radius:2px; background:var(--gold);
  transition:transform .3s cubic-bezier(.2,2,.4,1), opacity .2s}
#burger.open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
#burger:active{transform:scale(.92)}

/* Drawer — pop-out panel with its own matching voxel wallpaper */
#drawer{position:fixed; inset:0; z-index:55; display:none}
#drawer.open{display:block}
#drawer .scrim{position:absolute; inset:0; background:rgba(3,5,10,.72)}
#drawer .panel{position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw); overflow:hidden;
  border-left:3px solid var(--gold); animation:slideIn .32s cubic-bezier(.2,1.4,.4,1); padding:20px;
  display:flex; flex-direction:column; gap:10px; background:#141a29}
#drawerCanvas{position:absolute; inset:0; width:100%; height:100%; opacity:.5}
#drawer .panel a, #drawer .panel button{position:relative}
#drawer .panel a{color:#fff; text-decoration:none; font-family:'Press Start 2P',monospace; font-size:14px;
  background:rgba(20,26,41,.88); border:2px solid #ffffff26; border-radius:13px; padding:15px 14px;
  transition:transform .15s, border-color .15s}
#drawer .panel a:hover, #drawer .panel a:active{transform:translateX(-5px) scale(1.02); border-color:var(--gold)}
#drawer .panel a.on{border-color:var(--gold); color:var(--gold)}
#drawerClose{align-self:flex-end; background:var(--gold); color:#20160a; border:0; font-weight:800;
  border-radius:10px; padding:10px 14px; cursor:pointer; font-size:14px}
@keyframes slideIn{from{transform:translateX(105%)} to{transform:none}}

/* ---------- LAYOUT ---------- */
main{max-width:1020px; margin:0 auto; padding:14px 14px 118px}
section{margin:30px 0}
.grid{display:grid; gap:12px}
@media(min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
.card{background:linear-gradient(180deg,var(--card2),var(--card)); border:2px solid #00000066;
  border-radius:var(--radius); padding:16px; box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .18s, box-shadow .18s}
@media(pointer:fine){ .card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.45)} }
.sub{color:var(--muted); margin:0 0 14px; font-size:15.5px}

/* 3D raised headers */
h1,h2{font-family:'Press Start 2P',monospace; line-height:1.55; margin:0 0 8px}
h2{font-size:clamp(15px,4.4vw,22px); color:#fff; display:inline-block; padding:.34em .5em; border-radius:12px;
  background:linear-gradient(180deg,#33507a,#1b2230);
  box-shadow:0 5px 0 #000, inset 0 2px 0 #ffffff30, inset 0 -3px 0 #00000055; text-shadow:0 2px 0 #000}
h2.grass{background:linear-gradient(180deg,var(--grass),var(--grass-d)); color:#0c2205; text-shadow:none;
  box-shadow:0 5px 0 #2c5e19, inset 0 2px 0 #ffffff40}
h2.gold{background:linear-gradient(180deg,#ffe873,var(--gold)); color:#20160a; text-shadow:none;
  box-shadow:0 5px 0 #b8930f, inset 0 2px 0 #ffffff55}
h2.storm{background:linear-gradient(180deg,#9d5cff,var(--storm)); color:#fff;
  box-shadow:0 5px 0 #2f0a6e, inset 0 2px 0 #ffffff35}

/* ---------- HERO video-style header (animated voxel canvas scene) ---------- */
.hero{position:relative; border-radius:20px; overflow:hidden; border:3px solid #00000070;
  box-shadow:0 14px 34px rgba(0,0,0,.5); margin-top:6px}
.heroScene{display:block; width:100%; height:250px}
@media(min-width:760px){ .heroScene{height:300px} }
.heroText{position:absolute; inset:auto 0 0 0; padding:44px 18px 16px; text-align:center;
  background:linear-gradient(180deg,transparent,rgba(5,8,15,.88) 62%)}
.heroText h1{font-size:clamp(19px,6vw,34px); color:#fff; text-shadow:0 3px 0 #000, 0 8px 22px rgba(0,0,0,.7)}
.heroText p{color:#e8efff; font-weight:600; font-size:clamp(14.5px,3.6vw,17px); margin:4px auto 0; max-width:560px}
.nameblocks{display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin:6px 0 10px}
.nameblocks span{font-family:'Press Start 2P',monospace; font-size:clamp(24px,9vw,48px); color:#fff;
  padding:.16em .13em; border-radius:10px; background:linear-gradient(180deg,#3b4b63,#1b2230);
  box-shadow:0 5px 0 #000, inset 0 0 0 2px #ffffff22; animation:floaty 2.6s ease-in-out infinite}
.nameblocks span:nth-child(2n){animation-delay:.3s}.nameblocks span:nth-child(3n){animation-delay:.6s}
@keyframes floaty{50%{transform:translateY(-8px) rotate(-2deg)}}
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px}
.chip{background:#ffffff14; border:2px solid #ffffff2a; padding:8px 13px; border-radius:999px; font-weight:700; font-size:14px}
.chip.hot{border-color:var(--gold); color:var(--gold)}

/* Buttons */
.btn{font-family:'Press Start 2P',monospace; font-size:12px; cursor:pointer; border:0; border-radius:12px;
  padding:14px 18px; background:linear-gradient(180deg,#ffe873,var(--gold)); color:#20160a;
  box-shadow:0 5px 0 #b8930f, 0 10px 22px rgba(0,0,0,.4); text-decoration:none; display:inline-block;
  transition:transform .12s, box-shadow .12s; line-height:1.5}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #b8930f}
.btn.green{background:linear-gradient(180deg,#7ee05a,var(--grass)); color:#0c2205; box-shadow:0 5px 0 #2c5e19, 0 10px 22px rgba(0,0,0,.4)}
.btn.green:active{box-shadow:0 1px 0 #2c5e19}
.btn.ghost{background:#ffffff14; color:#fff; box-shadow:none; border:2px solid #ffffff33}
.linkcards{display:grid; gap:12px}
@media(min-width:640px){ .linkcards{grid-template-columns:repeat(3,1fr)} }
.linkcard{display:block; text-decoration:none; color:var(--text)}
.linkcard .big{font-size:40px; display:block; margin-bottom:6px}
.linkcard b{font-family:'Press Start 2P',monospace; font-size:12.5px; line-height:1.6; display:block; color:#fff}
.linkcard p{color:var(--muted); font-size:14.5px; margin:6px 0 0}

/* Tips + mystery blocks (Home) */
.blocks{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.block{aspect-ratio:1; border-radius:12px; border:3px solid #00000070; display:flex; align-items:center;
  justify-content:center; font-size:clamp(22px,7vw,34px); cursor:pointer; user-select:none;
  transition:transform .12s; box-shadow:inset 0 -10px 0 rgba(0,0,0,.25), inset 0 8px 0 rgba(255,255,255,.18);
  background:none; padding:0; font-family:inherit}
.block:active{transform:scale(.9)}
.b-grass{background:linear-gradient(180deg,var(--grass) 55%,var(--dirt) 55%)}
.b-diamond{background:linear-gradient(135deg,#a7fffa,var(--diamond) 45%,#23b7b4)}
.b-tnt{background:linear-gradient(180deg,#e33 30%,#fff 30%,#fff 55%,#e33 55%)}
.b-gold{background:linear-gradient(135deg,#fff3a1,var(--gold) 50%,#e0a90c)}
.secret{display:none; margin-top:12px; border:2px dashed var(--gold); background:#241d05; border-radius:14px; padding:14px}
.secret.open{display:block; animation:pop .4s ease backwards}
.secret a{font-weight:700}
.tip{display:flex; gap:10px; align-items:flex-start}
.tip .n{font-family:'Press Start 2P',monospace; font-size:11px; background:var(--grass); color:#0c2205;
  border-radius:8px; padding:6px 7px; flex:none; margin-top:2px}
.tip p{margin:0; font-size:15px; line-height:1.45}
.fn .n{background:var(--storm); color:#fff}
@keyframes pop{from{transform:scale(.85); opacity:0} to{transform:none; opacity:1}}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,1.2,.4,1)}
.reveal.in{opacity:1; transform:none}

/* Click sparkle burst */
.spark{position:fixed; width:9px; height:9px; border-radius:2px; z-index:80; pointer-events:none;
  animation:sparkFly .55s ease-out forwards}
@keyframes sparkFly{to{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.3); opacity:0}}

/* ---------- FOOTER ---------- */
footer{max-width:1020px; margin:0 auto; padding:8px 16px 124px; color:var(--muted); font-size:14px}
.td-promo{border:2px solid var(--storm); border-radius:var(--radius); padding:16px; text-align:center;
  background:linear-gradient(180deg,#2a1650,#170b33); box-shadow:0 8px 22px rgba(0,0,0,.4); margin-bottom:16px}
.td-promo b{font-family:'Press Start 2P',monospace; font-size:13px; color:#fff; line-height:1.7; display:block}
.td-promo p{margin:8px 0 12px; color:#ddd2ff}
.footlinks{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; text-align:center; margin:10px 0}
.footlinks a{font-weight:700; text-decoration:none}
.footlinks a:hover{text-decoration:underline}
.footbase{text-align:center; border-top:2px solid #ffffff14; padding-top:14px}

/* Bottom tab bar — real page links, mobile-first */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(10,14,24,.96);
  backdrop-filter:blur(10px); border-top:3px solid #00000055}
.tabbar .tw{max-width:1020px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr)}
.tabbar a{color:var(--muted); text-decoration:none; text-align:center; font-size:11px; font-weight:800;
  padding:9px 2px calc(9px + env(safe-area-inset-bottom)); transition:transform .12s, color .12s}
.tabbar a span{display:block; font-size:19px; margin-bottom:2px}
.tabbar a:active{transform:scale(.9); color:#fff}
.tabbar a.on{color:var(--gold)}

/* Forms (board) */
.field{margin-bottom:14px}
.field label{display:block; font-weight:800; margin-bottom:6px; font-size:15px}
.field input, .field select{width:100%; font:inherit; font-size:16.5px; color:#fff; background:#0a0e14;
  border:2px solid #ffffff30; border-radius:12px; padding:13px 14px}
.field input:focus, .field select:focus{border-color:var(--gold); outline:none}
.formmsg{font-weight:800; min-height:24px; margin-top:10px}
.formmsg.ok{color:#7ee05a} .formmsg.err{color:#ff8098}
.tagcard{display:flex; align-items:center; gap:12px}
.tagcard .ava{font-size:34px; flex:none}
.tagcard .tag{font-family:'Press Start 2P',monospace; font-size:13.5px; color:#fff; word-break:break-all; line-height:1.5}
.tagcard .meta{color:var(--muted); font-size:13.5px; font-weight:700}
.platform{display:inline-block; border-radius:999px; padding:2px 9px; font-size:12px; font-weight:800;
  background:#123a3a; color:var(--diamond); border:1.5px solid var(--diamond)}
.reportbtn{margin-left:auto; flex:none; background:none; border:2px solid #ffffff26; color:var(--muted);
  border-radius:9px; padding:7px 10px; font-weight:700; font-size:12.5px; cursor:pointer}
.reportbtn:active{transform:scale(.92)}
.reportbtn.done{border-color:var(--gold); color:var(--gold)}

/* Videos page shows */
.show canvas{width:100%; max-width:560px; display:block; margin:0 auto; background:#0d1420;
  border-radius:14px; border:2px solid #00000066}
.show .transcript{color:var(--muted); font-size:14.5px}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001s !important; transition-duration:.001s !important}
  .reveal{opacity:1; transform:none}
}