:root{
  --y:#ffd400; --p:#ff2e93; --b:#1b1b2f; --g:#00e676; --w:#fff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Comic Sans MS","Chalkboard SE",system-ui,sans-serif;
  background:var(--y); color:var(--b);
  background-image:radial-gradient(var(--b) 1.5px,transparent 1.5px);
  background-size:22px 22px;
  overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom);
}
#bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fl{position:absolute;bottom:-60px;font-size:28px;animation:rise linear forwards;opacity:.8}
@keyframes rise{to{transform:translateY(-120vh) rotate(360deg)}}

.marquee{position:relative;z-index:2;background:var(--b);color:var(--y);overflow:hidden;white-space:nowrap;padding:8px 0;font-weight:bold;font-size:14px}
.marquee span{display:inline-block;padding-left:100%;animation:mq 22s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}

section,.hero,footer{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:20px 16px}
.hero{text-align:center;padding-top:28px}

.cat-wrap{position:relative;display:inline-block;font-size:150px;line-height:1;cursor:pointer;animation:bob 1.6s ease-in-out infinite;user-select:none}
.cat-wrap .shades{position:absolute;font-size:70px;left:50%;top:34%;transform:translateX(-50%);animation:drop 1s .3s both}
.cat-wrap .chain{position:absolute;font-size:56px;left:50%;bottom:-12px;transform:translateX(-50%)}
@keyframes bob{50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes drop{from{transform:translate(-50%,-300px)}to{transform:translate(-50%,0)}}
.cat-wrap.hit{animation:shake .5s}
@keyframes shake{20%{transform:rotate(-15deg) scale(1.2)}40%{transform:rotate(15deg) scale(1.2)}60%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}}

h1{font-size:clamp(34px,11vw,60px);margin:14px 0 6px;color:var(--p);text-shadow:3px 3px 0 var(--b);letter-spacing:1px;position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;right:0;top:0}
.glitch::before{color:#00e5ff;animation:gl 2.4s infinite steps(1);clip-path:inset(0 0 55% 0);text-shadow:none}
.glitch::after{color:var(--b);animation:gl 3s infinite steps(1) reverse;clip-path:inset(55% 0 0 0);text-shadow:none}
@keyframes gl{0%,90%{transform:translate(0)}92%{transform:translate(-4px,2px)}95%{transform:translate(4px,-2px)}}
.sub{font-size:18px;margin:6px 0 18px}

.big{
  font:inherit;font-weight:900;font-size:26px;color:#fff;background:var(--p);
  border:4px solid var(--b);border-radius:18px;padding:14px 30px;
  box-shadow:0 6px 0 var(--b);cursor:pointer;transition:transform .08s,box-shadow .08s;
}
.big:active{transform:translateY(6px);box-shadow:0 0 0 var(--b)}
.big.small{font-size:18px;padding:10px 20px;margin-top:10px}
.counter{margin-top:14px;font-size:18px}
.counter b{background:var(--b);color:var(--y);padding:2px 10px;border-radius:8px}
.hint{margin-top:8px;font-size:13px;opacity:.75}

h2{font-size:26px;margin:0 0 8px;display:inline-block;background:var(--b);color:var(--y);padding:4px 12px;transform:rotate(-2deg);border-radius:8px}
.mini{margin:6px 0 10px;font-size:15px}
section{background:rgba(255,255,255,.55);border:4px solid var(--b);border-radius:22px;margin:18px auto;width:calc(100% - 32px);box-shadow:6px 6px 0 var(--b)}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:#fff;border:3px solid var(--b);border-radius:16px;padding:12px 8px;text-align:center;cursor:pointer;transition:transform .15s}
.card:active{transform:scale(.94) rotate(-3deg)}
.card .e{font-size:54px;display:block}
.card b{display:block;font-size:16px;margin-top:2px}
.card small{display:block;font-size:12px;opacity:.8;margin-top:2px}

input{width:100%;font:inherit;font-size:17px;padding:12px;border:3px solid var(--b);border-radius:12px;background:#fff}
input:focus{outline:3px solid var(--p)}
.out{margin-top:12px;padding:14px;background:var(--b);color:var(--g);border-radius:14px;font-family:ui-monospace,Menlo,monospace;font-size:16px;min-height:50px;word-break:break-word}

.scan{display:block;margin:10px auto;width:150px;height:150px;border-radius:50%;border:5px solid var(--b);background:var(--g);font-size:56px;cursor:pointer;box-shadow:0 6px 0 var(--b);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.scan span{display:block;font:bold 13px system-ui}
.scan.on{animation:vib .1s infinite;background:var(--p)}
@keyframes vib{25%{transform:translate(2px,-2px)}75%{transform:translate(-2px,2px)}}
.bar{height:22px;border:3px solid var(--b);border-radius:12px;background:#fff;overflow:hidden}
#barFill{height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--y),var(--p))}

blockquote{margin:8px 0;padding:14px;background:#fff;border-left:8px solid var(--p);font-size:19px;font-style:italic;border-radius:8px}
footer{text-align:center;font-size:13px;padding-bottom:40px}

#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,120px);background:var(--b);color:var(--y);padding:12px 20px;border-radius:30px;font-weight:bold;z-index:9;transition:transform .3s;max-width:90vw;text-align:center}
#toast.show{transform:translate(-50%,0)}
.pop{position:fixed;z-index:8;pointer-events:none;font-weight:900;color:var(--p);text-shadow:2px 2px 0 var(--b);font-size:24px;animation:pop 1s forwards}
@keyframes pop{to{transform:translateY(-90px) scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}