/* Daily Doodle+ and the archive. */
.plus h1 { margin-top: 18px; }
.plus .lead { margin-top: 6px; }
.perks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; color: var(--ink); }
.perks li svg { flex: none; width: 22px; height: 22px; color: var(--pass); margin-top: -1px; }
.plans { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan {
  position: relative; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink);
  padding: 14px 14px 12px; display: grid; gap: 2px; touch-action: manipulation;
}
.plan > :not(.line) { position: relative; }
.plan .line rect { fill: var(--card); }
.plan[aria-checked="true"] .line rect { stroke-width: 3; }
.plan[aria-checked="true"]::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 36px; height: 14px; background: var(--hl-yellow);
  mix-blend-mode: var(--hl-blend); transform: skewX(-6deg); border-radius: 3px; z-index: 1;
}
.plan-name { font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.plan-price { font: 26px/1.1 var(--display); margin-top: 6px; z-index: 2; }
.plan-note { font-size: 12px; color: var(--ink-3); }
.plus .actions { margin-top: 22px; display: grid; gap: 10px; text-align: center; }
.plus .field { margin-top: 16px; }
.plus #restore-note { margin-top: 10px; min-height: 1.4em; }
.plus .footer { margin-top: auto; padding-top: 24px; text-align: center; display: grid; gap: 4px; }
.plus .tip { font-size: 13px; color: var(--ink-2); font-weight: 700; }

/* The archive: past days, your drawings, your streak. */
.archive h1 { margin-top: 18px; }
.stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { position: relative; padding: 10px 12px; text-align: center; }
.stat > :not(.line) { position: relative; }
.stat .line rect { fill: var(--card); }
.stat b { display: block; font: 34px/1 var(--display); color: var(--ink); }
.stat span { font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.days { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.day {
  position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; min-height: 64px; color: var(--ink); text-decoration: none;
}
.day > :not(.line) { position: relative; }
.day .line rect { fill: var(--card); }
.day .thumb { width: 56px; height: 84px; background: #fff; box-shadow: 2px 3px 0 0 var(--rule); position: relative; }
.day .thumb canvas { width: 100%; height: 100%; display: block; }
.day .thumb.empty { height: 44px; background: none; box-shadow: none; display: grid; place-items: center; color: var(--ink-3); font: 22px/1 var(--display); }
.day .when { font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.day .word { font: 24px/1.1 var(--display); margin-top: 4px; }
.day .guess { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.day .verdict { font: 20px/1 var(--display); padding: 2px 6px; transform: rotate(-6deg); }
.day .verdict.pass { color: #1f8a4c; } .day .verdict.fail { color: #d62839; }
.day .go { font: 700 14px/1 var(--body); display: flex; align-items: center; gap: 4px; }
.day .go svg { width: 18px; height: 18px; }
.day.locked { color: var(--ink-3); }
.archive .empty-note { margin-top: 18px; text-align: center; }
.archive .cta { margin-top: 16px; }
/* 80+ rows: clean outlines here, since a wobble filter per row is too heavy to scroll on a phone. */
.day .line rect { filter: none; }

/* --- Stats page ------------------------------------------------------------------------ */
.statspage h1 { margin-top: 18px; }
.statspage .meta#who { margin-top: 4px; }
.stats.four { grid-template-columns: repeat(2, 1fr); }
.stats.four .stat b { font-size: 38px; }
.statspage .block { margin-top: 28px; }
.statspage .block h2 { margin-bottom: 10px; }
.strip30 { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; }
.k { display: inline-block; aspect-ratio: 1; border-radius: 4px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule); }
.k.none { background: none; box-shadow: inset 0 0 0 1.5px var(--rule); }
.k.pass { background: #1f8a4c; box-shadow: none; }
.k.fail { background: #d62839; box-shadow: none; }
.strip30-ends { display: flex; justify-content: space-between; margin-top: 6px; }
.legend { display: flex; gap: 14px; margin-top: 8px; align-items: center; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend .k { width: 12px; }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.wd { display: grid; gap: 6px; justify-items: center; }
.wd .bars { position: relative; width: 100%; height: 80px; border-bottom: 2px solid var(--ink); }
.wd .bars i { position: absolute; left: 18%; right: 18%; bottom: 0; border-radius: 4px 4px 0 0; }
.wd .bars .drawn { background: var(--rule); }
.wd .bars .passed { background: #1f8a4c; left: 30%; right: 30%; }
.wd span { font: 700 12px/1 var(--body); color: var(--ink-2); }
.misses { display: grid; gap: 10px; }
.miss { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 10px 12px; }
.miss > :not(.line) { position: relative; }
.miss .line rect { fill: var(--card); filter: none; }
.miss .thumb { width: 64px; height: 96px; background: #fff; box-shadow: 2px 3px 0 0 var(--rule); }
.miss .thumb canvas { width: 100%; height: 100%; display: block; }
.miss .saw { margin: 0; font: 26px/1.1 var(--display); color: var(--ink); }
.miss .was { margin-top: 4px; }
.misses .empty { color: var(--ink-3); }
.swatch-dot { display: block; width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 6px; }
.stats-foot { margin-top: 32px; display: grid; gap: 10px; text-align: center; }