/* =====================================================================
   Cycle Sprint - Capa de mejora "ULTRA" (estilos)
   No modifica el juego: todo vive en #cs-layer por encima del <canvas>.
   ===================================================================== */
#cs-layer {
    position: fixed; inset: 0; z-index: 9000; pointer-events: none;
    font-family: "Montserrat", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
#cs-layer * { box-sizing: border-box; }

/* ---- Lienzo de efectos (partículas/confeti) ---- */
#cs-fx { position: absolute; inset: 0; pointer-events: none; }
#cs-fx.cs-shake { animation: cs-shake .22s linear; }
@keyframes cs-shake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-4px,2px); } 40% { transform: translate(4px,-2px); }
    60% { transform: translate(-3px,-2px); } 80% { transform: translate(3px,2px); }
}

/* ---- Botón flotante ---- */
/* Botón flotante = spinner 360° TRANSPARENTE (imágenes de sprites/boton ai) */
.cs-fab {
    position: absolute; right: calc(8px + env(safe-area-inset-right,0px));
    top: 50%; width: 108px; height: 58px; margin-top: -29px;
    background: none; border: none; box-shadow: none; border-radius: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: grab; pointer-events: auto; touch-action: none;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease;
}
.cs-fab:hover { transform: scale(1.06); }
.cs-fab:active { cursor: grabbing; transform: scale(.96); }
.cs-fabimg {
    width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.cs-fab.cs-bot-on .cs-fabimg {
    filter: drop-shadow(0 0 7px #6cff8a) drop-shadow(0 0 3px #6cff8a);
    animation: cs-fabpulse 1.4s infinite;
}
@keyframes cs-fabpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 620px) { .cs-fab { width: 84px; height: 46px; margin-top: -23px; } }

/* Botón 360° IZQUIERDA (mejorar la bici) — cuadrado, mismo nivel que el de la derecha */
.cs-fab-left { right: auto; left: calc(8px + env(safe-area-inset-left,0px)); width: 68px; height: 68px; margin-top: -34px; }
.cs-fab-left .cs-fabimg { object-fit: cover; border-radius: 16px; border: 2px solid rgba(120,200,255,.6); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.cs-fab-left:hover .cs-fabimg { border-color: #6fe3ff; }
@media (max-width: 620px) { .cs-fab-left { width: 54px; height: 54px; margin-top: -27px; } }

/* ---- Fondo oscuro ---- */
.cs-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 4; }
.cs-backdrop.cs-open { opacity: 1; pointer-events: auto; }

/* ---- Panel con pestañas ---- */
.cs-panel {
    position: absolute; left: 50%; bottom: 0; width: min(440px,96vw);
    transform: translate(-50%,110%);
    background: linear-gradient(180deg,#0f2233 0%,#0a1622 100%);
    border: 1px solid rgba(120,200,255,.35); border-bottom: none; border-radius: 18px 18px 0 0;
    color: #eaf6ff; pointer-events: auto; box-shadow: 0 -8px 30px rgba(0,0,0,.5);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    max-height: 90vh; display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom,0px);
    z-index: 6;
}
.cs-panel.cs-open { transform: translate(-50%,0); }
.cs-phead { padding: 14px 18px 6px; display: flex; align-items: center; justify-content: space-between; }
.cs-phead h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.cs-phead h2 span { color: #6fe3ff; font-size: 12px; opacity: .8; }
.cs-globe { border: 1px solid rgba(120,200,255,.4); background: rgba(255,255,255,.06); color: #fff; font-size: 18px; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; }
.cs-globe:active { transform: scale(.92); }

/* ---- Selector de idiomas (modal buscable) ---- */
.cs-langmodal { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; pointer-events: auto; z-index: 10; }
.cs-langcard { width: min(440px,94vw); max-height: 86vh; background: linear-gradient(180deg,#0f2233,#0a1622); border: 1px solid rgba(120,200,255,.4); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.cs-langtop { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cs-langtop b { font-size: 15px; color: #6fe3ff; }
.cs-langx { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }
.cs-langsearch { margin: 12px 16px; padding: 11px 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: #fff; font-size: 15px; font-family: inherit; }
.cs-langlist { overflow-y: auto; padding: 0 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cs-langit { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 9px 11px; color: #eaf6ff; cursor: pointer; }
.cs-langit:hover { background: rgba(27,138,214,.2); }
.cs-langit.cs-sel { background: rgba(27,138,214,.3); border-color: #1b8ad6; }
.cs-langit span { font-size: 13px; font-weight: 700; }
.cs-langit small { font-size: 10px; opacity: .55; }

/* pestañas */
.cs-tabs { display: flex; gap: 4px; padding: 0 10px; }
.cs-tab {
    flex: 1; border: none; background: rgba(255,255,255,.04); color: #bcd9ee;
    border-radius: 9px 9px 0 0; padding: 9px 2px; font-size: 12px; font-weight: 700; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.cs-tab.cs-sel { background: rgba(27,138,214,.22); color: #fff; border-bottom-color: #1b8ad6; }
.cs-tabs .cs-tab { font-size: 16px; padding: 9px 0; }

/* ---- Slider ---- */
.cs-slider { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 130px; height: 6px; border-radius: 6px; background: #33485c; outline: none; }
.cs-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #1b8ad6; cursor: pointer; border: 2px solid #fff; }
.cs-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #1b8ad6; cursor: pointer; border: 2px solid #fff; }

/* ---- Mapa de calor ---- */
.cs-heat { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin-bottom: 12px; }
.cs-hcell { aspect-ratio: 1/1; border-radius: 4px; background: rgba(255,255,255,.06); }
.cs-hcell.cs-h1 { background: #1b5e8a; } .cs-hcell.cs-h2 { background: #2a9fd6; } .cs-hcell.cs-h3 { background: #6fe3ff; }

/* ---- Tienda ---- */
.cs-shopgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 12px; }
.cs-shopit { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 10px; text-align: center; cursor: pointer; }
.cs-shopit.cs-sel { border-color: #6fe3ff; background: rgba(111,227,255,.12); }
.cs-shopit b { display: block; font-size: 13px; margin: 5px 0 2px; } .cs-shopit span { font-size: 11px; opacity: .7; }
.cs-swatch { height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); }

/* ---- Bio ---- */
.cs-biogrid { margin-bottom: 8px; }
.cs-biogrid .cs-input { display: block; width: 100%; margin-bottom: 7px; }

/* ---- Spinners 360° (bajo el botón Play, en el menú) ---- */
#cs-360 {
    position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; z-index: 3;
}
.cs-360tile {
    width: 90px; height: 90px; border-radius: 12px; overflow: hidden; position: relative;
    cursor: grab; pointer-events: auto; background: #08141e; border: 2px solid rgba(120, 200, 255, .55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5); touch-action: none; user-select: none; -webkit-user-select: none;
    transition: transform .12s ease, border-color .12s ease;
}
.cs-360tile:hover { transform: translateY(-3px); border-color: #6fe3ff; }
.cs-360tile:active { cursor: grabbing; }
.cs-360img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.cs-360lbl {
    position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; font-weight: 800; text-align: center;
    color: #dff1ff; background: linear-gradient(0deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0)); padding: 9px 2px 3px; pointer-events: none;
}
.cs-360spin { position: absolute; top: 3px; right: 5px; font-size: 12px; color: #6fe3ff; opacity: .85; pointer-events: none; }
.cs-360tile.cs-360menu { border-color: rgba(255,210,63,.8); box-shadow: 0 0 14px rgba(255,210,63,.35); }
.cs-360tile.cs-360menu .cs-360lbl { color: #ffd23f; }
.cs-360tile.cs-360menu .cs-360spin { color: #ffd23f; }
@media (max-width: 620px) { .cs-360tile { width: 60px; height: 60px; } .cs-360lbl { font-size: 8px; padding-top: 6px; } }
@media (max-width: 380px) { .cs-360tile { width: 52px; height: 52px; } }

/* ===== Panel "Mejorar la bici" — CLON VISUAL del editor (pantalla completa) ===== */
.cs-bikeshop {
    position: absolute; inset: 0; z-index: 11; pointer-events: auto;
    background: radial-gradient(125% 95% at 50% 18%, #15436b 0%, #0a1d31 52%, #050b12 100%);
    display: flex; flex-direction: column;
}
/* cabecera */
.cs-bshdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 6px; }
.cs-bstitle { font-size: 23px; font-weight: 800; color: #eaf6ff; letter-spacing: .5px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.cs-bsx { width: 48px; height: 48px; border-radius: 11px; border: 2px solid rgba(160,220,255,.7);
    background: linear-gradient(160deg,#16cdeb,#0b6ec9); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.cs-bsx:active { transform: scale(.93); }
/* resumen de la bici (chips) */
.cs-bssum { display: flex; gap: 8px; padding: 4px 16px 10px; justify-content: center; flex-wrap: wrap; }
.cs-bsstat { min-width: 80px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(120,200,255,.18); border-radius: 11px; padding: 7px 12px; }
.cs-bsstat b { display: block; font-size: 17px; } .cs-bsstat span { font-size: 9px; opacity: .65; text-transform: uppercase; letter-spacing: .5px; }
.cs-bsstat.cs-hot { background: rgba(46,203,106,.2); border-color: rgba(46,203,106,.5); } .cs-bsstat.cs-hot b { color: #6cff8a; }
/* escenario central: ciclista pedaleando (izq) + opciones (der) */
.cs-bsstage { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 4px 18px 0; }
.cs-bsrider { flex: 0 0 38%; position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; }
.cs-rider-cv { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-rider-shuf { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 11px; border: 2px solid rgba(160,220,255,.7); background: linear-gradient(160deg,#16cdeb,#0b6ec9); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.cs-rider-shuf:active { transform: scale(.92); }
.cs-bsright { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cs-bscattitle { font-size: 17px; font-weight: 800; color: #6fe3ff; text-align: center; padding: 6px 0 12px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.cs-bscontent { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 11px; align-content: start; padding-bottom: 14px; }
.cs-bsempty { grid-column: 1/-1; text-align: center; opacity: .6; padding: 40px; font-size: 14px; }
/* fila inferior: 7 categorías giratorias 360° (como los iconos del editor) */
.cs-bscats { display: flex; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom,0px)); justify-content: center; overflow-x: auto; }
.cs-bscat { flex: 0 0 auto; width: 96px; background: rgba(10,30,48,.7); border: 2px solid rgba(120,200,255,.45); border-radius: 13px; padding: 6px; cursor: grab; color: #cfe9ff; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: transform .12s, border-color .12s, box-shadow .12s; }
.cs-bscat:hover { transform: translateY(-3px); }
.cs-bscat:active { cursor: grabbing; }
.cs-bscatimg { width: 100%; height: 60px; object-fit: cover; border-radius: 8px; display: block; pointer-events: none; }
.cs-bscat span { display: block; font-size: 11px; font-weight: 700; text-align: center; margin-top: 5px; }
.cs-bscat.cs-sel { border-color: #6fe3ff; background: rgba(111,227,255,.18); box-shadow: 0 0 16px rgba(111,227,255,.5); }
/* tarjetas de opción */
.cs-bsopt { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; }
.cs-bsopt.cs-sel { border-color: #2ecb6a; background: rgba(46,203,106,.1); box-shadow: 0 0 14px rgba(46,203,106,.25); }
.cs-bshead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cs-bshead b { font-size: 14px; line-height: 1.25; }
.cs-bstier { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: #102030; background: #6fe3ff; border-radius: 6px; padding: 2px 7px; }
.cs-bsopt p { margin: 0; font-size: 12px; opacity: .82; line-height: 1.4; }
.cs-bsstats { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-bsstats i { font-style: normal; font-size: 11px; font-weight: 700; background: rgba(120,200,255,.18); color: #cfe9ff; border-radius: 6px; padding: 2px 7px; }
.cs-bsstats i.cs-bsreal { background: rgba(255,210,63,.16); color: #ffd23f; }
.cs-bsopt .cs-act { align-self: flex-end; margin-top: 2px; }
@media (max-width: 760px) {
    .cs-bsstage { flex-direction: column; }
    .cs-bsrider { flex: 0 0 auto; height: 30vh; }
}
@media (max-width: 620px) {
    .cs-bstitle { font-size: 18px; } .cs-bscat { width: 70px; } .cs-bscatimg { height: 44px; }
    .cs-bscontent { grid-template-columns: 1fr; }
}

/* ===== PRO-TOUR HQ (barra de recursos + tablero + paneles) ===== */
.cs-hqbar { position: absolute; top: calc(6px + env(safe-area-inset-top,0px)); left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; pointer-events: auto; z-index: 2;
    background: rgba(8,20,30,.72); border: 1px solid rgba(120,200,255,.35); border-radius: 22px; padding: 5px 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.45); max-width: 92vw; }
.cs-hqr { font-size: 12px; font-weight: 700; color: #dff1ff; background: rgba(255,255,255,.07); padding: 4px 9px; border-radius: 13px; white-space: nowrap; }
.cs-hqopen { font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(160deg,#16cdeb,#0b6ec9); border: none; border-radius: 13px; padding: 5px 12px; cursor: pointer; }
.cs-hqopen:active { transform: scale(.94); }
/* tablero */
.cs-hqgrid { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; }
.cs-hqrow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cs-hqbtn { width: 96px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: rgba(10,30,48,.7); border: 2px solid rgba(120,200,255,.4); border-radius: 14px; color: #eaf6ff; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: transform .12s, border-color .12s, box-shadow .12s; }
.cs-hqbtn:hover { transform: translateY(-3px); border-color: #6fe3ff; box-shadow: 0 0 16px rgba(111,227,255,.4); }
.cs-hqbtn:active { transform: scale(.95); }
.cs-hqi { font-size: 30px; line-height: 1; }
.cs-hqlbl { font-size: 11px; font-weight: 800; letter-spacing: .4px; }
.cs-hqfoot { text-align: center; font-size: 11px; opacity: .5; padding: 10px; }
/* paneles genéricos */
.cs-pxbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; }
.cs-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-card b { font-size: 15px; }
.cs-card p { width: 100%; margin: 0; font-size: 12px; opacity: .8; line-height: 1.4; }
.cs-card .cs-act { margin-left: auto; }
.cs-rankrow { display: flex; justify-content: space-between; padding: 9px 12px; background: rgba(255,255,255,.04); border-radius: 9px; margin-bottom: 6px; font-size: 13px; }
.cs-rankrow.cs-sel { background: rgba(46,203,106,.16); border: 1px solid rgba(46,203,106,.5); }
.cs-chatbox { max-height: 46vh; overflow-y: auto; margin-bottom: 10px; }
.cs-chatmsg { padding: 8px 12px; background: rgba(255,255,255,.05); border-radius: 10px; margin-bottom: 6px; font-size: 13px; }
.cs-shopsec { font-size: 13px; font-weight: 800; color: #6fe3ff; margin: 16px 2px 8px; text-transform: uppercase; letter-spacing: .5px; }
/* Personalizador 3D (iframe a pantalla completa) */
.cs-persoframe { flex: 1; width: 100%; border: none; background: #0a1622; display: block; }
@media (max-width: 620px) { .cs-hqbtn { width: 74px; height: 70px; } .cs-hqi { font-size: 24px; } .cs-hqlbl { font-size: 9px; } .cs-hqr { font-size: 10px; padding: 3px 6px; } }

/* ---- Pantallas muy pequeñas ---- */
@media (max-width: 380px) {
    .cs-slider, .cs-input { width: 100px; }
    .cs-select { width: 120px; }
    .cs-tabs .cs-tab { font-size: 14px; }
}

.cs-body { padding: 14px 16px 18px; overflow-y: auto; }

/* ---- Filas ---- */
.cs-row { display: flex; align-items: center; gap: 11px; padding: 11px; margin-bottom: 9px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.cs-row.cs-danger { border-color: rgba(255,90,90,.4); }
.cs-ico { font-size: 22px; width: 28px; text-align: center; flex: 0 0 auto; }
.cs-txt { flex: 1 1 auto; min-width: 0; }
.cs-txt b { display: block; font-size: 14px; }
.cs-txt span { display: block; font-size: 11px; opacity: .65; margin-top: 2px; }

.cs-act { flex: 0 0 auto; border: none; border-radius: 9px; padding: 9px 14px; font-size: 13px;
    font-weight: 700; color: #fff; background: #1b8ad6; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.cs-act:active { transform: scale(.94); }
.cs-row.cs-danger .cs-act { background: #c0392b; }

/* interruptor */
.cs-switch { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 30px; background: #33485c; position: relative; cursor: pointer; transition: background .2s ease; }
.cs-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s ease; }
.cs-switch.cs-on { background: #2ecb6a; }
.cs-switch.cs-on::after { left: 25px; }

/* segmentos */
.cs-lbl { font-size: 11px; opacity: .6; margin: 4px 2px 6px; text-transform: uppercase; letter-spacing: .5px; }
.cs-seg { display: flex; gap: 6px; margin-bottom: 12px; }
.cs-seg button { flex: 1; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: #cfe9ff; border-radius: 9px; padding: 8px 4px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cs-seg button.cs-sel { background: #1b8ad6; color: #fff; border-color: #1b8ad6; }

/* ---- Perfil ---- */
.cs-input, .cs-select { flex: 0 0 auto; width: 130px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 8px; padding: 8px; font-size: 14px; font-family: inherit; }
.cs-select { width: 150px; }
.cs-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-bottom: 12px; }
.cs-chip { font-size: 22px; padding: 7px 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; cursor: pointer; }
.cs-chip.cs-sel { border-color: #6fe3ff; background: rgba(111,227,255,.18); }
.cs-colors { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cs-color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.cs-color.cs-sel { border-color: #fff; transform: scale(1.1); }
.cs-idcard { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 2px solid; border-radius: 14px; background: rgba(255,255,255,.04); }
.cs-av { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #102030; }
.cs-idcard b { font-size: 16px; } .cs-idcard span { display: block; font-size: 11px; opacity: .7; }

/* ---- Stats / récords ---- */
.cs-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.cs-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 6px; text-align: center; }
.cs-sico { font-size: 18px; } .cs-stat b { display: block; font-size: 18px; margin: 2px 0; } .cs-stat span { font-size: 10px; opacity: .6; }

/* ---- Medallas ---- */
.cs-ach { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.cs-badge { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px; text-align: center; opacity: .5; }
.cs-badge.cs-un { opacity: 1; border-color: rgba(255,210,63,.5); background: rgba(255,210,63,.08); }
.cs-bico { font-size: 26px; } .cs-badge b { display: block; font-size: 12px; margin-top: 4px; } .cs-badge span { display: block; font-size: 10px; opacity: .65; margin-top: 2px; }

/* ---- Retos / duelo ---- */
.cs-quest { background: rgba(27,138,214,.12); border: 1px solid rgba(111,227,255,.3); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.cs-quest.cs-done { background: rgba(46,203,106,.14); border-color: rgba(46,203,106,.5); }
.cs-quest.cs-duel { background: rgba(192,57,43,.12); border-color: rgba(255,120,100,.4); }
.cs-qhead { font-size: 13px; font-weight: 800; } .cs-qbody { font-size: 15px; margin: 6px 0; } .cs-qfoot { font-size: 12px; opacity: .8; }
.cs-vslist { margin-top: 8px; } .cs-vsrow { display: flex; justify-content: space-between; padding: 7px 10px; background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 5px; font-size: 13px; }

/* ---- Caja de código / textarea ---- */
.cs-codebox { width: 100%; height: 70px; margin-top: 8px; background: rgba(0,0,0,.35); color: #9fe; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; font-size: 10px; padding: 8px; word-break: break-all; resize: none; }

.cs-foot { text-align: center; font-size: 10px; opacity: .45; margin-top: 10px; }
.cs-hide { display: none !important; }

/* ---- Toast / Tip / HUD bot / Stats en vivo ---- */
.cs-toast { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(10px);
    background: rgba(15,30,45,.96); color: #eaf6ff; border: 1px solid rgba(120,200,255,.4);
    padding: 10px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; max-width: 90vw; text-align: center; z-index: 5; }
.cs-toast.cs-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.cs-tip { position: absolute; left: 50%; bottom: 130px; transform: translateX(-50%) translateY(10px);
    background: rgba(8,22,34,.96); color: #eaf6ff; border: 1px solid rgba(255,210,63,.45);
    padding: 12px 16px; border-radius: 12px; max-width: min(420px,92vw); opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; text-align: center; }
.cs-tip.cs-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cs-tip b { display: block; color: #ffd23f; font-size: 13px; margin-bottom: 4px; }
.cs-tip span { font-size: 13px; line-height: 1.35; }

.cs-bot-hud { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%);
    background: rgba(8,20,30,.82); border: 1px solid #6cff8a; color: #6cff8a; font-size: 12px; font-weight: 700;
    letter-spacing: .5px; padding: 5px 12px; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.cs-bot-hud.cs-show { opacity: 1; }

.cs-live { position: absolute; left: 50%; top: calc(54px + env(safe-area-inset-top,0px)); transform: translateX(-50%);
    background: rgba(8,20,30,.78); border: 1px solid rgba(120,200,255,.4); color: #dff1ff; font-size: 12px; font-weight: 700;
    padding: 5px 14px; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .25s ease; white-space: nowrap; }
.cs-live.cs-show { opacity: 1; }