.home, .map-screen, .field-screen, .me-screen { display: grid; gap: 12px; min-width: 0; }

.hero {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  min-height: 220px;
}

.hero-art {
  width: 100%;
  height: clamp(140px, 32vw, 220px);
  object-fit: cover;
  border-radius: 16px;
}

.hero-mascot {
  position: absolute;
  right: 8px;
  top: 8px;
  width: min(92px, 24vw);
  animation: bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 0 rgba(7, 21, 37, 0.35));
}

.hero-copy { display: grid; gap: 8px; min-width: 0; }

.lede {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero .ring { justify-self: start; }

.home-grid, .step-grid, .world-grid, .note-grid, .stat-grid, .badge-grid, .cabinet-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.home-grid { grid-template-columns: minmax(0, 1fr); }
.step-grid, .world-grid, .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.daily-card, .fact-card, .world-card, .step-card { display: grid; gap: 8px; align-content: start; min-width: 0; }

.fact-card { position: relative; }

.fact-seal {
  width: 54px;
  justify-self: end;
}

.world-card { position: relative; overflow: hidden; }
.world-card::before {
  content: "";
  height: 6px;
  border-radius: 999px;
  background: var(--accent, var(--primary));
}
.world-ornament {
  width: 64px;
  height: 64px;
  object-fit: contain;
  justify-self: end;
}

.step-index {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary);
  color: #3a2500;
}

.preview-canvas, .lab-canvas {
  width: 100%;
  height: auto !important;
  display: block;
  border-radius: 16px;
}

.map-board { display: grid; gap: 12px; }

.world-block { display: grid; gap: 8px; border-color: var(--accent, var(--line)); }
.world-block.is-locked { opacity: 0.82; }

.world-head, .sheet-head, .rank-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.world-head h2, .sheet-head h2, .note-card h3, .badge h3, .cabinet h3 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.star-meter {
  position: relative;
  width: min(120px, 32vw);
  height: 16px;
  border-radius: 999px;
  background: #071e38;
  overflow: hidden;
  flex: 0 0 auto;
}

.star-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffc400, #ffe08a);
}

.star-meter b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  color: #3a2500;
}

.nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }

.node {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px 4px;
  border-radius: 16px;
  border: 2px solid rgba(255, 224, 138, 0.35);
  background: #12325c;
  color: var(--text);
}

.node span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}

.node.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.node.is-locked { color: var(--muted); }

.sheet { display: grid; gap: 8px; position: sticky; bottom: 0; }
.sheet[hidden] { display: none; }
.sheet-meta, .piece-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lock-note { color: var(--highlight); }

.note-card p, .badge p, .cabinet p, .fact-copy {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-summary { color: var(--highlight); }

.lab-card { display: grid; gap: 8px; }
.lab-label { display: grid; gap: 4px; min-width: 0; }
.lab-label input { width: 100%; }
.lab-read { color: var(--muted); }

.lab-arm {
  position: relative;
  height: 72px;
  transform: rotate(var(--lean, 0deg));
  transform-origin: 24px 50%;
}

.lab-mast {
  position: absolute;
  left: 16px;
  top: 8px;
  bottom: 8px;
  width: 10px;
  border-radius: 4px;
  background: linear-gradient(#ffe56a, #e09600);
}

.lab-hook {
  position: absolute;
  left: 26px;
  top: 18px;
  width: var(--reach, 70px);
  height: 8px;
  border-radius: 999px;
  background: #ffc400;
  box-shadow: 18px 16px 0 -2px #12325a;
}

.quiz-wrap, .quiz-card, .quiz-done { display: grid; gap: 10px; }
.quiz-options { display: grid; gap: 8px; }

.quiz-option {
  min-height: 44px;
  text-align: left;
  padding: 8px 12px;
  border-radius: 14px;
  border: 2px solid rgba(255, 224, 138, 0.4);
  background: #0c2e52;
  color: var(--text);
}

.quiz-option.is-right { background: #146c43; border-color: var(--success); }
.quiz-option.is-wrong { background: #7f1239; border-color: var(--danger); }
.quiz-why { color: var(--highlight); }

.name-input {
  width: min(240px, 100%);
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: #071e38;
}

.rank-bar {
  height: 14px;
  border-radius: 999px;
  background: #071e38;
  overflow: hidden;
}

.rank-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff5b3a, #ffc400);
}

.stat-tile { display: grid; gap: 2px; }
.stat-tile b { font-size: 1.4rem; color: var(--highlight); }
.badge-grid, .cabinet-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.badge, .cabinet {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 10px;
  border-radius: 16px;
  background: rgba(7, 30, 56, 0.55);
  opacity: 0.55;
  min-width: 0;
}

.badge.is-owned, .cabinet.is-owned { opacity: 1; }
.cabinet img { width: 100%; height: 72px; object-fit: contain; }
.badge .ico { width: 28px; height: 28px; color: var(--primary); }

.settings-card { display: grid; gap: 8px; }

@media (min-width: 720px) {
  .home-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .hero { grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; }
  .hero-art { grid-column: 1 / -1; }
  .hero-mascot { top: auto; bottom: 18px; }
}

@media (max-width: 350px) {
  .world-ornament, .fact-seal, .hero-mascot { width: 48px; }
  .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}