/* Gaming City · Duelo 1v1
   Dirección: interfaz táctica oscura, cortes angulados, tipografía condensada.
   Un solo acento fuerte (rojo Gaming City); el verde agua identifica al jugador propio. */
:root{
  --ink:#0e131a; --ink-2:#121922; --panel:#16202b; --panel-2:#1c2733; --line:#28333f; --line-2:#344252;
  --text:#ece8e1; --muted:#8b98a6; --dim:#5d6a78;
  --red:#ff4655; --red-2:#d83a49; --teal:#3fe0c5; --gold:#f2c14e; --silver:#cfd6de; --bronze:#d08b5b;
  --display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'Barlow','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --cut:12px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
body{background:
  radial-gradient(900px 480px at 88% -8%,rgba(255,70,85,.13),transparent 62%),
  radial-gradient(700px 420px at -10% 110%,rgba(63,224,197,.06),transparent 60%),var(--ink);overflow-x:hidden}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a{color:inherit}

.app{max-width:1120px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));padding-bottom:max(36px,env(safe-area-inset-bottom,0px))}

/* ---------- barra superior ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:14px;border-bottom:1px solid var(--line)}
.brand{background:none;border:0;padding:0;display:block}
.brand img{display:block;height:40px;width:auto}
.top-right{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);padding:8px 12px;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.chip b{color:var(--text)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(63,224,197,.18)}
.chip.icon{padding:7px}
.chip.icon svg{width:20px;height:20px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip.icon svg path:first-child{fill:var(--text)}
.chip.icon[aria-pressed="false"] .w1,.chip.icon[aria-pressed="false"] .w2{opacity:.15}

/* ---------- tipografía y piezas comunes ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin:0}
.eyebrow .tick{width:18px;height:2px;background:var(--red)}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin:0}
.fine{font-size:12.5px;color:var(--muted);margin:0}
.h2{font-family:var(--display);font-weight:900;font-size:clamp(34px,6vw,54px);line-height:.9;text-transform:uppercase;margin:14px 0 18px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.center{justify-content:center}
.link{background:none;border:0;padding:6px 0;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.link:hover{color:var(--text)}

.btn{position:relative;border:0;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;padding:13px 24px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:background .15s,transform .1s,color .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover:not(:disabled){background:#ff5d6a}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2);clip-path:none}
.btn.ghost:hover{background:rgba(236,232,225,.06)}
.btn.sm{font-size:15px;padding:9px 14px;--cut:9px}
.btn.big{display:grid;gap:2px;text-align:left;padding:16px 26px 15px;--cut:16px;min-width:220px}
.btn.big span{font-size:26px;line-height:1}
.btn.big small{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;opacity:.8}
.btn.primary.big::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);transform:translateX(-120%);animation:sheen 3.6s ease-in-out 1.2s infinite}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.card{background:var(--panel);border:1px solid var(--line);position:relative}
.panel{background:var(--panel);border:1px solid var(--line);padding:18px;display:grid;gap:16px;margin-top:18px}

/* ---------- inicio ---------- */
.view{animation:viewIn .35s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:end;padding-block:clamp(26px,6vw,64px) 30px}
.title{margin:14px 0 14px;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:-.5px;display:grid}
.title .t1{font-size:clamp(64px,13vw,150px);color:var(--text)}
.title .t2{font-size:clamp(88px,19vw,210px);color:var(--red);display:block;animation:glitch 1.1s steps(1) .25s both}
.title .t2 i{font-style:normal;color:var(--text);font-size:.62em;vertical-align:.22em;margin:0 .04em}
@keyframes glitch{0%{clip-path:inset(0 0 62% 0);transform:translateX(-8px)}22%{clip-path:inset(48% 0 0 0);transform:translateX(6px)}44%{clip-path:inset(0 0 25% 0);transform:translateX(-3px)}66%{clip-path:inset(30% 0 10% 0);transform:translateX(2px)}88%,100%{clip-path:inset(0);transform:none}}
.lede{max-width:46ch;color:var(--muted);margin:0 0 24px;font-size:17px}
.lede b{color:var(--text)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.live{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.live b{color:var(--text);font-weight:700}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(63,224,197,.6);animation:ping 1.8s infinite;margin-right:4px}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(63,224,197,0)}100%{box-shadow:0 0 0 0 rgba(63,224,197,0)}}
.friend-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.code-box{display:grid;gap:0;background:var(--ink-2);border:1px dashed var(--gold);padding:8px 14px}
.code-box b{font-family:var(--mono);font-size:30px;letter-spacing:8px;color:var(--gold);line-height:1.1}
.join{display:flex;gap:6px;margin-left:auto}
.join input{width:132px;background:var(--ink);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:6px;padding:8px 10px;text-transform:uppercase;border-radius:0}
.join input:focus{outline:none;border-color:var(--red)}
.tip{margin:14px 0 0;font-size:13.5px;color:var(--muted);border-left:3px solid var(--gold);padding:8px 12px;background:var(--ink-2)}
.tip b{color:var(--text)}
.end-rematch{font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.game-open,.game-open body{overscroll-behavior:none;overflow:hidden}
.me-card{padding:20px;display:grid;gap:12px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.me-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal)}
.me-nick{font-family:var(--display);font-weight:900;font-size:clamp(30px,4.6vw,42px);line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.me-nick.xl{font-size:clamp(42px,8vw,72px)}
.me-ig{color:var(--muted);font-size:14px;margin-top:-6px}
.me-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:4px 0 0}
.me-stats>div{background:var(--ink-2);padding:10px 12px}
.me-stats dt{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.me-stats dd{margin:2px 0 0;font-family:var(--display);font-weight:900;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.me-stats.wide{grid-template-columns:repeat(4,minmax(0,1fr));flex:1;min-width:0}

.board{margin-top:8px;display:grid;gap:12px}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.board-head h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,4vw,36px);text-transform:uppercase;margin:0;line-height:1}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.podium{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.podium li{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);padding:11px 16px;animation:rowIn .4s ease both}
.podium li:nth-child(2){animation-delay:.04s}.podium li:nth-child(3){animation-delay:.08s}.podium li:nth-child(4){animation-delay:.12s}.podium li:nth-child(5){animation-delay:.16s}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.podium .pos{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;color:var(--dim)}
.podium li:nth-child(1){border-color:rgba(242,193,78,.45);background:linear-gradient(90deg,rgba(242,193,78,.1),var(--panel) 55%)}
.podium li:nth-child(1) .pos{color:var(--gold)}.podium li:nth-child(2) .pos{color:var(--silver)}.podium li:nth-child(3) .pos{color:var(--bronze)}
.podium .nm{font-family:var(--display);font-weight:800;font-size:23px;text-transform:uppercase;overflow-wrap:anywhere;min-width:0}
.podium .nm small{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--dim);margin-left:8px;letter-spacing:1px}
.podium .w{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.podium .pts{font-family:var(--display);font-weight:900;font-size:26px;font-variant-numeric:tabular-nums}
.podium li.me{border-color:var(--teal)}
.podium li.empty{grid-template-columns:1fr;color:var(--muted)}

.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.how>div{background:var(--ink-2);padding:18px 18px 20px}
.how .n{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:2px}
.how h3{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;margin:6px 0 4px;line-height:1}
.how p{margin:0;color:var(--muted);font-size:14.5px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.foot a{color:var(--muted);text-decoration:none}

/* ---------- selección de agente ---------- */
.view-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:18px}
.agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.agent{position:relative;text-align:left;background:var(--panel);border:1px solid var(--line);padding:16px 16px 18px;display:grid;gap:8px;overflow:hidden;transition:border-color .15s,transform .15s}
.agent:hover{transform:translateY(-2px);border-color:var(--line-2)}
.agent[aria-pressed="true"]{border-color:var(--ac,var(--red));background:linear-gradient(170deg,color-mix(in srgb,var(--ac,var(--red)) 18%,transparent),var(--panel) 60%)}
.agent[aria-pressed="true"]::after{content:"Elegido";position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);background:var(--ac,var(--red));padding:3px 7px}
.agent svg{width:56px;height:56px;display:block}
.agent .ag-role{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.agent .ag-name{font-family:var(--display);font-weight:900;font-size:32px;text-transform:uppercase;line-height:.95}
.agent .ag-ab{font-size:13.5px;color:var(--muted);line-height:1.4}
.agent .ag-ab b{color:var(--text);font-weight:600;display:block;font-size:14px}
.search{display:flex;align-items:center;gap:16px}
.radar{width:64px;height:64px;flex:none;border-radius:50%;border:1px solid var(--line-2);position:relative;overflow:hidden;background:radial-gradient(circle,rgba(255,70,85,.18),transparent 70%)}
.radar::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(255,70,85,.7),transparent 26%);animation:spin 1.3s linear infinite}
.radar i{position:absolute;inset:28px;border-radius:50%;background:var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}
.search-title{font-family:var(--display);font-weight:800;font-size:clamp(22px,3.6vw,28px);text-transform:uppercase;line-height:1.05}
.search-sub{color:var(--muted);font-size:14px}
.diffs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.diff{background:var(--ink-2);border:1px solid var(--line);padding:12px 14px;text-align:left;display:grid;gap:2px}
.diff b{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;line-height:1}
.diff span{font-size:13px;color:var(--muted)}
.diff[aria-pressed="true"]{border-color:var(--red);background:rgba(255,70,85,.1)}
.controls{margin-top:18px;border:1px solid var(--line);background:var(--ink-2)}
.controls summary{cursor:pointer;padding:12px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.controls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 16px 16px}
.controls-grid b{font-family:var(--display);font-size:19px;text-transform:uppercase}
.controls-grid p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}

/* ---------- mi registro ---------- */
.prof-top{display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;margin:14px 0 26px}
.hist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.hist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:11px 14px}
.hist .res{font-family:var(--display);font-weight:900;font-size:20px;text-transform:uppercase;width:92px}
.hist .res.w{color:var(--teal)}.hist .res.l{color:var(--red)}
.hist .det{font-size:14px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.hist .det b{color:var(--text)}
.hist .pp{font-family:var(--display);font-weight:900;font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------- cartel Instagram / registro ---------- */
.gate{position:fixed;inset:0;z-index:80;background:rgba(7,10,14,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-y:auto;
  padding:max(20px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:grid;place-items:center}
.gate-card{width:min(100%,540px);background:var(--panel);border:1px solid var(--line);padding:clamp(20px,5vw,32px);display:grid;gap:15px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);animation:pop .4s cubic-bezier(.2,.9,.3,1.25)}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.gate-logo{width:min(100%,220px);height:auto;display:block}
.gate-card h2{font-family:var(--display);font-weight:900;font-size:clamp(34px,8vw,50px);line-height:.92;text-transform:uppercase;margin:0;text-wrap:balance}
.gate-card h2 span{color:var(--red)}
.gate-card p{margin:0;color:var(--muted)}
.ig-list{display:grid;gap:8px}
.ig-btn{display:flex;align-items:center;gap:14px;padding:13px 15px;background:var(--ink-2);border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:16.5px;transition:border-color .15s}
.ig-btn:hover{border-color:var(--red)}
.ig-name{min-width:0;overflow-wrap:anywhere}
.ig-ico{width:38px;height:38px;flex:none;border-radius:11px;background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%);display:grid;place-items:center}
.ig-ico i{width:18px;height:18px;border:2.5px solid #fff;border-radius:6px;position:relative;display:block}
.ig-ico i::after{content:"";position:absolute;inset:3px;border:2.5px solid #fff;border-radius:50%}
.ig-btn small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.ig-state{margin-left:auto;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:1px;color:var(--red);text-transform:uppercase;white-space:nowrap}
.ig-btn.done{border-color:var(--teal)}.ig-btn.done .ig-state{color:var(--teal)}
.gate-form{display:grid;gap:12px}
.gate-form label{display:grid;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.gate-form input{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--text);font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:1px;padding:10px 12px;text-transform:uppercase;border-radius:0}
.gate-form input.ig{text-transform:lowercase;font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:0}
.gate-form input.pin{letter-spacing:10px;font-family:var(--mono)}
.gate-form input:focus{outline:none;border-color:var(--red)}
.gate-msg{min-height:22px;font-weight:600;color:var(--red)}

/* =================== JUEGO =================== */
.game{position:fixed;inset:0;z-index:60;background:#0a0e13;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hud{position:absolute;inset:0;pointer-events:none;
  padding:max(10px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.hud button{pointer-events:auto}
.g-exit{position:absolute;top:max(10px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));width:38px;height:38px;border:1px solid var(--line-2);background:rgba(14,19,26,.7);font-size:16px;color:var(--muted)}
.scorebar{position:absolute;top:max(8px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;align-items:stretch;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.sb-side{display:flex;align-items:center;gap:10px;padding:6px 14px;background:rgba(14,19,26,.86);min-width:118px}
.sb-side b{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.sb-side.me{justify-content:flex-end;border-bottom:3px solid var(--teal);clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
.sb-side.me b{color:var(--teal)}
.sb-side.opp{border-bottom:3px solid var(--red);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,0 100%)}
.sb-side.opp b{color:var(--red)}
.sb-name{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-mid{background:rgba(236,232,225,.94);color:var(--ink);display:grid;justify-items:center;align-content:center;padding:3px 16px 4px;min-width:96px}
.sb-mid b{font-family:var(--display);font-weight:900;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.sb-mid span{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase}
.sb-mid.live b{color:var(--ink)}.sb-mid.low b{color:var(--red-2)}
.pips{display:flex;gap:3px;margin-top:3px}
.pips i{width:6px;height:6px;background:rgba(14,19,26,.18);transform:rotate(45deg)}
.pips i.w{background:#0f9c86}.pips i.l{background:var(--red-2)}
.killfeed{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));display:grid;gap:4px;justify-items:end}
.killfeed div{display:flex;align-items:center;gap:8px;background:rgba(14,19,26,.82);padding:5px 10px;font-weight:700;font-size:13px;text-transform:uppercase;border-right:3px solid var(--red);animation:kfIn .25s ease both}
.killfeed div.mine{border-right-color:var(--teal)}
.killfeed .kw{font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:500}
@keyframes kfIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.net-badge{position:absolute;top:max(54px,calc(env(safe-area-inset-top,0px) + 50px));left:max(12px,env(safe-area-inset-left,0px));font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);background:rgba(14,19,26,.7);padding:3px 7px;text-transform:uppercase}
.vitals{position:absolute;left:max(14px,env(safe-area-inset-left,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:14px;background:linear-gradient(90deg,rgba(14,19,26,.85),rgba(14,19,26,0));padding:6px 30px 6px 12px}
.vitals>div{display:grid;line-height:1}
.vitals b{font-family:var(--display);font-weight:900;font-variant-numeric:tabular-nums}
.vitals span{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.vitals .hp b{font-size:48px}
.vitals .hp.low b{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.vitals .sh b{font-size:26px;color:#9fd4ff}
.vitals .credits{display:flex;align-items:baseline;gap:4px;font-family:var(--display);font-size:20px;color:var(--gold)}
.vitals .credits span{font-size:18px;color:var(--gold);letter-spacing:0;font-family:var(--display)}
.vitals .credits b{font-size:24px}
.weapon{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));text-align:right;background:linear-gradient(270deg,rgba(14,19,26,.85),rgba(14,19,26,0));padding:6px 12px 6px 30px}
.w-name{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.w-ammo{font-family:var(--display);font-weight:900;line-height:1}
.w-ammo b{font-size:44px;font-variant-numeric:tabular-nums}
.w-ammo span{font-size:18px;color:var(--muted);margin-left:4px}
.w-ammo.low b{color:var(--red)}
.actions{position:absolute;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:flex-end}
.act{background:rgba(14,19,26,.82);border:1px solid var(--line-2);color:var(--text);font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:9px 13px;display:grid;justify-items:center;line-height:1.05}
.act small{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:1px}
.act.buy{border-color:var(--gold);color:var(--gold)}
.act.ability{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 8px;border-color:var(--ac,var(--red))}
.act.ability .ab-ico{width:34px;height:34px;display:block}
.act.ability .ab-ico svg{width:100%;height:100%}
.act.ability .ab-txt{display:grid;text-align:left}
.act.ability .ab-txt b{font-size:15px}
.act.ability .ab-txt small{font-size:11px;color:var(--muted)}
.act.ability kbd{font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--line-2);padding:1px 5px}
.act.ability.empty{opacity:.45}
.act:active{transform:scale(.96)}
.alert{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-family:var(--display);font-weight:900;font-size:clamp(20px,3vw,28px);letter-spacing:2px;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.6);animation:alertIn .3s ease both;white-space:nowrap}
@keyframes alertIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* compra */
.buy{position:absolute;inset:0;margin:auto;height:max-content;width:min(760px,calc(100% - 24px));max-height:calc(100% - 120px);overflow:auto;background:rgba(14,19,26,.94);border:1px solid var(--line-2);padding:16px;display:grid;gap:12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);animation:pop .25s ease both;backdrop-filter:blur(4px)}
.buy-head{display:flex;align-items:end;gap:14px}
.buy-head h3{margin:0;font-family:var(--display);font-weight:900;font-size:32px;text-transform:uppercase;line-height:1}
.buy-cr{margin-left:auto;font-family:var(--display);font-weight:900;font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums}
.buy-close{background:none;border:1px solid var(--line-2);width:36px;height:36px;color:var(--muted)}
.buy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.wcard{position:relative;text-align:left;background:var(--panel);border:1px solid var(--line);padding:10px 11px;display:grid;gap:2px;min-height:96px}
.wcard .wk{position:absolute;top:8px;right:9px;font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.wcard .wc{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.wcard .wn{font-family:var(--display);font-weight:900;font-size:23px;text-transform:uppercase;line-height:1}
.wcard .wp{font-family:var(--display);font-weight:800;font-size:18px;color:var(--gold);margin-top:auto}
.wcard .ws{font-size:11.5px;color:var(--muted)}
.wcard canvas{width:100%;height:22px;display:block;margin:2px 0}
.wcard.owned{border-color:var(--teal);background:linear-gradient(170deg,rgba(63,224,197,.14),var(--panel) 70%)}
.wcard.owned .wp{color:var(--teal)}
.wcard.cant{opacity:.42}
.wcard:not(.cant):hover{border-color:var(--line-2)}
.buy-foot{margin:0;font-size:12px;color:var(--muted)}

/* banners de ronda */
.banner{position:absolute;left:0;right:0;top:34%;height:118px;pointer-events:none;display:grid;place-items:center;z-index:2}
.buy{z-index:3}
.bn-stripe{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(14,19,26,.9) 18%,rgba(14,19,26,.9) 82%,transparent);transform-origin:left;animation:stripe .45s cubic-bezier(.2,.9,.3,1) both}
.banner.win .bn-stripe{background:linear-gradient(90deg,transparent,rgba(15,156,134,.85) 18%,rgba(15,156,134,.85) 82%,transparent)}
.banner.lose .bn-stripe{background:linear-gradient(90deg,transparent,rgba(216,58,73,.85) 18%,rgba(216,58,73,.85) 82%,transparent)}
@keyframes stripe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bn-text{position:relative;display:grid;justify-items:center;text-align:center;animation:bnText .5s .12s ease both}
@keyframes bnText{from{opacity:0;letter-spacing:.4em}to{opacity:1}}
.bn-kicker{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(236,232,225,.75)}
.bn-text b{font-family:var(--display);font-weight:900;font-size:clamp(40px,8vw,70px);line-height:.95;text-transform:uppercase;letter-spacing:2px}
.bn-sub{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:rgba(236,232,225,.8)}

/* fin de partida */
.end,.confirm{position:absolute;inset:0;background:rgba(7,10,14,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;padding:16px;overflow:auto;z-index:5}
.end>.end-card,.confirm>.end-card{margin:auto}
.end-card{width:min(560px,100%);background:var(--panel);border:1px solid var(--line-2);padding:clamp(18px,4vw,30px);display:grid;gap:12px;text-align:center;justify-items:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);animation:pop .4s ease both}
.end-card.sm{width:min(420px,100%)}
.end-card h3{font-family:var(--display);font-weight:900;font-size:32px;text-transform:uppercase;margin:0}
.end-card p{margin:0;color:var(--muted)}
.end-title{font-family:var(--display);font-weight:900;font-size:clamp(56px,12vw,96px);line-height:.85;text-transform:uppercase;margin:0;letter-spacing:2px}
.end.win .end-title{color:var(--teal)}.end.lose .end-title{color:var(--red)}
.end-score{display:flex;gap:14px;align-items:center;font-family:var(--display);font-weight:900;font-size:44px;line-height:1}
.end-score span{color:var(--dim)}
.end-score b:first-child{color:var(--teal)}.end-score b:last-child{color:var(--red)}
.end-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:4px 0;width:100%}
.end-stats>div{background:var(--ink-2);padding:9px 6px}
.end-stats dt{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.end-stats dd{margin:2px 0 0;font-family:var(--display);font-weight:900;font-size:24px;font-variant-numeric:tabular-nums}
.end-pts{font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;color:var(--gold);min-height:26px}

.rotate{position:absolute;inset:0;z-index:6;background:rgba(7,10,14,.92);display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:20px}
.rotate p{margin:0;font-family:var(--display);font-weight:900;font-size:30px;text-transform:uppercase}
.rot-ico{width:46px;height:78px;border:3px solid var(--text);border-radius:9px;animation:rot 2s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .agents{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr);gap:22px}
  .how{grid-template-columns:minmax(0,1fr)}
  .controls-grid{grid-template-columns:minmax(0,1fr)}
  .diffs{grid-template-columns:minmax(0,1fr)}
  .btn.big{min-width:0;flex:1 1 200px}
  .podium li{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:10px 12px}
  .podium .w{display:none}
  .podium .nm{font-size:20px}
  .me-stats.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hist li{grid-template-columns:minmax(0,1fr) auto}
  .hist .res{width:auto;grid-column:1}
  .hist .det{grid-column:1}
  .hist .pp{grid-row:1/3;grid-column:2}
  .end-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){.brand img{height:34px}.agent .ag-name{font-size:26px}.agent{padding:12px}}
/* juego en pantallas bajas (celular horizontal) */
@media (max-height:520px){
  .sb-side{min-width:84px;padding:3px 10px}.sb-side b{font-size:26px}.sb-name{max-width:70px;font-size:9px}
  .sb-mid{min-width:76px;padding:2px 10px}.sb-mid b{font-size:21px}
  .vitals .hp b{font-size:34px}.vitals .sh b{font-size:20px}.vitals{gap:10px}
  .w-ammo b{font-size:32px}
  .act{font-size:13px;padding:7px 10px}.act.ability .ab-ico{width:26px;height:26px}
  .killfeed{top:52px}.killfeed div{font-size:11px;padding:3px 8px}
  .banner{top:26%;height:92px}
  .end-title{font-size:48px}.end-score{font-size:32px}.end-card{gap:8px;padding:14px 18px}.end-stats dd{font-size:19px}
  .buy{max-height:calc(100% - 70px);padding:10px;gap:8px}.buy-head h3{font-size:24px}.buy-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.wcard{min-height:78px;padding:7px 8px}.wcard .wn{font-size:19px}.wcard .ws{display:none}
}
@media (max-width:640px) and (min-height:521px){
  .actions{bottom:auto;top:max(64px,calc(env(safe-area-inset-top,0px) + 58px));left:auto;right:max(12px,env(safe-area-inset-right,0px));transform:none;flex-direction:column;align-items:flex-end}
  .killfeed{top:auto;bottom:110px}
}
/* táctil: botones al alcance del pulgar derecho, más grandes */
@media (pointer:coarse){
  .act small,.act.ability kbd{display:none}
  .act{min-height:46px;min-width:84px;font-size:15px}
  .act.ability{min-width:0}
}
@media (pointer:coarse) and (orientation:landscape){
  .actions{left:auto;right:max(14px,env(safe-area-inset-right,0px));transform:none;bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 64px);flex-direction:column;align-items:flex-end}
  .actions .act.ability{order:-1}
}
@media (max-width:640px){.join{margin-left:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}