/* Tutorial: coach overlay, highlights, skip. Owned by the tutorial lane (js/tutorial.js).
   Everything lives in #tutLayer inside #stage, in stage pixels. Landscape desktop is the base size; body.mobile
   (scale < .62) and body.portrait scale the text up so it reads at phone size (portrait body text >= 30px). */
#tutLayer { position: absolute; inset: 0; z-index: 3000; pointer-events: none; font-family: var(--font-ui); }
#tutLayer button { pointer-events: auto; }

/* highlight rings: follow their element every frame (js) */
#tutLayer .tut-ring { position: absolute; left: 0; top: 0; border-radius: 22px; border: 4px solid #ffd36e;
  box-shadow: 0 0 0 3px rgba(20, 8, 40, .55), 0 0 28px 6px rgba(255, 196, 80, .75), inset 0 0 22px rgba(255, 211, 110, .45);
  animation: tutPulse 1.25s ease-in-out infinite; will-change: transform; }
#tutLayer .tut-dim { position: absolute; left: 0; top: 0; border-radius: 22px; box-shadow: 0 0 0 2600px rgba(6, 2, 16, .5) /* Chrome drops spreads much past ~3000px */; transition: opacity .3s; }
#tutLayer .tut-ring:not(.main) { border-style: dashed; animation-delay: -.3s; }
#tutLayer .tut-ring.flash { animation: tutFlash .5s ease-out, tutPulse 1.25s ease-in-out .5s infinite; }
@keyframes tutPulse { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .72; scale: 1.035; } }
@keyframes tutFlash { 0% { border-color: #fff; scale: 1.12; } 100% { scale: 1; } }

/* the pointing arrow above (or below, .up) the main target */
#tutLayer .tut-arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
#tutLayer .tut-arrow i { position: absolute; left: -26px; bottom: 0; width: 52px; height: 60px; display: block;
  background: linear-gradient(180deg, #fff1c2, #f2c14e 55%, #c4861c); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)) drop-shadow(0 0 12px rgba(255, 200, 90, .7));
  clip-path: polygon(30% 0, 70% 0, 70% 48%, 100% 48%, 50% 100%, 0 48%, 30% 48%); animation: tutBob .9s ease-in-out infinite; }
#tutLayer .tut-arrow.up i { bottom: auto; top: 0; transform: rotate(180deg); animation-name: tutBobUp; }
@keyframes tutBob { 0%, 100% { translate: 0 -14px; } 50% { translate: 0 0; } }
@keyframes tutBobUp { 0%, 100% { translate: 0 14px; } 50% { translate: 0 0; } }

/* the coach bubble */
#tutLayer .tut-bubble { position: absolute; left: 0; top: 0; width: 620px; display: none; gap: 18px; align-items: flex-start; padding: 20px 22px 22px;
  border-radius: 22px; background: linear-gradient(180deg, rgba(34, 18, 64, .97), rgba(16, 8, 34, .97)); border: 1.5px solid rgba(242, 193, 78, .75);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); pointer-events: auto;
  transition: transform .38s cubic-bezier(.2, .8, .3, 1); color: #f4ecff; }
#tutLayer .tut-bubble.on { display: flex; }
#tutLayer .tut-bubble.pop { animation: tutPop .34s cubic-bezier(.2, .9, .3, 1.2); }
#tutLayer .tut-bubble.nudge { animation: tutNudge .42s ease-in-out; }
@keyframes tutPop { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes tutNudge { 0%, 100% { translate: 0 0; } 20% { translate: -10px 0; } 40% { translate: 9px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }
#tutLayer .tb-face { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid #f2c14e; box-shadow: 0 0 18px rgba(242, 193, 78, .45); background: #1a0f30; }
#tutLayer .tb-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tutLayer .tb-body { flex: 1; min-width: 0; }
#tutLayer .tb-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
#tutLayer .tb-head b { font-family: var(--font-title); font-size: 22px; letter-spacing: .08em; color: #ffd36e; }
#tutLayer .tb-lesson { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #bfa8e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tutLayer .tb-text { font-size: 21px; line-height: 1.42; }
#tutLayer .tb-text b { color: #ffe08a; font-weight: 700; }
#tutLayer .tb-hint { font-size: 17px; line-height: 1.3; color: #ffb3a8; min-height: 0; margin-top: 6px; }
#tutLayer .tb-hint:empty { display: none; }
#tutLayer .tb-btns { display: none; justify-content: flex-end; margin-top: 12px; }
#tutLayer .tut-bubble.tap .tb-btns { display: flex; }
#tutLayer .tb-next { min-width: 130px; }
#tutLayer .tb-prog { position: absolute; left: 22px; right: 22px; bottom: 8px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#tutLayer .tb-prog i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #a86bff, #f2c14e); border-radius: 4px; transition: width .5s; }

/* skip: always visible */
#tutLayer .tut-skip { position: absolute; right: 150px; top: 20px; z-index: 2; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(14, 7, 30, .82); color: #e9dcff; font: 600 15px/1 var(--font-ui); letter-spacing: .04em; cursor: pointer; }
#tutLayer .tut-skip:hover { border-color: #f2c14e; color: #fff; }
#tutLayer .tut-skip[hidden] { display: none; }

/* skip confirm (in-page, never window.confirm) */
#tutLayer .tut-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(5, 2, 14, .66); backdrop-filter: blur(4px); pointer-events: auto; }
#tutLayer .tut-confirm[hidden] { display: none; }
#tutLayer .tc-box { width: 560px; max-width: calc(100% - 48px); padding: 30px 34px; border-radius: 22px; text-align: center; display: grid; gap: 12px;
  background: linear-gradient(180deg, #24133f, #120a24); border: 1.5px solid rgba(242, 193, 78, .6); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
#tutLayer .tc-box b { font-family: var(--font-title); font-size: 28px; letter-spacing: .06em; color: #ffe08a; }
#tutLayer .tc-box span { font-size: 18px; line-height: 1.4; color: #d9ccef; }
#tutLayer .tc-btns { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }

/* chapter complete */
#tutLayer .tut-done { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: auto; opacity: 0; transition: opacity .45s;
  background: radial-gradient(ellipse at 50% 45%, rgba(60, 26, 110, .72), rgba(5, 2, 14, .9) 70%); }
#tutLayer .tut-done.on { opacity: 1; }
#tutLayer .td-box { width: 720px; max-width: calc(100% - 48px); text-align: center; padding: 34px 40px 36px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(40, 20, 74, .96), rgba(16, 8, 34, .97)); border: 2px solid rgba(242, 193, 78, .8);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .75), 0 0 60px rgba(168, 107, 255, .35); transform: translateY(18px) scale(.96); transition: transform .5s cubic-bezier(.2, .9, .3, 1.2); }
#tutLayer .tut-done.on .td-box { transform: none; }
#tutLayer .td-eyebrow { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: #bfa8e6; }
#tutLayer .td-box h2 { margin: 10px 0 14px; font-family: var(--font-title); font-size: 52px; line-height: 1.08; letter-spacing: .08em; color: #ffe08a;
  text-shadow: 0 0 26px rgba(242, 193, 78, .55); }
#tutLayer .td-box p { font-size: 21px; line-height: 1.5; color: #eadfff; margin: 0 auto 18px; max-width: 580px; }
#tutLayer .td-guide { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 24px; font-size: 18px; color: #d9ccef; font-style: italic; }
#tutLayer .td-guide img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #f2c14e; }
#tutLayer .td-guide b { font-style: normal; color: #ffd36e; margin-left: 6px; }
#tutLayer .td-go { min-width: 220px; }

/* ---- phone landscape (stage scaled below .62): bigger everything ---- */
body.mobile #tutLayer .tut-bubble { width: 800px; padding: 24px 28px 28px; gap: 22px; border-radius: 28px; }
body.mobile #tutLayer .tb-face { width: 120px; height: 120px; }
body.mobile #tutLayer .tb-head b { font-size: 30px; }
body.mobile #tutLayer .tb-lesson { font-size: 20px; }
body.mobile #tutLayer .tb-text { font-size: 32px; line-height: 1.36; }
body.mobile #tutLayer .tb-hint { font-size: 26px; }
body.mobile #tutLayer .tb-next { font-size: 28px; padding: 16px 34px; min-width: 190px; }
body.mobile #tutLayer .tut-skip { right: 236px; top: 22px; font-size: 26px; padding: 16px 28px; }
body.mobile #tutLayer .tc-box { width: 820px; }
body.mobile #tutLayer .tc-box b { font-size: 40px; }
body.mobile #tutLayer .tc-box span { font-size: 30px; }
body.mobile #tutLayer .tc-btns .btn, body.mobile #tutLayer .td-go { font-size: 28px; padding: 18px 34px; }
body.mobile #tutLayer .td-box { width: 960px; }
body.mobile #tutLayer .td-box h2 { font-size: 70px; }
body.mobile #tutLayer .td-box p, body.mobile #tutLayer .td-guide { font-size: 30px; }
body.mobile #tutLayer .td-eyebrow { font-size: 22px; }
body.mobile #tutLayer .td-guide img { width: 90px; height: 90px; }
body.mobile #tutLayer .tut-arrow i { left: -36px; width: 72px; height: 84px; }

/* ---- portrait: the stage is 900 wide, so the bubble spans it ---- */
body.portrait #tutLayer .tut-bubble { width: 852px; padding: 24px 26px 30px; gap: 20px; border-radius: 30px; }
body.portrait #tutLayer .tb-face { width: 116px; height: 116px; }
body.portrait #tutLayer .tb-head b { font-size: 32px; }
body.portrait #tutLayer .tb-lesson { font-size: 22px; }
body.portrait #tutLayer .tb-text { font-size: 34px; line-height: 1.36; }
body.portrait #tutLayer .tb-hint { font-size: 28px; }
body.portrait #tutLayer .tb-next { font-size: 30px; padding: 18px 36px; min-width: 200px; }
body.portrait #tutLayer .tut-skip { left: 16px; right: auto; top: 12px; font-size: 24px; padding: 12px 20px; }
body.portrait #tutLayer .tc-box { width: 852px; padding: 40px 34px; }
body.portrait #tutLayer .tc-box b { font-size: 44px; }
body.portrait #tutLayer .tc-box span { font-size: 32px; }
body.portrait #tutLayer .tc-btns .btn, body.portrait #tutLayer .td-go { font-size: 32px; padding: 20px 36px; }
body.portrait #tutLayer .td-box { width: 852px; padding: 44px 34px; }
body.portrait #tutLayer .td-box h2 { font-size: 76px; }
body.portrait #tutLayer .td-box p, body.portrait #tutLayer .td-guide { font-size: 32px; }
body.portrait #tutLayer .td-eyebrow { font-size: 24px; }
body.portrait #tutLayer .td-guide img { width: 96px; height: 96px; }
body.portrait #tutLayer .tut-arrow i { left: -36px; width: 72px; height: 84px; }

body.fx-low #tutLayer .tut-ring, body.fx-low #tutLayer .tut-arrow i { animation: none; }
@media (prefers-reduced-motion: reduce) { #tutLayer .tut-ring, #tutLayer .tut-arrow i, #tutLayer .tut-bubble.pop { animation: none; } }

/* =====================================================================================================
   Lane B: the First Chapter (js/chapter.js, js/chapter-battles.js). Stage pixels, like the coach above.
   ===================================================================================================== */
/* in-battle: the opponent's speech bubble, the battle counter, Echo tints */
#tutLayer .tut-quip { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 10px 18px 10px 10px;
  border-radius: 20px 20px 20px 6px; background: linear-gradient(180deg, #fff8e8, #f1e2c2); color: #2a1740; border: 2px solid #c79a3c;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; will-change: transform; }
#tutLayer .tut-quip.on { opacity: 1; visibility: visible; transition: opacity .2s; animation: tqPop .32s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes tqPop { from { scale: .8; } to { scale: 1; } }
#tutLayer .tut-quip .tq-face { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid #c79a3c; background: #1a0f30; }
#tutLayer .tut-quip .tq-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tutLayer .tut-quip.echo { background: linear-gradient(180deg, #2c1650, #1a0c33); color: #f0e4ff; border-color: #b77bff; box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(168, 107, 255, .5); }
#tutLayer .tut-quip.echo .tq-face { border-color: #b77bff; }
#tutLayer .tut-quip.echo .tq-face img, #game .bplate.echoface .bp-av img, #vsIntro .vs-art.echoface, #tutLayer .td-guide.echo img, #chapterUI .echo img { filter: sepia(1) hue-rotate(225deg) saturate(2.4) contrast(1.05) brightness(.9); }
#tutLayer .tq-body { display: grid; gap: 2px; min-width: 0; }
#tutLayer .tq-body b { font: 800 13px/1.1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #8a5a12; }
#tutLayer .tut-quip.echo .tq-body b { color: #d7b8ff; }
#tutLayer .tq-body span { font: italic 600 19px/1.3 "Old Standard TT", Georgia, serif; }
#tutLayer .tut-battle { position: absolute; right: 150px; top: 70px; padding: 7px 16px; border-radius: 99px; font: 700 13px/1 var(--font-ui);
  letter-spacing: .22em; text-transform: uppercase; color: #ffe08a; background: rgba(14, 7, 30, .72); border: 1px solid rgba(242, 193, 78, .45); pointer-events: none; }
#tutLayer .tut-battle[hidden] { display: none; }
#game .lc.ch-echo img, #game .ch-echo .lc img { filter: sepia(.9) hue-rotate(225deg) saturate(2.2) contrast(1.05); }
#tutLayer .ch-end .td-box h2 { font-size: 60px; }
#tutLayer .ch-end.lost .td-box h2 { color: #d9ccef; text-shadow: none; }
body.mobile #tutLayer .tut-quip { max-width: 640px; padding: 14px 24px 14px 14px; gap: 16px; }
body.mobile #tutLayer .tut-quip .tq-face { width: 84px; height: 84px; }
body.mobile #tutLayer .tq-body b { font-size: 20px; }
body.mobile #tutLayer .tq-body span { font-size: 28px; }
body.mobile #tutLayer .tut-battle { font-size: 20px; padding: 10px 22px; right: 236px; top: 96px; }
body.portrait #tutLayer .tut-quip { max-width: 700px; padding: 14px 26px 14px 14px; gap: 16px; }
body.portrait #tutLayer .tut-quip .tq-face { width: 90px; height: 90px; }
body.portrait #tutLayer .tq-body b { font-size: 21px; }
body.portrait #tutLayer .tq-body span { font-size: 30px; }
body.portrait #tutLayer .tut-battle { display: none; } /* no room on the tall board: the chapter map shows the count */

/* the chapter overlay: title map, story scenes, rewards, the final reveal */
#chapterUI { position: absolute; inset: 0; z-index: 3500; overflow: hidden; font-family: var(--font-ui); color: #f4ecff; background: #0b0616; }
#chapterUI[hidden] { display: none; }
#chapterUI .chx-bg { position: absolute; inset: 0; }
#chapterUI .chx-art { position: absolute; inset: -3%; background-size: cover; background-position: center; filter: saturate(1.05) brightness(.62);
  animation: chxDrift 26s ease-in-out infinite alternate; }
@keyframes chxDrift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.08) translate(-1.2%, -1%); } }
#chapterUI .chx-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, rgba(20, 8, 44, .15), rgba(6, 2, 16, .82) 78%), linear-gradient(180deg, rgba(6, 2, 16, .35), rgba(6, 2, 16, .15) 40%, rgba(6, 2, 16, .9)); }
#chapterUI[data-mode="scene"] .chx-art { filter: saturate(1.1) brightness(.78); }
#chapterUI .chx-main { position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 60px 50px; }
#chapterUI .chx-main.in > * { animation: chxIn .5s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes chxIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
#chapterUI .chx-skipall { position: absolute; right: 28px; top: 22px; z-index: 3; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(14, 7, 30, .78); color: #e9dcff; font: 600 15px/1 var(--font-ui); letter-spacing: .04em; cursor: pointer; }
#chapterUI .chx-skipall:hover { border-color: #f2c14e; color: #fff; }
#chapterUI .chx-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(5, 2, 14, .7); backdrop-filter: blur(4px); }
#chapterUI .chx-confirm[hidden] { display: none; }
#chapterUI .tc-box { width: 560px; max-width: calc(100% - 48px); padding: 30px 34px; border-radius: 22px; text-align: center; display: grid; gap: 12px;
  background: linear-gradient(180deg, #24133f, #120a24); border: 1.5px solid rgba(242, 193, 78, .6); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
#chapterUI .tc-box b { font-family: var(--font-title); font-size: 28px; letter-spacing: .06em; color: #ffe08a; }
#chapterUI .tc-box span { font-size: 18px; line-height: 1.4; color: #d9ccef; }
#chapterUI .tc-btns { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }
#chapterUI .chx-eyebrow { font-size: 15px; letter-spacing: .32em; text-transform: uppercase; color: #bfa8e6; }
#chapterUI .chx-eyebrow.holo { background: linear-gradient(90deg, #ffd36e, #ff9de2, #9ad8ff, #ffd36e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chxHolo 4s linear infinite; }
@keyframes chxHolo { to { background-position: 200% 0; } }
#chapterUI h1, #chapterUI h2 { margin: 8px 0 10px; font-family: var(--font-title); letter-spacing: .08em; color: #ffe08a; text-shadow: 0 0 28px rgba(242, 193, 78, .45); line-height: 1.05; }
#chapterUI h1 { font-size: 72px; }
#chapterUI h2 { font-size: 50px; }
#chapterUI .chx-sub { font-size: 21px; line-height: 1.45; color: #e3d6fa; max-width: 760px; margin: 0 auto; }
#chapterUI .chx-note { font-size: 16px; color: #bfa8e6; margin: 10px 0 0; }
#chapterUI .chx-acts { display: flex; gap: 14px; justify-content: center; margin-top: 26px; }
#chapterUI .chx-acts .btn { min-width: 240px; }

/* title: the four battles */
#chapterUI .chx-title { text-align: center; width: min(1320px, 100%); }
#chapterUI .chx-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; position: relative; }
#chapterUI .chx-nodes::before { content: ""; position: absolute; left: 12%; right: 12%; top: 66px; height: 3px; background: linear-gradient(90deg, rgba(242, 193, 78, .6), rgba(168, 107, 255, .5)); z-index: 0; }
#chapterUI .chx-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 0 8px 18px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
#chapterUI .chx-node[disabled] { cursor: default; opacity: .55; }
#chapterUI .cn-face { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 4px solid rgba(242, 193, 78, .55); background: #1a0f30; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); transition: transform .25s, border-color .25s; }
#chapterUI .cn-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#chapterUI .chx-node.cur .cn-face { border-color: #ffd36e; box-shadow: 0 0 0 6px rgba(255, 211, 110, .18), 0 0 36px rgba(255, 211, 110, .55); animation: chxBeat 1.8s ease-in-out infinite; }
@keyframes chxBeat { 50% { transform: scale(1.05); } }
#chapterUI .chx-node:not([disabled]):hover .cn-face { transform: scale(1.06); }
#chapterUI .chx-node.won .cn-face { border-color: #8fe3a8; }
#chapterUI .cn-k { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #bfa8e6; margin-top: 8px; }
#chapterUI .cn-t { font-family: var(--font-title); font-size: 21px; color: #fff1c9; letter-spacing: .04em; }
#chapterUI .cn-o { font-style: normal; font-size: 16px; color: #d9ccef; }
#chapterUI .cn-ok { position: absolute; top: 96px; left: calc(50% + 34px); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #2f9e5a; color: #fff; border: 3px solid #0b0616; }
#chapterUI .cn-ok svg { width: 22px; height: 22px; }

/* scenes: visual-novel panels */
#chapterUI[data-mode="scene"] .chx-main { place-items: stretch; padding: 0; }
#chapterUI .chx-scene { position: relative; width: 100%; height: 100%; cursor: pointer; }
#chapterUI .chx-sctitle { position: absolute; left: 44px; top: 28px; display: grid; gap: 4px; }
#chapterUI .chx-sctitle span { font-size: 14px; letter-spacing: .32em; text-transform: uppercase; color: #bfa8e6; }
#chapterUI .chx-sctitle b { font-family: var(--font-title); font-size: 34px; color: #ffe08a; letter-spacing: .06em; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
#chapterUI .chx-actor { position: absolute; left: 70px; bottom: 250px; width: 330px; height: 330px; border-radius: 50%; overflow: hidden; border: 5px solid #f2c14e;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(242, 193, 78, .35); background: #1a0f30; }
#chapterUI .chx-actor[hidden] { display: none; }
#chapterUI .chx-actor.echo { border-color: #b77bff; box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(168, 107, 255, .55); }
#chapterUI .chx-actor.pop { animation: chxActor .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes chxActor { from { opacity: 0; translate: -30px 0; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
#chapterUI .chx-actor img { width: 100%; height: 100%; object-fit: cover; display: block; }
#chapterUI .chx-box { position: absolute; left: 50px; right: 50px; bottom: 40px; min-height: 200px; padding: 26px 36px 22px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(34, 18, 64, .95), rgba(16, 8, 34, .96)); border: 1.5px solid rgba(242, 193, 78, .7); box-shadow: 0 24px 70px rgba(0, 0, 0, .7); cursor: auto; }
#chapterUI .chx-who { display: flex; align-items: baseline; gap: 14px; min-height: 28px; }
#chapterUI .chx-who b { font-family: var(--font-title); font-size: 26px; color: #ffd36e; letter-spacing: .06em; }
#chapterUI .chx-who em { font-style: normal; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: #bfa8e6; }
#chapterUI .chx-line { margin: 10px 0 0; font-size: 27px; line-height: 1.45; color: #f6efff; max-width: 1400px; padding-right: 330px; }
#chapterUI .chx-scene.narr .chx-line { font-family: "Old Standard TT", Georgia, serif; font-style: italic; color: #eadfff; }
#chapterUI .chx-line.in { animation: chxLine .4s ease-out; }
@keyframes chxLine { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
#chapterUI .chx-dots { display: flex; gap: 8px; margin-top: 16px; }
#chapterUI .chx-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
#chapterUI .chx-dots i.on { background: #f2c14e; }
#chapterUI .chx-btns { position: absolute; right: 30px; bottom: 20px; display: flex; gap: 12px; }
#chapterUI .chx-btns .btn { min-width: 130px; }
#chapterUI .chx-tap { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(233, 220, 255, .55); }

/* rewards */
#chapterUI .chx-reward, #chapterUI .chx-final { text-align: center; width: min(1200px, 100%); }
#chapterUI .chx-beat { display: inline-flex; align-items: center; gap: 16px; max-width: 820px; margin: 4px auto 0; font-size: 20px; line-height: 1.4; color: #e3d6fa; text-align: left; }
#chapterUI .chx-beat img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #f2c14e; }
#chapterUI .chx-beat.echo img { border-color: #b77bff; }
#chapterUI .chx-rws { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 30px; min-height: 180px; }
#chapterUI .chx-rw { display: grid; justify-items: center; gap: 6px; animation: chxRw .6s cubic-bezier(.2, .9, .3, 1.3) both; }
#chapterUI .chx-rw:nth-child(2) { animation-delay: .18s; }
@keyframes chxRw { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
#chapterUI .chx-rw b { font-family: var(--font-title); font-size: 44px; color: #ffe08a; }
#chapterUI .chx-rw span { font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: #d9ccef; max-width: 320px; }
#chapterUI .chx-coin { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c14e 45%, #a8701a 80%);
  box-shadow: inset 0 0 0 6px rgba(255, 240, 190, .55), 0 0 34px rgba(242, 193, 78, .6); }
#chapterUI .chx-pack { width: 84px; height: 110px; border-radius: 12px; display: grid; place-items: center; color: #fff3c4;
  background: linear-gradient(160deg, #6b3fc0, #2b1560); border: 3px solid #f2c14e; box-shadow: 0 0 30px rgba(168, 107, 255, .6); }
#chapterUI .chx-pack svg { width: 46px; height: 46px; }
#chapterUI .chx-cardslot { width: 230px; height: 322px; }
#chapterUI .chx-cardslot .card { position: relative; width: 100%; height: 100%; }

/* the final reveal: the Leaders in Full Art */
#chapterUI .chx-fan { position: relative; height: 400px; margin: 18px auto 6px; display: flex; justify-content: center; align-items: flex-start; }
#chapterUI .chx-fa { width: 200px; margin: 0 -26px; transform-origin: 50% 120%; transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg)) translateY(calc(max(var(--k) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--k)) * 16px));
  animation: chxFa .8s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--k) * .12s); transition: translate .25s; }
#chapterUI .chx-fa:hover { translate: 0 -22px; z-index: 2; }
#chapterUI .chx-fa .lc { width: 100%; }
@keyframes chxFa { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }
#chapterUI .chx-final.one .chx-fa { width: 280px; margin: 0; transform: none; }

/* phone landscape: bigger everything */
body.mobile #chapterUI .chx-skipall { font-size: 24px; padding: 16px 26px; }
body.mobile #chapterUI .tc-box { width: 820px; }
body.mobile #chapterUI .tc-box b { font-size: 40px; }
body.mobile #chapterUI .tc-box span { font-size: 30px; }
body.mobile #chapterUI .tc-btns .btn, body.mobile #chapterUI .chx-acts .btn, body.mobile #chapterUI .chx-btns .btn { font-size: 28px; padding: 18px 34px; }
body.mobile #chapterUI .chx-main { padding: 40px 50px 30px; }
body.mobile #chapterUI .chx-eyebrow { font-size: 22px; }
body.mobile #chapterUI h1 { font-size: 80px; }
body.mobile #chapterUI h2 { font-size: 62px; }
body.mobile #chapterUI .chx-sub, body.mobile #chapterUI .chx-beat { font-size: 30px; }
body.mobile #chapterUI .chx-note { font-size: 24px; }
body.mobile #chapterUI .chx-nodes { margin-top: 18px; }
body.mobile #chapterUI .cn-k { font-size: 18px; }
body.mobile #chapterUI .cn-t { font-size: 28px; }
body.mobile #chapterUI .cn-o { font-size: 22px; }
body.mobile #chapterUI .chx-sub { max-width: 1100px; }
body.mobile #chapterUI .chx-title .chx-sub { display: none; }
body.mobile #chapterUI .chx-actor { width: 280px; height: 280px; bottom: 350px; }
body.mobile #chapterUI .chx-box { min-height: 300px; padding: 30px 40px 30px; }
body.mobile #chapterUI .chx-who b { font-size: 36px; }
body.mobile #chapterUI .chx-who em { font-size: 22px; }
body.mobile #chapterUI .chx-line { font-size: 38px; max-width: none; padding-right: 0; margin-bottom: 90px; }
body.mobile #chapterUI .chx-sctitle b { font-size: 44px; }
body.mobile #chapterUI .chx-sctitle span { font-size: 20px; }
body.mobile #chapterUI .chx-tap { display: none; }
body.mobile #chapterUI .chx-rw b { font-size: 60px; }
body.mobile #chapterUI .chx-rw span { font-size: 24px; }
body.mobile #chapterUI .chx-rws { margin-top: 18px; }
body.mobile #chapterUI .chx-fan { height: 380px; }
body.mobile #chapterUI .chx-reward .chx-beat img { width: 100px; height: 100px; }

/* portrait: a 900-wide stage */
body.portrait #chapterUI .chx-main { padding: 110px 30px 60px; }
body.portrait #chapterUI .chx-skipall { right: 16px; top: 16px; font-size: 24px; padding: 14px 22px; }
body.portrait #chapterUI .tc-box { width: 852px; padding: 40px 34px; }
body.portrait #chapterUI .tc-box b { font-size: 44px; }
body.portrait #chapterUI .tc-box span { font-size: 32px; }
body.portrait #chapterUI .tc-btns .btn, body.portrait #chapterUI .chx-acts .btn, body.portrait #chapterUI .chx-btns .btn { font-size: 32px; padding: 20px 36px; }
body.portrait #chapterUI .chx-eyebrow { font-size: 24px; }
body.portrait #chapterUI h1 { font-size: 84px; }
body.portrait #chapterUI h2 { font-size: 64px; }
body.portrait #chapterUI .chx-sub, body.portrait #chapterUI .chx-beat { font-size: 32px; }
body.portrait #chapterUI .chx-note { font-size: 26px; }
body.portrait #chapterUI .chx-nodes { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
body.portrait #chapterUI .chx-nodes::before { left: 90px; right: auto; top: 60px; bottom: 60px; width: 4px; height: auto; }
body.portrait #chapterUI .chx-node { grid-template-columns: 150px 1fr; grid-template-rows: auto auto auto; justify-items: start; text-align: left; column-gap: 26px; row-gap: 2px; padding: 0 10px; }
body.portrait #chapterUI .cn-face { grid-row: 1 / 4; width: 150px; height: 150px; }
body.portrait #chapterUI .cn-k { font-size: 22px; margin-top: 18px; }
body.portrait #chapterUI .cn-t { font-size: 36px; }
body.portrait #chapterUI .cn-o { font-size: 26px; }
body.portrait #chapterUI .cn-ok { top: 104px; left: 108px; width: 46px; height: 46px; }
body.portrait #chapterUI .chx-acts { flex-direction: column; align-items: center; }
body.portrait #chapterUI .chx-sctitle { left: 30px; top: 110px; }
body.portrait #chapterUI .chx-sctitle b { font-size: 46px; }
body.portrait #chapterUI .chx-sctitle span { font-size: 22px; }
body.portrait #chapterUI .chx-actor { left: 50%; translate: -50% 0; bottom: auto; top: 260px; width: 440px; height: 440px; }
body.portrait #chapterUI .chx-actor.pop { animation: none; }
body.portrait #chapterUI .chx-box { left: 24px; right: 24px; bottom: 40px; min-height: 420px; padding: 34px 34px 120px; }
body.portrait #chapterUI .chx-who { flex-direction: column; gap: 6px; }
body.portrait #chapterUI .chx-who b { font-size: 42px; }
body.portrait #chapterUI .chx-who em { font-size: 22px; }
body.portrait #chapterUI .chx-line { font-size: 38px; padding-right: 0; }
body.portrait #chapterUI .chx-btns { left: 30px; right: 30px; bottom: 28px; justify-content: space-between; }
body.portrait #chapterUI .chx-tap { display: none; }
body.portrait #chapterUI .chx-rws { flex-direction: column; gap: 26px; }
body.portrait #chapterUI .chx-rw b { font-size: 64px; }
body.portrait #chapterUI .chx-rw span { font-size: 26px; }
body.portrait #chapterUI .chx-cardslot { width: 260px; height: 364px; }
body.portrait #chapterUI .chx-beat img { width: 110px; height: 110px; }
body.portrait #chapterUI .chx-fan { height: 560px; }
body.portrait #chapterUI .chx-fa { width: 250px; margin: 0 -80px; }
body.portrait #chapterUI .chx-final.one .chx-fa { width: 400px; }

body.fx-low #chapterUI .chx-art, body.fx-low #chapterUI .cn-face { animation: none; }
#chapterUI.still .chx-art { animation: none; }
@media (prefers-reduced-motion: reduce) { #chapterUI .chx-art, #chapterUI .chx-node.cur .cn-face, #chapterUI .chx-fa, #tutLayer .tut-quip.on { animation: none; } }

/* phones + Graphics: Low (2026-09-30): the chapter's full-screen art is drawn flat (no filter, no drift) and its
   confirm dims without a backdrop blur: iPhone Safari closes tabs that run out of graphics memory (see css/onboarding.css). */
body.mobile #chapterUI .chx-art, body.fx-low #chapterUI .chx-art { filter: none; animation: none; inset: 0; opacity: .62; }
body.mobile #chapterUI[data-mode="scene"] .chx-art, body.fx-low #chapterUI[data-mode="scene"] .chx-art { opacity: .78; }
body.mobile #chapterUI .chx-confirm, body.mobile #tutLayer .tut-confirm, body.fx-low #chapterUI .chx-confirm, body.fx-low #tutLayer .tut-confirm { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 2, 14, .86); }