:root{
  --bg:#070d0a; --ink:#e9efe9; --muted:#9aa89f; --line:#2a3a31;
  --pitch:#2e7d1c; --pitch2:#3a9524; --gold1:#fff0a0; --gold2:#f4b400; --gold3:#a8560a;
  --navy:#0e1b3d; --blue:#1d44a8; --red:#9c2222; --green:#547a12;
  --panel:#cdd0d5; --bar:#44474d; --bar2:#34373c;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overscroll-behavior:none}
body{overflow:hidden;position:fixed;inset:0;width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}
@media (max-width:900px){input,select,textarea{font-size:16px!important}}
[hidden]{display:none!important}
.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}
.muted{color:var(--muted)} .small{font-size:.82rem} .grow{flex:1}
#app{position:fixed;inset:0}
.view{position:absolute;inset:0;display:none;overflow:auto;-webkit-overflow-scrolling:touch}
.view.active{display:block}
#v-game.active{display:block;overflow:hidden}

/* ---------- logo ---------- */
.logo-text{display:flex;align-items:baseline;gap:.35em;font-family:Impact,"Arial Black","Haettenschweiler",system-ui,sans-serif;font-style:italic;line-height:1;white-space:nowrap}
.logo-text .l1{font-size:clamp(2.2rem,8vw,4.2rem);letter-spacing:.01em;background:linear-gradient(180deg,var(--gold1) 0%,var(--gold2) 48%,var(--gold3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #5a2d00;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.55))}
.logo-text .l2{font-size:clamp(1.5rem,5vw,2.6rem);color:#ffd84a;-webkit-text-stroke:1px #5a2d00;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55))}
.logo-text .l3{font-size:.9rem;letter-spacing:.3em;color:#fff;background:var(--pitch);padding:.15em .5em;font-style:normal;font-family:system-ui,sans-serif;font-weight:800;border-radius:3px;align-self:center}
.logo-text.small .l1{font-size:2.2rem}.logo-text.small .l2{font-size:1.5rem}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.7em 1em;border-radius:10px;background:#1c2a22;border:1px solid var(--line);font-weight:600;min-height:44px;text-align:center}
.btn:hover{background:#25382d}
.btn.primary{background:linear-gradient(#2d62d8,#1a3f9e);border-color:#4f7df0;color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.danger{background:#3a1717;border-color:#6b2a2a}
.btn.ghost{background:transparent}
.btn.wa{background:#12633a;border-color:#1f9a5c}
.btn.big{width:100%;padding:.9em 1em;font-size:1.05rem}
.btn.small{min-height:34px;padding:.3em .8em}
.btn:disabled{opacity:.5;pointer-events:none}
.linkbtn{color:#8fb3ff;text-decoration:underline;padding:.5em;font-size:.9rem}
.xbtn{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);z-index:3}
.xbtn:hover{background:rgba(255,255,255,.18)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}.row-btns .btn{flex:1}

/* ---------- formularios ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:.9rem;color:var(--muted)}
.field input,.field select,.code-in,.score-in input{background:#0c1510;border:1px solid var(--line);border-radius:10px;padding:.75em .9em;color:var(--ink);font-size:1rem;width:100%;min-height:46px}
.field input:focus,.field select:focus,.code-in:focus{outline:2px solid #4f7df0;outline-offset:1px}
.hint{min-height:1.1em;font-size:.8rem}.hint.ok{color:#6fe39a}.hint.bad{color:#ff8b8b}
.msg{min-height:1.2em;margin:8px 0;font-size:.9rem;color:#ffb3b3}.msg.ok{color:#8ef0b3}.msg.info{color:var(--muted)}
.switch{display:flex;gap:10px;align-items:center;margin:12px 0;font-size:.95rem;cursor:pointer}
.switch input{width:22px;height:22px;accent-color:#2d62d8;flex:none}
.tabs{display:flex;gap:6px;margin:12px 0}
.tab{flex:1;padding:.7em;border-radius:10px;background:#101a14;border:1px solid var(--line);font-weight:700;color:var(--muted)}
.tab.active{background:#1d44a8;color:#fff;border-color:#4f7df0}
.code-in{text-align:center;font-size:2rem;letter-spacing:.35em;font-weight:800;text-transform:uppercase}
.range{width:100%}

/* barra de carga dentro del juego */
.splash-bar{width:min(320px,70vw);height:10px;border-radius:6px;background:#17261c;overflow:hidden;border:1px solid var(--line)}
.splash-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3a9524,#ffd84a);transition:width .2s}

/* ---------- modales ---------- */
.modal,.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px;overflow:auto}
.sheet{position:absolute;z-index:30}
.modal-box,.sheet-box{position:relative;width:min(440px,100%);max-height:calc(100% - 8px);overflow:auto;background:#0e1712;border:1px solid var(--line);border-radius:16px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-box.wide{width:min(560px,100%)}
.modal-box h3,.sheet-box h3{margin:0 40px 4px 0;font-size:1.2rem}
.modal-box p{margin:0}
.help h4{margin:14px 0 4px;color:#ffd84a}.help p,.help li{color:#c4cec7;font-size:.92rem;line-height:1.45}.help ul{padding-left:18px;margin:4px 0}
.steps{margin:6px 0;padding-left:20px;color:#d5ded8;line-height:1.5}.steps li{margin:6px 0}
.steps b{color:#ffd84a}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:2.6rem;font-weight:900;letter-spacing:.3em;text-align:center;padding:.2em 0;color:#ffd84a;text-shadow:0 2px 0 #5a2d00;user-select:all}
.peer-box{background:#0a110d;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;min-height:64px}
.avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#16251c;flex:none;display:grid;place-items:center}
.avatar svg{width:100%;height:100%;display:block}
.avatar.xl{width:72px;height:72px}
.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avatars button{aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid transparent;background:#16251c;padding:0}
.avatars button.sel{border-color:#ffd84a;box-shadow:0 0 0 2px rgba(255,216,74,.35)}
.prof-top{display:flex;gap:14px;align-items:center}.p-name{font-weight:800;font-size:1.2rem}
.rank-list{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.rk{display:grid;grid-template-columns:34px 40px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#101a14;border:1px solid transparent}
.rk.me{border-color:#ffd84a;background:#1b2410}
.rk .pos{font-weight:900;text-align:center;color:var(--muted)}.rk:nth-child(-n+3) .pos{color:#ffd84a}
.rk .avatar{width:36px;height:36px}.rk .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .nm small{display:block;color:var(--muted);font-weight:400;font-size:.72rem}
.rk .pts{font-weight:900;font-size:1.1rem}
.score-in{display:flex;align-items:flex-end;gap:12px;justify-content:center}
.score-in label{display:flex;flex-direction:column;gap:4px;text-align:center;flex:1;font-size:.85rem;color:var(--muted)}
.score-in input{text-align:center;font-size:2rem;font-weight:900}
.score-in b{font-size:2rem;padding-bottom:.25em}

/* ---------- toasts / update ---------- */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--safe-b));z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(480px,92vw)}
.toast{background:#18281f;border:1px solid #2f4a3a;color:#fff;padding:.7em 1.1em;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:.92rem;animation:tin .2s ease-out;pointer-events:auto}
.toast.bad{background:#3a1717;border-color:#7a3030}.toast.ok{background:#12331f;border-color:#2c7a48}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.update-bar{position:fixed;top:calc(8px + var(--safe-t));left:50%;transform:translateX(-50%);z-index:95;display:flex;gap:12px;align-items:center;background:#1d44a8;padding:8px 8px 8px 16px;border-radius:30px;box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:.9rem}

/* ---------- juego ---------- */
.stage{position:absolute;inset:0;background:#000 url("../img/ui-game-d.jpg") center/cover no-repeat;display:flex;flex-direction:column;align-items:stretch;padding:calc(var(--safe-t) + 46px) var(--safe-r) 0 var(--safe-l);touch-action:none;user-select:none;-webkit-user-select:none}
.screen{position:relative;width:100%;aspect-ratio:4/3;background:#000;flex:none;max-height:calc(100% - 150px);margin:0 auto;overflow:hidden;touch-action:none}
.screen canvas,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;background:#000}
.screen video{image-rendering:auto}
.touch-surface{position:absolute;inset:0;z-index:2;cursor:none;touch-action:none}
.ptr{position:absolute;z-index:3;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #ffd84a;border-radius:50%;pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.8)}
.screen-msg{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:20px;background:rgba(0,0,0,.72);font-weight:700;line-height:1.4}
.hud{position:absolute;top:var(--safe-t);left:var(--safe-l);right:var(--safe-r);z-index:10;display:flex;gap:6px;align-items:center;padding:3px 6px;height:46px;pointer-events:none}
.hud>*{pointer-events:auto}
.hbtn{position:relative;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#111a15;border:1px solid rgba(255,255,255,.18)}
.hbtn:hover,.hbtn:active{opacity:1}
.hud-info{display:flex;gap:8px;align-items:center;font-size:.74rem;background:#111a15;padding:5px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.12);pointer-events:none;opacity:.85}
.hud-info:empty{display:none}
.hud-info .dot{width:8px;height:8px;border-radius:50%;background:#6fe39a;display:inline-block}
.hud-info .dot.mid{background:#ffd84a}.hud-info .dot.bad{background:#ff6b6b}
.badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:#e03a3a;color:#fff;font:700 .7rem/18px system-ui;text-align:center;padding:0 4px;font-style:normal}

.controls{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 8px calc(8px + var(--safe-b));background:linear-gradient(#0a110d,#050805);overflow:hidden}
.ctl-top{display:flex;gap:6px}
.kbtn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:.3em .7em;border-radius:10px;background:#16241b;border:1px solid #2c4636;font-weight:700;font-size:.8rem;flex:1;color:#dfe8e2;white-space:nowrap;user-select:none;-webkit-user-select:none}
.kbtn:active,.kbtn.on{background:#1d44a8;border-color:#5b86ff;color:#fff}
.kbtn .i{width:1.1em;height:1.1em}
.keys{display:flex;flex-wrap:wrap;gap:6px;overflow:hidden}
.keys::-webkit-scrollbar{display:none}
.keys .kbtn{flex:1 0 auto;min-width:46px;min-height:40px}
body.padon .keys{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.gamepad{display:flex;justify-content:space-between;align-items:center;flex:1;min-height:120px;padding:0 6px}
.dpad{position:relative;width:150px;height:150px;flex:none}
.dpad button,.abtns button{position:absolute;width:50px;height:50px;border-radius:12px;background:rgba(40,70,52,.8);border:1px solid #4a7a5c;color:#fff;font-weight:800;font-size:1rem;user-select:none;-webkit-user-select:none;touch-action:none}
.dpad button:active,.abtns button:active,.dpad button.on,.abtns button.on{background:#1d44a8;border-color:#7ea0ff}
.dpad [data-k=up]{left:50px;top:0}.dpad [data-k=down]{left:50px;bottom:0}.dpad [data-k=left]{left:0;top:50px}.dpad [data-k=right]{right:0;top:50px}
.dpad [data-k=up]::after,.dpad [data-k=down]::after,.dpad [data-k=left]::after,.dpad [data-k=right]::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border:9px solid transparent}
.dpad [data-k=up]::after{border-bottom:14px solid #fff;border-top:0}.dpad [data-k=down]::after{border-top:14px solid #fff;border-bottom:0}
.dpad [data-k=left]::after{border-right:14px solid #fff;border-left:0}.dpad [data-k=right]::after{border-left:14px solid #fff;border-right:0}
.abtns{position:relative;width:150px;height:150px;flex:none}
.abtns button{border-radius:50%;width:62px;height:62px}
.abtns [data-k=a]{right:0;top:44px}.abtns [data-k=b]{right:44px;bottom:0}.abtns [data-k=c]{right:44px;top:0}.abtns [data-k=d]{right:88px;top:44px}
.kbd-input{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;font-size:16px;border:0;padding:0}

/* horizontal: controles en el espacio negro, juego un poco a la izquierda */
@media (orientation:landscape) and (max-height:620px){
  .stage{flex-direction:row;justify-content:flex-start;padding:var(--safe-t) var(--safe-r) 0 var(--safe-l)}
  .screen{width:auto;height:100%;max-height:none;max-width:none;flex:none}
  .hud{height:auto;padding:4px 6px}
  .hud-info{position:absolute;left:6px;top:52px;font-size:.68rem;padding:4px 8px;max-width:118px;flex-wrap:wrap;gap:4px}
  .controls{position:absolute;inset:0;background:none;pointer-events:none;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);display:block}
  .controls>*{pointer-events:auto}
  .ctl-top{position:absolute;left:calc(6px + var(--safe-l));top:52px;flex-direction:column;width:118px;gap:4px}
  body.online .ctl-top{top:92px}
  .kbtn{min-height:36px;font-size:.72rem;padding:.2em .5em;background:rgba(22,36,27,.9)}
  .keys{position:absolute;right:calc(6px + var(--safe-r));top:52px;bottom:6px;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;width:78px;gap:4px}
  .keys .kbtn{flex:none;min-width:0;width:100%;min-height:34px}
  body.padon .keys{display:none}
  .gamepad{position:absolute;left:0;right:0;bottom:calc(6px + var(--safe-b));top:auto;padding:0;min-height:0;flex:none;pointer-events:none;height:116px}
  .gamepad>*{pointer-events:auto;position:absolute;bottom:0;transform:scale(.76)}
  .dpad{left:calc(2px + var(--safe-l));transform-origin:bottom left}
  .abtns{right:calc(4px + var(--safe-r));transform-origin:bottom right}
}
/* en PC (pantalla grande y puntero) se ocultan los controles táctiles */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .controls{display:none}
  .stage{align-items:center;justify-content:center}
  .screen{width:min(100vw,calc(100vh * 4/3));max-height:100%;height:auto}
}
body.desk-controls .controls{display:flex}
.chat{position:absolute;z-index:40;right:8px;bottom:8px;top:60px;width:min(340px,calc(100% - 16px));background:rgba(10,17,13,.96);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);position:relative}
.chat-head .xbtn{position:static;width:34px;height:34px;margin-left:auto}
.chat-log{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.msgb{max-width:85%;padding:.45em .75em;border-radius:12px;background:#1a2a21;font-size:.9rem;word-break:break-word}
.msgb.me{align-self:flex-end;background:#1d44a8}.msgb small{display:block;color:#9fb3a6;font-size:.7rem}
.msgb.sys{align-self:center;background:none;color:var(--muted);font-size:.78rem}
.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chat-form input{flex:1;background:#0c1510;border:1px solid var(--line);border-radius:10px;padding:.6em .8em;font-size:16px;color:var(--ink)}

/* fondo de estadio alrededor del juego */
@media (orientation:portrait){.stage{background-image:url("../img/ui-game-m.jpg")}}