@font-face {
  font-family: "GameFont";
  src: url("/vendor/fonts/1.0.0/baloo2-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { position: fixed; inset: 0; overflow: hidden; margin: 0; padding: 0; background: var(--bg, #7A5C99); }
#app { position: fixed; inset: 0; }
#app canvas { position: absolute; inset: 0; display: block; touch-action: none; }

#grade {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 45%, rgba(14, 8, 24, .6)),
    linear-gradient(rgba(255, 220, 180, .08), transparent 30%);
  mix-blend-mode: multiply;
}

#hud {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  font-family: "GameFont", ui-rounded, "Segoe UI", system-ui, sans-serif;
  color: #fff; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#hud :is(button, .tap) { pointer-events: auto; touch-action: manipulation; }

.tl { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
.tr { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); text-align: right; }

.pill {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .35em .9em; border-radius: 999px;
  font-weight: 800; letter-spacing: .02em; color: #fff;
  background: linear-gradient(var(--pill-hi), var(--pill-lo));
  border: 2px solid rgba(255,255,255,.55);
  border-bottom-width: 4px; border-bottom-color: rgba(0,0,0,.28);
  transition: transform .1s;
}
.pill .label { font-size: .6em; opacity: .85; letter-spacing: .12em; }
.pill b { font-size: 1.15em; font-variant-numeric: tabular-nums; min-width: 2ch; display: inline-block; }
.pill.score { --pill-hi: #FFCB7A; --pill-lo: #E0972E; }
.pill.best  { --pill-hi: #C98BFF; --pill-lo: #7A4FCB; }
.pill.pop { animation: pillpop .18s ease-out; }
@keyframes pillpop { 40% { transform: scale(1.18); } }

#toast {
  position: absolute; left: 50%; top: 30%; translate: -50% 0;
  transform: scale(.6); opacity: 0; font-weight: 800; font-size: 24px;
  color: var(--accent); text-shadow: 0 0 12px var(--accent); pointer-events: none;
  white-space: nowrap;
}
#toast.show { animation: toastAnim .9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes toastAnim {
  12% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1) translateY(-26px); }
}

.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .25s ease;
}
.overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.card {
  text-align: center; padding: 28px 32px; border-radius: 24px;
  background: color-mix(in srgb, var(--secondary, #2B1B3D) 55%, transparent);
  border: 2px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  max-width: min(90vw, 480px);
}
.game-name {
  font-size: clamp(34px, 9vw, 60px); font-weight: 800; margin: 0 0 8px;
  letter-spacing: -.02em; color: var(--accent); text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}
.hook { font-size: 16px; opacity: .85; margin: 0 0 18px; }
.cta {
  display: inline-block; font-size: 20px; font-weight: 800; letter-spacing: .1em;
  padding: .6em 1.4em; border-radius: 999px; color: var(--secondary, #2B1B3D);
  background: linear-gradient(var(--accent), #E0B62E);
  border: 2px solid rgba(255,255,255,.6); border-bottom-width: 5px; border-bottom-color: rgba(0,0,0,.3);
  animation: pulse 1.6s ease-in-out infinite;
}
.cta:active { transform: translateY(2px); border-bottom-width: 3px; }
@keyframes pulse { 50% { opacity: .55; transform: scale(1.04); } }
.hint { font-size: 13px; opacity: .65; margin: 14px 0 0; letter-spacing: .02em; }
.hint.touch { display: none; }
@media (pointer: coarse) {
  .hint.keys { display: none; }
  .hint.touch { display: block; }
}

.label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.final { font-size: clamp(44px, 12vw, 72px); font-weight: 800; color: var(--accent); margin: 6px 0; text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent); font-variant-numeric: tabular-nums; }
.final.newbest { color: var(--accent); animation: pillpop .3s ease-out; }
.bestline { font-size: 15px; font-weight: 700; opacity: .85; margin: 0 0 14px; letter-spacing: .05em; }
.quip { font-size: 14px; opacity: .8; margin: 0 0 16px; }

#touchControls { position: fixed; inset: 0; z-index: 10; pointer-events: none; display: none; }
@media (pointer: coarse) {
  #touchControls { display: block; }
}
.zone {
  position: absolute; bottom: calc(14px + env(safe-area-inset-bottom));
  width: clamp(72px, 21vw, 96px); height: clamp(72px, 21vw, 96px); border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; opacity: .5; transition: opacity .5s;
  background: color-mix(in srgb, var(--secondary, #2B1B3D) 30%, transparent);
}
#zoneLeft { left: calc(14px + env(safe-area-inset-left)); }
#zoneRight { left: calc(14px + env(safe-area-inset-left) + clamp(72px, 21vw, 96px) + 8px); }
#zoneJump.jumpBtn { right: calc(14px + env(safe-area-inset-right)); }
.zone.faded { opacity: .14; }

@media (prefers-reduced-motion: reduce) {
  #hud * { animation: none !important; transition: none !important; }
}