/* Heavenly Visions: design system v2 (components). Loaded after theme.css.
   Tokens first, then small reusable parts used by every screen. Animate only transform and opacity. */
:root{
  --c-media:#2f8fc0;--c-att:#3fae6a;--c-games:#e8794a;--c-quiz:#8e6bd1;--c-bible:#c99a3c;
  --c-kids:#e86f8a;--c-bed:#4a4fb5;--c-pray:#a86fd0;--c-color:#e8584f;--c-cal:#2eb5a6;--c-serv:#2a9d8f;--c-arena:#d4a02e;--c-church:#4b57c9;
  --r-s:12px;--r-m:18px;--r-l:26px;--sp-1:6px;--sp-2:10px;--sp-3:16px;--sp-4:24px;
  --fs-s:clamp(.78rem,.2vw + .74rem,.86rem);--fs-m:clamp(.95rem,.3vw + .9rem,1.05rem);--fs-l:clamp(1.15rem,.6vw + 1rem,1.4rem);--fs-xl:clamp(1.5rem,1.4vw + 1.1rem,2.1rem);
  --good:#2c9c5a;--mid:#c98a1f;--low:#d4604b;--soft:#4a8fd8;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--good:#5fd08f;--mid:#f0b84f;--low:#ff8a70;--soft:#7cc4ea}}
:root[data-theme=dark]{--good:#5fd08f;--mid:#f0b84f;--low:#ff8a70;--soft:#7cc4ea}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:10px}
button,a.btn,.chip,.ds-chip{min-height:44px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* section header with gold ornament */
.sech{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:var(--fs-l);margin:6px 0 0}
h2.sech{padding-bottom:0}
h2.sech::before,h2.sech::after{content:"";position:static;flex:1;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;border-radius:0}
.sech span{white-space:nowrap}

/* top bar */
.shellbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0}
.sb-me{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--glass-b);background:var(--glass);color:var(--ink);border-radius:999px;padding:4px 14px 4px 5px;font:inherit;font-weight:800;box-shadow:inset 0 1px 0 var(--glass-hi)}
.sb-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,var(--gold-soft),var(--sky-soft));overflow:hidden;flex:none}
.sb-me span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28vw;font-size:var(--fs-s)}
.sb-right{display:flex;align-items:center;gap:8px}
.sb-stars{display:flex;align-items:center;gap:6px;border:1px solid rgba(227,180,92,.55);background:rgba(227,180,92,.16);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-weight:900;font-variant-numeric:tabular-nums;box-shadow:0 0 16px rgba(227,180,92,.30)}
.sb-stars i{font-style:normal;display:inline-block}
.sb-stars.pop i{animation:starpop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes starpop{0%{transform:scale(1)}40%{transform:scale(1.7) rotate(-14deg)}100%{transform:scale(1)}}
.sb-login{border:1px solid rgba(227,180,92,.6);background:linear-gradient(135deg,#f6d27a,#e3b45c);color:#2b1d05;border-radius:999px;padding:8px 16px;font:inherit;font-weight:900}

/* today strip */
.today{display:grid;grid-auto-flow:column;grid-auto-columns:min(76%,300px);scroll-padding-inline:2px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin-inline:-2px;scrollbar-width:none}
.today::-webkit-scrollbar{display:none}
.today>*{scroll-snap-align:start}
.tcard{position:relative;overflow:hidden;border-radius:var(--r-l);padding:16px;display:flex;flex-direction:column;gap:6px;min-height:150px;text-align:left;color:var(--ink);font:inherit;border:1px solid var(--glass-b);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 var(--glass-hi),var(--sh)}
.tcard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--tc,var(--gold)) 40%,transparent),transparent 60%);pointer-events:none}
.tcard .k{font-size:var(--fs-s);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--tc,var(--gold));position:relative}
.tcard .t{font-weight:800;font-size:var(--fs-m);line-height:1.35;position:relative}
.tcard .s{font-size:var(--fs-s);color:var(--muted);font-weight:700;position:relative}
.tcard .em{position:absolute;right:12px;bottom:6px;font-size:3rem;opacity:.9;animation:floaty 5.5s ease-in-out infinite}
.tcard.verse2{background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 26%,var(--glass)),var(--glass));border-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.tcard.verse2 .t{font-family:var(--display);font-size:var(--fs-m)}
@media (min-width:900px){.today{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible}}

/* more doors (smaller tiles) */
.doors2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mdoor{position:relative;overflow:hidden;border:0;border-radius:22px;min-height:112px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;text-align:left;color:#fff;font:inherit;
  background:linear-gradient(145deg,var(--dc),color-mix(in srgb,var(--dc) 55%,#10162e));box-shadow:0 14px 26px -12px color-mix(in srgb,var(--dc) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.mdoor:active{transform:scale(.97)}
.mdoor::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.mdoor .big{position:absolute;right:10px;top:8px;font-size:2.9rem;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));animation:floaty 6s ease-in-out infinite}
.mdoor b{font-family:var(--display);font-size:1.1rem;position:relative;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.mdoor small{font-weight:800;opacity:.92;position:relative;font-size:var(--fs-s)}
.mdoor.last{grid-column:1/-1}
@media (min-width:600px){.doors2{grid-template-columns:repeat(3,1fr)}.mdoor.last{grid-column:auto}}
@media (min-width:1025px){.doors2{grid-template-columns:repeat(6,1fr)}}

/* chips, segmented, search */
.ds-chips{display:flex;flex-wrap:wrap;gap:8px}
.ds-chip{padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:var(--glass);color:var(--ink);font:inherit;font-weight:800;font-size:var(--fs-s)}
.ds-chip[aria-pressed=true]{border-color:var(--gold);background:var(--gold-soft)}
.ds-seg{display:flex;background:var(--glass);border:1px solid var(--glass-b);border-radius:999px;padding:4px}
.ds-seg button{flex:1;border:0;background:transparent;color:var(--muted);border-radius:999px;font:inherit;font-weight:800;font-size:.86rem;padding:8px 4px}
.ds-seg button[aria-pressed=true]{background:var(--gold);color:#2b1d05;box-shadow:0 4px 12px rgba(227,180,92,.5)}

/* stat card, badge, avatar, bar, skeleton, fab, empty */
.ds-stat{background:var(--gold-soft);border-radius:var(--r-m);padding:12px;text-align:center;font-weight:800;font-size:var(--fs-s);color:var(--ink)}
.ds-stat b{display:block;font-family:var(--display);font-size:1.6rem;line-height:1.1}
.ds-badge{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;border-radius:var(--r-m);padding:10px 6px;font-weight:800;font-size:.74rem;background:var(--gold-soft);color:var(--ink)}
.ds-badge i{font-style:normal;font-size:1.9rem}
.ds-badge.lock{opacity:.5;filter:grayscale(1)}
.ds-badge.on{box-shadow:0 0 0 2px var(--gold),0 0 22px rgba(227,180,92,.6)}
.ds-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--sky),var(--gold))}
.ds-bar{height:12px;border-radius:99px;background:var(--line);overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#f6d27a);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1);position:relative}
.ds-bar i::after{content:"";position:absolute;right:0;top:50%;width:14px;height:14px;margin:-7px -4px 0 0;border-radius:50%;background:#fff6d6;box-shadow:0 0 12px 4px rgba(246,210,122,.9)}
.go .ds-bar i,.ds-bar.go i{width:var(--w)}
.ds-skel{border-radius:var(--r-m);background:linear-gradient(90deg,var(--line),transparent,var(--line));background-size:200% 100%;animation:dsshim 1.4s linear infinite;opacity:.6}
@keyframes dsshim{to{background-position:-200% 0}}
.ds-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:56px;height:56px;min-height:56px;border-radius:50%;border:0;font-size:1.6rem;background:linear-gradient(135deg,#f6d27a,#e3b45c);color:#2b1d05;box-shadow:0 10px 24px rgba(227,180,92,.6);z-index:15}
.ds-empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;border-radius:var(--r-l);border:1.5px dashed var(--line);background:var(--glass);font-weight:700;color:var(--muted)}
.ds-empty .em{font-size:3.2rem;animation:floaty 5.5s ease-in-out infinite}
.ds-empty b{color:var(--ink);font-family:var(--display);font-size:var(--fs-l)}
.soonbox{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px 18px;border-radius:var(--r-l);border:1px solid var(--glass-b);background:linear-gradient(160deg,color-mix(in srgb,var(--sc,var(--gold)) 22%,var(--glass)),var(--glass))}
.soonbox .em{font-size:4.6rem;animation:floaty 5.5s ease-in-out infinite}
.soonbox ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-weight:700;text-align:left}
.soonbox .chipsoon{border-radius:999px;padding:6px 14px;background:var(--sc,var(--gold));color:#fff;font-weight:900;font-size:var(--fs-s)}

/* page transition helper + bell + toast star burst */
.burst{position:fixed;pointer-events:none;z-index:2800;font-size:1.4rem;will-change:transform,opacity}

/* welcome sheet */
.wl-who{display:grid;gap:10px}
.wl-who button{display:flex;align-items:center;gap:14px;text-align:left;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-m);padding:14px;font:inherit;font-weight:800}
.wl-who button i{font-style:normal;font-size:2rem}
.wl-who button small{display:block;color:var(--muted);font-weight:700}

@media (prefers-reduced-motion:reduce){.tcard .em,.mdoor .big,.soonbox .em,.ds-empty .em,.ds-skel,.sb-stars.pop i{animation:none!important}.ds-bar i{transition:none;width:var(--w)}}

/* desktop: Kids Corner two columns, bigger game cards */
@media (min-width:1025px){.kc-wrap{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}.kc-wrap .kc-hero{position:sticky;top:12px}.kc-main{display:flex;flex-direction:column;gap:14px;min-width:0}}
@media (min-width:900px){.ggrid{grid-template-columns:repeat(3,minmax(0,1fr))}.ggrid .tile{min-height:190px;padding:22px}.ggrid .tile .ic{font-size:3.4rem}.ggrid .tile .nm{font-size:1.35rem}.ggrid .tile .ct{font-size:1rem}}
/* Today strip dots, calendar icon, tap targets */
.tdots{display:flex;justify-content:center;gap:7px;margin-top:2px}.tdots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}.tdots i.on{background:var(--gold);transform:scale(1.25)}
@media (min-width:900px){.tdots{display:none}}
.calicon{display:flex;flex-direction:column;align-items:center;width:52px;border-radius:10px;overflow:hidden;background:#fff;color:#2b2540;box-shadow:0 4px 10px rgba(0,0,0,.3);line-height:1}
.calicon i{font-style:normal;display:block;width:100%;text-align:center;background:#d4553b;color:#fff;font-weight:900;font-size:.62rem;letter-spacing:.08em;padding:4px 0}
.calicon b{font-family:var(--display);font-size:1.5rem;padding:4px 0 6px;text-shadow:none;color:#2b2540}
.ds-seg button,.ds-chip,.seg button,.sb-bell,.sb-stars,.sb-me,.sb-login{min-height:44px}
.ds-seg button,.seg button,.sb-bell,.ds-chip{min-width:44px}
.mdoor .big.calbig{right:12px}