/* styles/biomes/waiting.css
   Biome 6 — The Waiting Room (Capture / Clearing).
   Muted pastel, soft cream accents. Quiet, melancholy. A clock on
   the wall. The Intent card visibly ages while the player decides. */

:root {
  --waiting-bg:        #1a1a20;
  --waiting-bg-deep:   #08080c;
  --waiting-cream:     #f0e8d8;
  --waiting-cream-d:   rgba(240, 232, 216, 0.55);
  --waiting-warn:      #e8b878;
  --waiting-crit:      #ff8060;
  --waiting-chargeback: #ff4844;
}

#waiting {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      var(--waiting-bg) 0%,
      #12121a 70%,
      var(--waiting-bg-deep) 100%);
}
#waiting::before {
  content: '';
  position: absolute; inset: 0;
  background:
    /* Top wash — kept neutral. */
    radial-gradient(ellipse 100% 30% at 50% 0%,   rgba(240, 232, 216, 0.06), transparent 70%),
    /* Single warm hearth-glow off the left edge — gives the eye one
       warm reference in an otherwise cool biome. ~3% surface, low
       intensity. Reads as "lamp on a side table" rather than chrome. */
    radial-gradient(ellipse 18% 28% at 4% 62%, rgba(255, 184, 120, 0.14), transparent 75%),
    /* Bottom darkness — soften from pure-black to tinted to avoid the
       #000 floor (P3.1 dark-UI fatigue lesson). */
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(8, 8, 12, 0.7), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Faint horizontal "wall trim" line — atmospheric */
#waiting::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 30%;
  height: 1px;
  background: rgba(240, 232, 216, 0.08);
  pointer-events: none;
  z-index: 1;
}

/* ---------- ROOM ARCHITECTURE (SVG layer) ----------
   Wainscot + corner verticals + bench silhouettes. Inherits the
   scene's assembled fade so it appears alongside the clock. */
.waiting-architecture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms ease;
}
#waiting.assembled .waiting-architecture { opacity: 1; }

/* Floor shadow — radial gradient anchored to bottom of viewport.
   Adds vertical depth without competing with the central UI. */
#waiting > .waiting-architecture::before {
  content: '';
  position: absolute;
  inset: 70% 0 0 0;
  background: radial-gradient(ellipse 80% 100% at 50% 100%,
    rgba(0, 0, 0, 0.42) 0%,
    transparent          70%);
  pointer-events: none;
}

/* ---------- TICK RIPPLE (clock-tick visual cue) ----------
   A border-only circle that expands from the clock's screen position
   every 1.2s. JS toggles a .ticking class on the element to restart
   the animation each beat. Opacity stays low so it feels like a
   breath, not a flash. */
.waiting-tick-ripple {
  position: absolute;
  /* Center over the clock face (top 7vh + 45px, left 50%) */
  top: calc(7vh + 45px);
  left: 50%;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top:  -45px;
  border: 1px solid rgba(240, 232, 216, 0.18);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
}
.waiting-tick-ripple.ticking {
  animation: waiting-tick 1000ms ease-out forwards;
}
@keyframes waiting-tick {
  0%   { opacity: 0;    transform: scale(0.5); }
  18%  { opacity: 0.6;  }
  100% { opacity: 0;    transform: scale(1.8); }
}

/* ---------- ASSEMBLY ---------- */

#waiting-clock,
#waiting-intent,
#waiting-choices {
  opacity: 0;
  transition: opacity 1600ms ease;
}
#waiting.assembled #waiting-clock,
#waiting.assembled #waiting-intent,
#waiting.assembled #waiting-choices {
  opacity: 1;
}

/* ---------- CLOCK ---------- */

#waiting-clock {
  position: absolute;
  left: 50%;
  top: 7vh;
  transform: translateX(-50%);
  z-index: 3;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5));
  transition: opacity 1600ms ease, filter 600ms ease;
}
#waiting-clock svg {
  width: 90px;
  height: 90px;
}
#waiting-clock-hand-hour,
#waiting-clock-hand-min {
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
  /* No CSS transform-origin — the SVG-attribute rotation set by JS
     (`rotate(angle 100 100)`) controls the pivot in SVG coordinate
     space. A CSS transform-origin here would mix CSS-pixel space with
     SVG viewBox space (since the SVG is rendered smaller than its
     viewBox) and can leave the hands invisibly rotating off-canvas
     on some browsers. */
}
#waiting-clock.expiring {
  filter: drop-shadow(0 4px 24px rgba(255, 96, 64, 0.7));
}

/* ---------- DAY COUNTER ---------- */

#waiting-day-wrap {
  position: absolute;
  left: 50%;
  top: 18vh;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 1600ms ease;
}
#waiting.assembled #waiting-day-wrap { opacity: 1; }

.day-sublabel {
  font-family: var(--mono);
  /* Bumped from 0.5rem (8px) / 0.55 alpha → 0.6rem (~9.6px) / 0.78
     alpha. Subordinate to the day numeric but readable; this row says
     "at 7: auth lapses — sale lost" which is load-bearing affordance. */
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  color: rgba(232, 184, 120, 0.78);
  text-transform: uppercase;
}

#waiting-day-counter {
  position: relative;
  left: auto; top: auto;
  transform: none;
  z-index: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  color: rgba(240, 232, 216, 0.7);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(240, 232, 216, 0.25);
  transition: color 600ms ease;
}
#waiting-day-counter.warning { color: var(--waiting-warn); text-shadow: 0 0 14px rgba(232, 184, 120, 0.4); }
#waiting-day-counter.expired {
  color: var(--waiting-crit);
  text-shadow: 0 0 16px rgba(255, 128, 96, 0.6);
  animation: counter-pulse 0.6s ease-in-out 2;
}
@keyframes counter-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ---------- INTENT CARD (visibly ages) ---------- */

#waiting-intent {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 180px;
  height: 110px;
  background:
    linear-gradient(135deg, rgba(184, 224, 255, 0.5) 0%, rgba(120, 180, 220, 0.4) 100%);
  border: 1.5px solid rgba(184, 224, 255, 0.9);
  border-radius: 6px;
  box-shadow:
    0 0 28px 8px rgba(184, 224, 255, 0.3),
    0 0 80px 20px rgba(184, 224, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    var(--intent-trust-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono);
  transition: filter 1200ms ease, opacity 1200ms ease, box-shadow 1200ms ease;
}
#waiting-intent::before {
  content: 'AUTHORIZED';
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.75);
}
#waiting-intent-value {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
  font-weight: bold;
}

/* Aging — saturation drains as days pass */
#waiting-intent.aged-1 { filter: saturate(0.7) brightness(0.95); }
#waiting-intent.aged-2 { filter: saturate(0.4) brightness(0.85); box-shadow: 0 0 18px 4px rgba(184, 224, 255, 0.15); }
#waiting-intent.aged-3 { filter: saturate(0.2) brightness(0.75); box-shadow: 0 0 12px 2px rgba(184, 224, 255, 0.08); }
#waiting-intent.aged-expired {
  filter: saturate(0) brightness(0.5);
  box-shadow: 0 0 16px 4px rgba(255, 80, 60, 0.3);
  border-color: rgba(255, 80, 60, 0.7);
}

/* ---------- CHOICES ---------- */

#waiting-choices {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 18px;
  justify-content: center;
  /* P1-5: respect voice gutters. With 4 capture choices on
     cross-border/marketplace (4 × 200px + 3 × 18px = 854px), the row
     could otherwise approach the Toll/Pulse margin voices on narrow
     screens. Wrap before colliding. */
  flex-wrap: wrap;
  max-width: calc(100vw - 2 * var(--voice-gutter));
}

.capture-choice {
  background: rgba(20, 20, 28, 0.85);
  border: 1px solid rgba(240, 232, 216, 0.25);
  color: var(--waiting-cream);
  font-family: var(--mono);
  padding: 18px 22px;
  width: 200px;
  cursor: pointer;
  text-align: left;
  border-radius: 2px;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.capture-choice:hover {
  border-color: rgba(240, 232, 216, 0.75);
  background: rgba(34, 34, 44, 0.9);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.capture-choice.selected {
  border-color: rgba(240, 232, 216, 0.95);
  background: rgba(50, 50, 64, 0.9);
  box-shadow: 0 0 22px rgba(240, 232, 216, 0.3);
}
.capture-choice:active {
  transform: translateY(-1px) scale(0.98);
  filter: brightness(1.2);
}
.capture-choice:disabled {
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}
.choice-title {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--waiting-cream);
}
.choice-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(240, 232, 216, 0.8);
  line-height: 1.35;
}
.choice-cost {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(240, 232, 216, 0.5);
  text-transform: lowercase;
}

/* ---------- CHARGEBACK FLASH ---------- */

.waiting-chargeback-flash {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -180%);
  z-index: 6;
  background: rgba(80, 16, 12, 0.92);
  border: 1px solid rgba(255, 72, 68, 0.85);
  border-radius: 4px;
  padding: 12px 24px;
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow:
    0 0 30px 6px rgba(255, 72, 68, 0.5),
    0 6px 24px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: chargeback-arrive 4200ms ease-out forwards;
}
.cb-label {
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 200, 180, 0.95);
}
.cb-amount {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: rgba(255, 200, 180, 1);
  text-shadow: 0 0 14px rgba(255, 72, 68, 0.7);
  font-weight: bold;
}
@keyframes chargeback-arrive {
  0%   { opacity: 0; transform: translate(-50%, -240%) scale(0.85); }
  20%  { opacity: 1; transform: translate(-50%, -180%) scale(1.05); }
  30%  { transform: translate(-50%, -180%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -180%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* ---------- AMBIENT — another passenger silhouette ----------
   A faint vertical line fades in/out every 20–30s. Hints at other
   Intents waiting alongside this one. The system is busy; you are
   not alone. Below the clock, in the upper-middle band. */
.waiting-passenger {
  position: absolute;
  top: 34%;
  width: 2px;
  height: 220px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(240, 232, 216, 0.14) 30%,
    rgba(240, 232, 216, 0.22) 50%,
    rgba(240, 232, 216, 0.10) 80%,
    transparent 100%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 2;
  animation: waiting-passenger-fade 4200ms ease-in-out forwards;
}
@keyframes waiting-passenger-fade {
  0%, 100% { opacity: 0;   transform: translateX(0); }
  25%      { opacity: 0.85; }
  50%      { opacity: 0.95; transform: translateX(2px); }
  75%      { opacity: 0.85; }
}

/* Per-day visual tick — brief scale pulse on the intent card synced to
   the setDay() call. Without this the 7.7s clock-elapse window is
   visually static except for the day numeric, and the player reads it
   as "is the game frozen?". The pulse is sub-200ms so it doesn't
   compete with the aged-N filter transitions. */
@keyframes intent-day-tick {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.985); }
}
#waiting-intent.day-tick {
  animation: intent-day-tick 240ms ease-in-out 1;
}

@media (prefers-reduced-motion: reduce) {
  #waiting-clock-hand-hour, #waiting-clock-hand-min { transition-duration: 200ms; }
  #waiting-intent { transition-duration: 300ms; }
  .capture-choice { transition-duration: 100ms; }
  .waiting-chargeback-flash { animation-duration: 1600ms; }
  #waiting-day-counter.expired { animation: none; }
  .waiting-passenger { animation-duration: 1400ms; }
  #waiting-intent.day-tick { animation: none; }
  /* Reduced-motion: kill the tick ripple entirely — the day counter
     pulse + existing aria-live updates carry time-pressure feedback. */
  .waiting-tick-ripple { animation: none; opacity: 0; }
}

/* ---------- MOBILE (C7) ----------
   Capture choices stack vertically and stretch to fit the width.
   Clock + intent card shrink. The voice-gutter max-width calc on
   #waiting-choices picks up the global gutter override automatically,
   but we re-state it tighter here as belt-and-braces. */
@media (max-width: 520px) {
  #waiting-choices {
    flex-direction: column;
    gap: 10px;
    bottom: 14%;
    max-width: 92vw;
    width: 92vw;
  }
  .capture-choice {
    width: 100%;
    min-height: 64px;
    padding: 14px 18px;
  }
  .choice-title { font-size: 0.85rem; }
  .choice-sub   { font-size: 0.8rem; }
  .choice-cost  { font-size: 0.6rem; }
  #waiting-clock svg { width: 68px; height: 68px; }
  .waiting-tick-ripple {
    width: 68px;
    height: 68px;
    margin-left: -34px;
    margin-top: -34px;
    top: calc(7vh + 34px);
  }
  #waiting-intent {
    width: 150px;
    height: 90px;
  }
  #waiting-intent-value { font-size: 1.05rem; }
  #waiting-day-counter { font-size: 0.78rem; }
  .day-sublabel { font-size: 0.55rem; letter-spacing: 0.24em; }
}