*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#1a0305;overscroll-behavior:none;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#app{position:fixed;inset:0;height:100dvh;overflow:hidden;background:#1a0305;transition:opacity 1.2s}
body.end #app{opacity:0}
/* soft blurred copy of the video fills any space around it, so the phone screen is always full */
#amb{position:absolute;inset:0;width:100%;height:100%;filter:blur(26px) brightness(.75);transform:scale(1.2)}
#stage{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);translate:-50% -50%}
#v{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;background:#1a0305}

/* tap areas over the buttons drawn in the video */
.hs{position:absolute;z-index:5;border:0;background:transparent;border-radius:12px;cursor:pointer;pointer-events:none;opacity:0;transition:opacity .5s}
.hs.on{pointer-events:auto;opacity:1}
.hs.glow{animation:glow 2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 6px 1px rgba(255,205,100,.3)}50%{box-shadow:0 0 22px 6px rgba(255,215,120,.9)}}

/* countdown numbers */
#nums{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
#nums.show{opacity:1}
.num{position:absolute;top:59.4%;width:20%;translate:-50% -50%;text-align:center;
  font:600 calc(var(--w)*.075)/1 "Cormorant Garamond",Georgia,serif;color:#fff1d2;text-shadow:0 0 10px rgba(255,200,100,.7),0 1px 2px #3a050b}
.num.tk{animation:tk .5s}
@keyframes tk{from{scale:1.25;color:#fff}to{scale:1}}

/* scratch plates */
.nmc{pointer-events:none;position:absolute;border-radius:calc(var(--w)*.03)}
.nmc.shine{animation:nmshine 1.4s ease-out}
@keyframes nmshine{from{filter:brightness(1.8)}to{filter:none}}
.sk{pointer-events:auto;position:absolute;border-radius:calc(var(--w)*.03);touch-action:none;cursor:pointer;transition:opacity .8s}
.sk.gone{opacity:0;pointer-events:none}
#hand{position:absolute;z-index:4;font-size:calc(var(--w)*.1);pointer-events:none;opacity:0;filter:drop-shadow(0 4px 6px #000);transition:opacity .4s}
#hand.on{opacity:1;animation:hd 1.5s ease-in-out infinite alternate}
@keyframes hd{from{transform:translate(0,0) rotate(-14deg)}to{transform:translate(calc(var(--w)*.38),-4px) rotate(10deg)}}

/* loading bar and goodbye */
#bar{position:fixed;left:0;right:0;bottom:0;height:4px;z-index:20;background:rgba(255,255,255,.1);transition:opacity .6s}
#bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c8932f,#ffe9a8)}
#bar.out{opacity:0}
#bye{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;text-align:center;padding:30px;
  color:#ffe9a8;font:italic 700 26px "Cormorant Garamond",serif;background:radial-gradient(ellipse at 50% 40%,#5a0c14,#1a0305)}

#replay{margin-top:26px;padding:.6em 1.6em;font:600 18px 'Cormorant Garamond',serif;color:#ffe9a8;background:rgba(26,3,5,.5);border:1.5px solid #e9c46a;border-radius:99px;cursor:pointer}