/* Comic panels: a print of the court, the cast, chalk, and the lettering. */
.story-panel { position: relative; flex: var(--weight, 1) 1 0; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #17231f; border: 4px solid var(--story-ink); box-shadow: 5px 6px 0 rgb(19 26 24 / .28); transform: rotate(var(--tilt, 0deg)); }
.story-panel.is-pencil { background: transparent; border: 2px dashed rgb(19 26 24 / .22); box-shadow: none; }
.story-panel.is-pencil > * { display: none; }
.story-panel.is-new { animation: story-ink-in .36s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes story-ink-in { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px) rotate(var(--tilt, 0deg)); } to { clip-path: inset(0 0 0 0); } }
.story-panel.is-read { filter: saturate(.8) brightness(.93); transition: filter .3s; }

.story-panel-print { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.story-panel.is-current .story-panel-print { animation: story-push 14s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes story-push { from { transform: scale(1); } to { transform: scale(1.07); } }
/* Without a print (the renderer was asleep) the panel still reads as night at the court. */
.story-panel.is-unprinted .story-panel-print { background: linear-gradient(180deg, #14211f, #2f4a40 62%, #3f5c4e); }
.story-panel-wash { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgb(19 26 24 / .28) 1px, transparent 1.4px) 0 0 / 6px 6px, linear-gradient(180deg, rgb(10 16 15 / 0) 45%, rgb(10 16 15 / .45));
  mix-blend-mode: multiply; }
.story-panel[data-kind='talk'] .story-panel-print, .story-panel[data-kind='close'] .story-panel-print { filter: blur(1.2px); }
.story-panel[data-speaker='kojo'] .story-panel-wash { background-color: rgb(44 128 136 / .22); }
.story-panel[data-speaker='esi'] .story-panel-wash { background-color: rgb(245 216 74 / .16); }
.story-panel[data-speaker='nana'] .story-panel-wash { background-color: rgb(167 80 62 / .26); }

.story-panel-cast, .story-panel-diagram, .story-panel-letters { position: absolute; inset: 0; pointer-events: none; }
.story-figure { position: absolute; left: var(--x, 50%); bottom: -3%; height: 78%; aspect-ratio: var(--shape, 2 / 3); transform: translateX(-50%); filter: brightness(.8) saturate(.86); z-index: 1; }
.story-figure.is-speaking { height: 88%; filter: none; z-index: 2; }
.story-figure.is-flipped { transform: translateX(-50%) scaleX(-1); }
/* Floodlight from behind on one edge, a hard print shadow on the other: the cut-out sits in the court's light. */
.story-figure img { display: block; width: 100%; height: 100%; filter: drop-shadow(-2px -2px 0 rgb(255 234 170 / .7)) drop-shadow(7px 6px 0 rgb(8 12 11 / .5)); -webkit-user-drag: none; user-select: none; }
.story-panel[data-kind='close'] .story-figure { bottom: auto; top: 14%; height: 215%; }
.story-panel[data-kind='close'] .story-figure.is-bust { top: auto; bottom: -3%; height: 90%; }
.story-panel[data-kind='diagram'] .story-figure { left: 17%; height: 62%; }
.story-panel.is-new .story-figure img { animation: story-step-in .34s .08s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes story-step-in { from { opacity: 0; transform: translateY(5%) scale(.97); } }
.story-panel.is-current .story-figure.is-speaking { animation: story-breathe 3.8s ease-in-out infinite alternate; }
@keyframes story-breathe { to { translate: 0 -.8%; } }

.story-caption { position: absolute; left: 4%; top: 5%; max-width: 86%; padding: .5em .75em .45em; font: 800 clamp(11px, 1.12vw, 16px)/1.3 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--story-ink); background: var(--story-yellow); border: 3px solid var(--story-ink); box-shadow: 4px 4px 0 var(--story-ink); transform: rotate(-1deg); }
.story-balloon { position: absolute; top: 4%; max-width: 70%; padding: .5em .9em .6em; color: var(--story-ink); background: #fbf6e6; border: 3px solid var(--story-ink); border-radius: 1.4em; z-index: 3; }
.story-balloon[data-side='left'] { left: 4%; }
.story-balloon[data-side='right'] { right: 4%; }
.story-balloon b { display: block; margin-bottom: .1em; font: 800 clamp(9px, .8vw, 11px)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--story-red); }
.story-balloon p { margin: 0; font: clamp(14px, 1.45vw, 21px)/1.14 var(--font-hand); letter-spacing: .01em; text-transform: uppercase; }
.story-balloon::after { content: ''; position: absolute; top: calc(100% - 2px); width: 1.3em; height: 1.5em; background: #fbf6e6; border: solid var(--story-ink); border-width: 0 3px 3px 0; }
.story-balloon[data-side='left']::after { right: 16%; transform: skewX(-38deg); transform-origin: top; clip-path: polygon(0 0, 130% 0, 130% 130%); }
.story-balloon[data-side='right']::after { left: 16%; border-width: 0 0 3px 3px; transform: skewX(38deg); transform-origin: top; clip-path: polygon(-30% 0, 100% 0, -30% 130%); }
.story-balloon[data-shout='true'] { background: var(--story-yellow); transform: rotate(-2deg); }
.story-balloon[data-shout='true']::after { background: var(--story-yellow); }
.story-balloon[data-shout='true'] p { font: clamp(20px, 2.4vw, 36px)/.95 var(--font-display); }
.story-panel.is-new .story-balloon, .story-panel.is-new .story-caption { animation: story-pop .26s .16s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes story-pop { from { opacity: 0; scale: .82; } }

.story-chalk { position: absolute; inset: 0; width: 100%; height: 100%; }
.chalk-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.story-panel.is-new .chalk-line { animation: story-chalk .8s calc(.3s + var(--order, 0) * .7s) ease-out both; }
.story-panel.is-new .chalk-head, .story-panel.is-new .chalk-hit, .story-panel.is-new .chalk-name { animation: story-pop .2s calc(1s + var(--order, 0) * .7s) both; }
@keyframes story-chalk { from { stroke-dashoffset: 1; } }
.chalk-name { font-family: var(--font-chalk); font-weight: 700; letter-spacing: .06em; }

@media (max-height: 480px), (max-width: 520px) {
  .story-panel { border-width: 3px; }
  .story-balloon { max-width: 78%; }
  .story-balloon p { font-size: 14px; }
  .story-caption { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-panel.is-new, .story-panel.is-new *, .story-panel.is-current .story-panel-print, .story-panel.is-current .story-figure { animation: none !important; }
}

/* The cover: one full-width splash before the first strip. */
.story-panel[data-kind='cover'] .story-panel-wash { background: linear-gradient(90deg, rgb(10 16 15 / .86), rgb(10 16 15 / .3) 58%, rgb(10 16 15 / 0)), radial-gradient(rgb(19 26 24 / .3) 1px, transparent 1.4px) 0 0 / 6px 6px; mix-blend-mode: normal; }
.story-cover { position: absolute; left: 5%; bottom: 8%; display: grid; gap: clamp(6px, 1.2vh, 14px); max-width: 78%; color: #f6eeda; }
.story-cover span { justify-self: start; padding: 5px 10px 4px; font: 800 clamp(10px, 1vw, 13px)/1 var(--font-body); letter-spacing: .18em; color: var(--story-ink); background: var(--story-yellow); }
.story-cover strong { font: clamp(46px, 9.4vw, 148px)/.84 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; text-shadow: 5px 5px 0 var(--story-ink); }
.story-cover em { font: clamp(15px, 1.7vw, 24px)/1.2 var(--font-hand); font-style: normal; text-transform: uppercase; color: var(--story-yellow); }
.story-cover small { font: 700 clamp(9px, .85vw, 11px)/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
@media (max-height: 480px) { .story-cover strong { font-size: clamp(34px, 15vh, 64px); } }

/* A diagram is the picture: keep the lettering off the goal, down beside whoever is explaining it. */
.story-panel[data-kind='diagram'] .story-balloon { top: auto; bottom: 6%; left: auto; right: 4%; max-width: 58%; }
.story-panel[data-kind='diagram'] .story-balloon::after { display: none; }
.story-panel[data-kind='diagram'] .story-figure.is-flipped { left: 15%; }