:root {
  --ink: #0b0820;
  --ink-2: #140f33;
  --yellow: #f4ff2e;
  --magenta: #ff2bd6;
  --cyan: #29e6ff;
  --violet: #9b6bff;
  --green: #36f59a;
  --red: #ff3b4f;
  --paper: #fdfdf8;
  --text: #f2f0ff;
  --muted: #a7a2c9;
  --pw: 600px; /* page width in px, set by JS */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--ink); color: var(--text); overflow: hidden; font-family: Rajdhani, system-ui, sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.screen.active { opacity: 1; pointer-events: auto; }

/* ---------- Title ---------- */
.title-bg { position: absolute; inset: -4%; background: url(pages/cover.webp) center/cover no-repeat; animation: drift 40s ease-in-out infinite alternate; }
.title-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse at 50% 40%, rgba(11,8,32,.15), rgba(11,8,32,.85) 75%),
  linear-gradient(to bottom, rgba(11,8,32,.2), rgba(11,8,32,.92)); }
.title-bg.dim::after { background: rgba(11,8,32,.86); }
@keyframes drift { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
.title-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 24px 20px calc(48px + var(--safe-b)); }
.countdown-ring { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--magenta); box-shadow: 0 0 24px var(--magenta), inset 0 0 18px rgba(255,43,214,.5); display: grid; place-items: center; align-content: center; margin-bottom: 14px; animation: spinGlow 6s linear infinite; }
.countdown-ring span { font: 48px/0.9 "Bebas Neue"; color: #fff; text-shadow: 0 0 12px var(--cyan); }
.countdown-ring small { font: 700 11px/1 Rajdhani; letter-spacing: .3em; color: var(--cyan); }
@keyframes spinGlow { 50% { box-shadow: 0 0 36px var(--magenta), inset 0 0 26px rgba(255,43,214,.7); } }
h1 { font: clamp(72px, 16vw, 168px)/0.85 "Bebas Neue"; letter-spacing: .04em; color: #fff;
  text-shadow: 3px 0 0 var(--magenta), -3px 0 0 var(--cyan), 0 0 40px rgba(41,230,255,.45); }
.tag { font: 700 clamp(15px, 2.6vw, 22px)/1.2 Rajdhani; letter-spacing: .32em; text-transform: uppercase; color: var(--yellow); margin-top: 6px; }
.blurb { max-width: 520px; color: #d9d5f5; font-size: 17px; line-height: 1.45; margin: 18px auto 24px; }
.title-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn { padding: 13px 22px; border-radius: 4px; border: 2px solid rgba(255,255,255,.35); font: 700 16px/1 Rajdhani; letter-spacing: .14em; text-transform: uppercase; background: rgba(11,8,32,.55); backdrop-filter: blur(6px); transition: transform .12s, border-color .2s, background .2s; }
.btn:hover { border-color: var(--cyan); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--yellow); color: #0b0820; border-color: var(--yellow); box-shadow: 0 0 26px rgba(244,255,46,.35); }
.btn.ghost { background: transparent; }
.hint { margin-top: 16px; color: var(--muted); font-size: 14px; letter-spacing: .06em; }
.episode-list { position: absolute; z-index: 3; inset: auto 0 0 0; padding: 18px 16px calc(18px + var(--safe-b)); background: linear-gradient(to top, rgba(11,8,32,.98), rgba(11,8,32,.9)); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.episode-list button { text-align: left; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.04); }
.episode-list button b { display: block; font: 22px/1 "Bebas Neue"; color: var(--yellow); }
.episode-list button span { font-size: 15px; color: #fff; }
.episode-list button:disabled { opacity: .35; cursor: default; }

/* ---------- Episode card ---------- */
#card { background: var(--ink); display: grid; place-items: center; }
.card-bg { position: absolute; inset: 0; background:
  repeating-linear-gradient(115deg, rgba(255,43,214,.07) 0 2px, transparent 2px 22px),
  radial-gradient(circle at 50% 50%, #1d1450, var(--ink) 70%); }
.card-inner { position: relative; text-align: center; padding: 20px; }
.card-ep { font: 700 18px/1 Rajdhani; letter-spacing: .5em; color: var(--cyan); }
.card-title { font: clamp(56px, 13vw, 140px)/0.9 "Bebas Neue"; color: #fff; margin: 14px 0; text-shadow: 4px 4px 0 var(--magenta); }
.card-days { display: inline-block; font: 700 15px/1 Rajdhani; letter-spacing: .3em; color: #0b0820; background: var(--yellow); padding: 8px 12px; }
#card.active .card-title { animation: slam .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes slam { from { transform: scale(1.6); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: none; } }

/* ---------- Reader ---------- */
#reader { background: radial-gradient(ellipse at 50% 50%, #1a1342, #07051a 75%); }
#stage { position: absolute; inset: 0; overflow: hidden; }
#camera { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; transition: transform .9s cubic-bezier(.65,0,.25,1); }
#page { position: relative; width: var(--pw); overflow: hidden; }
#page-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: pageIn .7s ease both; }
@keyframes pageIn { from { opacity: 0; filter: brightness(2) saturate(0); } to { opacity: 1; filter: none; } }
#panel-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
#panel-dim i { position: absolute; background: rgba(5,3,18,.58); transition: all .6s ease; }
#reader.lit #panel-dim { opacity: 1; }

#bubbles { position: absolute; inset: 0; pointer-events: none; }
.bub { position: absolute; font-family: "Comic Neue", "Comic Sans MS", sans-serif; font-weight: 700; font-size: calc(var(--pw) * 0.023); line-height: 1.22; color: #111; background: var(--paper); border: calc(var(--pw) * 0.0028) solid #111; border-radius: 1.2em; padding: .55em .8em; box-shadow: .18em .22em 0 rgba(0,0,0,.35); opacity: 0; transform: scale(.7) translateY(.4em); transform-origin: 30% 100%; transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.7,.4,1); }
.bub.show { opacity: 1; transform: none; }
.bub.show.past { opacity: .8; }
.bub .nm { position: absolute; top: -1.15em; left: .8em; font: 700 .62em/1 Rajdhani; letter-spacing: .14em; color: #fff; background: #111; padding: .25em .5em; border-radius: 2px; text-transform: uppercase; }
.bub.cap { border-radius: 2px; background: var(--yellow); font-family: Rajdhani, sans-serif; font-size: calc(var(--pw) * 0.0215); letter-spacing: .02em; }
.bub.cap .nm { display: none; }
.bub.holo { background: rgba(9,16,40,.9); color: #9ff6ff; border-color: var(--cyan); box-shadow: 0 0 1em rgba(41,230,255,.6); font-family: Rajdhani, sans-serif; font-size: calc(var(--pw) * 0.0225); }
.bub.holo .nm { background: var(--cyan); color: #06102a; }
.bub.client { background: rgba(255,255,255,.95); color: #1a0a2a; border-color: var(--magenta); box-shadow: 0 0 1.2em rgba(255,43,214,.55); font-family: Rajdhani, sans-serif; font-size: calc(var(--pw) * 0.0225); }
.bub.client .nm { background: var(--magenta); }
.bub.corp { background: rgba(6,30,18,.92); color: #a9ffd2; border-color: var(--green); box-shadow: 0 0 1em rgba(54,245,154,.5); font-family: Rajdhani, sans-serif; }
.bub.corp .nm { background: var(--green); color: #052012; }
.bub.violet { background: rgba(28,12,50,.92); color: #e0d0ff; border-color: var(--violet); box-shadow: 0 0 1em rgba(155,107,255,.55); font-family: Rajdhani, sans-serif; }
.bub.violet .nm { background: var(--violet); }
.bub.speaking { box-shadow: .18em .22em 0 rgba(0,0,0,.35), 0 0 0 .18em var(--yellow); }
.bub.holo.speaking, .bub.client.speaking, .bub.corp.speaking, .bub.violet.speaking { outline: .14em solid var(--yellow); outline-offset: .12em; }

#magenta { position: absolute; inset: 0; background: var(--magenta); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
#magenta.flash { animation: mflash .45s steps(1) 1; }
@keyframes mflash { 0% { opacity: .55; } 12% { opacity: 0; } 24% { opacity: .3; } 36%, 100% { opacity: 0; } }

canvas.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; mix-blend-mode: screen; }

.tap-zone { position: absolute; top: 56px; bottom: 0; z-index: 3; }
.tap-zone.left { left: 0; width: 28%; }
.tap-zone.right { right: 0; width: 72%; }

#subtitle { position: absolute; z-index: 4; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); width: min(720px, calc(100% - 24px)); background: rgba(8,6,24,.82); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--yellow); padding: 10px 14px; font-size: 16px; line-height: 1.35; display: none; pointer-events: none; }
#subtitle .who { display: block; font: 700 12px/1 Rajdhani; letter-spacing: .2em; color: var(--yellow); margin-bottom: 4px; text-transform: uppercase; }
.mobile .bub { display: none; }
.mobile #subtitle.live { display: block; }
.mobile #subtitle { font-size: 18px; line-height: 1.38; padding: 14px 16px 16px; bottom: calc(14px + var(--safe-b)); background: rgba(8,6,24,.9); }
.mobile #subtitle .who { font-size: 13px; }
#subtitle.cap { border-left-color: var(--yellow); }
#subtitle.cap .who { display: none; }
#subtitle.holo { border-left-color: var(--cyan); color: #bff8ff; }
#subtitle.holo .who { color: var(--cyan); }
#subtitle.client { border-left-color: var(--magenta); }
#subtitle.client .who { color: var(--magenta); }
#subtitle.corp { border-left-color: var(--green); }
#subtitle.corp .who { color: var(--green); }
#subtitle.violet { border-left-color: var(--violet); }
#subtitle.violet .who { color: var(--violet); }
#subtitle .what { display: block; animation: subIn .35s ease both; }
@keyframes subIn { from { opacity: 0; transform: translateY(6px); } }

#choice { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: radial-gradient(ellipse at center, rgba(11,8,32,.75), rgba(11,8,32,.95)); animation: fadeIn .6s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
.choice-prompt { font: clamp(34px, 7vw, 64px)/1 "Bebas Neue"; text-align: center; text-shadow: 3px 3px 0 var(--magenta); }
.choice-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; width: min(760px, 100%); }
.choice-options button { padding: 18px 16px; border: 2px solid var(--c, var(--cyan)); border-radius: 6px; background: rgba(255,255,255,.04); text-align: left; transition: transform .12s, background .2s; }
.choice-options button:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.choice-options b { display: block; font: 30px/1 "Bebas Neue"; color: var(--c, var(--cyan)); letter-spacing: .03em; }
.choice-options span { font-size: 15px; color: #cfcbea; }

#hud { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: calc(52px + var(--safe-t)); padding: var(--safe-t) 10px 0; display: flex; align-items: center; gap: 10px; background: linear-gradient(to bottom, rgba(8,6,24,.85), rgba(8,6,24,0)); transition: opacity .4s; }
#hud-title { flex: 1; font-size: 15px; letter-spacing: .12em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-title b { color: #fff; font: 22px/1 "Bebas Neue"; letter-spacing: .08em; margin-right: 6px; }
.hud-right { display: flex; gap: 6px; }
.hud-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(8,6,24,.6); font-size: 16px; line-height: 1; display: grid; place-items: center; }
.hud-btn.on { border-color: var(--yellow); box-shadow: 0 0 10px rgba(244,255,46,.3); }
#progress { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
#progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); transition: width .4s; }

/* ---------- End ---------- */
.end-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 14px; }
.end-label { font: 700 16px/1 Rajdhani; letter-spacing: .5em; color: var(--cyan); }
#end-title { font: clamp(48px, 11vw, 110px)/0.9 "Bebas Neue"; text-shadow: 4px 4px 0 var(--magenta); }
.end-note { color: var(--muted); max-width: 460px; }
.end-others { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.noanim *, .noanim *::before, .noanim *::after { transition: none !important; animation: none !important; }