/* Self-hosted rather than loaded from Google Fonts — this is the font the handwriting-trace
   canvas relies on for correct Devanagari letterforms (see client/strokeAnimator.ts), so it
   must not depend on a third-party CDN being reachable from the browser. */
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/notosansdevanagari-700.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* UI fonts, also self-hosted (were Google Fonts): no extra DNS/TLS to third-party origins,
   and the files are versioned so the server can cache them for a year. Only the Devanagari
   and Latin subsets are kept; unicode-range means a page downloads only what it renders.
   Baloo 2 is a variable font — one file per subset covers weights 500–800. */
/* Baloo 2 — devanagari */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/baloo2-v23-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Baloo 2 — latin */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/baloo2-v23-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-v24-400-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Poppins — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-v24-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-v24-500-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Poppins — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-v24-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins — devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-v24-600-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Poppins — latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-v24-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --teal-deep: #0b4f4a;
  --teal-darker: #083b37;
  --marigold: #f5a623;
  --marigold-light: #ffd584;
  --vermillion: #e2492b;
  --cream: #fff8ec;
  --ink: #1b2a4a;
  --leaf: #4c9a4c;
  --sky: #3fa9d6;
  --purple: #8b5fbf;
  --pink: #e8608f;
  --radius-lg: 26px;
  --radius-md: 16px;
  --shadow-card: 0 12px 28px rgba(11, 79, 74, 0.22);
  --font-display: "Baloo 2", sans-serif;
  --font-devanagari: "Baloo 2", sans-serif;
  --font-support: "Poppins", sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(160deg, #6fcbf0 0%, #8fd9e8 35%, #b9e8d8 70%, #fce9b8 100%);
  background-attachment: fixed;
  min-height: 100vh;
  font-family: var(--font-devanagari);
  color: var(--ink);
  padding-bottom: 40px;
  overflow-x: hidden;
}

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 16px 40px;
  position: relative;
  z-index: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

/* ---------- Sky decorations (fixed, behind everything) ---------- */

.sky-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.sun {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c4, var(--marigold) 70%);
  box-shadow: 0 0 0 14px rgba(255, 214, 102, 0.25), 0 0 0 28px rgba(255, 214, 102, 0.12);
  animation: sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  opacity: 0.85;
}
.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud1 { width: 120px; height: 42px; top: 8%; left: -140px; animation: driftRight 32s linear infinite; }
.cloud1::before { width: 60px; height: 60px; top: -28px; left: 12px; }
.cloud1::after { width: 76px; height: 76px; top: -38px; right: 10px; }
.cloud2 { width: 90px; height: 32px; top: 22%; left: -120px; opacity: 0.7; animation: driftRight 26s linear infinite; animation-delay: -9s; }
.cloud2::before { width: 44px; height: 44px; top: -20px; left: 10px; }
.cloud2::after { width: 56px; height: 56px; top: -27px; right: 8px; }
.cloud3 { width: 150px; height: 52px; top: 68%; left: -180px; opacity: 0.75; animation: driftRight 40s linear infinite; animation-delay: -18s; }
.cloud3::before { width: 74px; height: 74px; top: -34px; left: 16px; }
.cloud3::after { width: 92px; height: 92px; top: -46px; right: 14px; }
.cloud4 { width: 80px; height: 28px; top: 85%; left: -100px; opacity: 0.6; animation: driftRight 22s linear infinite; animation-delay: -4s; }
.cloud4::before { width: 38px; height: 38px; top: -18px; left: 8px; }
.cloud4::after { width: 48px; height: 48px; top: -24px; right: 6px; }
@keyframes driftRight {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 260px)); }
}
.kite { position: absolute; top: 12%; right: 8%; font-size: 26px; animation: bob 4s ease-in-out infinite; opacity: 0.85; }
.balloon { position: absolute; top: 55%; left: 4%; font-size: 24px; animation: bob 3.6s ease-in-out infinite; opacity: 0.8; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

/* ---------- Sticky topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  /* Nearly opaque instead of backdrop-filter: blurring over the drifting clouds re-ran the
     blur every animation frame, which made scrolling janky on low-end phones/tablets. */
  background: rgba(255, 248, 236, 0.96);
  box-shadow: 0 2px 10px rgba(11, 79, 74, 0.12);
  max-width: 680px;
  margin: 0 auto;
  border-radius: 0 0 18px 18px;
}
.topbar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.menu-toggle {
  background: linear-gradient(155deg, var(--marigold), #d98c12);
  color: var(--ink);
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #b57812, 0 6px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease;
}
.menu-toggle:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #b57812, 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ---------- Right-side drawer nav ---------- */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 42, 50, 0.4);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 82%;
  max-width: 310px;
  background: linear-gradient(180deg, #8fd9e8 0%, #beeae0 45%, #f4eac7 100%);
  z-index: 40;
  padding: 20px 14px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: -10px 0 26px rgba(0, 0, 0, 0.25);
  border-radius: 26px 0 0 26px;
  transform: translateX(105%);
  transition: transform 0.3s ease;
}
.drawer.open {
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.drawer-head span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--teal-darker);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}
.drawer-close {
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 15px;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.drawer-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 50px;
  padding: 12px 16px 12px 12px;
  margin: 26px 8px 4px 4px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 0 rgba(11, 79, 74, 0.06), 0 10px 16px rgba(11, 79, 74, 0.18);
  transition: transform 0.15s ease;
  animation: cloudFloat 3.6s ease-in-out infinite;
}
.drawer-item::before,
.drawer-item::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.drawer-item::before { width: 30px; height: 30px; top: -13px; left: 20px; }
.drawer-item::after { width: 22px; height: 22px; top: -9px; left: 44px; }
.drawer-item:nth-child(2) { animation-delay: -0.6s; }
.drawer-item:nth-child(3) { animation-delay: -1.2s; }
.drawer-item:nth-child(4) { animation-delay: -1.8s; }
.drawer-item:nth-child(5) { animation-delay: -2.4s; }
.drawer-item:nth-child(6) { animation-delay: -3s; }
.drawer-item:nth-child(7) { animation-delay: -3.4s; }
.drawer-item:nth-child(8) { animation-delay: -1.5s; }
.drawer-item:nth-child(9) { animation-delay: -2.1s; }
.drawer-item:nth-child(10) { animation-delay: -2.7s; }
.drawer-item:nth-child(11) { animation-delay: -1.9s; }
@keyframes cloudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.drawer-item:active {
  transform: scale(0.94);
  animation-play-state: paused;
}
.drawer-item .d-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.15);
}
.drawer-item .d-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.drawer-item.d-home .d-icon { background: linear-gradient(155deg, #5b6b85, #3f4c63); }
.drawer-item.d1 .d-icon { background: linear-gradient(155deg, var(--vermillion), #c93a20); }
.drawer-item.d2 .d-icon { background: linear-gradient(155deg, var(--marigold), #d98c12); }
.drawer-item.d3 .d-icon { background: linear-gradient(155deg, var(--teal-deep), var(--teal-darker)); }
.drawer-item.d4 .d-icon { background: linear-gradient(155deg, var(--leaf), #3d8552); }
.drawer-item.d5 .d-icon { background: linear-gradient(155deg, var(--sky), #2b85ab); }
.drawer-item.d6 .d-icon { background: linear-gradient(155deg, var(--purple), #6c4696); }
.drawer-item.d7 .d-icon { background: linear-gradient(155deg, var(--pink), #c14570); }
.drawer-item.d8 .d-icon { background: linear-gradient(155deg, #8a6d3b, #6b5228); }
.drawer-item.d9 .d-icon { background: linear-gradient(155deg, #6d8b74, #47604c); }
.drawer-item.d10 .d-icon { background: linear-gradient(155deg, var(--purple), var(--pink)); }

/* ---------- Card panel + back button ---------- */

.card-panel {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 18px 16px 22px;
  box-shadow: var(--shadow-card);
  border: 3px solid rgba(255, 255, 255, 0.6);
  margin-top: 14px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  background: var(--teal-deep);
  color: var(--cream);
  border: none;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 12px;
}
.back-btn:active {
  transform: scale(0.96);
}

.panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--vermillion);
  text-align: center;
  margin: 0 0 10px;
}

/* ---------- Mascot header (home) ---------- */

.mascot {
  width: 72px;
  height: 72px;
  display: inline-block;
  vertical-align: middle;
  animation: bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(11, 79, 74, 0.25));
}
.home-header {
  padding: 12px 18px 4px;
  text-align: center;
}
.home-header h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 42px);
  margin: 6px 0 2px;
  color: var(--vermillion);
  text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.tagline {
  font-family: var(--font-support);
  font-weight: 600;
  font-size: 14px;
  color: var(--teal-darker);
  margin: 0;
}

/* ---------- Speak & Trace (home) ---------- */

.home-columns {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.home-columns > * {
  flex: 1 1 50%;
  width: 50%;
}
@media (max-width: 640px) {
  .home-columns {
    flex-direction: column;
  }
  .home-columns > * {
    width: 100%;
  }
}

.mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 14px;
}
.mic-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--vermillion), #c93a20);
  color: white;
  font-size: 36px;
  cursor: pointer;
  box-shadow: 0 8px 0 #a3341f, 0 10px 18px rgba(0, 0, 0, 0.25);
  position: relative;
  transition: transform 0.1s ease;
}
.mic-btn:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #a3341f;
}
.mic-btn.listening {
  background: linear-gradient(145deg, var(--marigold), #d98c12);
  box-shadow: 0 8px 0 #b57812, 0 10px 18px rgba(0, 0, 0, 0.25);
  animation: pulse-ring 1.1s ease-out infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 8px 0 #b57812, 0 0 0 0 rgba(245, 166, 35, 0.6); }
  70% { box-shadow: 0 8px 0 #b57812, 0 0 0 22px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 8px 0 #b57812, 0 0 0 0 rgba(245, 166, 35, 0); }
}
.mic-status {
  font-family: var(--font-support);
  font-size: 13.5px;
  color: #5b6b85;
  min-height: 18px;
  text-align: center;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.chip {
  font-family: var(--font-display);
  font-size: 13.5px;
  background: #ede3d0;
  border: 2px solid #d8c9a8;
  color: var(--ink);
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
}
.chip:active {
  transform: scale(0.95);
}
.practice-word-label {
  text-align: center;
  font-family: var(--font-support);
  font-size: 12.5px;
  color: #5b6b85;
  margin: 10px 0 4px;
}
.practice-word {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(22px, 6.5vw, 30px);
  color: var(--vermillion);
  margin: 0 0 4px;
  min-height: 34px;
}
.step-indicator {
  text-align: center;
  font-family: var(--font-support);
  font-size: 12px;
  font-weight: 600;
  color: #8a6d3b;
  min-height: 16px;
  margin-bottom: 6px;
}
.unsupported {
  background: #fce9e5;
  border: 2px solid var(--vermillion);
  color: #8a2c1a;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: var(--font-support);
  font-size: 13px;
  text-align: center;
  margin-bottom: 12px;
}

/* ---------- "Hear it" voice-quality hint (client/pronounce.ts) ---------- */

.voice-hint-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--cream);
  border: 2px solid var(--marigold);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  font-family: var(--font-support);
}
.voice-hint-banner span {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--ink);
  min-width: 180px;
}
.voice-hint-banner button {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 13px;
}
.voice-hint-install {
  background: var(--marigold);
  color: white;
}
.voice-hint-close {
  background: transparent;
  color: #8a8272;
  padding: 6px 8px !important;
}

.voice-instructions-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(27, 42, 74, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.voice-instructions-panel {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px 20px 20px;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  font-family: var(--font-support);
}
.voice-instructions-panel h3 {
  font-family: var(--font-display);
  color: var(--vermillion);
  margin: 0 0 10px;
  font-size: 18px;
}
.voice-instructions-panel p {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 10px;
}
.voice-instructions-panel ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-instructions-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #ede3d0;
  cursor: pointer;
  font-size: 14px;
}

/* ---------- Canvas tracing stage ---------- */

/* Sticks the writing canvas (+ its label and tool buttons) near the top of the viewport
   while a tile grid below it is scrolled, so writing a tapped letter/word is always visible
   without having to scroll down to the bottom of the page after every tap. */
.trace-stage {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 15;
  background: var(--cream);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 14px rgba(11, 79, 74, 0.18);
  padding: 14px 16px 16px;
  margin: 10px 0 14px;
}

.canvas-wrap {
  position: relative;
}
.trace-canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fffef9;
  border-radius: 16px;
  border: 5px solid #e8dcc0;
  touch-action: none;
  display: block;
}
.start-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--leaf);
  border: 2px solid white;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.start-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2.5px solid var(--leaf);
  animation: startPulse 0.85s ease-out infinite;
}
@keyframes startPulse {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}
.pencil-cursor {
  position: absolute;
  font-size: 28px;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-45%, -78%) rotate(-8deg);
  transition: left 0.26s ease, top 0.26s ease;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.25));
  z-index: 5;
}
.pencil-cursor.writing {
  animation: pencilWiggle 0.22s ease-in-out infinite alternate;
}
@keyframes pencilWiggle {
  from { transform: translate(-45%, -78%) rotate(-9deg); }
  to { transform: translate(-45%, -78%) rotate(3deg); }
}

/* ---------- Buttons / tools ---------- */

.btn,
.tool-btn {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 9px 14px;
  cursor: pointer;
  background: var(--teal-deep);
  color: var(--cream);
  transition: transform 0.1s ease;
}
.btn:active,
.tool-btn:active {
  transform: scale(0.96);
}
.btn:disabled,
.tool-btn:disabled {
  opacity: 0.5;
}
.tool-btn.speak,
.btn-hear {
  background: var(--leaf);
}
.tool-btn.win,
.btn-write {
  background: var(--marigold);
  color: var(--ink);
}
.tool-btn.watch {
  background: linear-gradient(145deg, #a9803f, #7a5a24);
  color: var(--cream);
}
/* Icon-only variant (word cards' hear/write buttons) — compact circle, no label text, so
   two of them comfortably fit side by side even on a narrow card. */
.tool-btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-retry {
  background: var(--pink);
}
.canvas-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.celebrate {
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--leaf);
  min-height: 20px;
}

.retry-state {
  text-align: center;
  color: #8a2c1a;
}

/* ---------- Generic content cards ---------- */

.content-card {
  background: white;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
/* Generated emoji cards render as <svg><use> from images/sprite.svg (see imageHtml in
   client/app.ts); keep them square like the <img> they replace. */
svg.sprite-img {
  aspect-ratio: 1;
  overflow: hidden;
}
.content-card__image {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #f5f5f5;
}
.content-card__word {
  font-size: 1.4rem;
  margin: 0;
  color: var(--vermillion);
}
.content-card__sentences {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
.content-card__usage {
  font-size: 0.85rem;
  color: #555;
}
.content-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.content-card--compact {
  padding: 0.6rem;
}
.content-card--compact .content-card__image {
  height: 70px;
}
.content-card--compact .content-card__word {
  font-size: 1.05rem;
}
.card-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

/* Flip card (daily words: front = word/image/actions, back = example sentences) */
.flip-card {
  perspective: 1200px;
  padding: 0;
  overflow: hidden;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  min-height: 0;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  overflow: visible;
}
.flip-card-back {
  transform: rotateY(180deg);
}
.flip-corner-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* ---------- Simple grids (alphabet / barakhadi consonants / numbers / days / months) ---------- */

.simple-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 1rem 0;
}
@media (max-width: 380px) {
  .simple-grid { grid-template-columns: repeat(3, 1fr); }
}

/* शब्द's category tiles (multi-syllable labels, not single letters) — sized off the actual
   available width via auto-fit/minmax rather than .simple-grid's viewport-width breakpoints,
   since this grid sits inside a narrow ~50%-width column on wide screens, not the full
   viewport .simple-grid's breakpoints assume. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 1rem 0;
}
.category-grid .simple-tile .s-letter {
  font-size: 13px;
  line-height: 1.25;
}

.simple-tile {
  background: linear-gradient(160deg, #fff3dc, #ffe3b0);
  border: 2px solid #f0ce8a;
  border-radius: 12px;
  padding: 8px 4px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.simple-tile:active {
  transform: scale(0.94);
}
.simple-tile.selected {
  border-color: var(--leaf);
  box-shadow: 0 0 0 2px var(--leaf);
}
.simple-tile .s-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--vermillion);
}
.simple-tile .s-emoji {
  font-size: 15px;
}
.simple-tile .s-word {
  font-family: var(--font-support);
  font-size: 9px;
  color: #8a7248;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--vermillion);
  margin: 14px 0 8px;
  text-align: center;
}

/* ---------- Barakhadi drill row ---------- */

.barakhadi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 380px) {
  .barakhadi-row { grid-template-columns: repeat(3, 1fr); }
}
.barakhadi-tile {
  background: white;
  border: 2px solid var(--teal-deep);
  border-radius: 12px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
}
.barakhadi-tile:active {
  transform: scale(0.94);
}
.barakhadi-tile .b-form {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}

/* ---------- Numbers ---------- */

.number-object-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1rem;
  cursor: pointer;
}
.number-object-card__numeral {
  font-size: 1.3rem;
  color: var(--vermillion);
  font-weight: 700;
}
.number-object-card__objects {
  font-size: 1.5rem;
  letter-spacing: 2px;
}
.number-name-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: var(--radius-md);
  padding: 0.5rem;
  cursor: pointer;
  border: 2px solid var(--purple);
}
.number-name-cell small {
  font-size: 0.7rem;
  color: #666;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
}

/* ---------- Colors ---------- */

.color-swatch {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: var(--radius-md);
}

/* ---------- Info cards (calendar / festivals) ---------- */

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(155deg, #fff3dc, #ffe9c6);
  border: 2px solid #f0ce8a;
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.info-emoji {
  font-size: 30px;
  flex-shrink: 0;
}
.info-body {
  flex: 1;
  min-width: 0;
}
.info-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--vermillion);
}
.info-sub {
  font-family: var(--font-support);
  font-size: 12px;
  color: #6b5c3d;
  margin-top: 2px;
}

/* ---------- Clock ---------- */

.clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.clock-svg {
  max-width: 280px;
  touch-action: none;
}
.clock-face-circle {
  fill: white;
  stroke: var(--teal-deep);
  stroke-width: 5;
}
.clock-number {
  font-family: var(--font-display);
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--ink);
}
.clock-tick {
  stroke: #bbb;
  stroke-width: 2;
}
.clock-hand {
  stroke-linecap: round;
}
.clock-hand--hour {
  stroke: var(--vermillion);
  stroke-width: 7;
}
.clock-hand--minute {
  stroke: var(--ink);
  stroke-width: 4;
}
.clock-grip {
  cursor: grab;
  fill: white;
  stroke: var(--ink);
  stroke-width: 2;
}
.clock-center-dot {
  fill: var(--vermillion);
}
.clock-readout {
  text-align: center;
}
#clock-phrase {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--vermillion);
}

/* ---------- Admin ---------- */

.admin-login,
.admin-form {
  max-width: 480px;
  margin: 3rem auto;
  background: white;
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: #555;
}
.admin-field input,
.admin-field textarea,
.admin-field select {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.admin-error {
  color: #c62828;
  min-height: 1.2em;
}
.admin-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0;
}
.admin-tab {
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: #e0e0e0;
  cursor: pointer;
}
.admin-tab.active {
  background: var(--teal-deep);
  color: white;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.admin-table th,
.admin-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid #eee;
  font-size: 0.85rem;
  text-align: left;
}
.admin-table button {
  margin-right: 0.3rem;
}

/* ---------- Motion ---------- */

@keyframes bounce-in {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.bounce-in {
  animation: bounce-in 0.4s ease;
}
.confetti-burst {
  position: fixed;
  top: 40%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 999;
}
.confetti-burst span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  animation: confetti-fly 1s ease-out forwards;
  transform: rotate(var(--angle));
}
@keyframes confetti-fly {
  0% { transform: rotate(var(--angle)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--angle)) translateY(-120px) scale(0.4); opacity: 0; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 700px) {
  .topbar { max-width: 680px; }
  .simple-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  #numberNameGrid { grid-template-columns: repeat(3, 1fr); }
  .barakhadi-row { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mic-btn { width: 100px; height: 100px; font-size: 40px; }
}
/* ---------- खेळ (games) ---------- */

.mode-card {
  display: block;
  width: 100%;
  text-align: left;
  background: white;
  border: 2px solid #f0ce8a;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.mode-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--vermillion);
  margin-bottom: 2px;
}
.mode-card span {
  font-family: var(--font-support);
  font-size: 13px;
  color: #6b5c3d;
}

.game-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.game-top--simple {
  justify-content: flex-start;
}
.game-top--simple b {
  font-family: var(--font-display);
  color: var(--teal-deep);
  font-size: 15px;
}
.game-back {
  background: none;
  border: none;
  font-size: 22px;
  padding: 2px 8px;
  color: var(--teal-deep);
}
.game-progress-bar {
  flex: 1;
  height: 9px;
  background: #ede3d0;
  border-radius: 6px;
  overflow: hidden;
}
.game-progress-bar i {
  display: block;
  height: 100%;
  background: var(--marigold);
  transition: width 0.3s ease;
}
.game-counter {
  font-family: var(--font-support);
  font-size: 12.5px;
  color: #6b5c3d;
  white-space: nowrap;
}

/* Picture beside the text (not above it) so the stage stays short and the options fit on a
   phone screen without scrolling; feedback lives in the stage for the same reason. */
.game-stage {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 14px rgba(11, 79, 74, 0.18);
  text-align: left;
  padding: 10px;
  margin-bottom: 10px;
}
.game-picture {
  flex: none;
  width: min(36vw, 140px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.game-stage__text {
  flex: 1;
  min-width: 0;
}
.game-stage .game-feedback {
  min-height: 2.4em;
  margin: 4px 0 0;
  text-align: left;
}
#gameRoot .game-option {
  padding: 12px 8px;
  font-size: 20px;
}
@media (max-width: 359px) {
  .game-stage { flex-direction: column; text-align: center; }
  .game-picture { width: 110px; }
  .game-stage .game-feedback { text-align: center; }
}
.game-q {
  font-family: var(--font-support);
  font-size: 13px;
  color: #6b5c3d;
  margin: 2px 0 6px;
}
.game-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 7vw, 32px);
  letter-spacing: 0.02em;
  color: var(--teal-deep);
  min-height: 1.3em;
}
.game-word .gap {
  display: inline-block;
  min-width: 1.1em;
  border-bottom: 4px solid var(--marigold);
  text-decoration: none;
  color: var(--vermillion);
}

.game-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.game-option {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  background: linear-gradient(160deg, #fff3dc, #ffe3b0);
  border: 2px solid #f0ce8a;
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.1s ease;
}
.game-option:active {
  transform: scale(0.96);
}
.game-option.ok {
  background: var(--leaf);
  color: #fff;
  border-color: var(--leaf);
}
.game-option.bad {
  background: var(--vermillion);
  color: #fff;
  border-color: var(--vermillion);
}
.game-option:disabled {
  cursor: default;
}

.game-feedback {
  min-height: 2.8em;
  text-align: center;
  margin: 14px 0 8px;
  font-family: var(--font-support);
  font-size: 15px;
  color: var(--ink);
}
.game-feedback b {
  font-family: var(--font-display);
  color: var(--vermillion);
}
.game-feedback small {
  display: block;
  color: #6b5c3d;
  font-size: 12.5px;
  margin-top: 2px;
}
.game-say {
  background: var(--marigold);
  color: var(--ink);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 14px;
  margin-left: 4px;
  vertical-align: middle;
}
.game-next-btn {
  display: block;
  width: 100%;
  background: var(--teal-deep);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  padding: 12px;
  border-radius: var(--radius-md);
  margin-top: 10px;
}
.game-next-btn[hidden] {
  display: none;
}

.game-end {
  text-align: center;
  padding-top: 10px;
}
.game-end-emoji {
  font-size: 4rem;
  line-height: 1.1;
}
.game-end h2 {
  color: var(--vermillion);
  margin: 6px 0 2px;
}
.game-end .btn {
  display: block;
  width: 100%;
  margin: 14px 0 10px;
}

/* ---------- शब्दकोडे (crossword) ---------- */

.crossword-sub {
  font-family: var(--font-support);
  font-size: 14px;
  color: #6b5c3d;
  margin: -4px 0 14px;
}
.mode-card--pic {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mode-card--pic img,
.mode-card--pic .sprite-img {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
}

/* Fixed-size cells (not 1fr) so the grid stays compact and centred whatever the panel width. */
.crossword-grid {
  /* Shrinks with the screen so the grid, clue pictures and letter keys fit without scrolling. */
  --cw-cell: min(58px, 12.5vw, 6.4vh);
  display: grid;
  gap: 4px;
  justify-content: center;
  margin: 8px 0 14px;
}
.crossword-cell-empty {
  width: var(--cw-cell);
  height: var(--cw-cell);
}
.crossword-cell {
  position: relative;
  width: var(--cw-cell);
  height: var(--cw-cell);
  background: white;
  border: 2px solid #f0ce8a;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--cw-cell) * 0.4);
  color: var(--ink);
  padding: 0;
  cursor: pointer;
}
.crossword-cell.in-word {
  background: #fff3dc;
  border-color: var(--marigold);
}
.crossword-cell.selected {
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px var(--teal-deep);
}
.crossword-cell.ok {
  background: var(--leaf);
  color: #fff;
  border-color: var(--leaf);
}
.crossword-cell.bad {
  background: var(--vermillion);
  color: #fff;
  border-color: var(--vermillion);
}
.crossword-cell i {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 11px;
  font-style: normal;
  opacity: 0.75;
  font-weight: 500;
}

.clue-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}
.clue-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 2px solid #f0ce8a;
  border-radius: 14px;
  padding: 4px 12px 4px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.clue-chip img,
.clue-chip .sprite-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
}
.clue-chip.active {
  border-color: var(--teal-deep);
  background: #fff3dc;
}
.clue-chip.solved {
  border-color: var(--leaf);
}

.crossword-win {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--leaf);
  margin-bottom: 10px;
}

.letter-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.letter-tile {
  min-width: 56px;
  height: 52px;
  background: var(--teal-deep);
  color: var(--cream);
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  padding: 0 10px;
}
.letter-tile--erase {
  background: white;
  color: var(--ink);
  border: 2px solid #f0ce8a;
}

/* ---------- सण-उत्सव (festivals) ---------- */

.month-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 1rem 0;
  background: #240c21;
  border-radius: 20px;
  padding: 10px;
}
/* Month artwork already has the month name painted on it. */
.month-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.month-tile img,
.month-tile .sprite-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.month-tile .month-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.month-tile.no-fest {
  opacity: 0.45;
  cursor: default;
}
.month-tile.selected {
  box-shadow: 0 0 0 3px #fff;
  transform: scale(1.05);
  z-index: 1;
}
.month-tile .month-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #fff;
  color: #3a1630;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
}

.festival-count {
  text-align: center;
  font-family: var(--font-support);
  font-size: 13px;
  color: #6b5c3d;
  margin: 10px 0;
}

.festival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.festival-card {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: left;
  padding: 0;
}
.festival-art {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.festival-art img,
.festival-art .sprite-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Cards crop the painted month name off the artwork; the dialog shows it whole. */
.festival-art.cover img {
  object-fit: cover;
  object-position: 50% 22%;
}
.festival-art.contain img,
.festival-art.contain .sprite-img {
  padding: 12px;
}
.festival-art--large {
  height: 260px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.festival-art--large.cover {
  background: #240c21;
}
.festival-art--large.cover img {
  object-fit: contain;
}
.festival-art--large.contain img,
.festival-art--large.contain .sprite-img {
  padding: 20px;
}
.festival-card__body {
  padding: 8px 10px 10px;
}
.festival-card__body b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--vermillion);
}
.festival-card__body span {
  font-family: var(--font-support);
  font-size: 11.5px;
  color: #8a7248;
}

.festival-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(420px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: var(--cream);
  box-shadow: var(--shadow-card);
}
.festival-dialog::backdrop {
  background: rgba(27, 42, 74, 0.55);
}
.festival-dialog-body {
  padding: 16px 20px 20px;
  font-family: var(--font-support);
}
.festival-dialog-body h2 {
  font-family: var(--font-display);
  color: var(--vermillion);
  margin: 0;
  font-size: 22px;
}
.festival-dialog-sub {
  color: #6b5c3d;
  font-size: 13px;
  margin: 2px 0 10px;
}
.festival-dialog-body h3 {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--teal-deep);
  margin: 12px 0 2px;
}
.festival-dialog-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.festival-dialog-body .festival-phrase {
  font-weight: 600;
  margin-bottom: 4px;
}
.festival-dialog-nav {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.festival-dialog-nav .back-btn {
  margin-bottom: 0;
}

.festival-quiz {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-top: 10px;
}
.festival-quiz h3 {
  font-family: var(--font-display);
  color: var(--vermillion);
  margin: 0 0 6px;
}
/* Baloo 2 has no श्न conjunct (renders प्रश्‌न); the self-hosted Noto Sans Devanagari does. */
.festival-quiz-next {
  font-family: "Noto Sans Devanagari", var(--font-display);
  margin-top: 10px;
}

@media (min-width: 700px) and (hover: hover) {
  .chip:hover,
  .simple-tile:hover,
  .barakhadi-tile:hover,
  .info-card:hover,
  .tool-btn:hover,
  .btn:hover,
  .back-btn:hover,
  .mode-card:hover,
  .game-option:hover,
  .crossword-cell:hover,
  .letter-tile:hover,
  .month-tile:hover,
  .festival-card:hover {
    filter: brightness(1.06);
  }
  .drawer-item:hover {
    transform: translateY(-3px);
  }
}

/* ---------- शब्द page look (scoped: these classes are shared with other pages) ---------- */
/* --cat is the selected category's colour, set from client/wordCategories.ts. */

.words-page .category-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 380px) {
  .words-page .category-grid { grid-template-columns: repeat(3, 1fr); }
}
.words-page .category-grid .simple-tile {
  position: relative;
  background: #fff;
  border: 3px solid var(--cat);
  border-radius: 16px;
  padding: 6px 2px 5px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cat) 35%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.words-page .category-grid .simple-tile .s-sample {
  font-family: var(--font-devanagari);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  color: var(--cat);
}
.words-page .category-grid .simple-tile .s-letter {
  font-size: 11px;
  color: color-mix(in srgb, var(--cat) 75%, var(--ink));
}
.words-page .category-grid .simple-tile.selected {
  background: var(--cat);
  border-color: var(--cat);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--cat) 45%, transparent);
  transform: translateY(-3px) scale(1.04);
}
.words-page .category-grid .simple-tile.selected .s-sample,
.words-page .category-grid .simple-tile.selected .s-letter {
  color: #fff;
}
.words-page .category-grid .simple-tile.selected::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--cat);
  border: 2px solid var(--cat);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.words-page #selectedCategoryLabel {
  display: table;
  margin: 16px auto 4px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--cat);
  color: #fff;
}
.words-page #selectedCategoryLabel.hidden {
  display: none;
}

.words-page .card-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.words-page .content-card {
  border-top: 5px solid var(--cat);
  border-radius: 18px;
  animation-delay: calc(var(--i, 0) * 50ms);
  animation-fill-mode: backwards; /* hidden until its turn, without pinning transform afterwards */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.words-page .content-card.active {
  box-shadow: 0 0 0 3px var(--cat), var(--shadow-card);
}
.words-page .flip-card-face {
  align-items: center;
  padding: 10px;
}
.words-page .content-card__image {
  width: 100%;
  height: auto;
  max-height: 120px;
  aspect-ratio: 1;
  background: none;
  border-radius: 14px;
}
.words-page .content-card__word {
  font-family: var(--font-devanagari);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--cat);
  text-align: center;
}
.words-page .content-card__actions {
  justify-content: center;
}
.words-page .flip-corner-btn {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.words-page .flip-card-back {
  background: color-mix(in srgb, var(--cat) 12%, #fff);
  justify-content: space-between;
}
.words-page .content-card__sentences {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.words-page .content-card__sentences li {
  position: relative;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--cat) 40%, #fff);
  border-radius: 12px 12px 12px 4px;
  padding: 5px 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.words-page .flip-card-back .tool-btn {
  background: var(--cat);
}

.words-page .trace-stage #stageLabel {
  font-size: 20px;
  color: var(--cat, var(--vermillion));
}

@media (min-width: 700px) and (hover: hover) {
  .words-page .category-grid .simple-tile:not(.selected):hover,
  .words-page .content-card:hover {
    transform: translateY(-3px);
  }
}

/* ---------- Fit-to-screen layout ---------- */
/* Issues.txt: "fit items on screen without scrolling" and "writing box on top, keep it
   fixed". Tighter page chrome, denser grids, a compact writing board pinned on top on
   phones, and a wider page on large screens so grids get more columns. */

/* Back button and page title share one row. */
.panel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.panel-head .back-btn {
  justify-self: start;
  margin: 0;
}
.panel-head .panel-title {
  margin: 0;
}
.card-panel {
  padding: 12px 14px 18px;
  margin-top: 10px;
}
.section-label {
  margin: 8px 0 6px;
}
.simple-grid,
.card-grid,
.category-grid {
  margin: 0.5rem 0;
}

/* Phones: the writing board sits above the list, pinned under the topbar while the list
   scrolls, and is shorter (2:1) so tiles stay visible below it. The label and पुसा/ऐका share
   one row. Only boards next to a content list — the home page and घड्याळ keep their own
   layout. The trace font scales with canvas height, so letters shrink with the canvas
   rather than being cut off. */
@media (max-width: 640px) {
  .content-column ~ .trace-stage {
    order: -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    padding: 8px 10px 10px;
    margin: 4px 0 10px;
  }
  .content-column ~ .trace-stage > .section-label {
    grid-row: 1;
    margin: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content-column ~ .trace-stage > .canvas-tools {
    grid-row: 1;
    grid-column: 2;
    margin: 0 0 6px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .content-column ~ .trace-stage > .canvas-wrap {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .content-column ~ .trace-stage .trace-canvas {
    aspect-ratio: 2 / 1;
  }
}

/* Large screens: use the width. The content column gets ~60% and the sticky board ~40%.
   Pages without a board (सण, खेळ) keep a narrower panel so tiles don't blow up. */
@media (min-width: 1024px) {
  main,
  .topbar {
    max-width: 1200px;
  }
  .home-columns > * {
    flex: 3 1 0;
    width: auto;
    min-width: 0;
  }
  .home-columns > .trace-stage {
    flex: 2 1 0;
  }
  .card-panel:not(:has(.home-columns)) {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* Letter / month / day grids: 5 per row on phones, as many as fit on large screens. */
@media (min-width: 360px) and (max-width: 699px) {
  .simple-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
}
@media (max-width: 359px) {
  .simple-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .simple-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}

/* आकडे: ten numbers at a time, picked from a row of range chips. */
.tens-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 10px;
}
.tens-chip {
  padding: 5px 10px;
}
.tens-chip.selected {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--cream);
}
.number-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.number-grid .number-object-card {
  padding: 6px 4px;
  gap: 2px;
  box-shadow: 0 3px 8px rgba(11, 79, 74, 0.15);
  cursor: pointer;
}
.number-grid .number-object-card__objects {
  font-size: 0.75rem;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  word-break: break-all;
}

/* रंग: small swatch tiles. */
#colorGrid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
#colorGrid .color-swatch {
  height: 44px;
}
#colorGrid h3 {
  font-size: 1rem;
  margin: 0;
}

/* शब्द: smaller word tiles (3 per row on phones). Sentences on the back scroll inside the
   tile instead of making it taller (see syncHeight in client/pages/words.ts). */
.words-page .card-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.words-page .flip-card-face {
  padding: 6px;
  gap: 2px;
}
.words-page .content-card__image {
  flex: none; /* the face's height is measured from its content, so the picture must not shrink */
  width: min(100%, 72px);
  max-height: none;
}
.words-page .content-card__word {
  font-size: 1.2rem;
}
.words-page .flip-card-back {
  overflow-y: auto;
}
.words-page .content-card__sentences li {
  font-size: 0.75rem;
  padding: 4px 6px;
}
@media (min-width: 1024px) {
  .words-page .category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* सण: month picker in two rows of six on wider screens. */
@media (min-width: 700px) {
  .month-picker {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* शब्दकोडे and the other games: one header row (the game's own ← goes back to the खेळ
   menu, which still shows ← मुख्यपान), no empty feedback gap, and smaller keys on phones so
   the grid and the letter keys are on screen together. */
.card-panel:has(.game-top) .panel-head {
  display: none;
}
.cw-feedback:empty {
  min-height: 0;
  margin: 4px 0;
}
.cw-levels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cw-levels .mode-card--pic {
  margin: 0;
  padding: 10px;
  gap: 10px;
}
.cw-levels .mode-card--pic img,
.cw-levels .mode-card--pic .sprite-img {
  width: 40px;
  height: 40px;
}
@media (max-width: 640px) {
  .letter-bank {
    gap: 6px;
  }
  .letter-tile {
    min-width: 46px;
    height: 44px;
    font-size: 20px;
    padding: 0 8px;
  }
  .clue-chip {
    padding: 3px 10px 3px 3px;
    font-size: 15px;
  }
  .clue-chip img,
  .clue-chip .sprite-img {
    width: 32px;
    height: 32px;
  }
}

/* Small phones: the tagline wrapped to two lines and made the pinned topbar taller. */
@media (max-width: 400px) {
  .topbar .tagline {
    display: none;
  }
}

/* 404 page (public/404.html) */
.not-found {
  text-align: center;
  padding: 40px 20px;
}
.not-found-mascot {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 12px;
}
.not-found-text {
  margin: 8px 0 24px;
  font-size: 1.1rem;
}
.not-found .tool-btn {
  display: inline-block;
  text-decoration: none;
}

/* Admin शब्द table: matra-group filter (client/admin.ts categoryFilter) */
.admin-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.admin-filter button {
  border: 2px solid var(--cat, #888);
  background: #fff;
  color: var(--cat, #333);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
}
.admin-filter button.active {
  background: var(--cat, #333);
  color: #fff;
}

/* Admin image thumbnails (table) and preview (edit form) */
.admin-thumb-btn {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.admin-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}
.admin-preview {
  margin-bottom: 8px;
}
.admin-preview-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
}

/* Admin खेळ tab (client/admin.ts renderGamesSection) */
.admin-summary {
  color: #666;
  font-size: 0.9rem;
  margin: 0.5rem 0 0.75rem;
}
.admin-ok {
  color: #2e7d32;
}
.admin-games {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-game-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  transition: opacity 0.15s;
}
.admin-game-row.off {
  opacity: 0.55;
}
.admin-game-pos {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--teal-deep);
  color: white;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.admin-game-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  min-width: 0;
}
.admin-game-name input {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}
.admin-game-name span {
  display: flex;
  flex-direction: column;
}
.admin-game-name small {
  color: #777;
}
.admin-game-pill {
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #e8f5e9;
  color: #2e7d32;
  flex-shrink: 0;
}
.admin-game-row.off .admin-game-pill {
  background: #eee;
  color: #777;
}
.admin-game-moves {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.admin-game-moves button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
}
.admin-game-moves button:disabled {
  opacity: 0.3;
  cursor: default;
}