:root{
  --pink:#FF5FA2; --cyan:#3EC6FF; --lemon:#FFD93B; --grape:#7A4DFF; --lime:#8BE04E;
  --ink:#1E1B3A; --paper:#FFF8EC;
  --trayH: clamp(150px,26vh,224px);--penH: calc(var(--trayH) * .60);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#3EC6FF;font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
#sky{position:fixed;inset:0;z-index:0;background:#7fdcff url(assets/sky_backdrop.webp) center 18%/cover no-repeat}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1}
.screen{position:fixed;inset:0;display:none;z-index:2}
.screen.show{display:block}

/* ---------- shared lettering ---------- */
.shoutText,.big{font-family:'Titan One',sans-serif;letter-spacing:.02em}
.big{display:inline-block;padding:.45em 1.3em .5em;border-radius:999px;font-size:clamp(20px,3.4vmin,34px);
  border:5px solid var(--ink);box-shadow:0 7px 0 var(--ink);transition:transform .12s cubic-bezier(.3,1.8,.5,1)}
.big.lemon{background:var(--lemon)}
.big:active,.press{transform:translateY(5px) scale(1.06,.9);box-shadow:0 2px 0 var(--ink)}
.small{font-family:'Gochi Hand',cursive;font-size:clamp(16px,2.4vmin,22px);text-decoration:underline;margin-top:10px}

@keyframes popIn{0%{transform:scale(.2) rotate(-8deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}80%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.pop{animation:popIn .55s cubic-bezier(.3,1.5,.5,1) both}

/* ---------- title ---------- */
#title{display:none;flex-direction:column;align-items:center;justify-content:safe center;gap:2.2vmin;padding:3vmin 3vmin max(3vmin,18px);overflow-y:auto;
  background:radial-gradient(ellipse at center,rgba(255,248,236,.0) 30%,rgba(30,27,58,.18) 100%)}
#title.show{display:flex}
#title .logo{width:min(80vw,62vmin*1.6,720px);max-height:min(42vh,calc(100vh - 500px));min-height:90px;object-fit:contain;animation:popIn .7s cubic-bezier(.3,1.5,.5,1) both, wobble 3s 1s ease-in-out infinite;filter:drop-shadow(0 8px 0 rgba(30,27,58,.25))}
.howto{background:var(--paper);border:4px solid var(--ink);border-radius:22px;padding:1.4vmin 2.6vmin;box-shadow:0 6px 0 var(--ink);
  transform:rotate(-1.5deg);max-width:min(92vw,560px);animation-delay:.2s}
.step{display:flex;align-items:center;gap:12px;font-family:'Gochi Hand',cursive;font-size:clamp(17px,2.9vmin,26px);line-height:1.25;padding:3px 0}
.step b{font-family:'Titan One';font-weight:400;flex:none;width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:#fff;border:3px solid var(--ink);font-size:.8em}
.step:nth-child(2) b{background:var(--cyan)} .step:nth-child(3) b{background:var(--lime)} .step:nth-child(4) b{background:var(--grape)}
.step em{font-style:normal;color:var(--pink)}
#btnStart{animation:popIn .6s .35s cubic-bezier(.3,1.5,.5,1) both}
.titlebean{position:absolute;right:4vw;bottom:2vh;height:min(30vh,240px);animation:popIn .6s .5s both;pointer-events:none}
@media (max-aspect-ratio:1/1){.titlebean{height:16vh;right:2vw;bottom:1vh}}

/* ---------- draw ---------- */
#draw{background:transparent}
#sheet{position:absolute;left:clamp(12px,6.5vw,150px);right:clamp(12px,6.5vw,150px);top:clamp(14px,4.4vh,40px);bottom:calc(var(--trayH) - 16px);
  display:flex;flex-direction:column;border-radius:5px;transform:rotate(-.5deg);transform-origin:50% 40%;
  background:var(--paper) url(assets/sketchbook_page.webp) left top/cover no-repeat;
  box-shadow:0 26px 46px rgba(28,16,64,.42),0 6px 12px rgba(28,16,64,.3),inset 0 0 0 1px rgba(120,95,60,.25)}
#drawHead{position:relative;pointer-events:none;z-index:3;padding:clamp(50px,7.8vh,74px) clamp(14px,3vw,44px) 4px max(9.5%,58px);flex:none}
#prompt{font-family:'Gochi Hand',cursive;font-size:clamp(27px,5.4vmin,60px);line-height:1.02;transform:rotate(-1.4deg);transform-origin:left;max-width:70%;
  text-shadow:0 1px 0 rgba(255,255,255,.7)}
#chips{display:flex;flex-wrap:wrap;gap:clamp(7px,1.5vw,18px);margin-top:clamp(6px,1.6vh,16px);pointer-events:auto}
.chip{font-family:'Gochi Hand',cursive;font-size:clamp(16px,2.8vmin,27px);transition:transform .16s cubic-bezier(.3,1.8,.5,1)}
.chip.note{position:relative;background:#fff7c2;border:3px solid var(--ink);border-radius:4px;padding:.4em .8em .46em;
  box-shadow:3px 4px 0 rgba(30,27,58,.55);transform:rotate(-2deg);line-height:1.02;max-width:22ch}
.chip.note:nth-child(1){background:#fff6bd}.chip.note:nth-child(2){background:#dff3ff}
.chip.note:nth-child(3){background:#e6fbcf}.chip.note:nth-child(4){background:#ffe0ee}
.chip.note::before{content:'';position:absolute;left:50%;top:-9px;width:46%;height:14px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,225,120,.92);border-left:1px solid rgba(150,120,40,.35);box-shadow:0 1px 2px rgba(30,27,58,.15)}
.chip.note:nth-child(2)::before{transform:translateX(-50%) rotate(3.5deg)}
.chip.note:hover{transform:rotate(0deg) translateY(-3px) scale(1.05)}
.chip.wig{animation:popIn .4s cubic-bezier(.3,1.6,.5,1)}
#moveRow{display:flex;align-items:center;gap:8px;margin-top:clamp(5px,1.2vh,12px);pointer-events:auto}
.chipLbl{font-family:'Gochi Hand',cursive;font-size:clamp(14px,2.2vmin,21px);opacity:.75}
.chip.move{font-family:'Titan One';font-size:clamp(12px,2vmin,18px);background:var(--lemon);border:3px solid var(--ink);border-radius:999px;
  padding:.18em .9em .22em;box-shadow:0 3px 0 var(--ink);letter-spacing:.04em}
#padWrap{position:absolute;inset:0;margin:0;z-index:1}
#padWrap::before{content:'';position:absolute;inset:clamp(140px,24vh,220px) clamp(12px,2.2vw,36px) clamp(10px,2vh,26px);border:4px dashed rgba(30,27,58,.30);border-radius:16px;pointer-events:none}
#padWrap::after{content:'your obstacle goes in here';position:absolute;left:50%;bottom:clamp(22px,3.4vh,44px);transform:translateX(-50%);padding:2px 12px 4px;background:rgba(255,248,236,.9);
  font-family:'Gochi Hand',cursive;font-size:clamp(16px,2.6vmin,26px);color:rgba(30,27,58,.66);pointer-events:none;border-radius:4px}
#pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;border-radius:10px}
#pad.hot{cursor:none}
#drawHint{position:absolute;left:50%;bottom:3.4%;transform:translateX(-50%);font-family:'Gochi Hand',cursive;font-size:clamp(15px,2.4vmin,22px);
  opacity:.42;pointer-events:none;white-space:nowrap;transition:opacity .3s}
#nib{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--nibc,#FF5FA2);
  box-shadow:0 0 0 2px rgba(30,27,58,.75),0 0 10px rgba(30,27,58,.28);pointer-events:none;opacity:0;z-index:6}
#nib.live{opacity:1}
@keyframes nibShake{from{scale:1}to{scale:1.15}}
#timer{position:absolute;right:clamp(10px,2.6vw,36px);top:clamp(6px,1.8vh,22px);width:min(19vmin,152px);aspect-ratio:1;
  background:url(assets/cookie_timer.webp) center/contain no-repeat;display:grid;place-items:center;z-index:4;pointer-events:none;transition:transform .3s}
#timerNum{font-family:'Titan One';font-size:min(7.6vmin,64px);color:var(--ink);transform:translateY(2%)}
#timer.hurry{animation:shake .25s infinite}
#timer.hurry #timerNum{color:#e8306e}
@keyframes shake{0%{translate:0 0;rotate:0deg}25%{translate:-3px 1px;rotate:-6deg}50%{translate:2px -2px;rotate:4deg}75%{translate:-1px 2px;rotate:-3deg}100%{translate:0 0}}
.tape{position:absolute;width:clamp(86px,14vmin,150px);height:clamp(32px,5.4vmin,56px);z-index:5;pointer-events:none;opacity:1;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 4px,rgba(255,255,255,0) 4px 9px),#ffd772;
  box-shadow:0 4px 9px rgba(30,27,58,.28);border-left:2px solid rgba(150,113,24,.4);border-right:2px solid rgba(150,113,24,.4);
  clip-path:polygon(3% 0,97% 4%,100% 96%,0 100%)}
#tapeA{left:calc(-1 * clamp(18px,3vmin,32px));top:clamp(-6px,1vh,10px);transform:rotate(-38deg)}
#tapeB{right:clamp(-4px,1vw,14px);bottom:clamp(24px,6vh,64px);transform:rotate(31deg)}
#tapeC{right:clamp(-16px,1vw,10px);top:clamp(-8px,0.6vh,8px);transform:rotate(36deg)}
#tapeD{left:clamp(6px,4vw,60px);bottom:clamp(30px,7vh,74px);transform:rotate(-27deg)}
#grain{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.78;mix-blend-mode:multiply;
  background:url(assets/paper_grain.png) 0 0/162px 162px repeat;border-radius:5px}
#vignette{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:5px;
  background:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.18) 0%,rgba(120,86,40,0) 46%,rgba(104,70,34,.22) 100%)}

/* the physical tray of pens */
#tray{position:absolute;left:0;right:0;bottom:0;height:var(--trayH);z-index:8}
#tray::before{content:'';position:absolute;inset:0;border-radius:30px 30px 0 0;
  background:linear-gradient(#fff7da 0%,#ffe9a6 34%,#f6d276 76%,#e9bd5c 100%);
  border-top:7px solid var(--ink);box-shadow:0 -8px 24px rgba(30,27,58,.34),inset 0 12px 18px rgba(255,255,255,.6)}
.trayGroove{position:absolute;left:2%;right:2%;top:calc(var(--trayH) * .30);bottom:9%;border-radius:24px;
  background:linear-gradient(#e6b64f,#f3ce86 60%,#ffe9b8);box-shadow:inset 0 6px 12px rgba(120,80,20,.35),inset 0 -4px 8px rgba(255,255,255,.5)}
#tools{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.6vw,44px);
  padding:6px clamp(8px,2vw,26px) calc(8px + env(safe-area-inset-bottom))}
.tgroup{display:flex;align-items:center;gap:clamp(1px,1.1vw,14px)}
.markers{gap:clamp(-6px,.4vw,6px)}
.tool{position:relative;transition:transform .22s cubic-bezier(.3,1.8,.5,1)}
.tool img{display:block;height:100%;width:auto;filter:drop-shadow(0 6px 5px rgba(80,52,10,.32));pointer-events:none}
.marker{height:var(--penH);transform:rotate(var(--rot,-8deg));margin:0 clamp(-8px,.2vw,2px)}
.marker:nth-child(1){--rot:-14deg}.marker:nth-child(2){--rot:-7deg}.marker:nth-child(3){--rot:-16deg}
.marker:nth-child(4){--rot:-9deg}.marker:nth-child(5){--rot:-13deg}
.marker .mcap{position:absolute;left:23%;top:79%;width:39%;height:31%;transform:translate(-50%,-50%) rotate(-48deg);
  border-radius:40% 26% 26% 34%;background:linear-gradient(148deg,color-mix(in srgb,var(--capc) 46%,#fff) 0%,var(--capc) 34%,color-mix(in srgb,var(--capc) 55%,#000) 100%);
  box-shadow:inset 0 0 0 3.5px rgba(30,27,58,.92),0 3px 4px rgba(30,27,58,.4);transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.marker .mcap::after{content:'';position:absolute;left:52%;top:8%;width:38%;height:26%;border-radius:40%;background:rgba(255,255,255,.55);transform:rotate(-6deg)}
.marker .mcap::before{content:'';position:absolute;right:-7%;top:34%;width:22%;height:34%;border-radius:3px;background:var(--capc);
  box-shadow:inset 0 0 0 3px rgba(30,27,58,.9)}
.marker.sel{transform:translateY(-32%) rotate(-26deg) scale(1.17);z-index:3}
.marker.sel .mcap{transform:translate(-152%,8%) rotate(26deg) scale(.92)}
.marker.sel img{filter:drop-shadow(0 14px 10px rgba(80,52,10,.3))}
.marker:active{transform:translateY(-6%) scale(.94,1.06)}
.other .tool{height:calc(var(--trayH) * .40)}
#done{height:calc(var(--trayH) * .46)!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
#done img{height:78%}
#done span{font-family:'Titan One';font-size:clamp(12px,2.1vmin,20px);margin-top:-6px;text-shadow:0 2px 0 #fff;letter-spacing:.03em}
.thick{display:flex;flex-direction:column;gap:clamp(4px,1vh,9px);align-self:center}
.tw{width:clamp(44px,7vmin,64px);height:clamp(30px,4.6vmin,42px);border:3px solid var(--ink);border-radius:12px;background:#fffdf6;
  display:grid;place-items:center;box-shadow:0 3px 0 var(--ink);transition:transform .15s}
.tw i{display:block;border-radius:9px;background:var(--ink);width:70%;height:5px}
.tw[data-w=fat] i{height:13px}
.tw.sel{background:var(--lemon);transform:translateY(-2px) rotate(-2deg)}
.other .tool.sel{transform:translateY(-14px) rotate(-6deg) scale(1.1)}
@media (max-aspect-ratio:1/1){
  :root{--trayH:clamp(178px,25vh,232px);--penH:min(calc(var(--trayH) * .52),calc((100vw - 34px) / 5 * .95))}
  #tray::before{border-radius:20px 20px 0 0;border-top-width:6px}
  #tools{flex-direction:column;justify-content:center;gap:clamp(2px,1.4vh,12px);padding-top:10px}
  .other .tool{height:calc(var(--trayH) * .27)}
  #done{height:calc(var(--trayH) * .30)!important}
  #prompt{font-size:clamp(22px,6.4vmin,42px);max-width:66%}
  #chips{gap:8px 9px;margin-top:8px}
  .chip.note{font-size:clamp(13px,3.7vmin,19px);padding:.32em .58em .38em}
  #drawHead{padding:clamp(40px,6vh,56px) 12px 2px max(9%,34px)}
  #timer{width:min(22vw,104px);top:clamp(40px,6.2vh,58px);bottom:auto;right:6px}
  #timerNum{font-size:min(9.4vw,48px)}
  #tapeA{width:76px;height:30px;left:-16px;top:2px}
  #tapeB{width:70px;height:28px;right:-6px;bottom:auto;top:34%}
  #moveRow{margin-top:6px}
}

/* tear transformation */
#draw.tearing #tray,#draw.tearing #drawHead,#draw.tearing #timer,#draw.tearing #drawHint,#draw.tearing #grain,#draw.tearing #vignette{opacity:0;transition:opacity .2s}
#draw.tearing #sheet{animation:tear .95s cubic-bezier(.5,0,.7,.4) forwards}
@keyframes tear{
  0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:rotate(-.5deg) scale(1);opacity:1}
  12%{clip-path:polygon(0 9%,6% 7.6%,12% 9.4%,19% 7.9%,26% 9.6%,33% 8%,41% 9.5%,49% 7.7%,57% 9.3%,64% 7.9%,72% 9.6%,80% 8%,87% 9.4%,94% 7.8%,100% 9.2%,100% 100%,0 100%);transform:rotate(-.5deg) scale(1)}
  35%{clip-path:polygon(0 9%,6% 7.6%,12% 9.4%,19% 7.9%,26% 9.6%,33% 8%,41% 9.5%,49% 7.7%,57% 9.3%,64% 7.9%,72% 9.6%,80% 8%,87% 9.4%,94% 7.8%,100% 9.2%,100% 100%,0 100%);transform:translateY(4%) rotate(-3deg) scale(.96)}
  100%{clip-path:polygon(0 9%,6% 7.6%,12% 9.4%,19% 7.9%,26% 9.6%,33% 8%,41% 9.5%,49% 7.7%,57% 9.3%,64% 7.9%,72% 9.6%,80% 8%,87% 9.4%,94% 7.8%,100% 9.2%,100% 100%,0 100%);transform:translateY(-6%) rotate(8deg) scale(.08);opacity:0}
}

/* ---------- HUD ---------- */
#hud{pointer-events:none}
.pill{position:absolute;font-family:'Titan One';font-size:clamp(16px,3vmin,28px);background:var(--paper);border:4px solid var(--ink);border-radius:999px;
  padding:.1em .8em .15em;box-shadow:0 5px 0 var(--ink);white-space:nowrap}
#qual{left:max(14px,env(safe-area-inset-left));top:14px;transform:rotate(-2deg)}
#qualN{display:inline-block;color:var(--pink)}
#hudR{position:absolute;right:max(14px,env(safe-area-inset-right));top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
#raceTime{position:static;transform:rotate(2deg)}
#koTag{display:flex;align-items:center;gap:6px;font-family:'Gochi Hand',cursive;font-size:clamp(15px,2.5vmin,22px);background:#fff;border:3px solid var(--ink);
  border-radius:14px;padding:2px 10px 2px 4px;transform:rotate(-2deg);box-shadow:0 3px 0 var(--ink)}
#koTag img{width:clamp(26px,4.5vmin,40px)}
#koN{font-family:'Titan One';font-weight:400;display:inline-block;color:var(--pink)}
.bump{animation:popIn .45s cubic-bezier(.3,1.8,.5,1)}
#hints{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:clamp(13px,2vmin,17px);font-weight:700;
  background:rgba(255,248,236,.8);border-radius:999px;padding:2px 14px;white-space:nowrap;border:2px solid rgba(30,27,58,.5)}
#touch{display:none}
body.touch #touch{display:block}
body.touch #hints{display:none}
#stick::after{content:'drag to run';position:absolute;left:50%;top:100%;transform:translateX(-50%);font-family:'Gochi Hand',cursive;font-size:14px;white-space:nowrap;color:var(--ink);text-shadow:0 0 4px #fff}
#stick{position:absolute;z-index:3;left:max(22px,env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom));width:min(34vmin,150px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,248,236,.55);border:4px solid rgba(30,27,58,.6);pointer-events:auto;touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;margin:-22% 0 0 -22%;border-radius:50%;background:var(--pink);border:4px solid var(--ink)}
.tbtn{position:absolute;z-index:3;pointer-events:auto;touch-action:none;font-family:'Titan One';border:4px solid var(--ink);border-radius:50%;box-shadow:0 5px 0 var(--ink);display:grid;place-items:center}
#tJump{right:max(22px,env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));width:min(24vmin,104px);aspect-ratio:1;background:var(--lemon);font-size:min(4.4vmin,20px)}
#tDive{right:calc(max(22px,env(safe-area-inset-right)) + min(24vmin,104px) + 12px);bottom:calc(20px + env(safe-area-inset-bottom));width:min(17vmin,76px);aspect-ratio:1;background:var(--cyan);font-size:min(3.4vmin,15px)}
.tbtn.on{transform:translateY(4px) scale(1.08,.9);box-shadow:0 1px 0 var(--ink)}

/* ---------- shouts ---------- */
#shout{position:fixed;left:0;right:0;top:34%;text-align:center;pointer-events:none;z-index:20}
#shout .s{display:inline-block;font-family:'Titan One';font-size:clamp(64px,19vmin,190px);line-height:1;color:var(--lemon);
  -webkit-text-stroke:min(1.6vmin,12px) var(--ink);paint-order:stroke fill;text-shadow:0 min(1.6vmin,12px) 0 var(--ink);animation:balloon .7s cubic-bezier(.3,1.6,.5,1) both}
#shout .s.long{font-size:clamp(40px,12vmin,140px)}
#shout .s.grape{color:var(--grape);-webkit-text-stroke-color:var(--pink);text-shadow:0 min(1.6vmin,12px) 0 #b0306a}
#shout .s.go{color:var(--lime)}
#shout .s.out{animation:balloonOut .35s ease-in both}
@keyframes balloon{0%{transform:scale(.1) rotate(-12deg);opacity:0}55%{transform:scale(1.2) rotate(4deg);opacity:1}75%{transform:scale(.92) rotate(-3deg)}100%{transform:scale(1) rotate(-3deg)}}
@keyframes balloonOut{to{transform:scale(1.5) rotate(-3deg);opacity:0}}
#banner{position:fixed;left:50%;top:22%;max-width:92vw;text-align:center;transform:translateX(-50%);pointer-events:none;z-index:19;font-family:'Gochi Hand',cursive;font-size:clamp(20px,4vmin,38px);
  background:#fff;border:3px solid var(--ink);border-radius:14px;padding:2px 16px;box-shadow:0 4px 0 var(--ink);display:none}
#banner.show{display:block;animation:popIn .5s cubic-bezier(.3,1.6,.5,1) both}

/* ---------- results ---------- */
#results{background:rgba(30,27,58,.25);display:none;place-items:center;overflow:auto}
#results.show{display:grid}
#card{position:relative;width:min(92vw,620px);margin:3vh auto;padding:clamp(18px,4vmin,40px) clamp(16px,4vmin,40px) clamp(22px,4vmin,36px) clamp(40px,8vmin,80px);
  background:var(--paper) repeating-linear-gradient(transparent 0 27px,#bfdcf5 27px 29px);
  clip-path:polygon(0 2.5%,4% 0.6%,9% 2.2%,15% 0.4%,22% 2%,29% 0.5%,36% 2.4%,43% 0.7%,51% 2.1%,58% 0.3%,66% 2.3%,73% 0.6%,81% 2.2%,88% 0.5%,95% 2.1%,100% 0.8%,100% 100%,0 100%);
  text-align:center;animation:popIn .6s cubic-bezier(.3,1.5,.5,1) both;transform:rotate(-1deg);filter:drop-shadow(0 8px 0 rgba(30,27,58,.3))}
#card::before{content:'';position:absolute;left:clamp(26px,6vmin,62px);top:0;bottom:0;width:3px;background:#f07a8c}
#resTitle{font-size:clamp(40px,10vmin,84px);line-height:1.05;color:var(--lemon);-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);transform:rotate(-3deg)}
#resTitle.grape{color:var(--grape);-webkit-text-stroke-color:var(--pink);text-shadow:0 6px 0 #b0306a}
#resPlace{font-family:'Titan One';font-size:clamp(22px,4.5vmin,36px);margin-top:6px}
#resShow{font-weight:800;font-size:clamp(14px,2.6vmin,19px);margin-top:4px;opacity:.85}#resShow:empty{display:none}
#resStats{font-family:'Gochi Hand',cursive;font-size:clamp(17px,3vmin,24px);margin:2px 0 8px}
#polaroid{display:inline-flex;flex-direction:column;align-items:center;background:#fff;padding:10px 10px 4px;box-shadow:0 6px 16px rgba(30,27,58,.3);transform:rotate(3deg);border:1px solid #ddd;margin:4px 0 14px}
#polImg{display:block;width:clamp(120px,26vmin,220px);height:clamp(120px,26vmin,220px);object-fit:contain;background:var(--paper)}
#polCap{max-width:clamp(120px,26vmin,220px);line-height:1.1;font-family:'Gochi Hand',cursive;font-size:clamp(15px,2.6vmin,20px);padding:4px 0}
.resBtns{display:flex;flex-direction:column;align-items:center}

#snd{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;width:42px;height:42px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);font-size:20px;font-weight:800;box-shadow:0 3px 0 var(--ink)}
#snd.off{opacity:.55;text-decoration:line-through}
body.touch.racing #snd{bottom:auto;top:calc(14px + 7vmin + 80px)}
body.drawing #snd{bottom:calc(10px + env(safe-area-inset-bottom));left:10px;top:auto;right:auto;width:38px;height:38px;font-size:17px}

/* ---------- title buttons + lobby ---------- */
.titleBtns{display:flex;flex-direction:column;align-items:center;gap:6px}
.titleSub{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px;max-width:92vw}
#btnRandom{animation:popIn .6s .35s cubic-bezier(.3,1.5,.5,1) both}
#lobby{place-items:center;background:rgba(30,27,58,.28)}
#lobby.show{display:grid}
#lobbyCard{width:min(92vw,640px);max-height:92vh;overflow:auto;padding:clamp(14px,3vmin,30px) clamp(16px,3.4vmin,34px);
  text-align:center;background:var(--paper) repeating-linear-gradient(transparent 0 27px,#bfdcf5 27px 29px);
  border-radius:10px;box-shadow:0 18px 40px rgba(20,10,50,.4);transform:rotate(-.7deg);animation:popIn .5s cubic-bezier(.3,1.5,.5,1) both}
#lobbyLogo{width:min(66%,420px);margin:-4% auto 0;display:block}
#lobbyShout{font-size:clamp(26px,6vmin,52px);color:var(--lemon);-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
#lobbySeats{display:flex;flex-wrap:wrap;gap:clamp(6px,1.6vmin,14px);justify-content:center;margin:clamp(8px,2vh,18px) 0}
.seat{display:flex;flex-direction:column;align-items:center;gap:2px;width:clamp(64px,14vmin,96px);font-family:'Gochi Hand',cursive;font-size:clamp(13px,2.2vmin,18px)}
#lobbySeats .cap{width:clamp(40px,9vmin,64px);aspect-ratio:1;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 3px 0 rgba(30,27,58,.25))}
#lobbySeats .empty{opacity:.35}
#lobbyNote{font-family:'Gochi Hand',cursive;font-size:clamp(16px,2.8vmin,24px);margin:4px 0 10px}
#lobbyLink{font-family:'Gochi Hand',cursive;font-size:clamp(12px,2vmin,17px);word-break:break-all;background:#fff;border:3px dashed rgba(30,27,58,.4);
  border-radius:10px;padding:6px 10px;margin-bottom:10px;cursor:pointer}
#lobbyLeave{margin-bottom:4px;opacity:.8}
#lobbyBtns{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin:2px 0 6px}
#lobbyBtns.show{display:flex;animation:popIn .4s cubic-bezier(.3,1.6,.5,1) both}
#lobbyStart{padding:.4em 1.4em .45em}
#lobbyStart[disabled]{opacity:.45;filter:grayscale(.5);pointer-events:none}
.small.solid{text-decoration:none;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:.2em .9em .26em;
  box-shadow:0 3px 0 var(--ink);transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.small.solid:active{transform:translateY(3px) scale(1.04,.94);box-shadow:0 1px 0 var(--ink)}
.small.solid[disabled]{opacity:.4;filter:grayscale(.6);pointer-events:none}
#waitNote{position:absolute;left:50%;bottom:calc(var(--trayH) + 8px);transform:translateX(-50%);display:none;z-index:9;
  font-family:'Gochi Hand',cursive;font-size:clamp(16px,2.6vmin,24px);background:var(--lemon);border:3px solid var(--ink);border-radius:14px;
  padding:4px 14px;box-shadow:0 4px 0 var(--ink);white-space:nowrap}
#waitNote.show{display:block;animation:popIn .4s cubic-bezier(.3,1.6,.5,1) both}

/* short screens (a phone held sideways): a slimmer tray and a one-line header,
   so the open page keeps most of the height for drawing */
@media (max-height:560px) and (min-aspect-ratio:1/1){
  :root{--trayH:clamp(78px,23vh,112px);--penH:calc(var(--trayH) * .66)}
  #sheet{top:8px;bottom:calc(var(--trayH) - 10px);left:clamp(10px,5vw,80px);right:clamp(10px,5vw,80px)}
  #drawHead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:clamp(26px,8vh,40px) calc(min(17vh,96px) + 14px) 2px max(8%,46px)}
  #prompt{flex:1 0 100%;max-width:none;font-size:clamp(17px,5.6vh,28px)}
  #chips{margin-top:0;gap:6px 8px}
  .chip.note{font-size:clamp(12px,3.6vh,17px);padding:.22em .5em .26em;border-width:2px;box-shadow:2px 3px 0 rgba(30,27,58,.55)}
  .chip.note::before{height:9px;top:-6px}
  #moveRow{margin-top:0}
  .chipLbl{font-size:clamp(11px,3.2vh,15px)}
  .chip.move{font-size:clamp(10px,3vh,14px);border-width:2px}
  #padWrap::before{display:none}
  #padWrap::after{display:none}
  #timer{width:min(17vh,96px);top:4px;right:6px}
  #timerNum{font-size:min(7vh,40px)}
  #tray::before{border-top-width:4px;border-radius:18px 18px 0 0}
  .other .tool{height:calc(var(--trayH) * .5)}
  #done{height:calc(var(--trayH) * .62)!important}
  .tw{width:clamp(34px,6vh,48px);height:clamp(20px,4.4vh,30px);border-width:2px}
  .tw i{height:3px}.tw[data-w=fat] i{height:8px}
  .thick{gap:4px}
  #tapeA,#tapeB{display:none}
  #waitNote{bottom:calc(var(--trayH) + 4px)}
}

/* ---------- points ---------- */
#resStats{display:flex;flex-direction:column;gap:2px;max-width:440px;margin:4px auto 8px;text-align:left}
.srow{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.srow b{font-family:'Titan One';font-weight:400;white-space:nowrap}
.srow.lost{color:#b0306a} .srow.lost b{text-decoration:line-through}
.srow.me{color:var(--pink)}
.scaught,.ssafe{font-family:'Titan One';text-align:center;margin-top:4px;font-size:clamp(16px,2.8vmin,22px)}
.scaught{color:#b0306a} .ssafe{color:#3d9a1e}
#standings{max-width:360px;margin:0 auto 10px;font-family:'Gochi Hand',cursive;font-size:clamp(16px,2.6vmin,22px)}

#lobbyLink:empty { display: none; }

/* ---------- drawing screen polish: one-line prompt, roomy tray, a real DONE button ---------- */
#drawHead{padding-right:calc(min(19vmin,152px) + clamp(16px,3vw,48px))}
#prompt{max-width:none;white-space:nowrap;font-size:clamp(22px,4.3vmin,48px)}
.chipLbl{font-size:clamp(16px,2.6vmin,24px);opacity:.9}
.chip.move{font-size:clamp(14px,2.3vmin,20px)}
#padWrap::after{display:none}
#tray{left:clamp(10px,5vw,110px);right:clamp(10px,5vw,110px)}
#tray::before{border-radius:30px 30px 0 0;border-left:7px solid var(--ink);border-right:7px solid var(--ink)}
.trayGroove{left:3%;right:3%}
#tools{justify-content:space-evenly;gap:clamp(8px,1.6vw,30px)}
.markers{gap:clamp(4px,1.4vw,22px)}
.other{gap:clamp(8px,1.8vw,28px)}
/* a soft contact shadow on the tray under every pen; the lifted one casts a wider, fainter one */
.marker::after{content:'';position:absolute;left:8%;right:8%;bottom:-6%;height:12%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(90,56,10,.45),rgba(90,56,10,0) 70%);transform:rotate(calc(-1 * var(--rot,-8deg)));z-index:-1;transition:all .3s}
.marker.sel::after{bottom:-36%;left:-6%;right:-6%;height:16%;opacity:.55;transform:rotate(26deg) scale(1.2)}
#done{height:auto!important;flex-direction:row;align-items:center;justify-content:center;gap:.25em;
  padding:.18em .7em .22em .45em;background:var(--lemon);border:4px solid var(--ink);border-radius:22px;
  box-shadow:0 7px 0 var(--ink),0 12px 16px rgba(80,52,10,.35);transform:rotate(-3deg);font-size:clamp(24px,4.6vmin,46px)}
#done img{height:1.25em;filter:none}
#done span{font-size:1em;margin:0;color:#fff;letter-spacing:.02em;-webkit-text-stroke:.09em var(--ink);paint-order:stroke fill;
  text-shadow:0 .08em 0 var(--ink)}
#done:active{transform:rotate(-3deg) translateY(5px) scale(1.06,.9);box-shadow:0 2px 0 var(--ink)}
@media (max-aspect-ratio:1/1){
  #prompt{white-space:normal;max-width:none;font-size:clamp(20px,5.6vmin,36px)}
  #drawHead{padding-right:calc(min(22vw,104px) + 10px)}
  #tray{left:0;right:0}
  #tray::before{border-left:0;border-right:0}
  #done{font-size:clamp(20px,5.4vmin,32px)}
}
@media (max-height:560px) and (min-aspect-ratio:1/1){
  #prompt{white-space:nowrap;font-size:clamp(16px,5vh,26px)}
  #drawHead{padding-top:clamp(36px,11vh,50px);padding-right:calc(min(17vh,96px) + 14px)}
  #done{font-size:clamp(16px,6vh,26px);border-width:3px;box-shadow:0 4px 0 var(--ink)}
}
/* a short screen (phone held sideways): shrink the title so the logo and the bottom buttons
   are fully on screen and never cut off by the top or bottom edge */
@media (max-height:560px) and (min-aspect-ratio:1/1){
  #title{gap:1.1vmin;padding:1.6vmin 3vmin 2vmin}
  #title .logo{width:min(44vw,300px);max-height:min(30vh,150px);min-height:54px}
  .howto{padding:1vmin 2.2vmin;border-width:3px;border-radius:16px;box-shadow:0 4px 0 var(--ink)}
  .step{font-size:clamp(12px,2.3vmin,17px);gap:9px;padding:1px 0;line-height:1.2}
  #title .big{font-size:clamp(17px,3.4vmin,24px);padding:.42em 1.15em .46em}
  #title .small{font-size:clamp(12px,2.4vmin,16px)}
}

/* ---------- dress up your Mindy ---------- */
#dress{z-index:40;place-items:center;background:rgba(30,27,58,.42)}
#dress.show{display:grid}
#dressCard{width:min(94vw,760px);max-height:94vh;overflow:auto;padding:clamp(10px,2.4vmin,24px) clamp(12px,3vmin,30px);background:var(--paper);
  border:5px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);transform:rotate(-.5deg);animation:popIn .45s cubic-bezier(.3,1.5,.5,1) both;text-align:center}
#dressTitle{font-size:clamp(24px,5vmin,44px);color:var(--pink);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
#dressBody{display:flex;gap:clamp(10px,2.4vmin,24px);align-items:center;justify-content:center}
#dressStage{flex:0 0 auto;width:min(36vw,46vh,300px);text-align:center}
#dressView{display:block;width:100%;aspect-ratio:1;border-radius:18px;background:radial-gradient(circle at 50% 40%,#d9f6ff,#9fdcf3);border:4px solid var(--ink)}
#dressName{font-family:'Gochi Hand',cursive;font-size:clamp(15px,2.4vmin,20px);margin-top:4px}
#dressPick{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.dressLbl{font-family:'Titan One';font-size:clamp(14px,2.4vmin,20px);letter-spacing:.04em}
#dressTints{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px}
.sw{width:clamp(34px,6.4vmin,46px);aspect-ratio:1;border-radius:50%;background:var(--sw);border:4px solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:transform .12s}
.sw.sel{transform:translateY(-3px) scale(1.15);outline:4px solid var(--lemon);outline-offset:2px}
#dressHats,#dressDresses{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:360px}
.hatb{font-family:'Gochi Hand',cursive;font-size:clamp(15px,2.4vmin,19px);background:#fff;border:3px solid var(--ink);border-radius:12px;padding:3px 10px;box-shadow:0 3px 0 var(--ink)}
.hatb.sel{background:var(--lemon);transform:translateY(-2px) rotate(-2deg)}
#dressDone{margin-top:6px}
#dressNote{font-family:'Gochi Hand',cursive;font-size:clamp(13px,2vmin,16px);opacity:.75}
@media (max-aspect-ratio:1/1){#dressBody{flex-direction:column}#dressStage{width:min(62vw,34vh)}}
/* a short screen (a phone held sideways): shrink the whole card so DONE is fully on screen
   and never cut off by the bottom edge, rather than making the person scroll to reach it */
@media (max-height:560px){
  #dressCard{max-height:97vh;padding:8px 16px;border-width:4px;box-shadow:0 5px 0 var(--ink)}
  #dressTitle{font-size:clamp(16px,4.4vmin,26px);-webkit-text-stroke:4px var(--ink);text-shadow:0 2px 0 var(--ink)}
  #dressBody{gap:10px}
  #dressStage{width:min(26vw,24vh,170px)}
  #dressName{font-size:12px;margin-top:2px}
  #dressPick{gap:3px}
  .dressLbl{font-size:13px}
  #dressTints{gap:4px;max-width:280px}
  .sw{width:clamp(20px,4.4vmin,28px);border-width:3px;box-shadow:0 2px 0 var(--ink)}
  #dressHats,#dressDresses{gap:4px;max-width:300px}
  .hatb{font-size:12px;padding:2px 7px;border-width:2px;box-shadow:0 2px 0 var(--ink)}
  #dressDone{margin-top:3px;font-size:clamp(18px,3vmin,24px)}
  #dressNote{font-size:11px}
}

/* ---------- back to the menu ---------- */
#btnMenu{position:fixed;z-index:31;display:none;left:calc(max(14px,env(safe-area-inset-left)) + 52px);bottom:calc(64px + env(safe-area-inset-bottom));height:42px;padding:0 14px;
  border-radius:999px;background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-family:'Titan One';font-size:16px;letter-spacing:.04em}
#btnMenu.show{display:block}
body.touch.racing #btnMenu{bottom:auto;top:calc(14px + 7vmin + 80px)}
body.drawing #btnMenu{bottom:auto;top:calc(8px + env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));height:34px;font-size:13px;padding:0 10px}

/* ---------- trap screen: a compact corner control, so the paper stays the focus ---------- */
#trapScr{background:rgba(30,27,58,.20);overflow:auto;z-index:6;padding:clamp(8px,2vmin,22px);align-items:end;justify-items:end}
#trapScr.show{display:grid}
#trapCard{position:relative;width:min(92vw,520px);max-height:calc(100% - 4px);margin:0;padding:clamp(8px,1.6vmin,16px) clamp(10px,2vmin,20px);
  background:var(--paper) repeating-linear-gradient(transparent 0 27px,#bfdcf5 27px 29px);border:4px solid var(--ink);border-radius:10px 16px 9px 14px;
  box-shadow:0 8px 0 rgba(30,27,58,.35),inset 0 0 70px rgba(120,90,40,.10);animation:popIn .5s cubic-bezier(.3,1.5,.5,1) both;transform:rotate(.5deg);box-sizing:border-box}
#trapCard::before{content:'';position:absolute;left:clamp(16px,2.4vmin,30px);top:0;bottom:0;width:2px;background:#e0417f;opacity:.5;pointer-events:none}
#trapCard::after{content:'';position:absolute;inset:0;border-radius:inherit;background:url(assets/paper_grain.png) 0 0/162px 162px repeat;mix-blend-mode:multiply;opacity:.55;pointer-events:none}
#trapTapeA{left:-18px;top:-20px;transform:rotate(-42deg)}
#trapTapeB{right:-18px;top:-20px;transform:rotate(44deg)}
#trapHead{display:flex;align-items:center;justify-content:center;gap:12px}
#trapTitle{font-size:clamp(22px,4.6vmin,40px);line-height:1;color:var(--pink);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);transform:rotate(-3deg)}
#trapClock{flex:none;width:clamp(40px,6.5vmin,60px);aspect-ratio:1;background:url(assets/cookie_timer.webp) center/contain no-repeat;display:grid;place-items:center}
#trapTime{font-family:'Titan One';font-size:clamp(15px,2.6vmin,24px)}
#trapLevel{font-family:'Gochi Hand',cursive;font-size:clamp(13px,2vmin,18px);text-align:center;margin:3px auto 6px;line-height:1.1}
#trapLevel b{font-family:'Titan One';font-weight:400;letter-spacing:.03em}
#trapBody{display:flex;gap:clamp(6px,1.4vmin,14px);align-items:stretch}
#trapKinds{flex:0 0 clamp(120px,34%,170px);display:grid;grid-template-columns:1fr;gap:clamp(4px,.9vmin,8px)}
.tk{display:flex;align-items:center;gap:6px;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:3px 7px;
  box-shadow:0 3px 0 var(--ink);transition:transform .15s cubic-bezier(.3,1.8,.5,1);color:var(--ink)}
.tk canvas{flex:none;width:clamp(26px,4.8vmin,40px);height:clamp(26px,4.8vmin,40px)}
.tk b{display:block;font-family:'Titan One';font-weight:400;font-size:clamp(11px,1.8vmin,16px);line-height:1.05}
.tk span{display:block;font-family:'Gochi Hand',cursive;font-size:clamp(11px,1.7vmin,14px);line-height:1.05;opacity:.8}
.tk.sel{background:var(--lemon);transform:translateY(-2px) rotate(-1.5deg)}
#trapMapWrap{position:relative;flex:1;min-width:0;min-height:clamp(110px,24vh,200px);background:#bff0ff;border:3px solid var(--ink);border-radius:12px;overflow:hidden;touch-action:none;cursor:crosshair}
#trapMap{position:absolute;inset:0;width:100%;height:100%}
#trapMapHint{position:absolute;left:8px;bottom:5px;font-family:'Gochi Hand',cursive;font-size:clamp(12px,1.9vmin,16px);pointer-events:none;text-shadow:0 0 4px #fff}
#trapFoot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(6px,1.2vmin,10px)}
#trapSet{font-size:clamp(16px,3vmin,26px);padding:.2em 1.2em}
#trapWait{font-family:'Gochi Hand',cursive;font-size:clamp(13px,2vmin,18px)}
#trapScr.done .tk,#trapScr.done #trapMapWrap{pointer-events:none;opacity:.75}
#trapScr.done #trapSet{display:none}
.chip.move.lvl{background:#bff0ff}
@media (orientation:portrait){
  #trapBody{flex-direction:column}
  #trapKinds{flex:none;grid-template-columns:1fr 1fr}
  #trapMapWrap{min-height:clamp(150px,32vh,280px)}
}
@media (orientation:landscape) and (max-height:500px){
  #trapCard{padding:8px 12px;margin:0}
  #trapTitle{font-size:clamp(20px,6vh,30px);-webkit-text-stroke:5px var(--ink)}
  #trapLevel{margin:2px auto 4px;font-size:clamp(11px,3vh,15px)}
  #trapMapWrap{min-height:clamp(90px,40vh,200px)}
  .tk{padding:2px 6px} .tk span{display:none}
  #trapFoot{margin-top:6px} #trapSet{font-size:clamp(15px,4.4vh,22px)}
}

/* racers' names over their Mindys */
#tags{position:fixed;inset:0;pointer-events:none;overflow:hidden;display:none;z-index:3}
#tags.show{display:block}
#tags .tag{position:absolute;left:0;top:0;transform-origin:50% 100%;white-space:nowrap;font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:clamp(11px,1.7vmin,15px);line-height:1;padding:3px 8px 2px;border-radius:999px;background:rgba(255,248,236,.88);color:var(--ink);
  border:2px solid var(--ink);box-shadow:0 2px 0 rgba(30,27,58,.35)}
#tags .tag.person{background:#fff;color:#1E1B3A}
#tags .tag.me{background:var(--pink);color:#fff;font-size:clamp(12px,1.9vmin,17px)}
/* a room of twelve: compact seats so the whole field fits */
#lobbySeats.many{gap:clamp(4px,1vmin,10px);margin:clamp(4px,1.2vh,12px) 0}
#lobbySeats.many .seat{width:clamp(58px,11vmin,84px);font-size:clamp(11px,1.8vmin,15px);position:relative}
#lobbySeats.many .seat span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lobbySeats.many .cap{width:clamp(28px,6.5vmin,48px)}
#lobbySeats .seat.me span{color:var(--pink);font-weight:700}
#lobbySeats .seat i{font-style:normal;font-family:'Baloo 2',sans-serif;font-size:10px;line-height:1;background:var(--ink);color:#fff;border-radius:6px;padding:1px 5px}
#lobbySeats .seat.fresh{animation:seatPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes seatPop{from{transform:scale(.3)}to{transform:scale(1)}}
#lobbyCard.many #lobbyLogo{width:min(40%,240px);margin-top:-2%}
@media (max-height:500px){#lobbyCard.many #lobbyLogo{display:none}}

/* ---------- blaster (round 2, for players who missed the cut) ---------- */
#blaster{pointer-events:none}
#blastTop{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
#blastRole{font-family:'Titan One',sans-serif;font-size:clamp(26px,5.6vmin,56px);color:var(--lemon);-webkit-text-stroke:3px var(--ink);
  text-shadow:0 6px 0 var(--ink);transform:rotate(-3deg)}
#blastKo{position:static;transform:rotate(2deg);display:flex;align-items:center;gap:6px;font-family:'Gochi Hand',cursive;font-size:clamp(15px,2.5vmin,22px)}
#blastKo img{width:clamp(26px,4.5vmin,40px)}
#blastKo b{color:var(--pink)}
#blastNote{position:absolute;left:50%;top:clamp(72px,15vmin,146px);transform:translateX(-50%);max-width:min(88vw,660px);text-align:center;
  font-family:'Gochi Hand',cursive;font-size:clamp(17px,2.8vmin,26px);line-height:1.25;background:#fff;border:4px solid var(--ink);border-radius:16px;
  padding:.4em .85em;box-shadow:0 6px 0 rgba(30,27,58,.35)}
#blastFoot{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
#blastHint{font-size:clamp(13px,2vmin,17px);font-weight:700;background:rgba(255,248,236,.92);border:3px solid var(--ink);border-radius:999px;padding:.28em .95em;text-align:center}
#blastFire{pointer-events:auto;touch-action:none}
body:not(.touch) #blastFire{display:none}