/* Cara Kart (kart.html, docs/99): what it has that Cara Runs (css/run.css) does not: its canvas, the race HUD (the
   place, the lap and the time, the minimap, the item slot, the countdown), the touch controls, the title's track and
   difficulty pickers, and the finish screen's standings. */

#kart-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.kart-body { overscroll-behavior: none; }

/* the left column: the place, the lap and the time, the minimap */
.khud__left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); display: grid; gap: 4px; justify-items: start; }
.khud__pos { font: 900 clamp(2.4rem, 7vw, 3.6rem)/0.95 var(--font-display); color: #fff; letter-spacing: 0.02em; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
.khud__pos sup { font-size: 0.42em; vertical-align: 0.95em; margin-left: 1px; color: #ffd48f; }
.khud__pos small { font-size: 0.36em; margin-left: 4px; color: rgba(255, 255, 255, 0.75); }
.khud__pos.is-first b, .khud__pos.is-first sup { color: #ffd25a; }
.khud__pos.is-up { animation: kpos 0.4s ease-out; }
@keyframes kpos { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }
.khud__lap { font: 700 0.95rem/1.2 var(--font-body); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); font-variant-numeric: tabular-nums; }
.khud__time { margin-left: 6px; color: #ffe2b8; }
.khud__map { width: 132px; height: 132px; margin-top: 4px; border-radius: 14px; background: rgba(8, 20, 14, 0.45); border: 1px solid rgba(255, 255, 255, 0.16); }

/* the right column: tokens under the buttons when there is no room beside them */
.khud__right { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 32px); }
.khud__tokens { order: 2; }

/* the item slot, top middle */
.khud__item { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); width: 68px; height: 68px; display: grid; place-items: center; padding: 0; border-radius: 18px; background: rgba(8, 20, 14, 0.62); border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.06); font-size: 2.2rem; line-height: 1; pointer-events: auto; cursor: pointer; color: #fff; }
.khud__item.is-full { border-color: #ffd25a; box-shadow: 0 0 18px rgba(255, 210, 90, 0.45); }
.khud__item.is-rolling span { animation: kroll 0.12s steps(2) infinite; }
@keyframes kroll { 50% { transform: translateY(-3px) scale(0.92); } }

/* the countdown, big in the middle */
.khud__count { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font: 900 clamp(4.5rem, 20vw, 9rem)/1 var(--font-display); color: #fff; text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 170, 80, 0.4); animation: kcount 0.9s ease-out both; pointer-events: none; }
.khud__count.is-go { color: #9dffd0; text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 50px rgba(63, 240, 144, 0.7); }
@keyframes kcount { 0% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.2; } }
.khud__warn { top: 30%; }
.khud__split { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; background: rgba(8, 20, 14, 0.7); font: 800 1.05rem/1.2 var(--font-body); color: #ffe2b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.khud__split.is-best { color: #9dffd0; }
.khud .rhud__banner { top: 15%; }
.rhud__banner.is-go { background: linear-gradient(90deg, rgba(20, 120, 70, 0.85), rgba(63, 240, 144, 0.75)); }
.rhud__banner.is-lap { background: rgba(8, 20, 14, 0.78); border: 1px solid rgba(255, 210, 150, 0.4); }
.rhud__banner.is-final { background: linear-gradient(90deg, rgba(200, 60, 30, 0.85), rgba(255, 170, 60, 0.8)); }
.rhud__banner.is-spin { background: linear-gradient(90deg, rgba(40, 110, 200, 0.85), rgba(120, 200, 255, 0.75)); }
/* the timed power-ups: Cara Runs' badges, under the item slot (beside the place on a narrow screen) */
.khud__powers { top: calc(max(12px, env(safe-area-inset-top)) + 80px); }
.rp--glow { --c: #ffb340; } .rp--turbo { --c: #ff8a3a; }
.rhud__banner.is-glow { background: linear-gradient(90deg, rgba(220, 120, 20, 0.85), rgba(255, 200, 90, 0.85)); color: #3a1c00; text-shadow: none; }
.rhud__banner.is-turbo { background: linear-gradient(90deg, rgba(200, 70, 20, 0.85), rgba(255, 150, 60, 0.8)); }
.rhud__banner.is-place { background: linear-gradient(90deg, rgba(220, 150, 20, 0.85), rgba(255, 220, 110, 0.85)); color: #3a2200; text-shadow: none; }

/* touch: the lower halves of the screen steer (a thumb on the left half turns left, on the right half right), with a
   faint arrow where a thumb goes; the big buttons in the middle use the item, drift and brake. The bottom-left corner
   is the call card's (game/minicall.js): nothing small sits there, and the buttons move aside while it shows. */
.kzones { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; display: none; }
.kart-touch .kzones { display: block; }
.kzone { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.kzone--l { left: 0; } .kzone--r { right: 0; }
.kzone__hint { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font: 800 1.7rem/1 var(--font-body); color: rgba(255, 255, 255, 0.8); background: rgba(8, 20, 14, 0.28); border: 2px dashed rgba(255, 255, 255, 0.35); transition: background 0.1s, transform 0.1s; }
.kzone--l .kzone__hint { left: max(22px, env(safe-area-inset-left)); }
.kzone--r .kzone__hint { right: max(22px, env(safe-area-inset-right)); }
.kzone.is-held .kzone__hint { background: rgba(255, 164, 88, 0.55); border-style: solid; border-color: #ffd48f; transform: scale(1.08); }
.kpad { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.kart-touch .kpad { display: flex; }
.kpad__row { display: flex; gap: 10px; align-items: flex-end; }
.kpad__btn { pointer-events: auto; display: grid; place-items: center; align-content: center; width: 84px; height: 84px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(8, 20, 14, 0.55); color: #fff; font: 800 1.7rem/1 var(--font-body); touch-action: none; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.kpad__btn small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; margin-top: 2px; }
.kpad__btn.is-held { background: rgba(255, 164, 88, 0.6); border-color: #ffd48f; }
.kpad__btn--item { width: 92px; height: 92px; font-size: 2.3rem; }
.kpad__btn--item.is-full { border-color: #ffd25a; box-shadow: 0 0 18px rgba(255, 210, 90, 0.55); }
.kpad__btn--brake { width: 66px; height: 66px; font-size: 1.2rem; }
.kpad__btn--drift { background: rgba(40, 90, 200, 0.5); }
.kpad__btn--drift.is-auto { box-shadow: 0 0 0 3px rgba(157, 255, 208, 0.45); }
.kart-touch .rhud__hint { bottom: auto; top: 40%; }
/* while the call card is up in that corner, the hint keeps out of its way */
body:has(.mcall:not([hidden]):not(.is-docked)) .khud .rhud__hint { display: none; }
/* (and the left arrow moves up out of the card's corner) */
body:has(.mcall:not([hidden]):not(.is-docked)) .kzone--l .kzone__hint { bottom: auto; top: 10px; }
/* (docked as a pill in the top-right corner while a screen is up, the call keeps clear of the HUD's buttons) */
body:has(.mcall.is-docked:not([hidden])) .khud__right { top: calc(max(14px, env(safe-area-inset-top)) + 50px); }

/* the driving help's icon by the lap, lit while it pulls */
.khud__help { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-left: 4px; border-radius: 50%; background: rgba(8, 20, 14, 0.55); font-size: 0.85rem; vertical-align: middle; transition: box-shadow 0.15s; }
.khud__help.is-pulling { box-shadow: 0 0 0 2px #9dffd0, 0 0 10px rgba(157, 255, 208, 0.7); }
/* a change of place pops up beside the place: "+1 ↑ 3rd" */
.khud__posrow { position: relative; display: flex; align-items: flex-start; }
.khud__ppops { position: absolute; left: 100%; top: 0.2em; width: 0; height: 0; }
.kppop { position: absolute; left: 8px; top: 0; white-space: nowrap; padding: 3px 9px; border-radius: 999px; font: 800 0.95rem/1.1 var(--font-body); animation: kppop 1.3s ease-out forwards; }
.kppop.is-up { background: rgba(31, 138, 82, 0.9); color: #e8fff2; }
.kppop.is-down { background: rgba(160, 50, 40, 0.88); color: #ffece8; }
@keyframes kppop { 0% { transform: translateY(8px) scale(0.7); opacity: 0; } 15% { transform: translateY(0) scale(1.05); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
/* speed lines round the edges of the screen under a boost */
.kspeed { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.18s linear; background: repeating-conic-gradient(from 3deg at 50% 52%, rgba(255, 255, 255, 0) 0deg 5deg, rgba(255, 255, 255, 0.72) 5deg 5.8deg, rgba(255, 255, 255, 0) 5.8deg 11deg); -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 52%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 70% 62% at 50% 52%, transparent 55%, #000 100%); }

/* the title: the tracks, the difficulty, single race or cup */
.ktitle .rcard__text { margin-top: 10px; }
.ktitle__h { margin: 14px 0 6px; font: 700 0.78rem/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: #ffe0b4; text-align: left; }
.ktracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ktrack { display: grid; gap: 4px; justify-items: center; padding: 8px 6px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; cursor: pointer; text-align: center; min-width: 0; }
.ktrack:hover, .ktrack:focus-visible { border-color: #ffbe6e; outline: none; }
.ktrack[aria-checked="true"] { border-color: #9dffd0; background: rgba(80, 230, 140, 0.1); box-shadow: 0 0 0 1px #9dffd0 inset; }
.ktrack canvas { width: 100%; max-width: 110px; aspect-ratio: 1; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.ktrack b { font-size: 0.9rem; line-height: 1.15; }
.ktrack small { font-size: 0.72rem; color: var(--muted); line-height: 1.2; }
.ktrack .ktrack__best { color: #ffd48f; }
.ktitle__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kseg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.kseg button { flex: 1; min-width: 0; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: #dfe8df; font: 700 0.9rem/1.15 var(--font-body); cursor: pointer; }
.kseg button small { display: block; font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.kseg button[aria-checked="true"] { background: linear-gradient(135deg, #ffa458, #f06a1e); color: #1f0d03; }
.kseg button[aria-checked="true"] small { color: rgba(31, 13, 3, 0.75); }
.ktitle .rkeys { font-size: 0.84rem; }
.khelps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.khelps button { padding: 8px 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: rgba(223, 232, 223, 0.7); font: 700 0.86rem/1.15 var(--font-body); cursor: pointer; text-align: center; }
.khelps button small { display: block; margin-top: 2px; font-size: 0.68rem; font-weight: 600; color: var(--muted); }
.khelps button[aria-pressed="true"] { border-color: #9dffd0; background: rgba(80, 230, 140, 0.14); color: #fff; box-shadow: 0 0 0 1px #9dffd0 inset; }

/* the title's Play tab, compact: the pickers, then the main buttons (side by side on a short wide screen); How to play's lists */
.kplay { display: grid; gap: 10px; }
.kplay .ktitle__row { margin-top: 8px; }
.kplay .khelps { margin-top: 8px; }
.kplay .rbest { margin-top: 2px; }
.kplay .ractions { margin-top: 10px; }
.kinfo { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 0.86rem; color: #d8e2d8; text-align: left; }
@media (max-width: 640px) {
  .kplay .ktracks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .kplay .ktrack { padding: 5px 3px 6px; gap: 2px; }
  .kplay .ktrack canvas { max-width: 54px; }
  .kplay .ktrack b { font-size: 0.7rem; }
  .kplay .ktrack small:not(.ktrack__best) { display: none; }
  .kplay .ktrack .ktrack__best { font-size: 0.6rem; }
  .kplay .ktitle__row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .kplay .kseg button { padding: 7px 3px; font-size: 0.78rem; }
  .kplay .kseg button small { display: none; }
  .kplay .khelps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .kplay .khelps button { padding: 6px 2px; font-size: 0.68rem; }
  .kplay .khelps button small { display: none; }
  .kplay .rbest { gap: 10px; font-size: 0.8rem; flex-wrap: wrap; }
  .ktitle .rlogo { font-size: clamp(2.2rem, 10vw, 3rem); }
}
/* a short wide screen (a phone on its side): a smaller heading, the pickers beside the buttons */
@media (max-height: 520px) and (min-width: 600px) {
  .ktitle { padding-top: 12px; }
  .ktitle .rcard__eyebrow, .ktitle .rcard__tag { display: none; }
  .ktitle .rlogo { font-size: 2rem; }
  .ktitle .rtabs.rtabs--title { margin: 8px 0 10px; }
  .kplay { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .kplay .ktracks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .kplay .ktrack { padding: 4px 3px 5px; gap: 2px; }
  .kplay .ktrack canvas { max-width: 50px; }
  .kplay .ktrack b { font-size: 0.7rem; }
  .kplay .ktrack small { display: none; }
  .kplay .kseg button { padding: 6px 3px; font-size: 0.78rem; }
  .kplay .kseg button small, .kplay .khelps button small { display: none; }
  .kplay .khelps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .kplay .khelps button { padding: 5px 3px; font-size: 0.74rem; }
  .kplay .ractions { margin-top: 6px; gap: 6px; }
  .kplay .gbtn--tall { min-height: 54px; }
  .kplay .rbest { font-size: 0.78rem; gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
}

/* the finish: standings beside the numbers */
.kover { text-align: left; }
/* (the body type: the display face's small capitals read "1st" as "1ST") */
.kover .rcard__head { text-align: center; font-family: var(--font-body); font-weight: 900; letter-spacing: 0.01em; }
.kover__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: start; }
.kover__stats { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.kstand { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; align-content: start; }
.kstand li { display: grid; grid-template-columns: 2.2em 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.92rem; }
.kstand li b { font-variant-numeric: tabular-nums; color: #ffd48f; }
.kstand li i { width: 12px; height: 12px; border-radius: 4px; background: var(--c, #888); }
.kstand li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kstand li em { font-style: normal; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); }
.kstand li.is-you { background: rgba(80, 230, 140, 0.16); box-shadow: 0 0 0 1px rgba(157, 255, 208, 0.6) inset; }
.kstand--cup li { padding: 4px 10px; }
.kcup { margin-top: 10px; }

/* narrow screens: tracks two by two, the item slot under the buttons on the right, a smaller map */
/* (below 760 px the item slot would meet the buttons: it goes under them, on the right) */
@media (max-width: 760px) { .khud__item { left: auto; right: max(16px, env(safe-area-inset-right)); top: calc(max(12px, env(safe-area-inset-top)) + 54px); transform: none; width: 58px; height: 58px; font-size: 1.8rem; } }
@media (max-width: 640px) {
  .ktracks, .khelps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kover__cols { grid-template-columns: 1fr; }
  .khud__right { max-width: 200px; }
  .khud__item { top: calc(max(12px, env(safe-area-inset-top)) + 96px); }
  .khud__powers { left: max(16px, env(safe-area-inset-left)); transform: none; top: calc(max(12px, env(safe-area-inset-top)) + 190px); flex-direction: column; align-items: flex-start; gap: 6px; }
  .khud__map { width: 100px; height: 100px; }
  .khud .rhud__banner { top: 27%; }
  .khud__split { top: 33%; }
  .khud__warn { top: 38%; }
}
@media (max-width: 420px) { .ktitle__row { grid-template-columns: 1fr; } }
@media (max-width: 460px) { #kart-diff button small { display: none; } }
/* a narrow screen with the call card up: the buttons go to the right-hand side, and the left arrow up out of the card's way */
@media (max-width: 720px) {
  body:has(.mcall:not([hidden]):not(.is-docked)) .kpad { left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; align-items: flex-end; }
  body:has(.mcall:not([hidden]):not(.is-docked)) .kzone--r .kzone__hint { bottom: auto; top: 10px; }
}
/* short landscape screens (a phone on its side): a smaller map and place, the controls lower */
@media (max-height: 460px) {
  .khud__pos { font-size: 2.2rem; }
  .khud__map { width: 88px; height: 88px; }
  /* (the buttons in a row, low, so the kart is still seen above them) */
  .kpad { flex-direction: row-reverse; align-items: flex-end; }
  .kpad__btn { width: 72px; height: 72px; font-size: 1.4rem; }
  .kpad__btn--item { width: 78px; height: 78px; font-size: 1.9rem; }
  .kpad__btn--brake { width: 58px; height: 58px; }
  .kzone__hint { width: 60px; height: 60px; font-size: 1.4rem; }
  /* (the call keeps its corner, a small bubble on a phone (css/minicall.css): the left arrow moves up out of its way;
     the map, up in the top-left column, stays) */
  body:has(.mcall:not([hidden]):not(.is-docked)) .kzone--l .kzone__hint { bottom: auto; top: 6px; left: auto; right: 16px; }
  .khud__count { top: 40%; }
  .khud .rhud__banner { top: 33%; }
  .khud__split { top: 38%; }
  .khud__warn { top: 46%; }
}
@media (prefers-reduced-motion: reduce) { .khud__count, .khud__pos.is-up, .khud__item.is-rolling span { animation: none; } }