/* ══════════════════════════════════════════════════════════════════════════
   HAKEMBO A PLATA — estilos propios ENCIMA del sistema visual de Hakembo
   (/hakembo/app.css: mismos colores, manos, escenario y animaciones).
   Regla de marca BP STUDIO (26/10/2026): TODO en Lexend Bold (700 como mínimo).
   Mobile-first: barra inferior fija como una app y nunca scroll lateral.
   ══════════════════════════════════════════════════════════════════════════ */
html,body{overflow-x:hidden;max-width:100%}
body *{font-weight:700!important}
h1,.vs,.cartel,.hp-nom b,.hp-pts b,.hp-fin h1,.hp-premio b,.hp-cuenta,.rank .pts,.rank .pos,.ingreso .nombre,.hp-hero h1,.mano .oculta,.etq,.hp-marcador .num{font-weight:800!important}
:root{--plata:#e9eef8;--plata2:#9fb0cc;--oro1:#ffe28a;--oro2:#ffb938}

/* ── Logo animado: emblema de Hakembo + «HAKEMBO» + «A PLATA» ────────────── */
.hp-logo{display:flex;align-items:center;gap:10px;min-width:0}
.hp-logo img{width:40px;height:40px;border-radius:12px;background:#fff;padding:3px;flex:none;object-fit:contain;
  box-shadow:0 6px 16px -6px rgba(0,80,255,.6);animation:hpFlota 4.2s ease-in-out infinite}
.hp-nom{display:flex;flex-direction:column;line-height:1;min-width:0}
.hp-nom b{font-size:17px;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.hp-nom span{position:relative;overflow:hidden;align-self:flex-start;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:10px;letter-spacing:.24em;
  color:#2a1800;background:linear-gradient(180deg,var(--oro1),var(--oro2));box-shadow:0 0 14px rgba(255,190,60,.45);white-space:nowrap}
.hp-nom span::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  transform:translateX(-120%);animation:hpBrillo 3.6s ease-in-out infinite}
.hp-logo.grande{flex-direction:column;gap:14px;text-align:center}
.hp-logo.grande img{width:min(42vw,170px);height:auto;aspect-ratio:1;border-radius:32px;padding:10px;filter:drop-shadow(0 20px 40px rgba(31,107,255,.45))}
.hp-logo.grande .hp-nom{align-items:center}
.hp-logo.grande .hp-nom b{font-size:clamp(30px,9vw,44px);letter-spacing:-.02em}
.hp-logo.grande .hp-nom span{align-self:center;font-size:clamp(13px,3.6vw,16px);padding:5px 14px;margin-top:8px;letter-spacing:.32em}
@keyframes hpFlota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes hpBrillo{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@media (max-width:360px){.hp-nom b{font-size:15px}}
.cargando{min-height:100vh;display:grid;place-items:center;padding:24px}
.hp-marca{width:min(62vw,250px);height:auto;filter:drop-shadow(0 20px 40px rgba(31,107,255,.45)) drop-shadow(0 0 30px rgba(255,190,60,.25));animation:hpFlotaG 4.6s ease-in-out infinite}
@keyframes hpFlotaG{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}

/* ── Héroe del inicio ─────────────────────────────────────────────────────── */
.hp-hero{position:relative;overflow:hidden;border-radius:var(--r2);padding:20px 18px 18px;min-height:230px;
  background:radial-gradient(420px 240px at 92% 8%,rgba(255,200,80,.30),transparent 60%),radial-gradient(380px 220px at 0% 100%,rgba(34,211,255,.22),transparent 60%),
  linear-gradient(135deg,#0c2d77 0%,#071a45 60%,#050f2b 100%);border:1px solid rgba(255,207,90,.35);box-shadow:0 0 0 1px rgba(255,207,90,.12),0 18px 40px -16px rgba(255,170,40,.35)}
.hp-hero .chips{display:flex;gap:6px;flex-wrap:wrap;max-width:62%}
.hp-hero h1{font-size:clamp(24px,7vw,34px);line-height:1.05;margin:12px 0 6px;max-width:62%}
.hp-hero h1 em{font-style:normal;background:linear-gradient(180deg,var(--oro1),var(--oro2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-hero p{color:var(--muted);font-size:13px;max-width:58%;margin-bottom:14px}
.hp-hero .btn{position:relative;z-index:1;height:52px;font-size:16px;padding:0 22px}
.hp-hero .manos{position:absolute;right:-20px;bottom:-6px;display:flex;pointer-events:none}
.hp-hero .manos img{width:clamp(96px,30vw,150px);height:auto;aspect-ratio:1;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%)}
.hp-hero .manos img:first-child{animation:hpPuno 2.4s ease-in-out infinite}
.hp-hero .manos img+img{margin-left:-38px;transform:scaleX(-1);animation:hpPunoR 2.4s ease-in-out infinite .2s}
@keyframes hpPuno{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-10px) rotate(-8deg)}}
@keyframes hpPunoR{0%,100%{transform:scaleX(-1) translateY(0) rotate(0)}40%{transform:scaleX(-1) translateY(-10px) rotate(-8deg)}}

/* Reglas en 4 fichas */
.hp-reglas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.hp-regla{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:rgba(7,24,58,.9);border:1px solid var(--line);min-width:0}
.hp-regla i{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:15px;color:#2a1800;background:linear-gradient(180deg,var(--oro1),var(--oro2))}
.hp-regla i.az{background:var(--grad);color:#021032}
.hp-regla b{display:block;font-size:13px;line-height:1.2}
.hp-regla small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.25}

/* ── Ítems de mesas: entrada y premio ─────────────────────────────────────── */
.item .der .premio{display:block;font-size:11px;color:var(--gold);margin-top:2px;white-space:nowrap}
.item .t{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hp-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,207,90,.12);color:var(--gold);border:1px solid rgba(255,207,90,.3);white-space:nowrap}
.hp-pill.az{background:rgba(34,211,255,.1);color:var(--cyan);border-color:rgba(34,211,255,.3)}
.item .ico.oro{background:linear-gradient(180deg,var(--oro1),var(--oro2));color:#241600}
.item .ico svg{width:24px;height:24px}

/* Detalle (hoja) de una mesa / desafío */
.hp-trato{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.hp-trato div{padding:14px 12px;border-radius:16px;background:rgba(7,24,58,.9);border:1px solid var(--line);text-align:center;min-width:0}
.hp-trato small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.hp-trato b{display:block;font-size:clamp(18px,5.4vw,24px);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-trato .oro b{color:var(--gold)}
.hp-trato .oro{border-color:rgba(255,207,90,.4);background:radial-gradient(160px 90px at 50% 0%,rgba(255,200,80,.18),transparent 70%),rgba(7,24,58,.9)}

/* Selector de formato (a 3 / a 5) */
.hp-formatos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hp-formatos button{padding:12px 8px;border-radius:14px;background:rgba(7,24,58,.9);border:1px solid var(--line2);text-align:center}
.hp-formatos button b{display:block;font-size:22px}
.hp-formatos button small{display:block;font-size:11px;color:var(--muted)}
.hp-formatos button.on{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,207,90,.4),0 10px 24px -12px rgba(255,190,60,.6)}
.hp-formatos button.on b{color:var(--gold)}
.hp-interruptor{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:14px;background:rgba(7,24,58,.9);border:1px solid var(--line);margin-bottom:12px}
.hp-interruptor input{width:22px;height:22px;accent-color:#ffb938;flex:none}

/* ── Partido en vivo ──────────────────────────────────────────────────────── */
.hp-partido .cabeza{margin-bottom:10px}
.hp-cab{flex:1;min-width:0}
.hp-cab h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-cab p{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-marcador{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:10px 12px;border-radius:18px;
  background:linear-gradient(180deg,rgba(12,36,86,.95),rgba(7,24,58,.95));border:1px solid var(--line2);margin-bottom:10px}
.hp-marcador .jug{display:flex;align-items:center;gap:8px;min-width:0}
.hp-marcador .jug.rv{flex-direction:row-reverse;text-align:right}
.hp-marcador .jug img{width:36px;height:36px;border-radius:50%;border:2px solid currentColor;flex:none}
.hp-marcador .jug.yo{color:var(--yo)} .hp-marcador .jug.rv{color:var(--rival)}
.hp-marcador .jug .n{min-width:0}
.hp-marcador .jug .n b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12.5px;line-height:1.15;color:var(--text);overflow:hidden;overflow-wrap:anywhere}
.hp-marcador .jug .marcador{justify-content:flex-start;margin-top:4px;flex-wrap:wrap}
.hp-marcador .jug.rv .marcador{justify-content:flex-end}
.hp-marcador .centro{text-align:center}
.hp-marcador .num{font-size:30px;line-height:1;letter-spacing:.02em;white-space:nowrap}
.hp-marcador .num .yo{color:var(--yo)} .hp-marcador .num .rv{color:var(--rival)} .hp-marcador .num .g{color:var(--dim);margin:0 4px}
.hp-marcador .centro small{display:block;font-size:10px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-top:4px;white-space:nowrap}
.hp-premiochip{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 10px;padding:8px 14px;border-radius:999px;width:max-content;max-width:100%;
  background:rgba(255,207,90,.1);border:1px solid rgba(255,207,90,.35);color:var(--gold);font-size:13px;white-space:nowrap}
.hp-premiochip b{font-size:15px;color:var(--gold)}

.hp-cuenta{position:relative;width:64px;height:64px;margin:-4px auto 6px;display:grid;place-items:center;font-size:22px}
.hp-cuenta svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hp-cuenta circle{fill:none;stroke-width:6}
.hp-cuenta .f{stroke:rgba(159,179,217,.18)}
.hp-cuenta .p{stroke:url(#hpGrad);stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.hp-cuenta.urge{color:#ff8ea1;animation:hpLatido .5s ease-in-out infinite}
.hp-cuenta.urge .p{stroke:#ff4d6a}
@keyframes hpLatido{50%{transform:scale(1.08)}}
.hp-estado{text-align:center;font-size:13px;color:var(--muted);min-height:20px}
.hp-estado .ok{color:var(--ok)}
.hp-elegido{text-align:center;font-size:12px;color:var(--muted);margin-top:8px}
.gesto{min-height:44px}
.gesto.on{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,207,90,.5),0 10px 26px -10px rgba(255,190,60,.8)}
.gestos.bloqueado .gesto:not(.on){opacity:.45}
.escena{min-height:0}
.escena .duelo{padding-top:4px}
.escena .canto{z-index:3}
.hp-espera{text-align:center;padding:18px 14px}
.hp-espera .radar{position:relative;width:120px;height:120px;margin:4px auto 12px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(34,211,255,.18),transparent 70%)}
.hp-espera .radar::before,.hp-espera .radar::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,211,255,.45);animation:hpOnda 2s ease-out infinite}
.hp-espera .radar::after{animation-delay:1s}
.hp-espera .radar img{width:78px;height:78px;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 60%,transparent 71%);mask-image:radial-gradient(circle,#000 60%,transparent 71%);animation:hpPuno 2.4s ease-in-out infinite}
@keyframes hpOnda{from{transform:scale(.7);opacity:1}to{transform:scale(1.35);opacity:0}}

/* Fin del partido */
.hp-fin{text-align:center;padding:18px 14px}
.hp-fin h1{font-size:clamp(30px,9vw,42px);margin:8px 0 2px}
.hp-fin h1.ok{background:linear-gradient(180deg,var(--oro1),var(--oro2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-premio{margin:14px auto 6px;padding:16px;border-radius:20px;max-width:340px;background:radial-gradient(240px 120px at 50% 0%,rgba(255,200,80,.28),transparent 70%),rgba(7,24,58,.9);border:1px solid rgba(255,207,90,.45)}
.hp-premio small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hp-premio b{display:block;font-size:clamp(28px,9vw,38px);color:var(--gold);margin-top:4px;white-space:nowrap}
.hp-fin .marc{font-size:14px;color:var(--muted);margin-top:4px}
#fin-partida{margin-top:14px}

/* Torneo */
.hp-tor-cab{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,.9fr);gap:8px;margin-top:12px}
.hp-tor-cab div{padding:10px 6px;border-radius:14px;background:rgba(7,24,58,.9);border:1px solid var(--line);text-align:center;min-width:0}
.hp-tor-cab small{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.hp-tor-cab b{display:block;font-size:14px;margin-top:2px;line-height:1.2;overflow-wrap:anywhere}
.hp-tor-cab .oro b{color:var(--gold)}
.cuadro{max-width:100%}

/* Perfil */
.hp-toggles{display:grid;gap:8px}
.hp-hist{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(7,24,58,.9);border:1px solid var(--line)}
.hp-hist+.hp-hist{margin-top:6px}
.hp-hist .crece{flex:1;min-width:0}
.hp-hist .crece b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-hist .crece span{font-size:11px;color:var(--muted)}
.hp-hist .der{text-align:right;flex:none;font-size:13px}

/* Seguridad de diseño: nada se sale de la pantalla */
.vista,.card,.hoja,.pantalla{max-width:100%}
.hoja{overflow-x:hidden}
img{max-width:100%}
.kv dd{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){.hp-hero{min-height:260px;padding:28px}.hp-hero .manos img{width:180px}.hp-reglas{grid-template-columns:repeat(4,minmax(0,1fr))}}