/* TarotNice: Day/Night themes, brand type, draw screen, Ngern guide. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/cormorant-garamond-latin-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-italic-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-thai-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-thai-thai-400.woff2") format("woff2");unicode-range:U+0E00-0E7F}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-sans-thai-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-sans-thai-thai-500.woff2") format("woff2");unicode-range:U+0E00-0E7F}

:root{
  --bg:#f6f1fa;--bg-2:#fbe9e1;--ink:#2e2547;--muted:#76698f;
  --accent:#4a3d78;--on-accent:#fffaf2;--back:#4a3d78;
  --gold:#b0832f;--gold-dim:#cdb27a;--card-face:#fffaf0;--card-ink:#2e2547;
  --f-display:"Cormorant Garamond",Georgia,serif;
  --f-body:"IBM Plex Sans Thai",system-ui,sans-serif;
}
:root[data-mode="night"]{
  --bg:#15122b;--bg-2:#2a2150;--ink:#ece6d6;--muted:#a59fbf;
  --accent:#d8b46a;--on-accent:#15122b;--back:#2e2760;
  --gold:#d8b46a;--gold-dim:#8a7444;--card-face:#f3ecdc;--card-ink:#2a2347;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:linear-gradient(180deg,var(--bg-2),var(--bg) 40%);color:var(--ink);font-family:var(--f-body);min-height:100vh}
.wrap{max-width:720px;margin:0 auto;padding:20px 20px 56px;display:flex;flex-direction:column;gap:20px}
@media(min-width:720px){.wrap{padding:28px 36px 72px}}

h1,h2,.display{font-family:var(--f-display);color:var(--accent);font-weight:600;line-height:1.15;margin:0}
.display{font-size:2rem}
a{color:var(--accent)}

/* Header: wordmark, streak, toggles (wrap under on narrow screens). */
.site-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:1.4rem}
.brand svg{width:36px;height:36px}
.head-sp{flex:1 1 auto}
.streak-chip{display:inline-flex;align-items:center;gap:.25rem;text-decoration:none;color:var(--ink);border:1px solid var(--gold-dim);border-radius:999px;padding:.3rem .7rem;font-size:.95rem}
.theme-toggle,.lang-toggle{font-family:var(--f-body)}
.theme-toggle{background:transparent;border:1px solid var(--gold-dim);border-radius:999px;color:var(--ink);padding:.4rem .8rem;font-size:.9rem;cursor:pointer;min-height:44px}
.lang-toggle{display:inline-flex;border:1px solid var(--gold-dim);border-radius:999px;overflow:hidden}
.lang-opt{padding:.4rem .8rem;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--muted);font-size:.9rem}
.lang-opt[aria-current="true"]{background:var(--accent);color:var(--on-accent)}

/* Buttons, chips, form. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--accent);color:var(--on-accent);border:0;border-radius:14px;padding:1rem 1.5rem;font-size:1.05rem;font-family:var(--f-body);font-weight:500;cursor:pointer;text-decoration:none;min-height:52px}
.btn-outline{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.btn-primary{font-size:1.15rem;width:100%}
.quota{display:flex;align-items:center;gap:.6rem;color:var(--muted);margin:0}
.pips{display:inline-flex;gap:.3rem}
.pip{width:14px;height:20px;border-radius:3px;border:1.5px solid var(--gold-dim);display:inline-block}
.pip.on{background:var(--gold);border-color:var(--gold)}
.ask-label{font-family:var(--f-display);font-size:1.4rem;color:var(--accent);display:block;margin:.5rem 0}
#ask-form textarea{width:100%;box-sizing:border-box;font-family:var(--f-body);font-size:1rem;color:var(--card-ink);background:var(--card-face);border:2px solid var(--gold-dim);border-radius:12px;padding:1rem;resize:vertical}
#ask-form textarea.need{border-color:#b3261e;background:#fff}
.topics{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.1rem}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1.5px solid var(--gold-dim);border-radius:999px;padding:.45rem .95rem;cursor:pointer;min-height:44px;line-height:1.6}
.chip input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}

/* Draw stage: three slots + deck mount (M5 fills the motion). */
.stage{position:relative;min-height:300px}
.slots{display:flex;justify-content:center;gap:1rem}
.slot{width:72px;height:118px;border:2px dashed var(--gold-dim);border-radius:8px}

/* Daily card block. */
.daily-block{padding:0}
.daily-open-btn{width:100%}
.daily-bar{display:flex;align-items:center;gap:.8rem;width:100%;background:transparent;border:0;cursor:pointer;padding:.25rem;font-family:var(--f-body);font-size:1rem;color:inherit;min-height:52px;text-align:left}
.daily-thumb{width:34px;height:auto;border-radius:4px;border:1px solid var(--gold);flex:none}
.daily-thumb.rev{transform:rotate(180deg)}
.daily-bar .daily-thumb-back{width:34px;height:56px;flex:none}
.daily-bar-text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.daily-bar-label{font-family:var(--f-display);font-size:1.1rem;color:var(--card-ink)}
.daily-bar-name{font-size:.95rem}
.daily-bar-cta{border:1.5px solid var(--gold);border-radius:999px;padding:.35rem .9rem;font-size:.9rem;flex:none}
.daily-sheet{align-items:center;justify-content:center}
.daily-panel{background:var(--card-face);color:var(--card-ink);border-radius:20px;margin:1rem;max-height:88vh}
.daily-head{display:flex;gap:.6rem;margin-bottom:.9rem}
.daily-close,.daily-head-share{min-height:44px;padding:.5rem 1.1rem}
.daily-panel .daily-face img{width:120px}
.daily-prompt{font-family:var(--f-display);font-size:1.25rem;color:#4a3d78;margin:0}
.daily-tap{display:flex;align-items:center;gap:.8rem;background:transparent;border:0;cursor:pointer;padding:0;font-family:var(--f-body);font-size:1rem;color:inherit;min-height:44px;text-align:left}
.card-back{width:64px;height:106px;flex:none;border-radius:8px;border:1.5px solid var(--gold-dim);background-color:var(--back);background-image:image-set(url("/static/cards/back.webp") 1x,url("/static/cards/back@2x.webp") 2x);background-size:cover;background-position:center}
.daily-face{display:flex;gap:.9rem;align-items:flex-start}
.daily-face img{width:96px;height:auto;border-radius:8px;border:1.5px solid var(--gold)}
.daily-face img.rev{transform:rotate(180deg)}
.daily-name{font-family:var(--f-display);font-size:1.2rem;color:#4a3d78;margin:0 0 .3rem}
.daily-msg{margin:.2rem 0;line-height:1.55}
.daily-lucky{display:inline-block;margin:.4rem 0 0;padding:.2rem .7rem;border:1px solid var(--gold-dim);border-radius:999px;color:var(--card-ink);font-size:.9rem}

/* Draw stage: deck, fan, slots, flips. */
.stage{position:relative;overflow:hidden;touch-action:manipulation;perspective:1200px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.slotframe{position:absolute;border:2px dashed var(--gold-dim);border-radius:8px;pointer-events:none}
.card{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:transparent;cursor:default}
.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.card{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.card .back,.card .front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8px;overflow:hidden}
.card .back{border:1.5px solid var(--gold-dim);background-color:var(--back);background-image:image-set(url("/static/cards/back.webp") 1x,url("/static/cards/back@2x.webp") 2x);background-size:cover;background-position:center}
.card .front{background:var(--card-face);border:1.5px solid var(--gold);transform:rotateY(180deg)}
.card .front .fx{display:block;width:100%;height:100%}
.card .front img{width:100%;height:100%;object-fit:cover;display:block}
.card .front.rev .fx{transform:rotate(180deg)}
.card.flipped .inner{transform:rotateY(180deg)}
.card.pickable{cursor:pointer}
.card.pickable:hover,.card.pickable:focus-visible{filter:brightness(1.06)}
.card.pickable.lift{filter:brightness(1.1)}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Asked question + reading. */
.asked{margin:.5rem 0}
.topic-chip{display:inline-block;font-size:.85rem;color:var(--muted);border:1px solid var(--gold-dim);border-radius:999px;padding:.15rem .7rem;margin:0 0 .4rem}
.question{font-family:var(--f-display);font-style:italic;font-size:1.3rem;color:var(--accent);margin:0}
.reading{display:flex;flex-direction:column;gap:.7rem;margin-top:.5rem}
.rc{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;border-left:3px solid var(--gold-dim);padding:.4rem 0 .4rem .8rem}
.rc.on{opacity:1;transform:none}
.rc b{font-family:var(--f-display);color:var(--accent);font-size:1.15rem}
.rc p{margin:.3rem 0;line-height:1.6;white-space:pre-wrap}
.rtext p{white-space:pre-wrap}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.4rem}
.reading-err{color:#b3261e}
.countdown{color:var(--muted)}

/* Share sheet. */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(20,16,40,.45);display:flex;align-items:flex-end;justify-content:center}
.panel{background:var(--card-face);color:var(--card-ink,#2e2547);border-radius:20px 20px 0 0;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:1.2rem}
.panel h2{font-family:var(--f-display);color:var(--accent);margin:0 0 .7rem}
.story-wrap{display:flex;justify-content:center}
.story{width:min(230px,62vw);aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1.5px solid var(--gold)}
.showq{display:flex;align-items:center;gap:.5rem;margin:.8rem 0 .2rem;min-height:44px;cursor:pointer}
.showq input{width:22px;height:22px;accent-color:var(--accent)}
.share-private-note{color:var(--muted);font-size:.9rem;margin:.1rem 0 .6rem}
.targets{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.target{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid var(--gold-dim);border-radius:12px;background:transparent;color:var(--ink);font-family:var(--f-body);font-size:.95rem;cursor:pointer;text-decoration:none;text-align:center}
.inapp-note,.ig-note{color:var(--muted);font-size:.9rem;line-height:1.5}

/* Share landing pages. */
.landing{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.land-cards{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.land-card{margin:0;max-width:150px}
.land-card img{width:100%;height:auto;border-radius:8px;border:1.5px solid var(--gold)}
.land-card img.rev{transform:rotate(180deg)}
.land-card figcaption{font-size:.9rem;color:var(--muted);margin-top:.3rem}
.land-summary{font-size:1.1rem;line-height:1.6;max-width:40ch;margin:0}

/* Ngern guide + speech bubble. */
.guide{display:flex;align-items:flex-end;gap:1rem;margin-top:1rem}
.guide img,.guide .ngern{width:96px;height:auto;flex:none}
.ngern-wrap{display:inline-flex;flex:none}
.ngern .eyes,.ngern .head,.ngern .tail{transform-box:fill-box}
.ngern .eyes{transform-origin:center;animation:blink 4.5s infinite}
.ngern .tail{transform-origin:0% 100%;animation:swish 3s ease-in-out infinite}
.ngern .head{transform-origin:50% 100%;transition:transform .4s}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes swish{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.guide.s-shuffling .ngern{animation:bob .45s ease-in-out infinite}
.guide.s-shuffling .tail{animation-duration:.6s}
.guide.s-reveal .ngern .eyes{animation:blink 1.1s infinite}
.bubble{position:relative;background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold);border-radius:14px;padding:.9rem 1.1rem;margin:0 0 1rem;max-width:46ch;line-height:1.55}
.bubble::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:var(--card-face);border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg)}
.guide.s-picking .ngern .head,.guide.s-picking img{transform:rotate(-7deg)}
.guide.s-done .ngern .head,.guide.s-done img{transform:rotate(5deg)}

/* Footer. */
.site-foot{margin-top:2rem;border-top:1px solid var(--gold-dim);padding-top:1.2rem}
.footer-main{display:flex;flex-direction:column;gap:1rem}
.foot-brand b{font-family:var(--f-display);font-size:1.2rem}
.foot-mark svg{width:32px;height:32px;vertical-align:-8px;margin-right:.4rem}
.foot-tag,.foot-line{color:var(--muted);margin:.3rem 0}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.foot-link{color:var(--ink)}
.foot-label{color:var(--muted);margin:0 0 .3rem;font-size:.9rem}
.foot-opts{display:flex;gap:.5rem}
.foot-opt{border:1px solid var(--gold-dim);border-radius:999px;padding:.4rem .9rem;text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.foot-opt[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
.footer-bottom{color:var(--muted);font-size:.85rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* History list + reading detail. */
.history-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.history-item{background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold-dim);border-radius:12px}
.history-link{display:block;padding:.7rem .9rem;color:inherit;text-decoration:none}
.history-day{color:var(--muted);font-size:.85rem;margin-right:.6rem}
.history-topic{display:inline-block;border:1px solid var(--gold-dim);border-radius:999px;padding:.1rem .6rem;font-size:.85rem;margin-right:.6rem}
.history-q{display:block;font-weight:500;margin-top:.3rem}
.history-sum{display:block;color:var(--muted);font-size:.9rem;margin-top:.2rem}
.history-status{display:inline-block;margin-top:.3rem;font-size:.85rem;color:var(--gold)}
.reading-detail .detail-cards{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.detail-card{margin:0;text-align:center}
.detail-card img{width:110px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.detail-card img.rev{transform:rotate(180deg)}
.detail-card figcaption{font-size:.85rem;margin-top:.3rem}
.reading-detail .rc{background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold-dim);border-radius:12px;padding:.9rem 1rem;line-height:1.7}
.reading-detail .rc p{margin:0;white-space:pre-wrap}
.topic-chip{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.25rem .8rem;font-size:.9rem}
.question{font-family:var(--f-display);font-style:italic;font-size:1.25rem}
#journal-form textarea{width:100%;box-sizing:border-box;min-height:5rem;border-radius:12px;padding:.7rem;border:2px solid var(--gold-dim);background:var(--card-face);color:var(--ink);font:inherit}
.journal-ok{color:#146c2e;margin-left:.6rem}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.btn-danger{background:#b3261e;color:#fff}
.empty{color:var(--muted)}
.draft-line,.draft{color:var(--muted);font-style:italic}

/* Library. */
.lib-group{margin-top:1.2rem}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.7rem}
.lib-card{text-decoration:none;color:var(--ink);text-align:center;font-size:.9rem}
.lib-card img{width:100%;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.card-detail .detail-art{width:min(280px,70vw);border-radius:8px}
.meaning-note{background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold-dim);border-radius:12px;padding:.8rem 1rem;margin:.8rem 0}
.meaning-note h2{font-size:1.15rem}
.keywords{color:var(--muted);font-size:.95rem}
.card-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}

/* Progress. */
.panel-card{background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold-dim);border-radius:12px;padding:.9rem 1rem;margin:1rem 0}
.panel-card h2{color:var(--accent);font-size:1.3rem}
.streak-big{font-size:1.6rem;margin:.3rem 0}
.muted{color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:280px;margin:.6rem 0}
.cal-cell{aspect-ratio:1;border-radius:4px;background:var(--gold-dim);opacity:.3}
.cal-cell.on{opacity:1;background:var(--gold)}
.deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
.deck-cell{display:inline-flex;align-items:center;justify-content:center;min-height:34px;border-radius:6px;background:var(--gold-dim);opacity:.3;font-size:.75rem;color:var(--card-ink);padding:.1rem}
.deck-cell.on{opacity:1;background:var(--accent);color:var(--on-accent)}
.ms-list{list-style:none;padding:0;margin:.5rem 0;display:grid;gap:.4rem}
.ms{color:var(--muted)}
.ms.on{color:inherit}
.ms-share{margin-left:.5rem;border:1px solid var(--gold-dim);background:transparent;color:var(--accent);border-radius:999px;padding:.25rem .7rem;font:inherit;font-size:.85rem;cursor:pointer}

/* Account prefs. */
#prefs-form{margin-top:.5rem}
#prefs-form label{display:block;margin-top:.6rem;font-weight:500}
#prefs-form select,#prefs-form input{width:100%;box-sizing:border-box;padding:.6rem;border-radius:12px;border:2px solid var(--gold-dim);background:var(--card-face);color:var(--ink);font:inherit}
.recent-strip{display:flex;gap:.5rem;flex-wrap:wrap}
.recent-card{margin:0;text-align:center}
.recent-card img{width:56px;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.recent-card figcaption{font-size:.7rem;color:var(--muted);max-width:64px}
.land-badge{font-size:2.2rem;color:var(--gold);text-align:center;margin:.4rem 0 0}

/* One-row compact header (52px) + header daily pill. */
.site-head{flex-wrap:nowrap;min-height:52px;gap:.45rem}
.brand{font-size:1.25rem}
.brand svg{width:32px;height:32px}
.theme-toggle{min-height:40px;padding:.35rem .6rem;font-size:1rem}
.lang-btn{display:inline-flex;align-items:center;min-height:40px;padding:.35rem .7rem;border:1px solid var(--gold-dim);border-radius:999px;color:var(--ink);text-decoration:none;font-size:.9rem}
.daily-btn{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .7rem;border:1px solid var(--gold-dim);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--f-body);font-size:.9rem;cursor:pointer}
.daily-btn-back{width:16px;height:26px;border-radius:3px;border:1px solid var(--gold-dim);background:radial-gradient(circle at 50% 38%,var(--gold) 0 12%,transparent 13%),repeating-conic-gradient(from 0deg,var(--back) 0 12deg,var(--gold-dim) 12deg 13deg);background-color:var(--back);flex:none}
.daily-dot{position:absolute;top:2px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:1px solid var(--bg)}
.streak-chip{min-height:40px}

/* Wizard steps. */
.steps{display:flex;gap:.6rem;list-style:none;margin:0;padding:0}
.step{flex:1;display:flex;flex-direction:column;gap:.25rem}
.step-bar{height:4px;border-radius:2px;background:var(--gold-dim);opacity:.45}
.step.on .step-bar{background:var(--accent);opacity:1}
.step-label{font-size:.8rem;color:var(--muted)}
.step.on .step-label{color:var(--ink)}
.draw-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.draw-back{background:transparent;border:1px solid var(--gold-dim);border-radius:999px;width:44px;height:44px;font-size:1.1rem;color:var(--ink);cursor:pointer;flex:none}
.draw-q{font-family:var(--f-display);font-style:italic;font-size:1.1rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-cards{display:flex;gap:.6rem;margin:.6rem 0}
.read-cards img{width:84px;height:auto;border-radius:6px;border:1.5px solid var(--gold)}
.read-cards img.rev{transform:rotate(180deg)}
.guide-ask{margin-top:0}
.guide-ask .ngern,.guide-ask img{width:84px}

/* Daily modal (centred, all pages). */
.daily-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.6rem}
.daily-modal-title{font-size:1.3rem;margin:0}
.daily-x{background:transparent;border:1px solid var(--gold-dim);border-radius:999px;width:40px;height:40px;font-size:1.3rem;line-height:1;color:var(--card-ink);cursor:pointer;flex:none}
.daily-modal-actions{display:flex;gap:.6rem;margin-top:.9rem}
.daily-modal-actions .btn{flex:1}
.daily-panel .daily-tap{margin:.4rem auto}

/* Smooth step transitions (reading step especially). */
.step-out{opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease}
.step-in{animation:stepIn .45s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.read-cards img{animation:cardIn .5s ease both}
.read-cards img:nth-child(2){animation-delay:.09s}
.read-cards img:nth-child(3){animation-delay:.18s}
@keyframes cardIn{from{opacity:0;transform:rotateY(70deg) translateY(8px)}to{opacity:1;transform:none}}
.read-cards img.rev{animation-name:cardInRev}
@keyframes cardInRev{from{opacity:0;transform:rotateY(70deg) translateY(8px) rotate(180deg)}to{opacity:1;transform:rotate(180deg)}}

/* Share image loading state. */
.story-wrap{position:relative;min-height:320px}
.story{opacity:0;transition:opacity .45s ease}
.story.loaded{opacity:1}
.story-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;color:var(--muted)}
.story-loading[hidden]{display:none}
.spinner{width:52px;height:52px;border-radius:50%;border:4px solid var(--gold-dim);border-top-color:var(--gold);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.guide.s-sleep .ngern-wrap{cursor:pointer}

/* Reading-is-coming waiting state. */
.reading-wait{display:flex;align-items:center;gap:.7rem;color:var(--muted)}
.reading-wait .spinner{width:26px;height:26px;border-width:3px;flex:none}
.wdots i{font-style:normal;animation:wdot 1.2s infinite}
.wdots i:nth-child(2){animation-delay:.2s}
.wdots i:nth-child(3){animation-delay:.4s}
@keyframes wdot{0%,60%,100%{opacity:.2}30%{opacity:1}}
.rw-lines{margin-top:.8rem;display:flex;flex-direction:column;gap:.5rem}
.rw-lines span{display:block;height:.8rem;border-radius:6px;background:var(--gold-dim);opacity:.35;animation:rwpulse 1.3s ease-in-out infinite}
.rw-lines span:nth-child(2){width:82%;animation-delay:.15s}
.rw-lines span:nth-child(3){width:64%;animation-delay:.3s}
@keyframes rwpulse{0%,100%{opacity:.2}50%{opacity:.5}}

/* Sectioned reading answer. */
.rtext .sec{margin:.9rem 0}
.rtext .sec-summary{background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold);border-radius:14px;padding:.9rem 1.05rem;font-family:var(--f-display);font-size:1.08rem;line-height:1.5}
.rtext .sec-advice{background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold);border-radius:14px;padding:.9rem 1.05rem}
.rtext .sec-advice .sec-title{font-family:var(--f-display);font-size:1.08rem;color:#4a3d78;margin:0 0 .45rem}
.rtext .sec-advice ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.35rem;line-height:1.55}
.rtext .sec-warning{border-left:4px solid var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);border-radius:0 12px 12px 0;padding:.7rem .95rem;line-height:1.55}
.rtext .sec-follow .sec-title{font-family:var(--f-display);font-size:1.08rem;color:var(--accent);margin:0 0 .5rem}
.follow-btns{display:flex;flex-direction:column;gap:.5rem}
.follow-btn{text-align:left;background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold-dim);border-radius:12px;padding:.7rem .9rem;font-family:var(--f-body);font-size:.98rem;cursor:pointer;min-height:44px}
.disclaimer{margin-top:1.2rem;border-top:1px solid var(--gold-dim);padding-top:.8rem;color:var(--muted);font-size:.82rem;line-height:1.55}

/* Reading page layout (mockup): eyebrow question, captioned cards,
   At-a-glance, headed sections. Layout only; colours/cat unchanged. */
.read-eyebrow{text-align:center;letter-spacing:.18em;font-size:.78rem;color:var(--gold);margin:.4rem 0 .2rem;text-transform:uppercase}
.read-q{text-align:center;font-size:1.7rem;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip}
.read-cards{justify-content:center;gap:1rem;margin:1.1rem 0 .4rem}
.read-card{margin:0;text-align:center;flex:1 1 0;max-width:190px}
.read-card img{width:100%;height:auto}
.read-card figcaption{display:flex;flex-direction:column;gap:.1rem;margin-top:.45rem}
.read-card .rc-num{font-size:.78rem;color:var(--muted)}
.read-card .rc-name{font-family:var(--f-display);font-size:1.12rem;color:var(--ink)}
@media(min-width:720px){.read-card{max-width:210px}.read-q{font-size:2.1rem}}
.sec-h{font-family:var(--f-display);font-size:1.45rem;color:var(--ink);margin:1.6rem 0 .4rem}
.rtext .sec-title{font-family:var(--f-display);font-size:1.25rem;color:var(--ink);margin:0}
.rtext .sec-glance{background:var(--card-face);color:var(--card-ink);border:1.5px solid var(--gold);border-radius:16px;padding:1.05rem 1.15rem}
.glance-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.glance-chips{display:inline-flex;gap:.4rem;flex-wrap:wrap}
.gchip{border:1px solid var(--gold-dim);border-radius:999px;padding:.18rem .65rem;font-size:.82rem}
.glance-text{font-size:1.06rem;line-height:1.6;margin:0}
.rtext .sec-guidance .sec-title{margin-bottom:.35rem}

/* Reading result layout (task spec): 3-col spread, glance lead,
   thumbnail card rows, numbered actions list. Page-scoped only. */
.read-cards{display:grid;grid-template-columns:repeat(3,1fr);max-width:600px;margin-left:auto;margin-right:auto}
.card-row{display:flex;gap:.9rem;align-items:flex-start;margin:1rem 0}
.card-row+.card-row{border-top:1px solid var(--gold-dim);padding-top:1rem}
.card-thumb{width:64px;height:auto;flex:none;border-radius:6px;border:1.5px solid var(--gold)}
.card-thumb.rev{transform:rotate(180deg)}
.card-row-body{flex:1 1 auto;min-width:0}
.card-row-body h3{font-family:var(--f-display);font-size:1.2rem;margin:0 0 .15rem;color:var(--ink)}
.card-row-body .kw-line{color:var(--muted);font-size:.9rem;margin:0 0 .35rem}
.card-row-body p{line-height:1.6;margin:.2rem 0}
@media(max-width:480px){.card-thumb{width:52px}}
.glance-lead{font-family:var(--f-display);font-size:1.18rem;line-height:1.5;margin:.2rem 0 .5rem}
.rtext .sec-advice ol{margin:0;padding-left:1.35rem;display:flex;flex-direction:column;gap:.35rem;line-height:1.55}
.reading .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.reading .actions .btn{box-sizing:border-box;min-width:0}
h1.read-q{font-weight:600}