/* 轉生成貓貓的我們 — 共用樣式 */
:root{
  --bg:#12141d; --panel:#1b1e2b; --panel2:#232739;
  --ink:#e8e6df; --ink-dim:#a8a89f;
  --pink:#f2a3b3; --gold:#e8c26a; --line:rgba(232,194,106,.22);
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  line-height:1.9;letter-spacing:.02em;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(90,80,160,.25),transparent);}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--pink)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:760px;margin:0 auto;padding:0 1rem}
h1,h2,h3{font-family:"Noto Serif TC","Songti TC",Georgia,serif;letter-spacing:.06em;line-height:1.4}
h2{font-size:1.35rem;margin:3.2rem 0 1.2rem;color:var(--gold)}
h2::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.5em;
  border-radius:50% 50% 50% 0;background:var(--pink);transform:rotate(-45deg)}

/* 頂欄 */
.top{display:flex;align-items:center;gap:.7rem;padding:.9rem 0;
  border-bottom:1px solid var(--line)}
.top img{width:34px;height:34px;border-radius:9px}
.top a.site{color:var(--ink);font-family:"Noto Serif TC",serif;letter-spacing:.1em;font-size:1.02rem}
.top .sp{flex:1}

/* 首頁 hero */
.hero{text-align:center;padding:2.6rem 0 .6rem}
.hero h1{font-size:clamp(1.7rem,6vw,2.6rem);margin:.2em 0 .3em;color:var(--ink)}
.hero h1 .neko{color:var(--pink)}
.hero p.tag{color:var(--ink-dim);margin:.2em 0 1.6em}
.cover{position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.55);border:1px solid var(--line)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--gold),#d9a548);
  color:#241c08;font-weight:700;letter-spacing:.14em;border-radius:2.2rem;
  padding:.85rem 2.4rem;margin:1.6rem 0 0;border:0;font-size:1rem;cursor:pointer}
.btn:hover{filter:brightness(1.08);color:#241c08}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-dim);font-weight:400}
.btn.ghost:hover{color:var(--ink)}

/* 卡片列表 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:0;list-style:none;margin:0}
.cards li{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cards a{display:block;color:var(--ink)}
.cards img{aspect-ratio:2/3;object-fit:cover;width:100%}
.cards .cap{padding:.6rem .8rem .8rem;font-size:.92rem}
.cards .cap small{display:block;color:var(--ink-dim);font-size:.78rem;letter-spacing:.04em}
.ep-list{list-style:none;padding:0;margin:0}
.ep-list li{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  margin:0 0 .8rem;overflow:hidden}
.ep-list a,.ep-list .soon{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;color:var(--ink)}
.ep-list .soon{color:var(--ink-dim)}
.ep-list .no{font-family:"Noto Serif TC",serif;color:var(--gold);white-space:nowrap}
.ep-list small{color:var(--ink-dim)}

/* 閱讀頁 */
.reader{max-width:720px;margin:0 auto;padding:0}
.reader img{width:100%;margin:0 0 6px;border-radius:4px}
.reader-nav{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;padding:1.6rem 1rem 0}

/* 角色頁 */
.char-hero{border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 10px 40px rgba(0,0,0,.5)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
.duo .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem}
.duo .box h3{margin:.1em 0 .5em;font-size:1.02rem;color:var(--pink)}
.duo .box.past h3{color:var(--ink-dim)}
.duo .box p{margin:.3em 0;font-size:.94rem;color:var(--ink)}
.duo .box small{color:var(--ink-dim)}
@media(max-width:560px){.duo{grid-template-columns:1fr}}
blockquote{margin:1rem 0;padding:.7rem 1.1rem;background:var(--panel2);border-left:3px solid var(--pink);
  border-radius:0 10px 10px 0;color:var(--ink);font-family:"Noto Serif TC",serif}
blockquote small{display:block;color:var(--ink-dim);font-family:"Noto Sans TC",sans-serif}
.char-nav{display:flex;justify-content:space-between;gap:.8rem;margin:2.2rem 0 0;flex-wrap:wrap}

/* 誕生故事 */
.origin{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.5rem;color:var(--ink)}
.origin p{margin:.5em 0}

/* footer 四件套 */
footer{margin:4rem 0 0;padding:2.2rem 1rem calc(2.2rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);text-align:center;color:var(--ink-dim);font-size:.85rem}
.footer-icons{display:flex;gap:1.4rem;justify-content:center;margin:0 0 1rem}
.footer-icons a{display:inline-flex;width:42px;height:42px;border-radius:50%;
  align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);color:var(--ink-dim)}
.footer-icons a:hover{color:var(--gold);border-color:var(--gold)}
.footer-icons svg{width:20px;height:20px;fill:currentColor}
footer p{margin:.3em 0}

/* 安裝鈕 */
#inst{display:none}
#inst.show{display:inline-block}

@media(prefers-reduced-motion:no-preference){
  .cover img{transition:transform .6s ease}
  .cover:hover img{transform:scale(1.015)}
}

/* 每話末尾的作畫掛名 */
.credit{max-width:1024px;margin:.9rem auto 0;padding:0 .4rem;
  color:var(--ink-dim);font-size:.82rem;text-align:right;letter-spacing:.03em}

/* 首頁大圖下方的「最新一話」輔助入口 */
.newest{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-dim);letter-spacing:.03em}
.newest a{color:var(--gold);border-bottom:1px solid transparent}
.newest a:hover{border-bottom-color:var(--gold)}

/* ── 行動版:閱讀頁滿版,要的是連續感 ── */
@media(max-width:720px){
  .reader{max-width:none}
  .reader img{margin:0 0 2px;border-radius:0}
}

/* ── 行動版:閱讀頁固定頂欄 ── */
.reader-top{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:.8rem;
  /* 裝成 App(standalone + black-translucent)後,頁面會延伸到狀態列底下,
     頂欄不吃 inset 就會被時鐘電量壓住 */
  padding:calc(.7rem + env(safe-area-inset-top,0px)) 1rem .7rem;
  background:rgba(18,20,29,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:transform .25s ease}
.reader-top.hide{transform:translateY(-100%)}
.reader-top .back,.reader-top .eps,.reader-top .chars{color:var(--ink-dim);font-size:1.3rem;line-height:1;flex:none}
.reader-top .back:hover,.reader-top .eps:hover,.reader-top .chars:hover{color:var(--gold)}
.reader-top .chars svg{width:1.15rem;height:1.15rem;fill:currentColor;display:block}
.reader-top .ttl{flex:1;min-width:0;font-size:.95rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader{padding-top:calc(52px + env(safe-area-inset-top,0px))}

/* ── 行動版:閱讀進度條 ──
   height 要把 safe area 一起算進去:全站是 border-box,只寫 height:3px 再加
   padding-bottom,used height 會被 padding 撐成一整片,軌道底色整面畫滿。
   background-clip:content-box 讓底色只出現在上面那 3px,墊高的部分留透明。 */
.progress{position:fixed;left:0;right:0;bottom:0;z-index:100;
  height:calc(3px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.12);background-clip:content-box}
.progress > i{display:block;height:3px;width:0;background:var(--gold);
  transition:width .25s ease}
.progress > span{position:absolute;right:.6rem;
  bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
  font-size:.72rem;letter-spacing:.06em;color:var(--ink-dim);
  background:rgba(18,20,29,.78);padding:.12rem .5rem;border-radius:10px}

/* ── 行動版:底部 tabbar ── */
.tabbar{display:none}
@media(max-width:720px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:rgba(18,20,29,.96);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar > *{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
    padding:.5rem 0 .45rem;background:none;border:0;cursor:pointer;
    color:var(--ink-dim);font:inherit;font-size:.68rem;letter-spacing:.06em}
  .tabbar svg{width:20px;height:20px;fill:currentColor}
  .tabbar > *:hover{color:var(--gold)}
  /* 只有掛 tabbar 的頁面要讓位。閱讀頁(有 data-ep)走 initReader,
     不會建 tabbar 也不會量 --tabbar-h,吃了 fallback 就是白留 56px */
  body:not([data-ep]){padding-bottom:var(--tabbar-h,56px)}
  #inst{display:none!important}   /* 安裝鈕在 tabbar,首頁不重複放 */
}

/* ── 首頁:繼續閱讀 ── */
.resume{display:flex;align-items:center;gap:.85rem;
  margin:0 0 1.6rem;padding:.85rem 1rem;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.resume:hover{border-color:var(--gold);color:var(--ink)}
.resume-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:var(--gold);color:#241c08;font-size:.85rem}
.resume-t{font-size:.95rem;line-height:1.5}
.resume-t small{display:block;color:var(--ink-dim);font-size:.78rem;letter-spacing:.04em}

/* ── 討論區 ── */
.talk{margin:3rem auto 0}
.talk h2{margin-top:0}
#giscus{margin:1.2rem 0 0;min-height:120px}
#giscus .giscus{color-scheme:dark}
@media(max-width:720px){
  .talk{padding:0 1rem}
}