:root {
  --bg-dark: #081014;
  --ink: #eef3f6;
  --muted: #adc0ce;
  --accent: #d4be88;
  --control-size: 48px;
  --lamp-base-top: #060d12;
  --lamp-base-bottom: #050a0f;

  /* Posición del foco principal (x relativo al viewport, y desde arriba con valores +/-). */
  --lamp-x: 50%;
  --lamp-y: 65%;

  /* Geometría del arco/parábola superior. */
  --lamp-cone-width: 64vw;
  --lamp-cone-height: 122vh;
  --lamp-cone-arch: 102%;

  /* Borde superior difuso (parábola). */
  --lamp-cone-edge-blur: 16px;
  --lamp-cone-opacity: 0.9;

  /* Desvanecido inferior del haz (más bajo = se desvanece antes). */
  --lamp-cone-bottom-fade-start: 27%;
  --lamp-cone-bottom-fade-end: 100%;

  /* Intensidad y color del haz. */
  --lamp-cone-core: rgba(223, 241, 255, 0.72);
  --lamp-cone-mid: rgba(154, 196, 221, 0.42);
  --lamp-cone-tail: rgba(64, 95, 111, 0.1);

  /* Charco secundario sobre la mesa. */
  --lamp-pool-width: 100vw;
  --lamp-pool-height: 92vh;
  --lamp-pool-offset-y: 12%;
  --lamp-pool-blur: 22px;
  --lamp-pool-opacity: 0.62;
  --lamp-pool-core: rgba(176, 215, 238, 0.33);
  --lamp-pool-mid: rgba(104, 148, 173, 0.19);
  --lamp-pool-tail: rgba(8, 15, 20, 0);

  --success-glow-rise-ms: 3000ms;
  --success-glow-fall-ms: 1000ms;
  --success-feedback-ms: calc(var(--success-glow-rise-ms) + var(--success-glow-fall-ms));
  --answer-wrong-feedback-ms: 320ms;

  --card-w: clamp(320px, 90vw, 720px);
  --artifact-count: 0;
  /* Runtime-synced from CONFIG.artifacts.widthScale (legacy fallback) in app.js. */
  --artifact-width-scale: 1.2;
  /* Runtime-synced from CONFIG.artifacts.noteWidthScale/photoWidthScale/soundWidthScale in app.js. */
  --artifact-note-width-scale: 1.2;
  --artifact-photo-width-scale: 1.2;
  --artifact-sound-width-scale: 0.6;
  /* Runtime-synced from CONFIG.artifacts.layoutWidthScale in app.js. */
  --artifact-layout-width-scale: 1.35;
  /* Artifact placement and reveal choreography (fixed lengths, independent of artifact height). */
  --artifact-grid-gap: clamp(0.6rem, 1.8vw, 1rem);
  /* Hidden/start and settled share the same baseline; visible rises upward from there. */
  --artifact-entry-rise-y: clamp(28px, 6vw, 66px);
  --artifact-entry-hidden-y: 0px;
  --artifact-entry-visible-y: calc(0px - var(--artifact-entry-rise-y));
  --artifact-entry-settled-y: 0px;
  --sound-label-left: 50%;
  --sound-label-top: 62.5%;
  --sound-label-width: 60%;
  --sound-label-height: 13%;
  --sound-label-rotation: 0deg;
  /* Photo framing + zoom sizing tunables. */
  --photo-overlay-viewport-padding: clamp(10px, 1.2vw, 14px);
  --photo-frame-padding: clamp(0.4rem, 1.25vw, 0.66rem);
  --photo-frame-padding-zoom: clamp(0.22rem, 0.75vw, 0.42rem);
  --photo-frame-border-width: 1px;
  --photo-image-border-width: 1px;
  --photo-overlay-open-ms: 280ms;
  --photo-overlay-close-ms: 220ms;
  /* Fullscreen note typography + spacing tunables. */
  --note-overlay-padding: clamp(0.95rem, 2.2vw, 1.8rem);
  --note-overlay-font-size: clamp(1.26rem, 0.94rem + 1.04vw, 1.7rem);
  --note-overlay-line-height: 1.48;
  --level-nav-slide-extra-distance: 10vw;
  --level-nav-slide-ms: 360ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(150% 110% at 50% 0%, rgba(15, 29, 38, 0.56), rgba(7, 13, 19, 0) 58%),
    linear-gradient(180deg, var(--lamp-base-top) 0%, var(--lamp-base-bottom) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

.background-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.desk-vignette,
.desk-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.lamp-cone,
.lamp-pool {
  position: fixed;
  pointer-events: none;
}

.lamp-cone {
  top: var(--lamp-y);
  left: var(--lamp-x);
  width: var(--lamp-cone-width);
  height: var(--lamp-cone-height);
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 0 0 / var(--lamp-cone-arch) var(--lamp-cone-arch) 0 0;
  background: radial-gradient(ellipse at 50% 0%, var(--lamp-cone-core) 0%, var(--lamp-cone-mid) 36%, var(--lamp-cone-tail) 74%, rgba(6, 12, 16, 0) 100%);
  filter: blur(var(--lamp-cone-edge-blur));
  opacity: var(--lamp-cone-opacity);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.98) var(--lamp-cone-bottom-fade-start), rgba(0, 0, 0, 0) var(--lamp-cone-bottom-fade-end));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.98) var(--lamp-cone-bottom-fade-start), rgba(0, 0, 0, 0) var(--lamp-cone-bottom-fade-end));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.lamp-pool {
  top: calc(var(--lamp-y) + var(--lamp-pool-offset-y));
  left: var(--lamp-x);
  width: var(--lamp-pool-width);
  height: var(--lamp-pool-height);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 24%, var(--lamp-pool-core) 0%, var(--lamp-pool-mid) 35%, var(--lamp-pool-tail) 76%);
  filter: blur(var(--lamp-pool-blur));
  opacity: var(--lamp-pool-opacity);
}

.desk-vignette {
  background: radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.28) 66%, rgba(0, 0, 0, 0.7) 100%);
}

.desk-grain {
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 18% 35%, rgba(255, 255, 255, 0.2) 0 0.7px, transparent 1px),
    radial-gradient(circle at 72% 72%, rgba(255, 255, 255, 0.18) 0 0.6px, transparent 1px),
    radial-gradient(circle at 44% 66%, rgba(255, 255, 255, 0.16) 0 0.6px, transparent 1px);
  background-size: 3px 3px, 4px 4px, 5px 5px;
  mix-blend-mode: soft-light;
}

.dust-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  opacity: 0.86;
  mix-blend-mode: screen;
}

.success-burst-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 120;
  opacity: 1;
  mix-blend-mode: screen;
}

.top-bar,
.game-shell,
.bottom-controls,
.ui-error {
  position: relative;
  z-index: 10;
}

.top-bar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 20;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 14, 18, 0.65);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.nav-button {
  width: var(--control-size);
  height: var(--control-size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
}

.nav-button[hidden] {
  display: none;
}

.level-indicator {
  width: var(--control-size);
  height: var(--control-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 190, 136, 0.6);
  background: linear-gradient(180deg, rgba(38, 46, 51, 0.9), rgba(18, 24, 27, 0.9));
  color: var(--accent);
  font-weight: 700;
}

.game-shell {
  width: min(880px, 92vw);
  margin: 92px auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.game-shell-slide-snapshot {
  position: fixed;
  pointer-events: none;
  z-index: 25;
}

.answer-zone {
  width: min(var(--card-w), 100%);
  margin-top: 0;
  padding-inline: 0.4rem;
  position: relative;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 920ms ease, transform 920ms ease, visibility 0s linear 920ms;
}

/* Contenedor de layout: mantiene geometría, pero sin panel visual visible. */
.scene {
  --scene-min-height: clamp(255px, calc(30vw + (var(--artifact-count) * 2.6rem)), 760px);
  width: 100%;
  min-height: var(--scene-min-height);
  border-radius: 18px;
  border: 0;
  background: transparent;
  padding: 1.4rem 1.2rem 1rem;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1.2rem;
  box-shadow: none;
  position: relative;
}

.envelope-stage {
  width: var(--card-w);
  max-width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 20%;
  position: relative;
  padding-bottom: 1.8rem;
}

.envelope-shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(82%, 560px);
  height: clamp(72px, 15vw, 118px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.envelope {
  --env-back-top: #bcae97;
  --env-back-bottom: #8f7d65;
  --env-panel-border: rgba(95, 72, 49, 0.35);
  --env-flap-border: rgba(88, 66, 45, 0.35);
  --env-pocket-top: rgba(176, 153, 124, 0.78);
  --env-pocket-bottom: rgba(123, 103, 80, 0.72);
  --env-front-top: #d8cfbf;
  --env-front-bottom: #a5967f;
  --env-flap-top: #dacdb8;
  --env-flap-mid: #baa98f;
  --env-flap-bottom: #9c896f;
  width: var(--card-w);
  max-width: 100%;
  aspect-ratio: 1.8 / 1;
  min-height: 178px;
  position: relative;
  transform-style: preserve-3d;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.34));
  z-index: 1;
  transform: translateY(0) rotateX(0deg);
  transition: transform 280ms ease;
}

.envelope.is-picked-up {
  transform: translateY(-10px) rotateX(5deg);
}

.envelope-back,
.envelope-pocket,
.envelope-front,
.envelope-flap,
.envelope-contents {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 12px;
}

.envelope-back {
  top: 0;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, var(--env-back-top), var(--env-back-bottom));
  z-index: 1;
}

.envelope-pocket,
.envelope-front {
  top: 0;
  height: 100%;
  border: 1px solid var(--env-panel-border);
}

.envelope-pocket {
  z-index: 2;
  background: linear-gradient(160deg, var(--env-pocket-top), var(--env-pocket-bottom));
  clip-path: polygon(0 100%, 0 0, 50% 54%, 100% 0, 100% 100%);
}

.envelope-contents {
  top: 0;
  height: 100%;
  left: 50%;
  width: min(calc(100% * var(--artifact-layout-width-scale)), 100vw);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  transform: translateX(-50%);
  gap: var(--artifact-grid-gap);
  padding: clamp(1rem, 4vw, 1.5rem);
  overflow: visible;
}

.envelope.contents-front .envelope-contents {
  z-index: 6;
}

.envelope.contents-front .envelope-front {
  z-index: 3;
}

.envelope-front {
  z-index: 4;
  background: linear-gradient(165deg, var(--env-front-top), var(--env-front-bottom));
  clip-path: polygon(0 100%, 0 0, 50% 54%, 100% 0, 100% 100%);
}

.envelope-flap {
  top: 0;
  height: 55%;
  transform-origin: 50% 0;
  transform: rotateX(0deg);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  border: 1px solid var(--env-flap-border);
  background: linear-gradient(180deg, var(--env-flap-top), var(--env-flap-mid) 72%, var(--env-flap-bottom));
  z-index: 5;
  transition: transform 420ms cubic-bezier(0.24, 0.72, 0.26, 1);
}

.envelope.is-open .envelope-flap {
  transform: rotateX(-174deg);
}

.envelope.is-finale {
  --env-back-top: #dfc98f;
  --env-back-bottom: #986f29;
  --env-panel-border: rgba(99, 67, 17, 0.5);
  --env-flap-border: rgba(103, 70, 16, 0.56);
  --env-pocket-top: rgba(232, 194, 106, 0.82);
  --env-pocket-bottom: rgba(161, 118, 44, 0.74);
  --env-front-top: #f5dd9a;
  --env-front-bottom: #8f6726;
  --env-flap-top: #f2d793;
  --env-flap-mid: #c99742;
  --env-flap-bottom: #8c6223;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 16px rgba(198, 155, 74, 0.28));
}
.envelope.is-finale .envelope-back {
  border-color: rgba(125, 88, 26, 0.58);
}

.envelope.flap-behind-artifacts .envelope-flap {
  z-index: 2;
}

.artifact {
  --artifact-z: 0px;
  --artifact-rotation: 0deg;
  --artifact-offset-x: 0px;
  --artifact-offset-y: 0px;
  --artifact-hidden-y: var(--artifact-entry-hidden-y);
  --artifact-visible-y: var(--artifact-entry-visible-y);
  --artifact-settled-y: var(--artifact-entry-settled-y);
  --artifact-hover-scale: 1;
  --artifact-hover-tilt: 0deg;
  width: min(100%, 100%);
  margin: 0;
  position: relative;
  white-space: normal;
  overflow-wrap: anywhere;
  justify-self: center;
  align-self: start;
  transform-origin: 50% 0;
  transform: translate3d(var(--artifact-offset-x), calc(var(--artifact-hidden-y) + var(--artifact-offset-y)), var(--artifact-z))
    rotate(calc(var(--artifact-rotation) + var(--artifact-hover-tilt))) scale(calc(0.985 * var(--artifact-hover-scale)));
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.22, 0.7, 0.2, 1), opacity 260ms ease, box-shadow 220ms ease;
  z-index: 3;
}

.artifact.artifact-visible {
  transform: translate3d(var(--artifact-offset-x), calc(var(--artifact-visible-y) + var(--artifact-offset-y)), var(--artifact-z))
    rotate(calc(var(--artifact-rotation) + var(--artifact-hover-tilt))) scale(var(--artifact-hover-scale));
  opacity: 1;
}

.artifact.artifact-settled {
  transform: translate3d(var(--artifact-offset-x), calc(var(--artifact-settled-y) + var(--artifact-offset-y)), var(--artifact-z))
    rotate(calc(var(--artifact-rotation) + var(--artifact-hover-tilt))) scale(var(--artifact-hover-scale));
}

.artifact.artifact-front {
  --artifact-z: 128px;
  z-index: 6;
}

.artifact-note {
  position: relative;
  width: clamp(calc(230px * var(--artifact-note-width-scale)), 100%, calc(390px * var(--artifact-note-width-scale)));
  padding: 1rem;
  border-radius: 7px;
  border: 1px solid rgba(98, 77, 45, 0.24);
  background:
    linear-gradient(180deg, rgba(252, 246, 231, 0.94), rgba(238, 227, 201, 0.95));
  color: #201913;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 252, 242, 0.5) inset;
  cursor: pointer;
  outline: none;
}

.artifact-note-typed {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.artifact-note-typed .typed-char {
  color: transparent;
  transition: color 120ms ease;
}

.artifact-note-typed .typed-char.is-visible {
  color: #201913;
}

.artifact-photo {
  width: clamp(calc(238px * var(--artifact-photo-width-scale)), 100%, calc(430px * var(--artifact-photo-width-scale)));
  padding: var(--photo-frame-padding);
  border-radius: 4px;
  border: var(--photo-frame-border-width) solid rgba(35, 30, 26, 0.65);
  background: linear-gradient(180deg, rgba(247, 247, 241, 0.96), rgba(236, 234, 226, 0.92));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;
  overflow: visible;
  cursor: pointer;
  outline: none;
}

.artifact-sound {
  width: clamp(calc(238px * var(--artifact-sound-width-scale)), 100%, calc(430px * var(--artifact-sound-width-scale)));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.artifact-sound-image {
  width: 100%;
  display: block;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.36));
}

.artifact-sound-label {
  position: absolute;
  left: var(--sound-label-left);
  top: var(--sound-label-top);
  width: var(--sound-label-width);
  height: var(--sound-label-height);
  transform: translate(-50%, -50%) rotate(var(--sound-label-rotation));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  color: rgba(42, 35, 29, 0.9);
  font-family: 'Courier New', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: var(--sound-label-font-size, 17px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

.artifact-sound-control {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(62px, 11vw, 84px);
  height: clamp(62px, 11vw, 84px);
  padding: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 236, 0.72);
  background: rgba(12, 17, 22, 0.78);
  color: #f2ecd7;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.36);
  z-index: 2;
}

.artifact-sound.is-playing .artifact-sound-control {
  background: rgba(120, 26, 26, 0.86);
  border-color: rgba(255, 221, 184, 0.9);
  color: #fff5df;
}

.artifact-sound.is-paused .artifact-sound-control {
  background: rgba(28, 52, 75, 0.84);
}

@media (hover: hover) and (pointer: fine) {
  .artifact-sound.artifact-settled:hover,
  .artifact-sound.artifact-settled:focus-within {
    --artifact-hover-scale: 1.024;
  }

  .artifact-sound.artifact-settled:hover .artifact-sound-image,
  .artifact-sound.artifact-settled:focus-within .artifact-sound-image {
    filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.43));
  }
}

.artifact-photo-image {
  width: 100%;
  display: block;
  height: auto;
  object-fit: contain;
  border: var(--photo-image-border-width) solid rgba(24, 24, 24, 0.72);
}

@media (hover: hover) and (pointer: fine) {
  .artifact-note.artifact-settled:hover,
  .artifact-note.artifact-settled:focus-visible {
    --artifact-hover-scale: 1.035;
    --artifact-hover-tilt: -1.2deg;
    box-shadow:
      0 20px 38px rgba(0, 0, 0, 0.42),
      0 1px 0 rgba(255, 252, 242, 0.56) inset;
  }

  .artifact-photo.artifact-settled:hover,
  .artifact-photo.artifact-settled:focus-visible {
    --artifact-hover-scale: 1.035;
    --artifact-hover-tilt: -1.2deg;
    box-shadow:
      0 20px 38px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.28) inset;
  }
}

.artifact-photo.is-photo-origin,
.artifact-note.is-photo-origin {
  opacity: 0;
  pointer-events: none;
}

.photo-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--photo-overlay-close-ms) ease;
}

.photo-overlay[hidden] {
  display: none;
}

.photo-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
  transition-duration: var(--photo-overlay-open-ms);
}

.photo-overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 8, 12, 0.82);
  cursor: zoom-out;
}

.photo-overlay-frame {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: auto;
  cursor: zoom-out;
  padding: var(--photo-frame-padding-zoom);
}

.photo-overlay-frame.artifact-note {
  padding: 0;
}

.photo-overlay[data-overlay-type="note"] .photo-overlay-image {
  display: none !important;
}

.photo-overlay[data-overlay-type="photo"] .photo-overlay-note {
  display: none !important;
}

.photo-overlay-frame.is-animating {
  will-change: transform;
}

.photo-overlay-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.photo-overlay-note {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--note-overlay-padding);
  font-size: var(--note-overlay-font-size);
  line-height: var(--note-overlay-line-height);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.photo-overlay-note[hidden] {
  display: none;
}

.answer-zone.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.answer-zone[hidden] {
  display: none;
}

.answer-input {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 14, 18, 0.8);
  color: var(--ink);
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
}

.answer-input.is-success {
  color: #92f7ac;
  animation: success-input-glow var(--success-feedback-ms) ease-in-out forwards;
}

.answer-input.is-wrong {
  animation: answer-input-wrong var(--answer-wrong-feedback-ms) cubic-bezier(0.36, 0.08, 0.19, 0.97) both;
}

.envelope.is-success .envelope-front,
.envelope.is-success .envelope-flap,
.envelope.is-success .envelope-pocket {
  animation: success-envelope-highlight var(--success-feedback-ms) ease-in-out forwards;
}

.answer-zone.is-success-feedback {
  animation: success-answer-zone-fade var(--success-feedback-ms) ease-in-out forwards;
}

@keyframes answer-input-wrong {
  0% {
    transform: translateX(0);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(10, 14, 18, 0.8);
    box-shadow: 0 0 0 rgba(255, 71, 71, 0);
  }

  14% {
    transform: translateX(-5px);
  }

  30% {
    transform: translateX(5px);
  }

  46% {
    transform: translateX(-4px);
  }

  62% {
    transform: translateX(4px);
  }

  78% {
    transform: translateX(-2px);
  }

  90% {
    transform: translateX(2px);
    border-color: rgba(255, 107, 107, 0.95);
    background: rgba(66, 15, 19, 0.9);
    box-shadow: 0 0 0.8rem rgba(255, 71, 71, 0.34);
  }

  100% {
    transform: translateX(0);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(10, 14, 18, 0.8);
    box-shadow: 0 0 0 rgba(255, 71, 71, 0);
  }
}

@keyframes success-input-glow {
  0% {
    box-shadow: 0 0 0 rgba(214, 189, 128, 0);
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(10, 14, 18, 0.8);
  }

  1% {
    border-color: rgba(124, 233, 151, 0.95);
    background: rgba(18, 56, 34, 0.9);
    box-shadow: 0 0 0.7rem rgba(82, 232, 129, 0.34);
  }

  75% {
    box-shadow: 0 0 1.2rem rgba(239, 205, 117, 0.82), 0 0 2.6rem rgba(235, 188, 82, 0.54), 0 0 3.6rem rgba(115, 175, 216, 0.32);
    transform: scale(1.022);
    border-color: rgba(143, 237, 166, 0.98);
    background: rgba(24, 67, 40, 0.9);
  }

  100% {
    box-shadow: 0 0 0 rgba(214, 189, 128, 0);
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(10, 14, 18, 0.8);
  }
}

@keyframes success-envelope-highlight {
  0% {
    filter: brightness(1) saturate(1);
  }

  75% {
    filter: brightness(1.14) saturate(1.2);
  }

  100% {
    filter: brightness(1) saturate(1);
  }
}

@keyframes success-answer-zone-fade {
  0% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.bottom-controls {
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mute-button,
.restart-button {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(11, 16, 20, 0.7);
  color: var(--ink);
  cursor: pointer;
}

.mute-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.restart-button {
  min-height: 44px;
  border-radius: 999px;
  padding: 0.52rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.mute-button.is-muted {
  opacity: 0.72;
}

.ui-error {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  max-width: min(720px, 92vw);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 127, 127, 0.45);
  background: rgba(58, 14, 20, 0.92);
  color: #ffdfe2;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 680px) {
  :root {
    --artifact-entry-rise-y: clamp(22px, 8vw, 44px);
  }

  .scene {
    padding-top: 1.2rem;
  }

  .artifact-note {
    width: clamp(calc(220px * var(--artifact-note-width-scale)), 100%, calc(340px * var(--artifact-note-width-scale)));
  }

  .artifact-photo {
    width: clamp(calc(230px * var(--artifact-photo-width-scale)), 100%, calc(360px * var(--artifact-photo-width-scale)));
  }

  .artifact-sound {
    width: clamp(calc(230px * var(--artifact-sound-width-scale)), 100%, calc(360px * var(--artifact-sound-width-scale)));
  }
}