/* Manga panel pages (js/panels.js): boss and fight-talk scenes drawn as coloured manga pages. */
.panels-wrap { --pn-ink: #120a18; --pn-paper: #f6ecd8; --pn-spd: 1; --pn-m: 16px; --pn-pad: 12px; background: #0c0612; user-select: none; -webkit-user-select: none; }
.panels-wrap .pn-back { position: absolute; inset: 0; filter: brightness(.32) saturate(1.3) blur(2px); }
.panels-wrap .pn-back::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .55) 1px, transparent 1.6px) 0 0 / 6px 6px, radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(12, 6, 18, .85) 100%); }

/* the paper sheet and its black gutters */
.pn-sheet { position: absolute; inset: var(--pn-m); background: var(--pn-paper); background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(135deg, #f8efdc, #eadbbd); box-shadow: 0 0 0 3px var(--pn-ink), 10px 12px 0 rgba(0, 0, 0, .55); animation: pnSheetIn calc(.34s / var(--pn-spd)) cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes pnSheetIn { from { transform: translateY(24px) rotate(-1.2deg) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.pn-page { position: absolute; inset: var(--pn-pad); background: var(--pn-ink); overflow: hidden; transition: opacity calc(.17s / var(--pn-spd)), transform calc(.17s / var(--pn-spd)); }
.pn-bubbles { position: absolute; inset: var(--pn-pad); pointer-events: none; z-index: 2; transition: opacity calc(.17s / var(--pn-spd)), transform calc(.17s / var(--pn-spd)); }
.pn-sheet.turn .pn-page, .pn-sheet.turn .pn-bubbles { opacity: 0; transform: translateX(-26px) skewX(-2deg); }
.pn-folio { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font: 700 9px/12px var(--f-ui); letter-spacing: .3em; color: #8a7458; }
.pn-next { position: absolute; right: calc(var(--pn-pad) + 10px); bottom: calc(var(--pn-pad) + 8px); z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; font-size: 15px; color: var(--pn-paper); background: var(--pn-ink); border: 2px solid var(--pn-paper); box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.panels-wrap.pn-ready .pn-next { opacity: 1; transform: none; animation: pnNext 1.1s ease-in-out infinite; }
@keyframes pnNext { 50% { transform: translateX(4px); } }
.pn-skip { position: absolute; top: calc(var(--pn-m) + 6px); right: calc(var(--pn-m) + 6px); z-index: 4; font: 700 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--pn-paper); background: rgba(18, 10, 24, .82); border: 2px solid var(--pn-paper); padding: 4px 10px; cursor: pointer; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.pn-skip:hover { background: var(--pn-ink); color: var(--gold, #f2c14e); }
.pn-sheet.pn-shake { animation: pnShake .32s linear; }
@keyframes pnShake { 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(3px, 2px); } }

/* panels */
.pn-cell { position: absolute; opacity: 0; transform: translateY(16px) scale(.95); transform-origin: 50% 60%; transition: opacity calc(.26s / var(--pn-spd)) ease-out, transform calc(.4s / var(--pn-spd)) cubic-bezier(.2, 1.35, .4, 1); }
.pn-cell.odd { transform: translateX(-18px) scale(.97); }
.pn-cell.pn-insetcell { transform: scale(.4) rotate(-6deg); z-index: 1; }
.pn-cell.in { opacity: 1; transform: none; }
.pn-key { position: absolute; inset: 0; background: var(--pn-paper); }
.pn-ink { position: absolute; inset: 0; background: var(--pn-ink); }
.pn-in { position: absolute; inset: 0; }
.pn-inbox { position: absolute; overflow: hidden; }
.pn-bgc, .pn-scene, .pn-wash, .pn-tone { position: absolute; inset: 0; }
.pn-scene .scene { position: absolute; inset: 0; }
.pn-fl, .pn-sl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* colour washes per speaker (--c) */
.bg-wash .pn-bgc { background: radial-gradient(ellipse at var(--fx, 50%) 42%, color-mix(in srgb, var(--c) 28%, #fff) 0%, color-mix(in srgb, var(--c) 70%, #fff) 45%, color-mix(in srgb, var(--c) 78%, #120a18) 100%); }
.bg-burst .pn-bgc { background: radial-gradient(ellipse at var(--fx, 50%) 44%, #fff 0 10%, color-mix(in srgb, var(--c) 40%, #fff6d0) 28%, var(--c) 62%, color-mix(in srgb, var(--c) 70%, #120a18) 100%); }
.bg-burst .pn-fl { opacity: .85; }
.bg-dark .pn-bgc, .pn-bgc.dark { background: radial-gradient(ellipse at var(--fx, 50%) 42%, color-mix(in srgb, var(--c) 55%, #3a1458) 0%, color-mix(in srgb, var(--c) 22%, #1a0a28) 48%, #08040c 100%); }
.bg-soft .pn-bgc { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, #fff), color-mix(in srgb, var(--c) 42%, #fff)); }
.bg-paper .pn-bgc { background: linear-gradient(160deg, #fbf4e4, #e6d6b6); }
.bg-scene .pn-wash { background: linear-gradient(180deg, rgba(255, 240, 210, .12), color-mix(in srgb, var(--c) 45%, transparent)); mix-blend-mode: multiply; }
.bg-scene.dark .pn-scene { filter: brightness(.55) saturate(1.4) hue-rotate(-25deg); }
.bg-scene.dark .pn-wash { background: linear-gradient(180deg, rgba(90, 30, 140, .55), rgba(12, 4, 20, .7)); mix-blend-mode: normal; }
.pn-silent .pn-scene { filter: saturate(1.15) contrast(1.05); }

/* screentone: gradient dot tone like printed manga */
.pn-tone { background-image: radial-gradient(circle, rgba(18, 10, 24, .34) 0 1.2px, transparent 1.7px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 35%, transparent 75%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 35%, transparent 75%); pointer-events: none; }
.pn-tone.big { background-image: radial-gradient(circle, rgba(18, 10, 24, .16) 0 3px, transparent 3.6px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.bg-dark .pn-tone { background-image: radial-gradient(circle, rgba(200, 150, 255, .22) 0 1.2px, transparent 1.7px); }

/* character art */
.pn-fig { position: absolute; }
.pn-fig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pn-fig.bust { filter: drop-shadow(5px 4px 0 rgba(18, 10, 24, .5)); }
.pn-fig.face, .pn-fig.eyes { filter: contrast(1.08) saturate(1.1); }
.pn-fig.eyes::after, .pn-fig.face::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(18, 10, 24, .08) 3px 4px); pointer-events: none; }
.pn-fig.think { filter: grayscale(.3) drop-shadow(4px 4px 0 rgba(18, 10, 24, .35)); opacity: .92; }
.bg-dark .pn-fig { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, #fff)) brightness(.92); }
.pn-in .pn-cell.in .pn-fig.bust { animation: none; }
.pn-cell.in .pn-fig.face, .pn-cell.in .pn-fig.eyes { animation: pnZoom calc(1.4s / var(--pn-spd)) cubic-bezier(.2, .8, .3, 1) both; }
@keyframes pnZoom { from { transform: scale(1.14); } to { transform: scale(1); } }

/* Stands behind their users */
.pn-stand { position: absolute; opacity: .92; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 80%, #fff)) drop-shadow(0 0 3px #fff); }
.pn-stand svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pn-stand.solo { left: 50%; top: 50%; height: 118%; width: auto; aspect-ratio: 120 / 160; transform: translate(-50%, -46%); }
.pn-cell.in .pn-stand { animation: pnStand calc(.7s / var(--pn-spd)) ease-out both, pnFloat 3.2s ease-in-out calc(.7s / var(--pn-spd)) infinite; }
.pn-cell.in .pn-stand.solo { animation: pnStandSolo calc(.7s / var(--pn-spd)) ease-out both; }
@keyframes pnStand { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: .92; transform: none; } }
@keyframes pnStandSolo { from { opacity: 0; transform: translate(-50%, -40%) scale(.85); } to { opacity: .95; transform: translate(-50%, -46%); } }
@keyframes pnFloat { 50% { transform: translateY(-6px); } }

/* kana SFX drawn into the panel */
.pn-sfx { position: absolute; z-index: 1; font-family: var(--f-jp, 'Noto Sans JP'), sans-serif; font-weight: 900; line-height: .92; color: #ffd84a; -webkit-text-stroke: .075em var(--pn-ink); paint-order: stroke fill; text-shadow: .07em .07em 0 var(--pn-ink); transform: rotate(var(--rot, 0deg)); transform-origin: 0 0; white-space: nowrap; pointer-events: none; letter-spacing: -.04em; }
.pn-sfx span { display: inline-block; }
.pn-sfx.menace { color: #b77dff; }
.pn-sfx.menace span { display: block; transform: translateX(calc(var(--k) * .32em)) scale(calc(1 - var(--k) * .06)); }
.pn-sfx.angry { color: #ff5a4a; }
.pn-sfx.amb { color: #fff; opacity: .9; font-size: .8em; }
.pn-sfx.loud { color: #ffd84a; }
.pn-cell.in .pn-sfx span { animation: pnSfx calc(.5s / var(--pn-spd)) cubic-bezier(.2, 1.6, .4, 1) calc((.12s + var(--k) * .07s) / var(--pn-spd)) both; }
.pn-cell.in .pn-sfx.menace span { animation: pnSfx calc(.5s / var(--pn-spd)) cubic-bezier(.2, 1.6, .4, 1) calc((.12s + var(--k) * .09s) / var(--pn-spd)) both, pnMenace 2.4s ease-in-out calc(.8s + var(--k) * .3s) infinite; }
@keyframes pnSfx { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }
@keyframes pnMenace { 50% { opacity: .55; translate: 3px -3px; } }

/* bubbles */
.pn-bub { position: absolute; isolation: isolate; --bf: #fff; --bs: var(--pn-ink); color: var(--pn-ink); font-family: var(--f-ui); font-weight: 500; line-height: 1.16; text-align: center; padding: .42em .55em; box-sizing: border-box; opacity: 0; transform: scale(.55); transition: opacity calc(.18s / var(--pn-spd)), transform calc(.32s / var(--pn-spd)) cubic-bezier(.2, 1.6, .4, 1); }
.pn-bub.in { opacity: 1; transform: none; }
.pn-bsvg { position: absolute; z-index: -1; overflow: visible; left: -20%; top: -24%; width: 140%; height: 148%; filter: drop-shadow(3px 3px 0 rgba(18, 10, 24, .45)); }
.pn-bub.spiky .pn-bsvg { left: -26%; top: -36%; width: 152%; height: 172%; }
.pn-bub.cloud .pn-bsvg { left: -20%; top: -28%; width: 140%; height: 156%; }
.pn-tx { position: relative; display: block; text-transform: uppercase; letter-spacing: .015em; overflow-wrap: break-word; }
.pn-nm { display: block; width: fit-content; max-width: 100%; margin: 0 auto .32em; font-size: .6em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c); border: 2px solid var(--pn-ink); padding: .08em .55em; line-height: 1.3; text-shadow: -1px -1px 0 var(--pn-ink), 1px -1px 0 var(--pn-ink), -1px 1px 0 var(--pn-ink), 1px 1px 0 var(--pn-ink); transform: rotate(-1.5deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-bub.spiky .pn-tx { font-family: var(--f-sfx); font-weight: 400; letter-spacing: .04em; font-size: 1.12em; line-height: 1.05; }
.pn-bub.cloud .pn-tx { text-transform: none; font-style: italic; font-weight: 400; }
.pn-bub.dark { --bf: var(--pn-ink); --bs: #f6ecd8; color: #f6ecd8; }
.pn-bub.dark .pn-bsvg { filter: drop-shadow(0 0 6px rgba(183, 125, 255, .6)); }
.pn-bub.angry { --bf: #fff1ea; }
.pn-bub.angry .pn-tx { color: #7a0a14; }

/* narration captions */
.pn-cap { background: #fff7d6; border: 2.5px solid var(--pn-ink); box-shadow: 3px 3px 0 var(--pn-ink); text-align: left; font-weight: 400; padding: .42em .7em; transform: translateX(-14px); rotate: -.5deg; }
.pn-cap.in { transform: none; }
.pn-cap .pn-tx { text-transform: none; letter-spacing: .01em; }
.pn-cap.dark { background: var(--pn-ink); color: #f6ecd8; border-color: #b77dff; box-shadow: 3px 3px 0 #000, 0 0 12px rgba(183, 125, 255, .45); }
.pn-cap.loud { background: #ffd84a; text-align: center; font-family: var(--f-sfx); rotate: -2deg; box-shadow: 5px 5px 0 var(--pn-ink); transform: scale(1.6); }
.pn-cap.loud.in { transform: none; }
.pn-cap.loud .pn-tx { text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; }

/* small screens */
@media (max-width: 640px) {
  .panels-wrap { --pn-m: 6px; --pn-pad: 7px; }
  .pn-sheet { box-shadow: 0 0 0 2px var(--pn-ink), 5px 6px 0 rgba(0, 0, 0, .55); }
  .pn-skip { font-size: 10px; padding: 3px 8px; }
  .pn-next { width: 24px; height: 24px; font-size: 12px; }
  .pn-nm { border-width: 1.5px; }
  .pn-cap { border-width: 2px; box-shadow: 2px 2px 0 var(--pn-ink); }
}

/* reduced motion: everything appears in place */
.panels-wrap.pn-still *, .panels-wrap.pn-still { animation: none !important; transition: none !important; }
.panels-wrap.pn-still .pn-cell, .panels-wrap.pn-still .pn-bub { transform: none; }
@media (prefers-reduced-motion: reduce) { .pn-cell.in .pn-sfx span, .pn-cell.in .pn-stand, .pn-cell.in .pn-fig { animation: none !important; } }
.pn-bub.spiky { padding: .62em .8em; }