* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0a0805;
  font-family: 'VT323', monospace;
  color: #c5b8a0;
  touch-action: manipulation;
}

.scene {
  position: fixed;
  inset: 0;
  background: #0a0805;
  --wind-x: 0;
  --wind-y: 0;
}

.scene .background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  pointer-events: none;
  user-select: none;
}

/* Cinematic vignette + very subtle film grain */
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at center, transparent 26%, rgba(0,0,0,0.38) 53%, rgba(0,0,0,0.8) 82%),
    repeating-radial-gradient(circle at 40% 35%, rgba(255,255,255,0.018) 0.6px, transparent 2.2px);
  background-size: auto, 3.5px 3.5px;
  pointer-events: none;
  z-index: 3;
  animation: grain 3.1s steps(4) infinite;
  mix-blend-mode: screen;
}

@keyframes grain {
  0% { transform: translate(0,0); }
  100% { transform: translate(0.6px, -0.4px); }
}

/* The machine screen - repositioned to the right of the machine so it doesn't cover the ashtray */
.machine-screen {
  position: absolute;
  top: 18%;
  left: 55%;
  width: 40%;
  height: 25%;
  background: #0a2a1f;
  border: 5px solid #0f211a;
  box-shadow: 
    inset 0 0 0 3px #1a3329,
    inset 0 0 50px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  z-index: 10;
  cursor: pointer;
  image-rendering: pixelated;
}

.machine-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.32) 2px,
    rgba(0, 0, 0, 0.32) 3px
  );
  pointer-events: none;
  z-index: 2;
}

.screen-content {
  position: relative;
  z-index: 1;
  padding: 8px 12px;
  font-size: clamp(14px, 3.8vw, 20px);
  line-height: 1.15;
  color: #3af5a8;
  text-shadow: 0 0 4px rgba(58, 245, 168, 0.35);
  height: 100%;
  overflow: hidden;
  user-select: none;
}

/* LED — small status lamp just under / beside the MESSAGE key */
.led {
  position: absolute;
  top: 59.2%;
  left: 76.8%;
  width: 1.05%;
  height: 1.5%;
  min-width: 8px;
  min-height: 8px;
  background: #9f1a1a;
  border-radius: 50%;
  box-shadow: 0 0 6px #b71c1c, 0 0 15px #b71c1c, 0 0 28px rgba(183, 28, 28, 0.35);
  z-index: 20;
  cursor: pointer;
  transition: all 0.12s ease;
}

.led.on {
  animation: led-glow 1.15s infinite ease-in-out, led-flicker 2.6s infinite ease-in-out;
}

.led.off {
  background: #3a1f1f;
  box-shadow: none;
  opacity: 0.42;
}

@keyframes led-glow {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}
@keyframes led-flicker {
  0%,100% { box-shadow: 0 0 6px #b71c1c, 0 0 15px #b71c1c, 0 0 28px rgba(183,28,28,0.35); }
  9% { box-shadow: 0 0 3px #b71c1c, 0 0 8px #b71c1c; }
  14% { box-shadow: 0 0 10px #b71c1c, 0 0 20px #b71c1c, 0 0 34px rgba(183,28,28,0.5); }
}

/* Extra living glow on the machine screen bezel (machine sits on the RIGHT) */
.machine-glow {
  position: absolute;
  top: 22%;
  left: 48%;
  width: 42%;
  height: 28%;
  background: radial-gradient(ellipse at 55% 40%, rgba(58,245,168,0.07) 0%, transparent 55%);
  z-index: 9;
  pointer-events: none;
  opacity: 0.55;
  animation: machine-flicker 4.1s infinite ease-in-out;
}

@keyframes machine-flicker {
  0%,100% { opacity: 0.48; }
  6% { opacity: 0.82; }
  10% { opacity: 0.35; }
  48% { opacity: 0.6; }
}

/* World text — ambient narration must be legible */
.world-text {
  position: absolute;
  bottom: 9.5%;
  left: 4%;
  right: 4%;
  font-size: clamp(15px, 2.1vw, 20px);
  letter-spacing: 2px;
  color: #3af5a8;
  text-shadow: 0 0 6px rgba(58, 245, 168, 0.35);
  z-index: 15;
  pointer-events: none;
  user-select: none;
  opacity: 0.78;
  text-align: center;
}

/* Diegetic zones — calibrated to hero-enhanced.jpg (ashtray LEFT, machine RIGHT) */
.zone {
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.ashtray {
  top: 48%;
  left: 14%;
  width: 28%;
  height: 32%;
}

.tape {
  top: 38%;
  left: 48%;
  width: 18%;
  height: 18%;
}

/* Atmosphere canvas — particle smoke + dust over the photograph */
.atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  /* normal blend — screen was washing faint smoke into invisibility */
  mix-blend-mode: normal;
}

/* Cigarette ember — sits on the red tip of the cigarette */
.ember {
  position: absolute;
  top: 44.8%;
  left: 27.6%;
  width: 1.1%;
  height: 1.4%;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6a2a 0%, #c23a1a 45%, transparent 72%);
  box-shadow:
    0 0 6px 2px rgba(255, 90, 30, 0.75),
    0 0 18px 6px rgba(200, 40, 10, 0.35);
  z-index: 8;
  pointer-events: none;
  animation: ember-breathe 2.4s ease-in-out infinite;
}

@keyframes ember-breathe {
  0%, 100% { opacity: 0.72; transform: scale(0.92); filter: brightness(0.95); }
  35% { opacity: 1; transform: scale(1.08); filter: brightness(1.25); }
  55% { opacity: 0.8; transform: scale(0.96); filter: brightness(1.05); }
  78% { opacity: 1; transform: scale(1.12); filter: brightness(1.35); }
}

/* MESSAGE button pulse — calibrated to the glowing red key on hero-enhanced */
.message-pulse {
  position: absolute;
  top: 51.5%;
  left: 73.5%;
  width: 7%;
  height: 7.2%;
  border-radius: 8%;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 40, 40, 0.22) 0%, transparent 68%);
  box-shadow: 0 0 22px 8px rgba(200, 20, 20, 0.18);
  animation: message-throb 2.8s ease-in-out infinite;
}

/* Invisible hit target over the physical MESSAGE key */
.message-key {
  position: absolute;
  top: 51.5%;
  left: 73.5%;
  width: 7%;
  height: 7.2%;
  z-index: 22;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8%;
}

.message-key:focus-visible {
  outline: 2px solid #3af5a8;
  outline-offset: 3px;
}

.message-key.is-armed {
  box-shadow: 0 0 0 2px rgba(58, 245, 168, 0.55), 0 0 18px rgba(255, 40, 40, 0.45);
}

.message-key.is-recording {
  box-shadow: 0 0 0 2px #c23a3a, 0 0 22px rgba(194, 58, 58, 0.7);
}

@keyframes message-throb {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50% { opacity: 0.95; transform: scale(1.04); }
}

body.is-speaking .message-pulse {
  animation-duration: 0.55s;
  opacity: 1;
}

body.awaiting-message .message-pulse {
  animation-duration: 0.9s;
  opacity: 1;
  box-shadow: 0 0 28px 12px rgba(255, 50, 50, 0.35);
}

/* Floating messages — now top-right, larger, cinematic, no longer fighting the ashtray */
.world-message {
  position: absolute;
  background: rgba(8, 16, 12, 0.9);
  border: 1px solid #243d33;
  color: #3af5a8;
  padding: 13px 17px;
  font-size: 14px;
  line-height: 1.22;
  max-width: 250px;
  z-index: 30;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  right: 4.2%;
  top: 12.5%;
}

.world-message.visible {
  display: block;
}

.world-message.alt-position {
  top: 21%;
  right: 5.8%;
}

/* Discovery counter */
.discovery {
  position: absolute;
  bottom: 4.2%;
  right: 4%;
  font-size: clamp(12px, 1.5vw, 14px);
  letter-spacing: 1.5px;
  color: #3af5a8;
  opacity: 0.55;
  z-index: 25;
  pointer-events: none;
  text-align: right;
}

/* Phosphor burn — previous screen text ghosts under the new one */
.phosphor-trail {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 8px 12px;
  font-size: clamp(14px, 3.8vw, 20px);
  line-height: 1.15;
  color: #3af5a8;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  filter: blur(0.4px);
}

.phosphor-trail.burn {
  animation: phosphor-fade 2.8s ease-out forwards;
}

@keyframes phosphor-fade {
  0% { opacity: 0.28; }
  40% { opacity: 0.14; }
  100% { opacity: 0; }
}

.line-ref {
  position: absolute;
  bottom: 1.2%;
  left: 4%;
  z-index: 42;
  font-family: 'VT323', monospace;
  font-size: clamp(12px, 1.6vw, 15px);
  letter-spacing: 1.5px;
  background: transparent;
  border: none;
  color: #3af5a8;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.6s ease;
}

.line-ref.visible {
  opacity: 0.7;
  pointer-events: auto;
}

.line-ref.visible:hover {
  opacity: 1;
}

/* Journey controls — earned chrome, readable */
.journey-btn,
.lens-nudge {
  position: absolute;
  z-index: 42;
  font-family: 'VT323', monospace;
  font-size: clamp(13px, 1.7vw, 16px);
  letter-spacing: 1.5px;
  background: rgba(8, 16, 12, 0.88);
  border: 1px solid #243d33;
  color: #3af5a8;
  padding: 7px 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.1s ease;
}

.journey-btn:hover,
.lens-nudge:hover {
  background: rgba(12, 22, 16, 0.96);
  border-color: #3a5f4f;
}

.lens-nudge {
  bottom: 4%;
  left: 4%;
  opacity: 0.75;
}

.call-log {
  bottom: 4%;
  left: 16%;
}

.journal {
  bottom: 4%;
  left: 28%;
}

.playback {
  bottom: 4%;
  left: 44%;
  color: #c23a3a;
  border-color: #3a2a2a;
}

.hangup {
  bottom: 4%;
  right: 4%;
  opacity: 0.7;
  border-color: #3a2f2a;
}

.open-sauce {
  bottom: 4%;
  left: 56%;
  color: #ff9f4d;
  border-color: #4a3a28;
  opacity: 0.85;
}

/* Call Log & Journal panels — feel like they belong in the room */
.call-log-panel {
  position: absolute;
  top: 15%;
  right: 4%;
  width: 310px;
  max-height: 55%;
  background: #0f1612;
  border: 1px solid #243d33;
  z-index: 50;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.24;
  color: #a8b8a0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.65);
  overflow-y: auto;
}

.log-header {
  font-size: 13px;
  letter-spacing: 2px;
  color: #3af5a8;
  margin-bottom: 9px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #243d33;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-close {
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
}

.log-entry {
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px dotted rgba(36, 61, 51, 0.4);
}

.log-time {
  font-size: 10px;
  color: #5a6658;
  letter-spacing: 1px;
}

.log-raw {
  color: #c5b8a0;
  margin: 2px 0 3px;
}

.log-gloss {
  font-size: 11px;
  opacity: 0.85;
  padding-left: 3px;
}

.log-gloss.leaked {
  color: #c23a3a;
  opacity: 0.88;
}

.log-footer {
  font-size: 10px;
  margin-top: 7px;
  opacity: 0.5;
  text-align: center;
}

.journal-panel {
  position: absolute;
  top: 15%;
  left: 4%;
  width: 270px;
  background: #0f1612;
  border: 1px solid #243d33;
  z-index: 50;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.32;
  color: #a8b8a0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.65);
}

.journal-header {
  font-size: 13px;
  letter-spacing: 2px;
  color: #3af5a8;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #243d33;
}

.journal-perception {
  font-size: 10px;
  letter-spacing: 2px;
  color: #ff9f4d;
  margin-bottom: 7px;
  opacity: 0.78;
}

.journal-line {
  margin-bottom: 6px;
  padding-left: 2px;
}

.journal-footer {
  font-size: 10px;
  margin-top: 9px;
  opacity: 0.42;
  font-style: italic;
}

/* Open Sauce v1 — label forge using the machine's own phosphor language */
.open-sauce-panel {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 88vw);
  background: #0f1612;
  border: 1px solid #3a5f4f;
  z-index: 55;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.3;
  color: #a8b8a0;
  box-shadow: 0 10px 32px rgba(0,0,0,0.7);
}

.os-copy {
  font-size: 11px;
  opacity: 0.65;
  margin-bottom: 10px;
}

.os-label {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: #3af5a8;
}

.os-label select,
.os-label input {
  display: block;
  width: 100%;
  margin-top: 3px;
  background: #0a120e;
  border: 1px solid #243d33;
  color: #c5b8a0;
  font-family: 'VT323', monospace;
  font-size: 14px;
  padding: 5px 7px;
}

.os-forge {
  width: 100%;
  margin: 6px 0 12px;
  font-family: 'VT323', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  background: rgba(58, 245, 168, 0.08);
  border: 1px solid #3a5f4f;
  color: #3af5a8;
  padding: 7px;
  cursor: pointer;
}

.os-forge:hover {
  background: rgba(58, 245, 168, 0.16);
}

.os-label-preview {
  border: 1px dashed #5a5345;
  padding: 14px 12px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(58,245,168,0.06), transparent 55%),
    #0a120e;
  margin-bottom: 8px;
  transition: filter 0.4s ease, border-color 0.4s ease;
}

.os-label-preview.forged {
  border-color: #ff9f4d;
  animation: label-stamp 0.55s ease-out;
}

.os-label-preview[data-mood="investigator"] {
  filter: contrast(1.08) saturate(0.85);
}

.os-label-preview[data-mood="source"] {
  filter: hue-rotate(12deg) saturate(1.2);
  border-style: solid;
}

@keyframes label-stamp {
  0% { transform: scale(1.04); box-shadow: 0 0 0 0 rgba(255,159,77,0.4); }
  100% { transform: scale(1); box-shadow: none; }
}

.os-brand {
  font-size: 9px;
  letter-spacing: 3px;
  opacity: 0.5;
  margin-bottom: 6px;
}

.os-name {
  font-size: 18px;
  color: #3af5a8;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.os-claim-line {
  font-size: 13px;
  color: #ff9f4d;
  font-style: italic;
  margin-bottom: 10px;
  min-height: 1.2em;
}

.os-ref {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.55;
}

.os-batch {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.4;
  margin-top: 4px;
}

/* CSS smoke plumes — ashtray is on the LEFT of hero-enhanced.jpg */
.smoke-field {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.smoke {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity, filter;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(230, 222, 210, 0.7) 0%, rgba(170, 162, 148, 0.28) 42%, transparent 72%);
  filter: blur(2.5px);
  mix-blend-mode: soft-light;
  animation: smoke-rise 6.2s infinite ease-out;
}

.smoke.s1 {
  width: 28px; height: 48px;
  top: 42.7%; left: 26.5%;
  animation-delay: 0s;
  animation-duration: 5.8s;
}
.smoke.s2 {
  width: 22px; height: 56px;
  top: 42.2%; left: 28.2%;
  animation-delay: 1.1s;
  animation-duration: 6.6s;
  filter: blur(4px);
}
.smoke.s3 {
  width: 34px; height: 42px;
  top: 43.7%; left: 24.8%;
  animation-delay: 2.4s;
  animation-duration: 7.1s;
}
.smoke.s4 {
  width: 18px; height: 60px;
  top: 41.7%; left: 27.4%;
  animation-delay: 3.6s;
  animation-duration: 5.4s;
  filter: blur(2.5px);
}
.smoke.s5 {
  width: 40px; height: 50px;
  top: 43.2%; left: 29%;
  animation-delay: 4.8s;
  animation-duration: 7.8s;
  filter: blur(5px);
  opacity: 0;
}

@keyframes smoke-rise {
  0% {
    transform: translate3d(calc(var(--wind-x) * 4px), 8px, 0) scale(0.45) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.75;
  }
  35% {
    transform: translate3d(calc(10px + var(--wind-x) * 28px), calc(-42px + var(--wind-y) * 18px), 0) scale(0.95) rotate(8deg);
    opacity: 0.55;
  }
  65% {
    transform: translate3d(calc(-14px + var(--wind-x) * 52px), calc(-88px + var(--wind-y) * 28px), 0) scale(1.35) rotate(-6deg);
    opacity: 0.28;
  }
  100% {
    transform: translate3d(calc(18px + var(--wind-x) * 70px), calc(-130px + var(--wind-y) * 36px), 0) scale(1.7) rotate(12deg);
    opacity: 0;
  }
}

/* Fork + recording copy on the machine screen */
.fork-title {
  letter-spacing: 2px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.fork-line {
  opacity: 0.8;
  margin-top: 4px;
}

.fork-or {
  margin: 10px 0;
  opacity: 0.4;
  letter-spacing: 3px;
  font-size: 0.85em;
}

.fork-em {
  color: #ff6a4d;
  text-shadow: 0 0 6px rgba(255, 80, 60, 0.45);
}

.rec-live {
  color: #c23a3a;
  letter-spacing: 2px;
  animation: hint-pulse 1.1s ease-in-out infinite;
}

/* Idle screen hint blink — beckons without shouting */
#idle .hint {
  display: inline-block;
  animation: hint-pulse 2.6s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}

/* Soft CRT scan crawl on the machine screen */
.machine-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(58, 245, 168, 0.04) 48%,
    transparent 52%
  );
  background-size: 100% 220%;
  animation: scan-crawl 5.5s linear infinite;
  mix-blend-mode: screen;
}

@keyframes scan-crawl {
  0% { background-position: 0 -40%; }
  100% { background-position: 0 140%; }
}

/* Dust motes are canvas-driven; keep grain on vignette */
@media (prefers-reduced-motion: reduce) {
  .smoke,
  .ember,
  .message-pulse,
  .atmosphere,
  .machine-screen::before,
  #idle .hint {
    animation: none !important;
  }
  .atmosphere { display: none; }
  .smoke { opacity: 0.2; transform: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .world-message {
    font-size: 13px;
    max-width: 190px;
    padding: 10px 13px;
  }
  .call-log-panel, .journal-panel {
    width: 84%;
  }
  .journey-btn, .lens-nudge {
    font-size: 10px;
  }
  .smoke.s1, .smoke.s2, .smoke.s3, .smoke.s4, .smoke.s5 {
    filter: blur(2.5px);
  }
}