:root {
  --ash: #0B0B0B;
  --ash2: #141414;
  --chalk: #F4F1E8;
  --wood: #E9E2CE;
  --strike: #FF3B1F;
  --ignition: #FFC400;
  --smoke: #8A8880;
  --line: rgba(244, 241, 232, 0.15);
  --line2: rgba(244, 241, 232, 0.08);
  --display: "Druk Condensed Super", Anton, Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  --mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background: #000;
  color: var(--chalk);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#shell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  touch-action: none;
}

#stage-wrap {
  position: relative;
  width: min(100vw, calc(100vh * 576 / 1024));
  height: min(100vh, calc(100vw * 1024 / 576));
  aspect-ratio: 576 / 1024;
  flex-shrink: 0;
  touch-action: none;
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  /* The backing store is already sized to devicePixelRatio in main.js, so let the browser do a
     normal 1:1 blit. Forcing pixelated crunches the vector art on fractional-DPR displays. */
  image-rendering: auto;
  background: var(--ash);
  touch-action: none;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  touch-action: none;
  overflow: hidden;
}

.hud-metres {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  font-family: var(--mono);
  font-size: clamp(22px, 5.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--chalk);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
  line-height: 1;
}

.hud-mult {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  font-family: var(--mono);
  font-size: clamp(22px, 5.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--smoke);
  line-height: 1;
  transition: color 0.12s linear;
}

.hud-mult.is-ignition {
  color: var(--ignition);
}

.hud-mult.is-pop {
  animation: mult-pop 0.38s ease-out;
}

@keyframes mult-pop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.22);
    filter: brightness(1.35);
    color: var(--chalk);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.hud-charge {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  height: 6px;
  background: var(--line2);
  border: 1px solid var(--line);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.08s linear;
}

.hud-charge.is-visible {
  opacity: 1;
}

.hud-charge-fill {
  height: 100%;
  width: 0%;
  background: var(--wood);
  border-radius: 1px;
  transition: background-color 0.06s linear;
}

.hud-charge.is-slice .hud-charge-fill {
  background: var(--strike);
}

.hud-charge.is-urgent .hud-charge-fill {
  animation: charge-urgent 0.12s ease-in-out infinite alternate;
}

@keyframes charge-urgent {
  from {
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(255, 59, 31, 0);
  }
  to {
    filter: brightness(1.45);
    box-shadow: 0 0 10px rgba(255, 59, 31, 0.55);
  }
}

.hud-snatch-pip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--ignition);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  box-shadow: 0 0 12px rgba(255, 196, 0, 0.35);
  transition: opacity 0.05s linear, transform 0.05s linear;
}

.hud-snatch-pip.is-live {
  opacity: 1;
  transform: scale(1);
  animation: snatch-pulse 0.09s ease-in-out infinite alternate;
}

@keyframes snatch-pulse {
  from {
    box-shadow: 0 0 8px rgba(255, 196, 0, 0.35);
  }
  to {
    box-shadow: 0 0 18px rgba(255, 196, 0, 0.75);
  }
}

.hud-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Light enough that the city and the rat still read as chalk behind the card; the card's own
     solid panel carries the legibility. A flat 0.72 scrim greyed the whole scene out. */
  background: radial-gradient(ellipse at 50% 46%, rgba(11, 11, 11, 0.74) 0%, rgba(11, 11, 11, 0.44) 62%, rgba(11, 11, 11, 0.3) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.hud-card.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hud-card-inner {
  width: min(100%, 420px);
  padding: 28px 24px 26px;
  background: var(--ash2);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}

.hud-card-title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(42px, 11vw, 56px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--chalk);
}

/* On the death card the title slot carries the score. Same face, same size, one shout. */
.hud-card-title.is-score {
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}

.hud-card-title.is-record {
  color: var(--ignition);
}

.hud-card-stamp:not(:empty) {
  margin-top: 9px;
}

.hud-stamp {
  display: inline-block;
  padding: 4px 9px;
  background: var(--strike);
  color: var(--ash);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hud-stamp.is-in {
  animation: stamp-in 0.3s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}

@keyframes stamp-in {
  0% {
    transform: scale(0.7) rotate(-5deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.06) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.hud-card-copy {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  line-height: 1.55;
}

.hud-card-tagline {
  margin: 12px 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--chalk);
}

.hud-card-tagline.is-loss {
  color: var(--strike);
}

.hud-card-stats {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wood);
}

.hud-card-stats b {
  color: var(--chalk);
  font-weight: 600;
}

.hud-card-stats .is-up b {
  color: var(--ignition);
}

/* The peak: ignition when you kept it, slashed and grey when the pigeon took it. */
.hud-peak {
  position: relative;
  display: inline-block;
}

.hud-peak b {
  color: var(--ignition);
}

.hud-card-stats.is-lost .hud-peak b {
  color: var(--smoke);
}

.hud-card-stats.is-lost .hud-peak::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  background: var(--strike);
  transform: rotate(-7deg);
}

.is-lost-note {
  color: var(--strike);
}

.is-best-note {
  color: var(--ignition);
}

.hud-peak-flare {
  position: absolute;
  inset: -5px -7px;
  border: 1px solid var(--ignition);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
}

.hud-peak-flare.is-in {
  animation: peak-flare 0.75s ease-out both;
}

@keyframes peak-flare {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

.hud-card-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.hud-card-prompt,
.hud-card-share {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 6px 10px;
  background: transparent;
  cursor: pointer;
  transition: color 0.12s linear, background-color 0.12s linear;
}

.hud-card-prompt {
  color: var(--ignition);
  border: 1px solid var(--ignition);
}

/* Quiet by design: the loop is the point, the poster is the detour. */
.hud-card-share {
  color: #6e6a63;
  border: 1px solid transparent;
}

.hud-card-share.is-hot {
  color: var(--strike);
}

/* ------------------------------------------------------------------------- the brag screen -- */

.brag {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--ash);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.brag.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The plate is authored at the stage's own 9:16, so it lands pixel-for-pixel with no cropping. */
.brag-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.brag-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

.brag-status {
  margin: 0;
  min-height: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}

.brag-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 10px 18px;
  cursor: pointer;
  background: transparent;
  transition: color 0.12s linear, background-color 0.12s linear;
}

.brag-btn-share {
  background: var(--strike);
  border: 1px solid var(--strike);
  color: var(--ash);
  font-weight: 700;
  min-width: 180px;
}

.brag-btn-exit {
  border: 1px solid var(--line);
  color: var(--chalk);
  min-width: 180px;
}

.brag-btn-exit:hover {
  border-color: rgba(244, 241, 232, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .hud-mult.is-pop,
  .hud-charge.is-urgent .hud-charge-fill,
  .hud-snatch-pip.is-live,
  .hud-stamp.is-in,
  .hud-peak-flare.is-in {
    animation: none;
  }

  .brag {
    transition: none;
  }
}