/* Cara Says (says.html, docs/114): what it has that Cara Runs (css/run.css) does not. */

#cs-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
body.run-body:has(#cs-canvas) { background: #2a1a3a; }

/* the score, the round and the lives, top left */
.cshud__left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); display: grid; gap: 2px; pointer-events: none; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.cshud__left b { font: 900 clamp(1.9rem, 6vw, 2.8rem)/1 var(--font-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cshud__left small { font: 700 0.85rem/1.2 var(--font-body); color: #ffe2b8; }
.cshud__lives { display: flex; gap: 3px; font-size: 1.15rem; margin-top: 2px; }
.cshud__lives i { font-style: normal; }
.cshud__lives i:not(.is-on) { opacity: 0.5; }

/* the streak, big, under the middle of the top */
.cshud__combo { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.55); }
.cshud__combo b { font: 900 clamp(2rem, 7vw, 3rem)/1 var(--font-display); color: #ffe08a; }
.cshud__combo span { font: 800 0.8rem/1.1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.cshud__combo.is-pop b { animation: cspop 0.22s ease-out; }
@keyframes cspop { from { transform: scale(1.35); color: #fff; } }
#cs-powers { top: calc(max(14px, env(safe-area-inset-top)) + clamp(3.6rem, 10vw, 4.6rem)); }
.rp--slow { --c: #9ab8ff; } .rp--double { --c: #d68aff; } .rp--freeze { --c: #a8f0ff; }

/* the speech bubbles: Cara's warm and round over her head, Marchetti's cream and cheeky over his */
.cs-bubble { position: fixed; z-index: 5; transform: translate(-50%, -100%); padding: 10px 20px 11px; border-radius: 22px; background: #fffaf0; color: #2a1c10; font: 900 clamp(1.5rem, 5.5vw, 2.3rem)/1.05 var(--font-display); letter-spacing: 0.03em; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); pointer-events: none; }
.cs-bubble::after { content: ''; position: absolute; left: 50%; bottom: -12px; border: 12px solid transparent; border-bottom: 0; border-top-color: #fffaf0; transform: translateX(-50%); }
.cs-bubble.is-pop { animation: csbub 0.28s cubic-bezier(0.3, 1.7, 0.5, 1); }
@keyframes csbub { from { transform: translate(-50%, -100%) scale(0.4); opacity: 0; } }
.cs-bubble small { display: block; font: 800 0.72rem/1.1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #9a5a2a; margin-bottom: 2px; }
.cs-bubble__pw { font-style: normal; display: inline-block; margin-left: 6px; font-size: 0.75em; padding: 2px 6px; border-radius: 10px; background: #ffe08a; vertical-align: middle; }
.cs-bubble--m { background: #f3e6c4; color: #5a2a10; border: 3px dashed #c8352a; font-size: clamp(1.1rem, 4vw, 1.6rem); transform: translate(-30%, -100%) rotate(-4deg); }
.cs-bubble--m::after { border-top-color: #f3e6c4; left: 30%; }
.cs-bubble--m.is-pop { animation: csbubm 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }
@keyframes csbubm { from { transform: translate(-30%, -100%) rotate(-4deg) scale(0.3); opacity: 0; } }

/* how a press went, over the middle */
.cs-grade { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); font: 900 clamp(1.6rem, 6vw, 2.6rem)/1 var(--font-display); letter-spacing: 0.04em; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6); white-space: nowrap; pointer-events: none; animation: csgrade 0.65s ease-out forwards; }
.cs-grade.is-perfect { color: #ffe08a; } .cs-grade.is-great { color: #9dffd0; } .cs-grade.is-good, .cs-grade.is-ok { color: #ffffff; }
.cs-grade.is-miss { color: #ff9a8a; } .cs-grade.is-fooled { color: #f3e6c4; } .cs-grade.is-dodge { color: #ffd24a; } .cs-grade.is-frozen { color: #a8f0ff; }
@keyframes csgrade { 0% { transform: translateX(-50%) scale(0.6); opacity: 0; } 15% { transform: translateX(-50%) scale(1.15); opacity: 1; } 30% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) translateY(-24px); opacity: 0; } }
.rhud__banner.is-count { background: rgba(30, 14, 40, 0.6); }
.rhud__banner.is-place { background: rgba(30, 14, 40, 0.72); border: 1px solid rgba(255, 200, 230, 0.4); font-size: clamp(1.1rem, 4vw, 1.7rem); }
.rhud__banner.is-rows { background: linear-gradient(90deg, rgba(31, 154, 90, 0.85), rgba(47, 192, 119, 0.85)); }
.rhud__banner.is-warn { background: rgba(160, 40, 40, 0.8); }
.rhud__banner.is-freeze { background: linear-gradient(90deg, rgba(90, 170, 230, 0.85), rgba(170, 230, 255, 0.85)); color: #0a2a40; text-shadow: none; }
.rhud__banner { top: 24%; }

/* the lane: cues slide in from the right to the beat line */
.cs-lane { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(16px, env(safe-area-inset-bottom) + 10px) + 84px); width: min(620px, calc(100vw - 32px)); height: 64px; border-radius: 32px; background: linear-gradient(90deg, rgba(20, 10, 30, 0.72), rgba(20, 10, 30, 0.38)); border: 1px solid rgba(255, 255, 255, 0.22); pointer-events: none; overflow: hidden; }
.cs-lane__line { position: absolute; left: 30px; top: 6px; bottom: 6px; width: 32px; border-radius: 16px; border: 3px solid rgba(255, 240, 200, 0.9); box-shadow: 0 0 12px rgba(255, 220, 140, 0.6); }
.cs-lane__track { position: absolute; inset: 0; }
.cs-cue { position: absolute; left: 0; top: 50%; width: 48px; height: 48px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #ffffff, var(--c) 70%); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); will-change: transform; }
.cs-cue__icon { font-size: 1.45rem; line-height: 1; }
.cs-cue b { position: absolute; bottom: -2px; right: -6px; padding: 1px 5px; border-radius: 8px; font: 800 0.62rem/1.2 var(--font-body); background: rgba(10, 6, 16, 0.85); color: #fff; }
.cs-cue i { position: absolute; top: -6px; right: -6px; font-style: normal; font-size: 0.85rem; }
.cs-cue.is-decoy { background: radial-gradient(circle at 40% 35%, #fffaf0, #c8b090 70%); border: 3px dashed #c8352a; filter: saturate(0.6); }
.cs-cue.is-hit { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.6), 0 0 24px var(--c); }
.cs-cue.is-miss { filter: grayscale(1) brightness(0.6); }
.cs-cue.is-dodged { box-shadow: 0 0 0 6px rgba(255, 210, 74, 0.7); }
.cs-cue.is-frozen { filter: hue-rotate(160deg) brightness(1.2); }

/* the pads: a row of six along the bottom, each its colour */
.cs-pads { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom) + 10px); display: grid; grid-template-columns: repeat(6, 64px); gap: 10px; pointer-events: auto; }
.cs-pad { position: relative; width: 64px; height: 64px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--c) 70%, white); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 45%, rgba(20, 10, 30, 0.8)), rgba(20, 10, 30, 0.82)); color: #fff; font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; touch-action: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.cs-pad small { position: absolute; bottom: 3px; left: 0; right: 0; font: 800 0.6rem/1 var(--font-body); color: rgba(255, 255, 255, 0.8); }
.cs-pad:hover { transform: translateY(-2px); }
.cs-pad.is-hit { animation: cspad 0.25s ease-out; }
@keyframes cspad { 0% { transform: scale(0.88); background: var(--c); } 100% { transform: scale(1); } }

/* the screen's edges: frost in a freeze, a red blink at a slip */
.cs-freeze { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(170, 230, 255, 0.35) 80%, rgba(220, 245, 255, 0.7) 100%); }
.cs-freeze.is-on { opacity: 1; }
.cs-hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(220, 40, 40, 0.45) 100%); }
.cs-hurt.is-on { animation: cshurt 0.5s ease-out; }
@keyframes cshurt { 0% { opacity: 1; } 100% { opacity: 0; } }

/* the title: the stage shows through a lighter veil */
.cs-screen--light { background: radial-gradient(ellipse at center, rgba(20, 10, 30, 0.12), rgba(20, 10, 30, 0.6)); }
.gbtn.gbtn--call.cscall { min-height: 58px; }
.gbtn.gbtn--call.cscall .gbtn__label { font-size: 1.12rem; }
.gbtn.cscall .gbtn__label::before { content: '📞 '; }
#cs-over .rstats { grid-template-columns: repeat(5, 1fr); }

/* a narrower screen: the pads in two rows of three on the right (the call's card has the bottom-left corner), the
   lane above them */
@media (max-width: 900px) {
  .cs-pads { left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; grid-template-columns: repeat(3, 58px); gap: 8px; }
  .cs-pad { width: 58px; height: 58px; font-size: 1.4rem; }
  .cs-lane { bottom: calc(max(16px, env(safe-area-inset-bottom) + 10px) + 136px); height: 58px; }
  .cs-cue { width: 44px; height: 44px; }
  .rhud__hint { bottom: calc(max(16px, env(safe-area-inset-bottom) + 10px) + 206px); }
}
@media (max-width: 560px) {
  .rhud__right { gap: 5px; }
  .rhud__right .rhud__btn { width: 34px; height: 34px; font-size: 0.9rem; }
  .rhud__right .rhud__tokens { padding: 5px 9px 5px 6px; font-size: 1rem; }
  .cshud__combo { top: calc(max(14px, env(safe-area-inset-top)) + 48px); left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; justify-items: end; }
  #cs-over .rstats { grid-template-columns: repeat(3, 1fr); }
  #cs-powers { left: max(16px, env(safe-area-inset-left)); transform: none; top: calc(max(14px, env(safe-area-inset-top)) + 96px); }
}
@media (max-width: 420px) { .rhud__right .rhud__btn { width: 30px; height: 30px; font-size: 0.82rem; } .rhud__right { gap: 4px; } .rhud__right .rhud__tokens { padding: 4px 8px 4px 5px; font-size: 0.95rem; } }
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 28px; height: 28px; } .rhud__right { gap: 3px; } .cs-pad { width: 52px; height: 52px; } .cs-pads { grid-template-columns: repeat(3, 52px); } }
/* a short screen (a phone on its side): the pads in one row bottom right, the lane beside them, the cards tight */
@media (max-height: 460px) {
  .cs-pads { left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; grid-template-columns: repeat(6, 52px); gap: 6px; }
  .cs-pad { width: 52px; height: 52px; font-size: 1.25rem; }
  .cs-lane { left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; width: min(420px, 52vw); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); height: 52px; }
  .cs-cue { width: 40px; height: 40px; }
  .cs-bubble { font-size: 1.4rem; padding: 6px 14px; }
  .rhud__hint { display: none; }
  .rscreen { padding: 8px; }
  .rcard { padding: 12px 18px; }
  .rcard__eyebrow, #cs-title .rcard__tag, #cs-over-why, #cs-over .rcard__small { display: none; }
  .rlogo { font-size: 2.1rem; }
  .rcard__head { font-size: 1.5rem; margin: 0; }
  .rtabs.rtabs--title { margin: 6px 0; }
  .rbest { margin-top: 2px; }
  .ractions { margin-top: 8px; gap: 6px; grid-template-columns: 1fr 1fr; }
  .ractions > a, .ractions__row, .rcontinue { grid-column: 1 / -1; }
  .gbtn.gbtn--tall, .gbtn.gbtn--call.cscall { min-height: 52px; }
  #cs-over .rstats { margin: 6px 0 0; grid-template-columns: repeat(5, 1fr); }
  #cs-pause .ractions { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { .cs-bubble.is-pop, .cs-grade, .cs-pad.is-hit, .cs-hurt.is-on, .cshud__combo.is-pop b { animation: none; } }

/* Stories, Game time (docs/116, game/stories/arcade-film.js): says.html?story= is a film of Cara dancing it herself.
   The pads and the bank are Base's, so they are put away; the game's calls are a cue card beside her (no tail: she is
   not the one calling), and the lane sits over the bottom bar, with her captions under it. */
body.is-afilm .cs-pads, body.is-afilm #cs-hud .rhud__tokens { display: none !important; }
body.is-afilm .cs-bubble:not(.cs-bubble--m)::after { display: none; }
body.is-afilm .cs-lane { bottom: 86px; }
@media (max-height: 520px) { body.is-afilm .cs-lane { bottom: 62px; height: 50px; } }