/* ===== RESET & VARS ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --green:#00e676; --red:#ff1744; --yellow:#ffea00; --blue:#40c4ff;
  --dark:#070714; --card:#ffffff0d; --glass:#ffffff1a;
  --border:#ffffff1a; --text:#ffffffcc;
}
body { font-family:'Segoe UI',Tahoma,Arial,sans-serif; background:#000; color:#fff; overflow:hidden; height:100vh; width:100vw; user-select:none; -webkit-user-select:none; }

/* ===== SCREENS ===== */
.screen { display:none; width:100vw; height:100vh; position:absolute; top:0; left:0; align-items:center; justify-content:center; }
.screen.active { display:flex; }

/* ===== MENU ===== */
.menu-bg {
  width:100%; height:100%;
  background:radial-gradient(ellipse at 20% 80%, #0a2a0a 0%, #050520 50%, #0a0a0a 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}

.floating-balls { position:absolute; inset:0; pointer-events:none; }
.fb { position:absolute; font-size:40px; opacity:0.15; animation:floatRandom 8s ease-in-out infinite; }
.fb1 { top:10%; left:10%; animation-delay:0s; }
.fb2 { top:20%; right:15%; animation-delay:2s; }
.fb3 { bottom:20%; left:20%; animation-delay:4s; }
.fb4 { bottom:15%; right:10%; animation-delay:6s; }
@keyframes floatRandom {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  33% { transform:translate(30px,-20px) rotate(120deg); }
  66% { transform:translate(-20px,15px) rotate(240deg); }
}

.menu-content { text-align:center; z-index:10; display:flex; flex-direction:column; align-items:center; gap:24px; padding:20px; }

.ball-logo { font-size:80px; animation:float 3s ease-in-out infinite; filter:drop-shadow(0 0 30px rgba(0,230,118,.6)); }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-15px) rotate(15deg); } }

.game-title { font-size:clamp(28px,6vw,60px); font-weight:900; letter-spacing:4px; line-height:1; text-transform:uppercase; background:linear-gradient(135deg,#fff 0%,#00e676 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.game-title span { background:linear-gradient(135deg,#00e676,#00bcd4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.version-badge { background:rgba(0,230,118,.15); border:1px solid rgba(0,230,118,.4); color:var(--green); padding:4px 14px; border-radius:20px; font-size:13px; letter-spacing:1px; }
.menu-footer { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--text); }

/* Toggle Switch */
.toggle-switch { position:relative; width:44px; height:24px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#333; border-radius:24px; transition:.3s; cursor:pointer; }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
input:checked + .toggle-slider { background:var(--green); }
input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ===== BUTTONS ===== */
.menu-buttons { display:flex; flex-direction:column; gap:10px; width:min(300px,85vw); }
.btn { padding:13px 28px; border-radius:50px; border:none; font-size:15px; font-weight:700; cursor:pointer; transition:all .25s cubic-bezier(.175,.885,.32,1.275); display:flex; align-items:center; justify-content:center; gap:10px; letter-spacing:1px; position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.12); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.btn:hover::after { transform:scaleX(1); }
.btn:hover { transform:translateY(-3px) scale(1.02); }
.btn:active { transform:scale(.97); }
.btn-primary  { background:linear-gradient(135deg,#00e676,#00bcd4); color:#000; }
.btn-warning  { background:linear-gradient(135deg,#ffea00,#ff9800); color:#000; }
.btn-danger   { background:linear-gradient(135deg,#ff1744,#e91e63); color:#fff; }
.btn-info     { background:linear-gradient(135deg,#40c4ff,#7c4dff); color:#fff; }
.btn-secondary{ background:var(--glass); color:#fff; border:1px solid var(--border); backdrop-filter:blur(10px); }
.btn-icon { font-size:20px; }

/* ===== TEAM SELECT ===== */
.team-select-content { background:rgba(5,5,20,.97); border-radius:24px; border:1px solid var(--border); padding:30px; max-width:700px; width:95vw; max-height:95vh; overflow-y:auto; text-align:center; }
.team-select-content h2 { font-size:24px; color:var(--green); margin-bottom:20px; }
.teams-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:20px; }
.team-card-select { padding:12px; border-radius:12px; border:2px solid var(--border); cursor:pointer; transition:all .2s; text-align:center; background:var(--card); }
.team-card-select:hover,.team-card-select.selected { border-color:var(--green); background:rgba(0,230,118,.1); transform:translateY(-2px); }
.team-card-select .t-emoji { font-size:32px; display:block; margin-bottom:6px; }
.team-card-select .t-name { font-size:13px; font-weight:600; }
.team-card-select .t-rating { font-size:11px; color:var(--yellow); }

.difficulty-row,.time-row { margin:14px 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; font-size:14px; }
.diff-buttons { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.diff-btn,.time-btn { padding:7px 14px; border-radius:20px; border:1px solid var(--border); background:var(--card); color:#fff; cursor:pointer; font-size:13px; transition:all .2s; }
.diff-btn.active,.time-btn.active,.diff-btn:hover,.time-btn:hover { border-color:var(--green); background:rgba(0,230,118,.15); color:var(--green); }
.team-select-actions { display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

/* ===== CONTROLS ===== */
.controls-content { background:rgba(5,5,20,.97); border-radius:20px; border:1px solid var(--border); padding:30px 40px; max-width:600px; width:90vw; text-align:center; }
.controls-content h2 { font-size:24px; color:var(--green); margin-bottom:20px; }
.controls-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.control-item { display:flex; align-items:center; gap:10px; padding:10px; background:var(--card); border-radius:10px; border:1px solid var(--border); font-size:14px; }
kbd { background:rgba(255,255,255,.15); border-radius:6px; padding:3px 8px; font-size:12px; font-family:monospace; border:1px solid rgba(255,255,255,.3); white-space:nowrap; min-width:70px; text-align:center; }
.mobile-note { margin:14px 0; padding:10px; background:rgba(255,234,0,.1); border-radius:10px; color:var(--yellow); font-size:13px; }

/* ===== TOURNAMENT ===== */
.tournament-content { background:rgba(5,5,20,.97); border-radius:24px; border:1px solid var(--border); padding:30px; max-width:800px; width:95vw; max-height:95vh; overflow-y:auto; text-align:center; }
.tournament-content h2 { font-size:24px; color:var(--yellow); margin-bottom:20px; }
.bracket { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.bracket-match { padding:12px 16px; background:var(--card); border-radius:12px; border:1px solid var(--border); min-width:160px; text-align:center; transition:all .2s; }
.bracket-match.active { border-color:var(--green); background:rgba(0,230,118,.1); }
.bracket-match.done { border-color:var(--yellow); opacity:.7; }
.bracket-match .bm-teams { display:flex; flex-direction:column; gap:4px; font-size:14px; }
.bracket-match .bm-score { font-size:22px; font-weight:900; margin:6px 0; color:var(--yellow); }
.tournament-status { font-size:16px; color:var(--text); margin-bottom:16px; min-height:40px; }
.tournament-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== GAME HUD ===== */
#hud { width:100%; height:56px; background:linear-gradient(180deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.6) 100%); display:flex; align-items:center; justify-content:space-between; padding:0 16px; z-index:100; flex-shrink:0; border-bottom:2px solid rgba(0,230,118,.25); }
.hud-team { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; }
.team-emblem { font-size:22px; }
.team-name { font-size:14px; font-weight:600; }
.cards-display { font-size:12px; display:flex; flex-direction:column; gap:1px; }
.score { font-size:30px; font-weight:900; }
.home-team .score { color:#e63946; text-shadow:0 0 15px #e63946; }
.away-team .score { color:#2196F3; text-shadow:0 0 15px #2196F3; }
.hud-center { display:flex; flex-direction:column; align-items:center; gap:4px; }
.time-block { display:flex; flex-direction:column; align-items:center; }
#gameTime { font-size:20px; font-weight:900; font-family:monospace; color:var(--green); letter-spacing:2px; }
.half-pill { font-size:10px; background:rgba(255,255,255,.1); padding:2px 8px; border-radius:10px; color:var(--text); }
.possession-bar { display:flex; width:140px; height:5px; border-radius:3px; overflow:hidden; }
.poss-fill { height:100%; transition:width .5s; }
.home-poss { background:#e63946; }
.away-poss { background:#2196F3; }

.formation-badge { position:absolute; top:62px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.2); color:var(--green); font-size:12px; padding:2px 10px; border-radius:8px; z-index:50; letter-spacing:1px; }

/* ===== CANVAS ===== */
#gameScreen { flex-direction:column; background:#000; position:relative; }
#gameCanvas { flex:1; display:block; width:100%; cursor:none; }

/* ===== MINI MAP ===== */
.mini-map { position:absolute; bottom:10px; left:10px; width:120px; height:80px; border:1px solid rgba(255,255,255,.3); border-radius:6px; background:rgba(0,0,0,.6); z-index:90; }
@media (max-width:600px) { .mini-map { display:none; } }

/* ===== OVERLAYS ===== */
.overlay { position:absolute; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); }
.overlay.hidden { display:none; }
.pause-box { text-align:center; padding:36px; background:rgba(5,5,20,.97); border-radius:20px; border:2px solid var(--green); display:flex; flex-direction:column; gap:14px; min-width:260px; animation:popIn .3s cubic-bezier(.175,.885,.32,1.275); }
.pause-box h2 { font-size:22px; color:var(--green); }
.pause-stats { font-size:13px; color:var(--text); background:var(--card); border-radius:10px; padding:10px; }

@keyframes popIn { from { transform:scale(.7); opacity:0; } to { transform:scale(1); opacity:1; } }

.goal-box { text-align:center; padding:32px 48px; background:linear-gradient(135deg,rgba(20,10,0,.97),rgba(40,20,0,.97)); border-radius:20px; border:2px solid var(--yellow); display:flex; flex-direction:column; gap:10px; animation:popIn .3s cubic-bezier(.175,.885,.32,1.275); }
.goal-text { font-size:clamp(56px,10vw,80px); font-weight:900; background:linear-gradient(135deg,#ffea00,#ff9800); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:goalPulse .4s ease-in-out infinite alternate; letter-spacing:4px; }
@keyframes goalPulse { from { transform:scale(1); } to { transform:scale(1.08); } }
.goal-scorer { font-size:20px; color:rgba(255,255,255,.9); font-weight:700; }
.goal-meta { font-size:14px; color:rgba(255,255,255,.5); }

.foul-notif { position:absolute; top:70px; left:50%; transform:translateX(-50%); font-size:20px; font-weight:900; padding:10px 28px; background:rgba(0,0,0,.85); border-radius:30px; border:2px solid; z-index:250; white-space:nowrap; animation:popIn .3s; }
.foul-notif.hidden { display:none; }

.formation-box { background:rgba(5,5,20,.97); border-radius:20px; border:2px solid var(--blue); padding:28px; text-align:center; animation:popIn .3s; }
.formation-box h3 { margin-bottom:16px; color:var(--blue); }
.formation-options { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; justify-content:center; }
.form-btn { padding:14px 18px; background:var(--card); border:2px solid var(--border); border-radius:12px; color:#fff; cursor:pointer; font-size:14px; font-weight:600; transition:all .2s; min-width:80px; }
.form-btn:hover,.form-btn.active { border-color:var(--blue); background:rgba(64,196,255,.15); color:var(--blue); }

/* ===== PENALTY ===== */
#penaltyScreen { flex-direction:column; background:#000; }
.penalty-hud { width:100%; padding:12px 20px; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid rgba(255,255,255,.1); flex-shrink:0; }
.penalty-team { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; }
.penalty-dots { display:flex; gap:6px; font-size:20px; }
.penalty-round { font-size:18px; font-weight:900; color:var(--yellow); }
.penalty-instruct { position:absolute; bottom:25%; left:50%; transform:translateX(-50%); font-size:18px; font-weight:700; color:#fff; background:rgba(0,0,0,.7); padding:8px 20px; border-radius:20px; animation:blink 1s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.4; } }
#penaltyCanvas { flex:1; width:100%; display:block; }

/* ===== END SCREEN ===== */
.end-content { background:rgba(5,5,20,.98); border-radius:24px; border:2px solid var(--yellow); padding:40px 32px; max-width:480px; width:90vw; text-align:center; animation:popIn .5s cubic-bezier(.175,.885,.32,1.275); max-height:95vh; overflow-y:auto; }
.trophy { font-size:72px; animation:float 2s ease-in-out infinite; display:block; margin-bottom:8px; }
.end-content h2 { font-size:26px; margin-bottom:14px; color:var(--yellow); }
.final-score { display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 0; flex-wrap:wrap; }
.fs-team { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:14px; color:var(--text); }
.fs-score { font-size:60px; font-weight:900; line-height:1; }
.fs-dash { font-size:36px; color:rgba(255,255,255,.3); }
#endMessage { font-size:16px; color:var(--text); margin-bottom:16px; }
.end-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.stat-item { padding:10px 6px; background:var(--card); border-radius:10px; font-size:13px; border:1px solid var(--border); }
.stat-item strong { display:block; font-size:20px; margin-top:4px; color:var(--green); }
.end-buttons { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===== MOBILE CONTROLS ===== */
#mobileControls { display:none; position:absolute; bottom:12px; left:0; right:0; padding:0 14px; justify-content:space-between; align-items:flex-end; z-index:150; pointer-events:none; }
@media (max-width:900px),(pointer:coarse) { #mobileControls { display:flex; } }
.dpad { pointer-events:all; display:flex; flex-direction:column; align-items:center; gap:3px; }
.dpad-mid { display:flex; align-items:center; gap:3px; }
.dpad-center { width:44px; height:44px; }
.dpad-btn { width:46px; height:46px; border-radius:10px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:16px; cursor:pointer; pointer-events:all; transition:background .1s; -webkit-tap-highlight-color:transparent; }
.dpad-btn:active { background:rgba(0,230,118,.4); }
.mobile-center-btns { pointer-events:all; display:flex; flex-direction:column; gap:6px; align-items:center; }
.mini-btn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:14px; cursor:pointer; pointer-events:all; -webkit-tap-highlight-color:transparent; }
.action-buttons { pointer-events:all; display:flex; flex-direction:column; gap:6px; align-items:center; }
.action-row { display:flex; gap:6px; }
.action-btn { width:56px; height:56px; border-radius:50%; border:2px solid; font-size:13px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .1s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.action-btn small { font-size:9px; opacity:.8; }
.action-btn:active { transform:scale(.88); }
.shoot     { background:rgba(230,57,70,.85);  border-color:#e63946; }
.tackle    { background:rgba(255,234,0,.85);  border-color:#ffea00; color:#000; }
.long-pass { background:rgba(33,150,243,.85); border-color:#2196F3; width:50px; height:50px; }
.sprint-btn{ background:rgba(0,230,118,.85);  border-color:#00e676; color:#000; width:50px; height:50px; }