/* ============================================================================
   CAMP COHESION
   Restyles the campaign "character bio" cards and the flashcard deck so they
   match the redesigned entry profile card (chrome title gradient, cyan VT323
   labels, gold values, dark cyan-bordered identity card, blue Fallout terminal
   bio box).

   ADDITIVE / OVERRIDE ONLY. No layout grids are changed. The flashcard 3D flip
   (perspective / transform-style / rotateY / backface-visibility) is left
   untouched; only color, border, background and typography are restyled.

   Loaded AFTER the existing app styles so equal-specificity rules win on source
   order. Campaign rules are scoped to body.campaign-mode to beat the existing
   body.campaign-mode overrides.
   ============================================================================ */


/* ============================================================================
   SECTION 1 - CAMPAIGN CHARACTER BIO CARD
   ============================================================================ */

/* 1a. Character name -> chrome title gradient on Press Start 2P. */
.tq-camp-inline-entry-name,
body.campaign-mode .tq-camp-inline-entry-name {
  background: linear-gradient(180deg,
              #b6a1ff 0%, #6e58d8 22%, #5ad1ff 48%,
              #fff8e0 64%, #e8b872 82%, #a57a3f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #5ad1ff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 10px rgba(90, 209, 255, .28);
  filter: none;
}

/* 1b. "Current stop" eyebrow above the name -> cyan VT323 label feel. */
.tq-camp-inline-entry-label,
body.campaign-mode .tq-camp-inline-entry-label {
  font-family: 'VT323', monospace;
  color: #cfeeff;
  text-shadow: 0 1px 0 #0F0B07;
}

/* 1c. Date / Era / Place meta -> cyan keys, gold values, cyan chips. */
.tq-camp-inline-meta,
body.campaign-mode .tq-camp-inline-meta {
  font-family: 'VT323', monospace;
  color: #E8B872;
}
.tq-camp-inline-meta span,
body.campaign-mode .tq-camp-inline-meta span {
  border: 1px solid rgba(90, 209, 255, .32);
  background:
    linear-gradient(180deg, rgba(90, 209, 255, .12), rgba(8, 16, 30, .82)),
    rgba(8, 16, 30, .9);
  color: #E8B872;
}
.tq-camp-inline-meta b,
body.campaign-mode .tq-camp-inline-meta b {
  background: linear-gradient(180deg, #cfeeff, #5ad1ff 60%, #2a78c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: #5ad1ff;
  -webkit-text-fill-color: transparent;
}

/* 1d. Character bio text -> blue Fallout-terminal panel. Line-clamp left as-is. */
.tq-camp-inline-title,
body.campaign-mode .tq-camp-inline-title {
  border: 1px solid rgba(90, 209, 255, .40);
  background:
    linear-gradient(180deg, rgba(10, 22, 40, .96), rgba(8, 16, 30, .97));
  box-shadow:
    inset 0 0 0 1px rgba(90, 209, 255, .06),
    0 2px 0 rgba(0, 0, 0, .46),
    0 0 20px rgba(90, 209, 255, .10);
  color: #d7ecff;
  text-shadow: 0 1px 0 #0F0B07;
}
.tq-camp-inline-title::before {
  content: 'FIELD NOTE';
  color: #E8B872;
  text-shadow: 0 1px 0 #0F0B07, 0 0 8px rgba(232, 184, 114, .28);
}

/* 1e. Identity plate around the name -> card identity recipe. */
.tq-camp-inline-entry,
body.campaign-mode .tq-camp-inline-entry {
  border: 1px solid rgba(90, 209, 255, .34);
  background:
    linear-gradient(160deg, rgba(110, 88, 216, .18), rgba(90, 209, 255, .07) 44%, rgba(232, 184, 114, .08)),
    rgba(15, 11, 7, .84);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .38),
    0 0 20px rgba(90, 209, 255, .10);
}


/* ============================================================================
   SECTION 2 - FLASHCARD DECK
   ============================================================================ */

/* 2a. Flashcard shell -> cyan border + glow + dark identity background. */
.tq-flashcard-card {
  border: 1px solid rgba(90, 209, 255, .34);
  background:
    linear-gradient(160deg, rgba(110, 88, 216, .18), rgba(90, 209, 255, .07) 44%, rgba(232, 184, 114, .08)),
    rgba(15, 11, 7, .84);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .55),
    0 0 20px rgba(90, 209, 255, .10),
    0 0 0 1px rgba(90, 209, 255, .08) inset;
}

/* 2b. "FLASH CARDS" kicker -> cyan VT323 label. */
.tq-flashcard-kicker {
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: .12em;
  background: linear-gradient(180deg, #cfeeff, #5ad1ff 60%, #2a78c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: #5ad1ff;
  -webkit-text-fill-color: transparent;
}

/* 2c. Flashcard title -> chrome title gradient. */
.tq-flashcard-title {
  background: linear-gradient(180deg,
              #b6a1ff 0%, #6e58d8 22%, #5ad1ff 48%,
              #fff8e0 64%, #e8b872 82%, #a57a3f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #5ad1ff;
  -webkit-text-fill-color: transparent;
}

/* 2d. Card count line -> cyan. */
.tq-flashcard-count {
  color: #5ad1ff;
}

/* 2e. Prompt face -> blue terminal. Flip mechanics untouched. */
.tq-flashcard-face {
  border: 1px solid rgba(90, 209, 255, .40);
  background:
    linear-gradient(180deg, rgba(10, 22, 40, .96), rgba(8, 16, 30, .97));
}
.tq-flashcard-face .tq-flashcard-label {
  background: linear-gradient(180deg, #cfeeff, #5ad1ff 60%, #2a78c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: #5ad1ff;
  -webkit-text-fill-color: transparent;
}

/* 2f. Answer face -> gold-leaning terminal. Keep AFTER 2e. rotateY untouched. */
.tq-flashcard-answer {
  border-color: rgba(232, 184, 114, .42);
  background:
    linear-gradient(180deg, rgba(34, 24, 8, .96), rgba(24, 17, 6, .97));
}
.tq-flashcard-answer .tq-flashcard-label {
  background: none;
  -webkit-text-fill-color: #E8B872;
  color: #E8B872;
}

/* 2g. Prompt / answer body text. */
.tq-flashcard-front {
  color: #d7ecff;
}
.tq-flashcard-back {
  color: #f4e3c4;
}

/* 2h. Controls -> card button style. REVEAL keeps its gold !important base. */
.tq-flashcard-controls button {
  border: 1px solid rgba(90, 209, 255, .32);
  background:
    linear-gradient(180deg, rgba(90, 209, 255, .10), rgba(8, 16, 30, .85)),
    rgba(8, 16, 30, .9);
  color: #cfeeff;
}


/* ============================================================================
   SECTION 3 - CAMPAIGN: show the REAL design card; nav becomes the control bar.
   The redesigned entry card (rendered into #tq-panel-body by renderPanel) now
   provides the profile (media well, Date/Type/Place/Lineage stat grid, bio
   terminal). So the campaign nav's OWN duplicate profile (.tq-camp-inline-stop:
   the current-stop name, media carousel, stat card, bio, full-profile button) is
   hidden. What remains of the nav is the campaign control bar: the status header
   (CAMPAIGN / chapter num / XP / EXIT), chapter route, progress, and the action
   buttons (BACK / LISTEN / FLASH CARDS / QUIZ). One card everywhere.
   ============================================================================ */
body.campaign-mode #tq-panel-body .tq-camp-inline-stop { display: none !important; }
/* the campaign control bar sits cleanly above the card */
body.campaign-mode .tq-camp-inline-nav { margin-bottom: 14px; }
/* Show the design card's header (title + type badge + Full Profile) in campaigns;
   the campaign nav no longer prints the character name, so the card title is it.
   The lineage list and suggested-next stay hidden mid-quest. */
body.campaign-mode #tq-panel-body > .tq-panel-identity { display: block !important; }
body.campaign-mode #tq-panel-body > .tq-panel-identity .tq-panel-action-row { margin-top: 10px; }


/* ============================================================================
   SECTION 4 - CAMPAIGN STOP LAYOUT: design card on top, controls compact below.
   The profile reads first (name + LISTEN, photo, stats, bio); the campaign control
   nav (status line, chapter 01/10, EXIT, BACK/FLASH/QUIZ) drops to the BOTTOM and
   is no longer a full-width bar across the top.
   ============================================================================ */
/* campaign card uses normal block flow; design-card order comes from renderPanel */
body.campaign-mode #tq-panel-body > .tq-panel-identity   { order: 0; }
body.campaign-mode #tq-panel-body > .tq-pmedia           { order: 1; display: block !important; }
body.campaign-mode #tq-panel-body > .tq-pstats           { order: 2; }
body.campaign-mode #tq-panel-body > .tq-bioterm          { order: 3; }
body.campaign-mode #tq-panel-body > #tq-camp-inline-nav  { order: 9; margin: 8px 0 0; }

/* Title + LISTEN header row (LISTEN to the right of the name). */
.tq-id-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tq-id-listen {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .1em; color: #06121f;
  background: linear-gradient(180deg,#fff4cf,#f5d27f 40%,#e8b872 72%,#a57a3f);
  border: 2px solid #0F0B07; border-radius: 5px; padding: 9px 12px; box-shadow: 0 3px 0 #6e4c1d;
}
.tq-id-listen svg { width: 13px; height: 13px; }
.tq-id-listen:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e4c1d; }
.tq-id-listen.playing { background: linear-gradient(180deg,#bdf1ff,#5ad1ff 60%,#2a78c4); }

/* The campaign nav's own LISTEN is redundant now (title has one); keep BACK/FLASH/QUIZ. */
body.campaign-mode .tq-camp-inline-actions .tq-camp-inline-voice { display: none !important; }