/* River Rapids (rapids.html, docs/108): what it has that Cara Runs (css/run.css) does not. */

#rp-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

/* the score: one big number at the top, the distance and the place under it */
.rphud__score { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; pointer-events: none; max-width: 46vw; }
.rphud__score b { font: 900 clamp(2.4rem, 8vw, 3.9rem)/1 var(--font-display); letter-spacing: 0.04em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 0, 0, 0.35); }
.rphud__score b.is-pop { animation: rppop 0.3s ease-out; }
.rphud__score small { font: 700 0.9rem/1.1 var(--font-body); color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@keyframes rppop { 0% { scale: 1.25; color: #c8ffd8; } 100% { scale: 1; } }

/* the gate streak: a pill under the badges, warming as it grows */
.rphud__streak { position: absolute; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + clamp(4.4rem, 11vw, 5.6rem) + 40px); transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: rgba(8, 20, 14, 0.66); border: 1px solid rgba(160, 255, 200, 0.35); font: 800 0.95rem/1.2 var(--font-body); color: #d8ffe6; white-space: nowrap; pointer-events: none; }
.rphud__streak.is-hot { background: linear-gradient(90deg, rgba(31, 154, 90, 0.85), rgba(240, 180, 40, 0.85)); color: #fff; border-color: rgba(255, 230, 160, 0.7); }
.rphud__streak.is-pop { animation: rppop 0.3s ease-out; }

#rp-powers { top: calc(max(14px, env(safe-area-inset-top)) + clamp(4.4rem, 11vw, 5.6rem)); }
.rp--turbo { --c: #ffb04a; } .rp--calm { --c: #9ab8ff; }
.rhud__banner.is-turbo { background: linear-gradient(90deg, rgba(220, 110, 20, 0.85), rgba(255, 190, 90, 0.85)); color: #3a1a00; text-shadow: none; }
.rhud__banner.is-calm { background: linear-gradient(90deg, rgba(40, 60, 150, 0.8), rgba(154, 184, 255, 0.75)); }
.rhud__banner.is-bump { background: rgba(60, 30, 16, 0.78); border: 1px solid rgba(255, 200, 150, 0.4); font-size: clamp(1rem, 3.6vw, 1.4rem); }
.rhud__banner.is-place { background: rgba(8, 20, 14, 0.74); border: 1px solid rgba(255, 210, 150, 0.4); font-size: clamp(1.1rem, 4vw, 1.7rem); }
.rhud__banner.is-great { background: linear-gradient(90deg, rgba(31, 154, 90, 0.85), rgba(47, 192, 119, 0.85)); }
.rhud__banner.is-drop { background: linear-gradient(90deg, rgba(40, 110, 170, 0.85), rgba(140, 210, 255, 0.85)); }

/* the three bumps: jade canoes in a row, one going grey and shaking with each bump */
.rphud__health { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); display: flex; gap: 5px; padding: 6px 10px; border-radius: 999px; background: rgba(8, 20, 14, 0.62); border: 1px solid rgba(255, 255, 255, 0.2); pointer-events: none; }
.rphud__health i { width: 30px; height: 14px; border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%; background: linear-gradient(180deg, #7dffb0, #1f9a5a); box-shadow: 0 0 8px rgba(80, 255, 160, 0.5); transition: background 0.3s, box-shadow 0.3s; }
.rphud__health i.is-gone { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.rphud__health i.is-hit { animation: rphit 0.5s ease-out; }
@keyframes rphit { 0%, 40% { transform: scale(1.5) rotate(-12deg); background: #ff8a5a; } 100% { transform: none; } }

/* a warning that breathes: a drop or a whirlpool ahead */
.rphud__warn { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); padding: 6px 14px; border-radius: 10px; background: rgba(240, 236, 226, 0.88); color: #2a2a10; font: 800 0.95rem/1.2 var(--font-body); white-space: nowrap; pointer-events: none; animation: rpwarn 0.5s ease-in-out infinite alternate; }
@keyframes rpwarn { to { transform: translateX(-50%) scale(1.06); background: rgba(255, 226, 150, 0.95); } }

/* the paddle button (bottom right) and the steering slider under the thumb, on a touch screen */
.rppaddle { display: none; position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)); width: 88px; height: 88px; border-radius: 50%; pointer-events: auto; touch-action: none; border: 2px solid rgba(255, 255, 255, 0.55); background: radial-gradient(circle at 40% 30%, rgba(255, 190, 90, 0.95), rgba(200, 90, 30, 0.92)); color: #fff; font: 900 1.8rem/1 var(--font-display); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rppaddle small { font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.rppaddle:active, .rppaddle.is-down { transform: scale(0.93); }
body.is-touch .rppaddle { display: flex; }
.rp-tiltbtn.is-on { background: rgba(80, 220, 150, 0.85); }
.rpsteer { position: fixed; z-index: 4; width: 160px; height: 40px; margin: -20px 0 0 -80px; border-radius: 999px; pointer-events: none; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.45); }
.rpsteer i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 35%, #ffffff, #cfe8dc 60%, #8fbca4); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }

/* the rush of speed: soft streaks round the edges, as strong as she is fast (set from the game: --k 0..1) */
.rpspeed { position: fixed; inset: 0; pointer-events: none; opacity: calc(var(--k, 0) * 0.85); background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.0) 0deg 5deg, rgba(255, 255, 255, 0.16) 5.5deg 6deg); -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 52%, #000 92%); mask: radial-gradient(ellipse at 50% 50%, transparent 52%, #000 92%); }
/* a flash over the screen: white for a great throw, blue for a waterfall, green for a power-up */
.rpflash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 35%, var(--c, rgba(255, 255, 255, 0.55)) 100%); }
.rpflash.is-on { animation: rpflash 0.55s ease-out; }
@keyframes rpflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Call Cara: big and green on the title and end screens, a handset before the words */
.gbtn.gbtn--call.rpcall { min-height: 58px; }
.gbtn.gbtn--call.rpcall .gbtn__label { font-size: 1.12rem; }
.gbtn.rpcall .gbtn__label::before { content: '📞 '; }

#rp-title .rbest { flex-wrap: wrap; }
#rp-over .rstats { grid-template-columns: repeat(5, 1fr); }

/* a narrow screen: the score to the top left, clear of the buttons on the right */
@media (max-width: 560px) {
  .rphud__score { left: max(16px, env(safe-area-inset-left)); transform: none; justify-items: start; max-width: calc(100vw - 270px); }
  /* (the music button gives way to the score while paddling: it is on the pause screen) */
  #rp-music { display: none; }
  .rphud__score small { font-size: 0.78rem; }
  .rphud__score b { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .rhud__right { gap: 6px; }
  .rhud__right .rhud__btn { width: 36px; height: 36px; font-size: 0.95rem; }
  .rhud__right .rhud__tokens { padding: 5px 10px 5px 6px; font-size: 1.05rem; }
  #rp-over .rstats { grid-template-columns: repeat(3, 1fr); }
  #rp-powers { left: max(16px, env(safe-area-inset-left)); transform: none; }
  .rphud__streak { left: max(16px, env(safe-area-inset-left)); transform: none; }
  .rphud__health { top: calc(max(14px, env(safe-area-inset-top)) + 62px); padding: 4px 8px; }
  .rphud__health i { width: 24px; height: 12px; }
  #rp-powers, .rphud__streak { top: calc(max(14px, env(safe-area-inset-top)) + 100px); }
  .rphud__streak { top: calc(max(14px, env(safe-area-inset-top)) + 140px); }
}
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } }
@media (max-width: 340px) { .rphud__score small { display: none; } .rhud__right .rhud__btn { width: 30px; height: 30px; font-size: 0.85rem; } .rhud__right { gap: 3px; } }
/* a phone on its side: the place's name goes, the badges sit lower */
@media (max-height: 460px) { .rphud__score b { font-size: 2.2rem; } .rphud__streak { top: calc(max(10px, env(safe-area-inset-top)) + 7.4rem); } #rp-powers { top: calc(max(10px, env(safe-area-inset-top)) + 3.6rem); } }

/* a short wide screen (a phone on its side): the title and end cards tighten, Play and Call Cara side by side, so
   both are on the screen without scrolling */
@media (max-height: 520px) and (min-width: 560px) {
  #rp-title .rcard, #rp-over .rcard { padding: 12px 20px 14px; width: min(640px, 100%); }
  #rp-title .rcard__eyebrow, #rp-title .rcard__tag, #rp-over .rcard__small { display: none; }
  #rp-title .rlogo { font-size: 2rem; margin: 0; }
  #rp-title .rtabs.rtabs--title { margin: 8px 0 8px; }
  #rp-title .rbest { margin-top: 4px; font-size: 0.8rem; gap: 14px; }
  #rp-title .ractions, #rp-over .ractions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  #rp-title .ractions > .ractions__row, #rp-title .ractions > a, #rp-over .ractions > .ractions__row, #rp-over .rcontinue { grid-column: 1 / -1; }
  #rp-title .gbtn--tall, #rp-over .gbtn--tall { min-height: 54px; }
  #rp-over .rcard__head { margin: 0; }
  #rp-over .rcard__text { margin: 4px 0 0; font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #rp-over .rstats { margin-top: 8px; }
  #rp-over .rstats dd { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) { .rphud__score b.is-pop, .rphud__streak.is-pop, .rpflash.is-on, .rphud__warn, .rphud__health i.is-hit { animation: none; } .rpspeed { display: none; } }