/* Shared presentation contract for every level and the final case.
   Game state and mechanics stay in the single shared engine. */
:root {
  --tracce-ui-font: var(--ds-font-ui, system-ui, sans-serif);
  --tracce-question-size: clamp(27px, calc(2.2vw + 1px), 39px);
  --tracce-answer-size: clamp(15px, calc(1.05vw + 1px), 18px);
  --tracce-answer-icon-size: 20px;
  --tracce-procedural-icon-size: 32px;
}

body.tracce-level-page,
body.tracce-case-page {
  font-family: var(--tracce-ui-font);
}

body.tracce-level-page.quiz-active #quizScreen .question-text {
  font-family: var(--tracce-ui-font) !important;
  font-size: var(--tracce-question-size) !important;
  line-height: 1.18 !important;
}

body.tracce-level-page.quiz-active #quizScreen .answer-choice {
  font-family: var(--tracce-ui-font) !important;
  font-size: var(--tracce-answer-size) !important;
  line-height: 1.3 !important;
}

body.tracce-level-page.quiz-active #quizScreen .answer-leading-icons img {
  width: var(--tracce-answer-icon-size) !important;
  height: var(--tracce-answer-icon-size) !important;
  flex-basis: var(--tracce-answer-icon-size) !important;
  object-fit: contain;
}

body.tracce-level-page.quiz-active #quizScreen .pgame-select .pgame-item-image,
body.tracce-level-page.quiz-active #quizScreen .pgame-scene-item .pgame-scene-image,
body.tracce-level-page.quiz-active #quizScreen .pgame-builder-image {
  width: var(--tracce-procedural-icon-size) !important;
  height: var(--tracce-procedural-icon-size) !important;
  max-width: var(--tracce-procedural-icon-size) !important;
  max-height: var(--tracce-procedural-icon-size) !important;
  object-fit: contain;
}

body.tracce-level-page.quiz-active #quizScreen .answer-choice:focus-visible,
body.tracce-level-page .pgame button:focus-visible,
body.tracce-case-page button:focus-visible,
body.tracce-case-page a:focus-visible {
  outline: 3px solid var(--accent, #e6b85c);
  outline-offset: 3px;
}

body.tracce-level-page img,
body.tracce-case-page img { max-width: 100%; }