/*
  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.tracce-level-page,
body.tracce-case-page{
  --page-scene:none;
  --page-scene-position:center;
  --page-accent:var(--ds-accent-600);
  --page-accent-soft:var(--ds-accent-secondary-450);
  --page-vignette:var(--skin-c507);
  --page-panel-alpha:.94;
  min-height:100svh;
  position:relative;
  isolation:isolate;
  color:var(--ds-text-on-dark);
  background-color:var(--ds-background-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.tracce-level-page::before,
body.tracce-case-page::before{display:none}

body.tracce-level-page::after,
body.tracce-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,var(--skin-c508),var(--skin-c509));
}

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

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

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

/* Shared header: an object in the scene, not a website chrome bar. */
body.tracce-level-page .game-header,
body.tracce-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 var(--skin-c510);
  border-radius:var(--ds-radius-organic-b);
  background:
    linear-gradient(100deg,var(--skin-c511),var(--skin-c512) 56%,var(--skin-c513)),
    url("../../theme/assets/surface-secondary.jpg") center/cover;
  box-shadow:var(--ds-shadow-panel), inset 0 1px var(--skin-c514);
  text-shadow:0 3px 16px var(--skin-c515);
  overflow:hidden;
}
body.tracce-level-page .game-header::before,
body.tracce-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.tracce-level-page .game-header h1,
body.tracce-case-page .game-header h1{
  font-family:var(--ds-font-display);
  letter-spacing:.055em;
  color:var(--ds-text-100);
}
body.tracce-level-page .game-header p,
body.tracce-case-page .game-header p{color:var(--ds-text-400)}
body.tracce-level-page .kicker,
body.tracce-case-page .kicker{
  color:var(--page-accent-soft);
  font-family:var(--ds-font-ui);
  font-weight:900;
  letter-spacing:.16em;
}

/* Shared physical panels. */
body.tracce-level-page .card,
body.tracce-case-page .card,
body.tracce-level-page .case-result,
body.tracce-case-page .case-result{
  position:relative;
  border:1px solid var(--skin-c516);
  border-radius:var(--ds-radius-organic-a);
  background:
    linear-gradient(var(--skin-c517),var(--skin-c518)),
    url("../../theme/assets/surface-primary.jpg") center/cover;
  color:var(--ds-text-on-surface-secondary);
  box-shadow:var(--ds-shadow-panel), inset 0 1px var(--skin-c519), inset 0 -8px 20px var(--skin-c520);
  backdrop-filter:none;
}
body.tracce-level-page .card::after,
body.tracce-case-page .card::after{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid var(--skin-c521);
  border-radius:inherit;
}
body.tracce-level-page .card h2,
body.tracce-level-page .card h3,
body.tracce-case-page .card h2,
body.tracce-case-page .card h3{font-family:var(--ds-font-display);color:var(--skin-c090)}
body.tracce-level-page .card p,
body.tracce-case-page .card p{color:var(--skin-c522)}
body.tracce-level-page .notice,
body.tracce-case-page .notice{
  border:1px solid var(--skin-c523);
  border-left:4px solid var(--page-accent);
  background:var(--skin-c524);
  color:var(--skin-c525);
  box-shadow:inset 0 1px var(--skin-c526);
}
body.tracce-level-page .notice strong,
body.tracce-case-page .notice strong{color:var(--skin-c527)}

/* Buttons inherit the Point 5 language while preserving existing class names. */
body.tracce-level-page .btn,
body.tracce-case-page .btn{
  min-height:42px;
  border:1px solid var(--skin-c079);
  border-radius:var(--ds-radius-xs);
  padding:.82em 1.08em;
  background:linear-gradient(180deg,var(--skin-c528),var(--skin-c529)),var(--skin-c082);
  color:var(--skin-c083);
  font-family:var(--ds-font-ui);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  text-shadow:0 1px 1px var(--skin-c087);
  box-shadow:0 7px 16px var(--skin-c530),inset 0 1px var(--skin-c531);
  transition:transform var(--ds-duration-fast) var(--ds-ease-natural),filter var(--ds-duration-fast) ease,box-shadow var(--ds-duration-fast) ease;
}
body.tracce-level-page .btn:hover:not(:disabled),
body.tracce-case-page .btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 11px 22px var(--skin-c532),var(--ds-glow-accent)}
body.tracce-level-page .btn.primary,
body.tracce-case-page .btn.primary{background:linear-gradient(180deg,var(--skin-c533),var(--skin-c534)),var(--page-accent);border-color:var(--skin-c535);color:var(--skin-c300)}
body.tracce-level-page .btn.ghost,
body.tracce-case-page .btn.ghost{background:var(--skin-c536);border-color:var(--skin-c537);color:var(--ds-text-100);text-shadow:0 1px 2px var(--skin-c152)}
body.tracce-level-page .btn.danger,
body.tracce-case-page .btn.danger{background:var(--skin-c095);border-color:var(--skin-c096);color:var(--ds-text-danger)}
body.tracce-level-page .btn:disabled,
body.tracce-case-page .btn:disabled{opacity:.52;filter:grayscale(.35);transform:none;box-shadow:none}

/* Dashboard metrics become primary surface counters. */
body.tracce-level-page .metric,
body.tracce-case-page .case-metric,
body.tracce-case-page .big-score{
  border:1px solid var(--skin-c538);
  border-radius:var(--ds-radius-panel);
  background:linear-gradient(var(--skin-c539),var(--skin-c540)),url("../../theme/assets/surface-secondary.jpg") center/cover;
  box-shadow:0 9px 22px var(--skin-c267),inset 0 1px var(--skin-c541);
  color:var(--ds-text-on-surface-primary);
}
body.tracce-level-page .metric b,
body.tracce-case-page .case-metric b,
body.tracce-case-page .big-score b{color:var(--ds-highlight-150);font-family:var(--ds-font-display)}
body.tracce-level-page .metric span,
body.tracce-case-page .case-metric span,
body.tracce-case-page .big-score span{color:var(--ds-text-on-surface-primary-muted)}

body.tracce-level-page .progress-state,
body.tracce-case-page .case-state,
body.tracce-level-page .topic-pill,
body.tracce-case-page .proof-counter{
  border-color:var(--skin-c542);
  background:var(--skin-c543);
  color:var(--skin-c544);
}

/* Quiz / puzzle work surface. */
body.tracce-level-page #quizScreen > .card,
body.tracce-level-page #resultScreen > .card{
  max-width:980px;
  margin-inline:auto;
}
body.tracce-level-page .question-text{font-family:var(--ds-font-display);color:var(--skin-c545)}
body.tracce-level-page .quiz-score{color:var(--skin-c546)}
body.tracce-level-page .answer-choice,
body.tracce-level-page .pgame-select,
body.tracce-level-page .pgame-match-row,
body.tracce-level-page .pgame-sequence li,
body.tracce-level-page .pgame-scene-item,
body.tracce-level-page .pgame-clues,
body.tracce-level-page .clue-card{
  border-color:var(--skin-c547);
  background:var(--skin-c548);
  color:var(--skin-c549);
  box-shadow:inset 0 1px var(--skin-c550);
}
body.tracce-level-page .answer-choice:hover:not(:disabled),
body.tracce-level-page .pgame-select:hover,
body.tracce-level-page .pgame-scene-item:hover{border-color:var(--skin-c551);background:var(--skin-c552)}
body.tracce-level-page .answer-choice.correct{border-color:var(--skin-c553);background:var(--skin-c554)}
body.tracce-level-page .answer-choice.wrong{border-color:var(--skin-c029);background:var(--skin-c555)}
body.tracce-level-page .quiz-feedback{background:var(--skin-c556);color:var(--skin-c557);border-color:var(--skin-c558)}
body.tracce-level-page .quiz-feedback p{color:var(--skin-c559)}
body.tracce-level-page .quiz-feedback.ok{border-color:var(--skin-c553);background:var(--skin-c560)}
body.tracce-level-page .quiz-feedback.bad{border-color:var(--skin-c029);background:var(--skin-c561)}
body.tracce-level-page .source-note{color:var(--skin-c562)}
body.tracce-level-page .pgame-note{background:var(--skin-c563);color:var(--skin-c564);border-color:var(--skin-c565)}
body.tracce-level-page .pgame select,
body.tracce-case-page select{
  background:var(--skin-c566);
  color:var(--ds-text-100);
  border-color:var(--skin-c567);
}
body.tracce-level-page .pgame-match-row span,
body.tracce-level-page .pgame-logic label span{color:var(--skin-c568)}
body.tracce-level-page .pgame-select small,
body.tracce-level-page .pgame-scene-item small{color:var(--skin-c569)}
body.tracce-level-page .pgame-icon,
body.tracce-level-page .pgame-counter{color:var(--skin-c178)}
body.tracce-level-page .pgame-maze{box-shadow:0 12px 34px var(--skin-c570);border-color:var(--skin-c571)}

/* Keep feedback/status legible and semantically recognizable. */
body.tracce-level-page .unlock,
body.tracce-level-page .case-unlocked,
body.tracce-case-page .completed-banner,
body.tracce-case-page .resolution{background:var(--skin-c572);border-color:var(--skin-c553);color:var(--skin-c573)}
body.tracce-level-page .locked-note,
body.tracce-case-page .locked-case{background:var(--skin-c574);border-color:var(--skin-c575);color:var(--skin-c576)}

/* ========== LEVEL 1 — OBSERVATION TERRACE ========== */
body.level-1{
  --page-scene:url("../../theme/assets/level1-background.jpg");
  background-image:url("../../theme/assets/level1-background.jpg");
  --page-scene-position:center 47%;
  --page-accent:var(--skin-c577);
  --page-accent-soft:var(--skin-c578);
  --page-vignette:var(--skin-c579);
}
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%,var(--skin-c580),var(--skin-c379) 56%,var(--skin-c581) 58%);box-shadow:0 6px 12px var(--skin-c416)
}

/* ========== LEVEL 2 — CAVE / ROCK SHELTER ========== */
body.level-2{
  --page-scene:url("../../theme/assets/level2-background.jpg");
  background-image:url("../../theme/assets/level2-background.jpg");
  --page-scene-position:center 42%;
  --page-accent:var(--skin-c582);
  --page-accent-soft:var(--skin-c583);
  --page-vignette:var(--skin-c584);
}
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,var(--skin-c585),var(--skin-c586)),url("../../theme/assets/surface-secondary.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 var(--skin-c587),inset 0 1px var(--skin-c588)}
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 var(--skin-c589);transform:rotate(-7deg)}

/* ========== LEVEL 3 — WORK AREA / CRAFT BENCH ========== */
body.level-3{
  --page-scene:url("../../theme/assets/level3-background.jpg");
  background-image:url("../../theme/assets/level3-background.jpg");
  --page-scene-position:center 58%;
  --page-accent:var(--skin-c590);
  --page-accent-soft:var(--skin-c591);
  --page-vignette:var(--skin-c592);
}
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,var(--skin-c593),var(--skin-c594),var(--skin-c595)),
    url("../../theme/assets/surface-primary.jpg") center/cover;
  border:5px solid var(--skin-c107);
  box-shadow:0 22px 60px var(--skin-c596),inset 0 0 0 1px var(--skin-c597);
}
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("../../theme/assets/level4-background.jpg");
  background-image:url("../../theme/assets/level4-background.jpg");
  --page-scene-position:center 46%;
  --page-accent:var(--skin-c598);
  --page-accent-soft:var(--skin-c599);
  --page-vignette:var(--skin-c600);
}
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(var(--skin-c601),var(--skin-c602)),url("../../theme/assets/surface-primary.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 var(--skin-c603)}

/* ========== LEVEL 5 — RECONSTRUCTION SPACE ========== */
body.level-5{
  --page-scene:url("../../theme/assets/level5-background.jpg");
  background-image:url("../../theme/assets/level5-background.jpg");
  --page-scene-position:center 48%;
  --page-accent:var(--skin-c604);
  --page-accent-soft:var(--skin-c605);
  --page-vignette:var(--skin-c606);
}
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:var(--skin-c607)}
body.level-5 #quizScreen > .card{
  max-width:1060px;
  background:linear-gradient(var(--skin-c608),var(--skin-c609)),url("../../theme/assets/surface-secondary.jpg") center/cover;
  color:var(--ds-text-on-surface-primary);
  border-radius:var(--ds-radius-panel);
}
body.level-5 #quizScreen .question-text,
body.level-5 #quizScreen .quiz-count,
body.level-5 #quizScreen .quiz-score{color:var(--ds-text-100)}
body.level-5 #quizScreen .topic-pill{color:var(--ds-highlight-150);border-color:var(--skin-c610);background:var(--skin-c611)}
body.level-5 #quizScreen .clue-card,
body.level-5 #quizScreen .answer-choice{background:var(--skin-c612);color:var(--ds-text-100);border-color:var(--skin-c613)}
body.level-5 #quizScreen .clue-card p{color:var(--skin-c614)}
body.level-5 #quizScreen .clue-card span{color:var(--ds-highlight-300)}
body.level-5 #quizScreen .answer-choice:hover:not(:disabled){background:var(--skin-c615)}
body.level-5 #quizScreen .quiz-feedback{background:var(--skin-c616);color:var(--ds-text-100)}
body.level-5 #quizScreen .quiz-feedback p{color:var(--skin-c617)}

/* ========== FINAL CASE — NIGHT INVESTIGATION ========== */
body.final-case{
  --page-scene:url("../../theme/assets/finalcase-background.jpg");
  background-image:url("../../theme/assets/finalcase-background.jpg");
  --page-scene-position:center 58%;
  --page-accent:var(--skin-c618);
  --page-accent-soft:var(--skin-c619);
  --page-vignette:var(--skin-c620);
}
body.final-case::after{
  background:
    radial-gradient(circle at 43% 77%,var(--skin-c621),transparent 24%),
    linear-gradient(90deg,var(--skin-c622),var(--skin-c623) 48%,var(--skin-c624)),
    linear-gradient(180deg,var(--skin-c625),var(--skin-c626));
}
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 var(--skin-c627);
  box-shadow:0 28px 70px var(--skin-c145),0 0 40px var(--skin-c628),inset 0 1px var(--skin-c629);
}
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(var(--skin-c630),var(--skin-c631)),url("../../theme/assets/surface-secondary.jpg") center/cover;
  color:var(--ds-text-on-surface-primary);
  border-color:var(--skin-c632);
  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-text-100)}
body.final-case #caseContent > section.card p,
body.final-case #investigationSection > .card p,
body.final-case #reportSection > .card p{color:var(--skin-c633)}
body.final-case .people-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.final-case .person-card{
  border:1px solid var(--skin-c613);
  border-radius:var(--ds-radius-organic-b);
  background:linear-gradient(var(--skin-c634),var(--skin-c635)),url("../../theme/assets/surface-primary.jpg") center/cover;
  color:var(--skin-c636);
  box-shadow:0 10px 24px var(--skin-c267);
}
body.final-case .person-card p{color:var(--skin-c637)!important}
body.final-case .person-code{color:var(--skin-c638)}
body.final-case .investigation-layout{grid-template-columns:minmax(205px,260px) minmax(0,1fr);gap:20px}
body.final-case .location-tab{
  border:1px solid var(--skin-c613);
  border-radius:var(--ds-radius-panel);
  background:linear-gradient(var(--skin-c639),var(--skin-c640)),url("../../theme/assets/surface-secondary.jpg") center/cover;
  color:var(--ds-text-100);
  box-shadow:0 8px 20px var(--skin-c267);
  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-surface-primary-muted)}
body.final-case .location-tab.active{border-color:var(--ds-highlight-300);background:linear-gradient(var(--skin-c641),var(--skin-c642)),url("../../theme/assets/surface-secondary.jpg") center/cover;box-shadow:0 8px 22px var(--skin-c213),var(--ds-glow-accent)}
body.final-case .location-head h2{color:var(--ds-highlight-150)!important}
body.final-case .location-head p{color:var(--skin-c643)!important}
body.final-case .evidence-card,
body.final-case .notebook-item,
body.final-case .proof-choice,
body.final-case .proof-review{
  border-color:var(--skin-c644);
  background:var(--skin-c645);
  color:var(--ds-text-100);
}
body.final-case .evidence-card p,
body.final-case .notebook-item p,
body.final-case .proof-choice small{color:var(--skin-c646)!important}
body.final-case .evidence-id,
body.final-case .notebook-item span,
body.final-case .proof-choice span{color:var(--ds-highlight-300)}
body.final-case .evidence-card.sealed:hover,
body.final-case .proof-choice:hover{background:var(--skin-c647);border-color:var(--skin-c648)}
body.final-case .evidence-card.revealed{background:var(--skin-c649);border-color:var(--skin-c650)}
body.final-case .notebook-wrap{padding-top:8px;border-top:1px solid var(--skin-c651)}
body.final-case .report-gate{background:var(--skin-c652);border-color:var(--skin-c653)}
body.final-case .proof-choice.selected{border-color:var(--ds-highlight-300);background:var(--skin-c654);box-shadow:var(--ds-glow-accent)}
body.final-case .report-field label{color:var(--ds-highlight-300)}
body.final-case .case-result{background:linear-gradient(var(--skin-c655),var(--skin-c518)),url("../../theme/assets/surface-primary.jpg") center/cover;color:var(--skin-c568)}
body.final-case .case-result p{color:var(--skin-c656)}
body.final-case .resolution p{color:var(--skin-c573)!important}
body.final-case .sources{color:var(--skin-c657)}
body.final-case .sources a{color:var(--skin-c658)}

/* Focus and accessibility remain common across every environment. */
body.tracce-level-page :focus-visible,
body.tracce-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.tracce-level-page,
  body.tracce-case-page{background-attachment:scroll}
  body.tracce-level-page .shell,
  body.tracce-case-page .shell{padding:12px}
  body.tracce-level-page .game-header,
  body.tracce-case-page .game-header{border-radius:12px;margin-bottom:14px;padding:15px}
  body.tracce-level-page .game-header::before,
  body.tracce-case-page .game-header::before{width:4px}
  body.level-1 #dashboard > .card{width:auto;transform:none}
  body.tracce-level-page .card,
  body.tracce-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.tracce-level-page .game-header h1,
  body.tracce-case-page .game-header h1{font-size:clamp(30px,12vw,46px)!important}
  body.tracce-level-page .btn,
  body.tracce-case-page .btn{min-height:44px;padding:.82em .92em;font-size:.74rem}
  body.final-case .location-tabs{grid-template-columns:1fr}
  body.tracce-level-page .metric,
  body.tracce-case-page .case-metric{border-radius:12px}
}

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

@media(prefers-contrast:more){
  body.tracce-level-page .card,
  body.tracce-case-page .card,
  body.final-case #caseContent > section.card,
  body.final-case #investigationSection > .card,
  body.final-case #reportSection > .card{border-width:2px}
  body.tracce-level-page .answer-choice,
  body.tracce-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,var(--skin-c659),var(--skin-c660) 34%,var(--skin-c661) 72%,var(--skin-c662)),linear-gradient(180deg,var(--skin-c663),var(--skin-c664));
}
body.level-2 #dashboard > .card,
body.level-2 #quizScreen > .card,
body.level-2 #resultScreen > .card{
  background:linear-gradient(var(--skin-c665),var(--skin-c666)),url("../../theme/assets/surface-secondary.jpg") center/cover;
  color:var(--ds-text-on-surface-primary);
  border-color:var(--skin-c613);
}
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-text-100)}
body.level-2 #dashboard > .card p,
body.level-2 #quizScreen > .card p,
body.level-2 #resultScreen > .card p{color:var(--skin-c667)}
body.level-2 .notice{background:var(--skin-c668);border-color:var(--skin-c669);color:var(--skin-c670)}
body.level-2 .notice strong{color:var(--ds-highlight-150)}
body.level-2 .topic-pill{color:var(--ds-highlight-300);background:var(--skin-c611);border-color:var(--skin-c671)}
body.level-2 .question-text,.level-2 .quiz-count,.level-2 .quiz-score{color:var(--ds-text-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:var(--skin-c672);color:var(--ds-text-100);border-color:var(--skin-c644)}
body.level-2 .answer-choice:hover:not(:disabled),
body.level-2 .pgame-select:hover{background:var(--skin-c673);border-color:var(--skin-c674)}
body.level-2 .quiz-feedback{background:var(--skin-c675);color:var(--ds-text-100)}
body.level-2 .quiz-feedback p{color:var(--skin-c676)}
body.level-2 .source-note{color:var(--skin-c677)}

body.level-3::after{
  background:radial-gradient(circle at 44% 67%,var(--skin-c678),transparent 24%),linear-gradient(90deg,var(--skin-c679),var(--skin-c680) 42%,var(--skin-c681)),linear-gradient(180deg,var(--skin-c682),var(--skin-c683));
}

body.level-4::after{
  background:linear-gradient(90deg,var(--skin-c684),var(--skin-c685) 36%,var(--skin-c686) 72%,var(--skin-c687)),linear-gradient(180deg,var(--skin-c688),var(--skin-c689));
}
body.level-4 #dashboard > .card{
  background-color:var(--skin-c066);
  background-image:repeating-linear-gradient(88deg,var(--skin-c690) 0 1px,transparent 1px 5px),repeating-linear-gradient(2deg,var(--skin-c691) 0 1px,transparent 1px 6px),linear-gradient(var(--skin-c692),var(--skin-c693));
  border-radius:4px 18px 8px 14px;
  box-shadow:0 20px 54px var(--skin-c190),inset 0 1px var(--skin-c694);
}
body.level-4 #dashboard > .card::before{content:"";position:absolute;top:-9px;left:9%;width:82%;height:11px;background:repeating-linear-gradient(90deg,var(--skin-c048) 0 7px,var(--skin-c695) 7px 12px,var(--skin-c696) 12px 18px);border-radius:999px;box-shadow:0 3px 7px var(--skin-c102)}

body.level-5::after{
  background:radial-gradient(circle at 55% 37%,var(--skin-c697),transparent 28%),linear-gradient(90deg,var(--skin-c698),var(--skin-c143) 50%,var(--skin-c698)),linear-gradient(180deg,var(--skin-c143),var(--skin-c699));
}


/* Contrast corrections for dark surface/night contexts. */
body.level-2 .progress-state.locked,
body.level-2 .locked-note{color:var(--skin-c700);border-color:var(--skin-c701);background:var(--skin-c702)}
body.level-2 .unlock{color:var(--skin-c703);border-color:var(--skin-c704);background:var(--skin-c705)}
body.final-case .locked-case{color:var(--skin-c700);border-color:var(--skin-c701);background:var(--skin-c706);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.tracce-level-page .btn.primary,
body.tracce-case-page .btn.primary{
  background:
    linear-gradient(180deg,var(--skin-c707),var(--skin-c708)),
    color-mix(in srgb,var(--page-accent) 65%,var(--skin-c709));
  color:var(--skin-c300);
}
body.tracce-level-page .btn:disabled,
body.tracce-case-page .btn:disabled{opacity:.78}
body.tracce-level-page .btn.primary:hover:not(:disabled),
body.tracce-case-page .btn.primary:hover:not(:disabled){filter:brightness(1.04)}

/* Light secondary 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:var(--skin-c001);
}
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:var(--skin-c242);
}
body.level-1 .pgame-sequence li::before,
body.level-3 .pgame-sequence li::before,
body.level-4 .pgame-sequence li::before{border-color:var(--skin-c710)}
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(--skin-c710);background:var(--skin-c711)}

/* 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:var(--skin-c001);
}
body.level-1 #resultScreen .result-score,
body.level-3 #resultScreen .result-score,
body.level-4 #resultScreen .result-score{
  color:var(--skin-c242);
}

/* Level 2 — all gameplay cards are dark surface. Restore light nested text that
   generic secondary surface rules would otherwise force back to dark brown. */
body.level-2 .progress-state{color:var(--ds-highlight-150);background:var(--skin-c203);border-color:var(--skin-c610)}
body.level-2 .progress-state.ok{color:var(--skin-c703);border-color:var(--skin-c704);background:var(--skin-c712)}
body.level-2 .progress-state.locked{color:var(--skin-c700);border-color:var(--skin-c701);background:var(--skin-c702)}
body.level-2 .pgame-note{background:var(--skin-c675);color:var(--skin-c617);border-color:var(--skin-c613)}
body.level-2 .pgame-match-row span,
body.level-2 .pgame-logic label span{color:var(--ds-text-100)}
body.level-2 .pgame-select small,
body.level-2 .pgame-scene-item small{color:var(--skin-c617)}
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-highlight-150)}
body.level-2 .pgame-maze-meta span{color:var(--skin-c617)}
body.level-2 .pgame-sequence li::before{border-color:var(--skin-c648)}
body.level-2 .pgame-select.selected,
body.level-2 button.pgame-scene-item.selected{border-color:var(--ds-highlight-300);background:var(--skin-c713)}

/* Level 5 — quiz surface is dark surface; 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:var(--skin-c612);
  color:var(--ds-text-100);
  border-color:var(--skin-c613);
}
body.level-5 #quizScreen .pgame-note{background:var(--skin-c616);color:var(--skin-c617);border-color:var(--skin-c613)}
body.level-5 #quizScreen .pgame-match-row span,
body.level-5 #quizScreen .pgame-logic label span{color:var(--ds-text-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:var(--skin-c617)}
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-highlight-150)}
body.level-5 #quizScreen .pgame-sequence li::before{border-color:var(--skin-c648)}
body.level-5 #quizScreen .pgame-select.selected,
body.level-5 #quizScreen button.pgame-scene-item.selected{border-color:var(--ds-highlight-300);background:var(--skin-c713)}
body.level-5 #quizScreen .source-note{color:var(--skin-c676)}

/* Level 5 overview/result stay on light secondary surface. */
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:var(--skin-c001);
}
body.level-5 #resultScreen .result-score{color:var(--skin-c242)}

/* 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:var(--skin-c001)!important;
}
body.final-case .case-state{color:var(--skin-c001)}
body.final-case .case-state.ok{color:var(--skin-c001);border-color:var(--skin-c714);background:var(--skin-c715)}
body.final-case .case-state.locked{color:var(--skin-c001);border-color:var(--skin-c716);background:var(--skin-c717)}
body.final-case .case-result .kicker,
body.final-case .era-complete strong{color:var(--skin-c242)}
body.final-case .resolution h3,
body.final-case .resolution p{color:var(--skin-c001)!important}

/* Final Case — elements that sit directly on dark surface/night surfaces. */
body.final-case .completed-banner{color:var(--skin-c703);background:var(--skin-c718);border-color:var(--skin-c704)}
body.final-case .proof-counter{color:var(--ds-highlight-150);background:var(--skin-c675);border-color:var(--skin-c610)}
body.final-case .proof-counter b{color:var(--skin-c719)}

/* 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:var(--skin-c001)}
body.final-case .briefing strong{color:var(--skin-c242)}


/* 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:var(--skin-c617)}

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-text-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-highlight-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:var(--skin-c612);
  border-color:var(--skin-c613);
}

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-highlight-300);background:var(--skin-c615)}

body.level-1 .pgame-sequence li::before,
body.level-3 .pgame-sequence li::before,
body.level-4 .pgame-sequence li::before{border-color:var(--skin-c648)}

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-highlight-300);background:var(--skin-c713)}

body.level-1 .progress-state,
body.level-3 .progress-state,
body.level-4 .progress-state{color:var(--ds-highlight-150);background:var(--skin-c203);border-color:var(--skin-c610)}
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:var(--skin-c703);border-color:var(--skin-c704);background:var(--skin-c705)}
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:var(--skin-c700);border-color:var(--skin-c701);background:var(--skin-c702)}


/* 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.tracce-level-page .kicker,
body.tracce-case-page .kicker{color:var(--skin-c247)!important}
body.tracce-level-page .game-header h1,
body.tracce-case-page .game-header h1{color:var(--skin-c249)!important;text-shadow:0 2px 10px var(--skin-c250)!important}
body.tracce-level-page .game-header p,
body.tracce-case-page .game-header p{color:var(--skin-c251)!important}

body.tracce-level-page #dashboard > .card,
body.tracce-level-page #quizScreen > .card,
body.tracce-level-page #resultScreen > .card,
body.tracce-case-page .card,
body.tracce-case-page .briefing,
body.tracce-case-page .person-card,
body.tracce-case-page .case-result,
body.tracce-case-page .resolution,
body.tracce-case-page .locked-case,
body.tracce-case-page .proof-counter{
  box-shadow:inset 0 0 0 9999px var(--skin-c208), 0 18px 48px var(--skin-c267)!important;
}

body.tracce-level-page .level-rule strong,
body.tracce-level-page .result-card h2,
body.tracce-level-page .notice strong,
body.tracce-case-page h2,
body.tracce-case-page h3,
body.tracce-case-page .case-result .kicker,
body.tracce-case-page .era-complete strong,
body.tracce-case-page .briefing strong{color:var(--skin-c415)!important}

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

body.tracce-level-page .question-text,
body.tracce-case-page .resolution h3,
body.tracce-case-page .case-result .theory{color:var(--skin-c722)!important;text-shadow:0 1px 2px var(--skin-c721)}

body.tracce-level-page .quiz-score,
body.tracce-level-page .topic-pill,
body.tracce-level-page .metric b,
body.tracce-level-page .result-score,
body.tracce-level-page .pgame-icon,
body.tracce-level-page .pgame-counter,
body.tracce-level-page .pgame-sequence li::before,
body.tracce-case-page .proof-counter b,
body.tracce-case-page .person-code{color:var(--skin-c723)!important}

body.tracce-level-page .metric span,
body.tracce-case-page .chip,
body.tracce-case-page .notebook,
body.tracce-case-page .source-note{color:var(--skin-c617)!important}

body.tracce-level-page .answer-choice,
body.tracce-level-page .pgame-select,
body.tracce-level-page .pgame-match-row,
body.tracce-level-page .pgame-sequence li,
body.tracce-level-page .pgame-scene-item,
body.tracce-level-page .pgame-clues,
body.tracce-level-page .clue-card,
body.tracce-level-page .quiz-feedback,
body.tracce-level-page .pgame-note,
body.tracce-case-page .location,
body.tracce-case-page .enigma-card,
body.tracce-case-page .proof-choice,
body.tracce-case-page .proof-review,
body.tracce-case-page .locked-case,
body.tracce-case-page .proof-counter{
  background:var(--skin-c724)!important;
  border-color:var(--skin-c725)!important;
}

body.tracce-level-page .answer-choice:hover:not(:disabled),
body.tracce-level-page .pgame-select:hover,
body.tracce-level-page .pgame-scene-item:hover,
body.tracce-case-page .location:hover,
body.tracce-case-page .enigma-card:hover,
body.tracce-case-page .proof-choice:hover{border-color:var(--skin-c247)!important;background:var(--skin-c615)!important}

body.tracce-level-page .pgame-select.selected,
body.tracce-level-page button.pgame-scene-item.selected,
body.tracce-case-page .location.current,
body.tracce-case-page .proof-choice.selected{border-color:var(--skin-c247)!important;background:var(--skin-c713)!important}
body.tracce-level-page .pgame-sequence li::before{border-color:var(--skin-c648)!important}

body.tracce-level-page .progress-state{color:var(--skin-c719)!important;background:var(--skin-c267)!important;border-color:var(--skin-c610)!important}
body.tracce-level-page .progress-state.ok,
body.tracce-level-page .unlock,
body.tracce-case-page .case-state.ok,
body.tracce-case-page .completed-banner{color:var(--skin-c703)!important;border-color:var(--skin-c704)!important;background:var(--skin-c712)!important}
body.tracce-level-page .progress-state.locked,
body.tracce-level-page .locked-note,
body.tracce-case-page .case-state.locked,
body.tracce-case-page .locked-case{color:var(--skin-c700)!important;border-color:var(--skin-c701)!important;background:var(--skin-c702)!important}

body.tracce-level-page .answer-choice.correct,
body.tracce-level-page .answer-choice.correct *,
body.tracce-level-page .quiz-feedback.ok,
body.tracce-level-page .quiz-feedback.ok p{color:var(--skin-c703)!important;border-color:var(--skin-c704)!important;background:var(--skin-c726)!important}
body.tracce-level-page .answer-choice.wrong,
body.tracce-level-page .answer-choice.wrong *,
body.tracce-level-page .quiz-feedback.bad,
body.tracce-level-page .quiz-feedback.bad p{color:var(--skin-c700)!important;border-color:var(--skin-c701)!important;background:var(--skin-c727)!important}


/* POINT8 — SCENE / READABILITY REVISION PATCH (2026-09-27) */
body.level-1::after{
  background:
    radial-gradient(circle at 68% 32%,var(--skin-c728),transparent 20%),
    linear-gradient(90deg,var(--skin-c729),var(--skin-c730) 44%,var(--skin-c731)),
    linear-gradient(180deg,var(--skin-c732),var(--skin-c733));
}
body.level-2::after{
  background:
    radial-gradient(circle at 22% 18%,var(--skin-c734),transparent 18%),
    radial-gradient(circle at 76% 72%,var(--skin-c735),transparent 18%),
    linear-gradient(90deg,var(--skin-c736),var(--skin-c737) 46%,var(--skin-c736)),
    linear-gradient(180deg,var(--skin-c738),var(--skin-c739));
}
body.level-3::after{
  background:
    radial-gradient(circle at 26% 20%,var(--skin-c740),transparent 20%),
    radial-gradient(circle at 80% 74%,var(--skin-c741),transparent 22%),
    linear-gradient(90deg,var(--skin-c742),var(--skin-c743) 46%,var(--skin-c744)),
    linear-gradient(180deg,var(--skin-c745),var(--skin-c746));
}
body.level-4::after{
  background:
    radial-gradient(circle at 74% 28%,var(--skin-c747),transparent 18%),
    radial-gradient(circle at 24% 82%,var(--skin-c748),transparent 22%),
    linear-gradient(90deg,var(--skin-c749),var(--skin-c750) 48%,var(--skin-c751)),
    linear-gradient(180deg,var(--skin-c752),var(--skin-c753));
}
body.level-5::after{
  background:
    radial-gradient(circle at 70% 18%,var(--skin-c754),transparent 22%),
    radial-gradient(circle at 18% 76%,var(--skin-c755),transparent 18%),
    linear-gradient(90deg,var(--skin-c609),var(--skin-c756) 48%,var(--skin-c757)),
    linear-gradient(180deg,var(--skin-c758),var(--skin-c268));
}
body.final-case::after{
  background:
    radial-gradient(circle at 70% 16%,var(--skin-c759),transparent 18%),
    radial-gradient(circle at 58% 76%,var(--skin-c760),transparent 22%),
    linear-gradient(90deg,var(--skin-c761),var(--skin-c762) 48%,var(--skin-c761)),
    linear-gradient(180deg,var(--skin-c763),var(--skin-c764));
}

body.tracce-level-page #dashboard > .card,
body.tracce-level-page #quizScreen > .card,
body.tracce-level-page #resultScreen > .card,
body.tracce-case-page .briefing,
body.tracce-case-page #caseContent > section.card,
body.tracce-case-page #investigationSection > .card,
body.tracce-case-page #reportSection > .card{
  backdrop-filter:none;
  box-shadow:0 24px 64px var(--skin-c147),inset 0 1px var(--skin-c765)!important;
}
body.tracce-level-page #quizScreen > .card,
body.tracce-level-page #resultScreen > .card{
  background:
    linear-gradient(var(--skin-c766),var(--skin-c767)),
    linear-gradient(120deg,var(--skin-c768),var(--skin-c769) 58%,var(--skin-c770)),
    url("../../theme/assets/surface-secondary.jpg") center/cover!important;
  color:var(--skin-c771)!important;
}
body.tracce-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("../../theme/assets/level1-background.jpg")}
body.level-2 #resultScreen > .card::before{background-image:url("../../theme/assets/level2-background.jpg")}
body.level-3 #resultScreen > .card::before{background-image:url("../../theme/assets/level3-background.jpg")}
body.level-4 #resultScreen > .card::before{background-image:url("../../theme/assets/level4-background.jpg")}
body.level-5 #resultScreen > .card::before{background-image:url("../../theme/assets/level5-background.jpg")}

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

body.tracce-level-page .metric b,
body.tracce-level-page .quiz-score,
body.tracce-level-page .result-score,
body.tracce-level-page .topic-pill,
body.tracce-case-page .proof-counter b,
body.tracce-case-page .location-head h2{color:var(--skin-c723)!important}
body.tracce-level-page .kicker,
body.tracce-case-page .kicker,
body.tracce-level-page .clue-card span,
body.tracce-level-page .pgame-maze-meta b,
body.tracce-level-page .pgame-scenes h4,
body.tracce-case-page .person-code{color:var(--skin-c247)!important}
body.tracce-level-page .question-text{color:var(--skin-c719)!important;line-height:1.24}
body.tracce-level-page .answer-choice,
body.tracce-level-page .pgame-select,
body.tracce-level-page .pgame-match-row,
body.tracce-level-page .pgame-sequence li,
body.tracce-level-page .pgame-scene-item,
body.tracce-level-page .pgame-clues,
body.tracce-level-page .clue-card,
body.tracce-level-page .pgame-note,
body.tracce-level-page .quiz-feedback,
body.tracce-case-page .evidence-card,
body.tracce-case-page .notebook-item,
body.tracce-case-page .proof-choice,
body.tracce-case-page .proof-review,
body.tracce-case-page .location-tab,
body.tracce-case-page .proof-counter{
  background:var(--skin-c773)!important;border-color:var(--skin-c394)!important;
}
body.tracce-level-page .answer-choice:hover:not(:disabled),
body.tracce-level-page .pgame-select:hover,
body.tracce-level-page .pgame-scene-item:hover,
body.tracce-case-page .location-tab:hover,
body.tracce-case-page .proof-choice:hover{background:var(--skin-c774)!important;border-color:var(--skin-c247)!important}
body.tracce-level-page .answer-choice.correct,
body.tracce-level-page .answer-choice.correct *,
body.tracce-level-page .quiz-feedback.ok,
body.tracce-level-page .quiz-feedback.ok p,
body.tracce-level-page .unlock,
body.tracce-level-page .case-unlocked,
body.tracce-case-page .completed-banner{color:var(--skin-c775)!important;background:var(--skin-c776)!important;border-color:var(--skin-c777)!important}
body.tracce-level-page .answer-choice.wrong,
body.tracce-level-page .answer-choice.wrong *,
body.tracce-level-page .quiz-feedback.bad,
body.tracce-level-page .quiz-feedback.bad p,
body.tracce-level-page .locked-note,
body.tracce-case-page .locked-case{color:var(--skin-c778)!important;background:var(--skin-c779)!important;border-color:var(--skin-c780)!important}
body.tracce-level-page .hard-rule{color:var(--skin-c781)!important;background:var(--skin-c782)!important;border-color:var(--skin-c783)!important}
body.tracce-level-page .pgame-sequence button,
body.tracce-level-page .pgame-sequence .btn,
body.tracce-level-page .pgame-sequence [type="button"]{color:var(--skin-c784)!important}
body.tracce-level-page .pgame-sequence li .pgame-counter{color:var(--skin-c723)!important}
body.tracce-level-page .pgame-maze-meta span,
body.tracce-level-page .pgame-note{color:var(--skin-c785)!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(var(--skin-c786),var(--skin-c787)),
    linear-gradient(120deg,var(--skin-c788),var(--skin-c789) 58%,var(--skin-c790)),
    url("../../theme/assets/surface-secondary.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:var(--skin-c772)!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%,var(--skin-c791),transparent 24%),
    radial-gradient(circle at 52% 80%,var(--skin-c792),transparent 22%),
    linear-gradient(90deg,var(--skin-c793),var(--skin-c794) 50%,var(--skin-c795)),
    linear-gradient(180deg,var(--skin-c796),var(--skin-c797));
}
body.final-case::after{
  background:
    radial-gradient(circle at 52% 18%,var(--skin-c798),transparent 24%),
    radial-gradient(circle at 50% 82%,var(--skin-c799),transparent 20%),
    linear-gradient(90deg,var(--skin-c800),var(--skin-c801) 50%,var(--skin-c802)),
    linear-gradient(180deg,var(--skin-c803),var(--skin-c804));
}

body.level-1 #dashboard > .card,
body.level-1 #quizScreen > .card,
body.level-1 #resultScreen > .card{
  background:
    linear-gradient(var(--skin-c805),var(--skin-c806)),
    linear-gradient(125deg,var(--skin-c807),var(--skin-c808) 55%,var(--skin-c809)),
    url("../../theme/assets/level1-background.jpg") center/cover!important;
}
body.level-2 #dashboard > .card,
body.level-2 #quizScreen > .card,
body.level-2 #resultScreen > .card{
  background:
    linear-gradient(var(--skin-c810),var(--skin-c811)),
    linear-gradient(125deg,var(--skin-c812),var(--skin-c808) 55%,var(--skin-c813)),
    url("../../theme/assets/level2-background.jpg") center/cover!important;
}
body.level-3 #dashboard > .card,
body.level-3 #quizScreen > .card,
body.level-3 #resultScreen > .card{
  background:
    linear-gradient(var(--skin-c810),var(--skin-c811)),
    linear-gradient(125deg,var(--skin-c812),var(--skin-c808) 55%,var(--skin-c813)),
    url("../../theme/assets/level3-background.jpg") center/cover!important;
}
body.level-4 #dashboard > .card,
body.level-4 #quizScreen > .card,
body.level-4 #resultScreen > .card{
  background:
    linear-gradient(var(--skin-c814),var(--skin-c815)),
    linear-gradient(125deg,var(--skin-c812),var(--skin-c808) 55%,var(--skin-c813)),
    url("../../theme/assets/level4-background.jpg") center/cover!important;
}
body.level-5 #dashboard > .card,
body.level-5 #quizScreen > .card,
body.level-5 #resultScreen > .card{
  background:
    linear-gradient(var(--skin-c816),var(--skin-c815)),
    linear-gradient(125deg,var(--skin-c812),var(--skin-c808) 55%,var(--skin-c813)),
    url("../../theme/assets/level5-background.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(var(--skin-c810),var(--skin-c817)),
    linear-gradient(125deg,var(--skin-c818),var(--skin-c819) 58%,var(--skin-c820)),
    url("../../theme/assets/finalcase-background.jpg") center/cover!important;
}

body.tracce-level-page .question-text,
body.tracce-level-page .quiz-score,
body.tracce-level-page .quiz-count,
body.tracce-level-page .card p,
body.tracce-level-page .notice,
body.tracce-level-page .notice strong,
body.tracce-level-page .source-note,
body.tracce-level-page .pgame-note,
body.tracce-level-page .pgame-match-row span,
body.tracce-level-page .pgame-logic label span,
body.tracce-level-page .pgame-select small,
body.tracce-level-page .pgame-scene-item small,
body.tracce-level-page .pgame-icon,
body.tracce-level-page .pgame-counter,
body.tracce-level-page .pgame-clues,
body.tracce-level-page .pgame-scenes h4,
body.tracce-level-page .pgame-maze-meta span,
body.tracce-level-page .metric span,
body.tracce-case-page .case-metric span,
body.tracce-case-page .briefing p,
body.tracce-case-page .person-card p,
body.tracce-case-page .person-code,
body.tracce-case-page .location-tab span,
body.tracce-case-page .notebook-item p,
body.tracce-case-page .evidence-card p,
body.tracce-case-page .case-result p,
body.tracce-case-page .proof-review small,
body.tracce-case-page .report-gate p,
body.tracce-case-page .report-field label{
  color:var(--skin-c821)!important;
}
body.tracce-level-page .topic-pill,
body.tracce-level-page .progress-state,
body.tracce-case-page .case-state,
body.tracce-case-page .proof-counter,
body.tracce-case-page .location-tab strong,
body.tracce-case-page .evidence-id,
body.tracce-case-page .notebook-item span,
body.tracce-case-page .proof-review span{
  color:var(--skin-c822)!important;
}
body.tracce-level-page .answer-choice,
body.tracce-level-page .pgame-select,
body.tracce-level-page .pgame-match-row,
body.tracce-level-page .pgame-sequence li,
body.tracce-level-page .pgame-scene-item,
body.tracce-level-page .clue-card,
body.tracce-case-page .person-card,
body.tracce-case-page .evidence-card,
body.tracce-case-page .notebook-item,
body.tracce-case-page .proof-choice,
body.tracce-case-page .report-field select{
  color:var(--skin-c823)!important;
  background:var(--skin-c824)!important;
  border-color:var(--skin-c825)!important;
}
body.tracce-level-page .answer-choice:hover:not(:disabled),
body.tracce-level-page .pgame-select:hover,
body.tracce-level-page .pgame-scene-item:hover,
body.tracce-case-page .proof-choice:hover,
body.tracce-case-page .location-tab:hover{
  background:var(--skin-c826)!important;
  border-color:var(--skin-c827)!important;
}
body.tracce-level-page .answer-choice.correct,
body.tracce-case-page .proof-review.decisive{
  color:var(--skin-c828)!important;
  background:var(--skin-c829)!important;
  border-color:var(--skin-c830)!important;
}
body.tracce-level-page .answer-choice.wrong{
  color:var(--skin-c831)!important;
  background:var(--skin-c832)!important;
  border-color:var(--skin-c833)!important;
}
body.tracce-level-page .quiz-feedback,
body.tracce-level-page .pgame-note,
body.tracce-case-page .report-gate,
body.tracce-case-page .resolution,
body.tracce-case-page .era-complete{
  color:var(--skin-c834)!important;
  background:var(--skin-c417)!important;
  border-color:var(--skin-c835)!important;
}
body.tracce-level-page .quiz-feedback.ok,
body.tracce-case-page .case-state.ok,
body.tracce-case-page .completed-banner,
body.tracce-case-page .proof-review.support{
  color:var(--skin-c836)!important;
  background:var(--skin-c837)!important;
  border-color:var(--skin-c838)!important;
}
body.tracce-level-page .quiz-feedback.bad,
body.tracce-case-page .case-state.locked,
body.tracce-case-page .proof-review.secondary{
  color:var(--skin-c831)!important;
  background:var(--skin-c832)!important;
  border-color:var(--skin-c833)!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:var(--skin-c834)!important;
}
body.tracce-level-page .hard-rule{background:var(--skin-c839)!important;border-color:var(--skin-c840)!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:var(--skin-c841)!important;
  text-shadow:0 2px 20px var(--skin-c250);
}
body.final-case .briefing h2{
  color:var(--skin-c842)!important;
  letter-spacing:.02em;
  text-shadow:0 2px 18px var(--skin-c289),0 0 30px var(--skin-c843);
}
body.final-case .briefing .kicker,
body.final-case .case-result .kicker,
body.final-case .resolution .kicker,
body.level-5 #resultScreen .kicker{color:var(--skin-c844)!important}
body.final-case #resultCard,
body.final-case #resultCard.success,
body.final-case #resultCard.failed{
  position:relative;
  overflow:hidden;
  border-color:var(--skin-c845)!important;
}
body.final-case #resultCard::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,var(--skin-c846),transparent 24%),
    radial-gradient(circle at 50% 78%,var(--skin-c847),transparent 18%);
  mix-blend-mode:screen;
}
body.final-case #resultCard.success{
  background:
    linear-gradient(var(--skin-c757),var(--skin-c848)),
    linear-gradient(180deg,var(--skin-c849),var(--skin-c850)),
    url("../../theme/assets/home-background.jpg") center/cover!important;
  box-shadow:0 24px 72px var(--skin-c311),0 0 0 1px var(--skin-c851),0 0 36px var(--skin-c852)!important;
}
body.final-case #resultCard.failed{
  background:
    linear-gradient(var(--skin-c853),var(--skin-c806)),
    linear-gradient(180deg,var(--skin-c854),var(--skin-c855)),
    url("../../theme/assets/finalcase-background.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:var(--skin-c856)!important;
  border:1px solid var(--skin-c857)!important;
  box-shadow:inset 0 1px var(--skin-c858),0 0 24px var(--skin-c859);
}
body.final-case #resultCard.success .big-score b,
body.level-5 #resultScreen .result-score{color:var(--skin-c860)!important}
body.final-case #resultCard.success .era-complete{
  background:linear-gradient(135deg,var(--skin-c861),var(--skin-c862))!important;
  border-color:var(--skin-c863)!important;
  box-shadow:0 0 24px var(--skin-c864);
}
body.level-5 #resultScreen > .card{
  box-shadow:0 24px 72px var(--skin-c158),0 0 24px var(--skin-c865)!important;
}
body.level-5 #resultScreen .case-unlocked{
  background:linear-gradient(135deg,var(--skin-c866),var(--skin-c867))!important;
  border:1px solid var(--skin-c863)!important;
  color:var(--skin-c836)!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.tracce-level-page::after,
body.tracce-case-page::after{
  background:
    radial-gradient(circle at 50% 84%,var(--skin-c868),transparent 20%),
    radial-gradient(circle at 52% 28%,var(--skin-c869),transparent 24%),
    linear-gradient(90deg,var(--skin-c870),var(--skin-c871) 48%,var(--skin-c872)),
    linear-gradient(180deg,var(--skin-c873),var(--skin-c872));
}
body.level-1.tracce-level-page::after{background:
    radial-gradient(circle at 50% 72%,var(--skin-c874),transparent 24%),
    radial-gradient(circle at 48% 26%,var(--skin-c875),transparent 24%),
    linear-gradient(90deg,var(--skin-c876),var(--skin-c877) 48%,var(--skin-c878)),
    linear-gradient(180deg,var(--skin-c879),var(--skin-c880));}
body.level-2.tracce-level-page::after{background:
    radial-gradient(circle at 16% 24%,var(--skin-c881),transparent 18%),
    radial-gradient(circle at 78% 70%,var(--skin-c882),transparent 24%),
    linear-gradient(90deg,var(--skin-c883),var(--skin-c884) 48%,var(--skin-c885)),
    linear-gradient(180deg,var(--skin-c886),var(--skin-c887));}
body.level-3.tracce-level-page::after{background:
    radial-gradient(circle at 60% 24%,var(--skin-c888),transparent 18%),
    radial-gradient(circle at 34% 78%,var(--skin-c889),transparent 22%),
    linear-gradient(90deg,var(--skin-c890),var(--skin-c891) 50%,var(--skin-c892)),
    linear-gradient(180deg,var(--skin-c142),var(--skin-c893));}
body.level-4.tracce-level-page::after{background:
    radial-gradient(circle at 58% 22%,var(--skin-c894),transparent 20%),
    radial-gradient(circle at 20% 72%,var(--skin-c895),transparent 22%),
    linear-gradient(90deg,var(--skin-c896),var(--skin-c897) 48%,var(--skin-c898)),
    linear-gradient(180deg,var(--skin-c899),var(--skin-c900));}
body.level-5.tracce-level-page::after,
body.final-case.tracce-case-page::after{background:
    radial-gradient(circle at 52% 84%,var(--skin-c901),transparent 18%),
    radial-gradient(circle at 48% 18%,var(--skin-c902),transparent 18%),
    linear-gradient(90deg,var(--skin-c903),var(--skin-c904) 48%,var(--skin-c905)),
    linear-gradient(180deg,var(--skin-c906),var(--skin-c905));}

body.tracce-level-page #dashboard > .card,
body.tracce-level-page #quizScreen > .card,
body.tracce-level-page #resultScreen > .card,
body.tracce-case-page .briefing,
body.tracce-case-page #caseContent > section.card,
body.tracce-case-page #investigationSection > .card,
body.tracce-case-page #reportSection > .card,
body.tracce-case-page #resultCard{
  background-image:
    linear-gradient(var(--skin-c806),var(--skin-c907)),
    linear-gradient(118deg,var(--skin-c908),var(--skin-c909) 56%,var(--skin-c910)),
    var(--page-scene),
    url("../../theme/assets/surface-secondary.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:var(--skin-c911) !important;
  border-color:var(--skin-c912)!important;
  box-shadow:0 26px 62px var(--skin-c190),0 0 34px var(--skin-c913),inset 0 1px var(--skin-c914),inset 0 -18px 34px var(--skin-c354)!important;
}
body.tracce-level-page .question-text,
body.tracce-level-page .quiz-count,
body.tracce-level-page .quiz-score,
body.tracce-level-page .card h2,
body.tracce-level-page .card p,
body.tracce-level-page .notice,
body.tracce-level-page .notice strong,
body.tracce-level-page .progress-state,
body.tracce-level-page .topic-pill,
body.tracce-level-page .source-note,
body.tracce-level-page .pgame-note,
body.tracce-level-page .pgame-match-row span,
body.tracce-level-page .pgame-logic label span,
body.tracce-level-page .pgame-select small,
body.tracce-level-page .pgame-scene-item small,
body.tracce-level-page .pgame-clues,
body.tracce-level-page .pgame-scenes h4,
body.tracce-level-page .pgame-maze-meta span,
body.tracce-level-page .metric span,
body.tracce-level-page .hard-rule,
body.tracce-level-page .locked-note,
body.tracce-level-page .unlock,
body.tracce-level-page .case-unlocked,
body.tracce-level-page #resultScreen > .card p,
body.tracce-level-page #resultScreen > .card h2,
body.tracce-level-page #resultScreen .result-score{color:var(--skin-c415)!important;text-shadow:0 2px 12px var(--skin-c721)}
body.tracce-level-page .kicker,
body.tracce-case-page .kicker,
body.tracce-level-page .metric b,
body.tracce-case-page .case-metric b,
body.tracce-case-page .big-score b{color:var(--skin-c915)!important}
body.tracce-level-page .answer-choice,
body.tracce-level-page .pgame-select,
body.tracce-level-page .pgame-match-row,
body.tracce-level-page .pgame-sequence li,
body.tracce-level-page .pgame-scene-item,
body.tracce-level-page .pgame-clues,
body.tracce-level-page .clue-card,
body.tracce-level-page .quiz-feedback,
body.tracce-level-page .pgame-note,
body.tracce-level-page .pgame-order-controls button{
  color:var(--skin-c415)!important;
  background:var(--skin-c916)!important;
  border-color:var(--skin-c448)!important;
  box-shadow:inset 0 1px var(--skin-c917),0 8px 20px var(--skin-c918)!important;
}
body.tracce-level-page .answer-choice:hover:not(:disabled),
body.tracce-level-page .pgame-select:hover,
body.tracce-level-page .pgame-scene-item:hover,
body.tracce-level-page .pgame-order-controls button:hover{background:var(--skin-c919)!important;border-color:var(--skin-c920)!important}
body.tracce-level-page .answer-choice.correct,
body.tracce-level-page .quiz-feedback.ok{color:var(--skin-c921)!important;background:var(--skin-c922)!important;border-color:var(--skin-c923)!important}
body.tracce-level-page .answer-choice.wrong,
body.tracce-level-page .quiz-feedback.bad{color:var(--skin-c924)!important;background:var(--skin-c925)!important;border-color:var(--skin-c926)!important}
body.tracce-level-page .topic-pill,
body.tracce-level-page .progress-state,
body.tracce-level-page .locked-note,
body.tracce-level-page .unlock,
body.tracce-level-page .case-unlocked,
body.tracce-level-page .hard-rule{background:var(--skin-c806)!important;border-color:var(--skin-c458)!important}
body.level-5 #dashboard > .card,
body.level-5 #resultScreen > .card{background-image:
    linear-gradient(var(--skin-c675),var(--skin-c927)),
    linear-gradient(118deg,var(--skin-c928),var(--skin-c909) 56%,var(--skin-c929)),
    url("../../theme/assets/level5-background.jpg"),
    url("../../theme/assets/surface-secondary.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:var(--skin-c500)!important;text-shadow:0 2px 12px var(--skin-c721)}
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:var(--skin-c415)!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:var(--skin-c907)!important;border-color:var(--skin-c448)!important}
body.final-case #resultCard.success{
  background-image:
    linear-gradient(var(--skin-c930),var(--skin-c931)),
    radial-gradient(circle at 50% 20%,var(--skin-c932),transparent 24%),
    url("../../theme/assets/home-background.jpg"),
    url("../../theme/assets/surface-secondary.jpg") !important;
  background-size:cover,cover,cover,cover !important;
  background-position:center,center,center 56%,center !important;
  box-shadow:0 30px 82px var(--skin-c596),0 0 48px var(--skin-c933),inset 0 1px var(--skin-c934)!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%,var(--skin-c935),transparent 18%),
    radial-gradient(circle at 18% 16%,var(--skin-c936),transparent 12%),
    radial-gradient(circle at 82% 16%,var(--skin-c937),transparent 12%);
}
body.final-case #resultCard.success #resultTitle{font-size:clamp(40px,4.3vw,58px)!important;letter-spacing:.02em;color:var(--skin-c938)!important}
body.final-case #resultCard.success .big-score b{font-size:clamp(44px,4.8vw,76px)!important;color:var(--skin-c939)!important}
body.final-case #resultCard.success .era-complete{
  background:linear-gradient(120deg,var(--skin-c940),var(--skin-c941))!important;
  border-color:var(--skin-c942)!important;
  box-shadow:0 12px 28px var(--skin-c416),inset 0 1px var(--skin-c943)!important;
}
body.final-case #resultCard.success .resolution{
  background:linear-gradient(120deg,var(--skin-c944),var(--skin-c945))!important;
  border-color:var(--skin-c946)!important;
}
body.final-case #resultCard.success .btn.primary,
body.level-5 #resultScreen .btn.primary{
  background:linear-gradient(180deg,var(--skin-c947),var(--skin-c948))!important;
  color:var(--skin-c949)!important;
  box-shadow:0 10px 24px var(--skin-c267),0 0 18px var(--skin-c950)!important;
}
body.final-case .briefing h1{font-size:clamp(46px,5.8vw,94px)!important;color:var(--skin-c951)!important;letter-spacing:.02em}
body.final-case .briefing .case-state.ok{color:var(--skin-c952)!important;background:var(--skin-c953)!important;border-color:var(--skin-c954)!important}
body.final-case .briefing .case-state.locked{color:var(--skin-c955)!important;background:var(--skin-c956)!important;border-color:var(--skin-c926)!important}


/* Point 8 — Final Case three-state artwork update */
body.final-case,
body.final-case.case-visual-investigation{
  --page-scene:url("../../theme/assets/case-artwork-default.png");
  background-image:url("../../theme/assets/case-artwork-default.png");
  --page-scene-position:center 56%;
  --page-accent:var(--skin-c957);
  --page-accent-soft:var(--skin-c958);
  --page-vignette:var(--skin-c959);
}
body.final-case::after,
body.final-case.case-visual-investigation::after{
  background:
    radial-gradient(circle at 69% 18%,var(--skin-c960),transparent 20%),
    linear-gradient(90deg,var(--skin-c268),var(--skin-c745) 49%,var(--skin-c269)),
    linear-gradient(180deg,var(--skin-c961),var(--skin-c962));
}
body.final-case.case-visual-success{
  --page-scene:url("../../theme/assets/case-artwork-victory.png");
  background-image:url("../../theme/assets/case-artwork-victory.png");
  --page-scene-position:center 54%;
  --page-accent:var(--skin-c963);
  --page-accent-soft:var(--skin-c964);
  --page-vignette:var(--skin-c965);
}
body.final-case.case-visual-success::after{
  background:
    radial-gradient(circle at 78% 22%,var(--skin-c966),transparent 18%),
    linear-gradient(90deg,var(--skin-c967),var(--skin-c968) 52%,var(--skin-c969)),
    linear-gradient(180deg,var(--skin-c970),var(--skin-c971));
}
body.final-case.case-visual-failure{
  --page-scene:url("../../theme/assets/case-artwork-defeat.png");
  background-image:url("../../theme/assets/case-artwork-defeat.png");
  --page-scene-position:center 58%;
  --page-accent:var(--skin-c618);
  --page-accent-soft:var(--skin-c619);
  --page-vignette:var(--skin-c620);
}
body.final-case.case-visual-failure::after{
  background:
    radial-gradient(circle at 43% 77%,var(--skin-c621),transparent 24%),
    linear-gradient(90deg,var(--skin-c622),var(--skin-c623) 48%,var(--skin-c624)),
    linear-gradient(180deg,var(--skin-c625),var(--skin-c626));
}
body.final-case.case-visual-success .case-result{
  box-shadow:0 24px 64px var(--skin-c190),0 0 36px var(--skin-c972),inset 0 1px var(--skin-c519),inset 0 -8px 20px var(--skin-c520);
}
body.final-case.case-visual-failure .case-result{
  box-shadow:0 24px 64px var(--skin-c973),0 0 24px var(--skin-c974),inset 0 1px var(--skin-c975),inset 0 -8px 20px var(--skin-c976);
}


/* 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,var(--skin-c977),var(--skin-c978) 50%,var(--skin-c977)),
    url("../../theme/assets/surface-primary.jpg") center/cover;
  --home-card-fill-soft:
    linear-gradient(var(--skin-c224),var(--skin-c244)),
    linear-gradient(var(--skin-c979),var(--skin-c114)),
    url("../../theme/assets/surface-primary.jpg") center/cover;
  --home-card-border:var(--skin-c537);
  --home-card-border-strong:var(--skin-c980);
  --home-card-text:var(--skin-c262);
  --home-card-muted:var(--skin-c263);
  --home-card-accent:var(--skin-c247);
  --home-card-shadow:0 16px 34px var(--skin-c981), inset 0 1px var(--skin-c982), inset 0 -5px 14px var(--skin-c983);
}

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 var(--skin-c225), inset 0 1px var(--skin-c984), inset 0 -8px 18px var(--skin-c985)!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 var(--skin-c289);
}

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,var(--skin-c986),var(--skin-c987) 50%,var(--skin-c986)),
    url("../../theme/assets/surface-primary.jpg") center/cover!important;
  border-color:var(--home-card-border-strong)!important;
  box-shadow:0 18px 38px var(--skin-c108), 0 0 0 1px var(--skin-c988), inset 0 1px var(--skin-c989)!important;
}
body.final-case .evidence-card.revealed{
  border-color:var(--skin-c990)!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:var(--skin-c991);color:var(--skin-c262)}
body.final-case .notice{
  background:var(--skin-c992)!important;
  border-left:4px solid var(--home-card-accent)!important;
  color:var(--skin-c993)!important;
}
body.final-case .resolution{
  background:
    linear-gradient(90deg,var(--skin-c994),var(--skin-c995) 50%,var(--skin-c994)),
    url("../../theme/assets/surface-primary.jpg") center/cover!important;
  border:1px solid var(--skin-c996)!important;
}
body.final-case .resolution h3{color:var(--skin-c997)!important}
body.final-case .resolution p{color:var(--skin-c998)!important}
body.final-case .era-complete{
  background:
    linear-gradient(90deg,var(--skin-c274),var(--skin-c999) 50%,var(--skin-c274)),
    url("../../theme/assets/surface-primary.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:var(--skin-c262)!important}
body.final-case .case-result.success{border-color:var(--skin-c1000)!important}
body.final-case .case-result.failed{border-color:var(--skin-c1001)!important}
body.final-case .completed-banner strong,
body.final-case .locked-case strong{color:var(--skin-c262)!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,var(--skin-c1002),var(--skin-c1003) 50%,var(--skin-c1002)),url("../../theme/assets/surface-primary.jpg") center/cover;
  --case-home-panel-border:var(--skin-c1004);
  --case-home-panel-shadow:0 16px 34px var(--skin-c253),inset 0 1px var(--skin-c1005),inset 0 -5px 14px var(--skin-c985);
  --case-home-copy:var(--skin-c262);
  --case-home-copy-soft:var(--skin-c263);
  --case-home-accent:var(--skin-c247);
}
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 var(--skin-c1006), inset 0 0 0 1px var(--skin-c1007);
}
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:var(--skin-c249)!important;
  text-shadow:0 2px 10px var(--skin-c250)!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,var(--skin-c1008),var(--skin-c260) 50%,var(--skin-c1008)),url("../../theme/assets/surface-primary.jpg") center/cover!important;
  border-color:var(--skin-c1009)!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:var(--skin-c265)!important;
  box-shadow:0 18px 40px var(--skin-c192),0 0 0 1px var(--skin-c193),0 0 22px var(--skin-c194)!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 var(--skin-c1010)!important;
  outline-offset:2px!important;
}
body.final-case .resolution{
  background:linear-gradient(90deg,var(--skin-c1011),var(--skin-c1012) 54%,var(--skin-c1011)),url("../../theme/assets/surface-primary.jpg") center/cover!important;
  border-color:var(--skin-c1013)!important;
}
body.final-case .resolution p{color:var(--skin-c1014)!important}
body.final-case .era-complete{
  background:linear-gradient(90deg,var(--skin-c1015),var(--skin-c1016) 50%,var(--skin-c1015)),url("../../theme/assets/surface-primary.jpg") center/cover!important;
  border-color:var(--skin-c1017)!important;
}
body.final-case .locked-case strong,
body.final-case .completed-banner strong{color:var(--skin-c249)!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.tracce-level-page{
  --level-result-panel:
    linear-gradient(90deg,var(--skin-c1018),var(--skin-c1019) 50%,var(--skin-c1018)),
    url("../../theme/assets/surface-primary.jpg") center/cover;
  --level-result-border:var(--skin-c1020);
  --level-result-border-warm:var(--skin-c1021);
  --level-result-text:var(--skin-c262);
  --level-result-muted:var(--skin-c263);
  --level-result-accent:var(--skin-c247);
}
body.tracce-level-page #resultScreen{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
body.tracce-level-page #resultScreen.hidden{display:none!important}
body.tracce-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,var(--skin-c1018),var(--skin-c1019) 50%,var(--skin-c1018)),
    url("../../theme/assets/surface-primary.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 24px 58px var(--skin-c596),inset 0 1px var(--skin-c1005),inset 0 -7px 18px var(--skin-c1022)!important;
  color:var(--level-result-text)!important;
}
body.tracce-level-page #resultScreen > .result-card::before{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  pointer-events:none!important;
  opacity:1!important;
  border:1px solid var(--skin-c992)!important;
  border-radius:22px!important;
  background:none!important;
  box-shadow:inset 0 0 22px var(--skin-c1023)!important;
}
body.tracce-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.tracce-level-page #resultScreen > .result-card > *{position:relative;z-index:1}
body.tracce-level-page #resultScreen .kicker{
  color:var(--level-result-accent)!important;
  letter-spacing:.17em;
}
body.tracce-level-page #resultScreen .result-card h2{
  margin:.24em 0 .18em!important;
  color:var(--skin-c249)!important;
  font-family:var(--ds-font-display)!important;
  font-size:clamp(34px,4.1vw,58px)!important;
  letter-spacing:.015em;
  text-shadow:0 2px 10px var(--skin-c973)!important;
}
body.tracce-level-page #resultScreen .result-score{
  margin:.08em 0 .20em;
  color:var(--skin-c232)!important;
  font-family:var(--ds-font-display)!important;
  font-size:clamp(58px,7vw,94px)!important;
  line-height:.95;
  text-shadow:0 3px 14px var(--skin-c311)!important;
}
body.tracce-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 var(--skin-c250)!important;
}
body.tracce-level-page #resultScreen .result-card.passed{
  border-color:var(--skin-c1024)!important;
  box-shadow:0 24px 58px var(--skin-c596),0 0 24px var(--skin-c1025),inset 0 1px var(--skin-c1005),inset 0 -7px 18px var(--skin-c1022)!important;
}
body.tracce-level-page #resultScreen .result-card.failed{
  border-color:var(--skin-c1026)!important;
  box-shadow:0 24px 58px var(--skin-c596),0 0 22px var(--skin-c1027),inset 0 1px var(--skin-c1005),inset 0 -7px 18px var(--skin-c1022)!important;
}
body.tracce-level-page #resultScreen .result-card.passed::after{
  background:linear-gradient(90deg,transparent,var(--skin-c1028) 22%,var(--skin-c1029) 50%,var(--skin-c1028) 78%,transparent);
}
body.tracce-level-page #resultScreen .result-card.failed::after{
  background:linear-gradient(90deg,transparent,var(--skin-c1030) 22%,var(--skin-c1031) 50%,var(--skin-c1030) 78%,transparent);
}
body.tracce-level-page #resultScreen .footer-actions{
  gap:10px!important;
  margin-top:8px;
}
body.tracce-level-page #resultScreen .btn{
  min-height:44px;
  border-color:var(--skin-c1032)!important;
  background:linear-gradient(180deg,var(--skin-c1033),var(--skin-c1034))!important;
  color:var(--skin-c262)!important;
  box-shadow:0 8px 20px var(--skin-c267),inset 0 1px var(--skin-c1035)!important;
}
body.tracce-level-page #resultScreen .btn:hover{filter:brightness(1.10)}
body.tracce-level-page #resultScreen .btn.primary{
  background:linear-gradient(180deg,var(--skin-c1036),var(--skin-c1037))!important;
  border-color:var(--skin-c1038)!important;
  color:var(--skin-c050)!important;
}
body.level-5 #resultScreen .case-unlocked{
  position:relative;
  margin:22px auto 16px;
  max-width:760px;
  padding:18px 20px;
  border:1px solid var(--skin-c1039)!important;
  border-radius:18px!important;
  background:
    linear-gradient(90deg,var(--skin-c1011),var(--skin-c1040) 50%,var(--skin-c1011)),
    url("../../theme/assets/surface-primary.jpg") center/cover!important;
  color:var(--skin-c1041)!important;
  box-shadow:0 14px 30px var(--skin-c225),inset 0 1px var(--skin-c1042)!important;
}
body.level-5 #resultScreen .case-unlocked strong{color:var(--skin-c997)!important;letter-spacing:.08em}
body.level-5 #resultScreen .case-unlocked p{color:var(--skin-c1043)!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,var(--skin-c1002),var(--skin-c1003) 50%,var(--skin-c1002)),
    url("../../theme/assets/surface-primary.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 var(--skin-c1006),inset 0 0 0 1px var(--skin-c1007)!important;
}

@media(max-width:760px){
  body.tracce-level-page #resultScreen > .result-card{padding:24px 16px!important;border-radius:18px!important}
  body.tracce-level-page #resultScreen > .result-card::before{inset:7px!important;border-radius:14px!important}
  body.tracce-level-page #resultScreen .footer-actions{flex-direction:column;align-items:stretch}
  body.tracce-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 var(--skin-c401);
  border-radius:inherit;
  box-shadow:inset 0 0 18px var(--skin-c1044);
}
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 var(--skin-c537);
  border-radius:16px;
  background:var(--skin-c1045);
  box-shadow:0 12px 28px var(--skin-c225),inset 0 1px var(--skin-c1046);
}
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 var(--skin-c250)!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("../../theme/assets/case-artwork-default.png");
  background-image:url("../../theme/assets/case-artwork-default.png");
}
body.final-case.case-visual-success{
  --page-scene:url("../../theme/assets/case-artwork-victory.png");
  background-image:url("../../theme/assets/case-artwork-victory.png");
}
body.final-case.case-visual-failure{
  --page-scene:url("../../theme/assets/case-artwork-defeat.png");
  background-image:url("../../theme/assets/case-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}
}

/* Point 5 — selected answer is provisional until the user confirms/continues. */
body.tracce-level-page .answer-choice.selected:not(:disabled){
  border-color:var(--skin-c920)!important;
  background:linear-gradient(180deg,var(--skin-c1047),var(--skin-c1048))!important;
  box-shadow:inset 0 0 0 1px var(--skin-c1049),0 8px 22px var(--skin-c416)!important;
}

/* Point 6 — outcome must be readable from the whole result panel, not only from text/images. */
body.tracce-level-page #quizScreen.outcome-correct > .card{
  background-image:
    linear-gradient(var(--skin-c1050),var(--skin-c1051)),
    linear-gradient(118deg,var(--skin-c1052),var(--skin-c1053) 56%,var(--skin-c1054)),
    var(--page-scene),
    url("../../theme/assets/surface-secondary.jpg") !important;
  border-color:var(--skin-c923)!important;
  box-shadow:0 26px 62px var(--skin-c192),0 0 36px var(--skin-c1055),inset 0 1px var(--skin-c1056),inset 0 -18px 34px var(--skin-c1057)!important;
}
body.tracce-level-page #quizScreen.outcome-wrong > .card{
  background-image:
    linear-gradient(var(--skin-c1058),var(--skin-c1059)),
    linear-gradient(118deg,var(--skin-c1060),var(--skin-c1061) 56%,var(--skin-c1062)),
    var(--page-scene),
    url("../../theme/assets/surface-secondary.jpg") !important;
  border-color:var(--skin-c926)!important;
  box-shadow:0 26px 62px var(--skin-c587),0 0 34px var(--skin-c1063),inset 0 1px var(--skin-c1064),inset 0 -18px 34px var(--skin-c1065)!important;
}
body.tracce-level-page #resultScreen > .result-card.passed{
  background-image:
    linear-gradient(var(--skin-c1066),var(--skin-c1067)),
    linear-gradient(118deg,var(--skin-c1052),var(--skin-c1053) 56%,var(--skin-c1054)),
    var(--page-scene),
    url("../../theme/assets/surface-secondary.jpg") !important;
  border-color:var(--skin-c923)!important;
  box-shadow:0 26px 62px var(--skin-c587),0 0 38px var(--skin-c1068),inset 0 1px var(--skin-c1056),inset 0 -18px 34px var(--skin-c1057)!important;
}
body.tracce-level-page #resultScreen > .result-card.failed{
  background-image:
    linear-gradient(var(--skin-c1069),var(--skin-c1070)),
    linear-gradient(118deg,var(--skin-c1060),var(--skin-c1061) 56%,var(--skin-c1062)),
    var(--page-scene),
    url("../../theme/assets/surface-secondary.jpg") !important;
  border-color:var(--skin-c926)!important;
  box-shadow:0 26px 62px var(--skin-c596),0 0 36px var(--skin-c1071),inset 0 1px var(--skin-c1064),inset 0 -18px 34px var(--skin-c1065)!important;
}
body.final-case #resultCard.success{
  background-image:
    linear-gradient(var(--skin-c1072),var(--skin-c1073)),
    radial-gradient(circle at 50% 18%,var(--skin-c1074),transparent 30%),
    var(--page-scene),
    url("../../theme/assets/surface-secondary.jpg") !important;
  border-color:var(--skin-c923)!important;
  box-shadow:0 30px 82px var(--skin-c596),0 0 44px var(--skin-c1075),inset 0 1px var(--skin-c1056)!important;
}
body.final-case #resultCard.failed{
  background-image:
    linear-gradient(var(--skin-c1076),var(--skin-c1077)),
    radial-gradient(circle at 50% 18%,var(--skin-c1078),transparent 30%),
    var(--page-scene),
    url("../../theme/assets/surface-secondary.jpg") !important;
  border-color:var(--skin-c926)!important;
  box-shadow:0 30px 82px var(--skin-c311),0 0 40px var(--skin-c1079),inset 0 1px var(--skin-c1064)!important;
}
body.final-case #resultCard.success::before{
  background:radial-gradient(circle at 50% 15%,var(--skin-c1080),transparent 30%)!important;
}
body.final-case #resultCard.failed::before{
  background:radial-gradient(circle at 50% 15%,var(--skin-c1081),transparent 30%)!important;
}

/* POINT 10 — MOBILE FINAL-VICTORY HOME ACTION */
body.final-case .mobile-success-home{display:none!important}
@media (max-width:760px){
  body.final-case #resultCard.success .mobile-success-home{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    flex:1 1 100%;
    width:100%;
    min-height:48px;
  }
}


/* 2026-10-04 — DESKTOP-ONLY LAYOUT SEPARATION
   Keep phone/tablet rules untouched. On wide desktop, procedural games use the
   full work surface instead of inheriting compact/mobile proportions. */
@media (min-width:1181px){
  body.tracce-level-page.quiz-active #quizScreen > .card:has(.answer-grid.procedural-active){
    grid-template-columns:minmax(330px,.50fr) minmax(0,1.50fr)!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
    column-gap:30px!important;
    row-gap:12px!important;
    min-height:clamp(540px,68vh,780px)!important;
    height:auto!important;
  }
  body.tracce-level-page.quiz-active #quizScreen > .card:has(.answer-grid.procedural-active) .quiz-top{grid-column:1!important;grid-row:1!important}
  body.tracce-level-page.quiz-active #quizScreen > .card:has(.answer-grid.procedural-active) .topic-pill{grid-column:1!important;grid-row:2!important}
  body.tracce-level-page.quiz-active #quizScreen > .card:has(.answer-grid.procedural-active) .question-text{
    grid-column:1!important;grid-row:3!important;max-width:none!important;align-self:start!important;
  }
  body.tracce-level-page.quiz-active #quizScreen > .card:has(.answer-grid.procedural-active) .answer-grid.procedural-active{
    grid-column:2!important;grid-row:1 / span 3!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    align-self:stretch!important;justify-self:stretch!important;
    display:flex!important;align-items:center!important;
    overflow:visible!important;max-height:none!important;padding:0!important;
  }
  body.tracce-level-page.quiz-active #quizScreen > .card:has(.answer-grid.procedural-active) .quiz-feedback{
    grid-column:1 / -1!important;grid-row:4!important;max-height:none!important;overflow:visible!important;
  }
  body.tracce-level-page.quiz-active #quizScreen > .card:has(.answer-grid.procedural-active) .footer-actions{
    grid-column:1 / -1!important;grid-row:5!important;
  }
  body.tracce-level-page.quiz-active .answer-grid.procedural-active > .pgame,
  body.tracce-level-page.quiz-active .answer-grid.procedural-active .pgame-match,
  body.tracce-level-page.quiz-active .answer-grid.procedural-active .pgame-excavation{
    width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;
  }

  /* MATCH EVIDENCE — use the wide desktop column. */
  body.tracce-level-page.quiz-active .pgame-match{gap:12px!important}
  body.tracce-level-page.quiz-active .pgame-match-row{
    width:100%!important;
    grid-template-columns:minmax(260px,.92fr) minmax(360px,1.08fr)!important;
    gap:18px!important;padding:16px 18px!important;min-height:92px!important;
  }
  body.tracce-level-page.quiz-active .pgame-match-row span{font-size:20px!important;line-height:1.28!important}
  body.tracce-level-page.quiz-active .pgame-match-row select{min-height:64px!important;font-size:20px!important;padding:12px 16px!important}

  /* EXCAVATION — never collapse labels into one-character columns on desktop. */
  body.tracce-level-page.quiz-active .pgame-excavation{gap:16px!important}
  body.tracce-level-page.quiz-active .pgame-exc-key{gap:14px!important;justify-content:flex-start!important}
  body.tracce-level-page.quiz-active .pgame-exc-key span{font-size:15px!important;padding:8px 12px!important}
  body.tracce-level-page.quiz-active .pgame-exc-grid{
    width:100%!important;
    grid-template-columns:repeat(var(--exc-cols),minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.tracce-level-page.quiz-active .pgame-exc-cell{
    min-width:0!important;min-height:154px!important;padding:14px 15px!important;gap:10px!important;
  }
  body.tracce-level-page.quiz-active .pgame-exc-cell>b{font-size:26px!important;line-height:1!important}
  body.tracce-level-page.quiz-active .pgame-exc-cell small{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:10px!important;font-size:14px!important;line-height:1.2!important;min-width:0!important;
  }
  body.tracce-level-page.quiz-active .pgame-exc-signal-label{display:flex!important;min-width:0!important;gap:7px!important;align-items:center!important}
  body.tracce-level-page.quiz-active .pgame-exc-signal-label>span:last-child{
    min-width:0!important;overflow-wrap:normal!important;word-break:normal!important;white-space:normal!important;
  }
  body.tracce-level-page.quiz-active .pgame-exc-signal-icon{width:24px!important;height:24px!important;flex:0 0 24px!important}
  body.tracce-level-page.quiz-active .pgame-exc-meter{gap:3px!important;flex:0 0 auto!important}
  body.tracce-level-page.quiz-active .pgame-exc-meter i{width:13px!important;height:13px!important}

  /* LEVEL 5 — the four evidence cards must expand naturally: no internal scrollbar. */
  body.level-5.quiz-active #quizScreen > .card:not(:has(.answer-grid.procedural-active)){
    min-height:clamp(590px,70vh,790px)!important;
    grid-template-columns:minmax(500px,.96fr) minmax(0,1.04fr)!important;
    height:auto!important;
  }
  body.level-5.quiz-active #quizScreen .clue-grid{
    max-height:none!important;overflow:visible!important;padding-right:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;align-self:start!important;
  }
  body.level-5.quiz-active #quizScreen .clue-card{min-height:0!important;padding:13px 15px!important}
  body.level-5.quiz-active #quizScreen .clue-card p{font-size:16px!important;line-height:1.38!important}
}