/* TRACES IN TIME — ERA I — RESPONSIVE VISUAL LAYER V2
   Presentation-only layer. Game engines, data, scoring, progression and links remain untouched. */

:root{
  --tt-glass:linear-gradient(112deg,var(--skin-c1082),var(--skin-c1083));
  --tt-glass-soft:linear-gradient(120deg,var(--skin-c1084),var(--skin-c1085));
  --tt-border:var(--skin-c1086);
  --tt-border-strong:var(--skin-c1087);
  --tt-text:var(--skin-c249);
  --tt-muted:var(--skin-c1088);
  --tt-accent:var(--skin-c1089);
  --tt-shadow:0 24px 80px var(--skin-c190);
}

body.tracce-level-page,
body.tracce-case-page{
  overflow-x:hidden;
  color:var(--tt-text);
}
body.tracce-level-page::after,
body.tracce-case-page::after{
  background:
    radial-gradient(circle at 50% 58%,transparent 0 18%,var(--skin-c1090) 40%,var(--skin-c1091) 100%),
    linear-gradient(180deg,var(--skin-c1092),var(--skin-c1093));
}

/* Shared compact HUD/header */
body.tracce-level-page .game-header,
body.tracce-case-page .game-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  width:100%!important;
  max-width:none!important;
  min-height:68px;
  margin:0!important;
  padding:11px 14px!important;
  border:1px solid var(--tt-border)!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,var(--skin-c1094),var(--skin-c1095))!important;
  box-shadow:0 12px 36px var(--skin-c213)!important;
  backdrop-filter:blur(15px);
  overflow:visible!important;
}
body.tracce-level-page .game-header::before,
body.tracce-case-page .game-header::before{display:none!important}
body.tracce-level-page .game-header > div:first-child,
body.tracce-case-page .game-header > div:first-child{min-width:0}
body.tracce-level-page .game-header h1,
body.tracce-case-page .game-header h1{
  margin:2px 0 1px!important;
  color:var(--tt-text)!important;
  font-size:clamp(22px,2.2vw,34px)!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  text-shadow:0 3px 15px var(--skin-c1096)!important;
}
body.tracce-level-page .game-header p,
body.tracce-case-page .game-header p{
  margin:0!important;
  color:var(--tt-muted)!important;
  font-size:11px!important;
  letter-spacing:.08em;
}
body.tracce-level-page .game-header .kicker,
body.tracce-case-page .game-header .kicker{font-size:9px!important;color:var(--tt-accent)!important;letter-spacing:.17em!important}
body.tracce-level-page .header-actions,
body.tracce-case-page .header-actions{align-items:center!important;gap:8px!important;flex-wrap:nowrap!important}
body.tracce-level-page .game-header .btn,
body.tracce-case-page .game-header .btn{
  min-height:40px!important;
  padding:10px 13px!important;
  border-radius:12px!important;
  background:var(--skin-c1097)!important;
  border-color:var(--skin-c1098)!important;
  color:var(--skin-c1099)!important;
  backdrop-filter:blur(12px);
  text-shadow:none!important;
}

/* Shared dark glass work surfaces */
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 .case-art-panel,
body.tracce-case-page #caseContent > section.card,
body.tracce-case-page #investigationSection > .card,
body.tracce-case-page #reportSection > .card,
body.tracce-case-page #resultCard{
  border:1px solid var(--tt-border)!important;
  background:var(--tt-glass)!important;
  color:var(--tt-text)!important;
  box-shadow:var(--tt-shadow)!important;
  backdrop-filter:blur(16px)!important;
}
body.tracce-level-page #dashboard > .card::after,
body.tracce-level-page #quizScreen > .card::after,
body.tracce-level-page #resultScreen > .card::after,
body.tracce-case-page .briefing::after,
body.tracce-case-page .case-art-panel::after,
body.tracce-case-page #caseContent > section.card::after,
body.tracce-case-page #investigationSection > .card::after,
body.tracce-case-page #reportSection > .card::after{border-color:var(--skin-c1100)!important}
body.tracce-level-page .card h2,
body.tracce-level-page .card h3,
body.tracce-case-page .card h2,
body.tracce-case-page .card h3,
body.tracce-case-page #resultCard h2,
body.tracce-case-page #resultCard h3{color:var(--tt-text)!important;text-shadow:0 2px 10px var(--skin-c250)}
body.tracce-level-page .card p,
body.tracce-case-page .card p,
body.tracce-case-page #resultCard p{color:var(--tt-muted)!important}
body.tracce-level-page .notice,
body.tracce-case-page .notice{
  color:var(--skin-c1101)!important;
  background:var(--skin-c1102)!important;
  border:1px solid var(--skin-c1103)!important;
  border-left:4px solid var(--page-accent)!important;
}
body.tracce-level-page .notice strong,
body.tracce-case-page .notice strong{color:var(--skin-c939)!important}

/* Buttons */
body.tracce-level-page .btn,
body.tracce-case-page .btn{
  border-radius:13px!important;
  border-color:var(--skin-c1104)!important;
  background:linear-gradient(180deg,var(--skin-c1105),var(--skin-c1106))!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 .btn.primary,
body.tracce-case-page .btn.primary{
  background:linear-gradient(180deg,var(--skin-c1107),var(--skin-c1108))!important;
  border-color:var(--skin-c1109)!important;
  color:var(--skin-c1110)!important;
}
body.tracce-level-page .btn.ghost,
body.tracce-case-page .btn.ghost{background:var(--skin-c1111)!important}

/* Metrics / pills */
body.tracce-level-page .level-meta,
body.tracce-case-page .case-metrics{gap:9px!important}
body.tracce-level-page .metric,
body.tracce-case-page .case-metric,
body.tracce-case-page .big-score{
  border-radius:14px!important;
  background:linear-gradient(180deg,var(--skin-c1112),var(--skin-c1113))!important;
  border-color:var(--skin-c1114)!important;
  box-shadow:inset 0 1px var(--skin-c1115),0 8px 22px var(--skin-c203)!important;
}
body.tracce-level-page .metric b,
body.tracce-case-page .case-metric b,
body.tracce-case-page .big-score b{color:var(--skin-c939)!important}
body.tracce-level-page .metric span,
body.tracce-case-page .case-metric span,
body.tracce-case-page .big-score span{color:var(--skin-c1116)!important}
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-c1117)!important;
  background:var(--skin-c1118)!important;
  color:var(--skin-c1119)!important;
}

/* Question and answer styling */
body.tracce-level-page .quiz-top{margin:0!important}
body.tracce-level-page .quiz-count{color:var(--skin-c1120)!important;font-size:12px!important;letter-spacing:.11em;text-transform:uppercase}
body.tracce-level-page .quiz-score{color:var(--skin-c1120)!important;font-size:12px!important}
body.tracce-level-page .topic-pill{margin:0!important;align-self:start;width:max-content}
body.tracce-level-page .question-text{
  color:var(--skin-c823)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(26px,2.2vw,38px)!important;
  line-height:1.12!important;
  margin:0!important;
  text-shadow:0 2px 12px var(--skin-c587);
}
body.tracce-level-page .answer-grid{gap:12px!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{
  border-radius:17px!important;
  border-color:var(--skin-c1121)!important;
  background:linear-gradient(180deg,var(--skin-c1122),var(--skin-c1123))!important;
  color:var(--skin-c1124)!important;
  box-shadow:inset 0 1px var(--skin-c1125),0 6px 18px var(--skin-c611)!important;
}
body.tracce-level-page .answer-choice{
  min-height:96px!important;
  padding:15px 17px!important;
  font-size:clamp(14px,1.05vw,17px)!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{
  border-color:var(--skin-c1126)!important;
  background:linear-gradient(180deg,var(--skin-c1127),var(--skin-c1128))!important;
  transform:translateY(-1px);
}
body.tracce-level-page .answer-choice.correct{border-color:var(--skin-c1129)!important;background:linear-gradient(180deg,var(--skin-c1130),var(--skin-c1131))!important}
body.tracce-level-page .answer-choice.wrong{border-color:var(--skin-c1132)!important;background:linear-gradient(180deg,var(--skin-c1133),var(--skin-c1134))!important}
body.tracce-level-page .quiz-feedback{
  margin:0!important;
  border-radius:15px!important;
  background:var(--skin-c1135)!important;
  color:var(--skin-c1136)!important;
  border-color:var(--skin-c1137)!important;
}
body.tracce-level-page .quiz-feedback p{color:var(--skin-c1138)!important}
body.tracce-level-page .quiz-feedback.ok{border-color:var(--skin-c1139)!important;background:var(--skin-c1140)!important}
body.tracce-level-page .quiz-feedback.bad{border-color:var(--skin-c1141)!important;background:var(--skin-c1142)!important}
body.tracce-level-page .clue-grid{gap:9px!important;margin:0!important}
body.tracce-level-page .clue-card p{color:var(--skin-c1143)!important}
body.tracce-level-page .clue-card span{color:var(--skin-c1089)!important}

/* LEVEL RESULT */
body.tracce-level-page #resultScreen .result-card{
  color:var(--tt-text)!important;
  text-align:center!important;
}
body.tracce-level-page #resultScreen .result-score{color:var(--skin-c232)!important}
body.tracce-level-page #resultScreen .result-card > p{color:var(--tt-muted)!important}

/* FINAL CASE elements */
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{
  background:linear-gradient(180deg,var(--skin-c1144),var(--skin-c1145))!important;
  color:var(--skin-c1146)!important;
  border-color:var(--skin-c1121)!important;
  box-shadow:inset 0 1px var(--skin-c1147),0 6px 16px var(--skin-c668)!important;
}
body.final-case .person-card p,
body.final-case .evidence-card p,
body.final-case .notebook-item p,
body.final-case .proof-choice small{color:var(--skin-c643)!important}
body.final-case .person-code,
body.final-case .evidence-id,
body.final-case .notebook-item span,
body.final-case .proof-choice span{color:var(--skin-c1089)!important}
body.final-case .location-tab.active,
body.final-case .proof-choice.selected{
  border-color:var(--skin-c1148)!important;
  background:linear-gradient(180deg,var(--skin-c1149),var(--skin-c1150))!important;
  box-shadow:0 0 0 1px var(--skin-c1151),0 10px 22px var(--skin-c1152)!important;
}
body.final-case .location-head h2{color:var(--skin-c1153)!important}
body.final-case .location-head p{color:var(--skin-c1154)!important}
body.final-case .report-field label{color:var(--skin-c1089)!important}
body.final-case .report-field select{
  border-radius:13px!important;
  border-color:var(--skin-c1155)!important;
  background:var(--skin-c1156)!important;
  color:var(--skin-c1146)!important;
}
body.final-case .report-gate,
body.final-case .completed-banner,
body.final-case .resolution,
body.final-case .era-complete{border-radius:16px!important}

/* =========================================================
   DESKTOP — full viewport game board
   ========================================================= */
@media (min-width:1181px){
  body.tracce-level-page .shell,
  body.tracce-case-page .shell{
    width:100%;max-width:none!important;min-height:100svh;
    padding:18px max(24px,2.2vw) max(18px,2vh)!important;
  }
  body.tracce-level-page .level-shell,
  body.tracce-case-page .case-shell{width:100%;max-width:none!important;margin:0!important}

  body.tracce-level-page main{min-height:calc(100svh - 92px)}
  body.tracce-level-page #dashboard{
    min-height:calc(100svh - 92px);
    padding:18px 0!important;
    display:flex;
    align-items:center;
  }
  body.tracce-level-page #dashboard > .card{
    width:100%!important;max-width:none!important;margin:0!important;transform:none!important;
    padding:24px 26px!important;border-radius:25px!important;
  }
  body.tracce-level-page #dashboard .level-rule{grid-template-columns:minmax(0,1.55fr) auto!important;gap:22px!important}
  body.tracce-level-page #dashboard .level-meta{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:18px 0 14px!important}
  body.tracce-level-page #dashboard .metric{padding:13px 15px!important}
  body.tracce-level-page #dashboard .source-note{max-width:980px;color:var(--skin-c1157)!important}

  body.tracce-level-page #quizScreen:not(.hidden),
  body.tracce-level-page #resultScreen:not(.hidden){
    min-height:calc(100svh - 92px);
    padding:18px 0!important;
    display:flex;
    align-items:center;
  }
  body.tracce-level-page #quizScreen > .card{
    position:relative;
    width:100%!important;max-width:none!important;margin:0!important;
    min-height:clamp(405px,49vh,570px);
    padding:24px 26px 18px!important;
    border-radius:26px!important;
    display:grid;
    grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    column-gap:24px;
    row-gap:12px;
    overflow:hidden;
  }
  body.tracce-level-page #quizScreen .quiz-top{grid-column:1;grid-row:1;align-self:start}
  body.tracce-level-page #quizScreen .topic-pill{grid-column:1;grid-row:2}
  body.tracce-level-page #quizScreen .question-text{grid-column:1;grid-row:3;align-self:start;max-width:560px}
  body.tracce-level-page #quizScreen .clue-grid{grid-column:1;grid-row:4;align-self:start;max-height:170px;overflow:auto;padding-right:3px}
  body.tracce-level-page #quizScreen .answer-grid{
    grid-column:2;grid-row:1 / span 4;
    align-self:center;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:center;
    max-height:100%;
    overflow:auto;
    padding:2px 3px 2px 0;
  }
  body.tracce-level-page #quizScreen .quiz-feedback{
    grid-column:1;grid-row:4;
    align-self:end;
    max-height:145px;
    overflow:auto;
  }
  body.tracce-level-page #quizScreen .clue-grid:not(.hidden) ~ .quiz-feedback{grid-row:5}
  body.tracce-level-page #quizScreen .footer-actions{
    grid-column:1 / -1;
    grid-row:6;
    margin:0!important;
    padding-top:10px;
    border-top:1px solid var(--skin-c1158);
  }
  body.tracce-level-page #quizScreen .footer-actions .btn{min-width:210px}

  body.tracce-level-page #resultScreen > .result-card{
    width:100%!important;max-width:none!important;margin:0!important;
    min-height:clamp(360px,46vh,520px);
    padding:34px 30px!important;
    border-radius:26px!important;
    display:flex;flex-direction:column;justify-content:center;
  }

  /* Final case uses the available desktop width rather than a centered narrow column. */
  body.final-case main{width:100%}
  body.final-case .case-hero{
    width:100%;max-width:none!important;
    grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr)!important;
    gap:18px!important;margin:18px 0!important;padding:0!important;
  }
  body.final-case .case-hero .briefing,
  body.final-case .case-art-panel{min-height:310px}
  body.final-case .case-hero .briefing h1{font-size:clamp(46px,5vw,76px)!important}
  body.final-case .case-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.final-case #caseContent > section.card,
  body.final-case #investigationSection > .card,
  body.final-case #reportSection > .card{width:100%;max-width:none!important;padding:24px!important;border-radius:24px!important}
  body.final-case .people-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.final-case .investigation-layout{grid-template-columns:minmax(220px,280px) minmax(0,1fr)!important;gap:22px!important}
  body.final-case .evidence-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.final-case .notebook{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.final-case .report-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.final-case .proof-picker{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.final-case .proof-review-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.final-case #resultSection{padding-top:18px}
  body.final-case #resultCard{width:100%;max-width:none!important;padding:32px!important;border-radius:24px!important}
}

/* =========================================================
   TABLET — wide touch layout
   ========================================================= */
@media (min-width:761px) and (max-width:1180px){
  body.tracce-level-page .shell,
  body.tracce-case-page .shell{padding:16px 18px 20px!important}
  body.tracce-level-page .level-shell,
  body.tracce-case-page .case-shell{max-width:none!important;width:100%!important;margin:0!important}
  body.tracce-level-page #dashboard > .card,
  body.tracce-level-page #quizScreen > .card,
  body.tracce-level-page #resultScreen > .card{width:100%!important;max-width:none!important;margin:0!important;transform:none!important;border-radius:22px!important}
  body.tracce-level-page #quizScreen{padding:18px 0!important}
  body.tracce-level-page #quizScreen > .card{padding:22px!important}
  body.tracce-level-page #quizScreen .answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tracce-level-page .answer-choice{min-height:78px!important}
  body.final-case .case-hero{max-width:none!important;width:100%!important;grid-template-columns:1fr 1fr!important}
  body.final-case .case-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.final-case .evidence-grid,
  body.final-case .notebook,
  body.final-case .proof-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* =========================================================
   PHONE — vertical touch-first layout
   ========================================================= */
@media (max-width:760px){
  body.tracce-level-page,
  body.tracce-case-page{background-position:center top!important}
  body.tracce-level-page .shell,
  body.tracce-case-page .shell{padding:9px 8px 18px!important}
  body.tracce-level-page .game-header,
  body.tracce-case-page .game-header{
    min-height:58px;padding:9px 10px!important;border-radius:14px!important;gap:8px!important;
  }
  body.tracce-level-page .game-header h1,
  body.tracce-case-page .game-header h1{font-size:20px!important}
  body.tracce-level-page .game-header p,
  body.tracce-case-page .game-header p{font-size:9px!important}
  body.tracce-level-page .game-header .kicker,
  body.tracce-case-page .game-header .kicker{font-size:7px!important}
  body.tracce-level-page .header-actions,
  body.tracce-case-page .header-actions{gap:5px!important}
  body.tracce-level-page .game-header .btn,
  body.tracce-case-page .game-header .btn{min-height:36px!important;padding:8px 9px!important;font-size:10px!important}

  body.tracce-level-page #dashboard{padding:12px 0 0!important}
  body.tracce-level-page #dashboard > .card,
  body.tracce-level-page #quizScreen > .card,
  body.tracce-level-page #resultScreen > .card{width:100%!important;max-width:none!important;margin:0!important;transform:none!important;border-radius:20px!important;padding:16px 13px!important}
  body.tracce-level-page #dashboard .level-rule{grid-template-columns:1fr!important}
  body.tracce-level-page #dashboard .level-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tracce-level-page #quizScreen{padding:12px 0!important}
  body.tracce-level-page #quizScreen .quiz-top{margin-bottom:10px!important}
  body.tracce-level-page #quizScreen .topic-pill{margin-bottom:10px!important}
  body.tracce-level-page .question-text{font-size:clamp(21px,6vw,29px)!important;margin-bottom:14px!important}
  body.tracce-level-page #quizScreen .answer-grid{grid-template-columns:1fr!important;gap:8px!important}
  body.tracce-level-page .answer-choice{min-height:62px!important;padding:11px 12px!important;font-size:14px!important;border-radius:14px!important}
  body.tracce-level-page .quiz-feedback{margin-top:11px!important}
  body.tracce-level-page #quizScreen .footer-actions{justify-content:stretch!important}
  body.tracce-level-page #quizScreen .footer-actions .btn{width:100%}
  body.tracce-level-page #resultScreen{padding:12px 0!important}
  body.tracce-level-page #resultScreen .result-score{font-size:58px!important}

  body.final-case .case-hero{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;max-width:none!important;margin:12px 0!important;padding:0!important}
  body.final-case .case-hero .briefing h1{font-size:42px!important}
  body.final-case .case-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.final-case .people-grid,
  body.final-case .evidence-grid,
  body.final-case .notebook,
  body.final-case .report-grid,
  body.final-case .proof-picker,
  body.final-case .proof-review-grid{grid-template-columns:1fr!important}
  body.final-case .investigation-layout{grid-template-columns:1fr!important}
  body.final-case .location-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;position:static!important}
  body.final-case #caseContent > section.card,
  body.final-case #investigationSection > .card,
  body.final-case #reportSection > .card,
  body.final-case #resultCard{padding:15px!important;border-radius:19px!important}
  body.final-case .case-art-panel{padding:13px!important}
}

@media (max-width:480px){
  body.tracce-level-page .game-header p,
  body.tracce-case-page .game-header p{display:none}
  body.tracce-level-page .game-header .kicker,
  body.tracce-case-page .game-header .kicker{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.final-case .location-tabs{grid-template-columns:1fr!important}
}


/* Language control: keep it clear of the Main menu button. */
body.tracce-level-page .tracce-language-switcher,
body.tracce-case-page .tracce-language-switcher{top:max(92px,calc(env(safe-area-inset-top) + 82px))!important;right:max(18px,env(safe-area-inset-right))!important;}
@media (min-width:761px) and (max-width:1180px){
  body.tracce-level-page .tracce-language-switcher,
  body.tracce-case-page .tracce-language-switcher{top:max(86px,calc(env(safe-area-inset-top) + 76px))!important;}
}
/* Mobile: place the language control below the header, never over its actions. */
@media (max-width:760px){
  body.tracce-level-page .tracce-language-switcher,
  body.tracce-case-page .tracce-language-switcher{
    position:absolute!important;
    top:max(108px,calc(env(safe-area-inset-top) + 100px))!important;
    right:max(8px,env(safe-area-inset-right))!important;
  }
  body.tracce-level-page main,
  body.tracce-case-page main{padding-top:42px!important;}
  body.tracce-level-page .tracce-language-switcher select,
  body.tracce-case-page .tracce-language-switcher select{
    min-width:118px!important;
    max-width:128px!important;
    padding-right:22px!important;
  }
}

/* POINT 11 — MOBILE FINAL CASE: COMPACT EVIDENCE / CLUE CARDS */
@media (max-width:760px){
  body.final-case .evidence-grid,
  body.final-case .notebook,
  body.final-case .proof-picker,
  body.final-case .proof-review-grid{gap:7px!important}

  body.final-case .evidence-card{
    min-height:0!important;
    padding:9px 10px!important;
    border-radius:12px!important;
  }
  body.final-case .evidence-card.sealed{min-height:82px!important}
  body.final-case .evidence-card h3{margin:3px 0 5px!important;font-size:15px!important;line-height:1.16!important}
  body.final-case .evidence-card p{font-size:12px!important;line-height:1.28!important}
  body.final-case .evidence-id{font-size:9px!important}

  body.final-case .notebook-wrap{margin-top:12px!important}
  body.final-case .notebook-item{padding:8px 9px!important;border-radius:10px!important}
  body.final-case .notebook-item strong{margin:2px 0 3px!important;font-size:13px!important;line-height:1.18!important}
  body.final-case .notebook-item p{font-size:11px!important;line-height:1.25!important}

  body.final-case .proof-choice{padding:9px 10px!important;border-radius:10px!important}
  body.final-case .proof-choice strong{margin:3px 0!important;font-size:13px!important;line-height:1.18!important}
  body.final-case .proof-choice small{font-size:11px!important;line-height:1.24!important}
  body.final-case .proof-review{padding:8px 9px!important;border-radius:10px!important}
  body.final-case .proof-review strong{margin-top:2px!important;font-size:13px!important;line-height:1.18!important}
}

/* POINT 12 — MOBILE FINAL CASE: STANDARD CARD HEIGHT + EXPAND/COLLAPSE */
@media (max-width:760px){
  body.final-case .evidence-card.revealed,
  body.final-case .notebook-item{
    height:124px!important;
    min-height:124px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  body.final-case .evidence-card.revealed .mobile-card-copy,
  body.final-case .notebook-item .mobile-card-copy{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.final-case .evidence-card.revealed.mobile-card-expanded,
  body.final-case .notebook-item.mobile-card-expanded{
    height:auto!important;
    min-height:124px!important;
    overflow:visible!important;
  }
  body.final-case .evidence-card.revealed.mobile-card-expanded .mobile-card-copy,
  body.final-case .notebook-item.mobile-card-expanded .mobile-card-copy{
    display:block!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
  }
  body.final-case .mobile-card-toggle{
    display:none;
    margin-top:auto;
    align-self:flex-start;
    min-height:30px;
    padding:3px 0 0;
    border:0;
    background:transparent;
    color:var(--skin-c1119);
    font:900 10px/1.15 var(--ui);
    letter-spacing:.04em;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
  }
  body.final-case .mobile-card-overflow > .mobile-card-toggle{display:inline-flex;align-items:center}
}


/* 2026-10-01 — MOBILE QUIZ VIEWPORT FIT
   During an active Level 1–5 challenge, question + answers + feedback + Confirm/Continue
   stay inside one device viewport. No page scroll is required to reach the action button. */
@media (max-width:760px){
  body.tracce-level-page.quiz-active{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  body.tracce-level-page.quiz-active .shell{
    box-sizing:border-box!important;
    height:100dvh!important;
    min-height:0!important;
    padding:max(5px,env(safe-area-inset-top)) 7px max(5px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }
  body.tracce-level-page.quiz-active .level-shell{
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
  }
  body.tracce-level-page.quiz-active .game-header{
    min-height:42px!important;
    margin:0!important;
    padding:5px 7px!important;
    border-radius:11px!important;
    gap:6px!important;
  }
  body.tracce-level-page.quiz-active .game-header .kicker,
  body.tracce-level-page.quiz-active .game-header p{display:none!important}
  body.tracce-level-page.quiz-active .game-header h1{
    margin:0!important;
    font-size:16px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
  }
  body.tracce-level-page.quiz-active .header-actions{gap:4px!important}
  body.tracce-level-page.quiz-active .game-header .btn{
    min-height:30px!important;
    padding:5px 7px!important;
    border-radius:9px!important;
    font-size:9px!important;
    line-height:1!important;
  }
  body.tracce-level-page.quiz-active .tracce-language-switcher{display:none!important}
  body.tracce-level-page.quiz-active main{
    height:100%!important;
    min-height:0!important;
    padding-top:0!important;
    overflow:hidden!important;
  }
  body.tracce-level-page.quiz-active #quizScreen{
    box-sizing:border-box!important;
    height:100%!important;
    min-height:0!important;
    padding:5px 0 0!important;
    overflow:hidden!important;
  }
  body.tracce-level-page.quiz-active #quizScreen > .card{
    box-sizing:border-box!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:8px 9px!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:auto auto auto minmax(0,1fr) auto 38px!important;
    gap:5px!important;
    border-radius:14px!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .quiz-top{
    min-height:16px!important;
    margin:0!important;
    line-height:1!important;
  }
  body.tracce-level-page.quiz-active .quiz-count,
  body.tracce-level-page.quiz-active .quiz-score{
    font-size:10px!important;
    line-height:1!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .topic-pill{
    width:max-content!important;
    max-width:100%!important;
    min-height:20px!important;
    margin:0!important;
    padding:4px 7px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.tracce-level-page.quiz-active .question-text{
    margin:0!important;
    font-size:clamp(16px,4.8vw,21px)!important;
    line-height:1.08!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .answer-grid{
    min-height:0!important;
    margin:0!important;
    gap:5px!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .answer-grid:not(.procedural-active){
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
    overflow:hidden!important;
  }
  body.tracce-level-page.quiz-active .answer-choice{
    box-sizing:border-box!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:5px 8px!important;
    border-radius:10px!important;
    font-size:clamp(11px,3.35vw,13px)!important;
    line-height:1.12!important;
    overflow:hidden!important;
  }
  body.tracce-level-page.quiz-active .answer-content{
    grid-template-columns:68px minmax(0,1fr)!important;
    gap:5px!important;
  }
  body.tracce-level-page.quiz-active .answer-leading-icons{width:68px!important;gap:2px!important}
  body.tracce-level-page.quiz-active .answer-leading-icons img{width:17px!important;height:17px!important;flex-basis:17px!important}
  body.tracce-level-page.quiz-active .answer-label-text{line-height:1.12!important;overflow-wrap:anywhere}
  body.tracce-level-page.quiz-active #quizScreen .answer-grid.procedural-active{
    overflow:auto!important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:1px;
  }
  body.tracce-level-page.quiz-active .quiz-feedback{
    box-sizing:border-box!important;
    min-height:0!important;
    max-height:64px!important;
    margin:0!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    overflow:hidden!important;
    font-size:10px!important;
    line-height:1.12!important;
  }
  body.tracce-level-page.quiz-active .quiz-feedback strong{
    margin:0 0 2px!important;
    font-size:10px!important;
    line-height:1.05!important;
  }
  body.tracce-level-page.quiz-active .quiz-feedback p{
    margin:0!important;
    font-size:10px!important;
    line-height:1.12!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .footer-actions{
    box-sizing:border-box!important;
    min-height:38px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .footer-actions .btn{
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    margin:0!important;
    padding:7px 10px!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:1!important;
  }
  body.tracce-level-page.quiz-active #quizScreen.outcome-correct .answer-choice,
  body.tracce-level-page.quiz-active #quizScreen.outcome-wrong .answer-choice{
    font-size:clamp(10.5px,3.1vw,12.5px)!important;
  }
}

/* Very short phones: preserve the fixed Continue row and compress only the content above it. */
@media (max-width:760px) and (max-height:650px){
  body.tracce-level-page.quiz-active .game-header{min-height:36px!important;padding:3px 6px!important}
  body.tracce-level-page.quiz-active .game-header h1{font-size:14px!important}
  body.tracce-level-page.quiz-active .game-header .btn{min-height:27px!important;padding:4px 6px!important;font-size:8px!important}
  body.tracce-level-page.quiz-active #quizScreen{padding-top:3px!important}
  body.tracce-level-page.quiz-active #quizScreen > .card{padding:6px 7px!important;gap:3px!important;grid-template-rows:auto auto auto minmax(0,1fr) auto 34px!important}
  body.tracce-level-page.quiz-active .question-text{font-size:clamp(14px,4.3vw,18px)!important;line-height:1.04!important}
  body.tracce-level-page.quiz-active .answer-choice{padding:3px 6px!important;font-size:clamp(10px,3vw,12px)!important}
  body.tracce-level-page.quiz-active .quiz-feedback{max-height:51px!important;padding:4px 6px!important}
  body.tracce-level-page.quiz-active .quiz-feedback p{-webkit-line-clamp:2!important;font-size:9px!important}
  body.tracce-level-page.quiz-active #quizScreen .footer-actions,
  body.tracce-level-page.quiz-active #quizScreen .footer-actions .btn{height:34px!important;min-height:34px!important}
}

/* 2026-10-01 — MOBILE COMPACT PASS R3
   Replaces the rigid quiz row grid with a content-flow layout. The goal is to fit
   ordinary challenges in one viewport and allow only a short, contained scroll when
   a challenge genuinely has too much material (e.g. Level 5 reconstructions). */
@media (max-width:760px){
  body.tracce-level-page.quiz-active #quizScreen > .card{
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    height:100%!important;
    min-height:0!important;
    padding:7px 8px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scroll-padding-bottom:44px;
  }
  body.tracce-level-page.quiz-active #quizScreen .quiz-top,
  body.tracce-level-page.quiz-active #quizScreen .topic-pill,
  body.tracce-level-page.quiz-active #quizScreen .question-text,
  body.tracce-level-page.quiz-active #quizScreen .reconstruction-help,
  body.tracce-level-page.quiz-active #quizScreen .clue-grid,
  body.tracce-level-page.quiz-active #quizScreen .quiz-feedback,
  body.tracce-level-page.quiz-active #quizScreen .footer-actions{
    flex:0 0 auto!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .topic-pill{
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.16!important;
    padding:4px 7px!important;
    margin:0!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .question-text{
    font-size:clamp(15px,4.7vw,19px)!important;
    line-height:1.09!important;
    margin:1px 0 2px!important;
    max-width:none!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .reconstruction-help{
    margin:0!important;
    padding:0 1px!important;
    font-size:10px!important;
    line-height:1.18!important;
    color:var(--skin-c1159)!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .answer-grid{
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .answer-grid:not(.procedural-active){
    flex:1 1 auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    grid-auto-rows:minmax(42px,auto)!important;
    align-content:stretch!important;
    gap:4px!important;
    overflow:visible!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .answer-grid.procedural-active{
    flex:1 1 auto!important;
    max-height:none!important;
    overflow:auto!important;
    padding-right:1px!important;
  }
  body.tracce-level-page.quiz-active .answer-choice{
    height:auto!important;
    min-height:42px!important;
    max-height:none!important;
    padding:6px 8px!important;
    font-size:clamp(10.5px,3.25vw,12.5px)!important;
    line-height:1.13!important;
    overflow:visible!important;
  }
  body.tracce-level-page.quiz-active .answer-content{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:4px!important;
  }
  body.tracce-level-page.quiz-active .answer-leading-icons{width:52px!important}
  body.tracce-level-page.quiz-active .answer-leading-icons img{width:16px!important;height:16px!important;flex-basis:16px!important}
  body.tracce-level-page.quiz-active #quizScreen .quiz-feedback{
    max-height:54px!important;
    padding:5px 7px!important;
    margin:1px 0!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .footer-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:4!important;
    min-height:0!important;
    height:auto!important;
    padding:2px 0 0!important;
    margin:0!important;
    background:linear-gradient(180deg,var(--skin-c1160),var(--skin-c1161) 35%)!important;
  }
  body.tracce-level-page.quiz-active #quizScreen .footer-actions .btn{
    min-height:36px!important;
    height:36px!important;
    padding:6px 9px!important;
    font-size:10px!important;
  }

  /* Level 5 has four evidence cards before the answers. Keep them compact in a 2×2 grid. */
  body.level-5.quiz-active #quizScreen .clue-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
    margin:1px 0 2px!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.level-5.quiz-active #quizScreen .clue-card{
    min-height:0!important;
    padding:6px 7px!important;
    border-radius:9px!important;
  }
  body.level-5.quiz-active #quizScreen .clue-card span{
    margin:0 0 2px!important;
    font-size:8px!important;
    line-height:1!important;
  }
  body.level-5.quiz-active #quizScreen .clue-card p{
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.17!important;
  }
  body.level-5.quiz-active #quizScreen .answer-grid:not(.procedural-active){
    flex:0 0 auto!important;
    grid-auto-rows:auto!important;
  }
  body.level-5.quiz-active #quizScreen .answer-choice.level5-recon-answer{
    min-height:40px!important;
    padding:6px 8px!important;
  }
  body.level-5.quiz-active #quizScreen .level5-answer-text{
    font-size:10.5px!important;
    line-height:1.16!important;
  }

  /* Procedural cards and new games: reduce unused vertical padding on phones. */
  body.tracce-level-page.quiz-active .pgame{gap:6px!important}
  body.tracce-level-page.quiz-active .pgame-note,
  body.tracce-level-page.quiz-active .pgame-clues{padding:7px 8px!important;font-size:10px!important;line-height:1.2!important}
  body.tracce-level-page.quiz-active .pgame-select{min-height:54px!important;padding:7px!important}
  body.tracce-level-page.quiz-active .pgame-find-object{min-height:70px!important;padding:6px!important}
  body.tracce-level-page.quiz-active .pgame-find-image{max-width:46px!important;max-height:46px!important}
  body.tracce-level-page.quiz-active .pgame-exc-cell{min-height:64px!important;padding:6px!important}
  body.tracce-level-page.quiz-active .pgame-connect-card{min-height:46px!important;padding:7px 9px!important}
  body.tracce-level-page.quiz-active .pgame-builder-zone{min-height:64px!important;padding:7px!important}
  body.tracce-level-page.quiz-active .pgame-builder-item{padding:7px!important}
  body.tracce-level-page.quiz-active .pgame-actions{margin-top:4px!important}
}

@media (max-width:760px) and (max-height:650px){
  body.tracce-level-page.quiz-active #quizScreen > .card{padding:5px 6px!important;gap:3px!important}
  body.tracce-level-page.quiz-active #quizScreen .question-text{font-size:14px!important;line-height:1.04!important}
  body.level-5.quiz-active #quizScreen .clue-card{padding:4px 5px!important}
  body.level-5.quiz-active #quizScreen .clue-card p{font-size:9.5px!important;line-height:1.12!important}
  body.tracce-level-page.quiz-active .answer-choice{min-height:36px!important;padding:4px 6px!important;font-size:10px!important}
  body.level-5.quiz-active #quizScreen .level5-answer-text{font-size:9.5px!important;line-height:1.12!important}
}

/* R3b — do not stretch short questions to the full viewport. */
@media (max-width:760px){
  body.tracce-level-page.quiz-active #quizScreen{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }
  body.tracce-level-page.quiz-active #quizScreen > .card{
    height:auto!important;
    max-height:100%!important;
  }
}

/* 2026-10-02 — MOBILE ACCESSIBILITY + EXPANDABLE QUIZ FEEDBACK
   Keeps essential touch targets at least 44 px and prevents long explanations
   from being permanently truncated on phones. */
@media (max-width:760px){
  body.tracce-level-page.quiz-active .answer-choice,
  body.level-5.quiz-active #quizScreen .answer-choice.level5-recon-answer{
    min-height:44px!important;
  }

  body.tracce-level-page.quiz-active #quizScreen .footer-actions .btn,
  body.tracce-level-page.quiz-active .pgame-actions .btn{
    min-height:44px!important;
    height:auto!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }

  body.tracce-level-page.quiz-active .pgame-order-controls button{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }

  body.tracce-level-page.quiz-active .pgame-builder-zone,
  body.tracce-level-page.quiz-active .pgame-builder-item{
    min-height:44px!important;
  }

  body.final-case .mobile-card-toggle{
    min-height:44px!important;
    padding:8px 2px!important;
    align-items:center!important;
  }

  body.tracce-level-page.quiz-active .quiz-feedback.mobile-feedback-overflow{
    max-height:108px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  body.tracce-level-page.quiz-active .quiz-feedback .mobile-feedback-toggle{
    display:none;
    flex:0 0 auto;
    min-height:44px;
    margin-top:3px;
    padding:7px 2px 5px;
    border:0;
    background:transparent;
    color:var(--skin-c1119);
    font:900 10px/1.15 var(--ui);
    letter-spacing:.04em;
    text-decoration:underline;
    text-underline-offset:3px;
    text-align:left;
    cursor:pointer;
  }
  body.tracce-level-page.quiz-active .quiz-feedback.mobile-feedback-overflow > .mobile-feedback-toggle{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
  }
  body.tracce-level-page.quiz-active .quiz-feedback.mobile-feedback-expanded{
    max-height:none!important;
    overflow:visible!important;
  }
  body.tracce-level-page.quiz-active .quiz-feedback.mobile-feedback-expanded p.mobile-feedback-copy{
    display:block!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
  }
}



/* 2026-10-02 — mobile UI polish from user review */
@media (max-width:760px){
  /* Remove the decorative side orb on Level 1 dashboard; it overlaps real content on phones. */
  body.level-1 #dashboard > .card::before{content:none!important;display:none!important}

  /* Slightly larger quiz typography on phones. */
  body.tracce-level-page.quiz-active #quizScreen .question-text{
    font-size:clamp(16.5px,5.0vw,20.5px)!important;
    line-height:1.12!important;
  }
  body.tracce-level-page.quiz-active .answer-choice{
    font-size:clamp(12px,3.45vw,14px)!important;
    line-height:1.16!important;
  }
  body.level-5.quiz-active #quizScreen .level5-answer-text{
    font-size:11.5px!important;
    line-height:1.18!important;
  }

  /* Smaller, uniform answer icons. */
  body.tracce-level-page.quiz-active .answer-content{
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:4px!important;
  }
  body.tracce-level-page.quiz-active .answer-leading-icons{
    width:48px!important;
    gap:2px!important;
  }
  body.tracce-level-page.quiz-active .answer-leading-icons img{
    width:14px!important;
    height:14px!important;
    flex-basis:14px!important;
  }
  body.tracce-level-page.quiz-active .pgame-select .pgame-item-image,
  body.tracce-level-page.quiz-active .pgame-scene-item .pgame-scene-image,
  body.tracce-level-page.quiz-active .pgame-builder-image{
    width:22px!important;
    height:22px!important;
    max-width:22px!important;
    max-height:22px!important;
  }
}

@media (max-width:760px) and (max-height:650px){
  body.tracce-level-page.quiz-active #quizScreen .question-text{
    font-size:15px!important;
    line-height:1.08!important;
  }
  body.tracce-level-page.quiz-active .answer-choice{
    font-size:11px!important;
    line-height:1.14!important;
  }
}


/* 2026-10-02 — final mobile consistency pass: one visual scale for all answer types */
@media (max-width:760px){
  body.tracce-level-page.quiz-active .answer-content{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:6px!important;
  }
  body.tracce-level-page.quiz-active .answer-leading-icons{
    width:38px!important;
    justify-content:center!important;
  }
  body.tracce-level-page.quiz-active .answer-leading-icons img,
  body.tracce-level-page.quiz-active .pgame-select .pgame-item-image,
  body.tracce-level-page.quiz-active .pgame-scene-item .pgame-scene-image,
  body.tracce-level-page.quiz-active .pgame-builder-image{
    width:18px!important;
    height:18px!important;
    max-width:18px!important;
    max-height:18px!important;
    flex-basis:18px!important;
  }
  body.tracce-level-page.quiz-active .pgame-select strong,
  body.tracce-level-page.quiz-active .pgame-scene-item small,
  body.tracce-level-page.quiz-active .pgame-builder-item-head span{
    font:800 clamp(12px,3.45vw,14px)/1.16 var(--ds-font-ui)!important;
  }
  body.tracce-level-page.quiz-active .pgame-builder-item-head{gap:8px!important}
}