:root{--lime:#CCFF00;--ink:#17150f;--paper:#f3ecdc;--u:1}
*{box-sizing:border-box;margin:0;padding:0}
html{width:100%;height:100%;overflow:hidden}
body{position:fixed;inset:0;overflow:hidden;background:#b9ab8c;font-family:'Special Elite',monospace;color:var(--ink)}
#plate{position:absolute;background:url(assets/L0_bleed_plate.webp) 0 0/100% 100% no-repeat;opacity:0;transition:opacity .3s}
#safe{position:absolute;width:2048px;height:1152px;transform-origin:0 0;opacity:0;transition:opacity .3s}
body.ready #plate,body.ready #safe{opacity:1}
.vui{opacity:0;transition:opacity .3s}
body.ready .vui{opacity:1}
#safe img{position:absolute;pointer-events:none;-webkit-user-drag:none;user-select:none}
img.l{left:0;top:0;width:2048px;height:1152px}
img.spr{pointer-events:none}
#road{position:absolute;left:-1200px;top:846px;width:4448px;height:306px;background:url(assets/L1_road.webp) 0 0/1792px 306px repeat-x}
#fences{position:absolute;left:0;top:0;width:0;height:0}
#signWrap{position:absolute;left:1700px;top:616px;width:305px;height:265px;perspective:700px}
#signFlip{position:absolute;left:0;top:0;width:305px;height:265px}
#signpost{position:absolute;left:0;top:0;width:305px}
#signtxt{position:absolute;left:84px;top:24px;width:215px;height:74px;padding-right:10px;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;font:29px/1 'Permanent Marker',cursive;color:#1b1b1b;transform:rotate(-1.5deg)}
#signtxt small{font:0.48em/1.25 'Special Elite',monospace;letter-spacing:1px}
#shadow{position:absolute;left:790px;top:958px;width:260px;height:44px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,28,15,.55),rgba(40,28,15,0))}
#rig,#tailFlick,#tailSwish,#legs,#sagWrap,#mount,#riderG,#riderBow,#riderBreath,#fx{position:absolute;left:0;top:0;width:2048px;height:1152px;pointer-events:none}
#legs{transform-origin:899px 983px}
#legBack{transform-origin:853px 907px}
#legFront{transform-origin:948px 909px}
#tailFlick,#tailSwish{transform-origin:824px 771px}
#riderG,#riderBow,#riderBreath{transform-origin:920px 692px}
#stick{left:1045px;top:600px;width:444px}
#odo{position:absolute;left:846px;top:846px;width:96px;padding:4px 5px;background:#111;border:3px solid #bbb;border-radius:6px;font:bold 20px/1 'Special Elite',monospace;color:var(--lime);text-align:center;box-shadow:inset 0 0 8px #000;pointer-events:none}
#odo small{display:block;font-size:10px;color:#ddd;letter-spacing:2px;margin-bottom:2px}
#odoVal{display:inline-flex}
.digit{position:relative;display:inline-block;width:13px;height:20px;overflow:hidden;vertical-align:top}
.digit span{position:absolute;left:0;top:0;width:13px;height:20px;line-height:20px}
#potClip{position:absolute;left:694px;top:400px;width:104px;height:290px;overflow:hidden;pointer-events:none}
#palm{position:absolute;left:0;top:112px;width:104px}
#soil{left:709px;top:661px;width:64px;transform-origin:50% 100%}
#crownWrap{position:absolute;left:784px;top:270px;width:138px;height:134px;transform-origin:50% 100%;pointer-events:none}
#crownFlutter{position:absolute;left:0;top:0;width:138px;height:134px}
#crown{position:absolute;left:0;top:0;width:138px;transform:rotate(-9deg)}
.fin{display:none}
#spoon{left:612px;top:456px;width:130px}
#bubble{position:absolute;left:905px;top:262px;padding:16px 22px 26px;background:var(--paper);font:28px/1.1 'Permanent Marker',cursive;clip-path:polygon(2% 8%,96% 0,100% 88%,20% 94%,8% 118%,10% 92%,0 86%);transform:rotate(-3deg);filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25));pointer-events:none}
#ctaWrap{position:absolute;left:1488px;top:640px;width:0;height:0;perspective:800px}
#ctaHover{position:absolute;left:0;top:0;width:0;height:0;transition:transform .3s}
#ctaPend{position:absolute;left:0;top:0;width:0;height:0;animation:pend 3.2s ease-in-out infinite}
@keyframes pend{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}100%{transform:rotate(-3deg)}}
#ctaKick{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(3deg)}
#ctaFlip{position:absolute;left:0;top:0;width:0;height:0;transform-origin:2px 189px}
#string{position:absolute;left:-1.5px;top:0;width:3px;height:112px;background:#e9dfc6}
#cta{position:absolute;left:-148px;top:108px;width:300px;padding:22px 18px 18px;border:0;cursor:pointer;font-family:'Special Elite',monospace;background:linear-gradient(135deg,#d2a86f,#b98b52 60%,#a77a44);border-radius:6px 10px 8px 12px;box-shadow:0 10px 18px rgba(0,0,0,.35),inset 0 0 0 3px rgba(0,0,0,.08);text-align:center;clip-path:polygon(0 4%,6% 0,97% 2%,100% 94%,94% 100%,3% 97%)}
#cta:before{content:'';position:absolute;left:50%;top:-14px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#3a2a18}
#cta b{display:block;font:44px/0.95 'Permanent Marker',cursive;color:var(--ink);letter-spacing:1px}
#cta i{display:inline-block;margin-top:8px;font:bold 15px 'Special Elite',monospace;background:var(--lime);padding:3px 8px;transform:rotate(-2deg);font-style:normal;color:var(--ink)}
#ctaWrap:has(#cta:hover) #ctaHover{transform:rotate(2.5deg)}
#cta:focus-visible,#sound:focus-visible,.plank:focus-visible{outline:3px solid var(--lime);outline-offset:3px;filter:drop-shadow(0 0 2px var(--lime)) drop-shadow(0 0 6px var(--lime))}
#badge{position:fixed;left:calc(24px*var(--u));top:calc(20px*var(--u));display:flex;align-items:center;gap:calc(10px*var(--u));background:var(--lime);padding:calc(7px*var(--u)) calc(14px*var(--u)) calc(7px*var(--u)) calc(10px*var(--u));font:bold calc(13px*var(--u))/1.2 'Special Elite',monospace;letter-spacing:.5px;transform:rotate(-1.5deg);box-shadow:calc(3px*var(--u)) calc(3px*var(--u)) 0 var(--ink);z-index:10}
#badge img{height:calc(22px*var(--u));width:auto;display:block}
#sound{position:fixed;left:calc(24px*var(--u));top:calc(66px*var(--u));font:calc(12px*var(--u))/1.2 'Special Elite',monospace;background:var(--paper);padding:calc(4px*var(--u)) calc(8px*var(--u));transform:rotate(1deg);cursor:pointer;border:0;box-shadow:2px 2px 0 rgba(0,0,0,.25);z-index:10}
#planks{position:fixed;right:calc(26px*var(--u));top:0;width:calc(300px*var(--u));height:calc(250px*var(--u));z-index:10}
#planks .post{position:absolute;right:calc(130px*var(--u));top:calc(-10px*var(--u));width:calc(18px*var(--u));height:calc(260px*var(--u));background:linear-gradient(90deg,#6f5a44,#8a7156,#5e4b37)}
.plank{position:absolute;right:0;height:calc(52px*var(--u));display:flex;align-items:center;padding:0 calc(40px*var(--u)) 0 calc(20px*var(--u));font:calc(22px*var(--u))/1 'Permanent Marker',cursive;color:#f4efe2;background:linear-gradient(180deg,#8f7759,#6d573f);clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%);text-decoration:none;box-shadow:0 4px 0 rgba(0,0,0,.25);white-space:nowrap;transition:transform .25s;cursor:pointer;border:0;font-family:'Permanent Marker',cursive}
.plank.buy{top:calc(22px*var(--u));right:calc(10px*var(--u));background:var(--lime);color:var(--ink);font-size:calc(26px*var(--u));height:calc(60px*var(--u));transform:rotate(-3deg)}
.plank.x{top:calc(96px*var(--u));right:calc(48px*var(--u));transform:rotate(2.5deg)}
.plank.ca{top:calc(160px*var(--u));right:calc(24px*var(--u));transform:rotate(-1.5deg);font:calc(15px*var(--u))/1 'Special Elite',monospace;color:#f4efe2}
.plank.buy:hover{transform:rotate(0deg) translate(-3px,-3px)}
.plank.x:hover,.plank.ca:hover{transform:rotate(0deg) translate(-3px,-3px)}
.plank .chip{background:var(--lime);color:var(--ink);padding:calc(2px*var(--u)) calc(6px*var(--u));margin-left:calc(10px*var(--u));font-weight:bold}
#title{position:fixed;left:calc(26px*var(--u));bottom:calc(24px*var(--u));width:calc(420px*var(--u));padding:calc(20px*var(--u)) calc(22px*var(--u)) calc(18px*var(--u));background:linear-gradient(160deg,#d6ae78,#b88a52);transform:rotate(-2.5deg);clip-path:polygon(1% 3%,98% 0,100% 96%,3% 100%);box-shadow:0 12px 24px rgba(0,0,0,.4);z-index:10}
#title h1{font:calc(74px*var(--u))/0.86 'Anton',sans-serif;letter-spacing:1px;text-transform:uppercase}
#title h1 span{display:inline-block;background:var(--paper);padding:calc(2px*var(--u)) calc(8px*var(--u));margin:calc(2px*var(--u)) 0;box-shadow:2px 3px 0 rgba(0,0,0,.25)}
#title h1 span:nth-of-type(1){transform:rotate(-2deg)}
#title h1 span:nth-of-type(2){transform:rotate(1.5deg)}
#title .tk{position:absolute;right:calc(18px*var(--u));top:calc(18px*var(--u));background:var(--lime);font:bold calc(22px*var(--u))/1 'Special Elite',monospace;padding:calc(4px*var(--u)) calc(10px*var(--u));transform:rotate(6deg);border:2px dashed var(--ink)}
#title p{margin-top:calc(10px*var(--u));font:calc(22px*var(--u))/1.2 'Permanent Marker',cursive}
.crumb{position:absolute;background:#4a341e;border-radius:50%;pointer-events:none}
.dust{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(190,168,128,.6),rgba(190,168,128,0));pointer-events:none}
#reset{position:fixed;right:calc(10px*var(--u));bottom:calc(8px*var(--u));font:12px 'Special Elite',monospace;color:rgba(23,21,15,.55);z-index:20}
@keyframes breath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
#riderBreath{animation:breath 3s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
#ctaPend{animation:none}
#riderBreath{animation:none}
}