/* =========================================================================
   KEFTEMINHO: Space Rave Football — style.css
   Neon rave UI. ASSET: tweak the CSS variables below for brand colors.
   ========================================================================= */
:root{
  --cyan:#19f2ff;
  --magenta:#ff2bd6;
  --lime:#b6ff2b;
  --purple:#8b5bff;
  --orange:#ff9d2b;
  --bg:#05010f;
  --font-display:'Orbitron','Archivo Black','Arial Black',sans-serif;
  --font-heavy:'Archivo Black','Arial Black',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}
body{font-family:var(--font-display);color:#eafcff;user-select:none;-webkit-user-select:none;touch-action:none}
button{font-family:var(--font-display);cursor:pointer}
.hidden{display:none !important}

#app{position:fixed;inset:0}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ---------- FX overlays ---------- */
#vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(2,0,12,.55) 100%);
  transition:box-shadow .4s, background .4s}
#vignette.dim{background:radial-gradient(ellipse at center,rgba(0,0,8,.35) 40%,rgba(0,0,8,.9) 100%)}
#vignette.keft{box-shadow:inset 0 0 140px 30px rgba(255,43,214,.55), inset 0 0 60px 10px rgba(25,242,255,.4);
  animation:keftPulse .5s infinite alternate}
@keyframes keftPulse{from{filter:hue-rotate(0)}to{filter:hue-rotate(60deg)}}
#fx-flash{position:absolute;inset:0;z-index:3;pointer-events:none;background:#fff;opacity:0;transition:opacity .28s}
#fx-flash.on{opacity:.85;transition:opacity .02s}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none}
#hud-top{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 18px;gap:10px}
.hud-box{background:rgba(6,2,26,.55);border:1px solid rgba(25,242,255,.35);border-radius:10px;
  padding:6px 16px;backdrop-filter:blur(6px);min-width:96px;text-align:center}
.hud-label{font-size:10px;letter-spacing:3px;color:var(--cyan);opacity:.8}
.hud-value{font-size:26px;font-weight:900;text-shadow:0 0 12px var(--cyan)}
#coins{font-size:12px;font-weight:700;letter-spacing:1px;color:#ffd84d;text-shadow:0 0 10px #ffb700;margin-top:2px}
#mode-badge{align-self:center;font-size:12px;letter-spacing:4px;color:var(--lime);
  border:1px solid rgba(182,255,43,.4);border-radius:999px;padding:6px 18px;background:rgba(6,2,26,.55);text-shadow:0 0 10px var(--lime)}
#energy-wrap{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:min(540px,84vw);text-align:center}
#energy-label{font-size:11px;letter-spacing:4px;color:var(--magenta);text-shadow:0 0 10px var(--magenta);margin-bottom:6px}
#energy-bar{height:18px;border-radius:999px;border:1px solid rgba(255,43,214,.5);background:rgba(8,2,30,.7);
  overflow:hidden;box-shadow:0 0 18px rgba(255,43,214,.25)}
#energy-fill{height:100%;width:0%;border-radius:999px;transition:width .12s linear;
  background:repeating-linear-gradient(105deg,var(--cyan) 0 14px,var(--magenta) 14px 28px,var(--lime) 28px 42px);
  background-size:200% 100%;animation:energyFlow 1.4s linear infinite;box-shadow:0 0 16px var(--magenta)}
@keyframes energyFlow{to{background-position:84px 0}}
#energy-bar.max #energy-fill{animation-duration:.35s;box-shadow:0 0 30px var(--lime)}
#multiplier{position:absolute;right:-18px;top:14px;transform:translateX(100%);font-size:20px;font-weight:900;color:var(--lime);
  text-shadow:0 0 12px var(--lime)}
#trick-feed{position:absolute;left:18px;bottom:110px;display:flex;flex-direction:column-reverse;gap:4px;max-height:30vh;overflow:hidden}
.feed-line{font-size:12px;letter-spacing:2px;color:#bff7ff;text-shadow:0 0 8px var(--cyan);opacity:.9;animation:feedIn .25s ease-out, feedOut .6s ease-in 2.4s forwards}
@keyframes feedIn{from{transform:translateX(-30px);opacity:0}}
@keyframes feedOut{to{opacity:0}}
#hud-buttons{position:absolute;top:14px;right:18px;display:flex;gap:8px;pointer-events:auto;transform:translateY(56px)}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(25,242,255,.45);background:rgba(6,2,26,.6);
  font-size:18px;color:#fff;transition:.15s}
.icon-btn:hover{box-shadow:0 0 14px var(--cyan);transform:scale(1.08)}
#reticle{position:absolute;font-size:30px;color:var(--lime);text-shadow:0 0 12px var(--lime),0 0 30px var(--lime);
  transform:translate(-50%,-50%);transition:opacity .2s;animation:retSpin 3s linear infinite}
@keyframes retSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- popups & banner ---------- */
#popups{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden}
.popup{position:absolute;left:50%;top:44%;font-family:var(--font-heavy);font-size:clamp(22px,4vw,42px);
  white-space:nowrap;transform:translate(-50%,-50%);animation:popFloat 1.25s ease-out forwards;
  color:#fff;text-shadow:0 0 10px var(--cyan),0 0 30px var(--magenta);font-style:italic;letter-spacing:1px}
.popup.gold{color:var(--lime);text-shadow:0 0 14px var(--lime),0 0 44px var(--orange);font-size:clamp(30px,6vw,64px)}
.popup.bad{color:#ff5d5d;text-shadow:0 0 14px #ff2b2b}
@keyframes popFloat{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-4deg)}
 12%{opacity:1;transform:translate(-50%,-58%) scale(1.15) rotate(2deg)}
 100%{opacity:0;transform:translate(-50%,-150%) scale(1) rotate(-2deg)}}
#banner{position:absolute;left:50%;top:30%;z-index:12;transform:translate(-50%,-50%) skew(-8deg) scale(0);
  font-family:var(--font-heavy);font-size:clamp(34px,8vw,96px);letter-spacing:3px;text-align:center;pointer-events:none;
  background:linear-gradient(100deg,var(--cyan),var(--magenta) 55%,var(--lime));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,43,214,.8)) drop-shadow(0 0 40px rgba(25,242,255,.5))}
#banner.show{animation:bannerSlam 1.7s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes bannerSlam{0%{transform:translate(-50%,-50%) skew(-8deg) scale(0)}
 14%{transform:translate(-50%,-50%) skew(-8deg) scale(1.12)}
 22%{transform:translate(-50%,-50%) skew(-8deg) scale(1)}
 80%{opacity:1;transform:translate(-50%,-50%) skew(-8deg) scale(1)}
 100%{opacity:0;transform:translate(-50%,-60%) skew(-8deg) scale(1.25)}}
#cine-skip{position:absolute;bottom:74px;right:26px;z-index:12;font-size:12px;letter-spacing:3px;color:#9fe;opacity:.7;animation:blink 1.2s infinite}
#replay-overlay{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:12;font-size:16px;letter-spacing:6px;
  color:#fff;text-shadow:0 0 10px #f33;pointer-events:none}
#replay-overlay .rec-dot{color:#ff3b3b;animation:blink .8s infinite}
@keyframes blink{50%{opacity:.15}}

/* ---------- loading ---------- */
#loading-screen{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#150637 0%,var(--bg) 70%)}
.loading-logo{font-family:var(--font-heavy);font-size:clamp(38px,9vw,90px);letter-spacing:4px;
  background:linear-gradient(100deg,var(--cyan),var(--magenta),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,43,214,.7));animation:logoPulse 1.6s ease-in-out infinite alternate}
@keyframes logoPulse{to{filter:drop-shadow(0 0 40px rgba(25,242,255,.9))}}
.loading-sub{margin-top:6px;font-size:clamp(11px,2vw,16px);letter-spacing:10px;color:var(--cyan)}
#loading-bar{margin-top:34px;width:min(420px,70vw);height:10px;border-radius:999px;border:1px solid rgba(25,242,255,.4);overflow:hidden}
#loading-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .2s;box-shadow:0 0 14px var(--magenta)}
#loading-tip{margin-top:14px;font-size:12px;letter-spacing:2px;color:#9fd8e8;opacity:.8}

/* ---------- menu ---------- */
#menu-screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:16px;background:radial-gradient(ellipse at 50% 20%,rgba(21,6,55,.72) 0%,rgba(5,1,15,.82) 75%);overflow:auto}
.game-title{font-family:var(--font-heavy);font-size:clamp(34px,7vw,84px);letter-spacing:3px;line-height:1;text-align:center;
  background:linear-gradient(100deg,var(--cyan) 10%,var(--magenta) 55%,var(--lime) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,43,214,.65));animation:titleFloat 4s ease-in-out infinite alternate}
@keyframes titleFloat{to{transform:translateY(-6px)}}
.game-title span{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(11px,2vw,18px);
  letter-spacing:12px;margin-top:8px;-webkit-text-fill-color:var(--cyan);color:var(--cyan);filter:none}
.menu-panel{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:960px;
  background:rgba(8,2,30,.55);border:1px solid rgba(139,91,255,.35);border-radius:22px;padding:20px 26px;backdrop-filter:blur(8px)}
#face-section{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:180px}
#face-preview{width:112px;height:112px;border-radius:50%;background-size:cover;background-position:center;
  border:3px solid transparent;background-clip:padding-box;box-shadow:0 0 0 3px var(--magenta),0 0 24px var(--magenta),0 0 60px rgba(25,242,255,.4)}
.hint{font-size:10px;letter-spacing:1px;color:#9fd8e8;text-align:center;line-height:1.6}
#modes{display:grid;grid-template-columns:repeat(2,minmax(190px,230px));gap:12px}
.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:13px 15px;border-radius:14px;
  background:linear-gradient(160deg,rgba(25,242,255,.08),rgba(255,43,214,.08));border:1px solid rgba(25,242,255,.35);color:#eafcff;transition:.16s}
.mode-card:hover{transform:translateY(-3px) scale(1.02);border-color:var(--lime);box-shadow:0 0 22px rgba(182,255,43,.35)}
.mode-icon{font-size:24px}
.mode-name{font-weight:900;letter-spacing:2px;font-size:14px;color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.mode-desc{font-size:10px;letter-spacing:.5px;color:#b8cfe0;line-height:1.5}
#controls-hint{font-size:10px;letter-spacing:1px;color:#8fb8cc;text-align:center;line-height:1.9;max-width:760px}
#controls-hint b{color:var(--lime)}
.brand-footer{font-size:11px;letter-spacing:8px;color:var(--magenta);text-shadow:0 0 12px var(--magenta);animation:blink 3s infinite}
#menu-sound{position:absolute;top:16px;right:16px}

/* ---------- buttons ---------- */
.btn{padding:13px 26px;border-radius:999px;border:2px solid var(--cyan);background:rgba(25,242,255,.1);color:#fff;
  font-size:15px;font-weight:900;letter-spacing:2px;transition:.16s;text-shadow:0 0 8px var(--cyan)}
.btn:hover{background:rgba(25,242,255,.22);box-shadow:0 0 26px rgba(25,242,255,.6);transform:scale(1.05)}
.btn.alt{border-color:var(--magenta);text-shadow:0 0 8px var(--magenta);background:rgba(255,43,214,.12)}
.btn.alt:hover{box-shadow:0 0 26px rgba(255,43,214,.6);background:rgba(255,43,214,.25)}
.btn.ghost{border-color:rgba(255,255,255,.25);background:transparent;text-shadow:none;font-size:12px;padding:11px 20px}
.btn.small{padding:9px 16px;font-size:11px}
.btn kbd{font-family:inherit;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:1px 5px;font-size:10px;margin-left:4px}

/* ---------- victory ---------- */
#victory-screen{position:absolute;inset:0;z-index:22;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(60,6,80,.6),rgba(5,1,15,.88) 75%);overflow:auto}
.victory-inner{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px;animation:vicIn .7s cubic-bezier(.2,1.4,.3,1)}
@keyframes vicIn{from{transform:scale(.6);opacity:0}}
#victory-face{width:120px;height:120px;border-radius:50%;background-size:cover;background-position:center;
  box-shadow:0 0 0 4px var(--lime),0 0 40px var(--lime),0 0 90px rgba(255,43,214,.5)}
.victory-title{font-family:var(--font-heavy);font-size:clamp(36px,7vw,76px);letter-spacing:4px;
  background:linear-gradient(100deg,var(--lime),var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(182,255,43,.8))}
.victory-sub{font-size:clamp(11px,2vw,17px);letter-spacing:9px;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
#victory-quote{font-size:12px;letter-spacing:5px;color:var(--magenta);animation:blink 2.4s infinite}
#victory-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:12px 0;width:min(620px,90vw)}
.stat{background:rgba(8,2,30,.6);border:1px solid rgba(25,242,255,.3);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:24px;color:var(--lime);text-shadow:0 0 12px var(--lime)}
.stat span{font-size:9px;letter-spacing:2px;color:#9fd8e8}
.victory-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- touch controls ---------- */
#touch-ui{position:absolute;inset:0;z-index:14;pointer-events:none}
#joystick-zone{position:absolute;left:0;bottom:0;width:46%;height:60%;pointer-events:auto}
#joy-base{position:absolute;width:124px;height:124px;border-radius:50%;border:2px solid rgba(25,242,255,.5);
  background:rgba(25,242,255,.08);display:none;transform:translate(-50%,-50%)}
#joy-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#7ff,var(--magenta));box-shadow:0 0 18px var(--magenta);transform:translate(-50%,-50%)}
#touch-buttons{position:absolute;right:12px;bottom:96px;display:grid;grid-template-columns:repeat(3,64px);gap:10px;pointer-events:auto}
.tbtn{width:64px;height:64px;border-radius:50%;border:2px solid rgba(25,242,255,.5);background:rgba(8,2,30,.55);
  color:#fff;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.tbtn i{font-style:normal;font-size:7px;letter-spacing:1px;color:var(--cyan)}
.tbtn:active{background:rgba(25,242,255,.35);box-shadow:0 0 18px var(--cyan)}
.tbtn.shoot{border-color:var(--magenta);background:rgba(255,43,214,.2)}
.tbtn.shoot:active{background:rgba(255,43,214,.5);box-shadow:0 0 22px var(--magenta)}

/* ---------- toast ---------- */
#toast{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);z-index:40;background:rgba(8,2,30,.9);
  border:1px solid var(--lime);color:var(--lime);border-radius:999px;padding:10px 22px;font-size:12px;letter-spacing:2px;
  box-shadow:0 0 22px rgba(182,255,43,.4)}

/* ---------- responsive ---------- */
@media (max-width:760px){
  #modes{grid-template-columns:1fr 1fr}
  .menu-panel{padding:14px;gap:12px}
  #controls-hint{display:none}
  .hud-value{font-size:20px}
  #mode-badge{font-size:9px;padding:5px 10px;letter-spacing:2px}
  #energy-wrap{bottom:190px;width:min(420px,72vw)}
  #trick-feed{bottom:auto;top:120px}
  #touch-buttons{grid-template-columns:repeat(3,58px);gap:8px}
  .tbtn{width:58px;height:58px;font-size:17px}
}
@media (max-width:520px){
  #modes{grid-template-columns:1fr}
  .mode-card{padding:10px 12px}
  #face-preview{width:84px;height:84px}
}