:root{
  --bar:#A50044; --bar2:#004D98; --rma:#F2F5FA; --gold:#FEBE10;
  --neon:#22C55E; --danger:#EF4444; --cyan:#38BDF8;
  --bg:#05080F; --ink:#F8FAFF; --ink2:#A9B6CC;
  --glass:rgba(12,20,34,.62); --line:rgba(255,255,255,.12);
  --f-num:'Orbitron',system-ui,sans-serif; --f-ui:'Cairo',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 600px at 50% -10%, #16243c 0%, transparent 60%),
    radial-gradient(900px 500px at 15% 110%, #2a0a1c 0%, transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--f-ui); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.wrap{width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:8px}
#stage{
  position:relative; width:100%; aspect-ratio:16/9; max-width:1560px; max-height:100%;
  border-radius:18px; overflow:hidden; isolation:isolate;
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
  font-size:clamp(8.5px,1.02vw,17px);
}
canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.glass{
  background:var(--glass); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line); border-radius:14px;
}
.hud-top{position:absolute; inset:0 0 auto 0; display:grid; grid-template-columns:1fr auto 1fr; gap:1.1em; padding:1em 1.1em; align-items:start; pointer-events:none}
.scoreboard{display:flex; align-items:center; gap:1em; padding:.55em 1em; pointer-events:auto; box-shadow:0 12px 34px rgba(0,0,0,.45)}
.scoreboard .team{display:flex; align-items:center; gap:.55em; font-weight:800; font-size:1.05em; letter-spacing:.2px}
.crest{width:1.9em; height:2.1em; border-radius:5px 5px 12px 12px; border:1px solid rgba(255,255,255,.25); box-shadow:0 4px 12px rgba(0,0,0,.5)}
.crest-barca{background:repeating-linear-gradient(90deg,var(--bar2) 0 22%, var(--bar) 22% 44%); position:relative}
.crest-barca::after{content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(90deg,var(--bar2),var(--bar))}
.crest-madrid{background:linear-gradient(180deg,#fff,#dbe3f0); position:relative}
.crest-madrid::after{content:""; position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(180deg,transparent,rgba(254,190,16,.85))}
.mid{text-align:center; min-width:8.5em}
.score{font-family:var(--f-num); font-weight:900; font-size:2em; line-height:1; display:flex; gap:.42em; align-items:baseline; justify-content:center}
.score i{opacity:.4; font-style:normal}
.score b{color:#fff; text-shadow:0 0 18px rgba(56,189,248,.55)}
.clock{display:flex; gap:.5em; align-items:center; justify-content:center; font-size:.85em; color:var(--ink2); margin-top:.25em}
.clock span{font-family:var(--f-num); color:var(--neon); font-weight:800; font-size:1.15em}

.panel{padding:.7em .85em; pointer-events:auto}
.stats{justify-self:start; min-width:11.5em; display:grid; gap:.32em}
.pbar{height:.42em; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden}
.pbar span{display:block; height:100%; width:50%; background:linear-gradient(90deg,var(--bar2),var(--bar)); transition:width .3s}
.srow{display:flex; align-items:center; justify-content:space-between; gap:.6em; font-size:.78em; color:var(--ink2)}
.srow b{font-family:var(--f-num); color:#fff; font-size:1.1em}
.feed{justify-self:end; width:16em; display:grid; gap:.28em; min-height:4.4em; align-content:start; font-size:.82em}
.feed div{color:var(--ink2); animation:fadeUp .35s ease both; line-height:1.35}
.feed div b{color:var(--gold)}
.feed div.hot b{color:var(--neon)}
.topbar{position:absolute; top:1em; left:50%; transform:translate(-50%,4.6em); display:flex; gap:.4em; z-index:6}
.icobtn{
  width:2.3em; height:2.3em; display:grid; place-items:center; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); border-radius:11px; color:var(--ink);
  backdrop-filter:blur(10px); transition:transform .18s, background .18s, color .18s;
}
.icobtn svg{width:1.15em; height:1.15em}
.icobtn:hover{transform:translateY(-2px); background:rgba(56,189,248,.18); color:var(--cyan)}
.icobtn.off{color:#64748b}
.hud-bottom{position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end; justify-content:space-between; gap:1em; padding:1.1em 1.3em}
.stick{
  width:8.6em; height:8.6em; border-radius:50%; pointer-events:auto;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(8,14,26,.55));
  border:1px solid var(--line); backdrop-filter:blur(12px); position:relative; flex:none;
  box-shadow:inset 0 0 28px rgba(0,0,0,.5);
}
.knob{
  position:absolute; left:50%; top:50%; width:3.5em; height:3.5em; margin:-1.75em 0 0 -1.75em; border-radius:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(160,190,230,.7)); box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.pad{display:grid; grid-template-columns:repeat(2,1fr); gap:.6em; pointer-events:auto; flex:none}
.abtn{
  width:5.9em; height:5.9em; border-radius:50%; display:grid; place-items:center; gap:.1em; cursor:pointer;
  background:linear-gradient(160deg,rgba(30,44,70,.86),rgba(10,16,28,.92));
  border:1px solid rgba(255,255,255,.16); color:var(--ink); font-family:var(--f-ui); font-weight:800; font-size:.68em;
  backdrop-filter:blur(12px); transition:transform .12s, box-shadow .18s, border-color .18s;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.abtn svg{width:1.9em; height:1.9em}
.abtn b{font-size:1em; font-weight:800}
.abtn:hover{transform:translateY(-3px); border-color:rgba(56,189,248,.5)}
.abtn.active{transform:scale(.93); border-color:var(--neon); box-shadow:0 0 26px rgba(34,197,94,.45)}
.abtn.shoot{grid-column:2; background:linear-gradient(160deg,#b3003f,#5c0022); border-color:rgba(254,190,16,.55); box-shadow:0 0 34px rgba(254,190,16,.25)}
.abtn.shoot.active{box-shadow:0 0 34px rgba(254,190,16,.7)}

.meters{display:grid; gap:.35em; width:15em; pointer-events:none; margin-bottom:.4em}
.who{display:flex; align-items:center; gap:.5em; font-size:.82em; color:#fff; font-weight:800}
.who i{font-style:normal; font-size:.82em; color:var(--gold); font-weight:700}
.meter{display:grid; gap:.15em}
.meter small{font-size:.66em; color:var(--ink2); letter-spacing:.4px}
.bar{height:.55em; border-radius:99px; background:rgba(4,8,16,.75); border:1px solid var(--line); overflow:hidden}
.bar span{display:block; height:100%; width:100%; border-radius:99px; transition:width .12s linear}
#staminaFill{background:linear-gradient(90deg,#0ea5e9,var(--neon))}
#chargeFill{width:0; background:linear-gradient(90deg,var(--gold),var(--danger))}
.banner{
  position:absolute; left:50%; top:34%; transform:translate(-50%,-50%) scale(.6); opacity:0; text-align:center;
  pointer-events:none; transition:opacity .3s, transform .35s cubic-bezier(.2,1.5,.4,1); z-index:7;
}
.banner b{display:block; font-family:var(--f-num); font-weight:900; font-size:6.2em; letter-spacing:.04em; color:#fff; text-shadow:0 0 40px rgba(56,189,248,.8), 0 10px 40px rgba(0,0,0,.8)}
.banner small{display:block; font-size:1.5em; font-weight:800; color:var(--gold); text-shadow:0 4px 18px rgba(0,0,0,.8)}
.banner.show{opacity:1; transform:translate(-50%,-50%) scale(1)}
.banner.gold b{color:var(--gold); text-shadow:0 0 45px rgba(254,190,16,.9), 0 10px 40px rgba(0,0,0,.85)}
.overlay{
  position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:2em;
  background:radial-gradient(700px 420px at 50% 40%, rgba(9,16,28,.72), rgba(3,6,12,.94));
  backdrop-filter:blur(7px); transition:opacity .35s, visibility .35s;
}
.overlay.hidden{opacity:0; visibility:hidden; pointer-events:none}
.card{
  width:min(46em,94%); background:linear-gradient(165deg, rgba(20,30,48,.92), rgba(8,13,24,.95));
  border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:1.9em 2em; text-align:center;
  box-shadow:0 40px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.09);
  animation:fadeUp .45s ease both;
}
.card.small{width:min(30em,92%)}
.card h1{font-size:2.5em; font-weight:900; letter-spacing:.5px}
.card h1 em{font-family:var(--f-num); font-style:normal; color:var(--gold)}
.card h2{font-size:1.75em; font-weight:900; margin-bottom:.4em}
.card .tag{color:var(--ink2); font-size:.92em; margin:.5em 0 1.2em; line-height:1.7}
.brand{display:flex; align-items:center; justify-content:center; gap:1.1em}
.crest.big{width:2.7em; height:3em; border-radius:7px 7px 16px 16px}

.opts{display:grid; grid-template-columns:1fr 1fr; gap:1.2em; text-align:right; margin-bottom:.4em}
.opt label{display:block; font-size:.8em; color:var(--ink2); margin-bottom:.45em; font-weight:700}
.chips{display:flex; gap:.4em}
.chips button{
  flex:1; padding:.55em .3em; border-radius:10px; cursor:pointer; font-family:var(--f-ui); font-weight:800; font-size:.85em;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink2); transition:.2s;
}
.chips button.on{background:linear-gradient(160deg,rgba(56,189,248,.3),rgba(34,197,94,.24)); color:#fff; border-color:rgba(56,189,248,.6); box-shadow:0 0 22px rgba(56,189,248,.25)}
.chips button:hover{transform:translateY(-2px)}
.keys{display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; margin:1.4em 0 .2em; font-size:.78em; color:var(--ink2); text-align:right}
kbd{background:rgba(255,255,255,.09); border:1px solid var(--line); border-radius:6px; padding:.15em .45em; font-family:var(--f-num); color:#fff}
.cta{
  padding:.8em 2.6em; border:0; border-radius:14px; cursor:pointer; font-family:var(--f-ui); font-weight:900; font-size:1.08em; color:#04121b;
  background:linear-gradient(120deg,var(--neon),#7dd3fc); box-shadow:0 14px 34px rgba(34,197,94,.35); transition:transform .18s, box-shadow .18s;
}
.cta:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(34,197,94,.5)}
.ghostbtn{
  padding:.8em 1.6em; border-radius:14px; cursor:pointer; font-family:var(--f-ui); font-weight:800; font-size:.95em;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink); transition:.18s;
}
.ghostbtn:hover{transform:translateY(-2px); background:rgba(255,255,255,.12)}
.btns{display:flex; gap:.7em; justify-content:center; margin-top:1.2em; flex-wrap:wrap}
table.stats{width:100%; border-collapse:collapse; margin-top:.8em; direction:rtl}
table.stats td,table.stats th{padding:.5em .55em; border-bottom:1px solid var(--line); font-size:.85em; text-align:center}
table.stats th{color:var(--ink2); font-weight:700; font-size:.78em}
table.stats td.n{font-family:var(--f-num); color:#fff}
table.stats tr.hd td{background:rgba(56,189,248,.12); font-weight:800}
.rotate{display:none; position:absolute; inset:0; z-index:20; place-items:center; background:#05080F; text-align:center; padding:2em}
.rotate svg{width:3.4em; height:3.4em; color:var(--cyan); margin-bottom:.6em}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes pulse{0%,100%{opacity:.35} 50%{opacity:1}}
@media (max-width:820px){
  .hud-top{grid-template-columns:auto 1fr; padding:.7em}
  .panel.feed{display:none}
  .stick{width:7em; height:7em}
  .abtn{width:4.9em; height:4.9em; font-size:.62em}
  .meters{width:11em}
}
@media (orientation:portrait) and (max-width:860px){ .rotate{display:grid} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; transition-duration:.05ms !important} }

/* لمس + تفاعل */
.opts{grid-template-columns:repeat(3,1fr)}
.abtn,.stick,.icobtn,canvas{ touch-action:none; -webkit-user-select:none; user-select:none }
button{cursor:pointer; font-family:var(--f-ui)}
button:focus-visible,.icobtn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.banner{pointer-events:none}
#stage:fullscreen{border-radius:0; font-size:clamp(9px,1.15vw,19px)}
@media (max-width:820px){ .opts{grid-template-columns:1fr; gap:.8em} .keys{grid-template-columns:repeat(2,1fr)} }