:root{
  --red:#E3001B; --yel:#FFD200; --blu:#0A6FD6; --brown:#5B2A12; --ink:#0b0a10;
  --s:1; --bgk:1; --ui:1.25;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#07060b;color:#fff;
  font-family:'Lilita One',system-ui,sans-serif;overscroll-behavior:none}

#stage{position:fixed;inset:0;overflow:hidden}
#world{position:absolute;width:2560px;height:1024px;left:50%;bottom:0;transform-origin:50% 100%;
  transform:translateX(-50%) scale(var(--s))}
#bg{position:absolute;inset:0;background:url(assets/bg_bleed.jpg) 0 0/2560px 1024px no-repeat;
  transform-origin:50% 100%;transform:scale(var(--bgk))}
#safe{position:absolute;left:512px;top:160px;width:1536px;height:864px}

.layer{position:absolute;left:0;top:0;width:1536px;height:864px;pointer-events:none;user-select:none}
#lockup{z-index:1}
#rollrig{position:absolute;left:0;top:0;width:1536px;height:864px;z-index:5;transform-origin:885px 502px;pointer-events:none}
#roll{z-index:1}

#stripclip{position:absolute;left:733px;top:520px;width:220px;height:344px;overflow:hidden;z-index:3;pointer-events:none}
#strip{position:absolute;left:0;bottom:202px;width:220px;height:auto;will-change:transform}

#perf{position:absolute;left:0;top:0;width:1536px;height:864px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .12s linear;
  -webkit-mask-image:url(assets/arc_mask.png);-webkit-mask-size:1536px 864px;-webkit-mask-repeat:no-repeat;
  mask-image:url(assets/arc_mask.png);mask-size:1536px 864px;mask-repeat:no-repeat}
#perf.on{opacity:1}

#ring{position:absolute;left:0;top:0;width:1536px;height:864px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .12s linear}
#ring.on{opacity:1}
#ring .ringspin{transform-origin:995px 512px;transform-box:view-box}

#candyfield{position:absolute;left:0;top:0;width:1536px;height:864px;z-index:7;pointer-events:none}
.candy{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.candy img{display:block;width:100%;height:100%}

#flash{position:absolute;left:733px;top:648px;width:220px;height:5px;background:#fff;z-index:9;
  opacity:0;pointer-events:none;box-shadow:0 0 18px 6px rgba(255,255,255,.85)}

#rrrip{position:absolute;left:640px;top:700px;font-size:46px;font-style:italic;color:#fff;z-index:14;
  -webkit-text-stroke:6px var(--red);paint-order:stroke fill;letter-spacing:2px;opacity:0;
  transform:translate(-50%,-50%) scale(0);pointer-events:none;white-space:nowrap}

#graffiti{position:absolute;left:1150px;top:300px;z-index:10;font-family:'Permanent Marker',cursive;
  font-size:34px;line-height:1.1;color:#fff;opacity:.88;transform:rotate(-8deg);pointer-events:none;will-change:transform}

#slogan{position:absolute;left:190px;top:432px;z-index:10;font-family:'Kaushan Script',cursive;
  font-size:64px;line-height:1;color:var(--yel);white-space:nowrap;pointer-events:none;
  text-shadow:0 3px 0 #7a3d00,0 0 18px rgba(0,0,0,.6)}
#slogan .w{position:relative;display:inline-block}
#slogan .w.struck{color:rgba(255,210,0,.45)}
#strike{position:absolute;left:-8px;right:-8px;top:50%;height:8px;background:var(--red);border-radius:5px;
  transform:rotate(-4deg) scaleX(0);transform-origin:0 50%}

#stamp{position:absolute;left:300px;top:512px;z-index:10;font-family:'Kaushan Script',cursive;font-size:82px;
  line-height:1;color:var(--yel);white-space:nowrap;pointer-events:none;opacity:0;display:none;
  transform:rotate(-5deg) scale(1.4);transform-origin:20% 60%;
  text-shadow:0 4px 0 var(--brown),3px 3px 0 var(--brown),-2px 2px 0 var(--brown),0 0 14px rgba(0,0,0,.6)}

#pull{position:absolute;left:190px;top:640px;width:260px;height:82px;z-index:12;border:5px solid #fff;
  border-radius:44px;background:var(--red);color:#fff;font-family:'Lilita One',sans-serif;font-style:italic;
  font-size:46px;letter-spacing:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transform:skewX(-8deg);box-shadow:0 7px 0 #7d0010,0 12px 24px rgba(0,0,0,.5);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
#pull>span{transform:skewX(8deg);display:block}
#pull:hover:not(:disabled){transform:skewX(-8deg) translateY(-2px)}
#pull:active:not(:disabled){transform:skewX(-8deg) translateY(2px);box-shadow:0 3px 0 #7d0010,0 6px 14px rgba(0,0,0,.5)}
#pull:disabled{cursor:default;filter:saturate(.8) brightness(.92)}
#pull.again{font-size:36px}

#status{position:absolute;left:196px;top:742px;z-index:10;font-size:20px;letter-spacing:2px;color:#fff;
  opacity:.85;pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,.7)}
#status b{color:var(--yel)}

#rollhotspot{position:absolute;left:707px;top:382px;width:353px;height:248px;z-index:3;border:0;padding:0;
  background:transparent;cursor:pointer;border-radius:50%;pointer-events:auto}
#rollhotspot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.10),rgba(255,255,255,0) 72%);opacity:0;
  transition:opacity .15s ease}
#rollhotspot:hover::after,#rollhotspot:focus-visible::after{opacity:1}

#sheet{position:absolute;left:0;top:0;width:300px;height:313px;z-index:9;display:none;
  transform-origin:50% 50%;pointer-events:none;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.55))}
#sheet.show{display:block}
#sheet img{display:block;width:300px;height:313px;-webkit-user-drag:none}
#sheet .act{position:absolute;left:12%;right:12%;height:24%;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-style:italic;letter-spacing:1px;color:#fff;text-decoration:none;cursor:pointer;
  background:transparent;border:0;font-family:'Lilita One',sans-serif;border-radius:10px;
  text-shadow:0 3px 0 rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:transform .12s ease,opacity .25s linear}
#sheet .act:focus-visible{outline:3px solid #fff;outline-offset:3px}
#sheet.acts .act{opacity:1;pointer-events:auto}
#sheet .act:hover{transform:translateY(-3px)}
#sheet .a1{top:9%}
#sheet .a2{top:38%;color:#5B2A12;text-shadow:none}
#sheet .a3{top:67%}

#copystatus{position:absolute;left:1395px;top:476px;z-index:13;font-family:'Lilita One',sans-serif;
  font-size:28px;font-style:italic;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
  padding:6px 14px;border:4px solid #5B2A12;border-radius:8px;background:rgba(255,255,255,.92);
  transform:translate(-50%,-50%) rotate(12deg);opacity:0;pointer-events:none;
  transition:opacity .12s linear;box-shadow:0 6px 12px rgba(0,0,0,.4)}
#copystatus.show{opacity:1}
#copystatus.ok{color:#1a9b3c;border-color:#1a9b3c}
#copystatus.fail{color:#d21f2b;border-color:#d21f2b}
#copystatus.soon{color:#5B2A12;border-color:#5B2A12}

#header{position:fixed;left:0;right:0;top:0;height:calc(52px*var(--ui));z-index:5;display:flex;align-items:center;
  justify-content:space-between;padding:0 calc(26px*var(--ui));
  background:linear-gradient(#07060bdd,#07060b00);opacity:1}
#brand{font-size:calc(24px*var(--ui));font-style:italic;color:#fff;-webkit-text-stroke:2px var(--red);
  paint-order:stroke fill;transform:skewX(-8deg);letter-spacing:1px;user-select:none}
#nav{display:flex;gap:calc(13px*var(--ui));align-items:center}
#nav a{height:calc(32px*var(--ui));padding:0 calc(14.5px*var(--ui));border-radius:calc(22px*var(--ui));border:2px solid #fff;
  color:#fff;text-decoration:none;display:flex;align-items:center;font-size:calc(14.5px*var(--ui));letter-spacing:calc(1px*var(--ui));
  background:rgba(7,6,11,.35);font-style:italic;transition:transform .12s ease,background .12s ease}
#nav a:hover{transform:translateY(-2px)}
#nav a.pump{background:var(--yel);color:#2a1300;border-color:var(--yel)}
#sound{height:calc(32px*var(--ui));width:calc(32px*var(--ui));border-radius:50%;border:2px solid #fff;
  background:rgba(7,6,11,.35);color:#fff;font-size:calc(14.5px*var(--ui));cursor:pointer;display:flex;
  align-items:center;justify-content:center;line-height:1;transition:transform .12s ease}
#sound:hover{transform:translateY(-2px)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:3px solid #fff;outline-offset:3px}

body:not(.ready) #world,body:not(.ready) #header{opacity:0}
#world,#header{transition:opacity .4s ease}

@media (prefers-reduced-motion:reduce){
  #rollhotspot::after{transition:none}
}