/* Rocket League · OLAP — interfaz calcada del original de Psyonix */
:root {
  --font: "Saira Semi Condensed", "Arial Narrow", Arial, sans-serif;
  /* 1u ≈ 1 px a 1920 × 1080: todo el HUD escala con la pantalla */
  --u: max(0.62px, min(0.1vh, 0.0563vw));
  --blue: #2f7cf0;
  --orange: #f07a1a;
  --cyan: #b8ecff;
  --gold: #ffc53d;
  --ink: #eef4ff;
  --muted: #9cb0cf;
  --btn: rgba(3, 8, 18, 0.74);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050a18; color: var(--ink); font-family: var(--font); }
body { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button, select, input { font-family: inherit; }
[hidden] { display: none !important; }
kbd { font-family: var(--font); }

.stage { position: fixed; inset: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.in-match .stage { cursor: none; }
.shade { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(0, 4, 14, 0.6), rgba(0, 4, 14, 0.15) 42%, rgba(0, 4, 14, 0) 60%); }

/* tecla o botón dentro de un texto: círculo dorado como en el original */
.key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; height: 1.75em; padding: 0 0.45em; margin: 0 0.15em; border: 0.12em solid var(--gold); border-radius: 0.9em; color: var(--gold); font-weight: 600; font-size: 0.82em; line-height: 1; vertical-align: middle; box-shadow: 0 0 0.4em rgba(255, 180, 40, 0.35); }

/* ------------------------------------------------------------------ HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud svg { overflow: visible; }

/* marcador arriba en el centro: [azul] [reloj] [naranja] */
.sb { position: absolute; top: calc(var(--u) * 12); left: 50%; transform: translateX(-50%); display: flex; height: calc(var(--u) * 56); filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 7) rgba(0, 0, 0, 0.55)); }
.sb-team { width: calc(var(--u) * 76); display: flex; align-items: center; justify-content: center; }
.sb-blue { background: linear-gradient(150deg, #5aa2ff 0%, #2a6cf0 45%, #1a44b0 100%); clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%); box-shadow: inset calc(var(--u) * -3) 0 0 #c9ecff; }
.sb-orange { background: linear-gradient(210deg, #ffae5a 0%, #f0741a 45%, #b04808 100%); clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%); box-shadow: inset calc(var(--u) * 3) 0 0 #ffe0c2; }
.sb-mid { width: calc(var(--u) * 176); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(26, 36, 62, 0.94), rgba(6, 10, 22, 0.94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.6); }
.sb-num svg { height: calc(var(--u) * 36); width: auto; display: block; }
.sb-clock svg { height: calc(var(--u) * 31); width: auto; display: block; }
.sb.pop .sb-num { animation: sbPop 0.7s ease; }
@keyframes sbPop { 30% { transform: scale(1.4); filter: drop-shadow(0 0 calc(var(--u) * 10) #fff); } }
.sb-ot { position: absolute; top: calc(var(--u) * 72); left: 50%; transform: translateX(-50%); font-weight: 500; font-size: calc(var(--u) * 17); letter-spacing: 0.14em; color: var(--gold); text-shadow: 0 0 calc(var(--u) * 8) rgba(255, 150, 0, 0.8); }

/* puntos de las jugadas: debajo del marcador */
.pops { position: absolute; top: calc(var(--u) * 104); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.pop { text-align: center; animation: popIn 0.28s ease-out; transition: opacity 0.4s, transform 0.4s; }
.pop b { display: block; font-weight: 500; font-size: calc(var(--u) * 28); letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 calc(var(--u) * 10) rgba(110, 190, 255, 0.85), 0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(0, 0, 0, 0.6); }
.pop span { display: block; margin-top: calc(var(--u) * -4); font-weight: 500; font-size: calc(var(--u) * 19); color: #d8eeff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.pop.out { opacity: 0; transform: translateY(calc(var(--u) * -12)); }
@keyframes popIn { from { opacity: 0; transform: scale(1.5); } }

/* sucesos arriba a la derecha: pastillas con el color del equipo */
.feed { position: absolute; top: calc(var(--u) * 16); right: calc(var(--u) * 24); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 7); }
.feed li { display: flex; align-items: center; gap: calc(var(--u) * 8); animation: feedIn 0.3s ease-out; transition: opacity 0.4s, transform 0.4s; }
.feed li.out { opacity: 0; transform: translateX(calc(var(--u) * 30)); }
.feed svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); filter: drop-shadow(0 0 calc(var(--u) * 4) rgba(0, 0, 0, 0.8)); }
@keyframes feedIn { from { opacity: 0; transform: translateX(calc(var(--u) * 40)); } }
.pill { display: inline-block; padding: calc(var(--u) * 2) calc(var(--u) * 13); border-radius: calc(var(--u) * 14); font-weight: 600; font-size: calc(var(--u) * 18); line-height: 1.3; color: #fff; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, 0.45); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.pill.t0 { background: linear-gradient(180deg, #4592ff, #1c56cf); }
.pill.t1 { background: linear-gradient(180deg, #ffa048, #db5c0a); }

/* textos grandes: dorados, finos y con brillo */
.hud .center { position: absolute; left: 0; right: 0; top: 25%; text-align: center; }
.c-big { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 22); min-height: 1em; font-weight: 300; font-size: calc(var(--u) * 74); line-height: 1.05; letter-spacing: 0.02em; color: #ffc93c; text-shadow: 0 0 calc(var(--u) * 5) rgba(255, 150, 0, 0.95), 0 0 calc(var(--u) * 22) rgba(255, 110, 0, 0.55); }
.c-big:empty { display: none; }
.c-big.show { animation: bigIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.c-big svg { height: calc(var(--u) * 150); width: auto; filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 150, 0, 0.9)) drop-shadow(0 0 calc(var(--u) * 20) rgba(255, 110, 0, 0.5)); }
.c-big .chev { font-weight: 400; font-size: 0.55em; letter-spacing: -0.12em; opacity: 0.9; }
.c-big.t0 { color: #c6ecff; text-shadow: 0 0 calc(var(--u) * 5) rgba(70, 170, 255, 0.95), 0 0 calc(var(--u) * 22) rgba(40, 120, 255, 0.6); }
.c-big.t1 { color: #ffd2a6; text-shadow: 0 0 calc(var(--u) * 5) rgba(255, 140, 40, 0.95), 0 0 calc(var(--u) * 22) rgba(255, 100, 0, 0.6); }
.c-sub { margin-top: calc(var(--u) * 6); font-weight: 400; font-size: calc(var(--u) * 26); letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 calc(var(--u) * 8) rgba(0, 0, 0, 0.8); }
@keyframes bigIn { from { opacity: 0; transform: scale(1.6); } }

/* turbo abajo a la derecha: disco oscuro, aro fino y barras naranjas de las 6 a las 3 */
.boost { position: absolute; right: calc(var(--u) * 28); bottom: calc(var(--u) * 22); width: calc(var(--u) * 222); height: calc(var(--u) * 222); }
.boost svg { width: 100%; height: 100%; }
.b-disc { fill: rgba(0, 3, 10, 0.5); }
.b-ring { fill: none; stroke: #c26f22; stroke-width: 1.3; }
#b-ticks line { stroke: #c26f22; stroke-width: 1.3; stroke-linecap: round; }
#b-segs path { fill: rgba(255, 140, 20, 0.1); transition: fill 0.08s; }
#b-segs path.on { fill: #ff9a1c; }
#b-segs path.hot { fill: #ffd04a; }
.boost.boosting #b-segs path.on { fill: #ffb42e; }
.b-edge { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)); }
#b-segs { filter: drop-shadow(0 0 3px rgba(255, 130, 0, 0.75)); }
.b-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.b-num svg { height: calc(var(--u) * 58); width: auto; filter: drop-shadow(0 0 calc(var(--u) * 5) rgba(255, 150, 20, 0.75)); }
.boost.empty .b-num { opacity: 0.7; }

/* cámara del balón abajo a la izquierda */
.camtag { position: absolute; left: calc(var(--u) * 40); bottom: calc(var(--u) * 34); }
.ct-main { display: flex; align-items: center; gap: calc(var(--u) * 10); font-weight: 500; font-size: calc(var(--u) * 31); letter-spacing: 0.02em; color: #ff6b50; text-shadow: 0 0 calc(var(--u) * 10) rgba(255, 70, 40, 0.8); }
.ct-main i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 calc(var(--u) * 10) #ff3a1a; }
.camtag.off .ct-main { color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.camtag.off .ct-main i { background: transparent; border: calc(var(--u) * 2) solid rgba(255, 255, 255, 0.6); box-shadow: none; }
.ct-sub { margin: calc(var(--u) * 4) 0 0 calc(var(--u) * 25); font-weight: 500; font-size: calc(var(--u) * 17); letter-spacing: 0.03em; color: #e8eef8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }

.fp-tip { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 12); font-weight: 500; font-size: calc(var(--u) * 17); letter-spacing: 0.03em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.hint { position: absolute; left: 50%; bottom: calc(var(--u) * 140); transform: translateX(-50%); padding: calc(var(--u) * 8) calc(var(--u) * 20); background: rgba(4, 12, 28, 0.82); border: 1px solid rgba(120, 200, 255, 0.45); font-weight: 500; font-size: calc(var(--u) * 20); letter-spacing: 0.03em; white-space: nowrap; }
.hud-pause { pointer-events: auto; position: absolute; left: 12px; top: 12px; width: 42px; height: 42px; border: 1px solid rgba(120, 200, 255, 0.5); background: rgba(6, 14, 30, 0.7); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; display: none; }
body.is-touch .hud-pause { display: block; }
body.is-touch .camtag, body.is-touch .ct-sub { display: none; }
.fps { position: absolute; left: 12px; top: 60px; font: 700 12px/1.3 monospace; background: rgba(0, 0, 0, 0.5); padding: 4px 6px; white-space: pre; }

/* nombres sobre los coches */
.tags { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; padding: calc(var(--u) * 1) calc(var(--u) * 13); border-radius: calc(var(--u) * 13); font-weight: 600; font-size: calc(var(--u) * 17); line-height: 1.3; color: #fff; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.4); will-change: transform; }
.tag.t0 { background: linear-gradient(180deg, #4592ff, #1c56cf); }
.tag.t1 { background: linear-gradient(180deg, #ffa048, #db5c0a); }

/* repetición: marco oscuro, rótulo rojo abajo a la izquierda y «marcado por» */
.replay { position: absolute; inset: 0; }
.rp-frame { position: absolute; inset: 0; box-shadow: inset 0 0 calc(var(--u) * 150) calc(var(--u) * 30) rgba(0, 0, 0, 0.62); }
.rp-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 130); background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
.rp-tag { position: absolute; left: calc(var(--u) * 40); bottom: calc(var(--u) * 36); display: flex; align-items: center; gap: calc(var(--u) * 10); font-weight: 400; font-size: calc(var(--u) * 36); letter-spacing: 0.03em; color: #ff5a44; text-shadow: 0 0 calc(var(--u) * 10) rgba(255, 60, 40, 0.85); }
.rp-tag i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%; background: #ff4a33; box-shadow: 0 0 calc(var(--u) * 10) #ff2a10; animation: blink 1.1s steps(2, end) infinite; }
.rp-skip { position: absolute; right: calc(var(--u) * 40); bottom: calc(var(--u) * 44); font-weight: 500; font-size: calc(var(--u) * 18); letter-spacing: 0.03em; color: #fff; }
.scored { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); animation: scoredIn 0.5s ease-out; }
.scored-cap { font-weight: 500; font-size: calc(var(--u) * 20); letter-spacing: 0.06em; color: #7fc6ff; text-shadow: 0 0 calc(var(--u) * 6) rgba(40, 140, 255, 0.8); }
.scored-bar { position: relative; display: flex; align-items: center; min-width: calc(var(--u) * 460); height: calc(var(--u) * 70); padding-right: calc(var(--u) * 90); background: linear-gradient(90deg, rgba(46, 116, 210, 0.95), rgba(28, 84, 170, 0.62)); border: 1px solid rgba(150, 210, 255, 0.45); }
.scored-bar.t1 { background: linear-gradient(90deg, rgba(230, 116, 30, 0.95), rgba(170, 70, 14, 0.62)); border-color: rgba(255, 200, 150, 0.45); }
.scored-bar::after { content: ""; position: absolute; right: calc(var(--u) * 12); top: 50%; width: calc(var(--u) * 70); height: calc(var(--u) * 40); transform: translateY(-50%); opacity: 0.25; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23fff' d='M4 22c0-3 2-5 5-6l8-2 8-7h16l9 7 7 1c3 1 4 3 4 5v4h-4a6 6 0 0 0-12 0H23a6 6 0 0 0-12 0H4z'/%3E%3C/svg%3E"); }
.scored-bar b { font-weight: 500; font-size: calc(var(--u) * 36); padding: 0 calc(var(--u) * 18); white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.scored-bar .av { width: calc(var(--u) * 78); height: calc(var(--u) * 78); margin-left: calc(var(--u) * -10); }
.scored-stats { display: flex; gap: calc(var(--u) * 34); font-weight: 400; font-size: calc(var(--u) * 28); color: #8fd0ff; text-shadow: 0 0 calc(var(--u) * 6) rgba(40, 140, 255, 0.7); }
.scored-stats span { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.scored-stats svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.scored-stats small { font-size: 0.62em; }
@keyframes scoredIn { from { opacity: 0; transform: translate(-50%, calc(var(--u) * 20)); } }
@keyframes blink { 50% { opacity: 0.25; } }

/* avatares con esquinas blancas */
.av { position: relative; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #2b3f66, #121c33); color: #fff; font-weight: 600; overflow: visible; }
.av::after { content: ""; position: absolute; inset: calc(var(--u) * -3); pointer-events: none;
  background:
    linear-gradient(#fff, #fff) top left / 32% calc(var(--u) * 3) no-repeat, linear-gradient(#fff, #fff) top left / calc(var(--u) * 3) 32% no-repeat,
    linear-gradient(#fff, #fff) top right / 32% calc(var(--u) * 3) no-repeat, linear-gradient(#fff, #fff) top right / calc(var(--u) * 3) 32% no-repeat,
    linear-gradient(#fff, #fff) bottom left / 32% calc(var(--u) * 3) no-repeat, linear-gradient(#fff, #fff) bottom left / calc(var(--u) * 3) 32% no-repeat,
    linear-gradient(#fff, #fff) bottom right / 32% calc(var(--u) * 3) no-repeat, linear-gradient(#fff, #fff) bottom right / calc(var(--u) * 3) 32% no-repeat; }
.av svg { width: 88%; height: 88%; display: block; }
.av .olap-avatar-badge { width: 100%; height: 100%; margin: 0; }
.av .olap-avatar-badge svg { width: 100%; height: 100%; }
.av .ini { font-size: 1.4em; }

/* ------------------------------------------------------------------ marcador completo */
.board { position: fixed; inset: 0; z-index: 8; display: flex; justify-content: center; align-items: flex-start; padding-top: 13vh; pointer-events: none; }
.bd { width: min(calc(var(--u) * 1040), 94vw); }
.bd-team { margin-bottom: calc(var(--u) * 26); }
.bd-head, .bd-row { display: grid; grid-template-columns: calc(var(--u) * 50) minmax(0, 1fr) repeat(6, calc(var(--u) * 94)); align-items: center; }
.bd-head { align-items: end; }
.bd-title { grid-column: 1 / 3; display: flex; align-items: flex-end; gap: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 4); }
.bd-title svg { height: calc(var(--u) * 42); width: auto; }
.bd-name { font-weight: 300; font-size: calc(var(--u) * 44); line-height: 0.9; letter-spacing: 0.06em; }
.bd-win { display: block; font-weight: 500; font-size: calc(var(--u) * 17); letter-spacing: 0.12em; color: #d6ecff; margin-bottom: calc(var(--u) * 2); }
.t0 .bd-name { color: #9fd4ff; text-shadow: 0 0 calc(var(--u) * 8) rgba(60, 150, 255, 0.85); }
.t1 .bd-name { color: #ffc08a; text-shadow: 0 0 calc(var(--u) * 8) rgba(255, 130, 40, 0.85); }
.bd-col { text-align: center; font-weight: 600; font-size: calc(var(--u) * 14); letter-spacing: 0.05em; color: #fff; padding-bottom: calc(var(--u) * 6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.bd-row { height: calc(var(--u) * 50); margin-top: calc(var(--u) * 4); border-top: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.35); }
.t0 .bd-row { background: linear-gradient(90deg, rgba(44, 110, 232, 0.9), rgba(24, 64, 168, 0.8)); }
.t1 .bd-row { background: linear-gradient(90deg, rgba(236, 120, 32, 0.9), rgba(158, 64, 14, 0.8)); }
.bd-row .av { width: calc(var(--u) * 40); height: calc(var(--u) * 40); margin-left: calc(var(--u) * 5); font-size: calc(var(--u) * 16); }
.bd-row .av::after { inset: calc(var(--u) * -2); }
.bd-pname { min-width: 0; padding-left: calc(var(--u) * 10); display: flex; align-items: center; gap: calc(var(--u) * 10); }
.bd-pname > div { min-width: 0; }
.bd-pname b { display: block; font-weight: 500; font-size: calc(var(--u) * 23); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pname small { display: block; font-weight: 600; font-size: calc(var(--u) * 12); letter-spacing: 0.07em; opacity: 0.85; }
.bd-pname svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); flex: none; }
.bd-row .n { text-align: center; font-weight: 500; font-size: calc(var(--u) * 23); }
.bd-row .ping { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); font-weight: 600; font-size: calc(var(--u) * 18); color: #8cff6a; }
.bd-row .ping.bot { color: #fff; font-size: calc(var(--u) * 16); letter-spacing: 0.08em; }
.bd-row .ping svg { width: calc(var(--u) * 18); height: calc(var(--u) * 14); }

/* ------------------------------------------------------------------ pantallas */
.scr { position: fixed; inset: 0; z-index: 10; }
.panel-scr { display: flex; align-items: center; justify-content: center; background: rgba(0, 4, 14, 0.42); padding: 16px; }

/* títulos finos con brillo cian */
.ttl { margin: 0 0 calc(var(--u) * 16); font-weight: 300; font-size: calc(var(--u) * 58); line-height: 1; letter-spacing: 0.01em; color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 7) rgba(70, 170, 255, 0.95), 0 0 calc(var(--u) * 24) rgba(40, 120, 255, 0.55); }
.ttl.center { text-align: center; }

/* botón del original: paralelogramo oscuro; el elegido, blanco-cian con texto azul */
.b { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 24); border: 0; background: none; color: #f2f6ff; font: 500 calc(var(--u) * 25) / 1 var(--font); letter-spacing: 0.02em; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; outline: none; }
.b::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-16deg); background: var(--btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: background 0.08s, box-shadow 0.08s; }
.b.hl { color: #0f4b8c; }
.b.hl::before { background: linear-gradient(180deg, #ffffff 0%, #e4f5ff 55%, #b8e2ff 100%); box-shadow: 0 0 calc(var(--u) * 14) rgba(140, 210, 255, 0.85); }
.b.open:not(.hl) { color: #fff; }
.b.open:not(.hl)::before { background: linear-gradient(180deg, #4592f2, #2366c8); }
.b.sub { color: #d8e2f2; font-size: calc(var(--u) * 23); }
.b.sub::before { background: linear-gradient(90deg, rgba(3, 8, 18, 0.7), rgba(3, 8, 18, 0.45)); }
.b.sub.hl { color: #0f4b8c; }
.b.sub.hl::before, .b.ghost.hl::before { background: linear-gradient(180deg, #ffffff 0%, #e4f5ff 55%, #b8e2ff 100%); box-shadow: 0 0 calc(var(--u) * 14) rgba(140, 210, 255, 0.85); }
.b.ghost.hl { color: #0f4b8c; }
.b.small { width: auto; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 26); font-size: calc(var(--u) * 19); }
.b.ghost::before { background: rgba(3, 8, 18, 0.45); }
.b.ghost { color: #c9d6ea; }
.menu-desc { margin: calc(var(--u) * 14) 0 0; min-height: 1.3em; font-weight: 400; font-size: calc(var(--u) * 21); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); white-space: normal; }

/* pantalla de título */
.title-scr { display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 50%, rgba(0, 4, 14, 0.1), rgba(0, 4, 14, 0.75)); cursor: pointer; }
.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.84; font-weight: 800; font-size: calc(var(--u) * 170); letter-spacing: -0.005em; color: #fff; text-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(0, 0, 0, 0.6); transform: skewX(-6deg); }
.logo span:last-child { letter-spacing: 0.04em; }
.press { position: absolute; left: 0; right: 0; bottom: 13%; margin: 0; text-align: center; font-weight: 400; font-size: calc(var(--u) * 30); letter-spacing: 0.1em; color: #fff; text-shadow: 0 0 calc(var(--u) * 10) rgba(70, 170, 255, 0.8); animation: pulse 1.8s ease-in-out infinite; }
.press.small { font-size: calc(var(--u) * 20); bottom: 6%; }
.credits { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 14); margin: 0; text-align: center; font-weight: 400; font-size: calc(var(--u) * 14); color: rgba(220, 235, 255, 0.55); }
.opt-note a { color: #8fd0ff; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* menú principal */
.main-scr { pointer-events: none; }
.main-scr > * { pointer-events: auto; }
.menu { position: absolute; left: calc(var(--u) * 58); top: 50%; transform: translateY(-46%); display: flex; align-items: flex-start; gap: calc(var(--u) * 22); }
.menu-col { display: flex; flex-direction: column; gap: calc(var(--u) * 9); width: calc(var(--u) * 340); }
.menu-sub { display: flex; flex-direction: column; gap: calc(var(--u) * 9); width: calc(var(--u) * 300); animation: subIn 0.18s ease-out; }
@keyframes subIn { from { opacity: 0; transform: translateX(calc(var(--u) * -14)); } }
.news { position: absolute; right: calc(var(--u) * 44); top: calc(var(--u) * 84); width: calc(var(--u) * 600); display: flex; }
.news-tab { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 14) calc(var(--u) * 7); background: rgba(8, 30, 62, 0.92); border: 1px solid rgba(110, 190, 255, 0.55); color: #e2f3ff; font-weight: 600; font-size: calc(var(--u) * 19); letter-spacing: 0.16em; }
.news-body { flex: 1; background: linear-gradient(180deg, rgba(10, 34, 70, 0.9), rgba(5, 16, 38, 0.92)); border: 1px solid rgba(110, 190, 255, 0.55); padding: calc(var(--u) * 14); }
.news-art { position: relative; height: calc(var(--u) * 190); overflow: hidden; background: radial-gradient(ellipse at 70% 20%, rgba(255, 150, 40, 0.55), rgba(255, 150, 40, 0) 55%), radial-gradient(ellipse at 20% 90%, rgba(40, 140, 255, 0.7), rgba(40, 140, 255, 0) 60%), linear-gradient(135deg, #0d2350, #1b1030); display: flex; align-items: flex-end; padding: calc(var(--u) * 14); }
.news-art em { position: absolute; right: calc(var(--u) * -10); top: calc(var(--u) * -30); font-style: normal; font-weight: 800; font-size: calc(var(--u) * 190); line-height: 1; color: rgba(255, 255, 255, 0.07); }
.news-art b { position: relative; font-weight: 700; font-size: calc(var(--u) * 34); line-height: 1; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.news-card p { margin: calc(var(--u) * 12) 0 0; min-height: 3.9em; font-weight: 400; font-size: calc(var(--u) * 19); line-height: 1.3; color: #d4e4f7; }
.news-card { animation: newsIn 0.4s ease-out; }
@keyframes newsIn { from { opacity: 0; } }
.news-dots { display: flex; gap: calc(var(--u) * 6); justify-content: center; margin-top: calc(var(--u) * 10); }
.news-dots i { width: calc(var(--u) * 22); height: calc(var(--u) * 5); background: rgba(255, 255, 255, 0.28); transform: skewX(-16deg); }
.news-dots i.on { background: #fff; box-shadow: 0 0 calc(var(--u) * 6) rgba(140, 210, 255, 0.9); }

/* partido de exhibición */
.play-scr { background: linear-gradient(90deg, rgba(0, 6, 20, 0.78), rgba(0, 6, 20, 0.28) 55%, rgba(0, 6, 20, 0)); }
.play-box { position: absolute; left: calc(var(--u) * 58); top: 21%; width: calc(var(--u) * 680); }
.rows { display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.srow { display: grid; grid-template-columns: calc(var(--u) * 250) calc(var(--u) * 330); gap: calc(var(--u) * 16); align-items: center; }
.srow > span { text-align: right; font-weight: 400; font-size: calc(var(--u) * 22); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.pick { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 10); border: 0; background: none; color: #fff; font: 500 calc(var(--u) * 21) / 1 var(--font); letter-spacing: 0.03em; cursor: pointer; outline: none; }
.pick::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-16deg); background: var(--btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.pick .arr { display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 26); height: 100%; font-size: calc(var(--u) * 15); color: #fff; }
.pick.fixed .arr { visibility: hidden; }
.pick.hl { color: #0f4b8c; }
.pick.hl .arr { color: #0f4b8c; }
.pick.hl::before { background: linear-gradient(180deg, #ffffff 0%, #e4f5ff 55%, #b8e2ff 100%); box-shadow: 0 0 calc(var(--u) * 14) rgba(140, 210, 255, 0.85); }
.pick.fixed { color: #b9c6da; }
.play-actions { display: grid; grid-template-columns: calc(var(--u) * 250) calc(var(--u) * 330); gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 16); }
.play-actions .b { grid-column: 2; justify-content: center; }
.play-box .back { margin-top: calc(var(--u) * 26); }

/* paneles (pausa, opciones, trayectoria) */
.pnl { position: relative; max-height: calc(100vh - 32px); overflow-y: auto; padding: calc(var(--u) * 22) calc(var(--u) * 30) calc(var(--u) * 22); background: linear-gradient(180deg, rgba(12, 40, 80, 0.95), rgba(4, 15, 36, 0.96)); border: 1px solid rgba(120, 200, 255, 0.65); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 calc(var(--u) * 34) rgba(40, 140, 255, 0.3), inset 0 0 calc(var(--u) * 44) rgba(40, 120, 255, 0.14); }
.pnl.wide { width: min(calc(var(--u) * 940), 100%); }
.pnl.narrow { width: min(calc(var(--u) * 480), 100%); }
.pbtns { display: flex; flex-direction: column; gap: calc(var(--u) * 11); margin: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 6); }
.pbtns.row { flex-direction: row; justify-content: center; gap: calc(var(--u) * 20); }
.pbtns.row .pb { width: 38%; }
.pb { position: relative; isolation: isolate; height: calc(var(--u) * 46); border: 0; background: none; color: #d8efff; font: 500 calc(var(--u) * 26) / 1 var(--font); letter-spacing: 0.02em; cursor: pointer; outline: none; }
.pb::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-16deg); border-radius: calc(var(--u) * 3); background: linear-gradient(180deg, #2c6ca8, #16426f); box-shadow: inset 0 1px 0 rgba(160, 220, 255, 0.4), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.35); }
.pb.hl { color: #0e4a86; }
.pb.hl::before { background: linear-gradient(180deg, #ffffff, #c4e8ff); box-shadow: 0 0 calc(var(--u) * 16) rgba(140, 210, 255, 0.9); }
.confirm-text { text-align: center; margin: 0; font-size: calc(var(--u) * 21); color: #d8e6f6; }
.pnl-foot { display: flex; align-items: center; gap: calc(var(--u) * 22); margin-top: calc(var(--u) * 16); }
.foot-desc { margin: 0; font-size: calc(var(--u) * 18); color: #fff; }

/* opciones */
.tabs { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7); margin: calc(var(--u) * 4) 0 calc(var(--u) * 16); }
.tab-key { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 30); height: calc(var(--u) * 24); border: 1px solid rgba(200, 230, 255, 0.7); border-radius: calc(var(--u) * 12); font-weight: 600; font-size: calc(var(--u) * 14); color: #dff1ff; }
.tab { position: relative; isolation: isolate; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 18); border: 0; background: none; color: #cfe6ff; font: 500 calc(var(--u) * 19) / 1 var(--font); letter-spacing: 0.03em; cursor: pointer; outline: none; }
.tab::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-16deg); background: rgba(18, 58, 108, 0.85); box-shadow: inset 0 1px 0 rgba(160, 220, 255, 0.3); }
.tab.on { color: #0e4a86; }
.tab.on::before { background: linear-gradient(180deg, #ffffff, #c4e8ff); box-shadow: 0 0 calc(var(--u) * 12) rgba(140, 210, 255, 0.85); }
.tab.on::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -9); transform: translateX(-50%); border: calc(var(--u) * 6) solid transparent; border-top-color: #c4e8ff; }
.opt-body { min-height: calc(var(--u) * 330); padding: calc(var(--u) * 12) calc(var(--u) * 22); background: rgba(0, 6, 18, 0.35); border: 1px solid rgba(110, 190, 255, 0.3); }
.orow { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 18); align-items: center; min-height: calc(var(--u) * 38); cursor: pointer; }
.orow > span { text-align: right; font-weight: 500; font-size: calc(var(--u) * 17); letter-spacing: 0.04em; color: #fff; }
.orow.hl > span { color: #9fe0ff; text-shadow: 0 0 calc(var(--u) * 6) rgba(70, 170, 255, 0.8); }
.orow input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border: calc(var(--u) * 2) solid #d6ecff; background: rgba(255, 255, 255, 0.08); display: grid; place-content: center; cursor: pointer; outline: none; }
.orow input[type=checkbox]:checked::after { content: ""; width: calc(var(--u) * 11); height: calc(var(--u) * 6); border-left: calc(var(--u) * 3) solid #fff; border-bottom: calc(var(--u) * 3) solid #fff; transform: translateY(calc(var(--u) * -2)) rotate(-45deg); }
.orow input.hl, .orow select.hl, .orow .b.hl { box-shadow: 0 0 0 calc(var(--u) * 2) #8fd8ff, 0 0 calc(var(--u) * 12) rgba(120, 200, 255, 0.8); }
.orow select { justify-self: start; min-width: calc(var(--u) * 260); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10); background: #0c1a30; color: #fff; border: 1px solid rgba(150, 210, 255, 0.6); font: 500 calc(var(--u) * 16) var(--font); outline: none; }
.orow .b.small { justify-self: start; }
.orow input[type=range] { -webkit-appearance: none; appearance: none; width: calc(var(--u) * 260); height: calc(var(--u) * 8); background: linear-gradient(90deg, #4fb6ff var(--p, 50%), rgba(255, 255, 255, 0.15) var(--p, 50%)); outline: none; margin: 0; }
.orow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--u) * 14); height: calc(var(--u) * 22); background: #fff; box-shadow: 0 0 calc(var(--u) * 6) rgba(120, 200, 255, 0.9); transform: skewX(-16deg); }
.orow input[type=range]::-moz-range-thumb { width: calc(var(--u) * 14); height: calc(var(--u) * 22); border: 0; border-radius: 0; background: #fff; }
.rng { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.rng output { min-width: calc(var(--u) * 52); font-weight: 600; font-size: calc(var(--u) * 17); color: #fff; }
.opt-note { margin: 0 0 calc(var(--u) * 10); font-size: calc(var(--u) * 16); color: #b9cce6; }
.opt-note kbd, .ctl-tips kbd { display: inline-block; padding: 0 calc(var(--u) * 6); border: 1px solid rgba(200, 230, 255, 0.6); border-radius: calc(var(--u) * 3); font-weight: 600; font-size: 0.9em; }
.binds { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 5) calc(var(--u) * 26); }
.bind-row { display: grid; grid-template-columns: 1fr calc(var(--u) * 104) calc(var(--u) * 104); gap: calc(var(--u) * 6); align-items: center; font-weight: 500; font-size: calc(var(--u) * 15); letter-spacing: 0.02em; }
.bind-row > span { text-align: right; }
.bind-slot { height: calc(var(--u) * 28); border: 1px solid rgba(150, 210, 255, 0.5); background: #0c1a30; color: #fff; font: 600 calc(var(--u) * 13) var(--font); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; outline: none; }
.bind-slot.hl { box-shadow: 0 0 0 calc(var(--u) * 2) #8fd8ff; }
.bind-slot.wait { background: #ffd060; border-color: #ffd060; color: #1b1000; animation: blink 0.8s infinite; }
.bind-slot.pad-btn { grid-column: span 2; display: flex; align-items: center; justify-content: center; cursor: default; }
.bind-slot:empty::after { content: "—"; color: #5a6a8e; }
.ctl-tips { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 5) calc(var(--u) * 26); margin: calc(var(--u) * 12) 0; font-size: calc(var(--u) * 15); color: #b9cce6; }
.ctl-tips p { margin: 0; }
.ctl-tips b { color: #fff; font-weight: 600; }

/* trayectoria */
.career { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 8); }
.cstat { padding: calc(var(--u) * 12) calc(var(--u) * 16); background: rgba(0, 8, 24, 0.45); border: 1px solid rgba(110, 190, 255, 0.28); }
.cstat span { display: block; font-weight: 500; font-size: calc(var(--u) * 15); letter-spacing: 0.06em; color: #9fc4ea; }
.cstat b { display: block; font-weight: 400; font-size: calc(var(--u) * 40); color: #fff; line-height: 1.1; }
.cstat.hi b { color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 8) rgba(70, 170, 255, 0.8); }

/* podio */
.podium-scr { cursor: pointer; background: linear-gradient(180deg, rgba(0, 4, 14, 0.55), rgba(0, 4, 14, 0) 30%, rgba(0, 4, 14, 0) 70%, rgba(0, 4, 14, 0.55)); }
.win-cap { position: absolute; top: 6%; left: 0; right: 0; text-align: center; font-weight: 400; font-size: calc(var(--u) * 32); letter-spacing: 0.14em; color: #e0f2ff; text-shadow: 0 0 calc(var(--u) * 8) rgba(70, 170, 255, 0.8); }
.win-team { position: absolute; top: calc(6% + var(--u) * 40); left: 0; right: 0; text-align: center; font-weight: 300; font-size: calc(var(--u) * 116); line-height: 1; letter-spacing: 0.04em; animation: bigIn 0.6s ease-out; }
.win-team.t0 { color: #c3eaff; text-shadow: 0 0 calc(var(--u) * 10) rgba(60, 160, 255, 0.95), 0 0 calc(var(--u) * 36) rgba(40, 120, 255, 0.6); }
.win-team.t1 { color: #ffd8b0; text-shadow: 0 0 calc(var(--u) * 10) rgba(255, 140, 40, 0.95), 0 0 calc(var(--u) * 36) rgba(255, 100, 0, 0.6); }
.win-banner { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
.win-titles { text-align: center; }
.win-titles b { display: block; font-weight: 500; font-size: calc(var(--u) * 24); letter-spacing: 0.06em; color: #8fd0ff; text-shadow: 0 0 calc(var(--u) * 6) rgba(40, 140, 255, 0.7); }
.win-titles span { display: block; font-size: calc(var(--u) * 17); color: #fff; }

/* experiencia */
.xp-scr { display: flex; align-items: center; justify-content: center; background: rgba(0, 4, 14, 0.55); cursor: pointer; }
.xp-box { width: min(calc(var(--u) * 940), 92vw); padding: calc(var(--u) * 26) calc(var(--u) * 34) calc(var(--u) * 70); background: radial-gradient(ellipse at 50% 55%, rgba(0, 6, 20, 0.78), rgba(0, 6, 20, 0.35) 70%, rgba(0, 6, 20, 0)); }
.xp-bar { display: flex; align-items: center; gap: calc(var(--u) * 16); }
.xp-lvl { min-width: calc(var(--u) * 64); text-align: center; font-weight: 300; font-size: calc(var(--u) * 50); color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 8) rgba(70, 170, 255, 0.9); }
.xp-track { position: relative; flex: 1; height: calc(var(--u) * 18); overflow: hidden; transform: skewX(-16deg); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(120, 200, 255, 0.55); }
.xp-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #1f78ff, #8ae4ff); box-shadow: 0 0 calc(var(--u) * 12) #3aa0ff; transition: width 1.4s cubic-bezier(0.2, 0.8, 0.3, 1); }
.xp-track em { position: absolute; top: 0; bottom: 0; width: calc(var(--u) * 60); left: -20%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); animation: glint 2.4s ease-in-out infinite; }
@keyframes glint { to { left: 120%; } }
.xp-num { margin: calc(var(--u) * 8) 0 calc(var(--u) * 26); text-align: right; font-weight: 500; font-size: calc(var(--u) * 19); color: #cfe6ff; }
.xp-list { list-style: none; margin: 0 auto; padding: 0; width: min(calc(var(--u) * 480), 100%); }
.xp-list li { display: flex; justify-content: space-between; padding: calc(var(--u) * 6) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); font-weight: 400; font-size: calc(var(--u) * 25); opacity: 0; animation: xpIn 0.35s ease-out forwards; }
.xp-list li b { font-weight: 500; color: #ffd460; }
.xp-list li.up { color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 8) rgba(70, 170, 255, 0.8); }
@keyframes xpIn { from { opacity: 0; transform: translateX(calc(var(--u) * -20)); } to { opacity: 1; transform: none; } }

/* final del partido */
.end-scr { pointer-events: none; }
.end-menu { pointer-events: auto; position: absolute; left: calc(var(--u) * 40); top: 50%; transform: translateY(-40%); display: flex; flex-direction: column; gap: calc(var(--u) * 9); width: calc(var(--u) * 320); }
.end-menu .ghost { margin-top: calc(var(--u) * 18); }
body.end-open .board { padding-left: calc(var(--u) * 300); }

/* estandarte del jugador */
.banner { position: fixed; z-index: 11; left: calc(var(--u) * 34); bottom: calc(var(--u) * 58); display: flex; align-items: center; min-width: calc(var(--u) * 360); height: calc(var(--u) * 60); padding-right: calc(var(--u) * 70); background: linear-gradient(90deg, rgba(46, 110, 208, 0.94), rgba(28, 76, 160, 0.7)); border: 1px solid rgba(150, 210, 255, 0.45); pointer-events: none; }
.banner::after { content: ""; position: absolute; right: calc(var(--u) * 10); top: 50%; width: calc(var(--u) * 64); height: calc(var(--u) * 34); transform: translateY(-50%); opacity: 0.25; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23fff' d='M4 22c0-3 2-5 5-6l8-2 8-7h16l9 7 7 1c3 1 4 3 4 5v4h-4a6 6 0 0 0-12 0H23a6 6 0 0 0-12 0H4z'/%3E%3C/svg%3E"); }
.banner .av { width: calc(var(--u) * 68); height: calc(var(--u) * 68); margin-left: calc(var(--u) * -8); font-size: calc(var(--u) * 24); }
.bn-info { padding-left: calc(var(--u) * 16); }
.bn-info b { display: block; font-weight: 500; font-size: calc(var(--u) * 27); line-height: 1.1; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.bn-xp { width: calc(var(--u) * 200); height: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); background: rgba(0, 0, 0, 0.4); }
.bn-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffae20, #ffe07a); }
.bn-lvl { position: absolute; left: calc(var(--u) * 6); bottom: calc(var(--u) * -16); display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 34); height: calc(var(--u) * 30); clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%); background: linear-gradient(180deg, #fff, #cfe8ff); color: #10407a; font-weight: 700; font-size: calc(var(--u) * 17); }
.botbar { position: fixed; z-index: 11; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 36); display: flex; align-items: center; justify-content: center; background: rgba(3, 8, 18, 0.88); border-top: 1px solid rgba(110, 190, 255, 0.55); font-weight: 500; font-size: calc(var(--u) * 18); color: #9fd4ff; pointer-events: none; }

/* carga */
.loading { position: fixed; inset: 0; z-index: 30; background: radial-gradient(ellipse at 65% 35%, #173a70, #050b1c 62%, #02040a); transition: opacity 0.5s; }
.loading.done { opacity: 0; pointer-events: none; }
.ld-arena { position: absolute; left: 6vw; bottom: 26vh; font-weight: 300; font-size: calc(var(--u) * 96); line-height: 1; color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 10) rgba(70, 170, 255, 0.95), 0 0 calc(var(--u) * 34) rgba(40, 120, 255, 0.5); }
.ld-mode { position: absolute; left: 6vw; bottom: calc(26vh - var(--u) * 42); font-weight: 500; font-size: calc(var(--u) * 26); letter-spacing: 0.12em; color: #fff; }
.ld-tip { position: absolute; left: 6vw; right: 34vw; bottom: 9vh; margin: 0; font-weight: 400; font-size: calc(var(--u) * 22); color: #cfe0f5; }
.ld-spin { position: absolute; right: 4vw; bottom: 8vh; display: flex; align-items: center; gap: calc(var(--u) * 14); font-weight: 500; font-size: calc(var(--u) * 22); letter-spacing: 0.08em; }
.ld-spin i { width: calc(var(--u) * 36); height: calc(var(--u) * 36); border: calc(var(--u) * 4) solid rgba(255, 255, 255, 0.18); border-top-color: #7fd0ff; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ld-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 5); background: rgba(255, 255, 255, 0.06); }
.ld-bar i { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, #2f7cf0, #7fd0ff); box-shadow: 0 0 calc(var(--u) * 10) #3aa0ff; transition: width 0.3s; }

/* táctil */
.touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.joy { pointer-events: auto; position: absolute; left: 4vw; bottom: 5vh; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(160, 220, 255, 0.35); touch-action: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(200, 235, 255, 0.3); border: 2px solid rgba(200, 235, 255, 0.6); }
.tb { pointer-events: auto; position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; touch-action: none; }
.tb.on { filter: brightness(1.6); transform: scale(0.94); }
.tb-jump { right: 4vw; bottom: 5vh; width: 96px; height: 96px; background: rgba(47, 124, 240, 0.5); }
.tb-boost { right: calc(4vw + 108px); bottom: 3vh; width: 86px; height: 86px; background: rgba(240, 122, 26, 0.55); }
.tb-drift { right: calc(4vw + 12px); bottom: calc(5vh + 108px); width: 70px; height: 70px; background: rgba(255, 255, 255, 0.14); font-size: 11px; }
.tb-cam { right: calc(4vw + 100px); bottom: calc(3vh + 100px); width: 62px; height: 62px; background: rgba(255, 255, 255, 0.1); font-size: 10px; }
body.is-touch .boost { right: auto; left: 50%; transform: translateX(-50%) scale(0.62); transform-origin: 50% 100%; bottom: 0; }
.rotate { position: fixed; inset: 0; z-index: 40; background: #050a18; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; }
.rotate b { font-size: 34px; font-weight: 300; color: var(--cyan); }
.rotate span { color: var(--muted); font-weight: 500; }

@media (max-width: 900px) {
  .news { display: none; }
  .binds, .ctl-tips { grid-template-columns: 1fr; }
  .career { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 520px) {
  :root { --u: max(0.5px, min(0.1vh, 0.0563vw)); }
  .banner, .botbar { display: none !important; }
}
.hud.in-replay .boost, .hud.in-replay .camtag, .hud.in-replay .pops, .hud.in-replay .fp-tip, .hud.in-replay .center { display: none; }

/* garaje */
.garage-cat { margin: 0 0 calc(var(--u) * 10); font-weight: 500; font-size: calc(var(--u) * 18); letter-spacing: 0.12em; color: #9fd4ff; }
.garage-list { display: flex; flex-direction: column; gap: calc(var(--u) * 9); width: calc(var(--u) * 380); }
.gcar { justify-content: space-between; }
.gcar .eq { font-size: calc(var(--u) * 14); letter-spacing: 0.08em; color: #7dff6a; }
.gcar.hl .eq { color: #1f7a10; }
.garage .back { margin-top: calc(var(--u) * 26); }
.garage .menu-desc { max-width: calc(var(--u) * 560); }

/* en línea: salas, código y espera */
.online-col { display: flex; flex-direction: column; gap: calc(var(--u) * 9); width: calc(var(--u) * 380); margin-top: calc(var(--u) * 14); }
.room-list { display: flex; flex-direction: column; gap: calc(var(--u) * 9); width: calc(var(--u) * 640); max-height: 46vh; overflow-y: auto; padding: calc(var(--u) * 4) calc(var(--u) * 14) calc(var(--u) * 4) calc(var(--u) * 6); margin-bottom: calc(var(--u) * 14); }
.b.room { flex: none; height: calc(var(--u) * 56); gap: calc(var(--u) * 14); padding-left: calc(var(--u) * 12); }
.b.room .av { width: calc(var(--u) * 40); height: calc(var(--u) * 40); font-size: calc(var(--u) * 16); }
.b.room .room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b.room small { font-size: calc(var(--u) * 15); letter-spacing: 0.04em; opacity: 0.8; }
.b.room em { font-style: normal; font-size: calc(var(--u) * 18); color: #7dff6a; }
.b.room.hl em { color: #1f7a10; }
.room-empty { margin: 0; padding: calc(var(--u) * 26) 0; font-weight: 500; font-size: calc(var(--u) * 22); letter-spacing: 0.06em; color: #b9cce6; }
.code-in { display: block; width: calc(var(--u) * 380); height: calc(var(--u) * 62); margin-top: calc(var(--u) * 10); padding: 0 calc(var(--u) * 18); border: 1px solid rgba(150, 210, 255, 0.6); background: rgba(3, 8, 18, 0.8); color: #fff; font: 600 calc(var(--u) * 38) / 1 var(--font); letter-spacing: 0.35em; text-align: center; text-transform: uppercase; outline: none; user-select: text; -webkit-user-select: text; }
.code-in::placeholder { color: #5a6a8e; letter-spacing: 0.12em; font-size: 0.6em; }
.code-in.hl, .code-in:focus { border-color: #fff; box-shadow: 0 0 calc(var(--u) * 14) rgba(140, 210, 255, 0.85); }
.wait-spin { display: flex; justify-content: center; margin: calc(var(--u) * 6) 0 calc(var(--u) * 14); }
.wait-spin i { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border: calc(var(--u) * 4) solid rgba(255, 255, 255, 0.18); border-top-color: #7fd0ff; border-radius: 50%; animation: spin 0.9s linear infinite; }
.code-big { margin: calc(var(--u) * 10) auto calc(var(--u) * 16); width: fit-content; padding: calc(var(--u) * 8) calc(var(--u) * 26); background: rgba(0, 8, 24, 0.6); border: 1px solid rgba(120, 200, 255, 0.55); font-weight: 600; font-size: calc(var(--u) * 52); letter-spacing: 0.3em; color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 8) rgba(70, 170, 255, 0.9); user-select: all; -webkit-user-select: all; }
.toast { position: fixed; z-index: 35; left: 50%; top: calc(var(--u) * 26); transform: translateX(-50%); max-width: 92vw; padding: calc(var(--u) * 10) calc(var(--u) * 26); background: rgba(4, 12, 28, 0.94); border: 1px solid rgba(120, 200, 255, 0.65); box-shadow: 0 0 calc(var(--u) * 20) rgba(40, 140, 255, 0.35); font-weight: 500; font-size: calc(var(--u) * 21); letter-spacing: 0.04em; color: #fff; text-align: center; pointer-events: none; }
.toast.show { animation: toastIn 0.25s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, calc(var(--u) * -12)); } }

/* garaje: pintura */
.paint-cat { margin-top: calc(var(--u) * 22); }
.paint-cat span { color: #fff; }
.paint-list { display: grid; grid-template-columns: repeat(9, calc(var(--u) * 40)); gap: calc(var(--u) * 9); }
.sw { position: relative; width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: 0; border: calc(var(--u) * 2) solid rgba(255, 255, 255, 0.25); cursor: pointer; outline: none; transform: skewX(-10deg); box-shadow: inset 0 calc(var(--u) * -8) calc(var(--u) * 10) rgba(0, 0, 0, 0.25), inset 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(255, 255, 255, 0.25); }
.sw.on { border-color: #7dff6a; box-shadow: 0 0 0 calc(var(--u) * 2) #0a1a0a, 0 0 calc(var(--u) * 12) rgba(125, 255, 106, 0.8); }
.sw.hl { border-color: #fff; box-shadow: 0 0 0 calc(var(--u) * 2) #8fd8ff, 0 0 calc(var(--u) * 14) rgba(140, 210, 255, 0.95); }
.sw.on.hl { border-color: #7dff6a; }
.sw-custom span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 calc(var(--u) * 26) / 1 var(--font); color: #fff; text-shadow: 0 0 calc(var(--u) * 4) #000, 0 0 calc(var(--u) * 2) #000; }
.paint-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .paint-list { grid-template-columns: repeat(6, calc(var(--u) * 40)); } .room-list { width: min(calc(var(--u) * 640), 92vw); } }

/* sala de espera en línea: plazas de cada equipo (de 1 contra 1 a 4 contra 4) */
.pnl.wait-pnl { width: min(calc(var(--u) * 760), 100%); }
.wait-info { margin: calc(var(--u) * -4) 0 calc(var(--u) * 10); text-align: center; font-size: calc(var(--u) * 17); letter-spacing: 0.05em; color: #9fb6d6; }
.wait-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); margin: calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * 14); }
.wl-team { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.wl-name { font-weight: 700; font-size: calc(var(--u) * 17); letter-spacing: 0.12em; }
.wl-team.t0 .wl-name { color: #6fb1ff; }
.wl-team.t1 .wl-name { color: #ffab5e; }
.wl-row { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 10); background: rgba(10, 24, 50, 0.7); border-left: calc(var(--u) * 4) solid #2f7cf0; }
.wl-team.t1 .wl-row { border-left-color: #f07a1a; }
.wl-row .av { width: calc(var(--u) * 34); height: calc(var(--u) * 34); font-size: calc(var(--u) * 15); }
.wl-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: calc(var(--u) * 19); color: #fff; }
.wl-row small { font-size: calc(var(--u) * 13); letter-spacing: 0.05em; color: #9fb6d6; }
.wl-row.empty { opacity: 0.5; }
.wl-row.empty b { font-weight: 500; color: #c6d4e8; }
.wait-line { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); }
.wait-line .wait-spin { margin: 0; }
.wait-line .wait-spin i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-width: calc(var(--u) * 3); }
.feed-txt { font-weight: 600; font-size: calc(var(--u) * 15); letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
@media (max-width: 700px) { .wait-list { grid-template-columns: 1fr; } }

/* competitivo: emblemas de rango, modos, búsqueda de partida y resultado */
.rk { flex: none; display: inline-flex; width: calc(var(--u) * 46); height: calc(var(--u) * 47); }
.rk-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.6)); }
.comp-list { display: flex; flex-direction: column; gap: calc(var(--u) * 10); width: calc(var(--u) * 600); }
.b.comp-pl { height: calc(var(--u) * 66); gap: calc(var(--u) * 16); padding-left: calc(var(--u) * 14); }
.cp-name { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 28); font-weight: 600; }
.cp-name small, .cp-rank small { font-size: calc(var(--u) * 14); font-weight: 500; letter-spacing: 0.05em; opacity: 0.75; }
.cp-rank { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 4); }
.cp-rank b { font-size: calc(var(--u) * 19); font-weight: 600; }
.comp-note { margin: calc(var(--u) * 14) 0 0; max-width: calc(var(--u) * 600); font-size: calc(var(--u) * 17); line-height: 1.35; color: #b9cce6; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); white-space: normal; }
.pnl.srch-pnl { width: min(calc(var(--u) * 560), 100%); text-align: center; transition: box-shadow 0.3s, border-color 0.3s; }
.pnl.srch-pnl.found { border-color: #9dffb0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 calc(var(--u) * 40) rgba(80, 255, 140, 0.45), inset 0 0 calc(var(--u) * 44) rgba(60, 220, 120, 0.16); }
.srch-rank { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); margin: calc(var(--u) * 4) 0 calc(var(--u) * 6); }
.srch-rank .rk { width: calc(var(--u) * 64); height: calc(var(--u) * 66); }
.srch-rank div { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 3); }
.srch-rank b { font-size: calc(var(--u) * 24); font-weight: 600; color: #fff; }
.srch-rank small { font-size: calc(var(--u) * 15); letter-spacing: 0.05em; color: #9fb6d6; }
.srch-time { font-weight: 300; font-size: calc(var(--u) * 64); line-height: 1.1; color: var(--cyan); text-shadow: 0 0 calc(var(--u) * 8) rgba(70, 170, 255, 0.9); font-variant-numeric: tabular-nums; }
.srch-pnl.found .srch-time { color: #b8ffc8; text-shadow: 0 0 calc(var(--u) * 10) rgba(80, 255, 140, 0.9); }
.srch-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 10) 0 calc(var(--u) * 12); }
.srch-slots .av { width: calc(var(--u) * 42); height: calc(var(--u) * 42); font-size: calc(var(--u) * 16); background: rgba(10, 24, 50, 0.7); border: 1px dashed rgba(140, 190, 255, 0.45); }
.srch-slots .av.on { border: 1px solid rgba(160, 220, 255, 0.9); animation: popIn 0.3s ease-out; }
.srch-slots .av.bot { border-style: solid; opacity: 0.8; }
.rk-res { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 6) calc(var(--u) * 18); width: min(calc(var(--u) * 560), 100%); margin: calc(var(--u) * 22) auto 0; padding: calc(var(--u) * 14) calc(var(--u) * 20); background: rgba(0, 8, 24, 0.6); border: 1px solid rgba(110, 190, 255, 0.35); animation: xpIn 0.35s ease-out both; }
.rk-res .rk { width: calc(var(--u) * 70); height: calc(var(--u) * 72); }
.rk-info { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
.rk-info small { font-size: calc(var(--u) * 14); letter-spacing: 0.06em; color: #9fb6d6; }
.rk-info b { font-size: calc(var(--u) * 26); font-weight: 600; color: #fff; }
.rk-info span { font-size: calc(var(--u) * 16); color: #cfe6ff; font-variant-numeric: tabular-nums; }
.rk-bar { position: relative; height: calc(var(--u) * 10); overflow: hidden; transform: skewX(-16deg); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(120, 200, 255, 0.45); }
.rk-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #1f78ff, #8ae4ff); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.3, 1); }
.rk-delta { font-style: normal; font-weight: 600; font-size: calc(var(--u) * 36); font-variant-numeric: tabular-nums; }
.rk-delta.up { color: #7dff8f; text-shadow: 0 0 calc(var(--u) * 10) rgba(80, 255, 120, 0.6); }
.rk-delta.down { color: #ff7d7d; text-shadow: 0 0 calc(var(--u) * 10) rgba(255, 80, 80, 0.5); }
.rk-msg { grid-column: 1 / -1; margin: 0; min-height: 1.2em; text-align: center; font-weight: 600; font-size: calc(var(--u) * 20); letter-spacing: 0.06em; color: #ffd460; }
.career-ranks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 10); }
.crank { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 10) calc(var(--u) * 14); background: rgba(0, 8, 24, 0.45); border: 1px solid rgba(110, 190, 255, 0.28); }
.crank .rk { width: calc(var(--u) * 54); height: calc(var(--u) * 56); }
.crank div { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.crank small { font-size: calc(var(--u) * 14); letter-spacing: 0.06em; color: #9fc4ea; }
.crank b { font-size: calc(var(--u) * 21); font-weight: 600; color: #fff; }
.crank span { font-size: calc(var(--u) * 13); color: #b9cce6; }
@media (max-width: 900px) { .comp-list { width: min(calc(var(--u) * 600), 92vw); } .career-ranks { grid-template-columns: 1fr; } }
.srch-pnl .ttl { font-size: calc(var(--u) * 46); white-space: nowrap; }

/* ------------------------------------------------------------------ Pase Rocket */
.c-std { --cc: #3f8fff; }
.c-gold { --cc: #ffc53d; }
.c-super { --cc: #ff3ee8; }
.crate-svg { display: block; overflow: visible; }
/* aviso de cajas sin abrir (menú y final del partido) */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 26); height: calc(var(--u) * 26); margin-left: auto; padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 13); background: linear-gradient(180deg, #ffe27a, #ff9d1a); color: #3a1800; font-weight: 800; font-size: calc(var(--u) * 16); box-shadow: 0 0 calc(var(--u) * 12) rgba(255, 190, 40, 0.9); animation: badgePulse 1.1s ease-in-out infinite; }
@keyframes badgePulse { 50% { transform: scale(1.15); box-shadow: 0 0 calc(var(--u) * 22) rgb(255, 210, 60); } }
.b.loot { color: #2a1400; font-weight: 700; }
.b.loot::before { background: linear-gradient(180deg, #ffe58a, #ffb21f); box-shadow: 0 0 calc(var(--u) * 18) rgba(255, 190, 40, 0.8); animation: lootGlow 1.2s ease-in-out infinite; }
.b.loot.hl { color: #2a1400; }
.b.loot.hl::before { background: linear-gradient(180deg, #fffbe6, #ffd54a); }
.b.loot .badge { background: #2a1400; color: #ffd23a; box-shadow: none; animation: none; }
@keyframes lootGlow { 50% { box-shadow: 0 0 calc(var(--u) * 34) rgb(255, 214, 70); } }

.pass-box { top: 12%; width: min(calc(var(--u) * 940), calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; }
.pass-head { display: flex; align-items: center; gap: calc(var(--u) * 18); margin-bottom: calc(var(--u) * 14); }
.pass-head > div { flex: 1; }
.pass-lvl { display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 78); height: calc(var(--u) * 78); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: linear-gradient(180deg, #4592f2, #1a44b0); font-weight: 700; font-size: calc(var(--u) * 38); color: #fff; }
.pass-xp { position: relative; height: calc(var(--u) * 16); overflow: hidden; transform: skewX(-16deg); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(120, 200, 255, 0.55); }
.pass-xp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #1f78ff, #8ae4ff); box-shadow: 0 0 calc(var(--u) * 12) #3aa0ff; }
.pass-num { display: block; margin-top: calc(var(--u) * 6); font-weight: 500; font-size: calc(var(--u) * 17); color: #cfe6ff; }
.pass-track { display: flex; gap: calc(var(--u) * 8); overflow-x: auto; padding: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 14); margin-bottom: calc(var(--u) * 8); scrollbar-width: thin; }
.tier { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); width: calc(var(--u) * 70); padding: calc(var(--u) * 7) calc(var(--u) * 4); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 22%, transparent), rgba(3, 8, 18, 0.7)); border: 1px solid rgba(120, 200, 255, 0.25); }
.tier .tl { font-weight: 600; font-size: calc(var(--u) * 19); color: #fff; }
.tier .crate-svg { width: calc(var(--u) * 52); height: calc(var(--u) * 48); filter: drop-shadow(0 0 calc(var(--u) * 6) var(--cc)); }
.tier small { font-weight: 600; font-size: calc(var(--u) * 11); letter-spacing: 0.06em; color: #cfe6ff; }
.tier.got { opacity: 0.45; }
.tier.got small { font-size: calc(var(--u) * 15); color: #7dff6a; }
.tier.next { border-color: #ffd23a; animation: tierPulse 1.4s ease-in-out infinite; }
.tier.lock .crate-svg { filter: saturate(0.7) brightness(0.75); }
@keyframes tierPulse { 50% { box-shadow: 0 0 calc(var(--u) * 16) rgba(255, 200, 60, 0.8); } }
.crate-list { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 14); }
.b.crate-b { width: auto; height: calc(var(--u) * 92); gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 18); }
.crate-b .crate-svg { width: calc(var(--u) * 78); height: calc(var(--u) * 74); filter: drop-shadow(0 0 calc(var(--u) * 10) var(--cc)); animation: crateBob 2.2s ease-in-out infinite; }
.cb-info { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.cb-info b { font-weight: 600; font-size: calc(var(--u) * 22); }
.cb-info small { font-size: calc(var(--u) * 16); color: #ffd23a; letter-spacing: 0.06em; }
.crate-b em { font-style: normal; font-weight: 700; font-size: calc(var(--u) * 18); letter-spacing: 0.1em; color: #ffd23a; }
.crate-b.hl small, .crate-b.hl em { color: #9a5200; }
@keyframes crateBob { 50% { transform: translateY(calc(var(--u) * -5)) rotate(-3deg); } }
.crate-none { margin: 0; font-size: calc(var(--u) * 20); color: #cfe0f5; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.pass-col { margin: calc(var(--u) * 18) 0 0; font-weight: 500; font-size: calc(var(--u) * 19); letter-spacing: 0.04em; color: #cfe6ff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.pass-col b { color: #ffd23a; }
.pass-actions { display: flex; gap: calc(var(--u) * 26); margin-top: calc(var(--u) * 18); }
.play-box .pass-actions .back { margin-top: 0; }

/* garaje: pestañas y turbos / explosiones */
.gtabs { justify-content: flex-start; margin: 0 0 calc(var(--u) * 18); }
.gtabs .tab.fresh:not(.on) { color: #ffd23a; }
.gtabs .tab.fresh:not(.on)::after { content: ""; position: absolute; top: calc(var(--u) * -5); right: calc(var(--u) * -5); width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: #ffd23a; box-shadow: 0 0 calc(var(--u) * 8) #ffb000; }
.gcount { margin-left: calc(var(--u) * 14); color: #ffd23a; letter-spacing: 0.06em; }
.loot-list { display: grid; grid-template-columns: repeat(6, calc(var(--u) * 124)); gap: calc(var(--u) * 8); }
.lt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 100); padding: calc(var(--u) * 12) calc(var(--u) * 4) calc(var(--u) * 10); border: calc(var(--u) * 2) solid rgba(255, 255, 255, 0.12); background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%), linear-gradient(180deg, rgba(12, 24, 46, 0.9), rgba(3, 8, 18, 0.9)); box-shadow: inset 0 calc(var(--u) * -4) 0 var(--rc); color: #fff; font-family: inherit; cursor: pointer; outline: none; }
.lt .li-svg { flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 255, 255, 0.25)); }
.lt b { font-weight: 600; font-size: calc(var(--u) * 14); line-height: 1.1; text-align: center; }
.lt small { font-weight: 600; font-size: calc(var(--u) * 11); letter-spacing: 0.08em; color: var(--rc); }
.lt.on { border-color: #7dff6a; }
.lt.hl { border-color: #fff; box-shadow: inset 0 calc(var(--u) * -4) 0 var(--rc), 0 0 0 calc(var(--u) * 2) #8fd8ff, 0 0 calc(var(--u) * 14) rgba(140, 210, 255, 0.95); }
.lt.locked .li-svg { filter: grayscale(1) brightness(0.45); }
.lt.locked b { color: #8e9bb0; }
.lt .eq, .lt .nw, .lt .lk { position: absolute; top: calc(var(--u) * 3); right: calc(var(--u) * 6); font-weight: 700; font-size: calc(var(--u) * 10); letter-spacing: 0.06em; }
.lt .eq { color: #7dff6a; }
.lt .nw { color: #ffd23a; animation: pulse 1.1s ease-in-out infinite; }
.lt .lk { color: #8e9bb0; }

/* experiencia: cajas ganadas */
.xp-list li.crate { font-size: calc(var(--u) * 30); border-bottom-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.xp-list li.crate b { color: var(--cc); }
.xp-list li.crate span { display: flex; align-items: center; gap: calc(var(--u) * 12); font-weight: 600; color: #fff; text-shadow: 0 0 calc(var(--u) * 10) var(--cc); }
.xp-list li.crate .crate-svg { width: calc(var(--u) * 42); height: calc(var(--u) * 40); filter: drop-shadow(0 0 calc(var(--u) * 8) var(--cc)); animation: crateBob 1.2s ease-in-out infinite; }

/* abrir una caja */
.crate-scr { display: flex; align-items: center; justify-content: center; overflow: hidden; --cc: #3f8fff; --rc: #ffffff; background: radial-gradient(ellipse at 50% 45%, rgba(18, 36, 76, 0.75), rgba(0, 3, 10, 0.95) 72%); }
.crate-scr.revealed { background: linear-gradient(90deg, rgba(0, 6, 20, 0.9), rgba(0, 6, 20, 0.5) 42%, rgba(0, 6, 20, 0) 72%); }
.cr-rays { position: absolute; left: 50%; top: 50%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; pointer-events: none; opacity: 0.12; background: repeating-conic-gradient(from 0deg, var(--cc) 0deg 6deg, transparent 6deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 30%); mask-image: radial-gradient(circle, #000 0, transparent 30%); animation: raySpin 34s linear infinite; }
.crate-scr.revealed .cr-rays { left: calc(var(--u) * 318); opacity: 0.38; background: repeating-conic-gradient(from 0deg, var(--rc) 0deg 7deg, transparent 7deg 18deg); animation-duration: 16s; }
.crate-scr.r-exotic .cr-rays, .crate-scr.r-bm .cr-rays { opacity: 0.6; animation-duration: 7s; }
@keyframes raySpin { to { transform: rotate(360deg); } }
.cr-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; }
.cr-name { margin: 0; font-weight: 800; font-size: calc(var(--u) * 56); letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 calc(var(--u) * 18) var(--cc), 0 0 calc(var(--u) * 48) var(--cc); }
.cr-left { font-weight: 500; font-size: calc(var(--u) * 18); letter-spacing: 0.12em; color: #cfe6ff; }
.cr-box { position: relative; width: calc(var(--u) * 330); height: calc(var(--u) * 308); margin: calc(var(--u) * 26) 0 calc(var(--u) * 14); padding: 0; border: 0; background: none; cursor: pointer; outline: none; animation: crateFloat 2.4s ease-in-out infinite; }
.cr-box::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, var(--cc) 0, transparent 62%); opacity: 0.4; animation: glowPulse 1.6s ease-in-out infinite; }
.cr-box .crate-svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 calc(var(--u) * 22) var(--cc)); transition: filter 0.2s; }
.cr-box.hl .crate-svg { filter: drop-shadow(0 0 calc(var(--u) * 36) var(--cc)) brightness(1.15); }
.cr-box.charge { animation: crateCharge 1.05s ease-in forwards; }
.cr-box.charge::before { animation: none; opacity: 0.9; }
@keyframes crateFloat { 50% { transform: translateY(calc(var(--u) * -14)) rotate(-1.5deg); } }
@keyframes glowPulse { 50% { opacity: 0.65; transform: scale(1.08); } }
@keyframes crateCharge {
  0% { transform: none; }
  10% { transform: translate(-3px, 1px) rotate(-2deg); }
  20% { transform: translate(4px, -2px) rotate(2deg); }
  30% { transform: translate(-5px, 2px) rotate(-3deg) scale(1.02); }
  40% { transform: translate(6px, -3px) rotate(3deg) scale(1.04); }
  50% { transform: translate(-7px, 3px) rotate(-4deg) scale(1.06); filter: brightness(1.2); }
  60% { transform: translate(9px, -4px) rotate(5deg) scale(1.08); }
  70% { transform: translate(-10px, 5px) rotate(-6deg) scale(1.1); filter: brightness(1.5); }
  80% { transform: translate(12px, -5px) rotate(7deg) scale(1.13); }
  90% { transform: translate(-13px, 6px) rotate(-8deg) scale(1.17); filter: brightness(2); }
  100% { transform: scale(1.4); filter: brightness(3.5); opacity: 0; }
}
.cr-hint { margin: 0; font-weight: 500; font-size: calc(var(--u) * 26); letter-spacing: 0.12em; color: #fff; animation: pulse 1.4s ease-in-out infinite; }
.cr-odds { margin: calc(var(--u) * 20) 0 0; max-width: 92vw; font-weight: 500; font-size: calc(var(--u) * 16); letter-spacing: 0.04em; color: #9fb6d6; }
.cr-reel { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--u) * 236); transform: translateY(-50%); overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(10, 22, 44, 0.85), rgba(0, 0, 0, 0.6)); border-top: 1px solid rgba(120, 200, 255, 0.5); border-bottom: 1px solid rgba(120, 200, 255, 0.5); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.cr-strip { position: absolute; left: 0; top: 0; bottom: 0; display: flex; will-change: transform; }
.rc { flex: none; width: calc(var(--u) * 180); height: 100%; padding: calc(var(--u) * 18) calc(var(--u) * 7); }
.rc-in { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 8); background: radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--rc) 55%, transparent), transparent 70%), linear-gradient(180deg, rgba(22, 36, 64, 0.96), rgba(6, 12, 26, 0.96)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 calc(var(--u) * -6) 0 var(--rc); }
.rc .li-svg { width: calc(var(--u) * 74); height: calc(var(--u) * 74); filter: drop-shadow(0 0 calc(var(--u) * 8) var(--rc)); }
.rc b { font-weight: 600; font-size: calc(var(--u) * 18); line-height: 1.1; text-align: center; color: #fff; }
.rc small { font-size: calc(var(--u) * 12); letter-spacing: 0.08em; color: #9fb6d6; }
.rc.win .rc-in { border-color: #fff; box-shadow: inset 0 calc(var(--u) * -6) 0 var(--rc), 0 0 0 calc(var(--u) * 3) #fff, 0 0 calc(var(--u) * 34) var(--rc); animation: winPulse 0.25s ease-in-out 3 alternate; }
@keyframes winPulse { to { transform: scale(1.08); } }
.cr-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--u) * 4); margin-left: calc(var(--u) * -2); background: #ffd23a; box-shadow: 0 0 calc(var(--u) * 12) #ffb000, 0 0 calc(var(--u) * 28) #ff9000; }
.cr-mark::before, .cr-mark::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: calc(var(--u) * 13) solid transparent; }
.cr-mark::before { top: 0; border-top-color: #ffd23a; }
.cr-mark::after { bottom: 0; border-bottom-color: #ffd23a; }
.cr-result { position: absolute; left: calc(var(--u) * 58); top: 50%; transform: translateY(-50%); width: min(calc(var(--u) * 520), calc(100vw - 32px)); }
.cr-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 22); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 32%, #0a1428), #050b18 72%); border: calc(var(--u) * 2) solid var(--rc); box-shadow: 0 0 calc(var(--u) * 44) color-mix(in srgb, var(--rc) 70%, transparent), inset 0 0 calc(var(--u) * 50) color-mix(in srgb, var(--rc) 25%, transparent); }
.cr-card.pop { animation: cardPop 0.65s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes cardPop { from { transform: scale(0.3) rotate(-8deg); opacity: 0; } }
.cc-rar { font-weight: 800; font-size: calc(var(--u) * 22); letter-spacing: 0.2em; color: var(--rc); text-shadow: 0 0 calc(var(--u) * 12) var(--rc); }
.cc-icon .li-svg { display: block; width: calc(var(--u) * 150); height: calc(var(--u) * 150); margin: calc(var(--u) * 6) 0; filter: drop-shadow(0 0 calc(var(--u) * 22) var(--rc)); animation: crateBob 2s ease-in-out infinite; }
.cc-name { font-weight: 800; font-size: calc(var(--u) * 46); line-height: 1; color: #fff; text-shadow: 0 0 calc(var(--u) * 16) var(--rc); }
.r-exotic .cc-name, .r-bm .cc-name { background: linear-gradient(90deg, var(--rc), #fff, var(--rc), #fff, var(--rc)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 calc(var(--u) * 10) var(--rc)); animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.cc-kind { margin-top: calc(var(--u) * 8); font-weight: 500; font-size: calc(var(--u) * 18); letter-spacing: 0.14em; color: #cfe6ff; }
.cc-desc { margin: calc(var(--u) * 10) 0 0; font-size: calc(var(--u) * 19); color: #dfe9f8; }
.cc-tag { position: absolute; top: calc(var(--u) * -16); right: calc(var(--u) * -12); padding: calc(var(--u) * 4) calc(var(--u) * 14); font-style: normal; font-weight: 800; font-size: calc(var(--u) * 18); letter-spacing: 0.08em; color: #2a1400; background: #ffd23a; transform: rotate(6deg); box-shadow: 0 0 calc(var(--u) * 16) rgba(255, 200, 40, 0.9); }
.cr-btns { margin: calc(var(--u) * 20) calc(var(--u) * 16) 0; }
.cr-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cr-flash.on { animation: flashOut 0.75s ease-out; }
@keyframes flashOut { from { opacity: 0.95; } }
.cr-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crate-scr.quake { animation: quake 0.6s ease-out; }
@keyframes quake { 10%, 50%, 90% { transform: translate(-8px, 4px); } 30%, 70% { transform: translate(8px, -5px); } }