/*
  TRACES IN TIME — ERA I / POINT 6
  Shared level presentation layer. Game data, engines, scoring and progression stay untouched.
  Each page receives a distinct environment/composition while reusing Point 5 design-system tokens.
*/

body.era1-level-page,
body.era1-case-page{
  --page-scene:none;
  --page-scene-position:center;
  --page-accent:var(--ds-ember-600);
  --page-accent-soft:var(--ds-ochre-450);
  --page-vignette:rgba(8,5,3,.58);
  --page-panel-alpha:.94;
  min-height:100svh;
  position:relative;
  isolation:isolate;
  color:var(--ds-text-on-dark);
  background-color:var(--ds-charcoal-950);
  background-image:var(--page-scene);
  background-size:cover;
  background-position:var(--page-scene-position);
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-family:var(--ds-font-ui);
}

body.era1-level-page::before,
body.era1-case-page::before{display:none}

body.era1-level-page::after,
body.era1-case-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, transparent 20%, var(--page-vignette) 100%),
    linear-gradient(180deg,rgba(8,5,3,.16),rgba(8,5,3,.70));
}

body.era1-level-page .shell,
body.era1-case-page .shell{
  position:relative;
  z-index:1;
  max-width:none;
  min-height:100svh;
  padding:clamp(14px,2.3vw,34px);
}

body.era1-level-page .level-shell,
body.era1-case-page .case-shell{
  position:relative;
  z-index:1;
}

/* Atmospheric grain is CSS-only and deliberately subtle. */
body.era1-level-page .shell::before,
body.era1-case-page .shell::before{display:none}

/* Shared header: an object in the scene, not a website chrome bar. */
body.era1-level-page .game-header,
body.era1-case-page .game-header{
  position:relative;
  margin:0 0 clamp(18px,2.5vw,34px);
  padding:clamp(14px,1.7vw,22px) clamp(16px,2vw,28px);
  border:1px solid rgba(226,181,118,.22);
  border-radius:var(--ds-radius-organic-b);
  background:
    linear-gradient(100deg,rgba(10,7,5,.90),rgba(31,23,18,.83) 56%,rgba(10,7,5,.72)),
    url("../assets/era1-stone-clean.jpg") center/cover;
  box-shadow:var(--ds-shadow-panel), inset 0 1px rgba(255,218,167,.12);
  text-shadow:0 3px 16px rgba(0,0,0,.76);
  overflow:hidden;
}
body.era1-level-page .game-header::before,
body.era1-case-page .game-header::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:linear-gradient(var(--page-accent-soft),var(--page-accent));
  box-shadow:0 0 18px color-mix(in srgb,var(--page-accent) 48%,transparent);
}
body.era1-level-page .game-header h1,
body.era1-case-page .game-header h1{
  font-family:var(--ds-font-display);
  letter-spacing:.055em;
  color:var(--ds-bone-100);
}
body.era1-level-page .game-header p,
body.era1-case-page .game-header p{color:var(--ds-bone-400)}
body.era1-level-page .kicker,
body.era1-case-page .kicker{
  color:var(--page-accent-soft);
  font-family:var(--ds-font-ui);
  font-weight:900;
  letter-spacing:.16em;
}

/* Shared physical panels. */
body.era1-level-page .card,
body.era1-case-page .card,
body.era1-level-page .case-result,
body.era1-case-page .case-result{
  position:relative;
  border:1px solid rgba(84,54,33,.72);
  border-radius:var(--ds-radius-organic-a);
  background:
    linear-gradient(rgba(249,218,170,.13),rgba(93,49,24,.08)),
    url("../assets/era1-leather-clean.jpg") center/cover;
  color:var(--ds-text-on-leather);
  box-shadow:var(--ds-shadow-panel), inset 0 1px rgba(255,245,220,.45), inset 0 -8px 20px rgba(79,39,17,.10);
  backdrop-filter:none;
}
body.era1-level-page .card::after,
body.era1-case-page .card::after{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(77,42,24,.13);
  border-radius:inherit;
}
body.era1-level-page .card h2,
body.era1-level-page .card h3,
body.era1-case-page .card h2,
body.era1-case-page .card h3{font-family:var(--ds-font-display);color:#321d13}
body.era1-level-page .card p,
body.era1-case-page .card p{color:#49301f}
body.era1-level-page .notice,
body.era1-case-page .notice{
  border:1px solid rgba(101,57,29,.26);
  border-left:4px solid var(--page-accent);
  background:rgba(86,47,26,.08);
  color:#442b1d;
  box-shadow:inset 0 1px rgba(255,255,255,.20);
}
body.era1-level-page .notice strong,
body.era1-case-page .notice strong{color:#552b18}

/* Buttons inherit the Point 5 language while preserving existing class names. */
body.era1-level-page .btn,
body.era1-case-page .btn{
  min-height:42px;
  border:1px solid #4c2714;
  border-radius:var(--ds-radius-xs);
  padding:.82em 1.08em;
  background:linear-gradient(180deg,rgba(255,233,193,.27),rgba(74,33,15,.08)),#824724;
  color:#ffe7bd;
  font-family:var(--ds-font-ui);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  text-shadow:0 1px 1px #381b0d;
  box-shadow:0 7px 16px rgba(29,13,6,.28),inset 0 1px rgba(255,246,217,.36);
  transition:transform var(--ds-duration-fast) var(--ds-ease-natural),filter var(--ds-duration-fast) ease,box-shadow var(--ds-duration-fast) ease;
}
body.era1-level-page .btn:hover:not(:disabled),
body.era1-case-page .btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 11px 22px rgba(29,13,6,.34),var(--ds-glow-ember)}
body.era1-level-page .btn.primary,
body.era1-case-page .btn.primary{background:linear-gradient(180deg,rgba(255,219,164,.28),rgba(91,35,12,.12)),var(--page-accent);border-color:#54280f;color:#fff0d4}
body.era1-level-page .btn.ghost,
body.era1-case-page .btn.ghost{background:rgba(26,17,12,.62);border-color:rgba(232,177,105,.30);color:var(--ds-bone-100);text-shadow:0 1px 2px #000}
body.era1-level-page .btn.danger,
body.era1-case-page .btn.danger{background:#743125;border-color:#4e2019;color:var(--ds-text-danger)}
body.era1-level-page .btn:disabled,
body.era1-case-page .btn:disabled{opacity:.52;filter:grayscale(.35);transform:none;box-shadow:none}

/* Dashboard metrics become carved stone counters. */
body.era1-level-page .metric,
body.era1-case-page .case-metric,
body.era1-case-page .big-score{
  border:1px solid rgba(215,179,123,.21);
  border-radius:var(--ds-radius-rock);
  background:linear-gradient(rgba(9,6,4,.25),rgba(9,6,4,.42)),url("../assets/era1-stone-clean.jpg") center/cover;
  box-shadow:0 9px 22px rgba(0,0,0,.28),inset 0 1px rgba(255,191,118,.10);
  color:var(--ds-text-on-stone);
}
body.era1-level-page .metric b,
body.era1-case-page .case-metric b,
body.era1-case-page .big-score b{color:var(--ds-fire-150);font-family:var(--ds-font-display)}
body.era1-level-page .metric span,
body.era1-case-page .case-metric span,
body.era1-case-page .big-score span{color:var(--ds-text-on-stone-muted)}

body.era1-level-page .progress-state,
body.era1-case-page .case-state,
body.era1-level-page .topic-pill,
body.era1-case-page .proof-counter{
  border-color:rgba(96,56,32,.40);
  background:rgba(80,44,24,.10);
  color:#61371f;
}

/* Quiz / puzzle work surface. */
body.era1-level-page #quizScreen > .card,
body.era1-level-page #resultScreen > .card{
  max-width:980px;
  margin-inline:auto;
}
body.era1-level-page .question-text{font-family:var(--ds-font-display);color:#2d1a11}
body.era1-level-page .quiz-score{color:#7c3f1f}
body.era1-level-page .answer-choice,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-match-row,
body.era1-level-page .pgame-sequence li,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .pgame-clues,
body.era1-level-page .clue-card{
  border-color:rgba(74,45,28,.34);
  background:rgba(88,50,28,.10);
  color:#342115;
  box-shadow:inset 0 1px rgba(255,255,255,.16);
}
body.era1-level-page .answer-choice:hover:not(:disabled),
body.era1-level-page .pgame-select:hover,
body.era1-level-page .pgame-scene-item:hover{border-color:#8b4b25;background:rgba(139,75,37,.16)}
body.era1-level-page .answer-choice.correct{border-color:#596b3c;background:rgba(72,88,46,.17)}
body.era1-level-page .answer-choice.wrong{border-color:#933c2b;background:rgba(147,60,43,.15)}
body.era1-level-page .quiz-feedback{background:rgba(74,43,24,.08);color:#382318;border-color:rgba(74,43,24,.30)}
body.era1-level-page .quiz-feedback p{color:#503421}
body.era1-level-page .quiz-feedback.ok{border-color:#596b3c;background:rgba(72,88,46,.13)}
body.era1-level-page .quiz-feedback.bad{border-color:#933c2b;background:rgba(147,60,43,.12)}
body.era1-level-page .source-note{color:#69472f}
body.era1-level-page .pgame-note{background:rgba(62,38,23,.09);color:#5b3c28;border-color:rgba(74,45,28,.28)}
body.era1-level-page .pgame select,
body.era1-case-page select{
  background:#2a1b12;
  color:var(--ds-bone-100);
  border-color:rgba(226,181,118,.28);
}
body.era1-level-page .pgame-match-row span,
body.era1-level-page .pgame-logic label span{color:#352116}
body.era1-level-page .pgame-select small,
body.era1-level-page .pgame-scene-item small{color:#6d4930}
body.era1-level-page .pgame-icon,
body.era1-level-page .pgame-counter{color:#8b4621}
body.era1-level-page .pgame-maze{box-shadow:0 12px 34px rgba(58,29,14,.22);border-color:#79502f}

/* Keep feedback/status legible and semantically recognizable. */
body.era1-level-page .unlock,
body.era1-level-page .case-unlocked,
body.era1-case-page .completed-banner,
body.era1-case-page .resolution{background:rgba(72,88,46,.18);border-color:#596b3c;color:#31401f}
body.era1-level-page .locked-note,
body.era1-case-page .locked-case{background:rgba(147,60,43,.16);border-color:#7e382c;color:#542419}

/* ========== LEVEL 1 — OBSERVATION TERRACE ========== */
body.level-1{
  --page-scene:url("../assets/era1-level1-observation.jpg");
  background-image:url("../assets/era1-level1-observation.jpg");
  --page-scene-position:center 47%;
  --page-accent:#b25827;
  --page-accent-soft:#e0a464;
  --page-vignette:rgba(22,13,7,.46);
}
body.level-1 .level-shell{max-width:1180px;margin:0 auto}
body.level-1 .game-header{max-width:820px;margin-left:auto}
body.level-1 #dashboard > .card{width:min(760px,72%);margin-left:auto;transform:rotate(-.12deg)}
body.level-1 #dashboard > .card::before{
  content:"";position:absolute;left:-22px;top:34px;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#d8b88d,#8c633d 56%,#3b2417 58%);box-shadow:0 6px 12px rgba(0,0,0,.24)
}

/* ========== LEVEL 2 — CAVE / ROCK SHELTER ========== */
body.level-2{
  --page-scene:url("../assets/era1-level2-cave.jpg");
  background-image:url("../assets/era1-level2-cave.jpg");
  --page-scene-position:center 42%;
  --page-accent:#9d542a;
  --page-accent-soft:#d6a064;
  --page-vignette:rgba(5,4,3,.72);
}
body.level-2 .level-shell{max-width:1080px;margin-left:clamp(0px,5vw,84px);margin-right:auto}
body.level-2 .game-header{max-width:760px;background:linear-gradient(90deg,rgba(12,9,7,.96),rgba(41,31,24,.90)),url("../assets/era1-stone-clean.jpg") center/cover}
body.level-2 #dashboard > .card,
body.level-2 #quizScreen > .card,
body.level-2 #resultScreen > .card{border-radius:7% 4% 6% 3% / 4% 6% 5% 7%;box-shadow:0 28px 60px rgba(0,0,0,.50),inset 0 1px rgba(255,229,191,.36)}
body.level-2 #dashboard > .card{max-width:820px}
body.level-2 .card::before{content:"";position:absolute;right:18px;top:-8px;width:76px;height:18px;border-top:2px solid rgba(92,45,23,.30);transform:rotate(-7deg)}

/* ========== LEVEL 3 — WORK AREA / CRAFT BENCH ========== */
body.level-3{
  --page-scene:url("../assets/era1-level3-workbench.jpg");
  background-image:url("../assets/era1-level3-workbench.jpg");
  --page-scene-position:center 58%;
  --page-accent:#c0652c;
  --page-accent-soft:#f0b66e;
  --page-vignette:rgba(16,8,4,.64);
}
body.level-3 .level-shell{max-width:1200px;margin:0 auto}
body.level-3 .game-header{max-width:880px;margin-right:auto}
body.level-3 #dashboard > .card,
body.level-3 #quizScreen > .card,
body.level-3 #resultScreen > .card{
  border-radius:10px;
  background:
    linear-gradient(90deg,rgba(66,39,24,.16),rgba(235,185,119,.12),rgba(49,28,18,.18)),
    url("../assets/era1-leather-clean.jpg") center/cover;
  border:5px solid #422718;
  box-shadow:0 22px 60px rgba(0,0,0,.52),inset 0 0 0 1px rgba(236,184,117,.16);
}
body.level-3 #dashboard > .card{max-width:900px;margin:clamp(10px,5vh,58px) auto 0}
body.level-3 .metric{border-radius:10px}
body.level-3 .answer-choice,
body.level-3 .clue-card{border-radius:7px}

/* ========== LEVEL 4 — RIVER INVESTIGATION SITE ========== */
body.level-4{
  --page-scene:url("../assets/era1-level4-river.jpg");
  background-image:url("../assets/era1-level4-river.jpg");
  --page-scene-position:center 46%;
  --page-accent:#7b6036;
  --page-accent-soft:#c9a469;
  --page-vignette:rgba(10,14,10,.60);
}
body.level-4 .level-shell{max-width:1240px;margin:0 auto}
body.level-4 .game-header{width:min(900px,82%);margin-left:auto}
body.level-4 #dashboard > .card{width:min(910px,82%);margin-left:auto;background:linear-gradient(rgba(236,213,174,.12),rgba(74,50,31,.08)),url("../assets/era1-leather-clean.jpg") center/cover}
body.level-4 #quizScreen > .card{max-width:1040px;margin-left:auto;margin-right:0}
body.level-4 .topic-pill{border-style:dashed}
body.level-4 .answer-choice{border-left:4px solid rgba(101,117,74,.58)}

/* ========== LEVEL 5 — RECONSTRUCTION SPACE ========== */
body.level-5{
  --page-scene:url("../assets/era1-level5-reconstruction.jpg");
  background-image:url("../assets/era1-level5-reconstruction.jpg");
  --page-scene-position:center 48%;
  --page-accent:#a14b22;
  --page-accent-soft:#dda15e;
  --page-vignette:rgba(8,5,3,.76);
}
body.level-5 .level-shell{max-width:1160px;margin:0 auto}
body.level-5 .game-header{max-width:980px;margin-inline:auto}
body.level-5 #dashboard > .card{max-width:980px;margin:0 auto;border-color:rgba(215,179,123,.26)}
body.level-5 #quizScreen > .card{
  max-width:1060px;
  background:linear-gradient(rgba(12,8,6,.30),rgba(12,8,6,.40)),url("../assets/era1-stone-clean.jpg") center/cover;
  color:var(--ds-text-on-stone);
  border-radius:var(--ds-radius-rock);
}
body.level-5 #quizScreen .question-text,
body.level-5 #quizScreen .quiz-count,
body.level-5 #quizScreen .quiz-score{color:var(--ds-bone-100)}
body.level-5 #quizScreen .topic-pill{color:var(--ds-fire-150);border-color:rgba(255,179,102,.28);background:rgba(0,0,0,.18)}
body.level-5 #quizScreen .clue-card,
body.level-5 #quizScreen .answer-choice{background:rgba(18,12,9,.58);color:var(--ds-bone-100);border-color:rgba(215,179,123,.22)}
body.level-5 #quizScreen .clue-card p{color:#ead7bb}
body.level-5 #quizScreen .clue-card span{color:var(--ds-fire-300)}
body.level-5 #quizScreen .answer-choice:hover:not(:disabled){background:rgba(128,71,35,.42)}
body.level-5 #quizScreen .quiz-feedback{background:rgba(16,10,7,.60);color:var(--ds-bone-100)}
body.level-5 #quizScreen .quiz-feedback p{color:#dfcdb3}

/* ========== FINAL CASE — NIGHT INVESTIGATION ========== */
body.final-case{
  --page-scene:url("../assets/era1-finalcase-night.jpg");
  background-image:url("../assets/era1-finalcase-night.jpg");
  --page-scene-position:center 58%;
  --page-accent:#c65326;
  --page-accent-soft:#f0aa61;
  --page-vignette:rgba(4,5,7,.82);
}
body.final-case::after{
  background:
    radial-gradient(circle at 43% 77%,rgba(190,72,28,.13),transparent 24%),
    linear-gradient(90deg,rgba(4,5,7,.72),rgba(4,5,7,.34) 48%,rgba(4,5,7,.75)),
    linear-gradient(180deg,rgba(5,7,10,.42),rgba(4,4,5,.84));
}
body.final-case .case-shell{max-width:1240px;margin:0 auto}
body.final-case .game-header{max-width:980px;margin-inline:auto}
body.final-case .briefing{
  max-width:920px;
  margin-inline:auto;
  border:1px solid rgba(211,154,102,.44);
  box-shadow:0 28px 70px rgba(0,0,0,.62),0 0 40px rgba(198,83,38,.08),inset 0 1px rgba(255,235,202,.34);
}
body.final-case .case-hero > .case-metrics{max-width:1020px;margin-inline:auto}
body.final-case #caseContent > section.card,
body.final-case #investigationSection > .card,
body.final-case #reportSection > .card{
  border-radius:var(--ds-radius-md);
  background:linear-gradient(rgba(10,7,5,.34),rgba(10,7,5,.42)),url("../assets/era1-stone-clean.jpg") center/cover;
  color:var(--ds-text-on-stone);
  border-color:rgba(226,181,118,.19);
  box-shadow:var(--ds-shadow-heavy);
}
body.final-case #caseContent > section.card h2,
body.final-case #investigationSection > .card h2,
body.final-case #reportSection > .card h2{color:var(--ds-bone-100)}
body.final-case #caseContent > section.card p,
body.final-case #investigationSection > .card p,
body.final-case #reportSection > .card p{color:#dfccb2}
body.final-case .people-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.final-case .person-card{
  border:1px solid rgba(215,179,123,.22);
  border-radius:var(--ds-radius-organic-b);
  background:linear-gradient(rgba(247,215,168,.10),rgba(87,46,24,.08)),url("../assets/era1-leather-clean.jpg") center/cover;
  color:#3c2517;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
body.final-case .person-card p{color:#51341f!important}
body.final-case .person-code{color:#8a4825}
body.final-case .investigation-layout{grid-template-columns:minmax(205px,260px) minmax(0,1fr);gap:20px}
body.final-case .location-tab{
  border:1px solid rgba(215,179,123,.22);
  border-radius:var(--ds-radius-rock);
  background:linear-gradient(rgba(13,9,7,.28),rgba(13,9,7,.44)),url("../assets/era1-stone-clean.jpg") center/cover;
  color:var(--ds-bone-100);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  transition:transform var(--ds-duration-fast) var(--ds-ease-natural),border-color var(--ds-duration-fast) ease,filter var(--ds-duration-fast) ease;
}
body.final-case .location-tab:hover{transform:translateX(3px);filter:brightness(1.08)}
body.final-case .location-tab span{color:var(--ds-text-on-stone-muted)}
body.final-case .location-tab.active{border-color:var(--ds-fire-300);background:linear-gradient(rgba(102,47,23,.28),rgba(15,10,7,.42)),url("../assets/era1-stone-clean.jpg") center/cover;box-shadow:0 8px 22px rgba(0,0,0,.30),var(--ds-glow-ember)}
body.final-case .location-head h2{color:var(--ds-fire-150)!important}
body.final-case .location-head p{color:#cfbda4!important}
body.final-case .evidence-card,
body.final-case .notebook-item,
body.final-case .proof-choice,
body.final-case .proof-review{
  border-color:rgba(215,179,123,.20);
  background:rgba(14,10,8,.64);
  color:var(--ds-bone-100);
}
body.final-case .evidence-card p,
body.final-case .notebook-item p,
body.final-case .proof-choice small{color:#ccb99f!important}
body.final-case .evidence-id,
body.final-case .notebook-item span,
body.final-case .proof-choice span{color:var(--ds-fire-300)}
body.final-case .evidence-card.sealed:hover,
body.final-case .proof-choice:hover{background:rgba(90,44,23,.44);border-color:rgba(255,179,102,.46)}
body.final-case .evidence-card.revealed{background:rgba(39,26,18,.80);border-color:rgba(215,179,123,.34)}
body.final-case .notebook-wrap{padding-top:8px;border-top:1px solid rgba(215,179,123,.16)}
body.final-case .report-gate{background:rgba(180,96,45,.10);border-color:rgba(240,170,97,.26)}
body.final-case .proof-choice.selected{border-color:var(--ds-fire-300);background:rgba(164,72,30,.25);box-shadow:var(--ds-glow-ember)}
body.final-case .report-field label{color:var(--ds-fire-300)}
body.final-case .case-result{background:linear-gradient(rgba(248,218,173,.12),rgba(93,49,24,.08)),url("../assets/era1-leather-clean.jpg") center/cover;color:#352116}
body.final-case .case-result p{color:#513723}
body.final-case .resolution p{color:#31401f!important}
body.final-case .sources{color:#b29b7f}
body.final-case .sources a{color:#e2bd89}

/* Focus and accessibility remain common across every environment. */
body.era1-level-page :focus-visible,
body.era1-case-page :focus-visible{outline:3px solid var(--ds-focus);outline-offset:3px}

@media(max-width:1000px){
  body.level-1 #dashboard > .card,
  body.level-4 #dashboard > .card,
  body.level-4 .game-header{width:auto;max-width:none;margin-inline:auto}
  body.level-2 .level-shell{margin-inline:auto}
  body.final-case .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  body.era1-level-page,
  body.era1-case-page{background-attachment:scroll}
  body.era1-level-page .shell,
  body.era1-case-page .shell{padding:12px}
  body.era1-level-page .game-header,
  body.era1-case-page .game-header{border-radius:12px;margin-bottom:14px;padding:15px}
  body.era1-level-page .game-header::before,
  body.era1-case-page .game-header::before{width:4px}
  body.level-1 #dashboard > .card{width:auto;transform:none}
  body.era1-level-page .card,
  body.era1-case-page .card{border-radius:12px;padding:16px}
  body.level-3 #dashboard > .card,
  body.level-3 #quizScreen > .card,
  body.level-3 #resultScreen > .card{border-width:3px}
  body.level-5 #quizScreen > .card{border-radius:14px}
  body.final-case .people-grid{grid-template-columns:1fr}
  body.final-case .investigation-layout{grid-template-columns:1fr}
  body.final-case .location-tabs{grid-template-columns:1fr 1fr;position:static}
  body.final-case .location-tab:hover{transform:none}
}

@media(max-width:520px){
  body.era1-level-page .game-header h1,
  body.era1-case-page .game-header h1{font-size:clamp(30px,12vw,46px)!important}
  body.era1-level-page .btn,
  body.era1-case-page .btn{min-height:44px;padding:.82em .92em;font-size:.74rem}
  body.final-case .location-tabs{grid-template-columns:1fr}
  body.era1-level-page .metric,
  body.era1-case-page .case-metric{border-radius:12px}
}

@media(prefers-reduced-motion:reduce){
  body.era1-level-page *,body.era1-case-page *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body.era1-level-page::before,body.era1-case-page::before{transform:none}
}

@media(prefers-contrast:more){
  body.era1-level-page .card,
  body.era1-case-page .card,
  body.final-case #caseContent > section.card,
  body.final-case #investigationSection > .card,
  body.final-case #reportSection > .card{border-width:2px}
  body.era1-level-page .answer-choice,
  body.era1-case-page .evidence-card{border-width:2px}
}


/* Point 6 visual separation pass: environment-first material/composition differences. */
body.level-1::after{
  background:linear-gradient(90deg,rgba(12,8,5,.55),rgba(12,8,5,.08) 34%,rgba(12,8,5,.22) 72%,rgba(12,8,5,.52)),linear-gradient(180deg,rgba(10,6,4,.08),rgba(10,6,4,.48));
}
body.level-2 #dashboard > .card,
body.level-2 #quizScreen > .card,
body.level-2 #resultScreen > .card{
  background:linear-gradient(rgba(11,8,6,.30),rgba(11,8,6,.48)),url("../assets/era1-stone-clean.jpg") center/cover;
  color:var(--ds-text-on-stone);
  border-color:rgba(215,179,123,.22);
}
body.level-2 #dashboard > .card h2,
body.level-2 #dashboard > .card h3,
body.level-2 #quizScreen > .card h2,
body.level-2 #quizScreen > .card h3,
body.level-2 #resultScreen > .card h2{color:var(--ds-bone-100)}
body.level-2 #dashboard > .card p,
body.level-2 #quizScreen > .card p,
body.level-2 #resultScreen > .card p{color:#ddc9ad}
body.level-2 .notice{background:rgba(0,0,0,.20);border-color:rgba(215,179,123,.18);color:#dbc5a6}
body.level-2 .notice strong{color:var(--ds-fire-150)}
body.level-2 .topic-pill{color:var(--ds-fire-300);background:rgba(0,0,0,.18);border-color:rgba(255,179,102,.24)}
body.level-2 .question-text,.level-2 .quiz-count,.level-2 .quiz-score{color:var(--ds-bone-100)}
body.level-2 .answer-choice,
body.level-2 .pgame-select,
body.level-2 .pgame-match-row,
body.level-2 .pgame-sequence li,
body.level-2 .pgame-scene-item,
body.level-2 .pgame-clues{background:rgba(17,12,9,.55);color:var(--ds-bone-100);border-color:rgba(215,179,123,.20)}
body.level-2 .answer-choice:hover:not(:disabled),
body.level-2 .pgame-select:hover{background:rgba(110,62,30,.42);border-color:rgba(255,179,102,.42)}
body.level-2 .quiz-feedback{background:rgba(10,7,5,.54);color:var(--ds-bone-100)}
body.level-2 .quiz-feedback p{color:#d8c5aa}
body.level-2 .source-note{color:#b89a75}

body.level-3::after{
  background:radial-gradient(circle at 44% 67%,rgba(194,78,25,.08),transparent 24%),linear-gradient(90deg,rgba(9,5,3,.68),rgba(9,5,3,.20) 42%,rgba(9,5,3,.50)),linear-gradient(180deg,rgba(7,4,2,.14),rgba(7,4,2,.58));
}

body.level-4::after{
  background:linear-gradient(90deg,rgba(8,11,8,.54),rgba(8,11,8,.15) 36%,rgba(8,11,8,.20) 72%,rgba(8,11,8,.52)),linear-gradient(180deg,rgba(7,10,7,.10),rgba(7,10,7,.52));
}
body.level-4 #dashboard > .card{
  background-color:#b38b5c;
  background-image:repeating-linear-gradient(88deg,rgba(62,39,22,.09) 0 1px,transparent 1px 5px),repeating-linear-gradient(2deg,rgba(255,244,217,.10) 0 1px,transparent 1px 6px),linear-gradient(rgba(232,207,163,.18),rgba(102,70,39,.08));
  border-radius:4px 18px 8px 14px;
  box-shadow:0 20px 54px rgba(0,0,0,.46),inset 0 1px rgba(255,245,218,.40);
}
body.level-4 #dashboard > .card::before{content:"";position:absolute;top:-9px;left:9%;width:82%;height:11px;background:repeating-linear-gradient(90deg,#5a351e 0 7px,#7a4d2d 7px 12px,#3c2418 12px 18px);border-radius:999px;box-shadow:0 3px 7px rgba(0,0,0,.32)}

body.level-5::after{
  background:radial-gradient(circle at 55% 37%,rgba(221,151,83,.07),transparent 28%),linear-gradient(90deg,rgba(7,5,4,.70),rgba(7,5,4,.28) 50%,rgba(7,5,4,.70)),linear-gradient(180deg,rgba(7,5,4,.28),rgba(7,5,4,.74));
}


/* Contrast corrections for dark stone/night contexts. */
body.level-2 .progress-state.locked,
body.level-2 .locked-note{color:#ffd8ca;border-color:#a95b47;background:rgba(122,43,31,.34)}
body.level-2 .unlock{color:#dff0c9;border-color:#6f8750;background:rgba(72,88,46,.28)}
body.final-case .locked-case{color:#ffd8ca;border-color:#a95b47;background:rgba(84,28,23,.78);box-shadow:var(--ds-shadow-panel)}

/* POINT8 — READABILITY / CONTRAST PATCH
   Contrast-only overrides. No layout, content, logic, typography or asset changes. */

/* Primary actions: retain each level accent, but deepen the button surface enough
   for the existing light label to remain readable in every environment. */
body.era1-level-page .btn.primary,
body.era1-case-page .btn.primary{
  background:
    linear-gradient(180deg,rgba(255,219,164,.08),rgba(91,35,12,.16)),
    color-mix(in srgb,var(--page-accent) 65%,#2a1309);
  color:#fff0d4;
}
body.era1-level-page .btn:disabled,
body.era1-case-page .btn:disabled{opacity:.78}
body.era1-level-page .btn.primary:hover:not(:disabled),
body.era1-case-page .btn.primary:hover:not(:disabled){filter:brightness(1.04)}

/* Light leather/fibre work surfaces — Levels 1, 3 and 4. */
body.level-1 .card p,
body.level-3 .card p,
body.level-4 .card p,
body.level-1 .notice,
body.level-3 .notice,
body.level-4 .notice,
body.level-1 .notice strong,
body.level-3 .notice strong,
body.level-4 .notice strong,
body.level-1 .progress-state,
body.level-3 .progress-state,
body.level-4 .progress-state,
body.level-1 .topic-pill,
body.level-3 .topic-pill,
body.level-4 .topic-pill,
body.level-1 .quiz-score,
body.level-3 .quiz-score,
body.level-4 .quiz-score,
body.level-1 .answer-choice,
body.level-3 .answer-choice,
body.level-4 .answer-choice,
body.level-1 .quiz-feedback,
body.level-3 .quiz-feedback,
body.level-4 .quiz-feedback,
body.level-1 .quiz-feedback p,
body.level-3 .quiz-feedback p,
body.level-4 .quiz-feedback p,
body.level-1 .source-note,
body.level-3 .source-note,
body.level-4 .source-note,
body.level-1 .pgame-note,
body.level-3 .pgame-note,
body.level-4 .pgame-note,
body.level-1 .pgame-match-row span,
body.level-3 .pgame-match-row span,
body.level-4 .pgame-match-row span,
body.level-1 .pgame-logic label span,
body.level-3 .pgame-logic label span,
body.level-4 .pgame-logic label span,
body.level-1 .pgame-select small,
body.level-3 .pgame-select small,
body.level-4 .pgame-select small,
body.level-1 .pgame-scene-item small,
body.level-3 .pgame-scene-item small,
body.level-4 .pgame-scene-item small,
body.level-1 .pgame-clues,
body.level-3 .pgame-clues,
body.level-4 .pgame-clues,
body.level-1 .pgame-scenes h4,
body.level-3 .pgame-scenes h4,
body.level-4 .pgame-scenes h4,
body.level-1 .pgame-maze-meta span,
body.level-3 .pgame-maze-meta span,
body.level-4 .pgame-maze-meta span{
  color:#0b0705;
}
body.level-1 .pgame-icon,
body.level-3 .pgame-icon,
body.level-4 .pgame-icon,
body.level-1 .pgame-counter,
body.level-3 .pgame-counter,
body.level-4 .pgame-counter,
body.level-1 .pgame-sequence li::before,
body.level-3 .pgame-sequence li::before,
body.level-4 .pgame-sequence li::before{
  color:#3f1e11;
}
body.level-1 .pgame-sequence li::before,
body.level-3 .pgame-sequence li::before,
body.level-4 .pgame-sequence li::before{border-color:#4a2414}
body.level-1 .pgame-select.selected,
body.level-3 .pgame-select.selected,
body.level-4 .pgame-select.selected,
body.level-1 button.pgame-scene-item.selected,
body.level-3 button.pgame-scene-item.selected,
body.level-4 button.pgame-scene-item.selected{border-color:#4a2414;background:rgba(124,59,28,.18)}

/* Success/error information on light materials keeps its semantic border/background;
   the text itself is neutral dark so state is never conveyed by hue alone. */
body.level-1 .unlock,
body.level-1 .locked-note,
body.level-3 .unlock,
body.level-3 .locked-note,
body.level-4 .unlock,
body.level-4 .locked-note{
  color:#0b0705;
}
body.level-1 #resultScreen .result-score,
body.level-3 #resultScreen .result-score,
body.level-4 #resultScreen .result-score{
  color:#3f1e11;
}

/* Level 2 — all gameplay cards are dark stone. Restore light nested text that
   generic leather rules would otherwise force back to dark brown. */
body.level-2 .progress-state{color:var(--ds-fire-150);background:rgba(0,0,0,.22);border-color:rgba(255,179,102,.28)}
body.level-2 .progress-state.ok{color:#dff0c9;border-color:#6f8750;background:rgba(72,88,46,.30)}
body.level-2 .progress-state.locked{color:#ffd8ca;border-color:#a95b47;background:rgba(122,43,31,.34)}
body.level-2 .pgame-note{background:rgba(10,7,5,.54);color:#dfcdb3;border-color:rgba(215,179,123,.22)}
body.level-2 .pgame-match-row span,
body.level-2 .pgame-logic label span{color:var(--ds-bone-100)}
body.level-2 .pgame-select small,
body.level-2 .pgame-scene-item small{color:#dfcdb3}
body.level-2 .pgame-icon,
body.level-2 .pgame-counter,
body.level-2 .pgame-scenes h4,
body.level-2 .pgame-sequence li::before{color:var(--ds-fire-150)}
body.level-2 .pgame-maze-meta span{color:#dfcdb3}
body.level-2 .pgame-sequence li::before{border-color:rgba(255,179,102,.46)}
body.level-2 .pgame-select.selected,
body.level-2 button.pgame-scene-item.selected{border-color:var(--ds-fire-300);background:rgba(164,72,30,.30)}

/* Level 5 — quiz surface is dark stone; procedural games must use the same
   light-on-dark language already used by the normal reconstruction questions. */
body.level-5 #quizScreen .pgame-select,
body.level-5 #quizScreen .pgame-match-row,
body.level-5 #quizScreen .pgame-sequence li,
body.level-5 #quizScreen .pgame-scene-item,
body.level-5 #quizScreen .pgame-clues{
  background:rgba(18,12,9,.58);
  color:var(--ds-bone-100);
  border-color:rgba(215,179,123,.22);
}
body.level-5 #quizScreen .pgame-note{background:rgba(16,10,7,.60);color:#dfcdb3;border-color:rgba(215,179,123,.22)}
body.level-5 #quizScreen .pgame-match-row span,
body.level-5 #quizScreen .pgame-logic label span{color:var(--ds-bone-100)}
body.level-5 #quizScreen .pgame-select small,
body.level-5 #quizScreen .pgame-scene-item small,
body.level-5 #quizScreen .pgame-maze-meta span{color:#dfcdb3}
body.level-5 #quizScreen .pgame-icon,
body.level-5 #quizScreen .pgame-counter,
body.level-5 #quizScreen .pgame-scenes h4,
body.level-5 #quizScreen .pgame-sequence li::before{color:var(--ds-fire-150)}
body.level-5 #quizScreen .pgame-sequence li::before{border-color:rgba(255,179,102,.46)}
body.level-5 #quizScreen .pgame-select.selected,
body.level-5 #quizScreen button.pgame-scene-item.selected{border-color:var(--ds-fire-300);background:rgba(164,72,30,.30)}
body.level-5 #quizScreen .source-note{color:#d8c5aa}

/* Level 5 overview/result stay on light leather. */
body.level-5 #dashboard > .card p,
body.level-5 #dashboard .notice,
body.level-5 #dashboard .notice strong,
body.level-5 #dashboard .progress-state,
body.level-5 #resultScreen > .card p,
body.level-5 #resultScreen .case-unlocked{
  color:#0b0705;
}
body.level-5 #resultScreen .result-score{color:#3f1e11}

/* Final Case — light briefing/person/result materials. */
body.final-case .briefing p,
body.final-case .person-card p,
body.final-case .person-code,
body.final-case .case-result,
body.final-case .case-result p{
  color:#0b0705!important;
}
body.final-case .case-state{color:#0b0705}
body.final-case .case-state.ok{color:#0b0705;border-color:#58734f;background:rgba(88,115,79,.16)}
body.final-case .case-state.locked{color:#0b0705;border-color:#87463f;background:rgba(147,60,43,.14)}
body.final-case .case-result .kicker,
body.final-case .era-complete strong{color:#3f1e11}
body.final-case .resolution h3,
body.final-case .resolution p{color:#0b0705!important}

/* Final Case — elements that sit directly on dark stone/night surfaces. */
body.final-case .completed-banner{color:#dff0c9;background:rgba(38,55,29,.78);border-color:#6f8750}
body.final-case .proof-counter{color:var(--ds-fire-150);background:rgba(10,7,5,.54);border-color:rgba(255,179,102,.28)}
body.final-case .proof-counter b{color:#ffe0b5}

/* Audit follow-up: light-material exceptions found in dashboard/briefing states. */
body.level-5 #dashboard .hard-rule,
body.level-5 #dashboard .locked-note,
body.level-5 #dashboard .unlock,
body.level-5 #dashboard .source-note{color:#0b0705}
body.final-case .briefing strong{color:#3f1e11}


/* POINT8 — HUMAN QA HOTFIX (2026-09-27)
   Restore readable light-on-dark gameplay text for Levels 1, 3 and 4.
   This fixes human-legibility issues found in the real standalone/browser test. */
body.level-1 .card p,
body.level-3 .card p,
body.level-4 .card p,
body.level-1 .notice,
body.level-3 .notice,
body.level-4 .notice,
body.level-1 .source-note,
body.level-3 .source-note,
body.level-4 .source-note,
body.level-1 .pgame-note,
body.level-3 .pgame-note,
body.level-4 .pgame-note,
body.level-1 .pgame-select small,
body.level-3 .pgame-select small,
body.level-4 .pgame-select small,
body.level-1 .pgame-scene-item small,
body.level-3 .pgame-scene-item small,
body.level-4 .pgame-scene-item small,
body.level-1 .pgame-maze-meta span,
body.level-3 .pgame-maze-meta span,
body.level-4 .pgame-maze-meta span{color:#dfcdb3}

body.level-1 .notice strong,
body.level-3 .notice strong,
body.level-4 .notice strong,
body.level-1 .question-text,
body.level-3 .question-text,
body.level-4 .question-text,
body.level-1 .quiz-count,
body.level-3 .quiz-count,
body.level-4 .quiz-count,
body.level-1 .answer-choice,
body.level-3 .answer-choice,
body.level-4 .answer-choice,
body.level-1 .quiz-feedback,
body.level-3 .quiz-feedback,
body.level-4 .quiz-feedback,
body.level-1 .quiz-feedback p,
body.level-3 .quiz-feedback p,
body.level-4 .quiz-feedback p,
body.level-1 .pgame-match-row span,
body.level-3 .pgame-match-row span,
body.level-4 .pgame-match-row span,
body.level-1 .pgame-logic label span,
body.level-3 .pgame-logic label span,
body.level-4 .pgame-logic label span,
body.level-1 .pgame-clues,
body.level-3 .pgame-clues,
body.level-4 .pgame-clues,
body.level-1 .pgame-scenes h4,
body.level-3 .pgame-scenes h4,
body.level-4 .pgame-scenes h4{color:var(--ds-bone-100)}

body.level-1 .quiz-score,
body.level-3 .quiz-score,
body.level-4 .quiz-score,
body.level-1 .topic-pill,
body.level-3 .topic-pill,
body.level-4 .topic-pill,
body.level-1 .pgame-icon,
body.level-3 .pgame-icon,
body.level-4 .pgame-icon,
body.level-1 .pgame-counter,
body.level-3 .pgame-counter,
body.level-4 .pgame-counter,
body.level-1 .pgame-sequence li::before,
body.level-3 .pgame-sequence li::before,
body.level-4 .pgame-sequence li::before,
body.level-1 #resultScreen .result-score,
body.level-3 #resultScreen .result-score,
body.level-4 #resultScreen .result-score{color:var(--ds-fire-150)}

body.level-1 .topic-pill,
body.level-3 .topic-pill,
body.level-4 .topic-pill,
body.level-1 .progress-state,
body.level-3 .progress-state,
body.level-4 .progress-state,
body.level-1 .answer-choice,
body.level-3 .answer-choice,
body.level-4 .answer-choice,
body.level-1 .pgame-select,
body.level-3 .pgame-select,
body.level-4 .pgame-select,
body.level-1 .pgame-match-row,
body.level-3 .pgame-match-row,
body.level-4 .pgame-match-row,
body.level-1 .pgame-sequence li,
body.level-3 .pgame-sequence li,
body.level-4 .pgame-sequence li,
body.level-1 .pgame-scene-item,
body.level-3 .pgame-scene-item,
body.level-4 .pgame-scene-item,
body.level-1 .pgame-clues,
body.level-3 .pgame-clues,
body.level-4 .pgame-clues,
body.level-1 .clue-card,
body.level-3 .clue-card,
body.level-4 .clue-card,
body.level-1 .quiz-feedback,
body.level-3 .quiz-feedback,
body.level-4 .quiz-feedback,
body.level-1 .pgame-note,
body.level-3 .pgame-note,
body.level-4 .pgame-note{
  background:rgba(18,12,9,.58);
  border-color:rgba(215,179,123,.22);
}

body.level-1 .answer-choice:hover:not(:disabled),
body.level-3 .answer-choice:hover:not(:disabled),
body.level-4 .answer-choice:hover:not(:disabled),
body.level-1 .pgame-select:hover,
body.level-3 .pgame-select:hover,
body.level-4 .pgame-select:hover,
body.level-1 .pgame-scene-item:hover,
body.level-3 .pgame-scene-item:hover,
body.level-4 .pgame-scene-item:hover{border-color:var(--ds-fire-300);background:rgba(128,71,35,.42)}

body.level-1 .pgame-sequence li::before,
body.level-3 .pgame-sequence li::before,
body.level-4 .pgame-sequence li::before{border-color:rgba(255,179,102,.46)}

body.level-1 .pgame-select.selected,
body.level-3 .pgame-select.selected,
body.level-4 .pgame-select.selected,
body.level-1 button.pgame-scene-item.selected,
body.level-3 button.pgame-scene-item.selected,
body.level-4 button.pgame-scene-item.selected{border-color:var(--ds-fire-300);background:rgba(164,72,30,.30)}

body.level-1 .progress-state,
body.level-3 .progress-state,
body.level-4 .progress-state{color:var(--ds-fire-150);background:rgba(0,0,0,.22);border-color:rgba(255,179,102,.28)}
body.level-1 .progress-state.ok,
body.level-3 .progress-state.ok,
body.level-4 .progress-state.ok,
body.level-1 .unlock,
body.level-3 .unlock,
body.level-4 .unlock{color:#dff0c9;border-color:#6f8750;background:rgba(72,88,46,.28)}
body.level-1 .locked-note,
body.level-3 .locked-note,
body.level-4 .locked-note,
body.level-1 .progress-state.locked,
body.level-3 .progress-state.locked,
body.level-4 .progress-state.locked{color:#ffd8ca;border-color:#a95b47;background:rgba(122,43,31,.34)}


/* POINT8 — GLOBAL LIGHT TEXT VISIBILITY PATCH (2026-09-27)
   User-requested style direction: clear light text across sections,
   preserving only semantic success/error accents. */
body.era1-level-page .kicker,
body.era1-case-page .kicker{color:#efb06c!important}
body.era1-level-page .game-header h1,
body.era1-case-page .game-header h1{color:#fff1dc!important;text-shadow:0 2px 10px rgba(0,0,0,.55)!important}
body.era1-level-page .game-header p,
body.era1-case-page .game-header p{color:#ffe1b5!important}

body.era1-level-page #dashboard > .card,
body.era1-level-page #quizScreen > .card,
body.era1-level-page #resultScreen > .card,
body.era1-case-page .card,
body.era1-case-page .briefing,
body.era1-case-page .person-card,
body.era1-case-page .case-result,
body.era1-case-page .resolution,
body.era1-case-page .locked-case,
body.era1-case-page .proof-counter{
  box-shadow:inset 0 0 0 9999px rgba(10,7,5,.20), 0 18px 48px rgba(0,0,0,.28)!important;
}

body.era1-level-page .level-rule strong,
body.era1-level-page .result-card h2,
body.era1-level-page .notice strong,
body.era1-case-page h2,
body.era1-case-page h3,
body.era1-case-page .case-result .kicker,
body.era1-case-page .era-complete strong,
body.era1-case-page .briefing strong{color:#fff0da!important}

body.era1-level-page .card p,
body.era1-level-page .notice,
body.era1-level-page .source-note,
body.era1-level-page .quiz-count,
body.era1-level-page .answer-choice,
body.era1-level-page .answer-choice *,
body.era1-level-page .quiz-feedback,
body.era1-level-page .quiz-feedback p,
body.era1-level-page .topic-pill,
body.era1-level-page .progress-state,
body.era1-level-page .pgame-note,
body.era1-level-page .pgame-match-row span,
body.era1-level-page .pgame-logic label span,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-select small,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .pgame-scene-item small,
body.era1-level-page .pgame-clues,
body.era1-level-page .pgame-scenes h4,
body.era1-level-page .pgame-maze-meta span,
body.era1-level-page .clue-card,
body.era1-case-page .briefing p,
body.era1-case-page .person-card p,
body.era1-case-page .person-code,
body.era1-case-page .case-state,
body.era1-case-page .case-result,
body.era1-case-page .case-result p,
body.era1-case-page .resolution p,
body.era1-case-page .location,
body.era1-case-page .location strong,
body.era1-case-page .enigma-card,
body.era1-case-page .proof-choice,
body.era1-case-page .proof-review,
body.era1-case-page .proof-counter,
body.era1-case-page .completed-banner,
body.era1-case-page .locked-case{color:#f2e0c4!important;text-shadow:0 1px 2px rgba(0,0,0,.45)}

body.era1-level-page .question-text,
body.era1-case-page .resolution h3,
body.era1-case-page .case-result .theory{color:#f5c98c!important;text-shadow:0 1px 2px rgba(0,0,0,.45)}

body.era1-level-page .quiz-score,
body.era1-level-page .topic-pill,
body.era1-level-page .metric b,
body.era1-level-page .result-score,
body.era1-level-page .pgame-icon,
body.era1-level-page .pgame-counter,
body.era1-level-page .pgame-sequence li::before,
body.era1-case-page .proof-counter b,
body.era1-case-page .person-code{color:#ffd29a!important}

body.era1-level-page .metric span,
body.era1-case-page .chip,
body.era1-case-page .notebook,
body.era1-case-page .source-note{color:#dfcdb3!important}

body.era1-level-page .answer-choice,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-match-row,
body.era1-level-page .pgame-sequence li,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .pgame-clues,
body.era1-level-page .clue-card,
body.era1-level-page .quiz-feedback,
body.era1-level-page .pgame-note,
body.era1-case-page .location,
body.era1-case-page .enigma-card,
body.era1-case-page .proof-choice,
body.era1-case-page .proof-review,
body.era1-case-page .locked-case,
body.era1-case-page .proof-counter{
  background:rgba(18,12,9,.72)!important;
  border-color:rgba(215,179,123,.28)!important;
}

body.era1-level-page .answer-choice:hover:not(:disabled),
body.era1-level-page .pgame-select:hover,
body.era1-level-page .pgame-scene-item:hover,
body.era1-case-page .location:hover,
body.era1-case-page .enigma-card:hover,
body.era1-case-page .proof-choice:hover{border-color:#efb06c!important;background:rgba(128,71,35,.42)!important}

body.era1-level-page .pgame-select.selected,
body.era1-level-page button.pgame-scene-item.selected,
body.era1-case-page .location.current,
body.era1-case-page .proof-choice.selected{border-color:#efb06c!important;background:rgba(164,72,30,.30)!important}
body.era1-level-page .pgame-sequence li::before{border-color:rgba(255,179,102,.46)!important}

body.era1-level-page .progress-state{color:#ffe0b5!important;background:rgba(0,0,0,.28)!important;border-color:rgba(255,179,102,.28)!important}
body.era1-level-page .progress-state.ok,
body.era1-level-page .unlock,
body.era1-case-page .case-state.ok,
body.era1-case-page .completed-banner{color:#dff0c9!important;border-color:#6f8750!important;background:rgba(72,88,46,.30)!important}
body.era1-level-page .progress-state.locked,
body.era1-level-page .locked-note,
body.era1-case-page .case-state.locked,
body.era1-case-page .locked-case{color:#ffd8ca!important;border-color:#a95b47!important;background:rgba(122,43,31,.34)!important}

body.era1-level-page .answer-choice.correct,
body.era1-level-page .answer-choice.correct *,
body.era1-level-page .quiz-feedback.ok,
body.era1-level-page .quiz-feedback.ok p{color:#dff0c9!important;border-color:#6f8750!important;background:rgba(72,88,46,.26)!important}
body.era1-level-page .answer-choice.wrong,
body.era1-level-page .answer-choice.wrong *,
body.era1-level-page .quiz-feedback.bad,
body.era1-level-page .quiz-feedback.bad p{color:#ffd8ca!important;border-color:#a95b47!important;background:rgba(122,43,31,.26)!important}


/* POINT8 — SCENE / READABILITY REVISION PATCH (2026-09-27) */
body.level-1::after{
  background:
    radial-gradient(circle at 68% 32%,rgba(255,194,118,.22),transparent 20%),
    linear-gradient(90deg,rgba(20,12,7,.36),rgba(20,12,7,.10) 44%,rgba(20,12,7,.38)),
    linear-gradient(180deg,rgba(10,6,4,.14),rgba(10,6,4,.52));
}
body.level-2::after{
  background:
    radial-gradient(circle at 22% 18%,rgba(241,177,110,.14),transparent 18%),
    radial-gradient(circle at 76% 72%,rgba(255,213,148,.10),transparent 18%),
    linear-gradient(90deg,rgba(10,8,6,.48),rgba(10,8,6,.18) 46%,rgba(10,8,6,.48)),
    linear-gradient(180deg,rgba(9,7,5,.22),rgba(9,7,5,.56));
}
body.level-3::after{
  background:
    radial-gradient(circle at 26% 20%,rgba(255,204,138,.16),transparent 20%),
    radial-gradient(circle at 80% 74%,rgba(213,120,57,.12),transparent 22%),
    linear-gradient(90deg,rgba(15,9,5,.40),rgba(15,9,5,.14) 46%,rgba(15,9,5,.38)),
    linear-gradient(180deg,rgba(10,7,5,.16),rgba(10,7,5,.50));
}
body.level-4::after{
  background:
    radial-gradient(circle at 74% 28%,rgba(235,213,155,.14),transparent 18%),
    radial-gradient(circle at 24% 82%,rgba(127,154,121,.12),transparent 22%),
    linear-gradient(90deg,rgba(10,10,8,.44),rgba(10,10,8,.14) 48%,rgba(10,10,8,.42)),
    linear-gradient(180deg,rgba(9,10,8,.14),rgba(9,10,8,.52));
}
body.level-5::after{
  background:
    radial-gradient(circle at 70% 18%,rgba(255,196,121,.20),transparent 22%),
    radial-gradient(circle at 18% 76%,rgba(255,138,82,.10),transparent 18%),
    linear-gradient(90deg,rgba(12,8,6,.40),rgba(12,8,6,.12) 48%,rgba(12,8,6,.38)),
    linear-gradient(180deg,rgba(10,7,5,.12),rgba(10,7,5,.46));
}
body.final-case::after{
  background:
    radial-gradient(circle at 70% 16%,rgba(255,183,104,.14),transparent 18%),
    radial-gradient(circle at 58% 76%,rgba(198,83,38,.14),transparent 22%),
    linear-gradient(90deg,rgba(5,6,8,.44),rgba(5,6,8,.18) 48%,rgba(5,6,8,.44)),
    linear-gradient(180deg,rgba(6,7,10,.18),rgba(4,4,5,.56));
}

body.era1-level-page #dashboard > .card,
body.era1-level-page #quizScreen > .card,
body.era1-level-page #resultScreen > .card,
body.era1-case-page .briefing,
body.era1-case-page #caseContent > section.card,
body.era1-case-page #investigationSection > .card,
body.era1-case-page #reportSection > .card{
  backdrop-filter:none;
  box-shadow:0 24px 64px rgba(0,0,0,.36),inset 0 1px rgba(255,237,208,.22)!important;
}
body.era1-level-page #quizScreen > .card,
body.era1-level-page #resultScreen > .card{
  background:
    linear-gradient(rgba(16,11,8,.66),rgba(16,11,8,.62)),
    linear-gradient(120deg,rgba(244,197,131,.11),rgba(36,21,13,.08) 58%,rgba(244,197,131,.08)),
    url("../assets/era1-stone-clean.jpg") center/cover!important;
  color:#f5e5cb!important;
}
body.era1-level-page #resultScreen > .card{
  position:relative;overflow:hidden;
}
body.level-1 #resultScreen > .card::before,
body.level-2 #resultScreen > .card::before,
body.level-3 #resultScreen > .card::before,
body.level-4 #resultScreen > .card::before,
body.level-5 #resultScreen > .card::before{
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-size:cover;background-position:center;
}
body.level-1 #resultScreen > .card::before{background-image:url("../assets/era1-level1-observation.jpg")}
body.level-2 #resultScreen > .card::before{background-image:url("../assets/era1-level2-cave.jpg")}
body.level-3 #resultScreen > .card::before{background-image:url("../assets/era1-level3-workbench.jpg")}
body.level-4 #resultScreen > .card::before{background-image:url("../assets/era1-level4-river.jpg")}
body.level-5 #resultScreen > .card::before{background-image:url("../assets/era1-level5-reconstruction.jpg")}

body.era1-level-page .result-card,
body.era1-level-page .result-card h2,
body.era1-level-page .result-card p,
body.era1-level-page .result-score,
body.era1-level-page .case-unlocked,
body.era1-level-page .unlock,
body.era1-level-page .locked-note,
body.era1-level-page .hard-rule,
body.era1-level-page .notice,
body.era1-level-page .notice strong,
body.era1-level-page .metric span,
body.era1-level-page .metric b,
body.era1-level-page .source-note,
body.era1-level-page .quiz-count,
body.era1-level-page .quiz-score,
body.era1-level-page .question-text,
body.era1-level-page .topic-pill,
body.era1-level-page .answer-choice,
body.era1-level-page .answer-choice *,
body.era1-level-page .quiz-feedback,
body.era1-level-page .quiz-feedback p,
body.era1-level-page .pgame-note,
body.era1-level-page .pgame-note *,
body.era1-level-page .pgame-match-row span,
body.era1-level-page .pgame-logic label span,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-select small,
body.era1-level-page .pgame-scenes h4,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .pgame-scene-item small,
body.era1-level-page .pgame-clues,
body.era1-level-page .pgame-maze-meta span,
body.era1-level-page .pgame-sequence li,
body.era1-level-page .pgame-sequence li *,
body.era1-level-page .clue-card,
body.era1-level-page .clue-card p,
body.era1-level-page .clue-card span,
body.era1-case-page .briefing,
body.era1-case-page .briefing p,
body.era1-case-page .person-card,
body.era1-case-page .person-card p,
body.era1-case-page .person-code,
body.era1-case-page .location-tab,
body.era1-case-page .location-tab span,
body.era1-case-page .location-head h2,
body.era1-case-page .location-head p,
body.era1-case-page .evidence-card,
body.era1-case-page .evidence-card p,
body.era1-case-page .notebook-item,
body.era1-case-page .notebook-item p,
body.era1-case-page .proof-choice,
body.era1-case-page .proof-choice small,
body.era1-case-page .proof-review,
body.era1-case-page .proof-review p,
body.era1-case-page .case-result,
body.era1-case-page .case-result p,
body.era1-case-page .resolution h3,
body.era1-case-page .resolution p,
body.era1-case-page .completed-banner,
body.era1-case-page .proof-counter,
body.era1-case-page .proof-counter b{color:#f4e3c7!important;text-shadow:0 1px 2px rgba(0,0,0,.42)!important}

body.era1-level-page .metric b,
body.era1-level-page .quiz-score,
body.era1-level-page .result-score,
body.era1-level-page .topic-pill,
body.era1-case-page .proof-counter b,
body.era1-case-page .location-head h2{color:#ffd29a!important}
body.era1-level-page .kicker,
body.era1-case-page .kicker,
body.era1-level-page .clue-card span,
body.era1-level-page .pgame-maze-meta b,
body.era1-level-page .pgame-scenes h4,
body.era1-case-page .person-code{color:#efb06c!important}
body.era1-level-page .question-text{color:#ffe0b5!important;line-height:1.24}
body.era1-level-page .answer-choice,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-match-row,
body.era1-level-page .pgame-sequence li,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .pgame-clues,
body.era1-level-page .clue-card,
body.era1-level-page .pgame-note,
body.era1-level-page .quiz-feedback,
body.era1-case-page .evidence-card,
body.era1-case-page .notebook-item,
body.era1-case-page .proof-choice,
body.era1-case-page .proof-review,
body.era1-case-page .location-tab,
body.era1-case-page .proof-counter{
  background:rgba(17,11,8,.76)!important;border-color:rgba(226,181,118,.26)!important;
}
body.era1-level-page .answer-choice:hover:not(:disabled),
body.era1-level-page .pgame-select:hover,
body.era1-level-page .pgame-scene-item:hover,
body.era1-case-page .location-tab:hover,
body.era1-case-page .proof-choice:hover{background:rgba(102,58,29,.54)!important;border-color:#efb06c!important}
body.era1-level-page .answer-choice.correct,
body.era1-level-page .answer-choice.correct *,
body.era1-level-page .quiz-feedback.ok,
body.era1-level-page .quiz-feedback.ok p,
body.era1-level-page .unlock,
body.era1-level-page .case-unlocked,
body.era1-case-page .completed-banner{color:#e2f0cf!important;background:rgba(50,69,38,.46)!important;border-color:#7c9b63!important}
body.era1-level-page .answer-choice.wrong,
body.era1-level-page .answer-choice.wrong *,
body.era1-level-page .quiz-feedback.bad,
body.era1-level-page .quiz-feedback.bad p,
body.era1-level-page .locked-note,
body.era1-case-page .locked-case{color:#ffd6c8!important;background:rgba(113,42,31,.44)!important;border-color:#b86852!important}
body.era1-level-page .hard-rule{color:#ffe0bf!important;background:rgba(122,48,22,.34)!important;border-color:#de8a57!important}
body.era1-level-page .pgame-sequence button,
body.era1-level-page .pgame-sequence .btn,
body.era1-level-page .pgame-sequence [type="button"]{color:#ffe8c8!important}
body.era1-level-page .pgame-sequence li .pgame-counter{color:#ffd29a!important}
body.era1-level-page .pgame-maze-meta span,
body.era1-level-page .pgame-note{color:#efdbc0!important}
body.level-5 #dashboard > .card,
body.level-5 #resultScreen > .card,
body.final-case .briefing,
body.final-case #caseContent > section.card,
body.final-case #investigationSection > .card,
body.final-case #reportSection > .card{
  background:
    linear-gradient(rgba(14,10,8,.58),rgba(14,10,8,.56)),
    linear-gradient(120deg,rgba(255,203,136,.11),rgba(27,16,11,.08) 58%,rgba(255,150,82,.08)),
    url("../assets/era1-stone-clean.jpg") center/cover!important;
}
body.level-5 #dashboard > .card .notice,
body.level-5 #dashboard > .card .hard-rule,
body.level-5 #dashboard > .card .metric span,
body.level-5 #dashboard > .card .source-note,
body.level-5 #dashboard > .card .locked-note,
body.level-5 #dashboard > .card .unlock,
body.level-5 #dashboard > .card .case-unlocked,
body.level-5 #resultScreen > .card p,
body.level-5 #resultScreen > .card h2,
body.level-5 #resultScreen .case-unlocked{color:#f4e3c7!important}


/* POINT8 — IMMERSIVE VISUAL PASS (2026-09-27)
   Goal: carry the energy of the home page into the play screens, solve remaining
   readability issues, and make success states warmer and more celebratory. */
body.level-1::after,
body.level-2::after,
body.level-3::after,
body.level-4::after,
body.level-5::after{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,188,96,.20),transparent 24%),
    radial-gradient(circle at 52% 80%,rgba(199,84,26,.14),transparent 22%),
    linear-gradient(90deg,rgba(8,5,3,.62),rgba(8,5,3,.26) 50%,rgba(8,5,3,.66)),
    linear-gradient(180deg,rgba(8,5,3,.30),rgba(8,5,3,.74));
}
body.final-case::after{
  background:
    radial-gradient(circle at 52% 18%,rgba(255,191,105,.18),transparent 24%),
    radial-gradient(circle at 50% 82%,rgba(213,91,34,.18),transparent 20%),
    linear-gradient(90deg,rgba(5,4,4,.58),rgba(5,4,4,.24) 50%,rgba(5,4,4,.60)),
    linear-gradient(180deg,rgba(5,6,8,.28),rgba(5,4,5,.76));
}

body.level-1 #dashboard > .card,
body.level-1 #quizScreen > .card,
body.level-1 #resultScreen > .card{
  background:
    linear-gradient(rgba(12,8,6,.54),rgba(12,8,6,.58)),
    linear-gradient(125deg,rgba(255,209,141,.14),rgba(30,18,12,.08) 55%,rgba(255,157,95,.10)),
    url("../assets/era1-level1-observation.jpg") center/cover!important;
}
body.level-2 #dashboard > .card,
body.level-2 #quizScreen > .card,
body.level-2 #resultScreen > .card{
  background:
    linear-gradient(rgba(10,8,7,.56),rgba(10,8,7,.60)),
    linear-gradient(125deg,rgba(255,201,136,.14),rgba(30,18,12,.08) 55%,rgba(224,121,70,.10)),
    url("../assets/era1-level2-cave.jpg") center/cover!important;
}
body.level-3 #dashboard > .card,
body.level-3 #quizScreen > .card,
body.level-3 #resultScreen > .card{
  background:
    linear-gradient(rgba(10,8,7,.56),rgba(10,8,7,.60)),
    linear-gradient(125deg,rgba(255,201,136,.14),rgba(30,18,12,.08) 55%,rgba(224,121,70,.10)),
    url("../assets/era1-level3-workbench.jpg") center/cover!important;
}
body.level-4 #dashboard > .card,
body.level-4 #quizScreen > .card,
body.level-4 #resultScreen > .card{
  background:
    linear-gradient(rgba(10,8,7,.54),rgba(10,8,7,.58)),
    linear-gradient(125deg,rgba(255,201,136,.14),rgba(30,18,12,.08) 55%,rgba(224,121,70,.10)),
    url("../assets/era1-level4-river.jpg") center/cover!important;
}
body.level-5 #dashboard > .card,
body.level-5 #quizScreen > .card,
body.level-5 #resultScreen > .card{
  background:
    linear-gradient(rgba(10,8,7,.52),rgba(10,8,7,.58)),
    linear-gradient(125deg,rgba(255,201,136,.14),rgba(30,18,12,.08) 55%,rgba(224,121,70,.10)),
    url("../assets/era1-level5-reconstruction.jpg") center/cover!important;
}
body.final-case .briefing,
body.final-case #caseContent > section.card,
body.final-case #investigationSection > .card,
body.final-case #reportSection > .card{
  background:
    linear-gradient(rgba(10,8,7,.56),rgba(10,8,7,.62)),
    linear-gradient(125deg,rgba(255,208,146,.12),rgba(31,20,13,.08) 58%,rgba(255,159,95,.10)),
    url("../assets/era1-finalcase-night.jpg") center/cover!important;
}

body.era1-level-page .question-text,
body.era1-level-page .quiz-score,
body.era1-level-page .quiz-count,
body.era1-level-page .card p,
body.era1-level-page .notice,
body.era1-level-page .notice strong,
body.era1-level-page .source-note,
body.era1-level-page .pgame-note,
body.era1-level-page .pgame-match-row span,
body.era1-level-page .pgame-logic label span,
body.era1-level-page .pgame-select small,
body.era1-level-page .pgame-scene-item small,
body.era1-level-page .pgame-icon,
body.era1-level-page .pgame-counter,
body.era1-level-page .pgame-clues,
body.era1-level-page .pgame-scenes h4,
body.era1-level-page .pgame-maze-meta span,
body.era1-level-page .metric span,
body.era1-case-page .case-metric span,
body.era1-case-page .briefing p,
body.era1-case-page .person-card p,
body.era1-case-page .person-code,
body.era1-case-page .location-tab span,
body.era1-case-page .notebook-item p,
body.era1-case-page .evidence-card p,
body.era1-case-page .case-result p,
body.era1-case-page .proof-review small,
body.era1-case-page .report-gate p,
body.era1-case-page .report-field label{
  color:#f6e8d2!important;
}
body.era1-level-page .topic-pill,
body.era1-level-page .progress-state,
body.era1-case-page .case-state,
body.era1-case-page .proof-counter,
body.era1-case-page .location-tab strong,
body.era1-case-page .evidence-id,
body.era1-case-page .notebook-item span,
body.era1-case-page .proof-review span{
  color:#ffd29c!important;
}
body.era1-level-page .answer-choice,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-match-row,
body.era1-level-page .pgame-sequence li,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .clue-card,
body.era1-case-page .person-card,
body.era1-case-page .evidence-card,
body.era1-case-page .notebook-item,
body.era1-case-page .proof-choice,
body.era1-case-page .report-field select{
  color:#fff3df!important;
  background:rgba(19,11,8,.68)!important;
  border-color:rgba(233,175,110,.42)!important;
}
body.era1-level-page .answer-choice:hover:not(:disabled),
body.era1-level-page .pgame-select:hover,
body.era1-level-page .pgame-scene-item:hover,
body.era1-case-page .proof-choice:hover,
body.era1-case-page .location-tab:hover{
  background:rgba(69,35,18,.82)!important;
  border-color:#f0a767!important;
}
body.era1-level-page .answer-choice.correct,
body.era1-case-page .proof-review.decisive{
  color:#eff8db!important;
  background:rgba(47,73,31,.72)!important;
  border-color:#80af68!important;
}
body.era1-level-page .answer-choice.wrong{
  color:#ffe2da!important;
  background:rgba(115,38,31,.72)!important;
  border-color:#d86c5f!important;
}
body.era1-level-page .quiz-feedback,
body.era1-level-page .pgame-note,
body.era1-case-page .report-gate,
body.era1-case-page .resolution,
body.era1-case-page .era-complete{
  color:#fff0d7!important;
  background:rgba(15,10,8,.72)!important;
  border-color:rgba(236,175,110,.38)!important;
}
body.era1-level-page .quiz-feedback.ok,
body.era1-case-page .case-state.ok,
body.era1-case-page .completed-banner,
body.era1-case-page .proof-review.support{
  color:#eff7de!important;
  background:rgba(40,66,28,.72)!important;
  border-color:#7ca867!important;
}
body.era1-level-page .quiz-feedback.bad,
body.era1-case-page .case-state.locked,
body.era1-case-page .proof-review.secondary{
  color:#ffe2da!important;
  background:rgba(115,38,31,.72)!important;
  border-color:#d86c5f!important;
}
body.level-5 #dashboard .hard-rule,
body.level-5 #dashboard .hard-rule *,
body.level-5 #dashboard .locked-note,
body.level-5 #dashboard .locked-note *,
body.level-5 #dashboard .source-note,
body.level-5 #dashboard .source-note *{
  color:#fff0d7!important;
}
body.era1-level-page .hard-rule{background:rgba(107,43,20,.48)!important;border-color:#df8a57!important}
body.final-case .briefing h2,
body.final-case .briefing strong,
body.final-case .resolution h3,
body.final-case #resultCard h2,
body.final-case .era-complete strong{
  color:#fff2dc!important;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
}
body.final-case .briefing h2{
  color:#ffb56d!important;
  letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.60),0 0 30px rgba(197,85,36,.22);
}
body.final-case .briefing .kicker,
body.final-case .case-result .kicker,
body.final-case .resolution .kicker,
body.level-5 #resultScreen .kicker{color:#ffc98a!important}
body.final-case #resultCard,
body.final-case #resultCard.success,
body.final-case #resultCard.failed{
  position:relative;
  overflow:hidden;
  border-color:rgba(247,186,117,.42)!important;
}
body.final-case #resultCard::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,208,140,.22),transparent 24%),
    radial-gradient(circle at 50% 78%,rgba(214,88,31,.18),transparent 18%);
  mix-blend-mode:screen;
}
body.final-case #resultCard.success{
  background:
    linear-gradient(rgba(12,8,6,.38),rgba(12,8,6,.46)),
    linear-gradient(180deg,rgba(255,221,152,.10),rgba(255,145,82,.08)),
    url("../assets/era1-home-bg-approved.jpg") center/cover!important;
  box-shadow:0 24px 72px rgba(0,0,0,.56),0 0 0 1px rgba(255,214,161,.18),0 0 36px rgba(226,132,54,.18)!important;
}
body.final-case #resultCard.failed{
  background:
    linear-gradient(rgba(12,8,6,.52),rgba(12,8,6,.58)),
    linear-gradient(180deg,rgba(255,186,136,.08),rgba(189,86,49,.05)),
    url("../assets/era1-finalcase-night.jpg") center/cover!important;
}
body.final-case #resultCard.success #resultTitle{font-size:clamp(42px,4.8vw,68px)!important;text-align:center}
body.final-case #resultCard.success .score-pair{justify-content:center;gap:28px}
body.final-case #resultCard.success .big-score{
  background:rgba(19,11,8,.54)!important;
  border:1px solid rgba(245,183,110,.40)!important;
  box-shadow:inset 0 1px rgba(255,236,210,.16),0 0 24px rgba(216,104,41,.08);
}
body.final-case #resultCard.success .big-score b,
body.level-5 #resultScreen .result-score{color:#ffe8bd!important}
body.final-case #resultCard.success .era-complete{
  background:linear-gradient(135deg,rgba(44,70,27,.78),rgba(18,31,15,.78))!important;
  border-color:#86b06b!important;
  box-shadow:0 0 24px rgba(85,128,65,.16);
}
body.level-5 #resultScreen > .card{
  box-shadow:0 24px 72px rgba(0,0,0,.54),0 0 24px rgba(214,103,46,.14)!important;
}
body.level-5 #resultScreen .case-unlocked{
  background:linear-gradient(135deg,rgba(44,70,27,.72),rgba(18,31,15,.76))!important;
  border:1px solid #86b06b!important;
  color:#eff7de!important;
}
body.level-5 #resultScreen h2,
body.level-5 #resultScreen p,
body.level-5 #resultScreen .case-unlocked,
body.level-5 #resultScreen .btn{position:relative;z-index:1}


/* POINT8 — CINEMATIC REVAMP PATCH (2026-09-27)
   Goal: fully readable light text + richer scenic pages inspired by the home screen. */
body.era1-level-page::after,
body.era1-case-page::after{
  background:
    radial-gradient(circle at 50% 84%,rgba(255,131,44,.18),transparent 20%),
    radial-gradient(circle at 52% 28%,rgba(255,216,140,.10),transparent 24%),
    linear-gradient(90deg,rgba(6,4,3,.58),rgba(6,4,3,.18) 48%,rgba(6,4,3,.56)),
    linear-gradient(180deg,rgba(6,4,3,.10),rgba(6,4,3,.56));
}
body.level-1.era1-level-page::after{background:
    radial-gradient(circle at 50% 72%,rgba(255,168,72,.20),transparent 24%),
    radial-gradient(circle at 48% 26%,rgba(255,228,162,.14),transparent 24%),
    linear-gradient(90deg,rgba(20,11,8,.52),rgba(20,11,8,.14) 48%,rgba(20,11,8,.50)),
    linear-gradient(180deg,rgba(10,8,6,.06),rgba(10,8,6,.42));}
body.level-2.era1-level-page::after{background:
    radial-gradient(circle at 16% 24%,rgba(255,180,86,.08),transparent 18%),
    radial-gradient(circle at 78% 70%,rgba(210,120,63,.10),transparent 24%),
    linear-gradient(90deg,rgba(8,6,5,.62),rgba(8,6,5,.20) 48%,rgba(8,6,5,.58)),
    linear-gradient(180deg,rgba(7,5,4,.16),rgba(7,5,4,.62));}
body.level-3.era1-level-page::after{background:
    radial-gradient(circle at 60% 24%,rgba(255,202,125,.10),transparent 18%),
    radial-gradient(circle at 34% 78%,rgba(194,86,39,.12),transparent 22%),
    linear-gradient(90deg,rgba(8,6,5,.56),rgba(8,6,5,.18) 50%,rgba(8,6,5,.54)),
    linear-gradient(180deg,rgba(7,5,4,.10),rgba(7,5,4,.56));}
body.level-4.era1-level-page::after{background:
    radial-gradient(circle at 58% 22%,rgba(255,220,150,.12),transparent 20%),
    radial-gradient(circle at 20% 72%,rgba(87,141,188,.10),transparent 22%),
    linear-gradient(90deg,rgba(6,5,5,.52),rgba(6,5,5,.16) 48%,rgba(6,5,5,.50)),
    linear-gradient(180deg,rgba(7,6,5,.08),rgba(7,6,5,.48));}
body.level-5.era1-level-page::after,
body.final-case.era1-case-page::after{background:
    radial-gradient(circle at 52% 84%,rgba(235,112,48,.22),transparent 18%),
    radial-gradient(circle at 48% 18%,rgba(255,214,136,.12),transparent 18%),
    linear-gradient(90deg,rgba(6,4,3,.54),rgba(6,4,3,.16) 48%,rgba(6,4,3,.52)),
    linear-gradient(180deg,rgba(6,4,3,.08),rgba(6,4,3,.52));}

body.era1-level-page #dashboard > .card,
body.era1-level-page #quizScreen > .card,
body.era1-level-page #resultScreen > .card,
body.era1-case-page .briefing,
body.era1-case-page #caseContent > section.card,
body.era1-case-page #investigationSection > .card,
body.era1-case-page #reportSection > .card,
body.era1-case-page #resultCard{
  background-image:
    linear-gradient(rgba(12,8,6,.58),rgba(12,8,6,.60)),
    linear-gradient(118deg,rgba(255,208,144,.10),rgba(31,18,11,.04) 56%,rgba(247,127,58,.09)),
    var(--page-scene),
    url("../assets/era1-stone-clean.jpg") !important;
  background-size:cover,cover,cover,cover !important;
  background-position:center,center,var(--page-scene-position),center !important;
  background-repeat:no-repeat !important;
  color:#fff1de !important;
  border-color:rgba(232,178,114,.34)!important;
  box-shadow:0 26px 62px rgba(0,0,0,.46),0 0 34px rgba(232,120,51,.10),inset 0 1px rgba(255,233,201,.18),inset 0 -18px 34px rgba(0,0,0,.16)!important;
}
body.era1-level-page .question-text,
body.era1-level-page .quiz-count,
body.era1-level-page .quiz-score,
body.era1-level-page .card h2,
body.era1-level-page .card p,
body.era1-level-page .notice,
body.era1-level-page .notice strong,
body.era1-level-page .progress-state,
body.era1-level-page .topic-pill,
body.era1-level-page .source-note,
body.era1-level-page .pgame-note,
body.era1-level-page .pgame-match-row span,
body.era1-level-page .pgame-logic label span,
body.era1-level-page .pgame-select small,
body.era1-level-page .pgame-scene-item small,
body.era1-level-page .pgame-clues,
body.era1-level-page .pgame-scenes h4,
body.era1-level-page .pgame-maze-meta span,
body.era1-level-page .metric span,
body.era1-level-page .hard-rule,
body.era1-level-page .locked-note,
body.era1-level-page .unlock,
body.era1-level-page .case-unlocked,
body.era1-level-page #resultScreen > .card p,
body.era1-level-page #resultScreen > .card h2,
body.era1-level-page #resultScreen .result-score{color:#fff0da!important;text-shadow:0 2px 12px rgba(0,0,0,.45)}
body.era1-level-page .kicker,
body.era1-case-page .kicker,
body.era1-level-page .metric b,
body.era1-case-page .case-metric b,
body.era1-case-page .big-score b{color:#ffd59a!important}
body.era1-level-page .answer-choice,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-match-row,
body.era1-level-page .pgame-sequence li,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .pgame-clues,
body.era1-level-page .clue-card,
body.era1-level-page .quiz-feedback,
body.era1-level-page .pgame-note,
body.era1-level-page .pgame-order-controls button{
  color:#fff0da!important;
  background:rgba(12,8,6,.64)!important;
  border-color:rgba(232,178,114,.28)!important;
  box-shadow:inset 0 1px rgba(255,231,200,.10),0 8px 20px rgba(0,0,0,.12)!important;
}
body.era1-level-page .answer-choice:hover:not(:disabled),
body.era1-level-page .pgame-select:hover,
body.era1-level-page .pgame-scene-item:hover,
body.era1-level-page .pgame-order-controls button:hover{background:rgba(44,25,14,.82)!important;border-color:#e3a366!important}
body.era1-level-page .answer-choice.correct,
body.era1-level-page .quiz-feedback.ok{color:#ebffe0!important;background:rgba(44,74,33,.78)!important;border-color:#78b56b!important}
body.era1-level-page .answer-choice.wrong,
body.era1-level-page .quiz-feedback.bad{color:#ffe4de!important;background:rgba(104,36,31,.78)!important;border-color:#de7c72!important}
body.era1-level-page .topic-pill,
body.era1-level-page .progress-state,
body.era1-level-page .locked-note,
body.era1-level-page .unlock,
body.era1-level-page .case-unlocked,
body.era1-level-page .hard-rule{background:rgba(12,8,6,.58)!important;border-color:rgba(232,178,114,.24)!important}
body.level-5 #dashboard > .card,
body.level-5 #resultScreen > .card{background-image:
    linear-gradient(rgba(10,7,5,.54),rgba(10,7,5,.58)),
    linear-gradient(118deg,rgba(255,208,144,.11),rgba(31,18,11,.04) 56%,rgba(247,127,58,.10)),
    url("../assets/era1-level5-reconstruction.jpg"),
    url("../assets/era1-stone-clean.jpg") !important;}

body.final-case .briefing h1,
body.final-case .briefing h2,
body.final-case #locationTitle,
body.final-case .person-card h3,
body.final-case .evidence-card h3,
body.final-case .notebook-item strong,
body.final-case .report-field label,
body.final-case #resultTitle,
body.final-case .case-result h3,
body.final-case .case-result strong,
body.final-case .location-tab strong,
body.final-case .proof-choice strong{color:#fff2df!important;text-shadow:0 2px 12px rgba(0,0,0,.45)}
body.final-case .briefing p,
body.final-case .person-card p,
body.final-case .person-code,
body.final-case .case-state,
body.final-case .location-tab span,
body.final-case .location-description,
body.final-case .evidence-card p,
body.final-case .notebook-item p,
body.final-case .notebook-item span,
body.final-case .proof-choice small,
body.final-case .proof-counter,
body.final-case .report-gate,
body.final-case .report-gate p,
body.final-case .case-result p,
body.final-case #historicalNote,
body.final-case .completed-banner,
body.final-case .case-metric span,
body.final-case .sources{color:#fff0da!important}
body.final-case .case-state,
body.final-case .proof-counter,
body.final-case .report-gate,
body.final-case .location-tab,
body.final-case .proof-choice,
body.final-case .notebook-item,
body.final-case .evidence-card,
body.final-case .person-card{background:rgba(12,8,6,.60)!important;border-color:rgba(232,178,114,.28)!important}
body.final-case #resultCard.success{
  background-image:
    linear-gradient(rgba(13,8,5,.26),rgba(13,8,5,.38)),
    radial-gradient(circle at 50% 20%,rgba(255,230,158,.18),transparent 24%),
    url("../assets/era1-home-bg-approved.jpg"),
    url("../assets/era1-stone-clean.jpg") !important;
  background-size:cover,cover,cover,cover !important;
  background-position:center,center,center 56%,center !important;
  box-shadow:0 30px 82px rgba(0,0,0,.52),0 0 48px rgba(242,135,55,.18),inset 0 1px rgba(255,239,214,.24)!important;
}
body.final-case #resultCard.success::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle at 50% 16%,rgba(255,247,200,.14),transparent 18%),
    radial-gradient(circle at 18% 16%,rgba(255,157,94,.10),transparent 12%),
    radial-gradient(circle at 82% 16%,rgba(255,157,94,.08),transparent 12%);
}
body.final-case #resultCard.success #resultTitle{font-size:clamp(40px,4.3vw,58px)!important;letter-spacing:.02em;color:#fff8ed!important}
body.final-case #resultCard.success .big-score b{font-size:clamp(44px,4.8vw,76px)!important;color:#ffd79d!important}
body.final-case #resultCard.success .era-complete{
  background:linear-gradient(120deg,rgba(42,65,28,.86),rgba(22,38,16,.90))!important;
  border-color:#90bd6f!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px rgba(237,255,215,.16)!important;
}
body.final-case #resultCard.success .resolution{
  background:linear-gradient(120deg,rgba(56,40,20,.82),rgba(25,19,14,.88))!important;
  border-color:#d2a96b!important;
}
body.final-case #resultCard.success .btn.primary,
body.level-5 #resultScreen .btn.primary{
  background:linear-gradient(180deg,#d48a4e,#a85d2d)!important;
  color:#fff8eb!important;
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 18px rgba(221,132,63,.22)!important;
}
body.final-case .briefing h1{font-size:clamp(46px,5.8vw,94px)!important;color:#ffe6bd!important;letter-spacing:.02em}
body.final-case .briefing .case-state.ok{color:#eaffdd!important;background:rgba(42,66,30,.78)!important;border-color:#8fbc70!important}
body.final-case .briefing .case-state.locked{color:#ffe1dd!important;background:rgba(104,36,31,.76)!important;border-color:#de7c72!important}


/* Point 8 — Final Case three-state artwork update */
body.final-case,
body.final-case.case-visual-investigation{
  --page-scene:url("../assets/case1-artwork-default.png");
  background-image:url("../assets/case1-artwork-default.png");
  --page-scene-position:center 56%;
  --page-accent:#c87432;
  --page-accent-soft:#f3c37e;
  --page-vignette:rgba(8,6,4,.56);
}
body.final-case::after,
body.final-case.case-visual-investigation::after{
  background:
    radial-gradient(circle at 69% 18%,rgba(255,203,120,.18),transparent 20%),
    linear-gradient(90deg,rgba(10,7,5,.46),rgba(10,7,5,.16) 49%,rgba(10,7,5,.52)),
    linear-gradient(180deg,rgba(11,8,5,.14),rgba(11,8,5,.56));
}
body.final-case.case-visual-success{
  --page-scene:url("../assets/case1-artwork-victory.png");
  background-image:url("../assets/case1-artwork-victory.png");
  --page-scene-position:center 54%;
  --page-accent:#e27b2a;
  --page-accent-soft:#ffd483;
  --page-vignette:rgba(7,5,3,.44);
}
body.final-case.case-visual-success::after{
  background:
    radial-gradient(circle at 78% 22%,rgba(255,218,140,.24),transparent 18%),
    linear-gradient(90deg,rgba(9,6,4,.34),rgba(9,6,4,.10) 52%,rgba(9,6,4,.40)),
    linear-gradient(180deg,rgba(10,7,4,.08),rgba(10,7,4,.42));
}
body.final-case.case-visual-failure{
  --page-scene:url("../assets/case1-artwork-defeat.png");
  background-image:url("../assets/case1-artwork-defeat.png");
  --page-scene-position:center 58%;
  --page-accent:#c65326;
  --page-accent-soft:#f0aa61;
  --page-vignette:rgba(4,5,7,.82);
}
body.final-case.case-visual-failure::after{
  background:
    radial-gradient(circle at 43% 77%,rgba(190,72,28,.13),transparent 24%),
    linear-gradient(90deg,rgba(4,5,7,.72),rgba(4,5,7,.34) 48%,rgba(4,5,7,.75)),
    linear-gradient(180deg,rgba(5,7,10,.42),rgba(4,4,5,.84));
}
body.final-case.case-visual-success .case-result{
  box-shadow:0 24px 64px rgba(0,0,0,.46),0 0 36px rgba(226,123,42,.18),inset 0 1px rgba(255,245,220,.45),inset 0 -8px 20px rgba(79,39,17,.10);
}
body.final-case.case-visual-failure .case-result{
  box-shadow:0 24px 64px rgba(0,0,0,.58),0 0 24px rgba(92,36,27,.20),inset 0 1px rgba(255,245,220,.32),inset 0 -8px 20px rgba(46,24,18,.16);
}


/* Point 8 — Final Case readability pass inspired by Home panels
   Goal: bring final-case boxes closer to the warm filled cards used on Home. */
body.final-case{
  --home-card-fill:
    linear-gradient(90deg,rgba(17,10,6,.74),rgba(64,38,23,.54) 50%,rgba(17,10,6,.74)),
    url("../assets/era1-leather-clean.jpg") center/cover;
  --home-card-fill-soft:
    linear-gradient(rgba(17,10,6,.60),rgba(17,10,6,.50)),
    linear-gradient(rgba(250,221,173,.14),rgba(98,52,24,.08)),
    url("../assets/era1-leather-clean.jpg") center/cover;
  --home-card-border:rgba(232,177,105,.30);
  --home-card-border-strong:rgba(232,177,105,.42);
  --home-card-text:#fff0d8;
  --home-card-muted:#e6c59e;
  --home-card-accent:#efb06c;
  --home-card-shadow:0 16px 34px rgba(0,0,0,.40), inset 0 1px rgba(255,247,218,.22), inset 0 -5px 14px rgba(84,44,20,.12);
}

body.final-case .briefing{
  background:var(--home-card-fill-soft)!important;
  border:1px solid var(--home-card-border-strong)!important;
  border-radius:24px!important;
  box-shadow:0 22px 46px rgba(0,0,0,.34), inset 0 1px rgba(255,247,218,.28), inset 0 -8px 18px rgba(84,44,20,.14)!important;
}
body.final-case .briefing .kicker,
body.final-case .report-gate strong,
body.final-case .evidence-id,
body.final-case .notebook-item span,
body.final-case .proof-choice span,
body.final-case .person-code,
body.final-case .report-field label,
body.final-case .proof-counter b,
body.final-case .case-metric b,
body.final-case .big-score b{
  color:var(--home-card-accent)!important;
}
body.final-case .briefing h1,
body.final-case .briefing p,
body.final-case .briefing strong,
body.final-case .location-tab strong,
body.final-case .location-head h2,
body.final-case .location-head p,
body.final-case .evidence-card,
body.final-case .evidence-card p,
body.final-case .notebook-item,
body.final-case .notebook-item p,
body.final-case .proof-choice,
body.final-case .proof-choice small,
body.final-case .proof-review,
body.final-case .proof-review span,
body.final-case .proof-review strong,
body.final-case .case-metric span,
body.final-case .person-card h3,
body.final-case .person-card p,
body.final-case .proof-counter,
body.final-case .big-score span,
body.final-case .case-result p,
body.final-case .sources,
body.final-case .sources a{
  color:var(--home-card-text)!important;
}
body.final-case .case-metric span,
body.final-case .location-tab span,
body.final-case .notebook-item p,
body.final-case .proof-choice small,
body.final-case .proof-review span,
body.final-case .sources,
body.final-case .sources a{
  color:var(--home-card-muted)!important;
}

body.final-case #caseContent > section.card,
body.final-case #investigationSection > .card,
body.final-case #reportSection > .card,
body.final-case .person-card,
body.final-case .case-metric,
body.final-case .location-tab,
body.final-case .evidence-card,
body.final-case .notebook-item,
body.final-case .proof-choice,
body.final-case .proof-review,
body.final-case .proof-counter,
body.final-case .big-score,
body.final-case .case-result,
body.final-case .completed-banner,
body.final-case .locked-case,
body.final-case .report-gate{
  background:var(--home-card-fill)!important;
  border:1px solid var(--home-card-border)!important;
  box-shadow:var(--home-card-shadow)!important;
  text-shadow:0 2px 8px rgba(0,0,0,.60);
}

body.final-case #caseContent > section.card,
body.final-case #investigationSection > .card,
body.final-case #reportSection > .card,
body.final-case .case-result{
  border-radius:24px!important;
}
body.final-case .case-metric,
body.final-case .location-tab,
body.final-case .evidence-card,
body.final-case .notebook-item,
body.final-case .proof-choice,
body.final-case .proof-review,
body.final-case .proof-counter,
body.final-case .big-score,
body.final-case .person-card,
body.final-case .report-gate{
  border-radius:18px!important;
}
body.final-case .location-tab{
  min-height:96px;
}
body.final-case .location-tab.active,
body.final-case .proof-choice.selected,
body.final-case .evidence-card.sealed:hover,
body.final-case .proof-choice:hover{
  background:
    linear-gradient(90deg,rgba(38,22,13,.84),rgba(90,53,31,.62) 50%,rgba(38,22,13,.84)),
    url("../assets/era1-leather-clean.jpg") center/cover!important;
  border-color:var(--home-card-border-strong)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.44), 0 0 0 1px rgba(239,176,108,.15), inset 0 1px rgba(255,247,218,.26)!important;
}
body.final-case .evidence-card.revealed{
  border-color:rgba(232,177,105,.36)!important;
}
body.final-case .report-field select{
  background:var(--home-card-fill)!important;
  color:var(--home-card-text)!important;
  border:1px solid var(--home-card-border)!important;
  box-shadow:var(--home-card-shadow)!important;
}
body.final-case .report-field select option{background:#23160f;color:#fff0d8}
body.final-case .notice{
  background:rgba(239,176,108,.10)!important;
  border-left:4px solid var(--home-card-accent)!important;
  color:#f3ddbb!important;
}
body.final-case .resolution{
  background:
    linear-gradient(90deg,rgba(17,10,6,.54),rgba(55,71,35,.28) 50%,rgba(17,10,6,.54)),
    url("../assets/era1-leather-clean.jpg") center/cover!important;
  border:1px solid rgba(168,199,120,.42)!important;
}
body.final-case .resolution h3{color:#d8efbb!important}
body.final-case .resolution p{color:#f1e3c9!important}
body.final-case .era-complete{
  background:
    linear-gradient(90deg,rgba(17,10,6,.72),rgba(90,53,31,.50) 50%,rgba(17,10,6,.72)),
    url("../assets/era1-leather-clean.jpg") center/cover!important;
  border:1px solid var(--home-card-border-strong)!important;
}
body.final-case .era-complete strong,
body.final-case .era-complete p,
body.final-case .era-complete .kicker{color:#fff0d8!important}
body.final-case .case-result.success{border-color:rgba(168,199,120,.48)!important}
body.final-case .case-result.failed{border-color:rgba(198,83,38,.48)!important}
body.final-case .completed-banner strong,
body.final-case .locked-case strong{color:#fff0d8!important}
body.final-case .completed-banner,
body.final-case .locked-case,
body.final-case .completed-banner span,
body.final-case .locked-case p{color:var(--home-card-muted)!important}


/* Point 8.2 — Final Case readability pass using Home-style panels */
body.final-case{
  --case-home-panel-bg:linear-gradient(90deg,rgba(17,10,6,.82),rgba(64,38,23,.56) 50%,rgba(17,10,6,.82)),url("../assets/era1-leather-clean.jpg") center/cover;
  --case-home-panel-border:rgba(66,33,16,.76);
  --case-home-panel-shadow:0 16px 34px rgba(0,0,0,.42),inset 0 1px rgba(255,247,218,.24),inset 0 -5px 14px rgba(84,44,20,.14);
  --case-home-copy:#fff0d8;
  --case-home-copy-soft:#e6c59e;
  --case-home-accent:#efb06c;
}
body.final-case .briefing,
body.final-case #caseContent > section.card,
body.final-case #investigationSection > .card,
body.final-case #reportSection > .card,
body.final-case .case-result,
body.final-case .locked-case,
body.final-case .completed-banner{
  background:var(--case-home-panel-bg)!important;
  border:1px solid var(--case-home-panel-border)!important;
  box-shadow:var(--case-home-panel-shadow)!important;
  color:var(--case-home-copy)!important;
}
body.final-case .case-metric,
body.final-case .person-card,
body.final-case .location-tab,
body.final-case .evidence-card,
body.final-case .notebook-item,
body.final-case .proof-choice,
body.final-case .proof-review,
body.final-case .big-score,
body.final-case .proof-counter,
body.final-case .report-field select{
  background:var(--case-home-panel-bg)!important;
  border:1px solid var(--case-home-panel-border)!important;
  box-shadow:var(--case-home-panel-shadow)!important;
  color:var(--case-home-copy)!important;
}
body.final-case .briefing::before,
body.final-case #caseContent > section.card::before,
body.final-case #investigationSection > .card::before,
body.final-case #reportSection > .card::before,
body.final-case .case-result::before,
body.final-case .locked-case::before,
body.final-case .completed-banner::before,
body.final-case .case-metric::before,
body.final-case .person-card::before,
body.final-case .location-tab::before,
body.final-case .evidence-card::before,
body.final-case .notebook-item::before,
body.final-case .proof-choice::before,
body.final-case .proof-review::before,
body.final-case .big-score::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px rgba(255,247,218,.08), inset 0 0 0 1px rgba(255,193,122,.04);
}
body.final-case .case-metric,
body.final-case .person-card,
body.final-case .location-tab,
body.final-case .evidence-card,
body.final-case .notebook-item,
body.final-case .proof-choice,
body.final-case .proof-review,
body.final-case .big-score,
body.final-case .locked-case,
body.final-case .completed-banner{
  position:relative;
  overflow:hidden;
}
body.final-case .briefing h1,
body.final-case #caseContent > section.card h2,
body.final-case #investigationSection > .card h2,
body.final-case #reportSection > .card h2,
body.final-case .person-card h3,
body.final-case .location-head h2,
body.final-case .evidence-card h3,
body.final-case .case-result h2,
body.final-case .resolution h3,
body.final-case .era-complete strong{
  color:#fff1dc!important;
  text-shadow:0 2px 10px rgba(0,0,0,.55)!important;
}
body.final-case .briefing p,
body.final-case #caseContent > section.card p,
body.final-case #investigationSection > .card p,
body.final-case #reportSection > .card p,
body.final-case .person-card p,
body.final-case .evidence-card p,
body.final-case .notebook-item p,
body.final-case .proof-choice small,
body.final-case .case-result p,
body.final-case .report-gate p,
body.final-case .location-head p,
body.final-case .sources,
body.final-case .proof-review span,
body.final-case .big-score span,
body.final-case .case-metric span{
  color:var(--case-home-copy-soft)!important;
}
body.final-case .kicker,
body.final-case .briefing strong,
body.final-case .person-code,
body.final-case .evidence-id,
body.final-case .notebook-item span,
body.final-case .proof-choice span,
body.final-case .report-field label,
body.final-case .proof-counter b,
body.final-case .case-metric b,
body.final-case .big-score b,
body.final-case .sources a{
  color:var(--case-home-accent)!important;
}
body.final-case .proof-counter span,
body.final-case .report-gate strong,
body.final-case .proof-review strong,
body.final-case .location-tab strong,
body.final-case .case-state{
  color:var(--case-home-copy)!important;
}
body.final-case .notice,
body.final-case .report-gate{
  background:linear-gradient(90deg,rgba(17,10,6,.70),rgba(64,38,23,.48) 50%,rgba(17,10,6,.70)),url("../assets/era1-leather-clean.jpg") center/cover!important;
  border-color:rgba(102,53,27,.78)!important;
  color:var(--case-home-copy-soft)!important;
  box-shadow:var(--case-home-panel-shadow)!important;
}
body.final-case .location-tab.active,
body.final-case .proof-choice.selected,
body.final-case .proof-review.decisive,
body.final-case .proof-review.support{
  border-color:rgba(232,177,105,.72)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.48),0 0 0 1px rgba(132,57,24,.34),0 0 22px rgba(226,104,43,.15)!important;
}
body.final-case .location-tab:hover,
body.final-case .evidence-card.sealed:hover,
body.final-case .proof-choice:hover{
  filter:brightness(1.05) saturate(1.02);
}
body.final-case .report-field select{
  min-height:52px;
  border-radius:12px!important;
}
body.final-case .report-field select:focus-visible,
body.final-case .location-tab:focus-visible,
body.final-case .evidence-card:focus-visible,
body.final-case .proof-choice:focus-visible{
  outline:3px solid rgba(239,176,108,.85)!important;
  outline-offset:2px!important;
}
body.final-case .resolution{
  background:linear-gradient(90deg,rgba(17,10,6,.78),rgba(47,58,26,.42) 54%,rgba(17,10,6,.78)),url("../assets/era1-leather-clean.jpg") center/cover!important;
  border-color:rgba(111,129,74,.72)!important;
}
body.final-case .resolution p{color:#dce7c2!important}
body.final-case .era-complete{
  background:linear-gradient(90deg,rgba(17,10,6,.80),rgba(84,56,26,.56) 50%,rgba(17,10,6,.80)),url("../assets/era1-leather-clean.jpg") center/cover!important;
  border-color:rgba(167,117,67,.84)!important;
}
body.final-case .locked-case strong,
body.final-case .completed-banner strong{color:#fff1dc!important}
body.final-case .locked-case p,
body.final-case .completed-banner span{color:var(--case-home-copy-soft)!important}


body.final-case .briefing,
body.final-case #caseContent > section.card,
body.final-case #investigationSection > .card,
body.final-case #reportSection > .card,
body.final-case .case-result,
body.final-case .locked-case,
body.final-case .completed-banner{
  position:relative;
  overflow:hidden;
}


/* Point 8.3 — Level 1–5 result screens aligned to the Home visual language */
body.era1-level-page{
  --level-result-panel:
    linear-gradient(90deg,rgba(17,10,6,.84),rgba(64,38,23,.60) 50%,rgba(17,10,6,.84)),
    url("../assets/era1-leather-clean.jpg") center/cover;
  --level-result-border:rgba(86,48,26,.86);
  --level-result-border-warm:rgba(232,177,105,.54);
  --level-result-text:#fff0d8;
  --level-result-muted:#e6c59e;
  --level-result-accent:#efb06c;
}
body.era1-level-page #resultScreen{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
body.era1-level-page #resultScreen.hidden{display:none!important}
body.era1-level-page #resultScreen > .result-card{
  width:min(940px,100%);
  position:relative;
  overflow:hidden;
  padding:clamp(26px,3.2vw,46px)!important;
  text-align:center;
  border:1px solid var(--level-result-border)!important;
  border-radius:28px!important;
  background:var(--level-result-panel)!important;
  background-image:
    linear-gradient(90deg,rgba(17,10,6,.84),rgba(64,38,23,.60) 50%,rgba(17,10,6,.84)),
    url("../assets/era1-leather-clean.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 24px 58px rgba(0,0,0,.52),inset 0 1px rgba(255,247,218,.24),inset 0 -7px 18px rgba(84,44,20,.16)!important;
  color:var(--level-result-text)!important;
}
body.era1-level-page #resultScreen > .result-card::before{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  pointer-events:none!important;
  opacity:1!important;
  border:1px solid rgba(239,176,108,.10)!important;
  border-radius:22px!important;
  background:none!important;
  box-shadow:inset 0 0 22px rgba(255,236,196,.05)!important;
}
body.era1-level-page #resultScreen > .result-card::after{
  content:"";
  position:absolute;
  left:12%;right:12%;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--level-result-accent) 22%,var(--level-result-accent) 78%,transparent);
  opacity:.72;
  pointer-events:none;
}
body.era1-level-page #resultScreen > .result-card > *{position:relative;z-index:1}
body.era1-level-page #resultScreen .kicker{
  color:var(--level-result-accent)!important;
  letter-spacing:.17em;
}
body.era1-level-page #resultScreen .result-card h2{
  margin:.24em 0 .18em!important;
  color:#fff1dc!important;
  font-family:var(--ds-font-display)!important;
  font-size:clamp(34px,4.1vw,58px)!important;
  letter-spacing:.015em;
  text-shadow:0 2px 10px rgba(0,0,0,.58)!important;
}
body.era1-level-page #resultScreen .result-score{
  margin:.08em 0 .20em;
  color:#ffe2ad!important;
  font-family:var(--ds-font-display)!important;
  font-size:clamp(58px,7vw,94px)!important;
  line-height:.95;
  text-shadow:0 3px 14px rgba(0,0,0,.56)!important;
}
body.era1-level-page #resultScreen .result-card > p{
  max-width:720px;
  margin:0 auto 22px!important;
  color:var(--level-result-muted)!important;
  font-size:clamp(14px,1.25vw,17px);
  line-height:1.55;
  text-shadow:0 2px 8px rgba(0,0,0,.55)!important;
}
body.era1-level-page #resultScreen .result-card.passed{
  border-color:rgba(132,166,95,.72)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.52),0 0 24px rgba(111,151,75,.12),inset 0 1px rgba(255,247,218,.24),inset 0 -7px 18px rgba(84,44,20,.16)!important;
}
body.era1-level-page #resultScreen .result-card.failed{
  border-color:rgba(174,83,65,.70)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.52),0 0 22px rgba(156,65,51,.11),inset 0 1px rgba(255,247,218,.24),inset 0 -7px 18px rgba(84,44,20,.16)!important;
}
body.era1-level-page #resultScreen .result-card.passed::after{
  background:linear-gradient(90deg,transparent,#9fc17d 22%,#d7d393 50%,#9fc17d 78%,transparent);
}
body.era1-level-page #resultScreen .result-card.failed::after{
  background:linear-gradient(90deg,transparent,#bc6b59 22%,#e2a06e 50%,#bc6b59 78%,transparent);
}
body.era1-level-page #resultScreen .footer-actions{
  gap:10px!important;
  margin-top:8px;
}
body.era1-level-page #resultScreen .btn{
  min-height:44px;
  border-color:rgba(232,177,105,.34)!important;
  background:linear-gradient(180deg,rgba(74,43,25,.94),rgba(42,25,16,.96))!important;
  color:#fff0d8!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28),inset 0 1px rgba(255,232,198,.10)!important;
}
body.era1-level-page #resultScreen .btn:hover{filter:brightness(1.10)}
body.era1-level-page #resultScreen .btn.primary{
  background:linear-gradient(180deg,#bf713b,#8f4827)!important;
  border-color:#c77a42!important;
  color:#fff7e8!important;
}
body.level-5 #resultScreen .case-unlocked{
  position:relative;
  margin:22px auto 16px;
  max-width:760px;
  padding:18px 20px;
  border:1px solid rgba(139,174,101,.66)!important;
  border-radius:18px!important;
  background:
    linear-gradient(90deg,rgba(17,10,6,.78),rgba(55,73,35,.48) 50%,rgba(17,10,6,.78)),
    url("../assets/era1-leather-clean.jpg") center/cover!important;
  color:#f2efd6!important;
  box-shadow:0 14px 30px rgba(0,0,0,.34),inset 0 1px rgba(238,255,213,.12)!important;
}
body.level-5 #resultScreen .case-unlocked strong{color:#d8efbb!important;letter-spacing:.08em}
body.level-5 #resultScreen .case-unlocked p{color:#e8dcc3!important}

/* Final Case result card: the approved victory/defeat art stays on the page background;
   the foreground result panel remains Home-style for readability. */
body.final-case #resultCard.success,
body.final-case #resultCard.failed,
body.final-case.case-visual-success #resultCard,
body.final-case.case-visual-failure #resultCard{
  background:var(--case-home-panel-bg)!important;
  background-image:
    linear-gradient(90deg,rgba(17,10,6,.82),rgba(64,38,23,.56) 50%,rgba(17,10,6,.82)),
    url("../assets/era1-leather-clean.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
}
body.final-case #resultCard.success::before,
body.final-case #resultCard.failed::before{
  background:none!important;
  box-shadow:inset 0 1px rgba(255,247,218,.08),inset 0 0 0 1px rgba(255,193,122,.04)!important;
}

@media(max-width:760px){
  body.era1-level-page #resultScreen > .result-card{padding:24px 16px!important;border-radius:18px!important}
  body.era1-level-page #resultScreen > .result-card::before{inset:7px!important;border-radius:14px!important}
  body.era1-level-page #resultScreen .footer-actions{flex-direction:column;align-items:stretch}
  body.era1-level-page #resultScreen .btn{width:100%;text-align:center}
}


/* Point 8.4 — Final Case patch integration: artwork panel + current Home language */
body.final-case .case-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:18px;
  align-items:stretch;
  max-width:1060px;
  margin:0 auto 18px;
  padding:30px 0 0;
}
body.final-case .case-hero .briefing{
  max-width:none!important;
  width:auto;
  margin:0!important;
}
body.final-case .case-art-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:20px!important;
  border:1px solid var(--case-home-panel-border)!important;
  border-radius:var(--ds-radius-organic-a)!important;
  background:var(--case-home-panel-bg)!important;
  color:var(--case-home-copy)!important;
  box-shadow:var(--case-home-panel-shadow)!important;
}
body.final-case .case-art-panel::after{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(239,176,108,.08);
  border-radius:inherit;
  box-shadow:inset 0 0 18px rgba(255,236,196,.04);
}
body.final-case .case-art-panel > *{position:relative;z-index:1}
body.final-case .case-art-panel .kicker{color:var(--case-home-accent)!important}
body.final-case .case-art-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  margin-top:10px;
  border:1px solid rgba(232,177,105,.30);
  border-radius:16px;
  background:#120b07;
  box-shadow:0 12px 28px rgba(0,0,0,.34),inset 0 1px rgba(255,240,213,.08);
}
body.final-case .case-art-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.03) contrast(1.02);
}
body.final-case .case-art-preload{display:none!important}
body.final-case .case-art-caption{
  margin:12px 2px 0;
  color:var(--case-home-copy-soft)!important;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.55)!important;
}
body.final-case .case-hero > .case-metrics{
  grid-column:1/-1;
  width:100%;
  max-width:none!important;
  margin:0!important;
}
body.final-case .case-hero .briefing h1{
  font-size:clamp(44px,5vw,76px)!important;
}
/* The patch artwork drives the page atmosphere too, while result panels stay Home-style for readability. */
body.final-case,
body.final-case.case-visual-investigation{
  --page-scene:url("../assets/case1-artwork-default.png");
  background-image:url("../assets/case1-artwork-default.png");
}
body.final-case.case-visual-success{
  --page-scene:url("../assets/case1-artwork-victory.png");
  background-image:url("../assets/case1-artwork-victory.png");
}
body.final-case.case-visual-failure{
  --page-scene:url("../assets/case1-artwork-defeat.png");
  background-image:url("../assets/case1-artwork-defeat.png");
}
@media(max-width:960px){
  body.final-case .case-hero{
    grid-template-columns:1fr;
    max-width:920px;
    padding-top:20px;
  }
  body.final-case .case-hero > .case-metrics{grid-column:auto}
  body.final-case .case-art-panel{min-height:0}
}
@media(max-width:520px){
  body.final-case .case-art-panel{padding:14px!important;border-radius:15px!important}
  body.final-case .case-art-frame{border-radius:12px}
  body.final-case .case-art-caption{font-size:10px;letter-spacing:.04em}
}