<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧩 عالم الألغاز</title>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;700;900&family=Cairo:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root {
  --gold:#f5c542; --gold2:#e8a020; --deep:#1a0a2e; --panel:#23103d;
  --card:#2d1952; --border:#4a2d7a; --text:#f0e8ff; --muted:#9a85b8;
  --green:#4ade80; --red:#f87171; --blue:#60a5fa; --cyan:#22d3ee;
  --glow:rgba(245,197,66,0.25);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Tajawal',sans-serif;background:var(--deep);color:var(--text);min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 15% 15%,rgba(245,197,66,0.07),transparent 55%),radial-gradient(ellipse at 85% 85%,rgba(34,211,238,0.07),transparent 55%);pointer-events:none;z-index:0;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(26,10,46,0.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{font-family:'Cairo',sans-serif;font-size:1.35rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.nav-tabs{display:flex;gap:8px;}
.nav-tab{padding:7px 18px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Tajawal',sans-serif;font-size:.9rem;cursor:pointer;transition:all .25s;}
.nav-tab.active,.nav-tab:hover{background:var(--gold);border-color:var(--gold);color:#1a0a2e;font-weight:700;}

/* PAGES */
.page{display:none;position:relative;z-index:1;}
.page.active{display:block;}

/* ===== GAME ===== */
.gwrap{max-width:700px;margin:0 auto;padding:24px 16px;}

/* Home */
.hero{text-align:center;padding:40px 20px 30px;}
.hero-icon{font-size:5rem;display:inline-block;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 30px var(--gold));}
@keyframes float{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-14px) rotate(5deg);}}
h1.game-h1{font-family:'Cairo',sans-serif;font-size:2.6rem;font-weight:900;background:linear-gradient(135deg,var(--gold),#fff 60%,var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;}
.hero p{color:var(--muted);}

.cat-label{font-size:.85rem;color:var(--muted);margin-bottom:10px;text-align:center;}
.cat-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px;}
.cat-btn{padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:var(--card);color:var(--text);font-family:'Tajawal',sans-serif;font-size:.88rem;cursor:pointer;transition:all .2s;}
.cat-btn.sel,.cat-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--deep);font-weight:700;}
.start-btn{display:block;width:100%;max-width:320px;margin:0 auto 30px;padding:16px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:16px;color:var(--deep);font-family:'Cairo',sans-serif;font-size:1.2rem;font-weight:900;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 30px var(--glow);}
.start-btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px var(--glow);}

/* Stats bar */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center;transition:border-color .3s;}
.stat-box.danger{border-color:var(--red);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{box-shadow:none;}50%{box-shadow:0 0 16px rgba(248,113,113,.5);}}
.stat-num{font-family:'Cairo',sans-serif;font-size:1.55rem;font-weight:900;}
.stat-lbl{font-size:.7rem;color:var(--muted);margin-top:2px;}

/* Progress */
.prog-wrap{margin-bottom:18px;}
.prog-track{background:var(--border);border-radius:10px;height:8px;overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.prog-lbl{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:6px;}

/* Riddle card */
.riddle-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px 22px;margin-bottom:16px;position:relative;overflow:hidden;animation:cardIn .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes cardIn{from{opacity:0;transform:scale(.85) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
.riddle-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--cyan),var(--gold));background-size:200% 100%;animation:shimmer 2s linear infinite;}
@keyframes shimmer{0%{background-position:0% 0;}100%{background-position:200% 0;}}
.r-cat{display:inline-block;background:rgba(245,197,66,.12);border:1px solid rgba(245,197,66,.4);color:var(--gold);padding:2px 12px;border-radius:20px;font-size:.78rem;margin-bottom:12px;}
.r-num{float:left;color:var(--muted);font-size:.78rem;}
.r-icon{font-size:3rem;text-align:center;display:block;margin-bottom:12px;}
.r-q{font-family:'Cairo',sans-serif;font-size:1.2rem;font-weight:700;text-align:center;line-height:1.7;margin-bottom:6px;}
.r-hint-text{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:16px;display:none;}
.hint-row{display:flex;justify-content:center;margin-bottom:14px;}
.hint-btn{padding:7px 20px;border-radius:20px;border:1px dashed var(--gold);background:transparent;color:var(--gold);font-family:'Tajawal',sans-serif;font-size:.88rem;cursor:pointer;transition:all .2s;}
.hint-btn:hover{background:rgba(245,197,66,.1);}
.hint-btn:disabled{opacity:.5;cursor:default;}
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.opt-btn{background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:12px;padding:14px 12px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:1rem;cursor:pointer;transition:all .2s;text-align:center;}
.opt-btn:hover:not(:disabled){background:rgba(245,197,66,.1);border-color:var(--gold);transform:translateY(-3px);}
.opt-btn.correct{background:rgba(74,222,128,.18);border-color:var(--green);color:var(--green);font-weight:700;}
.opt-btn.wrong{background:rgba(248,113,113,.18);border-color:var(--red);color:var(--red);}
.opt-btn:disabled{cursor:default;}
.fb-box{display:none;border-radius:14px;padding:14px 18px;margin-top:12px;font-size:.95rem;line-height:1.6;animation:popIn .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}
.fb-box.show{display:block;}
.fb-box.ok{background:rgba(74,222,128,.1);border:1px solid var(--green);}
.fb-box.fail{background:rgba(248,113,113,.1);border:1px solid var(--red);}
.next-btn{display:none;width:100%;margin-top:12px;padding:14px;background:linear-gradient(135deg,#4ade80,#22c55e);border:none;border-radius:12px;color:#0a2010;font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;cursor:pointer;transition:transform .2s;}
.next-btn:hover{transform:translateY(-2px);}
.next-btn.show{display:block;}

/* Result */
.result-screen{display:none;text-align:center;padding:40px 20px;animation:cardIn .5s ease;}
.result-screen.show{display:block;}
.res-trophy{font-size:5.5rem;margin-bottom:14px;filter:drop-shadow(0 0 40px gold);}
.res-title{font-family:'Cairo',sans-serif;font-size:2.3rem;font-weight:900;margin-bottom:8px;}
.res-sub{color:var(--muted);margin-bottom:20px;font-size:1rem;}
.res-score{font-family:'Cairo',sans-serif;font-size:4.5rem;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.res-score-lbl{color:var(--muted);margin-bottom:6px;}
.res-stars{font-size:2.2rem;margin-bottom:24px;}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;}
.rs-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;}
.rs-num{font-family:'Cairo',sans-serif;font-size:1.7rem;font-weight:900;}
.rs-lbl{font-size:.75rem;color:var(--muted);}
.play-again-btn{padding:14px 44px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:14px;color:var(--deep);font-family:'Cairo',sans-serif;font-size:1.15rem;font-weight:900;cursor:pointer;transition:transform .2s;box-shadow:0 8px 30px var(--glow);}
.play-again-btn:hover{transform:scale(1.05);}

/* ===== ADMIN ===== */
.awrap{max-width:920px;margin:0 auto;padding:24px 16px;}

/* Login */
.login-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:40px 32px;max-width:400px;margin:60px auto;text-align:center;}
.login-icon{font-size:3.5rem;margin-bottom:12px;}
.login-title{font-family:'Cairo',sans-serif;font-size:1.6rem;font-weight:900;margin-bottom:6px;}
.login-sub{color:var(--muted);font-size:.9rem;margin-bottom:24px;}
.login-input{width:100%;padding:13px 16px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:1rem;margin-bottom:14px;transition:border-color .2s;text-align:center;}
.login-input:focus{outline:none;border-color:var(--gold);}
.login-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:12px;color:var(--deep);font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;cursor:pointer;transition:transform .2s;}
.login-btn:hover{transform:translateY(-2px);}
.login-err{color:var(--red);font-size:.88rem;margin-top:10px;display:none;}
.login-err.show{display:block;}

/* Admin layout */
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.admin-title{font-family:'Cairo',sans-serif;font-size:1.7rem;font-weight:900;}
.logout-btn{padding:7px 16px;border-radius:12px;border:1px solid rgba(248,113,113,.4);background:rgba(248,113,113,.08);color:var(--red);font-family:'Tajawal',sans-serif;font-size:.85rem;cursor:pointer;transition:all .2s;}
.logout-btn:hover{background:rgba(248,113,113,.18);}

/* Admin tabs */
.a-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;}
.a-tab{padding:9px 20px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Tajawal',sans-serif;font-size:.92rem;cursor:pointer;transition:all .2s;}
.a-tab.active,.a-tab:hover{background:var(--panel);border-color:var(--gold);color:var(--gold);}

/* Admin panels */
.a-panel{display:none;}
.a-panel.active{display:block;}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px;}
@media(min-width:600px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.st-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center;}
.st-num{font-family:'Cairo',sans-serif;font-size:2rem;font-weight:900;}
.st-lbl{font-size:.8rem;color:var(--muted);margin-top:4px;}
.recent-title{font-family:'Cairo',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:12px;}
.recent-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.recent-table th{background:var(--panel);padding:10px 12px;text-align:right;color:var(--muted);font-weight:700;border-bottom:1px solid var(--border);}
.recent-table td{padding:10px 12px;border-bottom:1px solid rgba(74,45,122,.3);}
.recent-table tr:hover td{background:rgba(255,255,255,.03);}

/* Settings */
.settings-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:18px;}
.settings-title{font-family:'Cairo',sans-serif;font-size:1.1rem;font-weight:700;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sg.full-w{grid-template-columns:1fr;}
.fg{display:flex;flex-direction:column;gap:6px;}
.fg.full{grid-column:1/-1;}
.flbl{font-size:.82rem;color:var(--muted);font-weight:700;}
.finput,.fselect{padding:11px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.95rem;width:100%;transition:border-color .2s;}
.finput:focus,.fselect:focus{outline:none;border-color:var(--gold);}
.fselect option{background:var(--panel);}
.toggle-wrap{display:flex;align-items:center;gap:10px;padding:10px 0;}
.toggle{width:46px;height:24px;background:var(--border);border-radius:12px;position:relative;cursor:pointer;transition:background .3s;border:none;flex-shrink:0;}
.toggle::after{content:'';position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;right:3px;transition:transform .3s;}
.toggle.on{background:var(--green);}
.toggle.on::after{transform:translateX(-22px);}
.save-settings-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:12px;color:var(--deep);font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:900;cursor:pointer;transition:all .2s;}
.save-settings-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);}

/* Add riddle form */
.add-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:22px;}
.add-title{font-family:'Cairo',sans-serif;font-size:1.1rem;font-weight:700;color:var(--gold);margin-bottom:18px;}
.opts-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.opt-iw{position:relative;}
.opt-tag{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.78rem;color:var(--muted);pointer-events:none;}
.opt-in{width:100%;padding:10px 36px 10px 12px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.9rem;text-align:right;transition:border-color .2s;}
.opt-in:focus{outline:none;border-color:var(--cyan);}
.opt-in.correct-in{border-color:var(--green);background:rgba(74,222,128,.05);}
.correct-sel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.clbl{font-size:.82rem;color:var(--muted);font-weight:700;margin-bottom:6px;display:block;}
.c-btn{padding:6px 14px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Tajawal',sans-serif;font-size:.85rem;cursor:pointer;transition:all .2s;}
.c-btn.sel{background:rgba(74,222,128,.15);border-color:var(--green);color:var(--green);font-weight:700;}
.ftextarea{width:100%;padding:11px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.95rem;resize:vertical;min-height:65px;transition:border-color .2s;}
.ftextarea:focus{outline:none;border-color:var(--gold);}
.save-riddle-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:12px;color:var(--deep);font-family:'Cairo',sans-serif;font-size:1rem;font-weight:900;cursor:pointer;transition:all .2s;}
.save-riddle-btn:hover{transform:translateY(-2px);}

/* Riddle list */
.list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.list-title{font-family:'Cairo',sans-serif;font-size:1.1rem;font-weight:700;}
.list-cnt{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:4px 14px;font-size:.85rem;color:var(--cyan);}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.fbtn{padding:6px 14px;border-radius:14px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Tajawal',sans-serif;font-size:.83rem;cursor:pointer;transition:all .2s;}
.fbtn.active,.fbtn:hover{background:rgba(96,165,250,.12);border-color:var(--blue);color:var(--blue);}
.r-list{display:flex;flex-direction:column;gap:10px;}
.r-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;align-items:flex-start;gap:12px;transition:border-color .2s;animation:itemIn .3s ease;}
@keyframes itemIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}
.r-item:hover{border-color:var(--gold);}
.ri-icon{font-size:1.9rem;flex-shrink:0;}
.ri-body{flex:1;min-width:0;}
.ri-cat{font-size:.75rem;color:var(--gold);background:rgba(245,197,66,.1);border:1px solid rgba(245,197,66,.3);padding:2px 10px;border-radius:10px;display:inline-block;margin-bottom:5px;}
.ri-q{font-weight:700;font-size:.93rem;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ri-ans{font-size:.82rem;color:var(--green);}
.ri-meta{font-size:.75rem;color:var(--muted);margin-top:3px;}
.ri-actions{display:flex;gap:6px;flex-shrink:0;align-items:center;}
.del-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(248,113,113,.4);background:rgba(248,113,113,.08);color:var(--red);font-family:'Tajawal',sans-serif;font-size:.82rem;cursor:pointer;transition:all .2s;}
.del-btn:hover{background:rgba(248,113,113,.2);}
.empty-st{text-align:center;padding:40px;color:var(--muted);}
.e-icon{font-size:3rem;margin-bottom:12px;}

/* Toast */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 22px;font-size:.95rem;z-index:9999;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.success{border-color:var(--green);}
.toast.error{border-color:var(--red);}

/* Particle */
.particle{position:fixed;pointer-events:none;z-index:9999;font-size:1.8rem;animation:floatUp 1.8s ease forwards;}
@keyframes floatUp{from{opacity:1;transform:translateY(0) rotate(0deg);}to{opacity:0;transform:translateY(-200px) rotate(720deg);}}

/* Spinner */
.spinner{text-align:center;padding:40px;color:var(--muted);}
.spin{display:inline-block;width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:10px;}
@keyframes spin{to{transform:rotate(360deg);}}

@media(max-width:600px){
  h1.game-h1{font-size:1.9rem;}
  .stats-bar{grid-template-columns:repeat(2,1fr);}
  .opts-grid{grid-template-columns:1fr;}
  .sg{grid-template-columns:1fr;}
  .opts-inputs{grid-template-columns:1fr;}
  .res-stats{grid-template-columns:1fr;}
}
</style>
</head>
<body>

<nav>
  <div class="nav-logo">🧩 عالم الألغاز</div>
  <div class="nav-tabs">
    <button class="nav-tab active" onclick="showPage('game',this)">🎮 اللعبة</button>
    <button class="nav-tab" onclick="showPage('admin',this)">⚙️ الإدارة</button>
  </div>
</nav>

<!-- ===== GAME PAGE ===== -->
<div id="page-game" class="page active">
<div class="gwrap">

  <!-- Home -->
  <div id="homeScreen">
    <div class="hero">
      <div class="hero-icon">🧩</div>
      <h1 class="game-h1" id="gameTitle">عالم الألغاز</h1>
      <p>اختبر ذكاءك وحل الألغاز قبل انتهاء الوقت!</p>
    </div>
    <div class="cat-label">اختر الفئة:</div>
    <div class="cat-grid" id="catGrid"><div class="spinner"><div class="spin"></div></div></div>
    <button class="start-btn" onclick="startGame()">🚀 ابدأ اللعبة</button>
  </div>

  <!-- Game -->
  <div id="gameScreen" style="display:none">
    <div class="stats-bar">
      <div class="stat-box" id="timerBox">
        <div class="stat-num" id="timerNum" style="color:var(--gold)">30</div>
        <div class="stat-lbl">⏱ الوقت</div>
      </div>
      <div class="stat-box">
        <div class="stat-num" id="scoreNum" style="color:var(--green)">0</div>
        <div class="stat-lbl">⭐ النقاط</div>
      </div>
      <div class="stat-box">
        <div class="stat-num" id="qNum" style="color:var(--blue)">1/5</div>
        <div class="stat-lbl">📋 السؤال</div>
      </div>
      <div class="stat-box">
        <div class="stat-num" id="livesNum">❤️❤️❤️</div>
        <div class="stat-lbl">القلوب</div>
      </div>
    </div>
    <div class="prog-wrap">
      <div class="prog-track"><div class="prog-fill" id="progFill" style="width:0%"></div></div>
      <div class="prog-lbl"><span id="progPct">0%</span><span id="catLbl" style="color:var(--gold)"></span></div>
    </div>
    <div class="riddle-card" id="riddleCard">
      <span class="r-cat" id="rCat"></span><span class="r-num" id="rNum"></span>
      <div style="clear:both;margin-bottom:10px"></div>
      <span class="r-icon" id="rIcon"></span>
      <div class="r-q" id="rQ"></div>
      <div class="r-hint-text" id="rHintTxt"></div>
      <div class="hint-row"><button class="hint-btn" id="hintBtn" onclick="showHint()">💡 تلميح (-5 نقاط)</button></div>
      <div class="opts-grid" id="optsGrid"></div>
      <div class="fb-box" id="fbBox"></div>
      <button class="next-btn" id="nextBtn" onclick="nextQ()">السؤال التالي ←</button>
    </div>
  </div>

  <!-- Result -->
  <div class="result-screen" id="resultScreen">
    <div class="res-trophy" id="resTrophy">🏆</div>
    <div class="res-title" id="resTitle">أحسنت!</div>
    <div class="res-sub" id="resSub"></div>
    <div class="res-stars" id="resStars"></div>
    <div class="res-score" id="resScore">0</div>
    <div class="res-score-lbl">نقطة</div>
    <div class="res-stats">
      <div class="rs-box"><div class="rs-num" id="rs1" style="color:var(--green)">0</div><div class="rs-lbl">✅ صحيح</div></div>
      <div class="rs-box"><div class="rs-num" id="rs2" style="color:var(--red)">0</div><div class="rs-lbl">❌ خطأ</div></div>
      <div class="rs-box"><div class="rs-num" id="rs3" style="color:var(--cyan)">0</div><div class="rs-lbl">⏱ ثانية</div></div>
    </div>
    <button class="play-again-btn" onclick="playAgain()">🔄 العب مجدداً</button>
  </div>

</div>
</div>

<!-- ===== ADMIN PAGE ===== -->
<div id="page-admin" class="page">
<div class="awrap">

  <!-- Login -->
  <div id="loginScreen" class="login-card">
    <div class="login-icon">🔐</div>
    <div class="login-title">لوحة الإدارة</div>
    <div class="login-sub">أدخل كلمة المرور للمتابعة</div>
    <input class="login-input" type="password" id="passInput" placeholder="كلمة المرور" onkeydown="if(event.key==='Enter')doLogin()">
    <button class="login-btn" onclick="doLogin()">🔓 دخول</button>
    <div class="login-err" id="loginErr">كلمة المرور غير صحيحة</div>
  </div>

  <!-- Dashboard -->
  <div id="adminDash" style="display:none">
    <div class="admin-header">
      <div class="admin-title">⚙️ لوحة الإدارة</div>
      <button class="logout-btn" onclick="doLogout()">🚪 خروج</button>
    </div>

    <div class="a-tabs">
      <button class="a-tab active" onclick="aTab('stats',this)">📊 إحصائيات</button>
      <button class="a-tab" onclick="aTab('riddles',this)">🧩 الألغاز</button>
      <button class="a-tab" onclick="aTab('settings',this)">⚙️ الإعدادات</button>
    </div>

    <!-- Stats panel -->
    <div class="a-panel active" id="ap-stats">
      <div class="stats-grid" id="statsGrid"><div class="spinner"><div class="spin"></div><div>جارٍ التحميل...</div></div></div>
      <div class="recent-title">🕐 آخر الجلسات</div>
      <div style="overflow-x:auto"><table class="recent-table" id="recentTable"><tr><td colspan="4" style="text-align:center;padding:20px;color:var(--muted)">جارٍ التحميل...</td></tr></table></div>
    </div>

    <!-- Riddles panel -->
    <div class="a-panel" id="ap-riddles">
      <!-- Add form -->
      <div class="add-card">
        <div class="add-title">➕ إضافة لغز جديد</div>
        <div class="sg" style="margin-bottom:12px">
          <div class="fg"><label class="flbl">📁 الفئة</label><input class="finput" id="f-cat" placeholder="طبيعة، رياضيات..." list="catDL"><datalist id="catDL"></datalist></div>
          <div class="fg"><label class="flbl">🎯 الصعوبة</label><select class="fselect" id="f-diff"><option value="سهل">🌱 سهل</option><option value="متوسط" selected>🔥 متوسط</option><option value="صعب">💎 صعب</option></select></div>
          <div class="fg"><label class="flbl">🎨 أيقونة (إيموجي)</label><input class="finput" id="f-icon" placeholder="🧩" maxlength="4"></div>
          <div class="fg"><label class="flbl">⏱ الوقت (ثانية)</label><input class="finput" id="f-time" type="number" value="30" min="10" max="120"></div>
          <div class="fg full"><label class="flbl">❓ نص اللغز</label><textarea class="ftextarea" id="f-q" placeholder="اكتب اللغز هنا..."></textarea></div>
          <div class="fg full"><label class="flbl">💡 تلميح (اختياري)</label><input class="finput" id="f-hint" placeholder="تلميح يساعد اللاعب..."></div>
          <div class="fg full"><label class="flbl">📝 شرح الإجابة (اختياري)</label><input class="finput" id="f-exp" placeholder="لماذا هذه الإجابة صحيحة..."></div>
        </div>
        <div style="margin-bottom:8px"><span class="clbl">🔤 الخيارات الأربعة:</span></div>
        <div class="opts-inputs">
          <div class="opt-iw"><span class="opt-tag">أ</span><input class="opt-in" id="op0" placeholder="الخيار الأول"></div>
          <div class="opt-iw"><span class="opt-tag">ب</span><input class="opt-in" id="op1" placeholder="الخيار الثاني"></div>
          <div class="opt-iw"><span class="opt-tag">ج</span><input class="opt-in" id="op2" placeholder="الخيار الثالث"></div>
          <div class="opt-iw"><span class="opt-tag">د</span><input class="opt-in" id="op3" placeholder="الخيار الرابع"></div>
        </div>
        <span class="clbl">✅ الإجابة الصحيحة:</span>
        <div class="correct-sel" id="correctSel">
          <button class="c-btn sel" onclick="setCorrect(0,this)">أ</button>
          <button class="c-btn" onclick="setCorrect(1,this)">ب</button>
          <button class="c-btn" onclick="setCorrect(2,this)">ج</button>
          <button class="c-btn" onclick="setCorrect(3,this)">د</button>
        </div>
        <button class="save-riddle-btn" onclick="saveRiddle()">💾 حفظ اللغز</button>
      </div>

      <!-- List -->
      <div class="list-header">
        <div class="list-title">📚 بنك الألغاز</div>
        <div class="list-cnt" id="listCnt">0 لغز</div>
      </div>
      <div class="filter-bar" id="filterBar"></div>
      <div class="r-list" id="rList"><div class="spinner"><div class="spin"></div></div></div>
    </div>

    <!-- Settings panel -->
    <div class="a-panel" id="ap-settings">
      <div class="settings-card">
        <div class="settings-title">🎮 إعدادات اللعبة</div>
        <div class="sg">
          <div class="fg">
            <label class="flbl">عدد الأسئلة في كل جولة</label>
            <input class="finput" id="s-qpg" type="number" value="5" min="1" max="20">
          </div>
          <div class="fg">
            <label class="flbl">عدد القلوب (الأرواح)</label>
            <input class="finput" id="s-lives" type="number" value="3" min="1" max="5">
          </div>
          <div class="fg full">
            <label class="flbl">عنوان اللعبة</label>
            <input class="finput" id="s-title" placeholder="عالم الألغاز">
          </div>
          <div class="fg full">
            <div class="toggle-wrap">
              <button class="toggle on" id="s-hints" onclick="this.classList.toggle('on')"></button>
              <label class="flbl" style="margin:0">السماح بالتلميحات</label>
            </div>
          </div>
        </div>
      </div>

      <div class="settings-card">
        <div class="settings-title">🔐 تغيير كلمة المرور</div>
        <div class="sg">
          <div class="fg"><label class="flbl">كلمة المرور الجديدة</label><input class="finput" type="password" id="s-pass1" placeholder="6 أحرف على الأقل"></div>
          <div class="fg"><label class="flbl">تأكيد كلمة المرور</label><input class="finput" type="password" id="s-pass2" placeholder="أعد الكتابة"></div>
        </div>
        <p style="font-size:.8rem;color:var(--muted);margin-top:10px">اتركها فارغة إذا لم تُرد تغييرها</p>
      </div>

      <button class="save-settings-btn" onclick="saveSettings()">💾 حفظ الإعدادات</button>
    </div>

  </div><!-- /adminDash -->
</div>
</div>

<div class="toast" id="toast"></div>

<script>
const API = 'api.php';

// ======================== HELPERS ========================
async function api(action, method='GET', body=null) {
  const opts = { method, headers: {'Content-Type':'application/json'} };
  if (body) opts.body = JSON.stringify(body);
  const url = `${API}?action=${action}`;
  const res = await fetch(url, opts);
  return res.json();
}

let toastT;
function toast(msg, type='success') {
  const t = document.getElementById('toast');
  t.textContent = msg; t.className = `toast show ${type}`;
  clearTimeout(toastT);
  toastT = setTimeout(() => t.classList.remove('show'), 3000);
}

function showPage(p, btn) {
  document.querySelectorAll('.page').forEach(x => x.classList.remove('active'));
  document.querySelectorAll('.nav-tab').forEach(x => x.classList.remove('active'));
  document.getElementById('page-'+p).classList.add('active');
  if (btn) btn.classList.add('active');
  if (p === 'admin') checkAdminAuth();
}

// ======================== GAME ========================
let gameRiddles=[], curQ=0, score=0, lives=3, timer=30, tInt, answered=false;
let correctCnt=0, wrongCnt=0, totalSec=0, hintUsed=false;
let selectedCat='all', gameSettings={};

async function initGame() {
  // load settings & title
  const s = await api('get_game_settings');
  gameSettings = s;
  if (s.game_title) document.getElementById('gameTitle').textContent = s.game_title;

  // load categories
  const c = await api('get_categories');
  const grid = document.getElementById('catGrid');
  grid.innerHTML = '';
  const all = ['الكل', ...(c.categories||[])];
  all.forEach(cat => {
    const b = document.createElement('button');
    b.className = 'cat-btn' + (cat==='الكل'?' sel':'');
    b.textContent = cat;
    b.onclick = () => { document.querySelectorAll('.cat-btn').forEach(x=>x.classList.remove('sel')); b.classList.add('sel'); selectedCat = cat==='الكل'?'all':cat; };
    grid.appendChild(b);
  });
}

async function startGame() {
  const data = await api(`get_riddles&category=${encodeURIComponent(selectedCat)}`);
  if (!data.riddles || data.riddles.length === 0) { toast('لا توجد ألغاز في هذه الفئة!','error'); return; }
  gameRiddles = data.riddles;
  curQ=0; score=0; lives=gameSettings.lives_count||3; correctCnt=0; wrongCnt=0; totalSec=0;
  updateLives();
  document.getElementById('homeScreen').style.display='none';
  document.getElementById('resultScreen').classList.remove('show');
  document.getElementById('gameScreen').style.display='block';
  document.getElementById('catLbl').textContent = selectedCat==='all'?'كل الفئات':selectedCat;
  loadQ();
}

function loadQ() {
  if (curQ >= gameRiddles.length) { endGame(); return; }
  answered=false; hintUsed=false;
  const r = gameRiddles[curQ];
  const opts = [r.option_a, r.option_b, r.option_c, r.option_d];
  const correctTxt = opts[r.correct_option];

  document.getElementById('rCat').textContent = r.category;
  document.getElementById('rNum').textContent = `${curQ+1}/${gameRiddles.length}`;
  document.getElementById('rIcon').textContent = r.icon||'🧩';
  document.getElementById('rQ').textContent = r.question;
  document.getElementById('rHintTxt').style.display='none';
  document.getElementById('rHintTxt').textContent='';
  document.getElementById('hintBtn').disabled=false;
  document.getElementById('hintBtn').textContent='💡 تلميح (-5 نقاط)';
  document.getElementById('hintBtn').style.display = (r.hint && gameSettings.allow_hints) ? '' : 'none';
  document.getElementById('fbBox').className='fb-box';
  document.getElementById('nextBtn').classList.remove('show');
  document.getElementById('timerBox').classList.remove('danger');
  document.getElementById('scoreNum').textContent=score;
  document.getElementById('qNum').textContent=`${curQ+1}/${gameRiddles.length}`;
  const pct = Math.round((curQ/gameRiddles.length)*100);
  document.getElementById('progFill').style.width=pct+'%';
  document.getElementById('progPct').textContent=pct+'%';

  // shuffle opts
  const shuffled = [0,1,2,3].sort(()=>Math.random()-.5);
  const grid = document.getElementById('optsGrid');
  grid.innerHTML='';
  shuffled.forEach(i => {
    const b = document.createElement('button');
    b.className='opt-btn';
    b.textContent = opts[i];
    b.dataset.correct = opts[i]===correctTxt;
    b.onclick = () => selectAns(b, opts[i]===correctTxt, r);
    grid.appendChild(b);
  });

  // animate card
  const card=document.getElementById('riddleCard');
  card.style.animation='none';
  requestAnimationFrame(()=>{card.style.animation='cardIn .45s cubic-bezier(.34,1.56,.64,1)';});

  // timer
  clearInterval(tInt);
  timer = parseInt(r.time_limit)||30;
  totalSec += timer;
  updTimer();
  tInt = setInterval(()=>{
    timer--;
    updTimer();
    if(timer<=7) document.getElementById('timerBox').classList.add('danger');
    if(timer<=0){clearInterval(tInt);if(!answered)timeUp(r);}
  },1000);
}

function updTimer(){document.getElementById('timerNum').textContent=timer;}

function showHint(){
  const r=gameRiddles[curQ];
  if(!r.hint) return;
  hintUsed=true;
  document.getElementById('rHintTxt').textContent='💡 '+r.hint;
  document.getElementById('rHintTxt').style.display='block';
  document.getElementById('hintBtn').disabled=true;
  document.getElementById('hintBtn').textContent='💡 تم إظهار التلميح';
}

function selectAns(btn, correct, r){
  if(answered) return;
  answered=true; clearInterval(tInt);
  document.querySelectorAll('.opt-btn').forEach(b=>{b.disabled=true;if(b.dataset.correct==='true')b.classList.add('correct');});
  if(correct){
    btn.classList.add('correct');
    const bonus=Math.ceil(timer/5), pen=hintUsed?5:0, pts=Math.max(0,10+bonus-pen);
    score+=pts; correctCnt++;
    document.getElementById('scoreNum').textContent=score;
    showFB(true,`✅ إجابة صحيحة! +${pts} نقطة${r.explanation?' — '+r.explanation:''}`);
    spawnParticles();
  } else {
    btn.classList.add('wrong'); wrongCnt++;
    lives--; updateLives();
    showFB(false,`❌ إجابة خاطئة!${r.explanation?' — '+r.explanation:''}`);
    if(lives<=0){setTimeout(endGame,1600);return;}
  }
  document.getElementById('nextBtn').classList.add('show');
}

function timeUp(r){
  answered=true; wrongCnt++; lives--; updateLives();
  document.querySelectorAll('.opt-btn').forEach(b=>{b.disabled=true;if(b.dataset.correct==='true')b.classList.add('correct');});
  showFB(false,`⏰ انتهى الوقت!${r.explanation?' — '+r.explanation:''}`);
  if(lives<=0){setTimeout(endGame,1600);return;}
  document.getElementById('nextBtn').classList.add('show');
}

function updateLives(){
  const h=['','❤️','❤️❤️','❤️❤️❤️','❤️❤️❤️❤️','❤️❤️❤️❤️❤️'];
  document.getElementById('livesNum').textContent=lives>=0?(h[lives]||'💔'):'💔';
}

function showFB(ok,msg){
  const fb=document.getElementById('fbBox');
  fb.textContent=msg; fb.className=`fb-box show ${ok?'ok':'fail'}`;
}

function nextQ(){curQ++;loadQ();}

async function endGame(){
  clearInterval(tInt);
  // save session
  await api('save_session','POST',{
    player_name:'لاعب', category: selectedCat==='all'?'الكل':selectedCat,
    score, correct_count:correctCnt, wrong_count:wrongCnt,
    questions_count:gameRiddles.length
  });
  document.getElementById('gameScreen').style.display='none';
  const rs=document.getElementById('resultScreen'); rs.classList.add('show');
  const total=gameRiddles.length, pct=score/(total*15);
  let trophy,title,sub,stars;
  if(lives<=0){trophy='😢';title='حاول مجدداً!';sub='لا بأس، التدريب يصنع البطل!';stars='⭐';}
  else if(pct>.8){trophy='🏆';title='بطل الألغاز!';sub='عقل نادر وذكاء حاد، مبروك!';stars='⭐⭐⭐';}
  else if(pct>.5){trophy='🎉';title='أداء رائع!';sub='أجبت معظم الألغاز بنجاح!';stars='⭐⭐';}
  else{trophy='💪';title='جيد!';sub='استمر في التدريب!';stars='⭐';}
  document.getElementById('resTrophy').textContent=trophy;
  document.getElementById('resTitle').textContent=title;
  document.getElementById('resSub').textContent=sub;
  document.getElementById('resStars').textContent=stars;
  document.getElementById('resScore').textContent=score;
  document.getElementById('rs1').textContent=correctCnt;
  document.getElementById('rs2').textContent=wrongCnt;
  document.getElementById('rs3').textContent=totalSec-timer;
}

function playAgain(){
  document.getElementById('resultScreen').classList.remove('show');
  document.getElementById('homeScreen').style.display='block';
  initGame();
}

function spawnParticles(){
  const e=['⭐','✨','🎉','💫','🌟'];
  for(let i=0;i<8;i++){
    const p=document.createElement('div');
    p.className='particle'; p.textContent=e[Math.floor(Math.random()*e.length)];
    p.style.left=Math.random()*100+'vw'; p.style.top=(Math.random()*50+20)+'vh';
    p.style.animationDelay=Math.random()*.5+'s';
    document.body.appendChild(p); setTimeout(()=>p.remove(),2000);
  }
}

// ======================== ADMIN ========================
let correctIdx=0, adminFilterCat='all';

async function checkAdminAuth(){
  const res=await api('admin_get_settings').catch(()=>null);
  if(res && !res.error){
    showAdminDash();
  }
}

async function doLogin(){
  const pass=document.getElementById('passInput').value;
  if(!pass){toast('أدخل كلمة المرور','error');return;}
  const res=await api('admin_login','POST',{password:pass});
  if(res.success){ showAdminDash(); document.getElementById('passInput').value=''; }
  else { document.getElementById('loginErr').classList.add('show'); }
}

async function doLogout(){
  await api('admin_logout');
  document.getElementById('adminDash').style.display='none';
  document.getElementById('loginScreen').style.display='block';
  document.getElementById('loginErr').classList.remove('show');
}

async function showAdminDash(){
  document.getElementById('loginScreen').style.display='none';
  document.getElementById('adminDash').style.display='block';
  loadAdminStats();
  loadAdminRiddles();
  loadAdminSettings();
}

function aTab(tab, btn){
  document.querySelectorAll('.a-tab').forEach(b=>b.classList.remove('active'));
  document.querySelectorAll('.a-panel').forEach(p=>p.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('ap-'+tab).classList.add('active');
  if(tab==='stats') loadAdminStats();
  if(tab==='riddles') loadAdminRiddles();
  if(tab==='settings') loadAdminSettings();
}

async function loadAdminStats(){
  const d=await api('admin_stats');
  if(d.error) return;
  document.getElementById('statsGrid').innerHTML=`
    <div class="st-card"><div class="st-num" style="color:var(--gold)">${d.total}</div><div class="st-lbl">🧩 إجمالي الألغاز</div></div>
    <div class="st-card"><div class="st-num" style="color:var(--blue)">${d.cats}</div><div class="st-lbl">📁 الفئات</div></div>
    <div class="st-card"><div class="st-num" style="color:var(--green)">${d.games}</div><div class="st-lbl">🎮 جلسات اللعب</div></div>
    <div class="st-card"><div class="st-num" style="color:var(--gold)">${d.topScore||0}</div><div class="st-lbl">🏆 أعلى نقطة</div></div>`;
  const recent=d.recent||[];
  document.getElementById('recentTable').innerHTML=`
    <tr><th>اللاعب</th><th>الفئة</th><th>النقاط</th><th>التوقيت</th></tr>
    ${recent.map(r=>`<tr><td>${r.player_name}</td><td>${r.category}</td><td style="color:var(--gold);font-weight:700">${r.score}</td><td style="color:var(--muted);font-size:.8rem">${r.played_at}</td></tr>`).join('')||'<tr><td colspan="4" style="text-align:center;padding:20px;color:var(--muted)">لا توجد جلسات بعد</td></tr>'}`;
}

async function loadAdminRiddles(){
  const d=await api('admin_get_riddles');
  if(d.error) return;
  const riddles=d.riddles||[];
  document.getElementById('listCnt').textContent=riddles.length+' لغز';

  // update catDL
  const cats=[...new Set(riddles.map(r=>r.category))];
  document.getElementById('catDL').innerHTML=cats.map(c=>`<option value="${c}">`).join('');

  // filter bar
  const bar=document.getElementById('filterBar');
  bar.innerHTML=['all',...cats].map(c=>`<button class="fbtn${c===adminFilterCat?' active':''}" onclick="filterRiddles('${c}',this)">${c==='all'?'الكل':c}</button>`).join('');

  const filtered=adminFilterCat==='all'?riddles:riddles.filter(r=>r.category===adminFilterCat);
  const list=document.getElementById('rList');
  if(!filtered.length){list.innerHTML='<div class="empty-st"><div class="e-icon">📭</div><div>لا توجد ألغاز</div></div>';return;}
  const optLetters=['أ','ب','ج','د'];
  const diffColor={'سهل':'var(--green)','صعب':'var(--red)','متوسط':'var(--gold)'};
  list.innerHTML='';
  [...filtered].reverse().forEach(r=>{
    const opts=[r.option_a,r.option_b,r.option_c,r.option_d];
    const item=document.createElement('div'); item.className='r-item';
    item.innerHTML=`<div class="ri-icon">${r.icon||'🧩'}</div>
      <div class="ri-body">
        <div><span class="ri-cat">${r.category}</span></div>
        <div class="ri-q" title="${r.question}">${r.question}</div>
        <div class="ri-ans">✅ ${optLetters[r.correct_option]}) ${opts[r.correct_option]}</div>
        <div class="ri-meta" style="color:${diffColor[r.difficulty]||'var(--muted)'}">📊 ${r.difficulty} &nbsp;·&nbsp; ⏱ ${r.time_limit}ث</div>
      </div>
      <div class="ri-actions"><button class="del-btn" onclick="deleteRiddle(${r.id})">🗑️ حذف</button></div>`;
    list.appendChild(item);
  });
}

function filterRiddles(cat, btn){
  adminFilterCat=cat;
  document.querySelectorAll('.fbtn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  loadAdminRiddles();
}

function setCorrect(i, btn){
  correctIdx=i;
  document.querySelectorAll('.c-btn').forEach(b=>b.classList.remove('sel'));
  btn.classList.add('sel');
  for(let j=0;j<4;j++) document.getElementById('op'+j).classList.toggle('correct-in',j===i);
}

async function saveRiddle(){
  const cat=document.getElementById('f-cat').value.trim();
  const q=document.getElementById('f-q').value.trim();
  const opts=[0,1,2,3].map(i=>document.getElementById('op'+i).value.trim());
  if(!cat){toast('أدخل الفئة','error');return;}
  if(!q){toast('أدخل نص اللغز','error');return;}
  if(opts.some(o=>!o)){toast('أدخل الخيارات الأربعة','error');return;}
  const payload={
    category:cat, difficulty:document.getElementById('f-diff').value,
    icon:document.getElementById('f-icon').value.trim()||'🧩',
    question:q, option_a:opts[0], option_b:opts[1], option_c:opts[2], option_d:opts[3],
    correct_option:correctIdx, hint:document.getElementById('f-hint').value.trim(),
    explanation:document.getElementById('f-exp').value.trim(),
    time_limit:parseInt(document.getElementById('f-time').value)||30
  };
  const res=await api('add_riddle','POST',payload);
  if(res.success){
    toast('✅ تم حفظ اللغز بنجاح!');
    clearAddForm(); loadAdminRiddles(); loadAdminStats(); initGame();
  } else toast(res.error||'خطأ في الحفظ','error');
}

function clearAddForm(){
  ['f-cat','f-q','f-hint','f-exp','f-icon'].forEach(id=>document.getElementById(id).value='');
  document.getElementById('f-time').value=30;
  for(let i=0;i<4;i++){document.getElementById('op'+i).value='';document.getElementById('op'+i).classList.remove('correct-in');}
  correctIdx=0;
  document.querySelectorAll('.c-btn').forEach((b,i)=>{b.classList.toggle('sel',i===0);});
  document.getElementById('op0').classList.add('correct-in');
}

async function deleteRiddle(id){
  if(!confirm('هل تريد حذف هذا اللغز؟')) return;
  const res=await api('delete_riddle','POST',{id});
  if(res.success){toast('🗑️ تم الحذف');loadAdminRiddles();loadAdminStats();initGame();}
  else toast(res.error||'خطأ','error');
}

async function loadAdminSettings(){
  const d=await api('admin_get_settings');
  if(d.error) return;
  document.getElementById('s-qpg').value=d.questions_per_game||5;
  document.getElementById('s-lives').value=d.lives_count||3;
  document.getElementById('s-title').value=d.game_title||'عالم الألغاز';
  document.getElementById('s-hints').classList.toggle('on', d.allow_hints==='1'||d.allow_hints===true);
}

async function saveSettings(){
  const p1=document.getElementById('s-pass1').value;
  const p2=document.getElementById('s-pass2').value;
  if(p1 && p1.length<6){toast('كلمة المرور قصيرة جداً','error');return;}
  if(p1 && p1!==p2){toast('كلمتا المرور غير متطابقتين','error');return;}
  const payload={
    questions_per_game:parseInt(document.getElementById('s-qpg').value)||5,
    lives_count:parseInt(document.getElementById('s-lives').value)||3,
    game_title:document.getElementById('s-title').value.trim()||'عالم الألغاز',
    allow_hints:document.getElementById('s-hints').classList.contains('on'),
  };
  if(p1) payload.new_password=p1;
  const res=await api('save_settings','POST',payload);
  if(res.success){
    toast('✅ تم حفظ الإعدادات!');
    document.getElementById('s-pass1').value='';
    document.getElementById('s-pass2').value='';
    initGame();
  } else toast(res.error||'خطأ','error');
}

// init
setCorrect(0, document.querySelector('.c-btn'));
initGame();
</script>
</body>
</html>
