/* KAISER KREW — play.html shell: canvas, loading card, build panel. HUD styles live in src/hud/hud.css. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1116; overscroll-behavior: none; }
#kk-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#kk-hud { position: fixed; inset: 0; pointer-events: none; }

/* S1 shows only what exists: no fake heat, vibe or district readouts yet, and no main menu to quit to */
.kk-heat-bar, .kk-district-vibe, .kk-alert-banner, #kk-pause-quit { display: none !important; }
/* explore: run score only; build: the tool bar */
body:not([data-mode="build"]) .kk-hotbar { display: none; }
body[data-mode="build"] .kk-run-score-wrap { display: none; }
body[data-mode="build"] .kk-air-counter { display: none; }

/* glass blur over WebGL costs GPU time every frame: keep it light in play */
#kk-hud .kk-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }

#kk-debug {
  position: fixed; left: 12px; bottom: 120px; margin: 0; padding: 4px 8px; z-index: 40;
  font: 12px/1.4 ui-monospace, Menlo, monospace; color: #cfe8ff; background: rgba(0, 0, 0, 0.55); border-radius: 4px;
}

/* ---------------------------------------------------------------- loading */
#kk-loading {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 20%, #23324a 0%, #10141c 60%, #0b0e14 100%);
  transition: opacity 0.6s ease;
}
#kk-loading.kk-done { opacity: 0; pointer-events: none; }
.kk-load-card { text-align: center; color: #f3f0ea; width: min(420px, 86vw); }
.kk-load-logo { font-family: 'Big Shoulders Display', Impact, sans-serif; font-weight: 900; font-size: clamp(44px, 9vw, 76px); letter-spacing: 0.04em; line-height: 1; text-shadow: 0 6px 30px rgba(255, 106, 42, 0.35); }
.kk-load-tag { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.18em; text-transform: uppercase; color: #ff6a2a; margin: 6px 0 28px; }
.kk-load-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.kk-load-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff6a2a, #ffc233); transition: width 0.25s ease; }
.kk-load-step { font-family: 'Barlow', system-ui, sans-serif; font-size: 15px; color: #a9b0bb; margin-top: 12px; min-height: 20px; }
.kk-load-credit { font-family: 'Barlow', system-ui, sans-serif; font-size: 11.5px; color: #8a94a6; margin-top: 28px; line-height: 1.4; }
.kk-voice-badge { color: #cfd6e2; font-weight: 600; letter-spacing: 0.01em; }
.kk-settings-credit { font-family: var(--kk-font-body, 'Barlow', system-ui, sans-serif); font-size: 12px; font-weight: 500; line-height: 1.4; color: #8d97a5; padding: 8px 0 2px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
#kk-loading.kk-failed .kk-load-step { color: #ff4057; white-space: pre-wrap; }

/* ---------------------------------------------------------------- build dashboard (builddash.js; vision-4: icon cards along the bottom, a settings card at the side) */
body[data-mode="build"] .kk-hotbar, body[data-mode="build"] .kk-bottom-right, body[data-mode="build"] .kk-run-score-wrap { display: none; }
body[data-mode="build"] .kk-bottom-center { bottom: calc(126px + var(--sab, 0px)); }
body[data-mode="build"] .kk-street-card, body[data-mode="build"] .kk-street-popup { display: none; }
.kkb-cardbar {
  position: absolute; left: calc((100vw - 340px) / 2); bottom: calc(14px + var(--sab, 0px)); transform: translate(-50%, 28px);
  display: flex; gap: 8px; padding: 8px; border-radius: 16px; max-width: calc(100vw - 340px - 40px); overflow-x: auto; scrollbar-width: none;
  pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 25; clip-path: none;
}
.kkb-cardbar::-webkit-scrollbar { display: none; }
.kkb-cardbar.active { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kkb-card {
  position: relative; flex: 0 0 auto; width: 84px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(22, 28, 40, 0.72); color: #cfd5de; cursor: pointer; padding: 0 2px;
  font: 700 13px/1.05 var(--kk-font-body); letter-spacing: 0.01em; text-align: center; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.kkb-card .ic { display: grid; place-items: center; height: 40px; }
.kkb-card .ic svg { width: 40px; height: 40px; }
.kkb-card .nm { display: block; max-width: 80px; }
.kkb-card .no { position: absolute; top: 5px; left: 8px; font: 700 11px var(--kk-font-hud); font-style: normal; color: var(--kk-text-subtle); }
.kkb-card:hover { background: rgba(40, 50, 70, 0.9); color: #fff; transform: translateY(-2px); }
.kkb-card.on { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.16); color: #fff; box-shadow: 0 0 0 1px rgba(255, 106, 42, 0.35), 0 8px 22px rgba(255, 106, 42, 0.2); }
.kkb-card.on .ic { color: #ffc233; }
.kkb-card:focus-visible, .kkb-rb:focus-visible, .kkb-size:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.kkb-panel {
  position: absolute; right: calc(16px + var(--sar, 0px)); bottom: calc(14px + var(--sab, 0px)); top: auto; transform: translate(24px, 0); width: 310px;
  max-height: calc(100vh - 28px - var(--sab, 0px)); overflow-y: auto; padding: 12px 14px 12px; border-radius: 16px; clip-path: none;
  pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  font-family: var(--kk-font-hud); color: var(--kk-text); z-index: 25; scrollbar-width: thin;
}
.kkb-panel.active { opacity: 1; visibility: visible; transform: none; }
/* BUILD 13 Oct playtest: with Fine-tune open the panel grew under the round minimap (top right, ~64-190 px): on desktop it
   stops below it and scrolls; the Fix button stays in view at the bottom while it scrolls */
body:not(.kk-touch) .kkb-panel { max-height: calc(100vh - 214px - var(--sab, 0px)); }
body:not(.kk-touch) .kkb-panel .kkb-fix { position: sticky; bottom: 0; z-index: 1; }
.kkb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kkb-title { font-family: var(--kk-font-logo); font-weight: 900; font-size: 28px; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; }
.kkb-stars { display: inline-flex; gap: 1px; color: rgba(255, 255, 255, 0.18); }
.kkb-stars i.on { color: #ffc233; }
.kkb-sub { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kk-text-dim); margin: 3px 0 8px; }
.kkb-editing .kkb-sub { color: #ffc233; }
.kkb-status {
  font-family: var(--kk-font-body); font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 34px; margin: 0 0 10px; padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05); color: var(--kk-text-dim);
}
.kkb-status[data-level="ok"] { color: #3ddc84; background: rgba(61, 220, 132, 0.1); }
.kkb-status[data-level="warn"] { color: #ffc233; background: rgba(255, 194, 51, 0.12); }
.kkb-status[data-level="bad"] { color: #ff4057; background: rgba(255, 64, 87, 0.12); }
.kkb-sec { margin: 0 0 11px; }
.kkb-lb { display: block; font: 700 12px var(--kk-font-hud); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-text-dim); }
.kkb-sizes, .kkb-step, .kkb-sl { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 4px 8px; }
.kkb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kkb-size {
  height: 42px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(22, 28, 40, 0.75); color: #e8ebf1;
}
.kkb-size b { font-family: var(--kk-font-logo); font-weight: 900; font-size: 22px; line-height: 1; }
.kkb-size:hover { background: rgba(40, 50, 70, 0.9); }
.kkb-size.on { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.2); color: #fff; }
.kkb-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kkb-val { flex: 1; text-align: center; font: 900 20px var(--kk-font-logo); letter-spacing: 0.03em; }
.kkb-rb {
  width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(22, 28, 40, 0.75); color: #e8ebf1; touch-action: none; user-select: none;
}
.kkb-rb:hover:not(:disabled) { background: rgba(40, 50, 70, 0.9); color: #fff; }
.kkb-rb:active:not(:disabled) { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.2); }
.kkb-rb:disabled { opacity: 0.35; cursor: default; }
.kkb-range { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #ff6a2a; height: 20px; cursor: ew-resize; }
.kkb-pos { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 4px 8px; }
.kkb-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kkb-pad .kkb-rb { width: 100%; height: 38px; }
.kkb-pos.off .kkb-pad { opacity: 0.55; }
.kkb-row { display: flex; gap: 8px; margin: 2px 0 8px; }
.kkb-btn {
  flex: 1; height: 38px; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  background: rgba(22, 28, 40, 0.75); color: #e8ebf1; cursor: pointer; padding: 0;
}
.kkb-btn:hover { background: rgba(40, 50, 70, 0.9); color: #fff; }
.kkb-danger:hover { border-color: #ff4057; color: #ff4057; }
.kkb-fix {
  width: 100%; height: 44px; margin: 2px 0 0; border: 0; border-radius: 10px; cursor: pointer;
  font-family: var(--kk-font-logo); font-weight: 900; font-size: 21px; letter-spacing: 0.08em; color: #14100c;
  background: linear-gradient(100deg, #ffc233, #ff6a2a);
}
.kkb-fix:hover { filter: brightness(1.08); }
/* owner Q15 2026-10-11: grouped cards, the status line first, folded shape sliders, words + keys on every button */
.kkb-cardbar { gap: 14px; align-items: flex-end; }
.kkb-grp { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.kkb-grp + .kkb-grp { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.kkb-gl { font: 700 11px var(--kk-font-hud); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kk-text-dim); padding-left: 2px; }
.kkb-grp[data-g="ride"] .kkb-gl { color: #ffc233; }
.kkb-gc { display: flex; gap: 8px; }
.kkb-card { width: 78px; height: 86px; }
.kkb-head { align-items: center; justify-content: flex-start; }
.kkb-hic { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 106, 42, 0.16); color: #ffc233; }
.kkb-hic svg { width: 34px; height: 34px; }
.kkb-htx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kkb-htx .kkb-what { font: 600 13px/1.3 var(--kk-font-body); color: var(--kk-text); }
.kkb-head .kkb-stars { align-self: flex-start; }
.kkb-panel .kkb-status { font-size: 15px; font-weight: 700; min-height: 40px; margin: 10px 0 8px; padding: 9px 12px; border-left: 4px solid currentColor; }
.kkb-panel .kkb-sub { display: none; }
.kkb-panel:not(.kkb-first) .kkb-legend { display: none; }
.kkb-finebtn { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 34px; margin: 0 0 8px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px dashed rgba(255, 255, 255, 0.18); background: transparent; color: var(--kk-text-dim); font: 700 12px var(--kk-font-hud); letter-spacing: 0.1em; text-transform: uppercase; }
.kkb-finebtn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.kkb-fine-open .kkb-finebtn i { transform: rotate(180deg); }
body:not(.kk-touch) .kkb-panel:not(.kkb-fine-open) .kkb-sl { display: none; }
/* owner Q5: the cost of a big piece, from the backpack + crew stash */
.kkb-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font: 700 12px var(--kk-font-hud); letter-spacing: 0.04em; color: var(--kk-text-dim); }
.kkb-cost u { text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; }
.kkb-cost span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.kkb-cost span.ok { color: #3ddc84; } .kkb-cost span.short { color: #ff8a5c; background: rgba(255, 64, 87, 0.12); }
.kkb-cost span b { font: 900 14px var(--kk-font-logo); } .kkb-cost span i { font-style: normal; font-weight: 600; color: var(--kk-text-dim); }
.kkb-cost em { font-style: normal; color: #ffc233; }
.kkb-cost[hidden] { display: none; }
.kkb-panel:not(.kkb-has-piece) .kkb-pos { display: none; }
.kkb-acts .kkb-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; font: 700 13px var(--kk-font-hud); letter-spacing: 0.04em; }
.kkb-acts .kkb-btn:disabled { opacity: 0.38; cursor: default; }
.kkb-btn kbd, .kkb-fix kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; font: 700 11px var(--kk-font-hud);
  background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }
.kkb-fix { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px; }
.kkb-fix kbd { background: rgba(20, 16, 12, 0.18); color: #14100c; border-color: rgba(20, 16, 12, 0.35); }
body.kk-touch .kkb-gl, body.kk-touch .kkb-bl, body.kk-touch .kkb-btn kbd, body.kk-touch .kkb-finebtn, body.kk-touch .kkb-hic { display: none !important; }
body.kk-touch .kkb-cardbar { gap: 10px; }
body.kk-touch .kkb-grp + .kkb-grp { padding-left: 10px; }
body.kk-touch .kkb-panel .kkb-status { font-size: 13px; margin: 6px 0; }
.kkb-street p { margin: 0 0 8px; font: 500 14px/1.35 var(--kk-font-body); color: var(--kk-text); }
.kkb-street .kkb-packline { color: #ffc233; font-weight: 700; }
.kkb-go { width: 100%; height: 44px; border: 0; border-radius: 10px; cursor: pointer; font: 900 20px var(--kk-font-logo); letter-spacing: 0.08em; color: #14100c; background: linear-gradient(100deg, #ffc233, #ff6a2a); }

/* the Ordnungsamt's stamp when it takes a build down */
.kkb-stamp {
  position: fixed; left: 50%; top: 24%; z-index: 60; pointer-events: none; transform: translateX(-50%) rotate(-5deg); text-align: center; max-width: min(520px, 88vw);
  padding: 10px 22px 12px; border: 4px solid var(--kk-stamp, #c8102e); border-radius: 10px; background: var(--kk-paper, #f1ebdd); color: var(--kk-stamp, #c8102e);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); animation: kkbStamp 3.4s ease forwards; font-family: var(--kk-font-logo); font-weight: 900;
}
.kkb-stamp b { display: block; font-size: 28px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; }
.kkb-stamp i { display: block; font: 600 14px var(--kk-font-body); font-style: normal; color: var(--kk-paper-text, #1c1917); margin-top: 4px; }
@keyframes kkbStamp { 0% { opacity: 0; transform: translateX(-50%) rotate(-5deg) scale(1.8); } 8% { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) rotate(-5deg) translateY(-14px); } }

/* ---- phone (landscape): settings card on the left, cards in the strip between it and the buttons; big round steppers, no shape sliders, no keyboard letters */
body.kk-touch .kkb-panel {
  left: calc(8px + env(safe-area-inset-left, 0px)); right: auto; top: calc(8px + env(safe-area-inset-top, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: none;
  width: 296px; max-height: none; padding: 8px 9px; border-radius: 14px; touch-action: pan-y;
}
body.kk-touch .kkb-panel.active { transform: none; }
body.kk-touch .kkb-stars, body.kk-touch .kkb-fix, body.kk-touch .kkb-sub, body.kk-touch .kkb-range, body.kk-touch .kkb-shape, body.kk-touch .kkb-card .no { display: none !important; }
body.kk-touch .kkb-title { font-size: 22px; }
body.kk-touch .kkb-head { padding-right: 140px; position: relative; min-height: 64px; align-items: center; }
body.kk-touch .kkb-acts { position: absolute; top: 6px; right: 8px; margin: 0; gap: 6px; width: 140px; }
body.kk-touch .kkb-btn { height: 64px; border-radius: 16px; }
body.kk-touch .kkb-status {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 26; max-width: min(380px, 44vw); min-height: 0;
  margin: 0; font-size: 12px; text-align: center; background: rgba(11, 14, 20, 0.82); pointer-events: none;
}
body.kk-touch .kkb-status:empty { display: none; }
body.kk-touch .kkb-sec { margin: 0 0 6px; }
body.kk-touch .kkb-sizes, body.kk-touch .kkb-step, body.kk-touch .kkb-sl { grid-template-columns: 62px 1fr; gap: 4px 6px; min-height: 64px; }
body.kk-touch .kkb-lb { font-size: 11px; letter-spacing: 0.06em; }
body.kk-touch .kkb-size { height: 64px; border-radius: 14px; }
body.kk-touch .kkb-rb { width: 64px; height: 64px; border-radius: 50%; }
body.kk-touch .kkb-rb svg { width: 26px; height: 26px; }
body.kk-touch .kkb-val { font-size: 22px; min-width: 52px; }
body.kk-touch .kkb-pos { grid-template-columns: 1fr; }
body.kk-touch .kkb-pos .kkb-lb { display: none; }
body.kk-touch .kkb-pad { gap: 6px; }
body.kk-touch .kkb-pad .kkb-rb { width: 100%; height: 64px; border-radius: 16px; }
body.kk-touch .kkb-cardbar {
  left: calc(318px + env(safe-area-inset-left, 0px)); right: 252px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: translateY(28px); max-width: none; width: auto;
  gap: 6px; padding: 6px; border-radius: 14px; overflow-x: auto; touch-action: pan-x; -webkit-overflow-scrolling: touch;
}
body.kk-touch .kkb-cardbar.active { transform: none; }
body.kk-touch .kkb-card { width: 68px; height: 80px; gap: 3px; border-radius: 14px; font-size: 11px; }
body.kk-touch .kkb-card .ic svg { width: 32px; height: 32px; }
body.kk-touch .kkb-card .ic { height: 32px; }
body.kk-touch .kkb-card .nm { max-width: 64px; }
body.kk-touch .kkb-street p { font-size: 12px; margin-bottom: 5px; }
body.kk-touch .kkb-go { height: 64px; }
body.kk-touch .kkb-stamp { top: 14%; }
body.kk-touch[data-mode="build"] #kk-card, body.kk-touch[data-mode="build"] .kk-toast-container, body.kk-touch[data-mode="build"] #kk-touch-ghost { display: none; }
body.kk-touch .kkb-panel { background: rgba(14, 18, 26, 0.95); }
body.kk-touch[data-mode="build"] .kk-hint-line { display: none; }          /* the status pill at the top says what to do */
body.kk-touch[data-mode="build"] .kk-bottom-center { display: none; }
@media (max-width: 1100px) and (pointer: fine) {
  .kkb-cardbar { left: calc((100vw - 340px) / 2); }
}

/* Play button on the loading card: the click unlocks audio and the mouse (R55, R68) */
.kk-play-btn {
  display: block; margin: 0 auto 6px; padding: 14px 64px 12px; border: 0; border-radius: 6px; cursor: pointer;
  font-family: 'Big Shoulders Display', Impact, sans-serif; font-weight: 900; font-size: 34px; letter-spacing: 0.12em;
  color: #14100c; background: linear-gradient(100deg, #ffc233, #ff6a2a); box-shadow: 0 8px 30px rgba(255, 106, 42, 0.35);
  transform: skewX(-8deg); animation: kkPlayIn 0.5s cubic-bezier(.2,1.5,.4,1);
}
.kk-play-btn:hover, .kk-play-btn:focus-visible { filter: brightness(1.08); outline: 3px solid #fff; outline-offset: 3px; }
@keyframes kkPlayIn { from { opacity: 0; transform: skewX(-8deg) scale(0.7); } to { opacity: 1; transform: skewX(-8deg) scale(1); } }
#kk-loading:has(.kk-play-btn) .kk-load-track { display: none; }

/* ---------------------------------------------------------------- crew picker (start screen) + switch (C) */
.kk-load-card.kk-has-crew { width: min(760px, 94vw); }
.kk-crew-pick { margin: 0 0 18px; }
.kk-crew-title { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: #a9b0bb; margin-bottom: 10px; }
.kk-crew-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.kk-crew-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 8px; border-radius: 8px; cursor: pointer; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #f3f0ea; transition: transform 0.12s ease, border-color 0.12s ease;
}
.kk-crew-card img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; display: block; background: #d9dbdf; pointer-events: none; }
.kk-crew-card b { font-family: 'Big Shoulders Display', Impact, sans-serif; font-weight: 900; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; margin-top: 4px; }
.kk-crew-card i { font-family: 'Barlow', system-ui, sans-serif; font-style: normal; font-size: 12px; color: #a9b0bb; }
.kk-crew-card:hover, .kk-crew-card:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.4); outline: none; }
.kk-crew-card.on { border-color: #ff6a2a; box-shadow: 0 0 0 2px rgba(255, 106, 42, 0.35), 0 8px 24px rgba(255, 106, 42, 0.25); }
@media (max-width: 640px) { .kk-crew-cards { grid-template-columns: repeat(3, 1fr); } }
.kk-crew-fade { position: fixed; inset: 0; z-index: 90; background: #0b0e14; opacity: 0; pointer-events: none; transition: opacity 0.14s ease; }
.kk-crew-fade.on { opacity: 0.85; }
.kk-crew-ring {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 91; display: none; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 20px; background: rgba(11, 14, 20, 0.72); color: #f3f0ea; font: 600 14px 'Barlow', system-ui, sans-serif; pointer-events: none;
}
.kk-crew-ring.on { display: flex; }
.kk-crew-ring i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #ff6a2a; animation: kkSpin 0.8s linear infinite; }
@keyframes kkSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- backpack line (street-made ramps) */
.kk-pack {
  position: fixed; right: calc(16px + var(--sar, 0px)); bottom: calc(64px + var(--sab, 0px)); z-index: 20; max-width: min(360px, 70vw); padding: 6px 12px; border-radius: 14px;
  background: rgba(11, 14, 20, 0.66); color: #f3f0ea; font: 600 13px 'Barlow', system-ui, sans-serif; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.kk-pack.on { opacity: 1; transform: none; }

/* Minimap available everywhere: free roam, runs, races, Rush, and build mode (Javier 2026-10-11) */
body[data-mode="build"] .kk-minimap-card,
body.kk-touch[data-mode="build"] .kk-minimap-card {
  display: block !important;
}
.kk-crew-card { border-radius: 12px; position: relative; opacity: 0.82; }
.kk-crew-card.on { opacity: 1; }
.kk-crew-card.on::after {
  content: ''; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: #ff6a2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314100c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.kk-load-step { font-size: 16px; color: #d6dae1; }
.kk-play-btn:focus-visible { outline: 3px solid #fff; }

/* short screens (phone landscape): the whole start screen fits, PLAY is always in view */
@media (max-height: 520px) {
  .kk-load-card { width: min(760px, calc(100vw - 32px)); }
  .kk-load-logo { font-size: 38px; }
  .kk-load-tag { font-size: 13px; margin: 2px 0 8px; }
  .kk-crew-pick { margin: 0 0 8px; }
  .kk-crew-title { font-size: 12px; margin-bottom: 6px; }
  .kk-crew-cards { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .kk-crew-card { padding: 0 0 5px; }
  .kk-crew-card img { aspect-ratio: 5 / 4; }
  .kk-crew-card b { font-size: 16px; margin-top: 2px; }
  .kk-crew-card i { display: none; }
  .kk-crew-card.on::after { width: 18px; height: 18px; right: 4px; top: 4px; background-size: 11px; }
  .kk-play-btn { padding: 8px 56px 6px; font-size: 26px; margin-bottom: 2px; }
  .kk-load-step { margin-top: 6px; font-size: 14px; min-height: 18px; }
  .kk-load-credit { margin-top: 6px; font-size: 10.5px; display: block; }
}

/* ---------------------------------------------------------------- phone controls (src/game/touch.js) */
#kk-touch-ui {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; visibility: hidden;
}
#kk-touch-ui.on { visibility: visible; }
#kk-touch-cluster {
  position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 64px 64px 80px; grid-template-rows: 64px 80px; gap: 12px;
  grid-template-areas: "a1 a2 a3" "x sub main"; justify-items: center; align-items: end;
}
.kk-touch-btn {
  pointer-events: auto; position: relative; box-sizing: border-box; width: 64px; height: 64px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(14, 18, 26, 0.72); border: 2px solid rgba(255, 255, 255, 0.4); color: #fff;
  font: 700 12px/1 'Barlow', system-ui, sans-serif; letter-spacing: 0.03em;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.18s ease, background-color 0.12s ease;
}
.kk-touch-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.kk-touch-btn .lb { pointer-events: none; }
.kk-touch-btn.big { width: 80px; height: 80px; border-color: #fff; color: #14100c; background: linear-gradient(135deg, #ffc233, #ff6a2a); font-size: 13px; }
.kk-touch-btn.big svg { width: 30px; height: 30px; stroke-width: 2.4; }
.kk-touch-btn.on { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.32); }
.kk-touch-btn.pressed { transform: scale(0.93); background-color: rgba(255, 255, 255, 0.3); }
.kk-touch-btn.big.pressed { background: linear-gradient(135deg, #ffd56b, #ff8a50); }
.kk-touch-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.8); }

#kk-touch-ghost {
  position: absolute; left: calc(12% + env(safe-area-inset-left, 0px)); bottom: 30%; width: 92px; height: 92px; margin-left: -46px;
  border: 2px dashed rgba(255, 255, 255, 0.35); border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, 0.75);
  font: 600 12px 'Barlow', system-ui, sans-serif; transition: opacity 0.4s ease; pointer-events: none;
}
#kk-touch-ghost i { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
#kk-touch-ghost span { position: absolute; bottom: -20px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
#kk-touch-ghost.gone { opacity: 0; }
#kk-touch-stick-base { position: absolute; width: 100px; height: 100px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; transform: translate(-50%, -50%); display: none; }
#kk-touch-stick-knob { position: absolute; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.55); border-radius: 50%; transform: translate(-50%, -50%); display: none; }
#kk-touch-stick-knob.sprint { background: #ff6a2a; }
#kk-touch-fps { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.5); color: #0f0; font: 11px monospace; padding: 3px 6px; border-radius: 4px; }
#kk-touch-portrait-hint { display: none; }
@media (orientation: portrait) {
  #kk-touch-portrait-hint {
    display: block; position: absolute; top: 40%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 80vw; text-align: center;
    background: rgba(14, 18, 26, 0.92); color: #fff; padding: 12px 20px; border-radius: 12px; font: 700 18px 'Barlow', system-ui, sans-serif;
  }
}

body.kk-touch .kk-pack { right: auto; left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
body.kk-touch #kk-debug { display: none; }

/* grind balance needle: dark rounded bar, one orange needle (A/D or the touch stick leans it back to the middle) */
.kk-grind {
  display: none; position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
  width: clamp(120px, 38vw, 190px); height: 14px; border-radius: 7px; z-index: 30; pointer-events: none;
  background: var(--kk-panel, rgba(14, 12, 10, 0.82)); border: 1px solid var(--kk-line, rgba(255, 255, 255, 0.16));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.kk-grind-mid { position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.35); border-radius: 1px; }
.kk-grind-needle { position: absolute; left: 50%; top: -5px; width: 6px; height: 22px; margin-left: -3px; border-radius: 3px; background: var(--kk-accent-secondary, #FF5722); box-shadow: 0 0 10px rgba(255, 87, 34, 0.55); }

/* FLOW meter */
.kk-flow-meter {
  position: absolute;
  bottom: -6px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.kk-run-score-wrap.kk-live .kk-flow-meter {
  opacity: 1;
}
.kk-flow-fill {
  height: 100%;
  width: 0%;
  background: var(--kk-accent, #FF6A2A);
  transition: width 0.1s linear;
}

/* ---------------------------------------------------------------- backpack dashboard (inventory.js; same look as the build dashboard) */
.kki-panel {
  position: absolute; right: calc(16px + var(--sar, 0px)); bottom: calc(96px + var(--sab, 0px)); width: 360px; max-height: calc(100vh - 140px - var(--sab, 0px)); overflow-y: auto;
  padding: 12px 14px; border-radius: 16px; clip-path: none; pointer-events: auto; opacity: 0; visibility: hidden; transform: translate(24px, 0); z-index: 26;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; font-family: var(--kk-font-hud); color: var(--kk-text); scrollbar-width: thin;
}
.kki-panel.active { opacity: 1; visibility: visible; transform: none; }
.kki-head { display: flex; align-items: baseline; gap: 10px; }
.kki-title { font-family: var(--kk-font-logo); font-weight: 900; font-size: 28px; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; }
.kki-load { flex: 1; font: 600 12px var(--kk-font-hud); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kk-text-dim); }
.kki-x { width: 32px; height: 32px; align-self: center; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(22, 28, 40, 0.75); color: #e8ebf1; }
.kki-x:hover { background: rgba(40, 50, 70, 0.9); color: #fff; }
.kki-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); margin: 8px 0 10px; overflow: hidden; }
.kki-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffc233, #ff6a2a); transition: width 0.2s ease; }
.kki-need { font-size: 14px; line-height: 1.45; margin: 0 0 8px; opacity: 0.9; }
.kki-need p { margin: 0; }
.kki-need p.ok { color: #a3ffe0; }
.kki-grid, .kki-stash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kki-card {
  position: relative; min-width: 0; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 2px;
  border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(22, 28, 40, 0.72); color: #cfd5de; cursor: pointer;
  font: 700 12px/1.05 var(--kk-font-body); text-align: center; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.kki-card .ic { display: grid; place-items: center; height: 36px; }
.kki-card .ic svg { width: 36px; height: 36px; }
.kki-card .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; overflow: hidden; white-space: normal; line-height: 1.05; font-size: 11.5px; }
.kki-card .ct { position: absolute; top: 4px; right: 7px; font: 900 14px var(--kk-font-logo); font-style: normal; color: #ffc233; }
.kki-card:hover { background: rgba(40, 50, 70, 0.9); color: #fff; transform: translateY(-2px); }
.kki-card.on { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.16); color: #fff; box-shadow: 0 0 0 1px rgba(255, 106, 42, 0.35), 0 8px 22px rgba(255, 106, 42, 0.2); }
.kki-card.on .ic { color: #ffc233; }
.kki-card:focus-visible, .kki-x:focus-visible, .kki-go:focus-visible, .kki-sec:focus-visible, .kki-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kki-card.kki-small { height: 66px; gap: 2px; } .kki-card.kki-small .ic svg { width: 24px; height: 24px; } .kki-card.kki-small .ic { height: 24px; } .kki-card.kki-small .nm { font-size: 10px; -webkit-line-clamp: 1; }
.kki-empty { grid-column: 1 / -1; margin: 6px 0; font: 500 13px/1.35 var(--kk-font-body); color: var(--kk-text-dim); }
.kki-status { font: 600 13px/1.3 var(--kk-font-body); min-height: 18px; margin: 10px 0 6px; padding: 0 2px; color: var(--kk-text-dim); }
.kki-status:empty { min-height: 0; margin: 0; }
.kki-status[data-level="ok"] { color: #3ddc84; } .kki-status[data-level="warn"] { color: #ffc233; } .kki-status[data-level="bad"] { color: #ff4057; }
.kki-detail { margin: 8px 0 10px; }
.kki-detail p { margin: 2px 0 8px; font: 500 13px/1.35 var(--kk-font-body); color: var(--kk-text); }
.kki-name { display: block; font: 900 20px var(--kk-font-logo); letter-spacing: 0.04em; text-transform: uppercase; }
.kki-go { width: 100%; height: 44px; margin: 0 0 6px; border: 0; border-radius: 10px; cursor: pointer; font: 900 20px var(--kk-font-logo); letter-spacing: 0.08em; color: #14100c; background: linear-gradient(100deg, #ffc233, #ff6a2a); text-transform: uppercase; }
.kki-go:hover { filter: brightness(1.08); }
.kki-sec { width: 100%; height: 36px; border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: rgba(22, 28, 40, 0.75); color: #e8ebf1; cursor: pointer; font: 700 13px var(--kk-font-hud); letter-spacing: 0.06em; text-transform: uppercase; }
.kki-sec:hover { background: rgba(40, 50, 70, 0.9); color: #fff; }
.kki-stashhead { font: 700 12px var(--kk-font-hud); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-text-dim); margin: 6px 0 6px; }
.kki-chip {
  position: absolute; right: calc(16px + var(--sar, 0px)); bottom: calc(76px + var(--sab, 0px)); z-index: 21; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(14, 18, 26, 0.7); color: #e8ebf1; cursor: pointer; pointer-events: auto; font: 700 13px var(--kk-font-body); letter-spacing: 0.02em; clip-path: none;
}
.kki-chip:hover { background: rgba(40, 50, 70, 0.9); color: #fff; }
.kki-chip.on { border-color: #ff6a2a; }
.kki-chip .ct { font: 900 14px var(--kk-font-logo); font-style: normal; color: #ffc233; min-width: 0; } .kki-chip .ct:empty { display: none; }
.kki-chip .no { font: 700 11px var(--kk-font-hud); font-style: normal; color: var(--kk-text-subtle); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; padding: 0 5px; }
body[data-mode="build"] .kki-chip, body[data-mode="build"] .kki-panel { display: none; }
body.kk-touch .kki-chip { display: none; }
/* BUILD 13 Oct: on desktop the backpack line sat half over the Rucksack chip (64 px vs 76–112 px): it goes just above the chip */
body:not(.kk-touch) .kk-pack { bottom: calc(118px + var(--sab, 0px)); }
body.kk-inv-open .kk-pack { display: none; }      /* the open backpack panel shows the same load */
.kki-body { display: block; }
/* phone (landscape): two panes on the left, 64 px targets, no key letters */
body.kk-touch .kki-panel {
  left: calc(8px + env(safe-area-inset-left, 0px)); right: auto; top: calc(8px + env(safe-area-inset-top, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: 548px; max-height: none;
  padding: 8px 10px; border-radius: 14px; transform: none; touch-action: pan-y; background: rgba(14, 18, 26, 0.95);
}
body.kk-touch .kki-title { font-size: 22px; }
body.kk-touch .kki-x { width: 64px; height: 64px; border-radius: 16px; }
body.kk-touch .kki-head { margin-bottom: -6px; }
body.kk-touch .kki-bar { margin: 6px 0 8px; }
body.kk-touch .kki-body { display: grid; grid-template-columns: 252px 1fr; gap: 10px; align-items: start; }
body.kk-touch .kki-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.kk-touch .kki-card { height: 78px; border-radius: 14px; min-width: 64px; }
body.kk-touch .kki-card.kki-small { height: 64px; }
body.kk-touch.kk-inv-open #kk-touch-ghost, body.kk-touch.kk-inv-open .kk-hint-line, body.kk-touch.kk-inv-open #kk-card { display: none; }
body.kk-touch .kki-status { margin: 0 0 4px; font-size: 12px; }
body.kk-touch .kki-detail { margin: 0 0 6px; }
body.kk-touch .kki-detail p { font-size: 12px; margin-bottom: 6px; }
body.kk-touch .kki-name { font-size: 18px; }
body.kk-touch .kki-go { height: 64px; border-radius: 16px; font-size: 22px; }
body.kk-touch .kki-sec { height: 64px; border-radius: 16px; font-size: 14px; margin-bottom: 4px; }
body.kk-touch .kki-stash { grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.kk-touch.kk-inv-open .kk-pack, body.kk-touch.kk-inv-open .kk-toast-container { display: none; }

/* ---------------------------------------------------------------- guide (src/game/onboarding.js): control strip, gear tray, first-run coach */
#kk-guide { position: fixed; inset: 0; z-index: 22; pointer-events: none; visibility: hidden; font-family: var(--kk-font-body, 'Barlow', sans-serif); }
#kk-guide.on { visibility: visible; }
.kkg-strip { position: absolute; left: calc(16px + var(--sal, 0px)); bottom: calc(16px + var(--sab, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; transition: bottom 0.18s ease; }
body[data-mode="build"] .kkg-strip { bottom: calc(140px + var(--sab, 0px)); }
body.kk-touch .kkg-strip { display: none; }
.kkg-key { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 5px; border-radius: 10px; background: var(--kk-surface, rgba(14, 18, 26, 0.72)); border: 1px solid rgba(255, 255, 255, 0.1); color: #f3f0ea; transition: border-color 0.15s ease, background 0.15s ease; }
.kkg-key em { font: 600 14px/1 var(--kk-font-body); font-style: normal; letter-spacing: 0.01em; margin-left: 3px; }
.kkg-key.hot { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.22); }
#kk-guide kbd, .kkg-line kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.32);
  border-bottom-width: 2px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 700 13px/1 var(--kk-font-hud, 'Barlow Condensed', sans-serif); letter-spacing: 0.03em; white-space: nowrap;
}
.kkg-line kbd { margin: 0 2px; vertical-align: 1px; }

/* the glow on the real button or key the coach is talking about */
.kkg-spot { animation: kkgPulse 1.15s ease-in-out infinite; }
@keyframes kkgPulse { 0%, 100% { box-shadow: 0 0 0 2px #ffc233, 0 0 0 rgba(255, 194, 51, 0); } 50% { box-shadow: 0 0 0 4px #ffc233, 0 0 24px rgba(255, 194, 51, 0.75); } }
#kk-touch-ghost.kkg-spot { border-radius: 50%; }

/* coach card: one line, step count, skip */
.kkg-coach {
  position: absolute; left: 50%; bottom: calc(84px + var(--sab, 0px)); transform: translate(-50%, 14px); width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px 14px 11px;
  border-radius: 14px; background: rgba(14, 18, 26, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); border-left: 4px solid #ff6a2a; color: #f3f0ea; opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, border-color 0.2s ease;
}
body.kkg-coaching .kkg-coach { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
body[data-mode="build"].kkg-coaching .kkg-coach { bottom: calc(126px + var(--sab, 0px)); }
.kkg-coach.nice { border-left-color: #3ddc84; }
.kkg-top { display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
.kkg-step { font: 700 12px var(--kk-font-hud); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kk-text-dim, #a9b0bb); }
.kkg-skip { height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #cfd5de; font: 700 13px var(--kk-font-body); cursor: pointer; }
.kkg-skip:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.kkg-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kkg-line { font: 600 19px/1.3 var(--kk-font-body); margin: 4px 0 8px; }
.kkg-dots { display: flex; gap: 6px; }
.kkg-dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.kkg-dots i.done { background: #3ddc84; } .kkg-dots i.on { background: #ffc233; }
body.kkg-coaching .kk-hint-line { display: none; }
body.kk-touch .kkg-coach { top: calc(8px + var(--sat, 0px)); bottom: auto; transform: translate(-50%, -14px); width: min(400px, calc(100vw - 460px)); padding: 7px 12px 8px; }
body.kk-touch.kkg-coaching .kkg-coach, body.kk-touch[data-mode="build"].kkg-coaching .kkg-coach { top: calc(8px + var(--sat, 0px)); bottom: auto; transform: translate(-50%, 0); }
body.kk-touch .kkg-line { font-size: 16px; margin: 2px 0 6px; }
body.kk-touch .kkg-skip { height: 44px; min-width: 64px; margin: -8px -6px -8px 0; }
body.kk-touch .kkg-top { min-height: 28px; }
body.kk-touch.kkg-coaching .kkb-flow { display: none; }
body.kk-touch.kkg-coaching .kkb-status { top: calc(96px + env(safe-area-inset-top, 0px)); }
body.kk-touch.kk-inv-open .kkg-coach { display: none; }
/* build mode on a phone: the dashboard owns the left 300 px, so the coach, the flow and the status share the free strip up to the minimap */
body.kk-touch[data-mode="build"] .kkg-coach { left: calc(304px + (100vw - 304px - 190px) / 2); width: min(330px, calc(100vw - 304px - 200px)); }
body.kk-touch[data-mode="build"] .kkb-flow, body.kk-touch[data-mode="build"] .kkb-status { left: calc(304px + (100vw - 304px - 190px) / 2); width: min(310px, calc(100vw - 304px - 210px)); max-width: none; box-sizing: border-box; }

/* gear tray: under the rider's name. Which gear you ride, what comes next, one tap cycles */
.kkg-gear { display: flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; padding: 4px 12px 4px 5px; border-radius: 999px; cursor: pointer; color: #f3f0ea; font-family: var(--kk-font-body); }
.kkg-gear:hover { background: rgba(40, 50, 70, 0.9); }
.kkg-gear:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kkg-gear .g { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #8e97a5; border: 1.5px solid transparent; }
.kkg-gear .g svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.kkg-gear .g.on { color: #fff; border-color: #ff6a2a; background: rgba(255, 106, 42, 0.22); }
.kkg-gear.many { gap: 3px; }
.kkg-gear.many .g { width: 29px; height: 29px; }
.kkg-gear.many .g svg { width: 19px; height: 19px; }
.kkg-gear .gn { display: flex; flex-direction: column; gap: 1px; margin: 0 2px 0 2px; text-align: left; pointer-events: none; }
.kkg-gear .gn b { font: 800 15px/1 var(--kk-font-body); letter-spacing: 0.01em; }
.kkg-gear .gn i { font: 600 11px/1 var(--kk-font-body); font-style: normal; color: var(--kk-text-dim, #a9b0bb); }
.kkg-gear.one .gn i { display: none; }
.kkg-gear.warn { border-color: #ffc233; }
.kkg-gnote { display: none; align-self: flex-start; max-width: 250px; padding: 6px 10px; border-radius: 10px; font: 600 13px/1.3 var(--kk-font-body); color: #ffc233; background: rgba(14, 18, 26, 0.88); border: 1px solid rgba(255, 194, 51, 0.5); pointer-events: none; }
.kkg-gnote.on { display: block; }
body[data-mode="build"] .kkg-gear, body[data-mode="build"] .kkg-gnote { display: none; }
body.kk-touch.kk-inv-open .kkg-gear, body.kk-touch.kk-inv-open .kkg-gnote { display: none; }
.kk-touch-btn.nudge { border-color: #ffc233; animation: kkgPulse 1.15s ease-in-out infinite; }

/* build dashboard: what the piece does, Place -> Fix -> Ride, what the colours mean */
.kkb-what { font: 600 14px/1.25 var(--kk-font-body); color: var(--kk-text, #f3f0ea); margin: 4px 0 8px; }
.kkb-sub { display: none; }
.kkb-flow { margin: 0 0 8px; }
.kkb-steps { display: flex; gap: 6px; }
.kkb-steps span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--kk-text-dim, #a9b0bb); font: 700 12px var(--kk-font-hud); letter-spacing: 0.08em; text-transform: uppercase; }
.kkb-steps b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); font: 800 11px var(--kk-font-body); letter-spacing: 0; }
.kkb-steps u { text-decoration: none; }
.kkb-steps span.on { background: rgba(255, 106, 42, 0.25); color: #fff; box-shadow: inset 0 0 0 1.5px #ff6a2a; }
.kkb-steps span.on b { background: #ff6a2a; color: #14100c; }
.kkb-steps span.done b { background: #3ddc84; color: #14100c; }
.kkb-fline { font: 600 13.5px/1.3 var(--kk-font-body); color: #ffc233; margin: 6px 2px 4px; }
.kkb-legend { display: flex; gap: 12px; margin: 0 2px; font: 600 12px var(--kk-font-body); color: var(--kk-text-dim, #a9b0bb); cursor: help; }
.kkb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.kkb-legend i { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; }
.kkb-legend .warn i { background: #ffc233; } .kkb-legend .bad i { background: #ff4057; }
.kkb-legend u { text-decoration: none; }
body.kk-touch .kkb-what { display: none; }
body.kk-touch .kkb-flow {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 26; width: min(330px, 40vw); margin: 0; padding: 6px 8px; border-radius: 12px;
  background: rgba(11, 14, 20, 0.86); pointer-events: none;
}
body.kk-touch .kkb-steps span { height: 24px; font-size: 11px; }
body.kk-touch .kkb-fline { font-size: 12px; margin: 4px 2px 0; }
body.kk-touch .kkb-legend { display: none; margin-top: 3px; }
body.kk-touch .kkb-panel:has(.kkb-status[data-level="warn"]) .kkb-legend, body.kk-touch .kkb-panel:has(.kkb-status[data-level="bad"]) .kkb-legend { display: flex; }
body.kk-touch .kkb-status { top: calc(80px + env(safe-area-inset-top, 0px)); }

/* backpack: obvious on desktop (chip with icon, count and key), clear when empty */
.kki-chip:not(.has) .ct { color: var(--kk-text-subtle, #6d7787); }
.kki-chip.has { border-color: rgba(255, 194, 51, 0.7); }
.kki-chip .ct:empty { display: none; }
.kki-emptybox { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 8px 10px; color: var(--kk-text-dim, #a9b0bb); }
.kki-emptybox b { font: 900 18px var(--kk-font-logo); letter-spacing: 0.05em; text-transform: uppercase; color: var(--kk-text, #f3f0ea); }
.kki-emptybox span { font: 500 13px/1.35 var(--kk-font-body); }
body.kk-touch .kki-emptybox { padding: 6px 4px; gap: 3px; }
body.kk-touch .kki-emptybox svg { width: 32px; height: 32px; }
body.kk-touch .kki-emptybox span { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .kkg-spot, .kk-touch-btn.nudge { animation: none; box-shadow: 0 0 0 3px #ffc233; } .kkg-coach { transition: none; } }

/* easy delete (owner 2026-10-06): the big bin while a piece is selected, and "Taken down. Undo" for 5 s */
.kkb-trash {
  position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); top: 42%; z-index: 34; pointer-events: auto; width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid #ff4057; background: rgba(40, 12, 18, 0.88); color: #ff7a8a; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0;
  font: 800 11px/1 var(--kk-font-hud, sans-serif); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.kkb-trash svg { width: 30px; height: 30px; }
/* BUILD 13 Oct: on desktop the bin sat on the build panel's top corner (both at the right edge): it floats just left of the panel */
body:not(.kk-touch) .kkb-trash { right: calc(340px + env(safe-area-inset-right, 0px)); }
.kkb-trash:hover, .kkb-trash:active { background: #ff4057; color: #fff; }
.kkb-trash[hidden], .kkb-undo[hidden] { display: none; }
.kkb-undo {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 14px; font: 600 15px/1 var(--kk-font-body, sans-serif); color: var(--kk-text, #fff);
}
.kkb-undo-b { height: 40px; min-width: 76px; border: 0; border-radius: 10px; cursor: pointer; font: 900 15px var(--kk-font-logo, sans-serif); letter-spacing: 0.06em; color: #14100c; background: linear-gradient(100deg, #ffc233, #ff6a2a); }
body.kk-touch .kkb-trash { top: auto; bottom: calc(170px + env(safe-area-inset-bottom, 0px)); width: 84px; height: 84px; }
/* the map stays on in build mode (owner Q1, 'everywhere'): on a phone the big bin sits just under the top-right column
   (sound + pause 44 px, the 92 px map) instead of on top of the map (merge 2026-10-11, touch-test 'big bin overlaps') */
body.kk-touch[data-mode="build"] .kkb-trash { top: calc(158px + env(safe-area-inset-top, 0px)); bottom: auto; }
body.kk-touch .kkb-undo { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* Optional two-minute runs & races: the centre stays clear; phone goals fold into one line. */
/* Javier 2026-10-11: "the fonts and the UX of that challenge… too low quality, doesn't match the rest of the dashboards and the minimalist design"
   Restyle goal card, intro/how-to, countdown, timer, chips, and result cards to the SAME design system as builddash/inventory/coach.
   Positioning stays clear of .kk-minimap-card and rider marker across all viewports. */
.kka-hud {
  position: fixed;
  top: calc(216px + env(safe-area-inset-top, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  width: 256px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--kk-panel, rgba(14, 18, 26, 0.84));
  border: 1.5px solid var(--kk-line, rgba(255, 255, 255, 0.14));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  color: var(--kk-text, #f3f0ea);
  font-family: var(--kk-font-hud, 'Barlow Condensed', sans-serif);
  pointer-events: auto;
  z-index: 25;
}
.kka-hud[hidden], .kka-modal[hidden], .kka-countdown[hidden] { display: none !important; }

/* Goal card header & timer pill */
.kka-hud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kka-hud-title {
  font-family: var(--kk-font-logo, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kk-text, #f3f0ea);
  line-height: 1;
}
.kka-timer-pill {
  font-family: var(--kk-font-logo, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #ffc233;
  background: rgba(255, 194, 51, 0.14);
  border: 1px solid rgba(255, 194, 51, 0.35);
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.kka-timer-pill.overtime {
  color: #ff3344;
  background: rgba(255, 51, 68, 0.22);
  border-color: rgba(255, 51, 68, 0.65);
  animation: kka-overtime-pulse 0.7s infinite alternate;
}
@keyframes kka-overtime-pulse {
  from { transform: scale(1); box-shadow: 0 0 6px rgba(255, 51, 68, 0.4); }
  to { transform: scale(1.05); box-shadow: 0 0 16px rgba(255, 51, 68, 0.85); }
}

/* Status / Chips bar */
.kka-hud-chips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}
.kka-chip {
  font-family: var(--kk-font-hud, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--kk-text-dim, #a9b0bb);
}
.kka-chip-score {
  color: #ffd15c;
  background: rgba(255, 209, 92, 0.1);
  border-color: rgba(255, 209, 92, 0.25);
}
.kka-chip-goals {
  color: #a3ffe0;
  background: rgba(100, 239, 205, 0.1);
  border-color: rgba(100, 239, 205, 0.25);
}

/* Goal items list */
.kka-hud details { width: 100%; }
.kka-hud summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--kk-text, #f3f0ea);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kka-hud summary::-webkit-details-marker { display: none; }
.kka-hud-goals {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kka-goal-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--kk-font-body, 'Barlow', sans-serif);
  font-size: 13px;
  line-height: 1.3;
  color: var(--kk-text-dim, #a9b0bb);
}
.kka-goal-row.done {
  color: #f3f0ea;
}
.kka-goal-icon {
  flex: 0 0 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.08);
  color: var(--kk-text-subtle, #6d7787);
  margin-top: 1px;
}
.kka-goal-row.done .kka-goal-icon {
  background: rgba(61, 220, 132, 0.2);
  color: #3ddc84;
}
.kka-goal-desc {
  flex: 1;
}

/* Letters badge row */
.kka-letters-row {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.kka-let-badge {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 4px;
  font-family: var(--kk-font-logo, sans-serif);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--kk-text-subtle, #6d7787);
}
.kka-let-badge.got {
  background: rgba(255, 177, 58, 0.25);
  border: 1px solid #ffb13a;
  color: #ffc233;
  box-shadow: 0 0 6px rgba(255, 177, 58, 0.4);
}

/* Big Start Countdown Overlay (5-4-3-2-1-GO) */
.kka-countdown {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 120;
}
.kka-count-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: kka-pop 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.kka-count-num {
  font-family: var(--kk-font-logo, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: clamp(88px, 20vw, 150px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #ffc233 45%, #ff6a2a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 32px rgba(255, 106, 42, 0.45));
}
.kka-count-num.go {
  font-size: clamp(80px, 18vw, 136px);
  background: linear-gradient(180deg, #ffffff 0%, #a3ffe0 45%, #00e5ff 100%);
  filter: drop-shadow(0 10px 36px rgba(0, 229, 255, 0.5));
}
.kka-count-info {
  margin-top: 14px;
  font-family: var(--kk-font-hud, 'Barlow Condensed', sans-serif);
  font-weight: 700;
  font-size: clamp(14px, 3.5vw, 20px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kk-text, #f3f0ea);
  background: rgba(14, 18, 26, 0.85);
  padding: 6px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes kka-pop {
  0% { transform: scale(0.65); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}

/* Modal dialogs (Activities Menu & Results) */
.kka-modal {
  position: fixed;
  z-index: 250;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  max-height: 86dvh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 18px;
  background: var(--kk-panel-solid, #171c24);
  border: 1.5px solid var(--kk-line, rgba(255, 255, 255, 0.14));
  color: var(--kk-text, #f3f0ea);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7);
  font-family: var(--kk-font-body, 'Barlow', sans-serif);
  pointer-events: auto;
}
.kka-modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.kka-modal-title {
  font-family: var(--kk-font-logo, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kk-text, #f3f0ea);
  margin: 0;
}
.kka-modal-subtitle {
  font-family: var(--kk-font-hud, 'Barlow Condensed', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kk-text-dim, #a9b0bb);
  margin: -4px 0 14px;
}

/* Navigation tabs in menu */
.kka-nav-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 12px;
}
.kka-tab {
  padding: 8px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--kk-text-dim, #a9b0bb);
  cursor: pointer;
  font-family: var(--kk-font-hud, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
.kka-tab.active {
  background: rgba(255, 106, 42, 0.25);
  border: 1px solid #ff6a2a;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 106, 42, 0.25);
}

/* Challenge list button cards */
.kka-challenge-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-top: 8px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--kk-text, #f3f0ea);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.kka-challenge-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.kka-challenge-btn .name {
  font-family: var(--kk-font-hud, sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
}
.kka-challenge-btn .sub {
  font-family: var(--kk-font-body, sans-serif);
  font-size: 12px;
  color: var(--kk-text-dim, #a9b0bb);
  display: block;
}

/* Result modal stats grid */
.kka-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.kka-stat-box {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.kka-stat-label {
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kk-text-dim, #a9b0bb);
  display: block;
}
.kka-stat-val {
  font-family: var(--kk-font-logo, sans-serif);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #ffc233;
  display: block;
  margin-top: 2px;
}

/* Saved Medals (Skill Gap #6) */
.kka-medal-hero {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}
.kka-medal-hero.gold {
  background: linear-gradient(135deg, rgba(255, 209, 92, 0.22), rgba(255, 106, 42, 0.12));
  border: 1.5px solid #ffd15c;
  box-shadow: 0 4px 24px rgba(255, 209, 92, 0.22);
}
.kka-medal-hero.silver {
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.22), rgba(148, 163, 184, 0.12));
  border: 1.5px solid #cbd5e1;
  box-shadow: 0 4px 20px rgba(203, 213, 225, 0.18);
}
.kka-medal-hero.bronze {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(180, 83, 9, 0.12));
  border: 1.5px solid #d97706;
  box-shadow: 0 4px 20px rgba(217, 119, 6, 0.18);
}
.kka-medal-hero.none {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
}
.kka-medal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  flex-shrink: 0;
}
.kka-medal-hero.gold .kka-medal-icon {
  background: rgba(255, 209, 92, 0.25);
  color: #ffd15c;
  border: 1px solid #ffd15c;
}
.kka-medal-hero.silver .kka-medal-icon {
  background: rgba(241, 245, 249, 0.25);
  color: #f8fafc;
  border: 1px solid #cbd5e1;
}
.kka-medal-hero.bronze .kka-medal-icon {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border: 1px solid #d97706;
}
.kka-medal-hero.none .kka-medal-icon {
  background: rgba(255, 255, 255, 0.05);
  color: var(--kk-text-subtle);
  border: 1px dashed rgba(255, 255, 255, 0.15);
}
.kka-medal-info {
  flex: 1;
  min-width: 0;
}
.kka-medal-title {
  font-family: var(--kk-font-logo, sans-serif);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  display: block;
}
.kka-medal-hero.gold .kka-medal-title { color: #ffd15c; }
.kka-medal-hero.silver .kka-medal-title { color: #f8fafc; }
.kka-medal-hero.bronze .kka-medal-title { color: #fbbf24; }
.kka-medal-hero.none .kka-medal-title { color: var(--kk-text-dim); }
.kka-medal-sub {
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kk-text-dim, #a9b0bb);
  margin-top: 2px;
  display: block;
}
.kka-medal-unlock-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #3ddc84;
  color: #0b2416;
  margin-bottom: 3px;
  animation: kka-pop 0.3s ease;
}

/* Score Tiers Milestone Strip */
.kka-tiers-meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.kka-tier-step {
  padding: 8px 6px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kka-tier-step.cleared.gold {
  background: rgba(255, 209, 92, 0.14);
  border-color: #ffd15c;
  color: #ffd15c;
}
.kka-tier-step.cleared.silver {
  background: rgba(226, 232, 240, 0.14);
  border-color: #cbd5e1;
  color: #f1f5f9;
}
.kka-tier-step.cleared.bronze {
  background: rgba(245, 158, 11, 0.14);
  border-color: #d97706;
  color: #fbbf24;
}
.kka-tier-step.next {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}
.kka-tier-name {
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kka-tier-pts {
  font-family: var(--kk-font-logo, sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--kk-text, #f3f0ea);
}
.kka-tier-step.cleared .kka-tier-pts {
  color: inherit;
}

/* Challenge list medal chip */
.kka-medal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.kka-medal-chip.gold {
  background: rgba(255, 209, 92, 0.18);
  border: 1px solid #ffd15c;
  color: #ffd15c;
  box-shadow: 0 0 8px rgba(255, 209, 92, 0.2);
}
.kka-medal-chip.silver {
  background: rgba(226, 232, 240, 0.18);
  border: 1px solid #cbd5e1;
  color: #f1f5f9;
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.15);
}
.kka-medal-chip.bronze {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid #d97706;
  color: #fbbf24;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}
.kka-medal-chip.none {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: var(--kk-text-subtle, #6d7787);
}

/* Medals summary bar in challenge menu */
.kka-medals-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kk-text, #f3f0ea);
}
.kka-medals-counts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kka-medal-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.kka-medal-count-pill.gold { color: #ffd15c; }
.kka-medal-count-pill.silver { color: #f1f5f9; }
.kka-medal-count-pill.bronze { color: #fbbf24; }

/* How to play intro card (Q10) */
.kka-howto-box {
  margin: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kka-howto-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 10px 12px;
}
.kka-howto-num {
  font-family: var(--kk-font-logo, sans-serif);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: #ffc233;
  background: rgba(255, 194, 51, 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  min-width: 24px;
  text-align: center;
}
.kka-howto-text {
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kk-text, #f3f0ea);
}

/* Action buttons */
.kka-btn-primary {
  width: 100%;
  padding: 12px 18px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1.5px solid #ff6a2a;
  background: linear-gradient(180deg, #ff7a3a 0%, #e85516 100%);
  color: #fff;
  font-family: var(--kk-font-hud, sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 106, 42, 0.35);
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.kka-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.kka-btn-secondary {
  width: 100%;
  padding: 10px 18px;
  margin-top: 8px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--kk-text-dim, #a9b0bb);
  font-family: var(--kk-font-hud, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.kka-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Leaderboard table */
.kka-board {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
  font-family: var(--kk-font-hud, sans-serif);
}
.kka-board th, .kka-board td {
  padding: 6px 8px;
  text-align: left;
}
.kka-board th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kk-text-subtle, #6d7787);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kka-board th:last-child, .kka-board td:last-child {
  text-align: right;
}
.kka-board tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.04);
}
.kka-board .kka-gold {
  color: #ffd15c;
  font-weight: bold;
  background: rgba(255, 209, 92, 0.12) !important;
}

/* Desktop build mode: minimap is hidden, build panel takes right side; goal card moves left of the build panel */
body[data-mode="build"] .kka-hud {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(342px + env(safe-area-inset-right, 0px));
  max-width: min(248px, calc(100vw - 360px));
}

/* Phone portrait: cleanly below the minimap card */
@media (max-width: 900px) and (orientation: portrait) {
  .kka-hud {
    top: calc(164px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    width: min(210px, calc(100vw - 24px));
    padding: 8px 10px;
    font-size: 12px;
  }
  .kka-modal { padding: 16px; }
}

/* Phone landscape & short screens: to the left of the minimap card, above touch buttons */
@media (max-height: 520px), (max-width: 900px) and (orientation: landscape) {
  .kka-hud {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(176px + env(safe-area-inset-right, 0px));
    width: min(205px, calc(100vw - 360px));
    padding: 8px 10px;
    font-size: 12px;
  }
  .kka-modal { padding: 16px; }
}

/* Touch build mode: goal card sits safely at top right */
body.kk-touch[data-mode="build"] .kka-hud {
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  left: auto;
}

/* ====================================================================================================================
   MAP YOU CAN READ (ROADMAP.md, Javier 2026-10-11)
   Minimalist dashboard design system: glass panel, crisp borders, Google Maps-style navigation,
   never covers goal card or phone action buttons.
   ==================================================================================================================== */

.kk-minimap-card {
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.22s ease,
              box-shadow 0.22s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.kk-minimap-card:not(.kk-map-expanded) {
  cursor: pointer;
}
.kk-minimap-card:not(.kk-map-expanded):hover {
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
  border-color: rgba(0, 229, 255, 0.9);
}
.kk-minimap-card .kk-map-header,
.kk-minimap-card .kk-map-footer {
  display: none;
}

/* Expanded quarter-screen state */
.kk-minimap-card.kk-map-expanded {
  position: fixed !important;
  top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  width: min(420px, 42vw) !important;
  height: min(360px, 38vh) !important;
  border-radius: 16px !important;
  border: 1.5px solid var(--kk-line, rgba(255, 255, 255, 0.16)) !important;
  background: var(--kk-panel, rgba(14, 18, 26, 0.92)) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.kk-minimap-card.kk-map-expanded .kk-minimap-compass {
  display: none !important;
}

.kk-minimap-card.kk-map-expanded .kk-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(10, 14, 22, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  z-index: 2;
}

.kk-map-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kk-map-title {
  font-family: var(--kk-font-logo, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kk-text, #f3f0ea);
  line-height: 1;
}
.kk-map-live-badge {
  font-family: var(--kk-font-hud, 'Barlow Condensed', sans-serif);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.14);
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 1px 6px;
  border-radius: 5px;
}
.kk-map-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kk-map-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--kk-text, #f3f0ea);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all 0.14s ease;
}
.kk-map-btn svg {
  width: 15px;
  height: 15px;
}
.kk-map-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}
.kk-map-btn:active {
  transform: scale(0.95);
}
.kk-map-btn-recentre.panned {
  background: rgba(255, 194, 51, 0.22);
  border-color: #ffc233;
  color: #ffc233;
  box-shadow: 0 0 8px rgba(255, 194, 51, 0.4);
}
.kk-map-btn-fs .ic-compress { display: none; }
.kk-map-btn-fs.is-fullscreen .ic-expand { display: none; }
.kk-map-btn-fs.is-fullscreen .ic-compress { display: block; }

.kk-minimap-card.kk-map-expanded .kk-minimap-canvas {
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
}
.kk-minimap-card.kk-map-expanded .kk-minimap-canvas:active {
  cursor: grabbing;
}

.kk-minimap-card.kk-map-expanded .kk-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: rgba(10, 14, 22, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--kk-font-hud, 'Barlow Condensed', sans-serif);
  font-size: 11px;
  color: var(--kk-text-dim, #a9b0bb);
  z-index: 2;
}
.kk-map-zoom-level {
  font-family: var(--kk-font-logo, sans-serif);
  font-weight: 800;
  font-size: 13px;
  color: #ffc233;
}
.kk-map-legend {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kk-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.leg-dot.dot-run { background: #ffc233; box-shadow: 0 0 4px #ffc233; }
.leg-dot.dot-race { background: #00e5ff; box-shadow: 0 0 4px #00e5ff; }
.leg-dot.dot-rider { background: #00e5ff; border: 1.5px solid #000; }
.kk-map-hint {
  font-size: 10px;
  color: var(--kk-text-subtle, #6d7787);
}

.kk-minimap-card.kk-map-expanded .kk-minimap-coords {
  position: absolute;
  bottom: 26px;
  right: 10px;
  font-family: var(--kk-font-hud, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* Optional full-screen mode toggle */
.kk-minimap-card[data-map-size="full"] {
  inset: calc(10px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px)) !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 18px !important;
  z-index: 150 !important;
}

/* Goal card non-overlap on desktop when map is open */
body.kk-map-open .kka-hud {
  top: calc(390px + env(safe-area-inset-top, 0px)) !important;
}

/* Phone portrait: quarter map capped to 32vh, never covers action buttons (bottom 60%) or goal card */
@media (max-width: 900px) and (orientation: portrait) {
  .kk-minimap-card.kk-map-expanded {
    width: calc(100vw - 24px) !important;
    max-height: 32vh !important;
    height: 230px !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: 12px !important;
    margin: 0 auto;
    border-radius: 14px !important;
  }
  .kk-map-hint { display: none; }
  body.kk-map-open .kka-hud {
    top: calc(34vh + 12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
  }
}

/* Phone landscape & short screens: map right quarter (44vw, max 48vh); goal card to the left */
@media (max-height: 520px), (max-width: 900px) and (orientation: landscape) {
  .kk-minimap-card.kk-map-expanded {
    width: min(340px, 44vw) !important;
    max-height: 48vh !important;
    height: 210px !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    border-radius: 14px !important;
  }
  .kk-map-hint { display: none; }
  body.kk-map-open .kka-hud {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: calc(46vw + 12px + env(safe-area-inset-right, 0px)) !important;
    width: min(205px, calc(50vw - 24px)) !important;
  }
}

/* Quick actions (mute, pause) stay accessible and clear of expanded map */
body.kk-map-open:not(:has(.kk-minimap-card[data-map-size="full"])) .kk-quick-actions {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(448px + env(safe-area-inset-right, 0px));
  z-index: 101;
}
@media (max-width: 900px) and (orientation: portrait) {
  body.kk-map-open:not(:has(.kk-minimap-card[data-map-size="full"])) .kk-quick-actions {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    z-index: 105;
  }
}
@media (max-height: 520px), (max-width: 900px) and (orientation: landscape) {
  body.kk-map-open:not(:has(.kk-minimap-card[data-map-size="full"])) .kk-quick-actions {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(358px + env(safe-area-inset-right, 0px));
    z-index: 101;
  }
}




/* 3-Spot Rush: readable while riding, compact beside the phone controls. */
.rush-timer { font-size: 44px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffd15c; }
.rush-urgent .rush-timer { color: #ff906e; }
.rush-hud small { display: block; margin-top: 8px; color: #a3ffe0; }
.rush-hud p { margin: 7px 0; }
.rush-hud button { min-height: 36px; width: 100%; }
.rush-skip { display: flex; align-items: center; gap: 10px; padding: 14px 0; }
.rush-skip input { width: 22px; height: 22px; }
body[data-mode="build"] .rush-hud { right: auto; left: 18px; top: 110px; width: 210px; }
@media (max-width: 900px) {
  .rush-hud { top: 64px; right: 106px; width: 195px; font-size: 11px; }
  .rush-timer { font-size: 30px; }
  body[data-mode="build"] .rush-hud { left: 12px; top: 65px; width: 170px; }
  .rush-hud p { margin: 3px 0; }
}

.kki-rush { padding: 16px; color: #a3ffe0; }
.kki-rush + .kki-body { display: none; }
body[data-rush="active"] .kkg-coach { visibility: hidden; pointer-events: none; }

.rush-name { display: block; font-size: 13px; }
.rush-name input { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 12px; padding: 12px; border: 1px solid #a3ffe066; border-radius: 8px; background: #0b141b; color: white; font: inherit; }
body.kk-touch .rush-hud { left: 18px; right: auto; top: 80px; width: 200px; }
body.kk-touch .rush-hud button { display: none; } /* the phone already has Build */
body.kk-touch[data-mode="build"] .rush-hud { left: 324px; right: 252px; top: 12px; width: auto; padding: 6px 8px; pointer-events: none; }
body.kk-touch[data-mode="build"] .rush-hud > strong,
body.kk-touch[data-mode="build"] .rush-hud > div:not(.rush-timer),
body.kk-touch[data-mode="build"] .rush-hud > p,
body.kk-touch[data-mode="build"] .rush-hud small ~ small { display: none; }
body.kk-touch[data-mode="build"] .rush-hud .rush-timer { font-size: 28px; }

/* Schnitzeljagd — same dark cards, orange action and type hierarchy as build/backpack. */
.kkh-shade { position:fixed; inset:0; z-index:270; background:#080b11a8; display:grid; place-items:center; pointer-events:auto; padding:16px; box-sizing:border-box; }
.kkh-dashboard { width:min(860px,100%); max-height:calc(100dvh - 32px); overflow:auto; display:grid; grid-template-columns:220px minmax(0,1fr); border:1px solid var(--kk-line,#ffffff29); border-radius:20px; background:var(--kk-surface,#151921); color:var(--kk-text,#f3f0ea); box-shadow:0 20px 70px #0008; font:500 15px/1.5 var(--kk-font-body,'Barlow',sans-serif); }
.kkh-side { padding:26px 22px; background:#ffffff05; border-right:1px solid var(--kk-line,#ffffff20); }
.kkh-main { padding:26px; min-width:0; }
.kkh-dashboard h2,.kkh-dashboard h3 { font:900 32px/1.05 var(--kk-font-logo,'Big Shoulders Display',sans-serif); letter-spacing:.02em; margin:8px 0 18px; }
.kkh-dashboard h2 { font-size:30px; overflow-wrap:anywhere; }
.kkh-dashboard h4 { font-size:19px; line-height:1.3; margin:12px 0; }
.kkh-eyebrow { display:block; font:700 12px var(--kk-font-hud,'Barlow Condensed',sans-serif); letter-spacing:.12em; text-transform:uppercase; color:#ffc233; }
.kkh-story { font-size:17px; line-height:1.5; }
.kkh-note,.kkh-dashboard small { color:var(--kk-text-dim,#a9b0bb); font-size:13px; display:block; }
.kkh-flow { font-size:13px; font-weight:700; }
.kkh-progress { display:flex; gap:8px; margin:22px 0; }
.kkh-progress span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; border:1px solid #ffffff35; }
.kkh-progress .on { border-color:#ff8a36; color:#ffc233; }.kkh-progress .done { background:#3ddc8422; color:#70e7a4; }
.kkh-btn,.kkh-go { box-sizing:border-box; min-height:48px; padding:12px 16px; border:1px solid #ffffff29; border-radius:12px; background:#ffffff09; color:inherit; font:600 15px/1.3 var(--kk-font-body,'Barlow',sans-serif); cursor:pointer; width:100%; margin:5px 0; text-align:left; }
.kkh-go { color:#14100c; background:linear-gradient(100deg,#ffc233,#ff6a2a); border:0; text-align:center; font:900 23px var(--kk-font-logo,'Big Shoulders Display',sans-serif); letter-spacing:.03em; }
.kkh-btn:hover,.kkh-btn.on { background:#ff8a361a; border-color:#ff8a36; }
.kkh-dashboard button:focus-visible,.kkh-dashboard summary:focus-visible,.kkh-dashboard a:focus-visible { outline:3px solid #ffc233; outline-offset:3px; }
.kkh-btn:disabled { opacity:.45; cursor:default; }
.kkh-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0; }
.kkh-choices button { margin:0; padding:12px; }
.kkh-choices b { display:block; font:900 23px var(--kk-font-logo,'Big Shoulders Display',sans-serif); margin-bottom:6px; }
.kkh-choices span { font-size:12px; font-weight:500; display:block; line-height:1.4; }
.kkh-answers { display:grid; gap:4px; }
.kkh-feedback { color:#ffc233; min-height:1em; margin:0; }
.kkh-dashboard details { margin:14px 0; padding:12px; background:#ffffff05; border-radius:10px; }
.kkh-dashboard summary { cursor:pointer; min-height:30px; font-weight:600; }
.kkh-sources a { display:block; padding:5px 0; color:#ffc233; }
.kkh-hud { position:fixed; z-index:25; right:18px; top:118px; width:250px; max-width:calc(100vw - 36px); padding:14px 16px; border:1px solid #ffffff29; border-left:3px solid #ff8a36; border-radius:14px; background:#151921e8; color:#f3f0ea; font:500 14px/1.35 var(--kk-font-body,'Barlow',sans-serif); }
.kkh-hud strong { display:block; font-size:18px; margin:6px 0; }.kkh-hud small { color:#ffc233; }
.kkh-countdown { position:fixed; z-index:80; left:50%; top:42%; transform:translate(-50%,-50%) rotate(-5deg); pointer-events:none; color:#ffc233; font:900 clamp(100px,20vh,200px)/1 var(--kk-font-logo,'Big Shoulders Display',sans-serif); text-shadow:0 5px 0 #12151b,0 12px 40px #0009; }
.kkh-shade[hidden],.kkh-hud[hidden],.kkh-countdown[hidden] { display:none; }
body.kk-hunting .kkg-coach,body.kk-hunt-modal .kkg-coach,body.kk-hunt-modal #kk-touch-ui { visibility:hidden; }
body.kk-touch .kkh-hud { top:12px; left:50%; right:auto; transform:translateX(-50%); width:min(310px,calc(100vw - 430px)); padding:8px 12px; }
body.kk-touch .kkh-hud strong { font-size:14px; margin:4px 0; }
@media(max-height:520px) { .kkh-dashboard { grid-template-columns:180px minmax(0,1fr); }.kkh-main,.kkh-side { padding:16px; }.kkh-dashboard h2,.kkh-dashboard h3 { font-size:28px; }.kkh-story { font-size:15px; }.kkh-progress { margin:12px 0; } }
@media(max-width:600px) { .kkh-shade { padding:10px; }.kkh-dashboard { max-height:calc(100dvh - 20px); grid-template-columns:1fr; }.kkh-side { border-right:0; border-bottom:1px solid #ffffff29; }.kkh-side h2 { font-size:26px; margin:6px 0; }.kkh-side .kkh-note,.kkh-side .kkh-flow { display:none; }.kkh-side .kkh-progress { display:inline-flex; margin:6px 0; }.kkh-side .kkh-btn { width:auto; float:right; margin:0; }.kkh-main { padding:18px; }.kkh-choices { gap:5px; }.kkh-choices button { padding:10px; } body.kk-touch .kkh-hud { width:calc(100vw - 60px); top:110px; } }
body.kk-touch .kkh-btn,body.kk-touch .kkh-go { min-height:64px; }
.kkh-answers { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.kk-hunt-modal #kk-pause-overlay,body.kk-hunt-modal #kk-hud { visibility:hidden; }
@media(max-height:520px) {
  .kkh-side h2 { font-size:24px; overflow-wrap:normal; }
  .kkh-dashboard p { margin:8px 0; font-size:13px; line-height:1.4; }
  .kkh-dashboard h3 { margin:4px 0 12px; }
  .kkh-choices { margin:12px 0; }
}
@media(max-width:600px) { .kkh-answers { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- the BMX garage (garage.js, owner Q17): same design system as the build dashboard */
.kkx-open { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; margin-top: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; cursor: pointer; color: #f3f0ea; font: 700 13px var(--kk-font-body); border: 1.5px solid rgba(255, 255, 255, 0.12); }
.kkx-open:hover { background: rgba(40, 50, 70, 0.9); }
.kkx-open svg { color: #ffc233; }
.kkx-open[hidden] { display: none; }
.kkx-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 16px 18px 16px; border-radius: 18px; pointer-events: auto; opacity: 0; visibility: hidden; z-index: 40;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; font-family: var(--kk-font-hud); color: var(--kk-text); scrollbar-width: thin;
}
.kkx-panel.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.kkx-head { display: flex; align-items: center; justify-content: space-between; }
.kkx-title { font-family: var(--kk-font-logo); font-weight: 900; font-size: 30px; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; }
.kkx-x { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(22, 28, 40, 0.75); color: #e8ebf1; cursor: pointer; }
.kkx-sub { font: 600 16px/1.35 var(--kk-font-body); color: var(--kk-text-dim); margin: 4px 0 12px; }
.kkx-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.kkx-type { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: 14px; cursor: pointer; text-align: center;
  border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(22, 28, 40, 0.72); color: #cfd5de; }
.kkx-type .ic svg { width: 46px; height: 46px; }
.kkx-type b { font: 800 16px var(--kk-font-body); color: #fff; }
.kkx-type i { font: 600 13px/1.3 var(--kk-font-body); font-style: normal; color: var(--kk-text-dim); }
.kkx-type:hover { background: rgba(40, 50, 70, 0.9); }
.kkx-type.on { border-color: #ff6a2a; background: rgba(255, 106, 42, 0.16); color: #ffc233; box-shadow: 0 0 0 1px rgba(255, 106, 42, 0.35); }
.kkx-lb { font: 700 12px var(--kk-font-hud); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kk-text-dim); margin: 0 0 6px; }
.kkx-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; margin-bottom: 14px; }
.kkx-sw { aspect-ratio: 1; min-width: 32px; border-radius: 50%; cursor: pointer; background: var(--c); border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.25); }
.kkx-sw:hover { transform: scale(1.08); }
.kkx-sw.on { border-color: #fff; box-shadow: 0 0 0 3px #ff6a2a, inset 0 -3px 6px rgba(0, 0, 0, 0.25); }
.kkx-go { width: 100%; height: 46px; border: 0; border-radius: 12px; cursor: pointer; font: 900 21px var(--kk-font-logo); letter-spacing: 0.08em; color: #14100c; background: linear-gradient(100deg, #ffc233, #ff6a2a); }
.kkx-type:focus-visible, .kkx-sw:focus-visible, .kkx-go:focus-visible, .kkx-x:focus-visible, .kkx-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* phone (landscape): the Paint pill sits beside the gear tray (no new row in the top-left column); the card takes the
   left side like the backpack, the thumb cluster stays free on the right, 48 px targets, no key letters */
body.kk-touch .kkx-open { position: absolute; left: calc(100% + 8px); top: 56px; min-height: 44px; min-width: 48px; margin: 0; padding: 4px 12px 4px 8px; }
body.kk-touch .kkx-panel {
  left: calc(8px + env(safe-area-inset-left, 0px)); top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; transform: none; width: min(548px, calc(100vw - 300px)); min-width: 420px;
  max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 8px 12px 10px; border-radius: 14px; background: rgba(14, 18, 26, 0.95); touch-action: pan-y;
}
body.kk-touch .kkx-panel.active { transform: none; }
body.kk-touch .kkx-title { font-size: 22px; }
body.kk-touch .kkx-x { width: 48px; height: 48px; border-radius: 14px; }
body.kk-touch .kkx-sub { display: none; }
body.kk-touch .kkx-types { margin: 6px 0 8px; gap: 6px; }
body.kk-touch .kkx-type { flex-direction: row; justify-content: center; gap: 6px; min-height: 52px; padding: 4px 6px; }
body.kk-touch .kkx-type .ic svg { width: 30px; height: 30px; }
body.kk-touch .kkx-type b { font-size: 14px; }
body.kk-touch .kkx-type i { display: none; }
body.kk-touch .kkx-lb { font-size: 11px; margin-bottom: 4px; }
body.kk-touch .kkx-row { grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 8px; }
body.kk-touch .kkx-sw { width: 44px; height: 44px; min-width: 44px; justify-self: center; }
body.kk-touch .kkx-go { height: 52px; border-radius: 14px; }
body.kk-touch.kk-garage-open #kk-touch-ghost, body.kk-touch.kk-garage-open .kk-hint-line, body.kk-touch.kk-garage-open #kk-card,
body.kk-touch.kk-garage-open .kk-pack, body.kk-touch.kk-garage-open .kk-toast-container, body.kk-touch.kk-garage-open .kkg-coach,
body.kk-touch.kk-garage-open .kkg-gear, body.kk-touch.kk-garage-open .kkg-gnote, body.kk-touch.kk-garage-open .kkx-open { display: none; }

/* ====================================================================================================================
   UI POLISH (2026-10-12, UI polish worker) — measured with tools/hud-layout.mjs at 390x844, 844x390, 360x640 and
   1600x900, English + German, iPhone safe areas: every touch target 44 px or more, nothing cut off, no card on another.
   ==================================================================================================================== */
/* settings: a tick row is one label (tap anywhere on the line); sliders, Next song and EN / DE are 44 px on a phone;
   a phone has no keys, so the key table stays on desktop */
.kk-setting-row { gap: 12px; }
label.kk-setting-row { cursor: pointer; }
body.kk-touch .kk-setting-row { min-height: 44px; }
body.kk-touch .kk-setting-row input[type="range"] { height: 44px; margin: 0; }
body.kk-touch #kk-lang-en, body.kk-touch #kk-lang-de { min-width: 52px; min-height: 44px; }
body.kk-touch #kk-music-next { min-height: 44px !important; }
body.kk-touch .kk-remap { display: none; }
/* big map: 44 px buttons on a phone */
body.kk-touch .kk-map-btn { width: 44px; height: 44px; border-radius: 12px; }
body.kk-touch .kk-map-btn svg { width: 20px; height: 20px; }
/* narrow phones (portrait): the backpack and the BMX garage take the whole width, one column, nothing past the edge */
@media (max-width: 600px) {
  body.kk-touch .kki-panel { width: auto; right: calc(8px + env(safe-area-inset-right, 0px)); }
  body.kk-touch .kki-body { grid-template-columns: 1fr; }
  body.kk-touch .kkx-panel { width: auto; min-width: 0; right: calc(8px + env(safe-area-inset-right, 0px)); }
  body.kk-touch .kkx-types { grid-template-columns: repeat(2, 1fr); }
  body.kk-touch .kkx-row { grid-template-columns: repeat(5, 1fr); }
}
/* phone portrait: rider card and gear tray each take a row, Paint and Tricks share the next one (Paint sat under the map) */
@media (max-width: 600px) and (orientation: portrait) {
  body.kk-touch .kk-top-left { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 8px; }
  body.kk-touch .kk-top-left > * { grid-column: 1 / -1; justify-self: start; }
  body.kk-touch .kk-top-left > #kk-card { justify-self: stretch; }
  body.kk-touch .kk-top-left > .kkx-open, body.kk-touch .kk-top-left > .kkt-open { grid-column: auto; position: static; margin: 0; align-self: center; }
}

/* ====================================================================================================================
   ROUND 3 (2026-10-12, Javier's playtest of the live build): the pause card's settings and controls sheets.
   A sheet takes the card's place (the menu list hides), starts at the top and scrolls inside itself with a visible
   scrollbar (Mac overlay bars hide until you scroll). EN / DE sit first in Settings, German first.
   ==================================================================================================================== */
.kk-pause-card { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.kk-pause-card.kk-sub-open .kk-pause-menu-actions { display: none; }
#kk-settings-panel.active, #kk-controls-panel.active {
  max-height: calc(100dvh - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding-right: 12px; scrollbar-width: auto;
  scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.08);
}
#kk-settings-panel.active::-webkit-scrollbar, #kk-controls-panel.active::-webkit-scrollbar, .kk-pause-card::-webkit-scrollbar { width: 10px; }
#kk-settings-panel.active::-webkit-scrollbar-track, #kk-controls-panel.active::-webkit-scrollbar-track, .kk-pause-card::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 5px; }
#kk-settings-panel.active::-webkit-scrollbar-thumb, #kk-controls-panel.active::-webkit-scrollbar-thumb, .kk-pause-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.45); border-radius: 5px; }
.kk-sub-back { width: 100%; min-height: 44px; justify-content: flex-start; }
.kk-lang-top { justify-content: flex-start; gap: 10px; }
.kk-lang-top > div { gap: 8px !important; }
.kk-lang-top button { min-width: 64px; min-height: 44px; font-size: 16px; }
body.kk-touch .kk-lang-top button { min-width: 72px; min-height: 44px; }
body.kk-touch .kk-sub-back { min-height: 44px; }
/* the pause card is glass: hud.css turns non-button glass off for pointers (so the HUD never blocks the game), which made
   every slider, toggle row and text in Settings and Controls unclickable and unscrollable. The card takes pointers again. */
.kk-overlay .kk-pause-card, .kk-overlay .kk-pause-card * { pointer-events: auto; }

/* ==================================================================================================================
   UI POLISH #4 (13 Oct, Javier: "the map overlaps the dashboard controls"): the golden-slice layout (body.kk-slice)
   gives the round minimap the bottom-left corner. The key strip stacks above it, and the backpack line rises above
   the speed dial, so no control sits under the map or the dial. Checked by tools/hud-layout.mjs (minimap rule).
   ================================================================================================================== */
body.kk-slice .kkg-strip,
body.kk-slice[data-mode="build"] .kkg-strip { bottom: calc(196px + var(--sab, 0px)); }
body.kk-slice .kk-pack { bottom: calc(184px + var(--sab, 0px)); }

/* ==================================================================================================================
   START AREA — HUD zones (13 Oct; Javier: "Nothing in the HUD may overlap anything else, on desktop or on phone").
   The corners are reserved zones (rider column top left, minimap + buttons top right, speed / backpack / stick bottom
   left, touch buttons bottom right); every line or card that comes and goes is placed between them by
   src/hud/hudzones.js (moved, narrowed, or held back until there is room). Checked by tools/hud-layout.mjs.
   ================================================================================================================== */
.kk-zone-wait { visibility: hidden !important; }
/* phones: the rider column is three rows — rider, gear, then Tricks and Lackieren side by side — so the top band right
   of it stays free for the hint line, the challenge card and the story lines (Lackieren used to stand in that band) */
body.kk-touch .kk-top-left { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 8px; }
body.kk-touch .kk-top-left > * { grid-column: 1 / -1; justify-self: start; }
body.kk-touch .kk-top-left > #kk-card { justify-self: stretch; grid-row: 1; }
body.kk-touch .kk-top-left > .kkg-gear { grid-row: 2; }
body.kk-touch .kk-top-left > .kkt-open { grid-column: 1; grid-row: 3; }
body.kk-touch .kk-top-left > .kkx-open { grid-column: 2; grid-row: 3; position: static; margin: 0; align-self: center; }
body.kk-touch .kk-top-left > .kkx-open, body.kk-touch .kk-top-left > .kkt-open { margin-top: 0; }
/* build mode: the garage cannot open there, so its button leaves with the gear tray (it sat under the build panel) */
body[data-mode="build"] .kkx-open { display: none; }
/* the stick's "Bewegen" label sits inside its dashed ring (under it, it touched the backpack line) */
#kk-touch-ghost span { bottom: 7px; }
/* phone build: the card strip ends before the Fertig button (it ran under it: the U-Rampe card) */
body.kk-touch .kkb-cardbar { left: calc(334px + env(safe-area-inset-left, 0px)); right: calc(256px + env(safe-area-inset-right, 0px)); }
/* desktop build: the panel's whole box (padding + border) stays under the round minimap (bottom ~188 px), and the card
   strip is centred in the space left of the panel (16 + 340 px), never under it */
body:not(.kk-touch) .kkb-panel { max-height: calc(100vh - 236px - var(--sab, 0px)); }
body:not(.kk-touch) .kkb-cardbar { left: calc((100vw - 368px) / 2); max-width: calc(100vw - 368px - 40px); box-sizing: border-box; }

/* ==================================================================================================================
   UI POLISH #5 (15 Oct). Measured by tools/hud-layout.mjs (6 sizes, EN + DE) and tools/settings-input.mjs.
   1. Every sheet that scrolls shows its scrollbar. Since Chrome 121 a non-auto scrollbar-color switches the
      ::-webkit-scrollbar styling off, so the Settings and Controls sheets fell back to a hidden overlay bar: the rows
      below the fold were there but nothing showed it (Javier, QP2 point 5: "not possible to scroll down to see all the
      keys"). Chrome / Safari get the always-visible styled bar; other browsers keep the standard colours.
   2. Cards and dashboards stay inside the phone's safe area (notch, Dynamic Island, home bar): the challenge menu,
      how-to and Rush cards, the pause card, the Tricks card, the Schnitzeljagd dashboard, the start screen's crew row.
   3. Touch targets: at least 44 px on phones (close, tabs, cancel), sliders at least 24 px tall on desktop.
   4. The speed number fits its pill on phones; the big map leaves a gap above the touch buttons.
   ================================================================================================================== */
#kk-settings-panel.active, #kk-controls-panel.active, .kk-pause-card, .kka-modal, body .kkt-card, .kki-panel, .kkh-dashboard {
  scrollbar-color: auto; scrollbar-width: auto;
}
@supports not selector(::-webkit-scrollbar) {
  #kk-settings-panel.active, #kk-controls-panel.active, .kk-pause-card, .kka-modal, body .kkt-card, .kki-panel, .kkh-dashboard {
    scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.08);
  }
}
.kka-modal::-webkit-scrollbar, body .kkt-card::-webkit-scrollbar, .kki-panel::-webkit-scrollbar, .kkh-dashboard::-webkit-scrollbar { width: 10px; }
.kka-modal::-webkit-scrollbar-track, body .kkt-card::-webkit-scrollbar-track, .kki-panel::-webkit-scrollbar-track, .kkh-dashboard::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 5px; }
.kka-modal::-webkit-scrollbar-thumb, body .kkt-card::-webkit-scrollbar-thumb, .kki-panel::-webkit-scrollbar-thumb, .kkh-dashboard::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.45); border-radius: 5px; }

/* challenge menu, how-to, Rush intro and result cards: centred in the safe area, the whole box (padding + border) fits */
.kka-modal {
  box-sizing: border-box;
  top: calc(50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2);
  left: calc(50% + (env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 2);
  width: min(491px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
/* the pause card centres inside the safe area */
.kk-overlay { box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* start screen: the six crew cards stay clear of the notch on a phone held sideways */
.kk-load-card.kk-has-crew { width: min(760px, 94vw, calc(100vw - 16px - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)))); }
/* Schnitzeljagd dashboard: inside the safe area on phones */
.kkh-shade { padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.kkh-dashboard { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
/* Tricks card on short screens: its box (14 + 12 px padding, 2 px border) ends above the home bar */
@media (max-height: 520px) {
  body .kkt-card { max-height: calc(100dvh - 44px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
/* touch targets on phones */
body.kk-touch .kka-modal button[data-act="close"][aria-label] { min-width: 44px; min-height: 44px; }
body.kk-touch .kka-tab, body.kk-touch .kka-btn-secondary { min-height: 44px; }
/* sliders: a 24 px tall hit area on desktop (WCAG 2.2 target size), the track itself unchanged */
.kk-setting-row input[type="range"], .kkb-range { min-height: 24px; }
/* Rush intro: the "don't show again" row and the button under it keep a gap */
.rush-skip { padding: 8px 0; margin: 6px 0 10px; }
/* the speed number fits its pill on phones (line box as tall as the glyph box) */
body.kk-touch .kk-speedo-val { line-height: 1.2; }
body.kk-touch .kk-speedo-card { padding-top: 0; padding-bottom: 0; }
/* phone held sideways: the quarter map ends 8 px above the touch buttons (was touching them) */
@media (max-height: 520px), (max-width: 900px) and (orientation: landscape) {
  .kk-minimap-card.kk-map-expanded { max-height: 46vh !important; }
}
/* phone, backpack open: on an iPhone held sideways (47 px notch insets) the Gerät and Rucksack buttons sat on the panel,
   over RAMPE KLEBEN (MOBILE #2, 13 Oct). The panel is the phone's backpack screen: like the stick and the Krew button,
   those two step away while it is open; it closes with its own 64 px close button */
body.kk-touch.kk-inv-open .kk-touch-btn[data-btn="gear"], body.kk-touch.kk-inv-open .kk-touch-btn[data-btn="pack"] { display: none !important; }
/* the big map (Javier 12 Oct: "the map appears in the wrong place overlapping the dashboard controls"):
   - full screen means full screen on phones too: the phone 'quarter map' rules (same weight, later in the file) used to
     win and shrank the full map back to a 340 px box pinned over the rider card
   - expanded, the map is a rectangle: the small round minimap's 50 % radius made the big map an oval and cut its corners */
.kk-minimap-card.kk-map-expanded[data-map-size="full"] {
  inset: calc(10px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px)) !important;
  width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important;
}
.kk-minimap-card.kk-map-expanded .kk-minimap-canvas { border-radius: 0 !important; }
/* build cards: a long name wraps inside its 78 px card ("Straßen-rampe") instead of running past it */
.kkb-card .nm { max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
/* the big map's header (title, zoom -/+, recentre, full screen, close) and footer were appended after the canvas, and the
   canvas's height: 100% (its flex minimum) pushed both out of the clipped card: the buttons were never on screen.
   Header first, footer last, the canvas takes the space between them */
.kk-minimap-card.kk-map-expanded .kk-map-header { order: -1; flex: 0 0 auto; }
.kk-minimap-card.kk-map-expanded .kk-map-footer { order: 2; flex: 0 0 auto; }
.kk-minimap-card.kk-map-expanded .kk-minimap-canvas { height: auto !important; min-height: 0; }
/* phone held sideways, quarter map (340 x 180 px): the five 44 px buttons float over the map's top edge (no title band,
   no help footer), so they fit and the map keeps its whole height; the full map keeps its title bar */
@media (max-height: 520px), (max-width: 900px) and (orientation: landscape) {
  .kk-minimap-card.kk-map-expanded:not([data-map-size="full"]) .kk-map-header {
    position: absolute; top: 0; left: 0; right: 0; padding: 6px; justify-content: flex-end;
    background: transparent; border-bottom: 0; pointer-events: none;
  }
  .kk-minimap-card.kk-map-expanded:not([data-map-size="full"]) .kk-map-header > * { pointer-events: auto; }
  .kk-minimap-card.kk-map-expanded:not([data-map-size="full"]) .kk-map-title-wrap,
  .kk-minimap-card.kk-map-expanded:not([data-map-size="full"]) .kk-map-footer { display: none; }
}
/* the full map is a page of its own: the riding controls and the HUD lines that float over it step away until it closes
   (its X, the shrink button or M) — they used to sit on top of the map on phones */
body:has(.kk-minimap-card[data-map-size="full"]) :is(.kk-touch-btn, #kk-touch-ghost, .kkg-strip, .kk-pack, .kki-chip, .kk-speedo-card, .kk-hint-line) { visibility: hidden !important; }
/* phone build (GERMAN TEXT #2 + MOBILE #2 shots: 'Fertig' over the 3rd / 4th card): Fertig keeps the Bauen button's place
   in the top row (the same spot enters and leaves build mode; that row is empty while building), so the bottom row is
   only Bewegen + Kleben and the card strip runs up to them: one card more on an iPhone, two more without a notch. The
   strip still scrolls sideways when more cards wait: its right edge fades out as the sign */
body.kk-touch[data-mode="build"] .kk-touch-btn[data-btn="build"] { grid-area: a2 !important; }
body.kk-touch[data-mode="build"] .kkb-cardbar { right: calc(192px + env(safe-area-inset-right, 0px)); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
body.kk-touch .kkb-card { width: 64px; }
body.kk-touch .kkb-card .nm { max-width: 60px; }
/* one sheet at a time: the challenge menu, how-to, Rush and result cards open over the pause menu (they pause the game);
   the pause card steps away while one of them is open (its edges showed around the smaller safe-area cards on phones) */
body:has(.kka-modal:not([hidden])) .kk-overlay .kk-pause-card { visibility: hidden; }
/* Rush card, first time (no "don't show again" row yet): 'Los · Enter' and 'Frei fahren' sat on each other's edge */
.kka-modal .kk-menu-btn + .kk-menu-btn { margin-top: 10px; }
/* the trick hint ("Tipp Flip kurz vor der Landung …", 4.5 s after a trick; trickhud.js places it above everything) stays
   off the open dashboards: on phones it sat on the backpack's title and the build panel (MOBILE #2: 'tip over dashboards') */
body.kk-inv-open .kkt-hint, body[data-mode="build"] .kkt-hint, body.kk-garage-open .kkt-hint,
body:has(.kka-modal:not([hidden])) .kkt-hint, body:has(.kkh-shade:not([hidden])) .kkt-hint { visibility: hidden; }
/* golden-slice page (?slice=markt: the gate's page and some review shots; players never get it): in build mode its round
   speed dial and gear label sat under the build panel's bottom buttons and its round map under the card strip (BUILD #5
   handoff). They step away while building, like the speed card on the normal page (kept in the DOM for the checks) */
body.kk-slice[data-mode="build"] :is(.ksh-speed, .ksh-gear, .ksh-map) { visibility: hidden; }