/* ═══════════════════════════════════════════
   MOJAHID TECH — Game CSS
═══════════════════════════════════════════ */
:root{
  --p:#237292;--s:#0B7F95;--dk:#0A0F1C;--dk2:#0d1528;
  --lt:#F5F7FA;--ac:#00E5FF;--gw:rgba(35,114,146,.35);
  --green:#00ff9d;--yellow:#ffc107;--red:#ff5f57;--purple:#c792ea;
  --easy:#00ff9d;--medium:#00E5FF;--hard:#ffc107;--pro:#c792ea;
}
*{margin:0;padding:0;box-sizing:border-box}
.gm-wrap{min-height:100vh;background:var(--dk);color:var(--lt);direction:rtl;font-family:'Tajawal',sans-serif;padding-top:70px}

/* ── HERO ── */
.gm-hero{padding:70px 60px 50px;position:relative;overflow:hidden;text-align:center}
.gm-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 35%,rgba(35,114,146,.12) 0%,transparent 65%);pointer-events:none}
.gm-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(35,114,146,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(35,114,146,.04) 1px,transparent 1px);background-size:50px 50px}
.gm-title{font-size:clamp(2rem,4vw,3.4rem);font-weight:900;margin-bottom:12px;position:relative;z-index:1}
.gm-title span{background:linear-gradient(135deg,var(--p),var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gm-sub{font-size:1rem;color:rgba(245,247,250,.55);margin-bottom:36px;position:relative;z-index:1;line-height:1.75}
.gm-hero-stats{display:flex;justify-content:center;gap:22px;margin-bottom:36px;position:relative;z-index:1;flex-wrap:wrap}
.gm-hstat{background:rgba(13,21,40,.8);border:1px solid rgba(35,114,146,.18);border-radius:14px;padding:16px 22px;text-align:center}
.gm-hstat-val{font-family:'Space Mono',monospace;font-size:1.6rem;font-weight:700;color:var(--ac);display:block}
.gm-hstat-lbl{font-size:.68rem;color:rgba(245,247,250,.4);margin-top:3px}
.gm-start-btn{padding:16px 44px;background:linear-gradient(135deg,var(--p),var(--s));border:none;border-radius:12px;color:white;font-family:'Tajawal',sans-serif;font-size:1.1rem;font-weight:700;cursor:pointer;animation:gm-pulse 2.5s ease-in-out infinite;transition:transform .3s;position:relative;z-index:1;text-decoration:none;display:inline-block}
.gm-start-btn:hover{transform:scale(1.05)}
@keyframes gm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(35,114,146,.5)}50%{box-shadow:0 0 0 14px rgba(35,114,146,0)}}

/* ── DIFFICULTY BADGES ── */
.diff-easy{color:var(--easy);background:rgba(0,255,157,.1);border:1px solid rgba(0,255,157,.25)}
.diff-medium{color:var(--medium);background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.25)}
.diff-hard{color:var(--hard);background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.25)}
.diff-professional{color:var(--purple);background:rgba(198,126,234,.1);border:1px solid rgba(198,126,234,.25)}

/* ── LEVELS GRID ── */
.gm-levels{max-width:1200px;margin:0 auto;padding:40px 60px 80px}
.gm-section-lbl{font-family:'Space Mono',monospace;font-size:.7rem;color:rgba(245,247,250,.35);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.gm-section-lbl::after{content:'';flex:1;height:1px;background:rgba(35,114,146,.12)}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:40px}

/* Level Card */
.gm-lcard{background:rgba(13,21,40,.78);border:1px solid rgba(35,114,146,.14);border-radius:16px;padding:22px;position:relative;overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1);opacity:0;transform:translateY(20px);text-decoration:none;display:block;color:var(--lt)}
.gm-lcard.visible{opacity:1;transform:translateY(0)}
.gm-lcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.gm-lcard.diff-easy-card::before{background:linear-gradient(90deg,var(--easy),rgba(0,255,157,.3))}
.gm-lcard.diff-medium-card::before{background:linear-gradient(90deg,var(--medium),rgba(0,229,255,.3))}
.gm-lcard.diff-hard-card::before{background:linear-gradient(90deg,var(--hard),rgba(255,193,7,.3))}
.gm-lcard.diff-pro-card::before{background:linear-gradient(90deg,var(--purple),rgba(198,126,234,.3))}
.gm-lcard:hover{border-color:rgba(35,114,146,.4);transform:translateY(-7px);box-shadow:0 14px 44px rgba(35,114,146,.14)}
.gm-lcard:hover::before{transform:scaleX(1)}
.gm-lcard.completed{border-color:rgba(0,255,157,.2)}
.gm-lcard.completed::after{content:'✅';position:absolute;top:12px;left:12px;font-size:1.1rem}

.gm-lcard-num{font-family:'Space Mono',monospace;font-size:.65rem;color:rgba(245,247,250,.3);margin-bottom:10px}
.gm-lcard-title{font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.3}
.gm-lcard-desc{font-size:.78rem;color:rgba(245,247,250,.5);margin-bottom:14px;line-height:1.5}
.gm-lcard-footer{display:flex;justify-content:space-between;align-items:center}
.gm-diff-badge{padding:3px 10px;border-radius:100px;font-size:.66rem;font-weight:700}
.gm-pts{font-family:'Space Mono',monospace;font-size:.76rem;color:var(--yellow)}

/* ════════════════════════════
   LEVEL PAGE
════════════════════════════ */
.gl-wrap{min-height:100vh;background:var(--dk);color:var(--lt);direction:rtl;font-family:'Tajawal',sans-serif;padding-top:70px}
.gl-layout{max-width:900px;margin:0 auto;padding:40px 60px 100px}

/* Intro Story */
.gi-story{background:linear-gradient(135deg,rgba(35,114,146,.12),rgba(13,21,40,.9));border:1px solid rgba(35,114,146,.25);border-radius:20px;padding:32px;margin-bottom:32px;position:relative;overflow:hidden}
.gi-story::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--p),var(--ac),var(--p));background-size:200%;animation:gl-shimmer 3s linear infinite}
@keyframes gl-shimmer{0%{background-position:0%}100%{background-position:200%}}
.gi-emoji{font-size:3rem;margin-bottom:12px;display:block;animation:gl-float 3s ease-in-out infinite}
@keyframes gl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.gi-story h3{font-size:1.3rem;font-weight:800;margin-bottom:12px;color:var(--ac)}
.gi-story p{font-size:.95rem;color:rgba(245,247,250,.75);line-height:1.8;margin-bottom:8px}
.gi-story pre{background:rgba(10,15,28,.8);border:1px solid rgba(35,114,146,.2);border-radius:8px;padding:14px;font-family:'Space Mono',monospace;font-size:.78rem;color:var(--ac);overflow-x:auto;margin:12px 0;direction:ltr;text-align:left}
.gi-story code{background:rgba(35,114,146,.15);padding:2px 7px;border-radius:5px;font-family:'Space Mono',monospace;font-size:.82rem;color:var(--ac)}
.gi-story ul{padding-right:20px;margin:8px 0}
.gi-story li{font-size:.9rem;color:rgba(245,247,250,.7);margin-bottom:5px;line-height:1.6}
.gi-final{border-color:rgba(255,193,7,.3);background:linear-gradient(135deg,rgba(255,193,7,.08),rgba(13,21,40,.9))}

/* Question box */
.gl-question-box{background:rgba(13,21,40,.85);border:1px solid rgba(35,114,146,.2);border-radius:16px;padding:28px;margin-bottom:24px}
.gl-level-info{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.gl-level-num{font-family:'Space Mono',monospace;font-size:.72rem;color:rgba(245,247,250,.4)}
.gl-question{font-size:1.1rem;font-weight:700;line-height:1.6;margin-bottom:20px;color:var(--lt)}

/* Multiple choice */
.gl-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.gl-choice{display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(35,114,146,.06);border:1px solid rgba(35,114,146,.15);border-radius:10px;cursor:pointer;transition:all .25s;font-size:.92rem}
.gl-choice:hover{background:rgba(35,114,146,.14);border-color:rgba(35,114,146,.35)}
.gl-choice.selected{background:rgba(35,114,146,.2);border-color:var(--p);color:var(--ac)}
.gl-choice.correct{background:rgba(0,255,157,.1);border-color:var(--green);color:var(--green)}
.gl-choice.wrong{background:rgba(255,95,87,.1);border-color:var(--red);color:var(--red)}
.gl-choice-key{font-family:'Space Mono',monospace;width:28px;height:28px;border-radius:8px;background:rgba(35,114,146,.2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}

/* Text/Numeric input */
.gl-input{width:100%;padding:14px 18px;background:rgba(10,15,28,.8);border:1.5px solid rgba(35,114,146,.2);border-radius:10px;color:var(--lt);font-family:'Tajawal',sans-serif;font-size:1rem;outline:none;transition:border-color .3s;margin-bottom:16px;direction:rtl}
.gl-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(35,114,146,.12)}

/* Submit btn */
.gl-submit-btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--p),var(--s));border:none;border-radius:10px;color:white;font-family:'Tajawal',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.gl-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 36px rgba(35,114,146,.4)}
.gl-submit-btn:disabled{opacity:.5;cursor:not-allowed}

/* Hints */
.gl-hints{margin-bottom:20px}
.gl-hints-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gl-hints-title{font-size:.82rem;color:rgba(245,247,250,.5);font-family:'Space Mono',monospace}
.gl-hint-btns{display:flex;gap:8px}
.gl-hint-btn{padding:7px 14px;background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.2);border-radius:8px;color:var(--yellow);font-size:.75rem;cursor:pointer;transition:all .25s;font-family:'Tajawal',sans-serif}
.gl-hint-btn:hover:not(:disabled){background:rgba(255,193,7,.2)}
.gl-hint-btn:disabled{opacity:.4;cursor:not-allowed}
.gl-hint-reveal{background:rgba(255,193,7,.06);border:1px solid rgba(255,193,7,.15);border-radius:10px;padding:14px 18px;font-size:.88rem;color:rgba(245,247,250,.8);animation:gl-fadeIn .4s ease;margin-bottom:8px;display:none}
.gl-hint-reveal.show{display:block}
@keyframes gl-fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Feedback */
.gl-feedback{border-radius:16px;padding:24px;margin-top:20px;display:none;animation:gl-fadeIn .5s ease}
.gl-feedback.show{display:block}
.gl-feedback.success{background:rgba(0,255,157,.06);border:1.5px solid rgba(0,255,157,.25)}
.gl-feedback.failure{background:rgba(255,95,87,.06);border:1.5px solid rgba(255,95,87,.25)}
.gl-feedback-icon{font-size:2.5rem;margin-bottom:12px;display:block;text-align:center;animation:gl-bounce .6s ease}
@keyframes gl-bounce{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.gl-feedback-msg{font-size:1.2rem;font-weight:800;text-align:center;margin-bottom:16px}
.gl-feedback.success .gl-feedback-msg{color:var(--green)}
.gl-feedback.failure .gl-feedback-msg{color:var(--red)}
.gl-pts-earned{text-align:center;font-family:'Space Mono',monospace;font-size:1.6rem;color:var(--yellow);margin-bottom:20px;animation:gl-countUp .8s ease}
@keyframes gl-countUp{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.gl-explanation{background:rgba(35,114,146,.08);border:1px solid rgba(35,114,146,.15);border-radius:12px;padding:18px;margin-bottom:20px}
.gl-explanation h4{color:var(--ac);font-size:.9rem;margin-bottom:10px}
.gl-explanation p,.gl-explanation ul{font-size:.85rem;color:rgba(245,247,250,.75);line-height:1.75}
.gl-explanation code{font-family:'Space Mono',monospace;background:rgba(35,114,146,.15);padding:2px 7px;border-radius:5px;color:var(--ac);font-size:.8rem}
.gl-explanation ul{padding-right:18px}
.gl-explanation li{margin-bottom:5px}
.gl-explanation pre{background:rgba(10,15,28,.8);border:1px solid rgba(35,114,146,.2);border-radius:8px;padding:12px;font-family:'Space Mono',monospace;font-size:.75rem;color:var(--ac);overflow-x:auto;direction:ltr;margin:8px 0}
.gl-next-btn{display:block;width:100%;padding:14px;background:linear-gradient(135deg,var(--p),var(--s));border:none;border-radius:10px;color:white;font-family:'Tajawal',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s;text-align:center;text-decoration:none;animation:gm-pulse 2s ease-in-out infinite}
.gl-next-btn:hover{transform:translateY(-2px)}

/* Progress bar */
.gl-progress-row{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.gl-progress-lbl{font-size:.7rem;color:rgba(245,247,250,.4);white-space:nowrap;font-family:'Space Mono',monospace}
.gl-progress-bar{flex:1;height:5px;background:rgba(35,114,146,.12);border-radius:3px;overflow:hidden}
.gl-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--ac));border-radius:3px;transition:width 1s ease}

/* Shake animation */
@keyframes gl-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.gl-shake{animation:gl-shake .5s ease}

/* Character */
#gm-char{position:fixed;bottom:26px;left:26px;z-index:9000}
.gm-bubble{position:absolute;bottom:70px;left:0;background:rgba(13,21,40,.97);border:1px solid rgba(35,114,146,.4);border-radius:12px 12px 12px 0;padding:10px 14px;min-width:185px;font-size:.8rem;line-height:1.6;backdrop-filter:blur(10px);transform:scale(0);transform-origin:bottom left;transition:transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.gm-bubble.show{transform:scale(1)}
.gm-bubble::after{content:'';position:absolute;bottom:-7px;left:12px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid rgba(35,114,146,.4)}
.gm-avatar{width:56px;height:56px;background:linear-gradient(135deg,var(--p),var(--s));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;border:2px solid rgba(35,114,146,.45);animation:gm-idle 4s ease-in-out infinite;box-shadow:0 0 20px rgba(35,114,146,.3);cursor:pointer}
@keyframes gm-idle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}

/* ════════════════════════════
   LEADERBOARD PAGE
════════════════════════════ */
.lb-wrap{min-height:100vh;background:var(--dk);color:var(--lt);direction:rtl;font-family:'Tajawal',sans-serif;padding-top:70px}
.lb-hero{padding:60px 60px 40px;text-align:center;position:relative}
.lb-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 50% at 50% 30%,rgba(255,193,7,.08) 0%,transparent 65%);pointer-events:none}
.lb-title{font-size:clamp(1.8rem,3.5vw,3rem);font-weight:900;margin-bottom:10px}
.lb-title span{background:linear-gradient(135deg,#ffc107,#ff9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lb-sub{font-size:.95rem;color:rgba(245,247,250,.5)}

/* Top 3 podium */
.lb-podium{display:flex;justify-content:center;align-items:flex-end;gap:20px;padding:40px 60px 20px;max-width:700px;margin:0 auto}
.lb-podium-item{text-align:center;flex:1;max-width:180px}
.lb-pod-rank{font-size:2rem;margin-bottom:6px;display:block}
.lb-pod-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:white;margin:0 auto 10px;border:3px solid transparent}
.lb-pod-1 .lb-pod-avatar{background:linear-gradient(135deg,#ffd700,#ffb000);border-color:#ffd700;box-shadow:0 0 24px rgba(255,215,0,.4);width:80px;height:80px;font-size:1.8rem}
.lb-pod-2 .lb-pod-avatar{background:linear-gradient(135deg,#c0c0c0,#a8a8a8);border-color:#c0c0c0}
.lb-pod-3 .lb-pod-avatar{background:linear-gradient(135deg,#cd7f32,#b36700);border-color:#cd7f32}
.lb-pod-name{font-size:.88rem;font-weight:700;margin-bottom:4px}
.lb-pod-pts{font-family:'Space Mono',monospace;font-size:1rem;color:var(--yellow)}
.lb-pod-bar{border-radius:6px 6px 0 0;margin-top:10px}
.lb-pod-1 .lb-pod-bar{height:80px;background:linear-gradient(to top,rgba(255,215,0,.3),rgba(255,215,0,.1));border:1px solid rgba(255,215,0,.3)}
.lb-pod-2 .lb-pod-bar{height:55px;background:linear-gradient(to top,rgba(192,192,192,.3),rgba(192,192,192,.1));border:1px solid rgba(192,192,192,.2)}
.lb-pod-3 .lb-pod-bar{height:40px;background:linear-gradient(to top,rgba(205,127,50,.3),rgba(205,127,50,.1));border:1px solid rgba(205,127,50,.2)}

/* Table */
.lb-table-wrap{max-width:800px;margin:0 auto;padding:20px 60px 80px}
.lb-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;border:1px solid rgba(35,114,146,.15)}
.lb-table th{background:rgba(35,114,146,.1);padding:12px 16px;font-size:.72rem;color:rgba(245,247,250,.5);font-family:'Space Mono',monospace;letter-spacing:.5px;text-align:right;border-bottom:1px solid rgba(35,114,146,.12)}
.lb-table td{padding:13px 16px;font-size:.88rem;border-bottom:1px solid rgba(35,114,146,.07);vertical-align:middle}
.lb-table tr:last-child td{border-bottom:none}
.lb-table tr:hover td{background:rgba(35,114,146,.05)}
.lb-table tr.me td{background:rgba(35,114,146,.1)!important;border-color:rgba(35,114,146,.2)!important}
.lb-rank-num{font-family:'Space Mono',monospace;font-size:.82rem;color:rgba(245,247,250,.4);text-align:center;width:40px}
.lb-rank-1{color:var(--yellow);font-weight:700}
.lb-rank-2{color:#c0c0c0;font-weight:700}
.lb-rank-3{color:#cd7f32;font-weight:700}
.lb-user-cell{display:flex;align-items:center;gap:10px}
.lb-user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--s));display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:white;flex-shrink:0}
.lb-pts-cell{font-family:'Space Mono',monospace;color:var(--yellow);font-weight:700}

/* ── Responsive ── */
@media(max-width:900px){
  .gm-hero,.gm-levels,.gl-layout,.lb-hero,.lb-table-wrap,.lb-podium{padding-left:18px;padding-right:18px}
  .gm-grid{grid-template-columns:1fr 1fr}
  .gm-hero-stats{gap:12px}
}
@media(max-width:600px){
  .gm-grid{grid-template-columns:1fr}
  .gl-choices{gap:8px}
  .lb-podium{gap:10px}
}

/* ════════════════════════════
   GAME TOOLS / ARSENAL
════════════════════════════ */

/* ── Rarity colors ── */
.rar-common    { --rc:#9e9e9e; }
.rar-uncommon  { --rc:#4caf50; }
.rar-rare      { --rc:#2196F3; }
.rar-epic      { --rc:#9c27b0; }
.rar-legendary { --rc:#ffc107; }

/* ── Arsenal page ── */
.ar-wrap { min-height:100vh; background:var(--mt-dk); color:var(--mt-lt); direction:rtl; font-family:'Tajawal',sans-serif; padding-top:70px; }
.ar-hero { padding:60px 60px 40px; text-align:center; position:relative; overflow:hidden; }
.ar-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 50% at 50% 35%, rgba(35,114,146,.12) 0%, transparent 65%); pointer-events:none; }
.ar-title { font-size:clamp(1.9rem,3.5vw,3rem); font-weight:900; margin-bottom:10px; }
.ar-title span { background:linear-gradient(135deg,var(--mt-p),var(--mt-ac)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ar-sub { font-size:.95rem; color:rgba(245,247,250,.55); margin-bottom:32px; }

.ar-grid { max-width:1200px; margin:0 auto; padding:0 60px 80px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }

/* Tool card */
.ar-card { background:rgba(13,21,40,.8); border:2px solid rgba(35,114,146,.15); border-radius:16px; padding:22px; cursor:pointer; transition:all .4s cubic-bezier(.34,1.56,.64,1); opacity:0; transform:translateY(20px); text-decoration:none; color:var(--mt-lt); display:block; position:relative; overflow:hidden; }
.ar-card.visible { opacity:1; transform:translateY(0); }
.ar-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--rc, #237292), transparent); }
.ar-card:hover { transform:translateY(-8px); box-shadow:0 16px 50px rgba(35,114,146,.2); }
.ar-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.ar-card-emoji { font-size:2.2rem; }
.ar-rarity-badge { padding:3px 10px; border-radius:100px; font-size:.65rem; font-weight:700; border:1px solid rgba(255,255,255,.15); color:var(--rc, #9e9e9e); background:rgba(0,0,0,.2); }
.ar-card-name { font-size:1rem; font-weight:800; margin-bottom:4px; }
.ar-card-en { font-family:'Space Mono',monospace; font-size:.68rem; color:var(--mt-ac); margin-bottom:8px; }
.ar-card-weapon { font-size:.78rem; color:rgba(245,247,250,.5); margin-bottom:10px; font-style:italic; }
.ar-card-desc { font-size:.78rem; color:rgba(245,247,250,.5); line-height:1.55; margin-bottom:14px; }
.ar-power { display:flex; align-items:center; gap:6px; font-family:'Space Mono',monospace; font-size:.72rem; color:var(--mt-yellow); }

/* ── Tool Detail Page ── */
.td-wrap { min-height:100vh; background:var(--mt-dk); color:var(--mt-lt); direction:rtl; font-family:'Tajawal',sans-serif; padding-top:70px; }
.td-layout { max-width:900px; margin:0 auto; padding:40px 60px 100px; }
.td-breadcrumb { font-size:.76rem; color:rgba(245,247,250,.38); margin-bottom:20px; }
.td-breadcrumb a { color:var(--mt-p); text-decoration:none; }

.td-weapon-card { background:linear-gradient(135deg, rgba(13,21,40,.95), rgba(35,114,146,.08)); border:2px solid rgba(35,114,146,.25); border-radius:20px; padding:36px; margin-bottom:32px; position:relative; overflow:hidden; }
.td-weapon-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--mt-p), var(--mt-ac), var(--mt-p)); background-size:200%; animation:td-shimmer 3s linear infinite; }
@keyframes td-shimmer { 0%{background-position:0%} 100%{background-position:200%} }
.td-weapon-top { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.td-emoji-big { font-size:4rem; animation:td-float 3s ease-in-out infinite; }
@keyframes td-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.td-weapon-info {}
.td-weapon-title { font-size:1.6rem; font-weight:900; margin-bottom:4px; }
.td-weapon-en { font-family:'Space Mono',monospace; font-size:.82rem; color:var(--mt-ac); margin-bottom:6px; }
.td-weapon-badges { display:flex; gap:8px; flex-wrap:wrap; }
.td-rarity { padding:4px 12px; border-radius:100px; font-size:.7rem; font-weight:700; }
.td-power { padding:4px 12px; border-radius:100px; font-size:.7rem; background:rgba(255,193,7,.1); border:1px solid rgba(255,193,7,.25); color:#ffc107; font-family:'Space Mono',monospace; }

.td-story-box { background:rgba(35,114,146,.06); border-right:3px solid var(--mt-p); border-radius:0 12px 12px 0; padding:18px 20px; margin-bottom:24px; font-size:.92rem; color:rgba(245,247,250,.75); line-height:1.85; white-space:pre-line; font-style:italic; }

/* Code blocks in detail */
.td-code-block { background:rgba(10,15,28,.95); border:1px solid rgba(35,114,146,.25); border-radius:12px; overflow:hidden; margin-bottom:20px; }
.td-code-header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid rgba(35,114,146,.12); background:rgba(35,114,146,.06); }
.td-code-label { font-family:'Space Mono',monospace; font-size:.68rem; color:rgba(245,247,250,.4); letter-spacing:1px; }
.td-code-dots { display:flex; gap:5px; }
.td-code-dots span { width:9px; height:9px; border-radius:50%; }
.td-code-dots span:nth-child(1){background:#ff5f57} .td-code-dots span:nth-child(2){background:#febc2e} .td-code-dots span:nth-child(3){background:#28c840}
.td-code-body { padding:16px; font-family:'Space Mono',monospace; font-size:.8rem; color:rgba(245,247,250,.85); white-space:pre-wrap; direction:ltr; text-align:left; line-height:1.75; overflow-x:auto; }

.td-section-title { font-size:1rem; font-weight:800; margin-bottom:12px; color:var(--mt-ac); display:flex; align-items:center; gap:8px; }
.td-explanation { background:rgba(13,21,40,.7); border:1px solid rgba(35,114,146,.15); border-radius:12px; padding:18px; margin-bottom:24px; font-size:.88rem; color:rgba(245,247,250,.75); line-height:1.8; white-space:pre-line; }
.td-examples-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.td-example { }
.td-example-desc { font-size:.76rem; color:rgba(245,247,250,.45); margin-bottom:8px; padding-right:4px; }
.td-pro-tip { background:rgba(255,193,7,.06); border:1px solid rgba(255,193,7,.18); border-radius:12px; padding:16px 18px; font-size:.85rem; color:rgba(245,247,250,.75); line-height:1.75; white-space:pre-line; }

.td-nav { display:flex; justify-content:space-between; gap:16px; margin-top:36px; padding-top:24px; border-top:1px solid rgba(35,114,146,.1); }
.td-nav-btn { display:flex; flex-direction:column; padding:12px 18px; background:rgba(13,21,40,.8); border:1px solid rgba(35,114,146,.15); border-radius:12px; cursor:pointer; transition:all .3s; text-decoration:none; color:var(--mt-lt); flex:1; max-width:220px; }
.td-nav-btn:hover { border-color:rgba(35,114,146,.38); background:rgba(35,114,146,.1); }
.td-nav-lbl { font-size:.66rem; color:rgba(245,247,250,.38); font-family:'Space Mono',monospace; margin-bottom:3px; }
.td-nav-name { font-size:.85rem; font-weight:700; }

/* ═══════════════════════════════════
   TOOL WIDGET (popup in game level)
═══════════════════════════════════ */
.gm-tool-widget-overlay { position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:flex-end; pointer-events:none; }
.gm-tool-widget-overlay.open { pointer-events:all; }
.gm-tool-widget-backdrop { position:absolute; inset:0; background:rgba(10,15,28,.5); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s; }
.gm-tool-widget-overlay.open .gm-tool-widget-backdrop { opacity:1; }
.gm-tool-widget { position:absolute; top:70px; left:0; width:380px; max-width:94vw; max-height:calc(100vh - 90px); background:rgba(13,21,40,.98); border:1px solid rgba(35,114,146,.35); border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.6); transform:translateX(-110%); transition:transform .4s cubic-bezier(.34,1.56,.64,1); overflow-y:auto; display:flex; flex-direction:column; }
.gm-tool-widget-overlay.open .gm-tool-widget { transform:translateX(0); }
.gtw-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid rgba(35,114,146,.15); position:sticky; top:0; background:rgba(13,21,40,.98); z-index:1; }
.gtw-title { font-size:.82rem; font-family:'Space Mono',monospace; color:var(--mt-ac); letter-spacing:1px; }
.gtw-close { width:28px; height:28px; background:rgba(245,247,250,.08); border:1px solid rgba(245,247,250,.12); border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:rgba(245,247,250,.6); font-size:1rem; transition:all .2s; flex-shrink:0; }
.gtw-close:hover { background:rgba(245,247,250,.14); color:var(--mt-lt); }
.gtw-body { padding:16px 20px; flex:1; }
.gtw-weapon-top { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.gtw-emoji { font-size:2.5rem; }
.gtw-name { font-size:1.1rem; font-weight:800; }
.gtw-en { font-family:'Space Mono',monospace; font-size:.7rem; color:var(--mt-ac); }
.gtw-weapon-lbl { font-size:.75rem; color:rgba(245,247,250,.45); font-style:italic; }
.gtw-story { background:rgba(35,114,146,.06); border-right:2px solid var(--mt-p); border-radius:0 8px 8px 0; padding:12px 14px; font-size:.82rem; color:rgba(245,247,250,.7); line-height:1.75; margin-bottom:14px; white-space:pre-line; font-style:italic; }
.gtw-section { margin-bottom:14px; }
.gtw-section-title { font-size:.68rem; font-family:'Space Mono',monospace; color:var(--mt-p); letter-spacing:2px; margin-bottom:8px; text-transform:uppercase; }
.gtw-code { background:rgba(10,15,28,.9); border:1px solid rgba(35,114,146,.2); border-radius:8px; padding:12px; font-family:'Space Mono',monospace; font-size:.74rem; color:rgba(245,247,250,.85); white-space:pre-wrap; direction:ltr; text-align:left; line-height:1.65; overflow-x:auto; }
.gtw-explanation { font-size:.82rem; color:rgba(245,247,250,.7); line-height:1.75; white-space:pre-line; }
.gtw-pro-tip { background:rgba(255,193,7,.06); border:1px solid rgba(255,193,7,.15); border-radius:8px; padding:10px 14px; font-size:.78rem; color:rgba(245,247,250,.7); line-height:1.65; white-space:pre-line; }
.gtw-detail-link { display:block; margin-top:14px; padding:10px; text-align:center; background:rgba(35,114,146,.15); border:1px solid rgba(35,114,146,.25); border-radius:9px; color:var(--mt-ac); text-decoration:none; font-size:.82rem; font-weight:600; transition:all .25s; }
.gtw-detail-link:hover { background:rgba(35,114,146,.28); }

/* ── Tool buttons in level header ── */
.gm-tool-btns { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.gm-tool-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:rgba(35,114,146,.12); border:1px solid rgba(35,114,146,.25); border-radius:100px; cursor:pointer; transition:all .3s; font-size:.78rem; font-family:'Tajawal',sans-serif; color:rgba(245,247,250,.75); }
.gm-tool-btn:hover { background:rgba(35,114,146,.25); border-color:var(--mt-p); color:var(--mt-ac); transform:scale(1.05); }
.gm-tool-btn .gm-tool-emoji { font-size:.9rem; }

/* ═══════════════════════════════════
   LEVEL PAGE — DESKTOP TWO-COLUMN LAYOUT
=══════════════════════════════════ */
@media(min-width:1100px){
  .gl-desktop-layout { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
  .gl-left-col { position:sticky; top:90px; }
  .gl-right-col { }
  .gl-layout { max-width:1200px; padding:40px 40px 100px; }
}
@media(max-width:1099px){
  .gl-desktop-layout { display:block; }
  .gl-left-col,.gl-right-col { width:100%; }
}

/* Responsive */
@media(max-width:900px){
  .ar-hero,.ar-grid { padding-left:18px; padding-right:18px; }
  .ar-grid { grid-template-columns:1fr; }
  .td-layout { padding:28px 18px 80px; }
  .td-examples-grid { grid-template-columns:1fr; }
  .gm-tool-widget { width:min(94vw,360px); }
}