:root{
  --sky:#7fd3ff; --sky2:#9fe0ff; --grass:#76d36a; --ink:#10131a; --iron:#1a1d26;
  --paper:#fff7e6; --hot:#ff4d3d; --gold:#ffcf3a; --slime:#9bff5a; --pink:#ff8fb3;
  --purple:#b06bff; --shadow:rgba(8,10,16,.28);
  --disp:'Bangers',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:52px;
  --z-dock:60; --z-nav:80; --z-gate:100; --z-fx:120;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* proximity (not mandatory): keeps the magnetic feel on the story sections without trapping
   the cursor inside the interactive videos / meme-maker sections */
html{scroll-snap-type:y proximity;scroll-behavior:smooth;scroll-padding-top:72px}
@media (max-width:560px){html{scroll-padding-top:64px}}
html,body{margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--sky);overflow-x:hidden;cursor:default;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{-webkit-user-drag:none;user-select:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.takk{color:var(--hot);font-family:var(--disp);letter-spacing:.04em}
.muted{color:#2a3340}
.tiny{font-size:.82rem}
.bighead{font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,6vw,4.2rem);margin:0 0 var(--s2);
  color:var(--ink);text-shadow:3px 3px 0 #fff,6px 6px 0 var(--shadow);letter-spacing:.01em;text-wrap:balance}

/* ---------- buttons / interaction states ---------- */
.bigbtn,.smallbtn,.coinbtn{font-family:var(--disp);font-weight:400;cursor:pointer;border:4px solid var(--ink);
  background:var(--gold);color:var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink),0 10px 18px var(--shadow);
  transition:transform .12s cubic-bezier(.2,.9,.3,1),box-shadow .12s ease,filter .12s ease;letter-spacing:.03em;
  min-height:44px}
.bigbtn{font-size:clamp(1.4rem,4vw,2.2rem);padding:.5em 1em}
.smallbtn{font-size:1.05rem;padding:.4em .85em;background:#fff;min-width:44px}
.coinbtn{display:inline-block;text-decoration:none;font-size:clamp(1.6rem,5vw,2.8rem);padding:.55em 1.1em;background:var(--slime)}
.bigbtn:hover,.smallbtn:hover,.coinbtn:hover{transform:translateY(-2px) rotate(-1deg);filter:brightness(1.05)}
.bigbtn:active,.smallbtn:active,.coinbtn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}

/* ---------- THE GATE ---------- */
#gate{position:fixed;inset:0;z-index:var(--z-gate);display:grid;place-items:center;
  background:#0a0c12 url('../img/entry.png') center/cover;transition:opacity .55s ease,visibility .55s}
#gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-inner{text-align:center;padding:24px;max-width:560px;position:relative;z-index:1}
.gate-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.gate-title{font-family:var(--disp);font-weight:400;font-size:clamp(3rem,12vw,6rem);color:#fff;margin:.05em 0;
  text-shadow:4px 4px 0 #000,0 0 30px rgba(155,255,90,.5);letter-spacing:.04em}
.gate-eye{width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff,#dcdcd2 60%,#9a9a8a);
  margin:0 auto var(--s2);border:6px solid #0a0c12;display:grid;place-items:center;
  box-shadow:0 0 40px rgba(155,255,90,.35);animation:eyepulse 2.4s ease-in-out infinite}
.gate-eye .pupil{width:40px;height:40px;border-radius:50%;background:#0a0c12;transform:translate(4px,2px)}
@keyframes eyepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06) rotate(2deg)}}
.loadwrap{width:min(420px,80vw);height:20px;border:4px solid #fff;border-radius:30px;margin:var(--s3) auto var(--s1);
  background:#0a0c12;overflow:hidden}
.loadbar{height:100%;width:0%;background:repeating-linear-gradient(90deg,var(--slime) 0 10px,#7fe03a 10px 20px);
  transition:width .25s linear}
.loadmsg{color:#cfe9ff;font-family:var(--disp);font-weight:400;letter-spacing:.06em;font-size:1.15rem;min-height:1.4em}
.enterbtn{margin-top:var(--s2);animation:bob 1.1s ease-in-out infinite}
.gate-fine{color:#9fb6cd;margin-top:var(--s2);font-size:.85rem}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}

/* ---------- layout / snap ---------- */
#site{opacity:0;transition:opacity .5s ease .1s}
#site.live{opacity:1}
.screenful{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;scroll-snap-align:start;padding:clamp(36px,5vh,64px) 18px;gap:var(--s2)}
.subtitle{font-size:clamp(1.05rem,3vw,1.5rem);font-weight:900;margin:0}
.megatitle{font-family:var(--disp);font-weight:400;font-size:clamp(3.2rem,15vw,8rem);margin:0;color:#fff;line-height:.9;
  text-shadow:5px 5px 0 var(--ink),9px 9px 0 var(--shadow);letter-spacing:.03em}
.wob{animation:wob 4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.lede{font-size:clamp(1.02rem,3vw,1.4rem);font-weight:800;line-height:1.55;max-width:38ch;text-wrap:pretty;color:#c8d8ec}
.hint{font-weight:900;color:#1c2733;opacity:.9;margin:0;font-size:.95rem}

/* ---------- HUB ---------- */
#hub{overflow:hidden;justify-content:flex-start;padding-top:clamp(28px,6vh,72px)}
/* full-bleed living scene = the character IS in the park */
.hub-scene{position:absolute;inset:0;z-index:0;margin:0;padding:0;border:0;background:linear-gradient(180deg,var(--sky) 0 55%,var(--grass) 55% 100%);
  overflow:hidden;cursor:pointer;display:block;width:100%;touch-action:manipulation}
.hub-scene .scene-fallback,.hub-scene .scene-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.scene-vid{opacity:0;transition:opacity .35s ease}
.scene-vid.show{opacity:1}
.hub-scene.poked{animation:scene-bump .4s ease}
@keyframes scene-bump{0%{transform:scale(1)}35%{transform:scale(1.012)}100%{transform:scale(1)}}
.scene-tip{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);background:#0a0c12;color:var(--slime);
  font-family:var(--disp);font-size:1rem;padding:.18em .8em;border-radius:12px;border:2px solid #000;white-space:nowrap;
  box-shadow:0 3px 0 var(--shadow);animation:tipbob 1.6s ease-in-out infinite;pointer-events:none}
@keyframes tipbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
.scene-tip.gone{opacity:0;transition:opacity .4s}
.hub-stage{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;align-items:center;gap:var(--s1);width:100%;pointer-events:none}
.hub-stage .hint{pointer-events:auto;margin-top:auto;background:rgba(255,247,230,.82);padding:.4em 1em;border-radius:14px;border:2px solid #00000022}
/* reaction keyframes still used by soundboard/global fx */
@keyframes r-takk{0%{transform:scale(1)}25%{transform:scale(1.2) rotate(-5deg)}60%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1)}}
@keyframes r-squish{0%{transform:scaleY(1)}40%{transform:scaleY(.7) scaleX(1.15)}100%{transform:scaleY(1)}}

/* ---------- FENCE INSTRUMENT (one component, two modes) ---------- */
.fence{position:relative;width:min(560px,92vw);margin:0 auto;border:5px solid #000;border-radius:18px;
  background:linear-gradient(180deg,#11131a,#1c2030);box-shadow:0 8px 0 var(--shadow);overflow:hidden;touch-action:none;cursor:crosshair}
.fence.play{height:118px;background:linear-gradient(180deg,#12202c,#0e3a2a)}
.fence.count{height:180px}
.fence-bars{position:absolute;inset:16px;display:flex;gap:7px;justify-content:space-between;align-items:flex-end}
.fence-bars b{flex:1;height:100%;background:linear-gradient(#3a4154,#171b27);border:2px solid #000;border-radius:6px 6px 3px 3px;
  transform-origin:bottom;transition:transform .07s ease,background .07s,filter .07s;position:relative}
.fence-bars b::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid #171b27}
.fence-bars b.hit{transform:scaleY(1.12) translateY(-4px);background:linear-gradient(var(--slime),#2a8a3a);filter:drop-shadow(0 0 8px var(--slime))}
.fence-hud{display:flex;justify-content:space-between;align-items:center;font-family:var(--disp);pointer-events:none}
/* count mode = a little game: HUD · bars · progress · score, stacked */
.fence.count{height:auto;min-height:228px;display:flex;flex-direction:column;gap:9px;padding:12px 14px 14px}
.fence.count .fence-hud{position:static}
.fence-level{color:#cfe9ff;font-size:clamp(.78rem,2.6vw,.95rem);text-shadow:1px 1px 0 #000;letter-spacing:.02em}
.fence-mult{color:var(--gold);font-size:1.35rem;text-shadow:1px 1px 0 #000;transition:transform .12s cubic-bezier(.2,1.5,.4,1)}
.fence-mult.bump{transform:scale(1.45) rotate(-3deg)}
.fence-mult.hot{color:var(--hot);animation:wob .5s infinite}
.fence.count .fence-bars{position:relative;inset:auto;flex:1;min-height:88px}
.fence-progress{height:15px;border:3px solid #000;border-radius:12px;background:#0a0c12;overflow:hidden;box-shadow:inset 0 2px 4px #000}
.fence-progress i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#2a8a3a,var(--slime),var(--gold));
  background-size:200% 100%;transition:width .14s ease;animation:fillshine 1.1s linear infinite}
@keyframes fillshine{to{background-position:200% 0}}
.fence-score{font-family:var(--disp);color:#cfe9ff;display:flex;gap:7px;align-items:baseline;justify-content:center;flex-wrap:wrap;text-shadow:1px 1px 0 #000}
.fence-score span{color:var(--slime);font-size:1.55rem}
.fence-score small{font-size:.66rem;opacity:.85;font-family:var(--body);font-weight:900}
.fence.count .fence-instr{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);
  font-size:clamp(1.1rem,4vw,1.9rem);color:#fff;text-shadow:2px 2px 0 #000;pointer-events:none;margin:0;transition:opacity .2s;z-index:3}
.fence.count.active .fence-instr{opacity:0}
.fence.count.active{animation:shake .25s linear infinite}
/* floating combo/bonus popups */
.fence-pop{position:fixed;z-index:60;font-family:var(--disp);pointer-events:none;text-shadow:2px 2px 0 #000;
  animation:pop-rise .8s cubic-bezier(.2,.9,.3,1) forwards;white-space:nowrap}
@keyframes pop-rise{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1;transform:translate(-50%,-18px) scale(1.1)}
  100%{transform:translate(-50%,-64px) scale(1);opacity:0}}

/* ---------- HOWTO ---------- */
.comic{width:min(860px,94vw);height:auto;border:5px solid #000;border-radius:16px;box-shadow:0 8px 0 var(--shadow);background:#fff}
.comic.noimg{aspect-ratio:16/6;display:grid;place-items:center}
.comic.noimg::after{content:"[ drag · TAKK · number ]";font-family:var(--disp);color:#555}
.bigchant{font-family:var(--disp);font-weight:400;font-size:clamp(1.3rem,4.5vw,2.4rem);margin:0}

/* ---------- RIB CARD — iron blueprint certificate ---------- */
.ribcard{width:min(440px,94vw);margin:var(--s2) auto 0;position:relative;overflow:hidden;text-align:center;color:#eaf6ff;
  background:radial-gradient(125% 90% at 50% -12%,#1d2a44,#0c1322 72%);
  border:5px solid #000;border-radius:18px;padding:clamp(18px,4vw,26px) clamp(16px,4vw,26px);
  box-shadow:0 10px 0 var(--shadow),inset 0 0 0 2px #ffffff14,inset 0 0 0 4px #00000040}
.ribcard::before{content:"";position:absolute;inset:9px;border:2px dashed #ffffff1f;border-radius:11px;pointer-events:none}
.ribcard.pop{animation:pop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{0%{transform:scale(.7) rotate(-5deg);opacity:0}100%{transform:scale(1);opacity:1}}
.ribcard-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--disp);font-size:.8rem;gap:8px;
  position:relative;padding-bottom:10px;margin-bottom:4px;border-bottom:2px solid #ffffff1c}
.ribcard-brand{color:var(--slime);letter-spacing:.04em}
.ribcard-rarity{padding:.18em .7em;border:2px solid #000;border-radius:20px;background:#fff;color:#10131a;text-transform:uppercase;font-size:.78rem}
.ribcard-rarity.uncommon{background:var(--sky)}
.ribcard-rarity.rare{background:var(--gold)}
.ribcard-rarity.cursed{background:var(--purple);color:#fff;animation:wob 1.5s infinite}
.ribcard-body{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.ribcard-glyph{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(.5rem,2vw,.66rem);line-height:1.05;
  background:#070a10;color:var(--slime);padding:10px 12px;border:2px solid #ffffff1f;border-radius:10px;
  box-shadow:inset 0 0 18px #9bff5a22;margin:6px 0 2px;display:inline-block;text-align:left;white-space:pre}
.ribcard-numlabel{font-weight:900;font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#9fb6cf}
.ribcard-num{font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,9vw,3.2rem);line-height:.95;margin:.02em 0;
  color:#fff;text-shadow:3px 3px 0 #000,0 0 16px #7fd3ff66}
.ribcard-name{font-family:var(--disp);font-weight:400;font-size:1.15rem;color:var(--gold);letter-spacing:.04em}
.ribcard-fprow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0 2px;
  padding:7px 10px;background:#00000038;border-radius:9px}
.ribcard-fplabel{font-family:var(--disp);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:#9fb6cf}
.ribcard-fp{font-family:ui-monospace,monospace;font-size:.8rem;color:var(--slime);word-break:break-all}
.ribcard-traits{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:var(--s1) 0}
.ribcard-traits span{font-size:.74rem;font-weight:900;background:#ffffff12;border:2px solid #ffffff2e;border-radius:14px;padding:.16em .7em;color:#eaf6ff}
.ribcard-gremlin{font-style:italic;color:#bcd0e6;margin:var(--s1) 0 var(--s2);min-height:1.2em;font-size:.92rem}
.ribcard-actions{display:flex;gap:8px;justify-content:center}
.ribcard-foot{margin-top:13px;padding-top:11px;border-top:2px solid #ffffff14;font-family:var(--disp);
  font-size:.8rem;letter-spacing:.05em;color:#7fd3ff;opacity:.92}

/* ---------- BIGGER COUNTER ---------- */
.fence.count.big{min-height:300px;width:min(680px,94vw)}
.fence.count.big .fence-bars{min-height:150px;gap:5px}
.fence-level.lvlup{animation:r-takk .5s cubic-bezier(.2,.9,.3,1)}

/* ---------- ENGINEERED LIVE (FOMO) ---------- */
#live{background:linear-gradient(180deg,#0c1322,#15101f);color:#eaf6ff;gap:var(--s2)}
#live .bighead{color:#fff;text-shadow:3px 3px 0 #000}
.live-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:.95rem;letter-spacing:.12em;
  color:#0a0c12;background:var(--hot);border:3px solid #000;border-radius:30px;padding:.3em 1em;box-shadow:0 4px 0 var(--shadow)}
.live-dot{width:11px;height:11px;border-radius:50%;background:#0a0c12;animation:eyepulse 1.1s infinite}
.whatif{font-family:var(--disp);font-size:clamp(1.3rem,4.5vw,2.2rem);color:var(--gold);max-width:22ch;line-height:1.15;
  text-shadow:2px 2px 0 #000;transition:opacity .3s;min-height:2.4em;text-wrap:balance}
.hooks{list-style:none;padding:0;margin:var(--s2) auto var(--s3);max-width:46ch;display:grid;gap:12px;text-align:left}
.hooks li{font-weight:600;line-height:1.45;font-size:1rem;padding-left:1.7em;position:relative;color:#aebfd4}
.hooks li::before{content:"";position:absolute;left:0;top:.12em;width:1em;height:1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239bff5a' d='M12 1.5 L15.5 6 L12 10.5 L8.5 6 Z M10.5 7.5 h3 v12.5 a1.5 1.5 0 0 1 -3 0 Z'/%3E%3C/svg%3E") center/contain no-repeat}
.hooks b{color:#fff;font-weight:900}

/* ---------- $KLAKKA TOKEN ---------- */
#token{background:linear-gradient(180deg,#101521,#1a2335);color:#eaf6ff;gap:var(--s1)}
#token .bighead{color:#fff;text-shadow:3px 3px 0 #000;margin-bottom:var(--s1)}
.ticker{font-family:var(--disp);font-size:clamp(3rem,12vw,6rem);color:var(--slime);line-height:.9;
  text-shadow:4px 4px 0 #000,0 0 24px #9bff5a55;letter-spacing:.02em}
.ribperks{list-style:none;padding:0;margin:var(--s2) 0;font-weight:800;font-size:1.05rem;display:grid;gap:8px;justify-items:start;text-align:left;margin-inline:auto;width:max-content;max-width:94vw}
.ribperks li{position:relative;padding-left:1.7em}
.ribperks li::before{content:"";position:absolute;left:0;top:.1em;width:1em;height:1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239bff5a' d='M12 1.5 L15.5 6 L12 10.5 L8.5 6 Z M10.5 7.5 h3 v12.5 a1.5 1.5 0 0 1 -3 0 Z'/%3E%3C/svg%3E") center/contain no-repeat}
.ca{display:inline-flex;align-items:center;gap:10px;background:#0a0c12;border:3px solid #000;border-radius:14px;
  padding:.5em .7em;margin:var(--s1) 0 var(--s2);max-width:94vw;box-shadow:0 5px 0 var(--shadow)}
.ca-label{font-family:var(--disp);font-size:.8rem;color:#9fb3c8;text-transform:uppercase;letter-spacing:.1em}
.ca-addr{font-family:ui-monospace,monospace;font-size:1rem;color:var(--slime);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.ca-copy{font-family:var(--disp);font-size:.9rem;border:3px solid #000;border-radius:10px;background:var(--gold);color:#0a0c12;cursor:pointer;padding:.3em .8em}
.ca-copy:active{transform:translateY(2px)}
.coinbtn.buy{background:var(--slime)}
.coinbtn.shake{animation:shake .3s linear}
#buyNote{color:#9fb3c8}  /* .muted is dark — override so the FOMO line is readable on the dark token bg */

/* ---------- STEM DOCK ---------- */
.dock{position:fixed;right:14px;bottom:14px;z-index:var(--z-dock);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.dock-toggle{font-size:1.5rem;width:54px;height:54px;border-radius:50%;border:4px solid #000;background:#fff;cursor:pointer;
  box-shadow:0 4px 0 #000;display:grid;place-items:center;transition:transform .1s}
.dock-toggle:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.dock-toggle.playing{background:var(--slime);animation:throb 1.1s ease-in-out infinite}
@keyframes throb{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.dock-panel{background:#0a0c12;border:4px solid #000;border-radius:16px;padding:12px;display:none;flex-direction:column;gap:7px;
  width:212px;box-shadow:0 8px 0 var(--shadow)}
.dock-panel.open{display:flex}
.dock-title{font-family:var(--disp);color:#fff;font-size:1rem;display:flex;justify-content:space-between;align-items:center}
.stemrow{display:flex;gap:8px}
.stemchip{flex:1;font-weight:900;font-size:.82rem;border:3px solid #000;border-radius:10px;background:var(--slime);color:#0a0c12;
  padding:.4em;cursor:pointer;text-align:center;user-select:none;transition:transform .07s,filter .07s;min-height:38px}
.stemchip.off{background:#39414e;color:#8a93a0;filter:saturate(.4)}
.stemchip:active{transform:scale(.94)}
.dock-mini{display:flex;gap:6px}
.dock-mini button{flex:1;font-family:var(--disp);font-size:.85rem;border:3px solid #000;border-radius:10px;background:var(--gold);cursor:pointer;padding:.35em;min-height:38px}

.foot{padding:24px;text-align:center;font-weight:900;background:#0a0c12;color:#9fb3c8;width:100%}
#secret{cursor:pointer;opacity:.45}

/* ---------- fx ---------- */
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-3px)}75%{transform:translate(-2px,-1px)}}
body.shake{animation:shake .22s linear}
.float-takk{position:fixed;z-index:var(--z-fx);font-family:var(--disp);color:var(--hot);font-size:2rem;pointer-events:none;
  text-shadow:2px 2px 0 #fff,0 0 8px rgba(255,77,61,.5);animation:floatup .7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes floatup{0%{opacity:1;transform:translateY(0) scale(.8) rotate(-6deg)}100%{opacity:0;transform:translateY(-70px) scale(1.5) rotate(6deg)}}

/* ---------- rib mark (real motif, replaces the ▦ placeholder) ---------- */
.svgsprite{position:absolute;width:0;height:0;overflow:hidden}
.ribmark-svg{width:1em;height:1em;vertical-align:-.14em;fill:currentColor;flex:none}
#secret .ribmark-svg{width:1.1em;height:1.1em}

/* ---------- CLAIM STAGE + THE WATCHER (the creature is IN the game) ---------- */
#counted{--dig:0;position:relative;isolation:isolate;transition:background .5s ease}
#counted::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 72%,transparent 26%,rgba(28,8,12,.55) 62%,rgba(7,5,9,.92) 100%);
  opacity:var(--dig);transition:opacity .5s ease}
.claim-stage{position:relative;z-index:1;width:min(680px,94vw);margin:0 auto;display:flex;flex-direction:column;align-items:center}
.claim-stage .fence{width:100%;filter:contrast(calc(1 + var(--dig)*.4)) brightness(calc(1 - var(--dig)*.16)) saturate(calc(1 + var(--dig)*.25));transition:filter .35s ease}

.watcher{position:relative;z-index:2;margin-bottom:-15px;pointer-events:none;filter:drop-shadow(0 6px 0 var(--shadow))}
.watcher-head{position:relative;width:clamp(78px,19vw,108px);height:clamp(66px,16vw,90px);
  background:radial-gradient(120% 120% at 50% 28%,#343a4a,#0e1119 72%);
  border:4px solid #000;border-radius:48% 48% 42% 42%/56% 56% 40% 40%;
  display:flex;align-items:flex-start;justify-content:center;padding-top:13%;
  filter:saturate(calc(1 - var(--dig)*.55)) brightness(calc(1 - var(--dig)*.22));
  transition:transform .12s cubic-bezier(.2,1.5,.4,1),filter .35s ease}
.watcher-eye{position:relative;width:52%;height:60%;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#fff,#ece9da 54%,#bdbaa6);
  border:4px solid #000;display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 0 calc(var(--dig)*18px) #ff2a1a,0 0 calc(var(--dig)*14px) #ff2a1a55;
  transition:box-shadow .35s ease}
.watcher-eye::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 52%,#c41a0e22 70%,#c41a0e66 100%);
  opacity:var(--dig);transition:opacity .35s ease}
.watcher-pupil{width:38%;height:38%;border-radius:50%;background:#070a10;position:relative;z-index:1;
  transform:translate(0,0);transition:transform .07s linear,width .1s ease,height .1s ease}
.watcher-mouth{position:absolute;bottom:9%;left:50%;width:30%;height:7%;
  background:#070a10;border:2px solid #000;border-radius:2px 2px 7px 7px;
  transform:translateX(-50%);transition:height .12s ease,width .12s ease,border-radius .12s ease}
.watcher.hit .watcher-head{transform:scaleY(.86) scaleX(1.08) translateY(3px)}
.watcher.hit .watcher-pupil{width:46%;height:46%}
.watcher.react .watcher-head{animation:scene-bump .4s ease}
.watcher.feral .watcher-head{transform:rotate(-3deg) scale(1.05)}
.watcher.feral .watcher-eye{animation:eyetwitch .18s steps(2) infinite}
@keyframes eyetwitch{0%{transform:translate(0,0)}100%{transform:translate(.6px,-.6px)}}
.watcher.scream .watcher-head{animation:scream-shake .3s linear 3}
.watcher.scream .watcher-mouth{height:42%;width:46%;border-radius:8px 8px 46% 46%;
  background:radial-gradient(circle at 50% 18%,#5a0d0d,#070a10 75%)}
.watcher.scream .watcher-pupil{width:30%;height:30%}
@keyframes scream-shake{0%,100%{transform:translate(0,0) scale(1.06)}25%{transform:translate(-3px,2px) scale(1.06)}75%{transform:translate(3px,-2px) scale(1.06)}}

.backline{display:inline-block;font-weight:800;color:#10131a;background:var(--gold);border:3px solid #000;border-radius:14px;
  padding:.45em 1.1em;margin:0 auto;font-size:.98rem;line-height:1.35;max-width:min(46ch,92vw);box-shadow:0 4px 0 var(--shadow)}

/* ---------- COUNTED payoff: screen pulse + flying shards ---------- */
.flashfx{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;opacity:0}
.flashfx.go{animation:flashpulse .6s ease-out forwards}
@keyframes flashpulse{0%{opacity:0;background:radial-gradient(circle at 50% 55%,#fff,rgba(155,255,90,.5) 45%,transparent 72%)}
  18%{opacity:.92}100%{opacity:0;background:radial-gradient(circle at 50% 55%,#fff,rgba(155,255,90,.5) 45%,transparent 72%)}}
.shard{position:fixed;z-index:var(--z-fx);font-family:var(--disp);pointer-events:none;will-change:transform,opacity;
  text-shadow:1px 1px 0 #000;animation:shardfly var(--d,.9s) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes shardfly{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.3)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1)}}

/* ---------- colorize: cursed rust glow on the dark sections ---------- */
#live,#token{position:relative;isolation:isolate}
#live::after,#token::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 75% at 50% 0%,rgba(132,30,18,.22),transparent 58%)}

/* ---------- FLOATING NAV ---------- */
#nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:var(--z-nav);
  display:flex;align-items:center;gap:6px;max-width:min(960px,calc(100vw - 16px));
  background:rgba(10,12,18,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:3px solid #000;border-radius:18px;padding:6px 8px;box-shadow:0 6px 0 var(--shadow)}
#nav[hidden]{display:none}
.nav-brand{display:flex;align-items:center;gap:6px;font-family:var(--disp);font-size:1.15rem;color:#fff;
  text-decoration:none;padding:.1em .45em;letter-spacing:.02em}
.nav-brand .ribmark-svg{color:var(--slime);width:1.05em;height:1.05em}
.nav-links{display:flex;gap:2px}
.nav-links a{font-family:var(--disp);font-size:.98rem;color:#cfe0f0;text-decoration:none;padding:.35em .7em;
  border-radius:10px;letter-spacing:.02em;white-space:nowrap;transition:background .12s,color .12s}
.nav-links a:hover{background:#ffffff14;color:#fff}
.nav-links a.active{background:var(--slime);color:#0a0c12}
.nav-buy{font-family:var(--disp);font-size:1rem;color:#0a0c12;background:var(--slime);text-decoration:none;
  border:2px solid #000;border-radius:12px;padding:.4em .9em;white-space:nowrap;box-shadow:0 3px 0 #0a0c12;
  transition:transform .1s,filter .1s;margin-left:2px}
.nav-buy:hover{filter:brightness(1.06);transform:translateY(-1px)}
.nav-buy:active{transform:translateY(2px);box-shadow:0 1px 0 #0a0c12}
.nav-toggle{display:none;font-size:1.2rem;background:#ffffff14;color:#fff;border:2px solid #ffffff2e;
  border-radius:10px;width:42px;height:42px;cursor:pointer;place-items:center}

/* ---------- WATCH / VIDEOS ---------- */
#videos{background:linear-gradient(180deg,#0c1322,#0e1a20);color:#eaf6ff;gap:var(--s2)}
#videos .bighead{color:#fff;text-shadow:3px 3px 0 #000}
.vid-sub{color:#9fb3c8;max-width:40ch}
.vidrow{display:flex;gap:14px;justify-content:center;align-items:flex-start;width:100%;max-width:1100px}
.vidcard{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.vid-frame{position:relative;line-height:0}
.vid-frame .clip{height:min(56vh,520px);width:auto;aspect-ratio:9/16;display:block;background:#000;
  border:4px solid #000;border-radius:16px;box-shadow:0 8px 0 var(--shadow);object-fit:cover;cursor:pointer;max-width:90vw}
.vid-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:4px solid #000;
  background:var(--slime);color:#0a0c12;font-size:1.4rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 4px 0 #0a0c12;transition:transform .12s,opacity .2s;padding-left:4px}
.vid-play:hover{transform:scale(1.08)}
.vidcard.playing .vid-play{opacity:0;pointer-events:none}
.vidcard figcaption{font-family:var(--disp);font-size:1.05rem;color:#cfe0f0;letter-spacing:.03em}

/* ---------- MEME GENERATOR ---------- */
#memes{background:linear-gradient(180deg,#0e1a20,#101521);color:#eaf6ff;gap:var(--s2)}
#memes .bighead{color:#fff;text-shadow:3px 3px 0 #000}
.meme-gen{display:flex;gap:clamp(14px,3vw,28px);align-items:flex-start;justify-content:center;
  width:100%;max-width:860px;flex-wrap:wrap}
.meme-stage{flex:0 0 auto}
#memeCanvas{width:min(360px,86vw);height:auto;aspect-ratio:1;background:#0a0c12;border:4px solid #000;
  border-radius:14px;box-shadow:0 8px 0 var(--shadow);display:block}
.meme-controls{flex:1 1 280px;max-width:380px;min-width:min(280px,86vw);display:flex;flex-direction:column;gap:10px;text-align:left}
.meme-templates{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.meme-templates button{padding:0;border:3px solid #000;border-radius:9px;overflow:hidden;cursor:pointer;
  background:#000;aspect-ratio:1;line-height:0;transition:transform .1s}
.meme-templates button img{width:100%;height:100%;object-fit:cover;display:block}
.meme-templates button.sel{outline:3px solid var(--slime);outline-offset:1px}
.meme-templates button:active{transform:scale(.93)}
.meme-field{display:flex;flex-direction:column;gap:3px;font-family:var(--disp);font-size:.82rem;color:#9fb3c8;letter-spacing:.06em}
.meme-field input{font-family:var(--body);font-weight:900;font-size:1rem;color:#0a0c12;background:#fff;
  border:3px solid #000;border-radius:10px;padding:.5em .7em;min-height:44px}
.meme-field input:focus{outline:3px solid var(--slime);outline-offset:0}
.meme-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.meme-actions .smallbtn{flex:1;min-width:88px}
.meme-tip{margin:4px 0 0}

/* ---------- dock master mute (reachable on touch) ---------- */
.dock-mute{width:100%;margin-top:7px;font-family:var(--disp);font-size:.92rem;border:3px solid #000;border-radius:10px;
  background:var(--slime);color:#0a0c12;cursor:pointer;padding:.4em;min-height:38px;transition:transform .07s,filter .1s}
.dock-mute:active{transform:scale(.96)}
.dock-mute.muted{background:#39414e;color:#cfd6df}

/* ---------- mobile ---------- */
@media (max-width:560px){
  .screenful{padding:clamp(28px,4vh,44px) 14px}
  .ca-addr{max-width:38vw}
  .dock{right:10px;bottom:10px}
  .ribcard-glyph{font-size:.58rem}
}
/* nav collapse + video carousel on smaller screens */
@media (max-width:780px){
  #nav{gap:4px;padding:5px 6px;max-width:calc(100vw - 12px)}
  .nav-links{position:fixed;top:62px;left:50%;transform:translateX(-50%) scale(.96);transform-origin:top center;
    flex-direction:column;align-items:stretch;background:rgba(10,12,18,.96);border:3px solid #000;border-radius:16px;
    padding:8px;min-width:210px;box-shadow:0 8px 0 var(--shadow);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
  .nav-links.open{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
  .nav-links a{font-size:1.15rem;padding:.55em .8em}
  .nav-toggle{display:grid}
  .vidrow{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;gap:12px;
    padding:2px 12px 10px;-webkit-overflow-scrolling:touch}
  .vidcard{scroll-snap-align:center;flex:0 0 auto}
  .vid-frame .clip{height:min(64vh,560px)}
}
@media (max-width:430px){
  .nav-brand span{display:none}
  .nav-buy{font-size:.9rem;padding:.4em .7em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* silence perpetual ambient loops, but KEEP the one-shot game feedback (that is the product) */
  .wob,.enterbtn,.gate-eye,.live-dot,.scene-tip,.fence-progress i,.dock-toggle.playing,
  .ribcard-rarity.cursed,.fence-mult.hot,.watcher-eye,.fence.count.active{animation:none!important}
  .scene-vid{transition:none!important}
  .float-takk,.fence-pop,.shard{animation-duration:.4s!important}
}

/* dev flat-stack (headless verification only) */
.flat{scroll-snap-type:none}
.flat #gate{display:none}
.flat .screenful{min-height:auto!important;padding:30px 16px}