/* ══════════════════════════════════════════════════════════════════
   PUNTO DE ORO · estilo
   1) Lo básico de la app (fondo verde oscuro, letras, botones, hojas).
   2) LA PANTALLA DEL PARTIDO: copiada de Virtual Padel Club (vpc-429,
      el bloque `.oro-*` que Anna fue aprobando el 27 oct 2026).
   3) Las pantallas nuevas (menú, entrenar, amigos, ajustes, avatar).
   ══════════════════════════════════════════════════════════════════ */
:root { --fondo:#0E2419; --fondo2:#16341F; --fondo3:#1E4A32; --texto:#EDF1E2; --texto2:#C6D0BA; --apagado:#8A9384; --lima:#C9E265; --lima2:#DDF08A; --naranja:#E8A33D; --oro:#F3D66B; --rojo:#E0593B; --tinta:#14301F; --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--fondo); color: var(--texto); font-family: 'Nunito', system-ui, sans-serif; font-size: 15px; line-height: 1.4; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; max-width: 430px; margin: 0 auto; width: 100%; padding: calc(10px + var(--sat)) 14px calc(12px + var(--sab)); overflow: hidden; }
.pantalla.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.titulo { font-family: 'Lilita One', cursive; font-size: 30px; line-height: 1.05; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); letter-spacing: .01em; }
.titulo.oro { color: var(--oro); }
.rotulo { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); font-weight: 800; }
.boton { font-family: 'Lilita One', cursive; font-size: 19px; background: linear-gradient(180deg, var(--lima2), var(--lima)); color: var(--tinta); border: 0; border-radius: 14px; padding: 15px 16px; cursor: pointer; width: 100%; box-shadow: 0 5px 0 #7E9A2A, 0 9px 16px rgba(0,0,0,.4); letter-spacing: .02em; position: relative; }
.boton:active { transform: translateY(3px); box-shadow: 0 2px 0 #7E9A2A; }
.boton.naranja { background: linear-gradient(180deg, #F3BE6C, var(--naranja)); box-shadow: 0 5px 0 #9A5E12, 0 9px 16px rgba(0,0,0,.4); }
.boton.naranja:active { box-shadow: 0 2px 0 #9A5E12; }
.boton.oro { background: linear-gradient(180deg, #FFE9A8, var(--oro)); box-shadow: 0 5px 0 #A8841E, 0 9px 16px rgba(0,0,0,.4); }
.boton.suave { background: transparent; color: var(--texto2); border: 2px solid rgba(237,241,226,.18); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px; padding: 11px; box-shadow: none; }
.boton.suave:active { transform: none; }
.boton:disabled { filter: grayscale(.6) brightness(.6); cursor: not-allowed; }
.boton.grande { font-size: 26px; padding: 20px 16px; border-radius: 20px; }
.boton .sub { display: block; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-top: 2px; }
.tarjeta { background: var(--fondo2); border: 2px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px; box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.fila { display: flex; align-items: center; gap: 10px; }
.crece { flex: 1; min-width: 0; }
.centro { text-align: center; }
.campo { width: 100%; font: inherit; font-weight: 800; font-size: 18px; color: #fff; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.14); border-radius: 12px; padding: 12px 14px; outline: none; -webkit-user-select: text; user-select: text; }
.campo:focus { border-color: var(--lima); }
.campo.codigo { font-family: 'Lilita One', cursive; font-size: 30px; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.35); border: 1.5px solid rgba(255,255,255,.14); border-radius: 20px; padding: 4px 10px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.chip b { font-family: 'Lilita One', cursive; font-weight: 400; font-size: 15px; }
.aviso { position: fixed; left: 50%; bottom: calc(24px + var(--sab)); transform: translateX(-50%); background: #fff; color: var(--tinta); font-weight: 800; font-size: 13.5px; padding: 10px 16px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 400; max-width: 86%; text-align: center; animation: subeAviso .3s ease-out; }
@keyframes subeAviso { from { transform: translate(-50%, 20px); opacity: 0; } }
/* la cabecera de las pantallas interiores */
.cabecera { display: flex; align-items: center; gap: 10px; flex: none; margin-bottom: 10px; }
.volver { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--fondo2); color: var(--texto2); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.cabecera .titulo { font-size: 24px; }
/* arranque */
#arranque { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #1E4A32 0, #0E2419 60%, #050E09 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 500; }
#arranque .logo { font-family: 'Lilita One', cursive; font-size: 44px; line-height: 1; color: var(--oro); text-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 40px rgba(243,214,107,.35); text-align: center; letter-spacing: .02em; }
#arranque .lema { color: var(--texto2); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.bola-logo { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3B0 0, #F3D66B 40%, #C9941E 100%); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,.5); position: relative; animation: bota 1.6s ease-in-out infinite; }
.bola-logo::after { content: ''; position: absolute; left: 14%; top: 10%; width: 72%; height: 80%; border-radius: 50%; border: 4px solid rgba(255,255,255,.75); border-color: rgba(255,255,255,.75) transparent; transform: rotate(-25deg); }
@keyframes bota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* ═══ 2) LA PANTALLA DEL PARTIDO (copiada de Virtual Padel Club) ═══ */
  #oro-capa { position: fixed; inset: 0; z-index: 150; background: #0E2419; color: #EDF1E2;
    font-family: 'Nunito', system-ui, sans-serif; font-size: 15px; line-height: 1.4; overflow: hidden; }
  #oro-capa .oro-marco { max-width: 430px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 6px; height: 100%; }
  #oro-capa .oro-rotulo { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8A9384; font-weight: 800; }
  #oro-capa .oro-boton { font-family: 'Lilita One', cursive; font-size: 17px; background: #C9E265; color: #14301F; border: 0; border-radius: 11px; padding: 13px; cursor: pointer; width: 100%; }
  #oro-capa .oro-boton.suave { background: transparent; color: #C6D0BA; border: 1.5px solid rgba(237,241,226,.16); font-size: 13px; padding: 9px; font-family: 'Nunito', sans-serif; font-weight: 800; }
  #oro-capa .oro-boton.suave:disabled { color: #4A5A48; border-color: rgba(237,241,226,.07); cursor: not-allowed; }
  /* vpc-426 · el marcador como en un videojuego: dos fichas grandes de color */
  .oro-marcador { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; background: linear-gradient(180deg, #1E4A32, #122C1D); border: 2px solid rgba(255,255,255,.14); border-radius: 16px; padding: 5px 8px; position: relative; box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); }
  .oro-lado { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: center; }
  .oro-lado .quien { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
  .oro-lado .tantos { font-family: 'Lilita One', cursive; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; min-width: 46px; padding: 3px 8px; border-radius: 10px; text-align: center; color: #14301F; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.35); }
  .oro-lado.yo .tantos { background: linear-gradient(180deg, #DDF08A, #C9E265); }
  .oro-lado.der .tantos { background: linear-gradient(180deg, #F3BE6C, #E8A33D); }
  .oro-medio #oro-fase { font-family: 'Lilita One', cursive; font-size: 13px; letter-spacing: .08em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
  .oro-medio #oro-fase { white-space: nowrap; font-size: 12px; }
  .oro-medio #oro-fase.oro { color: #F3D66B; animation: oroLate 1.1s ease-in-out infinite; }
  .oro-tantos-bump { animation: oroBump .5s cubic-bezier(.2,1.6,.4,1); }
  @keyframes oroBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
  .oro-medio { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8A9384; text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center; line-height: 1.2; }
  .oro-tope { font-size: 9px; letter-spacing: .1em; color: #6F7D6F; }
  /* El desplegable de «ya en tu club». Sin la flechita del navegador,
     que en cada uno es distinta: la del juego va escrita en el texto. */
  .oro-racha { font-size: 10px; color: #14301F; background: #C9E265; border-radius: 20px; padding: 2px 8px; font-weight: 800; letter-spacing: .06em; text-transform: none; }
  .oro-racha.el { background: #E8A33D; }
  /* vpc-425 · la cabecera: reloj redondo, marcador y la puerta */
  .oro-top { display: flex; align-items: center; gap: 8px; flex: none; }
  .oro-cerrar { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: #16341F; color: #C6D0BA; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
  /* ══ vpc-425 · LA MESA (estilo UNO, en vertical) ════════════════════
     La sala es el fondo; la mesa es un disco girado en 3D (`.oro-suelo`,
     rotateX) y por eso sale ovalada, más ancha por tu lado. Encima van
     la pila, la flecha, el mazo y los asientos; nada de eso gira. */
  /* vpc-426 · LA PISTA DE PÁDEL EN 3D. El suelo es un rectángulo girado
     (`.oro-suelo`, rotateX) con `preserve-3d`, y de él se levantan los
     cristales del fondo y de los lados y la red, girados −90° sobre su
     borde. Las cartas caen encima, en tu mitad. */
  .oro-pista { position: relative; width: 100%; flex: 1; min-height: 230px; border-radius: 18px; overflow: hidden; transition: box-shadow .6s;
    background: radial-gradient(ellipse at 50% 38%, #163C2A 0, #0B1F15 55%, #050E09 100%); perspective: 900px; perspective-origin: 50% 20%; box-shadow: inset 0 0 70px rgba(0,0,0,.65); }
  .oro-suelo { position: absolute; left: 50%; top: 50%; width: 262px; height: 400px; margin: -200px 0 0 -131px; transform: perspective(900px) rotateX(44deg); transform-style: preserve-3d; /* ⚠️ perspective() DENTRO del transform: el `perspective` del padre no lo aplica el WebKit del iPhone (probado en el simulador, 27 oct 2026) */
    background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,0,0,.05) 26px 52px), linear-gradient(180deg, #227A4D, #1D6B43); border: 3px solid rgba(255,255,255,.72); box-sizing: border-box;
    box-shadow: 0 0 0 10px #1A4A33, 0 40px 60px rgba(0,0,0,.7); transition: box-shadow .6s; }
  .oro-suelo .l { position: absolute; background: rgba(255,255,255,.72); }
  .oro-suelo .serv-a { left: 0; right: 0; top: 15%; height: 2px; } .oro-suelo .serv-b { left: 0; right: 0; bottom: 15%; height: 2px; }
  .oro-suelo .centro { left: 50%; top: 15%; bottom: 15%; width: 2px; margin-left: -1px; }
  .oro-cristal { position: absolute; background: linear-gradient(180deg, rgba(170,215,235,.08) 0, rgba(170,215,235,.22) 100%); border: 2px solid rgba(255,255,255,.4); box-sizing: border-box; backface-visibility: visible; }
  /* po-1 (Anna, 27 oct): la REJA va en el tramo del medio de la pared, junto a la red, y el cristal en los dos extremos, como en una pista de verdad (antes la reja estaba en el tercio del fondo). */
  .oro-cristal::before { content: ''; position: absolute; left: 0; right: 0; top: 20%; bottom: 20%; background: repeating-linear-gradient(45deg, rgba(0,0,0,.45) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.45) 0 1px, transparent 1px 6px), rgba(6,20,12,.35); border-top: 2px solid rgba(255,255,255,.35); border-bottom: 2px solid rgba(255,255,255,.35); }
  .oro-cristal.izq { top: -3px; bottom: -3px; left: -96px; width: 96px; transform-origin: 100% 50%; transform: rotateY(90deg); }
  .oro-cristal.der { top: -3px; bottom: -3px; right: -96px; width: 96px; transform-origin: 0 50%; transform: rotateY(-90deg); }
  .oro-red { position: absolute; left: -6px; right: -6px; top: calc(50% - 30px); height: 30px; transform-origin: 50% 100%; transform: rotateX(-90deg); border-top: 4px solid #fff; box-sizing: border-box;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px), rgba(10,30,20,.35); }
  .oro-red::before, .oro-red::after { content: ''; position: absolute; top: -6px; bottom: 0; width: 5px; background: #222; } .oro-red::before { left: 0; } .oro-red::after { right: 0; }
  .oro-pista.oro .oro-suelo { border-color: #F3D66B; box-shadow: 0 0 0 10px #1A4A33, 0 0 40px rgba(243,214,107,.65), 0 40px 60px rgba(0,0,0,.7); }
  /* el brillo de la carta, el halo de las que se pueden jugar y la sombra de la que vuela */
  .oro-carta::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(165deg, rgba(255,255,255,.26) 0, rgba(255,255,255,.06) 40%, transparent 55%, rgba(0,0,0,.2) 100%); }
  button.oro-carta { cursor: pointer; }
  button.oro-carta.puedo { box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 0 3px #C9E265, 0 0 24px rgba(201,226,101,.65); }
  .oro-carta.vuela { box-shadow: 0 14px 30px rgba(0,0,0,.55); }
  /* el reloj redondo (vpc-422 → vpc-425): el anillo se vacía y el número baja */
  .oro-reloj { position: relative; width: 40px; height: 40px; flex: none; }
  .oro-reloj svg { width: 40px; height: 40px; transform: rotate(-90deg); display: block; }
  .oro-reloj .f { fill: rgba(0,0,0,.5); stroke: rgba(255,255,255,.12); stroke-width: 4; }
  .oro-reloj .b { fill: none; stroke: #C9E265; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 0; }
  .oro-reloj .n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Lilita One', cursive; font-size: 14px; color: #fff; }
  .oro-reloj.off { visibility: hidden; }
  .oro-reloj.prisa .b { stroke: #E0593B; } .oro-reloj.prisa .n { color: #FFB4A0; animation: oroLate .6s ease-in-out infinite; }
  /* el mazo, a tu izquierda en la mesa */
  .oro-mazo { position: absolute; left: 9%; top: 50%; width: 40px; height: 54px; margin-top: -28px; z-index: 2; }
  .oro-mazo .oro-dorso { position: absolute; left: 0; top: 0; width: 40px; height: 54px; }
  .oro-mazo .oro-dorso:nth-child(2) { transform: translate(2px, -2px); } .oro-mazo .oro-dorso:nth-child(3) { transform: translate(4px, -4px); }
  /* el dorso de una carta: verde del club con la bola dorada */
  .oro-dorso { border-radius: 7px; border: 2.5px solid #fff; background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 4px, transparent 4px 9px), linear-gradient(160deg, #1F6A45, #0E2419); box-shadow: 0 3px 6px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .oro-dorso::after { content: ''; width: 58%; height: 38%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3B0 0, #F3D66B 40%, #C9941E 100%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 1.5px rgba(255,255,255,.8); transform: rotate(-22deg); }
  /* el abanico del rival, boca abajo */
  .oro-abanico { position: absolute; left: 50%; top: 84px; width: 0; height: 0; z-index: 2; }
  /* po-8 · los dorsos de carta (los del rival): se ven en su abanico y cuando tira */
  .oro-dorso.dz-noche { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 4px, transparent 4px 9px), linear-gradient(160deg, #26365F, #0B1224); }
  .oro-dorso.dz-noche::after { background: radial-gradient(circle at 35% 30%, #FFFFFF 0, #CFE0FF 45%, #7F9CD6 100%); }
  .oro-dorso.dz-rosa { background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 9px), linear-gradient(160deg, #F06292, #8E2457); }
  .oro-dorso.dz-carbono { background: repeating-linear-gradient(45deg, #2A2A2A 0 3px, #1A1A1A 3px 6px), #111; border-color: #C9E265; }
  .oro-dorso.dz-carbono::after { background: radial-gradient(circle at 35% 30%, #F4FFD0 0, #C9E265 45%, #7E9A2A 100%); }
  .oro-dorso.dz-oro { background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 4px, transparent 4px 9px), linear-gradient(160deg, #FFE58A, #B8860B); }
  .oro-dorso.dz-oro::after { background: radial-gradient(circle at 35% 30%, #4A3A10 0, #2A1F05 100%); box-shadow: 0 0 0 1.5px #FFF3B0; }
  .oro-dorso.dz-arcoiris { background: linear-gradient(120deg, #FF4D6D, #F3D66B, #C9E265, #4C8DFF, #B26CFF, #FF4D6D); background-size: 300% 300%; animation: dzArco 4s linear infinite; }
  .oro-dorso.dz-campeon { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.25), transparent 60%), linear-gradient(160deg, #0E2419, #1F6A45); border-color: #F3D66B; }
  .oro-dorso.dz-campeon::after { content: '🏆'; background: none; box-shadow: none; transform: none; width: auto; height: auto; font-size: 15px; line-height: 1; }
  @keyframes dzArco { from { background-position: 0 50%; } to { background-position: 150% 50%; } }
  .oro-abanico .oro-dorso { position: absolute; left: -17px; top: 0; width: 34px; height: 46px; transform-origin: 50% -110%; transition: transform .3s; }
  /* la pila del centro: las últimas cuatro cartas, la de arriba grande */
  /* vpc-427 · cada uno tira en su mitad: la tuya cerca, la suya al fondo (más pequeña, está más lejos) */
  .oro-pila { position: absolute; left: 50%; width: 0; height: 0; z-index: 2; }
  .oro-pila.mia { top: 72%; } .oro-pila.rival { top: 36%; }
  @media (max-height: 700px) { .oro-pila.rival { top: 42%; } .oro-pila.mia { top: 74%; } }
  .oro-pila .oro-carta { position: absolute; left: -36px; top: -48px; width: 72px; height: 96px; }
  .oro-pila.rival .oro-carta { left: -30px; top: -40px; width: 60px; height: 80px; border-width: 3px; } .oro-pila.rival .oro-carta .tray { height: 34px; } .oro-pila.rival .oro-carta .golpe { font-size: 10px; }
  .oro-pila .oro-carta.vieja { transform: rotate(var(--r, 0deg)) translate(var(--x, 0px), var(--y, 0px)); filter: brightness(.78); }
  .oro-pila .oro-carta.ult { transform: rotate(var(--r, 0deg)) scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.6), 0 0 0 2.5px var(--de, #fff); }
  .oro-pila .oro-carta.escondida { visibility: hidden; }
  /* po-8: la carta que acaba de aterrizar solo se asienta (no vuelve a caer ni desaparece) */
  .oro-pila .oro-carta.posada { animation: oroPosa .2s ease-out; }
  @keyframes oroPosa { from { transform: rotate(var(--r, 0deg)) scale(1.13); } to { transform: rotate(var(--r, 0deg)) scale(1.06); } }
  /* los asientos: las dos caras de la pareja, el nombre y la chapa de cuántas cartas */
  .oro-asiento { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 3; }
  .oro-asiento.rival { top: 8px; left: 50%; transform: translateX(-50%); }
  .oro-asiento.mia { bottom: 10px; left: 10px; }
  .oro-caras { position: relative; display: flex; padding: 3px 10px 0; background: linear-gradient(180deg, #2E6B46, #1D4531); border-radius: 16px 16px 11px 11px; border: 2.5px solid rgba(255,255,255,.14); box-shadow: 0 5px 0 #11301D, 0 10px 16px rgba(0,0,0,.5); transition: border-color .3s, box-shadow .3s; }
  .oro-cara { margin: 0 -3px; }
  .oro-asiento.activa .oro-caras { border-color: #C9E265; box-shadow: 0 0 0 3px rgba(201,226,101,.3), 0 0 24px rgba(201,226,101,.65), 0 5px 0 #11301D; animation: oroRespira 1.6s ease-in-out infinite; }
  .oro-nombre { font-size: 11px; font-weight: 800; color: #fff; background: rgba(14,36,25,.94); border: 1.5px solid rgba(255,255,255,.2); border-radius: 20px; padding: 2px 10px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oro-saca { position: absolute; left: -10px; top: -9px; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #14301F; background: #C9E265; padding: 2px 7px; border-radius: 20px; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
  /* el botón del tiempo muerto, abajo a la derecha, y su chapa con las veces que quedan */
  .oro-tm { position: absolute; right: 10px; bottom: 12px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; z-index: 4; font-size: 22px; line-height: 1; padding: 0;
    background: radial-gradient(circle at 35% 30%, #FFE08A 0, #E8A33D 55%, #B06A10 100%); box-shadow: 0 5px 0 #7A4A0C, 0 9px 14px rgba(0,0,0,.5); }
  .oro-tm svg { width: 30px; height: 30px; display: block; margin: 0 auto; animation: oroGira 3.2s linear infinite; }
  .oro-tm svg path { fill: none; stroke: #14301F; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .oro-tm:disabled svg { animation: none; }
  @keyframes oroGira { to { transform: rotate(360deg); } }
  .oro-tm:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #7A4A0C; }
  .oro-tm:disabled { filter: grayscale(.8) brightness(.55); cursor: not-allowed; box-shadow: 0 3px 0 #222; }
  .oro-tm .k { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #fff; color: #14301F; font-family: 'Lilita One', cursive; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
  .oro-golpes { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #C9E265; min-height: 12px; line-height: 12px; }
  .oro-bolita { position: absolute; left: 50%; top: calc(50% + 6px); transform: translate(-50%,-50%); display: flex; align-items: center; gap: 6px; background: rgba(14,36,25,.92); border: 1px solid rgba(201,226,101,.5); border-radius: 20px; padding: 3px 10px 3px 6px; pointer-events: none; white-space: nowrap; z-index: 3; }
  .oro-bolita .p { width: 11px; height: 11px; border-radius: 50%; background: #C9E265; box-shadow: 0 0 0 2px rgba(201,226,101,.25); }
  .oro-bolita span.t { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #C9E265; }
  /* ══ vpc-191 · que se mueva ═══════════════════════════════════ */
  .oro-vuelo { position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; z-index: 3; pointer-events: none;
    background: radial-gradient(circle at 34% 30%, #FFFFFF 0 2px, #E4F074 55%, #9FB733 100%); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
  .oro-impacto { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); z-index: 3; pointer-events: none; animation: oroOnda .5s ease-out forwards; }
  @keyframes oroOnda { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
  .oro-pista.sacude { animation: oroSacude .42s cubic-bezier(.36,.07,.19,.97); }
  @keyframes oroSacude { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
  @keyframes oroRespira { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
  .oro-mp { font-size: 10px; color: #2B1F00; background: #F3D66B; border-radius: 20px; padding: 2px 8px; font-weight: 800; letter-spacing: .06em; text-transform: none; white-space: nowrap; animation: oroLate 1.1s ease-in-out infinite; }
  @keyframes oroLate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  .oro-flash.mp { background: radial-gradient(circle, rgba(243,214,107,.58) 0, rgba(243,214,107,0) 70%); }
  .oro-flash.mp .txt { color: #FFE9A8; }
  .oro-golpes.sube { animation: oroBump .4s cubic-bezier(.2,1.6,.4,1); }
  button.oro-carta:not(:disabled) { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 1.5px rgba(201,226,101,.4); }
  button.oro-carta:active:not(:disabled) { transform: translateY(2px) scale(.96); }
  .oro-flash { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
  .oro-flash.yo { background: radial-gradient(circle, rgba(201,226,101,.55) 0, rgba(201,226,101,0) 70%); }
  .oro-flash.el { background: radial-gradient(circle, rgba(232,163,61,.45) 0, rgba(232,163,61,0) 70%); }
  .oro-flash.va { animation: oroFlash 1.4s ease-out forwards; }
  @keyframes oroFlash { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
  .oro-flash .txt { font-family: 'Lilita One', cursive; font-size: 38px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 30px rgba(255,255,255,.5); transform: scale(.4) rotate(-6deg); letter-spacing: .02em; }
  .oro-flash.va .txt { animation: oroPunto 1.4s cubic-bezier(.2,1.5,.4,1) forwards; }
  @keyframes oroPunto { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 25% { transform: scale(1.15) rotate(2deg); opacity: 1; } 40% { transform: scale(1) rotate(0); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
  .oro-flash .sub { position: absolute; bottom: 22%; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); padding: 0 10px; text-align: center; }
  canvas.oro-confeti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
  /* vpc-425 · marco blanco como una carta de verdad; el color va por dentro
     (`background-clip`) y el puntito de la esquina dice de qué clase es */
  .oro-carta { flex: none; width: 72px; height: 96px; border-radius: 11px; border: 3.5px solid #fff; background-clip: padding-box; padding: 6px 4px 4px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font: inherit; text-align: center; color: #fff; isolation: isolate; box-shadow: 0 4px 10px rgba(0,0,0,.4); box-sizing: border-box; }
  .oro-carta .golpe { font-family: 'Lilita One', cursive; font-size: 12px; line-height: 1.04; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0,0,0,.45); z-index: 1; width: 100%; hyphens: manual; -webkit-hyphens: manual; }
  /* La pista de la carta: 22x26, la red a media altura, tu pegas desde
     abajo. Es un dibujo, no un icono: no hay que traducirlo. */
  .oro-carta .tray { display: block; width: 100%; height: 42px; flex: none; margin-top: 4px; z-index: 1; }
  .oro-carta .tray path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .oro-carta .tray .pista { stroke: rgba(255,255,255,.28); stroke-width: 1.1; }
  .oro-carta .tray .red2 { stroke: rgba(255,255,255,.5); stroke-width: 1.2; stroke-dasharray: 1.6 1.6; }
  .oro-carta .tray .via { stroke: #fff; stroke-width: 2.1; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
  .oro-carta .tray .bola { fill: #F3D66B; stroke: none; }
  .oro-carta.nueva { animation: oroCae .42s cubic-bezier(.2,1.3,.4,1); }
  @keyframes oroCae { from { transform: scale(.4) translateY(-110px) rotate(-28deg); opacity: 0; } 65% { transform: scale(1.16) rotate(var(--r, 0deg)); opacity: 1; } to { transform: rotate(var(--r, 0deg)) scale(1.06); opacity: 1; } }
  /* tu mano: un abanico de verdad, con el eje muy por debajo de las cartas */
  /* vpc-426 · separadas de verdad: cada una en su sitio, con un giro leve (Anna: «están todas encima una de otra») */
  .oro-carta.mia { position: absolute; left: 50%; bottom: 22px; width: 74px; height: 102px; margin-left: -37px; padding: 6px 4px 4px; transform-origin: 50% 100%; transition: transform .22s, opacity .2s, filter .2s; }
  .oro-carta.mia .golpe { font-size: 12px; } .oro-carta.mia .tray { height: 44px; margin-top: 5px; }
  .oro-carta.chica { width: 44px; height: 58px; padding: 4px 3px; border-radius: 6px; border-width: 2px; box-shadow: 0 2px 5px rgba(0,0,0,.3); } .oro-carta.chica .golpe { font-size: 7.5px; } .oro-carta.chica .tray { height: 22px; margin-top: 1px; }
  @media (max-height: 700px) {
    .oro-carta.mia { width: 66px; height: 92px; margin-left: -33px; } .oro-carta.mia .tray { height: 38px; } .oro-carta.mia .golpe { font-size: 11px; }
    .oro-mano { height: 126px; } .oro-abanico { top: 76px; }
    .oro-suelo { width: 232px; height: 330px; margin: -165px 0 0 -116px; }
  }
  .oc-fondo { background: #3E7A5F; }
  .oc-contrapared { background: #4C6E8A; }
  .oc-passing { background: #7A5F3F; }
  .oc-chiquita { background: linear-gradient(160deg,#8FA84A,#556B22); }
  /* El muro es transición, como el passing: tierra. El «por 4» es
     especial y mata el punto, así que lleva el mismo brillo que la
     víbora y el remate (ver `.oc-portres::after` más abajo). */
  .oc-muro { background: linear-gradient(160deg,#6E7F8C,#36444F); }
  .oc-porcuatro { background: linear-gradient(160deg,#E0A33A,#8A5410); }
  .oc-dejada { background: radial-gradient(circle at 50% 70%, rgba(255,255,255,.22) 0 18%, transparent 19%), linear-gradient(160deg,#B58BD0,#6E4591); }
  .oc-globo { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35) 0 6px, transparent 7px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.28) 0 9px, transparent 10px), radial-gradient(circle at 45% 80%, rgba(255,255,255,.22) 0 5px, transparent 6px), linear-gradient(170deg,#5FA8D3,#2E6C9A); }
  .oc-volea { background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 12px), linear-gradient(160deg,#D9743A,#A8441C); }
  .oc-bajada, .oc-bandeja { box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), inset 0 0 0 5px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.35); }
  .oc-bajada { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 7px, transparent 7px 16px), linear-gradient(160deg,#7A4FB3,#472A78); }
  .oc-bandeja { background: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 7px, transparent 7px 16px), linear-gradient(160deg,#C0399C,#7E1C66); }
  .oc-vibora { box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), inset 0 0 0 5px rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.35); background: repeating-linear-gradient(-30deg, rgba(0,0,0,.22) 0 5px, transparent 5px 14px), linear-gradient(160deg,#2FA36B,#0F4F33); }
  .oc-portres, .oc-salida { box-shadow: inset 0 0 0 3px #F3D66B, inset 0 0 0 5px rgba(0,0,0,.25), 0 0 0 1.5px #B8922E, 0 3px 8px rgba(0,0,0,.35); }
  .oc-portres { background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,235,120,.35) 0 9deg, transparent 9deg 18deg), radial-gradient(circle at 50% 60%, #FFB347 0, #E2572A 45%, #7A1E12 100%); }
  .oc-salida { background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.22) 0 9deg, transparent 9deg 18deg), radial-gradient(circle at 50% 45%, #6EE3C8 0, #1F9E8A 45%, #0C4F49 100%); }
  .oc-portres::after, .oc-salida::after, .oc-vibora::after, .oc-porcuatro::after, .oc-dejada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%); background-size: 250% 100%; animation: oroBrillo 3.2s linear infinite; z-index: 0; pointer-events: none; }
  @keyframes oroBrillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
  .oro-mano { position: relative; height: 142px; flex: none; margin-top: -26px; z-index: 4; perspective: 700px; }
  button.oro-carta { cursor: pointer; transition: transform .13s, opacity .13s; }
  /* vpc-422 · apagadas a medias: se siguen viendo (Anna: «sin oscurecerlas tanto») */
  /* vpc-425 · apagadas pero enteras: con opacidad, en el abanico se leía una carta a través de otra */
  button.oro-carta:disabled { opacity: 1; cursor: not-allowed; filter: saturate(.4) brightness(.68); }
  /* vpc-425 · lo que pasa se dice en un bocadillo, desde el asiento de quien habla */
  .oro-cartel { position: absolute; left: 50%; transform: translateX(-50%); max-width: 84%; background: #fff; color: #14301F; border-radius: 14px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: center; z-index: 5; box-shadow: 0 6px 16px rgba(0,0,0,.45); pointer-events: none; transition: opacity .25s, top .25s, bottom .25s; }
  .oro-cartel::after { content: ''; position: absolute; left: 50%; margin-left: -7px; border: 7px solid transparent; }
  .oro-cartel.de-el { top: 30px; left: auto; right: 10px; transform: none; max-width: 44%; } .oro-cartel.de-el::after { top: 12px; left: -14px; margin: 0; border-right-color: #fff; }
  .oro-cartel.de-yo { bottom: 8px; max-width: 70%; } .oro-cartel.de-yo::after { bottom: -14px; border-top-color: #fff; }
  .oro-cartel.vacio { opacity: 0; }
  /* vpc-431 · el brillo que pasa por los escudos y colores premium */
  .esc-brillo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0;
    animation: escBrillo 3.6s ease-in-out infinite; }
  @keyframes escBrillo { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -130% 0; } }
  @media (prefers-reduced-motion: reduce) { .esc-brillo::after { animation: none; display: none; } }
  /* vpc-429 · la pregunta al salir con el partido a medias */
  .oro-pregunta { position: absolute; inset: 0; z-index: 200; background: rgba(5,14,9,.78); display: flex; align-items: center; justify-content: center; padding: 24px; }
  .oro-pregunta .caja { background: #16341F; border: 2px solid rgba(255,255,255,.16); border-radius: 18px; padding: 20px 18px 16px; width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
  .oro-pregunta .tit { font-family: 'Lilita One', cursive; font-size: 24px; line-height: 1.1; color: #fff; }
  .oro-pregunta .sub { font-size: 13px; color: #C6D0BA; margin-bottom: 4px; }
  .oro-cartel b { font-family: 'Lilita One', cursive; font-weight: 400; font-size: 14px; margin-right: 5px; }
  .oro-cartel.gana { background: #C9E265; } .oro-cartel.gana.de-yo::after { border-top-color: #C9E265; } .oro-cartel.gana.de-el::after { border-right-color: #C9E265; }
  .oro-cartel.pierde { background: #FFD9C4; } .oro-cartel.pierde b { color: #B9471F; }
  .oro-cartel.pierde.de-el::after { border-right-color: #FFD9C4; } .oro-cartel.pierde.de-yo::after { border-top-color: #FFD9C4; }
  .oro-puntos { display: inline-block; width: 1.2em; text-align: left; }
  .oro-puntos::after { content: '…'; animation: oroPuntos 1.2s steps(4) infinite; }
  @keyframes oroPuntos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
  .oro-final { background: #16341F; border: 1px solid rgba(237,241,226,.16); border-radius: 14px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 12px; margin: auto 0; }
  .oro-final .gran { font-family: 'Lilita One', cursive; font-size: 30px; line-height: 1.05; }
  .oro-final .gran.si { color: #C9E265; } .oro-final .gran.no { color: #E8A33D; }
  .oro-final .res { font-family: 'Lilita One', cursive; font-size: 46px; line-height: 1; color: #EDF1E2; font-variant-numeric: tabular-nums; }
  .oro-cifras { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .oro-cifra { background: #0E2419; border: 1px solid rgba(237,241,226,.16); border-radius: 10px; padding: 9px 6px; }
  .oro-cifra .n { font-family: 'Lilita One', cursive; font-size: 24px; color: #C9E265; line-height: 1; }
  .oro-cifra .t { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8A9384; margin-top: 4px; font-weight: 800; }
  .oro-mvp { font-size: 13px; color: #C6D0BA; line-height: 1.5; }
  .oro-mvp b { color: #EDF1E2; }
  @media (prefers-reduced-motion: reduce) { #oro-capa * { transition: none !important; animation: none !important; } .oro-flash.va { opacity: 1; } .oro-vuelo, .oro-impacto, .oro-carta.vuela, .oro-dorso.vuela { display: none !important; } }
/* ═══ 3) LAS PANTALLAS NUEVAS ═══════════════════════════════════════ */
/* el menú principal */
.menu-arriba { display: flex; align-items: center; gap: 10px; flex: none; }
.menu-arriba .nombre { font-family: 'Lilita One', cursive; font-size: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-arriba .liga { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.monedas { display: flex; gap: 6px; flex: none; }
.moneda { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,.4); border: 1.5px solid rgba(255,255,255,.14); border-radius: 20px; padding: 3px 9px 3px 5px; font-family: 'Lilita One', cursive; font-size: 14px; }
.moneda .ic { width: 18px; height: 18px; border-radius: 50%; }
.moneda.coins .ic { background: radial-gradient(circle at 35% 30%, #FFF3B0 0, #F3D66B 45%, #C9941E 100%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.moneda.sb .ic { background: radial-gradient(circle at 35% 30%, #E4F074 0, #C9E265 45%, #7E9A2A 100%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.menu-centro { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 10px 0; }
.menu-logo { text-align: center; font-family: 'Lilita One', cursive; font-size: 40px; line-height: 1; color: var(--oro); text-shadow: 0 4px 0 rgba(0,0,0,.4); letter-spacing: .02em; }
.menu-logo small { display: block; font-family: 'Nunito', sans-serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); margin-top: 4px; }
.menu-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-tres .boton { font-size: 14px; padding: 12px 6px; border-radius: 14px; }
.menu-tres .boton .ic { display: block; font-size: 26px; line-height: 1; margin-bottom: 4px; }
.pestanas { display: flex; gap: 4px; flex: none; background: rgba(0,0,0,.35); border-radius: 18px; padding: 5px; border: 1.5px solid rgba(255,255,255,.1); }
.pestanas button { flex: 1; background: transparent; border: 0; border-radius: 14px; padding: 7px 2px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--apagado); cursor: pointer; text-transform: uppercase; }
.pestanas button .ic { display: block; font-size: 20px; line-height: 1.1; }
.pestanas button.activa { background: var(--fondo3); color: #fff; }
.pestanas button.pronto { opacity: .45; }
.rueda { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--fondo2); color: var(--texto2); font-size: 18px; cursor: pointer; padding: 0; flex: none; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
/* entrenar: las fichas de los tres bots (⚠️ no se llama .rival: ese nombre lo usa el asiento del rival en la pista) */
.bot-ficha { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--fondo2); border: 2px solid rgba(255,255,255,.1); border-radius: 18px; padding: 12px; cursor: pointer; text-align: left; box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.bot-ficha:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.bot-ficha .n { font-family: 'Lilita One', cursive; font-size: 19px; color: #fff; }
.bot-ficha .d { font-size: 12px; color: var(--texto2); font-weight: 700; }
.estrellas { color: var(--oro); font-size: 13px; letter-spacing: .1em; }
/* el avatar */
/* po-1 (Anna): el avatar grande se queda fijo arriba mientras el editor se desplaza por debajo */
.av-fijo { position: sticky; top: calc(0px - var(--sat) - 10px); z-index: 5; text-align: center; padding: 6px 0 8px; margin: 0 -14px; background: linear-gradient(180deg, var(--fondo) 0, var(--fondo) 78%, rgba(14,36,25,0) 100%); }
.avatar { display: inline-block; border-radius: 50%; overflow: hidden; background: var(--fondo, #1E4A32); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.45); flex: none; box-sizing: border-box; }
/* po-8 · los marcos (el aro del avatar): de color, o con degradado pintado en el borde (fondo en el centro, degradado en el aro) */
.avatar.mc-lima { border-color: #C9E265; } .avatar.mc-esmeralda { border-color: #2FD08A; } .avatar.mc-zafiro { border-color: #4C8DFF; } .avatar.mc-rubi { border-color: #FF4D6D; }
.avatar.mc-oro, .avatar.mc-arcoiris, .avatar.mc-fuego, .avatar.mc-campeon { border-color: transparent; }
.avatar.mc-oro { background: linear-gradient(var(--fondo), var(--fondo)) padding-box, linear-gradient(135deg, #FFF3B0, #C9941E 35%, #FFE58A 60%, #A8741A) border-box; }
.avatar.mc-arcoiris { background: linear-gradient(var(--fondo), var(--fondo)) padding-box, linear-gradient(90deg, #FF4D6D, #F3D66B, #C9E265, #4C8DFF, #B26CFF, #FF4D6D) border-box; background-size: 100% 100%, 300% 100%; animation: mcCorre 3s linear infinite; }
.avatar.mc-fuego { background: linear-gradient(var(--fondo), var(--fondo)) padding-box, linear-gradient(0deg, #FF3D00, #FF9100, #FFD54F, #FF9100, #FF3D00) border-box; background-size: 100% 100%, 100% 300%; animation: mcSube 1.6s linear infinite; box-shadow: 0 0 10px rgba(255,120,0,.65), 0 4px 10px rgba(0,0,0,.45); }
.avatar.mc-campeon { background: linear-gradient(var(--fondo), var(--fondo)) padding-box, linear-gradient(135deg, #FFF8D0, #F3D66B 30%, #B8860B 55%, #FFF3B0 80%, #C9941E) border-box; box-shadow: 0 0 0 2px #0E2419, 0 0 0 4px #F3D66B, 0 0 14px rgba(243,214,107,.7); }
@keyframes mcCorre { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 150% 0; } }
@keyframes mcSube { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 -150%; } }
@media (prefers-reduced-motion: reduce) { .avatar.mc-arcoiris, .avatar.mc-fuego { animation: none; } }
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar.marco-oro { border-color: var(--oro); }
.editor-av { display: flex; flex-direction: column; gap: 10px; }
.opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.opcion { width: 44px; height: 44px; border-radius: 12px; border: 2.5px solid rgba(255,255,255,.14); background: var(--fondo2); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.opcion.activa { border-color: var(--lima); box-shadow: 0 0 0 3px rgba(201,226,101,.3); }
.opcion .c { width: 26px; height: 26px; border-radius: 50%; }
.opcion .avatar.mini { border-width: 2px; box-shadow: none; }
/* ajustes */
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ajuste .t { font-weight: 800; }
.ajuste .s { font-size: 12px; color: var(--apagado); }
.interruptor { width: 52px; height: 30px; border-radius: 15px; background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.14); position: relative; cursor: pointer; flex: none; padding: 0; transition: background .2s; }
.interruptor::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.interruptor.on { background: var(--lima); border-color: var(--lima); }
.interruptor.on::after { left: 25px; background: var(--tinta); }
.idiomas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.idiomas button { background: var(--fondo2); border: 2px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 6px; font-weight: 800; font-size: 13px; cursor: pointer; }
.idiomas button.activa { border-color: var(--lima); color: #fff; }
/* la sala de espera */
.vs { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0; }
.vs .lado { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; }
.vs .lado .n { font-family: 'Lilita One', cursive; font-size: 16px; color: #fff; text-align: center; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs .x { font-family: 'Lilita One', cursive; font-size: 30px; color: var(--oro); text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.hueco { width: 76px; height: 76px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-family: 'Lilita One', cursive; font-size: 30px; color: rgba(255,255,255,.4); animation: oroRespira 1.6s ease-in-out infinite; }
.codigo-grande { font-family: 'Lilita One', cursive; font-size: 40px; letter-spacing: .22em; color: #fff; text-align: center; background: rgba(0,0,0,.35); border: 2px dashed rgba(255,255,255,.25); border-radius: 16px; padding: 12px 10px 12px 16px; }
/* el menú dentro del partido (☰) y las preguntas */
.oro-menu { position: absolute; inset: 0; z-index: 200; background: rgba(5,14,9,.8); display: flex; align-items: center; justify-content: center; padding: 24px; }
.oro-menu .caja { background: var(--fondo2); border: 2px solid rgba(255,255,255,.16); border-radius: 18px; padding: 20px 18px 16px; width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.oro-menu .tit { font-family: 'Lilita One', cursive; font-size: 24px; line-height: 1.1; color: #fff; }
.oro-menu .sub { font-size: 13px; color: var(--texto2); }
/* el fin del partido, al estilo del juego */
.oro-final .avatar { margin: 0 auto; }
.oro-final .resultado { display: flex; align-items: center; justify-content: center; gap: 14px; }
.oro-final .resultado .lado { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; }
.oro-final .resultado .n { font-size: 12px; font-weight: 800; color: var(--texto2); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oro-final .resultado .t { font-family: 'Lilita One', cursive; font-size: 52px; line-height: 1; color: #fff; }
.oro-final .resultado .t.gana { color: var(--lima); } .oro-final .resultado .t.pierde { color: var(--naranja); }
/* el tutorial: el bocadillo grande con la mano que señala */
.tuto { position: absolute; left: 50%; transform: translateX(-50%); bottom: 170px; max-width: 86%; background: #fff; color: var(--tinta); border-radius: 16px; padding: 12px 16px; font-weight: 800; font-size: 14px; line-height: 1.3; text-align: center; z-index: 150; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: subeAviso .3s ease-out; }
.tuto::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
.tuto.junto-tm { left: auto; right: 80px; transform: none; bottom: 150px; max-width: 60%; animation: none; }
.tuto.junto-tm::after { left: auto; right: -14px; top: 50%; bottom: auto; margin: -8px 0 0 0; border: 8px solid transparent; border-left-color: #fff; border-right: 0; }
.tuto .ok { margin-top: 8px; background: var(--lima); border: 0; border-radius: 10px; padding: 7px 14px; font-family: 'Lilita One', cursive; font-size: 15px; color: var(--tinta); cursor: pointer; }
/* ═══ po-2 · COMPETIR: ligas, regalo, ranking, retos, medallas ═══ */
.chip.coins { background: linear-gradient(180deg, #FFE9A8, var(--oro)); color: var(--tinta); border-color: rgba(0,0,0,.15); flex: none; }
.boton.regalo { padding: 11px 16px; font-size: 17px; animation: regaloLate 1.4s ease-in-out infinite; }
@keyframes regaloLate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.vuela-coins { position: fixed; left: 50%; top: 38%; transform: translateX(-50%); font-family: 'Lilita One', cursive; font-size: 36px; color: var(--oro); text-shadow: 0 3px 0 rgba(0,0,0,.4); z-index: 600; pointer-events: none; animation: vuelaCoins 1.3s ease-out forwards; }
@keyframes vuelaCoins { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -90px) scale(1); } }
.gema { vertical-align: -3px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); flex: none; }
.liga-tarjeta { display: flex; align-items: center; gap: 14px; background: var(--fondo2); border: 2px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px; box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.liga-tarjeta .ln { font-family: 'Lilita One', cursive; font-size: 24px; color: #fff; line-height: 1; }
.liga-tarjeta .lt { font-size: 13px; font-weight: 800; color: var(--texto2); margin: 4px 0 6px; }
.barra { height: 10px; border-radius: 6px; background: rgba(0,0,0,.4); overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--lima), var(--oro)); border-radius: 6px; transition: width .6s; }
.barra-txt { font-size: 11px; font-weight: 800; color: var(--apagado); margin-top: 4px; letter-spacing: .04em; }
.ligas { display: flex; flex-direction: column; gap: 8px; }
.liga-fila { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--fondo2); border: 2px solid rgba(255,255,255,.1); border-radius: 16px; padding: 10px 12px; cursor: pointer; text-align: left; box-shadow: 0 4px 0 rgba(0,0,0,.3); color: inherit; }
.liga-fila:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.liga-fila.mia { border-color: var(--lima); box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 0 3px rgba(201,226,101,.25); }
.liga-fila.cerrada { opacity: .5; cursor: default; }
.liga-fila.pasada { opacity: .7; cursor: default; }
.liga-fila.pasada .d { color: var(--lima); }
div.liga-fila { cursor: default; } div.liga-fila:active { transform: none; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.liga-fila .n { font-family: 'Lilita One', cursive; font-size: 18px; color: #fff; }
.liga-fila .n .tu { font-family: 'Nunito', sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--lima); margin-left: 6px; font-weight: 800; }
.liga-fila .d { font-size: 12px; font-weight: 800; color: var(--texto2); }
.liga-fila .jugar { flex: none; font-family: 'Lilita One', cursive; font-size: 16px; background: linear-gradient(180deg, var(--lima2), var(--lima)); color: var(--tinta); border-radius: 10px; padding: 8px 12px; box-shadow: 0 3px 0 #7E9A2A; }
.liga-fila .jugar.sin { background: rgba(0,0,0,.35); color: var(--apagado); box-shadow: none; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 11px; }
.busca-n { font-family: 'Lilita One', cursive; font-size: 64px; color: var(--oro); text-align: center; text-shadow: 0 4px 0 rgba(0,0,0,.4); line-height: 1; margin: 14px 0 6px; }
.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; flex: none; }
.pestanas button { background: var(--fondo2); border: 2px solid rgba(255,255,255,.12); border-radius: 12px; padding: 9px; font-weight: 800; font-size: 13px; cursor: pointer; }
.pestanas button.activa { border-color: var(--lima); color: #fff; }
.lista { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 6px; }
.rank-fila { display: flex; align-items: center; gap: 10px; background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 14px; padding: 7px 10px; flex: none; }
.rank-fila.yo { border-color: var(--lima); }
.rank-fila .pos { font-family: 'Lilita One', cursive; font-size: 18px; color: var(--oro); width: 30px; text-align: center; flex: none; }
.rank-fila .n { font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-fila .d { font-size: 11px; color: var(--apagado); font-weight: 800; }
.rank-fila .t { font-family: 'Lilita One', cursive; font-size: 16px; color: #fff; flex: none; }
#rank-yo { flex: none; padding-top: 8px; }
.reto { display: flex; align-items: center; gap: 12px; background: var(--fondo2); border: 2px solid rgba(255,255,255,.1); border-radius: 16px; padding: 12px; margin-bottom: 8px; }
.reto .n { font-weight: 800; color: #fff; margin-bottom: 6px; }
.reto .d { font-size: 11px; font-weight: 800; color: var(--apagado); margin-top: 4px; }
.reto .premio { font-family: 'Lilita One', cursive; font-size: 18px; color: var(--oro); flex: none; }
.reto.hecho { border-color: var(--lima); } .reto.hecho .premio { color: var(--lima); font-size: 26px; }
.vitrina { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.med { background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 16px; padding: 10px 6px; text-align: center; }
.med.si { border-color: rgba(243,214,107,.5); }
.med .n { font-size: 11px; font-weight: 800; color: var(--texto2); margin-top: 4px; line-height: 1.2; }
.medalla.no { filter: grayscale(1); opacity: .3; }
.oro-premio { display: flex; flex-direction: column; gap: 8px; }
.premio-filas { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pf { font-family: 'Lilita One', cursive; font-size: 22px; padding: 6px 12px; border-radius: 12px; background: rgba(0,0,0,.3); color: #fff; animation: oroBump .6s cubic-bezier(.2,1.6,.4,1); }
.pf.mas { color: var(--lima); } .pf.menos { color: #FFB4A0; } .pf.neutra { color: var(--apagado); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; }
.liga-cambio { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; color: var(--texto2); text-align: left; }
.liga-cambio.sube { font-family: 'Lilita One', cursive; font-size: 22px; color: var(--oro); } .liga-cambio.baja { font-family: 'Lilita One', cursive; font-size: 18px; color: #FFB4A0; }
.medalla-nueva { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; color: var(--oro); font-size: 13px; }
/* ═══ po-3 · AMIGOS ═══ */
.amigo-fila { display: flex; align-items: center; gap: 10px; background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 14px; padding: 8px 10px; margin-bottom: 6px; }
.amigo-fila.invita { border-color: var(--oro); }
.amigo-fila .n { font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amigo-fila .d { font-size: 11px; color: var(--apagado); font-weight: 800; }
.amigo-fila .av { position: relative; flex: none; }
.amigo-fila .av.on::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #4CD964; border: 2px solid var(--fondo2); }
.redondo { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--fondo3); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; padding: 0; }
.redondo.mini { width: 28px; height: 28px; font-size: 12px; border-width: 1px; background: transparent; color: var(--apagado); }
.fin-denuncia { background: none; border: 0; padding: 8px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--apagado); cursor: pointer; text-decoration: underline; }
.redondo.si { background: var(--lima); color: var(--tinta); border-color: var(--lima); } .redondo.no { color: #FFB4A0; }
.pestanas.tres { grid-template-columns: 1fr 1fr 1fr; }
/* ═══ po-4 · TORNEO y LIGA DE AMIGOS ═══ */
.menu-tres.cuatro { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.menu-tres.cuatro .boton { font-size: 12px; padding: 10px 4px; } .menu-tres.cuatro .boton .ic { font-size: 22px; }
.t-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.t-dia { background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.1); border-radius: 12px; padding: 6px 2px; text-align: center; }
.t-dia .l { font-size: 10px; font-weight: 800; color: var(--apagado); letter-spacing: .08em; }
.t-dia .p { font-family: 'Lilita One', cursive; font-size: 15px; color: #fff; min-height: 18px; }
.t-dia.hecho { border-color: var(--lima); } .t-dia.hecho .p { color: var(--lima); }
.t-dia.hoy { border-color: var(--oro); } .t-dia.futuro { opacity: .45; }
/* po-8 · el torneo es un cuadro: cinco rondas en fila y la copa */
.t-lema { font-family: 'Lilita One', cursive; font-size: 17px; color: #fff; text-align: center; margin-bottom: 10px; line-height: 1.15; }
.cuadro { display: flex; align-items: stretch; gap: 4px; }
.cuadro .cr { flex: 1 1 0; min-width: 0; background: rgba(0,0,0,.32); border: 2px solid rgba(255,255,255,.1); border-radius: 10px; padding: 5px 1px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cuadro .cr .rn { font-size: 11px; font-weight: 800; color: var(--apagado); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cuadro .cr .avatar { border-width: 2px; box-shadow: none; }
.cuadro .cr .rv { font-size: 9.5px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cuadro .cr .pt { font-size: 10.5px; white-space: nowrap; font-weight: 800; color: var(--oro); }
.cuadro .cr .hueco { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.25); color: var(--apagado); font-weight: 800; line-height: 30px; box-sizing: border-box; }
.cuadro .cr .trofeo { font-size: 24px; line-height: 34px; }
.cuadro .cr.ganada { border-color: var(--lima); } .cuadro .cr.ganada .pt { color: var(--lima); }
.cuadro .cr.toca { border-color: var(--oro); background: rgba(243,214,107,.12); box-shadow: 0 0 14px rgba(243,214,107,.35); }
.cuadro .cr.luego { opacity: .55; }
.cuadro .cr.copa { border-color: rgba(243,214,107,.5); }
.cuadro .cr-flecha { align-self: center; color: var(--apagado); font-weight: 800; font-size: 12px; flex: none; }
.t-revivir { background: rgba(243,214,107,.1); border: 2px dashed rgba(243,214,107,.5); border-radius: 14px; padding: 10px; margin: 8px 0; text-align: center; }
.t-revivir .t { font-weight: 800; color: #fff; font-size: 14px; margin-bottom: 8px; }
.t-revivir .fila { gap: 8px; } .t-revivir .boton { margin: 0; }
.torneo-paso { width: 100%; font-family: 'Lilita One', cursive; font-size: 22px; text-align: center; margin-bottom: 4px; }
.torneo-paso.pasa { color: var(--lima); } .torneo-paso.campeon { color: var(--oro); font-size: 26px; } .torneo-paso.fuera { color: #FFB4A0; }
.t-hoy { text-align: center; padding: 6px 0; }
.t-hoy .r { font-family: 'Lilita One', cursive; font-size: 34px; color: #fff; line-height: 1; margin-bottom: 8px; }
.t-hoy .pf { display: inline-block; }
.podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pd { background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 14px; padding: 8px 4px; text-align: center; }
.pd .m { font-size: 22px; } .pd .n { font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.pd .c { font-size: 12px; font-weight: 800; color: var(--oro); }
.amigo-fila.liga { width: 100%; cursor: pointer; color: inherit; text-align: left; }
.amigo-fila.liga .pos { font-family: 'Lilita One', cursive; font-size: 20px; color: var(--oro); width: 30px; text-align: center; flex: none; }
.amigo-fila.liga .t { font-size: 22px; color: var(--apagado); }
.rank-fila .av { flex: none; } .rank-fila .av.on::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #4CD964; border: 2px solid var(--fondo2); }
/* ═══ po-5 · EMOTES ═══ */
.oro-emote-btn { position: absolute; left: 12px; bottom: 100px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: rgba(14,36,25,.85); font-size: 20px; cursor: pointer; z-index: 7; box-shadow: 0 3px 0 rgba(0,0,0,.35); padding: 0; }
.oro-emotes { position: absolute; left: 12px; bottom: 148px; display: flex; flex-direction: column; gap: 6px; z-index: 8; animation: subeAviso .2s ease-out; }
.oro-emotes button { display: flex; align-items: center; gap: 6px; background: #fff; color: var(--tinta); border: 0; border-radius: 14px; padding: 6px 10px; font-size: 18px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.oro-emotes button small { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px; }
.oro-bocadillo { position: absolute; background: #fff; color: var(--tinta); border-radius: 16px; padding: 6px 12px; font-size: 20px; font-weight: 800; z-index: 9; opacity: 0; transform: scale(.6); pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.45); white-space: nowrap; }
.oro-bocadillo span { font-size: 13px; }
.oro-bocadillo.mia { left: 70px; bottom: 76px; } .oro-bocadillo.mia::after { content: ''; position: absolute; left: -8px; bottom: 10px; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
.oro-bocadillo.rival { left: 50%; top: 8px; margin-left: 40px; } .oro-bocadillo.rival::after { content: ''; position: absolute; left: -8px; top: 12px; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
.oro-bocadillo.va { animation: bocaVa 2.6s ease-out forwards; }
@keyframes bocaVa { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.08); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
/* ═══ po-5 · CARTAS PREMIUM ═══ */
.oc-premium { background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.35) 0 14%, transparent 15%), linear-gradient(160deg, #FFE9A8, #D4A52A 70%, #B07E12); color: #3A2A05; border-color: #FFF6D5; }
.oc-premium .tray .via { stroke: #3A2A05; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .oc-premium .tray .bola { fill: #3A2A05; } .oc-premium .tray .pista, .oc-premium .tray .red2 { display: none; }
.oc-premium .golpe { color: #3A2A05; }
.oc-premium .chapa { position: absolute; right: 3px; top: 3px; background: #14301F; color: #fff; border-radius: 10px; padding: 1px 6px; font-size: 11px; font-weight: 800; z-index: 2; }
.oro-carta.mini { width: 44px; height: 58px; border-width: 2px; padding: 3px 2px 2px; border-radius: 7px; box-shadow: 0 2px 4px rgba(0,0,0,.4); flex: none; }
.oro-carta.mini .tray { height: 26px; } .oro-carta.mini .golpe { font-size: 7px; line-height: 1; }
.carta-llevo { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--fondo2); border: 2px solid rgba(243,214,107,.35); border-radius: 14px; padding: 8px 10px; cursor: pointer; text-align: left; color: inherit; }
.carta-llevo .n { font-weight: 800; color: #fff; } .carta-llevo .d { font-size: 11px; color: var(--apagado); font-weight: 800; } .carta-llevo .t { font-size: 22px; color: var(--apagado); }
.hueco-carta { width: 44px; height: 58px; border-radius: 7px; border: 2px dashed rgba(243,214,107,.5); display: flex; align-items: center; justify-content: center; color: var(--oro); font-size: 20px; flex: none; }
.cartas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carta-opcion { background: var(--fondo2); border: 2px solid rgba(255,255,255,.1); border-radius: 16px; padding: 10px 8px; text-align: center; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; }
.carta-opcion .n { font-family: 'Lilita One', cursive; font-size: 16px; color: #fff; } .carta-opcion .d { font-size: 11px; color: var(--texto2); font-weight: 700; line-height: 1.25; } .carta-opcion .c { font-size: 10px; color: var(--apagado); font-weight: 800; }
.carta-opcion.elegida { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(243,214,107,.25); } .carta-opcion .marca { color: var(--oro); font-weight: 800; font-size: 12px; }
.carta-opcion.sin { opacity: .45; } .carta-opcion.sin .oro-carta { filter: grayscale(1); }
.oro-prem-btn { position: absolute; right: 14px; bottom: 76px; background: none; border: 0; padding: 0; cursor: pointer; z-index: 5; }
.oro-prem-btn .oro-carta { transition: transform .2s; }
.oro-prem-btn.puedo .oro-carta { box-shadow: 0 0 0 3px #F3D66B, 0 0 22px rgba(243,214,107,.85); transform: translateY(-4px); animation: oroLate 1.2s ease-in-out infinite; }
.oro-prem-btn.usada { opacity: .35; filter: grayscale(1); pointer-events: none; }
.oro-prem-rival { position: absolute; left: 50%; top: 10px; margin-left: 60px; z-index: 5; } .oro-prem-rival.usada { opacity: .35; filter: grayscale(1); }
/* po-8 · el rival decide si usa su Let / Punto dulce: su carta late y lleva la cuenta atrás */
.oro-prem-rival.decide .oro-carta { box-shadow: 0 0 0 3px #F3D66B, 0 0 22px rgba(243,214,107,.85); animation: oroLate 1s ease-in-out infinite; }
.oro-prem-rival .cuenta { position: absolute; right: -10px; top: -10px; min-width: 22px; height: 22px; border-radius: 11px; background: #F3D66B; color: #0E2419; font-family: 'Lilita One', cursive; font-size: 14px; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
/* po-8 · la oferta de Let / Punto dulce al perder un punto: barra que se vacía */
.prem-cuenta { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin: -2px 0 4px; }
.prem-cuenta i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #F3D66B, #C9E265); transform-origin: 0 50%; animation: premCuenta linear forwards; }
@keyframes premCuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.oro-prem-panel .caja.auto { border-color: #F3D66B; box-shadow: 0 0 0 3px rgba(243,214,107,.25), 0 20px 50px rgba(0,0,0,.6); }
.oro-prem-panel .caja .oro-carta { margin: 0 auto 8px; width: 90px; height: 120px; }
.oro-prem-panel .caja .oro-carta .tray { height: 50px; } .oro-prem-panel .caja .oro-carta .golpe { font-size: 12px; }
.oro-prem-panel .desc { color: var(--texto2); font-weight: 700; font-size: 14px; } .oro-prem-panel .cuando { color: var(--apagado); font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.oro-prem-elige { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; } .oro-prem-elige .oro-carta { cursor: pointer; width: 60px; height: 80px; }
.oro-flash.prem .txt { color: #F3D66B; }
#oro-manoEl .oro-carta.vista { width: 40px; height: 54px; border-width: 2px; padding: 3px 2px 2px; border-radius: 7px; } #oro-manoEl .oro-carta.vista .tray { height: 24px; } #oro-manoEl .oro-carta.vista .golpe { font-size: 6px; line-height: 1; }
/* ═══ po-6 · historial ═══ */
.hist-fila { display: flex; align-items: center; gap: 8px; background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 12px; padding: 6px 10px; margin-bottom: 6px; border-left-width: 5px; }
.hist-fila.si { border-left-color: var(--lima); } .hist-fila.no { border-left-color: var(--naranja); }
.hist-fila .n { font-weight: 800; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hist-fila .d { font-size: 10px; color: var(--apagado); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hist-fila .r { font-family: 'Lilita One', cursive; font-size: 18px; color: #fff; flex: none; } .hist-fila .x { font-size: 11px; font-weight: 800; color: var(--oro); width: 46px; text-align: right; flex: none; }
.reto .premio small { font-size: 11px; color: var(--oro); }
/* ═══ po-7 · TIENDA ═══ */
button.chip.coins { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; }
.tienda-fila { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--fondo2); border: 2px solid rgba(255,255,255,.1); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; text-align: left; color: inherit; font: inherit; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.tienda-fila:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.3); } .tienda-fila:disabled { opacity: .55; cursor: default; }
.tienda-fila.oro { border-color: rgba(243,214,107,.6); } .tienda-fila.video { border-color: rgba(201,226,101,.5); }
.tienda-fila .ic { font-size: 26px; flex: none; } .tienda-fila .n { font-weight: 800; color: #fff; } .tienda-fila .d { font-size: 11px; color: var(--apagado); font-weight: 800; }
.tienda-fila .p { font-family: 'Lilita One', cursive; font-size: 17px; color: var(--oro); flex: none; white-space: nowrap; }
.tienda-cosmeticos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tienda-cosm { background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 14px; padding: 8px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: inherit; font: inherit; }
.tienda-cosm.uso { border-color: var(--lima); } .tienda-cosm.bloq { opacity: .75; }
.tienda-cosm .pie { font-size: 11px; font-weight: 800; color: var(--oro); text-align: center; line-height: 1.15; padding: 0 2px; } .tienda-cosm .pie .en-uso { color: var(--lima); }
.tienda-cosm .avatar { box-shadow: none; }
.tienda-dorso { width: 38px; height: 52px; position: relative; }
.tienda-cartas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tienda-carta { background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 14px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tienda-carta .n { font-size: 11px; font-weight: 800; color: #fff; line-height: 1.1; min-height: 24px; }
.tienda-carta .packs { display: flex; gap: 3px; } .tienda-carta .pack { background: rgba(0,0,0,.35); border: 1.5px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff; font-weight: 800; font-size: 11px; padding: 4px 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.tienda-carta .pack small { font-size: 9px; color: var(--oro); }

/* po-8 · el cofre de liga: se sacude, se abre la tapa y salen las cosas una a una */
.cofre { width: 100%; background: radial-gradient(circle at 50% 30%, rgba(243,214,107,.18), transparent 70%), var(--fondo2); border: 2px solid rgba(243,214,107,.5); border-radius: 16px; padding: 10px 8px 8px; margin: 6px 0; text-align: center; }
.cofre-tit { font-family: 'Lilita One', cursive; font-size: 18px; color: var(--oro); display: flex; align-items: center; justify-content: center; gap: 6px; }
.cofre-caja svg { width: 74px; height: 64px; display: block; margin: 18px auto 0; overflow: visible; }
.cofre-caja { animation: cofreSacude .7s ease-in-out; }
.cofre-caja .tapa { transform-origin: 6px 24px; transform-box: view-box; animation: cofreTapa .45s .7s ease-out forwards; }
.cofre-items { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; min-height: 56px; }
.cofre-items .ci { opacity: 0; transform: translateY(14px) scale(.6); animation: cofreSale .45s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(1.05s + var(--k, 0) * .18s); color: #fff; font-size: 16px; }
.cofre-items .ci .avatar { box-shadow: none; }
.cofre-prob { font-size: 10px; color: var(--apagado); font-weight: 700; line-height: 1.3; }
@keyframes cofreSacude { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
@keyframes cofreTapa { to { transform: rotate(-28deg) translate(-2px, -4px); } }
@keyframes cofreSale { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cofre-caja, .cofre-caja .tapa { animation: none; } .cofre-items .ci { animation: none; opacity: 1; transform: none; } }

/* po-8 · el marco y el dorso del pase de temporada */
.avatar.mc-pase { border-color: transparent; background: linear-gradient(var(--fondo), var(--fondo)) padding-box, linear-gradient(135deg, #7F5CFF, #2FD0C8 50%, #F3D66B) border-box; box-shadow: 0 0 10px rgba(127,92,255,.55), 0 4px 10px rgba(0,0,0,.45); }
.oro-dorso.dz-pase { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 4px, transparent 4px 9px), linear-gradient(160deg, #5B3FD6, #1B1050); border-color: #2FD0C8; }
.oro-dorso.dz-pase::after { background: radial-gradient(circle at 35% 30%, #FFF8D0 0, #F3D66B 45%, #C9941E 100%); box-shadow: 0 0 8px rgba(47,208,200,.8); }
/* po-8 · el pase: la barrita del menú, la cabecera y la escalera de 30 niveles */
.pase-barra { display: flex; align-items: center; gap: 10px; width: 100%; background: linear-gradient(90deg, rgba(127,92,255,.28), rgba(47,208,200,.18)); border: 2px solid rgba(127,92,255,.55); border-radius: 14px; padding: 8px 12px; color: #fff; font: inherit; cursor: pointer; text-align: left; }
.pase-barra.premium { border-color: #F3D66B; }
.pase-barra .ic { font-size: 22px; } .pase-barra .t { display: block; font-weight: 800; font-size: 13px; } .pase-barra .fl { color: var(--apagado); font-weight: 800; }
.pase-barra .barra, .pase-nivel .barra { display: block; height: 7px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 4px; }
.pase-barra .barra i, .pase-nivel .barra i { display: block; height: 100%; background: linear-gradient(90deg, #2FD0C8, #C9E265); border-radius: 4px; }
.pase-nivel { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.pase-nivel .n { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #7F5CFF, #2FD0C8); display: flex; align-items: center; justify-content: center; font-family: 'Lilita One', cursive; font-size: 26px; color: #fff; flex: none; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.pase-nivel .t { font-family: 'Lilita One', cursive; font-size: 19px; color: #fff; } .pase-nivel .s { font-size: 12px; color: var(--apagado); font-weight: 800; margin-top: 4px; }
.pase-ok { margin-top: 10px; text-align: center; font-weight: 800; color: var(--oro); }
.pase-cols { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 6px; margin: 14px 0 4px; }
.pase-fila { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 6px; align-items: stretch; margin-bottom: 6px; }
.pase-fila .pn { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0,0,0,.3); font-family: 'Lilita One', cursive; color: var(--apagado); font-size: 16px; }
.pase-fila .pc { position: relative; background: var(--fondo2); border: 2px solid rgba(255,255,255,.08); border-radius: 12px; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px; }
.pase-fila .pc.prem { border-color: rgba(127,92,255,.45); background: linear-gradient(160deg, rgba(127,92,255,.18), var(--fondo2)); }
.pase-fila .pc.cerrado > *:not(.candado) { opacity: .45; } .pase-fila .candado { position: absolute; right: 4px; top: 2px; font-size: 12px; }
.pase-fila.ya .pn { background: var(--lima); color: #0E2419; } .pase-fila.ya .pc { border-color: rgba(201,226,101,.6); }
.pase-fila.toca .pn { background: var(--oro); color: #0E2419; } .pase-fila.toca .pc { border-color: rgba(243,214,107,.7); }
.pase-fila .pc .oro-carta { width: 30px; height: 40px; } .pp-txt { font-weight: 800; color: #fff; font-size: 14px; white-space: nowrap; }
.pp-dorso { width: 28px; height: 38px; position: relative; } .pp-dorso::after { width: 58%; }
.pase-sube .pase-premios { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; align-items: center; } .pase-sube .pp { display: inline-flex; align-items: center; gap: 4px; } .pase-sube .pp.prem { filter: drop-shadow(0 0 4px rgba(127,92,255,.8)); }
/* po-10 · los cofres gratis del menú: el del día y el de victorias (●●○○) */
.cofres-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cofre-mini { display: flex; align-items: center; gap: 8px; min-width: 0; background: var(--fondo2); border: 2px solid rgba(243,214,107,.28); border-radius: 14px; padding: 6px 10px 6px 8px; color: var(--texto); font: inherit; cursor: pointer; text-align: left; }
.cofre-mini svg { width: 36px; height: 32px; flex: none; overflow: visible; }
.cofre-mini > span { display: flex; flex-direction: column; min-width: 0; }
.cofre-mini b { font-size: 13px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cofre-mini small { font-size: 11.5px; font-weight: 700; color: var(--apagado); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.cofre-mini:not(.listo):not(.vic) svg { filter: grayscale(.7) brightness(.8); }
.cofre-mini.listo { border-color: var(--oro); background: radial-gradient(circle at 20% 50%, rgba(243,214,107,.28), transparent 70%), var(--fondo2); }
.cofre-mini.listo small { color: var(--oro); }
.cofre-mini.listo svg { animation: cofreMenea 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes cofreMenea { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-9deg); } 76% { transform: rotate(8deg); } 84% { transform: rotate(-5deg); } 92% { transform: rotate(3deg); } }
.puntos { display: inline-flex; gap: 3px; }
.puntos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); display: inline-block; }
.puntos i.si { background: var(--oro); box-shadow: 0 0 6px rgba(243,214,107,.7); }
.cofre-vic-fila { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--texto2); margin: 4px 0; }
.cofre-vic-fila .puntos i { width: 10px; height: 10px; }
/* po-10 · una ventana encima de la pantalla (el cofre del día, la pregunta de los avisos) */
.ventana { position: fixed; inset: 0; z-index: 300; background: rgba(4,14,8,.78); display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--sat)) 16px calc(16px + var(--sab)); animation: ventanaVela .2s ease-out; }
.ventana-caja { width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; background: var(--fondo); border: 2px solid rgba(243,214,107,.4); border-radius: 20px; padding: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.6); animation: ventanaSube .3s cubic-bezier(.2,1.3,.4,1); }
.ventana-caja .cofre { margin: 0; border: 0; background: radial-gradient(circle at 50% 30%, rgba(243,214,107,.18), transparent 70%); padding-top: 4px; }
@keyframes ventanaVela { from { opacity: 0; } }
@keyframes ventanaSube { from { opacity: 0; transform: translateY(24px) scale(.94); } }
.avisos-preg { text-align: center; }
.avisos-preg .campana { font-size: 46px; animation: campana 1.8s ease-in-out infinite; transform-origin: 50% 10%; display: inline-block; }
.avisos-preg .t { font-family: 'Lilita One', cursive; font-size: 24px; color: var(--oro); margin: 4px 0 6px; }
.avisos-preg .s { font-size: 14px; font-weight: 700; color: var(--texto2); line-height: 1.35; margin-bottom: 14px; }
@keyframes campana { 0%, 50%, 100% { transform: rotate(0); } 60% { transform: rotate(14deg); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .cofre-mini.listo svg, .avisos-preg .campana, .ventana, .ventana-caja { animation: none; } }

/* ═══ po-11 · MÁS BONITO (Anna, 29 oct: «adelante con más mejoras, sobre todo estéticas») ═══ */
/* las monedas dibujadas (las pone iconos.js en lugar de 🪙 y 🎾) */
.mon { display: inline-block; width: 1.18em; height: 1.18em; vertical-align: -.22em; background: center / contain no-repeat; flex: none; font-style: normal; }
.mon.c { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEFAE'/%3E%3Cstop offset='.55' stop-color='%23F3C843'/%3E%3Cstop offset='1' stop-color='%23C98F1C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16.6' r='14.6' fill='%239A6512'/%3E%3Ccircle cx='16' cy='15.4' r='14.2' fill='url(%23g)'/%3E%3Ccircle cx='16' cy='15.4' r='10.4' fill='none' stroke='%23C98F1C' stroke-width='1.7' opacity='.85'/%3E%3Cpath d='M16 8.4l2 4.1 4.5.6-3.3 3.1.8 4.5-4-2.2-4 2.2.8-4.5-3.3-3.1 4.5-.6z' fill='%23FFF6CF' stroke='%23C98F1C' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M6.6 10.4a10.6 10.6 0 0 1 5.8-5.2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' fill='none' opacity='.75'/%3E%3C/svg%3E"); }
.mon.s { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.36' cy='.3' r='.85'%3E%3Cstop offset='0' stop-color='%23F6FFB8'/%3E%3Cstop offset='.5' stop-color='%23C9E265'/%3E%3Cstop offset='1' stop-color='%236F9419'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='15' cy='17' r='13.6' fill='url(%23b)' stroke='%2355730F' stroke-width='1'/%3E%3Cpath d='M4.4 10.6c4.6 3.6 4.6 9.2 0 12.8M25.6 10.6c-4.6 3.6-4.6 9.2 0 12.8' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M26.4 1.4l1.2 2.9 2.9 1.2-2.9 1.2-1.2 2.9-1.2-2.9-2.9-1.2 2.9-1.2z' fill='%23FFE27A' stroke='%23C98F1C' stroke-width='.6'/%3E%3C/svg%3E"); }
.ico { display: inline-block; vertical-align: middle; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.28)); overflow: visible; }
.rueda { display: inline-flex; align-items: center; justify-content: center; }
.rueda .ico { width: 24px; height: 24px; }
/* el contador de Coins de arriba: oscuro con borde de oro y un «+» que lleva a la tienda */
.chip.coins { background: rgba(0,0,0,.42); color: #fff; border: 2px solid rgba(243,214,107,.6); padding: 3px 6px 3px 5px; gap: 6px; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.chip.coins .mon { width: 22px; height: 22px; vertical-align: middle; }
.chip.coins b { font-size: 16px; }
.chip.coins .mas { width: 18px; height: 18px; border-radius: 50%; background: var(--lima); color: var(--tinta); font-family: 'Lilita One', cursive; font-size: 15px; line-height: 18px; text-align: center; margin-left: 2px; }
/* el menú: brillo detrás del logo, chispas que suben y el logo de oro con un reflejo que pasa */
.pantalla.menu-p { background: radial-gradient(ellipse 75% 34% at 50% 26%, rgba(243,214,107,.14), transparent 70%), radial-gradient(ellipse 120% 50% at 50% 112%, rgba(201,226,101,.09), transparent 62%); }
.menu-arriba, .menu-centro { position: relative; z-index: 1; }
.chispas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.chispas i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFE58A; box-shadow: 0 0 8px 2px rgba(243,214,107,.5); opacity: 0; animation: chispa 8s ease-in-out infinite; }
@keyframes chispa { 0% { opacity: 0; transform: translateY(30px) scale(.5); } 25% { opacity: .85; } 70% { opacity: .45; } 100% { opacity: 0; transform: translateY(-110px) scale(1); } }
.menu-logo .t { display: inline-block; color: transparent; background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat, linear-gradient(180deg, #FFF4BE 0%, #F3D66B 48%, #DDA632 100%);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 0 rgba(0,0,0,.42)); animation: logoBrillo 5s ease-in-out 1s infinite; }
.menu-logo { text-shadow: none; }
.menu-logo .o-bola { display: inline-block; width: .78em; height: .78em; margin: 0 .01em 0 .02em; vertical-align: -.04em; animation: oBota 2.8s ease-in-out infinite; overflow: visible; }
@keyframes logoBrillo { 0%, 55% { background-position: 160% 0, 0 0; } 85%, 100% { background-position: -60% 0, 0 0; } }
@keyframes oBota { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-.2em); } 88% { transform: translateY(0) scale(1.06, .9); } 94% { transform: translateY(-.05em); } }
/* los botones grandes del menú llevan su dibujo a la izquierda (el texto sigue centrado) */
.boton.con-ic { padding-left: 64px; padding-right: 64px; }
.boton .bic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.boton .bic svg { width: 40px; height: 40px; }
.boton.grande .bic svg { width: 50px; height: 50px; }
.boton.oro .bic .gema { filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); animation: gemaGira 4s ease-in-out infinite; }
@keyframes gemaGira { 0%, 80%, 100% { transform: rotate(0) scale(1); } 88% { transform: rotate(-8deg) scale(1.08); } 94% { transform: rotate(6deg) scale(1.04); } }
.boton.naranja .bic { color: rgba(20,48,31,.82); }
.menu-tres .boton .ic { display: flex; justify-content: center; height: 30px; margin-bottom: 4px; }
.menu-tres .boton .ic .ico { width: 30px; height: 30px; }
.boton .ico-tienda, .boton .ico-ayuda { width: 22px; height: 22px; margin: -4px 4px -2px 0; }
.pase-barra .ic .ico { width: 30px; height: 30px; }
/* todo lo que se toca se hunde un poco */
.boton.suave:active, .cofre-mini:active, .pase-barra:active, .chip.coins:active, .rueda:active, .volver:active, .tienda-fila:active, .rank-fila:active { transform: scale(.96); }
.boton.suave, .cofre-mini, .pase-barra, .chip.coins, .rueda, .volver { transition: transform .08s; }
/* cambiar de pantalla: entra con un fundido corto */
.pantalla.entra { animation: pantallaEntra .24s ease-out; }
@keyframes pantallaEntra { from { opacity: 0; transform: translateY(10px); } }
/* la carga: tres pelotas que botan */
.cargando { display: inline-flex; gap: 8px; align-items: flex-end; height: 28px; padding-top: 6px; }
.cargando i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6FFB8, #C9E265 55%, #6F9419); animation: cargaBota .9s ease-in-out infinite; }
.cargando i:nth-child(2) { animation-delay: .15s; } .cargando i:nth-child(3) { animation-delay: .3s; }
@keyframes cargaBota { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-13px); } }
/* los avisos de abajo, con el estilo del juego */
.aviso { background: linear-gradient(180deg, #22543A, #16341F); color: #fff; border: 2px solid rgba(243,214,107,.6); box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.ico-punto { width: 1.1em; height: 1.1em; vertical-align: -.18em; filter: none; }
@media (prefers-reduced-motion: reduce) { .chispas, .menu-logo .t, .menu-logo .o-bola, .boton.oro .bic .gema, .pantalla.entra, .cargando i { animation: none !important; } .chispas { display: none; } }
/* po-11 · móviles bajitos (iPhone SE y parecidos): el menú se aprieta un poco para que quepa todo sin cortar */
@media (max-height: 720px) {
  .menu-centro { gap: 8px; padding: 4px 0 0; }
  .menu-logo { font-size: 32px; }
  .menu-logo small { margin-top: 2px; }
  .menu-centro .boton.grande { font-size: 23px; padding: 13px 16px; }
  .menu-centro .boton:not(.suave):not(.grande) { padding-top: 10px; padding-bottom: 10px; }
  .menu-centro .boton .bic svg { width: 32px; height: 32px; } .menu-centro .boton.grande .bic svg { width: 42px; height: 42px; }
  .menu-tres .boton { padding: 7px 4px; font-size: 13px; }
  .menu-tres .boton .ic { height: 24px; margin-bottom: 2px; } .menu-tres .boton .ic .ico { width: 24px; height: 24px; }
  .menu-centro .fila .boton.suave { padding: 8px; }
  .cofre-mini { padding: 4px 8px 4px 6px; } .cofre-mini svg { width: 30px; height: 27px; }
  .pase-barra { padding: 6px 12px; }
}
/* po-11 · el final del partido: entra con un salto, cinta de oro, corona y rayos detrás de quien gana, confeti */
.fin-confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.oro-final { position: relative; animation: finEntra .45s cubic-bezier(.2,1.3,.4,1); overflow: visible; }
.oro-final > * { animation: finSube .4s ease-out both; }
.oro-final > *:nth-child(2) { animation-delay: .08s; } .oro-final > *:nth-child(3) { animation-delay: .16s; } .oro-final > *:nth-child(4) { animation-delay: .24s; } .oro-final > *:nth-child(5) { animation-delay: .32s; } .oro-final > *:nth-child(n+6) { animation-delay: .4s; }
@keyframes finEntra { from { opacity: 0; transform: scale(.85); } }
@keyframes finSube { from { opacity: 0; transform: translateY(12px); } }
.oro-final.fin-gana { border: 2px solid rgba(243,214,107,.55); box-shadow: 0 0 40px rgba(243,214,107,.18), 0 10px 30px rgba(0,0,0,.45); background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(243,214,107,.16), transparent 70%), #16341F; }
.oro-final .gran { display: flex; justify-content: center; margin: -34px -6px 0; position: relative; z-index: 0; isolation: isolate; }
.oro-final .gran span { position: relative; display: inline-block; padding: 9px 22px 10px; border-radius: 6px; font-size: 26px; line-height: 1.05; }
.oro-final .gran.si span { background: linear-gradient(180deg, #FFE9A8, #F3D66B 55%, #E2B53E); color: #3A2A05; box-shadow: 0 4px 0 #A8841E, 0 10px 20px rgba(0,0,0,.4); }
.oro-final .gran.no span { background: linear-gradient(180deg, #3B5E47, #2A4735); color: #F3BE6C; box-shadow: 0 4px 0 #182E21, 0 10px 20px rgba(0,0,0,.4); }
.oro-final .gran span::before, .oro-final .gran span::after { content: ''; position: absolute; top: 9px; width: 18px; height: 100%; z-index: -1; }
.oro-final .gran span::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.oro-final .gran span::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.oro-final .gran.si span::before, .oro-final .gran.si span::after { background: #C8901E; }
.oro-final .gran.no span::before, .oro-final .gran.no span::after { background: #1E3A2A; }
.oro-final { padding-top: 26px; }
#oro-fin { padding-top: 36px; }
.fin-av { position: relative; }
.fin-av > .avatar, .fin-av > .n { position: relative; z-index: 1; }
.fin-av.ganador::before { content: ''; position: absolute; left: 50%; top: 32px; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(243,214,107,.30) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%); animation: finRayos 14s linear infinite; }
@keyframes finRayos { to { transform: rotate(360deg); } }
.fin-av .corona { position: absolute; left: 50%; top: -21px; width: 40px; height: 28px; margin-left: -20px; z-index: 2; animation: coronaCae .5s .35s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes coronaCae { from { opacity: 0; transform: translateY(-22px) scale(.6); } }
.oro-final .resultado .t.fin-bump { animation: oroBump .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .oro-final, .oro-final > *, .fin-av.ganador::before, .fin-av .corona { animation: none !important; } }
/* po-11 · las cartas premium brillan: un reflejo que cruza la carta de vez en cuando */
.oc-premium::after { content: ''; position: absolute; inset: -30% -60%; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.7) 49%, rgba(255,255,255,0) 58%); transform: translateX(-70%); animation: premBrillo 4.2s ease-in-out infinite; }
@keyframes premBrillo { 0%, 62% { transform: translateX(-70%); } 88%, 100% { transform: translateX(70%); } }
@media (prefers-reduced-motion: reduce) { .oc-premium::after { animation: none; display: none; } }
/* po-11 · el podio de los rankings */
.rank-fila .pos.p1, .rank-fila .pos.p2, .rank-fila .pos.p3 { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; color: #3A2A05; font-size: 16px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 0 rgba(0,0,0,.3); }
.rank-fila .pos.p1 { background: radial-gradient(circle at 35% 30%, #FFF6C4, #F3D66B 50%, #C9941E); }
.rank-fila .pos.p2 { background: radial-gradient(circle at 35% 30%, #FFFFFF, #CBD3DA 50%, #8D98A3); }
.rank-fila .pos.p3 { background: radial-gradient(circle at 35% 30%, #FFD9B0, #D98B4A 50%, #9A5523); }
.rank-fila:has(.pos.p1) { border-color: rgba(243,214,107,.45); background: linear-gradient(90deg, rgba(243,214,107,.12), transparent 60%), var(--fondo2); }

/* ═══ po-12 · EVENTOS (Halloween, Black Friday, Navidad), RACHA DE DÍAS y AVATAR DE PAGO ═══ */
:root {
  --svg-calabaza: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 9.5c-7.6 0-12.6 4.4-12.6 10.3S8.4 30 16 30s12.6-4.3 12.6-10.2S23.6 9.5 16 9.5z' fill='%23F07F1D'/%3E%3Cpath d='M16 9.5c-3.2 0-5.2 4.5-5.2 10.3S12.8 30 16 30s5.2-4.3 5.2-10.2S19.2 9.5 16 9.5z' fill='%23FB9A3A'/%3E%3Cpath d='M16 10c-.2-2.6.9-5 3.6-6.6' stroke='%234E7A21' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M8.8 18.2l3.4-2.6 1.3 3.8zM23.2 18.2l-3.4-2.6-1.3 3.8z' fill='%23FFE27A'/%3E%3Cpath d='M8.6 22.4q7.4 5.4 14.8 0l-2.3.4-1.6 1.7-1.7-1.5-1.8 1.7-1.8-1.7-1.7 1.5-1.6-1.7z' fill='%23FFE27A'/%3E%3C/svg%3E");
  --svg-arbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4l7 9h-3.6l5.6 7h-3.6l5.6 7H5l5.6-7H7l5.6-7H9z' fill='%232FA36B' stroke='%231B6B44' stroke-width='.8'/%3E%3Crect x='14' y='27' width='4' height='3.5' fill='%238B5A2B'/%3E%3Cpath d='M16 .8l1.1 2.3 2.5.3-1.8 1.7.4 2.5L16 6.4l-2.2 1.2.4-2.5-1.8-1.7 2.5-.3z' fill='%23F3D66B'/%3E%3Ccircle cx='13' cy='14.5' r='1.4' fill='%23E0593B'/%3E%3Ccircle cx='19.5' cy='19' r='1.4' fill='%23F3D66B'/%3E%3Ccircle cx='12' cy='23' r='1.4' fill='%235FA8D3'/%3E%3Ccircle cx='20.5' cy='24' r='1.4' fill='%23E0593B'/%3E%3C/svg%3E");
  --svg-luna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20 3a13 13 0 1 0 9 22A11 11 0 0 1 20 3z' fill='%23FFF1C1'/%3E%3C/svg%3E");
}
/* el avatar: lo de pago en el editor, con candado y precio */
.opcion { position: relative; }
.opcion.de-pago { border-style: dashed; border-color: rgba(243,214,107,.45); }
.opcion.de-pago .avatar, .opcion.de-pago .c { opacity: .55; }
.opcion .precio { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); background: #14301F; border: 1.5px solid rgba(243,214,107,.6); color: #fff; border-radius: 8px; font-size: 9px; font-weight: 900; padding: 0 4px; line-height: 13px; white-space: nowrap; display: flex; align-items: center; gap: 1px; }
.opcion .precio .mon { width: 10px; height: 10px; }
.editor-av .opciones { row-gap: 12px; }
.opcion .c.esp-rayas { background: repeating-linear-gradient(90deg, #C9E265 0 5px, #fff 5px 8px); }
.opcion .c.esp-banda { background: linear-gradient(135deg, #1E2A4A 38%, #F3D66B 38% 62%, #1E2A4A 62%); }
.opcion .c.esp-oro { background: radial-gradient(circle at 35% 30%, #FFF6C4, #F3D66B 50%, #C9941E); }
/* po-20 · camisetas nuevas y los fondos con dibujo (que van en svg) */
.opcion .c.esp-cuadros { background: repeating-linear-gradient(90deg, rgba(90,20,16,.5) 0 4px, transparent 4px 9px), repeating-linear-gradient(0deg, rgba(90,20,16,.5) 0 4px, #C0392B 4px 9px); }
.opcion .c.esp-estrellas { background: radial-gradient(circle at 30% 35%, #F3D66B 0 1.6px, transparent 2.2px), radial-gradient(circle at 68% 62%, #F3D66B 0 1.6px, transparent 2.2px), radial-gradient(circle at 45% 78%, #F3D66B 0 1.2px, transparent 1.8px), #1E2A4A; }
.opcion svg.c { overflow: hidden; display: block; }
/* po-21 · el marco Fundador (las 500 primeras cuentas): anillo lima y oro con brillo */
.avatar.mc-fundador { border-color: transparent; background: linear-gradient(var(--fondo), var(--fondo)) padding-box, conic-gradient(from 210deg, #C9E265, #F3D66B, #2FA36B, #C9E265, #FFF3B0, #C9E265) border-box; box-shadow: 0 0 0 1.5px rgba(243,214,107,.5), 0 0 12px rgba(201,226,101,.55), 0 4px 10px rgba(0,0,0,.45); }
.chip.chip-fundador { background: linear-gradient(90deg, rgba(201,226,101,.22), rgba(243,214,107,.28)); border-color: rgba(243,214,107,.6); color: #FFF3B0; font-weight: 800; }
.fundador-v { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 8px 4px 2px; }
.fundador-v .t { font-size: 22px; font-weight: 900; color: #F3D66B; }
.fundador-v .d { font-size: 14px; line-height: 1.45; opacity: .9; }
.fundador-v .boton { width: 100%; }
/* marcos y dorsos de evento */
.avatar.mc-calabaza, .avatar.mc-nieve { border-color: transparent; }
.avatar.mc-calabaza { background: linear-gradient(var(--fondo), var(--fondo)) padding-box, linear-gradient(135deg, #FF8A1F, #7B3FD1 50%, #FF8A1F) border-box; box-shadow: 0 0 10px rgba(255,138,31,.6), 0 4px 10px rgba(0,0,0,.45); }
.avatar.mc-nieve { background: linear-gradient(var(--fondo), var(--fondo)) padding-box, linear-gradient(135deg, #FFFFFF, #A8DCFF 40%, #FFFFFF 60%, #7FC4F0) border-box; box-shadow: 0 0 10px rgba(168,220,255,.75), 0 4px 10px rgba(0,0,0,.45); }
.oro-dorso.dz-calabaza { background: radial-gradient(circle at 50% 42%, rgba(255,140,40,.28), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 4px, transparent 4px 9px), linear-gradient(160deg, #3E2463, #160B26); border-color: #F07F1D; }
.oro-dorso.dz-calabaza::after, .oro-dorso.dz-navidad::after { background: var(--svg-calabaza) center / contain no-repeat; border-radius: 0; box-shadow: none; transform: none; width: 72%; height: 52%; }
.oro-dorso.dz-navidad { background: radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.5px) 0 0 / 9px 9px, linear-gradient(160deg, #B3202A, #5E0D14); border-color: #F3D66B; }
.oro-dorso.dz-navidad::after { background-image: var(--svg-arbol); }
.tienda-cosm.de-evento { border-color: rgba(255,138,31,.55); box-shadow: 0 0 12px rgba(255,138,31,.2); }
/* la cinta del evento bajo el logo */
.evento-cinta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px 4px 6px; border-radius: 20px; border: 2px solid rgba(243,214,107,.55); background: rgba(0,0,0,.4); color: #fff; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; cursor: pointer; -webkit-text-fill-color: #fff; }
.evento-cinta b { font-weight: 900; } .evento-cinta .sep { opacity: .5; } .evento-cinta .q { color: var(--texto2); -webkit-text-fill-color: var(--texto2); } .evento-cinta .fl { opacity: .6; }
.evento-cinta .ico-ev { filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.ev-halloween .evento-cinta { border-color: #FF8A1F; box-shadow: 0 0 14px rgba(255,138,31,.35); }
.ev-navidad .evento-cinta { border-color: #E0593B; box-shadow: 0 0 14px rgba(255,255,255,.25); }
.ev-blackfriday .evento-cinta { background: #0B0B10; border-color: #F3D66B; }
/* el menú vestido: Halloween (noche morada, chispas naranjas y murciélagos), Navidad (copos que caen) */
.ev-halloween .pantalla.menu-p { background: radial-gradient(ellipse 75% 34% at 50% 26%, rgba(255,138,31,.16), transparent 70%), radial-gradient(ellipse 120% 70% at 50% 0%, rgba(123,63,209,.22), transparent 65%); }
.ev-halloween .chispas i { background: #FFB347; box-shadow: 0 0 8px 2px rgba(255,138,31,.55); }
.ev-halloween .chispas i:nth-child(3n) { background: #B886FF; box-shadow: 0 0 8px 2px rgba(123,63,209,.6); }
.murcielago { position: absolute; left: -12%; width: 40px; height: 20px; opacity: .85; animation: murcielago 11s linear infinite; }
@keyframes murcielago { 0% { transform: translate(0, 0) scaleY(1); } 10% { transform: translate(14vw, -8px) scaleY(.5); } 20% { transform: translate(28vw, 4px) scaleY(1); } 30% { transform: translate(42vw, -6px) scaleY(.5); } 40% { transform: translate(56vw, 6px) scaleY(1); } 50% { transform: translate(70vw, -4px) scaleY(.5); } 60% { transform: translate(84vw, 2px) scaleY(1); } 70%, 100% { transform: translate(130vw, -10px) scaleY(.6); } }
.ev-navidad .pantalla.menu-p { background: radial-gradient(ellipse 75% 34% at 50% 26%, rgba(255,255,255,.10), transparent 70%), radial-gradient(ellipse 120% 70% at 50% 0%, rgba(95,168,211,.18), transparent 65%); }
.ev-navidad .chispas i { background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.6); }
.chispas i.copo { top: -4%; width: 6px; height: 6px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); opacity: .9; animation: copoCae 8s linear infinite; }
@keyframes copoCae { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(14px, 50vh); } 100% { transform: translate(-8px, 105vh); opacity: .2; } }
/* la pista vestida: noche morada con luna y calabaza en Halloween; noche azul con copos y árbol en Navidad */
.ev-halloween .oro-pista { background: radial-gradient(ellipse at 50% 38%, #2C1C46 0, #150D24 55%, #07040C 100%); }
.ev-halloween .oro-pista::before, .ev-halloween .oro-pista::after, .ev-navidad .oro-pista::before, .ev-navidad .oro-pista::after { content: ''; position: absolute; z-index: -1; pointer-events: none; background: center / contain no-repeat; }
.ev-halloween .oro-pista::before { right: 14px; top: 12px; width: 34px; height: 34px; background-image: var(--svg-luna); filter: drop-shadow(0 0 10px rgba(255,241,193,.6)); }
.ev-halloween .oro-pista::after { left: 12px; top: 14px; width: 40px; height: 40px; background-image: var(--svg-calabaza); filter: drop-shadow(0 0 12px rgba(255,138,31,.65)); }
.ev-navidad .oro-pista { background: radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.6px) 0 0 / 23px 23px, radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 1.6px) 11px 7px / 31px 31px, radial-gradient(ellipse at 50% 38%, #18324D 0, #0B1A2B 55%, #050B14 100%); animation: pistaNieva 12s linear infinite; }
@keyframes pistaNieva { to { background-position: 23px 230px, 42px 317px, 0 0; } }
.ev-navidad .oro-pista::after { left: 10px; top: 10px; width: 42px; height: 42px; background-image: var(--svg-arbol); }
/* la pantalla del evento */
.evento-cab { text-align: center; padding: 6px 0 14px; }
.evento-cab .ico-ev { width: 86px; height: 86px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.3)); animation: oBota 2.8s ease-in-out infinite; }
.evento-cab .t { font-family: 'Lilita One', cursive; font-size: 34px; color: var(--oro); text-shadow: 0 3px 0 rgba(0,0,0,.4); margin-top: 6px; }
.evento-cab .q { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto2); }
.evento-p.ev-halloween .evento-cab .t { color: #FF9A3C; } .evento-p.ev-navidad .evento-cab .t { color: #fff; }
.evento-reto { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.evento-reto .tienda-dorso { width: 46px; height: 62px; flex: none; }
.evento-reto .n { font-family: 'Lilita One', cursive; font-size: 19px; color: #fff; }
.evento-reto .d { font-size: 12.5px; color: var(--texto2); font-weight: 700; line-height: 1.3; }
.evento-reto .prog { margin-top: 6px; display: flex; align-items: center; gap: 8px; } .evento-reto .prog .puntos i { width: 12px; height: 12px; }
.evento-reto .ok { margin-top: 6px; color: var(--lima); font-weight: 900; }
.evento-desc { width: 64px; height: 64px; border-radius: 50%; background: #0B0B10; border: 3px solid #F3D66B; color: #F3D66B; font-family: 'Lilita One', cursive; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: none; transform: rotate(-12deg); }
.evento-premio .tienda-dorso { width: 34px; height: 46px; flex: none; }
.tienda-oferta { margin-top: 12px; background: #0B0B10; border: 2px solid #F3D66B; border-radius: 14px; padding: 10px 12px; color: #F3D66B; font-family: 'Lilita One', cursive; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.tienda-oferta span { font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 800; color: #fff; line-height: 1.25; }
.tienda-cosm .pie s, .tienda-carta .pack s { opacity: .55; font-weight: 700; }
/* la racha de días en la ventana del cofre del día */
.racha { margin-bottom: 10px; }
.racha-tit { text-align: center; font-weight: 900; font-size: 14px; color: #FFB347; margin-bottom: 6px; }
.racha-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.racha-d { background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.1); border-radius: 10px; padding: 3px 0 4px; text-align: center; min-width: 0; }
.racha-d .dn { font-size: 10px; font-weight: 900; color: var(--apagado); }
.racha-d .dp { height: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 10px; color: #fff; line-height: 1; }
.racha-d .dp .rm { font-size: 13px; } .racha-d .dp .rn { font-size: 9.5px; } .racha-d .dp .rc { color: var(--oro); font-size: 16px; }
.racha-d .dp svg { width: 26px; height: 22px; overflow: visible; }
.racha-d.ya { opacity: .55; } .racha-d.ya .dp { color: var(--lima); font-size: 15px; }
.racha-d.hoy { border-color: var(--oro); background: rgba(243,214,107,.16); box-shadow: 0 0 12px rgba(243,214,107,.35); } .racha-d.hoy .dn { color: var(--oro); }
.racha-d.grande:not(.ya) { border-color: rgba(255,179,71,.6); }
.cofre-grande .cofre-caja svg { width: 96px; height: 84px; }
@media (prefers-reduced-motion: reduce) { .murcielago, .chispas i.copo, .ev-navidad .oro-pista, .evento-cab .ico-ev { animation: none !important; } .murcielago, .chispas i.copo { display: none; } }
@media (max-height: 720px) {
  .menu-logo { font-size: 30px; }
  .evento-cinta { margin-top: 3px; padding: 2px 9px 2px 5px; font-size: 11px; }
  .evento-cinta .ico-ev { width: 16px; height: 16px; }
}

/* po-12 · NITIDEZ (Anna, 29 oct: «la parte de arriba del juego se ve un poco borrosa»): fuera los filtros (drop-shadow) de los
   iconos y del logo —el móvil los pinta como una imagen y a veces a menos resolución—, fuera la neblina de color pegada a la
   cabecera y chispas más pequeñas y lejos del nombre. La sombra del logo es ahora una copia del texto en negro, 4 px más abajo. */
.ico, .evento-cinta .ico-ev { filter: none; }
.menu-logo .t-caja { position: relative; display: inline-block; }
.menu-logo .t { filter: none; position: relative; z-index: 1; }
.menu-logo .t.sombra { position: absolute; left: 0; top: 4px; z-index: 0; background: none; color: rgba(0,0,0,.42); -webkit-text-fill-color: rgba(0,0,0,.42); animation: none; }
.menu-logo .o-hueco { display: inline-block; width: .78em; height: .78em; margin: 0 .01em 0 .02em; vertical-align: -.04em; border-radius: 50%; background: rgba(0,0,0,.42); }
.pantalla.menu-p { background: radial-gradient(ellipse 70% 26% at 50% 30%, rgba(243,214,107,.10), transparent 70%); }
.ev-halloween .pantalla.menu-p { background: radial-gradient(ellipse 70% 26% at 50% 30%, rgba(255,138,31,.12), transparent 70%), radial-gradient(ellipse 90% 30% at 50% 32%, rgba(123,63,209,.12), transparent 70%); }
.ev-navidad .pantalla.menu-p { background: radial-gradient(ellipse 70% 26% at 50% 30%, rgba(255,255,255,.08), transparent 70%); }
.chispas i { width: 3px; height: 3px; box-shadow: 0 0 4px 1px rgba(243,214,107,.45); }
.ev-halloween .chispas i { box-shadow: 0 0 4px 1px rgba(255,138,31,.45); } .ev-halloween .chispas i:nth-child(3n) { box-shadow: 0 0 4px 1px rgba(123,63,209,.5); }
@keyframes chispa { 0% { opacity: 0; transform: translateY(30px) scale(.5); } 25% { opacity: .8; } 60% { opacity: .35; } 100% { opacity: 0; transform: translateY(-70px) scale(1); } }
.ev-halloween .oro-pista::before, .ev-halloween .oro-pista::after { filter: none; }
/* po-12 · LA LEYENDA DE LA PARTIDA: el «?» de la esquina y la tabla de qué va después de cada carta */
.oro-ley-btn { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(14,36,25,.85); z-index: 4; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.oro-ley-btn:active { transform: scale(.94); }
.ev-halloween .oro-pista::before { right: auto; left: 58px; top: 10px; }   /* la luna, al lado de la calabaza: la esquina derecha es del «?» */
.oro-menu.ley { padding: 14px; }
.oro-menu.ley .caja { max-width: 410px; max-height: 94%; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; gap: 8px; padding: 16px 10px 12px; }
.ley-caja .tit, .ley-caja .sub { text-align: center; }
.ley-ahora { background: rgba(243,214,107,.10); border: 2px solid rgba(243,214,107,.55); border-radius: 14px; padding: 8px 6px 6px; }
.ley-ahora .ley-fila { border: 0; }
.ley-t { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); margin: 0 4px 2px; }
.ley-tabla { display: flex; flex-direction: column; }
.ley-fila { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ley-fila.foco { background: rgba(243,214,107,.12); border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(243,214,107,.55); }
.ley-cab { flex: none; width: 98px; display: flex; align-items: center; gap: 4px; border-radius: 9px; padding: 4px 5px; color: #fff; font-family: 'Lilita One', cursive; font-size: 12px; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.85); }
.ley-cab b { font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.ley-cab .tray { width: 17px; height: 21px; flex: none; }
.ley-cab .tray .pista { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.1; } .ley-cab .tray .red2 { stroke: rgba(255,255,255,.5); stroke-width: 1.2; stroke-dasharray: 1.6 1.6; }
.ley-cab .tray .via { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; } .ley-cab .tray .bola { fill: #F3D66B; }
.ley-saque { background: #2A4A38; border-style: dashed; }
.ley-flecha { color: var(--apagado); font-weight: 900; flex: none; }
.ley-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ley-chip { display: inline-block; padding: 3px 7px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.35); white-space: nowrap; }
.ley-chip.tengo { border: 2px solid var(--oro); box-shadow: 0 0 0 2px rgba(243,214,107,.3); }
.ley-chip.tengo::before { content: '✓ '; color: var(--oro); }
.ley-chip.muestra { background: rgba(0,0,0,.3); padding: 2px 6px; }
.ley-gana { font-size: 11.5px; font-weight: 800; color: var(--oro); }
.ley-nota { font-size: 11px; color: var(--texto2); margin: 4px 4px 0; font-weight: 700; }
/* las fichas de la leyenda usan los colores de las cartas, y algunas cartas llevan un brillo encima (::after): que se quede dentro */
.ley-chip, .ley-cab { position: relative; overflow: hidden; isolation: isolate; }
.ley-chip i { position: relative; z-index: 2; font-style: normal; }
.ley-chip.tengo::before { position: relative; z-index: 2; }
.ley-cab .tray, .ley-cab b { position: relative; z-index: 2; }
.ley-cab { width: 106px; font-size: 11.5px; } .ley-cab b { overflow-wrap: normal; word-break: keep-all; }
.ley-reloj { position: sticky; top: -16px; margin: -6px -2px 0 auto; align-self: flex-end; background: #0E2419; border: 2px solid var(--lima); border-radius: 14px; padding: 2px 9px; font-weight: 900; font-size: 13px; color: #fff; z-index: 3; }
/* po-12 · (Anna, 29 oct: «pon la corona recta con el círculo y que no pise el título») la corona va derecha, centrada sobre el
   avatar y apoyada en su borde; y entre la cinta del título y los avatares hay más aire para que no se toquen */
.oro-final .resultado { margin-top: 32px; }
/* po-12 · (Anna, 29 oct, con captura de su iPhone: «el círculo del avatar ligeramente borroso, y el de configuración también»)
   El iPhone difumina un poco la franja que queda justo debajo de la hora (en los móviles con isla/muesca); el avatar y la rueda
   estaban dentro. La cabecera de todas las pantallas baja un poco en esos móviles (hasta 14 px; nada en los que no tienen
   muesca) y los círculos de arriba llevan bordes y sombras duras, sin difuminar. */
.pantalla { padding-top: calc(10px + var(--sat) + min(14px, calc(var(--sat) * .3))); }
#oro-capa .oro-marco { padding-top: calc(8px + env(safe-area-inset-top, 0px) + min(10px, calc(env(safe-area-inset-top, 0px) * .2))); }
.menu-arriba .avatar { box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.rueda, .volver, .oro-cerrar { border-color: #2F5A43; }
.av-fijo { top: calc(0px - var(--sat) - 10px - min(14px, calc(var(--sat) * .3))); }
/* po-12 · (Anna: «falta alinear verticalmente los iconos de cada modo de juego») los tres dibujos de Competir, Entrenar y Con
   amigos van en una caja igual (52 × 52) en el mismo sitio: quedan en una misma columna y centrados en su botón */
.boton .bic { left: 12px; width: 52px; height: 52px; align-items: center; justify-content: center; }
.boton .bic svg { width: 40px; height: 40px; }
.boton.grande .bic svg { width: 48px; height: 48px; }
@media (max-height: 720px) {
  .menu-centro .boton .bic { width: 44px; height: 44px; }
  .menu-centro .boton .bic svg { width: 34px; height: 34px; } .menu-centro .boton.grande .bic svg { width: 40px; height: 40px; }
}

/* po-12 · LA FRANJA DE ARRIBA (Anna, 29 oct, con capturas: «la parte de arriba se ve borrosa»). iOS 26 difumina unos 40 pt
   bajo la hora en las webs guardadas en la pantalla de inicio, salvo que en el borde de arriba haya una caja FIJA, a todo lo
   ancho y de color SÓLIDO (WebKit mira 4 px por debajo del centro del borde y sube hasta la primera caja fija que ocupe casi
   toda la pantalla; si encuentra un color de fondo liso, usa ese color y no difumina). Antes no la había: #app no tenía color y
   las ventanas (la leyenda, el menú del partido) eran semitransparentes. Ahora: #tope, una franja fija del alto de la barra de
   la hora, color del fondo, encima de todo; y #app con color liso por si acaso. Las ventanas empiezan debajo de la franja. */
#tope { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background-color: #0E2419; z-index: 1000; }
#app { background-color: #0E2419; }
.oro-menu { padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.oro-menu.ley { padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.oro-menu.ley .caja { max-height: 100%; }
/* ═══ po-13 · EL PARTIDO, MÁS VISTOSO (solo se ve: las reglas no cambian) ═══ */
/* la pelota caliente (bolas de 6 golpes o más) y la de los golpes que matan, con estela de su color */
.oro-vuelo.caliente { background: radial-gradient(circle at 34% 30%, #FFFFFF 0 2px, #FFE27A 45%, #FF8A2A 100%); box-shadow: 0 0 12px 3px rgba(255,138,42,.6), 0 2px 10px rgba(0,0,0,.45); }
.oro-vuelo.mata { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: radial-gradient(circle at 34% 30%, #FFFFFF 0 2px, var(--mc, #fff) 60%); box-shadow: 0 0 16px 5px var(--mc, #fff), 0 2px 10px rgba(0,0,0,.45); }
.oro-vuelo.mt-vibora { --mc: #38E08F; } .oro-vuelo.mt-portres { --mc: #FF8A2A; } .oro-vuelo.mt-dejada { --mc: #C79BFF; } .oro-vuelo.mt-porcuatro { --mc: #FFD54A; }
.oro-vuelo.estela { z-index: 2; opacity: calc(.75 - var(--k, 1) * .12); width: calc(14px - var(--k, 1) * 1.6px); height: calc(14px - var(--k, 1) * 1.6px); margin: calc(-7px + var(--k, 1) * .8px) 0 0 calc(-7px + var(--k, 1) * .8px); box-shadow: 0 0 10px 2px var(--mc, rgba(255,138,42,.6)); }
.oro-vuelo.estela.caliente { --mc: rgba(255,138,42,.6); }
/* al llegar: onda grande de su color y chispas */
.oro-golpazo { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 18px var(--c), inset 0 0 12px var(--c); z-index: 4; pointer-events: none; animation: oroGolpazo .6s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes oroGolpazo { from { transform: scale(.2); opacity: 1; } to { transform: scale(4.2); opacity: 0; border-width: 1px; } }
.oro-chispa { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; z-index: 4; pointer-events: none; box-shadow: 0 0 6px currentColor; }
/* la pista brilla un instante del color del golpe */
.oro-pista.golpazo { box-shadow: inset 0 0 70px rgba(0,0,0,.65), inset 0 0 0 3px var(--golpazo, #fff), 0 0 28px var(--golpazo, #fff); }
/* el PUNTO DE ORO: cartel dorado y lluvia de oro */
.oro-flash.dorado { background: radial-gradient(circle, rgba(255,215,90,.75) 0, rgba(243,214,107,.25) 45%, rgba(243,214,107,0) 72%); }
.oro-flash.dorado .txt { color: transparent; background: linear-gradient(180deg, #FFF8D0 0%, #F3D66B 50%, #C98F1C 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; font-size: 44px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.oro-flash.dorado.va { animation-duration: 2.2s; } .oro-flash.dorado.va .txt { animation-duration: 2.2s; }
.oro-lluvia { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.oro-lluvia i { position: absolute; top: -12px; width: 7px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #FFF3B0, #E2B53E); box-shadow: 0 0 6px rgba(243,214,107,.8); animation: oroLlueve 2s linear forwards; opacity: 0; }
@keyframes oroLlueve { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(520px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .oro-golpazo, .oro-chispa, .oro-lluvia, .oro-vuelo.estela { display: none !important; } }