/* PENALTY KINGS - Estilos del juego completo */
:root {
  --gold:#F5C842;--gold2:#E0A800;--green:#00E676;--blue:#0A84FF;
  --red:#FF3B3B;--dark:#080C14;--dark2:#0D1220;--dark3:#111827;
  --card:#141C2E;--card2:#1A2540;--border:#1E2D4A;--text:#E8EDF5;
  --text2:#8B9BB4;--white:#FFFFFF;--purple:#AF52DE;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden;min-height:100vh}

/* ── TOASTS ── */
#toasts{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{background:var(--card2);border:1px solid var(--border);color:var(--text);padding:.7rem 1.2rem;
  border-radius:10px;font-size:.85rem;display:flex;align-items:center;gap:.5rem;
  transform:translateX(120%);transition:.3s;box-shadow:0 4px 24px rgba(0,0,0,.4);pointer-events:auto}
.toast.show{transform:translateX(0)}
.toast-success{border-color:var(--green);color:var(--green)}
.toast-error{border-color:var(--red);color:var(--red)}
.toast-warning{border-color:var(--gold);color:var(--gold)}
.toast-info{border-color:var(--blue);color:var(--blue)}

/* ── HIDDEN ── */
.hidden{display:none!important}

/* ── AUTH PAGES ── */
#page-login,#page-register{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(10,132,255,.08) 0%,transparent 70%)}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:2.5rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.auth-logo{text-align:center;margin-bottom:2rem}
.auth-logo .logo-big{width:64px;height:64px;background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-radius:16px;margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;font-size:32px}
.auth-logo h1{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:900;
  letter-spacing:3px;color:var(--white)}
.auth-logo h1 span{color:var(--gold)}
.auth-logo p{color:var(--text2);font-size:.85rem;margin-top:.3rem}
.auth-form{display:flex;flex-direction:column;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.78rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.form-group input{background:var(--dark2);border:1px solid var(--border);color:var(--text);
  padding:.7rem 1rem;border-radius:8px;font-size:.9rem;transition:.2s;outline:none}
.form-group input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,200,66,.1)}
.btn-auth{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;padding:.85rem;
  border-radius:8px;font-weight:700;font-size:1rem;border:none;cursor:pointer;
  letter-spacing:.5px;transition:.2s;width:100%}
.btn-auth:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(245,200,66,.4)}
.btn-auth:disabled{opacity:.6;transform:none}
.auth-switch{text-align:center;margin-top:1rem;font-size:.85rem;color:var(--text2)}
.auth-switch a{color:var(--gold);text-decoration:none;font-weight:600;cursor:pointer}
.auth-switch a:hover{text-decoration:underline}
.auth-divider{text-align:center;color:var(--text2);font-size:.8rem;position:relative;margin:.5rem 0}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}
.auth-divider::before{left:0}.auth-divider::after{right:0}

/* ── APP SHELL ── */
#app-shell{display:flex;flex-direction:column;min-height:100vh}
.top-bar{position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(8,12,20,.95);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);height:56px;
  display:flex;align-items:center;padding:0 1rem;gap:1rem}
.top-bar-logo{font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;font-weight:900;
  color:var(--white);letter-spacing:2px;white-space:nowrap}
.top-bar-logo span{color:var(--gold)}
.top-bar-user{display:flex;align-items:center;gap:.8rem;margin-left:auto}
.top-wallet{display:flex;gap:.8rem;align-items:center}
.wallet-pill{background:var(--dark2);border:1px solid var(--border);border-radius:20px;
  padding:.25rem .7rem;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:.3rem}
.top-username{font-size:.85rem;font-weight:600;color:var(--text2);display:none}
@media(min-width:480px){.top-username{display:block}}
.top-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0}
.top-logout{background:none;border:1px solid var(--border);color:var(--text2);
  padding:.25rem .6rem;border-radius:6px;font-size:.75rem;cursor:pointer;transition:.2s}
.top-logout:hover{border-color:var(--red);color:var(--red)}

.main-content{flex:1;padding:56px 0 64px;overflow-y:auto}
.page-inner{max-width:900px;margin:0 auto;padding:1.2rem 1rem}

/* ── BOTTOM NAV ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(8,12,20,.97);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);display:flex;align-items:stretch}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;padding:.5rem .2rem;cursor:pointer;transition:.2s;border:none;
  background:none;color:var(--text2);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;min-height:56px}
.nav-item i{font-size:1.1rem;transition:.2s}
.nav-item.active{color:var(--gold)}
.nav-item.active i{color:var(--gold);filter:drop-shadow(0 0 6px rgba(245,200,66,.5))}
.nav-item:hover{color:var(--text)}

/* ── DASHBOARD ── */
.dashboard-hero{background:linear-gradient(135deg,var(--card) 0%,var(--card2) 100%);
  border:1px solid var(--border);border-radius:16px;padding:1.2rem;margin-bottom:1rem}
.hero-club{display:flex;align-items:center;gap:1rem}
.hero-logo{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:28px;border:2px solid;flex-shrink:0}
.hero-logo-emoji{font-size:28px}
.hero-info{flex:1;min-width:0}
.hero-club-name{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-user{font-size:.8rem;color:var(--text2)}
.hero-division{font-size:.85rem;font-weight:600;margin-top:.2rem}
.hero-elo-box{text-align:center;flex-shrink:0}
.hero-elo{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:900;color:var(--gold)}
.hero-elo-label{font-size:.65rem;color:var(--text2);text-transform:uppercase;letter-spacing:1px}

.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
@media(min-width:500px){.stats-row{grid-template-columns:repeat(6,1fr)}}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:.7rem .5rem;text-align:center}
.stat-val{font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;font-weight:900}
.stat-lbl{font-size:.6rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:.1rem}
.stat-val.green{color:var(--green)}
.stat-val.red{color:var(--red)}
.stat-val.gold{color:var(--gold)}
.stat-val.blue{color:var(--blue)}

.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1rem}
@media(min-width:500px){.quick-actions{grid-template-columns:repeat(4,1fr)}}
.qa-btn{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:1rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  cursor:pointer;transition:.2s;color:var(--text);font-family:'Barlow Condensed',sans-serif}
.qa-btn i{font-size:1.4rem;margin-bottom:.2rem}
.qa-btn span{font-size:1rem;font-weight:700;letter-spacing:1px}
.qa-btn small{font-size:.65rem;color:var(--text2)}
.qa-btn:hover{transform:translateY(-2px)}
.qa-play{border-color:rgba(0,230,118,.3);background:rgba(0,230,118,.04)}
.qa-play i{color:var(--green)}
.qa-tour{border-color:rgba(245,200,66,.3);background:rgba(245,200,66,.04)}
.qa-tour i{color:var(--gold)}
.qa-club{border-color:rgba(10,132,255,.3);background:rgba(10,132,255,.04)}
.qa-club i{color:var(--blue)}
.qa-rank{border-color:rgba(255,59,59,.3);background:rgba(255,59,59,.04)}
.qa-rank i{color:var(--red)}

.section-header{display:flex;align-items:center;justify-content:space-between;
  margin:.8rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.section-header h3{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700}

/* ── MATCH CARDS ── */
.match-card{display:flex;align-items:center;gap:.8rem;background:var(--card);
  border:1px solid var(--border);border-radius:10px;padding:.7rem 1rem;
  margin-bottom:.5rem;transition:.2s}
.match-card:hover{border-color:rgba(255,255,255,.1)}
.match-win{border-left:3px solid var(--green)}
.match-loss{border-left:3px solid var(--red)}
.match-draw{border-left:3px solid var(--gold)}
.match-result-badge{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.match-win .match-result-badge{background:rgba(0,230,118,.15);color:var(--green)}
.match-loss .match-result-badge{background:rgba(255,59,59,.15);color:var(--red)}
.match-draw .match-result-badge{background:rgba(245,200,66,.15);color:var(--gold)}
.match-teams{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;font-size:.82rem}
.match-score{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700;
  color:var(--white);white-space:nowrap}
.match-team{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.match-meta{display:flex;align-items:center;gap:.6rem;flex-shrink:0;font-size:.72rem;color:var(--text2)}
.match-elo{font-weight:700}
.green{color:var(--green)}
.red{color:var(--red)}
.gold{color:var(--gold)}
.blue{color:var(--blue)}

.empty-msg{text-align:center;color:var(--text2);padding:2rem;font-size:.9rem}

/* ── GAME ── */
.game-modes{padding:.5rem 0}
.mode-header{text-align:center;margin-bottom:1.5rem}
.mode-header h2{font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;font-weight:700}
.mode-grid{display:flex;flex-direction:column;gap:1rem}
@media(min-width:600px){.mode-grid{flex-direction:row}}
.mode-card{background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:.5rem;transition:.2s;
  position:relative;overflow:hidden;cursor:pointer}
.mode-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.15)}
.mode-card.mode-bot{border-color:rgba(0,230,118,.3);background:linear-gradient(135deg,rgba(0,230,118,.04),var(--card))}
.mode-card.mode-ranked{border-color:rgba(245,200,66,.2)}
.mode-icon{font-size:2rem;margin-bottom:.3rem}
.mode-name{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700;color:var(--white)}
.mode-desc{font-size:.82rem;color:var(--text2);line-height:1.5;flex:1}
.mode-reward{font-size:.75rem;color:var(--gold);margin-top:.2rem}
.mode-badge{position:absolute;top:.8rem;right:.8rem;background:var(--blue);color:#fff;
  font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;letter-spacing:.5px}
.mode-btn{background:linear-gradient(135deg,var(--green),#00C060);color:#000;padding:.6rem;
  border-radius:8px;border:none;font-weight:700;font-size:.85rem;cursor:pointer;
  margin-top:.5rem;transition:.2s}
.mode-btn:hover:not(:disabled){transform:translateY(-1px)}
.mode-btn:disabled{background:var(--card2);color:var(--text2);cursor:not-allowed}

/* ── GAME ARENA ── */
.game-arena{display:flex;flex-direction:column;gap:.8rem}
.game-hud{display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem}
.hud-team{text-align:center;min-width:80px}
.hud-club-name{font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.hud-score{font-family:'Barlow Condensed',sans-serif;font-size:2.5rem;font-weight:900;line-height:1}
.home-score{color:var(--green)}
.away-score{color:var(--red)}
.hud-center{text-align:center}
.hud-round{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;color:var(--white)}
.hud-phase{font-size:.75rem;color:var(--text2);margin-top:.2rem}

.field-container{background:linear-gradient(180deg,#0B4A1B 0%,#0A3D17 40%,#0B4A1B 100%);
  border-radius:16px;overflow:hidden;position:relative;padding:1rem}
.field-grass{position:relative;min-height:260px;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:1rem 0}
.field-markings{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 40px);
  border-radius:12px}
.goal-container{width:100%;max-width:420px;position:relative}
.goal-frame{background:rgba(0,0,0,.3);border:3px solid rgba(255,255,255,.7);
  border-bottom:none;border-radius:4px 4px 0 0;position:relative;
  aspect-ratio:3.5/1;max-height:140px;overflow:hidden}
.goal-net{position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,transparent 1px,transparent 14px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,transparent 1px,transparent 14px)}
.goal-zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr)}
.goal-zone{cursor:pointer;position:relative;transition:.2s;border:1px solid transparent}
.goal-zone:hover .zone-overlay,.goal-zone.selected .zone-overlay{opacity:1}
.zone-overlay{position:absolute;inset:0;background:rgba(245,200,66,.25);opacity:0;transition:.2s;border-radius:2px}
.goal-zone.selected .zone-overlay{background:rgba(245,200,66,.4)}

.keeper-sprite{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-size:2rem;transition:.4s;z-index:5}
.keeper-left{left:15%!important}
.keeper-center{left:50%!important}
.keeper-right{left:85%!important}

.penalty-spot{display:flex;flex-direction:column;align-items:center;margin-top:1rem}
.ball-sprite{font-size:2rem;transition:.5s;display:block}
.ball-flying{transform:translateY(-120px) scale(0.4)!important;opacity:.6}

.game-controls{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;text-align:center}
.ctrl-instruction{font-size:.85rem;color:var(--text2);margin-bottom:.5rem}
.power-bar-container{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.power-label{font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px}
.power-track{width:100%;max-width:300px;height:16px;background:var(--dark2);
  border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.power-fill{height:100%;width:0;transition:.05s;border-radius:8px;background:var(--green)}
.shoot-btn{background:linear-gradient(135deg,var(--red),#CC0000);color:#fff;
  padding:.7rem 2rem;border-radius:8px;border:none;font-weight:700;font-size:1rem;
  cursor:pointer;letter-spacing:1px;transition:.2s;margin-top:.3rem}
.shoot-btn:hover{transform:scale(1.04);box-shadow:0 4px 20px rgba(255,59,59,.4)}

.penalties-tracker{display:flex;align-items:center;justify-content:center;gap:1rem;
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.7rem}
.tracker-home,.tracker-away{display:flex;gap:.4rem}
.tracker-divider{font-size:.7rem;font-weight:700;color:var(--text2)}
.track-dot{font-size:1rem}
.dot-goal{color:var(--green)}
.dot-miss{color:var(--red)}
.dot-empty{color:var(--border);opacity:.4}

/* ── RESULT MODAL ── */
.result-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:1rem}
.result-modal{background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:2rem;width:100%;max-width:400px;max-height:90vh;overflow-y:auto;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.result-title{font-family:'Barlow Condensed',sans-serif;font-size:2.5rem;font-weight:900;margin-bottom:.5rem}
.result-score{font-family:'Barlow Condensed',sans-serif;font-size:3rem;font-weight:900;color:var(--white);margin:.5rem 0}
.result-vs{font-size:.85rem;color:var(--text2);margin-bottom:1.5rem}
.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.5rem}
.rs-item{background:var(--dark2);border-radius:8px;padding:.5rem}
.rs-val{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:700}
.rs-lbl{font-size:.6rem;color:var(--text2);text-transform:uppercase}
.penalties-summary{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.4rem}
.pen-row{display:flex;align-items:center;gap.5rem;background:var(--dark2);
  border-radius:6px;padding:.4rem .8rem;justify-content:space-between}
.pen-num{font-size:.75rem;font-weight:700;color:var(--text2);min-width:24px}
.pen-you,.pen-bot{font-size:.78rem;font-weight:700;padding:.15rem .5rem;border-radius:4px}
.scored{background:rgba(0,230,118,.1);color:var(--green)}
.missed{background:rgba(255,59,59,.1);color:var(--red)}
.result-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;
  padding:.7rem 1.5rem;border-radius:8px;border:none;font-weight:700;font-size:.9rem;
  cursor:pointer;transition:.2s}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,200,66,.4)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border);
  padding:.7rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}

/* ── CLUB ── */
.club-header{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.2rem;margin-bottom:1rem}
.club-logo-big{width:80px;height:80px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;cursor:pointer;transition:.2s}
.club-logo-big:hover{transform:scale(1.05)}
.club-logo-emoji{font-size:40px}
.club-details{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.5rem}
.club-name-input,.club-abbr-input{background:var(--dark2);border:1px solid var(--border);
  color:var(--text);padding:.6rem .8rem;border-radius:8px;font-size:.95rem;font-weight:600;outline:none;width:100%}
.club-abbr-input{width:80px;text-transform:uppercase}
.club-name-input:focus,.club-abbr-input:focus{border-color:var(--gold)}
.color-row,.stadium-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--text2)}
.color-row input[type=color]{width:36px;height:28px;border:none;border-radius:4px;cursor:pointer;background:none}
.color-row select,.stadium-row select{background:var(--dark2);border:1px solid var(--border);
  color:var(--text);padding:.4rem .6rem;border-radius:6px;font-size:.8rem;outline:none}
.kit-preview{flex-shrink:0;width:80px}
.kit-shirt{width:70px;height:80px;border-radius:8px 8px 16px 16px;position:relative;
  display:flex;align-items:center;justify-content:center}
.kit-collar{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:10px;background:rgba(0,0,0,.3);border-radius:0 0 6px 6px}
.kit-number{color:rgba(255,255,255,.6);font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem;font-weight:900;margin-top:8px}
.logo-picker{background:var(--dark2);border:1px solid var(--border);border-radius:12px;
  padding:1rem;margin-bottom:1rem}
.logo-options{display:flex;flex-wrap:wrap;gap:.5rem}
.logo-opt{font-size:1.6rem;cursor:pointer;width:40px;height:40px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:.2s;background:var(--card)}
.logo-opt:hover{background:var(--card2);transform:scale(1.1)}
.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.player-card{background:var(--card);border:1px solid;border-radius:14px;
  padding:1rem;text-align:center;transition:.2s;position:relative}
.player-card:hover{transform:translateY(-2px)}
.pc-header{border-radius:8px;padding:.3rem;margin:-1rem -1rem .7rem;display:flex;justify-content:space-between;align-items:center;padding:.3rem .6rem}
.pc-rarity{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.pc-overall{font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;font-weight:900;color:var(--white)}
.pc-emoji{font-size:2rem;margin:.3rem 0}
.pc-name{font-size:.78rem;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-stars{font-size:.6rem;margin:.2rem 0}
.pc-pos{font-size:.6rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:.4rem}
.pc-attrs{display:flex;flex-direction:column;gap:.2rem}
.pa{display:flex;justify-content:space-between;font-size:.72rem}
.pa span:first-child{color:var(--text2)}
.pa span:last-child{font-weight:700;color:var(--white)}
.pc-actions{margin-top:.6rem;display:flex;gap:.3rem;flex-wrap:wrap}
.pc-btn-train{flex:1;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.3);
  color:var(--gold);padding:.3rem;border-radius:6px;font-size:.7rem;cursor:pointer;
  font-weight:600;transition:.2s}
.pc-btn-train:hover{background:rgba(245,200,66,.2)}
.btn-small{background:var(--dark2);border:1px solid var(--border);color:var(--text);
  padding:.3rem .7rem;border-radius:6px;font-size:.75rem;cursor:pointer;transition:.2s}
.btn-small:hover{border-color:var(--gold);color:var(--gold)}
.red-btn{border-color:rgba(255,59,59,.3)!important;color:var(--red)!important}
.red-btn:hover{background:rgba(255,59,59,.1)!important}
.green-btn{border-color:rgba(0,230,118,.3)!important;color:var(--green)!important}
.train-attrs{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0;text-align:left}
.ta-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  background:var(--dark2);padding:.6rem .8rem;border-radius:8px;font-size:.82rem}
.ta-row span{color:var(--text2)}
.btn-train-attr{background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.3);
  color:var(--gold);padding:.3rem .6rem;border-radius:6px;font-size:.7rem;cursor:pointer;
  font-weight:600;white-space:nowrap;transition:.2s}
.btn-train-attr:hover{background:rgba(245,200,66,.2)}
.btn-train-attr:disabled{opacity:.5;cursor:not-allowed}

/* ── RANKING ── */
.my-rank-card{background:var(--card);border:2px solid;border-radius:14px;padding:1rem;
  display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.my-rank-num{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:900;color:var(--gold);flex-shrink:0}
.my-rank-info{flex:1;min-width:0}
.my-rank-name{font-weight:700;font-size:.95rem}
.my-rank-div{font-size:.82rem;font-weight:600;margin-top:.1rem}
.my-rank-elo{font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;font-weight:900;color:var(--white);flex-shrink:0;text-align:right}
.my-rank-elo span{font-size:.7rem;color:var(--text2);display:block}
.rank-tabs{display:flex;gap:.5rem;margin-bottom:.8rem;overflow-x:auto;padding-bottom:.2rem}
.rank-tab{background:var(--card);border:1px solid var(--border);color:var(--text2);
  padding:.4rem .9rem;border-radius:6px;font-size:.78rem;cursor:pointer;
  white-space:nowrap;transition:.2s;font-weight:600}
.rank-tab.active{border-color:var(--gold);color:var(--gold);background:rgba(245,200,66,.08)}
.rank-row{display:flex;align-items:center;gap:.7rem;background:var(--card);
  border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem;margin-bottom:.4rem;transition:.2s}
.rank-row:hover{border-color:rgba(255,255,255,.1)}
.rank-me{border-color:var(--gold)!important;background:rgba(245,200,66,.04)!important}
.rank-pos{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;min-width:32px;flex-shrink:0}
.rank-logo{font-size:1.3rem;flex-shrink:0}
.rank-info{flex:1;min-width:0}
.rank-name{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-club{font-size:.72rem;color:var(--text2)}
.rank-stats{text-align:right;flex-shrink:0}
.rank-elo{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700}
.rank-wl{font-size:.7rem;color:var(--text2)}

/* ── STORE ── */
.store-wallet{display:flex;gap:.8rem;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem}
.wallet-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600}
.store-sections{display:flex;flex-direction:column;gap:1.5rem}
.store-section h3{font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;font-weight:700;
  margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.store-item{background:var(--card);border:1px solid;border-radius:14px;padding:1rem;
  text-align:center;position:relative;transition:.2s}
.store-item:hover{transform:translateY(-2px)}
.item-featured{position:absolute;top:.5rem;right:.5rem;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--gold)}
.item-icon{font-size:2rem;margin-bottom:.4rem}
.item-name{font-weight:700;font-size:.88rem;color:var(--white);margin-bottom:.2rem}
.item-desc{font-size:.72rem;color:var(--text2);margin-bottom:.4rem;line-height:1.4}
.item-rarity{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.4rem}
.item-price{font-size:.78rem;font-weight:600;margin-bottom:.6rem;display:flex;align-items:center;gap:.3rem;justify-content:center}
.btn-buy{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;
  padding:.4rem .8rem;border-radius:6px;border:none;font-weight:700;font-size:.78rem;
  cursor:pointer;transition:.2s;width:100%}
.btn-buy:hover{transform:scale(1.03)}
.pack-players{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0}
.pack-player{background:var(--dark2);border:2px solid;border-radius:12px;padding:1rem .8rem;
  text-align:center;min-width:100px}
.pp-rarity{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem}
.pp-emoji{font-size:1.8rem;margin-bottom:.3rem}
.pp-name{font-size:.75rem;font-weight:700;color:var(--white)}
.pp-overall{font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;font-weight:900;
  color:var(--gold);margin-top:.2rem}

/* ── TOURNAMENTS ── */
.tournaments-list{display:flex;flex-direction:column;gap:.8rem}
.tournament-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem}
.tc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.tc-name{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700}
.tc-status{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  padding:.2rem .5rem;border-radius:4px}
.status-active{background:rgba(0,230,118,.15);color:var(--green)}
.status-upcoming{background:rgba(10,132,255,.15);color:var(--blue)}
.status-finished{background:rgba(255,255,255,.07);color:var(--text2)}
.tc-info{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem;font-size:.82rem;color:var(--text2)}
.tc-info>div{display:flex;align-items:center;gap:.3rem}
.tc-progress{height:4px;background:var(--dark2);border-radius:2px;margin-bottom:.5rem;overflow:hidden}
.tc-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--green));border-radius:2px;transition:.3s}
.tc-dates{font-size:.72rem;color:var(--text2);display:flex;gap:1rem;margin-bottom:.8rem}
.tc-join{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;
  border:none;padding:.5rem 1.2rem;border-radius:8px;font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s}
.tc-join:hover{transform:translateY(-1px)}

/* ── PROFILE ── */
.profile-hero{background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:1.5rem;display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.profile-avatar{font-size:3rem;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.profile-info{flex:1;min-width:0}
.profile-username{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:700}
.profile-club{font-size:.82rem;color:var(--text2)}
.profile-division{font-size:.88rem;font-weight:600;margin:.2rem 0}
.profile-rank{font-size:.82rem;color:var(--text2)}
.profile-rank strong{color:var(--white)}
.profile-elo-display{text-align:center;flex-shrink:0}
.elo-big{font-family:'Barlow Condensed',sans-serif;font-size:3rem;font-weight:900;line-height:1}
.elo-label{font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:2px}
.profile-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1rem}
@media(min-width:500px){.profile-stats-grid{grid-template-columns:repeat(8,1fr)}}
.ps-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.6rem .4rem;text-align:center}
.ps-val{font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;font-weight:900}
.ps-lbl{font-size:.55rem;color:var(--text2);text-transform:uppercase;letter-spacing:.3px;margin-top:.1rem}

/* ── ADMIN ── */
.admin-header{margin-bottom:1rem}
.admin-header h2{font-family:'Barlow Condensed',sans-serif;font-size:1.6rem;font-weight:700}
.admin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1.5rem}
@media(min-width:500px){.admin-stats{grid-template-columns:repeat(4,1fr)}}
.as-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1rem;text-align:center}
.as-val{font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;font-weight:900;color:var(--white)}
.as-lbl{font-size:.65rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:.2rem}
.admin-sections{display:flex;flex-direction:column;gap:1.5rem}
.admin-section{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem}
.admin-section h3{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.admin-table{display:flex;flex-direction:column;gap:.3rem;overflow-x:auto}
.at-row{display:flex;gap:.8rem;align-items:center;padding:.4rem .6rem;border-radius:6px;
  font-size:.78rem;min-width:420px}
.at-header{background:var(--dark2);font-weight:700;color:var(--text2);font-size:.7rem;text-transform:uppercase}
.at-row span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-row span:first-child{max-width:30px;flex:0 0 30px}
.admin-form,.admin-search{display:flex;flex-direction:column;gap:.6rem}
.admin-input{background:var(--dark2);border:1px solid var(--border);color:var(--text);
  padding:.6rem .8rem;border-radius:8px;font-size:.85rem;outline:none;transition:.2s}
.admin-input:focus{border-color:var(--gold)}
.admin-input select{color:var(--text)}

/* ── BUTTONS GENERAL ── */
button:disabled{opacity:.5;cursor:not-allowed!important}
.btn-auth:disabled,.mode-btn:disabled{pointer-events:none}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ── RESPONSIVE ── */
@media(max-width:380px){
  .result-stats{grid-template-columns:repeat(2,1fr)}
  .profile-stats-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── MEJORAS RESULTADO PARTIDA ── */
.result-overlay { position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;
  justify-content:center;z-index:9999;padding:1rem;opacity:0;transition:opacity .3s }
.result-overlay.show { opacity:1 }
.result-modal { background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:1.5rem 1.2rem;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;
  animation:slideUp .3s ease }
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.result-title { font-family:'Barlow Condensed',sans-serif;font-size:2.2rem;font-weight:900;
  text-align:center;letter-spacing:1px;margin-bottom:.3rem }
.result-score { font-family:'Barlow Condensed',sans-serif;font-size:3.5rem;font-weight:900;
  text-align:center;color:var(--white);letter-spacing:2px }
.result-vs { text-align:center;color:var(--text2);font-size:.82rem;margin:.3rem 0 .2rem;display:flex;
  flex-direction:column;align-items:center;gap:.1rem }
.result-diff { text-align:center;font-size:.75rem;color:var(--text2);margin-bottom:.8rem }
.result-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.8rem 0 }
.rs-item { background:var(--dark2);border-radius:10px;padding:.6rem .3rem;text-align:center }
.rs-val { font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;font-weight:900 }
.rs-lbl { font-size:.6rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:.1rem }
.streak-badge { background:linear-gradient(135deg,#ff6b35,#f5c842);color:#000;
  font-weight:700;font-size:.82rem;border-radius:20px;padding:.3rem .8rem;
  text-align:center;margin-bottom:.5rem }

/* Tabla de penales en resultado */
.penalties-summary { display:flex;flex-direction:column;gap:.3rem;margin:.8rem 0 }
.pen-header { display:grid;grid-template-columns:30px 1fr 50px 1fr;gap:.3rem;
  font-size:.65rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;
  padding:.2rem .5rem }
.pen-row { display:grid;grid-template-columns:30px 1fr 50px 1fr;gap:.3rem;align-items:center;
  background:var(--dark2);border-radius:8px;padding:.4rem .5rem;font-size:.8rem }
.pen-num { color:var(--text2);font-size:.72rem;font-weight:600 }
.pen-you,.pen-bot { font-weight:600 }
.pen-score { text-align:center;font-family:'Barlow Condensed',sans-serif;font-size:.95rem;
  font-weight:700;color:var(--white) }
.pen-you.scored,.pen-bot.scored { color:#00E676 }
.pen-you.missed,.pen-bot.missed { color:#FF3B3B }
.result-actions { display:flex;gap:.8rem;margin-top:1rem }
.result-actions button { flex:1 }

/* ── ZONA ANIMACIÓN HIT ── */
.goal-zone.zone-hit { background:rgba(245,200,66,.35)!important;
  animation:zoneFlash .5s ease forwards }
@keyframes zoneFlash {
  0%{background:rgba(245,200,66,.5)} 50%{background:rgba(245,200,66,.2)} 100%{background:transparent}
}

/* ── FORM SELECT ── */
.form-select { width:100%;background:var(--dark2);border:1px solid var(--border);color:var(--text);
  padding:.75rem 1rem;border-radius:10px;font-size:.9rem;outline:none;
  appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s }
.form-select:focus { border-color:var(--gold) }

/* ── RANKING MEJORADO ── */
.rank-row { display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  margin-bottom:.4rem;transition:background .2s }
.rank-row:hover { background:var(--dark2) }
.rank-me { border-color:var(--gold)!important;background:rgba(245,200,66,.05)!important }
.rank-pos { font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:900;
  min-width:30px;text-align:center }
.rank-logo { font-size:1.4rem;flex-shrink:0 }
.rank-info { flex:1;min-width:0 }
.rank-name { font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.rank-club { font-size:.72rem;color:var(--text2);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.rank-stats { text-align:right;flex-shrink:0 }
.rank-elo { font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;line-height:1 }
.rank-wl { font-size:.68rem;color:var(--text2);margin-top:.1rem }
.my-rank-card { display:flex;align-items:center;gap:.8rem;background:var(--card);
  border:2px solid;border-radius:14px;padding:1rem;margin-bottom:1rem }
.my-rank-num { font-family:'Barlow Condensed',sans-serif;font-size:2.5rem;font-weight:900;color:var(--gold);min-width:60px }
.my-rank-info { flex:1 }
.my-rank-name { font-weight:700;font-size:1rem }
.my-rank-div { font-size:.8rem;margin-top:.2rem }
.my-rank-elo { font-family:'Barlow Condensed',sans-serif;font-size:1.6rem;font-weight:900;color:var(--white) }
.my-rank-elo span { font-size:.75rem;color:var(--text2) }
.rank-tabs { display:flex;gap:.4rem;margin-bottom:1rem;overflow-x:auto;padding-bottom:.3rem;
  scrollbar-width:none }
.rank-tabs::-webkit-scrollbar { display:none }
.rank-tab { flex-shrink:0;background:var(--card);border:1px solid var(--border);color:var(--text2);
  padding:.4rem .7rem;border-radius:20px;font-size:.75rem;font-weight:600;cursor:pointer;transition:.2s }
.rank-tab.active { background:var(--gold);color:#000;border-color:var(--gold) }

/* ── HUD GAME ── */
.hud-phase { font-size:.78rem;color:var(--text2);margin-top:.2rem;transition:color .3s }

/* ═══════════════════════════════════════════════════════════════
   PENALTY KINGS — NUEVO SISTEMA DE JUEGO VISUAL (pk-*)
   Canvas 3D + Personajes CSS + Balón con física + Power bar
   ═══════════════════════════════════════════════════════════════ */

/* ── ARENA PRINCIPAL ── */
.pk-arena {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--dark);
  border-radius: 16px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── HUD SUPERIOR ── */
.pk-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #0A1020 0%, #0D1628 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: .55rem .8rem;
  gap: .5rem;
}
.pk-hud-team {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex: 1;
}
.pk-hud-away {
  flex-direction: row-reverse;
}
.pk-hud-logo {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.pk-hud-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pk-hud-info-r {
  align-items: flex-end;
}
.pk-hud-name {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.pk-hud-score {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.pk-score-home { color: var(--green); }
.pk-score-away { color: var(--red); }

.pk-hud-center {
  text-align: center;
  flex-shrink: 0;
  padding: 0 .4rem;
}
.pk-hud-round {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
}
.pk-hud-phase {
  font-size: .65rem;
  color: var(--text2);
  margin-top: .1rem;
  transition: color .3s;
  min-height: 1em;
}

/* Dots tracker de penales */
.pk-pen-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
  margin-top: .25rem;
}
.pk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background .3s, transform .3s;
  display: inline-block;
}
.pk-dot-sep {
  font-size: .6rem;
  color: var(--border);
  margin: 0 2px;
}
.pk-dot-goal {
  background: var(--green) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 6px rgba(0,230,118,.6);
  transform: scale(1.2);
}
.pk-dot-miss {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

/* ── CAMPO: CONTENEDOR DEL CANVAS Y OVERLAYS ── */
.pk-field-wrap {
  position: relative;
  width: 100%;
  background: #030810;
  overflow: hidden;
  /* La altura la setea drawStadium() en JS */
}

#stadium-canvas {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
}

/* ── KEEPER CSS ── */
.pk-keeper-wrap {
  position: absolute;
  z-index: 10;
  transform: translateX(-50%);
  /* left y top los setea positionOverlays() */
  transition: left .20s cubic-bezier(.2,.8,.4,1);
  pointer-events: none;
}

.pk-keeper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .20s cubic-bezier(.2,.8,.4,1);
  transform-origin: bottom center;
}

.pk-k-shadow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 6px;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  filter: blur(2px);
}

.pk-k-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Cabeza */
.pk-k-head {
  width: 18px;
  height: 18px;
  background: #D4A476;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}
.pk-k-hair {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #3A2010;
  border-radius: 9px 9px 0 0;
}
.pk-k-face {
  position: absolute;
  bottom: 2px;
  left: 3px;
  right: 3px;
  height: 8px;
  background: #D4A476;
  border-radius: 0 0 6px 6px;
}

/* Torso */
.pk-k-torso {
  width: 24px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
}
.pk-k-jersey {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #FF6B00, #E05500);
  border-radius: 4px 4px 2px 2px;
  border-top: 2px solid rgba(255,255,255,.2);
}

/* Brazos */
.pk-k-arm {
  position: absolute;
  top: 2px;
  width: 7px;
  height: 16px;
  background: #FF6B00;
  border-radius: 3px;
  z-index: 1;
}
.pk-k-arm-l { left: -8px; transform: rotate(-15deg); transform-origin: top center; }
.pk-k-arm-r { right: -8px; transform: rotate(15deg); transform-origin: top center; }

.pk-k-glove {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 8px;
  background: #FFDD00;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.3);
}

/* Pantalón corto */
.pk-k-shorts {
  width: 22px;
  height: 10px;
  background: #1A1A2E;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}

/* Piernas */
.pk-k-legs {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}
.pk-k-leg {
  width: 8px;
  height: 14px;
  background: #D4A476;
  border-radius: 2px;
  position: relative;
}
.pk-k-boot {
  position: absolute;
  bottom: -3px;
  left: -1px;
  width: 10px;
  height: 5px;
  background: #FFDD00;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.2);
}

/* ── ANIMACIONES DEL PORTERO ── */
@keyframes pk-dive-left {
  0%   { transform: rotate(0deg) translateX(0); }
  30%  { transform: rotate(-35deg) translateX(-14px) translateY(-6px); }
  60%  { transform: rotate(-45deg) translateX(-18px) translateY(-2px); }
  100% { transform: rotate(-40deg) translateX(-16px); }
}
@keyframes pk-dive-right {
  0%   { transform: rotate(0deg) translateX(0); }
  30%  { transform: rotate(35deg) translateX(14px) translateY(-6px); }
  60%  { transform: rotate(45deg) translateX(18px) translateY(-2px); }
  100% { transform: rotate(40deg) translateX(16px); }
}
@keyframes pk-dive-center {
  0%   { transform: scaleY(1) translateY(0); }
  40%  { transform: scaleY(.85) translateY(-8px); }
  70%  { transform: scaleY(1) translateY(-4px); }
  100% { transform: scaleY(1) translateY(0); }
}

.pk-k-dive-left  { animation: pk-dive-left  .5s cubic-bezier(.2,.8,.4,1) forwards; }
.pk-k-dive-right { animation: pk-dive-right .5s cubic-bezier(.2,.8,.4,1) forwards; }
.pk-k-dive-center{ animation: pk-dive-center .45s ease forwards; }

/* ── CHUTEADOR CSS ── */
.pk-shooter-wrap {
  position: absolute;
  z-index: 8;
  transform: translateX(-50%);
  pointer-events: none;
  /* left y top los setea positionOverlays() */
}

.pk-shooter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: bottom center;
}

.pk-s-shadow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 7px;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  filter: blur(2px);
}

.pk-s-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cabeza chuteador */
.pk-s-head {
  width: 20px;
  height: 20px;
  background: #C8956A;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}
.pk-s-hair {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background: #5C3A1E;
  border-radius: 10px 10px 0 0;
}
.pk-s-face {
  position: absolute;
  bottom: 2px; left: 3px; right: 3px;
  height: 9px;
  background: #C8956A;
  border-radius: 0 0 7px 7px;
}

/* Torso chuteador */
.pk-s-torso {
  width: 26px;
  height: 22px;
  position: relative;
  margin-top: -1px;
}
.pk-s-jersey {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0D47A1, #1565C0);
  border-radius: 4px 4px 2px 2px;
  border-top: 2px solid rgba(255,255,255,.25);
}
/* Número en la camiseta */
.pk-s-jersey::after {
  content: '10';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: rgba(255,255,255,.6);
  line-height: 1;
  padding-top: 4px;
}

/* Brazos chuteador */
.pk-s-arm {
  position: absolute;
  top: 2px;
  width: 7px;
  height: 17px;
  background: #0D47A1;
  border-radius: 3px;
}
.pk-s-arm-l { left: -8px; transform: rotate(-10deg); transform-origin: top center; }
.pk-s-arm-r { right: -8px; transform: rotate(10deg); transform-origin: top center; }

/* Pantalón corto chuteador */
.pk-s-shorts {
  width: 24px;
  height: 12px;
  background: #0A0A1A;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}

/* Piernas chuteador */
.pk-s-legs {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}
.pk-s-leg {
  width: 9px;
  height: 16px;
  background: #C8956A;
  border-radius: 2px;
  position: relative;
}
.pk-s-boot {
  position: absolute;
  bottom: -3px;
  left: -1px;
  width: 11px;
  height: 5px;
  background: #111;
  border-radius: 2px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.pk-s-boot-l { background: #1A1A1A; }
.pk-s-boot-r { background: #1A1A1A; }

/* Pierna de patada (derecha) */
.pk-s-kick-leg {
  transform-origin: top center;
  transition: transform .15s ease;
}

/* Animación de patada */
@keyframes pk-kick-anim {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-25deg); }
  55%  { transform: rotate(55deg) translateY(-4px); }
  75%  { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}
@keyframes pk-shooter-lean {
  0%   { transform: rotate(0deg) translateY(0); }
  40%  { transform: rotate(-10deg) translateY(-3px); }
  100% { transform: rotate(0deg) translateY(0); }
}

.pk-s-kick .pk-s-kick-leg {
  animation: pk-kick-anim .45s cubic-bezier(.2,.8,.4,1) forwards;
}
.pk-s-kick {
  animation: pk-shooter-lean .45s ease forwards;
}

/* ── BALÓN ── */
.pk-ball-wrap {
  position: absolute;
  z-index: 15;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  /* left y top los setea positionOverlays() */
}

.pk-ball {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
  transform-origin: center center;
  will-change: transform;
}

.pk-ball-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #E0E0E0 35%, #888888 70%, #444444 100%);
  overflow: hidden;
  box-shadow:
    inset -3px -3px 6px rgba(0,0,0,.5),
    inset 2px 2px 4px rgba(255,255,255,.3),
    0 2px 8px rgba(0,0,0,.6);
}

/* Hexágonos del balón */
.pk-ball-hex {
  position: absolute;
  background: #111;
  opacity: .75;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.pk-bh-1 {
  width: 10px; height: 10px;
  top: 1px; left: 6px;
}
.pk-bh-2 {
  width: 8px; height: 8px;
  bottom: 3px; left: 2px;
}
.pk-bh-3 {
  width: 8px; height: 8px;
  bottom: 3px; right: 2px;
}

/* Brillo del balón */
.pk-ball-shine {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 7px;
  height: 5px;
  background: radial-gradient(ellipse, rgba(255,255,255,.85) 0%, transparent 100%);
  border-radius: 50%;
  transform: rotate(-20deg);
}

/* Sombra del balón en el suelo */
.pk-ball-shadow {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%) scaleX(1.2);
  width: 16px;
  height: 5px;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  filter: blur(2px);
  transition: opacity .1s, transform .1s;
  will-change: opacity, transform;
}

/* ── GRID DE ZONAS (superpuesto sobre la portería del canvas) ── */
.pk-zones-grid {
  position: absolute;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* left, top, width, height los setea positionOverlays() */
  pointer-events: auto;
}

.pk-zone {
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255,255,255,0);
  transition: border-color .15s, background .15s;
  border-radius: 2px;
}
.pk-zone:hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}
.pk-zone:hover .pk-zone-inner {
  opacity: 1;
}
.pk-zone-inner {
  position: absolute;
  inset: 0;
  background: rgba(245,200,66,.18);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .15s;
}
.pk-zone-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: rgba(255,255,255,.25);
  font-weight: 700;
  transition: color .15s;
  pointer-events: none;
}
.pk-zone:hover .pk-zone-hint {
  color: rgba(255,255,255,.55);
}

/* Zona seleccionada */
.pk-zone.pk-zone-sel .pk-zone-inner {
  opacity: 1;
  background: rgba(245,200,66,.4);
  border: 2px solid rgba(245,200,66,.8);
  box-shadow: inset 0 0 12px rgba(245,200,66,.2), 0 0 10px rgba(245,200,66,.3);
}
.pk-zone.pk-zone-sel .pk-zone-hint {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(245,200,66,.8);
}

/* ── FLASH DE GOL / FALLO ── */
.pk-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}

@keyframes pk-flash-goal-anim {
  0%   { opacity: .55; }
  40%  { opacity: .3; }
  100% { opacity: 0; }
}
@keyframes pk-flash-miss-anim {
  0%   { opacity: .45; }
  40%  { opacity: .25; }
  100% { opacity: 0; }
}
@keyframes pk-flash-shot-anim {
  0%   { opacity: .3; }
  100% { opacity: 0; }
}

.pk-flash-goal {
  background: radial-gradient(ellipse at 50% 30%, rgba(0,230,118,.7) 0%, rgba(0,230,118,.1) 60%, transparent 100%);
  animation: pk-flash-goal-anim .6s ease forwards;
}
.pk-flash-miss {
  background: radial-gradient(ellipse at 50% 30%, rgba(255,59,59,.6) 0%, rgba(255,59,59,.1) 60%, transparent 100%);
  animation: pk-flash-miss-anim .6s ease forwards;
}
.pk-flash-shot {
  background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.25) 0%, transparent 70%);
  animation: pk-flash-shot-anim .35s ease forwards;
}

/* ── PANEL DE CONTROLES ── */
.pk-controls {
  background: linear-gradient(180deg, #0D1628 0%, #0A1020 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: .7rem .8rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 60px;
}

.pk-ctrl-msg {
  text-align: center;
  font-size: .82rem;
  color: var(--text2);
  padding: .3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.pk-ctrl-msg i { color: var(--gold); }

/* Zona seleccionada (indicador en controles) */
.pk-zone-sel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .25rem 0;
}
.pk-zone-arrow {
  font-size: 1.1rem;
  color: var(--gold);
  line-height: 1;
}
.pk-zone-lbl {
  font-size: .8rem;
  font-weight: 700;
  color: var(--white);
}

/* Power bar */
.pk-power-wrap {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.pk-power-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pk-power-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pk-power-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  min-width: 38px;
  text-align: right;
}

.pk-power-track {
  position: relative;
  width: 100%;
  height: 18px;
  background: rgba(255,255,255,.06);
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  overflow: visible;
}
.pk-power-track:hover {
  border-color: rgba(255,255,255,.2);
}

.pk-power-fill {
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(90deg, hsl(140,100%,42%), hsl(100,100%,48%));
  transition: width .05s, background .2s;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.pk-power-knob {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.15);
  pointer-events: none;
  z-index: 2;
  transition: left .05s;
}

.pk-power-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: .2rem;
  padding: 0 2px;
}
.pk-power-ticks span {
  font-size: .58rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Botón disparar */
.pk-fire-btn {
  background: linear-gradient(135deg, #E60000, #CC0000);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .7rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  width: 100%;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(230,0,0,.35);
}
.pk-fire-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 24px rgba(230,0,0,.5);
}
.pk-fire-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 8px rgba(230,0,0,.4);
}
.pk-fire-btn i { font-size: 1rem; }

/* ── RESULTADO: NUEVAS CLASES ── */
.result-emoji-big {
  font-size: 3.5rem;
  line-height: 1.1;
  text-align: center;
  margin-bottom: .3rem;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
}

.result-diff-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: .2rem .55rem;
  border-radius: 4px;
  margin-left: .4rem;
  vertical-align: middle;
}

/* ── MODOS DE JUEGO: CLASES NUEVAS ── */
.mode-header-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  border: 1px solid rgba(245,200,66,.3);
  background: rgba(245,200,66,.08);
  padding: .2rem .6rem;
  border-radius: 20px;
  margin-bottom: .4rem;
}

.mode-btn-green {
  background: linear-gradient(135deg, var(--green), #00C060);
  color: #000;
  padding: .65rem;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  margin-top: .5rem;
  transition: transform .15s, box-shadow .15s;
  width: 100%;
  letter-spacing: .5px;
}
.mode-btn-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,230,118,.4);
}

.mode-icon-wrap {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: .4rem;
}

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 380px) {
  .pk-k-head { width: 15px; height: 15px; }
  .pk-k-torso { width: 20px; height: 16px; }
  .pk-k-legs { gap: 3px; }
  .pk-k-leg { width: 7px; height: 12px; }
  .pk-s-head { width: 17px; height: 17px; }
  .pk-s-torso { width: 22px; height: 18px; }
  .pk-ball { width: 18px; height: 18px; }
  .pk-fire-btn { font-size: .95rem; padding: .6rem; }
  .pk-hud-score { font-size: 1.7rem; }
}

@media (min-width: 500px) {
  .pk-k-head { width: 22px; height: 22px; }
  .pk-k-torso { width: 30px; height: 26px; }
  .pk-k-arm { width: 9px; height: 20px; }
  .pk-k-arm-l { left: -10px; }
  .pk-k-arm-r { right: -10px; }
  .pk-k-glove { width: 13px; height: 10px; }
  .pk-k-shorts { width: 28px; height: 13px; }
  .pk-k-legs { gap: 5px; }
  .pk-k-leg { width: 10px; height: 18px; }
  .pk-k-boot { width: 13px; height: 7px; }
  .pk-k-shadow { width: 44px; height: 8px; }

  .pk-s-head { width: 24px; height: 24px; }
  .pk-s-torso { width: 32px; height: 28px; }
  .pk-s-arm { width: 9px; height: 21px; }
  .pk-s-arm-l { left: -10px; }
  .pk-s-arm-r { right: -10px; }
  .pk-s-shorts { width: 28px; height: 14px; }
  .pk-s-legs { gap: 5px; }
  .pk-s-leg { width: 11px; height: 20px; }
  .pk-s-boot { width: 14px; height: 7px; }
  .pk-s-shadow { width: 48px; height: 9px; }

  .pk-ball { width: 28px; height: 28px; }
  .pk-ball-shadow { width: 22px; bottom: -16px; }
  .pk-bh-1 { width: 13px; height: 13px; top: 2px; left: 7px; }
  .pk-bh-2 { width: 10px; height: 10px; bottom: 3px; left: 3px; }
  .pk-bh-3 { width: 10px; height: 10px; bottom: 3px; right: 3px; }

  .pk-hud-score { font-size: 2.3rem; }
  .pk-hud-name { max-width: 110px; }
  .pk-dot { width: 10px; height: 10px; }
}

/* ── TRANSICIÓN SUAVE DEL KEEPER WRAP ── */
.pk-keeper-wrap { will-change: left; }
.pk-shooter-wrap { will-change: left; }
.pk-ball-wrap { will-change: left, top; }