*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body{background:#000;color:#fff;font-family:"Comic Sans MS","Comic Neue","Trebuchet MS",system-ui,sans-serif}
button{font:inherit;cursor:pointer}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ================= INTRO ================= */
#intro{position:fixed;inset:0;z-index:50;background:#000;overflow:hidden}
#intro.done{opacity:0;transition:opacity .8s;pointer-events:none}
#stage{position:absolute;inset:0;overflow:hidden}
#stage.shake{animation:shake .5s linear infinite}
#stage.shake-hard{animation:shakeHard .35s linear infinite}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-8px,5px) rotate(-.5deg)}40%{transform:translate(7px,-6px)}60%{transform:translate(-6px,-4px) rotate(.5deg)}80%{transform:translate(5px,7px)}}
@keyframes shakeHard{0%,100%{transform:translate(0,0)}20%{transform:translate(-18px,12px) rotate(-1.5deg)}40%{transform:translate(16px,-14px) rotate(1deg)}60%{transform:translate(-14px,-10px)}80%{transform:translate(12px,16px) rotate(-1deg)}}

#fakeui{position:absolute;inset:0;pointer-events:none;color:#333;font:12px/1.4 system-ui,sans-serif}
.fu-bar{position:absolute;top:0;left:0;right:0;height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid #151515}
.fu-dot{width:10px;height:10px;border-radius:50%;background:#1d1d1d}
.fu-url{margin-left:10px;color:#2b2b2b}
.fu-foot{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#262626;padding:0 10px}

#moreInfo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#111;color:#ddd;border:1px solid #444;border-radius:6px;padding:14px 22px;font:16px system-ui,sans-serif;letter-spacing:.3px;white-space:nowrap}
#moreInfo:hover,#moreInfo:focus-visible{background:#1c1c1c;color:#fff;outline:2px solid #3ee6c1;outline-offset:3px}

.frag{position:absolute;pointer-events:none;will-change:transform,opacity}

#crystalWrap{position:absolute;left:50%;bottom:6vh;width:min(400px,62vw,48vh);transform:translate(-50%,130%);opacity:0;z-index:3}
#crystal{width:100%;height:auto;display:block;position:relative;z-index:2}
#glow{position:absolute;inset:-20% -30%;background:radial-gradient(closest-side,rgba(62,230,193,.55),rgba(122,47,214,.25) 60%,transparent);z-index:1;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12);opacity:.75}}
#crystalWrap.oiled #glow{background:radial-gradient(closest-side,rgba(80,80,80,.45),transparent)}
#crystalWrap.scorched #crystalBody{filter:brightness(.55) sepia(.6)}

#oilCan{position:absolute;top:12vh;left:calc(50% - 40px);width:min(160px,34vw);opacity:0;transform-origin:85% 30%;z-index:4}
#oilCan svg{width:100%;height:auto}
#oilStream{position:absolute;width:14px;height:0;border-radius:7px;background:linear-gradient(90deg,#000,#3a3a3a 40%,#8a8a8a 50%,#222 60%,#000);z-index:4;box-shadow:0 0 6px rgba(0,0,0,.8)}
#drips{position:absolute;inset:0;pointer-events:none;z-index:4}
.drip{position:absolute;width:10px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#888,#111 45%,#000)}

#nuke{position:absolute;left:50%;bottom:0;width:min(620px,96vw,90vh);transform:translateX(-50%) scale(0);transform-origin:50% 100%;opacity:0;z-index:5}
#nuke svg{width:100%;height:auto;display:block}
#cap{transform-origin:200px 150px;animation:billow 1.2s ease-in-out infinite}
@keyframes billow{50%{transform:scale(1.04) translateY(-4px)}}
#ring{position:absolute;left:50%;bottom:10vh;width:60px;height:60px;margin-left:-30px;border-radius:50%;border:10px solid rgba(255,230,180,.9);box-shadow:0 0 30px 10px rgba(255,170,60,.6);opacity:0;z-index:6}
#fires{position:absolute;left:0;right:0;bottom:0;height:40vh;pointer-events:none;z-index:6}
.fire{position:absolute;bottom:-10px;width:60px;height:110px;border-radius:50% 50% 40% 40%/70% 70% 30% 30%;background:radial-gradient(ellipse at 50% 80%,#fff3a0 0,#ffb020 30%,#ff4d00 60%,rgba(255,40,0,0) 72%);transform-origin:50% 100%;animation:flick .45s ease-in-out infinite alternate;transition:transform .9s ease-in,opacity .9s}
.fire.out{transform:scale(.05)!important;opacity:0}
@keyframes flick{0%{transform:scaleY(.85) scaleX(1.05) skewX(-4deg)}100%{transform:scaleY(1.12) scaleX(.92) skewX(5deg)}}
#spray{position:absolute;inset:0;pointer-events:none;z-index:8}
.puff{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(230,240,255,.6) 50%,rgba(255,255,255,0) 70%)}

#bitz{position:absolute;bottom:max(3vh,52px);left:0;width:min(240px,40vw,32vh);transform:translateX(-120%);z-index:7}
#bitz svg{width:100%;height:auto;display:block}
#bitz.walking .legL{animation:legA .4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
#bitz.walking .legR{animation:legA .4s ease-in-out infinite alternate-reverse;transform-box:fill-box;transform-origin:50% 0}
#bitz.walking #bitzSvg{animation:bob .4s ease-in-out infinite alternate}
@keyframes legA{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes bob{to{transform:translateY(-6px)}}
#bitz.talking .bz-mouth{animation:talk .18s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
@keyframes talk{to{transform:scaleY(.55)}}

#bubble{position:absolute;z-index:9;left:max(16px,4vw);right:16px;max-width:420px;bottom:calc(max(3vh,52px) + min(415px,69vw,55vh) + 14px);background:#fff;color:#111;border:4px solid #111;border-radius:22px;padding:14px 18px;font-size:clamp(17px,4.4vw,24px);font-weight:700;line-height:1.25;opacity:0;transform:scale(.6);transform-origin:20% 100%;transition:opacity .3s,transform .3s cubic-bezier(.3,1.6,.6,1);min-height:2.6em}
#bubble.show{opacity:1;transform:scale(1)}
#bubble::after{content:"";position:absolute;left:min(90px,18vw);bottom:-24px;border:12px solid transparent;border-top:14px solid #111}
#bubble::before{content:"";position:absolute;left:calc(min(90px,18vw) + 3px);bottom:-15px;border:9px solid transparent;border-top:11px solid #fff;z-index:1}
.caret{animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20}

#introCtl{position:absolute;right:12px;bottom:12px;z-index:30;display:flex;gap:10px;align-items:center}
#introCtl a,#introCtl button{color:#bbb;background:rgba(0,0,0,.6);border:1px solid #444;border-radius:16px;padding:6px 12px;font:13px system-ui,sans-serif;text-decoration:none}
#introCtl a:hover,#introCtl button:hover{color:#fff;border-color:#888}

/* ================= MAIN SITE ================= */
#site{background:#ffe600 repeating-linear-gradient(45deg,rgba(0,0,0,.04) 0 12px,transparent 12px 24px);color:#111;min-height:100vh;padding-bottom:30px;overflow-x:hidden}
#site[hidden]{display:none}
.hero{background:linear-gradient(135deg,#7a2fd6,#0a8f78);color:#fff;text-align:center;padding:26px 14px 0;position:relative;overflow:hidden;border-bottom:6px dashed #111}
.hero h1{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(34px,10vw,90px);letter-spacing:2px;text-shadow:4px 4px 0 #000,-2px -2px 0 #ff2bd6;animation:wobble 2.5s ease-in-out infinite;position:relative;z-index:1;word-break:break-word}
.hero h1 span{color:#b6ff3e}
@keyframes wobble{25%{transform:rotate(-2deg) scale(1.02)}75%{transform:rotate(2deg)}}
.tag{margin:8px auto 14px;max-width:640px;font-size:15px;position:relative;z-index:1}
.hero-gems{position:absolute;inset:0;pointer-events:none}
.gem{position:absolute;width:44px;height:44px;background:linear-gradient(135deg,#fff,#3ee6c1 40%,#7a2fd6);clip-path:polygon(50% 0,100% 38%,80% 100%,20% 100%,0 38%);animation:spin 3s linear infinite}
.g1{left:4%;top:12px}.g2{right:5%;top:30px;animation-duration:2s;background:linear-gradient(135deg,#fff,#ff2bd6 40%,#ff9a2a)}.g3{left:22%;bottom:40px;width:28px;height:28px;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.marquee,.ticker{overflow:hidden;white-space:nowrap;position:relative}
.marquee{background:#111;color:#b6ff3e;padding:6px 0;font-weight:700;margin:0 -14px}
.mq-inner,.tk-inner{display:inline-block;padding-left:100%;animation:scroll 22s linear infinite}
.ticker{background:#000;color:#fff;font:14px/1 "Courier New",monospace;padding:8px 0}
.tk-inner{animation-duration:30s}
.up{color:#3eff7a}.down{color:#ff4d4d}
@keyframes scroll{to{transform:translateX(-100%)}}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:18px 14px;max-width:1100px;margin:0 auto}
.card{background:#fff;border:4px solid #111;border-radius:14px;padding:14px;box-shadow:6px 6px 0 #111;text-align:center;min-width:0}
.card:nth-child(odd){transform:rotate(-1deg)}.card:nth-child(even){transform:rotate(1.2deg)}
.card h2{margin:0 0 8px;font-size:20px}
.card h3{margin:6px 0;color:#7a2fd6}
.art svg{width:180px;max-width:100%;height:auto}
.card button,.big,#gbForm button{background:#ff2bd6;color:#fff;border:3px solid #111;border-radius:10px;padding:8px 14px;font-weight:700;box-shadow:3px 3px 0 #111}
.card button:active,.big:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}
.big{font-size:18px;padding:10px 18px;background:#0a8f78}
.small{font-size:12px;color:#555}
.odo{display:inline-flex;gap:3px;background:#111;padding:6px;border-radius:6px;margin:8px 0}
.odo span{display:inline-block;width:24px;height:36px;line-height:36px;background:linear-gradient(#333,#000 50%,#333);color:#3eff7a;font:bold 24px "Courier New",monospace}
.construction{margin-top:10px;padding:8px;font-weight:700;font-size:13px;color:#111;background:repeating-linear-gradient(45deg,#ffe600 0 14px,#111 14px 28px);text-shadow:0 0 3px #fff,0 0 3px #fff}
#factText{min-height:4.5em;font-size:17px}
.bitz-mini svg{width:110px;height:auto}
.sec{text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(24px,6vw,38px);margin:18px 10px 10px;text-shadow:2px 2px 0 #ff2bd6}
.gallery-wrap{text-align:center;padding:0 14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:1100px;margin:0 auto 14px}
.rock{background:#fff;border:3px solid #111;border-radius:10px;padding:8px 6px;font-size:13px;font-weight:700;transition:transform .2s;min-width:0}
.rock:hover{transform:scale(1.06) rotate(-3deg)}
.rock svg{width:100%;height:auto;max-width:140px}
.rock.new{animation:pop .5s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{from{transform:scale(0) rotate(30deg)}}
.awards{padding:0 14px}
.award-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1100px;margin:0 auto}
.award{width:150px;text-align:center;font-size:12px;font-weight:700}
.award svg{width:110px;height:auto;animation:sway 3s ease-in-out infinite}
.award:nth-child(2n) svg{animation-delay:-1.5s}
@keyframes sway{50%{transform:rotate(6deg)}}
.spinners{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px;padding:24px 14px}
.spin3d{width:120px;height:120px;perspective:500px}
.cube{width:80px;height:80px;margin:20px;position:relative;transform-style:preserve-3d;animation:cube 6s linear infinite}
.cube i{position:absolute;inset:0;border:3px solid #111;background:linear-gradient(135deg,rgba(182,255,240,.9),rgba(122,47,214,.85))}
.cube i:nth-child(1){transform:translateZ(40px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(40px)}.cube i:nth-child(3){transform:rotateY(90deg) translateZ(40px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(40px)}.cube i:nth-child(5){transform:rotateX(90deg) translateZ(40px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(40px)}
@keyframes cube{to{transform:rotateX(360deg) rotateY(720deg)}}
.pet-rock{text-align:center;font-weight:700}
.pet-rock canvas{width:300px;max-width:100%;height:auto;border:4px solid #111;border-radius:10px;background:#222;display:block}
.pet-rock p{margin:6px 0 0}
.guest{max-width:700px;margin:0 auto;padding:0 14px}
#guestbook{list-style:none;padding:0;margin:0 0 10px}
#guestbook li{background:#fff;border:2px dashed #111;border-radius:8px;padding:8px 10px;margin-bottom:8px;word-wrap:break-word}
#guestbook li b{color:#7a2fd6}
#gbForm{display:flex;flex-wrap:wrap;gap:8px}
#gbForm input{flex:1 1 200px;min-width:0;padding:10px;border:3px solid #111;border-radius:10px;font:inherit}
footer{text-align:center;padding:26px 14px 0;font-size:13px}
footer p{max-width:600px;margin:14px auto 0}

#ytWrap{position:fixed;left:0;bottom:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none;z-index:0}
#muteBtn{position:fixed;left:12px;bottom:12px;z-index:60;background:#111;color:#fff;border:2px solid #3ee6c1;border-radius:18px;padding:7px 14px;font:bold 14px system-ui,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#muteBtn[hidden]{display:none}
.real-bitz-wrap{padding:0 14px 10px}
.real-bitz{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.rb{margin:0;background:#fff;border:4px solid #111;border-radius:6px;padding:10px 10px 0;box-shadow:6px 6px 0 #111;min-width:0}
.rb img{display:block;width:100%;height:auto;border:2px solid #111;background:#222}
.rb figcaption{padding:8px 4px 10px;font-weight:700;font-size:14px;text-align:center}
.rb:nth-child(3n+1){transform:rotate(-2deg)}.rb:nth-child(3n+2){transform:rotate(1.5deg)}.rb:nth-child(3n){transform:rotate(-.5deg)}
.bitz-gallery-wrap{padding:0 14px}
.bitz-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;max-width:1100px;margin:0 auto}
.bz-scene{margin:0;background:#fff;border:4px solid #111;border-radius:12px;overflow:hidden;box-shadow:5px 5px 0 #111;min-width:0}
.bz-scene svg{display:block;width:100%;height:auto}
.bz-scene figcaption{padding:8px;font-weight:700;font-size:14px;text-align:center;border-top:3px solid #111}
.bz-scene:nth-child(3n+1){transform:rotate(-1.5deg)}.bz-scene:nth-child(3n+2){transform:rotate(1deg)}
.bobble .bz-bob{animation:bobble 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes bobble{25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.lab{padding:0 14px}
.lab-intro{text-align:center;max-width:600px;margin:0 auto 12px}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;max-width:1100px;margin:0 auto}
.lab-card{display:block;background:#1f4d36;color:#fff;text-decoration:none;border:4px solid #111;border-radius:12px;padding:14px;box-shadow:5px 5px 0 #111;min-width:0}
.lab-card h3{margin:6px 0;color:#b6ff3e}
.lab-card p{margin:4px 0}.lab-card .small{color:#cde}
a.lab-card:hover,a.lab-card:focus-visible{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 #111}
.lab-card.soon{background:#555;opacity:.85}
.lab-card.soon h3{color:#ffe600}
.lab-icon{font-size:38px}
.bitz-mini svg{width:90px}

/* phones: keep Dr. Bitz (left) clear of the crystal */
@media (max-width:699px){#crystalWrap{width:min(50vw,40vh)}}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  #stage.shake,#stage.shake-hard{animation:none}
  .hero h1,.gem,.cube,.award svg,#glow,#cap,.fire,.rock.new,.bobble .bz-bob{animation:none}
  .bz-scene:nth-child(n),.rb:nth-child(n){transform:none}
  .mq-inner,.tk-inner{animation-duration:80s}
  .card:nth-child(n){transform:none}
}