/* Home page: day rows, rings, statistics dialog. After theme.css, before menu.css. */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--pg-bg);
      background-attachment: fixed;
      color: var(--pg-fg);
      font-family: 'Segoe UI', Arial, sans-serif;
      min-height: 100vh;
    }
    .home-header {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.55rem 0.8rem 0.45rem;
      background: var(--hdr-bg);
      backdrop-filter: blur(8px);
      border-bottom: 1.5px solid var(--hdr-bd);
      box-shadow: 0 2px 12px var(--hdr-sh);
      /* backdrop-filter makes this a stacking context; lift it (and the help
         menu inside it) above the page content that follows in the DOM. */
      position: relative; z-index: 50;
    }
    .home-header a { display: flex; align-items: center; text-decoration: none; gap: 0.6rem; }
    .home-title {
      font-size: 1.05rem; font-weight: 900; letter-spacing: 0.04em;
      background: linear-gradient(90deg, #f0c030 0%, #fde68a 50%, #f59e0b 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .brand-lockup { display: flex; flex-direction: column; line-height: 1.15; }
    .home-tag { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; color: #f0c030; }  /* = page title colour; light theme sets #895a03 */
    .content { padding: 1rem 0.8rem 2rem; max-width: 480px; margin: 0 auto; }


    /* ── Stats (shown in the #stats-overlay dialog) ── */
    /* Stats table: a Stars row (average per day played), then the streaks under
       a Streaks | Max | Current header row. */
    .stk-tbl { width: 100%; border-collapse: collapse; margin-bottom: 1rem; color: #f0c030; }
    .stk-tbl th {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
      text-align: right; padding: 0 0 0.3rem 0.5rem; opacity: 0.85;
    }
    .stk-tbl td { font-size: 0.9rem; font-weight: 800; text-align: right; padding: 0.22rem 0 0.22rem 0.5rem; }
    .stk-tbl td:first-child {
      text-align: left; padding-left: 0;
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    }
    html[data-theme="light"] .stk-tbl { color: #895a03; }
    .stk-tbl .stk-hdr th { padding-top: 0.7rem; }
    .stk-tbl .stk-hdr th:first-child { text-align: left; padding-left: 0; }
    /* Stars-per-day distribution (it replaced restarts per round) — Wordle's
       guess-distribution layout, one entry per finished day, all in one colour.
       Bars use a fixed stepped scale (home.js). The header row puts a star over
       the label column and the title beside it, so the title sits level with
       the bars. */
    .rd-title {
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
      text-transform: uppercase; color: #f0c030; margin: 0.4rem 0 0.5rem;
    }
    .rd-row  { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 4px; }
    .rd-lbl  { width: 1.6em; flex-shrink: 0; font-size: 0.82rem; font-weight: 800;
               color: #f0c030; text-align: right; }
    /* Solid gold — the bright end colour of the day rows' star bar (.thermo-fill) — softened
       to 90% so it doesn't compete with the star bar above. Only the fill is
       softened; the count text stays full strength. */
    .rd-bar  { min-width: 1.8em; padding: 0.12rem 0.45rem; text-align: right;
               font-size: 0.78rem; font-weight: 800; color: #1a1218;
               background: rgba(240,192,48,0.9); border-radius: 3px; }
    .rd-empty { font-size: 0.82rem; color: #f0c030; opacity: 0.8; }
    html[data-theme="light"] .rd-title,
    html[data-theme="light"] .rd-lbl,
    html[data-theme="light"] .rd-empty { color: #895a03; }
    html[data-theme="light"] .rd-bar   { background: rgba(137,90,3,0.9); color: #fdf5e4; }
    .stat-section-lbl {
      font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--sct-lbl); margin-bottom: 0.4rem;
    }
    .week-chart    { display: flex; gap: 5px; margin-bottom: 0.3rem; }
    .chart-col     { flex: 1; display: flex; flex-direction: column; align-items: center; }
    .chart-day-lbl { font-size: 0.58rem; font-weight: 700; padding-top: 3px; }
    .stat-counts { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
    .stat-count-box {
      flex: 1; background: var(--box-bg); border-radius: 8px;
      padding: 0.4rem 0.5rem; text-align: center;
    }
    .stat-count-box .scb-n { font-size: 1.1rem; font-weight: 800; color: #f0c030; }
    .stat-count-box .scb-l { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .stat-stars-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
    .stat-star-box {
      flex: 1; background: var(--star-box-bg); border-radius: 8px;
      padding: 0.35rem 0.4rem; text-align: center;
    }
    .stat-star-box .ssb-s { font-size: 0.75rem; letter-spacing: 1px; }
    .stat-star-box .ssb-n { font-size: 0.9rem; font-weight: 700; color: var(--scbn); }

    /* ── Day rows ── */
    .day-row { margin-bottom: 0.14rem; overflow: hidden; }
    .day-date-lbl {
      font-size: 0.52rem; font-weight: 800; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--day-dt);
      padding: 0.15rem 0.75rem 0;
    }
    .day-body {
      display: flex; align-items: stretch; gap: 0; padding: 0.4rem 0.5rem 0.5rem;
      height: 72px;
    }

    /* ── Level chips ── */
    .level-chips { display: flex; gap: 2px; flex: 3; min-width: 0; }
    .chip {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 3px;
      background: var(--chip-bg); border: 1px solid var(--chip-bd);
      border-radius: 7px; padding: 0.85rem 0.2rem;
      text-decoration: none; color: inherit;
      transition: background 0.12s, border-color 0.12s;
      min-width: 0;
    }
    .chip:hover { filter: brightness(1.08); }
    .chip.unavail { opacity: 0.25; pointer-events: none; }
    .chip.played  { background: var(--chip-played-bg); border-color: var(--chip-played-bd); }
    .chip.locked  { background: rgba(120,120,130,0.05); border-color: rgba(150,150,160,0.16); opacity: 0.55; pointer-events: none; }
    .chip.locked .chip-name { color: #6b6b72; }
    .chip-name { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--chip-fg); }
    .chip.played .chip-name   { color: var(--chip-played-fg); }
    /* Ghost chips for days with no puzzles */
    .ghost-chips { flex: 3; min-width: 0; display: flex; gap: 2px; }
    .ghost-chip  { flex: 1; border: 1px dashed var(--ghost-bd); border-radius: 7px; background: var(--ghost-bg); min-height: 72px; }

    /* ── Score viz (vertical thermometer, 40% of row) ── */
    .score-viz {
      flex: 2; align-self: stretch;
      border-left: 1px solid var(--viz-bd);
      margin-left: 3px; padding: 3px 3px 3px 5px;
      display: flex; flex-direction: column;
    }
    .score-viz.ghost-thermo { opacity: 0.18; }
    .thermo-wrap {
      position: relative; flex: 1; width: 100%;
      background: var(--therm-bg); border-radius: 6px; overflow: hidden;
      display: flex; align-items: center; justify-content: flex-start;
      box-shadow: inset 0 0 0 1px var(--therm-sh);
    }
    .thermo-fill {
      position: absolute; top: 1px; left: 1px; bottom: 1px;
      max-width: calc(100% - 2px);
      background: linear-gradient(90deg, #a06020, #f0c030);
      border-radius: 5px; transition: width 0.5s ease;
    }
    /* Golden day: all three rounds perfect (restarts allowed) — one gold ring.
       Super-golden: golden with no restarts — a second ring, drawn OUTSIDE the
       bar as an outline. It can't go inside: a perfect day's fill covers the
       whole bar and would hide it. Offset 1px + width 1px = 2px out, inside
       .score-viz's 3px padding so nothing clips it. */
    .thermo-wrap.golden-nine  { box-shadow: inset 0 0 0 1px #f0c030; }
    .thermo-wrap.super-golden { outline: 1px solid #f0c030; outline-offset: 1px; }
    .thermo-stars {
      position: relative; z-index: 1;
      font-size: 0.65rem; font-weight: 900; color: #f0c030;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
      word-break: break-all; text-align: left; line-height: 1.4;
      padding: 3px 3px 3px 5px; align-self: center;
    }

    /* ── Debug ── */
    .btn-reset-lbl {
      font-size: 0.6rem; font-weight: 700; background: #7c2d12; color: #fbbf24;
      border: none; border-radius: 20px; padding: 0.15em 0.5em;
      cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
    }
    .debug-bar {
      background: rgba(124,45,18,0.3); border: 1px solid #7c2d12;
      border-radius: 8px; padding: 0.4rem 0.7rem; margin-bottom: 0.8rem;
      font-size: 0.7rem; color: #fbbf24; display: flex; align-items: center; gap: 0.5rem;
    }
    .debug-bar[hidden] { display: none; }