/* JM29 Game 1 — Identifying quadrilaterals: cinematic opening chapter. */

#panel-games .game-off { display: none; }
#games-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
#games-subnav .chip {
  padding: 8px 14px;
  border: 1px solid rgba(30, 41, 59, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
#games-subnav .chip.active {
  background: #4FC3F7;
  border-color: #4FC3F7;
  color: #fff;
}

.qg-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #080b11;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  color: #f8fafc;
}

.qg-stage * { box-sizing: border-box; }

.qg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ─── scene background + slow camera drift ─────────────────────────── */

.qg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

@keyframes qgKenA { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.2%, -0.8%); } }
@keyframes qgKenB { from { transform: scale(1.12) translate(1.4%, 0.6%); } to { transform: scale(1.03); } }
@keyframes qgKenC { from { transform: scale(1.08) translate(-1.6%, 0.9%); } to { transform: scale(1.14) translate(1.2%, -0.7%); } }
@keyframes qgKenD { from { transform: scale(1.15) translate(0.8%, -1.1%); } to { transform: scale(1.05) translate(-0.6%, 0.5%); } }
@keyframes qgKenMap { from { transform: scale(1.02); } to { transform: scale(1.07) translate(-1%, 1.2%); } }

.qg-bg.ken-a { animation: qgKenA 26s ease-out both; }
.qg-bg.ken-b { animation: qgKenB 26s ease-out both; }
.qg-bg.ken-c { animation: qgKenC 30s ease-in-out both; }
.qg-bg.ken-d { animation: qgKenD 26s ease-out both; }

.qg-vignette {
  background:
    radial-gradient(ellipse 120% 85% at 50% 42%, transparent 45%, rgba(4, 6, 11, .55) 100%),
    linear-gradient(180deg, rgba(4, 6, 11, .3) 0%, transparent 22%, transparent 58%, rgba(4, 6, 11, .58) 100%);
}

/* ─── transition overlays ──────────────────────────────────────────── */

.qg-fade {
  background: #05070c;
  opacity: 0;
  transition: opacity .34s ease;
}
.qg-fade.on { opacity: 1; }

.qg-flash {
  background: #fff;
  opacity: 0;
}
.qg-flash.on { animation: qgFlash .42s ease-out both; }
@keyframes qgFlash {
  0% { opacity: 0; }
  12% { opacity: .92; }
  100% { opacity: 0; }
}

/* ─── rewind relic HUD ─────────────────────────────────────────────── */

.qg-hud {
  position: absolute;
  top: 3.2cqw;
  left: 3.2cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: .7cqw 1.3cqw;
  border: 0.16cqw solid rgba(248, 250, 252, .3);
  border-radius: 999px;
  background: rgba(6, 10, 18, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(-.8cqw);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.qg-hud.on { opacity: 1; transform: none; }

.qg-hud-label {
  font-size: 1.32cqw;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(226, 240, 254, .82);
}

.qg-gems { display: flex; gap: .6cqw; }

.qg-gems i {
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
  background: rgba(148, 163, 184, .28);
  border: 0.14cqw solid rgba(148, 163, 184, .5);
  transform: scale(.7);
  transition: transform .4s ease, background .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.qg-gems i.lit {
  transform: none;
  background: #67e8f9;
  border-color: #a5f3fc;
  box-shadow: 0 0 .9cqw rgba(103, 232, 249, .9), 0 0 2cqw rgba(34, 211, 238, .55);
  animation: qgGem 3.4s ease-in-out infinite;
}
.qg-gems i:nth-child(2).lit { animation-delay: .5s; }
.qg-gems i:nth-child(3).lit { animation-delay: 1s; }
@keyframes qgGem {
  0%, 100% { box-shadow: 0 0 .9cqw rgba(103, 232, 249, .85), 0 0 2cqw rgba(34, 211, 238, .5); }
  50% { box-shadow: 0 0 1.5cqw rgba(103, 232, 249, 1), 0 0 3.2cqw rgba(34, 211, 238, .75); }
}

/* ─── map overlay effects ──────────────────────────────────────────── */

.qg-mapfx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
}
.qg-mapfx.on { opacity: 1; }

.qg-spot {
  fill: #05070c;
  opacity: 0;
  transition: opacity .8s ease;
}
.qg-mapfx.focus .qg-spot { opacity: .5; }

.qg-zone {
  fill: none;
  stroke-width: 7;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
}
.qg-mapfx.on .qg-zone {
  opacity: 1;
  animation: qgDraw 1s ease-out both;
  animation-delay: var(--delay, 0s);
}
@keyframes qgDraw { to { stroke-dashoffset: 0; } }

.qg-mapfx.focus .qg-zone { opacity: .3; }
.qg-mapfx.focus .qg-zone.hot {
  opacity: 1;
  animation: qgZonePulse 2.4s ease-in-out infinite;
}
@keyframes qgZonePulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(125, 211, 252, .8)); stroke-width: 7; }
  50% { filter: drop-shadow(0 0 18px rgba(125, 211, 252, 1)); stroke-width: 11; }
}

.qg-route {
  fill: none;
  stroke: #fde68a;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 3 22;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(253, 230, 138, .9));
}
.qg-mapfx.focus .qg-route {
  opacity: 1;
  animation: qgRoute 1.1s linear infinite;
}
@keyframes qgRoute { to { stroke-dashoffset: -50; } }

/* "Next stop: <region>" — the opening's spotlight and pulse, in each region's own bright colour.
   One shared set of elements; applyFx() points it at the right zone and route. */
.qg-mapfx.next-stop { opacity: 1; }
.qg-mapfx.next-rhombus   { --nc: #5df59a; --ng: 93, 245, 154;  --nh: 167, 255, 200; --nt: #dcfce7; --nd: #052e16; }
.qg-mapfx.next-rectangle { --nc: #ff7b7b; --ng: 255, 110, 110; --nh: 255, 196, 196; --nt: #ffe4e4; --nd: #3b0a0a; }
.qg-mapfx.next-square    { --nc: #c9a0ff; --ng: 190, 140, 255; --nh: 228, 205, 255; --nt: #f3e8ff; --nd: #2e1065; }

.qg-spot-n {
  fill: #05070c;
  opacity: 0;
  transition: opacity .8s ease;
}
.qg-mapfx.next-stop .qg-spot-n { opacity: .5; }

.qg-glow-n {
  fill: none;
  stroke: var(--nc, #5df59a);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0;
}
.qg-mapfx.next-stop .qg-glow-n {
  opacity: 1;
  animation:
    qgDraw 1s ease-out both,
    qgZonePulseNext 2.4s ease-in-out 1s infinite;
}
@keyframes qgZonePulseNext {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(var(--ng), .85)); stroke-width: 7; }
  50% { filter: drop-shadow(0 0 18px rgba(var(--nh), 1)); stroke-width: 11; }
}

.qg-route-n {
  fill: none;
  stroke: #fde68a;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 22;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(253, 230, 138, .9));
}
.qg-mapfx.next-stop .qg-route-n {
  animation:
    qgRouteReveal .35s ease .72s both,
    qgRoute 1.1s linear .72s infinite;
}
@keyframes qgRouteReveal { from { opacity: 0; } to { opacity: 1; } }

.qg-tag-n {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  fill: var(--nt, #dcfce7);
  paint-order: stroke;
  stroke: var(--nd, #052e16);
  stroke-width: 7;
  text-anchor: middle;
  opacity: 0;
}
.qg-mapfx.next-stop .qg-tag-n {
  animation: qgNextTag .55s ease 1s both;
}
@keyframes qgNextTag {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.qg-zone-tag {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  fill: #f8fafc;
  paint-order: stroke;
  stroke: #05070c;
  stroke-width: 7;
  text-anchor: middle;
  opacity: 0;
  transition: opacity .6s ease .3s;
}
.qg-mapfx.labels .qg-zone-tag { opacity: 1; }

/* ─── dialogue bubble ──────────────────────────────────────────────── */

.qg-dialogue {
  position: absolute;
  left: 4.4cqw;
  right: 4.4cqw;
  bottom: 4.4cqw;
  height: auto;
  min-height: 0;
  padding: 1.1cqw 2.4cqw 2.6cqw 10.8cqw;
  border: 0.42cqw solid #16181c;
  border-radius: 2.2cqw;
  background: rgba(250, 249, 244, .9);
  box-shadow: 0 1cqw 2.6cqw rgba(4, 6, 11, .45);
  color: #16181c;
  opacity: 0;
  transform: translateY(2.4cqw);
  transition: opacity .32s ease, transform .38s cubic-bezier(.2, .9, .25, 1.15);
  pointer-events: none;
  z-index: 4;
}
.qg-dialogue.on { opacity: 1; transform: none; }
/* Map beats whose route runs along the bottom: the bubble sits near the top instead. */
.qg-dialogue.high { bottom: auto; top: 8cqw; }

/* Narration beats keep the same frame, minus the speaker. */
.qg-dialogue.narration { padding-left: 2.4cqw; text-align: center; }
.qg-dialogue.narration .qg-avatar,
.qg-dialogue.narration .qg-speaker { display: none; }

.qg-avatar {
  position: absolute;
  top: -2.8cqw;
  left: -1.2cqw;
  width: 8.8cqw;
  height: 8.8cqw;
  border-radius: 50%;
  border: 0.42cqw solid #16181c;
  background: #dadee2 url("game/sage-avatar.png?v=20260920-game1") center / cover no-repeat;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .3s ease .08s, transform .38s cubic-bezier(.2, .9, .25, 1.2) .08s;
}
.qg-dialogue.on .qg-avatar { opacity: 1; transform: none; }

.qg-speaker {
  margin: 0 0 .45cqw;
  font-size: 1.38cqw;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0c0e12;
}

.qg-text {
  margin: 0;
  font-size: 1.82cqw;
  line-height: 1.42;
  white-space: pre-line;
}

.qg-caret {
  display: none;
  width: .1em;
  height: 1.05em;
  margin-left: .1em;
  vertical-align: -.16em;
  background: currentColor;
  animation: qgCaret .9s steps(1) infinite;
}
.qg-dialogue.typing .qg-caret { display: inline-block; }
@keyframes qgCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ─── tap-to-continue prompts ──────────────────────────────────────── */

.qg-tap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55cqw;
  margin: 0;
  text-align: center;
  font-size: 1.18cqw;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .06em;
  color: rgba(22, 24, 28, .72);
  opacity: 0;
}
.qg-tap.on { animation: qgBlink 1.15s ease-in-out infinite; }

.qg-tap-corner {
  position: absolute;
  top: auto;
  bottom: 2.4cqw;
  right: 3.6cqw;
  font-size: 1.18cqw;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .06em;
  color: rgba(248, 250, 252, .92);
  text-shadow: 0 .15cqw .5cqw rgba(4, 6, 11, .95);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.qg-tap-corner.on { animation: qgBlink 1.15s ease-in-out infinite; }

@keyframes qgBlink {
  0%, 100% { opacity: .22; }
  50% { opacity: 1; }
}

/* ─── title screen ─────────────────────────────────────────────────── */

.qg-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 1.2cqw;
  padding: 0 6cqw 0 44cqw;
  text-align: right;
  transition: opacity .4s ease;
}
.qg-title.off { opacity: 0; pointer-events: none; }
/* .qg-start sets pointer-events:auto, which would keep Start and Continue
   clickable after the title fades. A click there restarts the kingdom. */
.qg-title.off * { pointer-events: none !important; }

.qg-title .qg-eyebrow,
.qg-title h3,
.qg-title .qg-sub,
.qg-title .qg-start {
  animation: qgRise .6s cubic-bezier(.2, .8, .25, 1) both;
}
.qg-title .qg-eyebrow { animation-delay: .25s; }
.qg-title h3 { animation-delay: .4s; }
.qg-title .qg-sub { animation-delay: .58s; }
.qg-title .qg-start { animation-delay: .8s; }

@keyframes qgRise {
  from { opacity: 0; transform: translateY(1.6cqw); }
  to { opacity: 1; transform: none; }
}

.qg-eyebrow {
  margin: 0;
  font-size: 1.36cqw;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.qg-title h3 {
  margin: 0;
  font-size: 5.2cqw;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 .3cqw 1.4cqw rgba(4, 6, 11, .8);
}

.qg-sub {
  margin: 0;
  max-width: 34cqw;
  font-size: 1.85cqw;
  line-height: 1.5;
  color: rgba(226, 232, 240, .86);
}

.qg-start {
  margin-top: 1.4cqw;
  padding: 1.25cqw 3cqw;
  border: 0.2cqw solid rgba(125, 211, 252, .85);
  border-radius: 999px;
  background: rgba(14, 165, 233, .22);
  color: #f0f9ff;
  font: inherit;
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  animation: qgRise .6s cubic-bezier(.2, .8, .25, 1) .8s both, qgPulse 2.6s ease-in-out 1.6s infinite;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.qg-start:hover { background: rgba(14, 165, 233, .42); border-color: #7dd3fc; transform: translateY(-.2cqw); }

@keyframes qgPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125, 211, 252, .5); }
  50% { box-shadow: 0 0 0 1.1cqw rgba(125, 211, 252, 0); }
}

/* ─── chapter card (end of the opening) ────────────────────────────── */

.qg-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2cqw;
  padding: 4cqw;
  text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #101725, #05070c 78%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.qg-card.on { opacity: 1; pointer-events: auto; }

/* Keep the reconciled kings visible beneath the final congratulations. */
.qg-card.finale {
  background:
    radial-gradient(
      ellipse 70% 62% at 50% 48%,
      rgba(16, 23, 37, .62),
      rgba(5, 7, 12, .76) 82%
    );
}
.qg-card.finale h4,
.qg-card.finale p,
.qg-card.finale .qg-chapter {
  text-shadow: 0 .16cqw .45cqw rgba(0, 0, 0, .95);
}

/* .qg-start sets pointer-events:auto, so a faded card's buttons would stay
   clickable. Enter Rhombus restarts at 2-1; Replay kingdoms restarts at 1-1. */
.qg-card:not(.on),
.qg-card:not(.on) * { pointer-events: none !important; }

.qg-card .qg-chapter {
  margin: 0;
  font-size: 1.4cqw;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #7dd3fc;
}
.qg-card h4 {
  margin: 0;
  font-size: 3.7cqw;
  font-weight: 700;
  letter-spacing: -.01em;
}
.qg-card p {
  margin: 0;
  max-width: 62cqw;
  font-size: 1.9cqw;
  line-height: 1.55;
  color: rgba(226, 232, 240, .82);
}
.qg-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6cqw;
  margin-top: 2cqw;
}
.qg-card .qg-start { margin-top: 0; animation: none; }

.qg-start.ghost {
  border-color: rgba(148, 163, 184, .55);
  background: rgba(148, 163, 184, .12);
  color: rgba(226, 232, 240, .9);
}
.qg-start.ghost:hover {
  background: rgba(148, 163, 184, .28);
  border-color: rgba(226, 232, 240, .8);
}

.qg-continue {
  margin-top: .2cqw;
  animation: none;
  font-size: 1.45cqw;
}
.qg-continue[hidden] { display: none; }

/* ─── replay / skip controls ───────────────────────────────────────── */

.qg-skip {
  position: absolute;
  top: 3.2cqw;
  right: 12cqw;
  padding: .7cqw 1.5cqw;
  border: 0.16cqw solid rgba(248, 250, 252, .35);
  border-radius: 999px;
  background: rgba(6, 10, 18, .5);
  color: rgba(241, 245, 249, .9);
  font: inherit;
  font-size: 1.3cqw;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  transition: opacity .3s ease, background .2s ease;
}
.qg-skip.on { opacity: 1; pointer-events: auto; }
.qg-skip:hover { background: rgba(6, 10, 18, .8); }

/* ─── settings ─────────────────────────────────────────────────────── */

.qg-settings {
  position: absolute;
  top: 2.4cqw;
  right: 2.4cqw;
  z-index: 30;
  width: 4.4cqw;
  height: 4.4cqw;
  pointer-events: none;
}
.qg-settings.near,
.qg-settings.open { pointer-events: auto; }

.qg-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4cqw;
  height: 4.4cqw;
  padding: 0;
  border: 0.16cqw solid rgba(248, 250, 252, .45);
  border-radius: 50%;
  background: rgba(6, 10, 18, .55);
  color: #f8fafc;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease, background .2s ease;
}
.qg-settings.near .qg-settings-btn,
.qg-settings.open .qg-settings-btn { opacity: 1; }
.qg-settings-btn svg { width: 2.4cqw; height: 2.4cqw; }
.qg-settings-btn:hover,
.qg-settings.open .qg-settings-btn { background: rgba(6, 10, 18, .82); }

.qg-settings-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 32cqw;
  max-height: 46cqw;
  overflow: auto;
  padding: 1.6cqw 1.5cqw 1.5cqw;
  border: 0.16cqw solid rgba(248, 250, 252, .28);
  border-radius: 1.4cqw;
  background: rgba(6, 10, 18, .96);
  box-shadow: 0 1cqw 2.4cqw rgba(4, 6, 11, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-.4cqw);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.qg-settings.open .qg-settings-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.qg-settings-title.qg-levels-title { margin-top: .8cqw; }

.qg-level-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35cqw;
  margin: 0 0 .45cqw;
}
.qg-level-row span {
  min-width: 7.4cqw;
  font-size: 1.05cqw;
  font-weight: 700;
  color: #94a3b8;
}
.qg-level-row button {
  padding: .22cqw .5cqw;
  border: 0.12cqw solid rgba(252, 211, 77, .6);
  border-radius: .3cqw;
  background: rgba(10, 14, 22, .7);
  color: #f8fafc;
  font: inherit;
  font-size: 1.05cqw;
  cursor: pointer;
}
.qg-level-row button:hover { background: rgba(202, 138, 4, .85); }

.qg-settings-title {
  margin: 0 0 1cqw;
  font-size: 1.2cqw;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(226, 240, 254, .8);
}

.qg-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  margin: 0 0 .8cqw;
  font-size: 1.35cqw;
  font-weight: 700;
  color: #f8fafc;
}
.qg-settings-row input {
  width: 14cqw;
  accent-color: #67e8f9;
  cursor: pointer;
}

.qg-settings-home {
  width: 100%;
  margin-top: .4cqw;
  padding: .7cqw .8cqw;
  border: 0.16cqw solid rgba(252, 211, 77, .7);
  border-radius: .8cqw;
  background: rgba(161, 98, 7, .9);
  color: #fffbeb;
  font: inherit;
  font-size: 1.25cqw;
  font-weight: 800;
  cursor: pointer;
}
.qg-settings-home:hover { background: rgba(202, 138, 4, .96); }

@media (hover: none) {
  .qg-settings { pointer-events: auto; }
  .qg-settings-btn { opacity: 1; }
}

/* ─── kingdom: chapter tag ─────────────────────────────────────────── */

.qg-chapter-tag {
  position: absolute;
  top: 7.4cqw;
  left: 3.2cqw;
  display: flex;
  flex-direction: column;
  gap: .25cqw;
  opacity: 0;
  transform: translateX(-1cqw);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  z-index: 5;
}
.qg-chapter-tag.on { opacity: 1; transform: none; }

.qg-chapter-zone {
  font-size: 1.12cqw;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fcd34d;
  text-shadow: 0 .12cqw .5cqw rgba(4, 6, 11, .95);
}
.qg-chapter-name {
  font-size: 1.62cqw;
  font-weight: 700;
  color: rgba(248, 250, 252, .95);
  text-shadow: 0 .14cqw .55cqw rgba(4, 6, 11, .95);
}

/* ─── kingdom: question banner ─────────────────────────────────────── */

.qg-ask {
  position: absolute;
  top: 3.4cqw;
  left: 50%;
  margin: 0;
  padding: .85cqw 2.6cqw;
  transform: translate(-50%, -1cqw);
  border: 0.2cqw solid rgba(252, 211, 77, .7);
  border-radius: 999px;
  background: rgba(6, 10, 18, .72);
  backdrop-filter: blur(3px);
  font-size: 1.72cqw;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fef3c7;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .35s ease, transform .4s cubic-bezier(.2, .9, .25, 1.15);
}
.qg-ask.on { opacity: 1; transform: translate(-50%, 0); }

/* ─── kingdom: claimant cards ──────────────────────────────────────── */

.qg-choices {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 3.4cqw;
  display: flex;
  justify-content: center;
  gap: 3cqw;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .3s ease;
}
.qg-choices.on { opacity: 1; pointer-events: auto; }
.qg-choices.locked,
.qg-choices.locked *,
.qg-choices:not(.on),
.qg-choices:not(.on) * { pointer-events: none !important; }

.qg-choice {
  flex: 0 0 22cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3cqw;
  padding: 1.2cqw 1cqw .8cqw;
  border: 0.42cqw solid #16181c;
  border-radius: 1.8cqw;
  background: rgba(250, 249, 244, .94);
  box-shadow: 0 .9cqw 2.2cqw rgba(4, 6, 11, .5);
  color: #16181c;
  font: inherit;
  cursor: pointer;
  transform: translateY(2.4cqw);
  opacity: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.qg-choices.on .qg-choice {
  animation: qgCardIn .5s cubic-bezier(.2, .85, .3, 1.1) both;
  animation-delay: calc(var(--i) * .12s);
}
@keyframes qgCardIn {
  from { opacity: 0; transform: translateY(3.2cqw) rotate(-1.5deg); }
  to { opacity: 1; transform: none; }
}

.qg-choice:hover {
  transform: translateY(-.7cqw);
  box-shadow: 0 1.6cqw 3cqw rgba(4, 6, 11, .58);
  background: #fffdf5;
}
.qg-choice:focus-visible { outline: 0.3cqw solid #7dd3fc; outline-offset: .3cqw; }

.qg-choice.right {
  border-color: #16a34a;
  background: #ecfdf5;
  animation: qgPick .5s ease-out both !important;
}
.qg-choice.wrong {
  border-color: #b91c1c;
  background: #fef2f2;
  animation: qgReject .5s ease-out both !important;
}
@keyframes qgPick {
  0% { transform: none; }
  45% { transform: translateY(-1.2cqw) scale(1.05); }
  100% { transform: translateY(-.5cqw) scale(1.03); }
}
@keyframes qgReject {
  0%, 100% { transform: none; }
  20% { transform: translateX(-1cqw) rotate(-2deg); }
  50% { transform: translateX(1cqw) rotate(2deg); }
  80% { transform: translateX(-.5cqw); }
}

.qg-choice-name {
  font-size: 1.6cqw;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ─── geometry figures ─────────────────────────────────────────────── */

.qg-fig {
  width: auto;
  height: 15cqw;
  aspect-ratio: 120 / 100;
  overflow: visible;
}

.qg-poly {
  fill: rgba(125, 211, 252, .18);
  stroke: #16181c;
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.qg-mark {
  fill: none;
  stroke: #b91c1c;
  stroke-width: 2.1;
  stroke-linecap: round;
}
.qg-wedge {
  fill: rgba(185, 28, 28, .22);
  stroke: none;
}

.qg-diag {
  fill: none;
  stroke: #16181c;
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
  opacity: .7;
}

.qg-label {
  fill: #1e3a8a;
  font-size: 7px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(255, 253, 245, .9);
  stroke-width: 2.2px;
  stroke-linejoin: round;
}

/* ─── kingdom: reason picker ───────────────────────────────────────── */

.qg-reasonwrap {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: 3.6cqw;
  display: flex;
  align-items: center;
  gap: 4cqw;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .35s ease;
}
.qg-reasonwrap.on { opacity: 1; pointer-events: auto; }
.qg-reasonwrap:not(.on),
.qg-reasonwrap:not(.on) * { pointer-events: none !important; }

.qg-focus {
  flex: 0 0 22cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4cqw;
  padding: 1.2cqw 1cqw .9cqw;
  border: 0.42cqw solid #16181c;
  border-radius: 1.8cqw;
  background: rgba(250, 249, 244, .94);
  box-shadow: 0 .9cqw 2.2cqw rgba(4, 6, 11, .5);
  color: #16181c;
}
.qg-focus-name {
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: .04em;
}

.qg-reasons {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9cqw;
}
.qg-reasons.locked,
.qg-reasons.locked * { pointer-events: none !important; }

.qg-reason {
  padding: 1cqw 1.6cqw;
  border: 0.22cqw solid rgba(252, 211, 77, .55);
  border-radius: 1cqw;
  background: rgba(10, 14, 22, .78);
  color: #f8fafc;
  font: inherit;
  font-size: 1.5cqw;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  animation: qgRise .4s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(var(--i) * .07s);
}
.qg-reason:hover {
  background: rgba(30, 41, 59, .92);
  border-color: #fcd34d;
  transform: translateY(-.25cqw);
}
.qg-reason:focus-visible { outline: 0.28cqw solid #7dd3fc; outline-offset: .25cqw; }
.qg-reason.right { background: rgba(22, 163, 74, .9); border-color: #86efac; }
.qg-reason.wrong {
  background: rgba(185, 28, 28, .9);
  border-color: #fca5a5;
  animation: qgReject .45s ease-out both !important;
}
/* ─── king dialogue variant ────────────────────────────────────────── */

.qg-dialogue.king {
  border-color: #3a2a08;
  background: rgba(255, 250, 235, .93);
}
.qg-dialogue.king .qg-avatar {
  border-color: #3a2a08;
  background-size: 125%;
  background-position: center 36%;
}
.qg-dialogue.king.crop .qg-avatar {
  overflow: hidden;
  background: #92979b;
}
.qg-dialogue.king.crop .qg-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--qg-king-image);
  background-repeat: no-repeat;
  background-size: 700% auto;
  background-position: 50% 18%;
}
.qg-dialogue.king.crop[data-region="rhombus"] .qg-avatar::before {
  clip-path: polygon(36% 2%, 44% 2%, 50% 10%, 56% 2%, 64% 2%, 64% 23%, 96% 50%, 73% 77%, 72% 100%, 28% 100%, 27% 77%, 4% 50%, 36% 23%);
}
.qg-dialogue.king.crop[data-region="rectangle"] .qg-avatar::before,
.qg-dialogue.king.crop[data-region="square"] .qg-avatar::before {
  clip-path: polygon(32% 2%, 42% 2%, 50% 10%, 58% 2%, 68% 2%, 67% 22%, 93% 24%, 92% 78%, 74% 80%, 72% 100%, 28% 100%, 26% 80%, 8% 78%, 7% 24%, 33% 22%);
}
.qg-dialogue.king .qg-speaker { color: #8a5a06; }

/* ─── anger + rewind feedback ──────────────────────────────────────── */

.qg-flash.bad { background: #dc2626; }

.qg-stage.shake { animation: qgShake .62s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes qgShake {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-1.1%, .5%); }
  26% { transform: translate(1.2%, -.6%); }
  42% { transform: translate(-.9%, -.4%); }
  58% { transform: translate(.8%, .5%); }
  74% { transform: translate(-.5%, .2%); }
  88% { transform: translate(.3%, -.2%); }
}

.qg-stage.rewinding .qg-bg { animation: qgRewind .78s ease-in-out both; }
@keyframes qgRewind {
  0% { filter: none; transform: scale(1); }
  40% { filter: hue-rotate(160deg) saturate(1.5) brightness(1.15); transform: scale(1.03); }
  100% { filter: none; transform: scale(1); }
}

.qg-hud.spend .qg-gems i { transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.qg-hud.spend { animation: qgHudPop .6s ease-out both; }
@keyframes qgHudPop {
  0%, 100% { transform: none; }
  35% { transform: scale(1.12); }
}

.qg-card.over { background: radial-gradient(ellipse 70% 60% at 50% 50%, #2a0d0d, #05070c 78%); }
.qg-card.over .qg-chapter { color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
  .qg-bg,
  .qg-gems i.lit,
  .qg-mapfx.on .qg-zone,
  .qg-mapfx.focus .qg-zone.hot,
  .qg-mapfx.focus .qg-route,
  .qg-mapfx.next-stop .qg-glow-n,
  .qg-mapfx.next-stop .qg-route-n,
  .qg-mapfx.next-stop .qg-tag-n,
  .qg-tap.on,
  .qg-tap-corner.on,
  .qg-caret,
  .qg-start,
  .qg-choices.on .qg-choice,
  .qg-choice.right,
  .qg-choice.wrong,
  .qg-reason,
  .qg-reason.wrong,
  .qg-stage.shake,
  .qg-stage.rewinding .qg-bg,
  .qg-hud.spend,
  .qg-title .qg-eyebrow,
  .qg-title h3,
  .qg-title .qg-sub {
    animation: none !important;
  }
  .qg-bg { transform: scale(1.02) !important; }
  .qg-tap.on,
  .qg-tap-corner.on { opacity: 1; }
  .qg-zone { stroke-dashoffset: 0 !important; opacity: 1; }
  .qg-route { opacity: 1; }
  .qg-mapfx.next-stop .qg-glow-n { stroke-dashoffset: 0 !important; opacity: 1; }
  .qg-mapfx.next-stop .qg-route-n,
  .qg-mapfx.next-stop .qg-tag-n { opacity: 1; }
  .qg-choices.on .qg-choice { opacity: 1; transform: none; }
  .qg-reason { opacity: 1; transform: none; }
  .qg-dialogue { transition: opacity .2s linear; transform: none !important; }
}