/* THE ASHEN REALMS — reader app.
   Night ink base, ash-paper text, ember gold for action, seal crimson only for premium locks.
   One signature element: the five-realm seal ring (.seal). Everything else stays quiet. */
:root {
  --ink: #101118; --soot: #1a1b24; --soot-2: #23242f; --line: rgba(233, 227, 215, .09);
  --paper: #e9e3d7; --smoke: #969089; --ember: #e8a33d; --ember-deep: #b8771c; --seal: #a6283c;
  --in: #F28C28; --jp: #D9473F; --kr: #5FB3A1; --cn: #E2B13C; --us: #6F8FD8;
  --display: "Zen Antique", "Noto Serif JP", "Noto Serif Devanagari", "Noto Serif KR", "Noto Serif SC", Georgia, serif;
  --body: "Zen Kaku Gothic New", "Noto Sans Devanagari", "Noto Sans KR", "Noto Sans SC", "Hiragino Sans", system-ui, sans-serif;
  --letter: "Kalam", "Zen Kaku Gothic New", "Noto Sans Devanagari", "Noto Sans KR", "Noto Sans SC", system-ui, sans-serif;
  --r-sm: 6px; --r-md: 12px;
  --tab-h: 64px; --top-h: 56px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); }
html, body { margin: 0; background: var(--ink); color: var(--paper); }
body { font: 400 16px/1.6 var(--body); padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
main { outline: none; }

/* ---------- top bar & tab bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: var(--top-h); display: flex;
  align-items: center; gap: 12px; padding: 0 16px; background: rgba(16, 17, 24, .86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 400 19px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; }
.topnav { display: none; gap: 4px; margin-left: 16px; }
.topnav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--smoke); font-size: 15px; }
.topnav a.on, .topnav a:hover { color: var(--paper); background: var(--soot); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0;
  background: transparent; cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--soot); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.dot { position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--ember);
  color: var(--ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.lang-select { background: var(--soot); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; font-size: 14px; }
.coin-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px;
  background: var(--soot); font-size: 14px; font-variant-numeric: tabular-nums; }
.coin-pill i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd98a, var(--ember-deep)); }
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(16, 17, 24, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--smoke); font-size: 11px; }
.tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tabbar a.on { color: var(--paper); }
.tabbar a.on svg { stroke: var(--ember); }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .topnav { display: flex; }
}

/* ---------- layout */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.section { margin: 36px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.15; }
h1 { font-size: clamp(34px, 7vw, 64px); }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
.muted { color: var(--smoke); }
.small { font-size: 13px; }
p { margin: 0 0 1em; max-width: 68ch; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 700px) { .rail { grid-auto-columns: 180px; } }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

/* ---------- the five-realm seal (signature) */
.seal { width: 100%; height: 100%; }
.seal circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.seal .ring-bg { stroke: rgba(233, 227, 215, .08); }
.seal-spin { width: 44px; height: 44px; margin: 80px auto; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- hero */
.hero { position: relative; min-height: min(78vh, 680px); display: flex; align-items: flex-end; overflow: hidden;
  isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,17,24,.2) 0%, rgba(16,17,24,.35) 45%, var(--ink) 96%); }
.hero-seal { position: absolute; z-index: -1; right: -12vw; top: 6%; width: min(80vw, 620px); aspect-ratio: 1; opacity: .9; }
.hero-seal circle { stroke-width: 1.4; }
.hero .wrap { padding-bottom: 36px; }
.hero h1 { max-width: 12ch; text-wrap: balance; }
.hero .tagline { font: 400 clamp(18px, 3.2vw, 26px)/1.35 var(--display); color: var(--paper); opacity: .92; margin: 14px 0 6px; }
.hero .sub { color: var(--smoke); margin-bottom: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-seal { animation: drift 60s linear infinite; }
  .hero h1, .hero .tagline, .hero .actions { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero .tagline { animation-delay: .12s; } .hero .actions { animation-delay: .22s; }
  @keyframes drift { to { transform: rotate(360deg); } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

/* ---------- buttons & chips */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--soot); cursor: pointer; font-weight: 500; }
.btn:hover { background: var(--soot-2); }
.btn.primary { background: var(--ember); color: #1b1206; border-color: transparent; font-weight: 700; }
.btn.primary:hover { background: #f1b24f; }
.btn.seal-btn { background: var(--seal); border-color: transparent; color: #fff; }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px;
  font-size: 12px; background: var(--soot-2); color: var(--paper); white-space: nowrap; }
.chip.free { background: rgba(95, 179, 161, .16); color: #8fd6c6; }
.chip.premium { background: rgba(166, 40, 60, .22); color: #f2a1ae; }
.chip.owned { background: rgba(232, 163, 61, .16); color: var(--ember); }
.chip.soon { background: rgba(111, 143, 216, .18); color: #a9bef0; }
.chip.sample { background: transparent; border: 1px dashed var(--smoke); color: var(--smoke); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- cards */
.cover { position: relative; display: block; }
.cover .art { aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--soot); }
.cover .art img { width: 100%; height: 100%; object-fit: cover; }
.cover .t { margin-top: 10px; font-weight: 500; line-height: 1.3; }
.cover .m { font-size: 13px; color: var(--smoke); }
.cover .bar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.5); }
.cover .bar i { display: block; height: 100%; background: var(--ember); border-radius: 2px; }
.ep-card .art { aspect-ratio: 1; }
.realm-edge { box-shadow: inset 3px 0 0 var(--realm, var(--ember)); }

/* ---------- series page */
.series-head { display: grid; gap: 20px; padding-top: 24px; }
.series-head .poster { width: 150px; border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 760px) { .series-head { grid-template-columns: 220px 1fr; align-items: end; } .series-head .poster { width: 220px; } }
.ep-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ep-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 12px 4px;
  border-bottom: 1px solid var(--line); }
.ep-row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.ep-row .n { font-size: 13px; color: var(--smoke); }
.ep-row.done .t { color: var(--smoke); }
.ep-row:hover { background: rgba(233,227,215,.03); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 24px 0 8px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; color: var(--smoke); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--paper); border-color: var(--ember); }

/* ---------- reader */
.reader { background: #000; min-height: 100vh; }
.reader-bar { position: fixed; z-index: 40; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: rgba(10, 10, 14, .9); backdrop-filter: blur(12px); transition: transform .25s ease; }
.reader-bar.top { top: 0; height: calc(52px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.reader-bar.bottom { bottom: 0; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  justify-content: space-around; }
.reader.hide-ui .reader-bar.top { transform: translateY(-110%); }
.reader.hide-ui .reader-bar.bottom { transform: translateY(110%); }
.reader-bar .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.reader-progress { position: fixed; z-index: 41; top: env(safe-area-inset-top, 0px); left: 0; height: 2px; background: var(--ember); width: 0; }
.strip { max-width: 760px; margin: 0 auto; padding: calc(52px + env(safe-area-inset-top, 0px)) 0 0; }
.panel { position: relative; width: 100%; background: #0b0b0f; container-type: inline-size; }
.panel img { width: 100%; height: auto; }
.panel.gap { margin-bottom: 28px; }
.bubble { position: absolute; padding: .55em .8em; background: #fbf8f2; color: #141418; border-radius: 1.2em;
  font: 700 clamp(13px, 3.4cqi, 22px)/1.28 var(--letter); text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.35);
  text-wrap: balance; }
.bubble.caption { border-radius: 2px; background: rgba(16,17,24,.86); color: var(--paper); font-family: var(--body);
  font-weight: 500; text-align: left; border-left: 3px solid var(--ember); }
.bubble.thought { border-radius: 2em; border: 2px dashed #6b6b75; }
.bubble.shout { border-radius: 4px; transform: rotate(-2deg); background: #fff3d1; border: 2px solid #141418; font-size: clamp(15px, 4.4cqi, 28px); }
.bubble.sfx { background: none; box-shadow: none; color: var(--ember); font: 400 clamp(20px, 7cqi, 48px)/1 var(--display);
  -webkit-text-stroke: 1px #000; }
.reader-end { max-width: 760px; margin: 0 auto; padding: 40px 16px calc(120px + env(safe-area-inset-bottom, 0px)); }
.lock-card { max-width: 520px; margin: 0 auto; padding: 28px 22px; border-radius: var(--r-md); background: var(--soot);
  border-top: 3px solid var(--seal); text-align: center; }
.teaser { max-width: 760px; margin: 0 auto; position: relative; max-height: 52vh; overflow: hidden; }
.teaser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, #000); }
.preview-banner { position: fixed; z-index: 45; top: calc(52px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  padding: 6px 12px; background: var(--seal); color: #fff; font-size: 13px; text-align: center; }
.notice { padding: 10px 14px; border-radius: var(--r-sm); background: var(--soot); color: var(--smoke); font-size: 14px; margin: 12px auto; max-width: 760px; }

/* ---------- characters & world */
.char-card { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--soot); }
.char-card img { aspect-ratio: 2/3; object-fit: cover; width: 100%; }
.char-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px;
  background: linear-gradient(transparent, rgba(10,10,14,.95)); }
.char-card .cap b { display: block; font: 400 20px/1.15 var(--display); }
.char-card .cap span { font-size: 13px; color: var(--realm, var(--ember)); }
.char-hero { display: grid; gap: 24px; padding-top: 24px; }
@media (min-width: 820px) { .char-hero { grid-template-columns: 320px 1fr; } }
.char-hero .portrait { border-radius: var(--r-md); overflow: hidden; max-width: 320px; }
.attr { padding: 14px 0; border-bottom: 1px solid var(--line); }
.attr b { display: block; font-weight: 500; }
.realm { padding: 22px 0; border-top: 1px solid var(--line); }
.realm h2 { color: var(--realm, var(--paper)); }
.cols { display: grid; gap: 24px; }
@media (min-width: 820px) { .cols { grid-template-columns: 2fr 1fr; } }

/* ---------- forms, lists, sheet */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 13px; color: var(--smoke); }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--soot); }
textarea { min-height: 90px; resize: vertical; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; background: rgba(0,0,0,.6); }
.sheet[hidden] { display: none; }
.sheet .card { background: var(--ink); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; max-height: 92vh;
  overflow: auto; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 560px; margin: 0 auto; }
@media (min-width: 700px) { .sheet { align-items: center; } .sheet .card { border-radius: 16px; border: 1px solid var(--line); } }
.sheet .close { float: right; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: var(--paper); color: var(--ink);
  padding: 10px 16px; border-radius: 99px; font-size: 14px; pointer-events: none; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.plan { padding: 20px; border-radius: var(--r-md); background: var(--soot); display: grid; gap: 6px; }
.plan .price { font: 400 32px/1 var(--display); }
.price-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.empty { padding: 40px 0; text-align: center; color: var(--smoke); }
.error-box { padding: 60px 16px; text-align: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--smoke); }
.kv dd { margin: 0; }
.footer { padding: 40px 0 60px; color: var(--smoke); font-size: 13px; border-top: 1px solid var(--line); margin-top: 60px; }

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

/* reading mode: the reader owns the whole screen */
body.reading { padding: 0; background: #000; }
body.reading .topbar, body.reading .tabbar { display: none; }
.lang-select { width: auto; min-height: 36px; max-width: 120px; }
.topbar .btn { min-height: 36px; padding: 0 12px; white-space: nowrap; }
@media (max-width: 400px) { .brand span { font-size: 16px; } .topbar { gap: 6px; padding: 0 10px; } }