/* Daily Devo: warm paper, serif reading text, gold accents (the same family as the Exodus games). */
:root {
  --paper: #f6efe2; --card: #fffaf0; --ink: #2f2416; --soft: #7d6a52; --line: #e4d8c3;
  --gold: #d99a38; --gold-hi: #f6d27a; --accent: #b5651d; --good: #3f8f5a; --bad: #b8432f;
  --shadow: 0 6px 20px rgba(60, 40, 15, .10);
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1c1712; --card: #26201a; --ink: #f1e8d8; --soft: #b8a68b; --line: #3a3128;
          --accent: #e3a641; --shadow: 0 6px 20px rgba(0, 0, 0, .35); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* header */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
       padding: 10px 16px; background: color-mix(in srgb, var(--paper) 92%, transparent);
       -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font: 600 19px/1.2 Georgia, "Times New Roman", serif; color: var(--ink); text-decoration: none; white-space: nowrap; }
.top nav { display: flex; gap: 4px; }
.top nav a { padding: 7px 11px; border-radius: 999px; text-decoration: none; color: var(--soft); font-size: 15px; font-weight: 600; white-space: nowrap; }
.top nav a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
main { max-width: 640px; margin: 0 auto; padding: 0 16px 24px; }

/* calendar: one week row folded, the whole month open */
.cal { margin: 14px 0 6px; background: var(--card); border-radius: 16px; padding: 10px 10px 12px; box-shadow: var(--shadow); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-title { border: 0; background: none; font: 600 17px Georgia, serif; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.cal-title::after { content: " ▾"; color: var(--soft); font-size: 13px; }
.cal.open .cal-title::after { content: " ▴"; }
.cal-nav { border: 0; background: none; font-size: 26px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--soft); }
.cal-nav:disabled { opacity: .25; cursor: default; }
.cal-days, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-days span { text-align: center; font-size: 12px; color: var(--soft); font-weight: 600; padding: 4px 0; }
.cal-grid .cell { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
                  background: var(--paper) center / cover no-repeat; }
.cal-grid .cell span { position: absolute; left: 4px; top: 3px; font-size: 12px; font-weight: 700; color: #fff;
                       text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.cal-grid .cell.empty { cursor: default; background: none; }
.cal-grid .cell.empty span { color: var(--soft); text-shadow: none; opacity: .5; }
.cal-grid .cell.pad { visibility: hidden; }
.cal-grid .cell.sel { outline: 3px solid var(--gold); outline-offset: -3px; }
.cal-grid .cell.review::after { content: "★"; position: absolute; right: 4px; bottom: 2px; color: var(--gold-hi); font-size: 13px;
                                text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.cal:not(.open) .cal-grid .cell:not(.thisweek) { display: none; }

/* a day */
.day { margin-top: 14px; }
.pic { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--line); aspect-ratio: 2 / 3; max-height: 56vh; width: 100%; margin: 0 auto; }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge { position: absolute; left: 12px; top: 12px; background: rgba(20, 14, 8, .6); color: #fff; font-size: 13px; font-weight: 700;
         padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kicker { margin: 18px 0 2px; color: var(--soft); font-size: 14px; letter-spacing: .02em; }
h1 { font: 600 30px/1.2 Georgia, "Times New Roman", serif; margin: 0 0 14px; }
.card { background: var(--card); border-radius: 16px; padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow); }
.card h2 { font: 600 18px/1.3 Georgia, serif; margin: 0 0 8px; }
.card p { margin: 8px 0; }
.song { display: flex; gap: 12px; align-items: center; }
.song .play { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
              background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2a1a05; font-size: 20px; box-shadow: var(--shadow); }
.song small { display: block; color: var(--soft); font-size: 14px; line-height: 1.45; margin-top: 2px; }
.prose { font: 18px/1.7 Georgia, "Times New Roman", serif; }
.prose h2 { font: 600 19px/1.3 Georgia, serif; margin: 26px 0 6px; }
.prose p { margin: 10px 0; }
.passage { border-left: 3px solid var(--gold); padding: 4px 0 4px 14px; margin: 10px 0; font-style: italic; }
.passage cite { display: block; font-style: normal; font-size: 14px; color: var(--soft); margin-top: 6px; }

/* polls, quizzes, the open question */
.opts { display: grid; gap: 8px; margin-top: 10px; }
.opt { text-align: left; border: 1.5px solid var(--line); background: var(--paper); border-radius: 12px; padding: 11px 14px;
       cursor: pointer; position: relative; overflow: hidden; line-height: 1.4; }
.opt:disabled { cursor: default; }
.opt .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--gold) 22%, transparent); z-index: 0; transition: width .4s; }
.opt .t { position: relative; z-index: 1; }
.opt .n { position: relative; z-index: 1; float: right; font-weight: 700; margin-left: 10px; }
.opt.mine { border-color: var(--gold); }
.opt.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--paper)); }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--paper)); }
.note { color: var(--soft); font-size: 14px; margin-top: 8px; }
.reveal { border: 0; background: none; color: var(--accent); font-weight: 700; padding: 8px 0 0; cursor: pointer; }
.answer { margin-top: 8px; padding: 10px 12px; background: var(--paper); border-radius: 10px; }

/* moving between days */
.steps { display: flex; gap: 10px; margin: 22px 0 6px; }
.steps a { flex: 1; text-align: center; padding: 12px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow);
           text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; }
.steps a.off { visibility: hidden; }

/* books and games */
.books h1 { margin-top: 18px; }
.book .legs { list-style: none; padding: 0; margin: 8px 0 0; }
.book .legs li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.book .legs li a { text-decoration: none; color: var(--ink); font-weight: 600; }
.book .legs .when { color: var(--soft); white-space: nowrap; }
.book .legs .ahead { color: var(--soft); }
.games { display: grid; gap: 10px; margin-top: 10px; }
.game { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--ink);
        background: var(--paper); border: 1.5px solid var(--line); }
.game b { display: block; font-family: Georgia, serif; }
.game small { color: var(--soft); }
.game .ic { font-size: 28px; }

.foot { max-width: 640px; margin: 0 auto; padding: 8px 16px 40px; color: var(--soft); font-size: 12.5px; line-height: 1.5; }
.loading { color: var(--soft); text-align: center; padding: 40px 0; }

/* the button that opens the whole month: clearly a button, big enough to tap */
.cal-more { display: block; width: 100%; margin-top: 10px; min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px;
            background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.cal-grid .cell.empty span, .cal-grid .cell:not([style]) span { color: var(--soft); text-shadow: none; }
/* text that came from Telegram, shaped for a page */
.prose ul { margin: 8px 0 12px; padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose .readall a { display: inline-block; font: 600 15px -apple-system, sans-serif; text-decoration: none; padding: 8px 14px;
                    border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); }
.prose .findit { background: var(--card); border-radius: 12px; padding: 10px 14px; font-size: 16px; }
.prose .findit::before { content: "🔎 Find it in the chapter"; display: block; font: 700 13px -apple-system, sans-serif; color: var(--soft);
                         letter-spacing: .03em; margin-bottom: 2px; }
.lines { margin: 8px 0 0; padding-left: 20px; font-family: Georgia, serif; }
.lines li { margin: 6px 0; }
.night { background: color-mix(in srgb, #2b3550 10%, var(--card)); font: 17px/1.65 Georgia, serif; }

/* Keep the Flame */
.flames { list-style: none; padding: 0; margin: 14px 0; counter-reset: n; }
.flames li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 13px 16px; margin: 8px 0;
             background: var(--card); border-radius: 14px; box-shadow: var(--shadow); font-size: 17px; }
.flames .who { font-weight: 600; }
.flames .who small { display: block; font-weight: 500; color: var(--good); font-size: 13px; }
.flames .fire { font-weight: 700; font-size: 19px; }
.flames .tot { color: var(--soft); font-size: 15px; }
.flames li.out .fire { color: var(--soft); }
.top nav a { padding: 7px 10px; }
.listen { margin: -4px 0 14px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card);
          font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: var(--shadow); }
@media (max-width: 420px) {
  .top { padding: 10px 12px; gap: 6px; }
  .brand { font-size: 17px; }
  .top nav { gap: 2px; }
  .top nav a { padding: 7px 8px; font-size: 14px; }
}