/* Page-specific layout: home, learn, games, practice, profile, etc. */

/* ---------- Home ---------- */
.home-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* No card, no border, no illustration - the heading and copy sit directly on the app's own
   starfield background (see .starfield in base.css), which is what actually reads as "in space"
   rather than a boxed graphic sitting on top of it. Used for both the welcome message and the
   "Using MP Learn as an App" prompt (.app-install-band), which share this plain treatment. */
.home-hero {
  padding: var(--space-md) 0;
  color: #ffffff;
}
.home-hero-content { max-width: 640px; }
.home-kicker {
  display: inline-block;
  color: var(--c-primary-glow-text);
  text-shadow: 0 0 10px rgba(51, 214, 255, 0.6);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8em;
  margin-bottom: var(--space-2xs);
}
.home-hero h1 {
  color: #ffffff;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.08;
}
.home-hero h1 .home-title-accent {
  display: block;
  background: linear-gradient(90deg, #33D6FF 0%, #8B5CF6 55%, #FF4FA3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.35));
}
.home-hero p { color: #cdd3ec; }
.home-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.home-actions .btn.primary { box-shadow: 0 0 24px rgba(51, 214, 255, 0.35), 0 4px 14px rgba(0,0,0,0.35); }
.home-actions .btn.ghost { border-color: rgba(255,255,255,0.35); color: #eef2ff; }
.home-actions .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.app-install-band .home-hero-content h2 { font-size: 1.5em; margin-top: var(--space-2xs); }
.app-install-band .home-band-icon { margin-bottom: var(--space-xs); }

/* Each remaining card (founder note, feedback prompt) gets a faint accent colour wash bleeding
   from the top corner (layered under the shared glass fill) so they don't read as identical dark
   boxes with only a border colour to tell them apart - and a gentle hover lift ties them to the
   rest of the app's interactive feel. */
.home-band {
  padding: var(--space-sm);
  transition: transform var(--speed-fast) var(--ease-smooth), box-shadow var(--speed-fast) var(--ease-smooth);
}
.home-band:hover { transform: translateY(-3px); }
.home-band h2 { font-size: 1.15em; }
.home-band p { margin-bottom: var(--space-2xs); }
/* A more translucent fill than the shared --glass-bg token (scoped to the home page only) - lets
   the starfield/nebula behind the cards actually show through instead of the cards reading as
   solid panels sitting on top of the space background. */
.home-band.accent-green  { background: radial-gradient(140% 90% at 100% 0%, rgba(61, 220, 151, 0.18), transparent 60%), rgba(15, 22, 26, 0.42); }
.home-band.accent-cyan   { background: radial-gradient(140% 90% at 100% 0%, rgba(51, 214, 255, 0.18), transparent 60%), rgba(10, 20, 28, 0.42); }
.home-band.accent-purple { background: radial-gradient(140% 90% at 100% 0%, rgba(139, 92, 246, 0.18), transparent 60%), rgba(18, 14, 30, 0.42); }
.home-band.accent-orange { background: radial-gradient(140% 90% at 100% 0%, rgba(255, 179, 71, 0.18), transparent 60%), rgba(22, 18, 12, 0.42); }
.home-band:hover.accent-green  { box-shadow: var(--shadow-card), 0 0 26px rgba(61, 220, 151, 0.2); }
.home-band:hover.accent-cyan   { box-shadow: var(--shadow-card), 0 0 26px rgba(51, 214, 255, 0.2); }
.home-band:hover.accent-purple { box-shadow: var(--shadow-card), 0 0 26px rgba(139, 92, 246, 0.2); }
.home-band:hover.accent-orange { box-shadow: var(--shadow-card), 0 0 26px rgba(255, 179, 71, 0.2); }

.home-band-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: var(--space-xs);
}
.home-band-icon svg { width: 26px; height: 26px; }
.home-band-icon.accent-green  { border: 1px solid var(--c-success);   color: var(--c-success-glow-text);   background: radial-gradient(circle at 30% 25%, rgba(61, 220, 151, 0.35), rgba(61, 220, 151, 0.08)); box-shadow: 0 0 18px rgba(61, 220, 151, 0.4); }
.home-band-icon.accent-cyan   { border: 1px solid var(--c-primary);   color: var(--c-primary-glow-text);   background: radial-gradient(circle at 30% 25%, rgba(51, 214, 255, 0.35), rgba(51, 214, 255, 0.08)); box-shadow: 0 0 18px rgba(51, 214, 255, 0.4); }
.home-band-icon.accent-purple { border: 1px solid var(--c-secondary); color: var(--c-secondary-glow-text); background: radial-gradient(circle at 30% 25%, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.08)); box-shadow: 0 0 18px rgba(139, 92, 246, 0.4); }
.home-band-icon.accent-orange { border: 1px solid var(--c-warning);   color: var(--c-warning-glow-text);   background: radial-gradient(circle at 30% 25%, rgba(255, 179, 71, 0.35), rgba(255, 179, 71, 0.08)); box-shadow: 0 0 18px rgba(255, 179, 71, 0.4); }

.home-feedback-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }

.home-disclaimer {
  color: var(--text-secondary);
  font-size: 0.82em;
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-sm);
}

/* ---------- Learn ---------- */
.learn-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.course-selector {
  padding: var(--space-sm) 0;
}
.course-selector > .btn { margin-bottom: var(--space-sm); }
.browse-header { margin-top: var(--space-sm); }
.browse-subhead { color: var(--text-secondary); }
.browse-section-title { color: var(--c-primary-glow-text); text-shadow: 0 0 10px rgba(51, 214, 255, 0.5); margin-top: var(--space-md); }
.course-selector .bubble-grid { margin-bottom: var(--space-sm); }

.lesson-path {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-md) 0;
}

/* ---------- Unit grouping ---------- */
.unit-block { margin-bottom: var(--space-lg); }
.unit-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  text-align: left;
  background: var(--glass-bg-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--c-secondary);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  cursor: pointer;
}
.unit-header .unit-tag { color: var(--c-secondary-glow-text); font-weight: 800; font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; }
.unit-header h3 { margin: var(--space-3xs) 0 0; font-size: 1.1em; }
.unit-header .unit-count { color: var(--text-secondary); font-size: 0.85em; white-space: nowrap; }
.unit-chevron { transition: transform var(--speed-fast) var(--ease-smooth); color: var(--text-secondary); }
.unit-block.collapsed .unit-chevron { transform: rotate(-90deg); }
.unit-block.collapsed .unit-nodes { display: none; }

/* ---------- Circular lesson nodes, connected by a dotted line down the unit ---------- */
.unit-nodes {
  position: relative;
  padding: var(--space-lg) 0 var(--space-2xs);
}
.unit-nodes::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 3px dotted var(--border-default);
  transform: translateX(-50%);
  z-index: 0;
}
.node-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-lg);
}
.node-wrap:last-child { margin-bottom: 0; }
.node-wrap.offset-1 { transform: translateX(-52px); }
.node-wrap.offset-2 { transform: translateX(48px); }
.node-wrap.offset-3 { transform: translateX(-28px); }
@media (max-width: 560px) {
  .node-wrap.offset-1 { transform: translateX(-30px); }
  .node-wrap.offset-2 { transform: translateX(28px); }
  .node-wrap.offset-3 { transform: translateX(-16px); }
}

.node-circle {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 2px solid var(--c-primary);
  color: var(--c-primary-glow-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(51, 214, 255, 0.4), inset 0 1px 0 var(--glass-border);
  transition: box-shadow var(--speed-med) var(--ease-smooth);
}
.node-circle .node-number { font-size: 0.66em; font-weight: 700; opacity: 0.85; }
.node-circle .node-label {
  font-size: 0.64em;
  font-weight: 800;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) { .node-circle { width: 84px; height: 84px; padding: 10px; } }
.node-wrap.state-current .node-circle {
  border-color: var(--c-primary);
  color: var(--c-primary-glow-text);
  box-shadow: 0 0 22px rgba(51, 214, 255, 0.55);
  animation: bubble-pulse-active 1.8s ease-in-out infinite;
}
.node-wrap.state-done .node-circle {
  border-color: var(--c-success);
  color: var(--c-success-glow-text);
  animation: node-glow-done 2.6s ease-in-out infinite;
}
.node-wrap.state-locked .node-circle { border-color: var(--border-default); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }

/* Done nodes get a slower, quieter breathing glow - distinct in feel from the current node's more
   energetic pulse, so the whole path reads as "alive" instead of only the one active step. */
@keyframes node-glow-done {
  0%, 100% { box-shadow: 0 0 14px rgba(61, 220, 151, 0.35); }
  50% { box-shadow: 0 0 26px rgba(61, 220, 151, 0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .node-wrap.state-done .node-circle { animation: none; box-shadow: 0 0 18px rgba(61, 220, 151, 0.45); }
}

.node-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  border: 2px solid var(--bg-main);
}
.node-wrap.state-done .node-badge { background: var(--c-success); color: #0d1117; }
.node-wrap.state-locked .node-badge { background: var(--border-default); color: var(--text-disabled); }
.node-wrap.state-current .node-badge { background: var(--c-primary); color: #0d1117; }


/* ---------- Generic stub page (placeholder until its phase lands) ---------- */
.page-stub {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--text-secondary);
}
.page-stub h2 { color: var(--text-primary); }