/* ============================================================
   COLA-CON 2 — estilos. Parte 1: el CSS del prototipo
   (colacon2/colacon2.html) TAL CUAL. Parte 2 (al final): lo nuevo de la
   integración en Cosplyx — anti-zoom de iOS, identidad del jugador,
   Favoritos, Top, estado del envío y cuenta de invitado. Paleta oscura
   fija a propósito, igual que ColaCon 1 (un arcade no tiene modo claro).
   ============================================================ */
:root{color-scheme:dark;--gold:#f4d187;--purple:#b08bff;--paper:#fff9ed}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:#171029;color:var(--paper);font:15px/1.4 system-ui,-apple-system,Arial,sans-serif;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #f4d187;outline-offset:4px}
[hidden]{display:none!important}#scene{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
#menu{position:fixed;inset:0;overflow:auto;background:linear-gradient(90deg,#171029f7 0%,#171029dc 48%,#17102966);padding:clamp(22px,5vw,64px);display:flex;align-items:center}
.menu-content{max-width:1040px;width:100%;margin:auto;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#ddc9ff;font-weight:750}
h1{font-size:clamp(48px,7.5vw,104px);letter-spacing:-.075em;line-height:.85;margin:24px 0}h1 span{color:var(--gold)}
.tagline{font-size:22px;letter-spacing:-.03em;margin:24px 0 12px}.description{color:#c9bdd5;max-width:380px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.chips span{font-size:10px;border:1px solid #ffffff25;border-radius:20px;padding:6px 10px;color:#ddcee8;letter-spacing:.08em}
.selection-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:12px}.selection-title span{color:#b1a2c2}
.heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hero{background:#261b39d9;border:1px solid #ffffff16;border-radius:12px;padding:0 0 13px;overflow:hidden;text-align:left;transition:background .2s,border-color .2s,transform .2s}
.hero:hover{transform:translateY(-3px);background:#3a2953}.hero.selected{border-color:var(--gold);background:#44304c}
.hero canvas{width:100%;height:106px;display:block;background:radial-gradient(ellipse at 50% 130%,#9363bc55,transparent 70%)}.hero strong{display:block;font-size:11px;padding:0 10px}.hero small{display:block;color:#baaac9;font-size:9px;padding:3px 10px 0}
.primary{background:var(--gold);color:#261a32;font-weight:800;padding:14px 20px;border:0;border-radius:10px}.start{width:100%;margin-top:14px;display:flex;justify-content:space-between;align-items:center}
.instructions{font-size:11px;color:#c6b5d4;line-height:1.8;margin:14px 0 0}.version{font-size:10px;color:#a695b4;margin-top:22px}
#hud{position:fixed;inset:0;pointer-events:none;padding:18px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.hud-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.panel{background:#1b162bda;backdrop-filter:blur(8px);border:1px solid #ffffff22;border-radius:10px;padding:10px 14px;min-width:154px;box-shadow:0 8px 30px #0002}.hud-label{font-size:9px;letter-spacing:.14em;color:#c8b4df}.panel strong{font-size:16px;font-weight:800;display:block;margin:1px 0 5px}.health-track{height:4px;background:#ffffff20;border-radius:4px}.health-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .1s}.hud-right{text-align:right}
#pause{pointer-events:auto;position:absolute;top:18px;left:50%;transform:translateX(-50%);border:1px solid #ffffff44;border-radius:8px;background:#21172ccc;width:38px;height:38px}
#mission{position:absolute;left:50%;top:78px;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 4px #000;color:#f1e6ff;text-align:center}
#boss{position:absolute;top:104px;left:25%;width:50%;text-align:center;font-size:10px;letter-spacing:.16em;color:#ffceba}#boss .health-track{margin-top:7px}#bossFill{background:#ff825a}
#aim{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:20px;height:20px;border:1px solid #fff9;border-radius:50%;box-shadow:0 1px 4px #0004}#aim:after{content:"";position:absolute;left:7px;top:7px;width:4px;height:4px;background:white;border-radius:50%}#aim.locked{border-color:var(--gold);width:28px;height:28px}#aim.locked:after{left:11px;top:11px;background:var(--gold)}
#toast{position:absolute;bottom:30%;left:50%;transform:translateX(-50%);max-width:85%;text-align:center;font-size:12px;background:#1b162bdd;border:1px solid #ffffff22;border-radius:30px;padding:9px 16px;opacity:0;transition:opacity .15s;white-space:normal}
#controls{position:absolute;inset:0;pointer-events:none;user-select:none}
#joystick{position:absolute;left:max(26px,env(safe-area-inset-left));bottom:max(32px,env(safe-area-inset-bottom));width:126px;height:126px;border-radius:50%;border:1px solid #e9d7ff66;background:radial-gradient(circle,#fff1 0 32%,#21172c88 33%);box-shadow:inset 0 0 0 16px #fff03;pointer-events:auto;touch-action:none}
#joystick:before{content:"↑";position:absolute;left:56px;top:3px;color:#fff8}#joystick:after{content:"↶                 ↷";position:absolute;left:5px;top:51px;white-space:pre;color:#fff7;font-size:11px}
#knob{position:absolute;left:40px;top:40px;width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,#fae8b6,#c39751);border:2px solid #fff7;box-shadow:0 4px 14px #0005;z-index:1}
.control-caption{position:absolute;top:calc(100% + 8px);width:150%;left:-25%;text-align:center;font-size:8px;letter-spacing:.17em;color:#e0d3ef;text-shadow:0 1px 5px #000}
#fire{pointer-events:auto;position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(38px,env(safe-area-inset-bottom));width:96px;height:96px;border-radius:50%;background:#f3ce84eb;border:4px solid #fff4;box-shadow:0 0 0 6px #f5d29922,0 8px 30px #0005;color:#281c31;touch-action:none}
#fire:active{transform:scale(.95)}#fire svg{display:block;margin:auto;width:32px;height:32px}#fire b{font-size:9px;letter-spacing:.09em}
#overlay{position:fixed;inset:0;background:#110b23b8;backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.modal{max-width:490px;background:#241934;border:1px solid #dcc5fa33;border-radius:22px;padding:32px;text-align:center;box-shadow:0 30px 100px #0006}.modal h2{font-size:36px;line-height:1.05;letter-spacing:-.04em;margin:15px 0;color:var(--gold)}.modal p{color:#d3c2e0;font-size:14px}.modal .primary{width:100%;margin-top:15px}.secondary{border:0;background:none;color:#c9b7d9;font-size:12px;padding:12px}.reward{border:1px dashed #f4d18780;background:#f4d18708;padding:14px;margin:20px 0;font-weight:800;font-size:23px;border-radius:8px;color:var(--gold)}
#hit{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 120px #fa492899;opacity:0}
#audioToggle{position:fixed;z-index:12;bottom:10px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.04em;border:1px solid #ffffff33;border-radius:20px;background:#20162bdc;padding:6px 12px;color:#f4d187;touch-action:manipulation}
@media(max-width:700px){#menu{padding:22px}.menu-content{grid-template-columns:1fr;gap:22px;max-width:440px}h1{font-size:56px;margin:16px 0}.tagline{font-size:19px;margin:14px 0 5px}.description{font-size:12px;margin:0}.chips{display:none}.hero canvas{height:90px}.hero strong{font-size:10px}.hero small{font-size:8px}.version{display:none}.instructions{font-size:10px}.panel{min-width:126px;padding:9px 10px}.panel strong{font-size:13px}#hud{padding:12px}#pause{top:12px}#mission{top:76px;font-size:9px;width:80%}#joystick{width:112px;height:112px;left:22px;bottom:36px}#knob{left:33px;top:33px}#joystick:before{left:49px}#joystick:after{top:44px;content:"↶              ↷"}#fire{width:84px;height:84px;right:24px;bottom:45px}}
@media(max-height:520px) and (orientation:landscape){#menu{padding:20px 32px}.menu-content{grid-template-columns:.9fr 1.1fr;gap:24px;max-width:1000px}h1{font-size:54px;margin:16px 0}.tagline{font-size:18px}.description,.instructions{font-size:10px}.hero canvas{height:66px}.hero{padding-bottom:8px}.hero strong{font-size:9px}.hero small{font-size:8px}.chips,.version{display:none}.start{padding:10px 15px}.heroes{gap:7px}.selection-title{margin-bottom:8px}#mission{top:66px}#boss{top:89px}#joystick{width:104px;height:104px;bottom:25px}#knob{left:29px;top:29px}#joystick:before{left:45px}#joystick:after{top:40px;content:"↶            ↷"}#fire{width:78px;height:78px;bottom:30px}#toast{bottom:19%}}

/* ============================================================
   Parte 2 — integración en Cosplyx
   ============================================================ */

/* Anti-zoom de iOS Safari (mismo criterio que colacon/assets/colacon.css):
   Safari ignora user-scalable/maximum-scale, así que la raíz queda fija,
   sin gestos nativos ni selección/menú de mantener pulsado; solo los
   contenedores con scroll permiten desplazar en vertical. El pellizco y
   el doble toque los corta colacon/assets/nozoom.js. */
html,body{
 position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;
 touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
 -webkit-text-size-adjust:100%;text-size-adjust:100%
}
input{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#menu,#overlay,.sheet{touch-action:pan-y;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#overlay{overflow-y:auto}
/* HUD bajo el notch / Dynamic Island dentro de la app (WebView a pantalla
   completa): se desplaza el HUD entero, igual que el header de ColaCon 1. */
#hud{top:calc(env(safe-area-inset-top,0px) + var(--ios-header-extra,0px))}
#menu{padding-top:max(clamp(22px,5vw,64px),calc(env(safe-area-inset-top,0px) + var(--ios-header-extra,0px) + 14px))}

/* Identidad del jugador sobre el botón de empezar */
.who{margin-top:16px;font-size:12px;color:#d9c9ea}.who b{color:var(--gold)}
.name-field{display:block;margin-top:16px}
.name-field span{display:block;font-size:10px;letter-spacing:.16em;color:#c8b4df;margin-bottom:6px}
.name-field input{width:100%;font:inherit;font-size:16px;color:var(--paper);background:#1b1429;border:1px solid #ffffff2a;border-radius:10px;padding:12px 14px;outline:0}
.name-field input:focus{border-color:var(--gold)}
.primary:disabled{opacity:.6;cursor:progress}
.start.busy span:first-child:after{content:" …"}
#menuMsg{margin:10px 0 0;font-size:12px;color:#ff9f86}

/* Botones de Favoritos / Top / volver */
.menu-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ghost{display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:11px;font-weight:750;letter-spacing:.06em;color:#eadcf8;background:#261b39d9;border:1px solid #ffffff22;border-radius:10px;padding:11px 12px;text-decoration:none;text-align:center;min-height:42px}
.ghost:hover{background:#3a2953}
.ghost.wide{grid-column:1/-1}
.ghost.back{color:#c9b7d9;font-weight:600}
#favoritesTeaser{color:#8fe3b4;font-weight:600}
.record{font-size:11px;color:var(--gold);letter-spacing:.08em;margin:12px 0 0}
.muted{color:#b8a7c8;font-size:12px}

/* Estado del envío y cuenta de invitado, dentro del modal de fin */
#verifyStatus{margin:6px 0 0;font-size:12px;color:#c9b7d9}
#claimBox{margin:16px 0 4px;padding:14px;border:1px solid #ffffff1f;border-radius:12px;background:#1b1429;text-align:left}
#claimBox p{margin:0 0 10px;font-size:12px;color:#d3c2e0}
#claimBox input[type=email]{width:100%;font:inherit;font-size:16px;color:var(--paper);background:#241934;border:1px solid #ffffff2a;border-radius:8px;padding:10px 12px}
#claimBox label{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:#c9b7d9;margin-top:10px}
#claimBox label input{margin-top:2px}
#claimBox a{color:var(--gold)}
#claimBox .primary{width:100%;margin-top:12px}
#claimMsg{font-size:12px;color:#8fe3b4}#claimMsg.error{color:#ff9f86}

/* Pantallas Favoritos y Top */
.screen{position:fixed;inset:0;z-index:10;background:#110b23e6;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.sheet{width:min(100%,560px);max-height:100%;overflow-y:auto;background:#241934;border:1px solid #dcc5fa33;border-radius:20px;padding:0 22px 22px;box-shadow:0 30px 100px #0006}
.sheet-head{position:sticky;top:0;z-index:1;background:#241934;margin:0 -22px;padding:14px 22px 12px;border-bottom:1px solid #ffffff14}
.sheet-back{font:inherit;font-size:11px;letter-spacing:.08em;color:#c9b7d9;background:none;border:0;padding:6px 0}
.sheet h2{font-size:28px;letter-spacing:-.04em;line-height:1.05;margin:6px 0 4px;color:var(--gold)}
.tabs{display:flex;gap:6px;margin-top:10px}
.tabs button{flex:1;font:inherit;font-size:11px;font-weight:750;letter-spacing:.06em;color:#c9b7d9;background:#1b1429;border:1px solid #ffffff1f;border-radius:8px;padding:9px 6px}
.tabs button.on{color:#261a32;background:var(--gold);border-color:var(--gold)}
.list{margin-top:10px;max-width:100%;overflow-x:hidden;touch-action:pan-y}
.list .row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #ffffff12;min-width:0}
.list .row:last-child{border-bottom:0}
.list .row.me{background:#f4d18714;border-radius:10px;padding-left:8px;padding-right:8px}
.list .rank{flex:0 0 30px;text-align:center;font-weight:800;color:#d9c9ea;font-size:13px}
.list .avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #4a3a63;background:#1b1429}
.list .info{flex:1;min-width:0}
.list .name{font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .status{font-size:10px;color:#b8a7c8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .live{color:#8fe3b4}
.list .star{color:var(--gold)}
.list .tag{font-size:9px;font-weight:800;color:#261a32;background:var(--gold);border-radius:4px;padding:1px 5px;vertical-align:1px}
.list .pts{flex:0 0 auto;text-align:right;font-weight:800;color:var(--gold);font-size:14px}
.list .pts small{display:block;font-size:8px;font-weight:600;color:#b8a7c8;letter-spacing:.06em}
.list .gap{text-align:center;color:#8b7a9c;padding:6px 0}
.list .muted{margin:14px 0}
@media(max-width:700px){.menu-links{margin-top:10px}.ghost{font-size:10px;padding:10px 8px}.sheet{padding:0 16px 16px}.sheet-head{margin:0 -16px;padding:12px 16px 10px}.sheet h2{font-size:24px}}
@media(max-height:520px) and (orientation:landscape){.who,.name-field{margin-top:8px}.name-field input{padding:8px 12px}.menu-links{margin-top:8px}.ghost{min-height:34px;padding:7px 8px}}
/* El modal puede crecer (estado del envío + caja de invitado): con grid
   centrado, lo que sobresale por arriba sería inalcanzable al hacer
   scroll — con flex + margin:auto se centra y, si no cabe, se desplaza. */
#overlay{display:flex}#overlay>.modal{margin:auto}
/* Que el final del menú no quede bajo el botón fijo de sonido al hacer scroll. */
#menu{padding-bottom:max(64px,calc(env(safe-area-inset-bottom,0px) + 56px))}
/* Móvil estrecho: los dos paneles del HUD no pueden llegar al centro, donde
   vive el botón de pausa (en el prototipo "Apertura de puertas" ensanchaba
   el panel derecho hasta taparlo en un iPhone de 390px). Texto en una línea
   con puntos suspensivos para que la altura no crezca sobre la misión. */
@media(max-width:560px){
 .hud-top .panel{min-width:0;max-width:calc(50% - 30px)}
 .hud-top .panel strong,.hud-top .hud-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:560px){
 /* La línea "N COSPLAYERS · PUNTOS" nunca debe cortarse: más compacta. */
 .hud-right .hud-label{letter-spacing:.03em;font-size:8px}
}
@media(max-width:380px){
 .hud-top .hud-right .hud-label:last-child{white-space:normal;overflow:visible}
 #mission{top:92px}
}