/* =========================================================
   Likkle Coders — v9 UI Polish layer
   ---------------------------------------------------------
   Implements the classroom-ready polish spec: design tokens,
   bottom-tab active state, card spacing + radius + border,
   lesson-card difficulty/time/CTA/progress, button states,
   typography hierarchy, toasts, loading + empty states.

   Loaded LAST so it wins. Pure CSS + the small renderer
   additions in app.js (unit head badges + units-done count).
   REVERT: delete this <link> + the SHELL entry in sw.js.
   ========================================================= */

:root {
  /* Spec palette */
  --v9-green:      #009b3a;   /* forest green — buttons, active, headers */
  --v9-green-d:    #007a2e;   /* hover darker */
  --v9-success:    #06d6a0;   /* completion / done */
  --v9-coral:      #ff6b35;   /* achievements / badges / wins */
  --v9-gray-bg:    #f3f4f6;
  --v9-gray-line:  #d1d5db;
  --v9-gray-text:  #374151;
  --v9-gray-muted: #6b7280;

  /* Difficulty pills */
  --v9-easy:   #06d6a0;
  --v9-medium: #f2a33a;
  --v9-hard:   #ef4444;

  /* Rhythm */
  --v9-radius:  12px;
  --v9-pad:     16px;
  --v9-gap-card: 12px;
  --v9-gap-sec:  16px;
}

/* ============================================================
   1) BOTTOM TAB BAR — labels always visible + green underline
   ============================================================ */
.mobile-bar {
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--v9-gray-line);
  background: #fff;
}
.mobile-bar a {
  min-height: 48px;                 /* 44px+ touch target */
  gap: 2px;
  color: var(--v9-gray-muted) !important;
  font-size: 0.72rem;
  font-weight: 600;
  position: relative;
  padding-top: 4px;
}
.mobile-bar a .ico { font-size: 1.25rem; opacity: 0.85; }
.mobile-bar a.active {
  color: var(--v9-green) !important;
  font-weight: 800;
}
.mobile-bar a.active .ico { opacity: 1; }
.mobile-bar a.active::after {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px;
  background: var(--v9-green);
  border-radius: 0 0 3px 3px;
}

/* ============================================================
   2) + 3) GAME/LESSON CARDS — progress · time · CTA · check
   The visible interactive cards on grade pages (Coding/
   Robotics/AI) are .game-card. v7 gave them the gradient skin;
   v9 adds the spec's progress bar, time, CTA + completion tick.
   ============================================================ */
.game-card {
  padding-bottom: 0.85rem !important;
}
/* Completion checkmark — top-right corner */
.game-card .gc-check {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--v9-success);
  color: #fff; font-weight: 900; font-size: 0.85rem;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  z-index: 2;
}
.game-card.gc-done .game-emoji { opacity: 0.55 !important; }
/* Difficulty pill — top-left, frosted so it reads on any card colour */
.game-card .gc-diff {
  position: absolute;
  top: 0.85rem; left: 0.9rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  z-index: 2;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
.game-card .gc-diff-easy   { background: var(--v9-easy);   color: #06381f; }
.game-card .gc-diff-medium { background: var(--v9-medium); color: #4a2c00; }
.game-card .gc-diff-hard   { background: var(--v9-hard); }
/* Give the title room below the diff pill row */
.game-card h4 { margin-top: 2.2rem !important; }
/* Progress bar — animated fill, sits above the footer */
.game-card .gc-progress {
  display: block;
  height: 7px;
  background: rgba(255,255,255,0.28);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.55rem 0 0.5rem;
}
.game-card .gc-progress-fill {
  display: block; height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Footer row: stars · time · CTA */
.game-card .gc-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
}
.game-card .gc-stars,
.game-card .gc-time {
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.game-card .gc-cta {
  margin-left: auto;
  background: rgba(255,255,255,0.95);
  color: var(--v9-gray-text);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 6px 12px;
  min-height: 32px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.18);
  white-space: nowrap;
}
.game-card .gc-cta-continue { background: var(--v9-coral); color: #fff; }
.game-card:hover .gc-cta { transform: translateY(-1px); }

/* Consistent radius/border/spacing on the other real card types */
.lesson-card, .nsc-track-card, .self-paced-card, .lc-top3-card {
  border-radius: var(--v9-radius) !important;
  border: 0.5px solid color-mix(in srgb, var(--v9-green) 40%, transparent) !important;
  transition: box-shadow 160ms ease;
}
.lesson-card:hover, .nsc-track-card:hover,
.self-paced-card:hover, .lc-top3-card:hover {
  box-shadow: 0 6px 18px -8px rgba(0,155,58,0.28) !important;
}

/* ============================================================
   4) TYPOGRAPHY hierarchy
   ============================================================ */
.gp-units-h,
.nsc-study-head h1,
.lc-found-head h2 {
  font-size: 1.5rem;      /* 24px */
  font-weight: 800;
  color: var(--v9-green);
  letter-spacing: -0.01em;
}

/* ============================================================
   5) BUTTON STATES — primary/secondary + hover/press/disabled
   ============================================================ */
.btn.btn-primary,
.gp-tab.active,
button.v9-primary {
  background: var(--v9-green) !important;
  color: #fff !important;
  border: 1px solid var(--v9-green-d);
  border-radius: var(--v9-radius);
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, transform 90ms ease, box-shadow 140ms ease;
}
.btn.btn-primary:hover,
button.v9-primary:hover {
  background: var(--v9-green-d) !important;
  box-shadow: 0 4px 12px -4px rgba(0,122,46,0.5);
}
.btn:active,
.btn.btn-primary:active,
button.v9-primary:active { transform: scale(0.97); }
.btn:disabled,
.btn[disabled],
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}
/* Loading spinner inside a button */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: v9-spin 0.7s linear infinite;
}
@keyframes v9-spin { to { transform: rotate(360deg); } }

/* ============================================================
   6) TOAST — win notification
   ============================================================ */
.v9-toast-wrap {
  position: fixed;
  left: 50%; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  width: min(360px, calc(100vw - 32px));
}
.v9-toast {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 0.5px solid var(--v9-gray-line);
  border-left: 4px solid var(--v9-success);
  border-radius: var(--v9-radius);
  padding: 12px 14px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.28);
  font-weight: 700;
  color: var(--v9-gray-text);
  animation: v9-toast-in 260ms cubic-bezier(0.22,1,0.36,1);
}
.v9-toast.is-out { animation: v9-toast-out 240ms ease forwards; }
.v9-toast-ico {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--v9-success); color: #fff; font-weight: 900; flex-shrink: 0;
}
@keyframes v9-toast-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v9-toast-out { to   { opacity: 0; transform: translateY(14px); } }

/* ============================================================
   7) LOADING + EMPTY states
   ============================================================ */
.v9-loading {
  display: grid; place-items: center; gap: 12px;
  padding: 3rem 1rem; text-align: center;
  color: var(--v9-gray-muted);
}
.v9-loading .v9-spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--v9-gray-line);
  border-top-color: var(--v9-green);
  border-radius: 50%;
  animation: v9-spin 0.8s linear infinite;
}
.v9-empty {
  display: grid; place-items: center; gap: 10px;
  padding: 2.5rem 1.2rem; text-align: center;
}
.v9-empty-ico { font-size: 2.6rem; }
.v9-empty h3 { font-size: 1.15rem; font-weight: 800; color: var(--v9-gray-text); margin: 0; }
.v9-empty p  { color: var(--v9-gray-muted); margin: 0; }

/* ============================================================
   8) RESPONSIVE — mobile-first breakpoints
   ============================================================ */
.gp-units, .game-grid, .lc-found-levels {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .gp-units, .game-grid, .lc-found-levels {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .game-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
/* Page gutter — never edge-to-edge on phones */
@media (max-width: 640px) {
  #app > .section,
  #app > .gp-page,
  .lc-master-page,
  .nsc-study { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Mobile: scroll clearance so the last cards + CTAs clear the floating
   ⋯ helper FAB (~88px) + bottom tab bar — no more FAB-over-CTA overlap. */
@media (max-width: 760px) {
  body:not(.is-landing):not(.is-anon) #app { padding-bottom: 168px !important; }
}