:root {
  color-scheme: light;
  --paper: #f6e7c3;
  --paper-light: #fff7e5;
  --ink: #19130d;
  --text: #31281e;
  --muted: #695a45;
  --wood: #3b2418;
  --wood-dark: #20130d;
  --gold: #d7a940;
  --gold-soft: #f0d596;
  --wine: #7d2f2b;
  --green: #2f6f4e;
  --red: #9d3d35;
  --line: rgba(99, 68, 34, 0.34);
  --shadow: 0 24px 70px rgba(35, 21, 10, 0.3);
  --soft-shadow: 0 14px 34px rgba(48, 30, 14, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 248, 211, 0.78), transparent 35%),
    linear-gradient(135deg, rgba(30, 18, 10, 0.2), rgba(246, 231, 195, 0.86) 45%, rgba(65, 38, 18, 0.22)),
    url("../../assets/01_fundos/fundo_pergaminho_crl.png") center / cover fixed,
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(215, 169, 64, 0.9); outline-offset: 4px; }

.lab-shell {
  width: min(1120px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 34px);
  display: grid;
  place-items: center;
}

.quiz-frame {
  width: min(980px, 100%);
  min-height: 660px;
  padding: clamp(20px, 3.8vw, 36px);
  border: 1px solid rgba(215, 169, 64, 0.72);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 250, 237, 0.93), rgba(255, 244, 218, 0.97)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.78);
}

.topbar,
.mission-head,
.result-actions,
.state-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar { margin-bottom: clamp(22px, 4vw, 34px); }
.brand {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lab-label,
.ambient-toggle {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 248, 229, .78);
  color: var(--wine);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.screen { display: none; }
.screen.is-active { display: block; animation: screen-in 180ms ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.start-card,
.result-card {
  max-width: 820px;
  margin: 0 auto;
}

.eyebrow,
.verdict-title,
.scoreboard {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1, h2 { color: var(--ink); line-height: 1.08; letter-spacing: 0; }
h1 { margin-bottom: 12px; font-size: clamp(2.3rem, 6vw, 4.2rem); }
h2 { margin-bottom: 14px; font-size: clamp(1.7rem, 4.2vw, 2.7rem); }
.subtitle,
.tagline {
  color: var(--text);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 800;
}
.tagline { color: var(--wine); }

.entry-note,
.archive-verdict,
.session-note {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 250, 239, .95), rgba(255, 242, 211, .96)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover;
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.72);
}
.entry-note { margin: 18px 0; padding: clamp(16px, 3vw, 24px); }
.entry-note h2 {
  margin-bottom: 8px;
  color: var(--wine);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.meta-line { color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-weight: 800; }

.primary-action,
.secondary-action {
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.primary-action {
  border: 1px solid rgba(215, 169, 64, .66);
  background: #11100e;
  color: var(--gold);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(17,16,14,.22);
}
.secondary-action {
  border: 1px solid var(--line);
  background: rgba(255, 248, 229, .9);
  color: var(--wood);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}
.primary-action:hover,
.secondary-action:hover { transform: translateY(-2px); }
.is-hidden { display: none; }

.mission-head { align-items: flex-start; }
.mission-head.compact { margin-bottom: 18px; }
.scoreboard { display: grid; justify-items: end; gap: 4px; white-space: nowrap; }
.progress-track {
  height: 16px;
  margin: 16px 0 22px;
  overflow: hidden;
  border: 1px solid rgba(80, 49, 25, .32);
  border-radius: 999px;
  background: rgba(255, 248, 229, .72);
  box-shadow: inset 0 2px 8px rgba(38, 23, 12, .2);
}
.progress-track span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1b1712, #714f25, var(--gold));
}

.tavern-table {
  position: relative;
  isolation: isolate;
  margin: 18px 0 22px;
  padding: clamp(18px, 3.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(215, 169, 64, .58);
  border-radius: 24px;
  background:
    radial-gradient(circle at 48% 38%, rgba(255, 221, 137, .13), transparent 34%),
    repeating-linear-gradient(89deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(2deg, rgba(0,0,0,.06) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, #1d110b, var(--wood-dark) 18%, var(--wood) 54%, #5a3722 100%);
  box-shadow:
    inset 0 2px 32px rgba(0,0,0,.44),
    inset 0 -18px 44px rgba(0,0,0,.22),
    0 18px 42px rgba(38,23,12,.24);
}
.tavern-table::before,
.tavern-table::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.tavern-table::before {
  background:
    radial-gradient(circle at 38% 26%, rgba(255, 185, 72, .24), transparent 26%),
    radial-gradient(circle at 70% 68%, rgba(215, 169, 64, .1), transparent 32%);
  opacity: .48;
  mix-blend-mode: screen;
}
.tavern-table::after {
  background:
    radial-gradient(circle at center, transparent 54%, rgba(0,0,0,.26)),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 20%, transparent 80%, rgba(0,0,0,.12));
  opacity: .72;
}
.ambient-on .tavern-table::before {
  animation: tavern-glow 5.8s ease-in-out infinite;
}
.ambient-off .tavern-table::before,
.ambient-off .dust-mote {
  animation: none;
  opacity: 0;
}
.table-mark {
  position: absolute;
  top: 10px;
  right: 18px;
  z-index: 2;
  color: rgba(240, 213, 150, .55);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.dust-mote {
  position: absolute;
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 226, 162, .52);
  box-shadow: 0 0 8px rgba(255, 218, 132, .52);
  pointer-events: none;
  animation: dust-float var(--dust-duration, 6s) ease-in-out infinite;
  animation-delay: var(--dust-delay, 0s);
}
@keyframes tavern-glow {
  0%, 100% { opacity: .34; transform: translate3d(-1%, 0, 0) scale(1); }
  42% { opacity: .62; transform: translate3d(1.4%, -1%, 0) scale(1.035); }
  68% { opacity: .46; transform: translate3d(.4%, .8%, 0) scale(.99); }
}
@keyframes dust-float {
  0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.7); }
  20% { opacity: .55; }
  78% { opacity: .32; }
  100% { opacity: 0; transform: translate3d(18px, -22px, 0) scale(1.08); }
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 20px);
  padding-top: 18px;
}
.answer-card {
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(88, 58, 27, .36);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 250, 239, .96), rgba(255, 240, 204, .98)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover;
  color: var(--ink);
  box-shadow: 0 14px 28px rgba(12, 7, 3, .22), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -10px 22px rgba(111, 73, 34, .08);
  cursor: pointer;
  font-weight: 800;
  text-align: left;
  line-height: 1.35;
  opacity: 0;
  animation: card-deal 480ms ease both;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease, border-color 180ms ease;
}
.answer-card:nth-child(1) { transform: rotate(-1.2deg); }
.answer-card:nth-child(2) { transform: rotate(1deg); }
.answer-card:nth-child(3) { transform: rotate(.7deg); }
.answer-card:nth-child(4) { transform: rotate(-.8deg); }
.answer-card:hover,
.answer-card.selected {
  border-color: rgba(215, 169, 64, .86);
  transform: translateY(-8px) rotate(0deg) scale(1.01);
  box-shadow: 0 30px 48px rgba(12, 7, 3, .34), 0 0 0 3px rgba(215, 169, 64, .2);
}
.answer-card.muted { opacity: .45; }
@keyframes card-deal {
  0% { opacity: 0; transform: translateY(8px) rotate(var(--card-tilt, 0deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--card-tilt, 0deg)); }
}
.answer-card.correct { border-color: rgba(47,111,78,.86); background: linear-gradient(90deg, rgba(47,111,78,.14), rgba(255,250,239,.96)); }
.answer-card.wrong { border-color: rgba(157,61,53,.86); background: linear-gradient(90deg, rgba(157,61,53,.14), rgba(255,250,239,.96)); }

.archive-verdict {
  margin: -6px auto 22px;
  padding: clamp(18px, 3vw, 26px);
}
.stamp {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
  padding: 8px 18px;
  border: 4px solid currentColor;
  border-radius: 12px;
  color: var(--green);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 3vw, 1.28rem);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  text-shadow: 0 1px 0 rgba(255,255,255,.42), 1px 0 0 currentColor;
  box-shadow: 0 5px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(255,255,255,.22);
  opacity: .94;
  animation: stamp-hit 1.02s cubic-bezier(.18,.89,.32,1.12) both;
}
.archive-verdict[data-result="wrong"] .stamp { color: var(--red); }
@keyframes stamp-hit {
  0% { opacity: 0; transform: scale(1.45) rotate(-13deg); filter: blur(1.2px); }
  28% { opacity: .62; transform: scale(1.16) rotate(-9deg); filter: blur(.4px); }
  52% { opacity: 1; transform: scale(.94) rotate(-4.5deg); filter: blur(0); }
  70% { opacity: 1; transform: scale(1.04) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}
.feedback-copy { max-width: 62ch; color: var(--text); font-weight: 700; }

.result-card { text-align: left; }
.final-score {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 22px;
  border: 1px solid rgba(215,169,64,.68);
  border-radius: 999px;
  background: #11100e;
  color: var(--gold);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 950;
}
.session-note { margin: 22px 0; padding: 16px 18px; color: var(--muted); font-weight: 800; }
.result-actions { justify-content: flex-start; gap: 28px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  body { font-size: 16px; background-attachment: scroll; }
  .lab-shell { align-items: start; }
  .quiz-frame { min-height: auto; border-radius: 18px; }
  .topbar,
  .mission-head,
  .state-actions,
  .result-actions { align-items: stretch; flex-direction: column; }
  .lab-label,
.ambient-toggle { align-self: flex-start; }
  .scoreboard { justify-items: start; white-space: normal; }
  .cards-grid { grid-template-columns: 1fr; }
  .answer-card { min-height: 112px; transform: none !important; }
  .answer-card:hover,
  .answer-card.selected { transform: translateY(-5px) scale(1.01) !important; }
  .primary-action,
  .secondary-action { width: 100%; }
}


/* Correcao imediata: cartas vivas, ambiente atras do cartao, sem legenda visivel */
body {
  position: relative;
  overflow-x: hidden;
}

.tavern-ambience {
  position: fixed;
  inset: -7%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(32, 18, 9, .48), rgba(32, 18, 9, .34)),
    linear-gradient(rgba(255, 250, 239, .04), rgba(255, 244, 222, .04));
  filter: blur(10px) brightness(.72) saturate(.96);
  opacity: .2;
  transform: scale(1.04) translate3d(-1%, -1%, 0);
}

.ambient-on .tavern-ambience {
  animation: tavern-drift 18s ease-in-out infinite;
}

.ambient-off .tavern-ambience {
  opacity: 0;
  animation: none;
}

.lab-shell {
  position: relative;
  z-index: 1;
}

.quiz-frame {
  position: relative;
  z-index: 2;
}

.table-mark {
  display: none !important;
}

.tavern-table {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 48% 38%, rgba(255, 221, 137, .12), transparent 34%),
    repeating-linear-gradient(89deg, rgba(255,255,255,.032) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(2deg, rgba(0,0,0,.07) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, #1d110b, #24150d 18%, var(--wood) 54%, #5a3722 100%);
}

.tavern-table::before,
.tavern-table::after,
.ambient-layer,
.dust-mote {
  pointer-events: none;
  z-index: 0;
}

.tavern-table::before {
  opacity: .2;
  animation: none;
}

.ambient-on .tavern-table::before {
  animation: tavern-glow 5.8s ease-in-out infinite;
}

.tavern-table::after {
  z-index: 0;
}

.dust-mote {
  z-index: 1;
  opacity: .42;
}

.cards-grid {
  position: relative;
  z-index: 2;
  place-items: center stretch;
}

.answer-card {
  position: relative;
  z-index: 3;
  width: 100%;
  opacity: 1;
  transform: rotate(var(--card-tilt, 0deg));
  animation: card-deal 520ms ease both;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.answer-card:nth-child(1) { --card-tilt: -1.2deg; animation-delay: 40ms; }
.answer-card:nth-child(2) { --card-tilt: 1deg; animation-delay: 110ms; }
.answer-card:nth-child(3) { --card-tilt: .7deg; animation-delay: 180ms; }
.answer-card:nth-child(4) { --card-tilt: -.8deg; animation-delay: 250ms; }

.answer-card:hover {
  z-index: 4;
  transform: rotate(0deg) translateY(-6px) scale(1.025);
  box-shadow: 0 28px 46px rgba(12, 7, 3, .32), 0 0 0 3px rgba(215, 169, 64, .18), inset 0 1px 0 rgba(255,255,255,.78);
}

.answer-card.selected,
.answer-card.is-selected {
  z-index: 5;
  opacity: 1;
  transform: rotate(0deg) translateY(-8px) scale(1.035);
  border-color: rgba(215, 169, 64, .9);
  box-shadow: 0 34px 54px rgba(12, 7, 3, .36), 0 0 0 4px rgba(215, 169, 64, .2), inset 0 1px 0 rgba(255,255,255,.78);
}

.answer-card.muted,
.answer-card.is-muted {
  opacity: .52;
  transform: rotate(var(--card-tilt, 0deg)) scale(.985);
}

.answer-card.correct,
.answer-card.wrong {
  z-index: 5;
}

@keyframes card-deal {
  0% { opacity: 0; transform: translateY(10px) rotate(var(--card-tilt, 0deg)) scale(.985); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--card-tilt, 0deg)) scale(1); }
}

@keyframes tavern-glow {
  0% { opacity: .20; transform: translateX(-2%) scale(1); }
  50% { opacity: .34; transform: translateX(2%) scale(1.03); }
  100% { opacity: .20; transform: translateX(-2%) scale(1); }
}

@keyframes tavern-drift {
  0% { transform: scale(1.04) translate3d(-1%, -1%, 0); }
  50% { transform: scale(1.08) translate3d(1%, 1%, 0); }
  100% { transform: scale(1.04) translate3d(-1%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tavern-ambience,
  .tavern-table::before,
  .answer-card {
    animation: none !important;
  }
  .dust-mote {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .tavern-ambience { inset: -4%; opacity: .14; filter: blur(8px) brightness(.7); }
  .answer-card { transform: none; }
  .answer-card:hover,
  .answer-card.selected,
  .answer-card.is-selected { transform: translateY(-5px) scale(1.015) !important; }
  .answer-card.muted,
  .answer-card.is-muted { transform: scale(.99) !important; }
}

/* Garantia de esbatimento apos animacao de entrada */
.answer-card.muted,
.answer-card.is-muted {
  opacity: .52 !important;
  animation-fill-mode: none;
}

.answer-card.selected,
.answer-card.is-selected {
  opacity: 1 !important;
}

/* Ajuste hierarquia visual: fundo global intacto, quadro em pergaminho, taberna so na mesa */
.tavern-ambience {
  display: none !important;
}

.quiz-frame {
  position: relative;
  overflow: hidden;
  background: #fff3d7;
}

.quiz-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 250, 239, .86), rgba(255, 244, 222, .9)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat;
  opacity: .92;
}

.quiz-frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(108, 73, 35, .16);
  border-radius: 16px;
  box-shadow: inset 0 0 50px rgba(111, 73, 34, .08);
}

.quiz-frame > * {
  position: relative;
  z-index: 1;
}

.tavern-table::before {
  inset: -18px;
  background:
    linear-gradient(rgba(30, 18, 9, .68), rgba(30, 18, 9, .62)),
    linear-gradient(rgba(255, 250, 239, .04), rgba(255, 244, 222, .04));
  filter: blur(12px) brightness(.62) saturate(.82);
  opacity: .16;
  mix-blend-mode: normal;
  transform: scale(1.04) translate3d(-1%, -1%, 0);
}

.ambient-on .tavern-table::before {
  animation: tavern-drift 18s ease-in-out infinite;
}

.ambient-off .tavern-table::before {
  opacity: 0;
  animation: none;
}

.tavern-table::after {
  background:
    radial-gradient(circle at 48% 40%, rgba(255, 188, 72, .18), transparent 34%),
    radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.32)),
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 22%, transparent 78%, rgba(0,0,0,.14));
  opacity: .78;
}

.dust-mote {
  opacity: .18;
}

.ambient-off .dust-mote {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .tavern-table::before {
    animation: none !important;
    transform: scale(1.04) translate3d(0, 0, 0);
  }
}

/* Direcao: Cartas sobre Pergaminho + Veredicto do Arquivo */
.tavern-table,
.tavern-table.feedback-mode {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin: 20px 0 24px;
  padding: clamp(12px, 2.6vw, 22px);
  border: 1px solid rgba(108, 73, 35, .16);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 250, 239, .46), rgba(255, 244, 222, .54)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 42px rgba(111, 73, 34, .055),
    0 10px 24px rgba(48, 30, 14, .08);
}

.tavern-table::before,
.tavern-table::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.tavern-table::before {
  inset: 8px;
  border: 1px solid rgba(128, 88, 43, .12);
  border-radius: 17px;
  background: transparent;
  filter: none;
  opacity: 1;
  transform: none;
  animation: none !important;
}

.tavern-table::after {
  inset: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 7% 10%, rgba(96, 64, 30, .08), transparent 12%),
    radial-gradient(circle at 93% 87%, rgba(96, 64, 30, .075), transparent 13%),
    radial-gradient(circle at 50% 50%, transparent 64%, rgba(118, 77, 35, .06));
  opacity: 1;
}

.dust-mote {
  display: none !important;
}

.cards-grid {
  position: relative;
  z-index: 2;
  padding: clamp(8px, 1.5vw, 14px);
}

.answer-card {
  background:
    linear-gradient(rgba(255, 251, 242, .97), rgba(255, 241, 208, .98)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat;
  color: var(--ink);
  border-color: rgba(108, 73, 35, .24);
  box-shadow:
    0 14px 28px rgba(88, 55, 22, .16),
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 -10px 22px rgba(111, 73, 34, .06);
}

.answer-card:hover {
  background:
    linear-gradient(rgba(255, 252, 246, .98), rgba(255, 244, 219, .99)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat;
}

.answer-card.selected,
.answer-card.is-selected {
  background:
    linear-gradient(rgba(255, 252, 246, .99), rgba(255, 244, 219, .99)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat;
  border-color: rgba(215, 169, 64, .95);
  color: var(--ink);
}

.answer-card.correct {
  background:
    linear-gradient(90deg, rgba(47,111,78,.12), rgba(255, 252, 246, .98)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat;
  border-color: rgba(47, 111, 78, .86);
  color: var(--ink);
}

.answer-card.wrong {
  background:
    linear-gradient(90deg, rgba(157,61,53,.12), rgba(255, 252, 246, .98)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat;
  border-color: rgba(157, 61, 53, .86);
  color: var(--ink);
}

.ambient-on .tavern-table::before,
.ambient-off .tavern-table::before {
  animation: none !important;
}

.ambient-toggle {
  opacity: .76;
}

@media (max-width: 720px) {
  .tavern-table,
  .tavern-table.feedback-mode {
    padding: 10px;
    overflow: visible;
  }
  .cards-grid { padding: 4px; }
}
/* Consolidacao: Cartas sobre Pergaminho, sem mesa escura literal */
.tavern-table,
.tavern-table.feedback-mode {
  overflow: visible !important;
  border-color: rgba(108, 73, 35, .16) !important;
  background:
    linear-gradient(rgba(255, 250, 239, .58), rgba(255, 244, 222, .68)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat !important;
  box-shadow:
    inset 0 0 42px rgba(111, 73, 34, .055),
    0 10px 24px rgba(48, 30, 14, .08) !important;
}

.tavern-table::before {
  inset: 8px !important;
  border: 1px solid rgba(128, 88, 43, .12);
  border-radius: 17px;
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.tavern-table::after {
  inset: 0 !important;
  border-radius: 22px;
  background:
    radial-gradient(circle at 7% 10%, rgba(96, 64, 30, .08), transparent 12%),
    radial-gradient(circle at 93% 87%, rgba(96, 64, 30, .075), transparent 13%),
    radial-gradient(circle at 50% 50%, transparent 64%, rgba(118, 77, 35, .06)) !important;
  opacity: 1 !important;
}

.answer-card,
.answer-card.selected,
.answer-card.is-selected,
.answer-card.correct,
.answer-card.wrong {
  color: var(--ink) !important;
  background:
    linear-gradient(rgba(255, 252, 246, .99), rgba(255, 244, 219, .99)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat !important;
}

.answer-card.selected,
.answer-card.is-selected {
  border-color: rgba(215, 169, 64, .95) !important;
  box-shadow:
    0 34px 54px rgba(88, 55, 22, .24),
    0 0 0 4px rgba(215, 169, 64, .2),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
}

.answer-card.correct {
  background:
    linear-gradient(90deg, rgba(47,111,78,.12), rgba(255, 252, 246, .98)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat !important;
  border-color: rgba(47, 111, 78, .86) !important;
}

.answer-card.wrong {
  background:
    linear-gradient(90deg, rgba(157,61,53,.12), rgba(255, 252, 246, .98)),
    url("../../assets/01_fundos/fundo_neutro.png") center / cover no-repeat !important;
  border-color: rgba(157, 61, 53, .86) !important;
}
/* Experiencia WOW: carta em julgamento + rota de desafio */
.scoreboard {
  min-width: min(360px, 100%);
}

.progress-route {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  width: 100%;
  margin-top: 4px;
}

.route-node {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(105, 90, 69, .52);
  border-radius: 50%;
  background: rgba(255, 250, 239, .8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 2px 5px rgba(48, 30, 14, .12);
  transition: transform 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.route-node.is-conquered {
  border-color: rgba(116, 77, 32, .72);
  background: linear-gradient(145deg, #1b1712, #7c5a25 50%, var(--gold));
  box-shadow: 0 3px 8px rgba(48, 30, 14, .2), inset 0 1px 0 rgba(255,255,255,.28);
}

.route-node.is-current {
  transform: scale(1.32);
  border-color: rgba(215, 169, 64, .96);
  background: var(--paper-light);
  box-shadow: 0 0 0 4px rgba(215, 169, 64, .18), 0 5px 12px rgba(48, 30, 14, .22);
}

.legacy-track {
  height: 8px;
  margin: 10px 0 16px;
  opacity: .34;
}

.judgement-label {
  position: relative;
  z-index: 3;
  display: inline-flex;
  margin: 0 0 8px clamp(8px, 1.5vw, 14px);
  padding: 5px 10px;
  border: 1px solid rgba(125, 47, 43, .22);
  border-radius: 999px;
  background: rgba(255, 250, 239, .78);
  color: var(--wine);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.judgement-label.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cards-grid.has-judgement {
  min-height: 315px;
  align-items: center;
  perspective: 900px;
}

.answer-card.is-chosen {
  z-index: 8 !important;
  opacity: 1 !important;
  transform: rotate(0deg) translateY(-16px) translateX(var(--judgement-shift, 0px)) scale(1.075) !important;
  transition-duration: 460ms !important;
  box-shadow:
    0 38px 70px rgba(88, 55, 22, .28),
    0 0 0 5px rgba(215, 169, 64, .2),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
}

.answer-card.is-receded {
  z-index: 1 !important;
  opacity: .42 !important;
  transform: rotate(var(--card-tilt, 0deg)) translateY(5px) scale(.94) !important;
  filter: saturate(.86);
  transition-duration: 420ms !important;
}

.cards-grid.has-judgement .answer-card:nth-child(1).is-chosen,
.cards-grid.has-judgement .answer-card:nth-child(3).is-chosen { --judgement-shift: 12%; }
.cards-grid.has-judgement .answer-card:nth-child(2).is-chosen,
.cards-grid.has-judgement .answer-card:nth-child(4).is-chosen { --judgement-shift: -12%; }

.result-route {
  justify-content: flex-start;
  max-width: 340px;
  margin: 0 0 20px;
}

.result-route .route-node.is-conquered {
  animation: route-seal 420ms ease both;
}

.result-route .route-node:nth-child(2) { animation-delay: 45ms; }
.result-route .route-node:nth-child(3) { animation-delay: 90ms; }
.result-route .route-node:nth-child(4) { animation-delay: 135ms; }
.result-route .route-node:nth-child(5) { animation-delay: 180ms; }
.result-route .route-node:nth-child(6) { animation-delay: 225ms; }
.result-route .route-node:nth-child(7) { animation-delay: 270ms; }

@keyframes route-seal {
  0% { transform: scale(.72); opacity: .42; }
  70% { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .route-node,
  .judgement-label,
  .answer-card.is-chosen,
  .answer-card.is-receded {
    transition-duration: 1ms !important;
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .scoreboard { min-width: 0; }
  .progress-route { justify-content: flex-start; gap: 5px; }
  .route-node { width: 12px; height: 12px; border-width: 1.5px; }
  .cards-grid.has-judgement { min-height: auto; }
  .answer-card.is-chosen {
    transform: translateY(-8px) scale(1.035) !important;
  }
  .answer-card.is-receded {
    transform: scale(.97) !important;
  }
}
/* Modo final funcional com quiz real */
.lab-label {
  color: #11100e;
  background: linear-gradient(135deg, rgba(215, 169, 64, .96), rgba(240, 213, 150, .92));
  border-color: rgba(17, 16, 14, .4);
}

.screen[data-screen="loading"] h1,
.screen[data-screen="error"] h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.cards-grid.has-judgement {
  min-height: 300px;
}

.answer-card:disabled {
  cursor: default;
}

.archive-verdict {
  margin-top: 12px;
}

.explanation-copy,
.source-copy {
  max-width: 70ch;
  color: var(--text);
  font-weight: 700;
}

.source-copy {
  margin-top: 12px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 800;
}

.state-actions {
  justify-content: flex-end;
}

.result-card .progress-route {
  margin-bottom: 22px;
}

.result-card [data-result-message] {
  max-width: 68ch;
  font-weight: 700;
}

@media (max-width: 720px) {
  .topbar {
    gap: 10px;
  }
  .lab-label {
    align-self: flex-start;
  }
  .archive-verdict {
    margin-top: 16px;
  }
}
/* Acabamento final: leitura, hierarquia e thumbnails */
body {
  font-family: Georgia, "Times New Roman", serif;
}

.brand,
.lab-label,
.eyebrow,
.verdict-title,
.scoreboard,
.meta-line,
.primary-action,
.secondary-action,
h1,
h2,
.start-title,
.subtitle,
.tagline,
.entry-note h2,
.final-score,
.source-copy {
  font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.start-card {
  max-width: 860px;
}

.start-title {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(2rem, 4.8vw, 3.45rem);
  text-align: center;
}

.start-card .subtitle {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.start-tagline {
  display: block;
  width: fit-content;
  margin: 18px auto 20px;
  padding: 10px 18px;
  border-top: 1px solid rgba(125, 47, 43, .28);
  border-bottom: 1px solid rgba(125, 47, 43, .28);
  text-align: center;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: 0;
}

.start-thumbnail,
.result-thumbnail {
  margin: 18px auto 22px;
  max-width: 440px;
}

.start-thumbnail img,
.result-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid rgba(108, 73, 35, .2);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(48, 30, 14, .18);
}

.entry-note {
  max-width: 760px;
  margin-inline: auto;
}

.mission-head,
.mission-head.compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  align-items: start;
  gap: clamp(18px, 4vw, 36px);
}

.mission-head > div:first-child {
  min-width: 0;
}

.mission-head h2 {
  max-width: 100%;
  font-size: clamp(1.65rem, 3.8vw, 2.65rem);
  line-height: 1.15;
}

.scoreboard {
  justify-items: end;
  min-width: 0;
  padding-top: 4px;
}

.score-line {
  color: var(--muted);
  font-size: .82rem;
}

.progress-route {
  justify-content: flex-end;
}

.result-card {
  max-width: 860px;
  padding: clamp(4px, 1vw, 10px);
}

.result-card .eyebrow,
.result-card h2,
.result-card [data-result-message] {
  max-width: 720px;
}

.result-card h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.result-thumbnail {
  max-width: 360px;
  margin-left: 0;
}

.result-thumbnail img {
  max-height: 190px;
}

.result-actions {
  gap: clamp(20px, 4vw, 32px);
}

@media (max-width: 820px) {
  .mission-head,
  .mission-head.compact {
    grid-template-columns: 1fr;
  }
  .scoreboard,
  .progress-route {
    justify-items: start;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .start-title {
    font-size: clamp(1.85rem, 9vw, 2.65rem);
    text-align: left;
  }
  .start-card .subtitle,
  .start-tagline {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .start-thumbnail img,
  .result-thumbnail img {
    max-height: 180px;
  }
  .result-actions {
    gap: 14px;
  }
}

/* Correcao final: slogan sempre centrado */
.start-tagline {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Ajuste dedicado das thumbnails como cartazes */
.start-thumbnail,
.result-thumbnail {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.start-thumbnail {
  max-width: 560px !important;
  margin-top: 22px !important;
  margin-bottom: 24px !important;
}

.result-thumbnail {
  max-width: 540px !important;
  margin-top: 26px !important;
  margin-bottom: 28px !important;
}

.quiz-thumb {
  display: block;
  width: min(100%, 520px);
  max-width: 100%;
  height: auto;
  object-fit: contain !important;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(108, 73, 35, .2);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(35, 21, 10, .18);
}

.quiz-thumb--initial {
  width: clamp(420px, 58vw, 560px);
}

.quiz-thumb--final {
  width: clamp(420px, 52vw, 540px);
}

.start-thumbnail img,
.result-thumbnail img,
.quiz-thumb--initial,
.quiz-thumb--final {
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 700px) {
  .quiz-thumb,
  .quiz-thumb--initial,
  .quiz-thumb--final {
    width: 100%;
    max-width: 100%;
  }
  .start-thumbnail,
  .result-thumbnail {
    max-width: 100% !important;
  }
}
/* Layout final: banner hero inicial e resultado centrado */
.start-card {
  max-width: 900px;
  text-align: center;
}

.start-thumbnail--hero {
  max-width: 720px !important;
  margin-top: 4px !important;
  margin-bottom: 28px !important;
}

.quiz-thumb--initial {
  width: min(100%, 720px) !important;
  object-fit: contain !important;
}

.start-title {
  max-width: 760px;
  font-size: clamp(1.85rem, 4vw, 3rem);
}

.start-card .subtitle,
.start-tagline,
.meta-line {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.start-card .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.result-card {
  text-align: center !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.result-card .eyebrow,
.result-card h2,
.result-card [data-result-message],
.result-card .session-note,
.result-card .final-score,
.result-card .result-route,
.result-thumbnail,
.result-actions {
  margin-left: auto !important;
  margin-right: auto !important;
}

.result-card h2,
.result-card [data-result-message] {
  max-width: 680px;
}

.result-card [data-result-message] {
  text-align: center;
}

.result-route {
  justify-content: center !important;
  max-width: 380px;
}

.result-thumbnail {
  max-width: 680px !important;
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

.quiz-thumb--final {
  width: min(100%, 680px) !important;
  object-fit: contain !important;
}

.result-actions {
  justify-content: center !important;
  gap: clamp(20px, 4vw, 34px) !important;
}

@media (max-width: 700px) {
  .start-thumbnail--hero,
  .result-thumbnail {
    max-width: 100% !important;
  }
  .quiz-thumb--initial,
  .quiz-thumb--final {
    width: 100% !important;
  }
  .start-title,
  .start-card .subtitle,
  .start-tagline,
  .meta-line {
    text-align: center !important;
  }
  .start-card .primary-action {
    width: 100%;
  }
  .result-actions {
    align-items: stretch;
  }
}
/* Garantia final: botao inicial centrado */
.start-card .primary-action[data-start] {
  display: flex !important;
  width: fit-content !important;
  min-width: 210px;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 700px) {
  .start-card .primary-action[data-start] {
    width: min(100%, 320px) !important;
  }
}


/* CRL Quiz v1: esconder selo vazio por defeito */
.lab-label:empty { display: none !important; }

.continua-viagem {
  width: min(100%, 820px);
  margin: 30px auto 34px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(215, 169, 64, .48);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 248, 226, .9), rgba(235, 222, 188, .76));
  box-shadow: 0 18px 44px rgba(26, 18, 7, .18);
  color: #1b1710;
  text-align: left;
}

.continua-viagem.is-hidden {
  display: none;
}

.continua-viagem__intro {
  max-width: 680px;
  margin: 0 auto 18px;
  text-align: center;
}

.continua-viagem__intro .eyebrow {
  margin: 0 0 10px;
  color: #7a5612;
  letter-spacing: .08em;
}

.continua-viagem__text {
  margin: 0;
  color: #2f281b;
  font-weight: 800;
  line-height: 1.55;
}

.continua-viagem__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.continua-viagem__linha {
  margin-top: 16px;
}

.continua-card {
  display: flex;
  min-height: 148px;
  flex-direction: column;
  gap: 9px;
  justify-content: flex-start;
  padding: 18px;
  border: 1px solid rgba(215, 169, 64, .62);
  border-radius: 18px;
  background: #12100d;
  color: #f8edc8;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(17, 16, 14, .16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.continua-card:hover,
.continua-card:focus-visible {
  border-color: rgba(255, 214, 96, .95);
  box-shadow: 0 16px 34px rgba(17, 16, 14, .24);
  transform: translateY(-3px);
}

.continua-card__type {
  color: var(--gold);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.continua-card__title {
  color: #fff9df;
  font-size: 1rem;
  line-height: 1.2;
}

.continua-card__promise {
  color: #e7dcbf;
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.45;
}

.continua-viagem__linha .continua-card {
  min-height: auto;
  align-items: center;
  border-color: rgba(215, 169, 64, .88);
  background: linear-gradient(135deg, #17130d, #2a1e0c);
  text-align: center;
}

.continua-viagem__linha .continua-card__type {
  display: none;
}

.continua-viagem__linha .continua-card__title {
  color: var(--gold);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.continua-viagem__linha .continua-card__promise {
  max-width: 560px;
  color: #fff3c9;
  font-size: clamp(1rem, 2vw, 1.12rem);
  font-weight: 850;
  line-height: 1.42;
  white-space: pre-line;
}

@media (max-width: 780px) {
  .continua-viagem {
    margin-top: 24px;
    padding: 16px;
    border-radius: 18px;
  }

  .continua-viagem__grid {
    grid-template-columns: 1fr;
  }

  .continua-card {
    min-height: auto;
    padding: 16px;
  }
}