:root{
  --ink:#080818;
  --cream:#fff6d7;
  --lime:#b7ff19;
  --blue:#72d9ff;
  --royal:#3948e8;
  --pink:#ff9fd5;
  --hot:#ff2e9e;
  --orange:#ff7b22;
  --yellow:#ffd227;
  --purple:#9c55ff;
  --green:#00a56b;
  --shadow:10px 10px 0 var(--ink);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{
  background:var(--blue);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  user-select:none;
}
button,a{font:inherit}
button{color:inherit}
img{-webkit-user-drag:none}
::selection{background:var(--hot);color:white}

.gate{
  position:fixed;inset:0;z-index:5000;background:var(--royal);
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.gate.open{opacity:0;visibility:hidden}
.gate-noise{
  position:absolute;inset:0;opacity:.14;
  background-image:
    radial-gradient(circle at 10px 10px,var(--cream) 0 5px,transparent 6px);
  background-size:34px 34px;
  animation:noiseMove 4s linear infinite;
}
.gate-door{
  position:absolute;top:0;bottom:0;width:52%;background:var(--lime);
  border:10px solid var(--ink);transition:transform .85s cubic-bezier(.8,0,.2,1);
}
.gate-left{left:-1%;transform-origin:left}
.gate-right{right:-1%;transform-origin:right}
.gate.open .gate-left{transform:translateX(-110%) rotate(-5deg)}
.gate.open .gate-right{transform:translateX(110%) rotate(5deg)}
.gate-card{
  position:relative;z-index:3;width:min(720px,88vw);background:var(--cream);
  border:9px solid var(--ink);padding:42px;text-align:center;
  box-shadow:18px 18px 0 var(--hot);transform:rotate(-1deg);
}
.gate-code{font-size:11px;font-weight:1000;letter-spacing:.13em}
.gate-card h1{
  margin:25px 0 18px;font-size:clamp(75px,14vw,155px);line-height:.68;
  letter-spacing:-.095em;text-shadow:6px 6px 0 var(--yellow);
}
.gate-card p{font-size:20px;font-weight:1000;margin:25px 0 8px}
.gate-card strong{display:block;font-size:11px;letter-spacing:.12em}
.gate-card button{
  margin-top:28px;border:6px solid var(--ink);background:var(--hot);color:white;
  padding:16px 24px;font-weight:1000;box-shadow:8px 8px 0 var(--ink);
  transition:.16s;
}
.gate-card button:hover{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}

.hud{
  position:fixed;z-index:1200;background:var(--cream);border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}
.hud-top{
  left:16px;right:16px;top:14px;height:62px;display:flex;align-items:center;
  justify-content:space-between;padding:7px 10px;pointer-events:none;
}
.hud-top>*{pointer-events:auto}
.brand-chip{
  border:0;background:transparent;display:flex;align-items:center;gap:9px;font-weight:1000;
}
.brand-chip span{
  width:38px;height:38px;border:4px solid var(--ink);background:var(--lime);
  border-radius:47% 53% 64% 36%/43% 60% 40% 57%;
  display:grid;place-items:center;transform:rotate(-8deg);
}
.stamp-counter{display:flex;align-items:center;gap:13px}
.stamp-counter>span{font-size:9px;font-weight:1000;letter-spacing:.1em}
#stampSlots{display:flex;gap:5px}
#stampSlots i{
  width:23px;height:23px;border:3px dashed var(--ink);border-radius:50%;
  background:white;transition:.25s;
}
#stampSlots i.filled{background:var(--hot);border-style:solid;transform:rotate(15deg) scale(1.08)}
#stampSlots i.filled:after{content:"✓";display:grid;place-items:center;height:100%;color:white;font-weight:1000;font-style:normal}
#stampCount{font-size:10px}
.map-controls{display:flex;align-items:center;gap:6px}
.map-controls button{
  width:37px;height:37px;border:4px solid var(--ink);background:var(--yellow);
  font-size:20px;font-weight:1000;
}
.map-controls span{width:54px;text-align:center;font-size:10px;font-weight:1000}
.nav-compass{
  left:17px;top:94px;width:130px;padding:10px;display:flex;flex-direction:column;gap:6px;
}
.nav-compass>span{font-size:8px;font-weight:1000;letter-spacing:.1em;margin-bottom:4px}
.nav-compass button{
  border:3px solid var(--ink);background:white;text-align:left;padding:8px;
  font-size:9px;font-weight:1000;transition:.14s;
}
.nav-compass button:hover{background:var(--lime);transform:translateX(4px)}
.minimap{right:17px;bottom:17px;width:180px;padding:8px}
.minimap-label{font-size:8px;font-weight:1000;margin-bottom:6px}
.mini-world{
  position:relative;height:105px;background:var(--blue);border:3px solid var(--ink);overflow:hidden;
}
.mini-land{position:absolute;border:2px solid var(--ink);border-radius:50%;display:block}
.land-a{width:62px;height:47px;left:8px;top:8px;background:var(--lime)}
.land-b{width:68px;height:51px;right:7px;top:13px;background:var(--pink)}
.land-c{width:90px;height:55px;left:43px;bottom:4px;background:var(--orange)}
#miniDot{
  position:absolute;width:12px;height:12px;background:var(--hot);border:3px solid var(--ink);
  border-radius:50%;transform:translate(-50%,-50%);left:50%;top:50%;
}
.drag-hint{
  position:fixed;z-index:1100;left:50%;bottom:20px;transform:translateX(-50%);
  background:var(--ink);color:white;padding:10px 15px;font-size:10px;font-weight:1000;
  letter-spacing:.08em;pointer-events:none;transition:.3s;
}
.drag-hint.hide{opacity:0;transform:translate(-50%,20px)}
.drag-hint span{font-size:18px;margin-right:7px}

.viewport{
  position:fixed;inset:0;background:var(--blue);overflow:hidden;cursor:grab;
  touch-action:none;
}
.viewport.dragging{cursor:grabbing}
.world{
  position:absolute;left:0;top:0;width:3600px;height:2400px;
  transform-origin:0 0;will-change:transform;
}
.world-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sky-label,.water-label{
  position:absolute;font-size:20px;font-weight:1000;letter-spacing:.18em;opacity:.45;transform:rotate(-4deg);
}
.label-north{left:260px;top:105px;color:white}
.water-label{right:120px;bottom:125px;color:var(--royal);transform:rotate(7deg)}

.world-title{
  position:absolute;left:1435px;top:920px;width:650px;text-align:center;
  transform:rotate(-2deg);z-index:5;
}
.world-title>span{
  display:inline-block;background:var(--ink);color:white;padding:8px 12px;
  font-size:11px;font-weight:1000;letter-spacing:.1em;
}
.world-title h1{
  margin:25px 0 10px;font-size:145px;line-height:.66;letter-spacing:-.1em;
  text-shadow:8px 8px 0 var(--cream),14px 14px 0 var(--hot);
}
.world-title p{font-size:13px;font-weight:1000;letter-spacing:.08em}
.world-title button{
  border:5px solid var(--ink);background:var(--yellow);padding:12px 16px;
  font-weight:1000;box-shadow:7px 7px 0 var(--ink);
}

.location{
  position:absolute;z-index:20;border:7px solid var(--ink);padding:21px 25px;
  text-align:left;box-shadow:12px 12px 0 var(--ink);transition:.16s;
  min-width:310px;
}
.location:hover{transform:translate(-5px,-7px) rotate(-2deg);box-shadow:17px 19px 0 var(--ink)}
.location .pin{
  position:absolute;left:-28px;top:-28px;width:65px;height:65px;background:var(--hot);
  color:white;border:6px solid var(--ink);border-radius:50%;display:grid;place-items:center;
  font-size:18px;font-weight:1000;
}
.location b,.location small{display:block}
.location b{font-size:23px;line-height:.9;max-width:300px}
.location small{font-size:10px;font-weight:900;margin-top:9px}
.origin-shack{left:470px;top:480px;background:var(--cream);transform:rotate(-4deg)}
.trait-garden{left:2700px;top:470px;background:var(--lime);transform:rotate(4deg)}
.registry-office{left:2780px;top:1510px;background:var(--yellow);transform:rotate(-3deg)}
.faq-shack{left:450px;top:1630px;background:var(--pink);transform:rotate(3deg)}
.mint-port{left:1600px;top:1940px;background:var(--cream);transform:rotate(-2deg)}
.link-tower{left:1605px;top:260px;background:var(--purple);color:white;transform:rotate(2deg)}

.forbidden-button{
  position:absolute;z-index:22;left:1715px;top:1530px;width:240px;height:100px;
  border:8px solid var(--ink);background:var(--red,#f42338);color:white;font-size:25px;
  line-height:.85;font-weight:1000;box-shadow:12px 12px 0 var(--ink);transform:rotate(5deg);
}
.forbidden-button span{display:block;font-size:10px;letter-spacing:.15em;margin-bottom:8px}
.forbidden-button:hover{animation:forbiddenShake .2s infinite}
.secret-gate{
  position:absolute;z-index:23;left:1510px;top:1370px;width:560px;height:350px;
  border-radius:50% 50% 15% 15%;background:var(--ink);border:12px solid var(--hot);
  display:grid;place-items:center;transform:scale(.15);opacity:0;pointer-events:none;
  transition:.55s cubic-bezier(.18,.9,.2,1.2);
}
.secret-gate.open{transform:scale(1);opacity:1;pointer-events:auto}
.secret-gate:before{
  content:"";position:absolute;inset:25px;border:6px dashed var(--lime);border-radius:inherit;
}
.secret-gate button{position:relative;z-index:2;border:0;background:transparent;color:white;font-weight:1000}
.secret-gate span,.secret-gate b{display:block}.secret-gate span{font-size:10px;color:var(--lime)}.secret-gate b{font-size:40px;margin-top:10px}

.gloop{
  position:absolute;z-index:15;width:285px;background:white;border:8px solid var(--ink);
  box-shadow:12px 12px 0 var(--ink);transition:transform .18s,filter .18s;
  cursor:pointer;
}
.gloop:hover{z-index:40;filter:saturate(1.25);transform:scale(1.12) rotate(0)!important}
.gloop img{width:100%;display:block}
.gloop span{
  position:absolute;right:-15px;bottom:-16px;background:var(--hot);color:white;
  border:5px solid var(--ink);padding:7px 9px;font-size:11px;font-weight:1000;
}
.s1{left:230px;top:720px;transform:rotate(-8deg)}
.s2{left:920px;top:245px;transform:rotate(7deg)}
.s3{left:2150px;top:190px;transform:rotate(-5deg)}
.s4{left:3120px;top:670px;transform:rotate(8deg)}
.s5{left:3100px;top:1210px;transform:rotate(-7deg)}
.s6{left:2380px;top:1880px;transform:rotate(5deg)}
.s7{left:1180px;top:1840px;transform:rotate(-6deg)}
.s8{left:210px;top:1950px;transform:rotate(8deg)}
.s9{left:85px;top:1130px;transform:rotate(-4deg)}
.s10{left:1120px;top:1160px;transform:rotate(6deg)}
.s11{left:2270px;top:1050px;transform:rotate(-8deg)}
.s12{left:3070px;top:215px;transform:rotate(5deg)}

.map-doodle{
  position:absolute;z-index:4;font-size:31px;line-height:.8;font-weight:1000;
  color:var(--ink);opacity:.55;text-align:center;
}
.doodle-a{left:1040px;top:750px;transform:rotate(-16deg)}
.doodle-b{left:2600px;top:1220px;transform:rotate(13deg)}
.doodle-c{left:1320px;top:2150px;transform:rotate(-8deg)}
.doodle-d{left:250px;top:1320px;transform:rotate(10deg)}

.worm{position:absolute;z-index:9;display:flex;gap:0;animation:wormMove 4s ease-in-out infinite}
.worm i{width:42px;height:42px;background:var(--hot);border:5px solid var(--ink);border-radius:50%;margin-left:-8px}
.worm-a{left:1430px;top:620px;transform:rotate(18deg)}
.worm-b{left:2630px;top:2070px;transform:rotate(-14deg);animation-delay:-2s}
.worm-b i{background:var(--green)}
.floating-eye{
  position:absolute;z-index:12;width:90px;height:65px;background:white;border:7px solid var(--ink);
  border-radius:50%;display:grid;place-items:center;animation:eyeFloat 3s ease-in-out infinite;
}
.floating-eye i{width:30px;height:30px;background:var(--ink);border-radius:50%}
.eye-a{left:1500px;top:520px}.eye-b{left:2550px;top:850px;animation-delay:-1s}.eye-c{left:870px;top:1420px;animation-delay:-2s}

.panel-overlay,.specimen-overlay{
  position:fixed;inset:0;z-index:3000;background:rgba(8,8,24,.72);
  backdrop-filter:blur(10px);display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:.22s;padding:20px;
}
.panel-overlay.open,.specimen-overlay.open{opacity:1;visibility:visible}
.panel-close,#closeSpecimen{
  position:absolute;right:24px;top:23px;width:52px;height:52px;border:5px solid var(--ink);
  background:var(--hot);color:white;font-size:32px;font-weight:1000;z-index:5;
}
.panel{
  width:min(980px,94vw);max-height:88vh;overflow:auto;background:var(--cream);
  border:8px solid var(--ink);box-shadow:17px 17px 0 var(--hot);padding:55px;
  transform:translateY(40px) rotate(-1deg);transition:.25s;
}
.panel-overlay.open .panel{transform:translateY(0) rotate(-1deg)}
.panel .eyebrow{font-size:10px;font-weight:1000;letter-spacing:.13em}
.panel h2{font-size:clamp(55px,9vw,110px);line-height:.75;letter-spacing:-.08em;margin:20px 0}
.panel p{font-size:18px;font-weight:700;line-height:1.55}
.panel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
.panel-card{border:5px solid var(--ink);padding:20px;background:white;box-shadow:6px 6px 0 var(--ink)}
.panel-card b{display:block;font-size:22px}.panel-card span{font-size:10px;font-weight:900}
.panel-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.panel-actions a,.panel-actions button{
  text-decoration:none;border:5px solid var(--ink);background:var(--lime);color:var(--ink);
  padding:14px 18px;font-weight:1000;box-shadow:7px 7px 0 var(--ink);
}
.panel-actions .dark{background:var(--ink);color:white;box-shadow:7px 7px 0 var(--hot)}
.trait-strip{display:flex;gap:13px;overflow:auto;margin-top:30px;padding-bottom:15px}
.trait-strip img{width:220px;border:6px solid var(--ink);box-shadow:7px 7px 0 var(--purple)}
.faq-sheet{margin-top:25px}
.faq-row{border-top:5px solid var(--ink);padding:18px 0}
.faq-row b{display:block;font-size:19px}.faq-row p{margin:7px 0 0;font-size:15px}
.passport-sheet{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px;margin-top:25px}
.passport-photo{background:var(--lime);border:6px solid var(--ink);padding:18px}
.passport-photo img{width:100%;display:block;border:5px solid var(--ink)}
.passport-data{border:6px solid var(--ink);padding:25px;background:white}
.passport-data h3{font-size:38px;margin:5px 0 20px}
.passport-stamps{display:flex;flex-wrap:wrap;gap:10px}
.passport-stamps i{
  width:75px;height:75px;border:5px dashed var(--ink);border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:10px;font-weight:1000;text-align:center;
}
.passport-stamps i.done{background:var(--hot);color:white;border-style:solid;transform:rotate(-8deg)}

.specimen-card{
  width:min(1000px,94vw);max-height:88vh;overflow:auto;display:grid;grid-template-columns:.9fr 1.1fr;
  background:var(--yellow);border:8px solid var(--ink);box-shadow:18px 18px 0 var(--purple);
}
.specimen-photo{position:relative;padding:25px;background:var(--lime);border-right:8px solid var(--ink)}
.specimen-photo img{width:100%;display:block;border:6px solid var(--ink)}
.specimen-photo span{
  position:absolute;left:35px;bottom:38px;background:var(--ink);color:white;
  padding:9px 12px;font-size:11px;font-weight:1000;
}
.specimen-copy{padding:50px}
.specimen-copy>span{font-size:10px;font-weight:1000;letter-spacing:.13em}
.specimen-copy h2{font-size:clamp(50px,7vw,85px);line-height:.8;margin:18px 0}
.specimen-copy p{font-size:18px;font-weight:700;line-height:1.5}
.specimen-copy dl{margin-top:25px}
.specimen-copy dl div{display:flex;justify-content:space-between;border-top:4px solid var(--ink);padding:12px 0}
.specimen-copy dt{font-size:9px;font-weight:1000}.specimen-copy dd{margin:0;font-size:12px;font-weight:1000;text-align:right}
.specimen-copy button{width:100%;margin-top:20px;border:5px solid var(--ink);background:var(--hot);color:white;padding:14px;font-weight:1000;box-shadow:7px 7px 0 var(--ink)}

.toast{
  position:fixed;z-index:4500;left:50%;bottom:30px;transform:translate(-50%,150px) rotate(-2deg);
  background:var(--ink);color:white;border:4px solid white;box-shadow:7px 7px 0 var(--hot);
  padding:15px 20px;font-size:11px;font-weight:1000;transition:.25s;
}
.toast.show{transform:translate(-50%,0) rotate(-2deg)}
.swarm-layer{position:fixed;inset:0;z-index:2500;pointer-events:none;overflow:hidden}
.swarm-layer img{
  position:absolute;width:190px;border:6px solid var(--ink);box-shadow:8px 8px 0 var(--hot);
  animation:swarmFly 2.8s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes noiseMove{to{background-position:150px 80px}}
@keyframes wormMove{50%{transform:translateX(80px) rotate(18deg)}}
@keyframes eyeFloat{50%{transform:translateY(-25px) rotate(8deg)}}
@keyframes forbiddenShake{25%{transform:rotate(7deg) translateX(4px)}75%{transform:rotate(3deg) translateX(-4px)}}
@keyframes swarmFly{
  0%{transform:translate(var(--sx),var(--sy)) rotate(0) scale(.6);opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--ex),var(--ey)) rotate(700deg) scale(1.2);opacity:0}
}
@media(max-width:900px){
  .stamp-counter>span,#stampCount{display:none}
  .nav-compass{top:auto;bottom:15px;left:12px;width:112px}
  .minimap{display:none}
  .world-title h1{font-size:125px}
  .panel{padding:38px}
  .specimen-card{grid-template-columns:1fr}
  .specimen-photo{border-right:0;border-bottom:8px solid var(--ink)}
}
@media(max-width:600px){
  .hud-top{left:8px;right:8px;top:7px;height:57px}
  .brand-chip b{display:none}
  .map-controls span{display:none}
  .stamp-counter{gap:4px}
  #stampSlots i{width:19px;height:19px;border-width:2px}
  .nav-compass{display:none}
  .drag-hint{bottom:10px}
  .panel-overlay,.specimen-overlay{padding:10px}
  .panel{padding:27px 20px;max-height:92vh}
  .panel-grid{grid-template-columns:1fr}
  .panel h2{font-size:15vw}
  .passport-sheet{grid-template-columns:1fr}
  .specimen-copy{padding:28px 20px}
  .panel-close,#closeSpecimen{right:12px;top:11px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}