/* ============================================================
   YAZARAK YARIŞ (Type Race) — sahne, koşucular, HUD, giriş, lobi
   Görseller /assets/race/*.webp: sahne kökünde "a-<ad>" sınıfı varsa görsel,
   yoksa CSS çizim (alacakaranlık gökyüzü, mor dağlar, orman, toprak pist).
   Ortak oda/sohbet stilleri name-place-animal.css'te (dokunulmadı).
   ============================================================ */
:root {
  --rc-gold: #ffcc33;
  --rc-gold-2: #ffb020;
  --rc-ok: #4ade80;
  --rc-bad: #ff5d73;
  --rc-night: #150c33;
  --rc-dusk: #3b1f73;
  --rc-panel: rgba(21, 12, 51, 0.82);
  --rc-panel-line: rgba(255, 204, 51, 0.28);
  --rc-ink: #fbf6ff;
}

/* ---------- görselli ikon (img + emoji yedeği) ---------- */
.rc-ai { display: inline-grid; place-items: center; position: relative; line-height: 1; }
.rc-ai > * { grid-area: 1 / 1; }
.rc-ai > img { width: 100%; height: 100%; object-fit: contain; visibility: hidden; pointer-events: none; }
.rc-ai.img > img { visibility: visible; }
.rc-ai.img > i { visibility: hidden; }
.rc-ai > i { font-style: normal; }

/* kafa ikonu: karakter renginde daire + emoji; görsel varsa altın çerçeveli kafa */
.rc-head { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cc) 55%, #fff) 0, var(--cc) 62%, color-mix(in srgb, var(--cc) 60%, #000) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3); font-size: 26px; flex: 0 0 auto; }
.rc-head > i { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.rc-head.img { background: none; box-shadow: none; }
.rc-head.sm { width: 32px; height: 32px; font-size: 19px; }
.rc-head.xs { width: 24px; height: 24px; font-size: 14px; }

/* ============================================================
   SAHNE
   ============================================================ */
.rc-scene { position: absolute; inset: 0; overflow: hidden; --th: 60%; --sz: 110px; --c1: 0px; --c2: 0px; --c3: 0px; --c4: 0px; --c5: 0px;
  background: var(--rc-night); isolation: isolate; contain: layout paint; }
.rc-scene > * { position: absolute; left: 0; right: 0; }
.rc-sky { top: 0; bottom: calc(var(--th) - 2px); z-index: 0;
  background: linear-gradient(180deg, #120a35 0%, #2a1665 30%, #5d2a8d 56%, #b4498f 76%, #f08a5d 92%, #ffc37a 100%); }
.rc-stars { position: absolute; inset: 0 0 35% 0;
  background-image: radial-gradient(1.6px 1.6px at 12% 22%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 34% 12%, #ffe9b0 50%, transparent 52%), radial-gradient(1.8px 1.8px at 58% 28%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 77% 9%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 90% 31%, #ffe9b0 50%, transparent 52%), radial-gradient(1px 1px at 46% 40%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 24% 48%, #fff 50%, transparent 52%);
  background-size: 420px 100%; background-position-x: var(--c1); animation: rc-twinkle 4s ease-in-out infinite alternate; }
@keyframes rc-twinkle { from { opacity: 0.65; } to { opacity: 1; } }
.rc-moon { position: absolute; width: clamp(34px, 7%, 70px); aspect-ratio: 1; left: 14%; top: 12%; border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, transparent 45%, #fff3c4 46%); box-shadow: 0 0 40px 10px rgba(255, 227, 150, 0.25); transform: rotate(-20deg); }
.rc-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: radial-gradient(60% 100% at 55% 100%, rgba(255, 196, 120, 0.5), transparent 70%); }
.rc-scene.a-bg-sky .rc-sky { background: url(/assets/race/bg-sky.webp) var(--c1) var(--skyy, 0px) / auto var(--skyh, 130%) repeat-x, #2a1665; }
.rc-scene.a-bg-sky .rc-sky > * { display: none; }

/* dağlar (yedek: iki katman SVG silüet) */
.rc-mtn { bottom: calc(var(--th) - 4px); height: calc((100% - var(--th)) * 0.62); z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V128l70-38 60 26 80-70 70 52 52-24 88 64 70-58 62 34 90-80 78 66 80 18v130z' fill='%233a2272'/%3E%3Cpath d='M210 46l-22 26 20-8 14 12 12-14zM620 32l-26 30 22-6 14 12 16-18z' fill='%23b28be0' opacity='.55'/%3E%3C/svg%3E") var(--c2) 100% / auto 100% repeat-x; }
.rc-mtn-far { position: absolute; inset: -18% 0 18% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V110l90-60 70 44 100-80 90 70 70-30 90 56 90-40v130z' fill='%235b3797' opacity='.8'/%3E%3C/svg%3E") calc(var(--c2) * 0.6) 100% / auto 100% repeat-x; z-index: -1; }
.rc-scene.a-bg-mountains .rc-mtn { background: url(/assets/race/bg-mountains.webp) var(--c2) 100% / auto 100% repeat-x; height: calc((100% - var(--th)) * 0.58); }
.rc-scene.a-bg-mountains .rc-mtn-far { display: none; }

/* orman */
.rc-forest { bottom: calc(var(--th) - 6px); height: calc((100% - var(--th)) * 0.46); z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 120' preserveAspectRatio='none'%3E%3Cg fill='%23231a4a'%3E%3Cpath d='M20 120 44 30 68 120zM60 120 92 10 124 120zM110 120 132 50 154 120zM150 120 180 18 210 120zM205 120 226 60 247 120zM240 120 270 24 300 120zM292 120 316 44 340 120zM330 120 352 34 374 120z'/%3E%3C/g%3E%3Crect y='100' width='360' height='20' fill='%23231a4a'/%3E%3Cg fill='%23ffd76a'%3E%3Ccircle cx='100' cy='86' r='1.6'/%3E%3Ccircle cx='228' cy='96' r='1.4'/%3E%3Ccircle cx='310' cy='80' r='1.6'/%3E%3C/g%3E%3C/svg%3E") var(--c3) 100% / auto 100% repeat-x; }
.rc-scene.a-bg-forest .rc-forest { background: url(/assets/race/bg-forest.webp) var(--c3) 100% / auto 100% repeat-x; height: calc((100% - var(--th)) * 0.56); }

/* pist: üstte çim kenar, toprak, altta çim kenar; kesik şerit çizgileri track.webp ile aynı yerde */
.rc-track { bottom: 0; height: var(--th); z-index: 3; }
.rc-ground { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(120, 60, 20, 0.07) 0 2px, transparent 2px 9px) var(--c4) 0 / auto,
    linear-gradient(180deg, #2f7a3a 0, #4f9d3f 11%, #8a5a2c 13.6%, #c98552 14.6%, #c4804c 50%, #b9733f 85.6%, #6f8e35 86.4%, #3f8f3a 90%, #2c6f33 100%); }
.rc-edge { position: absolute; left: 0; right: 0; height: 10%; background: radial-gradient(6px 4px at 10px 50%, #ffd6f2 60%, transparent 62%) var(--c4) 0 / 64px 100%, radial-gradient(5px 3px at 40px 30%, #c9a6ff 60%, transparent 62%) var(--c4) 0 / 90px 100%; }
.rc-edge.t { top: 1%; } .rc-edge.b { bottom: 1%; }
.rc-dash { position: absolute; left: 0; right: 0; height: 0.6%; min-height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255, 250, 240, 0.9) 0 26px, transparent 26px 50px) var(--c4) 0 / auto; }
.rc-scene.a-track .rc-ground { background: url(/assets/race/track.webp) var(--c4) 0 / auto 100% repeat-x; }
.rc-scene.a-track .rc-ground > * { display: none; }

/* başlangıç çizgisi + kapı, bitiş çizgisi + bayrak (toprak bölgesinde) */
.rc-startl, .rc-gate, .rc-finish { position: absolute; top: 14.1%; bottom: 13.6%; }
/* zemine sabit: --so / --fo kamera kayması (JS), --sf / --ff ekrandaki başlangıç / bitiş yeri */
.rc-startl, .rc-gate, .rc-sgate { translate: var(--so, 0px) 0; }
.rc-finish, .rc-farch, .rc-scene > .rc-fpost { translate: var(--fo, 0px) 0; }
.rc-scene.start-gone .rc-startl, .rc-scene.start-gone .rc-gate, .rc-scene.start-gone .rc-sgate { visibility: hidden; }
.rc-scene.fin-far .rc-finish, .rc-scene.fin-far .rc-farch, .rc-scene.fin-far > .rc-fpost { visibility: hidden; }
.rc-startl { left: var(--sf, 10%); width: 5px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); transform: translateX(-50%); }
.rc-gate { left: calc(var(--sf, 10%) + 6px); width: 12px; display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px; padding: 2px 0; transition: transform 0.5s cubic-bezier(.5, -0.4, .6, 1), opacity 0.5s; z-index: 6; }
.rc-gate i { background: repeating-linear-gradient(180deg, #ff5d73 0 8px, #fff 8px 16px); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.rc-scene.gate-up .rc-gate { transform: translateY(-140%); opacity: 0; }
.rc-mini .rc-gate, .rc-mini .rc-startl { display: none; }
.rc-finish { left: var(--ff, 90%); width: clamp(12px, calc(var(--sz) * 0.16), 22px); transform: translateX(-50%); }
/* damalı bitiş çizgisi: zeminde, şeritlerin tamamı boyunca (2 sütun kare) */
.rc-finl { position: absolute; inset: -2px 0; --q: calc(clamp(12px, calc(var(--sz) * 0.16), 22px) / 2);
  background: conic-gradient(#20123f 25%, #fffdf6 0 50%, #20123f 0 75%, #fffdf6 0) 0 0 / calc(var(--q) * 2) calc(var(--q) * 2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(60, 20, 0, 0.25), 0 0 20px rgba(255, 240, 200, 0.45); border-radius: 2px; }
/* bitiş: ön (alt kenar) direği — koşucuların önünde */
.rc-scene > .rc-fpost { left: var(--ff, 90%); right: auto; bottom: calc(var(--th) * 0.1); width: calc(var(--sz) * 0.09); min-width: 7px; height: calc(var(--th) * 0.3); z-index: 25; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, #6b3a12, #b9773a 45%, #7a4416); border-radius: 4px 4px 2px 2px; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35); }
.rc-fpost::before { content: ""; position: absolute; left: 50%; top: 0; width: 170%; aspect-ratio: 1; transform: translate(-50%, -70%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f1b52a 55%, #a86d06); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.rc-fpost > i { position: absolute; left: 100%; top: 6%; width: 320%; height: 34%; clip-path: polygon(0 0, 100% 50%, 0 100%); background: conic-gradient(#20123f 25%, #fffdf6 0 50%, #20123f 0 75%, #fffdf6 0) 0 0 / 8px 8px; transform-origin: 0 50%; animation: rc-wave 1.4s ease-in-out infinite; }
.rc-mini .rc-fpost { display: none; }
.rc-flag { position: absolute; bottom: 100%; left: 50%; width: calc(var(--sz) * 0.55); height: calc(var(--sz) * 0.55); font-size: calc(var(--sz) * 0.42); transform: translateX(-30%); }
.rc-flag .rc-ai { width: 100%; height: 100%; animation: rc-wave 1.4s ease-in-out infinite; transform-origin: 20% 100%; }
@keyframes rc-wave { 50% { transform: rotate(-6deg); } }

/* ön çim */
.rc-grass { bottom: 0; height: calc(var(--th) * 0.16); z-index: 30; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V40l8-22 6 20 8-30 6 28 10-18 6 22 8-26 8 26 10-14 6 16 8-30 8 30 10-20 8 22 8-28 6 26 10-16 8 18 8-26 8 26 10-18 8 20 10-28 8 28 10-20 6 18 8-24 8 24V60z' fill='%23255f2f'/%3E%3Cpath d='M0 60V50l12-12 10 14 12-18 12 16 14-12 10 14 14-16 12 14 12-10 14 14 12-16 12 16 14-12 12 12 14-14 12 14 14-10V60z' fill='%2334803c'/%3E%3C/svg%3E") var(--c5) 100% / auto 100% repeat-x; }
.rc-scene.a-fg-grass .rc-grass { background: url(/assets/race/fg-grass.webp) var(--c5) 100% / auto 100% repeat-x; height: calc(var(--th) * 0.2); }
.rc-runners { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

/* ============================================================
   KOŞUCU — şerit görseli (256×256 kareler) ya da emoji yedeği
   ============================================================ */
.rc-run { position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz); will-change: transform; }
.rc-shd { position: absolute; left: 24%; right: 24%; bottom: 1%; height: 8%; border-radius: 50%; background: rgba(30, 10, 0, 0.35); filter: blur(1px); }
.rc-body { position: absolute; inset: 0; }
.rc-spr { position: absolute; inset: 0; display: none; background-repeat: no-repeat; background-size: 800% 100%; image-rendering: auto; }
.rc-run.img .rc-spr { display: block; }
.rc-run.img .rc-emo { display: none; }
.rc-emo { position: absolute; left: 50%; bottom: 5%; font-style: normal; font-size: calc(var(--sz) * 0.5); line-height: 1; transform-origin: 50% 100%; translate: -50% 0;
  filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--cc) 70%, #000)) drop-shadow(0 0 6px color-mix(in srgb, var(--cc) 70%, transparent)); }
.rc-emo::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -6%; height: 12%; border-radius: 50%; background: var(--cc); opacity: 0.85; z-index: -1; }
/* yedek animasyonlar */
.rc-run.a-idle .rc-emo { animation: rc-breathe 1.6s ease-in-out infinite; }
.rc-run.a-run .rc-emo { animation: rc-hop 0.34s linear infinite; }
.rc-run.a-sprint .rc-emo { animation: rc-hop 0.22s linear infinite; rotate: 10deg; }
.rc-run.a-stumble .rc-emo { animation: rc-trip 0.6s ease-out 1; }
.rc-run.a-win .rc-emo { animation: rc-jump 0.7s cubic-bezier(.3, .6, .4, 1) infinite; }
@keyframes rc-breathe { 50% { transform: scale(1.04, 0.97); } }
@keyframes rc-hop { 0%, 100% { transform: translateY(0) rotate(6deg) scale(1.03, 0.96); } 50% { transform: translateY(-16%) rotate(10deg) scale(0.98, 1.03); } }
@keyframes rc-trip { 0% { transform: rotate(0); } 20% { transform: rotate(-24deg) translateX(-6%); } 45% { transform: rotate(14deg) translateY(4%); } 70% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }
@keyframes rc-jump { 0%, 100% { transform: translateY(0) scale(1.06, 0.94); } 45% { transform: translateY(-30%) scale(0.96, 1.05); } }
/* efektler: toz, hız çizgileri, tökezleme yıldızları, kazanma */
.rc-fx { position: absolute; left: 4%; bottom: 2%; width: 30%; height: 18%; opacity: 0; }
.rc-run.a-run .rc-fx, .rc-run.a-sprint .rc-fx { opacity: 1; background: radial-gradient(circle at 70% 70%, rgba(240, 210, 170, 0.75) 0 20%, transparent 22%), radial-gradient(circle at 35% 55%, rgba(240, 210, 170, 0.55) 0 16%, transparent 18%), radial-gradient(circle at 10% 80%, rgba(240, 210, 170, 0.4) 0 12%, transparent 14%);
  animation: rc-dust 0.36s linear infinite; }
.rc-run.a-sprint .rc-fx { width: 48%; left: -18%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7)) 0 20% / 100% 2px no-repeat, linear-gradient(90deg, transparent, rgba(255, 220, 120, 0.8)) 30% 60% / 80% 2px no-repeat, linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6)) 10% 95% / 90% 2px no-repeat; animation: rc-lines 0.25s linear infinite; bottom: 20%; height: 40%; }
@keyframes rc-dust { from { transform: translateX(0) scale(0.8); opacity: 0.9; } to { transform: translateX(-40%) scale(1.25); opacity: 0.2; } }
@keyframes rc-lines { from { transform: translateX(10%); } to { transform: translateX(-20%); } }
.rc-fx2 { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); font-style: normal; font-size: calc(var(--sz) * 0.2); opacity: 0; pointer-events: none; }
.rc-run.a-stumble .rc-fx2 { opacity: 1; animation: rc-dizzy 0.6s ease-out; }
.rc-run.a-stumble .rc-fx2::before { content: "💫"; }
.rc-run.a-win .rc-fx2 { opacity: 1; top: 4%; animation: rc-spark 1.2s ease-in-out infinite; }
.rc-run.a-win .rc-fx2::before { content: "✨"; }
@keyframes rc-dizzy { from { transform: translateX(-50%) rotate(-40deg) scale(0.5); } to { transform: translateX(-50%) rotate(30deg) scale(1.1); } }
@keyframes rc-spark { 50% { transform: translateX(-50%) scale(1.3); } }
/* isim etiketi */
.rc-tag { position: absolute; left: 50%; bottom: 80%; transform: translateX(-50%); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  font: 700 clamp(10px, calc(var(--sz) * 0.105), 13px)/1.2 "Manrope", system-ui, sans-serif; color: #fff; padding: 2px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--cc) 60%, rgba(15, 8, 40, 0.75)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.rc-tag em { font-style: normal; font-weight: 800; color: #2b1a00; background: var(--rc-gold); border-radius: 99px; padding: 0 5px; margin-right: 4px; font-size: 0.85em; }
.rc-run.me .rc-tag { box-shadow: 0 0 0 2px var(--rc-gold), 0 2px 8px rgba(0, 0, 0, 0.35); }
.rc-run.ghost { opacity: 0.45; filter: grayscale(0.4) brightness(1.3) drop-shadow(0 0 8px #bfe4ff); }
.rc-run.ghost .rc-tag { background: rgba(140, 190, 255, 0.55); }
.rc-run.left { opacity: 0.4; filter: grayscale(1); }
.rc-mini .rc-tag { font-size: 10px; padding: 1px 6px; }

/* ============================================================
   YARIŞ EKRANI — tam ekran (telefonda klavye açıkken görünür alana göre)
   ============================================================ */
html.rc-racing, body.rc-racing { overflow: hidden; overscroll-behavior: none; }
body.rc-racing #ns-chat, body.rc-racing #ns-avbubs, body.rc-racing .cookie-banner, body.rc-racing #cookie-banner { display: none !important; }
.rc-race [hidden] { display: none !important; }
.rc-race { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 900; display: flex; flex-direction: column; background: var(--rc-night); color: var(--rc-ink);
  font-family: "Manrope", system-ui, sans-serif; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.rc-stage { position: relative; flex: 1 1 auto; min-height: 120px; overflow: hidden; }
.rc-top { position: absolute; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: clamp(6px, 1.4vw, 14px); padding: max(8px, env(safe-area-inset-top)) clamp(8px, 2vw, 18px) 8px; pointer-events: none; }
.rc-top > * { pointer-events: auto; }
.rc-spd, .rc-time { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 16px; background: var(--rc-panel); border: 1px solid var(--rc-panel-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); flex: 0 0 auto; }
.rc-spd b, .rc-time b { font: 700 clamp(20px, 3vw, 30px)/1 "Fredoka", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 12px rgba(255, 204, 51, 0.45); }
.rc-spd b { min-width: 2.2ch; text-align: right; color: var(--rc-gold); }
.rc-time b { min-width: 6.4ch; }
.rc-spd small { font: 800 11px/1 "Manrope", sans-serif; letter-spacing: 0.04em; color: #f5d98a; }
.rc-hic { width: 22px; height: 22px; font-size: 16px; align-self: center; }
.rc-prog { flex: 1 1 auto; min-width: 60px; display: flex; align-items: center; gap: 6px; }
.rc-prog-tr { position: relative; flex: 1; height: 10px; border-radius: 99px; background: rgba(15, 8, 40, 0.7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12); margin: 0 14px; }
.rc-prog-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--rc-gold)); box-shadow: 0 0 10px rgba(255, 204, 51, 0.6); }
.rc-ph { position: absolute; top: 50%; left: 0; transform: translate(-50%, calc(-50% + (var(--k) - 1.5) * 3px)); transition: left 0.15s linear; z-index: 1; }
.rc-ph .rc-head { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.4); }
.rc-ph.me { z-index: 3; } .rc-ph.me .rc-head { width: 30px; height: 30px; font-size: 18px; box-shadow: 0 0 0 3px var(--rc-gold), 0 2px 8px rgba(0, 0, 0, 0.5); }
.rc-ph.ghost { opacity: 0.5; }
.rc-prog-flag .rc-ai { width: 26px; height: 26px; font-size: 20px; }
.rc-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: var(--rc-panel); color: #fff; font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.rc-x:hover { background: rgba(255, 93, 115, 0.5); }

/* hız göstergesi (kadran + ibre) */
.rc-gauge { position: absolute; z-index: 35; left: clamp(6px, 1.5vw, 18px); bottom: clamp(6px, 1.6vh, 16px); width: clamp(92px, 12vw, 150px); aspect-ratio: 1.2;
  border-radius: 50% 50% 22% 22%; background: radial-gradient(circle at 50% 62%, rgba(36, 20, 80, 0.94) 0 56%, rgba(20, 10, 50, 0.92) 70%); border: 2px solid rgba(255, 204, 51, 0.55); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(139, 92, 246, 0.35); }
.rc-g-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-g-img:not(.img) { display: none; }
.rc-gauge:has(.rc-g-img.img) { background: none; border: 0; box-shadow: none; }
.rc-gauge:has(.rc-g-img.img) .rc-g-svg { opacity: 0; }
.rc-g-svg { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; }
.rc-g-svg path { fill: none; stroke-linecap: round; }
.rc-g-bg { stroke: rgba(255, 255, 255, 0.12); stroke-width: 7; }
.rc-g-val { stroke: url(#rcg); stroke-width: 7; stroke-dasharray: 0 100; filter: drop-shadow(0 0 4px rgba(255, 204, 51, 0.6)); }
.rc-g-svg line { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.rc-g-svg line.big { stroke: #fff; stroke-width: 1.8; }
.rc-g-svg text { fill: #e9ddff; font: 700 7.5px "Manrope", sans-serif; text-anchor: middle; }
.rc-needle { position: absolute; left: 50%; top: 61%; width: 40%; height: 4px; margin-top: -2px; transform-origin: 0 50%; transform: rotate(-210deg); transition: transform 0.12s linear; }
.rc-needle .rc-ai { width: 100%; height: 100%; }
.rc-needle .rc-ai > i { width: 100%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff9a3d, #ff5d73); box-shadow: 0 0 6px rgba(255, 93, 115, 0.8); }
.rc-needle .rc-ai.img { height: 300%; margin-top: -4px; }
.rc-g-hub { position: absolute; left: 50%; top: 61%; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b8, #e6a520); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }
.rc-g-n { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font: 700 clamp(15px, 2vw, 22px)/1 "Fredoka", sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.rc-g-u { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font: 800 8.5px/1 "Manrope", sans-serif; letter-spacing: 0.06em; color: #f5d98a; }

/* geri sayım ve bant */
.rc-cd { position: absolute; z-index: 45; left: 50%; top: 46%; transform: translate(-50%, -50%); pointer-events: none; }
.rc-cdn { font: 700 clamp(84px, 22vh, 190px)/1 "Fredoka", system-ui, sans-serif; color: var(--rc-gold); -webkit-text-stroke: 4px #4b1d8f; paint-order: stroke fill;
  text-shadow: 0 8px 0 #2a0f5a, 0 0 40px rgba(255, 204, 51, 0.65); width: 1.2em; height: 1.2em; }
.rc-cdn.go { width: auto; min-width: 2em; color: #7dffa8; font-size: clamp(64px, 16vh, 150px); white-space: nowrap; }
.rc-cdn.img { width: clamp(120px, 28vh, 240px); height: clamp(120px, 28vh, 240px); -webkit-text-stroke: 0; }
.rc-cd.in .rc-cdn { animation: rc-cdpop 0.9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes rc-cdpop { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(0.92); opacity: 1; } 55% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 0.9; } }
.rc-race.pre .rc-stage::after { content: ""; position: absolute; inset: 0; z-index: 38; background: radial-gradient(circle at 50% 46%, transparent 20%, rgba(10, 4, 30, 0.45) 80%); pointer-events: none; }
.rc-banner { position: absolute; z-index: 42; left: 50%; top: 64px; transform: translateX(-50%); padding: 8px 18px; border-radius: 99px; white-space: nowrap;
  font: 700 clamp(14px, 2vw, 19px)/1.2 "Fredoka", sans-serif; color: #2b1a00; background: linear-gradient(180deg, #ffe07a, var(--rc-gold-2)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.rc-banner.dl { background: linear-gradient(180deg, #ff9aa8, #ff5d73); color: #fff; }
.rc-banner.in { animation: rc-bannerin 0.5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rc-bannerin { from { transform: translate(-50%, -30px) scale(0.8); opacity: 0; } }

/* kelime paneli */
.rc-words { position: relative; flex: 0 0 auto; z-index: 50; padding: 10px clamp(10px, 3vw, 28px) max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #2a175c, #1a0f3d); border-top: 2px solid rgba(255, 204, 51, 0.5); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35); cursor: text; }
.rc-wbox { --fs: clamp(19px, 2.3vw, 30px); position: relative; max-width: 980px; margin: 0 auto; height: calc(var(--fs) * 1.55 * 2); overflow: hidden; border-radius: 14px; padding: 0 4px;
  font: 600 var(--fs)/1.55 "Manrope", system-ui, sans-serif; color: rgba(233, 221, 255, 0.55); }
.rc-race:not(.short) .rc-wbox { height: calc(var(--fs) * 1.55 * 3); }
.rc-text { transition: transform 0.22s ease; word-spacing: 0.12em; }
.rc-text .w { white-space: nowrap; border-radius: 8px; }
.rc-text .w.done { color: rgba(125, 255, 168, 0.55); }
.rc-text .w.cur { color: #fff; background: rgba(139, 92, 246, 0.32); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.32); }
.rc-text .w.cur.err { background: rgba(255, 93, 115, 0.22); box-shadow: 0 0 0 4px rgba(255, 93, 115, 0.22); }
.rc-text i { font-style: normal; }
.rc-text i.ok { color: var(--rc-ok); }
.rc-text i.bad { color: var(--rc-bad); text-decoration: underline wavy rgba(255, 93, 115, 0.8); text-underline-offset: 4px; }
.rc-text i.x { opacity: 0.85; }
.rc-text i.car { display: inline-block; width: 3px; height: 1.1em; margin: 0 -1.5px; vertical-align: -0.15em; border-radius: 2px; background: var(--rc-gold); animation: rc-car 1s steps(1) infinite; }
.rc-words:not(.focus) .rc-text i.car { opacity: 0.35; animation: none; }
@keyframes rc-car { 50% { opacity: 0; } }
.rc-wbox.shake { animation: rc-shake 0.28s; }
@keyframes rc-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rc-hint { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); padding: 4px 14px; border-radius: 99px; background: var(--rc-gold); color: #2b1a00; font: 800 12.5px/1.2 "Manrope", sans-serif; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.rc-hint.on { opacity: 1; animation: rc-pulse 1.6s ease-in-out infinite; }
@keyframes rc-pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.rc-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; background: transparent; color: transparent; caret-color: transparent; cursor: text; }

/* kısa ekran (telefonda klavye açık) */
.rc-race.short .rc-top { padding-top: 6px; padding-bottom: 4px; }
.rc-race.short .rc-spd, .rc-race.short .rc-time { padding: 4px 9px 4px 6px; }
.rc-race.short .rc-banner { top: 50px; }
.rc-race.tiny .rc-wbox { --fs: 18px; }
.rc-race.tiny .rc-gauge { width: 78px; }
.rc-race.tiny .rc-words { padding-top: 6px; padding-bottom: 6px; }

/* ---------- sonuç ---------- */
.rc-res { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 12px; background: rgba(12, 6, 32, 0.6); backdrop-filter: blur(4px); animation: rc-fade 0.3s; overflow: auto; }
@keyframes rc-fade { from { opacity: 0; } }
.rc-res-card { position: relative; width: min(640px, 100%); max-height: 100%; overflow: auto; padding: 18px clamp(14px, 3vw, 26px) 16px; border-radius: 26px; color: var(--rc-ink);
  background: linear-gradient(180deg, #34206e, #1d1145); border: 2px solid rgba(255, 204, 51, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: rc-cardin 0.45s cubic-bezier(.2, 1.3, .4, 1); scrollbar-width: thin; }
.rc-res-card.board { background: url(/assets/race/result-board.webp) center / 100% 100% no-repeat; border: 0; box-shadow: none; }
@keyframes rc-cardin { from { transform: translateY(30px) scale(0.94); opacity: 0; } }
.rc-res-card h2 { margin: 0 0 6px; text-align: center; font: 700 clamp(22px, 3.4vw, 30px)/1.1 "Fredoka", sans-serif; color: var(--rc-gold); text-shadow: 0 3px 0 #2a0f5a; }
.rc-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; margin: 6px auto 10px; max-width: 420px; }
.rc-pod { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; animation: rc-podin 0.5s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(0.15s + var(--i) * 0.12s); }
@keyframes rc-podin { from { transform: translateY(24px); opacity: 0; } }
.rc-pod-ch .rc-head { width: 54px; height: 54px; font-size: 32px; }
.rc-pod.p1 .rc-pod-ch .rc-head { width: 68px; height: 68px; font-size: 40px; }
.rc-pod.me .rc-pod-ch .rc-head { box-shadow: 0 0 0 3px var(--rc-gold), 0 4px 12px rgba(0, 0, 0, 0.4); }
.rc-medal { width: 26px; height: 26px; font-size: 22px; margin-top: -12px; }
.rc-pod b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.2 "Manrope", sans-serif; }
.rc-pod small { font: 700 12px/1.2 "Manrope", sans-serif; color: #f5d98a; }
.rc-pod-blk { width: 100%; display: grid; place-items: center; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--cc, #8b5cf6) 70%, #fff), color-mix(in srgb, var(--cc, #8b5cf6) 70%, #000)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3); margin-top: 4px; }
.rc-pod-blk i { font: 700 22px/1 "Fredoka", sans-serif; font-style: normal; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.rc-pod.p1 .rc-pod-blk { height: 64px; } .rc-pod.p2 .rc-pod-blk { height: 46px; } .rc-pod.p3 .rc-pod-blk { height: 32px; }
.rc-pod.empty .rc-pod-blk { --cc: #574a7f; opacity: 0.5; }
.rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 8px; }
.rc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); min-width: 0; }
.rc-sti { width: 26px; height: 26px; font-size: 20px; }
.rc-stat b { font: 700 clamp(17px, 2.6vw, 22px)/1.1 "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.rc-stat small { font: 700 11px/1.2 "Manrope", sans-serif; color: #c9b8f5; }
.rc-rec { text-align: center; margin: 2px 0 8px; font: 700 14px/1.3 "Manrope", sans-serif; color: #f5d98a; }
.rc-rec.new { font: 700 20px/1.2 "Fredoka", sans-serif; color: var(--rc-gold); animation: rc-pulse2 1.2s ease-in-out infinite; }
.rc-rec small { display: block; font: 600 12px/1.3 "Manrope", sans-serif; color: #c9b8f5; }
@keyframes rc-pulse2 { 50% { transform: scale(1.06); } }
.rc-tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font: 600 13.5px/1.2 "Manrope", sans-serif; }
.rc-tbl th { font: 800 11px/1 "Manrope", sans-serif; color: #b9a8e8; text-align: right; padding: 2px 8px; }
.rc-tbl th:nth-child(-n+2) { text-align: left; }
.rc-tbl td { padding: 6px 8px; background: rgba(255, 255, 255, 0.06); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-tbl td:first-child { border-radius: 10px 0 0 10px; text-align: center; font: 700 15px/1 "Fredoka", sans-serif; color: var(--rc-gold); width: 28px; }
.rc-tbl td:nth-child(2) { text-align: left; max-width: 160px; }
.rc-tbl td:last-child { border-radius: 0 10px 10px 0; }
.rc-tbl tr.me td { background: rgba(255, 204, 51, 0.16); }
.rc-tn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.rc-tn b { overflow: hidden; text-overflow: ellipsis; }
.rc-res-b { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; }
.rc-res-b .btn { flex: 1 1 140px; max-width: 240px; }
.rc-share { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.rc-share svg { width: 20px; height: 20px; }
.rc-wait { flex: 1 1 100%; text-align: center; margin: 2px 0 0; font: 600 13px/1.3 "Manrope", sans-serif; color: #c9b8f5; }

/* ============================================================
   GİRİŞ EKRANI
   ============================================================ */
#ns.rc-wrap, body #ns.g-wrap.rc-wrap { max-width: 1080px; width: 100%; }
.rc-inv[hidden], .rc-opt[hidden], .rc-or[hidden] { display: none !important; }
.rc-home { display: grid; gap: 14px; }
.rc-hero { position: relative; height: clamp(180px, 27vw, 290px); border-radius: 26px; overflow: hidden; border: 1px solid rgba(255, 204, 51, 0.35); box-shadow: 0 18px 40px rgba(20, 8, 60, 0.35); }
.rc-hero .rc-scene { --th: 62%; }
.rc-hero-t { position: absolute; z-index: 40; left: clamp(14px, 3vw, 28px); top: clamp(12px, 2.5vw, 24px); max-width: 60%; color: #fff; text-shadow: 0 2px 10px rgba(20, 0, 60, 0.6); }
.rc-hero-t b { display: block; font: 700 clamp(22px, 3.6vw, 38px)/1.05 "Fredoka", sans-serif; }
.rc-hero-t small { display: block; margin-top: 6px; font: 600 clamp(12px, 1.5vw, 15px)/1.35 "Manrope", sans-serif; color: #f1e6ff; }
.rc-hero-kb { position: absolute; z-index: 40; right: clamp(12px, 3vw, 26px); top: clamp(12px, 2.5vw, 22px); display: flex; gap: 5px; align-items: center; }
.rc-hero-kb i { width: clamp(28px, 3.6vw, 40px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; font: 700 clamp(15px, 2vw, 22px)/1 "Fredoka", sans-serif; font-style: normal; text-transform: uppercase;
  color: #2b1a00; background: linear-gradient(180deg, #fff6d6, #ffd75e); box-shadow: 0 4px 0 #b88a12, 0 6px 10px rgba(0, 0, 0, 0.3); animation: rc-key 3.2s calc(var(--i) * 0.18s) infinite; }
.rc-hero-kb i.cur { width: 4px; border-radius: 2px; background: var(--rc-gold); box-shadow: none; animation: rc-car 1s steps(1) infinite; }
@keyframes rc-key { 0%, 70%, 100% { transform: translateY(0); box-shadow: 0 4px 0 #b88a12, 0 6px 10px rgba(0, 0, 0, 0.3); } 8% { transform: translateY(3px); box-shadow: 0 1px 0 #b88a12, 0 2px 4px rgba(0, 0, 0, 0.3); } }
.rc-hero .rc-run.me .rc-tag { box-shadow: 0 0 0 2px var(--rc-gold); }

.rc-me { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 22px; background: var(--bg-soft); border: 1px solid var(--line); }
.rc-me-name label, .rc-lbl { display: block; margin: 0 0 6px; font: 700 13px/1.2 "Manrope", sans-serif; color: var(--ink-dim); }
.rc-me .ns-name-in { display: flex; gap: 6px; }
.rc-me .ns-name-in input { flex: 1; min-width: 0; }
.rc-chars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.rc-chb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 16px; border: 2px solid transparent; background: color-mix(in srgb, var(--cc) 10%, transparent); cursor: pointer; color: var(--ink); min-width: 0; transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.rc-chb:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--cc) 20%, transparent); }
.rc-chb .rc-head { width: clamp(36px, 4.6vw, 50px); height: clamp(36px, 4.6vw, 50px); font-size: clamp(22px, 2.8vw, 30px); }
.rc-chb b { font: 700 11.5px/1.15 "Manrope", sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-chb.on { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 26%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 25%, transparent), 0 6px 16px color-mix(in srgb, var(--cc) 30%, transparent); }
.rc-chb.on::after { content: "✓"; position: absolute; top: -6px; right: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 sans-serif; color: #fff; background: var(--cc); }
.rc-chb.taken { opacity: 0.4; filter: grayscale(0.8); cursor: not-allowed; }
.rc-chb.taken:hover { transform: none; }
.rc-lock { position: absolute; top: 2px; right: 4px; font-size: 12px; font-style: normal; }
.rc-chb.jump .rc-head { animation: rc-jump 0.5s cubic-bezier(.3, .6, .4, 1); }
.rc-chb.nope { animation: rc-shake 0.3s; }
.rc-chars.pulse { animation: rc-pulse2 0.6s 2; }

.rc-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.rc-mode { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--m) 14%, var(--bg-soft)), var(--bg-soft) 55%); border: 1px solid color-mix(in srgb, var(--m) 35%, var(--line)); overflow: hidden; }
.rc-mode::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--m); }
.rc-mode.dim { opacity: 0.55; }
.rc-mode.hot, .rc-mode.ready { box-shadow: 0 0 0 2px var(--m), 0 10px 30px color-mix(in srgb, var(--m) 30%, transparent); }
.rc-mode-h { display: flex; gap: 12px; align-items: center; }
.rc-mode-h h3 { margin: 0; font: 700 20px/1.15 "Fredoka", sans-serif; color: var(--ink); }
.rc-mode-h p { margin: 3px 0 0; font: 500 13px/1.35 "Manrope", sans-serif; color: var(--ink-dim); }
.rc-mart { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 18px; font-size: 32px; background: color-mix(in srgb, var(--m) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 45%, transparent); }
.rc-mart.img { background: none; box-shadow: none; width: 72px; height: 72px; }
.rc-opt { display: flex; flex-direction: column; gap: 5px; }
.rc-opt > span { font: 700 12px/1.2 "Manrope", sans-serif; color: var(--ink-faint); }
.rc-seg { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--line); }
.rc-seg button { min-height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-dim); font: 700 13px/1.1 "Manrope", sans-serif; cursor: pointer; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-seg button.on { background: var(--m); color: #1a0f3d; box-shadow: 0 3px 10px color-mix(in srgb, var(--m) 40%, transparent); }
.rc-tg { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.12); color: var(--ink); cursor: pointer; text-align: left; }
.rc-tg > span { font-size: 22px; }
.rc-tg b { flex: 1; font: 700 13.5px/1.2 "Manrope", sans-serif; }
.rc-tg small { display: block; font: 500 11.5px/1.25 "Manrope", sans-serif; color: var(--ink-faint); }
.rc-tg > i { width: 38px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); position: relative; transition: background 0.2s; flex: 0 0 auto; }
.rc-tg > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.rc-tg.on > i { background: var(--m); }
.rc-tg.on > i::after { transform: translateX(16px); }
.rc-best { margin: 0; font: 600 12.5px/1.3 "Manrope", sans-serif; color: var(--ink-dim); }
.rc-go { margin-top: auto; min-height: 48px; font-size: 16px; }
.rc-or { display: flex; align-items: center; gap: 8px; font: 600 12px/1 "Manrope", sans-serif; color: var(--ink-faint); }
.rc-or::before, .rc-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rc-join { display: flex; gap: 6px; }
.rc-join input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; font-weight: 800; }
.rc-link { border: 0; background: none; color: var(--violet-bright); font: 700 13px/1.3 "Manrope", sans-serif; cursor: pointer; text-decoration: underline; }
.rc-inv { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: rgba(181, 140, 255, 0.12); border: 1px solid rgba(181, 140, 255, 0.35); }
.rc-inv b { font: 700 14px/1.3 "Manrope", sans-serif; color: var(--ink); }
.rc-inv small { font: 600 12px/1.3 "Manrope", sans-serif; color: var(--ink-dim); }
.rc-inv.bad { background: rgba(255, 93, 115, 0.1); border-color: rgba(255, 93, 115, 0.4); }
.rc-inv-pl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-inv-p { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 70px; }
.rc-inv-p small { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-inv-pl em { margin-left: auto; font: 700 13px/1 "Fredoka", sans-serif; font-style: normal; color: var(--ink-dim); }

/* ============================================================
   LOBİ
   ============================================================ */
.rc-lobby [hidden] { display: none !important; }
.rc-emo-ic { font-size: 17px; line-height: 1; display: grid; place-items: center; }
.rc-lobby .ns-settings .ns-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.rc-lobby .ns-settings .ns-chip { min-width: 0; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rc-lobby .ns-settings .ns-chip small { font-size: 10.5px; opacity: 0.7; }
.rc-lobby .ns-settings .rc-wl { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-lobby .rc-wl .flag-ic { width: 16px; height: 12px; display: inline-flex; border-radius: 2px; overflow: hidden; }
.rc-lobby .rc-wl .flag-ic svg { width: 100%; height: 100%; }
.rc-lobby .ns-tog { min-width: 0; }
.rc-lobby .ns-tog b, .rc-lobby .ns-tog small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sum { display: flex; flex-direction: column; gap: 8px; }
.rc-sum .rc-chars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-sum .rc-chb { padding: 6px 2px 4px; }
.rc-sum .rc-chb .rc-head { width: 38px; height: 38px; font-size: 22px; }
.rc-lanes { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px 30px 6px 6px; border-radius: 14px;
  background: linear-gradient(180deg, #4f9d3f 0 6px, #c98552 6px calc(100% - 6px), #4f9d3f calc(100% - 6px)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.rc-ln { display: grid; grid-template-columns: 18px auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 4px 8px; border-radius: 10px; background: rgba(255, 245, 230, 0.16); border-bottom: 2px dashed rgba(255, 255, 255, 0.7); animation: rc-lnin 0.35s calc(var(--i) * 0.06s) both; }
@keyframes rc-lnin { from { transform: translateX(-12px); opacity: 0; } }
.rc-ln:last-of-type { border-bottom: 0; }
.rc-ln .rc-ln-n { grid-row: 1 / 3; font: 700 13px/1 "Fredoka", sans-serif; font-style: normal; color: rgba(60, 25, 0, 0.6); }
.rc-ln .rc-head { grid-row: 1 / 3; }
.rc-ln b { font: 700 13px/1.15 "Manrope", sans-serif; color: #2b1300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-ln small { font: 600 11px/1.1 "Manrope", sans-serif; color: rgba(50, 20, 0, 0.7); }
.rc-ln.me { background: rgba(255, 204, 51, 0.5); }
.rc-ln.bot { opacity: 0.85; }
.rc-ln-fin { position: absolute; right: 0; top: 6px; bottom: 6px; width: 22px; display: grid; place-items: center; font-style: normal; font-size: 16px; background: conic-gradient(#222 25%, #fff 0 50%, #222 0 75%, #fff 0) 0 0 / 10px 10px; border-radius: 0 10px 10px 0; }
.rc-pc-ch { position: absolute; right: -6px; bottom: -4px; font-style: normal; }
.rc-pc-ch .rc-head { width: 22px; height: 22px; font-size: 13px; box-shadow: 0 0 0 2px var(--bg-soft); }
.rc-sysfin { color: var(--rc-gold) !important; }

/* kurallar */
.rc-intro-demo { margin: 6px auto 10px; padding: 10px 14px; border-radius: 14px; background: #1f1248; color: rgba(233, 221, 255, 0.6); font: 600 20px/1.5 "Manrope", sans-serif; text-align: center; }
.rc-intro-demo .w.cur { color: #fff; background: rgba(139, 92, 246, 0.35); border-radius: 6px; padding: 0 3px; }
.rc-intro-demo .w.done { color: rgba(125, 255, 168, 0.7); }
.rc-intro-demo i { font-style: normal; }
.rc-intro-demo i.ok { color: var(--rc-ok); } .rc-intro-demo i.bad { color: var(--rc-bad); text-decoration: underline wavy; }
.rc-intro-demo i.car { display: inline-block; width: 3px; height: 1em; vertical-align: -0.1em; background: var(--rc-gold); animation: rc-car 1s steps(1) infinite; }
.rc-how li span { font-size: 18px; }

/* ---------- açık tema: sahne alacakaranlık kalır, çevresi açık ---------- */
:root[data-theme="light"] .rc-hero { border-color: rgba(124, 79, 224, 0.35); box-shadow: 0 18px 40px rgba(124, 79, 224, 0.18); }
:root[data-theme="light"] .rc-mode { background: linear-gradient(180deg, color-mix(in srgb, var(--m) 18%, #fff), #fff 60%); }
:root[data-theme="light"] .rc-seg { background: rgba(124, 79, 224, 0.06); }
:root[data-theme="light"] .rc-seg button.on { color: #1a0f3d; }
:root[data-theme="light"] .rc-me { background: #fff; }
:root[data-theme="light"] .rc-tg { background: rgba(124, 79, 224, 0.05); }
:root[data-theme="light"] .rc-tg > i { background: rgba(60, 40, 110, 0.18); }
:root[data-theme="light"] .rc-sky { background: linear-gradient(180deg, #3b2a8f 0%, #6a46c2 32%, #b16ab8 58%, #f39a7a 80%, #ffd08a 100%); }

/* ---------- dar ekran ---------- */
@media (max-width: 900px) {
  .rc-modes { grid-template-columns: 1fr; }
  .rc-me { grid-template-columns: 1fr; }
  .rc-mode.m-friends { order: -1; }
  .rc-home:not(.inv) .rc-mode.m-friends { order: 0; }
}
@media (max-width: 560px) {
  .rc-chars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-hero { height: 190px; border-radius: 20px; }
  .rc-hero-kb { display: none; }
  .rc-hero-t { max-width: 90%; }
  .rc-hero-t small { display: none; }
  .rc-top { gap: 6px 8px; flex-wrap: wrap; }
  .rc-prog { order: 5; flex: 1 1 100%; }
  .rc-spd { margin-right: auto; }
  .rc-race .rc-banner { top: 96px; }
  .rc-time b { min-width: 5.6ch; }
  .rc-prog-tr { margin: 0 10px; }
  .rc-prog-flag { display: none; }
  .rc-x { width: 32px; height: 32px; font-size: 14px; }
  .rc-stats { grid-template-columns: repeat(2, 1fr); }
  .rc-tbl { font-size: 12.5px; }
  .rc-tbl td, .rc-tbl th { padding: 5px 5px; }
  .rc-tbl td:nth-child(2) { max-width: 110px; }
  .rc-res-card { border-radius: 20px; padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-run .rc-emo, .rc-fx, .rc-fx2, .rc-stars, .rc-hero-kb i, .rc-flag .rc-ai { animation: none !important; }
}

/* ============================================================
   GÖRSEL KATMANI — /assets/race/ dosyaları yüklenince (kökte a-<ad> sınıfı)
   ============================================================ */
.rc-sgate, .rc-farch { display: none; }
/* başlangıç: dikey çizgi şeridi + arkada ahşap kemer */
.rc-scene.a-start-line .rc-startl { width: calc(var(--th) * 0.266); background: url(/assets/race/start-line.webp) center / 100% 100% no-repeat; box-shadow: none; }
.rc-scene.a-start-line .rc-gate { left: calc(var(--sf, 10%) + var(--th) * 0.133 + 4px); }
.rc-scene.a-start-gate .rc-sgate { display: block; position: absolute; left: var(--sf, 10%); bottom: 84.5%; height: 48%; aspect-ratio: 1.5; transform: translateX(-50%); background: url(/assets/race/start-gate.webp) center bottom / contain no-repeat; z-index: -1; }
.rc-mini .rc-sgate { display: none !important; }
/* bitiş: damalı afişli tak pistin üst (uzak) kenarında — görselin üst %70'i; tabanı ve yerdeki eğik damalı şerit
   pistin çim kenarının arkasında kalır. Zeminde kendi düz damalı çizgimiz, alt kenarda ön direk. */
.rc-scene.a-finish-line .rc-farch { display: block; position: absolute; left: var(--ff, 90%); bottom: calc(100% - 14.1% - 2px); height: calc(var(--th) * 0.62); aspect-ratio: 768 / 717; transform: translateX(-47%);
  background: url(/assets/race/finish-line.webp) center top / 100% auto no-repeat; z-index: -1; filter: drop-shadow(0 6px 6px rgba(20, 0, 40, 0.3)); }
.rc-mini.a-finish-line .rc-farch { height: calc(var(--th) * 0.7); }
.rc-scene.a-finish-line .rc-flag { display: none; }
/* efekt şeritleri (6 kare) */
@keyframes rc-fx6 { from { background-position-x: 0; } to { background-position-x: 120%; } }
.rc-scene.a-fx-dust .rc-run.a-run .rc-fx, .rc-scene.a-fx-dust .rc-run.a-sprint .rc-fx { background: url(/assets/race/fx-dust.webp) 0 0 / 600% 100% no-repeat; animation: rc-fx6 0.5s steps(6) infinite; left: -14%; bottom: -4%; width: 44%; height: 44%; opacity: 0.95; }
.rc-scene.a-fx-boost .rc-run.a-sprint .rc-fx { background: url(/assets/race/fx-boost.webp) 0 0 / 600% 100% no-repeat; animation: rc-fx6 0.4s steps(6) infinite; left: -36%; bottom: 8%; width: 62%; height: 62%; }
.rc-scene.a-fx-oops .rc-run.a-stumble .rc-fx2 { top: 0; }
.rc-scene.a-fx-oops .rc-run.a-stumble .rc-fx2::before { content: ""; display: block; width: calc(var(--sz) * 0.4); height: calc(var(--sz) * 0.4); background: url(/assets/race/fx-oops.webp) center / contain no-repeat; }
/* görsel animasyonu eksikse: bekleme kareleri zıplatılır / sallanır */
.rc-run.fbjump .rc-spr { animation: rc-jump 0.7s cubic-bezier(.3, .6, .4, 1) infinite; transform-origin: 50% 96%; }
.rc-run.fbtrip .rc-spr { animation: rc-trip 0.6s ease-out 1; transform-origin: 50% 96%; }

/* HUD: hız ve süre panelleri (sol ikon, sağda boş ekran) */
.a-hud-speed .rc-spd, .a-hud-timer .rc-time { --hh: clamp(38px, 6vh, 56px); border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; height: var(--hh); padding: 0 calc(var(--hh) * 0.25) 0 calc(var(--hh) * 0.82); align-items: center; justify-content: center; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.a-hud-speed .rc-spd { background: url(/assets/race/hud-speed.webp) center / 100% 100% no-repeat; width: calc(var(--hh) * 2.94); }
.a-hud-timer .rc-time { background: url(/assets/race/hud-timer.webp) center / 100% 100% no-repeat; width: calc(var(--hh) * 3.05); }
.a-hud-speed .rc-spd .rc-hic, .a-hud-timer .rc-time .rc-hic { display: none; }
.a-hud-timer .rc-time b { min-width: 0; font-size: clamp(17px, 2.6vh, 26px); }
.a-hud-speed .rc-spd b { min-width: 0; font-size: clamp(18px, 2.8vh, 28px); }
/* kadran: görselin merkezi (0.5, 0.508), ibre pivotu ibre görselinin %17.6'sında */
.a-hud-speedometer .rc-gauge { aspect-ratio: 1; background: none; border: 0; box-shadow: none; border-radius: 0; width: clamp(96px, 13vw, 160px); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.a-hud-speedometer .rc-g-svg { display: none; }
.a-hud-speedometer .rc-g-n { bottom: auto; top: 68%; font-size: clamp(12px, 1.5vw, 17px); text-shadow: 0 1px 3px #000; }
.a-hud-speedometer .rc-g-u { display: none; }
.a-hud-needle .rc-needle { left: calc(50% - 40% * 0.176); top: 50.8%; width: 40%; height: auto; aspect-ratio: 512 / 172; margin-top: -6.72%; transform-origin: 17.6% 50%; z-index: 2; }
.a-hud-needle .rc-needle .rc-ai.img { height: 100%; margin: 0; }
.a-hud-needle .rc-g-hub { display: none; }
/* kelime paneli çerçevesi */
.rc-wframe { display: none; }
.a-hud-word-panel .rc-wbox { box-sizing: content-box; padding: 0 6px; height: calc(var(--fs) * 1.55 * 2); border: solid transparent; border-width: 26px 16px 28px; border-image: url(/assets/race/hud-word-panel.webp) 195 95 205 100 fill / 26px 16px 28px stretch; border-radius: 0; }
.a-hud-word-panel:not(.short) .rc-wbox { height: calc(var(--fs) * 1.55 * 3); }
.a-hud-word-panel .rc-words { background: linear-gradient(180deg, #24124f, #160b36); }
/* sonuç: tahta ve kürsü */
.a-result-board .rc-res-card { background: none; border: solid transparent; border-width: clamp(58px, 11vw, 92px) 30px 34px; border-image: url(/assets/race/result-board.webp) 300 120 150 fill / clamp(58px, 11vw, 92px) 30px 34px stretch; box-shadow: none; border-radius: 0; padding: 0 8px 4px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); }
.a-result-board .rc-res-card h2 { margin-top: -6px; }
.a-result-podium .rc-podium { position: relative; display: block; width: min(400px, 100%); aspect-ratio: 1.5; margin: 54px auto 6px; background: url(/assets/race/result-podium.webp) center bottom / 100% auto no-repeat; }
.a-result-podium .rc-pod { position: absolute; width: 31%; transform: translateX(-50%); gap: 0; }
.a-result-podium .rc-pod.p1 { left: 50%; top: calc(21.6% - 66px); }
.a-result-podium .rc-pod.p2 { left: 19%; top: calc(44% - 54px); }
.a-result-podium .rc-pod.p3 { left: 82%; top: calc(48% - 54px); }
.a-result-podium .rc-pod-blk { display: none; }
.a-result-podium .rc-pod b, .a-result-podium .rc-pod small { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.a-result-podium .rc-pod b { margin-top: 2px; }
/* giriş: tuşlar, seçim çerçevesi, mod görselleri, kapak */
.a-hud-key .rc-hero-kb i:not(.cur) { background: url(/assets/race/hud-key.webp) center / 100% 100% no-repeat; color: #fff; text-shadow: 0 2px 0 #3a1580; box-shadow: none; animation-name: rc-key2; }
@keyframes rc-key2 { 0%, 70%, 100% { transform: translateY(0); } 8% { transform: translateY(3px) scale(0.96); } }
.a-pick-frame .rc-chb { background: url(/assets/race/pick-frame.webp) center / 100% 100% no-repeat; border-color: transparent; padding-top: 10px; padding-bottom: 8px; color: #fff; }
.a-pick-frame .rc-chb.on { border-color: transparent; box-shadow: 0 0 0 3px var(--cc), 0 8px 20px color-mix(in srgb, var(--cc) 45%, transparent); transform: translateY(-2px); border-radius: 12px; }
.rc-mart.img { width: 92px; height: 92px; margin: -10px -4px -10px -8px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
.m-friends .rc-mart.img { width: 110px; }
.rc-intro-art .rc-cover { display: block; width: 100%; aspect-ratio: 1.5; border-radius: 16px; overflow: hidden; margin: 4px 0 8px; }
.rc-intro-art .rc-cover:not(.img) { display: none; }
.rc-intro-art .rc-cover img { object-fit: cover; }
/* kısa ekranda kadran küçülür, çok kısada (klavye açık küçük telefon) gizlenir: hız sol üstte zaten var */
.rc-race.short .rc-gauge { width: 82px; }
.rc-race.tiny .rc-gauge { display: none; }
.rc-race.tiny .a-hud-word-panel .rc-wbox, .rc-race.tiny.a-hud-word-panel .rc-wbox { border-width: 18px 12px 20px; }
.a-hud-speedometer .rc-g-n { top: 68%; }
.a-result-board .rc-res-card { padding-bottom: 14px; }
.a-hud-word-panel .rc-wbox { padding: 2px 8px 6px; }
.rc-lobby .rc-sum { overflow: auto; scrollbar-width: thin; }
.rc-lobby .rc-ln { padding: 2px 8px; }
.rc-lobby .rc-ln .rc-head.sm { width: 26px; height: 26px; font-size: 16px; }
.a-hud-word-panel .rc-wbox { padding: 8px 10px 8px; }
@media (min-width: 900px) {
  .rc-lobby .rc-sum .rc-chars { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .rc-lobby .rc-sum .rc-chb { padding: 5px 1px 3px; border-radius: 12px; }
  .rc-lobby .rc-sum .rc-chb .rc-head { width: 32px; height: 32px; font-size: 19px; }
  .rc-lobby .rc-sum .rc-chb b { font-size: 9.5px; }
}
.rc-res-b .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); }
:root[data-theme="light"] .rc-tg.on > i { background: var(--m); }

/* ============================================================
   R4 — düzeltmeler: ilerleme rayı, HUD sayaçları, tanıtım başlığı, tuşlar,
   seçim çerçevesi, kürsü etiketleri, sonuç taşması, yazma kuralı (yanlış harf geçer)
   ============================================================ */
/* üst ilerleme rayı: temiz CSS ray + başlangıç (yeşil) ve bitiş (damalı) bayrakları + kafa ikonları */
.rc-prog { position: relative; height: 40px; gap: 0; padding: 0 2px; }
.rc-prog-st { position: relative; flex: 0 0 auto; width: 4px; height: 28px; margin: 0 2px 0 6px; border-radius: 2px; background: linear-gradient(90deg, #b47c0c, #ffe28a, #b47c0c); align-self: flex-end; margin-bottom: 9px; }
.rc-prog-st::before { content: ""; position: absolute; left: 4px; top: 0; width: 18px; height: 12px; background: linear-gradient(180deg, #7dff9a, #2fbf55); clip-path: polygon(0 0, 100% 15%, 82% 50%, 100% 85%, 0 100%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.rc-prog-st::after { content: ""; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c4, #f1b52a 60%, #a86d06); }
.rc-prog-tr { height: 12px; margin: 0 10px 0 14px; border-radius: 99px; background: linear-gradient(180deg, #1a0d3d, #2d1a63); border: 2px solid #f1b52a;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(60, 25, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.35); }
.rc-prog-fill { border-radius: 99px; background: linear-gradient(90deg, #7c4fe0, #c07cff 60%, var(--rc-gold)); }
.rc-prog-tr::after { content: ""; position: absolute; inset: 1px 4px auto 4px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); pointer-events: none; }
.rc-ph { transform: translate(-50%, calc(-50% + (var(--k) - 1.5) * 2px)); }
.rc-ph .rc-head { width: 26px; height: 26px; font-size: 15px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.45); }
.rc-ph.me .rc-head { width: 32px; height: 32px; font-size: 19px; box-shadow: 0 0 0 3px var(--rc-gold), 0 2px 8px rgba(0, 0, 0, 0.5); }
.rc-prog-flag { display: block !important; flex: 0 0 auto; }
.rc-prog-flag .rc-ai { width: 30px; height: 30px; font-size: 22px; display: grid; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
@media (max-width: 560px) { .rc-prog { height: 32px; } .rc-prog-flag .rc-ai { width: 24px; height: 24px; } .rc-ph .rc-head { width: 22px; height: 22px; } .rc-ph.me .rc-head { width: 27px; height: 27px; } }

/* HUD sayaç panelleri: sayı, görseldeki boş (mor) alana oturur */
.a-hud-speed .rc-spd, .a-hud-timer .rc-time { position: relative; padding: 0; }
.a-hud-timer .rc-time b { position: absolute; left: 24.5%; right: 5%; top: 30%; bottom: 17%; display: grid; place-items: center; min-width: 0; margin: 0;
  font: 700 calc(var(--hh) * 0.42)/1 "Fredoka", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; overflow: hidden; }
.a-hud-speed .rc-spd b { position: absolute; left: 27%; right: 34%; top: 28%; bottom: 18%; display: grid; place-items: center end; min-width: 0; font-size: calc(var(--hh) * 0.48); }
.a-hud-speed .rc-spd small { position: absolute; left: 68%; right: 6%; top: 28%; bottom: 18%; display: grid; place-items: center start; font-size: calc(var(--hh) * 0.2); }

/* tanıtım sahnesi başlığı: koyu yarı saydam zemin + kontur, her arka planda okunur */
.rc-hero-t { padding: 10px 16px 11px; border-radius: 18px; background: linear-gradient(135deg, rgba(24, 10, 58, 0.78), rgba(48, 18, 92, 0.6)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(10, 0, 30, 0.35), inset 0 0 0 1px rgba(255, 204, 51, 0.35); max-width: min(60%, 560px); }
.rc-hero-t b { color: #fff; -webkit-text-stroke: 1px rgba(40, 10, 80, 0.6); paint-order: stroke fill; text-shadow: 0 3px 0 #2a0f5a, 0 0 14px rgba(255, 204, 51, 0.35); }
.rc-hero-t small { color: #fff3d6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
@media (max-width: 560px) { .rc-hero-t { padding: 8px 12px; max-width: calc(100% - 28px); } }

/* sağ üst tuşlar: harf tuşun üst yüzünde ortalı */
.a-hud-key .rc-hero-kb i:not(.cur) { box-sizing: border-box; padding: 0 0 6% 0; line-height: 1.2; font-size: clamp(13px, 1.75vw, 20px); background-size: 100% 100%; }

/* karakter seçici: çerçeve (512×640) içinde kafa tam ortada, isim çerçevenin altında tam görünür */
.rc-chb .rc-chf { display: grid; place-items: center; }
.a-pick-frame .rc-chb, .a-pick-frame .rc-chb.on { background: none; padding: 2px 0 4px; border: 0; box-shadow: none; border-radius: 14px; gap: 3px; transform: none; }
.a-pick-frame .rc-chb .rc-chf { width: 100%; max-width: 76px; aspect-ratio: 512 / 640; background: url(/assets/race/pick-frame.webp) center / 100% 100% no-repeat; transition: transform 0.15s, filter 0.15s; }
.a-pick-frame .rc-chb .rc-chf .rc-head { width: 72%; height: auto; aspect-ratio: 1; font-size: clamp(18px, 2.6vw, 30px); }
.a-pick-frame .rc-chb:hover .rc-chf { transform: translateY(-2px); }
.a-pick-frame .rc-chb.on .rc-chf { filter: drop-shadow(0 0 3px var(--cc)) drop-shadow(0 0 8px color-mix(in srgb, var(--cc) 70%, transparent)); transform: translateY(-2px) scale(1.04); }
.a-pick-frame .rc-chb.on::after { top: -4px; right: calc(50% - 44px); }
.rc-chb b { display: block; width: 100%; text-align: center; padding: 1px 2px; border-radius: 99px; letter-spacing: -0.01em; }
.a-pick-frame .rc-chb.on b { background: var(--cc); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.rc-chb.taken .rc-lock { top: 4px; right: calc(50% - 34px); z-index: 2; }

/* sonuç: yatay kaydırma yok */
.rc-res { overflow-x: hidden; }
.rc-res-card { overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
.rc-res-card > * { max-width: 100%; }
.rc-tbl { table-layout: fixed; }
.rc-tbl th:first-child, .rc-tbl td:first-child { width: 30px; }
.rc-tbl th:nth-child(2), .rc-tbl td:nth-child(2) { width: auto; }
.rc-tbl th:nth-child(n+3), .rc-tbl td:nth-child(n+3) { width: 16%; }
.rc-tbl td:nth-child(2) { max-width: none; overflow: hidden; }
.rc-tn { min-width: 0; max-width: 100%; }
.rc-tn b { min-width: 0; white-space: nowrap; }
/* kürsü: isim + hız, kafanın altında okunaklı hapta (kendin altın renkli) */
.rc-pod-tag { display: flex; flex-direction: column; align-items: center; max-width: 100%; min-width: 0; margin-top: 2px; padding: 3px 10px 4px; border-radius: 12px; line-height: 1.1;
  background: rgba(22, 10, 52, 0.92); box-shadow: 0 0 0 1.5px rgba(255, 204, 51, 0.75), 0 4px 10px rgba(0, 0, 0, 0.45); position: relative; z-index: 2; }
.rc-pod-tag b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 13px/1.15 "Manrope", sans-serif; color: #fff; text-shadow: none !important; margin: 0 !important; }
.rc-pod-tag small { font: 800 11.5px/1.15 "Manrope", sans-serif; color: var(--rc-gold); text-shadow: none !important; font-variant-numeric: tabular-nums; }
.rc-pod-tag em { font: 800 9.5px/1 "Manrope", sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; color: #2b1a00; background: #fff; border-radius: 99px; padding: 2px 6px; margin: -10px 0 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.rc-pod.me .rc-pod-tag { background: linear-gradient(180deg, #ffe07a, #ffb020); box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0, 0, 0, 0.45); }
.rc-pod.me .rc-pod-tag b { color: #2b1300; }
.rc-pod.me .rc-pod-tag small { color: #5a2d00; }
.a-result-podium .rc-podium { margin-top: 62px; }
.a-result-podium .rc-pod.p1 { top: calc(21.6% - 86px); }
.a-result-podium .rc-pod.p2 { top: calc(44% - 70px); }
.a-result-podium .rc-pod.p3 { top: calc(48% - 70px); }
.a-result-podium .rc-pod { width: 33%; }
@media (max-width: 560px) { .rc-pod-tag { padding: 2px 6px 3px; } .rc-pod-tag b { font-size: 11.5px; } .rc-pod-tag small { font-size: 10.5px; } .rc-pod-ch .rc-head { width: 46px; height: 46px; } .rc-pod.p1 .rc-pod-ch .rc-head { width: 56px; height: 56px; } }

/* yazma kuralı: yanlış harf kırmızı kalır, atlanan harf soluk kırmızı (geri silme yok) */
.rc-text .w.done.err { color: rgba(125, 255, 168, 0.55); }
.rc-text .w.done.err i.ok { color: rgba(125, 255, 168, 0.6); }
.rc-text .w.done.err i.bad, .rc-text i.miss { color: var(--rc-bad); }
.rc-text i.miss { opacity: 0.55; text-decoration: line-through rgba(255, 93, 115, 0.7); }

/* ---------- lobi "Bu yarış": mini pist önizlemesi + ayar çipleri ---------- */
.rc-lprev { position: relative; height: clamp(150px, 19vw, 190px); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 204, 51, 0.4); box-shadow: 0 10px 24px rgba(20, 8, 60, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06); flex: 0 0 auto; }
.rc-lprev .rc-scene { --th: 66%; }
.rc-lobmini .rc-tag { max-width: 96px; font-size: 10px; padding: 1px 7px; bottom: 84%; }
.rc-run.sil .rc-body { filter: brightness(0) saturate(0) opacity(0.42) drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)); }
.rc-run.sil .rc-shd { opacity: 0.4; }
.rc-run.sil .rc-tag { background: rgba(20, 10, 50, 0.6); color: #e6dcff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); font-weight: 700; }
.rc-run.empty { opacity: 0.6; }
.rc-run.empty .rc-body { filter: brightness(0) opacity(0.18); }
.rc-run.sil.a-idle .rc-emo { animation-duration: 2.4s; }
.rc-lset { position: absolute; z-index: 40; left: 8px; right: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; }
.rc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 99px; font: 700 11.5px/1.2 "Manrope", sans-serif; color: #fff; white-space: nowrap;
  background: rgba(22, 10, 52, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 204, 51, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px); }
.rc-chip > i { font-style: normal; font-size: 12px; display: inline-flex; }
.rc-chip small { font-size: 10px; color: var(--rc-gold); font-weight: 800; }
.rc-chip.off { color: #cfc3ee; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.rc-chip.hot { background: linear-gradient(180deg, #ff8a5c, #e8465c); box-shadow: none; }
.rc-chip .flag-ic { width: 16px; height: 12px; display: inline-flex; border-radius: 2px; overflow: hidden; }
.rc-chip .flag-ic svg { width: 100%; height: 100%; }
.rc-lpick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 0; }
.rc-lpick small { font: 600 11px/1.2 "Manrope", sans-serif; color: var(--ink-faint); }
.rc-lobby .rc-chb.taken { opacity: 0.55; cursor: pointer; }
.rc-lobby .rc-chb.taken:hover { opacity: 0.85; filter: grayscale(0.3); }

/* ---------- yarışçı isteme: onay penceresi + gelen istek kartı ---------- */
.rc-ask-sw { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.rc-ask-ch { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 12px/1.2 "Manrope", sans-serif; }
.rc-ask-ch .rc-head { width: 64px; height: 64px; font-size: 38px; }
.rc-ask-ch.me .rc-head { box-shadow: 0 0 0 3px var(--rc-gold), 0 4px 12px rgba(0, 0, 0, 0.3); }
.rc-ask-arr { font: 700 28px/1 "Fredoka", sans-serif; font-style: normal; color: var(--rc-gold); animation: rc-swing 1.2s ease-in-out infinite; }
@keyframes rc-swing { 50% { transform: scale(1.2) rotate(180deg); } }
.rc-ask-d { margin: 0 0 10px; font: 500 13px/1.4 "Manrope", sans-serif; color: var(--ink-dim); text-align: center; }
#rc-chreqs { position: fixed; z-index: 960; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.rc-chq { position: relative; pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px 14px; border-radius: 18px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #3a2380, #22134f); box-shadow: 0 14px 34px rgba(10, 0, 40, 0.5), inset 0 0 0 1.5px rgba(255, 204, 51, 0.6); animation: rc-chqin 0.4s cubic-bezier(.2, 1.4, .4, 1); }
.rc-chq.out { grid-template-columns: auto 1fr auto; opacity: 0.95; }
.rc-chq.bye { animation: rc-chqout 0.3s forwards; }
@keyframes rc-chqin { from { transform: translateY(30px) scale(0.9); opacity: 0; } }
@keyframes rc-chqout { to { transform: translateY(20px); opacity: 0; } }
.rc-chq-sw { display: flex; align-items: center; gap: 4px; }
.rc-chq-sw .rc-head { width: 40px; height: 40px; font-size: 24px; }
.rc-chq-sw > i { font-style: normal; color: var(--rc-gold); font: 700 18px/1 "Fredoka", sans-serif; }
.rc-chq-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-chq-t b { font: 700 14px/1.25 "Fredoka", sans-serif; }
.rc-chq-t small { font: 600 11.5px/1.2 "Manrope", sans-serif; color: #d9ccff; }
.rc-chq-b { grid-column: 1 / -1; display: flex; gap: 8px; }
.rc-chq-b button { flex: 1; min-height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); color: #fff; font: 800 14px/1 "Manrope", sans-serif; cursor: pointer; }
.rc-chq-b button.y { background: linear-gradient(180deg, #ffe07a, #ffb020); color: #2b1300; border: 0; box-shadow: 0 3px 0 #b97b0b; }
.rc-chq-n { position: absolute; top: 8px; right: 10px; font: 700 13px/1 "Fredoka", sans-serif; font-style: normal; color: var(--rc-gold); }
.rc-chq-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p, 1) * 100%); background: linear-gradient(90deg, var(--rc-gold), #ff7a5c); transition: width 0.1s linear; }
.rc-syssw { color: #ffd98a !important; }

/* ---------- davet kartı (odaya katılma) ---------- */
.rc-invc { gap: 10px; padding: 14px; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, #b58cff 30%, transparent), transparent 60%), linear-gradient(180deg, rgba(181, 140, 255, 0.16), rgba(181, 140, 255, 0.06));
  border: 1.5px solid rgba(255, 204, 51, 0.55); box-shadow: 0 10px 26px rgba(60, 20, 140, 0.25); animation: rc-cardin 0.45s cubic-bezier(.2, 1.3, .4, 1); }
.rc-invc-top { display: flex; align-items: center; gap: 12px; }
.rc-invc-host { position: relative; flex: 0 0 auto; }
.rc-invc-host .rc-head { width: 76px; height: 76px; font-size: 44px; box-shadow: 0 0 0 3px var(--rc-gold), 0 6px 16px color-mix(in srgb, var(--cc) 50%, transparent); animation: rc-breathe 2.2s ease-in-out infinite; }
.rc-invc-host em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-style: normal; font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.rc-invc-tt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-invc-badge { align-self: flex-start; padding: 2px 9px; border-radius: 99px; font: 800 11px/1.3 "Manrope", sans-serif; color: #2b1a00; background: var(--rc-gold); }
.rc-invc-tt b { font: 700 17px/1.2 "Fredoka", sans-serif; color: var(--ink); }
.rc-invc-pl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rc-invc-p { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 2px 5px; border-radius: 12px; background: rgba(0, 0, 0, 0.14); }
.rc-invc-p small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1.2 "Manrope", sans-serif; color: var(--ink-dim); }
.rc-invc-p.free { border: 1.5px dashed var(--line); background: none; }
.rc-invc-p.free > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-style: normal; color: var(--ink-faint); background: rgba(255, 255, 255, 0.06); }
.rc-invc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-invc .rc-chip { color: var(--ink); background: rgba(0, 0, 0, 0.16); backdrop-filter: none; }
.rc-invc .rc-chip.hot { color: #fff; }
.rc-invc-go { min-height: 50px; font-size: 17px; box-shadow: 0 6px 18px rgba(139, 92, 246, 0.45); animation: rc-pulse2 1.8s ease-in-out infinite; }
:root[data-theme="light"] .rc-invc .rc-chip { background: rgba(124, 79, 224, 0.08); box-shadow: inset 0 0 0 1px rgba(124, 79, 224, 0.3); }
:root[data-theme="light"] .rc-invc-p { background: rgba(124, 79, 224, 0.06); }
.rc-res-b { flex-wrap: nowrap; }
.rc-res-b .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 12px; }
.rc-res-b .rc-wait { white-space: normal; }
.rc-res-b:has(.rc-wait) { flex-wrap: wrap; }
.rc-share { flex: 0 0 auto; }
.rc-scene > .rc-fpost { bottom: calc(var(--th) * 0.07); height: calc(var(--th) * 0.2); }
.a-pick-frame .rc-chb { color: var(--ink); }
.a-pick-frame .rc-chb b { color: var(--ink); }
.a-pick-frame .rc-chb.on b { color: #fff; }
@media (max-width: 560px) {
  .rc-tbl th:nth-child(3), .rc-tbl td:nth-child(3) { width: 13%; }
  .rc-tbl th:nth-child(4), .rc-tbl td:nth-child(4) { width: 18%; }
  .rc-tbl th:nth-child(5), .rc-tbl td:nth-child(5) { width: 22%; }
  .rc-tbl th { font-size: 9.5px; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; }
  .rc-tbl td { padding: 5px 4px; font-size: 12px; }
  .rc-tbl th:first-child, .rc-tbl td:first-child { width: 24px; }
}

/* ---------- R5: lobi ayar şeridi (pistin üstünde, tek satır / dar ekranda 2×2) ---------- */
.rc-sum { container-type: inline-size; }
.rc-lbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 0 0 auto; }
.rc-lb { display: flex; align-items: center; gap: 7px; min-width: 0; height: 44px; padding: 0 9px 0 7px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 204, 51, 0.32), 0 3px 8px rgba(0, 0, 0, 0.18); }
.rc-lb > i { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-size: 15px; background: rgba(255, 204, 51, 0.14); }
.rc-lb > i .flag-ic { width: 18px; height: 13px; display: inline-flex; border-radius: 2px; overflow: hidden; }
.rc-lb > i .flag-ic svg { width: 100%; height: 100%; }
.rc-lb > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rc-lb small { font: 700 9.5px/1.1 "Manrope", sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-lb b { font: 800 13px/1.15 "Manrope", sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-lb b em { font-style: normal; font-size: 0.85em; color: var(--rc-gold); margin-left: 2px; }
.rc-lb.off b { color: var(--ink-faint); }
@container (max-width: 420px) {
  .rc-lbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-lb { height: 40px; }
}
:root[data-theme="light"] .rc-lb { background: rgba(124, 79, 224, 0.06); box-shadow: inset 0 0 0 1px rgba(124, 79, 224, 0.25); }
:root[data-theme="light"] .rc-lb b em { color: #b7791f; }
/* pistteki isim etiketleri önizleme içinde kalsın */
.rc-lobmini .rc-tag { bottom: 76%; }

/* ---------- R5: DNF (bitiremedi) ---------- */
.rc-dnf { display: inline-block; padding: 2px 8px; border-radius: 99px; font: 800 11px/1.3 "Manrope", sans-serif; letter-spacing: 0.06em; color: #fff;
  background: linear-gradient(180deg, #ff7b8b, #d93a55); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); cursor: help; }
.rc-tbl tr.dnf td:first-child { font: 800 10.5px/1 "Manrope", sans-serif; color: #ff8a9a; letter-spacing: 0.04em; }
.rc-tbl tr.dnf td { opacity: 0.92; }
.rc-low { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; font: 700 10px/1.5 "Manrope", sans-serif; color: #ffd0d6; background: rgba(255, 93, 115, 0.22); }

/* ============================================================
   R6 — sonuç kartı düzeni, puan, düğmeler, paylaş penceresi
   ============================================================ */
.rc-res-card { width: min(720px, 100%); --bt: clamp(64px, 11vw, 100px); }
.a-result-board .rc-res-card { border-width: var(--bt) clamp(22px, 4vw, 34px) 38px; border-image: url(/assets/race/result-board.webp) 300 120 150 fill / var(--bt) clamp(22px, 4vw, 34px) 38px stretch; padding: 0 clamp(6px, 1.6vw, 14px) 6px; }
/* başlık: tahtanın üstündeki ahşap afişin (kupanın altındaki mor kurdele) ortasında */
.rc-res-card h2 { position: relative; z-index: 3; margin: 0 0 10px; }
.a-result-board .rc-res-card h2 { margin: calc(var(--bt) * -0.42) auto 12px; width: max-content; max-width: 70%; padding: 3px 18px 5px; font-size: clamp(19px, 2.8vw, 27px); line-height: 1.05;
  color: #ffe58a; -webkit-text-stroke: 1px rgba(60, 20, 0, 0.55); paint-order: stroke fill; text-shadow: 0 2px 0 #4a1c00, 0 0 12px rgba(255, 200, 80, 0.45);
  background: radial-gradient(ellipse at center, rgba(80, 30, 140, 0.85) 0 55%, rgba(80, 30, 140, 0) 72%); }
/* kürsü: etiketler birbirine ve basamak kenarına binmesin */
.a-result-podium .rc-podium { width: min(480px, 100%); margin: 84px auto 14px; }
.a-result-podium .rc-pod { width: 30%; }
.a-result-podium .rc-pod.p2 { left: 18.5%; }
.a-result-podium .rc-pod.p3 { left: 81.5%; }
.rc-pod-tag { max-width: 100%; padding: 4px 10px 5px; }
.rc-pod-tag small { white-space: nowrap; }
/* özet kartları: 5 kutu, puan vurgulu */
.rc-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 6px 0 16px; }
.rc-stat { padding: 10px 4px 9px; gap: 3px; }
.rc-stat.s-score { background: linear-gradient(180deg, rgba(255, 204, 51, 0.28), rgba(255, 160, 30, 0.12)); border-color: rgba(255, 204, 51, 0.65); box-shadow: 0 0 18px rgba(255, 204, 51, 0.18); }
.rc-stat.s-score .rc-sti { font-size: 20px; display: grid; place-items: center; }
.rc-stat.s-score b { color: var(--rc-gold); }
.rc-rec { margin: 0 0 12px; }
/* tablo: rahat satırlar, puan sütunu */
.rc-tbl { border-spacing: 0 6px; margin-top: 2px; }
.rc-tbl td { padding: 9px 8px; }
.rc-tbl td.sc { color: var(--rc-gold); font-weight: 800; }
.rc-tbl th:nth-child(n+3), .rc-tbl td:nth-child(n+3) { width: 13%; }
.rc-tbl th:nth-child(6), .rc-tbl td:nth-child(6) { width: 16%; }
/* düğmeler: oyun temalı, altın çerçeveli, büyük dokunma alanı */
.rc-res-b { margin-top: 16px; gap: 10px; }
.rc-rbtn { position: relative; flex: 1 1 0; min-width: 0; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 16px; cursor: pointer;
  font: 700 16px/1 "Fredoka", system-ui, sans-serif; color: #fff; white-space: nowrap; border: 2px solid #f1b52a;
  box-shadow: 0 4px 0 #8a5a08, 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.12s, box-shadow 0.12s, filter 0.15s; }
.rc-rbtn > i { font-style: normal; font-size: 19px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.rc-rbtn > span { overflow: hidden; text-overflow: ellipsis; }
.rc-rbtn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 6px 0 #8a5a08, 0 12px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.rc-rbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a08, 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.2); }
.rc-rbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rc-rbtn.sec { background: linear-gradient(180deg, rgba(60, 30, 120, 0.75), rgba(25, 12, 60, 0.85)); backdrop-filter: blur(4px); }
.rc-rbtn.pri { flex-grow: 1.35; color: #2b1300; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); border-color: #ffe9a3;
  background: linear-gradient(180deg, #ffe680 0%, #ffbf3c 45%, #f08d1b 100%); box-shadow: 0 4px 0 #a2560a, 0 8px 22px rgba(255, 170, 40, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.rc-rbtn.pri::after { content: ""; position: absolute; inset: 2px 10% auto; height: 40%; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent); pointer-events: none; }
.rc-rbtn.pri:hover { box-shadow: 0 6px 0 #a2560a, 0 12px 26px rgba(255, 170, 40, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.rc-rbtn.pri:active { box-shadow: 0 1px 0 #a2560a, 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15); }
.rc-rbtn.share { flex: 0 0 54px; width: 54px; padding: 0; border-radius: 50%; background: linear-gradient(180deg, #8b5cf6, #5b2bc2); }
.rc-rbtn.share svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .a-result-board .rc-res-card h2 { margin-top: calc(var(--bt) * -0.46); max-width: 80%; padding: 2px 12px 4px; }
  .a-result-podium .rc-podium { margin-top: 70px; }
  .rc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-stat.s-place { order: 0; } .rc-stat.s-score { order: -1; grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; }
  .rc-stat.s-score b { font-size: 24px; }
  .rc-tbl th:nth-child(3), .rc-tbl td:nth-child(3) { width: 14%; }
  .rc-tbl th:nth-child(4), .rc-tbl td:nth-child(4) { width: 12%; }
  .rc-tbl th:nth-child(5), .rc-tbl td:nth-child(5) { width: 15%; }
  .rc-tbl th:nth-child(6), .rc-tbl td:nth-child(6) { width: 21%; }
  .rc-tbl td { padding: 7px 4px; }
  .rc-rbtn { height: 50px; font-size: 14.5px; padding: 0 10px; gap: 6px; }
  .rc-rbtn.share { flex-basis: 50px; width: 50px; }
}

/* paylaş penceresi */
.rc-shm { max-width: 460px; }
.rc-sh { display: flex; flex-direction: column; gap: 12px; }
.rc-sh h3 { margin: 2px 0 0; text-align: center; font: 700 20px/1.2 "Fredoka", sans-serif; }
.rc-sh-card { position: relative; overflow: hidden; padding: 14px 16px 12px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--cc) 45%, transparent), transparent 60%), linear-gradient(160deg, #3d2290, #1f1150);
  box-shadow: inset 0 0 0 2px rgba(255, 204, 51, 0.7), 0 12px 30px rgba(40, 10, 100, 0.4); animation: rc-cardin 0.45s cubic-bezier(.2, 1.3, .4, 1); }
.rc-sh-card::after { content: "🏁"; position: absolute; right: -6px; bottom: -14px; font-size: 80px; opacity: 0.1; transform: rotate(-12deg); }
.rc-sh-top { display: flex; align-items: center; gap: 12px; }
.rc-sh-head { position: relative; }
.rc-sh-head .rc-head { width: 62px; height: 62px; font-size: 36px; box-shadow: 0 0 0 3px var(--rc-gold), 0 4px 12px rgba(0, 0, 0, 0.35); }
.rc-sh-rank { display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px; border-radius: 99px; font: 700 18px/1 "Fredoka", sans-serif; color: #2b1300; background: linear-gradient(180deg, #ffe680, #f0a21b); box-shadow: 0 3px 0 #9a5a08; }
.rc-sh-rank.p2 { background: linear-gradient(180deg, #f4f6fb, #aab3c5); box-shadow: 0 3px 0 #6b7385; }
.rc-sh-rank.p3 { background: linear-gradient(180deg, #ffd1a8, #c77a3a); box-shadow: 0 3px 0 #7d4518; }
.rc-sh-rank.p4 { background: linear-gradient(180deg, #d9c8ff, #9b7be6); box-shadow: 0 3px 0 #5b3ca8; }
.rc-sh-rank.dnf { color: #fff; background: linear-gradient(180deg, #ff7b8b, #d93a55); box-shadow: 0 3px 0 #8a1b2f; }
.rc-sh-name { min-width: 0; display: flex; flex-direction: column; }
.rc-sh-name b { font: 700 17px/1.2 "Fredoka", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sh-name small { font: 600 12px/1.2 "Manrope", sans-serif; color: #d9ccff; }
.rc-sh-score { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 10px 0 8px; }
.rc-sh-score small { font: 800 12px/1 "Manrope", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #f5d98a; }
.rc-sh-score b { font: 700 46px/1 "Fredoka", sans-serif; color: var(--rc-gold); text-shadow: 0 3px 0 #6b2f00, 0 0 22px rgba(255, 204, 51, 0.5); font-variant-numeric: tabular-nums; }
.rc-sh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rc-sh-stats span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); }
.rc-sh-stats i { font-style: normal; font-size: 15px; }
.rc-sh-stats b { font: 700 17px/1.1 "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.rc-sh-stats small { font: 700 10.5px/1.2 "Manrope", sans-serif; color: #c9b8f5; }
.rc-sh-tx { margin: 0; padding: 10px 12px; border-radius: 14px; font: 600 13.5px/1.45 "Manrope", sans-serif; color: var(--ink); background: rgba(0, 0, 0, 0.18); border: 1px dashed var(--line); word-break: break-word; }
.rc-sh-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rc-sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none; color: #fff;
  font: 700 15px/1 "Manrope", sans-serif; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); transition: transform 0.12s, filter 0.15s; }
.rc-sh-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.rc-sh-btn:active { transform: translateY(2px); }
.rc-sh-btn > i { font-style: normal; font-size: 18px; }
.rc-sh-btn.wa { background: linear-gradient(180deg, #3ddc84, #1fa855); }
.rc-sh-btn.x { background: linear-gradient(180deg, #333, #000); }
.rc-sh-btn.tg { background: linear-gradient(180deg, #4cb8f0, #1c8ad0); }
.rc-sh-btn.cp { background: linear-gradient(180deg, #ffe680, #f0a21b); color: #2b1300; }
.rc-sh-btn.cp.done { background: linear-gradient(180deg, #7dffa8, #2fbf55); }
.rc-sh-btn.more { background: linear-gradient(180deg, #a98bff, #6d3fe0); grid-column: 1 / -1; }
.rc-sh-close { align-self: center; border: 0; background: none; color: var(--ink-dim); font: 700 14px/1 "Manrope", sans-serif; cursor: pointer; padding: 6px 12px; }
:root[data-theme="light"] .rc-sh-tx { background: rgba(124, 79, 224, 0.06); }

/* ============================================================
   R7 — kelime paneli iç boşlukları + yanlarda canlı kartlar
   ============================================================ */
.rc-words { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; }
.rc-side { display: none; }
.rc-race .rc-wbox, .rc-race.a-hud-word-panel .rc-wbox, .a-hud-word-panel .rc-wbox { width: 100%; max-width: 980px; height: auto !important; overflow: visible; box-sizing: border-box; }
.rc-race .rc-wbox { padding: 12px 16px; }
.a-hud-word-panel .rc-wbox { border-width: 30px 26px 32px !important; border-image-width: 30px 26px 32px !important; padding: 6px 18px 4px !important; }
/* metin penceresi: tam satır yüksekliğinde kırpılır (kaydırılan satır yarım görünmez), dikeyde ortalı */
.rc-tclip { position: relative; --lh: calc(var(--fs) * 1.6); height: calc(var(--lh) * 3); overflow: hidden; }
.rc-race.short .rc-tclip { height: calc(var(--lh) * 2); }
.rc-text { line-height: 1.6; word-spacing: 0.14em; padding: 0 2px; }
.rc-text .w { padding: 0 3px; margin: 0 -3px; }
/* aktif kelime: yumuşak zemin + altında ince parlayan çizgi */
.rc-text .w.cur { position: relative; background: rgba(139, 92, 246, 0.26); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.26); }
.rc-text .w.cur::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0.08em; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--rc-gold), transparent); opacity: 0.8; animation: rc-ul 2.4s ease-in-out infinite; }
.rc-text .w.cur.err::after { background: linear-gradient(90deg, transparent, var(--rc-bad), transparent); }
@keyframes rc-ul { 50% { opacity: 0.35; } }
.rc-text i.car { animation: rc-car2 1.1s ease-in-out infinite; }
@keyframes rc-car2 { 0%, 45% { opacity: 1; } 60%, 85% { opacity: 0.15; } 100% { opacity: 1; } }
.rc-spark { position: absolute; z-index: 3; pointer-events: none; border-radius: 8px; box-shadow: 0 0 0 0 rgba(125, 255, 168, 0.7); animation: rc-spark2 0.65s ease-out forwards; }
.rc-spark::after { content: "✦"; position: absolute; right: -6px; top: -10px; font-size: 13px; color: #7dffa8; text-shadow: 0 0 6px #7dffa8; animation: rc-spark3 0.65s ease-out forwards; }
@keyframes rc-spark2 { 0% { box-shadow: 0 0 0 0 rgba(125, 255, 168, 0.55); background: rgba(125, 255, 168, 0.16); } 100% { box-shadow: 0 0 0 10px rgba(125, 255, 168, 0); background: rgba(125, 255, 168, 0); } }
@keyframes rc-spark3 { from { transform: scale(0.4) rotate(0); opacity: 1; } to { transform: scale(1.3) translate(4px, -6px) rotate(90deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rc-text .w.cur::after, .rc-spark, .rc-spark::after { animation: none; } }

/* geniş ekran: sol canlı istatistik (hız göstergesi + doğruluk/hata/kalan), orta kelime paneli, sağ canlı sıralama */
.rc-race.wide .rc-words { grid-template-columns: minmax(0, 1fr) minmax(0, 980px) minmax(0, 1fr); column-gap: clamp(10px, 1.6vw, 24px); }
.rc-race.wide .rc-side { display: flex; flex-direction: column; align-self: stretch; justify-content: center; min-width: 0; max-width: 300px; pointer-events: none; }
.rc-race.wide .rc-side.l { justify-self: end; flex-direction: row; align-items: center; gap: 10px; }
.rc-race.wide .rc-side.r { justify-self: start; width: 100%; }
.rc-gslot { flex: 0 0 auto; position: relative; }
.rc-race.wide .rc-gslot .rc-gauge { position: relative; left: auto; bottom: auto; width: clamp(108px, 8.5vw, 140px); }
.rc-live { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rc-live > div { display: flex; flex-direction: column; padding: 5px 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 204, 51, 0.22); min-width: 92px; }
.rc-live small { font: 700 10.5px/1.2 "Manrope", sans-serif; color: #c9b8f5; white-space: nowrap; }
.rc-live b { font: 700 19px/1.1 "Fredoka", sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.rc-live b.warn { color: #ff9aa8; }
.rc-side.r h5 { margin: 0 0 6px; font: 800 11px/1.2 "Manrope", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #f5d98a; }
.rc-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-rank li { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rc-rank li.me { background: rgba(255, 204, 51, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 204, 51, 0.6); }
.rc-rank li.ghost { opacity: 0.6; }
.rc-rank li > i { font: 700 13px/1 "Fredoka", sans-serif; font-style: normal; color: var(--rc-gold); text-align: center; }
.rc-rank li .rc-head.xs { width: 22px; height: 22px; font-size: 13px; }
.rc-rank li b { font: 700 12.5px/1.2 "Manrope", sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-rank li em { font: 800 11px/1 "Manrope", sans-serif; font-style: normal; font-variant-numeric: tabular-nums; padding: 3px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: #e6dcff; }
.rc-rank li em.up { color: #ffb3bd; } .rc-rank li em.dn { color: #9dffbf; } .rc-rank li em.fin { background: none; }

/* sonuç kartı: başlık kesilmesin diye kaydırma iç kapta */
.rc-res-card, .a-result-board .rc-res-card { display: flex; flex-direction: column; overflow: visible !important; max-height: 100%; }
.rc-res-in { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; padding: 0 2px; }
.rc-res-b { flex: 0 0 auto; }
.a-result-podium .rc-podium { width: min(480px, 100%, 54vh); margin-top: min(84px, 10vh); }
@media (max-width: 560px) {
  .rc-res-b { flex-wrap: wrap; }
  .rc-rbtn.pri { order: -1; flex: 1 1 100%; }
  .a-result-podium .rc-podium { width: min(480px, 100%); margin-top: 70px; }
}
.rc-res { display: flex; align-items: center; justify-content: center; }
.rc-res-card, .a-result-board .rc-res-card { box-sizing: border-box; max-height: 100%; flex: 0 1 auto; }
@media (max-width: 560px) {
  .a-result-board .rc-res-card h2 { margin-top: -10px; }
  .a-result-podium .rc-podium { margin-top: 64px; }
}
@media (max-width: 420px) {
  .rc-tbl .rc-tn .rc-head { display: none; }
  .rc-tbl .rc-tn { gap: 3px; }
}
.a-result-podium .rc-podium { width: min(460px, 100%, 44vh); margin-top: min(80px, 9vh); }
@media (max-width: 560px) { .a-result-podium .rc-podium { width: min(460px, 100%); margin-top: 64px; } }
.rc-race.wide .rc-words { grid-template-columns: minmax(200px, 1fr) minmax(0, 940px) minmax(200px, 1fr); }
.rc-race.wide .rc-gslot .rc-gauge { width: clamp(96px, 7vw, 132px); }
.rc-live > div { min-width: 86px; }
.rc-race.wide .rc-side.l { justify-self: end; max-width: 100%; }
/* lobi ayar şeridi: geniş kapta tek satır (etiketsiz, ikon + değer; başlık title'da), çok darda 2×2 etiketli */
.rc-lprev { height: clamp(130px, 13vw, 165px); }
@container (min-width: 330px) {
  .rc-lbar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .rc-lb { height: 36px; padding: 0 6px; gap: 5px; border-radius: 11px; }
  .rc-lb > i { width: 20px; height: 20px; font-size: 13px; border-radius: 7px; }
  .rc-lb small { display: none; }
  .rc-lb b { font-size: 12.5px; }
}
@container (min-width: 560px) {
  .rc-lb { height: 44px; padding: 0 9px 0 7px; gap: 7px; }
  .rc-lb > i { width: 26px; height: 26px; font-size: 15px; }
  .rc-lb small { display: block; }
  .rc-lb b { font-size: 13px; }
}

/* ============================================================
   R8 — başlangıç bariyeri kaldırıldı, sahne göstergesi, kısa ekranda sonuç kartı
   ============================================================ */
/* başlangıç çizgisinin sağındaki kırmızı-beyaz kesik bariyer (GO'da kalkan kapı): görsel kapı ve çizgi varken gereksiz */
.rc-gate { display: none !important; }
/* telefonda hız sol üstte zaten yazıyor: sahnedeki kadran gizli (karakterlere binmesin) */
@media (max-width: 599px) { .rc-stage > .rc-gauge { display: none; } }
/* kısa ekran: kürsü ekran yüksekliğine göre küçülür; 4 satırlık tablo + düğmeler kaydırmadan görünür */
@media (max-height: 900px) and (min-width: 561px) {
  .a-result-podium .rc-podium { width: min(440px, 100%, calc((100vh - 560px) * 1.15)); margin: clamp(46px, calc((100vh - 560px) * 0.32), 84px) auto 8px; }
  .a-result-podium .rc-pod.p1 { top: calc(21.6% - 74px); }
  .a-result-podium .rc-pod.p2 { top: calc(44% - 62px); }
  .a-result-podium .rc-pod.p3 { top: calc(48% - 62px); }
  .rc-pod-ch .rc-head { width: 42px; height: 42px; font-size: 24px; }
  .rc-pod.p1 .rc-pod-ch .rc-head { width: 50px; height: 50px; font-size: 30px; }
  .rc-medal { width: 20px; height: 20px; margin-top: -9px; }
  .rc-pod-tag { padding: 2px 8px 3px; } .rc-pod-tag b { font-size: 12px; } .rc-pod-tag small { font-size: 10.5px; }
  .rc-stats { margin: 4px 0 8px; gap: 6px; }
  .rc-stat { padding: 6px 4px; gap: 1px; } .rc-sti { width: 20px; height: 20px; font-size: 16px; }
  .rc-stat b { font-size: 18px; }
  .rc-tbl { border-spacing: 0 4px; } .rc-tbl td { padding: 6px 8px; }
  .rc-res-b { margin-top: 8px; } .rc-rbtn { height: 48px; } .rc-rbtn.share { flex-basis: 48px; width: 48px; }
  .rc-rec { margin: 0 0 6px; }
}
@media (max-height: 760px) and (min-width: 561px) {
  .rc-res-card { --bt: clamp(56px, 9vw, 84px); }
  .a-result-board .rc-res-card { border-bottom-width: 30px; }
}
@media (max-height: 900px) and (min-width: 561px) {
  .a-result-podium .rc-podium { width: min(440px, 100%, calc((100vh - 520px) * 1.35)); }
  .rc-pod-tag { max-width: 112px; }
  .rc-stat { padding: 5px 4px; } .rc-stat small { font-size: 10.5px; }
  .rc-tbl td { padding: 5px 8px; }
}
@media (max-height: 820px) and (min-width: 561px) {
  .rc-res-card { --bt: clamp(56px, 9vw, 84px); }
  .a-result-board .rc-res-card { border-bottom-width: 30px; }
  .a-result-podium .rc-podium { width: min(440px, 100%, calc((100vh - 520px) * 1.3)); }
}
@media (max-height: 900px) and (min-height: 821px) and (min-width: 561px) {
  .a-result-podium .rc-podium { width: min(440px, 100%, calc((100vh - 570px) * 1.3)); }
}

/* Sonuç kartı: içerik ve düğmeler çerçevenin iç alanında, iki yanda eşit boşluk */
.a-result-board .rc-res-in { padding: 0 clamp(14px, 3vw, 30px); }
.a-result-board .rc-res-b { box-sizing: border-box; width: 100%; padding: 0 clamp(18px, 3.4vw, 34px) clamp(10px, 1.6vh, 16px); margin-top: 12px; }
.rc-res-b .btn { max-width: none; }
.rc-res-b .rc-rbtn.share { flex: 0 0 auto; }
/* Paylaş: sadece X ve Kopyala */
.rc-sh-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Telefon: özet kutuları tek satır, küçük → tablo da görünsün */
@media (max-width: 600px) {
  .rc-stats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; margin: 4px 0 8px !important; }
  .rc-stat, .rc-stat.s-score { grid-column: auto !important; order: 0 !important; flex-direction: column !important; padding: 5px 2px !important; gap: 0 !important; }
  .rc-stat .rc-sti, .rc-stat.s-score .rc-sti { width: 16px; height: 16px; font-size: 13px; }
  .rc-stat b, .rc-stat.s-score b { font-size: 15px !important; line-height: 1.15; }
  .rc-stat small { font-size: 9.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .a-result-board .rc-res-in { padding: 0 8px; }
  .a-result-board .rc-res-b { padding: 0 12px 8px; }
}
/* Çok kısa telefon: kürsü küçülür, tablo görünsün */
@media (max-width: 600px) and (max-height: 720px) {
  .rc-podium { transform: scale(0.72); transform-origin: 50% 0; margin-bottom: -78px !important; }
  .rc-res-card h2 { margin-bottom: 2px !important; }
}