/* Halloween Escape. 1u = 1% of the stage width; the stage is 9:16 and fits the viewport. */

/* Bundled so the arcade lettering looks the same everywhere, including in-app browsers. Pixelify Sans, SIL Open Font License. */
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/pixelify-sans.woff2") format("woff2");
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/silkscreen-700.woff2") format("woff2");
}

:root {
  --navy: #0F1A55;
  --navy-dk: #080C2A;
  --cream: #FFF1C1;
  --orange: #F27A1A;
  --yellow: #FFC84A;
  --denim: #2A5BC4;
  --cyan: #27E5FF;
  --red: #FF3B3B;
  --ink: #0A0A0F;

  /* Swap in the self-hosted pixel fonts in the polish pass. */
  --font-display: "Pixelify Sans", "Silkscreen", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-label: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --u: min(1vw, 0.5625vh);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  --outline:
    calc(var(--u) * -0.9) 0 0 var(--ink), calc(var(--u) * 0.9) 0 0 var(--ink),
    0 calc(var(--u) * -0.9) 0 var(--ink), 0 calc(var(--u) * 0.9) 0 var(--ink),
    calc(var(--u) * -0.65) calc(var(--u) * -0.65) 0 var(--ink), calc(var(--u) * 0.65) calc(var(--u) * -0.65) 0 var(--ink),
    calc(var(--u) * -0.65) calc(var(--u) * 0.65) 0 var(--ink), calc(var(--u) * 0.65) calc(var(--u) * 0.65) 0 var(--ink);
}
@supports (height: 1dvh) {
  :root { --u: min(1vw, 0.5625dvh); }
}

[hidden] { display: none !important; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--navy-dk); overscroll-behavior: none; }
body {
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; pointer-events: none; }

/* Stage ------------------------------------------------------------------- */

#stage {
  position: relative;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 177.78);
  overflow: hidden;
  background: var(--navy);
  touch-action: none;
  isolation: isolate;
}
#world, #cam { position: absolute; inset: 0; }
#cam { will-change: transform; }

/* Live scene: parallax strips, actors and particles. */
.layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.layer.sky svg { display: block; width: 100%; height: 100%; }
.strip { display: flex; width: max-content; will-change: transform; }
.tile { flex: none; width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h, 177.78)); }
.tile svg { display: block; width: 100%; height: 100%; }
.layer.branches { opacity: 0.92; }
#actors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fxcanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.fx { position: absolute; inset: 0; pointer-events: none; }
.fx.flash { opacity: 0; z-index: 5; }
.fx.vignette { z-index: 1; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(4, 6, 28, 0.55) 100%); }
.fx.speed { z-index: 1; opacity: 0; transition: opacity 0.2s; overflow: hidden; }
/* Horizontal streaks that slide past; the tile is 80u wide so the loop is seamless. */
.fx.speed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--u) * 260);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='178' viewBox='0 0 80 178'%3E%3Cg stroke='white' stroke-linecap='round' opacity='.34'%3E%3Cpath d='M4 12h30M44 30h24M10 44h18M52 58h26M0 72h22M36 86h32M60 100h18M6 112h28M42 128h22M18 142h30M62 154h16M2 166h20' stroke-width='.7'/%3E%3C/g%3E%3C/svg%3E") repeat-x;
  background-size: calc(var(--u) * 80) 100%;
  animation: speed-move 0.28s linear infinite;
}
.speed-on .fx.speed { opacity: 1; }

.scrim { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.scrim.top { top: 0; height: 26%; background: linear-gradient(to bottom, rgba(8, 12, 42, 0.55), rgba(8, 12, 42, 0)); }
.scrim.bottom { bottom: 0; height: 30%; background: linear-gradient(to top, rgba(8, 12, 42, 0.7), rgba(8, 12, 42, 0)); }

.dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(6, 8, 32, 0.55); opacity: 0; transition: opacity 0.4s; }
.dim-on .dim { opacity: 1; }

#hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#ui button, #ui a, #ui .picker { pointer-events: auto; }

/* Status: attempt chip + hearts ------------------------------------------- */

.chip {
  position: absolute;
  top: calc(var(--u) * 3 + var(--safe-t));
  left: calc(var(--u) * 4);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 3);
  font: 700 calc(var(--u) * 3.1) / 1 var(--font-label);
  letter-spacing: 0.06em;
  color: var(--yellow);
  background: var(--ink);
  border: calc(var(--u) * 0.7) solid var(--orange);
  border-radius: calc(var(--u) * 1.4);
  box-shadow: 0 0 calc(var(--u) * 3) rgba(242, 122, 26, 0.45);
}
.hearts {
  position: absolute;
  top: calc(var(--u) * 3.4 + var(--safe-t));
  right: calc(var(--u) * 4);
  display: flex;
  gap: calc(var(--u) * 1.2);
}
.heart { display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 6); }
.heart svg { width: 100%; height: 100%; fill: var(--red); filter: drop-shadow(0 calc(var(--u) * 0.5) 0 rgba(0, 0, 0, 0.5)); }
.heart.lost svg { fill: #2a2f66; filter: none; }
.heart.pop { animation: heartpop 0.45s ease-out; }

/* Banner ------------------------------------------------------------------ */

.banner {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 15 + var(--safe-t));
  padding: 0 calc(var(--u) * 5);
  text-align: center;
}
.banner .title {
  font: 700 calc(var(--u) * 9) / 1.04 var(--font-display);
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: var(--outline), 0 calc(var(--u) * 1.4) 0 rgba(0, 0, 0, 0.45), 0 0 calc(var(--u) * 5) rgba(242, 122, 26, 0.6);
}
.banner .sub {
  margin-top: calc(var(--u) * 2.6);
  font: 600 calc(var(--u) * 4.2) / 1.25 var(--font-ui);
  color: #fff;
  text-shadow: 0 1px 0 var(--ink), 0 0 calc(var(--u) * 3) var(--ink), 0 0 calc(var(--u) * 1.5) var(--ink);
}
.banner.pop .title { animation: popin 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.tone-cyan .title { color: #d6fcff; text-shadow: var(--outline), 0 0 calc(var(--u) * 2.5) var(--cyan), 0 0 calc(var(--u) * 7) var(--cyan); }
.tone-red .title { color: #ff8a52; text-shadow: var(--outline), 0 calc(var(--u) * 1.4) 0 rgba(0, 0, 0, 0.45), 0 0 calc(var(--u) * 5) rgba(255, 59, 59, 0.65); }

.toast {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  max-width: calc(var(--u) * 86);
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  font: 700 calc(var(--u) * 5.4) / 1.15 var(--font-display);
  text-align: center;
  color: #fff;
  background: rgba(10, 10, 15, 0.86);
  border: calc(var(--u) * 0.9) solid var(--red);
  border-radius: calc(var(--u) * 2.4);
  animation: popin 0.25s both;
}
.toast.cyan { border-color: var(--cyan); }

/* Buttons and the hold control ------------------------------------------- */

.actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 7 + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3);
}
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 58);
  min-height: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 8);
  border: 0;
  border-radius: calc(var(--u) * 2);
  font: 700 calc(var(--u) * 5.2) / 1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(#ffa23c, var(--orange));
  box-shadow: inset 0 calc(var(--u) * 0.7) 0 rgba(255, 255, 255, 0.5), 0 calc(var(--u) * 1.2) 0 #8a3a00, 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.5);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s;
}
.btn:active { transform: translateY(calc(var(--u) * 0.8)) scale(0.98); }

.holdwrap { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.hold {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1a2260, var(--ink));
  border: calc(var(--u) * 1) solid var(--cyan);
  box-shadow: 0 0 calc(var(--u) * 4) rgba(39, 229, 255, 0.6), inset 0 0 calc(var(--u) * 3) rgba(39, 229, 255, 0.25);
  transition: transform 0.1s, box-shadow 0.1s;
}
.hold svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.hold.down { transform: scale(0.92); box-shadow: 0 0 calc(var(--u) * 8) rgba(39, 229, 255, 0.95), inset 0 0 calc(var(--u) * 5) rgba(39, 229, 255, 0.5); }

/* Power bar --------------------------------------------------------------- */

.power {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 31 + var(--safe-b));
  transform: translateX(-50%);
  width: calc(var(--u) * 72);
}
.power-label {
  margin-bottom: calc(var(--u) * 1.4);
  text-align: center;
  font: 700 calc(var(--u) * 3) / 1 var(--font-label);
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: var(--outline);
}
.power-track {
  position: relative;
  height: calc(var(--u) * 6.4);
  overflow: hidden;
  background: var(--ink);
  border: calc(var(--u) * 0.8) solid #fff;
  border-radius: calc(var(--u) * 1.4);
}
.power-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--zone, 75%);
  right: 0;
  background: rgba(255, 200, 74, 0.28);
  border-left: calc(var(--u) * 0.6) dashed var(--yellow);
}
.power-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.power-cells { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%); }
.power-cap { display: none; position: absolute; top: 0; bottom: 0; left: var(--ceil, 100%); width: calc(var(--u) * 1); background: var(--red); }
.power.capped .power-cap { display: block; }
.power.capped .power-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ceil, 100%);
  right: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 59, 59, 0.3) 0 calc(var(--u) * 1.2), transparent calc(var(--u) * 1.2) calc(var(--u) * 2.4));
}
.power.strain .power-track { border-color: var(--red); animation: shake-sm 0.25s linear infinite; }

/* Jeans picker ------------------------------------------------------------ */

.picker {
  position: absolute;
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  bottom: calc(var(--u) * 7 + var(--safe-b));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2.4);
}
.card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 2) calc(var(--u) * 1.5) calc(var(--u) * 2.4);
  color: #fff;
  font-family: var(--font-ui);
  background: rgba(8, 12, 42, 0.9);
  border: calc(var(--u) * 0.8) solid #4a55a8;
  border-radius: calc(var(--u) * 2.4);
  cursor: pointer;
  touch-action: manipulation;
}
.card .bubble { display: grid; place-items: center; width: 62%; aspect-ratio: 44 / 58; }
.card .bubble svg { width: 100%; height: 100%; }
.card .name { display: grid; place-items: center; min-height: calc(var(--u) * 7.4); text-align: center; font: 700 calc(var(--u) * 3.3) / 1.1 var(--font-ui); }
.meter { display: block; width: 100%; height: calc(var(--u) * 2.6); overflow: hidden; background: var(--ink); border: 1px solid #4a55a8; border-radius: 999px; }
.meter-fill { display: block; height: 100%; width: calc(var(--v) * 1%); background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.card .flex { font: 700 calc(var(--u) * 2.7) / 1 var(--font-label); color: var(--yellow); }
.card:active { transform: scale(0.97); border-color: var(--cyan); }
.card:focus-visible { outline: calc(var(--u) * 0.8) solid var(--cyan); outline-offset: calc(var(--u) * 0.4); }
.card.wrong { border-color: var(--red); animation: shake-sm 0.35s linear; }
.card.tried .meter-fill { animation: fillto 0.6s ease-out; }

/* Equip / flex mode ------------------------------------------------------- */

.flexcard {
  position: absolute;
  top: calc(var(--u) * 66);
  right: calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
  background: rgba(8, 12, 42, 0.9);
  border: calc(var(--u) * 0.8) solid var(--cyan);
  border-radius: calc(var(--u) * 2);
  box-shadow: 0 0 calc(var(--u) * 4) rgba(39, 229, 255, 0.6);
  animation: popin 0.4s both;
}
.flexcard-icon { display: block; width: calc(var(--u) * 9); }
.flexcard-icon svg { display: block; width: 100%; }
.flexcard-label { font: 700 calc(var(--u) * 2.8) / 1 var(--font-ui); letter-spacing: 0.04em; }
.flexcard-val { display: flex; align-items: center; gap: calc(var(--u) * 1); font: 700 calc(var(--u) * 4.4) / 1 var(--font-label); color: var(--cyan); }
.up { display: block; width: 0; height: 0; border-left: calc(var(--u) * 1.8) solid transparent; border-right: calc(var(--u) * 1.8) solid transparent; border-bottom: calc(var(--u) * 3.2) solid var(--cyan); }

.flexbar { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 8 + var(--safe-b)); }
.flexbar-label { margin-bottom: calc(var(--u) * 2); font: 700 calc(var(--u) * 5) / 1 var(--font-display); letter-spacing: 0.06em; color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 3) var(--cyan), 0 calc(var(--u) * 0.6) 0 var(--ink); }
.flexbar-track { padding: calc(var(--u) * 0.7); background: rgba(0, 20, 40, 0.85); border: calc(var(--u) * 0.9) solid var(--cyan); border-radius: 999px; }
.flexbar-fill {
  height: calc(var(--u) * 4);
  border-radius: 999px;
  transform-origin: left;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 calc(var(--u) * 3.2), transparent calc(var(--u) * 3.2) calc(var(--u) * 4));
  animation: fillx 0.8s ease-out both;
}

/* Score + reward ---------------------------------------------------------- */

.score { position: absolute; left: 0; right: 0; top: calc(var(--u) * 33); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.score-label { font: 700 calc(var(--u) * 3.6) / 1 var(--font-label); letter-spacing: 0.2em; text-shadow: var(--outline); }
.score-val { font: 700 calc(var(--u) * 9.5) / 1 var(--font-label); color: var(--yellow); text-shadow: var(--outline), 0 0 calc(var(--u) * 5) rgba(255, 200, 74, 0.6); }
.stars { display: flex; gap: calc(var(--u) * 2); }
.star { position: relative; width: calc(var(--u) * 11); height: calc(var(--u) * 11); background: var(--ink); clip-path: var(--star); animation: popin 0.4s both; animation-delay: var(--d, 0s); }
.star::after { content: ""; position: absolute; inset: 11%; background: var(--yellow); clip-path: var(--star); }
.star.off::after { background: #2d3270; }

.sheet {
  position: absolute;
  left: calc(var(--u) * 5);
  right: calc(var(--u) * 5);
  bottom: calc(var(--u) * 6 + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  padding: calc(var(--u) * 3.6) calc(var(--u) * 4.4) calc(var(--u) * 2);
  background: rgba(8, 12, 42, 0.94);
  border: calc(var(--u) * 1) solid var(--cyan);
  border-radius: calc(var(--u) * 3);
  box-shadow: 0 0 calc(var(--u) * 6) rgba(39, 229, 255, 0.5), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  animation: sheetin 0.5s cubic-bezier(0.2, 1, 0.3, 1) both;
}
.sheet-eyebrow { font: 700 calc(var(--u) * 3.3) / 1 var(--font-label); letter-spacing: 0.2em; color: var(--cyan); }
.sheet-big { font: 700 calc(var(--u) * 10.4) / 1 var(--font-label); color: var(--yellow); text-shadow: var(--outline), 0 0 calc(var(--u) * 6) rgba(242, 122, 26, 0.7); }
.code {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3.6);
  color: var(--yellow);
  background: var(--ink);
  border: calc(var(--u) * 0.8) dashed var(--yellow);
  border-radius: calc(var(--u) * 2);
  cursor: pointer;
  touch-action: manipulation;
}
/* The coupon code stays in a plain monospace so 1/I, 5/S and O/0 can't be misread. */
.code-text { font: 800 calc(var(--u) * 5.4) / 1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; }
.code-copy { font: 700 calc(var(--u) * 2.8) / 1 var(--font-ui); color: #fff; opacity: 0.85; }
.sheet .btn { width: 100%; min-height: calc(var(--u) * 12); }
.sheet-big .pct { font-family: var(--font-display); font-size: 1.15em; }
.sheet-meta { font: 700 calc(var(--u) * 2.7) / 1 var(--font-label); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.8); }
.sheet-row { display: flex; justify-content: space-between; width: 100%; }
.link {
  appearance: none;
  min-height: calc(var(--u) * 9);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1);
  font: 700 calc(var(--u) * 3.4) / 1 var(--font-ui);
  letter-spacing: 0.04em;
  color: #fff;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: calc(var(--u) * 0.8);
  cursor: pointer;
  touch-action: manipulation;
}

/* Loader + debug ---------------------------------------------------------- */

#loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  background: var(--navy-dk);
  transition: opacity 0.35s;
}
#loader.done { opacity: 0; pointer-events: none; }
.loader-brand { font: 700 calc(var(--u) * 9) / 1 var(--font-display); letter-spacing: 0.2em; color: var(--orange); text-shadow: 0 0 calc(var(--u) * 5) rgba(242, 122, 26, 0.6); }
.loader-bar { width: calc(var(--u) * 50); height: calc(var(--u) * 2); overflow: hidden; background: #1a2260; border-radius: 999px; }
.loader-bar i { display: block; height: 100%; background: var(--orange); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 0.2s; }

#debug { position: absolute; left: 4px; bottom: 4px; z-index: 11; padding: 3px 5px; font: 10px / 1.3 ui-monospace, monospace; color: #0f0; background: rgba(0, 0, 0, 0.7); white-space: pre; pointer-events: none; }

/* Motion ------------------------------------------------------------------ */

@keyframes popin { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes glow { 50% { box-shadow: 0 0 calc(var(--u) * 7) rgba(39, 229, 255, 1); } }
@keyframes sheetin { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
@keyframes heartpop { 30% { transform: scale(1.6) rotate(-8deg); } }
@keyframes fillto { from { width: 0; } }
@keyframes fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes speed-move { to { transform: translateX(calc(var(--u) * -13)); } }
@keyframes shake-sm {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(calc(var(--u) * -0.8), calc(var(--u) * 0.4)); }
  40% { transform: translate(calc(var(--u) * 0.8), calc(var(--u) * -0.4)); }
  60% { transform: translate(calc(var(--u) * -0.6), calc(var(--u) * 0.5)); }
  80% { transform: translate(calc(var(--u) * 0.6), calc(var(--u) * -0.3)); }
}
@keyframes shake-md {
  0%, 100% { transform: translate(0); }
  15% { transform: translate(calc(var(--u) * -1.8), calc(var(--u) * 1)); }
  35% { transform: translate(calc(var(--u) * 1.8), calc(var(--u) * -1.2)); }
  55% { transform: translate(calc(var(--u) * -1.4), calc(var(--u) * 1)); }
  75% { transform: translate(calc(var(--u) * 1.2), calc(var(--u) * -0.8)); }
}
@keyframes shake-lg {
  0%, 100% { transform: translate(0); }
  12% { transform: translate(calc(var(--u) * -3), calc(var(--u) * 1.6)); }
  30% { transform: translate(calc(var(--u) * 3), calc(var(--u) * -1.8)); }
  48% { transform: translate(calc(var(--u) * -2.4), calc(var(--u) * 1.6)); }
  66% { transform: translate(calc(var(--u) * 2), calc(var(--u) * -1.2)); }
  84% { transform: translate(calc(var(--u) * -1), calc(var(--u) * 0.8)); }
}
.shake-sm { animation: shake-sm 0.3s linear; }
.shake-md { animation: shake-md 0.45s linear; }
.shake-lg { animation: shake-lg 0.6s linear; }

@media (prefers-reduced-motion: reduce) {
  .shake-sm, .shake-md, .shake-lg, .fx.speed::before { animation: none; }
  #cam { transition: none !important; }
}

/* Sound button, always on screen. */
#mute {
  position: absolute;
  z-index: 6;
  top: calc(var(--u) * 2.6 + var(--safe-t));
  left: 50%;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 9.4);
  height: calc(var(--u) * 9.4);
  padding: 0;
  color: #fff;
  background: rgba(10, 10, 15, 0.82);
  border: calc(var(--u) * 0.6) solid var(--cyan);
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  touch-action: manipulation;
}
#mute svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#mute .slash { display: none; stroke: var(--red); }
#mute.off { border-color: #6a6f9a; color: #9aa0cc; }
#mute.off .waves { display: none; }
#mute.off .slash { display: block; }

/* Being caught: the edges of the screen pulse red. */
.fx.danger { z-index: 4; opacity: 0; transition: opacity 0.25s; background: radial-gradient(ellipse at 50% 55%, rgba(120, 0, 10, 0) 42%, rgba(190, 8, 20, 0.5) 100%); }
.danger-on .fx.danger { opacity: 1; animation: dangerpulse 0.7s ease-in-out infinite; }
@keyframes dangerpulse { 50% { opacity: 0.55; } }

/* "CRUNCH!" */
.comic { position: absolute; left: 50%; top: 31%; width: calc(var(--u) * 84); transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none; animation: comicpop 0.4s cubic-bezier(0.2, 1.7, 0.4, 1) both; }
.comic svg { display: block; width: 100%; overflow: visible; }
.comic-text { font: 700 23px var(--font-label); fill: #FFF6C2; stroke: #2A0A06; stroke-width: 4px; paint-order: stroke; letter-spacing: 0.04em; }
@keyframes comicpop { from { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(0.2); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }