/* ============================================================
   PAUSE  -  the pause card of the three quests (core/pause.js)

   Lutfi's "Quantum Dawn Pause Screens" design: a card over the frozen
   game, which shows through darkened and blurred. The quest sets the
   accent colour (data-mode). The quest's identity is on the left, the
   run's score, stage and time left and the two buttons on the right; on a
   phone the identity becomes a row above them.

   Its own fixed layer: above the canvas, the touch pads, the sheets and
   the settings gear (z 910), below the end screen (z 958), How to play
   (z 960) and the student login (z 9999). Every rule is scoped to #qdPause
   (and #qdPauseBtn) so nothing here can restyle the game.
   ============================================================ */

#qdPause {
  --accent: #76eadc;
  --rgb: 91, 224, 210;
  --ink: #09191d;
  /* Large Text multiplies the small print by this (see the end). */
  --qp-lt: 1;
  position: fixed;
  inset: 0;
  z-index: 957;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(3, 8, 18, .73);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #eef5ff;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: normal;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#qdPause[hidden] { display: none !important; }
#qdPause[data-mode="operator"] { --accent: #c3abff; --rgb: 176, 136, 255; --ink: #181028; }
#qdPause[data-mode="expert"] { --accent: #ffd38d; --rgb: 248, 191, 103; --ink: #221806; }

#qdPause *,
#qdPause *::before,
#qdPause *::after { box-sizing: border-box; }
#qdPause [hidden] { display: none !important; }
#qdPause h1,
#qdPause h2,
#qdPause p { margin: 0; padding: 0; font-family: inherit; }

#qdPause.is-entering { animation: qp-fade 160ms ease-out both; }
@keyframes qp-fade { from { opacity: 0; } to { opacity: 1; } }

/* The card sits in the middle; when the window is shorter than the card it
   starts at the top and the layer scrolls (margin:auto keeps it centred
   otherwise, without cutting off its top as align-items:center would). */
#qdPause .qp-dialog {
  margin: auto;
  padding: 24px;
  width: min(870px, 100%);
  max-width: 100%;
}

#qdPause .qp-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--rgb), .28);
  border-radius: 19px;
  background: linear-gradient(120deg, rgba(var(--rgb), .065), transparent 55%), #0d1624;
  box-shadow: 0 28px 100px #0008, 0 0 60px rgba(var(--rgb), .05);
}
#qdPause .qp-card::before {
  content: "";
  position: absolute;
  left: 35%;
  right: 35%;
  top: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 24px var(--accent);
}

/* ---------------------------------------------------------- top bar */
#qdPause .qp-top {
  margin: 0 32px;
  padding: 24px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #ffffff12;
}
/* Without the design's "Q" the words carry the brand, a little larger. */
#qdPause .qp-brand {
  display: flex;
  flex-direction: column;
  color: #edf4ff;
  font-size: calc(11px * var(--qp-lt));
  font-weight: 650;
  letter-spacing: 1.9px;
  line-height: 1.2;
}
#qdPause .qp-brand-dawn {
  color: var(--accent);
  font-size: calc(10px * var(--qp-lt));
  letter-spacing: 4.8px;
  margin-top: 3px;
}
#qdPause .qp-status {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 1.7px;
  font-size: calc(9px * var(--qp-lt));
  color: #b5c4d8;
  white-space: nowrap;
}
#qdPause .qp-status i {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(var(--rgb), .6);
}

/* ---------------------------------------------------------- the quest */
#qdPause .qp-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
#qdPause .qp-identity {
  position: relative;
  overflow: hidden;
  padding: 33px 26px;
  text-align: center;
  border-right: 1px solid #ffffff10;
  background: radial-gradient(ellipse at 50% 38%, rgba(var(--rgb), .08), transparent 64%);
}
#qdPause .qp-quest-label {
  display: block;
  font-size: calc(8px * var(--qp-lt));
  letter-spacing: 3px;
  color: var(--accent);
}
#qdPause .qp-emblem {
  position: relative;
  height: 171px;
  display: grid;
  place-items: center;
  margin: 10px 0 8px;
}
#qdPause .qp-emblem > * { grid-area: 1 / 1; }
#qdPause .qp-art {
  position: relative;
  z-index: 1;
  width: 174px;
  height: 174px;
  object-fit: contain;
  filter: drop-shadow(0 6px 15px rgba(var(--rgb), .14));
  -webkit-user-select: none;
  user-select: none;
}
#qdPause .qp-emblem-ring {
  width: 158px;
  height: 158px;
  border: 1px solid rgba(var(--rgb), .15);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(var(--rgb), .025);
}
#qdPause .qp-caption {
  display: block;
  font-size: calc(7px * var(--qp-lt));
  letter-spacing: 1.7px;
  color: #98aabe;
}
#qdPause .qp-mode-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  margin: 8px 0 18px;
  color: #eef5ff;
}
#qdPause .qp-identity-line {
  display: block;
  margin: 0 auto;
  width: 25px;
  height: 1px;
  background: var(--accent);
  opacity: .55;
}
#qdPause .qp-tagline {
  font-size: calc(11px * var(--qp-lt));
  line-height: 1.7;
  color: #92a5bf;
  margin-top: 16px;
}

/* ---------------------------------------------------------- the run */
#qdPause .qp-content {
  min-width: 0;
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#qdPause .qp-eyebrow {
  font-size: calc(8px * var(--qp-lt));
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 11px;
}
#qdPause .qp-title {
  font-size: 36px;
  letter-spacing: -1.3px;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 11px;
  color: #eef5ff;
  outline: none;
}
#qdPause .qp-note {
  font-size: calc(12px * var(--qp-lt));
  line-height: 1.75;
  color: #a6b8cf;
}
#qdPause .qp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 25px 0;
  padding: 18px 0;
  border-top: 1px solid #ffffff12;
  border-bottom: 1px solid #ffffff12;
}
/* With no clock (none is running) the two boxes share the row. */
#qdPause .qp-stats:has(.qp-stat[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#qdPause .qp-stat { min-width: 0; }
#qdPause .qp-stat + .qp-stat { border-left: 1px solid #ffffff12; padding-left: 18px; }
#qdPause .qp-stat-label {
  display: block;
  font-size: calc(8px * var(--qp-lt));
  color: #98abc5;
  letter-spacing: 1.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#qdPause .qp-stat-value {
  display: block;
  margin-top: 7px;
  font-size: 23px;
  letter-spacing: -.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: #eef5ff;
  white-space: nowrap;
}
#qdPause .qp-stat-value small { font-size: 14px; color: #91a5c1; font-weight: 400; }

/* ---------------------------------------------------------- buttons */
#qdPause .qp-btn {
  width: 100%;
  min-height: 48px;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 13px;
  border-radius: 7px;
  padding: 13px 17px;
  font: inherit;
  font-size: calc(12px * var(--qp-lt));
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#qdPause .qp-btn:hover { filter: brightness(1.12); }
#qdPause .qp-btn:focus { outline: none; }
#qdPause .qp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#qdPause.is-tapped .qp-btn:focus-visible { outline: none; }
#qdPause .qp-btn-end { margin-left: auto; }
#qdPause .qp-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(var(--rgb), .1);
}
#qdPause .qp-play-icon { font-size: 12px; }
#qdPause .qp-secondary {
  margin-top: 10px;
  background: #172334;
  border: 1px solid #ffffff16;
  color: #c3d1e6;
}

#qdPause .qp-hints {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  font-size: calc(9px * var(--qp-lt));
  color: #91a3bb;
}
#qdPause .qp-hints > span { display: flex; align-items: center; gap: 6px; }
#qdPause kbd {
  font: calc(9px * var(--qp-lt)) system-ui, sans-serif;
  border: 1px solid #ffffff26;
  border-bottom-width: 2px;
  border-radius: 4px;
  min-width: 23px;
  padding: 3px 5px;
  text-align: center;
  color: #beccdf;
  background: none;
}
/* A phone or tablet has no Esc or Q key to point at. */
@media (pointer: coarse) {
  #qdPause .qp-hints { display: none; }
}

#qdPause .qp-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 24px;
  border-top: 1px solid #ffffff10;
  font-size: calc(7px * var(--qp-lt));
  letter-spacing: 2px;
  color: #879bb6;
  text-align: center;
}
#qdPause .qp-bottom-line { flex: none; width: 22px; height: 1px; background: rgba(var(--rgb), .25); }

/* ---------------------------------------------------------- phones (design's 650 px) */
@media (max-width: 650px) {
  #qdPause .qp-dialog { padding: 15px; width: 100%; }
  #qdPause .qp-top { padding: 16px 0; margin: 0 24px; }
  #qdPause .qp-layout { grid-template-columns: minmax(0, 1fr); }
  #qdPause .qp-identity {
    display: grid;
    grid-template-columns: 67px minmax(0, 1fr);
    gap: 0 14px;
    align-items: center;
    text-align: left;
    padding: 15px 24px;
    border-right: 0;
    border-bottom: 1px solid #ffffff10;
  }
  #qdPause .qp-emblem { height: 65px; grid-column: 1; grid-row: 1 / 4; margin: 0; }
  #qdPause .qp-art { width: 72px; height: 72px; }
  #qdPause .qp-emblem-ring { width: 56px; height: 56px; }
  #qdPause .qp-quest-label { grid-column: 2; font-size: calc(7px * var(--qp-lt)); }
  #qdPause .qp-caption,
  #qdPause .qp-identity-line,
  #qdPause .qp-tagline { display: none; }
  #qdPause .qp-mode-name { grid-column: 2; font-size: 23px; margin: 3px 0; }
  #qdPause .qp-mode-name br { display: none; }
  #qdPause .qp-content { padding: 25px; }
  #qdPause .qp-title { font-size: 32px; }
  #qdPause .qp-stats { margin: 19px 0; }
  #qdPause .qp-stat + .qp-stat { padding-left: 13px; }
  #qdPause .qp-hints { margin-top: 17px; }
  #qdPause .qp-bottom { font-size: calc(6px * var(--qp-lt)); letter-spacing: 1.5px; }
}
@media (max-width: 370px) {
  #qdPause .qp-dialog { padding: 10px; }
  #qdPause .qp-top { margin: 0 18px; }
  #qdPause .qp-identity { padding: 13px 18px; }
  #qdPause .qp-content { padding: 20px 18px; }
  #qdPause .qp-title { font-size: 28px; }
  #qdPause .qp-stat-value { font-size: 20px; }
  #qdPause .qp-stat + .qp-stat { padding-left: 10px; }
}

/* ---------------------------------------------------------- short windows (design's 650 px tall) */
@media (max-height: 650px) and (min-width: 651px) {
  #qdPause .qp-dialog { padding: 10px; width: 780px; }
  #qdPause .qp-top { padding: 14px 0; }
  #qdPause .qp-content { padding: 23px 30px; }
  #qdPause .qp-identity { padding: 22px; }
  #qdPause .qp-emblem { height: 130px; }
  #qdPause .qp-art { width: 140px; height: 140px; }
  #qdPause .qp-emblem-ring { width: 124px; height: 124px; }
  #qdPause .qp-mode-name { font-size: 25px; }
  #qdPause .qp-tagline { display: none; }
  #qdPause .qp-bottom { padding: 13px; }
}
/* A phone held sideways: tighter still, so Resume is on the first screen. */
@media (max-height: 450px) and (min-width: 651px) {
  #qdPause .qp-top { padding: 10px 0; margin: 0 26px; }
  #qdPause .qp-layout { grid-template-columns: 200px minmax(0, 1fr); }
  #qdPause .qp-identity { padding: 14px 18px; }
  #qdPause .qp-emblem { height: 104px; margin: 4px 0 6px; }
  #qdPause .qp-art { width: 100px; height: 100px; }
  #qdPause .qp-emblem-ring { width: 88px; height: 88px; box-shadow: 0 0 0 10px rgba(var(--rgb), .025); }
  #qdPause .qp-mode-name { font-size: 21px; margin: 4px 0 10px; }
  #qdPause .qp-content { padding: 16px 26px; }
  #qdPause .qp-eyebrow { margin-bottom: 6px; }
  #qdPause .qp-title { font-size: 28px; margin-bottom: 4px; }
  #qdPause .qp-stats { margin: 12px 0; padding: 11px 0; }
  #qdPause .qp-stat-value { font-size: 20px; margin-top: 4px; }
  #qdPause .qp-btn { min-height: 44px; padding: 10px 16px; }
  #qdPause .qp-secondary { margin-top: 8px; }
  #qdPause .qp-bottom { padding: 9px; }
}

/* ---------------------------------------------------------- settings
   Large Text: the small print is a third larger. High contrast: the grey
   text turns near-white and the lines get brighter. Reduce motion: no fade. */
body.a11y-large-text #qdPause { --qp-lt: 1.3; }
body.a11y-high-contrast #qdPause .qp-status,
body.a11y-high-contrast #qdPause .qp-caption,
body.a11y-high-contrast #qdPause .qp-tagline,
body.a11y-high-contrast #qdPause .qp-note,
body.a11y-high-contrast #qdPause .qp-stat-label,
body.a11y-high-contrast #qdPause .qp-stat-value small,
body.a11y-high-contrast #qdPause .qp-hints,
body.a11y-high-contrast #qdPause .qp-bottom { color: #e8eef8; }
body.a11y-high-contrast #qdPause .qp-top,
body.a11y-high-contrast #qdPause .qp-identity,
body.a11y-high-contrast #qdPause .qp-stats,
body.a11y-high-contrast #qdPause .qp-stat + .qp-stat,
body.a11y-high-contrast #qdPause .qp-bottom { border-color: #ffffff66; }
body.a11y-high-contrast #qdPause .qp-secondary { color: #ffffff; border-color: #ffffffaa; }
@media (prefers-reduced-motion: reduce) {
  #qdPause.is-entering { animation: none; }
}
body.a11y-reduced-motion #qdPause.is-entering { animation: none; }

/* While the card is up the settings gear and the Pause button step aside. */
body.pause-open .settingsGear,
body.pause-open .settingsDrawer,
body.pause-open .settingsScrim { display: none !important; }

/* ---------------------------------------------------------- the Pause button
   Touch screens only (laptops pause with Esc). core/pause.js places it just
   above the settings gear and matches the gear's size; these are the
   fallbacks when the gear cannot be measured. */
#qdPauseBtn {
  position: fixed;
  right: 12px;
  bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  z-index: 899;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid var(--line, #3a4660);
  border-radius: 50%;
  background: var(--panel, #141c2c);
  color: var(--muted, #c9d4e6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
@media (pointer: coarse) {
  #qdPauseBtn { display: flex; }
}
#qdPauseBtn[hidden] { display: none !important; }
#qdPauseBtn:focus { outline: none; }
#qdPauseBtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#qdPauseBtn .qp-pause-icon { display: flex; gap: 4px; }
#qdPauseBtn .qp-pause-icon i { display: block; width: 4px; height: 15px; border-radius: 1.5px; background: currentColor; }
body.pause-open #qdPauseBtn { display: none !important; }