/* ============================================================
   HOW TO PLAY  -  the pop-up every quest opens on (core/howto.js)

   A fixed layer of its own: above the game, its sheets and the settings
   gear (z 910), below the student login (z 9999). The look follows the new
   home page: deep navy card, a thin border and buttons in the quest's own
   colour (--hw-accent), gold section labels.

   Three bands, like the game's sheets: the head and the button bar hold
   their ground and only the middle scrolls, so on a short landscape phone
   the Start button is always on screen.
   ============================================================ */

.howto-layer {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
           max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(ellipse at 50% 38%, rgba(16, 28, 52, 0.55), rgba(3, 7, 15, 0.86) 75%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: var(--font-ui, "Nunito", "Segoe UI", Arial, sans-serif);
  color: #f4f2eb;
  -webkit-tap-highlight-color: transparent;
}

.howto-card {
  --hw-accent: #f5cf77;
  --hw-accent-rgb: 245, 207, 119;
  position: relative;
  width: min(840px, 100%);
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(var(--hw-accent-rgb), 0.55);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(var(--hw-accent-rgb), 0.10), transparent 55%),
    linear-gradient(160deg, rgba(17, 28, 41, 0.98), rgba(6, 16, 28, 0.98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: calc(0.9rem * var(--ui-scale, 1));
  line-height: 1.45;
}

.howto-layer.is-entering .howto-card { animation: howto-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.howto-layer.is-entering { animation: howto-fade 180ms ease-out both; }
@keyframes howto-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes howto-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- head ---- */
.howto-head { flex: 0 0 auto; padding: 20px 26px 12px; }

.howto-kicker {
  margin: 0 0 4px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9ccaa;
}

.howto-title {
  margin: 0 0 8px;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  line-height: 1.15;
  color: #fff3cf;
}
.howto-quest { color: var(--hw-accent); }

.howto-goal {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: #e3e8f0;
  font-size: 1.02em;
}
.howto-goal-tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--hw-accent-rgb), 0.55);
  background: rgba(var(--hw-accent-rgb), 0.1);
  color: var(--hw-accent);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-1px);
}

/* ---- the scrolling middle ---- */
.howto-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px 26px 12px;
}
/* A fade at the bottom edge only while there really is more below. */
.howto-scroll.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
}

.howto-top {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.howto-label {
  margin: 0 0 8px;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hw-accent);
}

/* ---- the demo ---- */
.howto-demo {
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(var(--hw-accent-rgb), 0.25);
  background: rgba(4, 10, 20, 0.55);
}
.howto-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 140;
  border-radius: 9px;
  background: #0a0f1c;
}
.howto-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  min-height: 2.5em;
  margin-top: 7px;
  font-size: 0.92em;
}
.howto-cap-act { font-weight: 800; color: #fff3cf; }
.howto-cap-keys { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---- key, button and gesture chips ---- */
.howto-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.95em;
  height: 1.95em;
  padding: 0 0.45em;
  border-radius: 6px;
  border: 1px solid rgba(193, 209, 227, 0.5);
  border-bottom-width: 2px;
  background: linear-gradient(180deg, rgba(40, 54, 74, 0.95), rgba(14, 22, 36, 0.95));
  color: #f4f2eb;
  font: 800 0.82em/1 var(--font-ui, "Nunito", Arial, sans-serif);
  white-space: nowrap;
  vertical-align: middle;
}
.howto-tbtn {
  display: inline-flex;
  align-items: center;
  height: 2em;
  padding: 0 0.7em;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(16, 22, 40, 0.92);
  color: #f4f7ea;
  font-size: 0.8em;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: middle;
}
.howto-gesture {
  display: inline-flex;
  align-items: center;
  height: 2em;
  padding: 0 0.75em;
  border-radius: 999px;
  border: 1px dashed rgba(var(--hw-accent-rgb), 0.75);
  background: rgba(var(--hw-accent-rgb), 0.08);
  color: #fff3cf;
  font-size: 0.8em;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: middle;
}
.howto-or { margin: 0 0.25em; color: #8fa0b5; font-size: 0.82em; }
.howto-none { color: #5f6f85; }

/* ---- controls table ---- */
.howto-ctl { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.howto-ctl.is-two { grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); }
.howto-ctl-row { display: contents; }
.howto-ctl-row > span {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}
.howto-ctl-row:last-child > span { border-bottom: 0; }
.howto-ctl-act { padding-right: 16px !important; }
.howto-ctl-act b { display: block; font-weight: 800; color: #f4f2eb; white-space: nowrap; }
.howto-ctl-how {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  padding-left: 6px !important;
}
.howto-ctl-how small { font-size: 0.82em; color: #a9b8ca; line-height: 1.3; }
.howto-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.howto-ctl-head > span {
  padding: 0 0 4px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a9b8ca;
}

/* ---- points and questions ---- */
.howto-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.howto-sec { min-width: 0; }

/* ---- the Time row: three tiles across both columns, above Points and
   Questions. A big value in the quest's colour, then a short caption. ---- */
.howto-time { grid-column: 1 / -1; }
.howto-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.howto-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--hw-accent-rgb), 0.35);
  background: rgba(var(--hw-accent-rgb), 0.07);
}
.howto-tile-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--hw-accent); }
.howto-tile-val {
  flex: 0 0 auto;
  font-size: 1.25em;
  font-weight: 800;
  line-height: 1.15;
  color: var(--hw-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.howto-tile-cap { min-width: 0; color: #e3e8f0; font-size: 0.9em; line-height: 1.25; }
/* Read by screen readers only: the row's "Time" heading. */
.howto-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.howto-points,
.howto-questions {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}
.howto-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.howto-pts li { display: flex; align-items: center; gap: 10px; }
.howto-ico { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; }
.howto-ico svg { width: 22px; height: 22px; }
.howto-pt-lbl { flex: 1 1 auto; color: #e3e8f0; }
.howto-pt-val {
  flex: 0 0 auto;
  min-width: 3.1em;
  padding: 1px 8px;
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.howto-pt-val.is-plus { color: #8fe0a8; background: rgba(143, 224, 168, 0.12); }
.howto-pt-val.is-minus { color: #ff9aa8; background: rgba(255, 154, 168, 0.12); }
.howto-note { margin: 9px 0 0; font-size: 0.86em; color: #a9b8ca; line-height: 1.4; }

.howto-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.howto-qs li { position: relative; padding-left: 16px; color: #e3e8f0; line-height: 1.5; text-wrap: pretty; }
.howto-qs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hw-accent);
}
.howto-qs .howto-key { height: 1.7em; min-width: 1.7em; }

/* ---- buttons ---- */
.howto-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 26px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(4, 10, 20, 0.35);
}
.howto-keyhint {
  margin: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82em;
  color: #a9b8ca;
  white-space: pre;
}
.howto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(206, 214, 238, 0.45);
  background: rgba(16, 30, 45, 0.9);
  color: #e6ebf4;
  font: 800 1em var(--font-ui, "Nunito", Arial, sans-serif);
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 140ms ease, background-color 140ms ease, transform 100ms ease;
}
.howto-btn:hover { background: rgba(36, 50, 68, 0.95); }
.howto-btn:active { transform: translateY(1px); }
.howto-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.howto-btn.is-primary {
  min-width: 150px;
  border-color: rgba(255, 255, 255, 0.35);
  background: var(--hw-accent);
  color: #14202a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 6px 20px rgba(var(--hw-accent-rgb), 0.25);
}
.howto-btn.is-primary:hover { filter: brightness(1.1); background: var(--hw-accent); }

/* ---- the hub's general guide ---- */
.howto-guide { width: min(700px, 100%); }
.howto-guide-top {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.howto-guide-hero { margin: 0; }
.howto-guide-hero .howto-canvas { aspect-ratio: 120 / 140; background: transparent; }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.howto-step { display: flex; gap: 12px; align-items: flex-start; }
.howto-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 207, 119, 0.7);
  color: #f5cf77;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 700;
}
.howto-step-txt b { display: block; color: #fff3cf; }
.howto-step-txt span { color: #c9d3e0; }
.howto-guide .howto-label { margin-top: 18px; color: #f5cf77; }
.howto-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.howto-questrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--hw-accent-rgb), 0.35);
  background: rgba(var(--hw-accent-rgb), 0.05);
}
.howto-questtxt b { display: block; color: var(--hw-accent); font-family: var(--font-display, Georgia, serif); }
.howto-questtxt span { color: #d7dee9; font-size: 0.95em; }
.howto-guide .howto-note { margin-top: 12px; }
.howto-guide .howto-note .howto-key { height: 1.7em; }
.howto-guide .howto-btn.is-primary { --hw-accent: #f5cf77; --hw-accent-rgb: 245, 207, 119; }

/* ---- while it is open ----
   The runner's touch deck and the settings gear would otherwise sit on top
   of (or beside) the pop-up and invite a tap that does nothing. */
body.howto-open .touchControls { display: none !important; }
body.howto-open .settingsGear,
body.howto-open .settingsDrawer,
body.howto-open .settingsScrim { display: none !important; }

/* ---- laptop screens (1280x720 and the like): the same layout, less air,
   so the whole card fits without scrolling ---- */
@media (min-width: 681px) and (max-height: 820px) {
  .howto-head { padding: 14px 24px 8px; }
  .howto-title { margin-bottom: 6px; }
  .howto-scroll { padding: 2px 24px 8px; }
  .howto-ctl-row > span { padding: 5px 0; }
  .howto-cols { margin-top: 12px; }
  .howto-points,
  .howto-questions { padding: 10px 14px; }
  .howto-pts { gap: 3px; }
  .howto-qs { gap: 4px; }
  .howto-note { margin-top: 7px; }
  .howto-actions { padding: 10px 24px 14px; }
  .howto-tile { padding: 6px 12px; }
}

/* ---- wide but short screens (1280x720, 1366x768, 1536x864, 1024x768): a
   wider card, so the Time captions and the question lines wrap less and
   Quantum Expert (six controls, six question lines) still fits whole ---- */
@media (min-width: 1000px) and (max-height: 880px) {
  .howto-card:not(.howto-guide) { width: min(1000px, 100%); }
  .howto-cols { gap: 10px 14px; margin-top: 10px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .howto-ctl-row > span { padding: 4px 0; }
  .howto-qs { gap: 3px; }
  .howto-qs li { line-height: 1.4; }
}

/* ---- narrow screens: one column ---- */
@media (max-width: 680px) {
  .howto-head { padding: 16px 16px 10px; }
  .howto-scroll { padding: 4px 16px 12px; }
  .howto-actions { padding: 10px 16px 14px; }
  .howto-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .howto-demo { width: 100%; max-width: 330px; margin: 0 auto; }
  .howto-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
  .howto-goal { display: block; }
  .howto-goal-tag { display: inline-block; margin-right: 8px; transform: translateY(-2px); }
  .howto-keyhint { display: none; }
  .howto-btn { flex: 1 1 0; }
  .howto-btn.is-primary { flex: 2 1 0; min-width: 0; }
  .howto-guide-top { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  /* Three narrow tiles: the value sits over its caption. */
  .howto-tiles { gap: 6px; }
  .howto-tile { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 7px 9px; }
  .howto-tile-ico { display: none; }
  .howto-tile-val { font-size: 1.1em; white-space: normal; }
  .howto-tile-cap { font-size: 0.8em; }
}

/* ---- short landscape screens: tighter bands, the middle scrolls ---- */
@media (max-height: 520px) {
  .howto-layer { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .howto-card { font-size: calc(0.84rem * var(--ui-scale, 1)); border-radius: 14px; }
  .howto-head { padding: 10px 18px 6px; }
  .howto-kicker { display: none; }
  .howto-title { font-size: 1.1rem; margin-bottom: 4px; }
  .howto-goal { flex-direction: row; font-size: 0.95em; }
  .howto-scroll { padding: 4px 18px 8px; }
  .howto-top { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 16px; }
  .howto-demo { padding: 6px; }
  .howto-caption { margin-top: 4px; min-height: 2.2em; }
  .howto-ctl-row > span { padding: 4px 0; }
  .howto-cols { margin-top: 12px; }
  .howto-actions { padding: 8px 18px 10px; }
  .howto-btn { min-height: 40px; padding: 7px 16px; }
  .howto-tile { padding: 5px 10px; }
}

/* ---- motion and contrast ---- */
@media (prefers-reduced-motion: reduce) {
  .howto-layer.is-entering,
  .howto-layer.is-entering .howto-card { animation: none; }
  .howto-btn { transition: none; }
}
body.a11y-reduced-motion .howto-layer.is-entering,
body.a11y-reduced-motion .howto-layer.is-entering .howto-card,
body.a11y-reduce-motion .howto-layer.is-entering,
body.a11y-reduce-motion .howto-layer.is-entering .howto-card { animation: none; }

/* The Large text switch in Settings makes the whole pop-up bigger too. */
body.a11y-large-text .howto-card { font-size: calc(1rem * var(--ui-scale, 1)); }

body.a11y-high-contrast .howto-card { background: #05060d; border-color: #ffffff; }
body.a11y-high-contrast .howto-tile { background: #000000; border-color: #ffffff; }
body.a11y-high-contrast .howto-tile-cap { color: #ffffff; }
body.a11y-high-contrast .howto-ctl-act small,
body.a11y-high-contrast .howto-ctl-how small,
body.a11y-high-contrast .howto-note { color: #dfe7f2; }