.home, .trails, .shop, .records, .settings, .notes, .primer {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.hero { display: grid; justify-items: center; text-align: center; gap: 8px; overflow: hidden; }

.hero-hen, .primer-hen {
  width: min(190px, 48vw);
  filter: drop-shadow(0 12px 0 rgba(90, 16, 32, 0.35));
  animation: bob 1.6s ease-in-out infinite;
}

.wordmark {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.28em;
  font-size: clamp(36px, 11vw, 64px);
  line-height: 0.9;
  color: var(--gold);
  text-shadow: 0 3px 0 #8a1c18;
}

.pitch { max-width: 28ch; color: var(--cream); }

.stat-row, .tile-grid, .shop-grid, .badge-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.stat-row { grid-template-columns: 1fr; }

.stat, .daily-card, .fact-card {
  text-align: left;
  display: grid;
  gap: 6px;
  color: inherit;
  width: 100%;
}

.step-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }

.step-list li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }

.step-list .ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 215, 0, 0.16);
  color: var(--gold);
}

.world-stack, .node-list, .mini-miles { display: grid; gap: 8px; }

.world-card, .node, .mini-mile, .fact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  text-align: left;
  color: inherit;
}

.world-card, .node, .mini-mile {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 16px;
  padding: 10px;
  border: 2px solid transparent;
}

.world-card.is-locked, .node.is-locked { opacity: 0.72; }

.swatch { width: 14px; height: 36px; border-radius: 8px; flex: 0 0 auto; }

.world-copy, .node-copy { flex: 1; min-width: 0; display: grid; }

.world-copy strong, .node-copy strong, .mini-mile span, .badge strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

.world-blurb { margin: 6px 0 10px; color: var(--muted); }

.node-index {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #4a1408;
  font-family: var(--display);
}

.shop-grid { grid-template-columns: 1fr; }

.skin-card { display: grid; gap: 8px; text-align: center; }

.skin-card.is-equipped { box-shadow: 0 8px 0 #c8102e, inset 0 2px 0 rgba(255, 255, 255, 0.22); }

.skin-stage {
  height: 150px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent 70%);
}

.skin-stage img { width: 120px; height: 120px; object-fit: contain; }

.tile-grid { grid-template-columns: 1fr 1fr; }

.tile {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 10px;
  display: grid;
  min-width: 0;
}

.tile strong { font-family: var(--display); font-size: 1.4rem; color: var(--gold); }

.table-wrap { overflow: auto; max-width: 100%; }

.board { width: 100%; border-collapse: collapse; table-layout: fixed; }

.board th, .board td {
  padding: 8px 4px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.86rem;
}

.board th:first-child, .board td:first-child { width: 42%; }
.board th { color: var(--gold); font-weight: 800; }

.badge-grid { grid-template-columns: 1fr 1fr; }

.badge {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  padding: 10px;
  min-width: 0;
  opacity: 0.55;
}

.badge.is-on { opacity: 1; color: var(--gold); }
.badge p { color: var(--muted); font-size: 0.78rem; }

.daily-note { display: flex; gap: 10px; align-items: center; }

.note-card, .range-card, .quiz { display: grid; gap: 8px; }

.note-card h2, .range-card h2, .quiz h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1; }

.range-read { display: grid; gap: 4px; }

.quiz-options { display: grid; gap: 8px; }

.quiz-option {
  width: 100%;
  text-align: left;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(255, 215, 0, 0.35);
  color: var(--cream);
}

.quiz-option.is-right { background: #3d6b12; border-color: var(--success); }
.quiz-option.is-wrong { background: #6d1224; border-color: var(--danger); }

.mile-sheet { display: grid; gap: 8px; }
.mile-facts { margin: 0; padding-left: 18px; }

.tape { width: 100% !important; height: 92px !important; border-radius: 12px; display: block; }

.primer { position: relative; height: 100%; overflow: auto; align-content: center; padding: 8px 8px 4px 28px; }

.skip-link {
  justify-self: end;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.studs {
  position: absolute;
  left: 8px;
  top: 64px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stud {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6a5420;
  box-shadow: inset 0 -3px 0 #3a2a10, 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.stud.is-on { background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.signboard {
  background: linear-gradient(180deg, #fff6c8, #ffd24a 42%, #ff9800);
  color: #4a1408;
  border: 4px solid #fff8ee;
  border-radius: 20px;
  padding: 18px 16px 14px;
  box-shadow: 0 12px 0 #8a1c18;
  transform: perspective(700px) rotateX(7deg);
  display: grid;
  gap: 10px;
}

.signboard h1 {
  font-size: clamp(40px, 12vw, 68px);
  line-height: 0.88;
  color: var(--red);
  text-shadow: 0 3px 0 #fff6e4;
}

.mile-mark { font-family: var(--display); color: #8a3a08; letter-spacing: 0.08em; }

.primer-hen { justify-self: center; margin-top: 4px; }

@media (min-width: 720px) {
  .stat-row, .shop-grid { grid-template-columns: 1fr 1fr; }
  .home { max-width: 920px; margin: 0 auto; }
  .badge-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 350px) {
  .badge-grid, .tile-grid { grid-template-columns: 1fr; }
  .seg { grid-template-columns: 1fr 1fr; }
  .wordmark { font-size: 34px; }
  .dock-btn { font-size: 0.66rem; }
}

@media (max-height: 640px) {
  .hero-hen { width: min(130px, 34vw); }
  .skin-stage { height: 110px; }
}