/* Home screen — Stones tree (canonical) + path/list alternates */
.home {
  background: var(--bg);
  min-height: 100%;
  padding-bottom: 32px;
}

.home__header {
  position: relative;
  padding: 20px 20px 16px;
  overflow: hidden;
}

.home__title-block { flex: 1; min-width: 0; }

.home__eyebrow {
  font-size: 12px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.home__level-name {
  font-family: var(--font-kr-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--ink);
  margin-top: 4px;
  line-height: 1.1;
}

.home__level-en {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 2px;
}

.home__streak,
.home__hearts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.home__streak { background: var(--warn-soft); color: var(--warn); }
.home__hearts { background: var(--surface-2); color: var(--ink-2); }

.home__goal-card {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.home__goal-text { flex: 1; }
.home__goal-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.home__goal-sub   { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* Topic header divider */
.topic-header {
  padding: 24px 20px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.topic-header__index {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 700;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.topic-header__rule {
  flex: 1;
  height: 1px;
  background: var(--hairline);
  min-width: 16px;
}
.topic-header__kr {
  font-family: var(--font-kr);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.topic-header__en {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stones tree garden bed */
.stones-bed {
  position: relative;
  margin: 12px 16px 0;
  padding: 8px 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 70%, var(--bg) 30%), var(--bg));
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

/* Dotted SVG connectors drawn between consecutive stones. The viewBox
   width is 100 (percentage units) so the lines scale with the bed,
   while height matches container px. Stones sit on top of the SVG
   because they're appended after it. */
.stones-connectors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.stones-connector {
  fill: none;
  stroke: var(--ink-3, #8a8d8b);
  stroke-width: 2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

.stone-wrap {
  z-index: 1;
}

/* Stones (lesson nodes) */
.stone {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.stone:disabled { cursor: not-allowed; }

.stone--current { animation: float 4s ease-in-out infinite; }

.stone__body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.stone__continue-tip {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 3;
}

.stone__crowns {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 1px 5px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--gold);
}

/* Free-tier upgrade banner */
.free-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 12px 14px;
  text-align: left;
  background: linear-gradient(135deg, color-mix(in oklab, var(--gold) 18%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in oklab, var(--gold) 40%, var(--hairline));
  border-radius: var(--r-lg);
  cursor: pointer;
}