/* Lantern Logic campaign (levels/): level select, tutorial, settings.
   Builds on site.css; same tokens, no new colours except the danger button. */
.view[hidden] { display: none !important; }
.campaign { min-height: 60vh; }

/* ------------------------------------------------------------ level select */
.camp { max-width: 760px; margin: 0 auto; padding: 8px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.camp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.camp-head h1 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); }
.camp-head h1:focus, .pack-head h2:focus, .settings h1:focus, .play-head h1:focus { outline: none; }
.camp-head .btn { padding: 0 18px; }

.daily-card {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius);
  color: var(--text); text-decoration: none;
}
.daily-card:hover { background: var(--surface-2); color: var(--text); }
.daily-card > .ico { color: var(--gold); width: 24px; height: 24px; }
.daily-card > .ico:last-child { color: var(--text-dim); margin-left: auto; }
.daily-copy { display: grid; gap: 2px; min-width: 0; }
.daily-copy strong { font-weight: 600; }
.daily-copy span { color: var(--text-dim); font-size: 0.92rem; }

.pack-nav { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; text-align: center; margin-top: 6px; }
.pack-head h2 { font-size: 1.5rem; scroll-margin-top: 16px; }
.btn-icon { width: 48px; padding: 0; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }
.tile {
  display: grid; place-items: center; align-content: center; gap: 4px; min-height: 60px; aspect-ratio: 1 / 1.02;
  border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none;
}
a.tile:hover { background: var(--surface-3); color: var(--text); }
.tile-num { font: 600 1.15rem/1 var(--body); font-variant-numeric: tabular-nums; }
.tile-stars { display: flex; gap: 1px; }
.tile-stars .star { width: 13px; height: 13px; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linejoin: round; }
.tile-stars .star.on { fill: var(--gold); stroke: var(--gold); }
.tile.is-bonus { box-shadow: inset 0 0 0 2px var(--gold-deep); }
.tile.is-next { background: var(--gold); color: var(--on-gold); }
a.tile.is-next:hover { background: #ffd387; color: var(--on-gold); }
.tile.is-next .star { stroke: var(--on-gold); }
.tile.is-locked { background: var(--surface); color: var(--text-faint); }
.tile-lock { width: 16px; height: 16px; }

.camp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.camp-links .btn { flex: 1 1 150px; }
.packs-title { font-size: 1.4rem; margin-top: 10px; }
.packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pack-row {
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: 400 0.95rem/1.3 var(--body); text-align: left; cursor: pointer;
}
.pack-row:hover { background: var(--surface); }
.pack-row.is-current { background: var(--surface-2); }
.pack-name { font: 600 1.02rem var(--display); color: var(--gold); }
.pack-range { color: var(--text-dim); }
.pack-score { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pack-score .ico { width: 16px; height: 16px; }
.pack-score .star.on { fill: var(--gold); stroke: var(--gold); }
.camp-about { margin-top: 20px; }
.portal-note { color: var(--text-dim); font-size: 0.92rem; }

/* ------------------------------------------------------------ game / tutorial */
.play.is-locked .board-wrap { display: none; }
.pager a[hidden] { display: none; }
.play.is-locked .toggles, .play.is-locked .toolbar { visibility: hidden; }
.tut-text { color: var(--text-dim); margin-top: 6px; max-width: 46ch; }
.cell.guide { box-shadow: inset 0 0 0 4px var(--focus); background: rgba(255, 217, 143, 0.28); }
.win-actions .btn { flex: 1 1 120px; }

/* ------------------------------------------------------------ settings */
.settings { max-width: 760px; margin: 0 auto; padding: 8px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.settings h1 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); }
.settings h2 { font-size: 1.4rem; margin-top: 10px; }
.settings .status { grid-area: auto; text-align: left; }
.set-list { display: grid; gap: 4px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0 12px; border-bottom: 1px solid var(--surface-2); }
.set-row .switch { justify-self: start; color: var(--text); font-size: 1.02rem; padding-left: 0; }
.set-row p { color: var(--text-dim); font-size: 0.92rem; padding-left: 48px; }
.reset { display: grid; gap: 12px; justify-items: start; }
.reset-confirm { background: var(--surface); border: 1px solid var(--surface-3); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; }
.reset-confirm[hidden] { display: none; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-danger { background: var(--danger); color: #2a0b0b; }
.btn-danger:hover { background: #ff9c9c; color: #2a0b0b; }

/* ------------------------------------------------------------ portal builds */
.portal-head { max-width: 1180px; margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; min-height: 60px; }
.portal-head .brand { cursor: default; }

/* in-game "Reduce motion" setting (the system setting is handled in site.css) */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }