/* The page around a brain puzzle (games/sudoku.html, games/owldoku.html; js/shared/puzzle-page.js),
   after board-game.css: the start page with the puzzle of the day, the head with the clock, today's list. */
.hero{background:linear-gradient(135deg,rgba(240,165,0,.18),var(--card) 60%)}
.hero .sub{color:var(--accent)}
#v-home h2{margin-top:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#v-home > .muted{margin:-6px 0 12px;font-size:13px}
.levels .choice{position:relative}
.choice .state{font-style:normal;font-size:12px;font-weight:700;color:var(--green);margin-top:4px}
.choice .state:empty{display:none}
.streak{font-size:13px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:1px 10px}
#v-home .choices + .choices{margin-top:12px}

.pz-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pz-head h2{margin:0;font-size:18px}
.pz-time{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted);margin-left:auto}
.pz-time.done{color:var(--green)}
.pz-tip{margin-top:10px}

.side-list{list-style:none;display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:14px;font-variant-numeric:tabular-nums}
.side-list li{display:grid;grid-template-columns:2.2em 1fr auto;gap:6px;color:var(--muted)}
.side-list li.you{color:var(--text);font-weight:700}
.side-list b{color:var(--text)}
#side-body p{color:var(--muted);font-size:13px;margin-top:8px}

/* A phone: the board uses the whole width, the head and the tip get smaller */
@media (max-width:520px){
  .wrap:has(> #v-game:not([hidden])){padding:12px 8px 40px}
  .pz-head h2{font-size:15px}
  .pz-time{font-size:17px}
  .pz-tip{font-size:12px}
}
.side-list .title{font-size:15px;font-weight:900;color:var(--purple)}