/* Kite Rush (kite.html, docs/104): what it has that Cara Runs (css/run.css) does not. */

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

/* the score: one big number at the top, the place under it */
.khud__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: 44vw; }
.khud__score b { font: 900 clamp(2.2rem, 8vw, 3.8rem)/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); }
.khud__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); }
.khud__score b.is-boosted::after { content: '×2'; margin-left: 6px; font-size: 0.42em; vertical-align: super; color: #d68aff; }
.khud__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%; }

/* the hearts and the ring streak, top left */
.khud__left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); display: grid; gap: 6px; pointer-events: none; }
.khud__hearts { display: flex; gap: 4px; font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.khud__hearts i { font-style: normal; transition: transform 0.2s ease, opacity 0.2s ease; }
.khud__hearts i.is-gone { opacity: 0.28; filter: grayscale(1); transform: scale(0.8); }
.khud__hearts.is-hit i:not(.is-gone):last-of-type, .khud__hearts.is-hit { animation: kshake 0.35s ease; }
.khud__streak { padding: 4px 10px; border-radius: 999px; background: rgba(8, 20, 14, 0.66); border: 1px solid rgba(255, 210, 90, 0.55); font: 800 0.9rem/1.2 var(--font-body); color: #fff; white-space: nowrap; }
.khud__streak b { color: #ffd25a; font-size: 1.05rem; }
.khud__streak span { color: #ffd25a; }
.khud__streak.is-pop { animation: kpop 0.3s ease-out; }
@keyframes kshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes kpop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }

.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-ring { background: linear-gradient(90deg, rgba(224, 170, 40, 0.88), rgba(255, 210, 90, 0.88)); color: #3a2400; text-shadow: none; }
.rhud__banner.is-trick { background: linear-gradient(90deg, rgba(120, 70, 220, 0.86), rgba(214, 90, 200, 0.86)); }
.rhud__banner.is-gust { background: linear-gradient(90deg, rgba(60, 160, 220, 0.86), rgba(130, 220, 255, 0.86)); }
.rhud__banner.is-bump { background: rgba(120, 130, 150, 0.86); }

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

#kite-over .rstats { grid-template-columns: repeat(3, 1fr); }
#kite-powers { top: calc(max(14px, env(safe-area-inset-top)) + clamp(4.2rem, 11vw, 5.6rem)); }
.rp--hoop { --c: #ffd25a; }

/* a gust: white streaks rushing in from the edges */
.kgust { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0 46px, rgba(255, 255, 255, 0.16) 46px 48px); -webkit-mask: radial-gradient(ellipse at 50% 45%, transparent 48%, #000 85%); mask: radial-gradient(ellipse at 50% 45%, transparent 48%, #000 85%); }
.kgust.is-on { opacity: 1; animation: kgust 0.35s linear infinite; }
@keyframes kgust { to { background-position: 48px 0; } }

/* the trick button, bottom right, on a touch screen (clear of the call's card on the left) */
.ktrick { 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(190, 130, 255, 0.95), rgba(110, 50, 190, 0.92)); color: #fff; font: 900 1.9rem/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; }
.ktrick small { font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.ktrick:active { transform: scale(0.94); }
.ktrick.is-wait { opacity: 0.5; }
body.is-touch .ktrick { display: flex; }

/* the kite list */
.kitem__swatch { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06)); flex: none; }
.ritem.is-on { border-color: rgba(120, 240, 170, 0.8); box-shadow: 0 0 0 2px rgba(80, 220, 140, 0.35) inset; }

/* a narrow screen: the score to the right of the hearts, the buttons smaller */
@media (max-width: 560px) {
  .khud__score { left: auto; right: max(16px, env(safe-area-inset-right)); top: calc(max(14px, env(safe-area-inset-top)) + 46px); transform: none; justify-items: end; max-width: 46vw; }
  .khud__score b { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .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; }
  .khud__hearts { font-size: 1.25rem; }
  #kite-powers { left: max(16px, env(safe-area-inset-left)); transform: none; top: calc(max(14px, env(safe-area-inset-top)) + 126px); }
  #kite-over .rstats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) { .rhud__right .rhud__btn { width: 33px; height: 33px; } .rhud__right { gap: 4px; } }
@media (max-width: 340px) { .khud__score small { display: none; } .rhud__right .rhud__btn { width: 30px; height: 30px; font-size: 0.85rem; } .rhud__right { gap: 3px; } }

@media (prefers-reduced-motion: reduce) { .kgust.is-on, .khud__streak.is-pop, .khud__hearts.is-hit { 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) {
  #kite-title .rcard, #kite-over .rcard { width: min(780px, 100%); padding: 10px 18px 12px; }
  #kite-title .rcard__eyebrow, #kite-title .rcard__tag, #kite-over .rcard__text, #kite-over .rcard__small { display: none; }
  #kite-title .rlogo { font-size: 1.9rem; }
  #kite-title .rtabs.rtabs--title { margin: 6px 0 6px; }
  #kite-title .rbest { margin-top: 2px; }
  #kite-over .rcard__head { margin: 0; font-size: 1.4rem; }
  #kite-over .rnew { margin: 2px 0 0; }
  #kite-over .rstats { grid-template-columns: repeat(6, 1fr); margin-top: 6px; gap: 6px; }
  #kite-over .rstats div { padding: 5px 2px; }
  #kite-title .ractions, #kite-over .ractions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  #kite-title .ractions__row, #kite-over .ractions__row { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  #kite-title .gbtn--tall, #kite-over .gbtn--tall, .gbtn.gbtn--call.kcall { min-height: 50px; }
}