/* ==========================================================================
   student.css — student/parent-facing pages (purple playful, mobile-first)
   ========================================================================== */

.student-page { background: var(--color-page); }

/* ---- K3 playful stage: floating learning objects, soft playground mood ---- */
.student-stage {
  position: relative;
  isolation: isolate;
}
.student-stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--color-page);
}
.floaties {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.floatie {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 54px;
  padding-inline: 10px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 12px 26px rgba(94, 53, 177, .12);
  color: #fff;
  font-weight: 900;
  line-height: 1;
  transform: translate3d(0,0,0) rotate(var(--tilt, -6deg));
  animation: floatDrift var(--float-speed, 8s) ease-in-out infinite;
}
.floatie--one { top: 104px; left: max(12px, calc(50% - 560px)); background: var(--color-brand); --tilt: -8deg; --float-speed: 7.5s; }
.floatie--two { top: 238px; right: max(18px, calc(50% - 548px)); background: var(--color-brand-strong); --tilt: 7deg; --float-speed: 8.4s; animation-delay: -.8s; }
.floatie--three { top: 54%; left: max(10px, calc(50% - 600px)); background: #ffd54f; color: #6f4b00; --tilt: 10deg; --float-speed: 9s; animation-delay: -1.4s; }
.floatie--four { top: 72%; right: max(14px, calc(50% - 580px)); background: #f48fb1; --tilt: -10deg; --float-speed: 7.8s; animation-delay: -2.1s; }
.floatie--five { top: 44%; right: max(44px, calc(50% - 490px)); background: #7fb8e8; --tilt: 5deg; --float-speed: 10s; animation-delay: -3.2s; }

/* ---- Hero band ---- */
.hero {
  position: relative;
  text-align: center;
  background: var(--color-hero-bg);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.playful-hero {
  background: var(--color-brand);
  border: 3px solid rgba(255,255,255,.72);
}
.playful-hero::after {
  content: "★";
  position: absolute;
  right: clamp(18px, 8vw, 78px);
  top: clamp(18px, 5vw, 44px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #ffd54f;
  color: #704d00;
  box-shadow: 0 10px 22px rgba(72, 43, 13, .16);
  animation: twinkleSpin 5s ease-in-out infinite;
}
.hero::before {
  /* sprinkled "+" pattern like the reference hero */
  content: "";
  position: absolute;
  top: 22px;
  left: 26px;
  width: 8px;
  height: 8px;
  color: rgba(255,255,255,.30);
  box-shadow:
    88px 28px 0 currentColor,
    176px 2px 0 currentColor,
    268px 42px 0 currentColor,
    364px 8px 0 currentColor,
    492px 36px 0 currentColor,
    612px 4px 0 currentColor,
    728px 42px 0 currentColor,
    828px 18px 0 currentColor,
    70px 134px 0 currentColor,
    216px 154px 0 currentColor,
    402px 136px 0 currentColor,
    584px 158px 0 currentColor,
    772px 132px 0 currentColor;
  border-radius: 50%;
  opacity: .7;
  pointer-events: none;
}
.hero > * { position: relative; }
.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  background: rgba(255,255,255,.22);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.hero h1 { color: #fff; font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.hero p { color: rgba(255,255,255,.92); max-width: 44ch; margin-inline: auto; margin-bottom: 0; }
.hero-toys {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.hero-toys span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 800;
}

/* ---- Score hero ---- */
.result-hero {
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-5);
}
.score-playground {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-brand-light);
  background: var(--color-surface);
}
.score-playground::before,
.score-playground::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: .35;
}
.score-playground::before {
  width: 118px;
  height: 118px;
  left: -38px;
  top: -36px;
  background: #ffd54f;
  animation: softPulse 4.8s ease-in-out infinite;
}
.score-playground::after {
  width: 92px;
  height: 92px;
  right: -28px;
  bottom: -30px;
  background: #81d4b8;
  animation: softPulse 5.6s ease-in-out infinite reverse;
}
.result-hero__exam { font-size: var(--text-sm); color: var(--color-brand); font-weight: 700; margin-bottom: var(--space-1); }
.result-hero__nickname { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-4); }

.score-ring { --pct: 0; position: relative; width: 200px; height: 200px; margin: 0 auto var(--space-3); }
.score-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.score-ring__track { fill: none; stroke: var(--color-surface-soft); stroke-width: 14; }
.score-ring__fill {
  fill: none; stroke: var(--color-brand); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 6px 8px rgba(126, 87, 194, .22));
}
.score-ring__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.score-ring__num {
  font-size: var(--text-score); font-weight: 800; line-height: 1; color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.score-ring__of { font-size: var(--text-md); color: var(--color-muted); }
.result-hero__interpret { font-size: var(--text-md); color: var(--color-ink); margin-top: var(--space-2); }
.result-hero__chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4);
}

/* Absent variant */
.result-hero--absent .score-ring { display: none; }
.result-hero--absent .absent-msg {
  font-size: var(--text-lg); color: var(--color-muted);
  padding: var(--space-6) var(--space-3);
}

/* ---- Comparison panel ---- */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-card);
}
.play-panel {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}
.play-panel::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  color: rgba(126,87,194,.12);
  box-shadow:
    -64px 22px 0 currentColor,
    -132px 2px 0 currentColor,
    -220px 30px 0 currentColor,
    -308px 8px 0 currentColor,
    -420px 36px 0 currentColor,
    -560px 18px 0 currentColor,
    -720px 42px 0 currentColor,
    -820px 14px 0 currentColor;
  opacity: .42;
  pointer-events: none;
}
.play-panel > * { position: relative; }
.growth-panel h2::before,
.compare-play-panel h2::before,
.report-cardlet h2::before,
.topic-summary-card h2::before,
.topic-detail-card h2::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 5px;
  background: var(--color-brand);
  transform: rotate(-9deg);
  vertical-align: -1px;
}
.growth-panel #growthChart {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #ffffff;
  padding: var(--space-3);
  box-shadow: inset 0 -6px 0 var(--color-surface-soft);
}
.chart-tooltip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 190px;
  padding: 8px 10px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-ink);
  box-shadow: 0 10px 22px rgba(94, 53, 177, .16);
  font-size: var(--text-xs);
  opacity: 0;
  transform: translateY(4px) scale(.98);
  pointer-events: none;
  transition: opacity .16s cubic-bezier(.22,1,.36,1), transform .16s cubic-bezier(.22,1,.36,1);
}
.chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chart-tooltip__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-border);
}
.chart-tooltip strong {
  white-space: nowrap;
}
.panel h2 { font-size: var(--text-lg); }
.panel__lead { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }

/* ---- Month tabs ---- */
.tabs {
  display: flex; gap: var(--space-2); overflow-x: auto;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  scrollbar-width: thin;
}
.tab {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.tab:hover { color: var(--color-ink); }
.tab.is-active { background: var(--color-brand); color: #fff; }
.tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---- Supportive copy ---- */
.support-note {
  background: var(--color-surface-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-md);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}
.rainbow-note {
  border: 2px solid rgba(255,255,255,.85);
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-card);
}
.support-note p { margin: 0; }
.support-note p + p { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }

/* ---- Privacy note ---- */
.privacy-note {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-sm); color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
}

/* ---- Topic result list (correct/incorrect) ---- */
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm);
}
.topic-list--play {
  display: grid;
  gap: var(--space-2);
}
.topic-list--play li {
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 5px 14px rgba(94, 53, 177, .07);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1);
}
.topic-list--play li:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 18px rgba(94, 53, 177, .12);
}
.topic-list li:last-child { border-bottom: 0; }
.topic-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-surface-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; color: var(--color-muted);
}
.topic-mark { margin-left: auto; flex: none; font-weight: 700; }
.mark-correct { color: var(--color-success-text); }
.mark-incorrect { color: var(--color-cta); }
li.topic-row--correct { background: var(--color-success-bg); }
li.topic-row--incorrect { background: var(--color-danger-bg); }
li.topic-row--correct .topic-no { background: #c7e9d6; color: var(--color-success-text); }
li.topic-row--incorrect .topic-no { background: #f3c4c4; color: var(--color-cta); }

/* ---- Playful reports + chart overrides ---- */
.summary-bar--play {
  height: 42px !important;
  border: 3px solid rgba(255,255,255,.86);
  background: #fff;
}
.summary-bar--play .summary-bar__correct { background: var(--color-success-text); }
.summary-bar--play .summary-bar__incorrect { background: var(--color-cta); }
.histo--play {
  position: relative;
  gap: var(--space-3);
  height: 210px;
  padding-top: var(--space-6);
  background: var(--color-surface-soft);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: inset 0 -8px 0 rgba(255,213,79,.16);
}
.histo--play .histo__bar {
  border-radius: 16px 16px 7px 7px;
  box-shadow: 0 8px 15px rgba(94,53,177,.12);
}
.histo--play .histo__bar:nth-child(1) { background: #7fb8e8; }
.histo--play .histo__bar:nth-child(2) { background: #81d4b8; }
.histo--play .histo__bar:nth-child(3) { background: #ffd54f; }
.histo--play .histo__bar:nth-child(4) { background: #ffb15d; }
.histo--play .histo__bar:nth-child(5) { background: #f48fb1; }
.histo--play .histo__bar:nth-child(6) { background: #b39ddb; }
.histo--play .histo__bar.is-student {
  background: var(--color-brand-strong);
  outline: 3px solid rgba(255,255,255,.95);
}
.histo--play .histo__bar.is-student::after {
  content: "คะแนนน้อง";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-cta);
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  box-shadow: var(--shadow-card);
}
.btn--spark {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
  border-color: transparent;
}
.btn--spark::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -35%;
  width: 32%;
  transform: rotate(18deg);
  background: rgba(255,255,255,.42);
  animation: buttonShine 3.2s ease-in-out infinite;
}

/* ---- Motion: reveal + stagger + bounce ---- */
@keyframes revealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.8); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes floatDrift {
  0%, 100% { transform: translate3d(0,0,0) rotate(var(--tilt, -6deg)); }
  50% { transform: translate3d(0,-18px,0) rotate(calc(var(--tilt, -6deg) * -1)); }
}
@keyframes twinkleSpin {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.08); }
}
@keyframes softPulse {
  0%, 100% { transform: scale(1); opacity: .28; }
  50% { transform: scale(1.16); opacity: .42; }
}
@keyframes buttonShine {
  0%, 55% { transform: translateX(0) rotate(18deg); opacity: 0; }
  68% { opacity: 1; }
  100% { transform: translateX(520%) rotate(18deg); opacity: 0; }
}
.reveal { animation: revealUp .45s ease both; }
.reveal--d1 { animation-delay: .08s; }
.reveal--d2 { animation-delay: .16s; }
.reveal--d3 { animation-delay: .24s; }
.reveal--d4 { animation-delay: .32s; }
.pop { animation: popIn .5s cubic-bezier(.22,1,.36,1) both; }

/* confetti canvas overlay */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }

/* growth badge on the progress chart */
.growth-up {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-success-bg); color: var(--color-success-text);
  padding: 4px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700;
}
.growth-down {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-warning-bg); color: var(--color-warning-text);
  padding: 4px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--d1, .reveal--d2, .reveal--d3, .reveal--d4, .pop,
  .floatie, .playful-hero::after, .score-playground::before, .score-playground::after,
  .btn--spark::after { animation: none; }
  .topic-list--play li:hover { transform: none; }
  .chart-tooltip { transition: none; }
}

@media (max-width: 760px) {
  .floatie {
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: var(--text-sm);
  }
  .floatie--one { left: 6px; top: 98px; }
  .floatie--two { right: 8px; top: 230px; }
  .floatie--three, .floatie--four, .floatie--five { display: none; }
  .playful-hero::after {
    width: 36px;
    height: 36px;
    right: 14px;
    top: 14px;
  }
  .histo--play {
    gap: var(--space-2);
    height: 178px;
  }
  .histo--play .histo__bar.is-student::after {
    font-size: 10px;
    padding-inline: 6px;
  }
}

/* ---- Development planning dashboard (dashboard2.html) ---- */
.development-dashboard { --development-ink: #3f3156; }
.development-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.development-hero {
  text-align: left;
  padding-right: clamp(72px, 15vw, 160px);
}
.development-hero p { margin-inline: 0; }
.development-tabs .tab {
  display: grid;
  gap: 1px;
  line-height: 1.25;
}
.tab__status {
  font-size: 10px;
  font-weight: 600;
  opacity: .72;
}
.attendance-notice {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px solid #f0d477;
  border-radius: var(--radius-md);
  background: #fff7d8;
  color: #674f08;
  font-size: var(--text-sm);
  font-weight: 700;
}
.development-summary {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
  overflow: hidden;
  margin-bottom: var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.development-summary__score {
  display: grid;
  align-content: center;
  padding: var(--space-5);
  background: var(--color-brand);
  color: #fff;
}
.development-summary__score span,
.development-summary__score b { font-size: var(--text-sm); }
.development-summary__score strong {
  margin-block: var(--space-1);
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1;
}
.development-summary__score small {
  margin-left: 6px;
  font-size: var(--text-lg);
}
.development-summary__message {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5) clamp(var(--space-5), 6vw, var(--space-7));
}
.development-summary__message p {
  max-width: 36ch;
  margin: 0;
  color: var(--development-ink);
  font-size: var(--text-lg);
  font-weight: 800;
}
.development-summary__message strong { color: var(--color-brand-strong); }
.development-summary__spark {
  position: absolute;
  right: 24px;
  top: 20px;
  color: #e7b900;
  font-size: 30px;
  animation: twinkleSpin 5s ease-in-out infinite;
}
.development-panel { margin-bottom: var(--space-5); }
.development-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.development-heading h2 {
  margin: 0;
  font-size: var(--text-xl);
}
.section-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--color-brand-strong);
  font-size: var(--text-xs);
  font-weight: 800;
}
.garden-mark,
.trend-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #ffd54f;
  color: #654800;
  font-size: var(--text-xl);
  font-weight: 900;
}
.trend-mark {
  background: #cceee3;
  color: #246d59;
}
.skill-garden {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}
.skill-plant {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.skill-plant__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.skill-plant__head div { min-width: 0; }
.skill-plant__head strong,
.skill-plant__head span { display: block; }
.skill-plant__head div > span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.skill-plant__seed {
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  border-radius: 7px 12px 7px 12px;
  background: var(--skill-color);
  box-shadow: 0 0 0 2px var(--skill-color);
  transform: rotate(-12deg);
}
.skill-status {
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 800;
}
.skill-status--strength { background: #d9f3e9; color: #246d59; }
.skill-status--steady { background: #e9e0f6; color: #62439a; }
.skill-status--practice { background: #fff2bd; color: #725600; }
.skill-meter {
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #eee9f5;
}
.skill-meter__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--skill-color);
  transform: scaleX(var(--skill-scale));
  transform-origin: left center;
  animation: skillGrow .75s cubic-bezier(.22,1,.36,1) both;
}
.skill-history {
  display: grid;
  gap: var(--space-3);
}
.skill-spark {
  display: grid;
  grid-template-columns: 118px minmax(360px, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: #faf8fd;
}
.skill-spark__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}
.skill-spark__label span {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 4px;
}
.skill-spark__plot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: var(--space-3);
  height: 86px;
}
.skill-spark__month {
  display: grid;
  grid-template-rows: 62px 18px;
  align-items: end;
  justify-items: center;
  height: 100%;
}
.skill-spark__month small {
  color: var(--color-muted);
  font-size: 10px;
}
.skill-spark__bar {
  position: relative;
  width: min(42px, 80%);
  height: 58px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 8px 8px 3px 3px;
  background: #e8e1f1;
  cursor: pointer;
}
.skill-spark__bar > span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--skill-color);
  transform: scaleY(var(--bar-scale));
  transform-origin: center bottom;
  animation: skillRise .68s cubic-bezier(.22,1,.36,1) both;
}
.skill-spark__bar::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 3;
  width: max-content;
  max-width: 120px;
  padding: 5px 7px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--development-ink);
  box-shadow: var(--shadow-card);
  font: 700 11px/1.3 "Noto Sans Thai", sans-serif;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .16s cubic-bezier(.22,1,.36,1), transform .16s cubic-bezier(.22,1,.36,1);
}
.skill-spark__bar:hover::after,
.skill-spark__bar:focus::after,
.skill-spark__bar:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.skill-spark__bar:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.skill-spark__empty {
  align-self: center;
  color: var(--color-muted);
  font-weight: 800;
}
.goal-path {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border: 3px solid var(--goal-color);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.goal-path__intro h2 { margin-block: 2px var(--space-2); }
.goal-path__intro p {
  margin: 0;
  color: var(--color-muted);
}
.goal-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.goal-steps::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 22px;
  border-top: 3px dashed var(--goal-color);
  opacity: .45;
}
.goal-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.goal-step > span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--goal-color);
  border-radius: 50%;
  background: #fff;
  color: var(--development-ink);
  font-weight: 900;
}
.goal-step.is-done > span,
.goal-step.is-target > span {
  background: var(--goal-color);
  color: #fff;
}
.goal-step strong { font-size: var(--text-sm); }
.goal-step small { color: var(--color-muted); }
.question-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.question-legend span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.question-legend .is-correct { background: #56aa8c; }
.question-legend .is-practice {
  margin-left: 6px;
  background: #f2c94c;
}
.question-map {
  display: grid;
  gap: var(--space-4);
}
.question-cluster h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.question-cluster h3 span {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--cluster-color);
}
.question-cluster__dots {
  display: grid;
  grid-template-columns: repeat(10, minmax(34px, 1fr));
  gap: 8px;
}
.question-dot {
  aspect-ratio: 1;
  min-width: 34px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  color: var(--development-ink);
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s cubic-bezier(.22,1,.36,1);
}
.question-dot.is-correct { background: #cceee3; }
.question-dot.is-practice { background: #fff0a8; }
.question-dot:hover { transform: translateY(-2px); }
.question-dot.is-selected {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px #e9e0f6;
}
.question-dot:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.question-detail {
  min-height: 48px;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #faf8fd;
  color: var(--development-ink);
  font-weight: 700;
}
.development-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.prototype-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-align: center;
}
.development-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}
.development-empty > span {
  color: #e7b900;
  font-size: 54px;
}
.development-empty p {
  max-width: 48ch;
  color: var(--color-muted);
}

@keyframes skillGrow {
  from { transform: scaleX(0); opacity: .45; }
  to { transform: scaleX(var(--skill-scale)); opacity: 1; }
}
@keyframes skillRise {
  from { transform: scaleY(0); opacity: .45; }
  to { transform: scaleY(var(--bar-scale)); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .development-summary__spark,
  .skill-meter__fill,
  .skill-spark__bar > span { animation: none; }
  .question-dot { transition: none; }
  .question-dot:hover { transform: none; }
}

@media (max-width: 760px) {
  .development-nav .btn:first-child { display: none; }
  .development-hero { padding-right: 62px; }
  .development-summary { grid-template-columns: 1fr; }
  .development-summary__score { text-align: center; }
  .development-summary__message { padding: var(--space-4); }
  .development-summary__spark {
    right: 16px;
    top: 12px;
    font-size: 22px;
  }
  .skill-history {
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }
  .skill-spark { width: 560px; }
  .goal-path { grid-template-columns: 1fr; }
  .question-cluster__dots { grid-template-columns: repeat(6, minmax(34px, 1fr)); }
  .development-actions { flex-direction: column-reverse; }
  .development-actions .btn { width: 100%; }
}

@media (max-width: 400px) {
  .skill-plant__head { grid-template-columns: auto minmax(0, 1fr); }
  .skill-status {
    grid-column: 2;
    justify-self: start;
  }
  .question-cluster__dots { grid-template-columns: repeat(5, minmax(34px, 1fr)); }
  .development-heading { align-items: center; }
  .question-legend { justify-content: flex-start; }
}