/* ═══════════ HAPPYTOWN KART GP (js/kart.js) — 6/10, port giao diện FICO Racer GP: bảng xanh navy, nút START vàng, thẻ chặng, chấm chọn xe, hạng góc trái, bảng xếp hạng, tốc độ góc dưới trái, bản đồ nhỏ góc phải ═══════════ */
#race { --rc-font: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif; --rc-display: 'Baloo 2', 'Nunito', system-ui, sans-serif; --rc-glass: rgba(14, 9, 44, .62); --rc-glass2: rgba(14, 9, 44, .85); --rc-line: rgba(255, 255, 255, .22);
  position: fixed; inset: 0; z-index: 66; pointer-events: none; font-family: var(--rc-font); color: #fff; font-size: 14px; line-height: 1.3; -webkit-user-select: none; user-select: none; }
/* 6/10: lớp đua nằm TRÊN #hud (z 20), #toasts (60) — joystick HappyTown không nhận chạm; khi đang đua chặn luôn mọi chạm lọt xuống thế giới */
body.race-live #race { pointer-events: auto; touch-action: none; }
body.kart-on #hud, body.kart-on #joystick, body.kart-on .act-cluster, body.kart-on #tutorial, body.kart-on #dialog, body.kart-on #floaters, body.kart-on #labels { display: none !important; }

:where(#race button) { pointer-events: auto; cursor: pointer; border: 0; font-family: inherit; color: inherit; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }   /* 6/10: :where bọc cả #race → độ ưu tiên 0, để .rc-cta / .rc-btn thắng */
#race * { box-sizing: border-box; }
.rc-speedfx { position: absolute; inset: -10%; opacity: 0; transition: opacity .25s; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,0) 0deg 2.6deg, rgba(255,255,255,.22) 2.8deg 3.1deg, rgba(255,255,255,0) 3.3deg 7deg);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent 32%, #000 72%); mask-image: radial-gradient(circle at 50% 46%, transparent 32%, #000 72%); animation: rcLines .18s steps(3) infinite; }
@keyframes rcLines { 33% { transform: rotate(1.3deg); } 66% { transform: rotate(-1deg); } }
#race > :not(.rc-ov):not(.rc-top) { transition: opacity .3s; }
body:not(.race-live) #race > .rc-tl, body:not(.race-live) #race > .rc-list, body:not(.race-live) #race > .rc-tr, body:not(.race-live) #race > .rc-item,
body:not(.race-live) #race > .rc-dash, body:not(.race-live) #race > .rc-drift, body:not(.race-live) #race > .rc-touch, body:not(.race-live) #race > .rc-top { opacity: 0; pointer-events: none; }
body:not(.race-live) #race > .rc-top button, body:not(.race-live) #race > .rc-touch button { pointer-events: none; }
.rc-tl { position: absolute; left: 14px; top: calc(12px + var(--safe-t, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rc-pos { font-family: var(--rc-display); font-weight: 900; font-size: 64px; line-height: .95; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd35a 45%, #ff9d1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #7a3c00) drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.rc-pos small { font-size: 22px; opacity: .9; margin-left: 4px; }
.rc-lap, .rc-time { font-family: var(--rc-display); font-weight: 800; font-size: 15px; padding: 3px 12px; border-radius: 999px; background: var(--rc-glass); border: 1px solid var(--rc-line); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.rc-lap b { font-size: 18px; color: #ffd35a; }
.rc-time { font-size: 13px; opacity: .9; font-variant-numeric: tabular-nums; }
.rc-list { position: absolute; left: 14px; top: calc(150px + var(--safe-t, 0px)); display: grid; gap: 4px; }
.rc-li { display: flex; align-items: center; gap: 7px; min-width: 150px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(14, 9, 44, .62); font-weight: 800; font-size: 13px; }
.rc-li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); font-family: var(--rc-display); font-size: 12px; }
.rc-li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; background: #2a2160; }
.rc-li.me { background: linear-gradient(90deg, rgba(255, 201, 60, .85), rgba(255, 150, 20, .6)); color: #2a1600; }
.rc-li.me b { background: #fff; }
.rc-tr { position: absolute; right: 14px; top: calc(12px + var(--safe-t, 0px)); }
.rc-map { width: 180px; height: 180px; border-radius: 22px; background: radial-gradient(circle, rgba(20, 14, 60, .55), rgba(20, 14, 60, .25)); border: 1px solid var(--rc-line); }
.rc-top { position: absolute; right: 204px; top: calc(12px + var(--safe-t, 0px)); }
.rc-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--rc-glass); border: 1px solid var(--rc-line); font-weight: 900; font-size: 14px; color: #fff; }
.rc-item { position: absolute; left: 50%; top: calc(12px + var(--safe-t, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rc-slot { width: 78px; height: 78px; border-radius: 20px; display: grid; place-items: center; font-size: 44px; background: linear-gradient(180deg, rgba(40, 28, 110, .85), rgba(16, 10, 50, .85));
  border: 3px solid rgba(255, 255, 255, .35); box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 18px rgba(94, 231, 255, .15); }
.rc-item.has .rc-slot { border-color: #ffd35a; box-shadow: 0 0 0 3px rgba(255, 211, 90, .25), 0 0 26px rgba(255, 211, 90, .5); animation: rcPulse 1s ease-in-out infinite; }
.rc-item.rolling .rc-slot { border-color: #5ee7ff; }
.rc-slot .spin { display: inline-block; animation: rcRoll .09s linear infinite; }
.rc-item small { font-family: var(--rc-display); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
@keyframes rcPulse { 50% { transform: scale(1.06); } }
@keyframes rcRoll { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.rc-dash { position: absolute; left: 14px; bottom: calc(14px + var(--safe-b, 0px)); display: flex; align-items: flex-end; gap: 10px; }
.rc-speed { display: flex; align-items: baseline; gap: 4px; padding: 6px 14px; border-radius: 18px; background: var(--rc-glass); border: 1px solid var(--rc-line); }
.rc-speed b { font-family: var(--rc-display); font-weight: 900; font-size: 34px; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.rc-speed small { font-weight: 800; font-size: 12px; opacity: .7; }
.rc-coins { padding: 8px 14px; border-radius: 999px; background: var(--rc-glass); border: 1px solid var(--rc-line); font-weight: 800; font-size: 15px; }
.rc-coins b { font-family: var(--rc-display); color: #ffd35a; font-size: 18px; }
.rc-coins small { font-size: 11px; opacity: .7; }
.rc-gates { display: flex; align-items: baseline; gap: 6px; padding: 6px 14px 8px; border-radius: 16px; background: var(--rc-glass); border: 1px solid var(--rc-line); box-shadow: inset 0 0 0 1px rgba(94, 231, 255, .4); }
.rc-gates small { font-size: 10px; font-weight: 900; letter-spacing: .14em; opacity: .7; }
.rc-gates b { font-family: var(--rc-display); font-size: 22px; color: #5ee7ff; font-variant-numeric: tabular-nums; }
.rc-hurtfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(255, 40, 40, .42) 100%); }
.rc-hurtfx.hit { animation: rcHurt .55s ease-out; }
@keyframes rcHurt { from { opacity: 1; } to { opacity: 0; } }
.rc-drift { position: absolute; left: 50%; bottom: calc(120px + var(--safe-b, 0px)); transform: translateX(-50%); width: min(280px, 50vw); height: 10px; border-radius: 99px; background: rgba(10, 6, 36, .55); border: 2px solid rgba(255,255,255,.6); overflow: hidden; opacity: 0; transition: opacity .2s; }
.rc-drift.on { opacity: 1; }
.rc-drift i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #cfe9ff, #ffffff); }
.rc-drift.t1 i { background: linear-gradient(90deg, #7cc8ff, #2f8dff); box-shadow: 0 0 12px #2f8dff; }
.rc-drift.t2 i { background: linear-gradient(90deg, #ffd35a, #ff7a1a); box-shadow: 0 0 12px #ff7a1a; }
.rc-drift.t3 i { background: linear-gradient(90deg, #e3b8ff, #9d4dff); box-shadow: 0 0 14px #9d4dff; }
.rc-banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.6); font-family: var(--rc-display); font-weight: 900; font-size: clamp(34px, 7vw, 82px); letter-spacing: .01em; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1);
  background: linear-gradient(180deg, #fff 0%, #ffe07a 50%, #ffb020 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6b3500) drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.rc-banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rc-banner.wrong { background: linear-gradient(180deg, #fff, #ff8f8f 50%, #ff3b3b); -webkit-background-clip: text; background-clip: text; animation: rcBlink .5s steps(2) infinite; }
@keyframes rcBlink { 50% { opacity: .35; } }
.rc-count { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; }
.rc-count span { display: block; font-family: var(--rc-display); font-weight: 900; font-size: clamp(90px, 18vw, 200px); line-height: 1; color: #fff; text-shadow: 0 6px 0 #d0321d, 0 12px 30px rgba(0,0,0,.5); animation: rcCount .8s cubic-bezier(.2, 1.6, .4, 1); }
.rc-count span.go { color: #6dff9a; text-shadow: 0 6px 0 #0a8a3a, 0 12px 30px rgba(0,0,0,.5); animation: rcGo .9s ease-out forwards; font-size: clamp(70px, 14vw, 150px); }
@keyframes rcCount { from { transform: scale(2.2); opacity: 0; } }
@keyframes rcGo { from { transform: scale(.6); } 60% { transform: scale(1.15); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.rc-gate { position: absolute; left: 50%; top: calc(104px + var(--safe-t, 0px)); transform: translate(-50%, -12px); width: min(620px, calc(100vw - 420px)); min-width: 300px; padding: 10px 14px 8px; border-radius: 18px;
  background: rgba(14, 9, 44, .82); border: 2px solid rgba(94, 231, 255, .7); box-shadow: 0 0 24px rgba(94, 231, 255, .25); opacity: 0; transition: opacity .3s, transform .3s; text-align: center; }
.rc-gate.on { opacity: 1; transform: translate(-50%, 0); }
.rc-gq small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #5ee7ff; }
.rc-gq.rapid small { color: #c084fc; }
.rc-gq b { display: block; margin: 3px 0 7px; font-family: var(--rc-display); font-size: 16px; line-height: 1.3; }
.rc-ga { display: flex; gap: 6px; justify-content: center; }
.rc-ga span { flex: 1; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; font-weight: 800; font-size: 13px; line-height: 1.2; text-align: left; background: rgba(255,255,255,.08); }
.rc-ga i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--rc-display); font-size: 12px; color: #10082a; }
.rc-ga .l0 { box-shadow: inset 0 0 0 2px #ff5a7a; } .rc-ga .l0 i { background: #ff5a7a; }
.rc-ga .l1 { box-shadow: inset 0 0 0 2px #5ee7ff; } .rc-ga .l1 i { background: #5ee7ff; }
.rc-ga .l2 { box-shadow: inset 0 0 0 2px #ffd35a; } .rc-ga .l2 i { background: #ffd35a; }
.rc-ga.n2 span { justify-content: center; font-size: 16px; }
.rc-gh { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; opacity: .75; }
.rc-toast { position: absolute; left: 50%; top: 58%; transform: translate(-50%, 10px); max-width: min(520px, calc(100vw - 24px)); padding: 10px 18px; border-radius: 16px; background: var(--rc-glass2); border: 1px solid var(--rc-line); border-left: 5px solid var(--tc, #ffd35a);
  font-weight: 800; font-size: 16px; line-height: 1.35; text-align: center; opacity: 0; transition: opacity .2s, transform .2s; }
.rc-toast small { font-weight: 600; font-size: 13px; opacity: .9; }
.rc-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* cảm ứng: lái trái/phải bên trái, ĐỒ · PHANH · DRIFT · GA bên phải */
.rc-touch { display: none; }
body.race-touch .rc-touch { display: block; }
body.race-touch .rc-dash { left: 50%; transform: translateX(-50%); bottom: calc(100px + var(--safe-b, 0px)); }
body.race-touch .rc-drift { bottom: calc(150px + var(--safe-b, 0px)); }
.rc-steer { position: absolute; left: 14px; bottom: calc(14px + var(--safe-b, 0px)); display: flex; gap: 12px; }
.rc-acts { position: absolute; right: 14px; bottom: calc(14px + var(--safe-b, 0px)); display: flex; align-items: flex-end; gap: 10px; }
.rc-t { width: 84px; height: 84px; border-radius: 26px; background: rgba(14, 9, 44, .55); border: 2px solid rgba(255, 255, 255, .35); font-family: var(--rc-display); font-weight: 900; font-size: 30px; color: #fff; touch-action: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rc-t.on { background: rgba(94, 231, 255, .45); transform: scale(.95); }
.rc-t small { display: block; font-size: 9px; letter-spacing: .1em; opacity: .8; }
.rc-drf { width: 96px; height: 96px; border-radius: 50%; font-size: 14px; background: linear-gradient(180deg, rgba(255, 150, 40, .75), rgba(200, 80, 10, .75)); }
.rc-use { width: 76px; height: 76px; border-radius: 50%; font-size: 13px; background: linear-gradient(180deg, rgba(255, 211, 90, .8), rgba(220, 150, 20, .8)); color: #2a1600; }
.rc-brake { width: 64px; height: 64px; border-radius: 50%; font-size: 10px; }
.rc-gas { width: 84px; height: 84px; border-radius: 50%; font-size: 13px; background: linear-gradient(180deg, rgba(52, 211, 153, .75), rgba(16, 140, 90, .75)); }
.rc-gas span { display: block; font-size: 22px; line-height: 1; }
/* lớp phủ: menu, tạm dừng, kết quả */
.rc-ov { position: absolute; inset: 0; display: none; place-items: center; padding: 14px; background: radial-gradient(circle at 50% 40%, rgba(8, 4, 30, .25), rgba(8, 4, 30, .6)); pointer-events: auto; overflow: hidden; }
.rc-ov.on { display: grid; }
.rc-card { position: relative; width: min(470px, 100%); max-height: calc(100vh - 28px); overflow-y: auto; padding: 20px 20px 16px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, rgba(40, 26, 104, .95), rgba(16, 10, 50, .96)); border: 2px solid rgba(94, 231, 255, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 50px rgba(94, 231, 255, .25); animation: rcPop .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rcPop { from { transform: scale(.85); opacity: 0; } }
.rc-card.win { border-color: #ffc93c; box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 70px rgba(255, 201, 60, .35); }
.rc-card h2 { margin: 4px 0 8px; font-family: var(--rc-display); font-size: 24px; line-height: 1.15; }
.rc-kick { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .12em; background: rgba(94, 231, 255, .22); }
.rc-big { font-size: 54px; line-height: 1.1; margin: 6px 0 0; }
.rc-dim { color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.45; font-weight: 600; margin: 6px 0; }
.rc-sub { margin: 12px 0 6px; font-size: 11px; font-weight: 900; letter-spacing: .14em; opacity: .75; }
.rc-menu { width: min(760px, 100%); }
.rc-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rc-track { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .14); text-align: center; color: #fff; }
.rc-track.on { background: linear-gradient(180deg, rgba(94, 231, 255, .25), rgba(94, 231, 255, .08)); border-color: #5ee7ff; box-shadow: 0 0 20px rgba(94, 231, 255, .3); }
.rc-ti { font-size: 32px; }
.rc-track b { font-family: var(--rc-display); font-size: 13px; }
.rc-track small { font-size: 11px; font-weight: 700; opacity: .75; line-height: 1.25; }
.rc-track em { font-style: normal; font-size: 12px; font-weight: 800; color: #ffd35a; }
.rc-lv { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .14em; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.14); }
.rc-track.on .rc-lv { background: #5ee7ff; color: #10082a; }
.rc-rule { margin: 0 0 8px; }
.rc-karts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rc-kart { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 14px; border: 2px solid transparent; min-width: 80px; color: #fff; }
.rc-kart i { width: 34px; height: 34px; border-radius: 50%; background: var(--kc); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.2); }
.rc-kart small { font-size: 10px; font-weight: 800; opacity: .85; }
.rc-kart.on { border-color: var(--kc); background: rgba(255, 255, 255, .08); }
.rc-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 12px 0 2px; font-size: 12px; font-weight: 700; opacity: .85; }
.rc-keys b { font-family: var(--rc-display); font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.14); }
.rc-keys .rc-tip { flex-basis: 100%; color: #ffd35a; }
body.race-touch .rc-keys span:not(.rc-tip) { display: none; }
.rc-cta { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 54px; margin-top: 10px; border-radius: 999px; background: linear-gradient(180deg, #ffe07a, #ffb81f); color: #3a2300; font-family: var(--rc-display); font-weight: 800; font-size: 16px; box-shadow: 0 5px 0 #c98500, 0 12px 24px rgba(255, 180, 20, .3); }
.rc-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #c98500; }
.rc-cta.ghost { min-height: 44px; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); font-size: 14px; }
.rc-cta.rc-auto.on { box-shadow: inset 0 0 0 2px #34d399; color: #a7f3d0; }
.rc-cta.rc-auto b { margin: 0 4px; }
.rc-spin { width: 44px; height: 44px; margin: 14px auto 4px; border-radius: 50%; border: 5px solid rgba(255,255,255,.15); border-top-color: #5ee7ff; animation: rcSpin 0.8s linear infinite; }
@keyframes rcSpin { to { transform: rotate(360deg); } }
.rc-unlock { margin: 2px auto 6px; padding: 6px 12px; border-radius: 12px; width: max-content; max-width: 100%; background: rgba(255,255,255,.08); font-size: 14px; font-weight: 800; }
.rc-unlock.ok { background: rgba(52, 211, 153, .18); color: #a7f3d0; }
.rc-results { width: min(560px, 100%); }
.rc-recap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.rc-recap div { --c: #fff; padding: 7px 4px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 2px var(--c); display: flex; flex-direction: column; gap: 1px; }
.rc-recap small { font-size: 9px; font-weight: 900; letter-spacing: .12em; opacity: .7; } .rc-recap b { font-family: var(--rc-display); font-size: 19px; color: var(--c); }
.rc-recap em { font-style: normal; font-size: 10px; font-weight: 700; opacity: .8; }
.rc-table { display: grid; gap: 3px; margin: 8px 0; text-align: left; }
.rc-row { display: grid; grid-template-columns: 28px 30px 1fr auto; align-items: center; gap: 8px; padding: 2px 10px 2px 6px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-weight: 800; font-size: 13px; }
.rc-row b { font-family: var(--rc-display); text-align: center; }
.rc-row i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #2a2160; }
.rc-row em { font-style: normal; font-variant-numeric: tabular-nums; opacity: .8; font-size: 13px; }
.rc-row.me { background: linear-gradient(90deg, rgba(255, 201, 60, .9), rgba(255, 150, 20, .6)); color: #2a1600; }
.rc-conf { position: absolute; top: -30px; font-style: normal; font-size: 18px; animation: rcConf 2.4s ease-in forwards; pointer-events: none; }
@keyframes rcConf { to { transform: translateY(110vh) rotate(540deg); opacity: .2; } }
/* điện thoại ngang / màn thấp */
@media (max-height: 500px), (max-width: 760px) {
  .rc-pos { font-size: 44px; } .rc-pos small { font-size: 16px; }
  .rc-lap { font-size: 12px; } .rc-lap b { font-size: 14px; } .rc-time { font-size: 11px; }
  .rc-list { top: calc(112px + var(--safe-t, 0px)); gap: 3px; } .rc-li { min-width: 110px; font-size: 11px; padding: 2px 8px 2px 3px; } .rc-li b, .rc-li i { width: 18px; height: 18px; font-size: 10px; }
  .rc-map { width: 118px; height: 118px; border-radius: 16px; }
  .rc-top { right: 140px; }
  .rc-slot { width: 60px; height: 60px; font-size: 34px; border-radius: 16px; }
  .rc-gate { top: calc(78px + var(--safe-t, 0px)); width: min(520px, calc(100vw - 300px)); min-width: 260px; padding: 6px 10px; }
  .rc-gq b { font-size: 13px; margin: 2px 0 5px; } .rc-ga span { font-size: 11px; padding: 3px 6px; } .rc-gh { display: none; }
  .rc-speed b { font-size: 24px; } .rc-gates b { font-size: 16px; } .rc-coins { font-size: 13px; padding: 6px 10px; }
  .rc-t { width: 70px; height: 70px; border-radius: 22px; } .rc-l, .rc-r { font-size: 24px; }
  .rc-drf { width: 80px; height: 80px; font-size: 13px; } .rc-use { width: 64px; height: 64px; font-size: 11px; } .rc-brake { width: 52px; height: 52px; font-size: 9px; } .rc-gas { width: 72px; height: 72px; font-size: 11px; }
  body.race-touch .rc-dash { bottom: calc(86px + var(--safe-b, 0px)); } body.race-touch .rc-drift { bottom: calc(132px + var(--safe-b, 0px)); }
  .rc-menu > .rc-dim, .rc-menu .rc-sub, .rc-kart small { display: none; } .rc-menu h2 { margin: 2px 0 6px; } .rc-tracks { margin-top: 6px; } .rc-track { padding: 6px; } .rc-karts { margin-top: 8px; } .rc-kart { min-width: 0; padding: 4px; }
  .rc-track small { display: none; } .rc-ti { font-size: 24px; } .rc-track .rc-lv { display: none; }
  .rc-card { padding: 10px 12px 10px; border-radius: 20px; } .rc-card h2 { font-size: 18px; margin: 2px 0 4px; } .rc-big { font-size: 36px; } .rc-kick { font-size: 9px; padding: 2px 10px; }
  .rc-menu .rc-tracks { gap: 6px; } .rc-track { gap: 1px; } .rc-track b { font-size: 12px; } .rc-kart i { width: 28px; height: 28px; } .rc-menu .rc-rule { display: none; }
  .rc-keys { display: none; } body:not(.race-touch) .rc-keys { display: flex; margin: 4px 0 0; font-size: 11px; } .rc-keys .rc-tip { display: none; }
  .rc-cta { min-height: 42px; font-size: 14px; margin-top: 6px; } .rc-cta.ghost { min-height: 34px; font-size: 12px; } .rc-cta.rc-auto { min-height: 34px; }
  .rc-results .rc-table { max-height: 118px; overflow-y: auto; } .rc-row { padding: 1px 8px 1px 4px; font-size: 12px; } .rc-row i { width: 20px; height: 20px; font-size: 12px; }
  .rc-toast { top: 52%; font-size: 14px; }
  .rc-keys { margin: 6px 0 0; }
  .rc-recap small { font-size: 8px; } .rc-recap b { font-size: 16px; }
}
@media (max-width: 480px) { .rc-list { display: none; } .rc-gate { width: calc(100vw - 150px); min-width: 0; left: 8px; transform: none; } .rc-gate.on { transform: none; } }