*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#1a1028;color:#fff;overflow:hidden;overscroll-behavior:none;
  font-family:"Arial Black","Trebuchet MS",system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#5a2a48,#1a1028 70%)}
#wrap{position:relative;--s:1;width:390px;height:844px;box-shadow:0 0 40px rgba(0,0,0,.7);border-radius:calc(var(--s)*6px);overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:auto}

#mute,#pauseBtn{position:absolute;top:calc(var(--s)*10px);width:calc(var(--s)*48px);height:calc(var(--s)*48px);
  min-width:44px;min-height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
  background:rgba(0,0,0,.45);color:#fff;font-size:calc(var(--s)*18px);line-height:1;padding:0;
  cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center}
#mute{right:calc(var(--s)*10px)}
#pauseBtn{left:calc(var(--s)*10px);letter-spacing:-2px;font-size:calc(var(--s)*16px)}
#pauseBtn[hidden]{display:none}
#mute.off{opacity:.65}

.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:4;
  background:radial-gradient(ellipse at 50% 55%,rgba(20,8,20,.35),rgba(20,8,24,.78))}
.screen.show{display:flex}
.card{width:88%;text-align:center;padding:calc(var(--s)*18px) calc(var(--s)*14px)}
.kicker{font-size:calc(var(--s)*12px);letter-spacing:.14em;text-transform:uppercase;color:#ffd24a;
  margin-bottom:calc(var(--s)*8px);text-shadow:0 1px 0 rgba(0,0,0,.5)}
h1{margin:0 0 calc(var(--s)*12px);font-size:calc(var(--s)*42px);line-height:1.02;color:#fff;
  text-shadow:0 3px 0 #7a2a18,0 0 22px rgba(255,160,60,.55)}
h1 .vs{display:inline-block;font-size:calc(var(--s)*22px);color:#ffe9a8;margin:0 .1em;vertical-align:middle;
  text-shadow:0 2px 0 #7a2a18}
h1 .tim{color:#ffb06a;text-shadow:0 3px 0 #6a2a10,0 0 20px rgba(255,140,40,.55)}
h2{margin:0 0 calc(var(--s)*10px);font-size:calc(var(--s)*32px);line-height:1.1}
h2.bad{color:#ffb06a;text-shadow:0 3px 0 #7a1608,0 0 20px rgba(255,140,60,.5)}
.blurb{font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;font-size:calc(var(--s)*15px);line-height:1.35;
  color:#fff4e4;margin:0 auto calc(var(--s)*16px);max-width:92%;text-shadow:0 1px 2px rgba(0,0,0,.6)}
button.big{font-family:inherit;font-size:calc(var(--s)*26px);padding:calc(var(--s)*14px) calc(var(--s)*36px);
  min-height:44px;border-radius:calc(var(--s)*16px);border:0;color:#3b1a00;
  background:linear-gradient(#ffe36b,#ffb21c);box-shadow:0 calc(var(--s)*5px) 0 #b36a00,0 calc(var(--s)*10px) calc(var(--s)*18px) rgba(0,0,0,.45);
  cursor:pointer;touch-action:manipulation}
button.big:active{transform:translateY(calc(var(--s)*4px));box-shadow:0 calc(var(--s)*1px) 0 #b36a00}
.how{font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;margin-top:calc(var(--s)*16px);
  font-size:calc(var(--s)*13px);color:#ffe9c4;line-height:1.7;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.how-row{margin:0.15em 0}
kbd{display:inline-block;min-width:1.6em;padding:0 .35em;margin:0 .12em;border-radius:5px;
  border:1px solid #e8c070;border-bottom-width:3px;background:#4a2818;color:#fff;font:inherit;font-size:.95em}
.touchhelp{display:none}
.icons{display:flex;justify-content:center;gap:calc(var(--s)*12px);margin-top:calc(var(--s)*4px)}
.ico{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:calc(var(--s)*72px);padding:calc(var(--s)*8px) calc(var(--s)*8px);
  background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.35);border-radius:calc(var(--s)*12px)}
.ico span{font-size:calc(var(--s)*22px);line-height:1.1}
.ico small{display:block;margin-top:calc(var(--s)*4px);font-size:calc(var(--s)*11px);letter-spacing:.04em;color:#ffe9c4}
.best{margin-top:calc(var(--s)*12px);font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;
  font-size:calc(var(--s)*14px);color:#ffe36b;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.credit{margin-top:calc(var(--s)*14px);font-size:calc(var(--s)*11px);letter-spacing:.22em;text-transform:uppercase;
  color:#ffd9a0;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.scores{display:flex;justify-content:center;gap:calc(var(--s)*28px);margin:0 0 calc(var(--s)*18px)}
.scores div{display:flex;flex-direction:column}
.scores .lbl{font-size:calc(var(--s)*11px);letter-spacing:.16em;text-transform:uppercase;color:#ffd9a0;opacity:.85}
.scores span:last-child{font-size:calc(var(--s)*30px);color:#fff;text-shadow:0 2px 0 #7a2a18}

@media (pointer:coarse),(max-width:700px){
  .desk{display:none}.touchhelp{display:block}
}