/* Archer's Farm Kart Race: menus, race HUD, touch controls and results.
   Reuses the variables, fonts and chunky "press" buttons from style.css.
   The root sits above the farm HUD (20) and screens (40) but below the
   toast (50) and the white flash (60). */

.kart { position: fixed; inset: 0; z-index: 45; font-weight: 700; touch-action: none; }
.kart.hidden { display: none !important; }
.kart button { min-height: 56px; }
.kart h2 { margin: 0; font-weight: 800; }
.kart img { pointer-events: none; }

/* ---------------------------------------------------------- menu */
.k-menu {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(12px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  background:
    linear-gradient(#5cb8ff 0%, #a6e0ff 42%, #e8f8ff 72%, #fffaf0 100%);
}
/* soft chequered flag band along the very top and a few clouds */
.k-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(18px + var(--sat)); pointer-events: none;
  background: conic-gradient(#3a2a33 25%, #fff 0 50%, #3a2a33 0 75%, #fff 0) 0 0 / 36px 36px;
  opacity: .9; box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.k-menu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90px 34px at 12% 20%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(ellipse 130px 40px at 82% 14%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 100px 30px at 60% 34%, rgba(255,255,255,.55), transparent 70%);
}
.k-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding-top: 22px; flex: none; }
.k-top h2 {
  flex: 1; font-size: clamp(28px, 5.4vw, 52px); line-height: 1; color: #fff6e0; letter-spacing: -.01em;
  -webkit-text-stroke: clamp(5px, .9vw, 9px) #3a2a33; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(58,42,51,.35);
  transform: rotate(-1.5deg); transform-origin: left center;
}
.k-page {
  position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
  padding: 16px 4px 24px; margin: 0 -4px;
}

/* racer picker: 16 big cards */
#kRacers { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 20vmin, 180px), 1fr)); gap: clamp(10px, 1.8vw, 18px); align-content: start; }
.k-racer {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 8px 6px 10px;
  border-radius: var(--radius); background: var(--surface); border: 4px solid var(--ink);
  box-shadow: 0 7px 0 var(--edge), 0 10px 16px rgba(0,0,0,.15); color: var(--ink);
  font-size: var(--text-m); line-height: 1.05; transition: transform .1s, box-shadow .1s;
}
.k-racer img { width: 100%; max-width: 132px; aspect-ratio: 1; object-fit: contain; border-radius: 16px; background: radial-gradient(circle, #fff, #fff2d2 80%); }
.k-racer span { text-align: center; }
.k-racer:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--edge); }
.k-racer.on {
  border-color: var(--ink); background: #fff6b8; outline: 6px solid #ffd23f; outline-offset: 2px;
  box-shadow: 0 7px 0 #e0a800, 0 0 22px 4px rgba(255,210,63,.85); animation: k-select .5s ease-out;
}
@keyframes k-select { 0% { transform: scale(1); } 35% { transform: scale(1.1) rotate(-2deg); } 70% { transform: scale(.98) rotate(1deg); } 100% { transform: scale(1); } }

/* races page: speed classes then two cup cards */
.k-cls { display: flex; justify-content: center; gap: clamp(8px, 2vw, 18px); margin-bottom: 18px; }
.k-clsbtn {
  flex: 1; max-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px;
  border-radius: var(--radius); background: rgba(255,255,255,.85); border: 4px solid var(--ink); color: var(--ink);
  box-shadow: 0 6px 0 rgba(58,42,51,.25); font-size: var(--text-m); line-height: 1.1; min-height: 84px;
}
.k-clsbtn b { font-size: clamp(30px, 6vw, 44px); line-height: 1; }
.k-clsbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(58,42,51,.25); }
.k-clsbtn.on { background: linear-gradient(#ffe45c, #ffc933); box-shadow: 0 6px 0 #e0a800, 0 0 18px rgba(255,210,63,.9); transform: translateY(-2px) scale(1.04); }
.k-cups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); align-items: start; }
.k-cup {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px; min-width: 0;
  border-radius: 28px; background: var(--surface); border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--edge), 0 12px 20px rgba(0,0,0,.15);
}
.k-cupbtn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px;
  min-height: 84px; border-radius: 999px; color: #fff; font-size: clamp(22px, 3.6vw, 36px);
  background: linear-gradient(#5fd06a, #36a845); box-shadow: 0 7px 0 #217a2f, 0 10px 14px rgba(0,0,0,.2);
  text-shadow: 0 3px 0 rgba(0,0,0,.22); transition: transform .08s, box-shadow .08s;
}
.k-cup:nth-child(2) .k-cupbtn { background: linear-gradient(#ffb04a, #ff8a1f); box-shadow: 0 7px 0 #b85e0c, 0 10px 14px rgba(0,0,0,.2); }
.k-cupbtn:active { transform: translateY(5px); box-shadow: 0 2px 0 #217a2f; }
.k-cupbtn img { width: clamp(52px, 8vw, 72px); height: clamp(52px, 8vw, 72px); object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); flex: none; }
.k-cupbtn span { line-height: 1; }
.k-trophy {
  position: absolute; top: -14px; right: -6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 800 20px/1 var(--font-ui); font-style: normal; color: #3a2a33; border: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.25); text-shadow: none; transform: rotate(10deg);
}
.k-trophy.gold { background: radial-gradient(circle at 35% 30%, #fff3a8, #ffc933 70%); }
.k-trophy.silver { background: radial-gradient(circle at 35% 30%, #fff, #c5ccd6 70%); }
.k-trophy.bronze { background: radial-gradient(circle at 35% 30%, #ffd4a3, #d98a4a 70%); }
.k-tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 12px); }
.k-track {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; min-width: 0;
  border-radius: 18px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--edge); color: var(--ink);
  font-size: var(--text-s); line-height: 1.1; min-height: 88px;
}
.k-track img { width: 100%; aspect-ratio: 160 / 110; object-fit: contain; border-radius: 12px; background: #dff3d0; }
.k-track span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(16px, 1.9vw, 20px); }
.k-track i {
  position: absolute; top: -8px; right: -4px; padding: 2px 8px; border-radius: 99px; background: var(--reward);
  border: 2px solid var(--ink); font: 800 16px/1.2 var(--font-ui); font-style: normal; color: var(--ink);
}
.k-track:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }
/* narrow screens: one cup per row so the track words have room */
@media (max-width: 720px) {
  .k-cups { grid-template-columns: minmax(0, 1fr); }
  .k-track span { font-size: 16px; }
}
/* phones: two tracks per row so the words are never cut */
@media (max-width: 480px) {
  .k-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-track { padding: 6px 8px 8px; min-height: 96px; }
  .k-track img { max-height: 64px; }
  .k-track span { font-size: 17px; }
}
.k-help { display: flex; justify-content: center; margin-top: 20px; }
.k-help .tog { flex-direction: row; gap: 10px; padding: 10px 26px; min-height: 64px; font-size: var(--text-m); border: 4px solid var(--ink); }
.k-help .tog svg { width: 32px; height: 32px; }

/* ---------------------------------------------------------- HUD */
.k-hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.k-hud button, .k-hud .k-stick { pointer-events: auto; }
.k-hud > * { position: absolute; }

.k-place {
  top: calc(8px + var(--sat)); left: calc(16px + var(--sal)); font-size: clamp(64px, 14vmin, 130px); line-height: 1;
  font-style: italic; font-weight: 800; color: #fff; letter-spacing: -.03em; transform-origin: left center;
  -webkit-text-stroke: clamp(6px, 1.1vmin, 12px) #3a2a33; paint-order: stroke fill; filter: drop-shadow(0 6px 0 rgba(58,42,51,.35));
}
.k-place.p1 { color: #ffd23f; }
.k-place.p2 { color: #d8dee8; }
.k-place.p3 { color: #e39a5a; }
.k-place.p4 { color: #fff; }
.k-place.pop { animation: k-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes k-pop { 0% { transform: scale(.6) rotate(-6deg); } 60% { transform: scale(1.25) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }

.k-lap {
  top: calc(clamp(80px, 17vmin, 152px) + var(--sat)); left: calc(16px + var(--sal)); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 18px 6px 12px; min-height: 48px; border-radius: 99px; background: var(--surface); border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--edge), 0 8px 14px rgba(0,0,0,.15); font-size: var(--text-l); font-variant-numeric: tabular-nums;
}
.k-lap svg { width: 30px; height: 30px; }
.k-lap b { font-weight: 800; }

/* item slot: a double outlined box like the real thing */
.k-item {
  top: calc(20px + var(--sat)); left: 50%; margin-left: -48px; width: 96px; height: 96px; min-height: 96px; padding: 0; border-radius: 24px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), rgba(255,244,214,.85) 75%);
  border: 5px solid var(--ink); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--ink), 0 10px 16px rgba(0,0,0,.25);
  display: grid; place-items: center; touch-action: manipulation;
}
.k-item img { width: 76px; height: 76px; object-fit: contain; opacity: 0; transition: opacity .1s; }
.k-item b {
  position: absolute; right: -14px; bottom: -14px; min-width: 40px; padding: 2px 8px; border-radius: 99px; background: var(--reward);
  border: 3px solid var(--ink); font: 800 20px/1.3 var(--font-ui); text-align: center; color: var(--ink);
}
.k-item b:empty { display: none; }
.k-item:active { transform: scale(.94); }
.k-item.rolling { animation: k-shake .16s linear infinite; }
@keyframes k-shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 2px) rotate(-3deg); } 50% { transform: translate(3px, -2px) rotate(3deg); } 75% { transform: translate(-2px, -2px) rotate(-2deg); } }
.k-item.ready { animation: k-glow .8s ease-in-out infinite; }
@keyframes k-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--ink), 0 0 12px 6px rgba(255,210,63,.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--ink), 0 0 30px 14px rgba(255,210,63,.95); }
}

.k-time {
  top: calc(12px + var(--sat)); right: calc(96px + var(--sar)); display: inline-flex; align-items: center; padding: 6px 18px; min-height: 48px;
  border-radius: 99px; background: #3a2a33; color: #fff; font-size: var(--text-l); font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 0 rgba(0,0,0,.25);
}
.k-pause { top: calc(12px + var(--sat)); right: calc(12px + var(--sar)); }

/* minimap: bottom-left on landscape, top-right under the pause button on portrait */
.k-map {
  bottom: calc(14px + var(--sab)); left: calc(14px + var(--sal)); width: 150px; height: 150px; border-radius: 22px;
  background: rgba(40,70,110,.32); border: 3px solid rgba(255,255,255,.75); box-shadow: 0 6px 14px rgba(0,0,0,.2); opacity: .9; pointer-events: none;
}
@media (orientation: portrait) {
  .k-map { bottom: auto; left: auto; top: calc(88px + var(--sat)); right: calc(12px + var(--sar)); width: min(132px, 30vw); height: min(132px, 30vw); }
  .k-time { right: auto; left: calc(16px + var(--sal)); top: calc(clamp(80px, 17vmin, 152px) + 62px + var(--sat)); }
}
/* touch landscape: the bottom-left corner belongs to the steering slider */
@media (orientation: landscape) and (pointer: coarse) {
  .k-map { bottom: auto; left: auto; top: calc(84px + var(--sat)); right: calc(12px + var(--sar)); width: 120px; height: 120px; }
}

/* countdown and banners */
.k-count {
  left: 0; right: 0; top: 56%; transform: translateY(-58%) scale(.3); text-align: center; opacity: 0; pointer-events: none;
  font-size: clamp(120px, 34vmin, 320px); line-height: 1; font-weight: 800; font-style: italic; color: #fff;
  -webkit-text-stroke: clamp(10px, 2vmin, 22px) #3a2a33; paint-order: stroke fill; filter: drop-shadow(0 10px 0 rgba(58,42,51,.35));
}
.k-count.show { animation: k-zoom .9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.k-count.n3 { color: #ff5a4f; }
.k-count.n2 { color: #ff9f3d; }
.k-count.n1 { color: #ffd23f; }
.k-count.go { color: #5fd06a; font-size: clamp(100px, 28vmin, 280px); animation-duration: .7s; }
@keyframes k-zoom { 0% { opacity: 0; transform: translateY(-58%) scale(.3); } 35% { opacity: 1; transform: translateY(-58%) scale(1.15); } 100% { opacity: 1; transform: translateY(-58%) scale(1); } }

.k-msg {
  left: 50%; top: max(24%, calc(132px + var(--sat))); max-width: 92vw; padding: 8px 34px 12px; border-radius: 99px; text-align: center; white-space: nowrap;
  font-size: clamp(32px, 7.5vmin, 76px); line-height: 1.1; font-weight: 800; font-style: italic; color: #fff; background: #3a2a33;
  border: 5px solid #fff; box-shadow: 0 8px 0 rgba(0,0,0,.28); text-shadow: 0 4px 0 rgba(0,0,0,.25);
  opacity: 0; transform: translate(-50%, 0) scale(.4); pointer-events: none;
}
.k-msg.show { animation: k-banner 1.4s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.k-msg.gold { background: linear-gradient(#ffe45c, #ffb22e); color: #fff; border-color: #6b3514; text-shadow: 0 4px 0 #b85e0c; }
.k-msg.blue { background: linear-gradient(#5ec8f5, #2f7fe0); }
.k-msg.orange { background: linear-gradient(#ffb04a, #ff6a1f); }
.k-msg.purple { background: linear-gradient(#d69cff, #8f4fe0); }
.k-msg.title { background: #fffaf0; color: var(--ink); border-color: var(--ink); text-shadow: none; font-style: normal; }
@keyframes k-banner { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.4); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.12); } 30%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -14px) scale(.95); } }

/* bubble gum splat over the whole screen */
.k-gum {
  inset: 0; pointer-events: none; animation: k-gumin .35s ease-out both;
  background:
    radial-gradient(ellipse 34% 30% at 22% 26%, rgba(255,107,157,.8), rgba(255,107,157,0) 72%),
    radial-gradient(ellipse 30% 34% at 80% 22%, rgba(255,140,180,.75), rgba(255,140,180,0) 72%),
    radial-gradient(ellipse 40% 34% at 60% 74%, rgba(255,107,157,.75), rgba(255,107,157,0) 72%),
    radial-gradient(ellipse 30% 30% at 14% 78%, rgba(255,140,180,.7), rgba(255,140,180,0) 72%),
    radial-gradient(circle at 50% 50%, rgba(255,107,157,.5), rgba(255,107,157,.3) 60%, rgba(255,107,157,.2));
}
@keyframes k-gumin { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }

/* touch controls: steering slider (horizontal only), drift and brake */
.k-stick { left: 0; bottom: 0; width: 45%; height: 40%; touch-action: none; }
.k-base {
  position: absolute; left: calc(20px + var(--sal)); bottom: calc(20px + var(--sab)); width: 230px; height: 110px; border-radius: 999px;
  background: radial-gradient(ellipse, rgba(255,255,255,.4), rgba(255,255,255,.16) 72%); border: 4px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 18px rgba(0,0,0,.18); pointer-events: none;
}
.k-base .ar { position: absolute; width: 0; height: 0; border: 12px solid transparent; opacity: .9; }
.k-base .ar.left { top: 50%; left: 14px; margin-top: -12px; border-right: 16px solid #fff; border-left: 0; }
.k-base .ar.right { top: 50%; right: 14px; margin-top: -12px; border-left: 16px solid #fff; border-right: 0; }
.k-knob {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ff8a7a, #e0483f 70%); box-shadow: 0 6px 0 #a8322d, 0 10px 14px rgba(0,0,0,.25);
}
.k-drift, .k-brake {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 50%; color: #fff; padding: 0;
  border: 4px solid var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,.25); touch-action: none; transition: transform .06s, box-shadow .06s;
}
.k-drift {
  right: calc(24px + var(--sar)); bottom: calc(24px + var(--sab)); width: 124px; height: 124px; font-size: 20px; line-height: 1;
  background: radial-gradient(circle at 38% 30%, #ffc36a, #ff8a1f 70%); box-shadow: 0 8px 0 #b85e0c, 0 12px 18px rgba(0,0,0,.28);
}
.k-drift svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.k-brake {
  right: calc(160px + var(--sar)); bottom: calc(26px + var(--sab)); width: 84px; height: 84px; font-size: 34px;
  background: radial-gradient(circle at 38% 30%, #7fc4ff, #3d8fe0 70%); box-shadow: 0 6px 0 #235fa0, 0 10px 14px rgba(0,0,0,.25);
}
.k-brake svg { width: 40px; height: 40px; }
.k-drift.on, .k-brake.on { transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.3); filter: brightness(1.08); }
/* the item box shifts up a little on portrait so it clears the drift button is not needed: it stays top centre */
@media (orientation: portrait) {
  .k-stick { width: 55%; height: 32%; }
  .k-base { width: 210px; height: 100px; }
  .k-brake { right: calc(24px + var(--sar)); bottom: calc(160px + var(--sab)); }
}
/* desktop: keyboard only */
@media (hover: hover) and (pointer: fine) {
  .k-stick, .k-drift, .k-brake { display: none; }
}

/* ---------------------------------------------------------- results and pause */
.k-results, .k-pausemenu {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(14px + var(--sat)) calc(14px + var(--sar)) calc(14px + var(--sab)) calc(14px + var(--sal));
  background: rgba(40,70,110,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); touch-action: pan-y;
}
.k-card {
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 18px); width: min(560px, 100%); margin: auto;
  padding: clamp(14px, 2.6vh, 24px) clamp(14px, 3vw, 28px) clamp(16px, 3vh, 26px); border-radius: 32px; background: var(--surface);
  border: 5px solid var(--ink); box-shadow: 0 10px 0 var(--edge), 0 18px 30px rgba(0,0,0,.3); animation: k-card .4s cubic-bezier(.3, 1.4, .5, 1);
}
.k-card.small { width: min(400px, 100%); }
.k-card h2 { font-size: clamp(30px, 6vmin, 48px); line-height: 1.05; text-align: center; color: #e08a00; -webkit-text-stroke: 0; text-shadow: 0 3px 0 rgba(58,42,51,.15); }
.k-card.small h2 { color: var(--ink); }
@keyframes k-card { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }

.k-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; }
.k-step {
  position: relative; flex: 1; max-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  padding: 0 4px 8px; border-radius: 16px 16px 0 0; border: 4px solid var(--ink); border-bottom: 0; color: var(--ink);
  font-size: var(--text-l); font-weight: 800; height: 84px; margin-top: clamp(64px, 12vmin, 92px);
}
.k-step img { position: absolute; bottom: 100%; left: 50%; width: clamp(64px, 12vmin, 96px); height: clamp(64px, 12vmin, 96px); object-fit: contain; transform: translateX(-50%); margin-bottom: 2px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }
.k-step b { margin-top: 6px; line-height: 1; text-shadow: 0 2px 0 rgba(255,255,255,.5); }
.k-step.s1 { height: 132px; background: linear-gradient(#ffe45c, #ffc933); }
.k-step.s2 { height: 104px; background: linear-gradient(#f2f5fa, #c5ccd6); }
.k-step.s3 { height: 80px; background: linear-gradient(#ffd4a3, #d98a4a); }
.k-step.me img { border-radius: 50%; background: radial-gradient(circle, #fff6b8, rgba(255,210,63,0) 70%); filter: drop-shadow(0 0 12px #ffd23f) drop-shadow(0 0 4px #ffd23f); animation: k-hop .9s ease-in-out infinite; }
@keyframes k-hop { 50% { transform: translateX(-50%) translateY(-8px); } }

.k-table { width: 100%; display: flex; flex-direction: column; gap: 4px; max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 2px; }
.k-row { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 10px; min-height: 44px; border-radius: 14px; background: #f6ecd8; font-size: 17px; }
.k-row b { width: 42px; flex: none; font-weight: 800; color: var(--muted); }
.k-row img { width: 36px; height: 36px; flex: none; object-fit: contain; border-radius: 50%; background: #fff; }
.k-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-row i { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.k-row.me { background: #fff2a8; box-shadow: 0 0 0 3px #ffd23f; }
.k-row.me b { color: var(--ink); }

.k-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; width: 100%; }
.k-btns .text-btn { min-height: 56px; padding: 10px 22px; font-size: 17px; border: 3px solid var(--ink); background: #fff; box-shadow: 0 4px 0 var(--edge); }
.k-btns .text-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.k-btns .big-play { min-height: 64px; }

/* ---------------------------------------------------------- confetti (about 3 s, CSS only) */
.kart.confetti::after {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 200%; z-index: 5; pointer-events: none;
  background-image:
    radial-gradient(circle 7px at 10% 20%, #ff6b9d 98%, transparent), radial-gradient(circle 6px at 30% 60%, #ffd23f 98%, transparent),
    radial-gradient(circle 8px at 52% 10%, #5ec8f5 98%, transparent), radial-gradient(circle 6px at 72% 45%, #5fd06a 98%, transparent),
    radial-gradient(circle 7px at 90% 75%, #c77dff 98%, transparent), radial-gradient(circle 5px at 20% 90%, #ff9f3d 98%, transparent);
  background-size: 260px 300px, 210px 260px, 340px 280px, 230px 340px, 300px 250px, 190px 310px;
  animation: k-confetti 3s linear forwards;
}
@keyframes k-confetti { from { transform: translateY(-50%); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(0); opacity: 0; } }

/* reduced motion: the game sets html.rm */
html.rm .kart *, html.rm .kart *::before, html.rm .kart *::after, html.rm .kart::after {
  animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important;
}
html.rm .kart.confetti::after { display: none; }