/* Cara Hops (hop.html, docs/97): what it has that Cara Runs (css/run.css) does not. */

#hop-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* the rows: one big number at the top, the place under it */
.hhud__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; }
.hhud__score b { font: 900 clamp(2.6rem, 9vw, 4.2rem)/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); }
.hhud__score b.is-pop { animation: hpop 0.25s ease-out; }
.hhud__score small { font: 700 0.9rem/1.1 var(--font-body); color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@keyframes hpop { 0% { transform: scale(1.3); color: #ffe7a8; } 100% { transform: scale(1); } }

/* the geese getting close: a warning that breathes */
.hhud__warn { position: absolute; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 70px)); transform: translateX(-50%); padding: 8px 16px; border-radius: 10px; background: rgba(240, 236, 226, 0.9); color: #3a2a10; font: 800 1rem/1.2 var(--font-body); white-space: nowrap; animation: hwarn 0.5s ease-in-out infinite alternate; }
@keyframes hwarn { to { transform: translateX(-50%) scale(1.06); background: rgba(255, 226, 150, 0.95); } }

.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-rows { background: linear-gradient(90deg, rgba(31, 154, 90, 0.85), rgba(47, 192, 119, 0.85)); }

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

/* the end screen's four numbers */
#hop-over .rstats { grid-template-columns: repeat(5, 1fr); }
.hhud__score b.is-boosted { color: #ffe08a; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 22px rgba(214, 138, 255, 0.85); }
.hhud__score b.is-boosted::after { content: '×2'; margin-left: 6px; font-size: 0.42em; vertical-align: super; color: #d68aff; }

/* the power-ups' badges, under the count (Cara Runs has them where the count is) */
#hop-powers { top: calc(max(14px, env(safe-area-inset-top)) + clamp(4.6rem, 12vw, 6rem)); }
.rp--lollipop { --c: #ffcf3a; }

/* the touch stick, under the thumb where it went down */
.hstick { position: fixed; z-index: 4; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18)); border: 2px solid rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.hstick i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; 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 jump button, bottom right, on a touch screen (clear of the stick's side, the HUD and the call's card) */
.hjump { display: none; position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)); width: 84px; height: 84px; 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(80, 220, 150, 0.95), rgba(20, 120, 70, 0.92)); color: #fff; font: 900 1.9rem/1 var(--font-display); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.hjump small { font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.hjump:active { transform: scale(0.94); }
body.is-touch .hjump { display: flex; }

/* a narrow screen: the count to the top left, clear of the buttons on the right */
@media (max-width: 560px) {
  .hhud__score { left: max(16px, env(safe-area-inset-left)); transform: none; justify-items: start; max-width: 40vw; }
  .hhud__score b { font-size: clamp(2.2rem, 11vw, 3rem); }
  .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; }
  #hop-over .rstats { grid-template-columns: repeat(3, 1fr); }
  #hop-powers { 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; } }
/* a small phone (320 px): the place's name goes, so the count stays clear of the buttons */
@media (max-width: 340px) { .hhud__score small { display: none; } .hhud__score { max-width: 22vw; } .rhud__right .rhud__btn { width: 30px; height: 30px; font-size: 0.85rem; } .rhud__right { gap: 3px; } .rhud__right .rhud__tokens { padding: 4px 8px 4px 5px; font-size: 0.95rem; } }

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