/* The action games: a full-screen canvas with the score, the countdown and the start and results panels over it. */
.arcade { position: fixed; z-index: 40; inset: 0; overflow: hidden; background: #0a0826; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.arcade canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.hud { position: absolute; top: calc(66px + env(safe-area-inset-top, 0px)); left: 0; right: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.hud b { font: 800 clamp(46px, 14vw, 76px)/1 var(--logo); letter-spacing: -.03em; color: var(--white); text-shadow: 0 5px 0 rgba(20, 12, 60, .55), 0 0 34px rgba(255, 255, 255, .35); }
.hud b.bump { animation: bump .28s var(--ease); }
.hud span { padding: 7px 14px; background: rgba(12, 10, 36, .72); border-radius: 999px; font-size: 16px; font-weight: 600; }
.hud span:empty { display: none; }
@keyframes bump { from { transform: scale(1.35); } }

.arcade .count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--gold);
  font: 800 clamp(110px, 38vw, 230px)/1 var(--logo);
  letter-spacing: -.04em;
  text-shadow: 0 .03em 0 #f2a52a, 0 .06em 0 #d38414, 0 .09em 0 #a9620a, 0 .16em .3em rgba(0, 0, 0, .5);
}
.arcade .count.beat { animation: beat .7s var(--ease); }
@keyframes beat { from { opacity: 0; transform: scale(1.7); } 35% { opacity: 1; } }

.banner { position: absolute; left: 16px; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); max-width: 420px; margin: 0 auto; padding: 12px 16px; background: rgba(12, 10, 36, .86); border-radius: 16px; font-weight: 600; text-align: center; pointer-events: none; }

.panel {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(100% - 32px, 460px);
  max-height: calc(100% - 150px);
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 22px;
  background: #1b1549;
  border-radius: 26px;
  box-shadow: 0 7px 0 #0f0b2e, 0 34px 70px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .1);
  transform: translate(-50%, -50%);
  animation: panel-in .45s var(--ease);
}
@keyframes panel-in { from { opacity: 0; transform: translate(-50%, -44%) scale(.96); } }
.panel h1 { margin: 0; font: 800 clamp(30px, 9vw, 42px)/1.08 var(--logo); letter-spacing: -.03em; text-wrap: balance; }
.panel .how { margin: 0; font-size: 19px; line-height: 1.35; color: var(--muted); }
.panel .rule { font-size: 20px; }
.panel .rows li { background: var(--panel-up); }
.panel .quiet { justify-self: center; }

@media (prefers-reduced-motion: reduce) { .arcade .count.beat, .hud b.bump, .panel { animation: none; } }