:root{
  --bg:#0c1320;
  --field:#11352b;
  --line:#2cc598;
  --accent:#ffd34d;
  --text:#eef3ff;
  --danger:#ff6b6b;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial}
#app{position:relative;display:flex;align-items:center;justify-content:center}
#game{width:100vw;height:100vh;display:block;touch-action:none;background:linear-gradient(180deg,#0e1a2e, #0c1320)}
#app .game-wrap{position:relative;display:inline-block}
#topbar.pleca{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;background:var(--accent);color:#111;padding:8px 12px;border-radius:12px;box-shadow:0 4px 0 #a07f12;display:flex;align-items:center;justify-content:space-between;gap:10px;width:calc(100% - 16px);font-weight:800}
#topbar.pleca > div{color:#111}
#hud{position:fixed;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;pointer-events:auto}
#mode{font-weight:600}
#round{opacity:.9}
#score{font-weight:700}
#timer{font-variant-numeric:tabular-nums;font-weight:700}
.buttons{display:flex;gap:8px}
button{background:var(--accent);color:#1a1a1a;border:none;border-radius:10px;padding:10px 14px;font-weight:700;box-shadow:0 2px 0 #a07f12;cursor:pointer}
button:active{transform:translateY(1px)}

#overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
#overlay.hidden{display:none}
#moscoImg{width:180px;height:180px;object-fit:contain;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.4);background:#222;opacity:1;filter:none}
#message{font-size:20px;font-weight:800;white-space:pre-line;line-height:1.25}

/* Seleccion de equipo rival */
#teamSelect{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
#teamSelect.hidden{display:none}
#teamSelect .panel{background:#121a2a;border:1px solid #2a3858;border-radius:16px;padding:16px 16px 10px;max-width:380px;width:auto;box-shadow:0 12px 40px rgba(0,0,0,.45)}
#teamSelect h2{margin:0 0 12px;font-size:18px}
#teamSelect .teams{display:grid;grid-template-columns:repeat(2,160px);gap:10px;justify-content:center}
#teamSelect .team{display:flex;flex-direction:column;align-items:center;gap:6px;background:#182238;border:1px solid #2e3e5f;border-radius:12px;padding:8px;cursor:pointer}
#teamSelect .team:hover{background:#1e2a45}
#teamSelect .team img{width:72px;height:72px;object-fit:contain;background:#ffffff;border-radius:10px;padding:6px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
#teamSelect .team span{font-weight:700;color:#ffffff}

@media (min-width: 768px){
  #game{max-width:430px;max-height:920px;border-radius:16px;border:1px solid #2a3858}
}

/* Controles inferiores (defensa) */
#controls{position:fixed;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:16px;pointer-events:auto}
#controls.hidden{display:none}
#controls button{width:72px;height:72px;border-radius:50%;font-size:0;font-weight:900;background:#24314e;color:#eef3ff;border:2px solid #3a4b71;box-shadow:0 4px 0 rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:0;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#controls button:active{transform:translateY(1px)}
#controls button::before{content:'';display:block;width:36px;height:36px;background-position:center;background-repeat:no-repeat;background-size:contain;pointer-events:none}
#btnUp::before{background-image:url('assets/arrow_up.svg')}
#btnDown::before{background-image:url('assets/arrow_down.svg')}

/* Control de punteria para ofensiva */
#aimPad{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:132px;height:132px;border-radius:50%;
  background:#24314e; border:2px solid #3a4b71; box-shadow:0 6px 0 rgba(0,0,0,.25); cursor:pointer; z-index:30;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); touch-action:none}
#aimPad::after{content:'';width:8px;height:8px;border-radius:50%;background:#ffd34d;opacity:.85;box-shadow:0 0 0 6px rgba(255,211,77,.15)}
#aimPad.hidden{display:none}

/* Evitar seleccion de texto y callouts en movil (excepto inputs) */
body, #app, canvas, button, #overlay, #finalResults, #finalSplash, #controls, #captainSelect, #teamSelect, .panel, .scores, #aimPad{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.final-form input{ -webkit-user-select:text; user-select:text; }

/* Oculta duplicados en HUD (ahora estan en la pleca) */
#hud #mode, #hud #round, #hud #score, #hud #timer{display:none}
#hud .buttons{display:none}

/* Final del juego: animaciones y marcadores */
.anim-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.star{position:absolute;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffd34d 70%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 8px rgba(255,211,77,.8);
  animation:fallPos var(--dur,2.5s) linear infinite, twinkle 1.2s ease-in-out infinite;
}
.star.rise{animation:risePos var(--dur,2.5s) linear infinite, twinkle 1.2s ease-in-out infinite}
.poop{position:absolute;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
  animation:fallPos var(--dur,3s) linear infinite, wobble 1.4s ease-in-out infinite;
}
@keyframes fallPos{from{top:-10%;opacity:.95} to{top:120%;opacity:.95}}
@keyframes risePos{from{top:120%;opacity:.95} to{top:-20%;opacity:.9}}
@keyframes twinkle{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes wobble{0%,100%{transform:rotate(0)}50%{transform:rotate(var(--spin,18deg))}}
.final-form{display:flex;gap:8px;align-items:center;justify-content:center}
.final-form input{padding:8px 10px;border-radius:10px;border:1px solid #2a3858;background:#121a2a;color:#fff;min-width:180px}
.final-form button{background:var(--accent);color:#1a1a1a;border:none;border-radius:10px;padding:10px 14px;font-weight:800;box-shadow:0 2px 0 #a07f12;cursor:pointer}
.final-hint{font-size:12px;opacity:.8;margin:0 0 8px;text-align:center}
.final-hint.final-success{color:#2cc598;}
.final-hint.final-error{color:#ff6b6b;}
.scores{max-width:420px;width:100%;background:#121a2a;border:1px solid #2a3858;border-radius:12px;padding:10px;max-height:280px;overflow-y:auto}
.scores:empty{display:none}
.scores h3{margin:0 0 6px}
.scores table{width:100%;border-collapse:collapse;font-size:12px}
.scores th,.scores td{border-bottom:1px solid #2a3858;padding:6px;text-align:left}
.scores tr:last-child td{border-bottom:none}

/* Pantallas finales tipo splash/panel */
#finalSplash{position:fixed;inset:0;z-index:25;background:radial-gradient(1200px 600px at 50% 10%, rgba(44,197,152,.18), transparent 60%), linear-gradient(180deg,#0e1a2e, #0c1320);display:flex;align-items:center;justify-content:center}
#finalSplash.hidden{display:none}
#finalSplash .splash-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:transparent;border:none;box-shadow:none;padding:0}
#finalSplash .splash-logo{width:300px;height:auto}
#finalSplash .splash-title{text-align:center;font-size:28px;font-weight:900;margin:6px 0 0}
#finalResults{position:fixed;inset:0;z-index:26;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
#finalResults.hidden{display:none}
#finalResults .panel{background:#121a2a;border:1px solid #2a3858;border-radius:16px;padding:16px 16px 10px;max-width:440px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.45)}

/* Seleccion de capitan (mismas reglas de teamSelect) */
#captainSelect{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
#captainSelect.hidden{display:none}
#captainSelect .panel{background:#121a2a;border:1px solid #2a3858;border-radius:16px;padding:16px 16px 10px;max-width:380px;width:auto;box-shadow:0 12px 40px rgba(0,0,0,.45)}
#captainSelect h2{margin:0 0 12px;font-size:18px}
#captainSelect .teams{display:grid;grid-template-columns:repeat(2,160px);gap:10px;justify-content:center}
#captainSelect .team{display:flex;flex-direction:column;align-items:center;gap:6px;background:#182238;border:1px solid #2e3e5f;border-radius:12px;padding:8px;cursor:pointer}
#captainSelect .team:hover{background:#1e2a45}
#captainSelect .team img{width:72px;height:72px;object-fit:contain;background:#ffffff;border-radius:10px;padding:6px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
#captainSelect .team span{font-weight:700;color:#ffffff}

/* Splash inicial */
#splash{position:fixed;inset:0;z-index:20;background:radial-gradient(1200px 600px at 50% 10%, rgba(44,197,152,.25), transparent 60%), linear-gradient(180deg,#0e1a2e, #0c1320);display:flex;align-items:center;justify-content:center}
#splash.hidden{display:none}
#splash .splash-card{background:rgba(18,26,42,.85);backdrop-filter:blur(6px);border:1px solid #2a3858;border-radius:16px;padding:20px 18px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 16px 50px rgba(0,0,0,.45);animation:splash-in .6s ease-out both}
.splash-logo{width:132px;height:132px;object-fit:contain;animation:floaty 3s ease-in-out infinite}
.splash-title{margin:0;color:#ffffff;font-size:22px;letter-spacing:.4px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.splash-start{background:linear-gradient(90deg,#ffd34d,#ffb84d);color:#1a1a1a;border:none;border-radius:12px;padding:12px 18px;font-weight:900;box-shadow:0 0 0 0 rgba(255,211,77,.6), 0 3px 0 #a07f12;cursor:pointer;animation:glow 2.2s ease-in-out infinite}
.splash-start:active{transform:translateY(1px)}
@keyframes splash-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(255,211,77,.6),0 3px 0 #a07f12}70%{box-shadow:0 0 0 16px rgba(255,211,77,0),0 3px 0 #a07f12}100%{box-shadow:0 0 0 0 rgba(255,211,77,0),0 3px 0 #a07f12}}

/* Capitan: marcar invalidos solo con cruz roja (sin opacidad) */
#captainSelect .team.invalid{position:relative;pointer-events:none}
#captainSelect .team .invalid-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;pointer-events:none;z-index:3}
#captainSelect .team .invalid-cross::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:0 0 0 3px #ff1f2d}
#captainSelect .team .invalid-cross .bar{position:absolute;left:50%;top:50%;width:64px;height:10px;background:#ff1f2d;border-radius:6px;transform-origin:center}
#captainSelect .team .invalid-cross .bar.b1{transform:translate(-50%,-50%) rotate(45deg)}
#captainSelect .team .invalid-cross .bar.b2{transform:translate(-50%,-50%) rotate(-45deg)}
#captainSelect .team.invalid::after{content:'✖';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ff4d4d;font-size:56px;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.4);pointer-events:none;z-index:2}