/* styles/biomes/court.css
   Biome 5 — The Court (Issuer Authorization). CENTERPIECE.
   Wood-warm dark, intimate, single warm spot. The magistrate is a
   faceless silhouette behind a high desk. The hand is a row of
   evidence cards at the bottom. Above the desk: an approval meter
   with a hidden threshold mark (revealed via Smart Retry). */

:root {
  --court-bg:        #1a0e0a;
  --court-bg-deep:   #0a0604;
  --court-wood:      #3a2418;
  --court-spot:      #fff4d0;
  --court-brass:     #c89858;
  --court-dim:       rgba(255, 244, 208, 0.45);
  --court-approve:   rgba(120, 220, 170, 0.95);
  --court-decline:   rgba(255, 110, 80, 0.95);
}

#court {
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%,
      #3a1f12 0%,
      var(--court-bg) 60%,
      var(--court-bg-deep) 100%);
}

#court::before {
  content: '';
  position: absolute; inset: 0;
  background:
    /* Single warm spot from above the desk. Bumped 0.16 → 0.22 so the
       cool-biome eye has a stronger warm anchor — fixes the "really
       dark" perception that's atmospheric (no warm reference), not a
       WCAG failure. */
    radial-gradient(ellipse 24% 16% at 50% 32%, rgba(255, 232, 184, 0.22), transparent 70%),
    /* Faint brazier-glow at the bottom edge — a second warm reference
       so the eye has two anchors instead of one. ~4% surface, very
       low intensity. */
    radial-gradient(ellipse 30% 8% at 50% 96%, rgba(255, 168, 100, 0.10), transparent 75%),
    /* Bottom darkness */
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(10, 6, 4, 0.7), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* SVG: the magistrate's desk + the seat behind */
.court-architecture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ---------- CENTRAL LAYOUT ---------- */

#court-content {
  position: absolute;
  /* P1-5 revision: voice gutters were too aggressive (24vw × 2) and
     squeezed the 6-card hand (trap card pushed total from 5 to 6),
     forcing the 6th card to wrap to a second row. Use a smaller 14vw
     side inset — still keeps the bench centred, gives the Schema
     voice (right: 4vw, width: ~280px) breathing room, and lets a full
     7-card hand (5 base + 1 trap + 1 trust-bonus) fit in one row. */
  inset: var(--narrator-zone) 14vw var(--system-zone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 3;
  padding: 0 1vw 2vh 1vw;
  gap: 2vh;
  max-width: calc(100vw - 28vw);
  margin: 0 auto;
}

/* Reveal pattern */
#court-meter,
#court-hand,
#court-submit-area {
  opacity: 0;
  transition: opacity 1600ms ease;
}
#court.assembled #court-meter,
#court.assembled #court-hand,
#court.assembled #court-submit-area {
  opacity: 1;
}

/* ---------- APPROVAL METER ---------- */

#court-meter {
  width: min(640px, 70vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  /* Belt+braces: if any card visually overlaps the meter (e.g. at extreme
     viewports where 6 cards bleed up), the meter renders ABOVE the dimmed
     played cards instead of being visible through them. */
  z-index: 2;
}

.court-meter-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: rgba(255, 244, 208, 0.55);
  text-transform: uppercase;
}

#court-meter-value {
  font-family: var(--mono);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: rgba(255, 244, 208, 0.95);
  text-shadow: 0 0 12px rgba(255, 244, 208, 0.3);
}

.court-meter-bar {
  position: relative;
  height: 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(200, 152, 88, 0.4);
  border-radius: 2px;
  overflow: visible;
}

/* GPU-composited fill — scaleX from the left origin keeps the meter
   off the main thread (was animating `width`, which triggers layout). */
#court-meter-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background:
    linear-gradient(90deg,
      rgba(232, 200, 120, 0.7)  0%,
      rgba(255, 232, 168, 0.95) 100%);
  box-shadow: 0 0 18px rgba(255, 220, 140, 0.55);
  transition: transform 800ms cubic-bezier(0.6, 0, 0.2, 1), background 800ms ease;
  border-radius: 1px;
}

#court-meter.approved #court-meter-fill {
  background: linear-gradient(90deg, rgba(120, 220, 170, 0.85) 0%, rgba(170, 255, 200, 0.95) 100%);
  box-shadow: 0 0 24px rgba(120, 220, 170, 0.7);
}
#court-meter.declined-flash #court-meter-fill {
  background: linear-gradient(90deg, rgba(255, 110, 80, 0.85) 0%, rgba(220, 80, 60, 0.95) 100%);
  box-shadow: 0 0 24px rgba(255, 110, 80, 0.6);
}

#court-threshold-mark {
  position: absolute;
  top: -6px;
  width: 2px;
  height: 26px;
  background: rgba(255, 244, 208, 0.9);
  box-shadow: 0 0 8px rgba(255, 244, 208, 0.7);
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
#court-threshold-mark::after {
  content: 'THRESHOLD';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: rgba(255, 244, 208, 0.85);
  white-space: nowrap;
}
#court-threshold-mark.visible { opacity: 1; }

/* ---------- HAND ---------- */

#court-hand {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;       /* stretch so all cards share max height */
  /* No wrap — cards COMPRESS via flex-shrink instead of breaking to a
     second row. Wrap was causing 6-card hands to split into 5+1 on
     mid-size viewports (~1350px), with the second row's card visually
     drifting below the magistrate's desk. */
  flex-wrap: nowrap;
  margin-bottom: 1vh;
  max-width: 100%;
}

.evidence-card {
  background:
    linear-gradient(180deg, rgba(70, 44, 28, 0.95) 0%, rgba(40, 24, 14, 0.95) 100%);
  border: 1px solid rgba(200, 152, 88, 0.45);
  color: rgba(255, 244, 208, 0.9);
  font-family: var(--mono);
  /* rem-based so cards grow with UI Scale (engine/settings.js). At
     scale 1: 9.75rem ≈ 156px. The 13vw cap + 5.5rem min-width let
     6 cards compress to fit a single row on mid-size viewports
     (~1350px) without wrapping. Below 5.5rem they hit the floor and
     the row simply overflows horizontally — preferred over the
     two-row layout that drifted behind the magistrate's desk. */
  flex: 0 1 min(9.75rem, 13vw);
  min-width: 5.5rem;           /* compress floor for 6-card hands */
  min-height: 12.5rem;
  padding: 14px 14px 10px 14px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, opacity 600ms ease;
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
  /* Overflow guard — if text wraps unexpectedly at extreme scales,
     contain it inside the card instead of bleeding into siblings. */
  overflow: hidden;
}
.evidence-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 220, 160, 0.85);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 220, 140, 0.2);
}
.evidence-card:active {
  transform: translateY(-2px) scale(0.97);
  filter: brightness(1.2);
}
.evidence-card.played {
  /* Bumped from 0.35 → 0.55. At 0.35 the card label + strength were
     functionally illegible; 0.55 keeps the "out of play" visual cue
     (the diagonal PLAYED stamp + green border + translateY) doing the
     load-bearing work while leaving the card's text scannable for
     last-pass review during the submit phase. */
  opacity: 0.55;
  transform: translateY(-4px) scale(0.96);
  border-color: rgba(120, 220, 170, 0.5);
  cursor: default;
  pointer-events: none;
}
.evidence-card.played::before {
  content: 'PLAYED';
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.25em;
  color: rgba(120, 220, 170, 0.9);
}

.card-label {
  /* Bumped from 0.6rem (9.6px) → 0.72rem (~11.5px). Below 12px the
     card title is hard to scan in a 6-card hand; the bump pairs with
     the smaller min-width to keep the hand single-row. */
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 220, 160, 0.85);
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200, 152, 88, 0.2);
  width: 100%;
}
.card-strength {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--court-brass);
  text-shadow: 0 0 18px rgba(200, 152, 88, 0.5);
  margin: 8px 0 4px 0;
}
.card-flavor {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.72rem;
  color: rgba(255, 244, 208, 0.7);
  text-align: center;
  line-height: 1.3;
  flex: 1;
}
.card-synergy {
  font-family: var(--mono);
  /* Bumped from 0.55rem (8.8px) → 0.68rem (~11px). Stays subordinate
     to .card-label (0.72rem) but clears the readability floor. */
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(200, 152, 88, 0.65);
  text-transform: lowercase;
  text-align: center;
  min-height: 1em;
}

/* Anti-synergy badge (P3-F) — red-orange echo of the Toll voice's
   palette so the warning reads as "this will cost you" without losing
   the Court's gold register. The trap card's whole purpose is making
   the player STOP and think — the badge has to be noticed. */
.card-synergy.anti {
  color: rgba(232, 144, 80, 0.78);   /* toll-red-orange, slightly stronger than synergy */
  font-weight: 500;
}

/* ---------- SUBMIT + RETRY ---------- */

#court-submit-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#court-submit {
  background: rgba(40, 24, 14, 0.7);
  border: 1px solid rgba(200, 152, 88, 0.3);
  color: rgba(255, 244, 208, 0.45);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  padding: 10px 32px;
  cursor: not-allowed;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 200ms ease;
}
#court-submit.enabled {
  border-color: rgba(255, 220, 160, 0.9);
  color: rgba(255, 244, 208, 0.95);
  cursor: pointer;
  background: rgba(70, 44, 28, 0.85);
  box-shadow: 0 0 18px rgba(200, 152, 88, 0.28);
}
#court-submit.enabled:hover {
  background: rgba(90, 60, 40, 0.9);
  box-shadow: 0 0 24px rgba(200, 152, 88, 0.45);
}
#court-submit.enabled:active {
  transform: scale(0.97);
  filter: brightness(1.2);
}
.retry-btn:active {
  transform: scale(0.96);
  filter: brightness(1.2);
}

#court-retry-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(40, 24, 14, 0.92);
  border: 1px solid rgba(200, 152, 88, 0.4);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}
#court-retry-prompt.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.retry-question {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 244, 208, 0.9);
  text-align: center;
}
.retry-actions {
  display: flex;
  gap: 10px;
}
.retry-btn {
  background: rgba(40, 24, 14, 0.7);
  border: 1px solid rgba(200, 152, 88, 0.5);
  color: rgba(255, 244, 208, 0.85);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  padding: 8px 18px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 150ms ease;
}
.retry-btn:hover {
  border-color: rgba(255, 220, 160, 0.95);
  background: rgba(70, 44, 28, 0.85);
}
.retry-btn-yes { border-color: rgba(120, 220, 170, 0.6); }
.retry-btn-yes:hover {
  border-color: rgba(120, 220, 170, 0.95);
  box-shadow: 0 0 14px rgba(120, 220, 170, 0.3);
}

/* ---------- T1-C POSTMORTEM PANEL ----------
   Shown after a decline. Toll-voice editorial naming the missed card;
   two buttons — redo hand or accept verdict. Same wooden-warm register
   as the rest of the Court so it reads as part of the chamber, not a
   modal interruption. */

.court-postmortem {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%) translateY(8px);
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(620px, 90vw);
  padding: 22px 28px 20px 28px;
  background: linear-gradient(180deg,
    rgba(40, 24, 14, 0.96) 0%,
    rgba(20, 12, 6, 0.96) 100%);
  border: 2px solid var(--court-brass);
  border-radius: 4px;
  box-shadow:
    0 0 36px rgba(200, 152, 88, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.85);
  font-family: var(--mono);
  color: rgba(255, 244, 208, 0.95);
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
}
.court-postmortem.revealed {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cp-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 130, 90, 0.85);
}
.cp-editorial {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(255, 244, 208, 0.92);
  text-align: center;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.cp-editorial em {
  color: rgba(255, 220, 160, 1);
  font-style: italic;
  font-weight: bold;
}
.cp-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.cp-btn {
  flex: 1 1 0;
  min-width: 200px;
  max-width: 260px;
  padding: 12px 16px;
  background: rgba(50, 32, 16, 0.85);
  border: 1px solid rgba(200, 152, 88, 0.55);
  border-radius: 2px;
  color: rgba(255, 244, 208, 0.95);
  font-family: var(--mono);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  transition: all 200ms ease;
}
.cp-btn:hover {
  background: rgba(90, 60, 36, 0.92);
  border-color: rgba(255, 220, 160, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6),
              0 0 18px rgba(200, 152, 88, 0.35);
}
.cp-btn:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(1.15);
}
.cp-btn-retry { border-color: rgba(120, 220, 170, 0.6); }
.cp-btn-retry:hover {
  border-color: rgba(120, 220, 170, 0.95);
  box-shadow: 0 0 18px rgba(120, 220, 170, 0.35);
}
.cp-btn-label {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: bold;
}
.cp-btn-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(255, 244, 208, 0.7);
  letter-spacing: 0;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .court-postmortem { transition-duration: 200ms; }
  .cp-btn { transition-duration: 100ms; }
}

/* ---------- T3-H ACCOUNT UPDATER GHOST EDIT ----------
   Brief intermission overlay between Court approval and Waiting. Shows
   the card's PAN tail morphing to a new value with a Schema whisper.
   Lives top-center, above the vitality HUD's z-index. */

#ghost-edit-overlay {
  position: fixed;
  top: 28vh;
  left: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  z-index: 35;
  padding: 16px 28px;
  background: rgba(10, 14, 22, 0.94);
  border: 1px solid rgba(232, 216, 255, 0.55);
  border-radius: 2px;
  box-shadow:
    0 0 36px rgba(232, 216, 255, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.7);
  font-family: var(--mono);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
}
#ghost-edit-overlay.active {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
.ge-eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(232, 216, 255, 0.65);
  margin-bottom: 10px;
}
.ge-pan {
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  color: rgba(232, 240, 255, 1);
  text-shadow: 0 0 14px rgba(184, 224, 255, 0.5);
  margin-bottom: 8px;
}
.ge-pan-mask {
  color: rgba(184, 224, 255, 0.55);
}
.ge-pan-tail {
  color: rgba(248, 232, 192, 1);
  text-shadow: 0 0 16px rgba(232, 200, 120, 0.6);
  display: inline-block;
  min-width: 4ch;
}
.ge-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(184, 224, 255, 0.7);
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  #ghost-edit-overlay { transition-duration: 200ms; }
}

/* ---------- AMBIENT CANDLE FLICKER (engine/ambient.js) ---------- */

#court.candle-flicker::before {
  animation: court-flicker 500ms ease-out;
}
@keyframes court-flicker {
  0%   { filter: brightness(1)   contrast(1); }
  20%  { filter: brightness(1.3) contrast(1.1); }
  40%  { filter: brightness(0.85) contrast(0.95); }
  60%  { filter: brightness(1.15) contrast(1.05); }
  100% { filter: brightness(1)   contrast(1); }
}

@media (prefers-reduced-motion: reduce) {
  #court-meter-fill { transition-duration: 300ms; }
  .evidence-card { transition-duration: 100ms; }
  #court-meter, #court-hand, #court-submit-area { transition-duration: 300ms; }
  #court.candle-flicker::before { animation: none; }
}

/* ---------- MOBILE (C7) ----------
   Court's 5-7 evidence cards in a non-wrapping row would overflow at
   360px. On mobile, allow horizontal scroll instead of wrap (cards
   stay readable; player swipes to see the rest). Meter shrinks too.
   Submit + retry buttons hit 44px. */
@media (max-width: 520px) {
  #court-meter {
    width: min(320px, 92vw);
  }
  #court-meter-value { font-size: 1rem; }
  #court-hand {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 8px;
    padding: 4px 4px 10px 4px;
  }
  .evidence-card {
    flex: 0 0 auto;
    width: min(112px, 28vw);
    min-width: 96px;
    padding: 10px 8px 8px;
    min-height: 132px;
  }
  .card-label { font-size: 0.6rem; letter-spacing: 0.18em; }
  .card-strength { font-size: 1.1rem; }
  .card-flavor { font-size: 0.68rem; }
  .retry-btn,
  #court-submit {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.78rem;
  }
}