/* Rope Swing (swing.html, docs/107): what it has that Cara Runs (css/run.css) does not. */

#sw-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 */
.swhud__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; }
.swhud__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); }
.swhud__score b.is-pop { animation: swpop 0.3s ease-out; }
.swhud__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 swpop { 0% { scale: 1.25; color: #c8ffd8; } 100% { scale: 1; } }

/* the swing streak: a pill under the badges, warming as it grows */
.swhud__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; }
.swhud__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); }
.swhud__streak.is-pop { animation: swpop 0.3s ease-out; }

#sw-powers { top: calc(max(14px, env(safe-area-inset-top)) + clamp(4.4rem, 11vw, 5.6rem)); }
.rp--vine { --c: #8fe36a; } .rp--grab { --c: #ffd27a; } .rp--glide { --c: #ffa458; }
.rhud__banner.is-vine { background: linear-gradient(90deg, rgba(40, 120, 40, 0.85), rgba(143, 227, 106, 0.8)); color: #08300c; text-shadow: none; }
.rhud__banner.is-grab { background: linear-gradient(90deg, rgba(200, 120, 30, 0.85), rgba(255, 210, 122, 0.85)); color: #3a2200; text-shadow: none; }
.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-falls { background: linear-gradient(90deg, rgba(40, 110, 170, 0.85), rgba(140, 210, 255, 0.85)); }

/* the rush of speed: soft streaks round the edges, as strong as she is fast (set from the game: --k 0..1) */
.swspeed { 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 */
.swflash { 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%); }
.swflash.is-on { animation: swflash 0.55s ease-out; }
@keyframes swflash { 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.swcall { min-height: 58px; }
.gbtn.gbtn--call.swcall .gbtn__label { font-size: 1.12rem; }
.gbtn.swcall .gbtn__label::before { content: '📞 '; }

#sw-title .rbest { flex-wrap: wrap; }
#sw-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) {
  .swhud__score { left: max(16px, env(safe-area-inset-left)); transform: none; justify-items: start; max-width: calc(100vw - 260px); }
  .swhud__score small { font-size: 0.78rem; }
  .swhud__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; }
  #sw-over .rstats { grid-template-columns: repeat(3, 1fr); }
  #sw-powers { left: max(16px, env(safe-area-inset-left)); transform: none; }
  .swhud__streak { left: max(16px, env(safe-area-inset-left)); transform: none; }
}
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } }
@media (max-width: 340px) { .swhud__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) { .swhud__score b { font-size: 2.2rem; } .swhud__streak { top: calc(max(10px, env(safe-area-inset-top)) + 7.4rem); } #sw-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) {
  #sw-title .rcard, #sw-over .rcard { padding: 12px 20px 14px; width: min(640px, 100%); }
  #sw-title .rcard__eyebrow, #sw-title .rcard__tag, #sw-over .rcard__small { display: none; }
  #sw-title .rlogo { font-size: 2rem; margin: 0; }
  #sw-title .rtabs.rtabs--title { margin: 8px 0 8px; }
  #sw-title .rbest { margin-top: 4px; font-size: 0.8rem; gap: 14px; }
  #sw-title .ractions, #sw-over .ractions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  #sw-title .ractions > .ractions__row, #sw-title .ractions > a, #sw-over .ractions > .ractions__row, #sw-over .rcontinue { grid-column: 1 / -1; }
  #sw-title .gbtn--tall, #sw-over .gbtn--tall { min-height: 54px; }
  #sw-over .rcard__head { margin: 0; }
  #sw-over .rcard__text { margin: 4px 0 0; font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #sw-over .rstats { margin-top: 8px; }
  #sw-over .rstats dd { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) { .swhud__score b.is-pop, .swhud__streak.is-pop, .swflash.is-on { animation: none; } .swspeed { display: none; } }