/* ============================================================
   RUN RESULTS  -  the screen after a whole quest (core/results.js)

   Lutfi's "Quantum Dawn End Screens" design, one layout for the three
   quests: the quest picture on the left, the result, the score, three
   stats, the questions-right bar and the two buttons on the right. The
   quest sets the accent colour (data-mode), and a run with fewer than half
   of its questions right takes the orange "keep practising" look
   (data-outcome="failure").

   It is its own full-screen fixed layer, like the How to play pop-up: above
   the canvas, the touch pads, the sheets and the settings gear (z 910),
   just below How to play (z 960) and the student login (z 9999). Every rule
   is scoped to #qdResults so nothing here can restyle the game, and the
   game's own element rules are reset inside it.

   The page never scrolls sideways. When the window is too short for the
   whole summary (a phone held sideways), the layer scrolls up and down
   inside itself; the scenery behind it stays put.
   ============================================================ */

#qdResults {
  --accent: #74ecdf;
  --rgb: 86, 224, 216;
  --secondary: #146e86;
  --qr-bg: #0a1321;
  /* Large Text multiplies the small print by this (see the end). */
  --qr-lt: 1;
  position: fixed;
  inset: 0;
  z-index: 958;
  overflow: hidden;
  isolation: isolate;
  background: var(--qr-bg);
  color: #f1f5fc;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: normal;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#qdResults[hidden] { display: none !important; }
#qdResults[data-mode="operator"] { --accent: #c6abff; --rgb: 168, 123, 255; --secondary: #514187; --qr-bg: #111022; }
#qdResults[data-mode="expert"] { --accent: #ffd18a; --rgb: 250, 184, 88; --secondary: #805f30; --qr-bg: #111524; }

#qdResults *,
#qdResults *::before,
#qdResults *::after { box-sizing: border-box; }

#qdResults h1,
#qdResults h2,
#qdResults p { margin: 0; padding: 0; font-family: inherit; }

#qdResults button {
  font: inherit;
  margin: 0;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#qdResults button:hover { filter: brightness(1.12); }
#qdResults button:focus { outline: none; }
#qdResults button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

/* A tap that ends on the backdrop opens nothing and selects nothing. */
#qdResults .qr-scenery,
#qdResults .qr-art-stage { -webkit-user-select: none; user-select: none; }

/* The layer fades in once; core/results.js removes the class afterwards. */
#qdResults.is-entering { animation: qr-fade 220ms ease-out both; }
@keyframes qr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------- scenery
   The grid, the stars and the dark sweep cover the whole window. The glow,
   the halos and the operator's circuit lines sit in a frame as wide as the
   content (1440 at most) and centred on it, so on a wide monitor they stay
   behind the quest picture as in the design. */
#qdResults .qr-scenery {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, #090e1ac9);
}
#qdResults .qr-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#7992b007 1px, transparent 1px), linear-gradient(90deg, #7992b007 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 78%);
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}
#qdResults .qr-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 22%, #cadbff 0 1px, transparent 2px),
    radial-gradient(circle at 34% 15%, #cadbff88 0 1px, transparent 2px),
    radial-gradient(circle at 14% 77%, #cadbff88 0 1px, transparent 2px),
    radial-gradient(circle at 41% 65%, #cadbff66 0 1px, transparent 2px);
  opacity: .4;
}
#qdResults .qr-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(1440px, 100%);
  transform: translateX(-50%);
}
/* The glow behind the picture: the design's "ellipse at 20% 48%, fading
   out halfway to the farthest corner", drawn as a box exactly that ellipse's
   size. As the frame's own background it was cut off at the frame's edge,
   a hard vertical line on any window wider than 1440; this box spills past
   the frame like the halos do, and only the window clips it. */
#qdResults .qr-frame::before {
  content: "";
  position: absolute;
  left: -36.57%;
  width: 113.14%;
  top: 11.23%;
  height: 73.54%;
  background: radial-gradient(closest-side, rgba(var(--rgb), .10), transparent);
}
/* In the design the halos are centred a little above the middle of the
   card, on the picture; the window is taller than the card, so they are
   placed from the middle rather than from the top. */
#qdResults .qr-halo {
  position: absolute;
  border: 1px solid rgba(var(--rgb), .12);
  border-radius: 50%;
  width: 650px;
  height: 650px;
  left: -180px;
  top: calc(50% - 351px);
}
#qdResults .qr-halo-two { width: 800px; height: 800px; top: calc(50% - 421px); left: -255px; opacity: .5; }
#qdResults[data-mode="expert"] .qr-halo-one {
  border-width: 2px;
  box-shadow: 0 0 70px rgba(var(--rgb), .08), inset 0 0 70px rgba(var(--rgb), .08);
}
#qdResults .qr-circuit {
  display: none;
  position: absolute;
  border: 1px solid rgba(var(--rgb), .22);
  border-right: 0;
  width: 340px;
  height: 140px;
  left: -90px;
  top: calc(50% - 161px);
  transform: skewY(-22deg);
}
#qdResults .qr-c2 { top: calc(50% + 89px); left: 200px; width: 200px; height: 100px; }
#qdResults[data-mode="operator"] .qr-circuit { display: block; }

/* ---------------------------------------------------------- page */
#qdResults .qr-scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#qdResults .qr-page {
  max-width: 1440px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------------------------------------------------------- masthead */
#qdResults .qr-masthead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 42px;
  padding: 27px 0;
  border-bottom: 1px solid #ffffff12;
}
/* The design's "Q" mark is left out on purpose (it was taken off the
   leaderboard too), so the words carry the brand a little larger. */
#qdResults .qr-brand {
  font-weight: 750;
  font-size: calc(14.4px * var(--qr-lt));
  letter-spacing: 2.4px;
  line-height: 1.2;
  color: #f1f5fc;
}
#qdResults .qr-brand-dawn {
  display: block;
  margin-top: 3px;
  font-size: calc(12px * var(--qr-lt));
  letter-spacing: 6.8px;
  color: var(--accent);
}
#qdResults .qr-chapter { font-size: calc(10px * var(--qr-lt)); color: #b8c5d9; letter-spacing: 2px; }
#qdResults .qr-chapter-num { color: var(--accent); margin-right: 10px; }
#qdResults .qr-session { font-size: calc(9px * var(--qr-lt)); letter-spacing: 2.4px; color: #8b9bb0; }

/* ---------------------------------------------------------- layout */
#qdResults .qr-layout {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 52px;
  padding: 42px 70px 40px 42px;
  align-items: center;
  align-content: center;
}

/* ---------------------------------------------------------- picture */
#qdResults .qr-art-panel { text-align: center; min-width: 0; }
#qdResults .qr-art-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: calc(9px * var(--qr-lt));
  letter-spacing: 2.3px;
}
#qdResults .qr-tiny-line { flex: 0 0 auto; width: 22px; height: 1px; background: var(--accent); }
#qdResults .qr-art-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.25;
  max-width: 460px;
  margin: 15px auto 7px;
}
#qdResults .qr-art {
  display: block;
  width: 88%;
  height: auto;
  max-width: none;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(var(--rgb), .17));
  animation: qr-float 6s ease-in-out infinite;
  -webkit-user-drag: none;
}
#qdResults[data-mode="operator"] .qr-art { width: 87%; }
#qdResults[data-mode="expert"] .qr-art { width: 95%; }
#qdResults .qr-aura {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rgb), .16), transparent 68%);
  animation: qr-breathe 4s ease-in-out infinite;
}
#qdResults .qr-orbit {
  position: absolute;
  width: 88%;
  height: 88%;
  border: 1px solid rgba(var(--rgb), .12);
  border-radius: 50%;
  transform: rotate(-27deg) scaleY(.68);
}
#qdResults .qr-orbit-two { transform: rotate(38deg) scaleY(.68); border-style: dashed; opacity: .6; }
#qdResults .qr-spark {
  position: absolute;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: qr-breathe 3s ease-in-out infinite;
}
#qdResults .qr-s1 { top: 20%; left: 15%; }
#qdResults .qr-s2 { right: 12%; top: 48%; animation-delay: -1s; }
#qdResults .qr-s3 { bottom: 12%; left: 28%; animation-delay: -2s; }
#qdResults .qr-edition { font-size: calc(9px * var(--qr-lt)); color: var(--accent); letter-spacing: 3px; }
#qdResults .qr-art-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.8px;
  line-height: 1.15;
  margin: 8px 0;
  color: #f1f5fc;
}
#qdResults .qr-art-desc { font-size: calc(12px * var(--qr-lt)); color: #9aaabe; line-height: 1.4; }

/* ---------------------------------------------------------- result */
#qdResults .qr-result-panel { min-width: 0; padding-left: 35px; border-left: 1px solid #ffffff10; }
#qdResults .qr-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: calc(10px * var(--qr-lt));
  letter-spacing: 2px;
  font-weight: 650;
  line-height: 1.4;
}
#qdResults .qr-status-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--rgb), .5);
  width: 23px;
  height: 23px;
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 0;
}
#qdResults .qr-status-line {
  flex: 1 1 12px;
  min-width: 12px;
  height: 1px;
  margin-left: 10px;
  background: linear-gradient(90deg, rgba(var(--rgb), .35), transparent);
}
#qdResults .qr-title {
  font-size: clamp(30px, 3.5vw, 49px);
  font-weight: 600;
  letter-spacing: -1.9px;
  line-height: 1.15;
  margin: 15px 0 12px;
  color: #f1f5fc;
  outline: none;
  overflow-wrap: break-word;
}
#qdResults .qr-message {
  font-size: calc(13px * var(--qr-lt));
  line-height: 1.7;
  color: #a8b7cd;
  max-width: calc(420px * var(--qr-lt));
  min-height: 44px;
  margin: 0 0 23px;
}
#qdResults .qr-score-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 22px;
}
#qdResults .qr-score-area > div { min-width: 0; }
#qdResults .qr-label {
  display: block;
  font-size: calc(9px * var(--qr-lt));
  letter-spacing: 1.7px;
  color: #a6b5ca;
  font-weight: 550;
  line-height: 1.3;
}
#qdResults .qr-score-number { display: flex; align-items: baseline; gap: 10px; margin-top: 5px; }
#qdResults .qr-score {
  font-size: clamp(55px, 6vw, 80px);
  font-weight: 550;
  letter-spacing: -4px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#qdResults .qr-pts { font-size: calc(10px * var(--qr-lt)); color: #8da2bc; letter-spacing: 2px; }
#qdResults .qr-record {
  flex: 0 1 auto;
  font-size: calc(8px * var(--qr-lt));
  letter-spacing: 1.1px;
  color: var(--accent);
  border: 1px solid rgba(var(--rgb), .3);
  background: rgba(var(--rgb), .06);
  padding: 10px 12px;
  border-radius: 4px;
  max-width: 143px;
  line-height: 1.5;
}
#qdResults .qr-record[hidden] { display: none; }

/* Each stat spans three shared rows (label, value, note), so when one label
   wraps onto two lines on a phone ("CORRECT ANSWERS") the three values
   still line up. */
#qdResults .qr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  border-top: 1px solid #ffffff14;
  border-bottom: 1px solid #ffffff14;
  padding: 20px 0;
  column-gap: 10px;
  row-gap: 0;
}
#qdResults .qr-stat {
  min-width: 0;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
#qdResults .qr-stat > .qr-label { align-self: end; }
#qdResults .qr-stat + .qr-stat { border-left: 1px solid #ffffff12; padding-left: 19px; }
#qdResults .qr-stat-value {
  display: block;
  margin: 9px 0 6px;
  font-size: 25px;
  font-weight: 550;
  letter-spacing: -.8px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#qdResults .qr-stat-den { font-size: 16px; color: #8a9cb3; font-weight: 400; }
#qdResults .qr-stat-note { display: block; font-size: calc(10px * var(--qr-lt)); color: #96a7be; line-height: 1.4; }

#qdResults .qr-progress-block { margin-top: 21px; }
#qdResults .qr-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(9px * var(--qr-lt));
  letter-spacing: 1px;
  color: #9faec4;
  line-height: 1.3;
}
#qdResults .qr-progress-text { letter-spacing: 0; color: var(--accent); text-align: right; }
#qdResults .qr-progress-track {
  height: 4px;
  background: #ffffff10;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 11px;
}
#qdResults .qr-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transition: width .5s;
}
#qdResults .qr-next { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: #afbed0; }
#qdResults .qr-next p { font-size: calc(11px * var(--qr-lt)); line-height: 1.5; }
#qdResults .qr-next-icon { flex: 0 0 auto; color: var(--accent); font-size: 17px; }

#qdResults .qr-actions { display: flex; gap: 12px; }
#qdResults .qr-btn {
  min-width: 0;
  border-radius: 6px;
  min-height: 49px;
  padding: 12px 18px;
  font-size: calc(12px * var(--qr-lt));
  font-weight: 650;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
#qdResults .qr-primary { background: var(--accent); color: #09131c; flex: 1.2 1 0; }
#qdResults .qr-primary .qr-arrow { margin-left: auto; }
#qdResults .qr-primary .qr-replay-icon { font-size: 19px; line-height: 1; }
#qdResults .qr-secondary { color: #d4ddeb; background: #182234; border: 1px solid #ffffff1a; flex: 1 1 0; }

/* ---------------------------------------------------------- footer */
#qdResults .qr-footer {
  flex: 0 0 auto;
  margin: 0 42px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #ffffff12;
  font-size: calc(8px * var(--qr-lt));
  letter-spacing: 1.7px;
  color: #8f9db2;
  line-height: 1.4;
}
#qdResults .qr-footer > span:first-child { color: var(--accent); }
#qdResults .qr-footer i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 2px;
}

/* ---------------------------------------------------------- failure
   The run is finished but under half of it was right: orange status,
   a still picture, a dimmer score. The buttons keep the quest colour. */
#qdResults[data-outcome="failure"] .qr-status { color: #f5c292; }
#qdResults[data-outcome="failure"] .qr-status-icon { border-color: #c4946b66; }
#qdResults[data-outcome="failure"] .qr-art {
  animation: none;
  filter: saturate(.8) drop-shadow(0 10px 18px rgba(var(--rgb), .1));
}
#qdResults[data-outcome="failure"] .qr-spark { display: none; }
#qdResults[data-outcome="failure"] .qr-aura { opacity: .55; animation: none; }
#qdResults[data-outcome="failure"] .qr-score { color: #e1e9f6; }

/* Very long numbers shrink, as in the design, instead of pushing the
   badge or the next stat out of the panel. */
#qdResults .qr-score.is-long { font-size: clamp(27px, 3.6vw, 45px); letter-spacing: -1.5px; }
#qdResults .qr-stat-value.is-long { font-size: 17px; letter-spacing: -.3px; }

@keyframes qr-float { 50% { transform: translateY(-9px); } }
@keyframes qr-breathe { 50% { opacity: .45; transform: scale(.94); } }

/* ---------------------------------------------------------- short windows
   A laptop at 1280x720 or 1366x768 (less the browser's own bars) is a
   little shorter than the design's card. Tighter spacing and a smaller
   picture keep both buttons on the first screen there; anything shorter
   still scrolls. */
@media (min-width: 741px) and (max-height: 820px) {
  #qdResults .qr-masthead { padding: 18px 0; }
  #qdResults .qr-layout { padding-top: 22px; padding-bottom: 22px; }
  #qdResults .qr-art-stage { max-width: 380px; margin-top: 10px; }
  #qdResults .qr-title { margin: 10px 0 8px; }
  #qdResults .qr-message { min-height: 0; margin-bottom: 14px; }
  #qdResults .qr-score-area { padding-bottom: 14px; }
  #qdResults .qr-stats { padding: 14px 0; }
  #qdResults .qr-progress-block { margin-top: 14px; }
  #qdResults .qr-next { margin: 12px 0; }
  #qdResults .qr-footer { padding: 14px 0; }
}
@media (min-width: 741px) and (max-height: 560px) {
  #qdResults .qr-art-stage { max-width: 300px; }
  #qdResults .qr-score { font-size: clamp(48px, 5vw, 64px); }
}

/* ---------------------------------------------------------- breakpoints
   The design's three: 1100, 740 (stacked, the picture a thumbnail beside
   the quest name) and 370. */
@media (max-width: 1100px) {
  #qdResults .qr-layout { gap: 25px; padding: 36px 36px 34px 24px; grid-template-columns: .82fr 1.18fr; }
  #qdResults .qr-result-panel { padding-left: 25px; }
  #qdResults .qr-score { font-size: 65px; }
  #qdResults .qr-record { max-width: 115px; font-size: calc(7px * var(--qr-lt)); padding: 8px; }
  #qdResults .qr-stat + .qr-stat { padding-left: 12px; }
  #qdResults .qr-stats .qr-label { font-size: calc(8px * var(--qr-lt)); letter-spacing: 1px; }
}
@media (max-width: 1100px) and (min-width: 741px) and (max-height: 820px) {
  #qdResults .qr-layout { padding-top: 22px; padding-bottom: 22px; }
}
@media (max-width: 1100px) and (min-width: 741px) and (max-height: 560px) {
  #qdResults .qr-score { font-size: 52px; }
}
@media (max-width: 740px) {
  #qdResults .qr-masthead { margin: 0 22px; padding: 20px 0; }
  #qdResults .qr-session { display: none; }
  #qdResults .qr-chapter { font-size: calc(8px * var(--qr-lt)); letter-spacing: 1px; text-align: right; }
  #qdResults .qr-layout { display: flex; flex-direction: column; padding: 22px; gap: 22px; }
  /* The picture row is as wide as the result column under it (520 at
     most), so on a wide phone the two line up instead of the thumbnail
     hugging the left edge above a centred column. */
  #qdResults .qr-art-panel {
    width: 100%;
    max-width: 520px;
    display: grid;
    grid-template-columns: 125px 1fr;
    align-items: center;
    text-align: left;
    gap: 15px;
  }
  #qdResults .qr-art-caption { display: none; }
  #qdResults .qr-art-stage { width: 125px; margin: 0; grid-column: 1; grid-row: 1; }
  #qdResults .qr-art-bottom { min-width: 0; }
  #qdResults .qr-art-name { font-size: 24px; }
  #qdResults .qr-art-desc { font-size: calc(11px * var(--qr-lt)); }
  #qdResults .qr-result-panel { border: 0; padding: 0; width: 100%; max-width: 520px; }
  #qdResults .qr-message { min-height: 0; }
  #qdResults .qr-footer { margin: 0 22px; font-size: calc(7px * var(--qr-lt)); letter-spacing: 1px; }
  #qdResults .qr-footer > span:last-child { display: none; }
  #qdResults .qr-score-area { padding-bottom: 17px; }
  #qdResults .qr-record { max-width: 140px; font-size: calc(8px * var(--qr-lt)); }
  #qdResults .qr-score { font-size: 65px; }
  #qdResults .qr-title { font-size: 38px; }
  #qdResults .qr-btn { padding: 12px; }
  #qdResults .qr-stat-value { font-size: 23px; }
  /* The halos keep the design's places from the top of a phone screen. */
  #qdResults .qr-halo-one { top: 40px; }
  #qdResults .qr-halo-two { top: -30px; }
  #qdResults .qr-c1 { top: 230px; }
  #qdResults .qr-c2 { top: 480px; }
}
@media (max-width: 370px) {
  #qdResults .qr-brand { font-size: calc(12px * var(--qr-lt)); }
  #qdResults .qr-brand-dawn { font-size: calc(9.6px * var(--qr-lt)); letter-spacing: 5.4px; }
  #qdResults .qr-chapter { max-width: 122px; line-height: 1.6; }
  #qdResults .qr-layout { padding: 18px; }
  #qdResults .qr-art-panel { grid-template-columns: 95px 1fr; }
  #qdResults .qr-art-stage { width: 95px; }
  #qdResults .qr-art-name { font-size: 21px; }
  #qdResults .qr-record { font-size: calc(7px * var(--qr-lt)); max-width: 102px; }
  #qdResults .qr-stats .qr-label { font-size: calc(7px * var(--qr-lt)); }
  #qdResults .qr-footer > span:nth-child(2) { display: none; }
  /* "RUN COMPLETE · KEEP PRACTISING" stays on one line beside its icon. */
  #qdResults .qr-status { letter-spacing: 1.2px; }
  /* Two buttons side by side on a 320px phone: less air inside them so
     "Back to hub" keeps to one line. */
  #qdResults .qr-actions { gap: 10px; }
  #qdResults .qr-btn { padding: 12px 10px; gap: 8px; }
}

/* ---------------------------------------------------------- settings
   Large Text: the small print grows by 30% (the big numbers are big
   already). High contrast: the grey text turns near-white and the lines
   brighter. */
body.a11y-large-text #qdResults { --qr-lt: 1.3; }
body.a11y-large-text #qdResults .qr-record { max-width: 190px; }
body.a11y-high-contrast #qdResults .qr-chapter,
body.a11y-high-contrast #qdResults .qr-session,
body.a11y-high-contrast #qdResults .qr-art-desc,
body.a11y-high-contrast #qdResults .qr-message,
body.a11y-high-contrast #qdResults .qr-label,
body.a11y-high-contrast #qdResults .qr-pts,
body.a11y-high-contrast #qdResults .qr-stat-den,
body.a11y-high-contrast #qdResults .qr-stat-note,
body.a11y-high-contrast #qdResults .qr-progress-label,
body.a11y-high-contrast #qdResults .qr-next,
body.a11y-high-contrast #qdResults .qr-footer { color: #e8eef8; }
body.a11y-high-contrast #qdResults .qr-masthead,
body.a11y-high-contrast #qdResults .qr-footer,
body.a11y-high-contrast #qdResults .qr-stats,
body.a11y-high-contrast #qdResults .qr-stat + .qr-stat,
body.a11y-high-contrast #qdResults .qr-result-panel { border-color: #ffffff66; }
body.a11y-high-contrast #qdResults .qr-progress-track { background: #ffffff33; }
body.a11y-high-contrast #qdResults .qr-secondary { color: #ffffff; border-color: #ffffffaa; }

/* ---------------------------------------------------------- motion
   Still when the system or the game's own Reduce motion asks for it, and
   while the tab is hidden (core/results.js sets data-motion="off"). */
@media (prefers-reduced-motion: reduce) {
  #qdResults,
  #qdResults *,
  #qdResults *::before,
  #qdResults *::after { animation: none !important; transition: none !important; }
}
body.a11y-reduced-motion #qdResults,
body.a11y-reduced-motion #qdResults *,
#qdResults[data-motion="off"],
#qdResults[data-motion="off"] * { animation: none !important; transition: none !important; }

/* ---------------------------------------------------------- the rest of the page
   While the summary is up nothing else is reachable: the settings gear and
   its drawer would float over it, and the touch pads sit under it. */
body.results-open .settingsGear,
body.results-open .settingsDrawer,
body.results-open .settingsScrim { display: none !important; }

/* After a click on one of the two buttons this invisible sheet stays for a
   moment, so the second click of a double-click lands on it instead of on
   whatever the button opened (a Play button on the hub, the maze). */
#qdResultsShield {
  position: fixed;
  inset: 0;
  z-index: 958;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}