/* ============================================================================
   CODE QUEST — home.css
   The cover (hero), student profile, intro cinematic, dashboard and the
   chapter-select map.
   ========================================================================== */

/* ============================================================================
   1. COVER / HERO  — moved out

   The entry screen lives in css/landing.css now (rendered by
   js/pages/start.js). The old cover — a centred column with a portal image,
   a row of topic pills and a small progress card — was replaced wholesale,
   so its styles are not kept here as dead weight.
   ========================================================================== */

/* ============================================================================
   2. STUDENT PROFILE
   ========================================================================== */

.cq-profile {
  width: min(540px, 100%);
  margin-inline: auto;
  margin-block: var(--sp-6);
}

.cq-profile__intro {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: var(--border-hair) solid rgba(122, 221, 255, 0.12);
}

.cq-profile__pix {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 2px solid rgba(122, 221, 255, 0.45);
  background: radial-gradient(circle at 50% 35%, rgba(63, 201, 247, 0.35), rgba(5, 11, 26, 0.95) 70%);
  filter: drop-shadow(0 10px 26px rgba(3, 6, 15, 0.8))
    drop-shadow(0 0 26px rgba(63, 201, 247, 0.3));
  animation: cq-float-sm 5s var(--ease-in-out-soft) infinite;
}

.cq-profile__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cq-profile__locked-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--border-hair) solid var(--warning-edge);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--warning-soft);
  font-size: var(--fs-sm);
  color: var(--warning);
  margin-bottom: var(--sp-4);
}

/* Step dots above the form, so the learner sees where they are in the flow. */
.cq-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.cq-steps__dot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cq-steps__dot i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: var(--border-hair) solid var(--locked-edge);
  background: rgba(3, 6, 15, 0.5);
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-style: normal;
}

.cq-steps__dot--active {
  color: var(--cyan-100);
}

.cq-steps__dot--active i {
  border-color: var(--cyan-300);
  background: rgba(63, 201, 247, 0.2);
  color: var(--cyan-100);
  box-shadow: var(--glow-cyan-sm);
}

.cq-steps__dot--done i {
  border-color: var(--success-edge);
  background: var(--success-soft);
  color: var(--success);
}

.cq-steps__line {
  width: 24px;
  height: 1px;
  background: var(--locked-edge);
}

/* ============================================================================
   3. INTRO CINEMATIC — เล่นเต็มจอ

   บทนำไม่ได้อยู่ในกล่อง 16:9 กลางหน้าเว็บอีกแล้ว มันถูกส่งผ่าน .cq-cinematic
   (css/components.css) ซึ่งกินพื้นที่ทั้งหน้าจอ เหลือไว้ที่นี่เฉพาะของที่เป็นของ
   บทนำจริง ๆ คือแถบบอกจังหวะฉากและบรรทัดบอกวิธีไปต่อ
   ========================================================================== */

.cq-intro__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.cq-intro__hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted, rgba(166, 188, 216, 0.72));
}

/* Beat indicator */
.cq-intro__progress {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}

.cq-intro__dot {
  width: 38px;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(166, 188, 216, 0.22);
  transition: background-color var(--dur-slow) var(--ease-out-expo),
    box-shadow var(--dur-slow) var(--ease-out-expo), width var(--dur-slow) var(--ease-out-expo);
}

.cq-intro__dot--on {
  width: 54px;
  background: linear-gradient(90deg, var(--cyan-400), var(--cyan-200));
  box-shadow: 0 0 12px rgba(63, 201, 247, 0.66);
}

/* ============================================================================
   4. DASHBOARD — removed

   pages/home.html is gone. It sat between the pre-test and the map and showed
   the same XP / level / core / test figures the map's own summary strip now
   carries, so it was a stop on the way to somewhere else. Its styles are not
   kept here as dead weight; the summary strip lives in section 5 with the
   rest of the map.
   ========================================================================== */

/* ============================================================================
   5. CHAPTER SELECT — map + cards
   ========================================================================== */

/* ---- the hub's summary strip ----
   What the dashboard used to say, in one band above the map: the figures on
   the left, the state of the two tests in the middle, and whatever the learner
   can do next on the right. It is a strip rather than a column of panels
   because nobody comes here to read it — they come here to pick a chapter, and
   this is the glance they take on the way. */
.cq-map__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: var(--border-hair) solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: var(--glass-fill-soft);
  box-shadow: var(--elev-1), var(--glass-lip);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.cq-map__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}

.cq-map__stat {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cq-map__stat-label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.cq-map__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  line-height: 1.05;
  color: var(--text-primary);
}

.cq-map__stat-value--gold { color: var(--gold-200); }
.cq-map__stat-value--cyan { color: var(--cyan-100); }

.cq-map__tests {
  display: grid;
  gap: var(--sp-1);
  padding-inline: var(--sp-5);
  border-inline: var(--border-hair) solid var(--glass-edge);
}

.cq-map__test {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.cq-map__test-label {
  min-width: 4.5rem;
  color: var(--text-tertiary);
}

.cq-map__test b {
  color: var(--cyan-100);
}

.cq-map__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.cq-map__who {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.cq-map__who b {
  color: var(--cyan-100);
}

/* Below the laptop breakpoint the three bands stack, and the dividers around
   the test figures become a single rule above them. */
@media (max-width: 1100px) {
  .cq-map__summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .cq-map__tests {
    padding-inline: 0;
    padding-top: var(--sp-3);
    border-inline: 0;
    border-top: var(--border-hair) solid var(--glass-edge);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cq-map__links {
    justify-content: flex-start;
  }
}

/* On a phone the two test rows stop being single-line: the Thai face is wider
   than the system one it replaced, and "ก่อนเรียน  รอจบ Final Mission" on one
   unbreakable line pushed the strip past a 320px screen. */
@media (max-width: 560px) {
  .cq-map__tests {
    grid-template-columns: minmax(0, 1fr);
  }

  .cq-map__test {
    flex-wrap: wrap;
    white-space: normal;
  }

  .cq-map__test-label {
    min-width: 0;
  }
}

.cq-map {
  position: relative;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: var(--border-hair) solid var(--glass-edge);
  background: var(--bg-abyss);
  box-shadow: var(--elev-4), var(--glow-cyan-sm);
  isolation: isolate;
}

/* The map art carries the layout of the world, so it is CONTAINED, not cropped. */
.cq-map__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.cq-map__nodes {
  position: absolute;
  inset: 0;
}

/* ---------- Map node ---------- */

.cq-map__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  min-width: 104px;
  border: var(--border-hair) solid var(--glass-edge);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(8, 17, 33, 0.92), rgba(3, 6, 15, 0.88));
  box-shadow: var(--elev-2), var(--glass-lip);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  transition: transform var(--dur-mid) var(--ease-out-back),
    box-shadow var(--dur-mid) var(--ease-out-expo), border-color var(--dur-fast) linear;
}

.cq-map__node:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.08) translateY(-3px);
  border-color: var(--cyan-300);
  box-shadow: var(--elev-3), var(--glow-cyan-md);
  z-index: 3;
}

.cq-map__node:focus-visible {
  box-shadow: var(--focus-ring);
  z-index: 4;
}

.cq-map__node:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.02);
}

.cq-map__node-badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: var(--border-thick) solid;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  transition: box-shadow var(--dur-mid) var(--ease-out-expo);
}

.cq-map__node-title {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  line-height: 1.25;
  max-width: 112px;
}

.cq-map__node-world {
  font-size: 0.64rem;
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 112px;
}

.cq-map__node-stars {
  font-size: var(--fs-xs);
  line-height: 1;
}

/* --- Three visually distinct states: border style, badge fill, and glyph --- */

.cq-map__node--locked {
  border-style: dashed;
  border-color: var(--locked-edge);
  opacity: 0.74;
  cursor: not-allowed;
}

.cq-map__node--locked .cq-map__node-badge {
  border-color: var(--locked-edge);
  border-style: dashed;
  color: var(--text-muted);
  background: var(--locked-soft);
}

.cq-map__node--unlocked {
  border-color: rgba(122, 221, 255, 0.45);
}

.cq-map__node--unlocked .cq-map__node-badge {
  border-color: var(--cyan-300);
  color: var(--cyan-100);
  background: radial-gradient(circle at 50% 35%, rgba(63, 201, 247, 0.4), rgba(7, 90, 123, 0.32));
  animation: cq-pulse-ring 2.6s var(--ease-out-expo) infinite;
}

.cq-map__node--completed {
  border-color: rgba(239, 189, 87, 0.45);
}

.cq-map__node--completed .cq-map__node-badge {
  border-color: var(--gold-300);
  color: var(--text-on-gold);
  background: linear-gradient(180deg, var(--gold-200), var(--gold-500));
  box-shadow: var(--glow-gold-sm);
}

.cq-map__node--final .cq-map__node-badge {
  border-width: 3px;
}

.cq-map__node--final.cq-map__node--unlocked .cq-map__node-badge {
  border-color: var(--gold-300);
  color: var(--gold-100);
  background: radial-gradient(circle at 50% 35%, rgba(239, 189, 87, 0.42), rgba(154, 109, 27, 0.3));
  animation: cq-pulse-ring-gold 2.4s var(--ease-out-expo) infinite;
}

/* ---------- Legend ---------- */

.cq-map__legend {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}

.cq-map__legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.cq-map__legend-swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: var(--border-thick) solid;
  flex: 0 0 auto;
}

/* ============================================================================
   6. CHAPTER CARDS — the narrow-screen view, and the fallback if the map art
   is unavailable
   ========================================================================== */

.cq-chapter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: var(--gap-panel);
}

.cq-chapter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: left;
  border: var(--border-hair) solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: var(--glass-fill);
  box-shadow: var(--elev-2), var(--glass-lip);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out-expo),
    box-shadow var(--dur-mid) var(--ease-out-expo), border-color var(--dur-fast) linear;
}

.cq-chapter-card:hover:not(:disabled) {
  transform: translate3d(0, -5px, 0);
  border-color: var(--cyan-300);
  box-shadow: var(--elev-3), var(--glow-cyan-md);
}

.cq-chapter-card:active:not(:disabled) {
  transform: translate3d(0, -1px, 0);
}

.cq-chapter-card--locked {
  border-style: dashed;
  border-color: var(--locked-edge);
  opacity: 0.72;
  cursor: not-allowed;
}

.cq-chapter-card--completed {
  border-color: rgba(239, 189, 87, 0.4);
}

.cq-chapter-card--completed::before {
  content: '';
  position: absolute;
  inset-inline: 10%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
}

.cq-chapter-card__thumb {
  width: 100%;
  aspect-ratio: var(--stage-ratio);
  object-fit: cover;
  border-radius: var(--r-md);
  border: var(--border-hair) solid rgba(122, 221, 255, 0.12);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.cq-chapter-card:hover:not(:disabled) .cq-chapter-card__thumb {
  transform: scale(1.04);
}

.cq-chapter-card--locked .cq-chapter-card__thumb {
  filter: grayscale(0.9) brightness(0.45);
}

.cq-chapter-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.cq-chapter-card__id {
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider);
  color: var(--cyan-300);
}

.cq-chapter-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
}

.cq-chapter-card__world {
  font-size: var(--fs-2xs);
  color: var(--gold-300);
  letter-spacing: var(--ls-wide);
}

.cq-chapter-card__desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.cq-chapter-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: var(--border-hair) solid rgba(122, 221, 255, 0.1);
}

/* The map wrapper is shown above the phone breakpoint (see responsive.css). */
.cq-map-wrap {
  display: none;
}