/* ============================================================
   ColaCon — hoja de estilos del arcade. Extraída del <style> del
   prototipo (colacon/cola-con.html) más las reglas del botón de
   disparo manual que antes inyectaba en caliente la capa de parches
   "COLA-CON 1.1" — aquí ya forman parte del diseño, no de un parche.

   ColaCon es una pantalla completa aparte del chrome de /app (es un
   arcade, no una sección más dentro del drawer) — por eso no usa los
   tokens --mode-villain/--mode-hero de app/assets/css/style.css, tiene
   su propia paleta oscura fija con color-scheme:dark. Un arcade con
   pantalla de "PAUSA"/"GAME OVER" en tema claro no es una experiencia
   mejor para nadie — ver memoria feedback_dark_light_modes: esta es la
   excepción explícita de "panel con fondo oscuro fijo necesita texto
   claro fijo", ya cumplida aquí de raíz.
   ============================================================ */
*{box-sizing:border-box}
[hidden]{display:none!important}
:root{
  color-scheme:dark;
  --bg:#100d21;
  --gold:#f7d774;
  --mint:#72edc4;
  --pink:#ff527f;
  --dim:#aea4c4;
  /* Dynamic Island / notch — la detección de colacon/index.php sube
     esto a 14/44/45px según el dispositivo, antes de pintar. Misma
     técnica que app/assets/css/style.css (--ios-header-extra). */
  --ios-header-extra:0px
}
html,body{
  margin:0;width:100%;height:100%;
  overscroll-behavior:none;
  /* Anti-zoom de iOS Safari. Safari IGNORA maximum-scale/user-scalable
     del viewport desde iOS 10, y touch-action:manipulation solo quita
     el doble toque, no el pellizco. Por eso:
     - html/body fijos y sin scroll: la página no puede "rebotar" ni
       desplazarse aunque el visual viewport intente moverse;
     - touch-action:none en la raíz: ningún gesto nativo (pellizco,
       pan) salvo en los contenedores con scroll, que declaran pan-y;
     - sin selección ni menú de mantener pulsado (lupa, "guardar
       imagen"), que en iOS también desplazan la vista;
     - y colacon/assets/nozoom.js bloquea gesturestart/gesturechange
       (el pellizco propietario de Safari) y el doble toque. */
  position:fixed;inset:0;overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;text-size-adjust:100%
}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
body{
  background:#090711;color:#fff6dd;
  font:14px ui-monospace,SFMono-Regular,Consolas,monospace
}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{
  outline:3px solid var(--mint);outline-offset:3px
}
button{
  border:1px solid #665281;
  border-bottom:4px solid #090711;
  background:#312447;color:inherit;
  border-radius:7px;padding:12px 16px
}
button:active{
  transform:translateY(2px);border-bottom-width:2px
}
#app{
  max-width:1080px;margin:auto;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding-top:calc(env(safe-area-inset-top,0px) + var(--ios-header-extra,0px))
}
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid #3a2c50;gap:8px
}
.brand{
  font-weight:900;letter-spacing:2px;color:var(--gold)
}
.brand small{
  color:var(--dim);font-size:9px;letter-spacing:2px;
  display:block;margin-top:3px
}
.tools{display:flex;gap:6px}
.tools button{font-size:11px;padding:7px 9px}
#hud{
  display:grid;grid-template-columns:1.15fr 1fr 1fr;
  gap:14px;padding:10px 14px;background:#161124
}
.label{color:var(--dim);font-size:9px;letter-spacing:1px}
.value{font-size:16px;font-weight:bold;margin-top:3px}
.right{text-align:right}
.health{
  height:6px;background:#442a43;border-radius:4px;
  overflow:hidden;margin-top:5px
}
.health i{
  display:block;height:100%;background:var(--mint);
  width:100%;transition:width .12s
}
#arena{
  flex:1;min-height:150px;position:relative;
  overflow:hidden;background:var(--bg)
}
canvas{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;touch-action:none
}
#arena:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,#0000,#0000 3px,#00000018 4px
  );
  z-index:1
}
#veil{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:14px;background:#0b071cd9;z-index:2;overflow:auto;
  overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch
}
.card{
  /* --card-pad lo usan también .screen-back (margen negativo, ancho y
     top sticky): si el padding cambia en móvil y el botón no, sobresale
     y el card se puede arrastrar de lado (bug de Favoritos en iPhone). */
  --card-pad:24px;
  width:min(100%,460px);max-height:100%;overflow:auto;overflow-x:hidden;
  touch-action:pan-y;overscroll-behavior:contain;
  padding:var(--card-pad);background:#211932;
  border:1px solid #70548b;box-shadow:0 7px 0 #090711;
  text-align:center;border-radius:9px
}
.eyebrow{color:var(--mint);font-size:10px;letter-spacing:2px}
h1{
  font-size:clamp(38px,7vw,66px);letter-spacing:-3px;
  line-height:1;margin:13px 0;color:var(--gold);
  text-shadow:3px 3px 0 #ad4975,6px 6px 0 #090711
}
h2{
  font-size:25px;line-height:1.1;margin:12px 0;
  color:var(--gold)
}
p{
  line-height:1.55;color:#cec3df;
  margin:12px 0;font-size:12px
}
.tag{
  display:inline-block;padding:6px 9px;
  background:#352348;color:#e2c3fc;font-size:10px;
  border:1px solid #775190;transform:rotate(-3deg)
}
label{
  display:block;font-size:10px;color:var(--dim);
  letter-spacing:1px;text-align:left;margin:17px 0 7px
}
input{
  width:100%;padding:12px;background:#110d1e;
  border:1px solid #77628f;border-radius:5px;
  color:white;font-size:16px
}
.primary{
  width:100%;margin-top:13px;background:var(--gold);
  border-color:#997536;border-bottom-color:#826020;
  color:#25182a;font-weight:900;letter-spacing:1px
}
.muted{color:var(--dim);font-size:10px}
.legend{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-top:14px;text-align:left;font-size:10px;color:#ded1ec
}
.legend span{
  background:#171123;padding:10px;border-radius:4px;line-height:1.5
}
.legend b{color:var(--gold)}
.choices{display:grid;gap:9px;margin-top:18px}
.choices button{text-align:left}
.choices b{color:var(--gold);display:block}
.choices small{
  display:block;color:#c8bdd7;margin-top:5px;line-height:1.4
}
.result{
  font-size:39px;color:var(--mint);
  font-weight:900;margin:16px 0 5px
}
.endbuttons{display:flex;gap:8px;margin-top:15px}
.endbuttons button{flex:1}

/* Captura de email al morir — SOLO para invitados, SOLO tras ver su
   resultado, nunca antes de jugar. Ver plan sección Invitados. */
#claimBox{
  margin-top:18px;padding-top:16px;border-top:1px dashed #4a3a63;text-align:left
}
#claimBox .muted{margin-bottom:8px}
#claimBox label{display:flex;align-items:flex-start;gap:8px;font-size:10px;margin-top:12px;cursor:pointer}
#claimBox label input[type=checkbox]{width:auto;margin-top:2px;flex:0 0 auto}
#claimBox button{margin-top:10px}
#claimMsg{margin-top:8px;font-size:11px;color:var(--mint)}
#claimMsg.error{color:var(--pink)}

#controls{
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;background:#171123;border-top:1px solid #3c2b51;
  user-select:none
}
#stick{
  position:relative;width:92px;height:92px;flex:0 0 92px;
  border-radius:50%;background:#211830;
  border:2px solid #654881;touch-action:none
}
#stick:before,#stick:after{
  content:"";position:absolute;background:#604877;opacity:.5
}
#stick:before{width:2px;height:66px;left:43px;top:11px}
#stick:after{height:2px;width:66px;top:43px;left:11px}
#knob{
  position:absolute;z-index:1;width:38px;height:38px;
  left:25px;top:25px;border:2px solid #bc99dd;
  border-radius:50%;background:#6c4695;
  box-shadow:0 4px 0 #0e0a18;pointer-events:none
}
#hint{
  color:var(--dim);font-size:10px;line-height:1.8;
  text-align:center;padding:0 4px
}
.actions{
  display:grid;grid-template-columns:72px 102px;
  grid-template-rows:44px 44px;gap:7px
}
.actions button{
  width:72px;height:44px;font-size:9px;
  font-weight:bold;padding:3px;
  border-color:#725984;background:#322342;touch-action:none
}
.actions small{
  display:block;font-size:8px;color:#bfb0d0;margin-top:3px
}
.actions button:disabled{opacity:.55;cursor:default}
#dash{grid-column:1;grid-row:1}
#pulse{grid-column:1;grid-row:2;color:var(--gold)}
#shoot{
  grid-column:2;grid-row:1 / span 2;width:102px;height:95px;
  background:var(--gold);border-color:#b88b36;border-bottom-color:#826020;
  color:#25182a;font-size:13px
}
#shoot small{color:#62482d;font-size:9px}
#shoot:disabled{opacity:.62}

@media(max-width:560px){
  #hint{display:none}
  #controls{gap:8px}
}
@media(max-width:520px){
  .card{--card-pad:18px}
  header{padding:8px 11px}
  #hud{padding:8px 11px;gap:8px}
  .value{font-size:14px}
  #hint{max-width:84px;font-size:9px}
  .actions{gap:7px}
  #controls{padding-left:13px;padding-right:13px}
  .brand{font-size:13px}
  .tools button{font-size:10px}
}
@media(max-height:530px) and (orientation:landscape){
  header{padding:5px 10px}
  .brand small{display:none}
  #hud{padding:5px 10px}
  .label{font-size:8px}
  .value{font-size:12px}
  #controls{
    position:absolute;bottom:10px;left:18px;right:18px;
    background:none;border:0;pointer-events:none;
    padding:0;z-index:1
  }
  #controls>*{pointer-events:auto}
  #hint{display:none}
  .actions button{background:#322342de}
  #stick{
    width:76px;height:76px;flex-basis:76px;
    background:#211830ba
  }
  #knob{left:17px;top:17px}
  #stick:before{left:35px;top:9px;height:54px}
  #stick:after{top:35px;left:9px;width:54px}
  .card{padding:16px}
  .legend{display:none}
}
@media(prefers-reduced-motion:reduce){
  button:active{transform:none}
  .health i{transition:none}
}

/* ============================================================
   Pantalla del Pase de Batalla — rejilla animada de las 10 skins
   (colacon/index.php #pass) y celebración de "nivel desbloqueado"
   (#levelUp). Mismo lenguaje visual que .card, más ancha porque
   una rejilla de 10 no cabe cómoda en los 460px del resto de tarjetas.
   ============================================================ */
.pass-card{width:min(100%,680px)}

.skin-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;margin-top:16px
}
.skin-card{
  background:#171123;border:1px solid #382a4d;border-radius:9px;
  padding:8px 6px;position:relative;display:flex;flex-direction:column;
  align-items:center;transition:transform .15s,border-color .15s
}
.skin-card:not(.locked):hover{transform:translateY(-3px);border-color:var(--mint)}
.skin-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px #f7d77455}
.skin-card canvas{
  width:90px;height:100px;image-rendering:pixelated;
  background:radial-gradient(circle at center 75%,#251c3a 0%,#130d21 70%);
  border-radius:6px;border:1px solid #2d2242
}
.skin-card.locked canvas{filter:grayscale(1)}
.skin-tier{
  position:absolute;top:6px;left:6px;background:#000;
  border:1px solid var(--gold);color:var(--gold);
  font-size:8px;font-weight:bold;padding:2px 5px;border-radius:4px
}
.skin-title{font-size:10px;font-weight:bold;color:var(--gold);margin-top:6px;text-align:center;line-height:1.3}
.skin-card.locked .skin-title{color:var(--dim)}
.skin-lock{font-size:9px;color:var(--dim);margin-top:4px;text-align:center;line-height:1.4}

#levelUp{animation:levelUpIn .4s ease-out}
#levelUp.reduced-motion{animation:none}
@keyframes levelUpIn{
  from{opacity:0;transform:scale(.85)}
  to{opacity:1;transform:scale(1)}
}
#levelUpNumber{
  animation:levelUpPulse 1.6s ease-in-out infinite;
  text-shadow:0 0 16px #f7d77488,3px 3px 0 #ad4975
}
#levelUp.reduced-motion #levelUpNumber{animation:none}
@keyframes levelUpPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* ── Navegación del menú: pase / favoritos, y volver desde sus pantallas ── */
.menu-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.ghost-action{
  width:100%;background:#1c1530;border-color:#4a3a63;
  font-size:11px;letter-spacing:.5px;display:flex;
  align-items:center;justify-content:center;gap:6px
}
.ghost-action span{color:var(--dim);font-weight:normal}
.gold-action{border-color:#997536;color:var(--gold)}
.gold-action span{color:#d9b869}
/* .ghost-action en un <a> (enlace "Volver a Cosplyx"): el resto de botones
   de .menu-actions son <button> y heredan borde/padding/radio de la regla
   genérica "button{...}" más arriba — un enlace no la hereda, así que se
   repite aquí lo mínimo para que se vea idéntico. */
a.ghost-action{
  text-decoration:none;cursor:pointer;touch-action:manipulation;color:inherit;
  border:1px solid #4a3a63;border-bottom:4px solid #090711;
  border-radius:7px;padding:12px 16px
}
a.ghost-action:active{transform:translateY(2px);border-bottom-width:2px}

.screen-back{
  position:sticky;top:calc(-1 * var(--card-pad,24px));
  margin:calc(-1 * var(--card-pad,24px)) calc(-1 * var(--card-pad,24px)) 14px;
  width:calc(100% + 2 * var(--card-pad,24px));border-radius:0;
  background:#171123;border-left:0;border-right:0;border-top:0;
  font-size:10px;text-align:left;padding-left:18px
}

/* ── Resumen del pase (estilo "temporada" de Fortnite/Warzone) ── */
.pass-headline{
  display:flex;align-items:center;gap:16px;margin-top:14px;
  flex-wrap:wrap
}
.pass-headline-stat{
  background:#171123;border:1px solid #382a4d;border-radius:8px;
  padding:10px 16px;text-align:center;flex:0 0 auto
}
.pass-headline-value{font-size:22px;font-weight:900;color:var(--gold)}
.pass-headline-label{font-size:8px;color:var(--dim);letter-spacing:1px;margin-top:2px}

.next-reward{
  display:flex;align-items:center;gap:12px;margin-top:16px;
  background:linear-gradient(135deg,#2a1f42,#1c1530);
  border:1px solid #7440a3;border-radius:9px;padding:10px 14px;
  text-align:left
}
.next-reward canvas{
  width:70px;height:80px;image-rendering:pixelated;flex:0 0 auto;
  background:radial-gradient(circle at center 75%,#251c3a 0%,#130d21 70%);
  border-radius:6px;border:1px solid #2d2242
}
.next-reward-title{font-weight:bold;color:var(--gold);font-size:13px;margin-top:2px}

/* ── Favoritos ── */
#favoritesList{margin-top:16px;text-align:left;touch-action:pan-y;max-width:100%;overflow-x:hidden}
.fav-row{
  display:flex;align-items:center;gap:10px;padding:10px 8px;
  border-bottom:1px solid #2d2242
}
.fav-row:last-child{border-bottom:0}
.fav-avatar{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid #4a3a63;flex:0 0 auto;background:#1c1530
}
.fav-info{flex:1;min-width:0}
.fav-name{font-size:12px;font-weight:bold;color:#fff6dd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-status{font-size:10px;color:var(--dim);margin-top:2px}
.fav-score{text-align:right;color:var(--gold);font-weight:bold;font-size:14px;flex:0 0 auto}
.fav-score small{display:block;color:var(--dim);font-size:7px;font-weight:normal;letter-spacing:.5px;margin-top:2px}

/* ── Top jugadores ── (filas con el mismo estilo que Favoritos) */
.top-tabs{display:flex;gap:6px;margin-top:14px}
.top-tabs button{flex:1;font-size:10px;padding:9px 4px;border-bottom-width:3px}
.top-tabs button.on{background:var(--gold);color:#25182a;border-color:#997536}
#topList{margin-top:12px;text-align:left;touch-action:pan-y;max-width:100%;overflow-x:hidden}
.fav-row.me{background:#f7d77414;border-radius:8px}
.top-rank{flex:0 0 28px;text-align:center;font-weight:bold;color:#ded1ec;font-size:13px}
.top-star{color:var(--gold)}
.top-me{font-size:8px;color:#25182a;background:var(--gold);border-radius:3px;padding:1px 4px;vertical-align:1px}
.top-gap{text-align:center;color:var(--dim);padding:4px 0}