/* STREET STORIES: the comic book itself. A paper page over the live court,
   a masthead, one strip of panels, and the reading controls. */
/* The entry on the home sheet is a small cover, not another row: the story is a different kind of thing. */
.other-mode-stories { position: relative; grid-column: 1 / -1; min-height: 104px; padding: 12px 118px 12px 14px; overflow: hidden; font: 23px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: #f6eeda; background: linear-gradient(100deg, #17231f 55%, #2f4a40); border-color: #e8ce4a; }
.other-mode-stories b { padding: 4px 8px 3px; font: 800 10px/1 var(--font-body); letter-spacing: .14em; color: #131a18; background: #f5d84a; }
.other-mode-stories span { text-transform: none; letter-spacing: 0; }
.other-mode-stories::after { content: ''; position: absolute; right: 6px; bottom: -34px; width: 108px; height: 154px; background: url('../assets/street-stories/kojo-selling.webp') center / contain no-repeat; filter: drop-shadow(-2px -2px 0 rgb(255 234 170 / .7)); pointer-events: none; }
.screen-street-story {
  --story-ink: #131a18; --story-paper: #f1e8d0; --story-yellow: #f5d84a; --story-red: #b4523d;
  z-index: 28; place-items: stretch;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: #0c1211;
}
.story-book {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 1.4vh, 14px);
  /* An explicit height: short landscape phones give menu screens an auto-height row, which would collapse the strip. */
  width: min(1500px, 100%); height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); margin: 0 auto; padding: clamp(10px, 1.6vw, 22px);
  color: var(--story-ink); background: var(--story-paper);
  /* Newsprint: a little grain and an uneven edge, so the page is an object and not a web card. */
  background-image:
    radial-gradient(rgb(19 26 24 / .07) 1px, transparent 1.3px), radial-gradient(rgb(19 26 24 / .05) 1px, transparent 1.2px),
    linear-gradient(180deg, rgb(255 255 255 / .35), transparent 30%, rgb(120 96 50 / .12));
  background-size: 7px 7px, 11px 11px, 100% 100%; background-position: 0 0, 3px 5px, 0 0;
  box-shadow: 0 0 0 1px rgb(19 26 24 / .6), 0 30px 90px rgb(0 0 0 / .6);
}
.story-masthead { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'series title exit' 'series place exit'; align-items: center; column-gap: clamp(10px, 1.6vw, 22px); }
.story-series { grid-area: series; display: grid; margin: 0; padding: 6px 12px 5px; color: var(--story-ink); background: var(--story-yellow); border: 3px solid var(--story-ink); box-shadow: 4px 4px 0 var(--story-ink); transform: rotate(-2deg); }
.story-series span { font: 15px/1 var(--font-display); letter-spacing: .04em; }
.story-series b { font: 800 10px/1.3 var(--font-body); letter-spacing: .12em; }
.story-masthead h2 { grid-area: title; margin: 0; font: clamp(22px, 3.6vw, 46px)/.92 var(--font-display); text-transform: uppercase; letter-spacing: .005em; }
.story-place { grid-area: place; margin: 2px 0 0; font: 800 clamp(9px, .95vw, 12px)/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgb(19 26 24 / .7); }
.story-exit { grid-area: exit; min-width: 44px; min-height: 44px; padding: 0 14px; font: 800 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--story-ink); background: transparent; border: 2px solid var(--story-ink); cursor: pointer; }
.story-exit:hover, .story-exit:focus-visible { color: var(--story-paper); background: var(--story-ink); }

.story-strip { display: flex; gap: clamp(8px, 1vw, 14px); min-height: 0; }
.story-strip.is-turning { animation: story-turn .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes story-turn { from { opacity: 0; transform: translateX(26px); } }

.story-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; min-height: 54px; padding-right: 58px; /* the sound button lives in this corner */ }
.story-progress { height: 5px; background: rgb(19 26 24 / .16); }
.story-progress::after { content: ''; display: block; height: 100%; background: var(--story-ink); transform-origin: left; transform: scaleX(var(--read, 0)); transition: transform .3s ease-out; }
.story-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.story-controls button { min-height: 48px; padding: 8px 20px; font: 20px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--story-ink); border: 3px solid var(--story-ink); cursor: pointer; transition: transform .12s ease-out, box-shadow .12s ease-out; }
.story-controls button strong { font: inherit; }
.story-next { background: var(--story-yellow); box-shadow: 5px 5px 0 var(--story-ink); }
.story-next strong::after { content: '  \25B8'; }
.story-quiet { background: transparent; font-size: 15px; }
.story-choice { display: grid; gap: 3px; text-align: left; background: var(--story-paper); box-shadow: 5px 5px 0 var(--story-ink); }
.story-choice span { font: 800 11px/1.2 var(--font-body); letter-spacing: .1em; color: var(--story-red); }
.story-choice:nth-child(1) { transform: rotate(-1deg); }
.story-choice:nth-child(2) { transform: rotate(.8deg); }
.story-controls button:hover, .story-controls button:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--story-ink); outline: none; }
.story-controls button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--story-ink); }
.story-controls[data-mode='choice'] { animation: story-ask .3s ease-out both; }
@keyframes story-ask { from { opacity: 0; transform: translateY(8px); } }

@media (orientation: portrait) {
  .story-strip { flex-direction: column; }
  .story-masthead { grid-template-areas: 'series exit' 'title title' 'place place'; grid-template-columns: 1fr auto; row-gap: 6px; }
  .story-series { justify-self: start; }
  .story-footer { grid-template-columns: 1fr; }
  .story-controls { justify-content: stretch; }
  .story-controls button { flex: 1 1 100%; }
}
@media (max-height: 480px) {
  .story-book { gap: 6px; padding: 8px 10px; }
  .story-masthead h2 { font-size: 20px; }
  .story-place { display: none; }
  .story-series { padding: 4px 9px; box-shadow: 3px 3px 0 var(--story-ink); }
  .story-footer { min-height: 46px; }
  .story-controls button { min-height: 44px; padding: 6px 14px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-strip.is-turning, .story-controls[data-mode='choice'] { animation: none; }
  .story-controls button { transition: none; }
}
/* The cover carries the title itself, so the masthead steps back to a label. */
.story-book[data-cover] .story-masthead h2, .story-book[data-cover] .story-place { visibility: hidden; }