/* Home: the level-select screen. Each daily game is a level; a menu cursor marks the next one to play. */

.intro{display:flex;flex-direction:column;gap:10px}
.intro .eyebrow{margin:0;color:var(--accent-text)}
.intro h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,9vw,3.1rem);line-height:1.02;text-wrap:balance}
.intro .lede{margin:0;color:var(--muted);max-width:52ch;font-size:1.05rem}

.run{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
.run .label{color:var(--muted)}
.run .count{margin-left:auto;color:var(--fg)}
.pips{display:inline-flex;gap:6px}
.pip{width:16px;height:16px;border-radius:3px;border:1px solid var(--accent-deep);background:transparent}
.pip.done{background:var(--good);border-color:var(--good)}

.levels{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.level{
  position:relative;display:grid;gap:8px;
  padding:18px 18px 16px 46px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--fg);text-decoration:none;box-shadow:var(--shadow);
  transition:transform .15s ease,border-color .15s ease;
}
a.level:hover{border-color:var(--accent-deep);transform:translateY(-2px)}
.level::before{
  content:"▸";position:absolute;left:18px;top:16px;
  font-family:var(--font-hud);font-size:1.05rem;color:var(--line);
}
.level.next::before{color:var(--accent);animation:cursor 1.1s steps(2,start) infinite}
@keyframes cursor{to{visibility:hidden}}
.lv-no{color:var(--accent-text)}
.lv-name{font-family:var(--font-display);font-size:1.6rem;line-height:1.05}
.lv-desc{color:var(--muted);max-width:46ch}
.lv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.lv-go{color:var(--accent-text)}
.level.locked{background:transparent;border-style:dashed;box-shadow:none}
.level.locked .lv-no,.level.locked .lv-name{color:var(--muted)}

.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:14px 18px}
.rule{display:flex;flex-direction:column;gap:4px}
.rule .hud{color:var(--accent-text)}
.rule p{margin:0;color:var(--muted);font-size:.95rem}

@media (min-width:560px){
  .levels{grid-template-columns:repeat(2,minmax(0,1fr))}
}