:root{
  --ink:#0d0d0f;
  --paper:#f4effc;
  --pearl-a:#e9e0ff;
  --pearl-b:#f7dfff;
  --pearl-c:#d9f7ff;
  --pearl-d:#fff4d8;
  --purple:#6f2cff;
  --purple-2:#9a64ff;
  --yellow:#ffd400;
  --red:#d91e2b;
  --orange:#ff6b00;
  --green:#48ff78;
  --line:rgba(13,13,15,.2);
  --panel:rgba(255,255,255,.58);
  --panel-strong:rgba(255,255,255,.82);
  --shadow:0 22px 70px rgba(37, 18, 66, .22);
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.95), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(211,255,252,.72), transparent 25%),
    radial-gradient(circle at 20% 72%, rgba(255,207,245,.66), transparent 30%),
    radial-gradient(circle at 80% 78%, rgba(230,214,255,.82), transparent 31%),
    linear-gradient(115deg,var(--pearl-a),var(--pearl-b) 35%,var(--pearl-c) 65%,var(--pearl-d));
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:-20%; z-index:-3;
  background:
    conic-gradient(from 20deg at 30% 35%, transparent, rgba(255,255,255,.55), transparent 20%),
    conic-gradient(from 230deg at 75% 68%, transparent, rgba(183,116,255,.25), transparent 25%);
  filter:blur(30px);
  animation:pearlDrift 16s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:.23;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 5px);
  mix-blend-mode:overlay;
}
@keyframes pearlDrift{to{transform:translate3d(3%,-2%,0) rotate(7deg) scale(1.07)}}

a{color:inherit}
img{max-width:100%;display:block}
button,input{font:inherit}
button{cursor:pointer}

.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.main{position:relative;z-index:2;padding-bottom:90px}

.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(18px) saturate(1.3);
  background:rgba(248,244,255,.64);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:1000;letter-spacing:.04em}
.brand-mark{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--purple);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--yellow);
  color:#fff;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:13px;
  transform:rotate(-4deg)
}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{
  text-decoration:none;font-weight:900;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:10px 12px;border-radius:999px;border:1px solid transparent;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-color:var(--ink);background:rgba(255,255,255,.7);box-shadow:3px 3px 0 rgba(0,0,0,.12)}
.menu-btn{display:none;border:2px solid var(--ink);background:#fff;border-radius:12px;padding:8px 11px;font-weight:900}

.hero{padding:56px 0 28px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);border:2px solid var(--ink);padding:7px 11px;border-radius:8px;box-shadow:4px 4px 0 var(--ink);font-weight:1000;text-transform:uppercase;letter-spacing:.08em;font-size:12px;transform:rotate(-1.5deg)}
.scratch{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  text-transform:uppercase;letter-spacing:.025em;line-height:.92;margin:.2em 0;
  filter:contrast(1.12);
  text-shadow:2px 2px 0 rgba(255,255,255,.65),-1px -1px 0 rgba(0,0,0,.18);
  transform:skewX(-2deg);
}
.scratch-xl{font-size:clamp(64px,10vw,144px)}
.scratch-lg{font-size:clamp(42px,6vw,82px)}
.scratch-md{font-size:clamp(30px,4vw,52px)}
.scratch::after{content:"";display:block;height:9px;width:min(420px,72%);margin-top:9px;background:repeating-linear-gradient(95deg,var(--ink) 0 18px,transparent 18px 25px,var(--ink) 25px 31px);clip-path:polygon(0 25%,100% 0,99% 70%,0 100%);opacity:.78}
.fire-pop{
  animation:fireText .12s infinite alternate;
  color:#2a0500!important;
  text-shadow:0 -2px 2px #fff,0 -7px 8px #ffd400,0 -13px 18px #ff6b00,0 -20px 28px #d91e2b!important;
}
@keyframes fireText{from{filter:brightness(1.02) contrast(1.1)}to{filter:brightness(1.3) contrast(1.35) drop-shadow(0 -7px 10px rgba(255,107,0,.7))}}
.lede{font-size:clamp(18px,2vw,24px);line-height:1.4;max-width:720px;font-weight:700}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.badge{padding:8px 12px;border:2px solid var(--ink);border-radius:999px;font-weight:950;background:rgba(255,255,255,.7)}
.badge.purple{background:var(--purple);color:#fff}
.badge.red{background:var(--red);color:#fff}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  min-height:48px;padding:0 18px;border:2px solid var(--ink);border-radius:12px;
  font-weight:1000;text-transform:uppercase;letter-spacing:.045em;background:#fff;
  box-shadow:5px 5px 0 var(--ink);transition:.15s transform,.15s box-shadow,.15s background;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--purple);color:#fff}
.btn.yellow{background:var(--yellow)}
.btn.red{background:var(--red);color:#fff}
.btn.dark{background:var(--ink);color:#fff}

.hero-card,.panel{
  border:2px solid var(--ink);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);
  overflow:hidden;position:relative;
}
.hero-card::before,.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);pointer-events:none}
.hero-card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.hero-card .stamp{position:absolute;right:16px;bottom:16px;background:var(--yellow);border:3px solid var(--ink);padding:9px 12px;font-weight:1000;transform:rotate(-4deg);box-shadow:4px 4px 0 var(--ink)}

.section{padding:50px 0}
.section-tight{padding:24px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.section-head p{max-width:600px;margin:0;font-weight:700;line-height:1.5}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

.test-card{position:relative;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.68);box-shadow:7px 7px 0 rgba(13,13,15,.18)}
.test-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.test-card .meta{padding:14px}
.test-card h3{margin:0 0 5px;font-size:19px;text-transform:uppercase}
.test-card p{margin:0;color:#333;line-height:1.45;font-weight:650}
.test-number{position:absolute;left:10px;top:10px;background:var(--yellow);border:2px solid var(--ink);padding:5px 8px;font-weight:1000;transform:rotate(-2deg)}

.warning-strip{border:2px solid var(--ink);padding:12px 14px;background:repeating-linear-gradient(135deg,var(--yellow) 0 18px,var(--ink) 18px 36px);border-radius:14px;box-shadow:5px 5px 0 rgba(0,0,0,.15)}
.warning-strip span{display:inline-block;background:var(--yellow);padding:7px 10px;border:2px solid var(--ink);font-weight:1000;text-transform:uppercase}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--panel-strong);border:2px solid var(--ink);border-radius:16px;padding:16px;min-height:118px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-12px;bottom:-16px;width:72px;height:72px;border-radius:50%;background:var(--purple);opacity:.12}
.stat b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px}
.stat strong{display:block;font:1000 24px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.03em;word-break:break-word}

.token-box{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.token-table{border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.7)}
.token-row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid rgba(0,0,0,.16)}
.token-row:last-child{border-bottom:0}
.token-row span,.token-row strong{padding:14px 16px}
.token-row span{font-weight:800;text-transform:uppercase;background:rgba(111,44,255,.08)}
.token-row strong{font-family:monospace;font-size:14px;word-break:break-all}
.copy-btn{margin-left:8px;padding:5px 8px;border:1px solid var(--ink);border-radius:7px;background:var(--yellow);font-weight:900}

.dex-shell{border:2px solid var(--ink);border-radius:20px;background:#0d0d0f;color:#fff;overflow:hidden;box-shadow:var(--shadow)}
.dex-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.16);background:linear-gradient(90deg,#151515,#251044)}
.dex-top strong{text-transform:uppercase;letter-spacing:.08em}
.dex-status{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.dex-frame{width:100%;height:510px;border:0;display:none;background:#111}
.dex-placeholder{min-height:430px;padding:26px;display:grid;grid-template-rows:auto 1fr auto;gap:20px}
.oscilloscope{border:1px solid rgba(255,255,255,.16);border-radius:14px;position:relative;overflow:hidden;min-height:270px;background:
 linear-gradient(rgba(72,255,120,.08) 1px,transparent 1px),
 linear-gradient(90deg,rgba(72,255,120,.08) 1px,transparent 1px),#070807;background-size:28px 28px}
.oscilloscope canvas{width:100%;height:100%;display:block;position:absolute;inset:0}
.dex-note{color:#ddd;line-height:1.45;font-size:14px}
.config-line{display:flex;gap:8px;flex-wrap:wrap}
.config-line input{flex:1;min-width:220px;background:#171717;color:#fff;border:1px solid #555;border-radius:10px;padding:11px 12px}
.config-line button{background:var(--yellow);border:0;border-radius:10px;padding:10px 13px;font-weight:1000}

.lore-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}
.lore-card{padding:24px;border:2px solid var(--ink);border-radius:20px;background:rgba(255,255,255,.7);box-shadow:7px 7px 0 rgba(0,0,0,.12)}
.lore-card p{font-size:18px;line-height:1.65;font-weight:650}
.lore-card p:first-letter{font-size:48px;float:left;line-height:.8;margin:7px 7px 0 0;font-family:Impact,sans-serif;color:var(--purple)}
.protocol{display:grid;gap:12px}
.protocol-step{display:grid;grid-template-columns:70px 1fr;gap:14px;border:2px solid var(--ink);background:rgba(255,255,255,.68);border-radius:16px;padding:14px;align-items:start}
.protocol-step .n{display:grid;place-items:center;min-height:60px;background:var(--yellow);border:2px solid var(--ink);font:1000 28px Impact,sans-serif;transform:rotate(-2deg)}
.protocol-step h3{margin:0 0 5px;text-transform:uppercase}
.protocol-step p{margin:0;line-height:1.45;font-weight:650}

.roadmap{display:grid;gap:16px;position:relative}
.roadmap::before{content:"";position:absolute;left:32px;top:8px;bottom:8px;width:5px;background:repeating-linear-gradient(var(--yellow) 0 12px,var(--ink) 12px 24px);border:1px solid var(--ink)}
.road-item{position:relative;margin-left:84px;padding:20px;border:2px solid var(--ink);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:6px 6px 0 rgba(0,0,0,.12)}
.road-item::before{content:"";position:absolute;left:-68px;top:24px;width:32px;height:32px;border-radius:50%;background:var(--purple);border:5px solid var(--yellow);box-shadow:0 0 0 3px var(--ink)}
.road-item h3{margin:0 0 7px;text-transform:uppercase}
.road-item p{margin:0;line-height:1.5;font-weight:650}
.road-tag{display:inline-block;margin-top:10px;background:var(--ink);color:#fff;padding:5px 8px;border-radius:6px;font-size:12px;font-weight:900}

.game-layout{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.game-shell{background:#0b0b0e;border:3px solid var(--ink);border-radius:22px;padding:14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
#snakeCanvas{width:100%;aspect-ratio:1/1;display:block;background:#111;border-radius:12px;border:1px solid rgba(255,255,255,.16);image-rendering:pixelated}
.game-side{display:grid;gap:12px}
.game-panel{border:2px solid var(--ink);border-radius:16px;padding:16px;background:rgba(255,255,255,.76)}
.game-panel h3{margin-top:0;text-transform:uppercase}
.game-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.game-stat{border:2px solid var(--ink);border-radius:12px;padding:10px;background:#fff}
.game-stat b{display:block;font-size:11px;text-transform:uppercase;color:#555}
.game-stat strong{font:1000 26px Impact,sans-serif}
.game-controls{display:grid;grid-template-columns:repeat(3,58px);gap:7px;justify-content:center;margin-top:12px}
.game-controls button{height:52px;border:2px solid var(--ink);border-radius:10px;background:var(--yellow);font-weight:1000;box-shadow:3px 3px 0 var(--ink)}
.game-controls .blank{visibility:hidden}
.game-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.game-actions button{border:2px solid var(--ink);border-radius:10px;padding:10px 12px;font-weight:1000;text-transform:uppercase}
#startGame{background:var(--purple);color:#fff}
#autoGame{background:var(--yellow)}
#resetGame{background:#fff}

.archive{padding:40px 0 0}
.archive-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.archive-tile{position:relative;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;min-height:120px}
.archive-tile img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:.25s transform}
.archive-tile.wide{grid-column:span 2}
.archive-tile.wide img{aspect-ratio:2/1}
.archive-tile:hover img{transform:scale(1.05) rotate(.4deg)}
.archive-tile span{position:absolute;left:6px;bottom:6px;background:rgba(255,212,0,.92);border:1px solid var(--ink);padding:4px 6px;font-size:9px;font-weight:1000;text-transform:uppercase}

.page-hero{padding:46px 0 18px}
.page-hero-grid{display:grid;grid-template-columns:1fr .8fr;gap:24px;align-items:center}
.page-hero img{border:2px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);width:100%;max-height:440px;object-fit:cover}

.footer{border-top:2px solid var(--ink);background:rgba(255,255,255,.5);backdrop-filter:blur(12px);position:relative;z-index:3}
.footer-in{padding:30px 0 42px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.footer p{margin:6px 0;font-weight:650}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{text-decoration:none;border:2px solid var(--ink);padding:9px 11px;border-radius:9px;background:#fff;font-weight:1000}
.disclaimer{font-size:12px;color:#494949;max-width:760px}

/* Caution tape overlay, intentionally above the page but click-through. */
.tape{position:fixed;left:50%;top:50%;width:130vw;height:58px;z-index:60;pointer-events:none;transform-origin:center;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid var(--ink);opacity:.54;mix-blend-mode:multiply;box-shadow:0 4px 22px rgba(0,0,0,.14)}
.tape::before{content:"TEST ZONE   •   $TEST   •   KEEP OUT   •   CRASH LAB   •   TEST ZONE   •   $TEST   •   KEEP OUT   •   CRASH LAB   •";font:1000 20px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.12em;white-space:nowrap;padding:18px 0;width:100%;text-align:center;background:repeating-linear-gradient(135deg,var(--yellow) 0 42px,#efba00 42px 84px);color:#111}
.tape.one{transform:translate(-50%,-50%) rotate(24deg)}
.tape.two{transform:translate(-50%,-50%) rotate(-24deg)}

/* Random red drop sticker */
.drop-sticker{position:fixed;width:76px;height:92px;z-index:75;pointer-events:none;opacity:0;transform:translateY(20px) scale(.65) rotate(-12deg);transition:.35s ease;filter:drop-shadow(6px 10px 8px rgba(0,0,0,.24))}
.drop-sticker.show{opacity:1;transform:translateY(0) scale(1) rotate(8deg)}
.drop-shape{position:absolute;inset:6px 9px 10px;background:var(--red);border:5px solid #fff;outline:2px solid var(--ink);border-radius:55% 55% 62% 62%;clip-path:polygon(50% 0,90% 42%,100% 70%,81% 94%,50% 100%,18% 94%,0 70%,10% 42%)}
.drop-shape::after{content:"TEST";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:1000 15px Impact,sans-serif;letter-spacing:.08em;transform:rotate(-8deg)}

.noise-flash{position:fixed;inset:0;z-index:59;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.22) 2px 3px);mix-blend-mode:overlay}
.noise-flash.on{animation:glitch .18s 6 steps(2)}
@keyframes glitch{50%{opacity:.32;transform:translateX(3px)}}

@media (max-width:1000px){
  .hero-grid,.page-hero-grid,.lore-grid,.token-box,.game-layout{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .game-side{grid-template-columns:repeat(2,1fr)}
  .archive-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .wrap{width:min(100% - 22px,1180px)}
  .nav{min-height:64px}
  .menu-btn{display:block}
  .nav-links{display:none;position:absolute;left:11px;right:11px;top:68px;padding:10px;background:rgba(255,255,255,.94);border:2px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 rgba(0,0,0,.18)}
  .nav-links.open{display:grid;grid-template-columns:repeat(2,1fr)}
  .nav-links a{text-align:center;border:1px solid rgba(0,0,0,.12)}
  .hero{padding-top:34px}
  .scratch-xl{font-size:clamp(58px,21vw,96px)}
  .section{padding:34px 0}
  .section-head{align-items:start;flex-direction:column}
  .grid-2,.grid-3,.grid-4,.stat-grid,.game-side{grid-template-columns:1fr}
  .token-row{grid-template-columns:120px 1fr}
  .archive-grid{grid-template-columns:repeat(2,1fr)}
  .archive-tile.wide{grid-column:span 2}
  .footer-in{grid-template-columns:1fr}
  .tape{height:42px;opacity:.35}
  .tape::before{font-size:15px}
  .roadmap::before{left:19px}
  .road-item{margin-left:55px}
  .road-item::before{left:-50px;width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .tape{display:none}
}