/* Cara Climbs (climb.html, docs/103): what it has that Cara Runs (css/run.css) does not. */

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

/* the height: one big number at the top, the place under it */
.chud__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; }
.chud__score b { font: 900 clamp(2.4rem, 8.5vw, 4rem)/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); white-space: nowrap; }
.chud__score b::after { content: ' m'; font-size: 0.42em; letter-spacing: 0; color: rgba(255, 255, 255, 0.85); }
.chud__score b.is-pop { animation: cpop 0.3s ease-out; }
.chud__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.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@keyframes cpop { 0% { transform: scale(1.25); color: #ffe7a8; } 100% { transform: scale(1); } }

/* the height bar down the right side: how far up she is towards her best, a gold tick at the best */
.chud__height { position: absolute; right: max(10px, env(safe-area-inset-right)); top: 22%; bottom: 22%; width: 8px; border-radius: 6px; background: rgba(8, 20, 14, 0.45); border: 1px solid rgba(255, 255, 255, 0.25); pointer-events: none; }
.chud__height i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 6px; background: linear-gradient(0deg, #2fc077, #9dffd0); box-shadow: 0 0 10px rgba(80, 240, 160, 0.6); }
.chud__height b { position: absolute; left: -5px; right: -5px; height: 3px; bottom: 100%; background: #ffd25a; border-radius: 2px; box-shadow: 0 0 6px #ffd25a; }
.chud__height b[hidden] { display: 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-height { background: linear-gradient(90deg, rgba(31, 154, 90, 0.85), rgba(47, 192, 119, 0.85)); }
.rhud__banner.is-marchetti { background: linear-gradient(90deg, rgba(154, 31, 46, 0.85), rgba(200, 70, 60, 0.85)); }
.rhud__banner.is-kite { background: linear-gradient(90deg, rgba(240, 138, 36, 0.88), rgba(226, 58, 58, 0.85)); }

/* Call Cara: big and green on the title and end screens, a handset before the words */
.gbtn.gbtn--call.ccall { min-height: 58px; }
.gbtn.gbtn--call.ccall .gbtn__label { font-size: 1.12rem; }
.gbtn.ccall .gbtn__label::before { content: '📞 '; }
.gbtn.ctilt.is-on { border-color: rgba(120, 240, 170, 0.8); box-shadow: 0 0 0 2px rgba(80, 220, 140, 0.35) inset; }

#climb-over .rstats { grid-template-columns: repeat(5, 1fr); }
#climb-powers { top: calc(max(14px, env(safe-area-inset-top)) + clamp(4.4rem, 11.5vw, 5.8rem)); }
.rp--kite { --c: #ffa458; }

/* the touch halves: a soft glow up the side being held */
.ctouch { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.ctouch i { position: absolute; top: 0; bottom: 0; width: 22vw; opacity: 0; transition: opacity 0.12s ease; }
.ctouch__l { left: 0; background: linear-gradient(90deg, rgba(160, 255, 210, 0.22), rgba(160, 255, 210, 0)); }
.ctouch__r { right: 0; background: linear-gradient(270deg, rgba(160, 255, 210, 0.22), rgba(160, 255, 210, 0)); }
.ctouch.is-l .ctouch__l, .ctouch.is-r .ctouch__r { opacity: 1; }

/* a narrow screen: the height to the top left, clear of the buttons on the right */
@media (max-width: 560px) {
  .chud__score { left: max(16px, env(safe-area-inset-left)); transform: none; justify-items: start; max-width: 42vw; }
  .chud__score b { font-size: clamp(2rem, 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; }
  #climb-over .rstats { grid-template-columns: repeat(3, 1fr); }
  #climb-powers { left: max(16px, env(safe-area-inset-left)); transform: none; }
  .chud__height { top: 26%; bottom: 26%; }
}
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } }
@media (max-width: 340px) { .chud__score small { display: none; } .rhud__right .rhud__btn { width: 30px; height: 30px; font-size: 0.85rem; } .rhud__right { gap: 3px; } }
/* a short landscape phone: the height bar shorter */
@media (max-height: 460px) { .chud__height { top: 30%; bottom: 18%; } }

@media (prefers-reduced-motion: reduce) { .chud__score b.is-pop { animation: none; } }

/* a phone on its side (short and wide): the title and end cards squeezed so Play (or Again) and Call Cara both show
   without scrolling: the extra lines go, the buttons sit two to a row */
@media (max-height: 500px) and (min-aspect-ratio: 4/3) {
  #climb-title .rcard, #climb-over .rcard { width: min(780px, 100%); padding: 10px 18px 12px; }
  #climb-title .rcard__eyebrow, #climb-title .rcard__tag, #climb-over .rcard__text, #climb-over .rcard__small { display: none; }
  #climb-title .rlogo { font-size: 1.9rem; }
  #climb-title .rtabs.rtabs--title { margin: 6px 0 6px; }
  #climb-title .rbest { margin-top: 2px; }
  #climb-over .rcard__head { margin: 0; font-size: 1.4rem; }
  #climb-over .rnew { margin: 2px 0 0; }
  #climb-over .rstats { grid-template-columns: repeat(6, 1fr); margin-top: 6px; gap: 6px; }
  #climb-over .rstats div { padding: 5px 2px; }
  #climb-title .ractions, #climb-over .ractions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  #climb-title .ractions__row, #climb-over .ractions__row { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  #climb-title .gbtn--tall, #climb-over .gbtn--tall, .gbtn.gbtn--call.ccall { min-height: 50px; }
}