/* Sola al tren — capítol de novel·la en procés */
/* Manuscrit mecanoscrit + estiu del 1966 + una taca d'aquarel·la blava que apareix al moment del mar */

* { box-sizing: border-box; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Atmosfera: la llum del migdia entra per la dreta del vagó (la finestra) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 88% 30%, rgba(255,239,200,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 8% 90%, rgba(31,26,19,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.2s ease;
}

/* Memòria del paper — un soroll subtil de gra (CSS-only, sense imatge externa) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 25% 35%, rgba(31,26,19,0.012) 0 0.7px, transparent 0.7px 3px),
    repeating-radial-gradient(circle at 75% 65%, rgba(31,26,19,0.012) 0 0.5px, transparent 0.5px 4px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* During fusion the page goes BLANK (BRAND contract).
   Composer dims its own decorative pseudo-elements all the way to 0. */
body.fusion-mode::before { opacity: 0; }
body.fusion-mode::after { opacity: 0; }

#title-screen,
#stage,
#post-game,
#interact,
#thinking-banner {
  position: relative;
  z-index: 1;
}

/* ====== TITLE SCREEN ====== */

#title-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}

#title-screen::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 75vw; height: 38vh;
  max-width: 900px;
  background: radial-gradient(ellipse at center top, var(--mar-pale) 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
}

.title-content {
  max-width: 640px;
  text-align: center;
  margin-bottom: 56px;
}

.title-rubric {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--rubric);
  margin-bottom: 28px;
  text-transform: lowercase;
}

.title-name {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 24px 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.title-author {
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.title-note {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.title-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.language-selector,
.mode-selector {
  display: flex;
  gap: 14px;
  align-items: center;
}

.language-selector button,
.mode-selector button {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 14px;
  padding: 8px 18px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.language-selector button.active,
.mode-selector button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(168,87,56,0.04);
}

.language-selector button:hover:not(.active),
.mode-selector button:hover:not(.active) {
  border-color: var(--ink);
}

.begin-btn {
  background: var(--ink);
  border: none;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  padding: 12px 36px;
  cursor: pointer;
  letter-spacing: 0.06em;
  margin-top: 8px;
  transition: all 0.2s ease;
}

.begin-btn:hover { background: var(--accent); }

/* ====== STAGE / HEADER ====== */

#stage {
  min-height: 100vh;
  padding-top: 64px;
}

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(243,236,221,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 1.2rem;
  padding: 0 28px;
  z-index: 50;
  transition: opacity 1s ease;
}

/* BRAND fusion-mode dims the header to opacity 0; no per-game override needed. */

.header-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.header-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-byline {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.1;
  display: flex;
  gap: 6px;
}

.header-byline .header-author { font-style: italic; }
.header-byline .header-year::before { content: '· '; }

.header-center {
  display: flex;
  align-items: center;
  gap: 14px;
}

#hearts {
  display: flex;
  gap: 4px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.heart.lost { color: var(--rule); }

.heart-infinite {
  position: relative;
  display: inline-block;
  width: 24px;
  text-align: center;
}
.heart-infinite::before { content: '♥'; }
.heart-infinite::after {
  content: '∞';
  font-size: 0.6em;
  position: absolute;
  bottom: -2px; right: -4px;
  color: var(--muted);
}

#progress-bar {
  flex: 1;
  margin: 0 1rem;
  height: 1px;
  background: var(--rule);
  position: relative;
}
#progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--progress, 0%);
  background: var(--accent);
  transition: width 0.6s ease;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.header-brand-mark {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

#settings-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
#settings-toggle:hover { color: var(--ink); }

/* ====== FEED ====== */

#feed {
  margin: 0 auto;
  padding: 56px 28px 32px 28px;
}

.beat {
  margin-bottom: 32px;
  position: relative;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

body.fusion-mode .beat:not(:last-child) {
  opacity: 0.18;
  filter: blur(0.5px);
}

.beat .speaker-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.1em;
  color: var(--rubric);
  margin-bottom: 8px;
  text-transform: lowercase;
}

.beat .body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
}

.beat[data-role="narration"] .body { font-weight: 400; }

/* Interludes (speaker = JULES VERNE) — diferents */
.beat[data-interlude="true"] {
  margin-left: 36px;
  padding-left: 18px;
  border-left: 1px solid var(--rule);
}
.beat[data-interlude="true"] .speaker-label {
  color: var(--anglais);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}
.beat[data-interlude="true"] .body {
  font-style: italic;
  font-size: 16px;
  color: rgba(31,26,19,0.78);
}

/* Dialogue boxes inside a narration body */
.beat .body .dialogue {
  margin: 14px 0;
  padding: 10px 14px 12px 14px;
  border-left: 2px solid var(--rule);
  background: rgba(31,26,19,0.012);
}
.beat .body .dialogue + .dialogue { margin-top: 10px; }
.beat .body .dialogue-title,
.beat .rebound .rebound-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rubric);
  margin-bottom: 4px;
  text-transform: none;
}
.beat .body .dialogue-text {
  font-size: 16.5px;
  line-height: 1.55;
}
.beat .body .prose {
  margin: 6px 0;
  font-size: 17px;
  line-height: 1.72;
}
.beat .body .prose:first-child { margin-top: 0; }
.beat .body .prose:last-child { margin-bottom: 0; }

/* ====== Touch / Friction interaction frame ====== */

.beat[data-role="touch"],
.beat[data-role="friction"] {
  border-top: 1px solid var(--accent);
  padding-top: 16px;
  margin-top: 38px;
}
.beat[data-role="touch"].resolved,
.beat[data-role="friction"].resolved {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 22px;
  margin-bottom: 38px;
}

.beat[data-climax="true"] {
  border-top-width: 2px;
}
.beat[data-climax="true"].resolved {
  border-bottom-width: 2px;
}

/* ====== Rebounds (player / npc / author) ====== */

.rebound {
  margin: 14px 0;
  padding: 12px 16px;
  font-size: 16.5px;
  line-height: 1.65;
  border-left: 3px solid var(--rule);
  background: rgba(31,26,19,0.018);
  transition: opacity 0.4s ease;
}

.rebound.player {
  border-left-color: var(--accent);
  background: rgba(168,87,56,0.04);
  color: var(--ink);
}
.rebound.npc {
  border-left-color: var(--rubric);
  background: rgba(111,93,58,0.04);
  font-style: italic;
}
.rebound.author {
  border-left-color: var(--ink);
  background: rgba(31,26,19,0.022);
  color: var(--ink);
}

body.fusion-mode .beat:last-child .rebound.player,
body.fusion-mode .beat:last-child .rebound.author {
  opacity: 1;
  filter: none;
}
body.fusion-mode .beat:last-child {
  opacity: 1;
  filter: none;
}

/* ====== Verdict row ====== */

.verdict-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin: 18px 0 4px 0;
  padding: 14px 0 10px 0;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* The .verdict word's typography is BRAND (uppercase, bold, larger) —
   composer only sets per-tier color via the variables below. */
.verdict {
  /* color overrides per tier follow */
}
.verdict.flow { color: var(--tier-flow-color); }
.verdict.zero { color: var(--tier-zero-color); }
.verdict.low  { color: var(--tier-low-color);  }
.verdict.high { color: var(--tier-high-color); }
.verdict.full-vibes { color: var(--tier-fullvibes-color); }
.verdict.neutral { color: var(--muted); }
.verdict.neg-aura { color: var(--tier-neg-color); }

.score-line {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cryst {
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Alt-ending */
.alt-ending {
  margin: 22px 0 0 0;
  padding: 18px 20px;
  border-left: 2px solid var(--tier-neg-color);
  background: rgba(107,31,26,0.05);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(31,26,19,0.86);
}

/* ====== INTERACT ====== */

#interact {
  /* BRAND: #interact lives in normal flow now (position: relative), at
     --feed-max-width. The game CSS only tweaks visual chrome — padding,
     opacity transitions during fusion. */
  padding: 0.4rem 28px 0.8rem 28px;
  transition: opacity 0.5s ease;
}

/* BRAND fusion-mode handles #interact dimming. */

.role-reminder { display: none; }

.accept-original {
  display: inline-block;
  margin: 0 auto 14px auto;
  padding: 10px 16px;
  background: rgba(168,87,56,0.08);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-primary);
  font-style: italic;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}
.accept-original:hover { background: var(--accent); color: var(--paper); font-style: normal; }

#interact textarea {
  width: 100%;
  min-height: 84px;
  padding: 14px 16px;
  background: rgba(255,253,247,0.7);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 16.5px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.2s ease;
}
#interact textarea:focus { outline: none; border-bottom-color: var(--ink); }
#interact textarea::placeholder {
  color: var(--muted);
  font-style: italic;
}

.interact-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.submit {
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 9px 22px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.submit:hover { background: var(--accent); }
.or-divider {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.reveal-btn {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--muted);
  color: var(--muted);
  font-family: var(--font-primary);
  font-style: italic;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.reveal-btn:hover { color: var(--ink); border-bottom-color: var(--ink); }
.attempt-counter {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
}
.inline-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== THINKING BANNER ====== */

#thinking-banner {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(31,26,19,0.92);
  color: var(--paper);
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-style: italic;
  border-radius: 2px;
  z-index: 100;
}
.thinking-icon {
  width: 12px; height: 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* ====== EL MAR — la taca d'aquarel·la blava (l'únic blau del joc) ====== */

.beat[data-beat-index="23"],
.beat[data-beat-index="24"] { position: relative; }

.beat[data-beat-index="23"]::before,
.beat[data-beat-index="24"]::before {
  content: '';
  position: absolute;
  inset: -34px -90px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, var(--mar-pale) 0%, transparent 70%),
    radial-gradient(ellipse 30% 24% at 35% 70%, rgba(90,140,166,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: bloom-mar 5s ease-out forwards;
}

@keyframes bloom-mar {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.fusion-mode .beat[data-beat-index="24"]::before { opacity: 0.55; }

/* La fricció del mar amb un toc d'aigua a baix */
.beat[data-beat-index="24"][data-role="friction"].resolved::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--mar) 50%, transparent);
  opacity: 0.4;
}

/* ====== PER-CHARACTER PALETTE (data-speaker) — subtle ====== */
/* The runtime stamps data-speaker on every dialogue box (in narration) and
   on every rebound (in touch/friction). The tint matches the title hue
   but stays well under 5% opacity — the page is one composition, not a
   colour-coded chart. */

.beat .body .dialogue[data-speaker="carme"],
.rebound[data-speaker="carme"] { background: rgba(168,87,56,0.045); }
.beat .body .dialogue[data-speaker="carme"] .dialogue-title,
.rebound[data-speaker="carme"] .rebound-title { color: var(--manteca); }

.beat .body .dialogue[data-speaker="senyora"],
.rebound[data-speaker="senyora"] { background: rgba(111,93,58,0.05); }
.beat .body .dialogue[data-speaker="senyora"] .dialogue-title,
.rebound[data-speaker="senyora"] .rebound-title { color: var(--rubric); }

.beat .body .dialogue[data-speaker="senyor"],
.rebound[data-speaker="senyor"] { background: rgba(80,80,80,0.035); }
.beat .body .dialogue[data-speaker="senyor"] .dialogue-title,
.rebound[data-speaker="senyor"] .rebound-title { color: rgba(80,80,80,0.7); }

.beat .body .dialogue[data-speaker="revisor"],
.rebound[data-speaker="revisor"] { background: rgba(74,120,150,0.05); }
.beat .body .dialogue[data-speaker="revisor"] .dialogue-title,
.rebound[data-speaker="revisor"] .rebound-title { color: var(--cool); }
.beat .body .dialogue[data-speaker="revisor"] .dialogue-text { font-style: normal; }

.beat .body .dialogue[data-speaker="padrina"],
.rebound[data-speaker="padrina"] { background: rgba(107,125,75,0.05); }
.beat .body .dialogue[data-speaker="padrina"] .dialogue-title,
.rebound[data-speaker="padrina"] .rebound-title { color: var(--olive); }

.beat .body .dialogue[data-speaker="padri"],
.rebound[data-speaker="padri"] { background: rgba(139,90,43,0.05); }
.beat .body .dialogue[data-speaker="padri"] .dialogue-title,
.rebound[data-speaker="padri"] .rebound-title { color: var(--regnes); }

.beat .body .dialogue[data-speaker="jules_verne"],
.rebound[data-speaker="jules_verne"] { background: rgba(80,100,128,0.045); }
.beat .body .dialogue[data-speaker="jules_verne"] .dialogue-title,
.rebound[data-speaker="jules_verne"] .rebound-title { color: var(--anglais); }

.beat .body .dialogue[data-speaker="narrator"],
.rebound[data-speaker="narrator"] { background: rgba(31,26,19,0.03); }
.beat .body .dialogue[data-speaker="narrator"] .dialogue-title,
.rebound[data-speaker="narrator"] .rebound-title { color: var(--ink); }

/* ====== POST-GAME ====== */

#post-game {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 36px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 28px;
  height: 100vh;
  max-height: 100vh;
  align-items: stretch;
  overflow: hidden;
}
.pg-sidebar, .pg-main, .pg-feedback {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.pg-main { padding-right: 0.4rem; }

.pg-sidebar,
.pg-main,
.pg-feedback {
  background: rgba(255,253,247,0.5);
  border: 1px solid var(--rule);
  padding: 22px 24px;
}

.pg-sidebar-title,
.pg-feedback-title,
.pg-recommendations-title,
.pg-reflection-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--rubric);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pg-author-photo {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(0.45) sepia(0.18) contrast(0.95);
  margin-bottom: 12px;
  border: 1px solid var(--rule);
}
.pg-author-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.pg-author-meta {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.pg-author-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 16px;
}
.pg-source {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--muted);
  letter-spacing: 0.02em;
}
.pg-source:hover { color: var(--accent); border-bottom-color: var(--accent); }

.pg-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.pg-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 4px 0;
}
.pg-subtitle {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.pg-scoreboard {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: center;
}
.pg-scores { display: flex; flex-direction: column; gap: 14px; }
.pg-score { display: flex; flex-direction: column; gap: 2px; }
.pg-score-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pg-score-facts .pg-score-value { color: var(--cool); }
.pg-score-vibes .pg-score-value { color: var(--manteca); }
.pg-score-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}

.pg-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}
.pg-stats-grid .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--rule);
  padding-left: 9px;
  min-width: 0;
}
.pg-stats-grid .stat-value {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.pg-stats-grid .stat-label {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.2;
}

.pg-best-moments {
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.4;
}
.pg-best-touch, .pg-best-friction {
  margin-bottom: 0;
  padding: 4px 8px;
  border: none;
  background: rgba(31,26,19,0.025);
  border-radius: 2px;
}
.pg-best-touch .label, .pg-best-friction .label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.pg-best-touch .player, .pg-best-friction .player { font-style: italic; color: var(--accent); }
.pg-best-touch .author, .pg-best-friction .author { color: var(--ink); margin-top: 2px; }

.pg-reflection {
  font-size: 16px;
  line-height: 1.6;
  padding: 16px 20px;
  background: rgba(168,87,56,0.05);
  border-left: 2px solid var(--accent);
  min-height: 140px;
  flex: 1 1 auto;
  margin-bottom: 10px;
}
.pg-reflection.is-loading { color: var(--muted); font-style: italic; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.pg-recommendations {
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pg-recommendations.is-loading { color: var(--muted); font-style: italic; animation: pulse 2s ease-in-out infinite; }
/* Recommendations: BRAND owns the card chrome; no per-game overrides here. */

/* feedback column */
.pg-survey { margin-bottom: 18px; }
.pg-stars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.feedback-row { display: flex; flex-direction: column; gap: 4px; }
.feedback-row label { font-size: 12px; color: var(--ink); }
.feedback-row .stars { display: flex; gap: 4px; }
.feedback-row .star {
  cursor: pointer;
  font-size: 16px;
  color: var(--rule);
  transition: color 0.15s ease;
}
.feedback-row .star.selected,
.feedback-row .star:hover,
.feedback-row .star:hover ~ .star.selected { color: var(--accent); }

.pg-difficulty { margin-bottom: 14px; }
.pg-difficulty-label { font-size: 12px; margin-bottom: 6px; }
.pg-difficulty-buttons { display: flex; gap: 6px; }
.pg-diff-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pg-diff-btn.selected {
  background: rgba(168,87,56,0.08);
  border-color: var(--accent);
  color: var(--accent);
}

.pg-textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  background: rgba(255,253,247,0.7);
  border: 1px solid var(--rule);
  font-family: var(--font-primary);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 10px;
}
.pg-textarea:focus { outline: none; border-color: var(--accent); }

.pg-submit {
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  cursor: pointer;
  width: 100%;
}
.pg-submit:hover { background: var(--accent); }

.pg-thanks-state {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 22px 0;
}

.pg-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pg-replay, .pg-share, .pg-back {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.pg-replay:hover, .pg-share:hover, .pg-back:hover { border-color: var(--accent); color: var(--accent); }

/* ====== DIALOGS ====== */

#settings-modal,
#gameover-modal {
  background: rgba(243,236,221,0.98);
  border: 1px solid var(--rule);
  padding: 22px 28px;
  font-family: var(--font-primary);
  color: var(--ink);
  max-width: 480px;
}

#settings-modal::backdrop,
#gameover-modal::backdrop {
  background: rgba(31,26,19,0.55);
}

#gameover-modal .gom-message {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  margin-bottom: 18px;
  text-align: center;
  color: var(--tier-neg-color);
}
#gameover-modal .gom-options {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
#gameover-modal button {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
#gameover-modal button:hover { border-color: var(--accent); color: var(--accent); }

#settings-close {
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  cursor: pointer;
  margin-top: 14px;
}

/* ====== RESPONSIVE ====== */

@media (max-width: 980px) {
  #post-game {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  #feed { padding: 40px 18px 24px 18px; }
  #header { padding: 0 16px; }
  #header .header-brand-mark { display: none; }
  #interact {
    padding: 4px 18px 16px 18px;
    margin-top: 0;
  }
  body { font-size: 16px; }
  .beat .body { font-size: 16px; }
  /* Touch/friction beats: tighten the gap on mobile so the textarea
     follows the previous prose closely (no 38px margin-top + 16px padding-top
     of the desktop frame). */
  .beat[data-role="touch"],
  .beat[data-role="friction"] {
    margin-top: 18px;
    padding-top: 10px;
  }
  .beat[data-role="touch"].resolved,
  .beat[data-role="friction"].resolved {
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
}