/* styles/biomes/tide.css
   Biome 7 — The Tide (Settlement). ENDGAME DASHBOARD.
   Deep teal pool, water surface line, the Intent dissolves into
   particles. Dashboard rises with the full run summary. Cycle map
   at the bottom shows which boxes Adyen owns vs depends on. */

#tide {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      #001a20 0%,
      #000810 70%,
      #000408 100%);
}
#tide::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(100, 220, 200, 0.10), transparent 70%),
    radial-gradient(ellipse 100% 40% at 50% 0%,  rgba(0, 0, 0, 0.6),        transparent 60%);
  pointer-events: none;
  z-index: 1;
}
/* Water surface line */
#tide::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 32%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(100, 220, 200, 0.45) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- INTENT CARD (dissolves) ---------- */

#tide-intent-card {
  position: absolute;
  left: 50%;
  top: 20%;
  z-index: 3;
  transform: translateX(-50%);
  width: 100px;
  height: 65px;
  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: 4px;
  box-shadow:
    0 0 24px 6px rgba(184, 224, 255, 0.3),
    0 0 60px 16px rgba(184, 224, 255, 0.12),
    var(--intent-trust-shadow);
  transition: all 2400ms cubic-bezier(0.4, 0, 0.2, 1);
}
#tide-intent-card.dissolving {
  opacity: 0;
  transform: translateX(-50%) translateY(40px) scale(0.6);
  filter: blur(8px);
  box-shadow: 0 0 80px 30px rgba(100, 220, 200, 0.3);
}

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

#tide-dashboard-frame,
#tide-dossier-unlock,
#tide-replay-prompt {
  opacity: 0;
  pointer-events: none;   /* CRITICAL — un-revealed elements must not eat clicks */
  transition: opacity 1400ms ease;
}
#tide.assembled #tide-dashboard-frame { opacity: 1; pointer-events: auto; }
#tide-dossier-unlock.revealed         { opacity: 1; pointer-events: auto; }
#tide-replay-prompt.revealed          { opacity: 1; pointer-events: auto; }
/* Cycle map is now inside the dashboard frame — it inherits the
   frame's opacity, but we keep a tiny reveal animation for the
   "now the lesson lands" beat. */
.tide-cycle-section {
  opacity: 0;
  transition: opacity 1400ms ease;
}
.tide-cycle-section.revealed { opacity: 1; }

/* ---------- DASHBOARD ---------- */

#tide-dashboard-frame {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(880px, 92vw);
  max-height: 78vh;
  overflow-y: auto;
  background: rgba(2, 18, 22, 0.92);
  border: 1px solid rgba(100, 220, 200, 0.35);
  /* Warm amber inset glow — gives the eye a warm anchor in the cool
     teal void. Restored to soften the "really dark" perception without
     altering the cool palette identity. */
  box-shadow:
    inset 0 0 24px rgba(255, 220, 140, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  padding: 18px 26px 14px 26px;
  box-shadow:
    0 0 40px rgba(100, 220, 200, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.7);
}
#tide-dashboard-frame::-webkit-scrollbar { width: 6px; }
#tide-dashboard-frame::-webkit-scrollbar-thumb { background: rgba(100, 220, 200, 0.3); }

#tide-dashboard-frame::before {
  content: 'RUN SUMMARY';
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.45em;
  color: rgba(160, 240, 220, 0.5);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(100, 220, 200, 0.15);
}

#tide-dashboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
}

.tide-dashboard-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.78rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 600ms ease, transform 600ms ease;
  border-bottom: 1px dashed rgba(100, 220, 200, 0.08);
}
.tide-dashboard-row:last-child { border-bottom: none; }
.tide-dashboard-row.revealed {
  opacity: 1;
  transform: translateX(0);
}
.tdr-label {
  color: rgba(180, 220, 215, 0.6);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.tdr-value {
  color: rgba(220, 248, 240, 0.95);
  font-weight: bold;
  letter-spacing: 0.04em;
}
.tide-dashboard-row.muted .tdr-label { color: rgba(180, 220, 215, 0.4); }
.tide-dashboard-row.muted .tdr-value { color: rgba(220, 248, 240, 0.65); font-weight: normal; }
.tide-dashboard-row.highlight {
  padding: 8px 0;
  margin-top: 6px;
  border-top: 1px solid rgba(100, 220, 200, 0.3);
  border-bottom: none;
}
.tide-dashboard-row.highlight .tdr-label {
  color: rgba(220, 248, 240, 0.85);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
}
.tide-dashboard-row.highlight .tdr-value {
  font-size: 1.15rem;
  color: rgba(160, 240, 220, 1);
  text-shadow: 0 0 12px rgba(100, 220, 200, 0.5);
}
.tide-dashboard-row.negative .tdr-value {
  color: rgba(255, 130, 90, 0.95);
  text-shadow: 0 0 12px rgba(255, 100, 70, 0.4);
}

/* Section header inside the dashboard — small mono caps + top border */
.tide-section-title {
  font-family: var(--mono);
  /* Bumped from 0.58rem (9.3px) / 0.55 alpha → 0.7rem (~11.2px) / 0.75
     alpha. Section titles structure the dashboard; below 10px they
     read as decoration. */
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(160, 240, 220, 0.75);
  margin-top: 14px;
  margin-bottom: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(100, 220, 200, 0.15);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.tide-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.tide-section-title.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- "WHAT THIS RUN TAUGHT YOU" — C4 ----------
   Three prose takeaways at the top of the dashboard. Different
   typographic register from the mono key-value rows (serif italic
   emphasis, no labels). Per-tag accent bar on the left so the
   instructional structure is visible at a glance. */
.tide-takeaways {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  font-family: var(--serif);
}
.tt-bullet {
  position: relative;
  padding: 10px 4px 12px 30px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(220, 248, 240, 0.92);
  border-bottom: 1px dashed rgba(100, 220, 200, 0.08);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.tt-bullet:last-child { border-bottom: none; }
.tt-bullet.revealed {
  opacity: 1;
  transform: translateX(0);
}
.tt-bullet::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 19px;
  width: 14px;
  height: 1px;
  background: rgba(160, 240, 220, 0.55);
}
.tt-bullet em {
  font-style: italic;
  color: rgba(255, 232, 168, 0.95);
}
/* Per-tag accent — quiet color cue for the kind of lesson each bullet
   carries. Reusable tags: cycle / signals / tolls / evidence / timing
   / ledger. Per-scenario tideTakeaways() picks which one fits. */
.tt-bullet[data-tag="cycle"]::before    { background: rgba(184, 224, 255, 0.70); }
.tt-bullet[data-tag="signals"]::before  { background: rgba(255, 200, 140, 0.70); }
.tt-bullet[data-tag="tolls"]::before    { background: rgba(255, 168, 100, 0.65); }
.tt-bullet[data-tag="evidence"]::before { background: rgba(232, 216, 255, 0.70); }
.tt-bullet[data-tag="timing"]::before   { background: rgba(160, 240, 220, 0.65); }
.tt-bullet[data-tag="ledger"]::before   { background: rgba(200, 200, 215, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .tt-bullet { transition-duration: 200ms; transform: none !important; }
}

#tide-satisfaction {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(100, 220, 200, 0.15);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(220, 248, 240, 0.85);
  text-align: center;
  line-height: 1.4;
}

/* ---------- CYCLE MAP (now inside the dashboard frame) ---------- */

.tide-cycle-section {
  margin-top: 16px;
}
#tide-cycle-map {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.cycle-map-stop {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(180, 220, 215, 0.3);
  border-radius: 3px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  min-width: 60px;
}
.cycle-map-stop.adyen-owned {
  background: rgba(10, 191, 83, 0.18);
  border-color: rgba(10, 191, 83, 0.7);
  box-shadow: 0 0 12px rgba(10, 191, 83, 0.18);
}
.cycle-map-stop.adyen-depends {
  background: rgba(120, 140, 150, 0.08);
  border-color: rgba(180, 220, 215, 0.25);
}

/* Secondary cue for color-blind users — glyph at top-right of each
   stop indicates ownership without relying on green vs grey. */
.cycle-map-stop::after {
  position: absolute;
  top: 2px;
  right: 4px;
  font-family: var(--mono);
  font-size: 0.55rem;
  opacity: 0.8;
}
.cycle-map-stop { position: relative; }
.cycle-map-stop.adyen-owned::after   { content: '◆'; color: rgba(10, 191, 83, 0.9); }
.cycle-map-stop.adyen-depends::after { content: '○'; color: rgba(180, 220, 215, 0.55); }

/* Stops where the cycle took a critical bite of vitality get a thin
   red mark at the bottom-right — reinforces "this is where the
   protagonist was wounded." Currently only chargeback (stop 6). */
.cycle-map-stop.took-vitality {
  border-color: rgba(255, 80, 60, 0.55);
  box-shadow: 0 0 10px rgba(255, 80, 60, 0.18);
}
.cycle-map-stop.took-vitality::before {
  content: '•';
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: rgba(255, 130, 90, 0.95);
  text-shadow: 0 0 6px rgba(255, 80, 60, 0.6);
}

.cms-num {
  font-size: 0.65rem;
  color: rgba(180, 220, 215, 0.55);
  letter-spacing: 0.15em;
}
.cms-name {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-align: center;
  color: rgba(220, 248, 240, 0.85);
}
.cycle-map-stop.adyen-owned .cms-name { color: rgba(160, 240, 200, 0.95); }

/* ---------- DOSSIER UNLOCK + REPLAY ---------- */

#tide-dossier-unlock {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(10, 191, 83, 0.18);
  border: 1px solid #0abf53;
  color: rgba(220, 255, 235, 0.95);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  padding: 12px 28px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 0 22px rgba(10, 191, 83, 0.35);
  transition: all 200ms ease, opacity 1400ms ease;
}
#tide-dossier-unlock:hover {
  background: rgba(10, 191, 83, 0.3);
  box-shadow: 0 0 30px rgba(10, 191, 83, 0.55);
  transform: translateX(-50%) translateY(-2px);
}
#tide-dossier-unlock:active {
  transform: translateX(-50%) translateY(0) scale(0.98);
  filter: brightness(1.2);
}
#tide-replay-prompt button:active {
  transform: scale(0.97);
  filter: brightness(1.2);
}

#tide-replay-prompt {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 14px;
  font-family: var(--mono);
}
#tide-replay-prompt button {
  background: rgba(0, 16, 20, 0.85);
  border: 1px solid rgba(160, 240, 220, 0.5);
  color: rgba(220, 248, 240, 0.95);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  padding: 10px 24px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 150ms ease;
}
#tide-replay-prompt button:hover {
  background: rgba(20, 40, 50, 0.95);
  border-color: rgba(160, 240, 220, 0.95);
  box-shadow: 0 0 18px rgba(100, 220, 200, 0.3);
}

/* ---------- AMBIENT — water ripples ----------
   A small ring expands from a random point on the surface every
   10–18s. The pool is alive even when no Intent is dissolving.
   Uses transform: scale() for GPU-composited expansion — animating
   width/height triggers reflow on every frame. */
.tide-ripple {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  margin-left: -4px;        /* manual centring (since transform is in use) */
  margin-top:  -4px;
  border: 1px solid rgba(100, 220, 200, 0.4);
  border-radius: 50%;
  pointer-events: none;
  animation: tide-ripple-expand 3600ms ease-out forwards;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes tide-ripple-expand {
  0%   { opacity: 0;    transform: scale(0.75); }
  20%  { opacity: 0.85; }
  100% { opacity: 0;    transform: scale(17.5); }
}

@media (prefers-reduced-motion: reduce) {
  #tide-intent-card { transition-duration: 600ms; }
  .tide-dashboard-row { transition-duration: 200ms; }
  #tide-dashboard-frame, #tide-cycle-map, #tide-dossier-unlock,
  #tide-replay-prompt { transition-duration: 300ms; }
  .tide-ripple { animation-duration: 1400ms; }
}

/* ---------- REFLECTION QUESTION (T2-F) ----------
   A small modal that fires AFTER the player clicks "Unlock Dossier
   Page" and BEFORE the dossier modal opens. One retrieval question
   per scenario. Player picks an option, gets brief feedback, then
   continues. Visually echoes the dossier paper aesthetic so it reads
   as part of the same artifact, not a quiz interruption. */

#reflection-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  transition: opacity 800ms ease;
}
#reflection-modal.open { display: flex; opacity: 1; }

.reflection-panel {
  width: min(720px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  background: #f0e3c3;
  background-image:
    radial-gradient(ellipse 60% 40% at 95% 95%, rgba(120, 60, 24, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 30% at 8% 6%,  rgba(60, 30, 12, 0.06),  transparent 70%),
    linear-gradient(180deg, #f5e9cc 0%, #e8d8b2 100%);
  background-blend-mode: multiply, multiply, normal;
  color: #2a1a0a;
  border-radius: 4px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.9),
    0 12px 36px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(10, 191, 83, 0.35),
    0 0 80px rgba(10, 191, 83, 0.18);
  padding: 32px 38px 28px 38px;
  font-family: 'Georgia', 'Iowan Old Style', serif;
  line-height: 1.55;
  transform: scale(0.97) translateY(8px);
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
#reflection-modal.open .reflection-panel { transform: scale(1) translateY(0); }

.reflection-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  color: rgba(10, 138, 60, 0.95);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.reflection-eyebrow::before { content: '— '; color: rgba(60, 30, 12, 0.5); }
.reflection-eyebrow::after  { content: ' —'; color: rgba(60, 30, 12, 0.5); }

.reflection-prompt {
  font-size: 1.25rem;
  font-style: italic;
  color: rgba(26, 14, 10, 0.95);
  margin-bottom: 22px;
  line-height: 1.45;
}
.reflection-prompt em { color: #0a8838; font-style: italic; }

.reflection-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reflection-option {
  background: rgba(255, 250, 235, 0.85);
  border: 1px solid rgba(60, 30, 12, 0.28);
  border-radius: 3px;
  padding: 12px 16px;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 0.96rem;
  text-align: left;
  color: rgba(26, 14, 10, 0.92);
  cursor: pointer;
  transition: all 180ms ease;
  line-height: 1.4;
}
.reflection-option:hover:not(:disabled) {
  background: rgba(255, 250, 235, 1);
  border-color: rgba(10, 138, 60, 0.85);
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.reflection-option:disabled { cursor: default; opacity: 0.55; }
.reflection-option.is-correct {
  background: rgba(10, 191, 83, 0.18);
  border-color: rgba(10, 138, 60, 0.95);
  opacity: 1;
}
.reflection-option.is-wrong {
  background: rgba(220, 80, 60, 0.14);
  border-color: rgba(180, 60, 40, 0.8);
  opacity: 1;
}

.reflection-feedback {
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(10, 138, 60, 0.08);
  border: 1px solid rgba(10, 138, 60, 0.32);
  border-radius: 3px;
}
.rf-verdict {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rf-verdict.correct { color: #0a7030; }
.rf-verdict.wrong   { color: rgba(180, 60, 40, 0.95); }
.rf-explanation {
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(26, 14, 10, 0.9);
  line-height: 1.5;
}
.rf-explanation em { color: #0a7030; font-style: italic; font-weight: bold; }

.reflection-continue {
  margin-top: 18px;
  text-align: right;
}
#reflection-continue-btn {
  background: rgba(10, 138, 60, 0.12);
  border: 1px solid #0abf53;
  color: #0a5020;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 180ms ease;
}
#reflection-continue-btn:hover {
  background: rgba(10, 191, 83, 0.22);
  box-shadow: 0 0 16px rgba(10, 191, 83, 0.35);
}
#reflection-continue-btn:active {
  transform: scale(0.97);
  filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
  #reflection-modal, .reflection-panel { transition-duration: 200ms; }
  .reflection-option { transition-duration: 80ms; }
}

@media (prefers-reduced-motion: reduce) {
  .tide-ripple { will-change: auto; }
}

/* ---------- MOBILE (C7) ----------
   Dashboard rows + cycle map need bigger font + tighter padding to
   stay legible at 360px. Reflection modal narrows. */
@media (max-width: 520px) {
  #tide-dashboard-frame {
    width: min(96vw, 480px);
    padding: 20px 18px;
  }
  .tide-dashboard-row {
    font-size: 0.84rem;
    padding: 6px 0;
  }
  .tdr-label  { font-size: 0.68rem; letter-spacing: 0.12em; }
  .tdr-value  { font-size: 0.86rem; }
  .tide-dashboard-row.highlight .tdr-value { font-size: 1.05rem; }
  .tide-section-title { font-size: 0.66rem; letter-spacing: 0.28em; }
  /* Takeaway bullets get a touch more breathing room on mobile */
  .tt-bullet {
    font-size: 0.86rem;
    padding: 8px 4px 10px 24px;
  }
  .tt-bullet::before { left: 4px; top: 16px; width: 12px; }

  #tide-cycle-map {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cycle-map-stop {
    min-width: 48px;
    padding: 6px 4px;
  }
  .cms-label { font-size: 0.5rem; }

  .reflection-panel {
    width: 92vw;
    padding: 20px 22px;
  }
  .reflection-option {
    min-height: 48px;
    padding: 10px 14px;
    font-size: 0.86rem;
  }
}