/* ===================== Dailyd — medals, streak saves, Monday recap, app (PWA) =====================
   Everything here is driven by the decade-theme variables in themes.css (--form-bg/--form-ink/--edge/--edge-w/--edge-shadow
   for floating panels, --panel/--panel-ink inside the modal sheet), so it picks up each era's look automatically and keeps
   the solid black/white edges. Calm by design: small type, no animation beyond a fade. */
:root{--t0:#b07142;--t1:#9ea3aa;--t2:#d4a52a;--t3:#5fb7c4}
.recap,.medal-toast,.install-hint,.update-bar,.offline-pill,.save-note{
  background:var(--form-bg);color:var(--form-ink);border:var(--edge-w) solid var(--edge);border-radius:var(--panel-r,14px);box-shadow:var(--edge-shadow)}

/* splash: streak-save note + recap card + install hint */
.save-note{margin:4px auto 10px;max-width:360px;padding:7px 12px;font-size:.88rem;font-weight:600}
.recap{position:relative;width:min(380px,100%);margin:4px auto 14px;padding:12px 14px 10px;text-align:left}
.recap h2{margin:0 34px 0 0;font:400 1.15rem/1.15 var(--logo-font);color:inherit}
.recap-dates{margin:2px 0 8px;font-size:.8rem;opacity:.8}
.recap-x{position:absolute;right:6px;top:6px;width:32px;height:32px;color:inherit}
.recap-x svg{width:16px;height:16px}
.recap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.recap-grid div{border:1.5px solid var(--edge);border-radius:10px;padding:5px 2px}
.recap-grid b{display:block;font:400 1.25rem/1.1 var(--logo-font)}
.recap-grid span{display:block;font-size:.66rem;line-height:1.2;opacity:.85}
.recap-medals{margin:8px 0 0;font-size:.8rem;display:flex;flex-wrap:wrap;gap:4px 10px}
.recap-rank{margin:6px 0 0;font-size:.8rem}
.recap-rank:empty{display:none}
.install-hint{display:flex;align-items:center;gap:8px;margin:16px auto 0;padding:6px 8px 6px 12px;font-size:.82rem;max-width:360px;box-shadow:none;border-width:1.5px}
.install-hint .ih-tx{flex:1;text-align:left}
.install-hint .link-btn{color:inherit;font-weight:700}
.ih-x,.mt-x{background:none;border:0;color:inherit;cursor:pointer;font-size:.9rem;padding:4px 6px;opacity:.75}

/* medal toast: small, bottom, fades out by itself */
.medal-toast{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 12px;width:max-content;max-width:min(440px,calc(100vw - 24px));font-size:.86rem;transition:opacity .35s}
.medal-toast.out{opacity:0}
.medal-toast .mt-ic{font-size:1.25rem}
.medal-toast .mt-tx{flex:1;line-height:1.3}
.medal-toast small{opacity:.8}
.medal-toast .link-btn{color:inherit;font-weight:700}

/* "New version ready" + offline pill */
.update-bar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:160;padding:9px 16px;font:700 .9rem var(--font-body);cursor:pointer}
.offline-pill{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:140;padding:5px 12px;font-size:.78rem;box-shadow:none;border-width:1.5px}

/* stats sheet: streak saves / week streak row + Medals button */
.streak-row{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:.85rem;margin:-4px 0 12px}
.streak-row b{font-family:var(--logo-font);font-weight:400;font-size:1.05rem}
.medals-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;margin:0 0 14px;cursor:pointer;
  background:transparent;color:inherit;border:2px solid var(--panel-ink);border-radius:12px;font:inherit}
.medals-btn>span:first-child{font-size:1.4rem}
.medals-btn>span:nth-child(2){flex:1}
.medals-btn b{display:block}
.medals-btn small{display:block;opacity:.8;font-size:.8rem}

/* medals sheet */
.medal-disc{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:1.15rem;border:2px solid var(--panel-ink);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%),var(--tc,#ddd)}
.medal-disc.t-1{--tc:transparent;border-style:dashed}
.medal-disc.t0{--tc:var(--t0)} .medal-disc.t1{--tc:var(--t1)} .medal-disc.t2{--tc:var(--t2)} .medal-disc.t3{--tc:var(--t3)}
.medal-list,.medal-grid,.stamp-grid{list-style:none;margin:6px 0 4px;padding:0}
.medal-list{display:flex;flex-direction:column;gap:6px}
.medal-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--panel-ink);border-radius:12px}
.medal-row .mr-tx{flex:1;min-width:0}
.medal-row .mr-tx b{display:block;font-size:.92rem}
.medal-row .mr-tx small{display:block;font-size:.76rem;opacity:.8}
.medal-row .bar{display:block;height:6px;border-radius:99px;margin-top:5px;background:color-mix(in srgb,var(--panel-ink) 15%,transparent);overflow:hidden}
.medal-row .bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.medal-row .mr-n{text-align:right;font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:700}
.medal-row .mr-n small{display:block;font-weight:400;font-size:.7rem;opacity:.8}
.medal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.medal-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px 4px;border:1.5px solid var(--panel-ink);border-radius:12px}
.medal-tile b{font-size:.8rem;line-height:1.2}
.medal-tile small{font-size:.7rem;opacity:.8}
.stamp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stamp{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:7px 10px;border:2px dashed var(--panel-ink);border-radius:10px}
.stamp span{grid-row:span 2;font-size:1.2rem}
.stamp b{font-size:.84rem}
.stamp small{font-size:.72rem;opacity:.8;line-height:1.2}

/* App & reminders sheet */
.install-steps{padding-left:18px;margin:6px 0}
.install-steps li{font-size:.88rem;margin-bottom:4px}
.remind-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:6px 0}
.remind-row label{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}
.remind-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.remind-row input[type=time]{height:38px;border:2px solid var(--panel-ink);border-radius:8px;padding:0 8px;font:inherit;background:#fff;color:#111}

/* era tweaks */
[data-theme="2000s"] .recap h2,[data-theme="2000s"] .medal-toast b{font-weight:900}
[data-theme="2000s"] .recap,[data-theme="2000s"] .save-note,[data-theme="2000s"] .install-hint,[data-theme="2000s"] .medal-toast{--edge:#000;box-shadow:5px 5px 0 #ff2d8a}
[data-theme="2000s"] .recap-grid div:nth-child(1){background:#ff2d8a} [data-theme="2000s"] .recap-grid div:nth-child(2){background:#8fd400}
[data-theme="2000s"] .recap-grid div:nth-child(3){background:#00aeef} [data-theme="2000s"] .recap-grid div:nth-child(4){background:#ffd200}
[data-theme="2000s"] .modal .sheet .medal-row,[data-theme="2000s"] .modal .sheet .medal-tile,[data-theme="2000s"] .modal .sheet .stamp,[data-theme="2000s"] .medals-btn{border-color:#000}
[data-theme="2010s"] .recap,[data-theme="2010s"] .medal-toast,[data-theme="2010s"] .recap-grid div,[data-theme="2010s"] .medal-row,[data-theme="2010s"] .medal-tile,[data-theme="2010s"] .medals-btn{border-radius:2px}
[data-theme="1960s"] .recap-grid div,[data-theme="1960s"] .medal-row,[data-theme="1960s"] .medals-btn{border-radius:999px}
[data-theme="1960s"] .recap-grid div{border-radius:16px}
[data-theme="1980s"] .medal-row .bar i{background:linear-gradient(90deg,#20e3ff,#ff2e88)}
[data-theme="1980s"] .recap h2{color:#ff2e88;text-shadow:0 0 8px rgba(255,46,136,.7)}
/* 2020s Liquid Glass surfaces */
[data-theme="2020s"] .recap,[data-theme="2020s"] .medal-toast,[data-theme="2020s"] .install-hint,[data-theme="2020s"] .update-bar,[data-theme="2020s"] .offline-pill,[data-theme="2020s"] .save-note{
  background:var(--sheen),var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);color:var(--form-ink)}
[data-theme="2020s"] .recap{border-radius:26px}
[data-theme="2020s"] .medal-toast,[data-theme="2020s"] .install-hint,[data-theme="2020s"] .update-bar,[data-theme="2020s"] .offline-pill,[data-theme="2020s"] .save-note{border-radius:999px}
[data-theme="2020s"] .recap-grid div,[data-theme="2020s"] .medal-row,[data-theme="2020s"] .medal-tile,[data-theme="2020s"] .stamp,[data-theme="2020s"] .medals-btn{border:1px solid var(--glass-edge);background:rgba(255,255,255,.35);box-shadow:0 0 0 1px var(--glass-hair);border-radius:18px}
@media (prefers-color-scheme:dark){ [data-theme="2020s"] .recap-grid div,[data-theme="2020s"] .medal-row,[data-theme="2020s"] .medal-tile,[data-theme="2020s"] .stamp,[data-theme="2020s"] .medals-btn{background:rgba(255,255,255,.06)} }
@media (max-width:440px){ .recap-grid b{font-size:1.1rem} .medal-grid{grid-template-columns:repeat(3,1fr)} .stamp-grid{grid-template-columns:1fr 1fr} }

/* ===================== puzzle-first landing (notices above the puzzle) + result extras ===================== */
.notices{display:flex;flex-direction:column;align-items:stretch;max-width:760px;margin:0 auto}
.notices>[hidden]{display:none}
.notices .recap{width:min(520px,100%);margin:0 auto 12px}
.notices .save-note,.notices .week-note{margin:0 auto 10px;max-width:520px;text-align:center}
.intro{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 12px;padding:9px 12px;font-size:.86rem;line-height:1.35;
  background:var(--form-bg);color:var(--form-ink);border:var(--edge-w) solid var(--edge);border-radius:var(--panel-r,14px);box-shadow:var(--edge-shadow)}
.intro-tx{flex:1 1 280px}
.intro-act{display:flex;align-items:center;gap:12px;margin-left:auto}
.intro .link-btn{color:inherit;font-weight:700}
.intro .intro-ok{min-height:34px;padding:0 14px;font-size:.88rem}
#game>.install-hint{margin:14px auto 0}
/* results: one fun-fact line + one crowd line, small type */
.extras{margin:0 0 10px;font-size:.8rem;line-height:1.35}
.extras p{margin:0 0 3px}
.extras .crowd{color:var(--muted)}
.extras b{font-weight:700}
/* era looks for the how-to strip (same family as the streak-save note) */
[data-theme="2000s"] .intro{--edge:#000;box-shadow:5px 5px 0 #ff2d8a}
[data-theme="2020s"] .intro{background:var(--sheen),var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);color:var(--form-ink);border-radius:22px}
html[data-theme="2000s"]:not(:where([data-preview])) .intro{--edge:#0f2a3d;border-radius:16px;box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(10,60,110,.25)}
html[data-theme="2010s"]:not(:where([data-preview])) .intro{border-radius:14px}
html[data-theme="1970s"]:not(:where([data-preview])) .intro{border-radius:2px}
html[data-theme="1960s"]:not(:where([data-preview])) .intro{border-radius:22px}
@media (max-width:440px){ .intro{font-size:.82rem;padding:8px 10px} .intro-act{width:100%;justify-content:flex-end} }