/*
 * Query Noir styles: the SQL detective game mounted at #as-qn (page-query-noir.hbs and
 * the local harness paste-ready/demos/query-noir.html).
 * Everything is scoped under #as-qn so theme styles never leak in or out; theme resets
 * (margins, max-width on prose) are neutralised with !important only where Ghost forces them.
 */
/* Ghost page (page-query-noir.hbs): like the homepage hero, the game runs from the very top
   and the fixed site nav floats over it as glass, tinted dark so it reads on the night room.
   The game is the first screen; page notes, partials/game-extras.hbs and the footer sit below. */
body.page-query-noir .site-nav { background: rgba(10, 13, 24, 0.38); border-bottom-color: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
body.page-query-noir .nav-logo, body.page-query-noir .nav-search-toggle { color: #fff; }
body.page-query-noir .nav-search-toggle:hover { color: #fff; opacity: 0.8; }
body.page-query-noir .nav-hamburger span { background: #fff; }
/* Desktop links only: the mobile menu opens as a light sheet and keeps the theme's dark text. */
@media (min-width: 769px) {
  body.page-query-noir .nav-links a { color: rgba(255, 255, 255, 0.72); }
  body.page-query-noir .nav-links a:hover, body.page-query-noir .nav-links a.active { color: #fff; }
}
.qn-page { background: #0d111d; }
.qn-page #as-qn { --qn-top: 0px; padding-top: var(--nav-h, 0px); }
.qn-page-notes { max-width: 720px; margin: 0 auto; padding: 40px 24px; color: rgba(238, 241, 248, 0.74); }

#as-qn, #as-qn * { box-sizing: border-box; }
#as-qn {
  --qn-bg: #0A0C11;
  --qn-panel: #0D111D;
  --qn-panel2: #141924;
  --qn-line: rgba(77, 56, 178, 0.22);
  --qn-ink: #e8ecf6;
  --qn-ink2: #8e98af;
  --qn-ink3: #58637b;
  --qn-accent: #FFB800;
  --qn-accent2: #D97706;
  --qn-primary: #4D38B2;
  --qn-primary2: #6A53D6;
  --qn-good: #10B981;
  --qn-bad: #ff5c7a;
  --qn-gold: #FFB800;
  --qn-paper: #f3ead7;
  --qn-paper-ink: #2b2118;
  --qn-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --qn-sans: "Plus Jakarta Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --qn-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --qn-fs: 14px;
  --qn-code: 14px;
  position: relative;
  font-family: var(--qn-sans);
  font-size: var(--qn-fs) !important;
  line-height: 1.5 !important;
  color: var(--qn-ink);
  /* StudyTonight brand themed room background */
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 56, 178, 0.12), transparent 60%),
    radial-gradient(circle at 85% 90%, rgba(255, 184, 0, 0.04), transparent 50%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 64px),
    linear-gradient(180deg, #13182b 0%, #0D111D 55%, #0A0C11 100%);
  overflow: hidden;
  width: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
#as-qn.qn-presenter { --qn-fs: 17px; --qn-code: 19px; }
#as-qn h2, #as-qn h3, #as-qn h4, #as-qn p, #as-qn ul, #as-qn ol, #as-qn li, #as-qn table, #as-qn pre, #as-qn code {
  margin: 0 !important; padding: 0; max-width: none !important; border: none; background: transparent;
  color: inherit; font-family: inherit; letter-spacing: normal; text-transform: none;
}
#as-qn button, #as-qn input, #as-qn textarea { font: inherit; color: inherit; }
#as-qn button { cursor: pointer; }
#as-qn code { font-family: var(--qn-mono); font-size: 0.92em; background: rgba(255, 106, 0, 0.14); color: #ffb37a; padding: 1px 6px; border-radius: 6px; }
#as-qn [hidden] { display: none !important; }

/* ── Buttons ── */
#as-qn .qn-btn {
  appearance: none; border: 0; border-radius: 12px; padding: 10px 16px; min-height: 40px;
  background: var(--qn-panel2); color: var(--qn-ink); font-weight: 600; font-size: 0.95em;
  box-shadow: inset 0 0 0 1px var(--qn-line);
  transition: transform 140ms var(--qn-ease), background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
#as-qn .qn-btn:hover { background: #252c47; }
#as-qn .qn-btn:active { transform: scale(0.96); }
#as-qn .qn-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#as-qn .qn-btn-primary { 
  background: linear-gradient(180deg, #4D38B2, #3D2B96); 
  color: #fff; 
  box-shadow: 0 8px 24px -10px rgba(77, 56, 178, 0.8); 
  border: 1px solid rgba(106, 83, 214, 0.4);
}
#as-qn .qn-btn-primary:hover { 
  background: linear-gradient(180deg, #5B43D1, #4532AA); 
  box-shadow: 0 8px 28px -6px rgba(77, 56, 178, 0.9);
}
#as-qn .qn-btn-ghost { background: transparent; box-shadow: none; color: var(--qn-ink2); }
#as-qn .qn-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--qn-ink); }
#as-qn .qn-icon-btn { min-width: 40px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#as-qn .qn-icon-btn svg { width: 18px; height: 18px; }

/* ── HUD ── */
/* Second glass strip under the site nav, same family, so the room shows through both. */
#as-qn .qn-hud { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: rgba(10, 13, 24, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
#as-qn .qn-brand { font-weight: 800; letter-spacing: 0.12em; font-size: 1.05em; }
#as-qn .qn-brand span { color: var(--qn-accent); }
#as-qn .qn-company { font-size: 0.85em; color: var(--qn-ink2); background: var(--qn-panel2); padding: 4px 10px; border-radius: 999px; }
#as-qn .qn-meter { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#as-qn .qn-meter-label { font-size: 0.8em; color: var(--qn-ink3); text-transform: uppercase; letter-spacing: 0.08em; }
#as-qn .qn-meter-num { font-weight: 800; font-size: 1.2em; min-width: 2.2ch; text-align: right; }
#as-qn .qn-meter-bar { width: 110px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
#as-qn .qn-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--qn-accent), var(--qn-gold)); transition: width 600ms var(--qn-ease); }
#as-qn .qn-rank { font-size: 0.85em; font-weight: 700; color: var(--qn-gold); }
#as-qn .qn-stat { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.9em; }
#as-qn .qn-stat svg { width: 16px; height: 16px; }
#as-qn .qn-combo { color: var(--qn-accent); transition: transform 200ms var(--qn-ease); }
#as-qn .qn-combo.is-hot svg { filter: drop-shadow(0 0 6px rgba(255, 106, 0, 0.9)); }
#as-qn .qn-combo.is-bump { transform: scale(1.25); }
#as-qn .qn-hud-actions { display: flex; gap: 4px; }

/* ── Play area: room (detective, laptop = the case, desk = drawers + answer tray) | evidence board ──
   Base rules are the stacked phone layout; the .qn-fit block at the end turns it into the
   one-screen desk view (approved mockup: prototypes/query-noir-desk.html). */
#as-qn .qn-play { position: relative; display: flex; flex-direction: column; }
#as-qn .qn-room { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 12px 0; }
#as-qn .qn-window, #as-qn .qn-lamp, #as-qn .qn-canvas { display: none; }
#as-qn .qn-bubble {
  position: relative; align-self: flex-start; max-width: 100%; padding: 10px 14px; border-radius: 14px;
  background: var(--qn-paper); color: var(--qn-paper-ink); font-size: 0.92em; font-weight: 500; line-height: 1.4;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.8); transform-origin: 20px 100%;
  transition: opacity 200ms ease, transform 240ms var(--qn-ease);
}
#as-qn .qn-bubble::after { content: ""; position: absolute; left: 26px; bottom: -8px; border: 8px solid transparent; border-top-color: var(--qn-paper); border-bottom: 0; }
#as-qn .qn-bubble.is-hidden { display: none; }
#as-qn .qn-bubble code { background: rgba(0, 0, 0, 0.08); color: #b24a00; }

/* Laptop: bezel + webcam; its screen is the case (or Academy) panel. */
#as-qn .qn-deck {
  position: relative; z-index: 2; display: flex; flex-direction: column; padding: 14px 12px 16px;
  border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #23283a, #14171f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  animation: qn-laptop-in 420ms var(--qn-ease);
}
#as-qn .qn-deck::before {
  content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%);
  background: #1b2233; box-shadow: 0 0 0 1px #07090e, inset 0 0 1px 1px rgba(90, 140, 255, 0.5);
}
#as-qn .qn-deck > .qn-panel:not([hidden]) {
  position: relative; margin: 0; border-radius: 5px; padding: 16px 18px;
  background: radial-gradient(ellipse at 25% 0%, #1f2846, #111524 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(90, 140, 255, 0.07);
  transition: background 400ms ease, box-shadow 400ms ease;
}
#as-qn .qn-deck:not(:has(> .qn-panel:not([hidden]))) { visibility: hidden; }
#as-qn.qn-boss .qn-deck > .qn-panel:not([hidden]) {
  background: radial-gradient(ellipse at 25% 0%, #4a1622, #1a0c12 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 59, 78, 0.55), inset 0 0 60px rgba(255, 59, 78, 0.2);
}
@keyframes qn-laptop-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Desk: table drawers + the pull-out answer tray. On phones the tray sits right under the laptop. */
#as-qn .qn-desk { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
#as-qn .qn-cabinets { order: 2; display: flex; gap: 8px; overflow-x: auto; }
#as-qn .qn-cab {
  position: relative; flex: 1 0 140px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 30px 8px 12px; border: 0; border-radius: 4px;
  background: linear-gradient(180deg, #5b6274, #474d5e); color: #f5f6fa; text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 6px 10px -6px rgba(0, 0, 0, 0.8);
  transition: transform 160ms var(--qn-ease), filter 160ms ease;
}
#as-qn .qn-cab:hover { filter: brightness(1.12); transform: translateY(2px); }
#as-qn .qn-cab:active { transform: translateY(3px) scale(0.98); }
#as-qn .qn-cab-handle { position: absolute; right: 12px; top: 50%; width: 7px; height: 24px; transform: translateY(-50%); border-radius: 4px; background: linear-gradient(90deg, #c9ced9, #8b91a1); }
#as-qn .qn-cab-name { padding: 2px 8px; border-radius: 2px; background: var(--qn-paper); color: var(--qn-paper-ink); font-family: var(--qn-mono); font-weight: 700; font-size: 0.85em; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
#as-qn .qn-cab-rows { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.75em; opacity: 0.75; }
#as-qn .qn-pulse { animation: qn-pulse 1.1s var(--qn-ease) infinite; }
@keyframes qn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(255, 106, 0, 0); } }

#as-qn .qn-tray {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 4px 4px 10px 10px;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.05) 0 3px, transparent 3px 11px), linear-gradient(180deg, #9a7048, #7d5836);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 16px -8px rgba(0, 0, 0, 0.9);
}
#as-qn .qn-tray .qn-editor { min-height: 0; border-radius: 8px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4); }
#as-qn .qn-tray .qn-hl, #as-qn .qn-tray .qn-textarea { padding: 10px 14px !important; }
#as-qn .qn-tray .qn-textarea { min-height: 64px; }
#as-qn .qn-tray-pick { order: 1; min-width: 0; }
#as-qn .qn-tray .qn-run { order: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#as-qn .qn-tray .qn-kbd { margin: 2px 0 0; font-size: 0.68em; font-weight: 500; }
#as-qn .qn-tray-side { order: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#as-qn .qn-tray .qn-cost { order: 4; margin-top: 0; color: rgba(255, 255, 255, 0.85); }
#as-qn .qn-tray .qn-btn:not(.qn-btn-primary) { background: rgba(0, 0, 0, 0.28); box-shadow: none; color: #fff; }
#as-qn .qn-tray .qn-btn-ghost { background: transparent !important; color: rgba(255, 255, 255, 0.8) !important; }
#as-qn .qn-tray .qn-chip { background: rgba(0, 0, 0, 0.28); color: #fff; }
#as-qn .qn-tray .qn-options { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 0; }
#as-qn .qn-tray .qn-options-label, #as-qn .qn-tray .qn-words-label { color: rgba(255, 255, 255, 0.85); }
#as-qn .qn-tray .qn-options-label { width: 100%; }
/* Answer choices are cream paper tags on the wood. */
#as-qn .qn-tray .qn-choice { padding: 6px 12px; font-size: 0.9em; font-weight: 700; background: var(--qn-paper); color: var(--qn-paper-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
#as-qn .qn-tray .qn-choice:hover { background: #fff8e6; }
#as-qn .qn-tray .qn-choice.is-wrong { background: #ffd0d8; }
#as-qn .qn-tray .qn-choice.is-right { background: #d8f5e6; box-shadow: 0 0 0 2px var(--qn-good), 0 2px 0 rgba(0, 0, 0, 0.35); }
#as-qn .qn-tray .qn-choice .tk-kw { color: #b24a00; }
#as-qn .qn-tray .qn-choice .tk-str { color: #3d7a1c; }
#as-qn .qn-tray .qn-choice .tk-num { color: #1d6fa5; }
#as-qn .qn-tray .qn-choice .tk-fn { color: #7b3fa0; }
#as-qn .qn-tray .qn-words { margin-top: 0; }
#as-qn .qn-tray .qn-word { background: rgba(0, 0, 0, 0.3); box-shadow: none; color: #fff; }
#as-qn .qn-tray .qn-word.is-keyword { color: #ffb37a; }
#as-qn .qn-tray .qn-word.is-value { color: #b5f0c9; }

/* ── Evidence board: cork in a wood frame; clues on top, the animation, then the answer printout ── */
#as-qn .qn-board {
  position: relative; display: flex; flex-direction: column; gap: 12px; margin: 14px 12px 16px; padding: 14px 16px 16px; border-radius: 6px;
  border: 12px solid #5a4128; box-shadow: inset 0 0 0 2px #3f2d1b, inset 0 0 40px rgba(0, 0, 0, 0.35), 0 30px 50px -24px rgba(0, 0, 0, 0.9);
  background: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.07) 1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.06) 1px, transparent 1.5px) 0 0 / 13px 13px, #a07c50;
}
#as-qn .qn-board-head { display: flex; }
#as-qn .qn-board-title { padding: 4px 10px; border-radius: 2px; background: var(--qn-paper); color: #3a2a12; font-size: 0.75em; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(-1deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
#as-qn .qn-board .qn-clues { margin-top: 0; padding-top: 6px; }
#as-qn .qn-board .qn-clues:empty::before { content: "Clues get pinned here as you crack each lead."; flex: 1; padding: 10px 12px; border: 1px dashed rgba(58, 42, 18, 0.4); border-radius: 2px; color: rgba(58, 42, 18, 0.75); font-size: 0.82em; }
#as-qn .qn-board .qn-stage { background: rgba(30, 20, 10, 0.35); border-radius: 6px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45); }
#as-qn .qn-board .qn-stage-empty { color: rgba(255, 244, 220, 0.85); }
/* The answer is a paper printout pinned to the cork: it stays up until the next lead. */
#as-qn .qn-results {
  position: relative; padding: 16px 14px 10px; border-radius: 2px; color: var(--qn-paper-ink); transform: rotate(0.3deg);
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(43, 36, 24, 0.06) 27px 28px), var(--qn-paper);
  box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.8);
}
#as-qn .qn-results::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6b7d, #c1121f); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4); }
#as-qn .qn-results .qn-results-head { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px dashed rgba(43, 36, 24, 0.3); }
#as-qn .qn-results .qn-kicker { color: #7a5a3a; }
#as-qn .qn-results .qn-chip { background: rgba(43, 36, 24, 0.1); color: var(--qn-paper-ink); }
#as-qn .qn-results .qn-table-wrap { border-radius: 0; box-shadow: none; }
#as-qn .qn-results .qn-table th { background: var(--qn-paper); color: #7a5a3a; }
#as-qn .qn-results .qn-table td { border-top: 1px dotted rgba(43, 36, 24, 0.2); }
#as-qn .qn-results .qn-null, #as-qn .qn-results .qn-more { color: rgba(43, 36, 24, 0.6); }

/* ── Panels and text ── */
#as-qn .qn-panel { background: var(--qn-panel); border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1px var(--qn-line); }
#as-qn .qn-kicker { font-size: 0.75em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qn-accent); }
#as-qn .qn-title { font-size: 1.25em; font-weight: 800; margin-top: 2px !important; text-wrap: balance; }
#as-qn .qn-prompt { font-size: 1.05em; line-height: 1.55; margin-top: 10px !important; text-wrap: pretty; }
#as-qn .qn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#as-qn .qn-spread { justify-content: space-between; }
#as-qn .qn-gap-top { margin-top: 12px; }
#as-qn .qn-kicker-boss { color: #ff8a96; }
#as-qn .qn-sub { font-size: 0.85em; color: var(--qn-ink2); }
#as-qn .qn-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8em; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--qn-panel2); color: var(--qn-ink2); }
#as-qn .qn-chip-accent { background: rgba(255, 106, 0, 0.16); color: #ffb37a; }
#as-qn .qn-chip button { border: 0; background: rgba(255, 255, 255, 0.12); border-radius: 999px; width: 20px; height: 20px; font-weight: 800; font-size: 12px; line-height: 20px; padding: 0; }
#as-qn .qn-dots { display: flex; gap: 6px; align-items: center; }
#as-qn .qn-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); transition: background-color 300ms ease, transform 300ms var(--qn-ease); }
#as-qn .qn-dot.is-done { background: var(--qn-good); }
#as-qn .qn-dot.is-now { background: var(--qn-accent); transform: scale(1.3); }
#as-qn .qn-dot.is-boss { width: 16px; height: 16px; border-radius: 4px; background: rgba(255, 92, 122, 0.25); box-shadow: inset 0 0 0 1px var(--qn-bad); }
#as-qn .qn-dot.is-boss.is-now { background: var(--qn-bad); }
#as-qn .qn-hints { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#as-qn .qn-hint { font-size: 0.92em; padding: 8px 12px; border-radius: 10px; background: rgba(255, 201, 77, 0.1); color: #ffe3a3; animation: qn-in 300ms var(--qn-ease); }
/* Clues are sticky notes on the laptop: on laptop screens it covers the room's evidence board. */
#as-qn .qn-clues { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
#as-qn .qn-clue { flex: 1 1 150px; max-width: 220px; font-size: 0.82em; line-height: 1.35; padding: 14px 10px 10px; border-radius: 2px 2px 10px 2px; background: #ffe98a; color: #3d3310; position: relative; transform: rotate(-1.2deg); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.8); animation: qn-pin 420ms var(--qn-ease); }
#as-qn .qn-clue:nth-child(even) { transform: rotate(1deg); background: #ffd3a8; }
#as-qn .qn-clue:nth-child(3n) { background: #c9f0c4; }
#as-qn .qn-clue::before { content: ""; position: absolute; left: 50%; top: -6px; width: 44px; height: 12px; transform: translateX(-50%) rotate(-2deg); background: rgba(255, 255, 255, 0.45); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
@keyframes qn-pin { from { opacity: 0; transform: translateY(-10px) scale(1.06) rotate(-3deg); } to { opacity: 1; } }
@keyframes qn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Tutorial */
#as-qn .qn-analogy { margin-top: 12px !important; padding: 10px 14px; border-radius: 12px; background: rgba(61, 220, 151, 0.1); color: #bff5dc; font-size: 0.95em; }
#as-qn .qn-goal { margin-top: 12px !important; font-weight: 700; color: var(--qn-gold); }
#as-qn .qn-rule { margin-top: 10px !important; padding: 8px 12px; border-left: 3px solid var(--qn-gold); border-radius: 0 10px 10px 0; background: rgba(255, 201, 77, 0.08); font-size: 0.92em; }
#as-qn .qn-choice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#as-qn .qn-choice { text-align: left; font-family: var(--qn-mono); font-size: var(--qn-code); padding: 10px 14px; border: 0; border-radius: 10px; background: var(--qn-panel2); box-shadow: inset 0 0 0 1px var(--qn-line); transition: transform 140ms var(--qn-ease), background-color 160ms ease; }
#as-qn .qn-choice:hover { background: #252c47; }
#as-qn .qn-choice:active { transform: scale(0.98); }
#as-qn .qn-choice.is-wrong { background: rgba(255, 92, 122, 0.18); animation: qn-buzz 300ms linear; }
#as-qn .qn-choice.is-right { background: rgba(61, 220, 151, 0.2); }
#as-qn .qn-link { background: none; border: 0; padding: 0; color: var(--qn-ink3); text-decoration: underline; font-size: 0.85em; }

/* ── Editor ── */
#as-qn .qn-editor { position: relative; border-radius: 12px; background: #0a0d17; box-shadow: inset 0 0 0 1px var(--qn-line); min-height: 120px; }
#as-qn .qn-editor.is-buzz { animation: qn-buzz 320ms linear; box-shadow: inset 0 0 0 2px var(--qn-bad); }
@keyframes qn-buzz { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
#as-qn .qn-hl, #as-qn .qn-textarea {
  font-family: var(--qn-mono) !important; font-size: var(--qn-code) !important; line-height: 1.6 !important; padding: 14px 16px !important;
  white-space: pre-wrap; word-break: break-word; tab-size: 2; letter-spacing: 0 !important;
}
#as-qn .qn-hl { position: absolute; inset: 0; pointer-events: none; color: var(--qn-ink); overflow: hidden; }
#as-qn .qn-textarea { position: relative; display: block; width: 100%; min-height: 120px; resize: vertical; border: 0; outline: none; background: transparent; color: transparent; caret-color: var(--qn-accent); }
#as-qn .qn-textarea::placeholder { color: var(--qn-ink3); }
#as-qn .qn-textarea:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 106, 0, 0.5); border-radius: 12px; }
#as-qn .qn-textarea:disabled { cursor: not-allowed; }
#as-qn .tk-kw { color: #ff9a4d; font-weight: 700; }
#as-qn .tk-fn { color: #c792ea; }
#as-qn .tk-str { color: #a5e075; }
#as-qn .tk-num { color: #7fd1ff; }
#as-qn .tk-com { color: var(--qn-ink3); font-style: italic; }
#as-qn .tk-blank { color: #0d111d; background: var(--qn-gold); border-radius: 4px; animation: qn-blink 1s steps(2) infinite; }
@keyframes qn-blink { 50% { background: #ffe3a3; } }
#as-qn .qn-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#as-qn .qn-options-label { font-size: 0.85em; color: var(--qn-ink2); }
#as-qn .qn-schema { margin: 12px 0; }
#as-qn .qn-chip-btn { border: 0; font-family: inherit; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--qn-ease); }
#as-qn .qn-chip-btn:hover { background: rgba(255, 106, 0, 0.18); color: var(--qn-ink); }
#as-qn .qn-chip-btn:active { transform: scale(0.96); }
#as-qn .qn-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
#as-qn .qn-words-label { width: 100%; font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qn-ink2); }
#as-qn .qn-word { border: 0; padding: 5px 10px; border-radius: 8px; font: 600 0.85em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--qn-panel2); color: var(--qn-ink); box-shadow: inset 0 0 0 1px var(--qn-line); cursor: pointer; transition: transform 150ms var(--qn-ease), background-color 150ms ease; }
#as-qn .qn-word:hover { background: rgba(255, 255, 255, 0.08); }
#as-qn .qn-word:active { transform: scale(0.95); }
#as-qn .qn-word.is-keyword { color: #ff9d57; }
#as-qn .qn-word.is-value { color: #9be7b8; }
#as-qn .qn-plain { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(127, 209, 255, 0.07); color: var(--qn-ink2); font-size: 0.88em; line-height: 1.5; }
#as-qn .qn-plain strong { color: #7fd1ff; }
#as-qn .qn-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#as-qn .qn-run { padding: 12px 20px; font-size: 1em; }
#as-qn .qn-kbd { font-size: 0.75em; opacity: 0.8; margin-left: 6px; }
#as-qn .qn-cost { margin-top: 12px; font-size: 0.85em; color: var(--qn-ink2); }
#as-qn .qn-cost-bar { height: 6px; margin-top: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
#as-qn .qn-cost-fill { height: 100%; width: 0; background: var(--qn-good); transition: width 500ms var(--qn-ease), background-color 300ms ease; }
#as-qn .qn-cost-fill.is-over { background: var(--qn-bad); }
#as-qn .qn-error { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 92, 122, 0.12); color: #ffc2cf; font-size: 0.95em; animation: qn-in 240ms var(--qn-ease); }
#as-qn .qn-error .qn-btn { margin-top: 8px; min-height: 34px; padding: 6px 12px; }

/* ── Stage (query animation) ── */
#as-qn .qn-stage { position: relative; height: 210px; overflow: hidden; border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, #232a45, #121626 70%); box-shadow: inset 0 0 0 1px var(--qn-line); cursor: pointer; }
#as-qn .qn-stage-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--qn-ink3); font-size: 0.9em; }
#as-qn .qn-cards { position: absolute; inset: 14px 14px 44px; padding: 8px 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; overflow-y: auto; }
#as-qn .qn-card {
  width: calc(25% - 6px); min-width: 92px; padding: 6px 8px; border-radius: 6px; background: var(--qn-paper); color: var(--qn-paper-ink);
  font-family: var(--qn-mono); font-size: 11px; line-height: 1.35; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateX(-140%) rotate(-8deg);
  transition: transform 420ms var(--qn-ease), opacity 320ms ease, filter 300ms ease;
}
#as-qn .qn-card.is-in { opacity: 1; transform: none; }
#as-qn .qn-card.qn-answer { opacity: 1; transform: none; animation: qn-in 260ms var(--qn-ease) backwards; }
#as-qn .qn-answer:nth-child(n+3) { animation-delay: 40ms; }
#as-qn .qn-answer-head { width: 100%; font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qn-accent); }
#as-qn .qn-answer-empty { color: var(--qn-ink2); font-size: 0.9em; }
#as-qn .qn-card.qn-drop { opacity: 0; transform: translateY(160px) rotate(14deg); }
#as-qn .qn-card.qn-bin { opacity: 0; transform: translateY(90px) scale(0.4); }
#as-qn .qn-card.qn-trash { opacity: 0; transform: translate(300px, 120px) rotate(40deg) scale(0.3); }
#as-qn .qn-card.qn-shuffle { animation: qn-shuffle 360ms var(--qn-ease); }
@keyframes qn-shuffle { 30% { transform: translateY(-10px) rotate(3deg); } 60% { transform: translateY(4px) rotate(-2deg); } }
#as-qn .qn-field { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 300ms ease; }
#as-qn .qn-field b { font-weight: 700; color: #7a5a3a; }
#as-qn .qn-field.qn-snip { opacity: 0.18; text-decoration: line-through; }
#as-qn .qn-lens { position: absolute; top: 20px; left: -60px; width: 56px; height: 56px; border-radius: 50%; border: 5px solid #d9dde8; background: rgba(160, 220, 255, 0.18); box-shadow: 0 0 20px rgba(160, 220, 255, 0.4); opacity: 0; pointer-events: none; transition: left 520ms cubic-bezier(0.77, 0, 0.175, 1), opacity 160ms ease; }
#as-qn .qn-lens::after { content: ""; position: absolute; width: 28px; height: 7px; background: #d9dde8; border-radius: 4px; right: -24px; bottom: -8px; transform: rotate(45deg); }
#as-qn .qn-lens.is-on { opacity: 1; }
#as-qn .qn-scissors { position: absolute; right: 16px; top: 14px; width: 26px; height: 26px; opacity: 0; transition: opacity 160ms ease, transform 300ms var(--qn-ease); transform: rotate(-30deg) scale(0.6); }
#as-qn .qn-scissors.is-on { opacity: 1; transform: rotate(0) scale(1); }
#as-qn .qn-bins { position: absolute; left: 14px; right: 14px; bottom: 44px; display: flex; gap: 8px; justify-content: center; }
#as-qn .qn-binbox { flex: 0 1 110px; padding: 8px; border-radius: 10px 10px 4px 4px; background: #3b3222; box-shadow: inset 0 3px 0 #574a33; text-align: center; color: #f3ead7; font-size: 11px; transition: transform 380ms var(--qn-ease), opacity 380ms ease; animation: qn-in 260ms var(--qn-ease); }
#as-qn .qn-binbox strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
#as-qn .qn-binbox.qn-knock { transform: rotate(-80deg) translateY(30px); opacity: 0.25; }
/* JOIN: the partner row from the other cabinet hangs under the card on a red string. */
#as-qn .qn-partner { position: relative; margin: 10px -4px -2px; padding: 4px 6px; border-radius: 4px; background: #dfe9f5; color: #1c2a3a; animation: qn-in 320ms var(--qn-ease); }
#as-qn .qn-partner::before { content: ""; position: absolute; left: 50%; top: -10px; height: 10px; border-left: 2px dashed #d7263d; }
#as-qn .qn-partner.is-alone { background: rgba(0, 0, 0, 0.08); color: #7a6a58; font-style: italic; }
/* Window functions: the result is stamped onto the card's corner. */
#as-qn .qn-card { position: relative; }
#as-qn .qn-stamp-badge { position: absolute; top: -7px; right: -6px; min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--qn-accent); color: #1a0f05; font-weight: 800; font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.8); animation: qn-stamp-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes qn-stamp-in { from { transform: scale(2.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* CTE: a manila folder for the temporary table. */
#as-qn .qn-folder { position: relative; margin: 18px auto 0; width: min(280px, 90%); padding: 18px 16px 14px; border-radius: 4px 10px 10px 10px; background: #d9b56a; color: #3a2a12; display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.9); animation: qn-pop 420ms var(--qn-ease); }
#as-qn .qn-folder strong { font-family: var(--qn-mono); font-size: 1.25em; }
#as-qn .qn-folder-tab { position: absolute; top: -14px; left: 0; padding: 2px 12px; border-radius: 6px 6px 0 0; background: #d9b56a; font-weight: 800; font-size: 0.8em; letter-spacing: 0.1em; }
#as-qn .qn-trashcan { position: absolute; right: 12px; bottom: 44px; width: 34px; height: 40px; border-radius: 4px 4px 8px 8px; background: #4a5068; opacity: 0.6; }
#as-qn .qn-steps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; background: rgba(0, 0, 0, 0.35); }
#as-qn .qn-step { flex: none; font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--qn-ink3); transition: background-color 200ms ease, color 200ms ease; white-space: nowrap; }
#as-qn .qn-step code { font-size: 10px; padding: 0 4px; }
#as-qn .qn-step.is-on { background: var(--qn-accent); color: #fff; }
#as-qn .qn-step.is-on code { background: rgba(0, 0, 0, 0.2); color: #fff; }
#as-qn .qn-skip-note { position: absolute; right: 10px; top: 8px; font-size: 10px; color: var(--qn-ink3); }

/* ── Results ── */
#as-qn .qn-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
#as-qn .qn-table-wrap { max-height: 260px; overflow: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--qn-line); }
#as-qn .qn-table { width: 100%; border-collapse: collapse; font-family: var(--qn-mono); font-size: var(--qn-code); }
#as-qn .qn-table th { position: sticky; top: 0; background: var(--qn-panel2); text-align: left; padding: 8px 12px; font-size: 0.85em; color: var(--qn-accent); white-space: nowrap; }
#as-qn .qn-table td { padding: 6px 12px; border-top: 1px solid var(--qn-line); white-space: nowrap; animation: qn-in 260ms var(--qn-ease) backwards; }
#as-qn .qn-null { color: var(--qn-ink3); font-style: italic; }
#as-qn .qn-more { padding: 8px 12px; font-size: 0.8em; color: var(--qn-ink3); }
#as-qn .qn-feedback { margin-top: 12px; padding: 14px; border-radius: 14px; animation: qn-in 280ms var(--qn-ease); }
#as-qn .qn-feedback.is-good { background: rgba(61, 220, 151, 0.12); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.35); }
#as-qn .qn-feedback.is-bad { background: rgba(255, 92, 122, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 92, 122, 0.3); }
#as-qn .qn-feedback-title { font-weight: 800; font-size: 1.1em; }
#as-qn .qn-stars { display: flex; gap: 6px; margin: 8px 0; }
#as-qn .qn-star { width: 30px; height: 30px; color: rgba(255, 255, 255, 0.15); transform: scale(0.25); opacity: 0; filter: blur(4px); transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease, filter 200ms ease, color 200ms ease; }
#as-qn .qn-star.is-in { transform: scale(1); opacity: 1; filter: blur(0); }
#as-qn .qn-star.is-earned { color: var(--qn-gold); filter: drop-shadow(0 0 8px rgba(255, 201, 77, 0.7)); }
#as-qn .qn-star-reasons { font-size: 0.82em; color: var(--qn-ink2); }

/* ── Overlays ── */
#as-qn .qn-overlay { position: absolute; inset: 0; z-index: 27; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 7, 13, 0.78); backdrop-filter: blur(3px); animation: qn-fade 200ms ease; }
@keyframes qn-fade { from { opacity: 0; } to { opacity: 1; } }
#as-qn .qn-modal { width: min(560px, 100%); max-height: 100%; overflow: auto; background: var(--qn-panel); border-radius: 20px; padding: 22px; box-shadow: inset 0 0 0 1px var(--qn-line), 0 30px 60px -20px rgba(0, 0, 0, 0.8); animation: qn-pop 280ms var(--qn-ease); }
#as-qn .qn-modal-wide { width: min(760px, 100%); }
#as-qn .qn-howto { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
#as-qn .qn-howto-card { position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; background: var(--qn-panel2); box-shadow: inset 0 0 0 1px var(--qn-line); }
#as-qn .qn-howto-card strong { display: block; color: var(--qn-ink); }
#as-qn .qn-howto-card p { margin: 4px 0 0; font-size: 0.9em; color: var(--qn-ink2); line-height: 1.45; }
#as-qn .qn-howto-num { position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--qn-accent); color: #fff; font-weight: 800; font-size: 0.8em; font-variant-numeric: tabular-nums; }
@keyframes qn-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
#as-qn .qn-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
#as-qn .qn-start { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at 50% 30%, rgba(30, 36, 64, 0.94), rgba(5, 7, 13, 0.97)); }
#as-qn .qn-start-card { text-align: center; max-width: 520px; animation: qn-pop 420ms var(--qn-ease); }
#as-qn .qn-logo { font-size: clamp(38px, 7vw, 64px); font-weight: 900; letter-spacing: 0.16em; line-height: 1; text-shadow: 0 0 30px rgba(255, 106, 0, 0.45); }
#as-qn .qn-logo span { color: var(--qn-accent); }
#as-qn .qn-tagline { margin-top: 12px !important; color: var(--qn-ink2); font-size: 1.05em; text-wrap: balance; }
#as-qn .qn-casefile { margin: 18px auto 0 !important; padding: 12px 16px; border-radius: 12px; background: var(--qn-paper); color: var(--qn-paper-ink); font-weight: 600; transform: rotate(-1deg); max-width: 400px; }
#as-qn .qn-start-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 22px; }
#as-qn .qn-start-actions .qn-btn { min-width: 260px; }
#as-qn .qn-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9em; color: var(--qn-ink2); cursor: pointer; }
#as-qn .qn-check input { width: 16px; height: 16px; accent-color: var(--qn-accent); }
#as-qn .qn-loading-bar { width: 260px; height: 6px; margin: 16px auto 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#as-qn .qn-loading-bar div { height: 100%; width: 40%; background: var(--qn-accent); animation: qn-load 1.1s ease-in-out infinite; }
@keyframes qn-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* Learn card (comic) */
#as-qn .qn-learn { background: var(--qn-paper); color: var(--qn-paper-ink); border-radius: 18px; padding: 22px; width: min(520px, 100%); box-shadow: 8px 8px 0 #000, 0 30px 60px -20px rgba(0, 0, 0, 0.8); animation: qn-pop 320ms var(--qn-ease); transform: rotate(-0.6deg); }
#as-qn .qn-learn-burst { display: inline-block; background: var(--qn-accent); color: #fff; font-weight: 900; letter-spacing: 0.1em; padding: 4px 12px; border-radius: 6px; transform: rotate(-3deg); }
#as-qn .qn-learn h3 { font-size: 1.5em; font-weight: 900; margin-top: 10px !important; }
#as-qn .qn-learn p { margin-top: 10px !important; font-size: 1.02em; }
#as-qn .qn-learn .qn-analogy-bubble { margin-top: 14px !important; padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--qn-paper-ink); position: relative; }
#as-qn .qn-learn pre { margin-top: 14px !important; padding: 12px 14px; border-radius: 10px; background: #0d111d; color: var(--qn-ink); font-family: var(--qn-mono); font-size: var(--qn-code); white-space: pre-wrap; }
#as-qn .qn-learn code { background: rgba(0, 0, 0, 0.08); color: #b24a00; }

/* Detective file */
#as-qn .qn-file-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
@media (min-width: 640px) { #as-qn .qn-file-grid { grid-template-columns: 260px minmax(0, 1fr); } }
#as-qn .qn-big-level { font-size: 56px; font-weight: 900; line-height: 1; }
#as-qn .qn-radar { width: 100%; max-width: 260px; }
#as-qn .qn-radar text { font-size: 8px; fill: var(--qn-ink2); font-family: var(--qn-sans); }
#as-qn .qn-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-top: 12px; font-size: 0.92em; }
#as-qn .qn-kv span:nth-child(even) { font-weight: 700; text-align: right; }
#as-qn .qn-lb { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; }
#as-qn .qn-lb div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: var(--qn-panel2); }

/* Glossary drawer */
#as-qn .qn-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 22; width: min(360px, 100%); background: var(--qn-panel); box-shadow: -20px 0 40px -20px rgba(0, 0, 0, 0.8), inset 1px 0 0 var(--qn-line); padding: 18px; overflow: auto; animation: qn-drawer 300ms cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes qn-drawer { from { transform: translateX(100%); } to { transform: none; } }
#as-qn .qn-search { width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 0; background: #0a0d17; box-shadow: inset 0 0 0 1px var(--qn-line); outline: none; }
#as-qn .qn-search:focus { box-shadow: inset 0 0 0 2px rgba(255, 106, 0, 0.5); }
#as-qn .qn-gloss { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
#as-qn .qn-gloss div { padding: 10px 12px; border-radius: 10px; background: var(--qn-panel2); font-size: 0.9em; }
#as-qn .qn-gloss strong { display: block; font-family: var(--qn-mono); color: #ffb37a; margin-bottom: 2px; }

/* Cutscenes */
#as-qn .qn-cutscene { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: rgba(5, 7, 13, 0.9); animation: qn-fade 200ms ease; cursor: pointer; }
#as-qn .qn-stamp { font-size: clamp(36px, 8vw, 72px); font-weight: 900; letter-spacing: 0.08em; color: #ff3b4e; border: 8px solid #ff3b4e; border-radius: 14px; padding: 6px 22px; transform: rotate(-8deg); animation: qn-stamp 420ms cubic-bezier(0.34, 1.56, 0.64, 1); text-shadow: 0 0 1px #ff3b4e; }
@keyframes qn-stamp { from { transform: rotate(-8deg) scale(2.4); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-8deg) scale(1); } }
#as-qn .qn-promoted { font-size: 1em; letter-spacing: 0.3em; font-weight: 800; color: var(--qn-ink2); animation: qn-in 400ms var(--qn-ease); }
#as-qn .qn-rankname { font-size: clamp(34px, 7vw, 60px); font-weight: 900; color: var(--qn-gold); text-shadow: 0 0 30px rgba(255, 201, 77, 0.5); animation: qn-pop 500ms var(--qn-ease) 150ms backwards; }
#as-qn .qn-badge { width: 96px; height: 96px; animation: qn-badge 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms backwards; }
@keyframes qn-badge { from { transform: scale(0.2) rotate(-180deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* Coat pins: one per rank earned, coloured by the rank's --pin (from content RANKS). */
#as-qn .qn-pins { display: flex; gap: 8px; }
#as-qn .qn-pin { width: 16px; height: 16px; border-radius: 50%; background: var(--pin); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 0 10px var(--pin); animation: qn-pop 360ms var(--qn-ease) backwards; }
#as-qn .qn-pin:last-child { animation-delay: 700ms; transform-origin: center; }
#as-qn .qn-rankname.is-pinned { color: var(--pin); text-shadow: 0 0 30px var(--pin); }
/* Detective file */
#as-qn .qn-big-level small { font-size: 18px; color: var(--qn-ink3); }
#as-qn .qn-file-rank { font-size: 1.1em; margin-top: 4px; }
#as-qn .qn-file-note { font-size: 0.85em; color: var(--qn-ink3); }
#as-qn .qn-file-signin { font-size: 0.88em; color: var(--qn-ink2); }
#as-qn .qn-file-lb-title { margin-top: 14px; }
#as-qn .qn-skill-ranks { display: grid; gap: 8px; margin-top: 14px; }
#as-qn .qn-skill-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.8em; }
#as-qn .qn-skill-rank > span:first-child { flex: 0 0 120px; font-weight: 700; color: var(--pin); }
#as-qn .qn-skill-dot { padding: 2px 7px; border-radius: 999px; background: var(--qn-panel2); color: var(--qn-ink3); }
#as-qn .qn-skill-dot.is-done { background: var(--pin); color: #10131c; font-weight: 700; }
#as-qn .qn-verdict { max-width: 520px; font-size: 1.1em; color: var(--qn-ink); animation: qn-in 500ms var(--qn-ease) 350ms backwards; text-wrap: balance; }
#as-qn .qn-tap { font-size: 0.8em; color: var(--qn-ink3); }
#as-qn .qn-boss-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 59, 78, 0.25), rgba(255, 59, 78, 0.05)); box-shadow: inset 0 0 0 1px rgba(255, 59, 78, 0.4); animation: qn-in 300ms var(--qn-ease); }
#as-qn .qn-portrait { width: 48px; height: 56px; border-radius: 8px; background: #2a1f2a; box-shadow: inset 0 0 0 2px #ff3b4e; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex: none; }
#as-qn .qn-portrait svg { width: 40px; height: 44px; }
#as-qn .qn-timer { margin-left: auto; font-size: 1.5em; font-weight: 900; color: #ff8a96; font-variant-numeric: tabular-nums; }
#as-qn .qn-timer.is-low { animation: qn-blink 0.6s steps(2) infinite; color: #fff; }
#as-qn .qn-toast { position: absolute; left: 50%; bottom: 18px; z-index: 35; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: var(--qn-paper); color: var(--qn-paper-ink); font-weight: 700; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.8); animation: qn-toast 3.2s var(--qn-ease) forwards; pointer-events: none; max-width: 90%; text-align: center; }
@keyframes qn-toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 4px); } }
#as-qn .qn-fx { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#as-qn.qn-shake { animation: qn-shake 380ms linear; }
@keyframes qn-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, -1px); } }
#as-qn .qn-selftest { font-size: 12px; font-family: var(--qn-mono); }

/* ── One screen desk view (.qn-fit: laptop-size windows and fullscreen) ──
   game.js sets .qn-fit from matchMedia('(min-width: 900px) and (min-height: 600px)').
   --qn-top is site chrome that is NOT drawn over the game (0 on the Ghost page, where the
   glass nav floats over #as-qn's top padding instead). Rows: HUD, then room (60%) | board (40%).
   The room is a size container so the laptop and detective scale with the space left above
   the fixed-height desk; the laptop screen, tray and printout each scroll inside themselves. */
#as-qn.qn-fs { --qn-top: 0px; padding-top: 0 !important; }
#as-qn.qn-fit { --qn-desk-h: 250px; height: calc(100dvh - var(--qn-top, 0px)); display: grid; grid-template-rows: auto minmax(0, 1fr); }
#as-qn.qn-fit .qn-hud { padding: 8px 20px; flex-wrap: nowrap; }
#as-qn.qn-fit .qn-play { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); min-height: 0; }
#as-qn.qn-fit .qn-room {
  container-type: size; min-height: 0; padding: 0; gap: 0; overflow: hidden;
  display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--qn-desk-h);
  --qn-det-h: min(236px, 34cqh);
}
#as-qn.qn-fit .qn-window {
  display: block; position: absolute; left: 3%; top: 14px; width: 24%; max-width: 280px; aspect-ratio: 4 / 3; overflow: hidden;
  border: 10px solid #2a3150; border-radius: 4px; background: linear-gradient(180deg, #0b1430, #1b2448); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}
#as-qn.qn-fit .qn-window::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, transparent 49%, #2a3150 49% 51%, transparent 51%), linear-gradient(180deg, transparent 49%, #2a3150 49% 51%, transparent 51%);
}
#as-qn.qn-fit .qn-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background:
    radial-gradient(1px 1px at 12% 40%, #ffd27a 99%, transparent), radial-gradient(1px 1px at 33% 30%, #ffd27a 99%, transparent),
    radial-gradient(1px 1px at 48% 62%, #ffd27a 99%, transparent), radial-gradient(1px 1px at 62% 45%, #ffd27a 99%, transparent),
    radial-gradient(1px 1px at 78% 35%, #ffd27a 99%, transparent), radial-gradient(1px 1px at 86% 58%, #ffd27a 99%, transparent), #070b18;
  clip-path: polygon(0 30%, 14% 30%, 14% 10%, 30% 10%, 30% 40%, 52% 40%, 52% 0, 72% 0, 72% 25%, 100% 25%, 100% 100%, 0 100%);
}
#as-qn.qn-fit .qn-rain {
  position: absolute; inset: -40px 0 0; opacity: 0.45; background-size: 40px 60px; animation: qn-rain 0.7s linear infinite;
  background-image: repeating-linear-gradient(105deg, transparent 0 14px, rgba(170, 190, 255, 0.6) 14px 15px, transparent 15px 31px);
}
@keyframes qn-rain { to { background-position: -12px 60px; } }
/* Lamp hangs over the detective's column (170px wide, so centred at 85px). */
#as-qn.qn-fit .qn-lamp { display: block; position: absolute; left: 84px; top: 0; width: 2px; height: 70px; background: #444a60; pointer-events: none; }
#as-qn.qn-fit .qn-lamp::before { content: ""; position: absolute; left: -22px; bottom: -14px; width: 46px; height: 16px; background: #2f5d3a; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
#as-qn.qn-fit .qn-lamp::after { content: ""; position: absolute; left: -130px; top: 100%; width: 262px; height: 80cqh; margin-top: 2px; background: linear-gradient(180deg, rgba(255, 214, 130, 0.16), rgba(255, 214, 130, 0)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
/* Detective stands behind the desk: the desk (later in the DOM, z-index 2) hides his legs. */
#as-qn.qn-fit .qn-canvas {
  display: block; grid-area: 1 / 1; align-self: end; justify-self: center; position: relative; z-index: 1;
  height: var(--qn-det-h); width: auto; aspect-ratio: 120 / 256; margin-bottom: calc(var(--qn-det-h) * -0.23);
  image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}
#as-qn.qn-fit .qn-bubble { grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 3; max-width: 158px; margin: 0 0 calc(var(--qn-det-h) * 0.8 + 12px) 10px; font-size: 0.85em; }
#as-qn.qn-fit .qn-bubble.is-hidden { display: block; opacity: 0; transform: scale(0.95); pointer-events: none; }
/* Laptop sits on the desk; width is capped by the room's width and by the height above the desk. */
#as-qn.qn-fit .qn-deck {
  grid-area: 1 / 2; align-self: end; justify-self: center; margin: 0 0 16px;
  width: min(620px, 100cqw - 210px, (100cqh - var(--qn-desk-h) - 60px) * 1.6);
}
#as-qn.qn-fit .qn-deck::after {
  content: ""; position: absolute; left: -6%; right: -6%; bottom: -16px; height: 16px; border-radius: 2px 2px 14px 14px;
  background: linear-gradient(90deg, transparent 42%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.22) 58%, transparent 58%) top / 100% 5px no-repeat, linear-gradient(180deg, #d4d8e1 0, #aeb4c2 45%, #7e8494 100%);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); box-shadow: 0 16px 24px -10px rgba(0, 0, 0, 0.9);
}
#as-qn.qn-fit .qn-deck > .qn-panel:not([hidden]) { aspect-ratio: 16 / 10; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#as-qn.qn-fit .qn-desk {
  grid-area: 2 / 1 / 3 / 3; min-height: 0; margin-left: 2%; padding: 24px 18px 14px; gap: 10px; border-radius: 3px 0 0 0;
  background: linear-gradient(180deg, #8a6240 0, #6b4a30 12px, #4a3322 12px, #4a3322 14px, #43301f 14px, #3a281a 100%);
  box-shadow: 0 -2px 0 #4a3322;
}
#as-qn.qn-fit .qn-cabinets { order: 0; flex: none; gap: 10px; overflow: visible; }
#as-qn.qn-fit .qn-cab { flex: 1 1 0; min-width: 0; height: 54px; justify-content: center; }
/* Fixed-ish Run column: sized by content, the Hint/New lead row would squeeze the editor on small laptops. */
#as-qn.qn-fit .qn-tray { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: minmax(0, 1fr) clamp(150px, 28%, 220px); align-content: start; }
#as-qn.qn-fit .qn-tray-pick, #as-qn.qn-fit .qn-tray .qn-run, #as-qn.qn-fit .qn-tray-side, #as-qn.qn-fit .qn-tray .qn-cost { order: 0; }
#as-qn.qn-fit .qn-tray .qn-run { align-self: start; min-height: 52px; padding: 6px 22px; }
#as-qn.qn-fit .qn-tray-side { justify-content: flex-end; }
#as-qn.qn-fit .qn-tray .qn-cost { grid-column: 1 / -1; }
#as-qn.qn-fit .qn-board { min-height: 0; margin: 16px 26px 18px 6px; }
#as-qn.qn-fit .qn-board .qn-clues { flex: none; max-height: 26%; overflow-y: auto; }
#as-qn.qn-fit .qn-stage { flex: 0 0 auto; height: 36%; min-height: 150px; }
#as-qn.qn-fit .qn-results { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#as-qn.qn-fit .qn-table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
/* Boss round: the whole room pulses red, the window sky too. */
#as-qn.qn-fit.qn-boss .qn-window { background: linear-gradient(180deg, #3a0f1c, #1a0610); }
#as-qn.qn-boss .qn-room::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(255, 30, 60, 0.06); animation: qn-boss-pulse 2.4s ease-in-out infinite; }
@keyframes qn-boss-pulse { 50% { opacity: 0.4; } }

@media (max-width: 640px) {
  #as-qn .qn-meter { margin-left: 0; width: 100%; }
  #as-qn .qn-card { width: calc(50% - 4px); }
}
@media (prefers-reduced-motion: reduce) {
  #as-qn *, #as-qn *::before, #as-qn *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  #as-qn.qn-shake { animation: none; }
}

/* ─── StudyTonight Branded Top Strip & Embedded Layout ─── */
.st-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: linear-gradient(90deg, #0D111D 0%, #14142B 100%);
  border-bottom: 1px solid rgba(77, 56, 178, 0.35);
  font: 600 12px "Plus Jakarta Sans", -apple-system, sans-serif;
  color: #e8ecf6;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.st-strip-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-strip-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.st-strip-logo .st-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB800;
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.6);
}
.st-strip-logo span {
  color: #FFB800;
}
.st-strip-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
}
.st-strip-label {
  font-size: 11px;
  color: #8e98af;
  display: flex;
  align-items: center;
  gap: 5px;
}
.st-strip-label .st-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  animation: pulse 1.6s infinite;
}
.st-strip-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-strip-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 22, 36, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 700 11px var(--sys);
  padding: 0 10px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  user-select: none;
}
.st-strip-chat-btn:hover {
  background: rgba(77, 56, 178, 0.4);
  border-color: rgba(77, 56, 178, 0.7);
  box-shadow: 0 0 10px rgba(77, 56, 178, 0.4);
}
.st-chat-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: stPulse 1.8s infinite;
}
.st-chat-badge {
  font: 700 10px var(--mono);
  color: #10b981;
  background: rgba(16, 185, 129, 0.14);
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.st-chat-unread {
  background: #f43f5e;
  color: #fff;
  font: 800 9px var(--mono);
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 2px;
}
.st-strip-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(77, 56, 178, 0.18);
  border: 1px solid rgba(77, 56, 178, 0.4);
  color: #c4b5fd;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.st-strip-back:hover {
  background: #4D38B2;
  color: #fff;
  border-color: #4D38B2;
  box-shadow: 0 0 14px rgba(77, 56, 178, 0.45);
}
.st-strip-xp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.3);
  color: #FFB800;
  font: 700 11px ui-monospace, monospace;
  padding: 4px 10px;
  border-radius: 8px;
}

body.st-embedded {
  padding-top: 40px !important;
  margin: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #0A0C11;
}
body.st-embedded #as-qn {
  height: calc(100vh - 40px) !important;
  min-height: calc(100vh - 40px) !important;
}