/* styles/biomes/cafe.css
   Biome 0 — the painterly café and its transition machinery
   (terminal, freeze-overlay, chip-glow, matrix-wipe). */

#cafe {
  background: var(--cafe-image);
  background-size: cover;
  background-position: center;
}
#cafe::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 50% 70%, rgba(0, 0, 0, 0.4), transparent),
    radial-gradient(circle at 30% 45%, rgba(255, 220, 180, 0.30), transparent 25%),
    radial-gradient(circle at 70% 50%, rgba(255, 200, 150, 0.25), transparent 20%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

#terminal {
  position: absolute;
  left: 50%; top: 62%;
  width: 180px; height: 110px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 12px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 1200ms cubic-bezier(0.6, 0, 0.2, 1), opacity 600ms ease;
  /* No pointer cursor until .tappable — players were clicking during
     the narrator's prose and getting nothing, assuming the game was
     broken. The terminal is now visually inert until the prose ends. */
  cursor: default;
  opacity: 0.78;
  z-index: 30;
}
#terminal::after {
  /* Label is hidden until .tappable. Same reason as cursor above —
     showing "TAP TO PAY" before the click handler is bound is a lie. */
  content: '';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.55);
  transition: opacity 600ms ease;
  opacity: 0;
}
#terminal.tappable {
  cursor: pointer;
  opacity: 1;
  animation: terminal-invite 2.4s ease-in-out infinite;
}
#terminal.tappable::after {
  content: 'TAP TO PAY';
  opacity: 1;
}
#terminal.spent::after {
  content: 'APPROVED';
  color: rgba(120, 255, 160, 0.85);
  transition: color 400ms ease;
}

@keyframes terminal-invite {
  0%, 100% {
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 0 rgba(248, 232, 192, 0);
  }
  50% {
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 40px 8px rgba(248, 232, 192, 0.25);
  }
}

/* ---------- TRANSITION LAYER (sits above #cafe) ---------- */

#freeze-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 62%,
    transparent 0%, transparent 8%,
    rgba(0, 0, 0, 0.7) 60%, #000 100%);
  opacity: 0;
  transition: opacity 1400ms ease;
  pointer-events: none;   /* never intercept clicks — see v3 fix */
  z-index: 5;
}
#freeze-overlay.active { opacity: 1; }

#chip-glow {
  position: absolute;
  left: 50%; top: 62%;
  width: 4px; height: 4px;
  transform: translate(-50%, -50%);
  background: var(--intent-glow);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
#chip-glow.bloom {
  animation: chip-bloom 1800ms ease-out forwards;
}
@keyframes chip-bloom {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(248, 232, 192, 0); }
  20%  { opacity: 1; }
  100% { opacity: 1; box-shadow: 0 0 220px 90px rgba(248, 232, 192, 0.85); }
}

#matrix-wipe {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}
#matrix-wipe.active { opacity: 1; }
.matrix-column {
  position: absolute;
  top: -100%;
  width: 14px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--packet-glow);
  text-shadow: 0 0 6px var(--packet-glow);
  white-space: pre;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  #terminal.tappable { animation: none; }
  #terminal { transition-duration: 300ms; }
  #freeze-overlay { transition-duration: 200ms; }
  #chip-glow.bloom { animation-duration: 400ms; }
}

/* ---------- ORDER SUMMARY ----------
   Visible receipt to the LEFT of the terminal that shows WHAT the
   buyer is paying for. Per-scenario content (vendor + items + total)
   so the moment-of-payment is concretely framed, not abstract.
   Hidden by default; .revealed fades in after the chapter card lands.
   Side placement preserves the existing center composition AND scales
   gracefully when the receipt has 1 vs 3 items (height varies). */
#order-summary {
  position: absolute;
  left: 16vw;
  top: 62%;                          /* vertically centered with terminal */
  width: min(300px, 28vw);
  padding: 14px 18px 16px;
  background:
    linear-gradient(180deg, rgba(248, 240, 220, 0.95) 0%, rgba(232, 220, 196, 0.92) 100%);
  color: #2a1d10;
  border: 1px solid rgba(120, 80, 40, 0.35);
  border-radius: 2px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.5;
  opacity: 0;
  /* Slight paper-edge tilt (no horizontal centering needed — left is
     anchored at 16vw, vertical centered via translateY). */
  transform: translateY(-50%) rotate(-1deg);
  transition: opacity 1200ms ease, transform 1200ms ease;
  z-index: 30;
  pointer-events: none;
}
#order-summary.revealed {
  opacity: 1;
  pointer-events: auto;
}
.os-vendor {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  color: #3a2618;
}
.os-location {
  /* Bumped from 0.58rem after the game-ui-design review — the previous
     value translated to ~9.3px at default root size, well under the 14px
     readability floor. 0.66rem ≈ 10.6px keeps the receipt-sublabel feel
     without straining the eye on TV-distance viewing. */
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: rgba(58, 38, 24, 0.65);
  margin-top: 2px;
  text-transform: lowercase;
}
.os-divider {
  margin: 8px 0;
  border-top: 1px dashed rgba(120, 80, 40, 0.45);
}
.os-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 0.68rem;
  color: rgba(40, 24, 12, 0.92);
}
.os-row + .os-row { margin-top: 3px; }
.os-qty {
  color: rgba(80, 50, 24, 0.7);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.os-name { font-family: var(--serif); font-style: italic; }
.os-price {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.os-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.os-total-label {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: rgba(80, 50, 24, 0.78);
}
.os-total-value {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2a1808;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Reduced-motion: tilt removed (slight rotation can trigger
   vestibular discomfort), faster fade. */
@media (prefers-reduced-motion: reduce) {
  #order-summary {
    transform: translateY(-50%);
    transition-duration: 300ms;
  }
}

/* ---------- PER-SCENARIO CAFÉ PALETTES ----------
   Each scenario gets a distinct base gradient + ambient lighting so
   the moment-of-payment visibly reflects WHERE the buyer is. The
   baseline (first_payment) keeps the established Kreuzberg-evening
   warm-brown. cross_border shifts to São Paulo dusk (more orange, a
   touch hazier). marketplace shifts to Amsterdam cool-morning (more
   blue-grey, more light). Drives the #cafe background-image via the
   --cafe-image var; ambient overlay tweaks via #cafe::before. */

/* Cross-border — São Paulo apartment, late afternoon */
body[data-scenario="cross_border"] #cafe {
  background-image: linear-gradient(
    135deg,
    #2e1a14 0%, #5a2a1a 22%, #a8542c 50%,
    #d0844a 72%, #e8a868 90%, #f0c890 100%
  );
}
body[data-scenario="cross_border"] #cafe::before {
  background:
    radial-gradient(ellipse 40% 30% at 50% 75%, rgba(0, 0, 0, 0.45), transparent),
    radial-gradient(circle at 30% 45%, rgba(255, 180, 120, 0.32), transparent 25%),
    radial-gradient(circle at 80% 40%, rgba(255, 140, 90, 0.20), transparent 25%);
}

/* Marketplace — Amsterdam apartment, cool morning light */
body[data-scenario="marketplace"] #cafe {
  background-image: linear-gradient(
    135deg,
    #14181e 0%, #283844 25%, #4a6478 50%,
    #7a98ac 72%, #a8c0d0 90%, #d0dce4 100%
  );
}
body[data-scenario="marketplace"] #cafe::before {
  background:
    radial-gradient(ellipse 40% 30% at 50% 75%, rgba(0, 0, 0, 0.35), transparent),
    radial-gradient(circle at 30% 35%, rgba(220, 232, 240, 0.30), transparent 30%),
    radial-gradient(circle at 70% 45%, rgba(180, 200, 220, 0.22), transparent 25%);
}

/* Per-scenario receipt accent — vendor name takes a hint of the
   scenario's palette so the receipt itself feels rooted in place. */
body[data-scenario="cross_border"] #order-summary {
  border-color: rgba(168, 84, 44, 0.45);
}
body[data-scenario="cross_border"] .os-vendor {
  color: #5a2a14;
}
body[data-scenario="marketplace"] #order-summary {
  background: linear-gradient(180deg, rgba(244, 246, 248, 0.95) 0%, rgba(220, 226, 232, 0.92) 100%);
  border-color: rgba(80, 100, 120, 0.4);
  color: #1a2530;
}
body[data-scenario="marketplace"] .os-vendor {
  color: #1a2838;
}
body[data-scenario="marketplace"] .os-location {
  color: rgba(40, 60, 80, 0.65);
}
body[data-scenario="marketplace"] .os-total-value {
  color: #0a1420;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- MOBILE (C7) ----------
   The order-summary receipt is the only persistent UI in the café.
   At 360px it competes with the terminal — reposition to the top
   center as a slim band rather than the right rail. */
@media (max-width: 520px) {
  #order-summary {
    /* Reposition: a thin top-strip instead of a side panel. */
    left: 50%;
    top: 4vh;
    transform: translateX(-50%);
    width: min(280px, 88vw);
    padding: 10px 12px;
    font-size: 0.7rem;
  }
  .os-vendor { font-size: 0.78rem; }
  .os-row    { font-size: 0.7rem; }
  .os-total  { font-size: 0.78rem; }
  #terminal {
    width: 150px;
    height: 90px;
  }
}