/* ===== كرتون فايترز — Design tokens ===== */
:root{
  --color-primary:#DC2626;
  --color-secondary:#2563EB;
  --color-accent:#22C55E;
  --color-background:#0F172A;
  --color-foreground:#FFFFFF;
  --color-muted:#1F1829;
  --color-border:rgba(255,255,255,.10);
  --gold:#FACC15;
  --cyan:#22D3EE;
  --violet:#A855F7;
  --ink:#070B16;
  --glow-red:0 0 18px rgba(220,38,38,.55);
  --glow-blue:0 0 18px rgba(37,99,235,.55);
  --radius:16px;
  --font-display:'Lalezar',system-ui,sans-serif;
  --font-body:'Cairo',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 80% -10%,rgba(37,99,235,.28),transparent 60%),
    radial-gradient(900px 600px at 10% 110%,rgba(220,38,38,.26),transparent 60%),
    var(--ink);
  color:var(--color-foreground);
  font-family:var(--font-body);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
#stage{
  position:relative;
  width:min(100vw,177.78vh);height:min(56.25vw,100vh);
  background:#05070f;border-radius:0;
  overflow:hidden;container-type:size;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  padding:3cqw;z-index:5;
}
.screen.show{display:flex}

/* ===== شاشة البداية ===== */
#screen-title{background:radial-gradient(80% 70% at 50% 45%,rgba(8,12,24,.35),rgba(5,7,15,.86) 70%)}
.title-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.6cqh;animation:pop .5s ease}
.logo-badge{
  font-size:1.5cqw;letter-spacing:.22em;padding:.5cqh 1.6cqw;border-radius:999px;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.5);color:#86efac;font-weight:700
}
.logo{
  font-family:var(--font-display);font-size:11cqw;line-height:.92;letter-spacing:.01em;
  color:#fff;text-shadow:0 .5cqh 0 #7f1d1d,0 1cqh 2.4cqh rgba(0,0,0,.65);
  transform:skewX(-3deg)
}
.logo span{color:var(--gold);margin-inline-start:.35em;text-shadow:0 .5cqh 0 #92400e,0 1cqh 2.4cqh rgba(0,0,0,.6)}
.tagline{font-size:1.7cqw;color:#cbd5e1;max-width:60cqw}
.mode-grid{display:flex;gap:2cqw;margin-top:1cqh;flex-wrap:wrap;justify-content:center}
.btn{
  cursor:pointer;border:0;border-radius:14px;font-family:var(--font-body);font-weight:700;
  background:linear-gradient(180deg,var(--color-primary),#991b1b);color:#fff;
  padding:1.4cqh 3cqw;font-size:1.5cqw;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  box-shadow:var(--glow-red);border-bottom:4px solid rgba(0,0,0,.35)
}
.btn:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 12px 30px rgba(220,38,38,.5)}
.btn:active{transform:translateY(1px)}
.btn--big{
  display:flex;flex-direction:column;gap:.4cqh;align-items:center;
  background:linear-gradient(180deg,#1e293b,#0b1120);box-shadow:0 0 0 1px var(--color-border),0 14px 34px rgba(0,0,0,.5);
  padding:2.2cqh 3.4cqw;min-width:22cqw;border-bottom:4px solid rgba(255,255,255,.08)
}
.btn--big strong{font-size:1.9cqw}
.btn--big span{font-size:1.15cqw;color:#93a4bd;font-weight:400}
.btn--big:hover{box-shadow:0 0 0 2px var(--color-secondary),var(--glow-blue)}
.btn--ghost{background:transparent;border:1px solid var(--color-border);box-shadow:none;color:#cbd5e1}
.btn--ghost:hover{background:rgba(255,255,255,.06);box-shadow:none;border-color:rgba(255,255,255,.3)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}

/* ===== اختيار الشخصية ===== */
#screen-select{justify-content:space-between;background:linear-gradient(180deg,rgba(5,7,15,.72),rgba(5,7,15,.94))}
.sel-head{text-align:center}
.sel-head h2{font-family:var(--font-display);font-size:3.4cqw;color:#fff;letter-spacing:.01em}
.sel-head p{font-size:1.25cqw;color:#94a3b8}
.roster{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.1cqw;
  width:min(96cqw,1500px);justify-items:stretch
}
.card{
  position:relative;cursor:pointer;width:auto;border-radius:var(--radius);
  background:rgba(255,255,255,.05);backdrop-filter:blur(12px);
  border:1px solid var(--color-border);padding:1.4cqh 1cqw 1.8cqh;
  display:flex;flex-direction:column;align-items:center;gap:.4cqh;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.28);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.card.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 42px rgba(250,204,21,.45);transform:translateY(-8px)}
.card.locked{pointer-events:none;opacity:.5;filter:grayscale(.5)}
.card canvas{width:100%;height:12.5cqh;display:block}
.card h3{font-family:var(--font-display);font-size:1.8cqw;color:#fff;line-height:1}
.card .role{font-size:.92cqw;padding:.35cqh 1cqw;border-radius:999px;background:rgba(255,255,255,.08);color:#cbd5e1}
.stats{width:100%;display:flex;gap:.6cqw;justify-content:space-between;margin-top:.6cqh}
.stat{flex:1;text-align:center;font-size:.82cqw;color:#94a3b8}
.stat i{display:block;height:.9cqh;border-radius:6px;background:rgba(255,255,255,.1);margin-top:.35cqh;overflow:hidden;position:relative}
.stat i::after{content:'';position:absolute;inset:0;width:var(--v,60%);background:linear-gradient(90deg,var(--c1,#22c55e),var(--c2,#86efac));border-radius:6px}
.sel-foot{display:flex;align-items:center;gap:1.6cqw}
.picked{display:flex;align-items:center;gap:.8cqw;padding:.7cqh 1.4cqw;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--color-border);font-size:1.1cqw;min-width:12cqw;justify-content:center}
.picked span{color:#94a3b8;font-size:1.1cqw}
.picked b{color:var(--gold)}

/* ===== واجهة القتال ===== */
#screen-fight{display:none;padding:0}
#screen-fight.show{display:block}
.hud{
  position:absolute;top:0;left:0;right:0;direction:ltr;z-index:6;
  display:flex;align-items:flex-start;gap:1.4cqw;padding:1.6cqh 2cqw;
  background:linear-gradient(180deg,rgba(5,7,15,.85),rgba(5,7,15,0))
}
.hud-side{flex:1;display:flex;flex-direction:column;gap:.7cqh}
.hud-side--p1{align-items:flex-start}
.hud-side--p2{align-items:flex-end}
.hud-name{display:flex;align-items:center;gap:.8cqw;font-family:var(--font-display);font-size:1.7cqw;letter-spacing:.02em;
  text-shadow:0 2px 6px rgba(0,0,0,.8)}
.pips{display:flex;gap:.35cqw}
.pips i{width:.9cqw;height:.9cqw;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pips i.won{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.bar{position:relative;width:100%;height:2.5cqh;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.bar i{position:absolute;top:0;bottom:0;left:0;width:100%;display:block}
.bar-lag{background:#fde68a;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.bar-fill{background:linear-gradient(180deg,#4ade80,#16a34a 55%,#15803d);transition:width .18s ease}
.bar-fill.warn{background:linear-gradient(180deg,#fbbf24,#d97706)}
.bar-fill.danger{background:linear-gradient(180deg,#f87171,#b91c1c)}
.bar--sp{height:1.1cqh;border-radius:999px;margin-top:.2cqh}
.bar--sp .bar-fill{background:linear-gradient(90deg,#0891b2,#22d3ee,#a855f7);width:0;transition:width .2s ease}
.bar--sp.full{animation:spPulse .8s infinite alternate}
.bar--sp.full .bar-fill{background:linear-gradient(90deg,#f59e0b,#facc15,#f97316)}
.sp-label{position:absolute;right:.6cqw;top:50%;transform:translateY(-50%);font-size:.8cqw;letter-spacing:.2em;color:#fff;opacity:.85;font-weight:700}
.bar--rtl .bar-lag,.bar--rtl .bar-fill{left:auto;right:0}
.hud-center{display:flex;flex-direction:column;align-items:center;padding-top:.2cqh;min-width:9cqw}
.timer{font-family:var(--font-display);font-size:4.2cqw;line-height:1;color:#fff;text-shadow:0 3px 0 #7f1d1d,0 6px 18px rgba(0,0,0,.7)}
.timer.low{color:#fca5a5;animation:tick .6s infinite alternate}
.round-label{font-size:1.05cqw;letter-spacing:.16em;color:#facc15;font-weight:700}
@keyframes spPulse{from{box-shadow:0 0 0 0 rgba(250,204,21,.4)}to{box-shadow:0 0 22px 4px rgba(250,204,21,.75)}}
@keyframes tick{from{transform:scale(1)}to{transform:scale(1.12)}}

/* ===== إعلانات القتال ===== */
.announce{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:7;pointer-events:none
}
.announce.show{display:flex}
.announce b{
  font-family:var(--font-display);font-size:9cqw;line-height:1;color:#fff;
  text-shadow:0 4px 0 #7f1d1d,0 0 40px rgba(220,38,38,.8),0 12px 40px rgba(0,0,0,.7);
  animation:annIn .45s cubic-bezier(.2,1.6,.4,1)
}
.announce.small b{font-size:5cqw}
@keyframes annIn{from{opacity:0;transform:scale(.5) rotate(-6deg)}to{opacity:1;transform:none}}
.paused{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:2cqh;
  background:rgba(5,7,15,.82);backdrop-filter:blur(6px);z-index:9
}
.paused.show{display:flex}
.paused h3{font-family:var(--font-display);font-size:5cqw;color:#fff}
/* ===== النتيجة ===== */
#screen-result{background:radial-gradient(70% 60% at 50% 40%,rgba(37,99,235,.25),rgba(5,7,15,.94))}
.result-card{
  text-align:center;padding:4cqh 6cqw;border-radius:24px;max-width:70cqw;
  background:rgba(255,255,255,.05);backdrop-filter:blur(14px);
  border:1px solid var(--color-border);box-shadow:0 30px 70px rgba(0,0,0,.6);animation:pop .45s ease
}
#result-title{font-family:var(--font-display);font-size:6cqw;color:var(--gold);text-shadow:0 4px 0 #92400e}
#result-sub{font-size:1.7cqw;color:#cbd5e1;margin-top:.6cqh}
.result-stats{display:flex;gap:3cqw;justify-content:center;margin:2.4cqh 0}
.result-stats div{font-size:1.2cqw;color:#94a3b8}
.result-stats div b{display:block;font-family:var(--font-display);font-size:3cqw;color:#fff}
.result-actions{display:flex;gap:1.6cqw;justify-content:center}
/* ===== نافذة الأزرار ===== */
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:20;background:rgba(5,7,15,.85);backdrop-filter:blur(6px)}
.modal.show{display:flex}
.modal-box{
  width:min(78cqw,900px);padding:3.4cqh 3cqw;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,rgba(31,24,41,.96),rgba(15,23,42,.98));border:1px solid var(--color-border);
  box-shadow:0 30px 80px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:2cqh;align-items:center
}
.modal-box h3{font-family:var(--font-display);font-size:3.4cqw;color:#fff}
.keys{width:100%;border-collapse:collapse;font-size:1.25cqw}
.keys th{color:#facc15;font-size:1.15cqw;padding:.9cqh;border-bottom:1px solid var(--color-border)}
.keys td{padding:.9cqh;border-bottom:1px solid rgba(255,255,255,.06);color:#cbd5e1}
kbd{
  display:inline-block;min-width:2.2cqw;margin:0 .2cqw;padding:.35cqh .5cqw;border-radius:7px;
  background:#0b1120;border:1px solid rgba(255,255,255,.2);border-bottom-width:3px;font-family:var(--font-body);font-size:1.05cqw;color:#fff
}
.tip{font-size:1.15cqw;color:#93a4bd;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);padding:1cqh 2cqw;border-radius:12px}

/* ===== أزرار اللمس ===== */
.touch{position:absolute;inset:auto 0 0 0;display:none;justify-content:space-between;align-items:flex-end;
  padding:1.6cqh 2cqw 2.4cqh;z-index:8;direction:ltr;pointer-events:none}
.touch.on.in-fight{display:flex}
.touch-pad{display:grid;grid-template-columns:repeat(3,auto);gap:1cqw;pointer-events:auto}
.tbtn{
  -webkit-user-select:none;user-select:none;cursor:pointer;font-family:var(--font-body);font-weight:700;
  width:9.5cqw;height:9.5cqw;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(15,23,42,.55);backdrop-filter:blur(8px);color:#fff;font-size:1.6cqw;
  display:flex;align-items:center;justify-content:center;transition:transform .1s ease,background .1s ease
}
.tbtn:active,.tbtn.on{background:rgba(220,38,38,.75);transform:scale(.92)}
.tbtn--punch{background:rgba(37,99,235,.5)}
.tbtn--kick{background:rgba(168,85,247,.5)}
.tbtn--super{background:rgba(250,204,21,.55);color:#1c1917}
.sound-toggle{
  position:absolute;top:1.4cqh;left:50%;transform:translateX(-50%);z-index:12;cursor:pointer;
  width:3.4cqw;height:3.4cqw;border-radius:50%;border:1px solid var(--color-border);
  background:rgba(15,23,42,.6);color:#fff;font-size:1.4cqw
}
.rotate-hint{display:none}
@media (orientation:portrait) and (max-width:900px){
  .rotate-hint{display:flex;position:absolute;inset:0;z-index:40;align-items:center;justify-content:center;
    background:rgba(5,7,15,.94);text-align:center;padding:8vw;font-size:5vw;color:#cbd5e1}
}
@media (max-width:760px){ .logo{font-size:15cqw} .tagline{font-size:3cqw} .btn{font-size:3cqw} .btn--big strong{font-size:4cqw} .btn--big span{font-size:2.4cqw} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;transition-duration:.001s!important} }

/* ===== تحسينات الجوال — iOS / أندرويد ===== */
html,body{overflow:hidden;overscroll-behavior:none;touch-action:none}
body{position:fixed;inset:0;width:100%;height:100%}
#stage{touch-action:none}
.btn,.card,.tbtn,.sound-toggle{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.touch{padding-left:calc(2cqw + env(safe-area-inset-left));padding-right:calc(2cqw + env(safe-area-inset-right));
  padding-bottom:calc(2.4cqh + env(safe-area-inset-bottom))}
.tbtn{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:54px;min-height:54px}
.tbtn svg{width:52%;height:52%}
.hud{padding-top:env(safe-area-inset-top)}
.sound-toggle{top:calc(1.4cqh + env(safe-area-inset-top));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:0}
.sound-toggle svg{width:58%;height:58%}
.sound-toggle .ic-off{display:none}
.sound-toggle.muted .ic-on{display:none}
.sound-toggle.muted .ic-off{display:block}
.modal-box,.result-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rotate-hint{flex-direction:column;gap:2vh;line-height:1.7}

/* ===== البطاقة الحيّة + وصف المقاتل ===== */
.sel-bio{
  flex:1;min-width:20cqw;max-width:38cqw;text-align:start;
  padding:1cqh 1.6cqw;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid var(--color-border);font-size:1.05cqw;line-height:1.55;color:#cbd5e1
}
.sel-bio b{font-family:var(--font-display);font-size:1.5cqw;color:#fff}
.sel-bio span{display:block;color:#94a3b8}
.sel-bio em{display:block;color:var(--gold);font-style:normal;font-weight:700;margin-top:.3cqh}

/* ===== شاشة الحلبات ===== */
#screen-stage{justify-content:space-between;background:linear-gradient(180deg,rgba(5,7,15,.74),rgba(5,7,15,.95))}
#screen-stage .sel-head p b{color:var(--gold)}
.stage-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;
  width:min(94cqw,1400px);align-items:stretch
}
.scard{
  cursor:pointer;border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.05);backdrop-filter:blur(12px);
  border:1px solid var(--color-border);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.scard:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.3);box-shadow:0 22px 46px rgba(0,0,0,.55)}
.scard canvas{width:100%;height:12cqh;display:block}
.scard-txt{padding:1.1cqh 1.2cqw;display:flex;flex-direction:column;gap:.4cqh;text-align:start}
.scard-txt h3{font-family:var(--font-display);font-size:1.8cqw;color:#fff;line-height:1.1}
.scard-txt p{font-size:.95cqw;color:#94a3b8}
.scard-tags{display:flex;gap:.6cqw;flex-wrap:wrap}
.scard-tags .tag{
  font-size:.85cqw;padding:.25cqh .8cqw;border-radius:999px;
  background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.32)
}
.scard-tags .tag--danger{background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.38)}
.scard-txt em{font-style:normal;font-size:.9cqw;color:#7f8ea8;line-height:1.5}
.arena-name{margin-top:.2cqh;font-size:.85cqw;letter-spacing:.08em;color:#7dd3fc;font-weight:700;white-space:nowrap}

/* ===== عصا التحكم + أزرار الجوال ===== */
.joy{
  position:relative;width:23cqw;max-width:210px;aspect-ratio:1;border-radius:50%;
  pointer-events:auto;touch-action:none;flex:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.10),rgba(15,23,42,.5) 70%);
  border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px)
}
.joy-ring{
  position:absolute;inset:14%;border-radius:50%;border:2px dashed rgba(255,255,255,.16)
}
.joy-knob{
  position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;margin:-22% 0 0 -22%;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(248,250,252,.9),rgba(148,163,184,.75));
  box-shadow:0 8px 22px rgba(0,0,0,.5);color:#0f172a;transition:transform .06s linear
}
.joy-knob svg{width:56%;height:56%;opacity:.75}
.tbtn--jump{background:rgba(34,197,94,.45)}
.tbtn--dash{background:rgba(14,165,233,.45)}
.tbtn{font-size:1.35cqw}

/* ===== استجابة الشاشات ===== */
@media (max-width:1000px){
  .roster{gap:.8cqw}
  .card{padding:1cqh .6cqw 1.2cqh}
  .card canvas{height:10.5cqh}
  .stage-list{gap:1cqw}
  .scard canvas{height:10cqh}
  .sel-bio{font-size:1cqw;min-width:16cqw}
}
@media (orientation:portrait) and (max-width:900px){
  .roster{grid-template-columns:repeat(2,1fr);gap:2.4vw;width:88cqw}
  .stage-list{grid-template-columns:1fr;width:80cqw}
  .card canvas{height:16cqh}
  .scard canvas{height:16cqh}
  .card h3{font-size:4cqw}
  .card .role,.stat{font-size:2cqw}
  .scard-txt h3{font-size:4cqw}
  .scard-txt p,.scard-txt em{font-size:2cqw}
  .sel-bio{display:none}
}
@media (max-height:520px){
  .card canvas{height:9cqh}
  .scard canvas{height:8cqh}
  .sel-head h2{font-size:2.6cqw}
}
.touch{padding-inline:calc(1.6cqw + env(safe-area-inset-left)) calc(1.6cqw + env(safe-area-inset-right))}
.joy{width:20cqw}