/* =====================================================================
   PICA JUMP · Multijugador: accesos del lobby, panel de sala, amigos y resultado
   Paleta alineada con el cuadro de racha: marrón oscuro, borde dorado→naranja→rojo,
   títulos blancos con sombra naranja y botones de fuego.
   ===================================================================== */

/* ---------- Lobby: fila de accesos (Posiciones · Carrera · Amigos) ---------- */
body .lb-dock { display: flex; gap: calc(8 * var(--u)); width: calc(300 * var(--u)); max-width: 92%; margin-top: calc(2 * var(--u)); }
body .lb-tile {
    position: relative; flex: 1 1 0; min-width: 0; box-sizing: border-box; border: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(5 * var(--u));
    padding: calc(11 * var(--u)) calc(2 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u));
    background: rgba(232, 232, 232, .96); color: #3a3a3a;
    font: 800 calc(11.5 * var(--u)) 'Montserrat', system-ui, sans-serif;
    box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .16);
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform .1s ease, filter .1s ease;
}
body .lb-tile:active { transform: scale(.95); filter: brightness(.94); }
body .lb-tile:focus-visible { outline: calc(3 * var(--u)) solid rgba(234, 100, 0, .55); outline-offset: calc(2 * var(--u)); }
/* El botón destacado usa el mismo degradado de fuego de PLAY */
body .lb-tile.lb-hot { background: linear-gradient(135deg, #e82e13, #ea6400); color: #fff; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(232, 46, 19, .35); }
.lb-txt { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-ico { position: relative; display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: #555; }
.lb-hot .lb-ico { color: #fff; }
.lb-ico svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); display: block; }
.lb-on { position: absolute; right: calc(-2 * var(--u)); bottom: calc(-1 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #22c55e; border: calc(2 * var(--u)) solid #e8e8e8; }
.lb-on[hidden], .lb-badge[hidden] { display: none; }
.lb-badge {
    position: absolute; top: calc(-7 * var(--u)); right: calc(-4 * var(--u)); min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(5 * var(--u)); box-sizing: border-box;
    border-radius: 99px; display: grid; place-items: center; background: #ef4444; color: #fff; border: calc(2 * var(--u)) solid #fff;
    font: 800 calc(11 * var(--u)) 'Montserrat', sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* ---------- Panel (carrera / sala / amigos / resultado) ---------- */
.pm-overlay {
    --pm-u: clamp(0.7px, min(100vw / 390, 100dvh / 660), 2.2px);
    --pm-crema: #fff1e0; --pm-mute: #d8b494; --pm-linea: rgba(255, 170, 90, .24); --pm-vidrio: rgba(255, 255, 255, .07);
    --pm-fuego: linear-gradient(135deg, #f14712, #fda32a); --pm-base: #7a2208;
    position: fixed; inset: 0; z-index: 700; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    padding: max(env(safe-area-inset-top), 12px) 12px max(env(safe-area-inset-bottom), 12px);
    background: rgba(12, 4, 2, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .25s ease; font-family: 'Montserrat', system-ui, sans-serif;
}
.pm-overlay.pm-in { opacity: 1; }
#pmResultado { z-index: 720; }

/* La tarjeta va dentro de un contenedor para que el icono y la X sobresalgan del borde */
.pm-wrap {
    position: relative; display: flex; width: calc(318 * var(--pm-u)); max-width: 100%; margin-top: calc(32 * var(--pm-u));
    max-height: calc(100% - 32 * var(--pm-u));
    animation: pm-entra .35s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes pm-entra { from { transform: translateY(18px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-card {
    position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; box-sizing: border-box;
    padding: calc(38 * var(--pm-u)) calc(18 * var(--pm-u)) calc(14 * var(--pm-u));
    border: calc(3 * var(--pm-u)) solid transparent; border-radius: calc(26 * var(--pm-u)); color: var(--pm-crema); text-align: center;
    background:
        radial-gradient(120% 50% at 50% 0, rgba(255, 110, 20, .22) 0, rgba(255, 110, 20, 0) 70%) padding-box,
        linear-gradient(180deg, #3d1308 0%, #260904 100%) padding-box,
        linear-gradient(160deg, #e3a43c 0%, #f7630c 50%, #e8321a 100%) border-box;
    box-shadow: 0 0 calc(34 * var(--pm-u)) rgba(255, 106, 0, .42), 0 calc(20 * var(--pm-u)) calc(40 * var(--pm-u)) rgba(0, 0, 0, .55);
    scrollbar-width: none;
}
.pm-card::-webkit-scrollbar { display: none; }

/* Icono de cabecera (como el círculo de la racha) y botón de cerrar */
.pm-cab-ico {
    position: absolute; z-index: 2; left: 50%; top: calc(-31 * var(--pm-u)); transform: translateX(-50%);
    width: calc(62 * var(--pm-u)); height: calc(62 * var(--pm-u)); box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(160deg, #ffb02e, #ff5e00); border: calc(4 * var(--pm-u)) solid #fff; color: #fff;
    box-shadow: 0 calc(4 * var(--pm-u)) calc(12 * var(--pm-u)) rgba(0, 0, 0, .5), 0 0 calc(18 * var(--pm-u)) rgba(255, 120, 0, .6);
}
.pm-cab-ico .pm-ico svg { width: calc(28 * var(--pm-u)); height: calc(28 * var(--pm-u)); overflow: visible; }
.pm-x {
    position: absolute; z-index: 3; top: calc(-10 * var(--pm-u)); right: calc(-8 * var(--pm-u)); width: calc(32 * var(--pm-u)); height: calc(32 * var(--pm-u)); padding: 0;
    border: calc(2.5 * var(--pm-u)) solid #fff; border-radius: 50%; background: linear-gradient(160deg, #ee4244, #c1121f); color: #fff;
    font: 800 calc(13 * var(--pm-u)) 'Montserrat', sans-serif; cursor: pointer; box-shadow: 0 calc(2 * var(--pm-u)) calc(8 * var(--pm-u)) rgba(0, 0, 0, .45);
}
.pm-x:active { transform: scale(.92); }

/* Iconos en línea */
.pm-ico { display: inline-grid; place-items: center; flex: none; }
.pm-ico svg { width: calc(17 * var(--pm-u)); height: calc(17 * var(--pm-u)); display: block; }

/* Títulos y textos */
.pm-cab { margin-bottom: calc(14 * var(--pm-u)); }
.pm-titulo { margin: 0; font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: normal; font-size: calc(29 * var(--pm-u)); letter-spacing: 1px; line-height: 1.05; color: #fff; text-shadow: 0 calc(3 * var(--pm-u)) 0 #ff4d00, 0 calc(6 * var(--pm-u)) calc(12 * var(--pm-u)) rgba(255, 90, 0, .45); }
.pm-subt { margin: calc(8 * var(--pm-u)) 0 0; font-size: calc(12 * var(--pm-u)); font-weight: 600; color: var(--pm-mute); }
.pm-sub { display: flex; align-items: center; gap: calc(6 * var(--pm-u)); margin: calc(14 * var(--pm-u)) 0 calc(6 * var(--pm-u)); font-size: calc(12 * var(--pm-u)); font-weight: 800; color: var(--pm-crema); text-align: left; }
.pm-cnt { min-width: calc(20 * var(--pm-u)); padding: calc(1 * var(--pm-u)) calc(7 * var(--pm-u)); box-sizing: border-box; border-radius: 99px; background: rgba(255, 140, 40, .25); color: #ffb870; font-size: calc(11 * var(--pm-u)); font-weight: 800; text-align: center; }
.pm-estado { margin: calc(14 * var(--pm-u)) 0; font-size: calc(14 * var(--pm-u)); font-weight: 700; color: var(--pm-mute); }
.pm-hint { min-height: calc(16 * var(--pm-u)); margin: calc(7 * var(--pm-u)) 0 0; font-size: calc(11 * var(--pm-u)); font-weight: 600; color: var(--pm-mute); }
.pm-error { margin: calc(10 * var(--pm-u)) 0 0; padding: calc(8 * var(--pm-u)) calc(10 * var(--pm-u)); border: 1px solid rgba(255, 90, 70, .45); border-radius: calc(12 * var(--pm-u)); background: rgba(239, 68, 68, .18); color: #ffb4a8; font-size: calc(12 * var(--pm-u)); font-weight: 700; }
.pm-error[hidden] { display: none; }
.pm-ok-msg { margin: calc(8 * var(--pm-u)) 0 0; padding: calc(8 * var(--pm-u)) calc(10 * var(--pm-u)); border: 1px solid rgba(74, 222, 128, .4); border-radius: calc(12 * var(--pm-u)); background: rgba(34, 197, 94, .18); color: #8ee9b0; font-size: calc(12 * var(--pm-u)); font-weight: 700; }

/* Campos */
.pm-campo { display: block; text-align: left; margin-bottom: calc(10 * var(--pm-u)); }
.pm-campo > span { display: block; margin-bottom: calc(4 * var(--pm-u)); font-size: calc(11 * var(--pm-u)); font-weight: 800; color: var(--pm-crema); }
.pm-campo input {
    width: 100%; box-sizing: border-box; padding: calc(10 * var(--pm-u)) calc(12 * var(--pm-u)); border: 2px solid var(--pm-linea); border-radius: calc(14 * var(--pm-u));
    background: rgba(0, 0, 0, .3); font: 700 calc(14 * var(--pm-u)) 'Montserrat', sans-serif; color: #fff; outline: none;
}
.pm-campo input::placeholder, .pm-codigo::placeholder { color: #a67c5e; }
.pm-campo input:focus { border-color: #ffa23a; box-shadow: 0 0 0 3px rgba(255, 130, 0, .25); }

/* Tarjeta "tú" (avatar + nombre) */
.pm-yo { display: flex; align-items: center; gap: calc(10 * var(--pm-u)); margin-bottom: calc(12 * var(--pm-u)); padding: calc(8 * var(--pm-u)) calc(12 * var(--pm-u)) calc(8 * var(--pm-u)) calc(8 * var(--pm-u)); border: 1.5px solid var(--pm-linea); border-radius: calc(18 * var(--pm-u)); background: var(--pm-vidrio); text-align: left; cursor: text; }
.pm-yo:focus-within { border-color: #ffa23a; box-shadow: 0 0 0 3px rgba(255, 130, 0, .22); }
.pm-yo .pm-av { width: calc(40 * var(--pm-u)); height: calc(40 * var(--pm-u)); font-size: calc(16 * var(--pm-u)); }
.pm-yo-col { flex: 1; min-width: 0; }
.pm-yo-col > span { display: block; font-size: calc(10.5 * var(--pm-u)); font-weight: 800; color: var(--pm-mute); }
.pm-yo-col input { width: 100%; padding: 0; border: 0; background: transparent; outline: none; font: 800 calc(16 * var(--pm-u)) 'Montserrat', sans-serif; color: #fff; text-overflow: ellipsis; }

/* Botones grandes (fuego, como "Entendido") */
.pm-btn {
    width: 100%; padding: calc(12 * var(--pm-u)); border: 0; border-radius: calc(16 * var(--pm-u)); cursor: pointer; margin-top: calc(6 * var(--pm-u));
    font-family: 'CatComic', 'Montserrat', sans-serif; font-size: calc(19 * var(--pm-u)); letter-spacing: 1px; color: #fff; text-shadow: 0 calc(2 * var(--pm-u)) 0 rgba(90, 20, 0, .55);
    background: var(--pm-fuego); box-shadow: 0 calc(4 * var(--pm-u)) 0 var(--pm-base), 0 calc(8 * var(--pm-u)) calc(16 * var(--pm-u)) rgba(255, 90, 0, .3);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pm-u));
}
.pm-btn .pm-ico svg { width: calc(20 * var(--pm-u)); height: calc(20 * var(--pm-u)); }
.pm-btn:active:not(:disabled) { transform: translateY(calc(3 * var(--pm-u))); box-shadow: 0 calc(1 * var(--pm-u)) 0 var(--pm-base); }
.pm-btn:disabled { background: rgba(255, 255, 255, .09); color: rgba(255, 225, 200, .38); text-shadow: none; box-shadow: 0 calc(4 * var(--pm-u)) 0 rgba(0, 0, 0, .4); cursor: default; }
.pm-btn-2 { background: rgba(255, 140, 40, .16); border: 2px solid #ff8a1f; color: #ffd2a0; text-shadow: none; box-shadow: 0 calc(4 * var(--pm-u)) 0 rgba(0, 0, 0, .4); }
.pm-btn-2:active:not(:disabled) { box-shadow: 0 calc(1 * var(--pm-u)) 0 rgba(0, 0, 0, .4); }
.pm-btn-crear { margin-top: 0; padding: calc(14 * var(--pm-u)); font-size: calc(21 * var(--pm-u)); }

.pm-o { display: flex; align-items: center; gap: 10px; margin: calc(14 * var(--pm-u)) 0 calc(2 * var(--pm-u)); font-size: calc(11 * var(--pm-u)); font-weight: 800; color: var(--pm-mute); }
.pm-o::before, .pm-o::after { content: ''; flex: 1; height: 1px; background: var(--pm-linea); }

/* Unirse: código + botón en una sola fila */
.pm-union { display: flex; gap: calc(8 * var(--pm-u)); align-items: stretch; }
.pm-codigo {
    flex: 1; min-width: 0; box-sizing: border-box; padding: calc(10 * var(--pm-u)) calc(8 * var(--pm-u)); border: 2px solid var(--pm-linea); border-radius: calc(16 * var(--pm-u)); background: rgba(0, 0, 0, .3); outline: none;
    text-align: center; text-transform: uppercase; letter-spacing: calc(5 * var(--pm-u)); font: 800 calc(19 * var(--pm-u)) 'Montserrat', sans-serif; color: #fff;
}
.pm-codigo::placeholder { letter-spacing: 1px; font-size: calc(12 * var(--pm-u)); }
.pm-codigo:focus { border-color: #ffa23a; box-shadow: 0 0 0 3px rgba(255, 130, 0, .25); }
.pm-union .pm-btn { width: auto; margin: 0; padding: 0 calc(18 * var(--pm-u)); font-size: calc(17 * var(--pm-u)); }

/* Botón Amigos dentro del menú */
.pm-amigos-btn {
    position: relative; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pm-u));
    margin-top: calc(14 * var(--pm-u)); padding: calc(11 * var(--pm-u)); border: 2px solid var(--pm-linea); border-radius: calc(16 * var(--pm-u)); background: var(--pm-vidrio); color: #ffd2a0;
    font: 800 calc(14 * var(--pm-u)) 'Montserrat', sans-serif; cursor: pointer; box-shadow: 0 calc(3 * var(--pm-u)) 0 rgba(0, 0, 0, .35);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pm-amigos-btn:active { transform: translateY(calc(3 * var(--pm-u))); box-shadow: none; }
.pm-amigos-btn .pm-ico svg { width: calc(20 * var(--pm-u)); height: calc(20 * var(--pm-u)); color: #ffa23a; }
.pm-insignia { min-width: calc(20 * var(--pm-u)); height: calc(20 * var(--pm-u)); padding: 0 calc(6 * var(--pm-u)); box-sizing: border-box; border-radius: 99px; display: grid; place-items: center; background: linear-gradient(180deg, #ff4b3a, #d6141c); color: #fff; font: 800 calc(11 * var(--pm-u)) 'Montserrat', sans-serif; }

/* Botones pequeños */
.pm-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--pm-u)); padding: calc(8 * var(--pm-u)) calc(12 * var(--pm-u)); border: 1.5px solid rgba(255, 150, 60, .5); border-radius: 99px; background: rgba(255, 140, 40, .14); color: #ffcc99; font: 800 calc(12 * var(--pm-u)) 'Montserrat', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pm-btn-sm:active:not(:disabled) { transform: scale(.96); }
.pm-btn-sm:disabled { opacity: .5; }
.pm-btn-sm .pm-ico svg { width: calc(15 * var(--pm-u)); height: calc(15 * var(--pm-u)); }
.pm-link { margin-top: calc(10 * var(--pm-u)); padding: calc(6 * var(--pm-u)); background: none; border: 0; font: 700 calc(12 * var(--pm-u)) 'Montserrat', sans-serif; color: var(--pm-mute); text-decoration: underline; cursor: pointer; }
.pm-fila { display: flex; justify-content: center; gap: calc(8 * var(--pm-u)); margin-bottom: calc(12 * var(--pm-u)); }
.pm-fila .pm-btn-sm { flex: 1 1 0; padding-left: calc(8 * var(--pm-u)); padding-right: calc(8 * var(--pm-u)); white-space: nowrap; }

/* Sala: código */
.pm-cod {
    display: inline-flex; align-items: center; gap: calc(10 * var(--pm-u)); margin: 0 auto calc(12 * var(--pm-u)); padding: calc(6 * var(--pm-u)) calc(14 * var(--pm-u)) calc(6 * var(--pm-u)) calc(18 * var(--pm-u));
    border: 2px dashed #ff9a3c; border-radius: calc(16 * var(--pm-u)); background: rgba(255, 120, 0, .13); color: #ffb870; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pm-cod b { font: calc(26 * var(--pm-u)) 'CatComic', 'Montserrat', sans-serif; font-weight: normal; letter-spacing: calc(5 * var(--pm-u)); padding-left: calc(5 * var(--pm-u)); color: #fff; text-shadow: 0 calc(2 * var(--pm-u)) 0 #ff4d00; }
.pm-cod:active { transform: scale(.97); }

/* Sala: meta */
.pm-etiq { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pm-u)); margin: 0 0 calc(6 * var(--pm-u)); font-size: calc(12 * var(--pm-u)); font-weight: 800; color: var(--pm-crema); }
.pm-etiq .pm-ico svg { width: calc(14 * var(--pm-u)); height: calc(14 * var(--pm-u)); color: #ffa23a; }
.pm-seg { display: flex; gap: calc(4 * var(--pm-u)); padding: calc(4 * var(--pm-u)); border-radius: calc(16 * var(--pm-u)); background: rgba(0, 0, 0, .32); border: 1px solid var(--pm-linea); }
.pm-seg-b { flex: 1; padding: calc(9 * var(--pm-u)) 0; border: 0; border-radius: calc(12 * var(--pm-u)); background: transparent; font: 800 calc(14 * var(--pm-u)) 'Montserrat', sans-serif; color: var(--pm-mute); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.pm-seg-b.on { background: var(--pm-fuego); color: #fff; text-shadow: 0 1px 0 rgba(90, 20, 0, .5); box-shadow: 0 calc(2 * var(--pm-u)) 0 var(--pm-base); }
.pm-metaN { display: inline-flex; align-items: center; gap: calc(6 * var(--pm-u)); padding: calc(8 * var(--pm-u)) calc(16 * var(--pm-u)); border: 1.5px solid rgba(255, 150, 60, .5); border-radius: 99px; background: rgba(255, 140, 40, .14); color: #ffcc99; font-size: calc(13 * var(--pm-u)); font-weight: 800; }
.pm-metaN .pm-ico svg { width: calc(15 * var(--pm-u)); height: calc(15 * var(--pm-u)); }

/* Listas de jugadores y amigos */
.pm-lista { display: flex; flex-direction: column; gap: calc(6 * var(--pm-u)); }
.pm-jug { display: flex; align-items: center; gap: calc(10 * var(--pm-u)); padding: calc(6 * var(--pm-u)) calc(10 * var(--pm-u)); border-radius: calc(16 * var(--pm-u)); background: var(--pm-vidrio); border: 1.5px solid rgba(255, 170, 90, .16); text-align: left; }
.pm-jug.yo { border-color: #ff8a1f; background: rgba(255, 120, 0, .16); }
.pm-av { flex: none; width: calc(36 * var(--pm-u)); height: calc(36 * var(--pm-u)); border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); font: 800 calc(14 * var(--pm-u)) 'Montserrat', sans-serif; color: #1a0a00; }
.pm-av img { width: 100%; height: 100%; object-fit: cover; }
.pm-nm { flex: 1; min-width: 0; }
.pm-nm b { display: block; font-size: calc(13.5 * var(--pm-u)); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-nm small { display: flex; align-items: center; gap: calc(3 * var(--pm-u)); font-size: calc(10.5 * var(--pm-u)); font-weight: 700; color: var(--pm-mute); }
.pm-nm small .pm-ico svg { width: calc(12 * var(--pm-u)); height: calc(12 * var(--pm-u)); color: #ffc233; }
.pm-est { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--pm-u)); padding: calc(4 * var(--pm-u)) calc(9 * var(--pm-u)); border-radius: 99px; background: rgba(255, 255, 255, .09); color: #c9a58a; font-size: calc(11 * var(--pm-u)); font-weight: 800; }
.pm-est.on { background: rgba(34, 197, 94, .2); color: #7be3a1; }
.pm-est .pm-ico svg { width: calc(12 * var(--pm-u)); height: calc(12 * var(--pm-u)); }
.pm-hueco { border-style: dashed; border-color: rgba(255, 170, 90, .3); background: transparent; color: var(--pm-mute); padding-top: calc(5 * var(--pm-u)); padding-bottom: calc(5 * var(--pm-u)); font-size: calc(12 * var(--pm-u)); font-weight: 700; }
.pm-hueco .pm-av { width: calc(30 * var(--pm-u)); height: calc(30 * var(--pm-u)); background: rgba(255, 255, 255, .06); color: #b88a6a; border: 2px dashed rgba(255, 170, 90, .4); box-shadow: none; }
.pm-pos { flex: none; width: calc(30 * var(--pm-u)); font: calc(18 * var(--pm-u)) 'CatComic', sans-serif; text-align: center; color: #fff; }
.pm-pts { flex: none; font: calc(16 * var(--pm-u)) 'CatComic', sans-serif; color: #ffb02e; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }

/* Amigos */
.pm-micodigo { margin-bottom: calc(12 * var(--pm-u)); padding: calc(10 * var(--pm-u)) calc(12 * var(--pm-u)); border-radius: calc(20 * var(--pm-u)); background: var(--pm-fuego); color: #fff; box-shadow: 0 calc(4 * var(--pm-u)) 0 var(--pm-base), 0 calc(8 * var(--pm-u)) calc(16 * var(--pm-u)) rgba(255, 90, 0, .3); }
.pm-micodigo small { display: block; font-size: calc(10.5 * var(--pm-u)); font-weight: 800; color: rgba(255, 245, 230, .92); }
.pm-micodigo-f { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--pm-u)); margin-top: calc(4 * var(--pm-u)); }
.pm-micodigo-f b { font: calc(24 * var(--pm-u)) 'CatComic', 'Montserrat', sans-serif; font-weight: normal; letter-spacing: calc(3 * var(--pm-u)); color: #fff; text-shadow: 0 calc(2 * var(--pm-u)) 0 rgba(120, 30, 0, .6); }
.pm-micodigo .pm-btn-sm { background: rgba(60, 15, 0, .35); border-color: rgba(255, 255, 255, .55); color: #fff; }
.pm-busca { display: flex; gap: calc(8 * var(--pm-u)); align-items: center; }
.pm-busca-in { position: relative; flex: 1; min-width: 0; }
.pm-busca-in .pm-ico { position: absolute; left: calc(12 * var(--pm-u)); top: 50%; transform: translateY(-50%); color: #b88a6a; pointer-events: none; }
.pm-busca-in input { padding-left: calc(36 * var(--pm-u)) !important; }
.pm-btn-ico { flex: none; width: calc(42 * var(--pm-u)); height: calc(42 * var(--pm-u)); border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--pm-fuego); color: #fff; cursor: pointer; box-shadow: 0 calc(3 * var(--pm-u)) 0 var(--pm-base); }
.pm-btn-ico:active { transform: translateY(calc(2 * var(--pm-u))); box-shadow: 0 calc(1 * var(--pm-u)) 0 var(--pm-base); }
.pm-btn-ico .pm-ico svg { width: calc(19 * var(--pm-u)); height: calc(19 * var(--pm-u)); }
.pm-amigo { padding: calc(5 * var(--pm-u)) calc(8 * var(--pm-u)); }
.pm-av-wrap { position: relative; flex: none; }
.pm-dot { position: absolute; right: calc(-1 * var(--pm-u)); bottom: calc(-1 * var(--pm-u)); width: calc(11 * var(--pm-u)); height: calc(11 * var(--pm-u)); border-radius: 50%; background: #7c6a5e; border: 2px solid #2e0b05; }
.pm-dot.on { background: #22c55e; }
.pm-nm small.pm-on { color: #7be3a1; }
.pm-etq { flex: none; font-size: calc(11 * var(--pm-u)); font-weight: 800; color: var(--pm-mute); }
.pm-verde { background: rgba(34, 197, 94, .2) !important; border-color: rgba(74, 222, 128, .55) !important; color: #7be3a1 !important; }
.pm-rojo { background: rgba(239, 68, 68, .2) !important; border-color: rgba(255, 110, 100, .55) !important; color: #ff9d92 !important; }
.pm-mini { flex: none; width: calc(28 * var(--pm-u)); height: calc(28 * var(--pm-u)); border: 1.5px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .07); color: #e8c9b0; font: 800 calc(12 * var(--pm-u)) 'Montserrat', sans-serif; cursor: pointer; }
.pm-vacio { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--pm-u)); padding: calc(14 * var(--pm-u)) calc(12 * var(--pm-u)); border: 2px dashed rgba(255, 170, 90, .3); border-radius: calc(18 * var(--pm-u)); color: var(--pm-mute); font-size: calc(12 * var(--pm-u)); font-weight: 700; line-height: 1.35; }
.pm-vacio .pm-ico { color: #ff9a3c; }
.pm-vacio .pm-ico svg { width: calc(30 * var(--pm-u)); height: calc(30 * var(--pm-u)); }

/* Avisos */
.pm-toast {
    position: fixed; left: 50%; bottom: max(env(safe-area-inset-bottom), 18px); z-index: 760; transform: translate(-50%, 140%); max-width: 90vw;
    padding: 10px 18px; border: 1.5px solid #f7630c; border-radius: 99px; background: #2e0b05; color: #ffe9d2; font: 700 13px 'Montserrat', sans-serif; text-align: center;
    pointer-events: none; transition: transform .3s cubic-bezier(.2, 1.2, .4, 1); box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.pm-toast.pm-show { transform: translate(-50%, 0); }
.pm-aviso {
    position: fixed; left: 50%; top: max(env(safe-area-inset-top), 10px); z-index: 730; box-sizing: border-box; width: min(92vw, 380px);
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid #f7630c; border-radius: 16px; background: linear-gradient(180deg, #3d1308, #260904); color: #ffe9d2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 106, 0, .35); font: 700 13px 'Montserrat', sans-serif;
    transform: translate(-50%, -140%); transition: transform .3s cubic-bezier(.2, 1.1, .4, 1);
}
.pm-aviso.pm-show { transform: translate(-50%, 0); }
.pm-aviso-t { flex: 1; min-width: 0; }
.pm-aviso-ok { flex: none; padding: 7px 14px; border: 0; border-radius: 99px; background: linear-gradient(135deg, #f14712, #fda32a); color: #fff; font: 800 12px 'Montserrat', sans-serif; cursor: pointer; box-shadow: 0 2px 0 #7a2208; }
.pm-aviso-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .pm-wrap { animation: none; } .pm-overlay, .pm-toast, .pm-aviso, body .lb-tile, .pm-seg-b { transition: none; } }

/* Perfil del amigo */
.pm-ver { border-color: transparent; background: transparent; font-size: calc(18 * var(--pm-u)); color: var(--pm-mute); }
.pm-perfil-cab { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--pm-u)); margin-bottom: calc(14 * var(--pm-u)); }
.pm-av-grande .pm-av { width: calc(72 * var(--pm-u)); height: calc(72 * var(--pm-u)); font-size: calc(28 * var(--pm-u)); border-width: calc(3 * var(--pm-u)); box-shadow: 0 0 calc(18 * var(--pm-u)) rgba(255, 120, 0, .5); }
.pm-av-grande .pm-dot { width: calc(16 * var(--pm-u)); height: calc(16 * var(--pm-u)); right: calc(2 * var(--pm-u)); bottom: calc(2 * var(--pm-u)); }
.pm-perfil-nombre { margin: calc(6 * var(--pm-u)) 0 0; max-width: 100%; font: 800 calc(20 * var(--pm-u)) 'Montserrat', sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-perfil-est { padding: calc(3 * var(--pm-u)) calc(10 * var(--pm-u)); border-radius: 99px; background: rgba(255, 255, 255, .09); color: #c9a58a; font-size: calc(11 * var(--pm-u)); font-weight: 800; }
.pm-perfil-est.on { background: rgba(34, 197, 94, .2); color: #7be3a1; }
.pm-perfil-lugar { font-size: calc(11 * var(--pm-u)); font-weight: 700; color: var(--pm-mute); }
.pm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--pm-u)); }
.pm-stat { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--pm-u)); padding: calc(12 * var(--pm-u)) calc(6 * var(--pm-u)) calc(10 * var(--pm-u)); border-radius: calc(18 * var(--pm-u)); background: var(--pm-vidrio); border: 1.5px solid var(--pm-linea); }
.pm-stat-ic { display: grid; place-items: center; width: calc(34 * var(--pm-u)); height: calc(34 * var(--pm-u)); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #ffb02e; }
.pm-stat-ic svg { width: calc(20 * var(--pm-u)); height: calc(20 * var(--pm-u)); display: block; }
.pm-stat-v { font: calc(28 * var(--pm-u)) 'CatComic', 'Montserrat', sans-serif; font-weight: normal; line-height: 1.05; color: #fff; text-shadow: 0 calc(2 * var(--pm-u)) 0 rgba(255, 77, 0, .7); }
.pm-stat-l { font-size: calc(11 * var(--pm-u)); font-weight: 800; color: var(--pm-crema); text-transform: uppercase; letter-spacing: .5px; }
.pm-stat-n { font-size: calc(10.5 * var(--pm-u)); font-weight: 700; color: var(--pm-mute); min-height: calc(13 * var(--pm-u)); }
.pm-stat-racha.on { border-color: #ff8a1f; background: rgba(255, 120, 0, .16); }
.pm-stat-racha.on .pm-stat-ic { background: var(--pm-fuego); color: #fff; box-shadow: 0 0 calc(14 * var(--pm-u)) rgba(255, 110, 0, .65); }
.pm-stat-fila { display: flex; justify-content: space-between; align-items: center; margin-top: calc(10 * var(--pm-u)); padding: calc(9 * var(--pm-u)) calc(14 * var(--pm-u)); border-radius: calc(14 * var(--pm-u)); background: var(--pm-vidrio); border: 1.5px solid rgba(255, 170, 90, .16); font-size: calc(12 * var(--pm-u)); font-weight: 700; color: var(--pm-mute); }
.pm-stat-fila b { font: calc(15 * var(--pm-u)) 'CatComic', sans-serif; font-weight: normal; color: #ffb02e; }
.pm-perfil-acc { display: flex; justify-content: center; align-items: center; gap: calc(8 * var(--pm-u)); margin-top: calc(14 * var(--pm-u)); }


/* Apuestas de chiles */
.pm-etiq-ap { margin-top: calc(10 * var(--pm-u)); }
.pm-seg-ap { gap: calc(2 * var(--pm-u)); padding: calc(3 * var(--pm-u)); }
.pm-seg-ap .pm-seg-b { padding: calc(8 * var(--pm-u)) 0; font-size: calc(11.5 * var(--pm-u)); }
.pm-seg-ap .pm-seg-b:disabled { opacity: .35; cursor: default; }
.pm-metaN-ap { border-color: rgba(255, 210, 80, .55); background: rgba(255, 190, 40, .14); color: #ffe39a; }
.pm-ap { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--pm-u)); margin: calc(12 * var(--pm-u)) 0 calc(4 * var(--pm-u)); padding: calc(10 * var(--pm-u)) calc(12 * var(--pm-u)); border: 1.5px solid rgba(255, 210, 80, .45); border-radius: calc(16 * var(--pm-u)); background: rgba(255, 190, 40, .1); }
.pm-ap-pozo { font: calc(20 * var(--pm-u)) 'CatComic', 'Montserrat', sans-serif; font-weight: normal; color: #ffd34d; text-shadow: 0 calc(2 * var(--pm-u)) 0 rgba(120, 40, 0, .6); }
.pm-ap-saldo { font-size: calc(11.5 * var(--pm-u)); font-weight: 800; color: var(--pm-crema); }
.pm-ap small { font-size: calc(10.5 * var(--pm-u)); font-weight: 600; color: var(--pm-mute); line-height: 1.35; }
.pm-ap-res { display: flex; flex-direction: column; gap: calc(2 * var(--pm-u)); margin: calc(10 * var(--pm-u)) 0; padding: calc(10 * var(--pm-u)) calc(12 * var(--pm-u)); border-radius: calc(14 * var(--pm-u)); border: 1.5px solid var(--pm-linea); background: var(--pm-vidrio); font-size: calc(14 * var(--pm-u)); color: var(--pm-crema); }
.pm-ap-res small { font-size: calc(11 * var(--pm-u)); font-weight: 700; opacity: .85; }
.pm-ap-res.gana { border-color: rgba(74, 222, 128, .55); background: rgba(34, 197, 94, .2); color: #8ee9b0; }
.pm-ap-res.pierde { border-color: rgba(255, 90, 70, .5); background: rgba(239, 68, 68, .18); color: #ffb4a8; }
.pm-ap-res.dev { border-color: rgba(120, 180, 255, .5); background: rgba(80, 150, 255, .16); color: #b5d4ff; }
.pm-ap-res.pend { color: var(--pm-mute); }