/* ==========================================================================
   The Scribe's Forbidden Archive - Complete Stylesheet
   Themes: Dragon Ember | Shadow Velvet | Citadel Sage
   Aesthetic: Cozy Dark Academia / Romantasy Solo Journaling RPG
   ========================================================================== */

/* Self-hosted fonts (Latin subset — covers English & Spanish) so the type system
   works fully offline instead of depending on a live fonts.googleapis.com request. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/caveat-600.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/caveat-600.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/cinzel-500.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/cinzel-500.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/cinzel-500.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 900; font-display: swap; src: url('../assets/fonts/cinzel-500.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/cinzel-decorative-700.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/eb-garamond-400i.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/eb-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/eb-garamond-400.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/eb-garamond-400.woff2') format('woff2'); }

:root {
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-title: 'Cinzel', serif;
  --font-body: 'Cormorant Garamond', 'EB Garamond', serif;
  --font-hand: 'Caveat', cursive;

  /* Cozy Dark Academia / Library Palette: Warm Cream, Antique Leather Brown & Burnished Gold */
  --bg-desk: #231913;
  --bg-desk-light: #2e2118;
  --bg-desk-card: #271c15;
  --accent-gold: #e29b38;
  --accent-gold-light: #f5c26b;
  --accent-gold-dim: #9e6924;
  --accent-silver: #e2e8f0;
  --accent-silver-dim: #94a3b8;
  --parchment-base: #faf4eb;
  --parchment-border: #d6c3a8;
  --parchment-text: #231c16;
  --parchment-sub: #544435;
  --wax-color: #981b1b;
  --wax-glow: rgba(152, 27, 27, 0.45);
  --ambient-glow: rgba(226, 155, 56, 0.18);
  --cyan-spectral: #48cae4;
  --border-color: rgba(158, 105, 36, 0.35);
}

/* Theme 1: War College of Dragonriders (Warm Amber Ember, Volcanic Leather & Gold) */
body.theme-dragon-ember {
  --bg-desk: #231913;
  --bg-desk-light: #302219;
  --bg-desk-card: #281d16;
  --accent-gold: #e29b38;
  --accent-gold-light: #f5c26b;
  --accent-gold-dim: #9e6924;
  --parchment-base: #faf4eb;
  --parchment-border: #d6c3a8;
  --parchment-text: #231c16;
  --parchment-sub: #544435;
  --wax-color: #981b1b;
  --wax-glow: rgba(152, 27, 27, 0.5);
  --ambient-glow: rgba(226, 155, 56, 0.2);
  --border-color: rgba(158, 105, 36, 0.4);
  --accent-silver: #e5ded4;
  --accent-silver-dim: #a89f91;
}

/* Theme 2: Court of Midnight Shadows (Plum Leather, Rose Gold & Amethyst Velvet) */
body.theme-shadow-velvet {
  --bg-desk: #1f1724;
  --bg-desk-light: #291e30;
  --bg-desk-card: #231929;
  --accent-gold: #d8a0c2;
  --accent-gold-light: #f2cce2;
  --accent-gold-dim: #8b5779;
  --parchment-base: #f5eff7;
  --parchment-border: #cfc2d6;
  --parchment-text: #221829;
  --parchment-sub: #5c4a5e;
  --wax-color: #561858;
  --wax-glow: rgba(86, 24, 88, 0.5);
  --ambient-glow: rgba(216, 160, 194, 0.18);
  --border-color: rgba(139, 87, 121, 0.45);
  --accent-silver: #e6dbe8;
  --accent-silver-dim: #a99bb0;
}

/* Theme 3: Living Citadel of Whispering Tomes (Ancient Sage, Moss Gold & Antique Vellum) */
body.theme-citadel-sage {
  --bg-desk: #1a221c;
  --bg-desk-light: #232d26;
  --bg-desk-card: #1c261f;
  --accent-gold: #c8a855;
  --accent-gold-light: #ecd58b;
  --accent-gold-dim: #7f6930;
  --parchment-base: #f0f4ec;
  --parchment-border: #c2ceb9;
  --parchment-text: #19231b;
  --parchment-sub: #48503f;
  --wax-color: #1e4a36;
  --wax-glow: rgba(30, 74, 54, 0.5);
  --ambient-glow: rgba(130, 175, 125, 0.18);
  --border-color: rgba(127, 105, 48, 0.4);
  --accent-silver: #dce6d6;
  --accent-silver-dim: #9fae97;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: var(--bg-desk);
  background-image:
    radial-gradient(circle at 50% 12%, rgba(226, 155, 56, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(139, 30, 15, 0.14) 0%, transparent 50%),
    linear-gradient(180deg, rgba(32, 23, 17, 0.88) 0%, rgba(44, 31, 23, 0.84) 50%, rgba(24, 17, 12, 0.93) 100%),
    url('../assets/images/scriptorium_cinema.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: #f7efe4;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.8s ease;
}

/* Ambient library lighting overlay */
.desk-lighting-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 25% 20%, var(--ambient-glow) 0%, transparent 65%),
              radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
  z-index: 1;
}

/* Application Screens */
.app-screen {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

.app-screen.active {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   1. CINEMASCOPE OPENING TEASER (VFX & SPECIAL EFFECTS OVERHAUL)
   ========================================================================== */
#introScreen {
  justify-content: center;
  align-items: center;
  background: #080706;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  box-sizing: border-box;
}

.cinema-backdrop-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.cinema-backdrop-image {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: kenBurnsCamera 26s ease-in-out infinite alternate;
  filter: brightness(0.6) contrast(1.15) saturate(1.1);
  transform-origin: center center;
}

@keyframes kenBurnsCamera {
  0% {
    transform: scale(1.0) translate(0%, 0%);
    filter: brightness(0.55) contrast(1.15) saturate(1.1);
  }
  50% {
    transform: scale(1.15) translate(-2%, -1.5%);
    filter: brightness(0.72) contrast(1.22) saturate(1.25);
  }
  100% {
    transform: scale(1.08) translate(1.8%, -0.8%);
    filter: brightness(0.58) contrast(1.18) saturate(1.15);
  }
}

.cinema-vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(10, 8, 7, 0.25) 0%, rgba(10, 8, 7, 0.7) 65%, #080605 95%),
              linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

.intro-dust-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
}

.cinema-letterbox-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 64px;
  background: #020202;
  border-top: 1px solid rgba(226, 149, 58, 0.15);
  border-bottom: 1px solid rgba(226, 149, 58, 0.15);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.95);
}
.cinema-bar-top { top: 0; }
.cinema-bar-bottom { bottom: 0; }

.cinema-reel-code {
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--accent-gold);
  opacity: 0.75;
}

.cinema-hint-text {
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: #a89f91;
}

.cinema-content-box {
  position: relative;
  max-width: 820px;
  padding: 45px 40px;
  text-align: center;
  z-index: 6;
  background: rgba(16, 12, 10, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 149, 58, 0.3);
  border-radius: 8px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.75), inset 0 0 35px rgba(226, 149, 58, 0.08);
}

.cinema-ambient-sparks {
  position: relative;
  display: inline-block;
}

.candle-flame-icon {
  font-size: 3.2rem;
  margin-bottom: 15px;
  animation: flickerGlow 3s infinite alternate;
  display: inline-block;
  filter: drop-shadow(0 0 16px rgba(245, 166, 35, 0.8));
}

@keyframes flickerGlow {
  0% { transform: scale(1) rotate(-1deg); filter: drop-shadow(0 0 10px #f5a623); }
  50% { transform: scale(1.1) rotate(1.5deg); filter: drop-shadow(0 0 22px #ff7b00) drop-shadow(0 0 35px rgba(226,149,58,0.5)); }
  100% { transform: scale(0.95) rotate(-2deg); filter: drop-shadow(0 0 12px #e08714); }
}

/* Transparent Liquid Gold Shimmer Text Effect */
.intro-epic-title {
  font-family: var(--font-display);
  font-size: 3.1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #ffe8b3 18%, #e2953a 40%, #fff7db 55%, #b57622 75%, #ffe8b3 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 7s linear infinite;
  filter: drop-shadow(0 0 25px rgba(226, 149, 58, 0.45));
}

@keyframes textShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.intro-sub-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: #dfd7cc;
  letter-spacing: 4px;
  margin-bottom: 25px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.intro-quote-box {
  background: rgba(26, 20, 17, 0.7);
  border-left: 3px solid var(--accent-gold);
  border-right: 3px solid var(--accent-gold);
  padding: 22px 30px;
  margin-bottom: 35px;
  font-style: italic;
  font-size: 1.35rem;
  color: #f7efe4;
  border-radius: 4px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
}

.btn-cinema-ignite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  padding: 16px 38px;
  background: linear-gradient(135deg, #f0a248, #b86e1c);
  color: #100b08;
  font-weight: 800;
  letter-spacing: 2.5px;
  box-shadow: 0 0 25px rgba(226, 149, 58, 0.55), 0 6px 20px rgba(0, 0, 0, 0.7);
  animation: pulseGlow 3.5s infinite ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(226, 149, 58, 0.4), 0 6px 20px rgba(0, 0, 0, 0.7); }
  50% { box-shadow: 0 0 35px rgba(245, 166, 35, 0.8), 0 8px 25px rgba(0, 0, 0, 0.9); }
}

.flame-sparkle {
  color: #fff4d1;
  font-size: 1.2rem;
  animation: sparkleTwinkle 1.8s infinite alternate;
}

@keyframes sparkleTwinkle {
  0% { opacity: 0.4; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.15); }
}

/* On short/narrow phones the full cinematic stack (letterbox bars + candle + title +
   subtitle + quote + button) is taller than the viewport; #introScreen now scrolls as
   a safety net, but shrinking everything here means most phones never need to scroll
   to see the title at top or the Ignite button at bottom. */
@media (max-width: 480px), (max-height: 700px) {
  .cinema-letterbox-bar {
    height: 30px;
    padding: 0 16px;
  }

  .cinema-reel-code {
    font-size: 0.58rem;
    letter-spacing: 1.5px;
  }

  .cinema-hint-text {
    font-size: 0.6rem;
    letter-spacing: 1px;
  }

  .cinema-content-box {
    max-width: 92vw;
    padding: 26px 18px;
  }

  .candle-flame-icon {
    font-size: 2.1rem;
    margin-bottom: 8px;
  }

  .intro-epic-title {
    font-size: 1.7rem;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
  }

  .intro-sub-title {
    font-size: 0.82rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .intro-quote-box {
    padding: 14px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .btn-cinema-ignite {
    font-size: 0.82rem;
    padding: 12px 20px;
    gap: 8px;
  }
}

/* Generic Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dim));
  color: #120e0c;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 14px 34px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(226, 149, 58, 0.4);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.btn-secondary {
  background: rgba(40, 34, 30, 0.85);
  color: #dfd7cc;
  font-family: var(--font-title);
  font-size: 0.9rem;
  padding: 10px 20px;
  border: 1px solid var(--accent-gold-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-secondary:hover {
  background: var(--bg-desk-light);
  border-color: var(--accent-gold);
  color: #fff;
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   2. CHARACTER & COVENANT CREATOR
   ========================================================================== */
#creatorScreen {
  padding: 40px 20px;
  justify-content: center;
  align-items: center;
}

.creator-card {
  background: var(--bg-desk-light);
  border: 1px solid rgba(226, 149, 58, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  max-width: 900px;
  width: 100%;
  border-radius: 8px;
  padding: 35px 40px;
}

.creator-header {
  text-align: center;
  border-bottom: 1px solid rgba(226, 149, 58, 0.25);
  padding-bottom: 20px;
  margin-bottom: 25px;
}

.creator-header h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--accent-gold);
}

.creator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

@media (max-width: 768px) {
  .creator-grid {
    grid-template-columns: 1fr;
  }
}

/* The margin box (.modal-overlay/#covenantScreen/#creatorScreen padding) plus a second
   design box (.creator-card/.modal-box/.settings-section padding) stack on top of each
   other — on a 375px phone that was ~80px of combined padding eaten from EACH side
   before any text starts. Shrinking the inner design box's own padding on small screens
   gives text back its room without removing the frame entirely. */
@media (max-width: 480px) {
  #creatorScreen,
  #covenantScreen {
    padding: 20px 12px;
  }

  .creator-card {
    padding: 22px 16px;
  }

  .modal-overlay {
    padding: 10px;
  }

  .modal-box {
    padding: 20px 16px;
  }

  .settings-section {
    padding: 14px 12px;
  }
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: var(--accent-gold);
  margin-bottom: 8px;
}

.text-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 12, 10, 0.9);
  border: 1px solid rgba(226, 149, 58, 0.4);
  color: #fff;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1.1rem;
}

.text-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 10px rgba(226, 149, 58, 0.3);
}

/* Portraits Selection Row (full rules consolidated below in the SCRIBE PERSONALITY DOSSIER MODAL section) */
.portrait-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}

.portrait-name {
  font-size: 0.8rem;
  font-family: var(--font-title);
  color: #dfd7cc;
  display: block;
}

/* Faction selector radio buttons */
.faction-choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faction-choice-item {
  background: rgba(15, 12, 10, 0.8);
  border: 1px solid rgba(226, 149, 58, 0.25);
  border-radius: 4px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.faction-choice-item:hover {
  border-color: var(--accent-gold);
}

.faction-choice-item.active {
  border-color: var(--accent-gold);
  background: rgba(45, 35, 25, 0.6);
  box-shadow: inset 0 0 12px rgba(226, 149, 58, 0.2);
}

.faction-title {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--accent-gold);
  font-size: 1rem;
}

/* ==========================================================================
   3. DESK VIEWPORT (MAIN SCRIPTorium)
   ========================================================================== */
#deskScreen {
  padding-bottom: 60px;
}

/* Header Bar */
.desk-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  background: rgba(10, 8, 7, 0.85);
  border-bottom: 1px solid rgba(226, 149, 58, 0.25);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.scribe-emblem-badge {
  font-size: 1.5rem;
  color: var(--accent-gold);
}

.header-title-block h1 {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: #f7efe4;
  letter-spacing: 1px;
}

.header-title-block p {
  font-size: 0.85rem;
  color: var(--accent-gold);
}

/* Suspicion & Truth meters */
.stats-dock {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 0.9rem;
}

.suspicion-gauge-wrap {
  width: 130px;
  height: 10px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(226, 149, 58, 0.3);
  border-radius: 5px;
  overflow: hidden;
}

.suspicion-bar-fill {
  height: 100%;
  width: 15%;
  background: linear-gradient(90deg, #588157, #e2953a);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s;
}

.suspicion-bar-fill.high-tension {
  background: linear-gradient(90deg, #e2953a, #c1121f);
}

.suspicion-bar-fill.critical-tension {
  background: #d90429;
  box-shadow: 0 0 10px #d90429;
  animation: pulseGlow 1s infinite alternate;
}

@keyframes pulseGlow {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Tablet band: keep the header comfortably spaced instead of overstretched */
@media (max-width: 1024px) {
  .desk-header {
    padding: 14px 20px;
    gap: 14px;
  }

  .stats-dock {
    gap: 16px;
  }
}

/* Phones: stack/wrap the header so nothing gets clipped by overflow-x: hidden */
@media (max-width: 680px) {
  .desk-header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 16px;
    gap: 10px;
  }

  .header-left, .header-right {
    gap: 10px;
  }

  .header-title-block h1 {
    font-size: 0.95rem;
  }

  .header-title-block p {
    font-size: 0.75rem;
  }

  #headerScribeAvatar {
    width: 34px !important;
    height: 34px !important;
  }

  .stats-dock {
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .stat-item {
    font-size: 0.72rem;
    gap: 5px;
  }

  .suspicion-gauge-wrap {
    width: 70px;
  }

  /* Hide the non-essential track-title label; keep the icon-only transport controls */
  #lblCurrentTrackTitle {
    display: none;
  }

  .music-pill-widget {
    padding: 4px 8px;
  }

  .desk-header .btn-secondary {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}

/* Desk Workspace Container */
.desk-workspace-container {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px;
}

/* ==========================================================================
   PHASE 1: SEALED POUCH / IMPERIAL FOLIO (UNOBSTRUCTED & ORNATE)
   ========================================================================== */
.sealed-pouch-card {
  background: linear-gradient(145deg, #32251d, #201712);
  border: 2px solid #a67c38;
  border-radius: 16px;
  padding: 55px 40px 45px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), inset 0 0 40px rgba(212, 175, 55, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

/* The vertical ribbon obstruction has been removed. A decorative horizontal crest band sits BEHIND the seal only */
.sealed-pouch-ribbon {
  display: none !important; /* Fully disabled to prevent obscuring text */
}

/* Decorative Gold & Silver Book Corner Filigree */
.corner-filigree {
  position: absolute;
  width: 38px;
  height: 38px;
  pointer-events: none;
  z-index: 4;
}

.corner-tl { top: 8px; left: 8px; }
.corner-tr { top: 8px; right: 8px; transform: rotate(90deg); }
.corner-bl { bottom: 8px; left: 8px; transform: rotate(-90deg); }
.corner-br { bottom: 8px; right: 8px; transform: rotate(180deg); }

.pouch-unsealed {
  opacity: 0.5;
  transform: scale(0.98);
}

/* Text inside pouch card has explicit high z-index and clear breathing room */
#inspectPouchTitleText {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--accent-gold);
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

#pouchInstructionText {
  position: relative;
  z-index: 3;
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: #f7efe4;
  margin-bottom: 25px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Wax Seal Long-Press Component */
.wax-seal-container {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 30px auto;
  z-index: 2;
  touch-action: none;
}

.wax-seal-wrapper {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b22222, var(--wax-color), #400808);
  box-shadow: 0 8px 25px var(--wax-glow), inset 0 2px 5px rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.wax-seal-wrapper:active {
  transform: scale(0.97);
}

.wax-emblem {
  font-size: 2.8rem;
  color: #ecd7b7;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.seal-progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.seal-progress-ring-circle {
  stroke: var(--accent-gold);
  stroke-width: 4;
  fill: transparent;
  transition: stroke-dashoffset 0.05s linear;
}

/* Seal Fracture Debris Animation */
.seal-shattered {
  animation: shatterExplosion 0.5s forwards ease-out;
}

@keyframes shatterExplosion {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15) rotate(4deg); opacity: 0.8; }
  100% { transform: scale(1.4) rotate(15deg); opacity: 0; pointer-events: none; }
}

.wax-debris-particle {
  position: absolute;
  background: var(--wax-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
}

/* ==========================================================================
   PHASE 2: TACTILE WORKBENCH (ANCIENT PARCHMENT)
   ========================================================================== */
.tactile-workbench {
  display: none;
  background: var(--parchment-base);
  color: var(--parchment-text);
  border-radius: 16px;
  padding: 50px 55px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(166, 124, 56, 0.5), inset 0 0 60px rgba(180, 150, 110, 0.25);
  border: 2px solid #bfa068;
  position: relative;
}

@media (max-width: 600px) {
  .tactile-workbench {
    padding: 28px 22px;
  }
}

@media (max-width: 480px) {
  .tactile-workbench {
    padding: 18px 16px;
    border-radius: 10px;
  }

  .sealed-pouch-card {
    padding: 32px 18px 28px;
  }

  #inspectPouchTitleText {
    font-size: 1.5rem;
  }

  .wax-seal-container,
  .seal-progress-ring {
    width: 110px;
    height: 110px;
  }

  .spectral-lens-tool {
    width: 110px;
    height: 110px;
  }
}

.folio-reveal-anim {
  animation: folioUnfurl 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes folioUnfurl {
  0% { transform: translateY(20px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.folio-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--parchment-border);
  padding-bottom: 12px;
  margin-bottom: 20px;
  font-family: var(--font-title);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.folio-title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--parchment-text);
}

.official-text-block {
  font-size: 1.25rem;
  line-height: 1.8;
  white-space: pre-line;
  margin-bottom: 25px;
}

/* Tool Banner */
.tactile-tool-banner {
  background: var(--bg-desk);
  color: var(--accent-gold);
  font-family: var(--font-title);
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tool 1: Ash Scratch Canvas */
.ash-tool-wrapper {
  position: relative;
  width: 100%;
  min-height: 220px;
  margin: 15px 0;
  border-radius: 4px;
  overflow: hidden;
}

.ash-secret-text-underlay {
  padding: 20px;
  background: color-mix(in srgb, var(--parchment-base) 90%, var(--parchment-text) 10%);
  border: 1px dashed var(--parchment-border);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--wax-color);
  font-weight: 600;
}

#ashCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  z-index: 2;
}

/* Tool 2: Spectral UV Lens */
.uv-interactive-container {
  position: relative;
  min-height: 220px;
  background: color-mix(in srgb, var(--parchment-base) 90%, var(--parchment-text) 10%);
  border: 1px solid var(--parchment-border);
  padding: 25px;
  margin: 15px 0;
  overflow: hidden;
  cursor: none;
}

.uv-secret-layer {
  position: absolute;
  inset: 0;
  padding: 25px;
  background: rgba(20, 28, 35, 0.97);
  color: var(--cyan-spectral);
  font-size: 1.25rem;
  line-height: 1.8;
  font-weight: 600;
  text-shadow: 0 0 8px var(--cyan-spectral), 0 0 16px rgba(72, 202, 228, 0.6);
  clip-path: circle(0px at 0 0);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.uv-revealed-permanent {
  clip-path: none !important;
  background: rgba(20, 28, 35, 0.85);
}

.spectral-lens-tool {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 6px solid var(--accent-gold-dim);
  box-shadow: 0 0 20px rgba(72, 202, 228, 0.4), inset 0 0 15px rgba(72, 202, 228, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
}

/* Tool 3: Blackout Poetry Engine */
.blackout-words-container {
  line-height: 2.2;
  font-size: 1.35rem;
  margin: 20px 0;
}

.redactable-word {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.redactable-word:hover {
  background: rgba(0, 0, 0, 0.1);
}

.redactable-word.redacted {
  background-color: #171412;
  color: #171412;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
  user-select: none;
}

.subversive-poem-card {
  background: color-mix(in srgb, var(--parchment-base) 90%, var(--parchment-text) 10%);
  border-left: 4px solid var(--wax-color);
  padding: 16px 20px;
  margin-top: 20px;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--parchment-text);
}

/* Tool 4: Alchemical Cipher Wheel */
.cipher-tool-wrapper {
  text-align: center;
  padding: 20px 0;
}

.cipher-wheel-svg {
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 15px auto;
  cursor: grab;
  touch-action: none;
  display: block;
}

.cipher-wheel-svg:active {
  cursor: grabbing;
}

.cipher-locked {
  filter: drop-shadow(0 0 15px #48cae4);
  pointer-events: none;
}

.cipher-status-msg {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--accent-gold-dim);
  margin-top: 10px;
}

.solved-glow {
  color: #1b6348;
  font-weight: 700;
}

/* Secret Revealed Highlight Box */
.secret-revealed-box {
  display: none;
  background: color-mix(in srgb, var(--parchment-text) 12%, transparent);
  border: 1px dashed var(--accent-gold);
  border-radius: 4px;
  padding: 18px 22px;
  margin-top: 25px;
  font-size: 1.15rem;
  color: var(--wax-color);
}

.secret-revealed-box.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

/* ==========================================================================
   PHASE 3: DILEMMA ACTIONS DOCK
   ========================================================================== */
.dilemma-actions-dock {
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid var(--parchment-border);
}

.dilemma-question-text {
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--parchment-text);
  margin-bottom: 20px;
  text-align: center;
}

.dilemma-buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .dilemma-buttons-grid {
    grid-template-columns: 1fr;
  }
}

.dilemma-choice-card {
  background: color-mix(in srgb, var(--parchment-base) 90%, var(--parchment-text) 10%);
  border: 1px solid var(--parchment-border);
  border-radius: 6px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease;
}

.dilemma-choice-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-gold-dim);
}

.dilemma-card-title {
  display: block;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--parchment-text);
  margin-bottom: 6px;
}

.dilemma-card-desc {
  font-size: 0.95rem;
  color: var(--parchment-sub);
  line-height: 1.4;
}

/* ==========================================================================
   PHASE 4: NIGHT JOURNALING
   ========================================================================== */
.night-journal-card {
  background: #191411;
  border: 1px solid rgba(226, 149, 58, 0.35);
  border-radius: 8px;
  padding: 35px 40px;
  margin-top: 35px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8);
}

.journal-enter-anim {
  animation: fadeIn 0.6s ease;
}

.journal-header {
  text-align: center;
  margin-bottom: 20px;
}

.journal-header h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--accent-gold);
}

.journal-prompt-quote {
  font-style: italic;
  font-size: 1.25rem;
  color: #dfd7cc;
  margin: 15px 0 25px;
  padding: 12px 20px;
  background: rgba(40, 32, 27, 0.6);
  border-left: 3px solid var(--accent-gold);
  border-radius: 4px;
}

.journal-textarea {
  width: 100%;
  height: 180px;
  background: #0f0c0a;
  border: 1px solid rgba(226, 149, 58, 0.3);
  color: #f7efe4;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1.8;
  padding: 20px;
  border-radius: 4px;
  resize: vertical;
}

.journal-textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
}

.journal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ==========================================================================
   MODALS (INQUISITION, CODEX, TUTORIAL)
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 200;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.modal-box {
  background: var(--bg-desk-light);
  border: 1px solid var(--accent-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  max-width: 800px;
  width: 100%;
  border-radius: 8px;
  padding: 35px 40px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Generic Modal Header (Library Map, Book Reader, and any future modal reusing this pattern) */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(226, 149, 58, 0.25);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-icon {
  font-size: 1.8rem;
  color: var(--accent-gold);
  flex-shrink: 0;
  line-height: 1;
}

.modal-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--accent-silver-dim);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  background: rgba(40, 34, 30, 0.85);
  border: 1px solid var(--accent-gold-dim);
  border-radius: 50%;
  color: #dfd7cc;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
}

.modal-close:hover {
  background: var(--bg-desk-light);
  border-color: var(--accent-gold);
  color: #fff;
  transform: rotate(90deg);
}

.modal-close:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Midnight Inquisition Specifics */
.inquisition-box {
  border-color: #d90429;
  background: #190a0d;
}

.inquisition-header h2 {
  color: #ff4d6d;
  font-family: var(--font-display);
}

.inquisition-question {
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: #fff;
  margin: 20px 0;
}

.inquisition-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-inquisition-opt {
  text-align: left;
  padding: 14px 18px;
  font-size: 1.05rem;
}

/* Clandestine Codex Facsimile */
.codex-parchment-sheet {
  background: #f7efe4;
  color: #26201a;
  border-radius: 4px;
  padding: 30px;
  margin-bottom: 25px;
  border: 1px solid #d9c5ab;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.codex-sheet-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-title);
  font-size: 0.85rem;
  border-bottom: 1px solid #c9b499;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.codex-folio-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.codex-secret-marginalia {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: #8b1e0f;
  margin: 15px 0;
  line-height: 1.5;
}

.codex-subversive-verse {
  background: #eae0d0;
  padding: 10px 16px;
  font-style: italic;
  font-size: 1.15rem;
  color: #4a2113;
  margin: 15px 0;
}

/* Tutorial Spotlight Target */
.tutorial-target-highlight {
  outline: 3px solid var(--accent-gold);
  box-shadow: 0 0 25px var(--accent-gold);
  transition: all 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   PRINT STYLES FOR CLANDESTINE CODEX PDF EXPORT
   ========================================================================== */
/* ==========================================================================
   REAL PDF EXPORT (html2pdf.js capture pass) — applied via a temporary class
   on a cloned document, since html2canvas does not evaluate @media print.
   ========================================================================== */
.pdf-export-mode #codexFolioContainer {
  background: #f7f0dc;
  padding: 28px;
}

.pdf-export-mode .codex-parchment-sheet,
.pdf-export-mode .codex-epilogue-card {
  background: #f7f0dc !important;
  color: #241b12 !important;
  border: 1px solid #ad8a4a !important;
  box-shadow: none !important;
}

/* Applied directly to the live DOM (not just the html2canvas clone) right before
   export, because html2pdf's page-break detection reads the source tree before
   cloning — a class added only inside onclone is invisible to it. */
.pdf-page-break {
  break-after: page;
  page-break-after: always;
}

.pdf-export-mode .codex-folio-title,
.pdf-export-mode .codex-day-tag,
.pdf-export-mode .codex-class-tag {
  color: #6b4a1e !important;
}

.pdf-export-mode .codex-secret-marginalia,
.pdf-export-mode .codex-subversive-verse {
  color: #7a1f1f !important;
}

.pdf-export-mode .codex-sheet-footer {
  color: #6b6250 !important;
}

.pdf-export-mode .pdf-cover-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: #8a5a1e;
  text-align: center;
  margin: 0 0 6px;
}

.pdf-export-mode .pdf-cover-sub {
  text-align: center;
  color: #5a4a35;
  font-size: 0.95rem;
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid #ad8a4a;
  line-height: 1.6;
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .no-print,
  .desk-header,
  .desk-lighting-layer,
  .audio-controls-panel,
  .btn-primary,
  .btn-secondary,
  .modal-overlay:not(#codexModal),
  #introScreen,
  #hubScreen,
  #covenantScreen,
  #creatorScreen {
    display: none !important;
  }

  #codexModal {
    position: static !important;
    background: transparent !important;
    display: block !important;
    padding: 0 !important;
  }

  .modal-box {
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .codex-parchment-sheet {
    page-break-after: always;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 2.5cm !important;
    height: 100vh;
    box-sizing: border-box;
  }

  .codex-secret-marginalia {
    color: #400 !important;
  }
}

/* ==========================================================================
   SETTINGS MODAL & CONFIGURATION OVERHAUL
   ========================================================================== */
.modal-header-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(226, 149, 58, 0.25);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.settings-section {
  background: rgba(25, 20, 17, 0.65);
  border: 1px solid rgba(226, 149, 58, 0.15);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.settings-heading {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--accent-gold);
  letter-spacing: 1px;
}

.settings-audio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 25px;
  margin-top: 12px;
}

@media (max-width: 600px) {
  .settings-audio-grid {
    grid-template-columns: 1fr;
  }
}

.settings-audio-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-audio-item span {
  font-size: 0.95rem;
  color: #dfd7cc;
}

.settings-audio-item input[type="range"] {
  width: 100%;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

.settings-lang-btn {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--font-title);
  font-weight: 600;
  transition: all 0.2s ease;
}

.settings-lang-btn.active {
  background: var(--accent-gold);
  color: #120e0c;
  border-color: var(--accent-gold);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(226, 149, 58, 0.4);
}

.settings-themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 600px) {
  .settings-themes-grid {
    grid-template-columns: 1fr;
  }
}

.settings-theme-card {
  background: #1e1713;
  border: 1px solid rgba(226, 149, 58, 0.25);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.settings-theme-card:hover {
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

.settings-theme-card.active {
  border-color: var(--accent-gold);
  box-shadow: 0 0 15px rgba(226, 149, 58, 0.35);
  background: #2b211a;
}

.settings-theme-card .theme-name {
  display: block;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 4px;
}

.settings-theme-card .theme-colors-preview {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

.theme-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.settings-danger-zone {
  border-color: rgba(217, 4, 41, 0.35);
  background: rgba(35, 15, 18, 0.5);
}

/* ==========================================================================
   BLACKOUT POETRY (LETTER 3) RESOLUTION STYLES
   ========================================================================== */
.blackout-helper-card {
  background: color-mix(in srgb, var(--parchment-base) 90%, var(--parchment-text) 10%);
  border: 1px solid var(--parchment-border);
  border-left: 4px solid var(--accent-gold);
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.blackout-stats-row {
  display: flex;
  gap: 15px;
  margin: 10px 0 14px;
}

.counter-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

.badge-redacted {
  background: var(--bg-desk-card);
  color: var(--accent-gold);
  border: 1px solid var(--border-color);
}

.badge-surviving {
  background: var(--parchment-base);
  color: var(--parchment-text);
  border: 1px solid var(--parchment-border);
}

.blackout-action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#btnSealBlackout {
  background: linear-gradient(135deg, var(--wax-color), color-mix(in srgb, var(--wax-color) 55%, black));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--wax-color) 70%, white);
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 15px var(--wax-glow);
  transition: all 0.2s ease;
}

#btnSealBlackout:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--wax-color) 85%, white), var(--wax-color));
  box-shadow: 0 0 20px var(--wax-glow);
  transform: translateY(-2px);
}

/* 4 Scribe Portraits Grid */
.portraits-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .portraits-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.portrait-select-card {
  position: relative;
  background: #1f1814;
  border: 2px solid #4a392b;
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.portrait-select-card:hover {
  border-color: var(--accent-gold);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.portrait-select-card.active {
  border-color: var(--accent-gold);
  box-shadow: 0 0 18px rgba(226, 149, 58, 0.5);
  background: #2b211a;
}

.portrait-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
  display: block;
}

.portrait-gender-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(18, 14, 11, 0.85);
  color: var(--accent-gold);
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(226, 149, 58, 0.4);
}

/* ==========================================================================
   SCRIBE DESK TOOL TRAY & RICH SCRIBE SUITE
   ========================================================================== */
.scribe-desk-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(36, 26, 19, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 155, 56, 0.3);
  border-radius: 14px;
  padding: 12px 22px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  gap: 15px;
  flex-wrap: wrap;
}

.scribe-tray-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tool-tray-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1c140f;
  border: 1px solid rgba(226, 155, 56, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  color: #e5ded4;
  font-family: var(--font-title);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.tool-tray-btn:hover {
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tool-tray-btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.tool-tray-btn.active {
  background: var(--accent-gold);
  color: #120e0c;
  border-color: var(--accent-gold);
  font-weight: 700;
  box-shadow: 0 0 15px rgba(226, 155, 56, 0.45);
}

.scribe-tray-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-scriptorium-action {
  background: linear-gradient(135deg, #3a281d, #251a13);
  border: 1px solid var(--accent-gold);
  border-radius: 8px;
  padding: 8px 16px;
  color: var(--accent-gold-light);
  font-family: var(--font-title);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-scriptorium-action:hover {
  background: linear-gradient(135deg, #4d3627, #2d2017);
  box-shadow: 0 0 15px rgba(226, 155, 56, 0.4);
  transform: translateY(-2px);
}

/* ==========================================================================
   CHAINED GRIMOIRES PROHIBITED STACKS MODAL
   ========================================================================== */
.grimoire-card {
  background: linear-gradient(145deg, #2a1f18, #1c140f);
  border: 1px solid rgba(226, 155, 56, 0.3);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  position: relative;
  transition: transform 0.25s ease;
}

.grimoire-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-gold);
}

.grimoire-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(226, 155, 56, 0.18);
  padding-bottom: 10px;
}

.grimoire-icon {
  font-size: 2rem;
  color: var(--accent-gold);
}

.grimoire-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--accent-gold-light);
}

.grimoire-cat {
  font-size: 0.8rem;
  color: #a89f91;
  letter-spacing: 1px;
}

.grimoire-excerpt {
  font-style: italic;
  color: #e5ded4;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.grimoire-clue-box {
  background: rgba(139, 30, 15, 0.2);
  border-left: 3px solid #8b1e0f;
  padding: 10px 14px;
  font-size: 0.95rem;
  color: #ffd6cc;
  border-radius: 4px;
}

/* ==========================================================================
   COMPARATIVE CENSORED LEDGER MODAL (SPLIT COMPARISON)
   ========================================================================== */
.compare-ledger-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .compare-ledger-grid {
    grid-template-columns: 1fr;
  }
}

.compare-folio-page {
  background: var(--parchment-base);
  color: var(--parchment-text);
  border-radius: 12px;
  padding: 25px;
  border: 1px solid var(--parchment-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: relative;
}

.compare-folio-page.court-doctrine {
  border-top: 5px solid var(--parchment-sub);
}

.compare-folio-page.rescued-truth {
  border-top: 5px solid var(--wax-color);
  background: color-mix(in srgb, var(--parchment-base) 92%, var(--wax-color) 8%);
}

.compare-folio-tag {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.tag-doctrine {
  background: var(--parchment-border);
  color: var(--parchment-text);
}

.tag-truth {
  background: var(--wax-color);
  color: #fff;
}

.compare-body-text {
  font-size: 1.15rem;
  line-height: 1.7;
  white-space: pre-line;
}

/* General Rounded Corners for Modals, Cards, and Inputs */
.creator-card,
.modal-box,
.night-journal-card,
.settings-section,
.dilemma-choice-card {
  border-radius: 16px !important;
}

.text-input,
.journal-textarea,
.btn-primary,
.btn-secondary {
  border-radius: 8px !important;
}

/* ==========================================================================
   SCRIBE PERSONALITY DOSSIER MODAL
   ========================================================================== */
.dossier-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 25px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .dossier-grid {
    grid-template-columns: 1fr;
  }
}

.dossier-portrait-frame {
  position: relative;
  border: 3px solid var(--accent-gold);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(226, 155, 56, 0.25);
  background: #1c140f;
}

.dossier-portrait-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.dossier-gender-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(22, 16, 12, 0.9);
  padding: 4px 10px;
  font-size: 0.82rem;
  z-index: 2;
}

.dossier-info-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 10px;
}

.dossier-section {
  background: rgba(28, 20, 15, 0.6);
  border: 1px solid rgba(226, 155, 56, 0.18);
  border-radius: 8px;
  padding: 12px 16px;
}

.dossier-name-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent-gold-light);
  margin-bottom: 2px;
}

.dossier-role-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: #a89f91;
}

.dossier-label {
  display: block;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.dossier-body-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #f7efe4;
}

.dossier-quote-card {
  background: rgba(139, 30, 15, 0.15);
  border-left: 4px solid var(--accent-gold);
  border-radius: 6px;
  padding: 14px 18px;
  font-style: italic;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.5;
}

.btn-expand-portrait {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(30, 22, 16, 0.85);
  border: 1px solid rgba(226, 155, 56, 0.35);
  border-radius: 4px;
  color: var(--accent-gold-light);
  font-family: var(--font-title);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-expand-portrait:hover {
  background: var(--accent-gold);
  color: #120e0c;
  border-color: var(--accent-gold);
  font-weight: 700;
}

/* ==========================================================================
   AMBIENT MUSIC PILL WIDGET (COZY SOUNDTRACK PLAYER)
   ========================================================================== */
.music-pill-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(28, 20, 15, 0.88);
  border: 1px solid rgba(226, 155, 56, 0.4);
  border-radius: 20px;
  padding: 4px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.music-pill-widget:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 4px 18px rgba(226, 155, 56, 0.3);
}

.music-btn-icon {
  background: none;
  border: none;
  color: var(--accent-gold);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, color 0.15s ease;
}

.music-btn-icon:hover {
  transform: scale(1.15);
  color: var(--accent-gold-light);
}

.music-pill-info {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 170px;
  overflow: hidden;
}

.music-track-title {
  font-family: var(--font-title);
  font-size: 0.82rem;
  color: #f7efe4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle Animated Equalizer Bars */
.music-anim-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  width: 12px;
}

.music-anim-wave span {
  width: 2px;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 1px;
  transition: height 0.2s ease;
}

.music-anim-wave.playing span:nth-child(1) {
  animation: musicWave 0.8s ease-in-out infinite alternate;
}
.music-anim-wave.playing span:nth-child(2) {
  animation: musicWave 1.1s ease-in-out infinite alternate 0.2s;
}
.music-anim-wave.playing span:nth-child(3) {
  animation: musicWave 0.9s ease-in-out infinite alternate 0.4s;
}

@keyframes musicWave {
  0% { height: 3px; }
  100% { height: 12px; }
}

@media (max-width: 900px) {
  .music-pill-info {
    max-width: 110px;
  }
}

/* ==========================================================================
   SCRIBE DOSSIER UX & INTERACTIVE BUTTONS
   ========================================================================== */
.portrait-thumb-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
  cursor: pointer;
}

.portrait-thumb-wrapper .portrait-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

.portrait-thumb-wrapper:hover .portrait-thumb {
  transform: scale(1.06);
}

.portrait-expand-overlay-icon {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0.85;
  transition: all 0.2s ease;
}

.portrait-thumb-wrapper:hover .portrait-expand-overlay-icon {
  opacity: 1;
  background: rgba(226, 149, 58, 0.9);
  color: #000;
  transform: scale(1.1);
}

.btn-expand-dossier,
.btn-expand-portrait {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(226, 149, 58, 0.16);
  border: 1px solid rgba(226, 149, 58, 0.5);
  border-radius: 4px;
  color: var(--accent-gold);
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-expand-dossier:hover,
.btn-expand-portrait:hover {
  background: rgba(226, 149, 58, 0.35);
  border-color: var(--accent-gold);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.dossier-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(226, 149, 58, 0.2);
  border: 1px solid var(--accent-gold);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.72rem;
  color: var(--accent-gold);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dossier-pill-btn:hover {
  background: var(--accent-gold);
  color: #1a1410;
  transform: scale(1.05);
}

#scribeDossierModal {
  z-index: 9999 !important;
}

#scribeDossierModal .modal-box {
  border: 2px solid var(--accent-gold);
  box-shadow: 0 0 35px rgba(226, 149, 58, 0.3), 0 20px 60px rgba(0, 0, 0, 0.95);
}


/* =============================================================================
   LIBRARY GRAND MAP & 15-PAGE FOLIO BOOK READER STYLES
   ============================================================================= */

/* Map Modal Box */
.library-map-modal-box {
  max-width: 980px;
  width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  transition: max-width 0.3s ease, width 0.3s ease, max-height 0.3s ease;
}

.library-map-modal-box.map-expanded {
  max-width: none;
  width: 98vw;
  max-height: 98vh;
}

.library-map-modal-box.map-expanded .library-map-stage {
  max-height: 78vh;
}

/* Stacked Layout: Map on top, restricted mail & mini-game directly below */
.library-map-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Map Stage */
.library-map-stage {
  position: relative;
  width: 100%;
  max-height: 540px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.4);
  border: 2px solid var(--border-color);
  background: var(--bg-desk-card);
  cursor: pointer;
}

.library-map-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: saturate(1.05) contrast(1.05);
}

/* Interactive Map Pins */
.map-interactive-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map-interactive-pin:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 20;
}

.map-interactive-pin:focus-visible {
  outline: 2px solid var(--accent-gold);
}

.pin-core {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff1c5, #d4af37 65%, #8c6d23);
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(212, 175, 55, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
}

.map-interactive-pin.active-pin .pin-core {
  background: radial-gradient(circle at 35% 35%, #ffffff, #f59e0b 60%, #b45309);
  border-color: var(--accent-gold-light);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.95), 0 0 35px rgba(212, 175, 55, 0.8);
  transform: scale(1.1);
}

.pin-beacon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  margin-left: -26px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.4);
  animation: mapPulse 2.2s infinite ease-out;
  pointer-events: none;
  z-index: 1;
}

.map-interactive-pin.pin-war .pin-beacon {
  background: rgba(239, 68, 68, 0.4);
}

.map-interactive-pin.pin-letters .pin-beacon {
  background: rgba(59, 130, 246, 0.4);
}

.map-interactive-pin.pin-books .pin-beacon {
  background: rgba(245, 158, 11, 0.5);
}

@keyframes mapPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.pin-tag {
  margin-top: 6px;
  background: var(--bg-desk);
  color: var(--accent-gold-light);
  border: 1px solid var(--accent-gold);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Map Prompt Hint (Waiting for User to Click Map) */
.map-prompt-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-desk-light);
  border: 1px dashed var(--accent-gold);
  border-radius: 8px;
  padding: 14px 20px;
  color: var(--accent-gold-light);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  animation: pulseHint 2.4s infinite ease-in-out;
  cursor: pointer;
  user-select: none;
}

.map-prompt-hint .hint-icon {
  color: var(--accent-gold);
  font-size: 1.1rem;
}

@keyframes pulseHint {
  0%, 100% {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
  }
  50% {
    border-color: rgba(254, 240, 138, 0.9);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  }
}

/* Smooth Entrance for Sector Drawer */
@keyframes drawerRevealSlide {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer-open-anim {
  animation: drawerRevealSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sector Inspection Drawer */
.map-sector-drawer {
  background: var(--bg-desk-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.drawer-icon {
  font-size: 2rem;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
}

.drawer-title-wrap {
  min-width: 0;
}

.drawer-title-wrap h4 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--accent-gold);
  overflow-wrap: break-word;
}

.sector-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.82rem;
  color: var(--accent-silver-dim);
}

.sector-description {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--accent-silver);
  margin: 0 0 10px 0;
}

.sector-intel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sector-intel-item {
  background: var(--bg-desk-light);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--accent-silver-dim);
}

/* Confidential War / Court Dispatch Notice + Tactical Mini-Game rules consolidated below in the
   "3 SCENARIO MAPS, IMPERIAL WAR DISPATCH & TACTICAL MINI-GAME STYLES" section to remove duplication. */

/* Attention Pulse Animation (Raven Post -> Daily Envelope / Workbench) */
@keyframes attentionGoldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.8);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 35px 8px rgba(212, 175, 55, 0.9);
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    transform: scale(1);
  }
}

.pouch-attention-pulse, .workbench-attention-pulse {
  animation: attentionGoldPulse 1.6s ease-in-out;
  border-color: var(--accent-gold-light) !important;
}

/* -----------------------------------------------------------------------------
   15-PAGE BOOK READER MODAL
   ----------------------------------------------------------------------------- */
.book-reader-modal-box {
  max-width: 980px;
  width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.book-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.book-selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.book-selector-label {
  font-weight: 700;
  color: var(--accent-gold);
  font-size: 0.9rem;
}

.book-selector-dropdown {
  background: var(--bg-desk-light);
  color: var(--accent-silver);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-selector-dropdown:focus {
  outline: 2px solid var(--accent-gold);
}

.book-page-indicator-pill {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--accent-gold);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.88rem;
  color: var(--accent-gold-light);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}

.book-folio-viewport {
  overflow-y: auto;
  max-height: calc(88vh - 170px);
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Folio Parchment Sheet: Authentic Aged & Crumpled Texture (Papel Viejo y Estrujado sin bolitas) */
.folio-parchment-sheet {
  background-color: #f7f1e1;
  background-image:
    /* Realistic crumpled paper folds & creases */
    linear-gradient(132deg, rgba(150, 110, 60, 0.08) 0%, transparent 26%, rgba(255, 255, 255, 0.25) 34%, transparent 46%, rgba(135, 95, 45, 0.09) 62%, transparent 100%),
    linear-gradient(28deg, rgba(120, 80, 40, 0.07) 0%, transparent 38%, rgba(255, 255, 255, 0.2) 50%, transparent 68%, rgba(140, 95, 40, 0.08) 100%),
    linear-gradient(205deg, rgba(130, 90, 45, 0.06) 0%, transparent 32%, rgba(255, 255, 255, 0.16) 48%, transparent 66%, rgba(110, 75, 30, 0.07) 100%),
    /* Warm antique paper tanning & burned vignette edges */
    radial-gradient(ellipse at 50% 45%, #fdfaf2 0%, #f5ecd6 60%, #e7d3ad 100%);
  color: #1a110a;
  border: 2px solid #c2a673;
  border-radius: 12px;
  padding: 26px 24px;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 50px rgba(140, 95, 45, 0.3),
    inset 0 0 100px rgba(95, 60, 25, 0.18);
  position: relative;
}

.folio-sheet-header {
  text-align: center;
  border-bottom: 2px double #c8b183;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.folio-era {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7c5825;
  font-weight: 700;
}

.folio-chapter-title {
  margin: 4px 0 6px 0;
  font-size: 1.45rem;
  color: #3b240f;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.folio-author {
  font-size: 0.85rem;
  font-style: italic;
  color: #6b4d24;
}

/* Folio Body Grid */
.folio-body-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 800px) {
  .folio-body-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
  }
}

.folio-text-column {
  line-height: 1.75;
  font-size: 1.02rem;
  color: #2b1b0d;
  font-family: 'Cinzel', 'Georgia', serif;
  text-align: justify;
}

.folio-prose::first-letter {
  float: left;
  font-size: 3.2rem;
  line-height: 0.85;
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 2px;
  color: #8c2a1c;
  font-weight: 700;
  font-family: 'Cinzel Decorative', 'Georgia', serif;
}

.folio-marginalia-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Marginalia Card (Previous Scribe Hand) */
.marginalia-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px dashed #a87932;
  border-left: 4px solid #8c2a1c;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 2px 3px 8px rgba(90, 60, 20, 0.1);
  transform: rotate(-0.5deg);
}

.marginalia-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8c2a1c;
  margin-bottom: 6px;
}

.marginalia-quote {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  font-style: italic;
  color: #4a2810;
  font-family: 'Crimson Text', 'Georgia', serif;
}

/* Prompt Card */
.reflection-prompt-card {
  background: rgba(245, 235, 210, 0.85);
  border: 1px solid #b8935a;
  border-left: 4px solid #b45309;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 2px 3px 8px rgba(90, 60, 20, 0.1);
}

.prompt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b45309;
  margin-bottom: 6px;
}

.prompt-question {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #3f2d19;
  font-weight: 600;
}

/* Secret Climax Banner (Page 15) */
.book-secret-revelation {
  margin-top: 18px;
  background: linear-gradient(135deg, #451a03 0%, #1e1b4b 100%);
  border: 2px solid var(--accent-gold);
  border-radius: 10px;
  padding: 16px 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.6);
  animation: glowGoldPulse 3s infinite alternate;
}

@keyframes glowGoldPulse {
  0% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
  100% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.85); }
}

.revelation-seal {
  font-size: 2.2rem;
  color: var(--accent-gold-light);
  text-shadow: 0 0 10px #f59e0b;
}

.revelation-title {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--accent-gold-light);
}

.revelation-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--accent-silver);
}

/* Scribe Folio Journal */
.scribe-folio-journal {
  background: var(--bg-desk-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.journal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.journal-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-gold);
}

.notes-autosave-badge {
  font-size: 0.75rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  transition: opacity 0.3s ease;
}

.scribe-journal-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-desk-light);
  color: var(--accent-silver);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.scribe-journal-textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Reader Footer Navigation */
.book-reader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.btn-folio-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.88rem;
}

.folio-quick-pager {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 2px;
}

.folio-dot-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-desk-light);
  color: var(--accent-silver-dim);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.folio-dot-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-silver);
  transform: scale(1.1);
}

.folio-dot-btn.active {
  background: var(--accent-gold);
  color: var(--bg-desk);
  border-color: #fff;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
  transform: scale(1.15);
}

.folio-dot-btn.has-notes {
  border-color: #4ade80;
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.6);
}


/* =============================================================================
   3 SCENARIO MAPS, IMPERIAL WAR DISPATCH & TACTICAL MINI-GAME STYLES
   ============================================================================= */

/* Scenario Tabs */
.map-scenario-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}

.map-scenario-tab {
  background: var(--bg-desk-card);
  border: 1px solid var(--border-color);
  color: var(--accent-silver-dim);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.map-scenario-tab:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold-light);
  transform: translateY(-1px);
}

.map-scenario-tab.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, var(--bg-desk-card) 100%);
  border-color: var(--accent-gold);
  color: var(--accent-gold-light);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

/* War Dispatch Parchment (Aviso Imperial de Campaña) */
.war-dispatch-parchment {
  background-color: var(--parchment-base);
  background-image:
    linear-gradient(125deg, rgba(160, 115, 65, 0.08) 0%, transparent 30%, rgba(255, 255, 255, 0.25) 45%, transparent 60%, rgba(140, 95, 45, 0.08) 100%),
    radial-gradient(ellipse at 50% 50%, #fffef8 0%, #f7eed7 65%, #e8d5ae 100%);
  color: var(--parchment-text);
  border: 2px solid var(--parchment-border);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 25px rgba(160, 110, 50, 0.2);
  margin-top: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dispatch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed var(--parchment-border);
  padding-bottom: 6px;
}

.dispatch-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wax-color);
}

.dispatch-wax-stamp {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.dispatch-title {
  font-size: 1.05rem;
  color: var(--parchment-text);
  margin: 0;
}

.dispatch-orders-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--parchment-sub);
  margin: 0;
  font-style: italic;
}

/* Tactical Mini-Game Box (Minijuego de Táctica / Enigma de la Historia) */
.tactical-puzzle-box {
  background: var(--bg-desk-card);
  border: 1px solid var(--accent-gold);
  border-radius: 8px;
  padding: 14px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.puzzle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.puzzle-title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  gap: 6px;
}

.puzzle-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.2);
  color: var(--accent-gold-light);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.puzzle-instructions {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--accent-silver-dim);
  margin: 0;
}

.puzzle-interactive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.puzzle-dial-card {
  background: var(--bg-desk);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}

.puzzle-dial-label {
  font-size: 0.74rem;
  color: var(--accent-silver-dim);
  /* Was nowrap — on a narrow phone this forced the 3-column grid wider than the
     screen, pushing the whole puzzle box past the viewport edge. */
  white-space: normal;
  overflow-wrap: break-word;
}

@media (max-width: 420px) {
  .puzzle-interactive-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   First-time coach marks — a one/two-sentence explainer that appears once
   next to a button/element and then dismisses itself, so a new player never
   has to guess what something does. Hover-only `title` tooltips don't work on
   touch devices, which is what these replace for the most confusing spots.
   ========================================================================== */
.hint-bubble {
  position: fixed;
  max-width: 260px;
  background: #1c1712;
  color: #f7efe4;
  border: 1px solid var(--accent-gold);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(226, 149, 58, 0.15);
  z-index: 400;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: hintFadeIn 0.25s ease;
}

@keyframes hintFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.hint-bubble-text {
  flex: 1;
}

.hint-bubble-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #dfd7cc;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.hint-bubble-close:hover {
  color: var(--accent-gold);
}

@media (max-width: 480px) {
  .hint-bubble {
    max-width: calc(100vw - 24px);
    font-size: 0.8rem;
  }
}

.puzzle-dial-select {
  width: 100%;
  background: var(--bg-desk-light);
  color: var(--accent-gold-light);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}

.puzzle-dial-select:focus {
  outline: 1px solid var(--accent-gold);
}

.puzzle-action-btn {
  width: 100%;
  background: linear-gradient(135deg, #d4af37 0%, #a67c38 100%);
  color: var(--bg-desk);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.puzzle-action-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.puzzle-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.puzzle-success-banner {
  background: rgba(22, 101, 52, 0.85);
  border: 1px solid #4ade80;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #dcfce7;
  display: none;
  animation: fadeIn 0.3s ease;
}

/* ==========================================================================
   Story Hub & Covenant (multi-slot save selection screens)
   ========================================================================== */

#hubScreen {
  background: radial-gradient(ellipse at top, #241c2e 0%, #14101a 60%, #0c0910 100%);
  overflow-y: auto;
}

.hub-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-height: 100%;
  box-sizing: border-box;
}

.hub-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hub-header h1 {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #f3e9d2;
  letter-spacing: 0.03em;
  text-wrap: balance;
  margin: 0;
}

.hub-header p {
  color: #b9adc4;
  font-size: 0.98rem;
  margin: 0;
}

.hub-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.hub-institution-card {
  --card-accent: #c8a855;
  --card-accent-dim: #981b1b;
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 3px solid var(--card-accent);
  border-radius: 14px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hub-institution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

.hub-card-emblem {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--card-accent);
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.4));
}

.hub-card-name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.25rem;
  color: #f3e9d2;
  margin: 0;
}

.hub-card-tagline {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #c9bfd4;
  margin: 0;
  flex-grow: 1;
}

.hub-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
}

.hub-status-badge.not-started {
  background: rgba(255,255,255,0.06);
  color: #9d93a8;
  border-color: rgba(255,255,255,0.14);
}

.hub-status-badge.in-progress {
  background: rgba(200, 168, 85, 0.14);
  color: var(--card-accent);
  border-color: rgba(200, 168, 85, 0.35);
}

.hub-status-badge.completed {
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.3);
}

.hub-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.hub-card-actions .btn-primary,
.hub-card-actions .btn-secondary {
  flex: 1 1 auto;
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 9px 14px;
}

.hub-card-actions .btn-tertiary {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: #b9adc4;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hub-card-actions .btn-tertiary:hover {
  border-color: #d64545;
  color: #f3a5a5;
}

.hub-footer {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* Covenant (entry ritual) screen */

#covenantScreen {
  background: radial-gradient(ellipse at center, #241c2e 0%, #14101a 70%, #0c0910 100%);
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

#covenantCard {
  text-align: center;
}

#covenantCard .creator-header {
  border-bottom: none;
  margin-bottom: 6px;
  padding-bottom: 0;
}

.covenant-synopsis-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #d8cfe0;
  text-align: left;
  margin: 0 0 6px;
}

.covenant-seal-instruction {
  font-size: 0.85rem;
  color: #9d93a8;
  text-align: center;
  margin: 0 0 4px;
  font-style: italic;
}

@media (max-width: 640px) {
  .hub-container {
    padding: 32px 16px 28px;
    gap: 26px;
  }

  .hub-cards-grid {
    grid-template-columns: 1fr;
  }

  .hub-card-actions .btn-primary,
  .hub-card-actions .btn-secondary,
  .hub-card-actions .btn-tertiary {
    flex: 1 1 100%;
  }
}