/* ===== أكاديمية المهارات — design tokens ===== */
:root{
  --bg:#04160f;
  --bg-2:#07241a;
  --pitch-a:#0e8a4c;
  --pitch-b:#065c31;
  --pitch-c:#04371f;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.11);
  --border-2:rgba(255,255,255,.2);
  --text:#f2fbf6;
  --muted:#93b0a2;
  --muted-2:#6f8c7e;
  --accent:#22c55e;
  --accent-2:#a3e635;
  --hot:#f59e0b;
  --hot-2:#fbbf24;
  --danger:#ef4444;
  --info:#38bdf8;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --sh:0 18px 40px -18px rgba(0,0,0,.75);
  --font:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --num:'Barlow Condensed','Cairo',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  overflow-x:hidden;
}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px}
.nono{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===== background fx ===== */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgfx-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bgfx-glow.a{width:52vw;height:52vw;top:-16vw;right:-10vw;background:radial-gradient(circle,#0f9e57,transparent 68%)}
.bgfx-glow.b{width:46vw;height:46vw;bottom:-18vw;left:-12vw;background:radial-gradient(circle,#0b5f8a,transparent 68%);opacity:.35}
.bgfx-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}
.bgfx-lines{position:absolute;inset:0;width:100%;height:100%}

/* ===== topbar ===== */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px clamp(14px,3vw,34px);
  background:rgba(4,22,15,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.ball-badge{width:44px;height:44px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(163,230,53,.28),rgba(34,197,94,.08));
  border:1px solid var(--border);transition:transform .25s}
.ball-badge svg{width:30px;height:30px}
.brand:hover .ball-badge{transform:rotate(-14deg) scale(1.06)}
.brand-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-txt b{font-size:clamp(15px,1.5vw,18px);font-weight:800;letter-spacing:-.2px}
.brand-txt i{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;align-items:center;gap:8px}
.xp-chip{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:linear-gradient(120deg,rgba(245,158,11,.2),rgba(251,191,36,.06));
  border:1px solid rgba(245,158,11,.35);font-size:13px;font-weight:700;white-space:nowrap}
.xp-chip svg{width:15px;height:15px;color:var(--hot-2)}
.xp-chip b{font-family:var(--num);font-size:17px;letter-spacing:.5px;color:var(--hot-2)}
.xp-chip span{color:var(--hot-2);opacity:.75;font-size:11px}
.icon-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:600;
  transition:background .2s,transform .2s,border-color .2s}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateY(-2px)}
.icon-btn.ghost{color:var(--muted)}
@media(max-width:720px){ .icon-btn .lbl{display:none} .brand-txt i{display:none} }

/* ===== shell ===== */
.screen{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:clamp(20px,3.4vw,44px) clamp(14px,3vw,34px) 90px}
.view{animation:fadeUp .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.stack{display:grid;gap:clamp(16px,2.4vw,28px)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-weight:800;font-size:15px;
  transition:transform .2s,box-shadow .25s,background .2s,border-color .2s;border:1px solid transparent}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn-primary{background:linear-gradient(120deg,var(--accent),#0f9e57);color:#03150d;box-shadow:0 14px 30px -12px rgba(34,197,94,.75)}
.btn-primary:hover{box-shadow:0 20px 40px -12px rgba(34,197,94,.9)}
.btn-hot{background:linear-gradient(120deg,var(--hot-2),var(--hot));color:#2a1703;box-shadow:0 14px 30px -14px rgba(245,158,11,.8)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border-2)}
.btn-lg{padding:17px 34px;font-size:16.5px}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ===== cards ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  backdrop-filter:blur(12px);box-shadow:var(--sh)}
.card-pad{padding:clamp(18px,2.4vw,28px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1px;
  padding:7px 14px;border-radius:999px;background:rgba(34,197,94,.14);color:var(--accent-2);
  border:1px solid rgba(34,197,94,.28);text-transform:uppercase}
.eyebrow svg{width:14px;height:14px}
h1{font-size:clamp(30px,5.4vw,58px);font-weight:900;line-height:1.12;letter-spacing:-1.2px}
h2{font-size:clamp(21px,3vw,32px);font-weight:800;letter-spacing:-.6px}
h3{font-size:clamp(16px,1.9vw,20px);font-weight:800}
.lead{color:var(--muted);font-size:clamp(14.5px,1.7vw,17.5px);max-width:60ch}
.grad{background:linear-gradient(100deg,var(--accent-2),var(--accent) 45%,#38bdf8);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== hero ===== */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3.4vw,50px);align-items:center;
  padding:clamp(22px,3.4vw,46px);border-radius:var(--r-xl);
  background:radial-gradient(120% 130% at 88% 0%,rgba(34,197,94,.2),transparent 58%),var(--surface);
  border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden;position:relative}
.hero-copy{display:grid;gap:18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.hero-viz{position:relative;aspect-ratio:1/1;max-width:400px;justify-self:center;width:100%}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-viz{max-width:320px;order:-1}}

.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.metric{padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);text-align:center}
.metric b{display:block;font-family:var(--num);font-size:clamp(24px,3.6vw,36px);font-weight:700;color:var(--accent-2);line-height:1.1}
.metric span{font-size:12px;color:var(--muted)}
@media(max-width:560px){.metrics{grid-template-columns:1fr 1fr}}

/* ===== skill map ===== */
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(14px,2vw,20px)}
.skill-card{position:relative;display:grid;gap:12px;padding:clamp(18px,2.2vw,24px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);cursor:pointer;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .25s,box-shadow .28s;text-align:start}
.skill-card::before{content:'';position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,var(--tint,rgba(34,197,94,.5)),transparent 70%);opacity:.35;transition:opacity .3s}
.skill-card:hover{transform:translateY(-6px);border-color:var(--border-2);box-shadow:0 26px 52px -22px rgba(0,0,0,.85)}
.skill-card:hover::before{opacity:.6}
.skill-card.is-done{border-color:rgba(163,230,53,.42)}
.skill-top{display:flex;align-items:center;gap:12px;position:relative}
.skill-ico{width:50px;height:50px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#22c55e) 22%,transparent);border:1px solid color-mix(in srgb,var(--c,#22c55e) 45%,transparent)}
.skill-ico svg{width:25px;height:25px;color:var(--c,#22c55e)}
.skill-no{font-family:var(--num);font-size:13px;color:var(--muted);letter-spacing:1px}
.skill-title{font-size:19px;font-weight:800;line-height:1.3;position:relative}
.skill-tag{font-size:13px;color:var(--muted);position:relative}
.skill-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;
  padding-top:12px;border-top:1px solid var(--border)}
.stars{display:flex;gap:3px}
.stars svg{width:16px;height:16px;color:rgba(255,255,255,.2)}
.stars svg.on{color:var(--hot-2)}
.pill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.pill.ready{color:var(--accent-2);border-color:rgba(163,230,53,.4);background:rgba(163,230,53,.1)}

/* ===== pitch arena ===== */
.pitch{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;touch-action:none;
  border:1px solid rgba(255,255,255,.16);
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 7.6%,rgba(0,0,0,.06) 7.6% 15.2%),
    radial-gradient(130% 100% at 50% 0%,var(--pitch-a),var(--pitch-b) 55%,var(--pitch-c));
  box-shadow:inset 0 0 100px rgba(0,0,0,.5),var(--sh);container-type:size;user-select:none}
.pitch.turf-night{background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 7.6%,rgba(0,0,0,.07) 7.6% 15.2%),radial-gradient(130% 100% at 50% 0%,#0a6f3f,#05492a 55%,#032a18)}
.pk{position:absolute;border:2px solid rgba(255,255,255,.24);pointer-events:none}
.pk-out{inset:3.5%;border-radius:5px}
.pk-half{left:3.5%;right:3.5%;top:50%;border-width:0;border-top-width:2px}
.pk-circle{left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border-width:2px}
.pk-box-top{left:50%;top:3.5%;width:52%;height:19%;transform:translateX(-50%);border-top:0}
.pk-box-bot{left:50%;bottom:3.5%;width:52%;height:19%;transform:translateX(-50%);border-bottom:0}
.pk-goal-top{left:50%;top:2%;width:26%;height:2.4%;transform:translateX(-50%);background:rgba(255,255,255,.85);border:1px solid #04160f;border-radius:3px}
.pk-goal-bot{left:50%;bottom:2%;width:26%;height:2.4%;transform:translateX(-50%);background:rgba(255,255,255,.85);border:1px solid #04160f;border-radius:3px}
.pk-arc-top{left:50%;top:22%;width:22%;height:9%;transform:translateX(-50%);border-radius:0 0 50% 50%;border-top:0}
.pk-net{position:absolute;left:50%;top:1.2%;width:26%;height:3.6%;transform:translateX(-50%);
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:4px 4px;border:1px solid rgba(255,255,255,.6);border-radius:3px;pointer-events:none}

/* entities — 1em = 1% of pitch width */
.ent{position:absolute;transform:translate(-50%,-50%);will-change:left,top}
.ply{width:5.4em;height:5.4em;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:1.9em;border:2px solid rgba(255,255,255,.7);color:#04160f;
  box-shadow:0 6px 16px rgba(0,0,0,.45)}
.ply.mine{background:linear-gradient(150deg,#a3e635,#22c55e);border-color:#f2fbf6}
.ply.mate{background:linear-gradient(150deg,#38bdf8,#0284c7);color:#01202f}
.ply.foe{background:linear-gradient(150deg,#f87171,#dc2626);color:#2b0606}
.ply.keeper{background:linear-gradient(150deg,#fbbf24,#f59e0b);color:#2a1703}
.ball{width:3.1em;height:3.1em;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#d7e3dc 62%,#9fb3a9);
  border:1.5px solid #0b1f16;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.lbl-num{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);
  font-size:1.5em;font-weight:800;color:#eafff3;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.cone{width:3.4em;height:3.4em;background:linear-gradient(160deg,#fbbf24,#ea580c);
  clip-path:polygon(50% 0,74% 46%,88% 100%,12% 100%,26% 46%);box-shadow:0 6px 14px rgba(0,0,0,.45)}
.ring{position:absolute;border-radius:50%;border:2.5px dashed rgba(255,255,255,.55);transform:translate(-50%,-50%);pointer-events:none}
.ring.good{border-color:rgba(163,230,53,.95);background:rgba(163,230,53,.14);border-style:solid}
.ring.bad{border-color:rgba(239,68,68,.9);background:rgba(239,68,68,.14);border-style:solid}
.route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.route line{stroke-width:.7;stroke-dasharray:2 1.6;stroke-linecap:round}
.zone{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(163,230,53,.35),rgba(163,230,53,0) 70%);
  border:2px dashed rgba(163,230,53,.8);animation:pulseZone 1.8s ease-in-out infinite}
@keyframes pulseZone{50%{transform:translate(-50%,-50%) scale(1.1);opacity:.75}}
.hint-arrow{position:absolute;transform:translate(-50%,-50%);color:var(--hot-2);animation:bob .9s ease-in-out infinite}
@keyframes bob{50%{margin-top:-6px}}

/* ===== game layout ===== */
.game-wrap{display:grid;gap:16px}
.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.hud-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.stat svg{width:15px;height:15px}
.stat b{font-family:var(--num);font-size:19px;color:var(--text);letter-spacing:.5px}
.hearts{display:flex;gap:4px}
.hearts svg{width:17px;height:17px;color:var(--danger)}
.hearts svg.off{color:rgba(255,255,255,.16)}
.game-body{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1000px){.game-body.has-side{grid-template-columns:1fr minmax(240px,288px)}}
.side{display:grid;gap:14px;align-content:start}
.board{position:relative}
.board-toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:8;
  padding:9px 18px;border-radius:999px;font-weight:800;font-size:14px;white-space:nowrap;
  background:rgba(4,22,15,.86);border:1px solid var(--border-2);backdrop-filter:blur(8px);
  animation:popIn .3s cubic-bezier(.2,1.4,.4,1) both}
.board-toast.ok{border-color:rgba(163,230,53,.6);color:var(--accent-2)}
.board-toast.no{border-color:rgba(239,68,68,.6);color:#fca5a5}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-12px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* meters */
.meter{position:relative;height:22px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--border-2);overflow:hidden}
.meter-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .06s linear}
.meter-zone{position:absolute;top:-2px;bottom:-2px;border-inline:2px solid rgba(163,230,53,.9);background:rgba(163,230,53,.22)}
.meter-mark{position:absolute;top:-5px;bottom:-5px;width:3px;background:#fff;box-shadow:0 0 10px #fff;border-radius:2px}
.power{position:relative;height:20px;border-radius:999px;background:rgba(0,0,0,.42);border:1px solid var(--border-2);overflow:hidden}
.power i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#22c55e,#fbbf24 62%,#ef4444);transition:width .05s linear}
.aim-track{position:absolute;left:0;right:0;height:4px;background:rgba(255,255,255,.22);border-radius:2px}
.aim-mark{position:absolute;top:-7px;width:4px;height:18px;border-radius:2px;background:var(--hot-2);box-shadow:0 0 14px var(--hot-2);transform:translateX(-50%)}

/* ===== lesson ===== */
.lesson-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.steps{display:grid;gap:12px;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);transition:transform .22s,border-color .22s;text-align:start}
.step:hover{transform:translateX(-5px);border-color:var(--border-2)}
.step-no{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:var(--num);
  font-size:20px;font-weight:700;background:rgba(34,197,94,.16);color:var(--accent-2);border:1px solid rgba(34,197,94,.32)}
.step b{display:block;font-size:16px;font-weight:800;margin-bottom:3px}
.step p{font-size:14.5px;color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.note{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface)}
.note h4{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;margin-bottom:9px}
.note h4 svg{width:17px;height:17px}
.note ul{list-style:none;display:grid;gap:8px}
.note li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:14px;color:var(--muted)}
.note li svg{width:15px;height:15px;margin-top:5px}
.note.warn{border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.07)}
.note.warn h4,.note.warn li svg{color:#fca5a5}
.note.tip{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.07)}
.note.tip h4,.note.tip li svg{color:var(--hot-2)}
.note.key{border-color:rgba(56,189,248,.32);background:rgba(56,189,248,.07)}
.note.key h4,.note.key li svg{color:#7dd3fc}
.drill{padding:18px 20px;border-radius:var(--r-md);border:1px dashed rgba(163,230,53,.45);
  background:linear-gradient(120deg,rgba(163,230,53,.1),transparent);font-size:14.5px}
.drill b{color:var(--accent-2)}

/* ===== result ===== */
.result{text-align:center;display:grid;gap:18px;justify-items:center;padding:clamp(24px,4vw,48px)}
.result .big-stars{display:flex;gap:8px}
.result .big-stars svg{width:clamp(34px,7vw,54px);height:clamp(34px,7vw,54px);color:rgba(255,255,255,.16)}
.result .big-stars svg.on{color:var(--hot-2);filter:drop-shadow(0 0 14px rgba(245,158,11,.55));animation:popIn .45s cubic-bezier(.2,1.5,.4,1) both}
.scoreline{font-family:var(--num);font-size:clamp(46px,9vw,86px);font-weight:700;line-height:1;color:var(--accent-2)}

/* ===== sheet / notebook ===== */
.sheet-back{position:fixed;inset:0;z-index:80;background:rgba(2,10,7,.7);backdrop-filter:blur(6px);animation:fadeUp .25s both}
.sheet{position:fixed;inset:auto 0 0 0;z-index:81;max-height:88dvh;overflow:auto;
  background:linear-gradient(180deg,#08281b,#04160f);border-top:1px solid var(--border-2);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:clamp(20px,3vw,34px);animation:slideUp .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.sheet-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.sheet-item{display:grid;gap:6px;padding:15px 17px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--border);cursor:pointer;transition:transform .2s,border-color .2s;text-align:start}
.sheet-item:hover{transform:translateY(-3px);border-color:var(--border-2)}
.sheet-item b{font-size:15px}
.sheet-item span{font-size:12.5px;color:var(--muted)}

/* ===== toast ===== */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:95;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{padding:11px 22px;border-radius:999px;font-weight:700;font-size:14px;
  background:rgba(8,40,27,.94);border:1px solid var(--border-2);box-shadow:var(--sh);
  animation:popIn .3s cubic-bezier(.2,1.4,.4,1) both}
.toast.ok{border-color:rgba(163,230,53,.55);color:var(--accent-2)}
.toast.no{border-color:rgba(239,68,68,.55);color:#fca5a5}
.bar-top{position:fixed;top:0;left:0;right:0;height:3px;z-index:99;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform-origin:right;transition:transform .2s}

/* ===== controls pad + misc ===== */
.pad{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.pad-btn{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border-2);transition:transform .15s,background .2s}
.pad-btn svg{width:26px;height:26px}
.pad-btn:hover{background:var(--surface-2)}
.pad-btn:active{transform:scale(.93);background:rgba(34,197,94,.25)}
.pad-hint{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px}
.ctrls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend i{width:13px;height:13px;border-radius:50%;display:inline-block;vertical-align:-2px;margin-inline-end:5px}
.progress-ring{display:grid;place-items:center;position:relative}
.progress-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.progress-ring .val{position:absolute;text-align:center}
.progress-ring .val b{display:block;font-family:var(--num);font-size:clamp(30px,5vw,44px);line-height:1}
.progress-ring .val span{font-size:11.5px;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.badge{padding:14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);text-align:center;
  display:grid;gap:6px;justify-items:center;opacity:.45;transition:opacity .25s}
.badge.on{opacity:1;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.09)}
.badge svg{width:22px;height:22px;color:var(--hot-2)}
.badge b{font-size:12.5px;font-weight:700}
.badge span{font-size:11px;color:var(--muted)}
.sr-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:6px}
.sr-crumb svg{width:14px;height:14px}
.kbd{font-family:var(--num);font-size:13px;padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.1);
  border:1px solid var(--border-2);border-bottom-width:3px;font-weight:700}
.mt-a{margin-top:auto}
@media(max-width:640px){
  .pitch{aspect-ratio:4/5}
  .pk-box-top,.pk-box-bot{width:66%;height:15%}
  .pk-circle{width:44%}
  .pad-btn{width:70px;height:70px}
}
@media(max-width:420px){
  .xp-chip span{display:none}
  .screen{padding-bottom:70px}
}

/* ===== عناصر إضافية داخل الملعب ===== */
.band{position:absolute;left:0;right:0;pointer-events:none;z-index:3;
  border-block:2px dashed rgba(163,230,53,.6);
  background:linear-gradient(180deg,rgba(163,230,53,.02),rgba(163,230,53,.16),rgba(163,230,53,.02));
  box-shadow:0 0 22px rgba(163,230,53,.28) inset;transition:top .3s,height .3s}
.hint-arrow svg{width:100%;height:auto;color:var(--hot-2);filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.banner{position:relative;overflow:hidden}
.banner::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.banner h3{font-size:clamp(15px,1.8vw,19px);font-weight:800;line-height:1.7}
.banner .sr-crumb{margin-bottom:4px}
.board-toast{z-index:9}
@media (max-width:640px){
  .hint-arrow{width:10em!important}
}

/* ===== تصحيح تخطيط بطاقة المهارة ===== */
.skill-top>span:not(.skill-ico){display:grid;gap:2px;min-width:0}
.skill-card .skill-foot .stars{align-items:center}
.two>.note{height:100%}
@media (max-width:480px){
  .skill-grid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
}