:root{--red:#d3202a;--yellow:#ffd23f;--ink:#111;--paper:#fff7e6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#111;font-family:"Arial Black","Impact","Helvetica Neue",Arial,sans-serif;color:#fff;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

/* ---- HUD ---- */
#hud{position:fixed;inset:0;pointer-events:none}
.panel{position:absolute;top:50%;transform:translateY(-50%);width:150px;text-shadow:3px 3px 0 #000}
#panel-left{right:calc(50% + var(--well-half,200px) + 22px);text-align:right}
#panel-right{left:calc(50% + var(--well-half,200px) + 22px);text-align:left}
.panel .label{font-size:13px;letter-spacing:3px;margin-top:12px;color:#fff;opacity:.95}
.panel canvas{display:block;width:120px;background:#000a;border:3px solid #000;border-radius:4px;box-shadow:4px 4px 0 #000;margin-top:4px}
#panel-left canvas{margin-left:auto}
#hold{height:80px}
#next{height:250px}
#score{font-size:40px;line-height:1;color:var(--yellow)}
#best{font-size:20px;line-height:1;color:var(--paper)}
.num{font-size:36px;line-height:1;color:#fff}
.num.red{color:#ff5b5b}
#combo{position:absolute;right:calc(50% + var(--well-half,200px) + 22px);top:14%;text-align:right;text-shadow:4px 4px 0 #000}
#combo-num{font-size:64px;line-height:1;color:var(--red);-webkit-text-stroke:2px #000;transform-origin:right center}
#combo-num.bump{animation:pop .2s ease-out}
#combo-label{font-size:16px;letter-spacing:3px}
@keyframes pop{0%{transform:scale(1.5) rotate(-6deg)}100%{transform:scale(1)}}

#banner{position:absolute;z-index:3;left:50%;top:32%;transform:translate(-50%,-50%) rotate(-4deg);font-size:84px;color:var(--yellow);-webkit-text-stroke:3px #000;text-shadow:6px 6px 0 var(--red);opacity:0;white-space:nowrap;text-align:center;line-height:1}
#banner.show{animation:banner 1.1s ease-out forwards}
#banner.jackpot{color:#ff5fb4;text-shadow:6px 6px 0 var(--yellow);white-space:normal;width:94vw;font-size:clamp(34px,6vw,84px)}
#banner.jackpot.show{animation-duration:1.8s}
#banner .sub{display:block;white-space:normal;width:min(90vw,760px);position:relative;left:50%;transform:translateX(-50%);margin-top:.25em;font-size:.32em;font-style:italic;color:#fff;-webkit-text-stroke:1.5px #000;text-shadow:3px 3px 0 var(--red)}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) rotate(-4deg) scale(.4)}15%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1.15)}30%{transform:translate(-50%,-50%) rotate(-4deg) scale(1)}80%{opacity:1}100%{opacity:0}}

#popups{position:absolute;inset:0;overflow:hidden}
.popup{position:absolute;left:0;top:0;transform:translate(-50%,-100%);font-size:26px;color:#fff;-webkit-text-stroke:1.5px #000;text-shadow:3px 3px 0 #000;white-space:nowrap;animation:popup 1.1s ease-out forwards}
.popup small{display:block;font-size:16px;color:#ffb3b3;text-align:center}
.popup.gold{color:var(--yellow)}
.popup.blood{color:#ff3b3b}
.popup.jackpot{font-size:46px;-webkit-text-stroke:2px #000;text-shadow:4px 4px 0 #ff3fa4;text-align:center;z-index:1;color:var(--yellow)}
.popup.jackpot small{font-size:20px;color:#ff9fd2}
body.touch .popup.jackpot{font-size:30px}
@keyframes popup{0%{opacity:0;margin-top:10px;scale:1.6}12%{opacity:1;margin-top:0;scale:1}75%{opacity:1}100%{opacity:0;margin-top:-60px}}

#nowplaying{position:absolute;left:24px;bottom:44px;font-size:18px;color:var(--yellow);-webkit-text-stroke:1px #000;text-shadow:3px 3px 0 #000;opacity:0;transform:rotate(-2deg)}
#nowplaying small{display:block;font-size:11px;letter-spacing:3px;color:#fff;-webkit-text-stroke:0}
#nowplaying.show{animation:np 4.5s ease-out forwards}
@keyframes np{0%{opacity:0;translate:-30px 0}8%{opacity:1;translate:0 0}85%{opacity:1}100%{opacity:0}}
body.touch #nowplaying{bottom:auto;top:46%;left:10px;font-size:13px}
#flash{position:absolute;inset:0;background:#fff;opacity:0}
#flash.go{animation:flash .35s ease-out}
#flash.red{background:#c00}
@keyframes flash{0%{opacity:.55}100%{opacity:0}}

#pause{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(15,5,5,.6);pointer-events:auto}
#pause h2{font-size:72px;margin:0;color:var(--yellow);-webkit-text-stroke:2px #000;text-shadow:6px 6px 0 var(--red);transform:rotate(-3deg)}
#pause p{font-family:Arial,sans-serif;color:#ddd}

#hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:1px;opacity:.55;text-shadow:1px 1px 0 #000;font-family:Arial,sans-serif;white-space:nowrap}

/* ---- touch ---- */
#touch{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 12px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
#touch .tleft,#touch .tright .row{display:flex;gap:8px;align-items:flex-end;pointer-events:none}
#touch .tright{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.tbtn{pointer-events:auto;touch-action:none;font-family:inherit;font-size:24px;padding:0;width:64px;height:64px;border-radius:14px;border:3px solid #000;background:#0009;color:#fff;box-shadow:none;transform:none}
.tbtn.small{width:auto;height:40px;padding:0 12px;font-size:12px;border-radius:10px}
.tbtn.rot{background:#1f5bc4cc}
.tbtn.drop{background:#d3202acc;font-size:15px}
.tbtn.held{background:var(--yellow);color:#000}
@media (max-width:420px){.tbtn{width:54px;height:58px;font-size:20px}#touch .tleft,#touch .tright .row{gap:6px}.tbtn.drop{font-size:13px}}
body.touch #hint{display:none}
body.touch .panel{top:calc(8px + env(safe-area-inset-top));transform:none;width:auto}
body.touch #panel-left{left:10px;right:auto;text-align:left}
body.touch #panel-right{right:10px;left:auto;text-align:right}
body.touch #panel-right canvas{margin-left:auto}
body.touch #panel-left canvas{margin-left:0}
body.touch .panel canvas{width:64px;border-width:2px;box-shadow:3px 3px 0 #000}
body.touch #hold{height:48px}
body.touch #next{height:150px}
body.touch .panel .label{font-size:10px;letter-spacing:2px;margin-top:6px}
body.touch #score{font-size:24px}
body.touch #best{font-size:14px}
body.touch .num{font-size:22px}
body.touch #banner{font-size:44px}
body.touch #combo{left:10px;right:auto;top:auto;bottom:160px;text-align:left}
body.touch #combo-num{font-size:40px}

/* ---- screens (same as E-Bike Rampage) ---- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(15,5,5,.82);text-align:center;padding:24px}
.screen h1{font-size:min(24vw,190px);line-height:.9;margin:0;color:var(--paper);-webkit-text-stroke:5px #000;text-shadow:12px 12px 0 var(--red);transform:rotate(-3deg);letter-spacing:4px}
.screen h1 span{color:var(--yellow)}
.screen h2{font-size:64px;margin:0 0 10px;color:var(--yellow);-webkit-text-stroke:2px #000;text-shadow:6px 6px 0 var(--red)}
.tag{font-family:Georgia,serif;font-style:italic;font-size:20px;color:#ffd;margin:24px 0}
.btns{display:flex;gap:16px;margin:14px 0;flex-wrap:wrap;justify-content:center}
button{font-family:inherit;font-size:20px;padding:14px 28px;border:4px solid #000;background:var(--yellow);color:#000;cursor:pointer;box-shadow:6px 6px 0 #000;transform:rotate(-1deg)}
button.big{font-size:30px;background:var(--red);color:#fff;transform:rotate(1deg)}
button.toggle{background:#333;color:#fff;font-size:15px;padding:10px 18px}
button.toggle.on{background:#23405f}
.screen button:active,.screen button.pressed{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 #000}
.screen button.big:active,.screen button.big.pressed{transform:translate(3px,3px) rotate(1deg)}
#btn-start{position:relative}
#btn-start[data-state]{color:transparent;cursor:progress}
#btn-start[data-state]::after{content:attr(data-state);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px}
.controls{font-family:Arial,sans-serif;font-size:14px;color:#ddd;max-width:640px;line-height:1.5}
.controls b{color:var(--yellow)}
.best{font-size:16px;color:#ffd}
.credit{font-family:Arial,sans-serif;font-size:11px;color:#bbb;margin:4px 0 0;max-width:640px}
#title{justify-content:safe center;overflow-y:auto}
#title .presents{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 16px;font-family:Georgia,serif;font-style:italic;font-size:21px;color:#ffd;text-shadow:2px 2px 0 #000}
#title .presents img{width:76px;height:auto;transform:rotate(-5deg);filter:drop-shadow(3px 4px 0 rgba(0,0,0,.6))}
#over-stats{font-size:22px;line-height:1.7;text-shadow:2px 2px 0 #000;margin-bottom:8px}
#over-stats b{color:var(--yellow)}
#over-stats .newbest{color:#7CFC00;animation:pop .3s ease-out}
@media (min-height:521px) and (max-height:900px) and (min-width:421px){
  #title .presents{font-size:17px;gap:10px;margin:0 0 4px}
  #title .presents img{width:46px}
  #title h1{font-size:min(24vw,22vh,190px)}
  #title .tag{margin:14px 0}
}
body.touch #title .controls,body.touch #over .controls{display:none}
@media (pointer:coarse){#title .controls,#over .controls{display:none}}
@media (max-height:520px){
  #title{padding:10px 16px}
  #title h1{font-size:min(16vw,20vh,96px);-webkit-text-stroke:3px #000;text-shadow:6px 6px 0 var(--red)}
  #title .tag{font-size:15px;margin:10px 0 6px}
  .btns{margin:6px 0;gap:10px}
  button{font-size:16px;padding:9px 18px;box-shadow:4px 4px 0 #000}
  button.big{font-size:21px}
  button.toggle{font-size:13px;padding:7px 12px}
  #title .presents{font-size:13px;gap:8px;margin:0 0 4px}
  #title .presents img{width:34px}
  .screen h2{font-size:40px}
}
@media (orientation:portrait) and (max-width:420px){
  .screen h2{font-size:44px}
  button{font-size:16px;padding:10px 18px;box-shadow:4px 4px 0 #000}
  button.big{font-size:22px}
  button.toggle{font-size:12px;padding:7px 10px}
  .tag{font-size:16px}
}

#loadbar{width:min(460px,86vw);margin:-4px 0 -4px;transition:opacity .4s ease,visibility 0s linear .4s}
#loadbar .lb-track{position:relative;height:16px;border:4px solid #000;background:#3a1416;box-shadow:5px 5px 0 #000;overflow:hidden;transform:rotate(-1deg)}
#loadbar .lb-track::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;z-index:2;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:lbsheen 1.3s linear infinite;will-change:transform}
#loadbar .lb-fill{position:absolute;inset:0;background:var(--yellow);border-right:3px solid #000;transform:translateX(-100%);transition:transform 1.4s cubic-bezier(.15,.75,.3,1);will-change:transform;overflow:hidden}
#loadbar .lb-fill::after{content:"";position:absolute;top:0;bottom:0;left:-40px;right:0;background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(211,32,42,.55) 9px 18px);animation:lbstripe .55s linear infinite;will-change:transform}
#loadbar .lb-cap{margin-top:6px;font-size:13px;line-height:16px;letter-spacing:.5px;color:var(--yellow);text-shadow:2px 2px 0 #000;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#loadbar.done .lb-fill{transition-duration:.3s}
#loadbar.done .lb-track::before,#loadbar.done .lb-fill::after{animation:none}
#loadbar.gone{opacity:0;visibility:hidden;pointer-events:none}
@keyframes lbstripe{to{transform:translateX(25.46px)}}
@keyframes lbsheen{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){#loadbar .lb-fill::after{animation-duration:2.2s}#loadbar .lb-track::before{animation-duration:4s}}