/* Story encounters, cartoon edition: Want of Air (.woa-) and The Maelstrom (.mael-), the shared shell
   (.enc-), and the framing cards that wrap every encounter (.story-frame: before, win, lose).
   Everything is sticker-styled: flat fills, an ink outline and a solid offset shadow (see storybook.css).
   The scenes themselves are painted on canvas with the art kit and js/games/story-art.js.
   Colours are tokens; no gradients except the soft sheen on glass. */

.enc {
  display: grid;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}

/* ---------- HUD: chips, a candy gauge and a round pause button ---------- */

.enc-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.enc-chip { flex: 0 0 auto; min-width: 0; font-weight: 600; }
.enc-chip .sb-icon { color: var(--accent); }
.enc-label {
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.enc-value {
  min-width: 2.2ch;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: right;
}
.enc-chip-gauge { flex: 1 1 200px; }

.enc-pause {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  border-radius: 50%;
  color: var(--sb-primary-ink);
  background: var(--sb-primary);
  border: var(--sb-outline-w) solid var(--sb-outline);
  box-shadow: inset 0 -3px 0 var(--sb-primary-lo), inset 0 2px 0 var(--sb-primary-hi), var(--sb-pop);
  transition: transform 0.15s var(--ease-spring, ease), filter 0.15s ease, box-shadow 0.15s ease;
}
.enc-pause .sb-icon { width: 20px; height: 20px; }
.enc-pause:hover { filter: brightness(1.06); transform: translateY(-2px) rotate(-6deg); }
.enc-pause:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--sb-primary-lo), 0 1px 0 var(--sb-outline); }
.enc-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.enc-hint { margin: 0; font-size: 0.9rem; text-align: center; }

/* The gauge (air, escape): a fat candy tube. A white tube, an ink outline, a flat colour fill that
   drains from the right, and one white shine strip. The colour says how it is going. */
.enc-gauge {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 70px;
  height: 22px;
  border-radius: 999px;
  background: var(--sb-card);
  border: var(--sb-outline-w) solid var(--sb-outline);
  box-shadow: 0 3px 0 var(--sb-outline);
  overflow: hidden;
}
.enc-gauge-fill {
  display: block;
  height: 100%;
  width: 100%;
  min-width: 14px;
  border-radius: 999px;
  background: var(--sb-kelp);
  border-right: 3px solid var(--sb-outline);
  box-shadow: inset 0 -4px 0 rgb(20 33 61 / 0.18);
  transition: width 0.15s linear, background 0.3s;
}
.enc-gauge::after { /* the shine on the glass */
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 3px;
  height: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.62);
  pointer-events: none;
}
.enc-gauge[data-level="low"] .enc-gauge-fill { background: var(--sb-sun); }
.enc-gauge[data-level="critical"] .enc-gauge-fill {
  background: var(--sb-danger);
  animation: enc-throb 0.7s ease-in-out infinite;
}
html.reduced-motion .enc-gauge[data-level="critical"] .enc-gauge-fill { animation: none; }
@keyframes enc-throb { 50% { filter: brightness(1.18); } }

/* ---------- Stage: a sticker-framed canvas ---------- */

.enc-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--sb-deep);
  touch-action: manipulation;
}
.enc-canvas { display: block; max-width: 100%; margin: 0 auto; }

/* Story beats: a sticker over the picture ("Through!", "The air is gone"). */
.enc-banner {
  position: absolute;
  left: 50%;
  z-index: 4;
  max-width: min(90%, 30rem);
  padding: 8px 22px 10px;
  text-align: center;
  transform: translateX(-50%) rotate(-1.5deg);
  pointer-events: none;
  background: var(--sb-card);
  box-shadow: var(--sb-pop);
}
.enc-banner[hidden] { display: none; }
.enc-banner[data-pos="top"] { top: 14px; }
.enc-banner[data-pos="mid"] { top: 40%; }
.enc-banner[data-pos="bottom"] { bottom: 16px; }
.enc-banner.is-in { animation: enc-banner-in 0.5s var(--ease-spring, ease) both; }
html.reduced-motion .enc-banner.is-in { animation: none; }
@keyframes enc-banner-in {
  from { opacity: 0; transform: translate(-50%, 10px) rotate(-1.5deg) scale(0.8); }
  to { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg) scale(1); }
}
.enc-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sb-card-ink);
}
.enc-banner-sub { margin: 2px 0 0; font-size: 0.9rem; color: var(--sb-card-muted); }
.enc-banner[data-tone="good"] { background: color-mix(in srgb, var(--sb-kelp) 38%, var(--sb-card)); }
.enc-banner[data-tone="bad"] { background: color-mix(in srgb, var(--sb-danger) 30%, var(--sb-card)); }
.enc-banner[data-tone="info"] { background: color-mix(in srgb, var(--sb-sun) 40%, var(--sb-card)); }

/* Ready and paused cards */
.enc-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 5;
  cursor: pointer;
}
.enc-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sb-deep);
  opacity: 0.5;
}
.enc-overlay[hidden] { display: none; }
.enc-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 30rem;
  padding: 20px 24px 22px;
  text-align: center;
  color: var(--sb-card-ink);
  background: var(--sb-card);
  box-shadow: var(--sb-pop), var(--sb-shadow-lg);
  animation: sb-pop 0.45s var(--ease-spring, ease) both;
}
html.reduced-motion .enc-card { animation: none; }
.enc-card h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; }
.enc-card p { margin: 0; }
.enc-press {
  display: inline-block;
  padding: 3px 14px 4px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sb-primary-ink);
  background: var(--sb-sun);
  border: 2px solid var(--sb-outline);
  animation: sb-bob 1.4s ease-in-out infinite;
}
html.reduced-motion .enc-press { animation: none; }

.woa-stage, .mael-stage { background: var(--sb-deep); }

@media (max-width: 640px) {
  .enc-hud { gap: 8px; }
  .enc-chip { padding: 5px 11px 5px 8px; gap: 5px; }
  .enc-chip .sb-icon { width: 1.15em; height: 1.15em; }
  .enc-value { min-width: 0; font-size: 1.05rem; }
  .enc-pause { width: 42px; height: 42px; }
  .enc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .enc-chip-gauge { flex: 1 1 0; min-width: 100px; }
  .enc-gauge { min-width: 40px; height: 20px; }
  .enc-card h2 { font-size: 1.4rem; }
  /* a slim strip across the top of the stage, on one line */
  .enc-banner { top: 8px; width: max-content; max-width: calc(100% - 16px); padding: 4px 12px 6px; }
  .enc-banner[data-pos] { top: 8px; }
  .enc-banner-title { font-size: 1rem; white-space: nowrap; }
  .enc-banner-sub { font-size: 0.85rem; margin: 0; }
}

/* ======================================================================
   The framing cards: before (the mission), win and lose. Rendered by
   renderEncounterFrame in js/story/chapter-screens.js, styled here.
   Specificity is kept a notch above the base card rules in story.css.
   ====================================================================== */

.story-frame[data-tone] {
  --badge: 132px;
  --frame-tint: var(--sb-sky);
  max-width: 40rem;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 32px;
  background: var(--sb-card);
  color: var(--sb-card-ink);
  box-shadow: var(--sb-pop), 0 10px 0 color-mix(in srgb, var(--sb-outline) 18%, transparent), var(--sb-shadow-lg);
  overflow: visible;
}
.story-frame[data-tone]::after { /* a sunny sticker band across the top, behind the badge */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--badge) * 0.5 + 4px);
  z-index: 0;
  border-radius: 29px 29px 0 0;
  background: var(--frame-tint);
  border: 0;
  border-bottom: var(--sb-outline-w) solid var(--sb-outline);
  pointer-events: none;
}
.story-frame[data-tone="win"] { --frame-tint: var(--sb-sun); }
.story-frame[data-tone="lose"] { --frame-tint: color-mix(in srgb, var(--sb-sky) 70%, var(--sb-card)); }

/* the badge: a round sticker with a sunny ring that bobs */
.story-frame[data-tone] .story-badge { z-index: 2; animation: sb-bob 3s ease-in-out infinite; }
.story-frame[data-tone] .story-porthole {
  border: var(--sb-outline-w) solid var(--sb-outline);
  background: var(--sb-sea);
  box-shadow: 0 0 0 7px var(--sb-sun), 0 0 0 calc(7px + var(--sb-outline-w)) var(--sb-outline), 0 8px 0 calc(7px + var(--sb-outline-w)) var(--sb-outline);
}
.story-frame[data-tone="win"] .story-porthole { background: var(--sb-sun); box-shadow: 0 0 0 7px var(--sb-card), 0 0 0 calc(7px + var(--sb-outline-w)) var(--sb-outline), 0 8px 0 calc(7px + var(--sb-outline-w)) var(--sb-outline); }
.story-frame[data-tone="lose"] .story-porthole { background: var(--sb-sky); }
html.reduced-motion .story-frame[data-tone] .story-badge { animation: none; }
.story-frame[data-tone] .story-count {
  border: var(--sb-outline-w) solid var(--sb-outline);
  background: var(--sb-sun);
  color: var(--sb-primary-ink);
  font-family: var(--font-display);
  box-shadow: var(--sb-pop);
}
.story-frame[data-tone] .story-ring-track { stroke: color-mix(in srgb, var(--sb-outline) 18%, transparent); }
.story-frame[data-tone] .story-ring-bar { stroke: var(--sb-orange); }

/* the ribbon and the big outlined title */
.story-frame[data-tone] .story-frame-tag { position: relative; z-index: 1; margin-top: 22px; }
.story-frame[data-tone] .sb-ribbon {
  color: var(--sb-primary-ink);
  background: var(--sb-pink);
  border: 0;
  font-size: 0.95rem;
  transform: rotate(-2deg);
}
.story-frame[data-tone="win"] .sb-ribbon { background: var(--sb-kelp); }
.story-frame[data-tone="lose"] .sb-ribbon { background: var(--sb-sea); }
.story-frame[data-tone] .story-frame-title {
  margin: 4px 0 0.25em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  color: var(--sb-sun);
  letter-spacing: 0.01em;
  paint-order: stroke fill;
  -webkit-text-stroke: 9px var(--sb-outline);
  text-shadow: 0 5px 0 var(--sb-outline);
  text-wrap: balance;
}
.story-frame[data-tone="lose"] .story-frame-title { color: var(--sb-sky); }
.story-frame[data-tone="win"] .story-frame-title { color: var(--sb-primary-hi); animation: sb-squash 1.2s ease 0.1s both; }
html.reduced-motion .story-frame[data-tone="win"] .story-frame-title { animation: none; }

/* the lines and the rules: friendly bubbles */
.story-frame[data-tone] .story-frame-lines,
.story-frame[data-tone] .story-frame-lines p { color: var(--sb-card-ink); font-size: 1.18rem; line-height: 1.45; }
.story-frame[data-tone] .story-rule-row {
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 20px;
  background: var(--sb-card-2);
  box-shadow: 0 3px 0 var(--sb-outline);
  color: var(--sb-card-ink);
}
.story-frame[data-tone] .story-rule-icon {
  border: var(--sb-outline-w) solid var(--sb-outline);
  background: var(--sb-sun);
  color: var(--sb-primary-ink);
  box-shadow: 0 2px 0 var(--sb-outline);
}
.story-frame[data-tone] .story-rule-row:nth-child(2) .story-rule-icon { background: var(--sb-pink); }
.story-frame[data-tone] .story-rule-row:nth-child(3) .story-rule-icon { background: var(--sb-sea); }

/* the crew's line, in a comic speech bubble beside a round portrait */
.story-frame[data-tone] .story-bark-bubble {
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 22px;
  background: var(--sb-card-2);
  box-shadow: 0 3px 0 var(--sb-outline);
}
.story-frame[data-tone] .story-bark-bubble::before {
  border-color: var(--sb-outline);
  border-width: 0 0 var(--sb-outline-w) var(--sb-outline-w);
  background: var(--sb-card-2);
}
.story-frame[data-tone] .story-bark-who { color: var(--sb-card-muted); font-size: 0.85rem; }
.story-frame[data-tone] .story-bark-text { color: var(--sb-card-ink); font-style: normal; font-weight: 600; }

/* the buttons: big, sunny and bouncy */
.story-frame[data-tone] .story-actions .btn { border-radius: 999px; font-family: var(--font-display); font-weight: 600; }
.story-frame[data-tone] .story-actions .btn-primary {
  min-width: 12rem;
  min-height: 60px;
  font-size: 1.4rem;
  animation: enc-bounce 1.6s var(--ease-spring, ease) 0.6s infinite;
}
.story-frame[data-tone] .story-actions .btn-primary:hover { animation-play-state: paused; transform: translateY(-3px) rotate(-1.5deg) scale(1.04); }
.story-frame[data-tone] .story-actions .btn:not(.btn-primary) { background: var(--sb-card); color: var(--sb-card-ink); }
@keyframes enc-bounce {
  0%, 62%, 100% { transform: translateY(0) scale(1); }
  72% { transform: translateY(-9px) scale(1.04, 0.97); }
  82% { transform: translateY(0) scale(0.98, 1.03); }
  90% { transform: translateY(-3px) scale(1); }
}
html.reduced-motion .story-frame[data-tone] .story-actions .btn-primary { animation: none; }

/* ---- win: confetti ---- */
.story-frame[data-tone="win"] { background: color-mix(in srgb, var(--sb-sun) 14%, var(--sb-card)); }
.story-frame-win::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sb-pink);
  pointer-events: none;
  z-index: 3;
  box-shadow:
    38px 70px 0 var(--sb-sea), 96px 18px 0 var(--sb-sun), 150px 96px 0 var(--sb-kelp), 214px 30px 0 var(--sb-grape),
    268px 120px 0 var(--sb-orange), 322px 52px 0 var(--sb-pink), 384px 140px 0 var(--sb-sea), 438px 24px 0 var(--sb-sun),
    492px 104px 0 var(--sb-kelp), 548px 44px 0 var(--sb-grape), 66px 190px 0 var(--sb-kelp), 188px 226px 0 var(--sb-pink),
    410px 210px 0 var(--sb-orange), 520px 250px 0 var(--sb-sea), 586px 160px 0 var(--sb-sun), 8px 120px 0 var(--sb-sun);
  animation: enc-confetti 3.2s ease-in-out infinite alternate;
}
@keyframes enc-confetti {
  from { transform: translateY(-6px) rotate(0deg); }
  to { transform: translateY(10px) rotate(8deg); }
}
html.reduced-motion .story-frame-win::before { animation: none; }

/* ---- lose: gentle ---- */
.story-frame[data-tone="lose"] { background: color-mix(in srgb, var(--sb-sky) 12%, var(--sb-card)); }
.story-frame-lose .story-frame-lines { color: var(--sb-card-muted); }
.story-frame[data-tone="lose"] .story-frame-title { -webkit-text-stroke-width: 8px; }

@media (max-width: 719px) {
  .story-frame[data-tone] { --badge: 100px; border-radius: 28px; }
  .story-frame[data-tone]::after { border-radius: 25px 25px 0 0; }
  .story-frame[data-tone] .story-frame-title { -webkit-text-stroke-width: 7px; }
  .story-frame[data-tone] .story-rule-row { border-radius: 16px; }
  .story-frame[data-tone] .story-actions .btn-primary { min-height: 56px; font-size: 1.3rem; }
  .story-frame[data-tone] .story-actions {
    border-radius: 0 0 25px 25px;
    background: linear-gradient(to top, var(--sb-card) 72%, transparent);
  }
}