/* 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,rgba(38,26,17,.96),rgba(17,12,8,.94));
  --tt-glass-soft:linear-gradient(120deg,rgba(45,30,19,.90),rgba(19,13,9,.88));
  --tt-border:rgba(255,226,178,.24);
  --tt-border-strong:rgba(244,186,101,.42);
  --tt-text:#fff1dc;
  --tt-muted:#d8c6aa;
  --tt-accent:#efb766;
  --tt-shadow:0 24px 80px rgba(0,0,0,.46);
}

body.era1-level-page,
body.era1-case-page{
  overflow-x:hidden;
  color:var(--tt-text);
}
body.era1-level-page::after,
body.era1-case-page::after{
  background:
    radial-gradient(circle at 50% 58%,transparent 0 18%,rgba(8,5,3,.18) 40%,rgba(6,4,3,.60) 100%),
    linear-gradient(180deg,rgba(6,4,3,.12),rgba(6,4,3,.66));
}

/* Shared compact HUD/header */
body.era1-level-page .game-header,
body.era1-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,rgba(39,28,18,.88),rgba(18,13,9,.82))!important;
  box-shadow:0 12px 36px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(15px);
  overflow:visible!important;
}
body.era1-level-page .game-header::before,
body.era1-case-page .game-header::before{display:none!important}
body.era1-level-page .game-header > div:first-child,
body.era1-case-page .game-header > div:first-child{min-width:0}
body.era1-level-page .game-header h1,
body.era1-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 rgba(0,0,0,.72)!important;
}
body.era1-level-page .game-header p,
body.era1-case-page .game-header p{
  margin:0!important;
  color:var(--tt-muted)!important;
  font-size:11px!important;
  letter-spacing:.08em;
}
body.era1-level-page .game-header .kicker,
body.era1-case-page .game-header .kicker{font-size:9px!important;color:var(--tt-accent)!important;letter-spacing:.17em!important}
body.era1-level-page .header-actions,
body.era1-case-page .header-actions{align-items:center!important;gap:8px!important;flex-wrap:nowrap!important}
body.era1-level-page .game-header .btn,
body.era1-case-page .game-header .btn{
  min-height:40px!important;
  padding:10px 13px!important;
  border-radius:12px!important;
  background:rgba(24,16,10,.74)!important;
  border-color:rgba(255,232,196,.22)!important;
  color:#f7ead1!important;
  backdrop-filter:blur(12px);
  text-shadow:none!important;
}

/* Shared dark glass work surfaces */
body.era1-level-page #dashboard > .card,
body.era1-level-page #quizScreen > .card,
body.era1-level-page #resultScreen > .card,
body.era1-case-page .briefing,
body.era1-case-page .case-art-panel,
body.era1-case-page #caseContent > section.card,
body.era1-case-page #investigationSection > .card,
body.era1-case-page #reportSection > .card,
body.era1-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.era1-level-page #dashboard > .card::after,
body.era1-level-page #quizScreen > .card::after,
body.era1-level-page #resultScreen > .card::after,
body.era1-case-page .briefing::after,
body.era1-case-page .case-art-panel::after,
body.era1-case-page #caseContent > section.card::after,
body.era1-case-page #investigationSection > .card::after,
body.era1-case-page #reportSection > .card::after{border-color:rgba(255,218,164,.07)!important}
body.era1-level-page .card h2,
body.era1-level-page .card h3,
body.era1-case-page .card h2,
body.era1-case-page .card h3,
body.era1-case-page #resultCard h2,
body.era1-case-page #resultCard h3{color:var(--tt-text)!important;text-shadow:0 2px 10px rgba(0,0,0,.55)}
body.era1-level-page .card p,
body.era1-case-page .card p,
body.era1-case-page #resultCard p{color:var(--tt-muted)!important}
body.era1-level-page .notice,
body.era1-case-page .notice{
  color:#eadbc4!important;
  background:rgba(14,10,7,.50)!important;
  border:1px solid rgba(255,222,172,.13)!important;
  border-left:4px solid var(--page-accent)!important;
}
body.era1-level-page .notice strong,
body.era1-case-page .notice strong{color:#ffd79d!important}

/* Buttons */
body.era1-level-page .btn,
body.era1-case-page .btn{
  border-radius:13px!important;
  border-color:rgba(244,186,101,.34)!important;
  background:linear-gradient(180deg,rgba(66,42,25,.96),rgba(35,23,15,.98))!important;
  color:#fff0d8!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28),inset 0 1px rgba(255,232,198,.10)!important;
}
body.era1-level-page .btn.primary,
body.era1-case-page .btn.primary{
  background:linear-gradient(180deg,#d98b4c,#9a4e28)!important;
  border-color:#e1a15f!important;
  color:#fff9ec!important;
}
body.era1-level-page .btn.ghost,
body.era1-case-page .btn.ghost{background:rgba(24,16,10,.60)!important}

/* Metrics / pills */
body.era1-level-page .level-meta,
body.era1-case-page .case-metrics{gap:9px!important}
body.era1-level-page .metric,
body.era1-case-page .case-metric,
body.era1-case-page .big-score{
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(26,19,13,.82),rgba(13,10,7,.88))!important;
  border-color:rgba(255,224,177,.16)!important;
  box-shadow:inset 0 1px rgba(255,239,211,.06),0 8px 22px rgba(0,0,0,.22)!important;
}
body.era1-level-page .metric b,
body.era1-case-page .case-metric b,
body.era1-case-page .big-score b{color:#ffd79d!important}
body.era1-level-page .metric span,
body.era1-case-page .case-metric span,
body.era1-case-page .big-score span{color:#cbb89e!important}
body.era1-level-page .progress-state,
body.era1-case-page .case-state,
body.era1-level-page .topic-pill,
body.era1-case-page .proof-counter{
  border-color:rgba(255,218,164,.22)!important;
  background:rgba(20,14,10,.56)!important;
  color:#f1c781!important;
}

/* Question and answer styling */
body.era1-level-page .quiz-top{margin:0!important}
body.era1-level-page .quiz-count{color:#f2c77f!important;font-size:12px!important;letter-spacing:.11em;text-transform:uppercase}
body.era1-level-page .quiz-score{color:#f2c77f!important;font-size:12px!important}
body.era1-level-page .topic-pill{margin:0!important;align-self:start;width:max-content}
body.era1-level-page .question-text{
  color:#fff3df!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 rgba(0,0,0,.50);
}
body.era1-level-page .answer-grid{gap:12px!important}
body.era1-level-page .answer-choice,
body.era1-level-page .pgame-select,
body.era1-level-page .pgame-match-row,
body.era1-level-page .pgame-sequence li,
body.era1-level-page .pgame-scene-item,
body.era1-level-page .pgame-clues,
body.era1-level-page .clue-card{
  border-radius:17px!important;
  border-color:rgba(255,225,181,.18)!important;
  background:linear-gradient(180deg,rgba(50,35,23,.78),rgba(24,17,12,.88))!important;
  color:#f9ead3!important;
  box-shadow:inset 0 1px rgba(255,239,214,.06),0 6px 18px rgba(0,0,0,.18)!important;
}
body.era1-level-page .answer-choice{
  min-height:96px!important;
  padding:15px 17px!important;
  font-size:clamp(14px,1.05vw,17px)!important;
}
body.era1-level-page .answer-choice:hover:not(:disabled),
body.era1-level-page .pgame-select:hover,
body.era1-level-page .pgame-scene-item:hover{
  border-color:rgba(244,186,101,.52)!important;
  background:linear-gradient(180deg,rgba(82,49,26,.88),rgba(35,22,14,.92))!important;
  transform:translateY(-1px);
}
body.era1-level-page .answer-choice.correct{border-color:#85a866!important;background:linear-gradient(180deg,rgba(76,102,54,.74),rgba(30,45,23,.86))!important}
body.era1-level-page .answer-choice.wrong{border-color:#b96555!important;background:linear-gradient(180deg,rgba(114,53,42,.76),rgba(49,24,20,.88))!important}
body.era1-level-page .quiz-feedback{
  margin:0!important;
  border-radius:15px!important;
  background:rgba(17,12,8,.78)!important;
  color:#f5e6cf!important;
  border-color:rgba(255,224,177,.18)!important;
}
body.era1-level-page .quiz-feedback p{color:#d9c7ad!important}
body.era1-level-page .quiz-feedback.ok{border-color:#718e55!important;background:rgba(45,65,32,.72)!important}
body.era1-level-page .quiz-feedback.bad{border-color:#a8584a!important;background:rgba(76,34,29,.75)!important}
body.era1-level-page .clue-grid{gap:9px!important;margin:0!important}
body.era1-level-page .clue-card p{color:#dccab0!important}
body.era1-level-page .clue-card span{color:#efb766!important}

/* LEVEL RESULT */
body.era1-level-page #resultScreen .result-card{
  color:var(--tt-text)!important;
  text-align:center!important;
}
body.era1-level-page #resultScreen .result-score{color:#ffe2ad!important}
body.era1-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,rgba(45,31,21,.82),rgba(18,13,9,.90))!important;
  color:#f8ead4!important;
  border-color:rgba(255,225,181,.18)!important;
  box-shadow:inset 0 1px rgba(255,239,214,.05),0 6px 16px rgba(0,0,0,.20)!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:#cfbda4!important}
body.final-case .person-code,
body.final-case .evidence-id,
body.final-case .notebook-item span,
body.final-case .proof-choice span{color:#efb766!important}
body.final-case .location-tab.active,
body.final-case .proof-choice.selected{
  border-color:rgba(244,186,101,.66)!important;
  background:linear-gradient(180deg,rgba(103,57,29,.88),rgba(34,22,14,.94))!important;
  box-shadow:0 0 0 1px rgba(244,186,101,.12),0 10px 22px rgba(0,0,0,.25)!important;
}
body.final-case .location-head h2{color:#ffe0ab!important}
body.final-case .location-head p{color:#cdbba3!important}
body.final-case .report-field label{color:#efb766!important}
body.final-case .report-field select{
  border-radius:13px!important;
  border-color:rgba(255,225,181,.20)!important;
  background:#1b120c!important;
  color:#f8ead4!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.era1-level-page .shell,
  body.era1-case-page .shell{
    width:100%;max-width:none!important;min-height:100svh;
    padding:18px max(24px,2.2vw) max(18px,2vh)!important;
  }
  body.era1-level-page .level-shell,
  body.era1-case-page .case-shell{width:100%;max-width:none!important;margin:0!important}

  body.era1-level-page main{min-height:calc(100svh - 92px)}
  body.era1-level-page #dashboard{
    min-height:calc(100svh - 92px);
    padding:18px 0!important;
    display:flex;
    align-items:center;
  }
  body.era1-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.era1-level-page #dashboard .level-rule{grid-template-columns:minmax(0,1.55fr) auto!important;gap:22px!important}
  body.era1-level-page #dashboard .level-meta{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:18px 0 14px!important}
  body.era1-level-page #dashboard .metric{padding:13px 15px!important}
  body.era1-level-page #dashboard .source-note{max-width:980px;color:#bda98d!important}

  body.era1-level-page #quizScreen:not(.hidden),
  body.era1-level-page #resultScreen:not(.hidden){
    min-height:calc(100svh - 92px);
    padding:18px 0!important;
    display:flex;
    align-items:center;
  }
  body.era1-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.era1-level-page #quizScreen .quiz-top{grid-column:1;grid-row:1;align-self:start}
  body.era1-level-page #quizScreen .topic-pill{grid-column:1;grid-row:2}
  body.era1-level-page #quizScreen .question-text{grid-column:1;grid-row:3;align-self:start;max-width:560px}
  body.era1-level-page #quizScreen .clue-grid{grid-column:1;grid-row:4;align-self:start;max-height:170px;overflow:auto;padding-right:3px}
  body.era1-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.era1-level-page #quizScreen .quiz-feedback{
    grid-column:1;grid-row:4;
    align-self:end;
    max-height:145px;
    overflow:auto;
  }
  body.era1-level-page #quizScreen .clue-grid:not(.hidden) ~ .quiz-feedback{grid-row:5}
  body.era1-level-page #quizScreen .footer-actions{
    grid-column:1 / -1;
    grid-row:6;
    margin:0!important;
    padding-top:10px;
    border-top:1px solid rgba(255,226,178,.08);
  }
  body.era1-level-page #quizScreen .footer-actions .btn{min-width:210px}

  body.era1-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.era1-level-page .shell,
  body.era1-case-page .shell{padding:16px 18px 20px!important}
  body.era1-level-page .level-shell,
  body.era1-case-page .case-shell{max-width:none!important;width:100%!important;margin:0!important}
  body.era1-level-page #dashboard > .card,
  body.era1-level-page #quizScreen > .card,
  body.era1-level-page #resultScreen > .card{width:100%!important;max-width:none!important;margin:0!important;transform:none!important;border-radius:22px!important}
  body.era1-level-page #quizScreen{padding:18px 0!important}
  body.era1-level-page #quizScreen > .card{padding:22px!important}
  body.era1-level-page #quizScreen .answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.era1-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.era1-level-page,
  body.era1-case-page{background-position:center top!important}
  body.era1-level-page .shell,
  body.era1-case-page .shell{padding:9px 8px 18px!important}
  body.era1-level-page .game-header,
  body.era1-case-page .game-header{
    min-height:58px;padding:9px 10px!important;border-radius:14px!important;gap:8px!important;
  }
  body.era1-level-page .game-header h1,
  body.era1-case-page .game-header h1{font-size:20px!important}
  body.era1-level-page .game-header p,
  body.era1-case-page .game-header p{font-size:9px!important}
  body.era1-level-page .game-header .kicker,
  body.era1-case-page .game-header .kicker{font-size:7px!important}
  body.era1-level-page .header-actions,
  body.era1-case-page .header-actions{gap:5px!important}
  body.era1-level-page .game-header .btn,
  body.era1-case-page .game-header .btn{min-height:36px!important;padding:8px 9px!important;font-size:10px!important}

  body.era1-level-page #dashboard{padding:12px 0 0!important}
  body.era1-level-page #dashboard > .card,
  body.era1-level-page #quizScreen > .card,
  body.era1-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.era1-level-page #dashboard .level-rule{grid-template-columns:1fr!important}
  body.era1-level-page #dashboard .level-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.era1-level-page #quizScreen{padding:12px 0!important}
  body.era1-level-page #quizScreen .quiz-top{margin-bottom:10px!important}
  body.era1-level-page #quizScreen .topic-pill{margin-bottom:10px!important}
  body.era1-level-page .question-text{font-size:clamp(21px,6vw,29px)!important;margin-bottom:14px!important}
  body.era1-level-page #quizScreen .answer-grid{grid-template-columns:1fr!important;gap:8px!important}
  body.era1-level-page .answer-choice{min-height:62px!important;padding:11px 12px!important;font-size:14px!important;border-radius:14px!important}
  body.era1-level-page .quiz-feedback{margin-top:11px!important}
  body.era1-level-page #quizScreen .footer-actions{justify-content:stretch!important}
  body.era1-level-page #quizScreen .footer-actions .btn{width:100%}
  body.era1-level-page #resultScreen{padding:12px 0!important}
  body.era1-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.era1-level-page .game-header p,
  body.era1-case-page .game-header p{display:none}
  body.era1-level-page .game-header .kicker,
  body.era1-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.era1-level-page .tracce-language-switcher,
body.era1-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.era1-level-page .tracce-language-switcher,
  body.era1-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.era1-level-page .tracce-language-switcher,
  body.era1-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.era1-level-page main,
  body.era1-case-page main{padding-top:42px!important;}
  body.era1-level-page .tracce-language-switcher select,
  body.era1-case-page .tracce-language-switcher select{
    min-width:118px!important;
    max-width:128px!important;
    padding-right:22px!important;
  }
}