*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f0f6ff;
  --bg2: #ffffff;
  --bg3: #e8f1ff;
  --accent: #1976D2;
  --accent2: #2196F3;
  --green: #16a34a;
  --yellow: #ca8a04;
  --red: #dc2626;
  --text: #0d1b2e;
  --text2: #4a6585;
  --border: rgba(33,150,243,0.18);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(33,150,243,0.10);
  --nav-h: 56px;
  --grad-a: #1565C0;   /* gradient การ์ดโน้ต/hero — เปลี่ยนตามธีม */
  --grad-b: #2196F3;
  /* Fluid spacing — scales between small and large phones */
  --gap: clamp(6px, 1.8vh, 16px);
  --pad: clamp(10px, 2vh, 20px);
  --pad-sm: clamp(6px, 1.2vh, 12px);
}

/* ── ธีมส่วนตัว (เลือกจาก hub, ผูกกับบัญชี) ─────────── */
:root[data-theme="boy"] {
  --bg: #edf1fa;
  --bg3: #e3e9f8;
  --accent: #1e40af;
  --accent2: #ea580c;
  --border: rgba(30,64,175,0.20);
  --shadow: 0 2px 12px rgba(30,64,175,0.12);
  --grad-a: #172d6e;
  --grad-b: #2563eb;
}
:root[data-theme="girl"] {
  --bg: #fdf2f8;
  --bg3: #fce7f3;
  --accent: #be185d;
  --accent2: #db2777;
  --border: rgba(219,39,119,0.22);
  --shadow: 0 2px 12px rgba(219,39,119,0.10);
  --grad-a: #db2777;
  --grad-b: #f472b6;
}

html, body {
  height: 100%;
  /* dvh falls back to vh on older browsers */
  height: 100dvh;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Sarabun', 'Inter', sans-serif;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

#app {
  width: 100%;
  max-width: 520px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

/* ── Pages ─────────────────────────────────────── */
.page {
  display: none;
  flex-direction: column;
  flex: 1;
  gap: var(--gap);
  overflow: hidden;
  min-height: 0;
}
.page.active { display: flex; }

/* ── Header ────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: clamp(8px, 1.5vh, 20px) 0 clamp(4px, 0.8vh, 10px);
}
.header-center { text-align: left; min-width: 0; }
.header-side { display: flex; align-items: center; gap: 8px; }
.logo {
  font-size: clamp(1.3rem, 3.5vh, 2rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.5px;
}
.tagline {
  color: var(--text2);
  font-size: clamp(0.85rem, 1.6vh, 1rem);
  line-height: 1.35;
  margin-top: 2px;
}
.brand-logo {
  display: block;
  flex-shrink: 0;
  width: clamp(48px, 8vh, 68px);
  height: clamp(48px, 8vh, 68px);
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
.brand-logo:hover { transform: scale(1.07); opacity: 0.85; }
.brand-img { width: 100%; height: 100%; object-fit: contain; }

/* ── Permission banner ─────────────────────────── */
.perm-banner {
  flex-shrink: 0;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  color: #991b1b;
  font-size: clamp(0.8rem, 1.4vh, 0.88rem);
  padding: 6px 12px;
  text-align: center;
  line-height: 1.35;
}

/* ── Card ──────────────────────────────────────── */
section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
  flex-shrink: 1;
  min-height: 0;
}

/* ── Pitch Section ─────────────────────────────── */
.pitch-section {
  text-align: center;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  border-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;   /* สูงตามเนื้อหา — ตัวโน้ตไม่ล้นการ์ด */
}
.current-note {
  font-size: clamp(2.2rem, 6vh, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: all 0.1s;
}
.note-octave {
  font-size: clamp(0.9rem, 2.2vh, 1.4rem);
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  min-height: 0;
}
.freq-display {
  font-size: clamp(0.82rem, 1.6vh, 0.9rem);
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* ── จอวัด PianoRoll (แบบเกมเสียงนิ่ง) ─────────── */
.roll-section {
  flex: 1 1 0;      /* ตัวยืดหยุ่นเดียวของหน้า: ดูดซับพื้นที่เหลือ/ขาดทั้งหมด */
  min-height: 84px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--pad-sm);
}
.fp-roll-wrap {
  flex: 1;
  min-height: 48px;   /* จอ pitch ต้องไม่เล็กจนอ่านไม่ได้ ไม่ว่า section จะถูกบีบแค่ไหน */
}
#fpRoll {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-sm);
}
/* แถวเดียวใต้จอ: เวลาในโซน | แถบความนิ่ง | cents */
.fp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.fp-held {
  font-size: clamp(0.8rem, 1.5vh, 0.9rem);
  color: var(--text2);
  white-space: nowrap;
}
.fp-held span { font-weight: 700; color: var(--accent); font-size: 1.1em; }
.roll-section .nh-wobble {
  max-width: none;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.roll-section .nh-wobble-track { flex: 1; margin-top: 0; }
.cent-display {
  text-align: right;
  font-size: clamp(0.85rem, 1.8vh, 1.1rem);
  font-weight: 600;
  color: var(--green);
  transition: color 0.2s;
  white-space: nowrap;
}

/* ── Target Notes ──────────────────────────────── */
.target-section {
  flex: 0 0 auto;
}
.target-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(4px, 0.8vh, 8px);
}
.target-label {
  font-size: clamp(0.78rem, 1.4vh, 0.85rem);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.note-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 0.8vh, 8px);
  margin-bottom: 10px;
}
.note-btn {
  flex: 1 1 calc(100%/6 - 6px);
  min-width: 36px;
  padding: clamp(6px, 1.2vh, 10px) 2px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-family: inherit;
  font-size: clamp(0.82rem, 1.5vh, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.note-btn:hover, .note-btn:active { border-color: var(--accent2); color: var(--accent); background: #dbeafe; }
.note-btn.active { background: var(--accent2); border-color: var(--accent); color: #fff; }

.octave-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.82rem, 1.5vh, 0.9rem);
  color: var(--text2);
}
.octave-select-wrap select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 10px;
  font-family: inherit;
  font-size: clamp(0.82rem, 1.5vh, 0.9rem);
  cursor: pointer;
}

/* ── Controls ──────────────────────────────────── */
.controls-section {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
button {
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  padding: clamp(10px, 1.8vh, 14px) clamp(12px, 2vw, 20px);
  font-size: clamp(0.95rem, 1.8vh, 1.05rem);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.btn-start {
  flex: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(33,150,243,0.30);
}
.btn-start:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-start:disabled { opacity: 0.5; transform: none; cursor: default; }
.btn-stop  { flex: 1; background: var(--red); color: #fff; }
.btn-play  { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--accent); }
.btn-play:hover { background: #dbeafe; border-color: var(--accent2); }
.hidden { display: none !important; }

/* ── Score ─────────────────────────────────────── */
.score-section {
  text-align: center;
  flex: 0 0 auto;
  padding: var(--pad-sm);
}
.score-title {
  font-size: clamp(0.78rem, 1.4vh, 0.85rem);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 2px;
}
.score-value {
  font-size: clamp(1.2rem, 6vw, 2.2rem); /* ผูก vw: "26.7 วิ · 26 จังหวะ" ต้องพอดีบรรทัดเดียวเสมอ */
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.score-sub {
  font-size: clamp(0.8rem, 1.6vh, 0.9rem);
  color: var(--text2);
  margin-top: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ── Footer ────────────────────────────────────── */
.footer {
  text-align: center;
  color: var(--text2);
  font-size: clamp(0.75rem, 1.3vh, 0.85rem);
  padding: 4px 0 2px;
  flex-shrink: 0;
}

/* ── เกี่ยวกับเรา (ช่องทางติดต่อโรงเรียน) ─────────── */
.about-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.about-card {
  background: var(--bg2);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  padding: clamp(18px, 3vh, 28px);
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.about-card h3 { font-size: 1.15rem; color: var(--text); }
.about-card .about-tagline { font-size: 0.85rem; color: var(--text2); margin: 4px 0 14px; }
.about-links { display: flex; flex-direction: column; gap: 10px; }
.about-links a {
  display: block;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.about-links a:hover { border-color: var(--accent2); background: #dbeafe; }
.about-empty { font-size: 0.9rem; color: var(--text2); }
.about-close {
  margin-top: 14px;
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
}

/* ── Bottom Navigation ─────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(33,150,243,0.10);
  z-index: 100;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text2);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.nav-btn.active { color: var(--accent2); }
.nav-btn.active .nav-icon { transform: scale(1.1); }
.nav-icon { font-size: 1.3rem; line-height: 1; transition: transform 0.15s; }
.nav-label { line-height: 1; }

/* ── Section title (compare) ───────────────────── */
.section-title {
  font-size: clamp(0.78rem, 1.4vh, 0.85rem);
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.status-msg { font-size: clamp(0.8rem, 1.4vh, 0.85rem); color: var(--text2); text-align: center; margin-top: 4px; }
.status-msg.success { color: var(--green); font-weight: 600; }
.status-msg.error   { color: var(--red); }

.note-text { font-size: clamp(0.8rem, 1.4vh, 0.85rem); color: var(--text2); line-height: 1.5; }

/* ── Report ────────────────────────────────────── */
.report-section {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.report-summary {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.report-score-box { text-align: center; min-width: 72px; }
.report-score-label { font-size: clamp(0.75rem, 1.4vh, 0.85rem); color: var(--text2); text-transform: uppercase; font-weight: 600; }
.report-score-val { font-size: clamp(1.8rem, 6vh, 2.5rem); font-weight: 700; color: var(--accent); }
.report-stats { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.stat-item { display: flex; justify-content: space-between; font-size: clamp(0.85rem, 1.5vh, 0.85rem); }
.stat-label { color: var(--text2); }
.stat-val { font-weight: 700; }
.stat-val.green  { color: var(--green); }
.stat-val.yellow { color: var(--yellow); }
.stat-val.red    { color: var(--red); }

.mismatch-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mismatch-item {
  background: var(--bg3);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.mismatch-item.low  { border-left-color: var(--yellow); background: #fefce8; }
.mismatch-item.med  { border-left-color: #f97316; background: #fff7ed; }
.mismatch-item.high { border-left-color: var(--red); background: #fef2f2; }
.mismatch-time { font-size: clamp(0.78rem, 1.4vh, 0.8rem); font-weight: 700; color: var(--text2); margin-bottom: 3px; }
.mismatch-detail { display: flex; flex-wrap: wrap; gap: 6px; font-size: clamp(0.82rem, 1.5vh, 0.85rem); }
.mismatch-ref   { color: var(--accent); }
.mismatch-user  { color: var(--text); }
.mismatch-cents { font-weight: 700; }
.mismatch-cents.low  { color: var(--yellow); }
.mismatch-cents.med  { color: #f97316; }
.mismatch-cents.high { color: var(--red); }
.no-mismatch { text-align: center; color: var(--green); font-weight: 600; padding: 12px 0; font-size: clamp(0.85rem, 1.7vh, 1rem); }

/* ── Small screen (iPhone SE, older Android) ───── */
@media (max-height: 700px) {
  :root {
    --gap: 5px;
    --pad: 8px;
    --pad-sm: 6px;
  }
  .header { padding: 6px 0 2px; }
  .tagline { display: none; }
  .brand-logo { width: 42px; height: 42px; }

  /* จอเตี้ย: ตัดของตกแต่ง/ซ้ำซ้อน — การย่อฟอนต์เป็นหน้าที่ของ fluid root แล้ว
     (ห้ามใส่ font-size ซ้ำในนี้ เดี๋ยวย่อสองชั้น) */
  .footer { display: none; }             /* ลิงก์เกี่ยวกับเราอยู่ที่ nav แล้ว */
  .note-octave { display: none; }        /* ซ้ำกับชื่อโน้ตใหญ่ */
  .perm-banner { padding: 5px 10px; }

  /* Compact paddings (px ไม่ย่อตาม root เอง) */
  .note-btn { padding: 7px 2px; }
  .controls-section button { padding: 8px 10px; }
}

/* ── แถบเสียงอ่านคำอธิบายแบบฝึก ─────────────────── */
.narrate-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(20px, 5vh, 48px) 0;
  font-size: clamp(0.9rem, 1.8vh, 1rem);
  font-weight: 600;
  color: var(--text2);
}

/* ── จอเตี้ยพิเศษ (iPhone SE + แถบ Safari) ───────── */
@media (max-height: 620px) {
  .pitch-section { padding: var(--pad-sm); }
  .note-btn { padding: 5px 2px; }
  .fp-roll-wrap { min-height: 40px; }
  .me-actions .btn-secondary,
  .guide-actions .btn-secondary { padding: 8px 10px; font-size: 0.88rem; }
}

/* ── Animations ────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.listening .current-note { animation: pulse 1.5s ease-in-out infinite; }

/* ── Note buttons no-scroll ────────────────────── */
.note-buttons, .controls-section {
  user-select: none;
  -webkit-user-select: none;
}

/* ══════════ Login gate ══════════ */
.auth-locked #app, .auth-locked .bottom-nav { display: none !important; }
body:not(.auth-locked) .login-view { display: none !important; }

.login-view {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
.login-card {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vh, 36px);
  text-align: center;
}
.login-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; }
.login-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 8px;
}
.login-sub { color: var(--text2); font-size: 0.95rem; margin: 4px 0 20px; }
.login-label {
  display: block;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text2);
  margin: 12px 0 4px;
}
.login-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.login-input:focus { border-color: var(--accent2); }
.login-error { color: var(--red); font-size: 0.85rem; min-height: 1.4em; margin-top: 10px; }
.login-btn { width: 100%; margin-top: 6px; }
.login-hint { color: var(--text2); font-size: 0.88rem; margin-top: 18px; }

/* ══════════ Header user (teacher.html) ══════════ */
.header-user-name {
  font-size: 0.88rem;
  color: var(--text2);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logout-btn {
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
}

/* ══════════ Hub ══════════ */
#pageHub, #pageGame { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* ฝึกอิสระ: ทุกอย่างพอดีจอเดียว — roll-section เป็นตัวเดียวที่ยืด/หด */
#pagePitch { gap: clamp(5px, 1.2vh, 12px); }

.hub-profile {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
  position: relative;
  overflow: hidden;
}
/* มาสคอตเป็นพื้นหลังจาง ๆ ของทั้งการ์ด — เนื้อหาลอยอยู่เหนือ อ่านง่าย */
.hub-profile.has-mascot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mascot) right center / cover no-repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.hub-profile > * { position: relative; z-index: 1; }
.hub-greeting { font-size: 1.05rem; }
.hub-theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.hub-theme-label { font-size: clamp(0.8rem, 1.5vh, 0.9rem); color: var(--text2); font-weight: 600; white-space: nowrap; }
.theme-select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(0.82rem, 1.5vh, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hub-level-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.hub-level { color: var(--accent); font-weight: 700; font-size: 1rem; }
.hub-streak { font-weight: 700; font-size: 1rem; color: #ea580c; }
.xp-bar {
  height: 12px;
  background: var(--bg3);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 6px;
  transition: width 0.6s ease;
}
.xp-text { font-size: 0.85rem; color: var(--text2); margin-top: 4px; text-align: right; }
.hub-range-btn {
  margin-top: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}

.game-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 8px;
}
.game-card {
  font-family: inherit;
  text-align: left;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.game-card:active { transform: scale(0.97); }
.game-card:not(.coming-soon):hover { border-color: var(--accent2); }
.game-card-icon { font-size: 1.7rem; }
.game-card-title { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.game-card-desc { font-size: 0.85rem; color: var(--text2); }
.game-card-meta { font-size: 0.8rem; color: var(--accent); margin-top: 4px; font-weight: 600; }
.game-card.coming-soon { opacity: 0.55; cursor: default; }

.badge-shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.badge-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  font-size: 1.3rem;
  filter: grayscale(1);
  opacity: 0.45;
}
.badge-chip.earned { filter: none; opacity: 1; border-color: rgba(202,138,4,0.5); }
.badge-chip small { font-size: 0.72rem; color: var(--text2); text-align: center; line-height: 1.15; }

/* ══════════ Game screens ══════════ */
.game-header { display: flex; align-items: center; gap: 10px; }
.btn-back {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--accent);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
}
.game-title { font-weight: 700; font-size: 1rem; }
.game-desc { color: var(--text2); font-size: 0.92rem; }
.game-error { color: var(--red); padding: 20px; text-align: center; }

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: 8px;
}
.level-btn {
  font-family: inherit;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.level-btn:not(.locked):hover { border-color: var(--accent2); }
.level-num { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.level-stars { font-size: 0.78rem; color: #ca8a04; letter-spacing: 1px; }
.level-btn.locked { opacity: 0.5; cursor: default; }

.game-stage { display: flex; flex-direction: column; gap: var(--gap); flex: 1; min-height: 0; }

/* note-match */
.nm-top { text-align: center; }
.nm-progress { font-size: 0.9rem; color: var(--text2); }
.nm-note {
  font-size: clamp(2.4rem, 8vh, 4rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.nm-instruction { font-size: 1rem; color: var(--text2); min-height: 1.4em; }
.nm-roll-wrap { flex: 1; min-height: 160px; position: relative; /* จุดยึด .game-countdown */ }
.nm-roll { width: 100%; height: 100%; border-radius: var(--radius-sm); }
.nm-hold {
  height: 24px;
  background: var(--bg3);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.nm-hold-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 12px;
  transition: width 0.1s linear;
}
.nm-status { text-align: center; font-size: 1.5rem; font-weight: 700; min-height: 1.6em; }
.nm-status span {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 24px;
  animation: fbPop 0.35s ease;
}
@keyframes fbPop {
  from { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.12); }
  to { transform: scale(1); opacity: 1; }
}
.fb-good { color: var(--green); background: rgba(22,163,74,0.12); }
.fb-mid { color: var(--yellow); background: rgba(202,138,4,0.12); }
.fb-bad { color: var(--red); background: rgba(220,38,38,0.10); }

/* score screen */
.score-screen { text-align: center; padding: 16px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.score-stars { font-size: 3rem; letter-spacing: 8px; }
.score-stars .star { color: #d4dce8; display: inline-block; }
.score-stars .star.earned {
  color: #f59e0b;
  animation: starPop 0.5s ease backwards;
}
@keyframes starPop {
  from { transform: scale(0) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.35) rotate(8deg); }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.score-big { font-size: 3.4rem; font-weight: 700; color: var(--accent); line-height: 1; }
.score-label { font-size: 1.1rem; font-weight: 600; }
.score-detail { font-size: 0.92rem; color: var(--text2); }
.score-submit { font-size: 1rem; min-height: 1.6em; }
.xp-pop { color: var(--accent); font-weight: 700; animation: xpPop 0.5s ease; display: inline-block; }
.streak-pop { color: #ea580c; font-weight: 700; }
@keyframes xpPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.score-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; margin-top: 8px; }
.btn-secondary {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
}
.btn-secondary:disabled { opacity: 0.45; cursor: default; }

/* ══════════ Overlay (calibration / badge popup) ══════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,27,46,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  z-index: 100;
}
.overlay-card {
  background: var(--bg2);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  padding: clamp(18px, 3vh, 28px);
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.overlay-card h2 { font-size: 1.15rem; margin-bottom: 6px; }
.cal-hint { color: var(--text2); font-size: 0.92rem; }
.cal-note { font-size: 3rem; font-weight: 700; color: var(--accent); margin: 10px 0; }
.cal-progress { height: 10px; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.cal-progress-bar { height: 100%; background: var(--green); width: 0%; transition: width 0.1s linear; }
.cal-status { min-height: 1.6em; font-size: 0.92rem; color: var(--text2); margin-top: 8px; }
.overlay-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.badge-popup .badge-award {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin: 8px 0;
  text-align: left;
}
.badge-emoji { font-size: 2rem; }
.badge-name { font-weight: 700; }
.badge-desc { font-size: 0.88rem; color: var(--text2); }

/* ══════════ note-hold ══════════ */
.nh-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--gap); flex: 1; }
.nh-ring-wrap { position: relative; width: clamp(150px, 28vh, 230px); }
.nh-ring { width: 100%; height: auto; }
.nh-ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.nh-ring-text span { font-size: 2rem; font-weight: 700; color: var(--accent); }
.nh-ring-text small { color: var(--text2); }
.nh-wobble { width: 100%; max-width: 280px; font-size: 0.85rem; color: var(--text2); }
.nh-wobble-track { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.nh-wobble-bar { height: 100%; width: 0%; background: var(--green); transition: width 0.15s ease; border-radius: 4px; }

/* ══════════ melody-echo ══════════ */
.me-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 4px; }
/* ป้าย "ได้ยิน: C4" สดระหว่างช่วงร้อง — feedback ทันทีสำหรับเสียงตัดสั้น */
.me-live {
  font-size: clamp(0.82rem, 1.6vh, 0.92rem);
  font-weight: 700;
  min-height: 1.3em;
  transition: color 0.1s;
}

.me-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg3); border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: var(--text2);
  transition: transform 0.15s ease, background 0.15s ease;
}
.me-dot.playing { background: var(--accent2); color: #fff; transform: scale(1.3); }
.me-dot.active {
  border-color: var(--accent); color: var(--accent);
  animation: dotPulse 0.9s ease infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1.15); box-shadow: 0 0 0 0 rgba(33,150,243,0.4); }
  50% { transform: scale(1.3); box-shadow: 0 0 0 7px rgba(33,150,243,0); }
}
.me-dot.good { background: var(--green); color: #fff; border-color: var(--green); }
.me-dot.mid { background: var(--yellow); color: #fff; border-color: var(--yellow); }
.me-dot.bad { background: var(--red); color: #fff; border-color: var(--red); }
/* แถวปุ่มไกด์ — ใช้ร่วมทุกเกม (.me-actions คือชื่อเดิมของ melody-echo) */
.me-actions, .guide-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ══════════ pitch-glide ══════════ */
.pg-hud { display: flex; justify-content: space-between; font-weight: 600; color: var(--accent); font-size: 1rem; }
.pg-canvas-wrap { flex: 1; min-height: 220px; }
.pg-canvas { width: 100%; height: 100%; border-radius: var(--radius-sm); }

/* ══════════ Teacher dashboard ══════════ */
.teacher-body { overflow: auto; height: auto; display: block; }
.teacher-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.teacher-gate { text-align: center; padding: 40px 16px; color: var(--text2); }
.teacher-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.teacher-tab {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
}
.teacher-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.teacher-view { display: none; flex-direction: column; gap: var(--gap); margin-top: 8px; }
.teacher-view.active { display: flex; }

.table-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.t-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.t-table th {
  text-align: left; padding: 10px 12px;
  color: var(--text2); font-weight: 600;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.t-table td { padding: 9px 12px; border-bottom: 1px solid rgba(33,150,243,0.08); white-space: nowrap; }
.t-table tr:last-child td { border-bottom: none; }
.student-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.inactive-row { opacity: 0.45; }
.acc-green { color: var(--green); font-weight: 700; }
.acc-yellow { color: var(--yellow); font-weight: 700; }
.acc-red { color: var(--red); font-weight: 700; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot.green { background: var(--green); } .dot.yellow { background: var(--yellow); } .dot.red { background: var(--red); }

.manage-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.manage-card h3 { font-size: 0.95rem; margin-bottom: 10px; }
.manage-form { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }

/* ── การ์ด credentials (หลังสร้างบัญชี/รีเซ็ตรหัส) ── */
.cred-card {
  margin-top: 10px;
  background: #f0fdf4;
  border: 1px solid rgba(22,163,74,0.35);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cred-title { color: #15803d; font-weight: 700; font-size: 0.9rem; }
.cred-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text2);
}
.cred-row span { min-width: 64px; }
.cred-row code {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  user-select: all;
}
.cred-all { align-self: flex-start; }
.pw-row { display: flex; gap: 8px; }
.pw-row .login-input { flex: 1; }
.btn-sm { padding: 6px 11px; font-size: 0.83rem; border-radius: var(--radius-sm); }
.manage-actions { display: flex; gap: 6px; }
.prog-grid { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; }
.prog-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); }

/* หน้าที่เลื่อนได้ (hub/game) — section ห้ามถูกบีบตาม no-scroll layout เดิม */
#pageHub > section, #pageHub > div, #pageGame > div, #pageGame section { flex-shrink: 0; }

/* guest toggle บนหน้าครู */
.guest-toggle { font-size: 0.92rem; color: var(--text2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.login-hint a { color: var(--accent); }

/* ══════════ ด่านพิเศษจากหนังสือ ══════════ */
.book-section-title { margin-top: 14px; }
.book-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.book-btn {
  font-family: inherit;
  text-align: left;
  background: linear-gradient(135deg, #fffbeb, var(--bg2));
  border: 1.5px solid rgba(202,138,4,0.35);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}
.book-btn:hover { border-color: #ca8a04; }
.book-btn-name { font-weight: 700; color: #92400e; }
.book-btn-desc { font-size: 0.85rem; color: var(--text2); }
.book-tip { background: #fffbeb; border: 1px dashed rgba(202,138,4,0.4); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.9rem; }
.routine-grid { grid-template-columns: 1fr; }
.routine-btn { flex-direction: row; gap: 10px; justify-content: flex-start; padding: 12px 14px; }
.routine-name { font-weight: 700; flex: 1; text-align: left; }

/* Hee-ah combo counter */
.rc-combo-wrap { text-align: center; margin: 12px 0; }
.rc-combo {
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.rc-combo.pop { animation: comboPop 0.3s ease; }
@keyframes comboPop { from { transform: scale(1.5); color: #16a34a; } to { transform: scale(1); } }
.rc-combo-label { color: var(--text2); font-size: 0.92rem; }

/* Crescendo guide */
.cr-guide { position: relative; width: 100%; max-width: 320px; }
.cr-guide-svg { width: 100%; height: auto; }
.cr-cursor {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 2px;
  background: var(--red);
  transition: left 0.1s linear;
}

/* Warmup routine */
.wr-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.wr-progress { font-size: 0.86rem; color: var(--text2); }
.wr-name { font-size: 1.3rem; color: var(--accent); }
.wr-instruction { font-size: 1rem; text-align: left; line-height: 1.55; }
.wr-feel { font-size: 0.9rem; color: var(--text2); text-align: left; background: var(--bg3); border-radius: var(--radius-sm); padding: 8px 10px; }
.wr-timer { font-size: 2.6rem; font-weight: 700; color: var(--accent); }
.wr-actions { display: flex; flex-direction: column; gap: 8px; }

/* calibration รอบ 3: VU meter + presets + debug */
.cal-vu { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.cal-vu-bar { height: 100%; width: 0%; background: #94a3b8; border-radius: 4px; transition: width 0.08s linear; }
.cal-presets { margin-top: 14px; font-size: 0.88rem; color: var(--text2); }
.cal-preset-row { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.cal-preset { flex: 1; padding: 10px 6px; font-size: 0.92rem; }
.cal-debug {
  font-family: monospace;
  font-size: 0.68rem;
  color: var(--text2);
  background: var(--bg3);
  border-radius: 4px;
  padding: 4px 6px;
  margin-top: 6px;
  text-align: left;
}

/* รอบ 5: hint ไมค์บน hub + toast โหมดเงียบ iOS */
.hub-range-hint { font-size: 0.82rem; color: var(--text2); margin-top: 4px; }
.snd-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 18px);
  transform: translate(-50%, 20px);
  background: rgba(13,27,46,0.92);
  color: #fff;
  font-size: 0.9rem;
  padding: 10px 16px;
  border-radius: 22px;
  max-width: 90%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  pointer-events: none;
}
.snd-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ══════════ รอบ 6: แถวบัญชีในการ์ดสวัสดี + บัตรกลับเข้าเล่น ══════════ */
.hub-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.hub-account-btns { display: flex; gap: 6px; flex-shrink: 0; }
.hub-account-btns .logout-btn { text-decoration: none; }
.hub-guest-row {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cred-box {
  background: var(--bg3);
  border: 1.5px dashed rgba(202,138,4,0.5);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 10px 0;
}
.cred-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}
.cred-row span { color: var(--text2); font-size: 0.92rem; }
.cred-row strong { font-size: 1.4rem; letter-spacing: 1px; color: var(--accent); font-family: monospace; }

/* หน้า admin: การ์ดสรุปจำนวนผู้เล่น/รอบ/คะแนน */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  text-align: center;
}
.stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.stat-label { font-size: 0.9rem; font-weight: 600; margin-top: 2px; }
.stat-sub { font-size: 0.8rem; color: var(--text2); margin-top: 2px; }

/* แก้บั๊ก: gameRoot ไม่เป็น flex → .game-stage flex:1 ไม่ทำงาน → piano roll ถูกบีบเตี้ย
   (เห็นจากภาพ iPhone: C3-C4 ติดกันบนแถบเล็ก ทั้งที่จอส่วนล่างว่าง) */
#gameRoot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--gap);
}
.nm-roll-wrap { min-height: 240px; }
.pg-canvas-wrap { min-height: 260px; }

/* ปุ่มขอฟังเสียงไกด์ระหว่างบิน (pitch-glide) */
.pg-guide-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 16px;
  border: none;
  border-radius: 22px;
  background: rgba(25,118,210,0.92);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  cursor: pointer;
}
.pg-guide-btn:disabled { opacity: 0.5; }
.pg-canvas-wrap { position: relative; }

/* การ์ด "กลับเข้าเล่น" + คำอธิบายฟอร์ม */
.resume-card {
  background: linear-gradient(135deg, #f0fdf4, var(--bg2));
  border: 1.5px solid rgba(22,163,74,0.35);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
}
.resume-card .login-hint { margin-top: 8px; }
.return-info {
  font-size: 0.9rem;
  color: var(--text2);
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* เสียงพาบิน: ป้ายชื่อโน้ตเป้าหมาย (แสดงตลอดเวลา) */
.pg-target-note {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

/* ══════════ melody-echo รอบ 9: การ์ดวิธีเล่น + แถบบอกเฟส ══════════ */
.me-intro h2 { color: var(--accent); font-size: 1.2rem; }
.me-steps {
  text-align: left;
  margin: 12px 0 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.05rem;
  line-height: 1.5;
}
.me-game { display: flex; flex-direction: column; gap: var(--gap); flex: 1; min-height: 0; }

.phase-banner {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 10px 12px;
  border-radius: var(--radius);
  transition: background 0.3s ease, color 0.3s ease;
}
.phase-banner.listen { background: #dbeafe; color: var(--accent); }
.phase-banner.sing { background: var(--green); color: #fff; }
.phase-banner.pulse { animation: phasePulse 0.6s ease; }
@keyframes phasePulse {
  0% { transform: scale(0.96); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* เกมเสียงนิ่ง: ตัวนับวินาที */
.nh-seconds {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}
.nh-seconds span { font-size: 2.2rem; }

/* countdown เริ่มเกม — ตัวเลขใหญ่กลาง container (ใช้ร่วมทุกเกมผ่าน js/countdown.js) */
.game-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(4rem, 18vh, 7rem);
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 4px 20px rgba(255,255,255,0.95), 0 2px 8px rgba(255,255,255,0.9);
  pointer-events: none;
  z-index: 5;
  line-height: 1;
  text-align: center;
}
.game-countdown.tick { animation: cdPop 0.65s ease; }
@keyframes cdPop {
  from { transform: scale(1.6); opacity: 0; }
  30% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

/* Dynamic UI: root font ไหลตามความสูงจอ — จอสูง ≥806px ได้ 17px เท่ารอบ 14,
   จอเตี้ยกว่าค่อย ๆ ย่อถึง 13.5px (~580px) → ทุกอย่างที่เป็น rem ปรับต่อเนื่องทุกรุ่น
   text-size-adjust กัน iOS Safari ขยายตัวอักษรเอง (ตัวการ layout เพี้ยนบางรุ่น) */
html {
  font-size: clamp(13.5px, 1.55vh + 4.5px, 17px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ข้อความแจ้งใหญ่กลางจอ ค้าง 2 วิ (เช่น เกมเฉพาะนักเรียนโรงเรียน) */
.flash-notice {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,27,46,0.55);
  z-index: 300;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  padding: 20px;
}
.flash-notice.show { opacity: 1; }
.flash-notice span {
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ══════════ ร้องเพลงเต็ม: โหมด YouTube + เนื้อเพลงคาราโอเกะ ══════════ */
.sc-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  margin-top: 10px;
}
.sc-video-wrap iframe { width: 100%; height: 100%; display: block; }
.sc-lyrics-in { margin-top: 10px; resize: vertical; font-size: 0.92rem; }
.sc-video-slot { flex-shrink: 0; }
.sc-lyrics { text-align: center; min-height: 3.4em; }
.sc-lyric-line {
  font-size: 1.05rem;
  color: var(--text2);
  line-height: 1.5;
  transition: all 0.2s ease;
}
.sc-lyric-line.current {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}
.sc-lyrics-plain {
  max-height: 110px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.sc-setup, .sc-play { display: flex; flex-direction: column; gap: var(--gap); }