/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Hallmark · genre: playful · macrostructure: Bento Grid · F1 knobs: tiles=7, spans=irregular, border=hairline
 * nav: N1a (แอปมีปลายทางแค่ 2: วิธีเล่น + สำหรับครู) · footer: Ft8 marquee (speed=48s, glyph=middot)
 * theme: custom · vibe: "ห้องเรียนแดดอุ่น เขียว Whoscall นักสืบตัวจิ๋ว"
 * paper: oklch(96.5% 0.015 105) · accent: oklch(74% 0.2 152) · display: Mitr · body: Anuphan · outlier: Mali (2 จุด)
 * axes: light / rounded-sans / chromatic-green ~152° · enrichment: H9 hand-built SVG mascot (Tier B)
 * studied: no · context: inferred · v1.0
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */

/* ============ ฐาน ============ */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }
body { overflow-x: clip; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; overflow-wrap: anywhere; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* กันคำยาวดันจอ ในจุดที่ไม่ใช่ h1–h3/p */
.level__rank, .level__desc, .result__rank, .bubble, .choice__text, .cell__title {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ปุ่มที่เหลือให้มีจังหวะกดครบ */
.wordmark:active, .dlg__close:active, .foot__meta button:active { transform: translateY(1px); }

.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ============ แถบบน (N1a: ชื่อแอป + 2 ลิงก์ + ปุ่มเสียง) ============ */
.topbar {
  border-bottom: 1.5px solid var(--color-rule);
  background: var(--color-paper);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark__dot {
  width: 0.55em; height: 0.55em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  border: 2px solid var(--color-accent-deep);
}
.topbar__links {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.toplink {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.toplink:hover { background: var(--color-paper-2); color: var(--color-ink); }
.toplink:active { transform: translateY(1px); }

/* ปุ่มเปิด/ปิดเสียง — ชิปขอบ */
.soundbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.soundbtn:hover { border-color: var(--color-accent-deep); }
.soundbtn:active { transform: translateY(1px); }
.soundbtn[aria-pressed="false"] { color: var(--color-muted); }
.soundbtn svg { width: 1.05em; height: 1.05em; }
.soundbtn[aria-pressed="true"] .icon-off { display: none; }
.soundbtn[aria-pressed="false"] .icon-on { display: none; }

/* ============ ฮีโร่ (H9: ข้อความ + มาสคอต SVG) ============ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-lg) var(--space-xl); /* ล่างหนักกว่าบน ดึงสายตาลงสู่การ์ดระดับ */
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-accent-ink);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  margin-block-end: var(--space-md);
}
.hero__title {
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* คำเน้น: แถบไฮไลต์หลังตัวอักษร (ระดับ x-height ไม่ใช่ขีดเส้นใต้) */
.hero__title em {
  font-style: normal;
  color: var(--color-accent-deep);
  background: linear-gradient(180deg, transparent 42%, var(--color-accent-soft) 42%, var(--color-accent-soft) 94%, transparent 94%);
  border-radius: 4px;
  padding-inline: 0.06em;
}
.hero__sub {
  margin-block-start: var(--space-md);
  max-width: 46ch;
  color: var(--color-ink-2);
}
.hero__meta {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.chip {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  white-space: nowrap;
  background: var(--color-paper);
}

/* มาสคอต + บับเบิลคำพูด (จุดที่ 1 ของฟอนต์ลายมือ) */
.hero__mascot {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}
.hero__mascot .mascot { width: min(240px, 56vw); height: auto; }
.bubble {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-md);
  position: relative;
}
.bubble::after {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 14px; height: 14px;
  background: var(--color-paper-2);
  border-top: 1.5px solid var(--color-rule);
  border-left: 1.5px solid var(--color-rule);
  transform: translateX(-50%) rotate(45deg);
}

/* ============ มาสคอต — สลับสีหน้า ด้วยตัวแปร CSS ทะลุเข้า <use> ============ */
.mascot { --m-neutral: block; --m-happy: none; --m-alert: none; }
.mascot--happy { --m-neutral: none; --m-happy: block; --m-alert: none; }
.mascot--alert { --m-neutral: none; --m-happy: none; --m-alert: block; }

/* ============ เบนโตกริด (7 ช่อง สแปนไม่เท่ากัน) ============ */
.bento-head {
  padding-block: var(--space-lg) var(--space-md);
}
.bento-head h2 { font-size: var(--text-xl); font-weight: 600; }
.bento-head p { color: var(--color-muted); margin-block-start: var(--space-2xs); }

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  padding-block-end: var(--space-2xl);
}
@media (min-width: 40rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cell--lv1 { grid-column: span 7; }
  .cell--lv2 { grid-column: span 5; }
  .cell--lv3 { grid-column: span 5; }
  .cell--lv4 { grid-column: span 7; }
  .cell--stat { grid-column: span 4; }
  .cell--how { grid-column: span 4; }
  .cell--hotline { grid-column: span 4; }
}

.cell {
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  padding: var(--space-lg);
  min-width: 0;
}

/* ---- การ์ดระดับชั้น (ปุ่มทั้งใบ) ---- */
.cell--level {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  text-align: start;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cell--level:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}
.cell--level:active { transform: translateY(0); }
.cell--lv1 { background: var(--color-lv1-soft); border-color: color-mix(in oklch, var(--color-lv1) 45%, var(--color-rule)); }
.cell--lv2 { background: var(--color-lv2-soft); border-color: color-mix(in oklch, var(--color-lv2) 45%, var(--color-rule)); }
.cell--lv3 { background: var(--color-lv3-soft); border-color: color-mix(in oklch, var(--color-lv3) 45%, var(--color-rule)); }
.cell--lv4 { background: var(--color-lv4-soft); border-color: color-mix(in oklch, var(--color-lv4) 45%, var(--color-rule)); }

.level__top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.level__icon {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  border: 1.5px solid currentColor;
}
.level__icon svg { width: 26px; height: 26px; }
.cell--lv1 .level__icon { color: var(--color-lv1-deep); background: color-mix(in oklch, var(--color-lv1) 38%, var(--color-paper)); }
.cell--lv2 .level__icon { color: var(--color-lv2-deep); background: color-mix(in oklch, var(--color-lv2) 32%, var(--color-paper)); }
.cell--lv3 .level__icon { color: var(--color-lv3-deep); background: color-mix(in oklch, var(--color-lv3) 32%, var(--color-paper)); }
.cell--lv4 .level__icon { color: var(--color-lv4-deep); background: color-mix(in oklch, var(--color-lv4) 28%, var(--color-paper)); }

.level__grade {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.cell--lv1 .level__grade { color: var(--color-lv1-deep); }
.cell--lv2 .level__grade { color: var(--color-lv2-deep); }
.cell--lv3 .level__grade { color: var(--color-lv3-deep); }
.cell--lv4 .level__grade { color: var(--color-lv4-deep); }

.level__rank {
  font-size: var(--text-xl);
  font-weight: 600;
}
.level__desc { color: var(--color-ink-2); font-size: var(--text-base); }
.level__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.level__best { font-variant-numeric: tabular-nums; }
.level__cta {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  justify-self: start;
  border-bottom: 2px solid currentColor;
  white-space: nowrap;
}
.cell--lv1 .level__cta { color: var(--color-lv1-deep); }
.cell--lv2 .level__cta { color: var(--color-lv2-deep); }
.cell--lv3 .level__cta { color: var(--color-lv3-deep); }
.cell--lv4 .level__cta { color: var(--color-lv4-deep); }

/* ---- ช่องสถิติ — สไตล์ "คลิปข่าวตัดมาแปะ" เข้าชุดกับกล่องเคสจริงในเกม ---- */
.cell--stat {
  background: var(--color-paper);
  border-style: dashed;
  border-color: var(--color-accent-deep);
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  color: var(--color-accent-deep);
  font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--color-ink-2); font-size: var(--text-base); }
.stat__src { color: var(--color-muted); font-size: var(--text-sm); }

/* ---- ช่องวิธีเล่น ---- */
.cell--how ol {
  margin: var(--space-sm) 0 0;
  padding-inline-start: 1.4em;
  display: grid;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-base);
}
.cell__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}

/* ---- ช่องสายด่วน ---- */
.cell--hotline { border-color: var(--color-accent-deep); display: grid; align-content: start; gap: var(--space-xs); }
.hotline__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-accent-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cell--hotline p { color: var(--color-ink-2); font-size: var(--text-base); }

/* ============ เอฟเฟกต์เข้าหน้า (ครั้งเดียวตอนโหลด) ============ */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ============ หน้าเล่นควิซ ============ */
.quiz {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: var(--space-lg) var(--space-2xl);
}
.quiz__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-block-end: var(--space-lg);
}
.backbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  padding: var(--space-xs) var(--space-sm);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.backbtn:hover { border-color: var(--color-ink-2); }
.quiz__level {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  white-space: nowrap;
}
.quiz__level[data-lv="p13"] { background: var(--color-lv1-soft); color: var(--color-lv1-deep); }
.quiz__level[data-lv="p46"] { background: var(--color-lv2-soft); color: var(--color-lv2-deep); }
.quiz__level[data-lv="m13"] { background: var(--color-lv3-soft); color: var(--color-lv3-deep); }
.quiz__level[data-lv="m46"] { background: var(--color-lv4-soft); color: var(--color-lv4-deep); }

.dots {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-rule);
  background: var(--color-paper);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.dot--current { border-color: var(--color-ink); transform: scale(1.2); }
.dot--good { background: var(--color-accent); border-color: var(--color-accent-deep); }
.dot--bad { background: var(--color-bad-soft); border-color: var(--color-bad); }

.qcard {
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  padding: clamp(var(--space-md), 3vw, var(--space-xl));
}
/* ชิปเลขข้อ — สีตามระดับที่กำลังเล่น (body[data-lv]) */
.qcard__count {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  font-variant-numeric: tabular-nums;
}
body[data-lv="p13"] .qcard__count { background: var(--color-lv1-soft); color: var(--color-lv1-deep); }
body[data-lv="p46"] .qcard__count { background: var(--color-lv2-soft); color: var(--color-lv2-deep); }
body[data-lv="m13"] .qcard__count { background: var(--color-lv3-soft); color: var(--color-lv3-deep); }
body[data-lv="m46"] .qcard__count { background: var(--color-lv4-soft); color: var(--color-lv4-deep); }
.qcard__text {
  margin-block-start: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.4;
}

.choices {
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  text-align: start;
  padding: var(--space-sm) var(--space-md);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 44px;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .choice:not(:disabled):hover { border-color: var(--color-accent-deep); background: var(--color-paper-2); }
}
.choice:not(:disabled):active { transform: translateY(1px); }
.choice:disabled { cursor: default; }
.choice__key {
  flex: none;
  width: 1.9em; height: 1.9em;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
}
/* สถานะหลังตอบ */
.choice--correct {
  border-color: var(--color-good);
  background: var(--color-good-soft);
}
.choice--correct .choice__key { background: var(--color-accent); border-color: var(--color-good); color: var(--color-accent-ink); }
.choice--wrong {
  border-color: var(--color-bad);
  background: var(--color-bad-soft);
}
.choice--wrong .choice__key { background: var(--color-bad); border-color: var(--color-bad); color: var(--color-paper); }
.choice--dim { opacity: 0.55; }

/* ---- กล่องเฉลย ---- */
/* กล่องเฉลย: พื้นสีอย่างเดียว ไม่ตีกรอบซ้อนการ์ด — สีสถานะอยู่ที่คำตัดสิน+มาสคอต */
.feedback {
  margin-block-start: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  animation: reveal var(--dur-long) var(--ease-out);
}
.feedback[hidden] { display: none; }

.verdict {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.verdict .mascot { width: 56px; height: 56px; flex: none; }
.verdict__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
}
.feedback--good .verdict__text { color: var(--color-good); }
.feedback--bad .verdict__text { color: var(--color-bad); }

.feedback__explain { color: var(--color-ink); }

.casebox {
  border: 1.5px dashed var(--color-accent-deep);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  display: grid;
  gap: var(--space-2xs);
}
.casebox__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-accent-deep);
}
.casebox__text { font-size: var(--text-base); color: var(--color-ink); }
.casebox__src { font-size: var(--text-sm); color: var(--color-muted); }

.feedback__actions { display: flex; justify-content: flex-end; }

/* ปุ่มหลัก (accent เดียวต่อหน้าจอ) */
/* ปุ่มหลักทรง "กดได้จริง" — เงาแข็งด้านล่าง กดแล้วยุบลงไปชนพื้น */
.btn-primary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 2px solid var(--color-accent-deep);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--color-accent-deep);
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.btn-primary:hover { background: color-mix(in oklch, var(--color-accent) 88%, var(--color-paper)); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--color-accent-deep); }

.btn-ghost {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-ink-2);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  background: var(--color-paper);
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--color-ink-2); }
.btn-ghost:active { transform: translateY(1px); }

.quiz__hint {
  margin-block-start: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

/* ============ หน้าผลคะแนน ============ */
.result {
  max-width: 40rem;
  margin-inline: auto;
  padding-block: var(--space-xl) var(--space-2xl);
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  text-align: center;
  position: relative;
}
.result .mascot { width: 170px; height: 170px; }

/* สติกเกอร์ฉายา (จุดที่ 2 ของฟอนต์ลายมือ) — แปะเทปแบบสมุดนักสืบ */
.result__rank {
  position: relative;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  border: 1.5px solid var(--color-accent-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-lg);
  transform: rotate(-2deg);
}
.result__rank::before,
.result__rank::after {
  content: "";
  position: absolute;
  width: 42px; height: 15px;
  background: var(--color-lv2-soft);
  border: 1px solid var(--color-rule-2);
  opacity: 0.85;
  border-radius: 2px;
}
.result__rank::before { top: -9px; left: 14px; transform: rotate(-7deg); }
.result__rank::after { top: -9px; right: 14px; transform: rotate(6deg); }

.result__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-s);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.result__score small {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--color-muted);
}

.stars { display: flex; gap: var(--space-2xs); }
/* ดาวเด้งเข้าทีละดวง (one-shot) */
.stars svg {
  width: 34px; height: 34px;
  animation: star-pop 450ms var(--ease-out) backwards;
  animation-delay: calc(var(--si, 0) * 90ms);
}
@keyframes star-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
}
/* สีต้องตั้งบนตัว svg เพื่อให้ inherit เข้าไปใน <use> */
.star--on { fill: var(--color-lv1); stroke: var(--color-lv1-deep); }
.star--off { fill: var(--color-paper-3); stroke: var(--color-rule); }

.result__note { color: var(--color-ink-2); max-width: 44ch; }

.result__motto {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent-deep);
}

.result__actions {
  margin-block-start: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.result__rotate-note { font-size: var(--text-sm); color: var(--color-muted); }

/* คอนเฟตติ (ยิงครั้งเดียวตอนคะแนนดี) */
.confetti {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
.confetti span {
  position: absolute;
  top: -12px;
  width: 10px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall 1.9s var(--ease-in) forwards;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0.9; transform: translateY(78vh) rotate(560deg); }
}

/* ============ ฟุตเทอร์ (Ft8: marquee คำขวัญ) ============ */
.foot { border-top: 2px solid var(--color-accent-deep); background: var(--color-paper-2); }
.foot-marquee { overflow: clip; }
.foot-marquee__track {
  display: flex;
  gap: var(--space-2xl);
  white-space: nowrap;
  padding-block: var(--space-sm);
  animation: foot-marquee 48s linear infinite;
  width: max-content;
}
/* หยุดวิ่งเมื่อชี้เมาส์ (WCAG 2.2.2) */
.foot-marquee:hover .foot-marquee__track { animation-play-state: paused; }
.foot-marquee__track span {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: var(--color-accent-deep);
}
@keyframes foot-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.foot__meta {
  border-top: 1.5px solid var(--color-rule);
  padding-block: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: center;
}
.foot__meta button {
  color: var(--color-accent-deep);
  font-size: var(--text-sm);
  border-bottom: 1.5px solid currentColor;
  white-space: nowrap;
}

/* ซ่อนฟุตเทอร์ตอนกำลังเล่น จะได้ไม่ดึงสายตา */
body[data-screen="quiz"] .foot { display: none; }

/* ============ ไดอะล็อก (วิธีเล่น / สำหรับครู) ============ */
dialog {
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0;
  max-width: min(38rem, calc(100vw - 2rem));
  width: 100%;
  max-height: 85dvh;
}
dialog::backdrop { background: var(--color-scrim); }
.dlg__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1.5px solid var(--color-rule);
  position: sticky;
  top: 0;
  background: var(--color-paper);
}
.dlg__head h2 { font-size: var(--text-lg); font-weight: 600; flex: 1; min-width: 0; }
.dlg__close {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.dlg__close:hover { border-color: var(--color-ink-2); }
.dlg__body {
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  overflow-y: auto;
}
.dlg__body h3 { font-size: var(--text-base); font-weight: 600; color: var(--color-accent-deep); }
.dlg__body ul, .dlg__body ol {
  margin: 0;
  padding-inline-start: 1.4em;
  display: grid;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-base);
}
.dlg__body a { color: var(--color-accent-deep); }
.reflist li strong { color: var(--color-ink); }

/* ============ เคารพผู้ใช้ที่ปิดการเคลื่อนไหว ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
  }
  .foot-marquee__track { animation: none; }
  .confetti { display: none; }
  .mascot { --m-blink: none; } /* ปิดกะพริบตา (SMIL ในตัวมาสคอต) */
}

/* ============ จอเล็ก ============ */
@media (max-width: 40rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-md) var(--space-lg);
  }
  .hero__mascot { order: -1; }
  .hero__mascot .mascot { width: min(150px, 42vw); }
  .bubble { font-size: var(--text-sm); }
  .topbar__links .toplink--how { display: none; } /* ลดความแน่น — เข้าถึงวิธีเล่นได้จากช่องเบนโต */
  .dots { gap: var(--space-2xs); }
  .dot { width: 10px; height: 10px; }
  .result .mascot { width: 130px; height: 130px; }
  .verdict__text { font-size: var(--text-md); } /* กันคำตัดสินล้นบรรทัดบนจอแคบ */
}