/* garlicoin.org: Bread Kart.
   Loaded after /assets/site.css by the pages that need it (their <head> links it). Split out of site.css on
   2026-10-21: keep a rule here only if just these pages use it; anything shared goes in site.css. */

/* end of the 2026-10-20 games UX sweep block */
/* ==== 2026-10-20 Bread Kart: start (/kart/, assets/kart.js) ==== */
.kart-frame { background: #0b0a1a; --kz: 1; aspect-ratio: auto; }
.kart-frame canvas#game { display: block; width: 100%; height: 100%; touch-action: none; }
.kart-ui { position: absolute; pointer-events: none; z-index: 3; color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(5,4,20,.95); }
.kart-frame:not(.kart-racing) .kart-hud, .kart-frame:not(.kart-racing) .kart-list, .kart-frame:not(.kart-racing) .kart-map, .kart-frame:not(.kart-racing) .kart-speed, .kart-frame:not(.kart-racing) .kart-pause { display: none; }
.kart-hud { left: calc(12px * var(--kz)); top: calc(8px * var(--kz)); display: grid; gap: 2px; line-height: 1; }
.kart-pos { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; font-size: calc(3.1rem * var(--kz)); color: #ffd27a; }
.kart-suf { font-size: .42em; vertical-align: top; margin-left: 1px; }
.kart-of { font-size: .4em; color: #d8d0ff; margin-left: 4px; }
.kart-line { font-size: calc(1rem * var(--kz)); font-variant-numeric: tabular-nums; }
.kart-cl { display: flex; align-items: center; gap: 4px; color: #ffe28a; }
.kart-cl svg, .kart-cl .kart-coin { width: calc(18px * var(--kz)); height: calc(18px * var(--kz)); }
.kart-cl .kart-coin { filter: drop-shadow(0 0 4px rgba(242,182,50,.6)); }
.kart-vol input { width: 120px; height: 28px; cursor: pointer; }
/* the music volume (like Clove Squadron's): a bigger target for a thumb */
.kart-cl.pop { animation: kart-pop .3s ease-out; }
.kart-hud.kart-gain .kart-pos { animation: kart-gain .5s ease-out; }
@keyframes kart-pop { 40% { transform: scale(1.3); } }
@keyframes kart-gain { 30% { transform: scale(1.25); color: #9dff8a; } }
.kart-list { right: calc(10px * var(--kz)); top: calc(56px * var(--kz)); margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: calc(.82rem * var(--kz)); text-align: right; }
.kart-list li { padding: 1px 8px 1px 6px; border-radius: 6px; background: rgba(10,8,30,.45); border-right: 4px solid var(--kc, #fff); }
.kart-list li.you { background: rgba(242,182,50,.35); color: #fff4d4; }
.kart-map { left: calc(10px * var(--kz)); bottom: calc(10px * var(--kz)); width: calc(112px * var(--kz)); height: calc(112px * var(--kz)); border-radius: 50%; background: rgba(10,8,30,.4); }
.kart-map canvas { display: block; width: 100%; height: 100%; }
.kart-map i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; will-change: transform; }
.kart-map i.you { left: -5px; top: -5px; width: 10px; height: 10px; box-shadow: 0 0 0 2px #2f9e4a; }
.kart-speed { right: calc(12px * var(--kz)); bottom: calc(10px * var(--kz)); text-align: right; font-size: calc(1.9rem * var(--kz)); font-variant-numeric: tabular-nums; line-height: 1; }
.kart-speed small { font-size: .42em; margin-left: 3px; color: #d8d0ff; }
.kart-bar { display: block; width: calc(120px * var(--kz)); height: calc(7px * var(--kz)); margin: 5px 0 0 auto; border-radius: 9px; background: rgba(10,8,30,.55); overflow: hidden; }
.kart-bar b { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: #cfe8ff; transition: transform .1s linear; }
.kart-bar b.lv1 { background: #4fc3ff; }
.kart-bar b.lv2 { background: #ffa030; }
.kart-bar b.lv3 { background: #ff4fd8; }
.kart-bar b.boost { background: linear-gradient(90deg, #ffe14f, #ff6a3a); }
.kart-pause { pointer-events: auto; right: calc(10px * var(--kz)); top: calc(10px * var(--kz)); width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(10,8,30,.5); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.kart-pause svg { width: 18px; height: 18px; fill: currentColor; }
.kart-banner { left: 0; right: 0; top: 24%; text-align: center; font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; font-size: calc(2.2rem * var(--kz)); opacity: 0; z-index: 4; padding: 0 12px; }
.kart-banner.show { animation: kart-banner 1.6s ease-out forwards; }
.kart-banner.final { color: #ffd27a; font-size: calc(2.8rem * var(--kz)); }
.kart-banner.wrong { color: #ff8a8a; }
.kart-banner.win { color: #ffe28a; font-size: calc(3rem * var(--kz)); }
.kart-banner.turbo { color: #ff9be6; }
.kart-banner.lap { color: #9dff8a; }
.kart-banner.air { color: #9fe8ff; }
@keyframes kart-banner { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.06); } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.kart-count { left: 0; right: 0; top: 30%; text-align: center; font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; font-size: calc(5.5rem * var(--kz)); color: #ffe28a; z-index: 4; line-height: 1; }
.kart-count.show { animation: kart-count .8s ease-out; }
.kart-count.go { color: #7dff6a; font-size: calc(6.5rem * var(--kz)); }
.kart-final { color: #ffd27a; }
.kart-medal { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; font-weight: 800; }
.kart-medal.m1 { background: linear-gradient(#ffe28a, #f2b632); color: #5a2a08; }
.kart-medal.m2 { background: linear-gradient(#f4f4fa, #b8bccc); color: #2b2416; }
.kart-medal.m3 { background: linear-gradient(#f0b27a, #b86a2a); color: #2b1208; }
@keyframes kart-count { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } }
.kart-hint { left: 50%; bottom: 14%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(10,8,30,.65); font-size: calc(.95rem * var(--kz)); white-space: nowrap; z-index: 4; }
.kart-hint[hidden] { display: none; }
.kart-hint.show { animation: kart-hint 4s ease-out forwards; }
@keyframes kart-hint { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.kart-frame::before, .kart-frame::after { content: ""; position: absolute; left: 0; right: 0; height: 11%; background: #05040f; z-index: 2; pointer-events: none; transform: scaleY(0); transition: transform .45s ease; }
.kart-frame::before { top: 0; transform-origin: top; }
.kart-frame::after { bottom: 0; transform-origin: bottom; }
.kart-frame.kart-cine::before, .kart-frame.kart-cine::after { transform: scaleY(1); }
.kart-cap { left: 0; right: 0; bottom: 15%; text-align: center; opacity: 0; z-index: 4; display: grid; gap: 2px; padding: 0 12px; }
.kart-cap b { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; font-size: calc(2.1rem * var(--kz)); color: #ffd27a; letter-spacing: .02em; }
.kart-cap small { font-size: calc(.95rem * var(--kz)); color: #e8e0ff; font-weight: 700; }
.kart-cap.show { animation: kart-cap 2.2s ease-out forwards; }
@keyframes kart-cap { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
.kart-skip { right: 14px; bottom: 2.5%; margin: 0; font-size: calc(.8rem * var(--kz)); color: #b8b0e0; z-index: 3; opacity: 0; transition: opacity .3s; }
.kart-frame.kart-cine .kart-skip { opacity: .9; }
.kart-flash { inset: 0; background: #fff; opacity: 0; z-index: 4; }
.kart-flash.show { animation: kart-flash .5s ease-out; }
@keyframes kart-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.kart-flash.dark { background: #05040f; }
.kart-flash.dark.show { animation: kart-fade .9s ease-out; }
@keyframes kart-fade { 0% { opacity: 1; } 30% { opacity: 1; } 100% { opacity: 0; } }
.kart-paused { z-index: 6; }
.kart-paused[hidden] { display: none; }
.kart-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.kart-over { background: rgba(14,10,36,.82); }
.kart-over h2 { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; color: #ffd27a; }
.kart-res { border-collapse: collapse; margin: 2px auto; font-size: .82rem; min-width: min(280px, 90%); }
.kart-res td { padding: 1px 6px; text-align: left; }
.kart-res td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kart-res td i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.kart-res tr.you { background: rgba(242,182,50,.3); color: #fff4d4; font-weight: 800; }
.kart-h3 { margin: 16px 0 4px; font-size: 1rem; }
.kart-stage.arcade-wide .super-tools::before { display: none; }
/* Bread Kart has its own upright layout: no "turn your phone" tip */
.kart-frame.kart-small .kart-list, .kart-frame.kart-tall .kart-list { display: none; }
.kart-frame.kart-small .kart-pause { width: 34px; height: 34px; }
.kart-frame.kart-tall .kart-banner { top: 20%; }
@media (prefers-reduced-motion: reduce) {
  .kart-frame::before, .kart-frame::after { transition: none; }
  .kart-cap.show { animation-timing-function: step-end; }
  .kart-banner.show { animation-duration: 2s; animation-timing-function: step-end; opacity: 1; }
  .kart-count.show, .kart-cl.pop, .kart-hud.kart-gain .kart-pos { animation: none; }
}