/*
 * Агропромкомплектация — клиентская тема.
 *
 * Цвета и шрифт сверены с локально сохранёнными стилями официального сайта
 * (vendor/apkholding-style.min.css). Все ресурсы подключаются из этой PWA,
 * поэтому экран остаётся работоспособным без сети.
 */
@font-face {
  font-family: "Franklin";
  src: url("fonts/FranklinGothicBookC.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Franklin";
  src: url("fonts/FranklinGothicMediumC.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --apk-green: #5EB420;
  --apk-green-dark: #54A01D;
  --apk-blue: #4AACE4;
  --apk-ink: #1B2429;
  --apk-gray: #BEBEBE;
  --apk-light: #E6E6E6;
  --apk-paper: #FFFFFF;
  --apk-deep: #17442e;
  --brand-font: "Franklin", "Arial Narrow", Arial, sans-serif;
  --ink: var(--apk-ink);
  --muted: #59686b;
  color: var(--apk-ink);
  background: #dbe7e2;
}

html,
body,
.lab-shell,
.game {
  width: 100%;
  height: 100dvh;
  min-height: 0;
}

html,
body { overflow: hidden !important; }

body {
  min-width: 320px;
  color: var(--apk-ink);
  font-family: var(--brand-font);
  background:
    linear-gradient(108deg, rgba(25, 47, 43, .18), rgba(255,255,255,.06) 42%, rgba(25, 47, 43, .22)),
    url("generated-assets/complex-background-hq.webp") center / cover no-repeat fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%, rgba(8,39,29,.22));
}

.lab-shell {
  display: block !important;
  position: relative;
  overflow: hidden !important;
  background: transparent !important;
}

.lab-shell::before {
  z-index: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.26) 1px, transparent 1px);
  background-size: 54px 54px;
}

.lab-shell::after { display: none; }

/* One fixed logo slot is used by every screen. It never covers the content. */
.brand-logo {
  position: fixed !important;
  z-index: 50 !important;
  top: clamp(12px, 2.4vh, 30px) !important;
  left: 50% !important;
  width: clamp(220px, 16vw, 315px) !important;
  height: clamp(80px, 8.8vh, 110px) !important;
  padding: 8px 17px !important;
  border: 1px solid rgba(27,36,41,.12) !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 11px 28px rgba(27,36,41,.15), inset 0 1px #fff !important;
  transform: translateX(-50%) !important;
}

/* The old external HUD is kept in the DOM for state updates but is not part
   of the visual layout anymore. Its data still drives the live code. */
.sequencer { display: none !important; }

.game {
  position: relative !important;
  z-index: 1;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.language-switch {
  position: absolute !important;
  z-index: 20;
  top: 20px !important;
  right: 24px !important;
  display: flex;
  padding: 3px !important;
  border: 1px solid rgba(27,36,41,.16) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 7px 18px rgba(27,36,41,.12) !important;
  backdrop-filter: blur(14px);
}

.language-switch button {
  min-width: 45px !important;
  height: 34px !important;
  color: #56646a !important;
  font: 700 12px/1 var(--brand-font) !important;
}

.language-switch button.is-active {
  color: #fff !important;
  background: var(--apk-green) !important;
  box-shadow: 0 4px 10px rgba(84,160,29,.25) !important;
}

.screen {
  position: relative !important;
  width: min(94vw, 1680px) !important;
  height: calc(100dvh - clamp(108px, 13vh, 150px)) !important;
  min-height: 0 !important;
  margin: clamp(96px, 11vh, 132px) auto clamp(12px, 2vh, 22px) !important;
  padding: clamp(24px, 2.8vw, 48px) !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  border-radius: 28px !important;
  color: var(--apk-ink) !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.93), rgba(248,252,248,.82) 48%, rgba(240,247,242,.78)) !important;
  box-shadow: 0 24px 65px rgba(27,36,41,.20), inset 0 1px #fff !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
}

.screen::before,
.screen::after { pointer-events: none; }

.screen::before {
  opacity: .30 !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.78), transparent 28%),
    repeating-linear-gradient(90deg, rgba(94,180,32,.04) 0 1px, transparent 1px 88px) !important;
}

.screen::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -80px;
  bottom: -100px;
  width: 320px;
  height: 320px;
  opacity: .12;
  border: 24px solid var(--apk-green);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-28deg);
  filter: none;
}

.screen > * { position: relative; z-index: 1; }

.screen h1,
.screen h2,
.screen h3,
.screen p,
.screen button { font-family: var(--brand-font); }

.eyebrow {
  color: var(--apk-green-dark) !important;
  font-size: clamp(12px, .8vw, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

h1,
h2,
h3,
.score,
.result-score-card strong { color: var(--apk-ink) !important; text-shadow: none !important; }

h1 em { color: var(--apk-blue) !important; }

.lead,
.question-copy,
.fact-card p,
.game-rule p,
.result-score-card p,
.takeaways p { color: #4f5f63 !important; }

/* Brandbook accent: a subtle wheat-stalk watermark in every glass screen. */
.screen[data-screen="start"]::before,
.screen[data-screen="intro"]::before,
.screen[data-screen="quiz"]::before,
.screen[data-screen="result"]::before,
.screen[data-screen="genome-finale"]::before {
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.80), transparent 28%),
    url("generated-assets/apk-brand-logo-guide.webp"),
    repeating-linear-gradient(90deg, rgba(94,180,32,.035) 0 1px, transparent 1px 88px) !important;
  background-size: auto, 520px auto, auto !important;
  background-position: center, -150px 54%, center !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  opacity: .075 !important;
}

/* Start screen — minimal first frame, with the cobranding card to the side. */
.screen[data-screen="start"] {
  display: none;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 56px) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 48%, rgba(255,255,255,.18) 100%),
    url("generated-assets/complex-aerial-hq.webp") center / cover no-repeat !important;
}

.screen[data-screen="start"].is-active { display: grid !important; }
.screen[data-screen="start"] .opening-dialogue,
.screen[data-screen="start"] .game-rule,
.screen[data-screen="start"] .eyebrow { display: none !important; }

.screen[data-screen="start"] .start-copy {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 0;
  align-self: center;
  padding: clamp(18px, 2.6vw, 42px) !important;
  border: 1px solid rgba(27,36,41,.10) !important;
  border-left: 7px solid var(--apk-green) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 42px rgba(27,36,41,.14), inset 0 1px #fff !important;
}

.screen[data-screen="start"] h1 {
  max-width: 11ch !important;
  margin-bottom: 16px !important;
  font-size: clamp(48px, 5.4vw, 84px) !important;
  line-height: .92 !important;
  letter-spacing: -.045em !important;
}

.screen[data-screen="start"] h1::first-line { color: var(--apk-green-dark); }
.screen[data-screen="start"] .lead {
  max-width: 32ch;
  font-size: clamp(18px, 1.45vw, 25px) !important;
  line-height: 1.25 !important;
}

.screen[data-screen="start"] .primary {
  min-width: 190px;
  margin-top: 22px !important;
}

.screen[data-screen="start"] > .lab-art {
  display: block !important;
  align-self: stretch;
  min-height: 0;
  border-radius: 24px !important;
}

.screen[data-screen="start"] .lab-art img { object-fit: cover !important; }

.screen[data-screen="start"] .lab-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(27,36,41,.30));
}

/* Co-branding card: festival mark is visible only on the welcome frame. */
.screen[data-screen="start"]::after {
  display: none !important;
  right: 22px;
  top: 22px;
  bottom: auto;
  width: 206px;
  height: 157px;
  opacity: 1;
  border: 0;
  border-radius: 14px;
  background: url("generated-assets/festival-mfm-2026.webp") center / cover no-repeat;
  box-shadow: 0 9px 22px rgba(27,36,41,.16);
  transform: none;
}

.festival-lockup {
  position: absolute !important;
  z-index: 8 !important;
  top: 22px;
  right: 22px;
  width: min(206px, 22%);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 9px 22px rgba(27,36,41,.16);
}

/* Intro and quiz stay in a compact, editorial two/three-column layout. */
.intro-dialogue { gap: 14px !important; margin-bottom: 18px !important; }
.speaker p,
.quiz-guide p,
.fact-card,
.game-rule,
.answer,
.feedback,
.cross-card,
.result-score-card,
.takeaways p {
  color: var(--apk-ink) !important;
  border: 1px solid rgba(27,36,41,.12) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 8px 20px rgba(27,36,41,.09), inset 0 1px #fff !important;
  backdrop-filter: blur(12px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(108%) !important;
}

.speaker p::before,
.quiz-guide p::before { background: #fff !important; border-color: rgba(27,36,41,.12) !important; }
.intro-dialogue .speaker p { font-size: clamp(13px, 1vw, 18px) !important; line-height: 1.3 !important; }
.fact-card { padding: clamp(16px, 1.5vw, 26px) !important; }
.fact-card h2 { font-size: clamp(21px, 1.45vw, 28px) !important; }
.fact-card p { font-size: clamp(14px, 1vw, 18px) !important; line-height: 1.35 !important; }
.region-list b,
.breed-labels b,
.formula span,
.result-fragments span,
.cross-card span {
  color: var(--apk-deep) !important;
  border-color: rgba(94,180,32,.28) !important;
  background: rgba(224,243,216,.78) !important;
}

.screen[data-screen="intro"] .primary,
.primary {
  min-height: 52px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--apk-green), var(--apk-green-dark)) !important;
  box-shadow: 0 10px 22px rgba(84,160,29,.25), inset 0 1px rgba(255,255,255,.45) !important;
  font-size: clamp(14px, 1vw, 18px) !important;
}

.primary:hover { background: linear-gradient(135deg, #70c934, var(--apk-green-dark)) !important; }
.primary span { color: #fff !important; }

.question-head { align-items: center !important; margin-bottom: 12px !important; }
.question-head .eyebrow { margin-bottom: 0 !important; }
.score {
  min-width: 106px;
  padding: 9px 13px !important;
  border: 1px solid rgba(27,36,41,.13) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--apk-blue) !important;
  box-shadow: 0 6px 16px rgba(74,172,228,.24) !important;
  text-align: center;
}

.quiz-layout,
.result-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(170px, .36fr) minmax(0, .94fr) !important;
  gap: clamp(16px, 2vw, 34px) !important;
  align-items: center !important;
  height: calc(100% - 50px) !important;
}

.question-column h2 {
  max-width: 22ch !important;
  margin: 12px 0 14px !important;
  font-size: clamp(30px, 2.5vw, 48px) !important;
  line-height: 1 !important;
}

.question-copy { font-size: clamp(15px, 1vw, 18px) !important; line-height: 1.35 !important; }
.answers { gap: 9px !important; margin-top: 17px !important; }
.answer {
  min-height: 58px !important;
  padding: 13px 48px 13px 17px !important;
  font-size: clamp(14px, 1.02vw, 18px) !important;
  line-height: 1.25 !important;
}

.answer:nth-child(odd) { border-left: 5px solid var(--apk-green) !important; }
.answer:nth-child(even) { border-left: 5px solid var(--apk-blue) !important; }
.answer:hover:not(:disabled),
.answer:focus-visible { transform: translateX(3px); border-color: var(--apk-green) !important; }
.answer.is-correct { background: rgba(223,246,211,.98) !important; border-color: var(--apk-green) !important; }
.answer.is-wrong { background: rgba(255,231,223,.98) !important; border-color: #d9866b !important; }

.question-next { min-width: 160px; }

/* Fixed central genome instrument — the pig genome is the visual anchor. */
.genome-display--tower {
  z-index: 5 !important;
  height: min(72dvh, 710px) !important;
  padding: 13px !important;
  border: 1px solid rgba(27,36,41,.12) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 15px 32px rgba(27,36,41,.13), inset 0 1px #fff !important;
}

.genome-display__brand,
.genome-finale__heading > img { display: none !important; }
.genome-display--tower .genome-display__copy span { color: var(--apk-green-dark) !important; font-size: 10px !important; }
.genome-display--tower .genome-display__copy strong { color: var(--apk-blue) !important; font-size: 25px !important; }
.genome-display--tower .genome-pod,
.genome-display--hero .genome-pod {
  border: 1px solid rgba(94,180,32,.23) !important;
  border-radius: 48% / 8% !important;
  background: linear-gradient(90deg, rgba(230,230,230,.38), rgba(255,255,255,.92) 22% 52%, rgba(224,243,216,.58)) !important;
  box-shadow: inset 0 9px 16px rgba(255,255,255,.9), inset 0 -10px 20px rgba(84,160,29,.10), 0 10px 25px rgba(27,36,41,.12) !important;
}

.genome-display--tower .genome-pod::before,
.genome-display--tower .genome-pod::after,
.genome-display--hero .genome-pod::before,
.genome-display--hero .genome-pod::after {
  background: linear-gradient(180deg, #fff, #b7c9c0 45%, #fff 55%, #81968b) !important;
}

.genome-source { color: var(--apk-green-dark) !important; font-size: 7px !important; }

.visual-column,
.result-visual-column { min-width: 0 !important; height: min(68dvh, 690px) !important; }
.visual-column .lab-art,
.result-visual-column .lab-art { width: 100% !important; height: 100% !important; border-radius: 20px !important; border: 1px solid rgba(255,255,255,.95) !important; }
.lab-art img { object-fit: cover !important; filter: brightness(1.08) contrast(1.10) saturate(1.08) !important; }
.lab-art::before { opacity: .20 !important; }
.art-status { color: var(--apk-deep) !important; background: rgba(255,255,255,.88) !important; border-color: rgba(94,180,32,.28) !important; }

/* Result / finale use the same fixed centre slot and a clear brand hierarchy. */
.result-copy h2 { max-width: 16ch !important; font-size: clamp(34px, 3.5vw, 60px) !important; line-height: .96 !important; }
.result-score-card { border-left: 6px solid var(--apk-green) !important; }
.result-score-card strong { color: var(--apk-green-dark) !important; font-size: clamp(23px, 2.6vw, 36px) !important; }
.takeaways p { font-size: clamp(12px, .92vw, 16px) !important; line-height: 1.3 !important; }
.formula strong { color: #fff !important; background: var(--apk-blue) !important; }
.result-fragments span { font-size: clamp(9px, .75vw, 13px) !important; }

.genome-finale__heading { display: block !important; text-align: left !important; }
.genome-finale__heading .eyebrow { margin: 0 0 7px !important; }
.genome-finale__heading h2 { font-size: clamp(30px, 3.5vw, 58px) !important; }
.genome-finale__layout {
  grid-template-columns: minmax(0, 1fr) minmax(210px, .62fr) minmax(0, 1fr) !important;
  height: min(57dvh, 620px) !important;
  gap: clamp(18px, 2.2vw, 36px) !important;
}
.genome-finale__panel { border-radius: 18px !important; background: rgba(255,255,255,.88) !important; }
.genome-finale__panel h3 { color: var(--apk-green-dark) !important; }
.genome-finale__formula strong { background: var(--apk-green) !important; }
.genome-finale__panel--facts p { font-size: clamp(12px, .95vw, 17px) !important; }
.genome-display--hero { border-color: rgba(94,180,32,.28) !important; background: rgba(255,255,255,.88) !important; }
.genome-display--hero .genome-display__copy span { color: var(--apk-green-dark) !important; font-size: 11px !important; }
.genome-display--hero .genome-display__copy strong { color: var(--apk-blue) !important; font-size: 27px !important; }
.genome-finale__restart { margin-top: 12px !important; }
.final-dialogue--single { grid-template-columns: minmax(0, 1fr) !important; }

@media (min-width: 651px) and (max-width: 1050px) {
  .brand-logo { top: 8px !important; width: 190px !important; height: 68px !important; }
  .screen {
    width: calc(100vw - 20px) !important;
    height: calc(100dvh - 88px) !important;
    margin: 82px auto 6px !important;
    padding: 18px !important;
  }
  .language-switch { top: 14px !important; right: 16px !important; }
  .screen[data-screen="start"] { margin: 82px auto 6px !important; width: calc(100vw - 20px) !important; height: calc(100dvh - 88px) !important; }
  .screen[data-screen="start"] h1 { font-size: clamp(38px, 5.8vw, 58px) !important; }
  .screen[data-screen="start"] .lead { font-size: 15px !important; }
  .quiz-layout, .result-layout { grid-template-columns: minmax(0, 1.08fr) 126px minmax(0, .92fr) !important; gap: 9px !important; }
  .genome-display--tower { height: min(68dvh, 540px) !important; }
  .visual-column, .result-visual-column { height: min(68dvh, 540px) !important; }
  .question-column h2 { font-size: clamp(23px, 3.2vw, 34px) !important; }
  .question-copy { font-size: 11px !important; }
  .answer { min-height: 45px !important; padding: 9px 40px 9px 12px !important; font-size: 11px !important; }
  .result-copy h2 { font-size: clamp(24px, 3.2vw, 34px) !important; }
  .result-score-card strong { font-size: 21px !important; }
  .takeaways p { font-size: 9px !important; }
  .genome-finale__layout { grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr) !important; gap: 9px !important; }
  .genome-finale__panel { padding: 12px !important; }
  .genome-finale__panel--facts p, .result-scale li { font-size: 8px !important; }
}

@media (max-width: 650px) {
  body { background-position: 58% center; }
  .brand-logo { top: 7px !important; width: 158px !important; height: 56px !important; padding: 5px 9px !important; }
  .screen,
  .screen[data-screen="start"] {
    width: calc(100vw - 10px) !important;
    height: calc(100dvh - 72px) !important;
    margin: 66px auto 6px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }
  .language-switch { top: 11px !important; right: 12px !important; }
  .screen[data-screen="start"] { display: none; }
  .screen[data-screen="start"].is-active { display: grid !important; grid-template-columns: 1fr !important; }
  .festival-lockup { top: 14px; right: 14px; width: 132px; }
  .screen[data-screen="start"] .start-copy { padding: 18px !important; }
  .screen[data-screen="start"] h1 { font-size: clamp(39px, 12vw, 52px) !important; }
  .screen[data-screen="start"] .lead { font-size: 15px !important; }
  .screen[data-screen="start"] > .lab-art { min-height: 180px; }
  .intro-dialogue { grid-template-columns: 1fr !important; }
  .intro-dialogue .speaker p { font-size: 10px !important; }
  .intro-layout { grid-template-columns: 1fr !important; }
  .intro-layout .lab-art { display: none !important; }
  .quiz-layout, .result-layout { display: block !important; height: auto !important; }
  .question-column h2 { font-size: 26px !important; }
  .question-copy { font-size: 12px !important; }
  .answer { min-height: 48px !important; font-size: 12px !important; }
  .genome-display--tower { position: absolute !important; right: 14px; bottom: 14px; width: 94px; height: 220px !important; }
  .visual-column, .result-visual-column { display: none !important; }
  .result-copy h2 { font-size: 30px !important; }
  .genome-finale__heading h2 { font-size: 25px !important; }
  .genome-finale__layout { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto 1fr !important; height: auto !important; }
  .genome-display--hero { grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 280px !important; }
  .genome-finale__panel { padding: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo { transition: none !important; }
}

/* Touch viewport guard: the question column grows when the explanation card
   appears after an answer.  The old grid let that intrinsic height expand the
   row beyond the screen, which pushed the genome tower below the fold. Keep
   the row bounded to the screen and let the question column use its measured
   fit instead. */
.quiz-layout,
.result-layout {
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

.quiz-layout > *,
.result-layout > * {
  min-height: 0 !important;
}

.screen[data-screen="quiz"] .genome-display--tower,
.screen[data-screen="result"] .genome-display--result-tower {
  transform: none !important;
  align-self: center !important;
  max-height: calc(100% - 6px) !important;
}

.screen[data-screen="quiz"] .genome-display--tower .genome-pod,
.screen[data-screen="result"] .genome-display--result-tower .genome-pod {
  min-height: 0 !important;
}

/* Resolution-locked canvas: when browser zoom or a kiosk viewport is smaller
   than the natural layout, the complete screen scales as one unit. This keeps
   the action buttons attached to their content instead of letting them fall
   below the clipped game frame. */
.screen-canvas {
  min-width: 0;
  min-height: 0;
  transform-origin: top center;
  will-change: transform;
}

.screen-canvas.is-fitted {
  transform: scale(var(--screen-fit, 1));
}

/* On tablet/desktop the question and result canvases use the screen's content
   box as their fixed stage. The grid row can then never grow from an opened
   explanation card and push the genome tower below the viewport. */
@media (min-width: 651px) {
  .screen[data-screen="quiz"] .quiz-layout {
    /* Keep the three visual columns on one balanced baseline.  The quiz row
       fills the functional canvas; top-aligning its fixed-height children
       leaves a large dead zone on tall kiosk/desktop resolutions and makes
       the genome tower look detached from the question and image. */
    align-items: center !important;
  }

  .screen[data-screen="quiz"] .screen-canvas,
  .screen[data-screen="result"] .screen-canvas {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .screen[data-screen="quiz"] .screen-canvas > .quiz-layout,
  .screen[data-screen="result"] .screen-canvas > .result-layout {
    flex: 1 1 0;
    height: auto !important;
    min-height: 0;
  }
}

@media (max-width: 650px) {
  .screen[data-screen="quiz"] .screen-canvas,
  .screen[data-screen="result"] .screen-canvas {
    height: auto;
  }

  /* Keep the scaled canvas anchored to the left edge so all touch targets and
     fields remain inside the narrow surface. */
  .screen-canvas {
    transform-origin: top left;
  }
}

/* The welcome frame uses the same measured canvas as the quiz/result screens.
   Keep the glass frame as the viewport, but let its content and internal
   margins scale together when the kiosk/browser viewport is shorter than the
   reference layout. This prevents the image card and CTA from drifting below
   the touch area at a zoomed or narrow resolution. */
.screen[data-screen="start"].is-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.screen[data-screen="start"] .start-stage {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  align-items: stretch !important;
  align-content: center !important;
  gap: clamp(22px, 3vw, 56px) !important;
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.screen[data-screen="start"] .start-stage > .lab-art {
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 24px !important;
}

.screen[data-screen="start"] .start-copy { padding: 33px !important; }

@media (max-width: 650px) {
  .screen[data-screen="start"].is-active {
    justify-content: flex-start !important;
  }

  .screen[data-screen="start"] .start-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .screen[data-screen="start"] .start-stage > .lab-art {
    min-height: 180px !important;
    height: 180px !important;
    flex: 0 0 180px;
  }
}

/* -------------------------------------------------------------------------
   Rigid exhibition scene (1280×720 reference)

   The kiosk is a fixed composition, not a fluid dashboard.  Keep the glass
   frame and every child at the reference geometry; app.js applies one
   uniform scale to the complete active frame only when the physical viewport
   is smaller.  This prevents cards, photos, the genome and CTA from drifting
   independently when browser zoom or device-pixel-ratio changes.
   ------------------------------------------------------------------------- */
@media (min-width: 651px) {
  .screen {
    position: absolute !important;
    left: 50% !important;
    top: 94px !important;
    width: 1204px !important;
    /* 680px leaves room for the post-answer explanation and CTA while the
       whole frame still fits the 720px reference viewport after the header. */
    height: 680px !important;
    margin: 0 !important;
    padding: 36px !important;
    box-sizing: border-box !important;
    animation: none !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }

  .screen.is-rigid-fitted {
    transform: translateX(-50%) scale(var(--screen-fit, 1)) !important;
  }

  .screen > .screen-canvas {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .screen[data-screen="quiz"] .screen-canvas,
  .screen[data-screen="result"] .screen-canvas {
    display: flex !important;
    flex-direction: column !important;
  }

  .screen[data-screen="quiz"] .screen-canvas > .quiz-layout,
  .screen[data-screen="result"] .screen-canvas > .result-layout {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .screen[data-screen="quiz"] .genome-display--tower,
  .screen[data-screen="result"] .genome-display--result-tower {
    height: 485px !important;
  }

  .screen[data-screen="quiz"] .visual-column,
  .screen[data-screen="result"] .result-visual-column {
    height: 490px !important;
  }

  .screen[data-screen="quiz"] .visual-column .lab-art,
  .screen[data-screen="result"] .result-visual-column .lab-art {
    height: 100% !important;
  }

  .screen[data-screen="genome-finale"] .genome-finale__layout {
    height: 410px !important;
  }
}

/* -------------------------------------------------------------------------
   Final exhibition lock

   The kiosk has one authored 1280×720 composition.  Desktop scales the shell
   as one unit from this reference frame; phones keep the frame at 1:1 and
   expose it through native document scrolling.
   ------------------------------------------------------------------------- */
:root { --scene-fit: 1; }

.a11y-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html,
body {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body {
  background: #15251f !important;
}

body::before { display: none !important; }

.lab-shell {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 1280px !important;
  height: 720px !important;
  min-width: 1280px !important;
  min-height: 720px !important;
  overflow: hidden !important;
  transform: translate(-50%, -50%) scale(var(--scene-fit, 1)) !important;
  transform-origin: center center !important;
  background:
    linear-gradient(108deg, rgba(25, 47, 43, .18), rgba(255,255,255,.06) 42%, rgba(25, 47, 43, .22)),
    url("generated-assets/complex-background-hq.webp") center / 100% 100% no-repeat !important;
}

.brand-logo {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  width: 220px !important;
  height: 80px !important;
  padding: 8px 17px !important;
  transform: translateX(-50%) !important;
}

/* Co-branding uses the same fixed 220×80 visual slot as the client mark.
   The festival source is portrait-oriented, so contain it inside the shared
   card instead of letting its intrinsic aspect ratio grow the card. */
.festival-lockup {
  position: absolute !important;
  z-index: 8 !important;
  top: 22px !important;
  right: 22px !important;
  width: 220px !important;
  height: 80px !important;
  padding: 8px 17px !important;
  border: 1px solid rgba(27,36,41,.12) !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 11px 28px rgba(27,36,41,.15), inset 0 1px #fff !important;
}

.language-switch button.is-active {
  /* The bright corporate green with white text was below WCAG AA contrast
     (2.61:1).  Keep the brand hue while using the deep green token for a
     readable, still clearly active language pill. */
  color: #fff !important;
  background: var(--apk-deep) !important;
}

.game {
  width: 1280px !important;
  height: 720px !important;
  min-width: 1280px !important;
  min-height: 720px !important;
}

.screen {
  position: absolute !important;
  left: 50% !important;
  top: 94px !important;
  width: 1204px !important;
  /* The frame begins below the 94px logo band and ends exactly at the
     720px reference edge, so no CTA can be clipped by the shell. */
  height: 626px !important;
  margin: 0 !important;
  /* Keep a compact 18px vertical inset in the authored 1280×720 frame.
     This leaves enough room for the intro facts and its CTA without relying
     on viewport-height media queries (which were the source of clipped
     buttons on large/zoomed displays). */
  padding: 18px 36px !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
}

.screen.is-rigid-fitted { transform: translateX(-50%) !important; }

.screen > .screen-canvas {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}

.screen[data-screen="start"].is-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.screen[data-screen="start"] .start-stage {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  align-items: stretch !important;
  gap: 36px !important;
  width: 100% !important;
}

.screen[data-screen="start"] .start-stage > .lab-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.screen[data-screen="start"] h1 {
  font-size: 69px !important;
}

.screen[data-screen="start"] .lead {
  font-size: 19px !important;
}

.intro-dialogue .speaker p {
  padding: 9px 12px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.fact-card { padding: 19px !important; }
.fact-card h2 { margin-bottom: 4px !important; font-size: 21px !important; }
.fact-card p { font-size: 14px !important; }
.intro-copy { gap: 7px !important; }
.region-list b,
.breed-labels b { padding: 5px 7px !important; font-size: 9px !important; }
.region-list,
.breed-labels { margin-top: 7px !important; }

.quiz-layout,
.result-layout {
  display: grid !important;
  /* The outer columns mirror one another so the genome tower's centreline
     lands exactly under the centred client logo instead of drifting right. */
  grid-template-columns: minmax(0, 1fr) minmax(170px, .36fr) minmax(0, 1fr) !important;
  gap: 28px !important;
  height: auto !important;
  min-height: 0 !important;
}

.screen[data-screen="result"] .result-layout {
  /* Reserve a stable row for the assembled code and photo. Long score labels
     are fitted within the left column instead of expanding the row into the
     bottom dialogue and intercepting its button. */
  flex: 0 0 486px !important;
  height: 486px !important;
  align-items: start !important;
}

.screen[data-screen="result"] .result-copy {
  transform: scale(var(--result-fit, 1)) !important;
  transform-origin: left top !important;
}

/* Feedback and the breeding scheme make the question column taller than the
   fixed frame on some questions.  The app supplies --quiz-fit after each
   state change; scaling this single column keeps the CTA inside the frame
   without moving the genome tower or the photo. */
.screen[data-screen="quiz"] .question-column {
  transform: scale(var(--quiz-fit, 1)) !important;
  transform-origin: left top !important;
}

.screen[data-screen="quiz"] .quiz-layout {
  align-items: start !important;
}

.question-column h2 { font-size: 32px !important; }
.question-copy { font-size: 15px !important; }
.answer { font-size: 14px !important; }
.primary { font-size: 14px !important; }
.screen[data-screen="intro"] .intro-copy > .primary,
.screen[data-screen="start"] .primary { margin-top: 10px !important; font-size: 14px !important; }
.result-copy h2 { font-size: 45px !important; }
.takeaways p { font-size: 12px !important; }
.genome-finale__heading h2 { font-size: 45px !important; }
.genome-finale__panel--facts p { font-size: 12px !important; }

.genome-display--tower,
.screen[data-screen="quiz"] .genome-display--tower,
.screen[data-screen="result"] .genome-display--result-tower {
  position: static !important;
  width: auto !important;
  height: 485px !important;
  max-height: 485px !important;
}

.genome-display--tower .genome-display__copy strong,
.genome-display--hero .genome-display__copy strong,
#progress-count {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.visual-column,
.result-visual-column {
  display: block !important;
  width: auto !important;
  height: 490px !important;
}

.genome-finale__layout {
  grid-template-columns: minmax(0, 1fr) minmax(210px, .62fr) minmax(0, 1fr) !important;
  height: 410px !important;
  gap: 28px !important;
}

.genome-display--hero { min-height: 0 !important; }