/* Kridopia Writing Lab — shared (category + lesson chrome) */

/* Category / section grids (body.dk-kids) */
body.dk-kids .dk-text-muted {
  color: var(--dk-text-72);
}

/* Writing Lab category: equal cards (legacy flex grid stretches the last row) */
body.dk-kids #grid_container.wl-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  align-items: stretch;
}

body.dk-kids #grid_container.wl-category-grid .item {
  width: auto !important;
  flex: none !important;
  max-width: none;
  display: flex;
  flex-direction: column;
  margin: 0;
}

body.dk-kids #grid_container.wl-category-grid .item a {
  flex: 1;
  width: 100%;
}

body.dk-kids #grid_container.wl-category-grid .wl-cat-icon-wrap {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  border-radius: 18px;
  background: var(--dk-section-bg);
  border: 1px solid rgba(20, 33, 61, 0.08);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

body.dk-kids #grid_container.wl-category-grid .wl-cat-icon {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 30em) {
  body.dk-kids #grid_container.wl-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 22em) {
  body.dk-kids #grid_container.wl-category-grid {
    grid-template-columns: 1fr;
  }
}

body.dk-kids #grid_container .item .title,
body.dk-kids #grid_container .item a {
  color: var(--dk-ink);
}

body.dk-kids #grid_container.wl-category-grid .item .title {
  font-size: clamp(14px, 2.1vw, 17px);
  font-weight: 800;
  line-height: 1.3;
  margin-top: 8px;
}

body.dk-kids .wl-cat-desc {
  font-size: 0.85rem;
  color: var(--dk-text-72);
  margin: 4px 8px 0;
  text-align: center;
}

body.dk-kids .wl-cat-progress {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--dk-blue);
  margin: 4px 0 0;
}

body.dk-kids .wl-lesson-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 0 auto 8px;
  border-radius: var(--dk-radius-lg, 16px);
  background: linear-gradient(165deg, rgba(47, 125, 255, 0.12), rgba(139, 92, 246, 0.1));
  border: 1px solid var(--dk-stroke);
}

body.dk-kids .wl-lesson-thumb__glyph {
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--dk-ink);
}

body.dk-kids .wl-lesson-meta {
  font-size: 0.75rem;
  margin: 4px 0 0;
  text-align: center;
}

body.dk-kids .wl-lesson-meta--locale {
  font-weight: 700;
  color: var(--dk-purple);
}

body.dk-kids .wl-lesson-meta--stars {
  color: var(--dk-yellow);
}

body.dk-kids .wl-empty {
  margin: 24px auto;
  max-width: 36rem;
  padding: 20px 18px;
  border-radius: var(--dk-radius-xl, 20px);
  border: 1px solid var(--dk-stroke);
  background: var(--dk-panel-bg);
  box-shadow: var(--dk-shadow);
  text-align: center;
}

body.dk-kids .wl-empty__title {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--dk-ink);
}

body.dk-kids .wl-empty__hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--dk-text-72);
}

/* Lesson playfield root (#game #wl-root) */
#game #wl-root,
#game_container #wl-root {
  --wl-primary: var(--dk-blue, #2f7dff);
  --wl-accent: var(--dk-yellow, #fbbf24);
  --wl-success: var(--dk-green, #22c55e);
  --wl-ink: var(--dk-ink, #14213d);
  --wl-ink-muted: var(--dk-text-72, rgba(43, 58, 103, 0.72));
  --wl-surface: var(--dk-glass-94, #ffffff);
  --wl-surface-soft: var(--dk-glass-70, rgba(255, 255, 255, 0.7));
  --wl-border: var(--dk-stroke, rgba(20, 33, 61, 0.12));
  --wl-radius: var(--dk-radius-lg, 16px);
  --wl-shadow: var(--dk-shadow, 0 14px 40px rgba(15, 23, 42, 0.1));
  --wl-playfield-bg: #ffffff;

  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--wl-ink);
  min-height: min(85vh, 720px);
  padding: 16px;
  background: var(--dk-panel-bg);
  border: 1px solid var(--wl-border);
  border-radius: var(--dk-radius-xl, 20px);
  box-shadow: var(--wl-shadow);
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

#game #wl-root .wl-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-radius);
  background: var(--wl-surface-soft);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--wl-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#game #wl-root .wl-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--wl-primary), var(--dk-purple, #8b5cf6));
  color: #fff;
}

#game #wl-root .wl-btn--ghost {
  background: transparent;
}

#game #wl-root .wl-select {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--wl-radius);
  border: 1px solid var(--wl-border);
  background: #ffffff;
  color: #14213d;
  font-weight: 700;
  color-scheme: light;
}

#game #wl-root .wl-select option {
  color: #14213d;
  background: #ffffff;
}

html[data-dk-theme='dark'] #game #wl-root .wl-select,
html[data-dk-theme='dark'] #game #wl-root .wl-select option {
  color: #14213d;
  background: #ffffff;
}

#game #wl-root .wl-hud__coins,
#game #wl-root .wl-hud__xp,
#game #wl-root .wl-hud__streak {
  background: var(--wl-surface);
  color: var(--wl-ink);
  border: 1px solid var(--wl-border);
}

#game #wl-root .wl-lesson__section,
#game #wl-root .wl-cue {
  color: var(--wl-ink-muted);
}

#game #wl-root .wl-modal__card {
  background: var(--dk-modal-surface, #fff);
  color: var(--wl-ink);
  border: 1px solid var(--wl-border);
}

#game #wl-root .wl-error {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--wl-radius);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #b91c1c;
  text-align: center;
  font-weight: 700;
}

html[data-dk-theme='dark'] #game #wl-root .wl-error {
  color: #fecaca;
}

/* White playfield behind tracing; ink canvas must stay transparent so dots show */
#game #wl-root .wl-stage-wrap {
  color-scheme: light;
  background: var(--wl-playfield-bg, #ffffff) !important;
}

#game #wl-root .wl-canvas {
  color-scheme: light;
  background: transparent !important;
}

#game #wl-root .wl-svg {
  pointer-events: none;
  z-index: 2;
}

#game #wl-root .wl-canvas {
  z-index: 1;
}

html[data-dk-theme='dark'] body.dk-game-page #game_container.dk-wl-playfield,
html[data-dk-theme='dark'] body.dk-game-page #game.dk-wl-game {
  background: transparent !important;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html[data-dk-theme='system'] body.dk-game-page #game_container.dk-wl-playfield,
  html[data-dk-theme='system'] body.dk-game-page #game.dk-wl-game {
    background: transparent !important;
    color-scheme: light;
  }
}

@media (prefers-reduced-motion: reduce) {
  #game #wl-root * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.wl-section-cta {
  text-align: center;
  margin: 0 0 20px;
  padding: 16px;
  border-radius: var(--dk-radius-xl, 20px);
  background: linear-gradient(135deg, rgba(47, 125, 255, 0.1), rgba(99, 102, 241, 0.12));
  border: 2px solid rgba(47, 125, 255, 0.25);
}

.wl-section-cta__btn {
  display: inline-flex;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(135deg, #2f7dff, #6366f1);
  box-shadow: 0 6px 16px rgba(47, 125, 255, 0.35);
}

.wl-section-cta__hint {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--dk-text-muted, #64748b);
}

.wl-section-cta__browse {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2f7dff;
  text-decoration: none;
}

.wl-section-cta__browse:hover {
  text-decoration: underline;
}