/* El mando · móvil primero. Sucio, oscuro y rojo sangre, como la película. */
:root {
  --fondo: #0a0806;
  --fondo2: #14100c;
  --papel: #e9dcc0;
  --tenue: rgba(233, 220, 192, .62);
  --muy-tenue: rgba(233, 220, 192, .38);
  --sangre: #a10d0d;
  --sangre-viva: #d4141f;
  --oxido: #5b2f17;
  --enfermo: #9fbf4a;
  --oro: #e2b64c;
  --linea: rgba(233, 220, 192, .14);
  --maquina: 'Special Elite', 'Courier New', monospace;
  --texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 0%, #1c130d 0%, var(--fondo) 55%, #050403 100%) fixed, var(--fondo);
  color: var(--papel); font-family: var(--texto); font-size: 17px; line-height: 1.4;
  padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
body.cargando main, body.cargando .cabecera .quien { visibility: hidden; }
/* grano de película y viñeta (encima de todo, sin tapar los toques) */
.grano { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 49;
  background: radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, .75) 100%); }
.oculto { display: none !important; }
a { color: var(--sangre-viva); }
b { color: #fff3dc; }

/* ---------- cabecera ---------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--linea); }
.marca { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.marca .m1 { font-family: var(--maquina); font-size: 13px; letter-spacing: 3px; color: var(--sangre-viva); text-shadow: 0 0 10px rgba(212, 20, 31, .45); }
.marca .m2 { font-family: var(--maquina); font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--muy-tenue); }
.quien { display: flex; align-items: center; gap: 8px; min-width: 0; }
.quien .avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--sangre); object-fit: cover; filter: sepia(.25) contrast(1.1); }
.quien .nombre { font-family: var(--maquina); font-size: 15px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salir { font: inherit; font-size: 12px; color: var(--tenue); background: none; border: 1px solid var(--linea); border-radius: 3px; padding: 6px 9px; min-height: 32px; }

main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; }
.pantalla { padding: 14px 0 8px; }

/* ---------- entrar ---------- */
#pEntrar { text-align: center; padding-top: 9vh; }
.titulo { font-family: var(--maquina); font-weight: normal; font-size: clamp(44px, 15vw, 72px); letter-spacing: 4px; margin: 0;
  color: var(--sangre-viva); text-shadow: 0 0 22px rgba(200, 0, 0, .55), 2px 3px 0 #000; animation: parpadeo 7s infinite steps(1); }
.lema { font-family: var(--maquina); letter-spacing: 7px; text-transform: uppercase; font-size: 13px; color: var(--muy-tenue); margin: 6px 0 28px; }
.texto { font-size: 18px; color: var(--tenue); margin: 0 auto 26px; max-width: 30em; }
.letra { font-size: 13px; color: var(--muy-tenue); margin: 18px auto 0; max-width: 28em; }
.aviso { min-height: 1.4em; color: #ff6b5e; font-size: 15px; margin: 14px 0 0; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--maquina); font-size: 22px; letter-spacing: 1px;
  color: var(--papel); text-decoration: none; cursor: pointer; min-height: 60px; padding: 10px 22px; border-radius: 4px;
  background: linear-gradient(180deg, #2a1712 0%, #170c09 100%); border: 2px solid #4d1410;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -10px 18px rgba(0, 0, 0, .45), 0 3px 0 #000;
  transition: transform .06s, box-shadow .12s, border-color .12s; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.boton:active { transform: translateY(2px) scale(.985); border-color: var(--sangre-viva); box-shadow: inset 0 0 22px rgba(212, 20, 31, .35), 0 1px 0 #000; }
.boton:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.boton.twitch { width: 100%; max-width: 360px; min-height: 66px; font-size: 23px; border-color: var(--sangre); background: linear-gradient(180deg, #7d0b0b 0%, #4a0606 100%); }
.boton.twitch .glifo { width: 24px; height: 26px; flex: none; background: var(--papel);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M2 0 0 5v19h6v4h3l4-4h5l6-6V0zm20 17-4 4h-6l-3 3v-3H4V2h18zM15 6h3v7h-3zm-6 0h3v7H9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M2 0 0 5v19h6v4h3l4-4h5l6-6V0zm20 17-4 4h-6l-3 3v-3H4V2h18zM15 6h3v7h-3zm-6 0h3v7H9z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- jugando ---------- */
.caido { margin: 0 0 12px; padding: 12px 14px; border: 1px dashed var(--sangre); background: rgba(80, 6, 6, .35); color: #ffb3a8; font-size: 15px; border-radius: 3px; }

.estado { text-align: center; padding: 18px 8px 16px; margin: 0 0 14px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)); }
.eGrande { font-family: var(--maquina); font-size: clamp(36px, 12vw, 58px); line-height: 1; letter-spacing: 2px; text-shadow: 2px 3px 0 #000; }
.eSub { margin-top: 10px; font-size: 16px; color: var(--tenue); min-height: 1.4em; }
.equipo { margin: 12px auto 0; padding: 10px 14px; max-width: 420px; border-radius: 6px; color: #fff; font-family: var(--maquina); font-size: clamp(20px, 6.5vw, 28px);
  letter-spacing: 1px; line-height: 1.15; text-shadow: 1px 2px 0 rgba(0, 0, 0, .55); overflow-wrap: anywhere; }
.estado.vivo .eGrande { color: var(--papel); text-shadow: 0 0 18px rgba(159, 191, 74, .35), 2px 3px 0 #000; }
.estado.vivo .eGrande::before { content: '● '; color: var(--enfermo); font-size: .45em; vertical-align: middle; }
.estado.muerto { background: radial-gradient(90% 120% at 50% 40%, rgba(161, 13, 13, .38), rgba(0, 0, 0, .4)); border-color: rgba(212, 20, 31, .45); }
.estado.muerto .eGrande { color: var(--sangre-viva); text-shadow: 0 0 26px rgba(212, 20, 31, .7), 2px 3px 0 #000; }
.estado.muerto .eSub { color: #f0c6bd; font-family: var(--maquina); font-size: 18px; }
.estado.grada .eGrande { color: #b9b2a2; }
.estado.ganador .eGrande { color: var(--oro); text-shadow: 0 0 26px rgba(226, 182, 76, .55), 2px 3px 0 #000; }
.estado.fuera .eGrande { font-size: clamp(28px, 9vw, 44px); color: var(--tenue); }
.estado.espera .eGrande { color: var(--muy-tenue); }
.estado.golpe { animation: golpe .5s cubic-bezier(.3, .7, .4, 1); }
.estado.muerto.golpe { animation: golpe .5s cubic-bezier(.3, .7, .4, 1), sangra 1.6s ease-out; }

.prueba { margin: 0 0 14px; }
.pFila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pNombre { font-family: var(--maquina); font-size: 22px; color: var(--sangre-viva); letter-spacing: 1px; text-shadow: 0 0 12px rgba(212, 20, 31, .35); min-width: 0; }
.pReloj { font-family: var(--maquina); font-size: 34px; color: #fff3dc; font-variant-numeric: tabular-nums; flex: none; text-shadow: 0 0 14px rgba(255, 60, 40, .45); }
.pCab { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muy-tenue); margin-top: 2px; }
.pInstr { margin-top: 8px; font-size: 18px; color: var(--papel); }

.botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.botones[data-n="1"], .botones[data-n="3"] .boton:first-child, .botones[data-n="5"] .boton:first-child { grid-column: 1 / -1; }
.botones[data-n="1"] { grid-template-columns: 1fr; }
.botones.muchos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.botones.muchos .boton.cmd { min-height: 54px; padding: 6px 2px; font-size: 20px; }
.boton.cmd { flex-direction: column; gap: 2px; min-height: 76px; padding: 10px 8px; font-size: 27px; word-break: break-word; }
.boton.cmd .t { font-family: var(--texto); font-size: 13px; letter-spacing: 0; color: var(--tenue); line-height: 1.2; }
.boton.cmd.grande { grid-column: 1 / -1; min-height: 92px; font-size: 32px; border-color: var(--sangre); background: linear-gradient(180deg, #6e0a0a 0%, #3b0505 100%); }
.boton.cmd.grande .t { color: #f3d9cf; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; }
.boton.cmd.pre { border-style: dashed; }
/* unirte a la partida: siempre a mano mientras no estás dentro, por si el apuntado solo no ha entrado */
.boton.unirse { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 104px; margin: 0 0 14px; padding: 14px 10px; font-size: clamp(26px, 8vw, 38px); letter-spacing: 2px;
  border-color: var(--sangre-viva); background: linear-gradient(180deg, #8a0c0c 0%, #430606 100%); box-shadow: 0 0 22px rgba(212, 20, 31, .35), 0 2px 0 #000; }
.boton.unirse .t { font-family: var(--texto); font-size: 14px; letter-spacing: 1px; color: #f3d9cf; }
.boton.unirse .t:empty { display: none; }
.boton.unirse.oculto { display: none; }

.escribir { display: flex; gap: 8px; margin: 0 0 14px; align-items: stretch; }
.escribir .pref { display: flex; align-items: center; padding: 0 10px; font-family: var(--maquina); font-size: 26px; color: var(--sangre-viva);
  background: #0e0a08; border: 2px solid #3a2a20; border-right: 0; border-radius: 4px 0 0 4px; margin-right: -8px; }
.escribir input { flex: 1; min-width: 0; min-height: 60px; font-family: var(--maquina); font-size: 22px; color: var(--papel); background: #0e0a08;
  border: 2px solid #3a2a20; border-radius: 4px; padding: 8px 12px; }
.escribir .pref:not(.oculto) + input { border-left: 0; border-radius: 0 4px 4px 0; padding-left: 2px; }
.escribir input:focus { outline: none; border-color: var(--sangre); }
.escribir .pref:not(.oculto):has(+ input:focus) { border-color: var(--sangre); }
.escribir input::placeholder { color: rgba(233, 220, 192, .3); }
.escribir .enviar { min-height: 60px; padding: 8px 16px; font-size: 19px; flex: none; }

.envios { list-style: none; margin: 0 0 10px; padding: 0; }
.envios li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px dotted var(--linea); font-size: 15px; color: var(--tenue); }
.envios li .txt { font-family: var(--maquina); color: var(--papel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.envios li .est { flex: none; }
.envios li.ok .est { color: var(--enfermo); }
.envios li.mal .est { color: #ff7a6b; }
.envios li:first-child { animation: entra .25s ease-out; }

.chat { text-align: center; font-size: 14px; color: var(--muy-tenue); margin: 14px 0 0; font-style: italic; }

.pie { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muy-tenue); padding-top: 10px; border-top: 1px solid var(--linea); max-width: 560px; width: 100%; margin: 0 auto; }
.pie .ok::before { content: '● '; color: var(--enfermo); }
.pie .mal::before { content: '● '; color: var(--sangre-viva); }
.pie .dev { color: var(--oro); letter-spacing: 2px; }
.pie .version { opacity: .6; }

/* te toca (pruebas por turnos) */
.estado.turno .eGrande { color: var(--oro); animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .estado.turno .eGrande { animation: none; } }

/* ¿por qué he muerto? */
.porque { margin-top: 12px; font: 15px var(--texto); color: #f0c6bd; background: rgba(0, 0, 0, .35); border: 1px solid rgba(212, 20, 31, .45); padding: 8px 14px; border-radius: 3px; cursor: pointer; }
.detalle { margin-top: 10px; text-align: left; font: 14px/1.45 var(--texto); color: #f0c6bd; }
.detalle p { margin: 0 0 6px; }
.detalle ol { margin: 0; padding-left: 20px; }
.detalle li { padding: 2px 0; color: var(--tenue); }
.detalle li.ok { color: var(--enfermo); } .detalle li.mal { color: #ff7a6b; }

/* solo para ti */
.privado { margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--oro); background: rgba(226, 182, 76, .07); }
.privado .pt { font-family: var(--maquina); font-size: 18px; color: var(--oro); }
.privado .px { font: 16px/1.4 var(--texto); margin-top: 4px; }
.privado .pn { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--tenue); margin-top: 6px; }

/* la quiniela de la grada */
.quiniela { margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--linea); background: rgba(0, 0, 0, .3); }
.quiniela .qTit { font-family: var(--maquina); font-size: 18px; }
.quiniela .qSub { font-size: 13px; color: var(--tenue); margin-top: 3px; }
.quiniela .qSub:empty, .quiniela .qFin:empty, .quiniela .qMarc:empty, .quiniela .qOps:empty { display: none; }
.quiniela .qOps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.quiniela .qop { min-height: 48px; font-size: 16px; }
.quiniela .qop.elegida { outline: 2px solid var(--oro); color: var(--oro); }
.quiniela .qop:disabled { opacity: .45; }
.quiniela .qFin { margin-top: 8px; font-size: 15px; }
.quiniela .qMarc { margin-top: 6px; font-size: 13px; color: var(--tenue); }

/* tu historial */
.ficha { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--oxido); font-size: 14px; color: var(--tenue); }
.ficha .fTit { font-family: var(--maquina); color: var(--papel); font-size: 15px; margin-bottom: 2px; }
.ficha .fM:empty { display: none; }

@keyframes parpadeo { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .35; } 43% { opacity: 1; } 76% { opacity: .7; } 77% { opacity: 1; } }
@keyframes golpe { 0% { transform: scale(1.06); filter: brightness(1.8); } 30% { transform: translateX(-5px); } 55% { transform: translateX(4px); } 100% { transform: none; filter: none; } }
@keyframes sangra { 0% { box-shadow: inset 0 0 120px rgba(212, 20, 31, .9); } 100% { box-shadow: inset 0 0 0 rgba(212, 20, 31, 0); } }
@keyframes entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (min-width: 700px) {
  body { font-size: 18px; }
  .botones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==================== el Taller de Muñecos: las pestañas, TU MUÑECO y la tarjeta del final ==================== */
:root {
  --linea2: rgba(233, 220, 192, .24);
  --ambar: #e3a63a;
  --comun: #b9b2a2; --rara: #4fb3a5; --epica: #b07cff; --leyenda: #e2b64c; --logro: #ff5a52;
  --apoyo: linear-gradient(90deg, #e2b64c, #ff5fa2, #9147ff);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico-boton { display: inline-block; width: 15px; height: 15px; border-radius: 50%; flex: none; vertical-align: -2px; position: relative;
  background: radial-gradient(circle at 35% 35%, #9a7650, #3a2a1c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.ico-boton::after { content: ''; position: absolute; inset: 4px; background: radial-gradient(circle, #120c08 1.2px, transparent 1.6px) 0 0 / 3.5px 3.5px; }
.ico-estrella { display: inline-block; width: 15px; height: 15px; flex: none; vertical-align: -2px; background: var(--oro);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* ---------- las pestañas ---------- */
.pestanas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 0 0; }
.pTabs { display: flex; gap: 6px; flex: 1 1 100%; }
.pestana { position: relative; flex: 1 1 0; min-height: 46px; padding: 0 10px; font: 16px var(--maquina); letter-spacing: 2px; color: var(--muy-tenue);
  background: rgba(0, 0, 0, .28); border: 1px solid var(--linea); border-radius: 4px; cursor: pointer; touch-action: manipulation; }
.pestana[aria-selected="true"] { color: var(--papel); border-color: var(--sangre-viva); background: rgba(212, 20, 31, .14); box-shadow: inset 0 -3px 0 var(--sangre-viva); }
.pestana:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.pestana.nuevo::after { content: ''; position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 10px var(--oro); }
.cartera { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.cartera b { color: var(--papel); font-size: 18px; font-family: var(--maquina); font-weight: normal; }
.cartera .ico-estrella { margin-left: 8px; }

/* ---------- TU MUÑECO ---------- */
body.en-muneco main, body.en-muneco .pie { max-width: 1180px; }
.muneco { padding-top: 12px; }
.vuelve { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--enfermo); background: rgba(159, 191, 74, .1); border-radius: 4px; font-size: 15px; }
.vuelve .boton { min-height: 46px; font-size: 17px; padding: 6px 16px; }
.tPanel { text-align: center; padding: 44px 18px; border: 1px dashed var(--linea2); border-radius: 6px; background: rgba(0, 0, 0, .25); }
.tPanel .tT { font: 25px var(--maquina); color: var(--papel); margin: 0; }
.tPanel .tX { color: var(--tenue); margin: 10px auto 20px; max-width: 28em; font-size: 16px; }
.tPanel .boton { min-height: 52px; font-size: 19px; }
#tEspera .tT::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: puntos 1.4s steps(4) infinite; }
@keyframes puntos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.taller { --esc-h: clamp(220px, 37vh, 380px); display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--linea2); border-radius: 6px;
  background: linear-gradient(180deg, #120e0b, #0a0807); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
@supports (height: 1svh) { .taller { --esc-h: clamp(220px, 37svh, 380px); } }
.escenario { position: sticky; top: 0; z-index: 3; height: var(--esc-h); border-bottom: 1px solid var(--linea); border-radius: 6px 6px 0 0;
  background: radial-gradient(55% 50% at 50% 40%, rgba(255, 214, 170, .09), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(120, 8, 8, .28), transparent 70%), #0c0907; }
.escenario canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; border-radius: inherit; }
.escenario canvas:active { cursor: grabbing; }
.escenario canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--oro); }
.encuadres { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.encuadres button { min-height: 44px; min-width: 44px; padding: 0 10px; font: 13px var(--texto); color: var(--tenue); background: rgba(0, 0, 0, .55);
  border: 1px solid var(--linea2); border-radius: 4px; cursor: pointer; touch-action: manipulation; }
.encuadres button[aria-pressed="true"] { color: var(--papel); border-color: var(--papel); }
.encuadres button:focus-visible, .hueco:focus-visible, .prenda:focus-visible, button.pri:focus-visible, button.sec:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.tRango { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; line-height: 1.3; color: var(--tenue);
  background: rgba(0, 0, 0, .55); padding: 4px 8px; border-radius: 3px; pointer-events: none; text-align: right; }
.tRango b { font: normal 14px var(--maquina); color: var(--oro); }
.tProbando { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; pointer-events: none; }
.tProbando span { font-family: var(--maquina); letter-spacing: 3px; color: var(--ambar); border: 1px dashed var(--ambar); padding: 3px 10px; background: rgba(0, 0, 0, .6); }
.volverEsc { display: none; align-items: center; min-height: 44px; padding: 0 12px; font: 14px var(--texto); color: var(--papel); background: rgba(0, 0, 0, .75);
  border: 1px solid var(--ambar); border-radius: 4px; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.volverEsc:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.nota3d, .cargando3d, .sin3d { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; pointer-events: none; }
.nota3d { bottom: 62px; font-size: 13px; color: var(--tenue); background: rgba(0, 0, 0, .6); padding: 4px 10px; border-radius: 3px; white-space: nowrap; }
.cargando3d { top: 50%; transform: translate(-50%, -50%); font: 18px var(--maquina); color: var(--tenue); letter-spacing: 1px; animation: latido 1.4s ease-in-out infinite; }
.sin3d { top: 50%; transform: translate(-50%, -50%); width: min(86%, 26em); font-size: 15px; color: var(--tenue); }
/* el 3D no ha llegado (la red): volver a intentarlo, debajo del aviso */
.reintentar3d { position: absolute; left: 50%; top: calc(50% + 40px); transform: translateX(-50%); min-height: 48px; padding: 6px 18px; font-size: 18px; white-space: nowrap; }
.reintentar3d:active { transform: translateX(-50%) translateY(2px); }
/* el bocadillo de ejemplo (el que sale con lo que escribes en el chat) */
.bocadillo { position: absolute; left: 55%; top: 24%; max-width: 42%; padding: 9px 14px; border-radius: 14px; font: 16px/1.2 var(--maquina); pointer-events: none;
  color: #2a1a0c; background: #efe8d8; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.bocadillo::after { content: ''; position: absolute; left: 14px; bottom: -11px; border: 6px solid transparent; border-top: 7px solid #efe8d8; border-left: 9px solid #efe8d8; }
.bocadillo.b-carton { color: #3a2410; background: repeating-linear-gradient(90deg, #a87a46 0 5px, #9c7040 5px 6px); }
.bocadillo.b-carton::after { border-top-color: #a87a46; border-left-color: #a87a46; }
.bocadillo.b-servilleta { color: #2f6fd6; background: #f4f2ee linear-gradient(90deg, rgba(47, 111, 214, .18) 50%, transparent 50%) 0 0 / 12px 12px; }
.bocadillo.b-servilleta::after { border-top-color: #f4f2ee; border-left-color: #f4f2ee; }
.bocadillo.b-rescate { background: #e9e1cf; color: #1a1410; letter-spacing: 1px; }
.bocadillo.b-rescate span { display: inline-block; padding: 0 1px; margin: 0 .5px; background: #fff; transform: rotate(-4deg); }
.bocadillo.b-rescate span:nth-child(2n) { background: #f2c230; color: #c4161c; transform: rotate(5deg) translateY(2px); }
.bocadillo.b-rescate span:nth-child(3n) { color: #2f6fd6; transform: rotate(-7deg); }
.bocadillo.b-rescate::after { border-top-color: #e9e1cf; border-left-color: #e9e1cf; }
.bocadillo.b-pizarra { color: #e9e6dc; background: #1f2a22; border: 4px solid #6b4a2a; }
.bocadillo.b-pizarra::after { bottom: -15px; border-top-color: #6b4a2a; border-left-color: #6b4a2a; }

.tienda { display: flex; flex-direction: column; min-width: 0; }
.huecos { position: sticky; top: var(--esc-h); z-index: 2; display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; border-bottom: 1px solid var(--linea);
  background: #0e0b08; scrollbar-width: none; overscroll-behavior-x: contain; }
.huecos::-webkit-scrollbar { display: none; }
.huecos.mas-der { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.huecos.mas-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.huecos.mas-izq.mas-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hueco { flex: none; min-height: 44px; padding: 0 15px; font: 15px var(--texto); color: var(--tenue); background: transparent; border: 1px solid var(--linea2);
  border-radius: 999px; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.hueco[aria-selected="true"] { color: var(--fondo); background: var(--papel); border-color: var(--papel); font-weight: 600; }
.hueco.probando::after { content: ' ●'; color: var(--ambar); font-size: 10px; vertical-align: 2px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; padding: 12px; align-content: start; min-height: 260px; }
.prenda { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 8px; min-width: 0; text-align: left; font: inherit; color: var(--papel); cursor: pointer;
  background: #15110d; border: 1px solid var(--linea); border-top: 3px solid var(--rc, var(--linea2)); border-radius: 4px; touch-action: manipulation; }
.prenda:hover { border-color: var(--linea2); border-top-color: var(--rc, var(--linea2)); }
.prenda:active { transform: translateY(1px); }
.prenda .mini { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #261d16, #0d0a08); }
.prenda .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prenda .mini img:not([src]) { visibility: hidden; }
.prenda.sin-mini .mini img { display: none; }
.prenda.sin-mini .mini::after { content: attr(data-letra); font: 34px var(--maquina); color: var(--tenue); }
.prenda.sin-mini .mini[style] { background: radial-gradient(circle at 50% 50%, var(--muestra) 0 36%, transparent 37%), radial-gradient(circle at 50% 40%, #261d16, #0d0a08); }
.prenda.sin-mini .mini[style]::after { content: none; }
.prenda .pn { font-size: 13px; line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
.prenda .pp { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.prenda[aria-pressed="true"] { outline: 2px solid var(--papel); outline-offset: 1px; }
.prenda.e-puesta .pp { color: var(--enfermo); }
.prenda.e-tuya .pp { color: var(--papel); }
.prenda.e-logro .pp, .prenda.e-rango .pp, .prenda.e-estante .pp { color: var(--muy-tenue); }
.prenda.e-logro .mini, .prenda.e-rango .mini, .prenda.e-estante .mini { filter: grayscale(.65) brightness(.7); }
.prenda.e-apoyo .pp { font-weight: 600; background: var(--apoyo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r-gratis { --rc: rgba(233, 220, 192, .22); } .r-comun { --rc: var(--comun); } .r-rara { --rc: var(--rara); } .r-epica { --rc: var(--epica); } .r-leyenda { --rc: var(--leyenda); } .r-logro { --rc: var(--logro); }
/* lo exclusivo (apoyar al canal) se nota: su franja y su brillo */
.prenda.r-apoyo { border-top-color: transparent; }
.prenda.r-apoyo::before { content: ''; position: absolute; left: -1px; right: -1px; top: -3px; height: 3px; border-radius: 4px 4px 0 0; background: var(--apoyo); }
.prenda.r-apoyo .mini { box-shadow: inset 0 0 0 1px rgba(255, 95, 162, .35), inset 0 0 22px rgba(145, 71, 255, .3); }
.prenda .corazon { position: absolute; top: 3px; right: 6px; font-size: 17px; color: #ff6b8a; text-shadow: 0 1px 3px #000; display: none; }
.prenda.marcada .corazon { display: block; }
.accion { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: #100c09; box-shadow: 0 -10px 24px rgba(0, 0, 0, .55); border-radius: 0 0 6px 6px; }
.accion-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.accion-txt b { font: 19px/1.2 var(--maquina); color: var(--papel); font-weight: normal; }
.accion-txt span { font-size: 14px; color: var(--tenue); }
.aAviso:empty { display: none; }
.accion-txt .aAviso { margin-top: 2px; color: var(--papel); }
.accion-txt .aAviso.ok { color: var(--enfermo); }
.accion-txt .aAviso.mal { color: #ff7a6b; }
.accion-bot { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
button.pri { font: 17px var(--maquina); letter-spacing: 1px; color: var(--papel); background: linear-gradient(180deg, #7d0b0b, #4a0606); border: 2px solid var(--sangre-viva);
  border-radius: 4px; padding: 8px 16px; min-height: 48px; cursor: pointer; touch-action: manipulation; }
button.pri:disabled { opacity: .5; cursor: default; }
button.pri.confirmar { background: linear-gradient(180deg, #7a5e10, #3f2e05); border-color: var(--oro); box-shadow: 0 0 18px rgba(226, 182, 76, .35); }
button.sec { font: 15px var(--texto); color: var(--papel); background: transparent; border: 1px solid var(--linea2); border-radius: 4px; padding: 8px 14px; min-height: 48px;
  cursor: pointer; touch-action: manipulation; }
button.sec[aria-pressed="true"] { color: #ff9db0; border-color: #ff6b8a; }
button.sec:disabled { opacity: .5; }
/* en el móvil: los encuadres en columna (la cabeza queda libre), «Volver a lo mío» junto a PROBANDO y la barra de comprar en dos filas */
@media (max-width: 559px) {
  .encuadres { flex-direction: column; }
  .encuadres button { min-width: 74px; }
  .volverEsc { display: inline-flex; }
  #aVolver { display: none !important; }
  .tProbando span { letter-spacing: 2px; font-size: 15px; }
  .accion-txt:has(.aAviso:not(:empty)) #aDetalle { display: none; }
  .accion-bot { flex: 1 1 100%; flex-wrap: nowrap; }
  .accion-bot .sec { flex: none; width: 50px; padding: 0; font-size: 21px; }
  .accion-bot .sec .largo { display: none; }
  .accion-bot .pri { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 6px 10px; }
}
@media (min-width: 560px) {
  .tRango { flex-direction: row; align-items: baseline; gap: 6px; }
  .tRango span::before { content: '· '; }
}
/* el móvil en horizontal (poco alto): lado a lado, el muñeco a la izquierda y la tienda a la derecha */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 879px) {
  body.en-muneco main { max-width: none; }
  .taller { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .escenario { height: calc(100vh - 16px); max-height: 440px; min-height: 220px; border-bottom: 0; border-right: 1px solid var(--linea); border-radius: 6px 0 0 6px; }
  .huecos { top: 0; }
  .encuadres { flex-direction: column; }
  .encuadres button { min-width: 74px; }
  .volverEsc { display: inline-flex; }
  #aVolver { display: none !important; }
  .accion-bot .sec .largo { display: none; }
  .accion-bot .sec { width: 50px; padding: 0; font-size: 21px; }
}
/* en el ordenador, lado a lado y de alto fijo, como el probador (la rejilla se desplaza por dentro) */
@media (min-width: 880px) {
  .taller { --alto-d: clamp(520px, calc(100vh - 200px), 680px); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .escenario { position: relative; top: auto; height: var(--alto-d); border-bottom: 0; border-right: 1px solid var(--linea); border-radius: 6px 0 0 6px; }
  .tienda { height: var(--alto-d); }
  .huecos { position: static; flex-wrap: wrap; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; border-radius: 0 6px 0 0; }
  .rejilla { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); scrollbar-width: thin; scrollbar-color: #3a2a20 transparent; }
  .accion { position: static; box-shadow: none; border-radius: 0 0 6px 0; }
}
@media (min-width: 700px) {
  .pTabs { flex: 0 1 auto; }
  .pestana { flex: none; padding: 0 26px; }
}

/* ---------- la tarjeta del final de la partida ---------- */
.tarjetaFondo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(5, 3, 2, .74); cursor: pointer; animation: entra .25s ease-out; }
.tarjeta { position: relative; width: 100%; max-width: 360px; display: grid; gap: 10px; padding: 22px 18px 18px; overflow: hidden; border: 2px solid #2a201a; border-radius: 26px;
  background: radial-gradient(120% 80% at 50% 0%, #1c130d 0%, #0a0806 60%); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.tjTit { font-family: var(--maquina); font-size: 13px; letter-spacing: 3px; color: var(--sangre-viva); text-align: center; }
.tarjetaFondo.gana .tjTit { color: var(--oro); }
.tjN { font-family: var(--maquina); font-size: 54px; text-align: center; line-height: 1; text-shadow: 2px 3px 0 #000; }
.tjN small { display: block; font-size: 14px; color: var(--tenue); letter-spacing: 3px; margin-top: 6px; text-shadow: none; }
.tjEst { justify-self: center; font: 15px var(--maquina); color: var(--oro); border: 1px solid var(--oro); padding: 2px 10px; border-radius: 3px; letter-spacing: 1px; }
.tjLineas { list-style: none; margin: 0; padding: 0; font-size: 15px; display: grid; gap: 3px; }
.tjLineas li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--linea); padding: 3px 0; color: var(--tenue); }
.tjLineas li b { font-weight: normal; color: var(--papel); font-variant-numeric: tabular-nums; }
.tjPie { font-size: 15px; color: var(--tenue); text-align: center; border-top: 1px solid var(--linea); padding-top: 8px; }
.tjPie:empty { display: none; }
.tjPie b { color: var(--oro); }
.tjExtra:empty { display: none; }
.tjExtra p { margin: 4px 0 0; text-align: center; font-size: 15px; }
.tjRango { font-family: var(--maquina); color: var(--enfermo); }
.tjLogros { color: var(--papel); }
.tjBot { display: flex; gap: 8px; margin-top: 4px; }
.tjBot button { flex: 1 1 0; }
.tjTiempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(233, 220, 192, .08); }
.tjTiempo span { display: block; height: 100%; width: 100%; background: var(--sangre-viva); transform-origin: left; }
.tjTiempo span.corre { animation: vacia 20s linear forwards; }
@keyframes vacia { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* lo que se desbloquea apoyando al canal */
.tallerAviso { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 12px); transform: translateX(-50%); z-index: 61; width: max-content; max-width: min(92vw, 460px);
  padding: 12px 18px; border: 1px solid var(--oro); border-radius: 6px; background: rgba(22, 15, 6, .97); color: var(--papel); font: 18px/1.3 var(--maquina);
  text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 24px rgba(226, 182, 76, .25); cursor: pointer; animation: entra .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .tjTiempo span.corre { animation: none; } }

/* ---------- tres pestañas (JUGAR, TU MUÑECO y LEADERBOARD): en el móvil caben a lo ancho, cada una al menos lo que mide su nombre ---------- */
/* (con la letra del sistema agrandada, antes bajan a otra fila que desbordar la pantalla) */
.pTabs { flex-wrap: wrap; }
.pestana { min-width: max-content; white-space: nowrap; }
@media (max-width: 699px) { .pestana { padding: 0 8px; font-size: clamp(13px, 4vw, 16px); letter-spacing: 1px; } }
@media (max-width: 359px) { .pTabs { gap: 4px; } .pestana { padding: 0 5px; letter-spacing: .5px; } }
#vuelve { margin: 12px 0 0; }   /* fuera de las pestañas: vale para TU MUÑECO y para LEADERBOARD */

/* ---------- el podio del final de la partida, en JUGAR (para todos) ---------- */
.podio { position: relative; margin: 0 0 14px; padding: 12px 12px 10px; border: 1px solid var(--linea2); border-top: 3px solid var(--oro); border-radius: 4px;
  background: linear-gradient(180deg, rgba(226, 182, 76, .08), rgba(0, 0, 0, .32)); animation: entra .25s ease-out; }
.poCab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-right: 40px; }
.poTit { margin: 0; font: normal 21px var(--maquina); letter-spacing: 3px; color: var(--oro); text-shadow: 0 0 14px rgba(226, 182, 76, .35), 2px 2px 0 #000; }
.poSub { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muy-tenue); }
.poCerrar { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; font: 26px/1 var(--texto); color: var(--tenue);
  background: none; border: 0; border-radius: 4px; cursor: pointer; touch-action: manipulation; }
.poCerrar:hover { color: var(--papel); }
.poCerrar:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; }
.poLista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.poLista li { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 4px 10px 4px 4px; border: 1px solid var(--linea); border-radius: 3px; background: #15110d; }
.poP { flex: none; min-width: 2.4em; font: 21px var(--maquina); text-align: center; color: var(--tenue); white-space: nowrap; }
.poN { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.poNn { font: 18px var(--maquina); color: var(--papel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poN small { font-size: 12px; letter-spacing: 1px; color: var(--tenue); }
.poN small.poTu { color: var(--sangre-viva); letter-spacing: 2px; text-transform: uppercase; }
.poG { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font: 17px var(--maquina); color: #fff3dc; }
.poC { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.poLista li.p1 { border-color: rgba(226, 182, 76, .5); background: rgba(226, 182, 76, .09); }
.poLista li.p1 .poP, .poLista li.p1 .poNn { color: var(--oro); }
.poLista li.p2 .poP { color: #d8d4cc; }
.poLista li.p3 .poP { color: #c98a52; }
.poLista li.tuya { box-shadow: inset 3px 0 0 var(--sangre-viva); }
.poGrada { margin: 8px 0 0; font-size: 14px; color: var(--tenue); }
.poTuyo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px dotted var(--linea2); font-size: 16px; }
#podioTuyoX { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#podioTuyoX .poC { font-family: var(--maquina); color: #fff3dc; }
.poTuyo .sec { min-height: 44px; padding: 6px 14px; }

/* ---------- las páginas públicas del Taller: /m/<login> y /clasificacion ---------- */
.pagina-taller main { max-width: 1040px; }
.pagina-taller .pie { max-width: 1040px; }
a.marca { text-decoration: none; }
.enlaceCab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: 15px var(--texto); color: var(--papel); text-decoration: none;
  border: 1px solid var(--linea2); border-radius: 4px; flex: none; }
.enlaceCab:hover, .enlaceCab:focus-visible { border-color: var(--sangre-viva); outline: none; }
.perfilM { display: grid; gap: 18px; padding: 16px 0 28px; }
.mEscenario { position: relative; height: clamp(320px, 56vh, 600px); border: 1px solid var(--linea2); border-radius: 6px;
  background: radial-gradient(55% 50% at 50% 40%, rgba(255, 214, 170, .09), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(120, 8, 8, .28), transparent 70%), #0c0907; }
.mEscenario canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; border-radius: inherit; }
.mEscenario canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--oro); }
.mCanal { margin: 0; font-size: 13px; letter-spacing: 3px; color: var(--muy-tenue); text-transform: uppercase; }
.mNombre { margin: 2px 0 0; font: normal clamp(34px, 9vw, 56px)/1.05 var(--maquina); color: var(--papel); overflow-wrap: anywhere; text-shadow: 2px 3px 0 #000; }
.mRango { margin: 8px 0 0; font: 20px var(--maquina); color: var(--oro); }
.mRango small { font: 14px var(--texto); color: var(--tenue); }
.mCifras { display: flex; gap: 10px; margin: 16px 0 0; }
.mCifras div { flex: 1 1 0; padding: 10px 14px; background: #15110d; border: 1px solid var(--linea); border-left: 3px solid var(--sangre-viva); border-radius: 3px; }
.mCifras dt { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--tenue); }
.mCifras dd { margin: 2px 0 0; font: 36px/1 var(--maquina); font-variant-numeric: tabular-nums; }
.mSub { margin: 22px 0 8px; font: normal 20px var(--maquina); color: var(--papel); }
.mChips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mChips li { font-size: 14px; padding: 4px 10px; border: 1px solid var(--linea); border-left: 3px solid var(--rc, var(--linea2)); background: #15110d; border-radius: 3px; }
.mChips li span { color: var(--tenue); }
.mChips li.nada, .mLogros li.nada { color: var(--tenue); border-left-color: var(--linea2); font-style: italic; }
.mLogros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.mLogros li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #15110d; border: 1px solid var(--linea); border-top: 3px solid var(--logro); border-radius: 4px; }
.mLogros li.nada { border-top-width: 1px; padding: 10px; }
.mLogros img { width: 48px; height: 48px; flex: none; border-radius: 3px; background: radial-gradient(circle at 50% 40%, #261d16, #0d0a08); }
.mLogros img:not([src]) { visibility: hidden; }
.mLogros .lT { display: flex; flex-direction: column; min-width: 0; }
.mLogros .lN { font-size: 15px; line-height: 1.2; }
.mLogros .lC { font-size: 12.5px; color: var(--tenue); line-height: 1.25; }
.mCompartir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 22px 0 0; padding: 10px 12px; border: 1px dashed var(--linea2); border-radius: 4px; }
.mUrl { font: 15px var(--maquina); color: var(--papel); overflow-wrap: anywhere; flex: 1 1 200px; user-select: all; }
.mEnlaces { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; font-size: 15px; }
.mEnlaces a { display: inline-flex; align-items: center; min-height: 44px; }
.tPanel .mEnlaces { justify-content: center; }
@media (min-width: 820px) {
  .perfilM { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .mEscenario { position: sticky; top: 12px; height: min(640px, calc(100vh - 24px)); }
  .perfilM .tPanel { grid-column: 1 / -1; }
}
.clasifM { padding: 18px 0 28px; max-width: 760px; margin: 0 auto; }
.cTit { margin: 0; font: normal clamp(34px, 10vw, 56px)/1 var(--maquina); letter-spacing: 3px; color: var(--sangre-viva); text-shadow: 0 0 22px rgba(200, 0, 0, .45), 2px 3px 0 #000; }
.cSub { margin: 8px 0 18px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--muy-tenue); }
.cEstado { color: var(--tenue); font-size: 17px; }
.tablaC { border: 1px solid var(--linea); border-radius: 4px; background: #120e0b; overflow-x: auto; }
.tablaC table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tablaC th { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--tenue); font-weight: normal; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea2); }
.tablaC td { padding: 0 12px; border-bottom: 1px dashed var(--linea); font-variant-numeric: tabular-nums; }
.tablaC tr:last-child td { border-bottom: 0; }
.tablaC .num { text-align: right; white-space: nowrap; width: 1%; }
.tablaC .cP { width: 1%; white-space: nowrap; color: var(--tenue); font-family: var(--maquina); }
.tablaC .cN a { display: flex; align-items: center; min-height: 46px; color: var(--papel); text-decoration: none; overflow-wrap: break-word; font-family: var(--maquina); font-size: 17px; }
.tablaC .corto { display: none; }
@media (max-width: 559px) {
  .tablaC .largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tablaC .corto { display: inline; }
  .tablaC th, .tablaC td { padding-left: 8px; padding-right: 8px; }
  .tablaC th { letter-spacing: 1px; }
  .tablaC .cN a { font-size: 16px; }
}
.tablaC .cN a:hover, .tablaC .cN a:focus-visible { color: var(--sangre-viva); text-decoration: underline; outline: none; }
.tablaC tr.top1 .cP, .tablaC tr.top1 .cN a { color: var(--oro); }
.tablaC tr.top2 .cP { color: #d8d4cc; } .tablaC tr.top3 .cP { color: #c98a52; }
.tablaC tr.top1 td { background: rgba(226, 182, 76, .07); }
.cNota { margin: 14px 0 0; font-size: 14px; color: var(--muy-tenue); }
/* la pestaña LEADERBOARD del mando: la misma tabla, con tu fila resaltada */
.tablaC tr.tuya td { background: rgba(212, 20, 31, .13); }
.tablaC tr.tuya td:first-child { box-shadow: inset 3px 0 0 var(--sangre-viva); }
.tablaC .tuTag { flex: none; margin-left: 8px; padding: 1px 6px; font: 11px var(--texto); letter-spacing: 2px; text-transform: uppercase; color: var(--sangre-viva);
  border: 1px solid var(--sangre-viva); border-radius: 3px; }
.cTuya { color: var(--tenue); }
.cTuya:empty { display: none; }

/* la página de privacidad (/privacidad) */
.legal { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.legal h2 { font-family: var(--maquina); font-weight: normal; font-size: 20px; letter-spacing: 1px; margin: 26px 0 8px; color: var(--papel); }
.legal ul { padding-left: 20px; line-height: 1.5; color: var(--tenue); }
.legal li { margin-bottom: 6px; }

/* /m/<login>: si no llegan /cargar.js o /m.js, a los 12 s se dice (m.js lo quita en cuanto arranca: body.listo) */
.sinCarga { visibility: hidden; animation: verTarde 0s 12s forwards; text-align: center; font: 16px var(--maquina); color: var(--tenue); margin: 24px 16px; }
body.listo .sinCarga { display: none; }
@keyframes verTarde { to { visibility: visible; } }