/* Watch Cara play (game/arcade-watch.js): the title card's button, Cara's little card in the corner while she plays,
   and the note on the end card. Over Cara Runs' look (run.css), on run.html, kart.html and kite.html. */
.gbtn--watch .gbtn__label { white-space: nowrap; }

.awatch { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 12; display: flex; align-items: flex-start; gap: 10px; width: min(330px, calc(100vw - 32px)); padding: 10px 12px 10px 10px; border-radius: 16px; background: rgba(12, 22, 16, 0.84); border: 1px solid rgba(255, 210, 150, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-body); color: #fff; animation: awatch-in 0.3s ease-out; }
.awatch[hidden] { display: none; }
@keyframes awatch-in { from { transform: translateY(14px); opacity: 0; } }
.awatch__face { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #ffb15c; box-shadow: 0 0 0 3px rgba(255, 177, 92, 0.18); }
.awatch__body { min-width: 0; flex: 1; }
.awatch__who { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 800 0.86rem/1.2 var(--font-display); letter-spacing: 0.03em; color: #ffd48f; }
.awatch__tag { font: 600 0.68rem/1.2 var(--font-body); letter-spacing: 0; color: #b9c8bd; }
.awatch__line { margin: 4px 0 0; min-height: 1.3em; font: 600 0.92rem/1.32 var(--font-body); color: #f4f7f2; animation: awatch-line 0.25s ease-out; }
.awatch__line.is-note { color: #9dffd0; font-weight: 800; }
@keyframes awatch-line { from { opacity: 0; transform: translateY(4px); } }
.awatch__take { margin-top: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(160, 255, 200, 0.5); background: linear-gradient(135deg, #52e896, #22b565); color: #062112; font: 800 0.86rem/1 var(--font-body); cursor: pointer; pointer-events: auto; }
.awatch__take:hover, .awatch__take:focus-visible { outline: 2px solid #fff3df; outline-offset: 2px; }
.awatch.is-yours { width: auto; max-width: min(330px, calc(100vw - 32px)); opacity: 0.92; }
.awatch.is-yours .awatch__face { width: 40px; height: 40px; }
/* (out of the way of what is already in the lower corners: the steering halves' hints, a call's card) */
.kart-touch .awatch { bottom: max(110px, calc(env(safe-area-inset-bottom) + 100px)); }
body:has(.mcall:not([hidden]):not(.is-docked)) .awatch { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(120px, calc(env(safe-area-inset-bottom) + 110px)); }
@media (max-width: 420px) {
  .awatch { gap: 8px; padding: 8px 10px 8px 8px; }
  .awatch__face { width: 42px; height: 42px; }
  .awatch__line { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) { .awatch, .awatch__line { animation: none; } }

/* the end card after Cara's run */
.awatch-over { display: grid; gap: 8px; justify-items: center; }
.awatch-over[hidden] { display: none; }
.awatch-over__note { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 0.86rem/1.3 var(--font-body); color: #ffd48f; text-align: left; }
.awatch-over__note img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ffb15c; flex: none; }