/* ══════════════════════════════════════════
   تمكَّن — Games Shared CSS
   ══════════════════════════════════════════ */
:root {
  --green:#0F7B5F; --green-dark:#085041; --green-mid:#1D9E75;
  --green-light:#E1F5EE; --green-xlight:#F0FAF5;
  --blue:#185FA5; --blue-light:#E6F1FB;
  --amber:#BA7517; --amber-light:#FAEEDA;
  --coral:#993C1D; --coral-light:#FAECE7;
  --purple:#534AB7; --purple-light:#EEEDFE;
  --gray-50:#F9F8F5; --gray-100:#F1EFE8; --gray-200:#D3D1C7;
  --gray-400:#888780; --gray-600:#5F5E5A; --gray-800:#2C2C2A;
  --white:#FFFFFF; --text-primary:#1a1a18; --text-muted:#5F5E5A;
  --border:rgba(0,0,0,0.1); --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.10); --shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --font:\'Tajawal\',\'IBM Plex Sans Arabic\',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);direction:rtl;color:var(--text-primary);background:var(--gray-50);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;} img,svg{max-width:100%;display:block;}
button{font-family:var(--font);cursor:pointer;border:none;background:none;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* Game navbar */
.g-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.g-nav-brand{display:flex;align-items:center;gap:8px;}
.g-nav-brand img{height:32px;width:auto;}
.g-nav-title{font-size:15px;font-weight:700;color:var(--text-primary);}
.g-nav-back{font-size:13px;color:var(--text-muted);padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--border);transition:background .15s;}
.g-nav-back:hover{background:var(--gray-100);}
.g-nav-pts{font-size:13px;font-weight:700;color:var(--amber);display:flex;align-items:center;gap:4px;}

/* Game wrapper */
.g-wrap{max-width:680px;margin:0 auto;padding:20px 16px 48px;}

/* Progress bar */
.g-prog{background:var(--gray-200);height:8px;border-radius:4px;overflow:hidden;margin-bottom:20px;}
.g-prog-fill{height:100%;border-radius:4px;background:var(--green);transition:width .5s ease;}

/* Question card */
.g-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);}
.g-stage{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.g-q-text{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:20px;line-height:1.4;}
.g-q-sub{font-size:14px;color:var(--text-muted);margin-bottom:20px;}

/* Answer options */
.g-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.g-opts.cols-1{grid-template-columns:1fr;}
.g-opts.cols-3{grid-template-columns:repeat(3,1fr);}
.g-opts.cols-4{grid-template-columns:repeat(4,1fr);}
.g-opt{padding:14px 12px;border:2px solid var(--border);border-radius:var(--r-md);cursor:pointer;font-size:15px;font-weight:600;text-align:center;background:var(--white);color:var(--text-primary);transition:border-color .15s,background .15s,transform .1s;line-height:1.3;}
.g-opt:hover{border-color:var(--green);background:var(--green-xlight);}
.g-opt.correct{border-color:#2E7D32;background:#E8F5E9;color:#1B5E20;animation:pop .3s ease;}
.g-opt.wrong{border-color:#C62828;background:#FFEBEE;color:#B71C1C;animation:shake .3s ease;}
.g-opt:disabled,.g-opt[disabled]{cursor:not-allowed;opacity:.7;}
.g-opt.big{font-size:28px;padding:20px 12px;}

/* Navigation */
.g-nav-btns{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px;border-top:1px solid var(--border);margin-top:4px;}
.g-btn-next{background:var(--green);color:var(--white);font-size:14px;font-weight:600;padding:10px 24px;border-radius:var(--r-sm);transition:background .15s;}
.g-btn-next:hover{background:var(--green-dark);}
.g-btn-next:disabled{opacity:.4;cursor:not-allowed;}
.g-btn-skip{font-size:13px;color:var(--text-muted);padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-sm);}
.g-btn-skip:hover{background:var(--gray-100);}

/* Feedback overlay */
.g-feedback{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;background:rgba(0,0,0,.4);}
.g-feedback.show{display:flex;}
.g-fb-box{background:var(--white);border-radius:var(--r-xl);padding:32px 40px;text-align:center;max-width:340px;box-shadow:var(--shadow-lg);animation:popIn .25s ease;}
.g-fb-icon{font-size:56px;margin-bottom:12px;}
.g-fb-title{font-size:22px;font-weight:800;margin-bottom:6px;}
.g-fb-pts{font-size:15px;color:var(--amber);font-weight:600;margin-bottom:16px;}
.g-fb-btn{background:var(--green);color:var(--white);font-size:15px;font-weight:700;padding:12px 32px;border-radius:var(--r-md);}
.g-fb-btn:hover{background:var(--green-dark);}
.g-fb-btn.wrong-btn{background:var(--blue);}

/* Results screen */
.g-results{text-align:center;padding:32px 24px;}
.g-res-icon{font-size:64px;margin-bottom:12px;}
.g-res-title{font-size:26px;font-weight:800;margin-bottom:8px;}
.g-res-score{font-size:18px;color:var(--text-muted);margin-bottom:24px;}
.g-stars{display:flex;justify-content:center;gap:8px;font-size:40px;margin-bottom:24px;}
.g-res-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.g-badge-earned{background:var(--amber-light);border:1.5px solid var(--amber);border-radius:var(--r-md);padding:12px 20px;margin:12px auto;max-width:280px;font-size:14px;font-weight:600;color:var(--amber);}

/* Stars rating */
.g-stars-bar{display:flex;justify-content:center;gap:6px;margin:12px 0;}
.g-star{font-size:28px;opacity:.25;transition:opacity .3s;}
.g-star.lit{opacity:1;}

/* Dark mode */
body.dark{--white:#181815;--gray-50:#1e1e1b;--gray-100:#252521;--gray-200:#3a3a35;--border:rgba(255,255,255,.1);--text-primary:#F1EFE8;--text-muted:#B4B2A9;--green-xlight:rgba(15,123,95,.08);--green-light:rgba(15,123,95,.15);}
body.dark .g-nav{background:rgba(24,24,21,.96);}
body.dark .g-card{background:var(--gray-50);}
body.dark .g-opt{background:var(--gray-50);}
body.dark .g-fb-box{background:var(--gray-50);}

/* Animations */
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.g-card{animation:fadeIn .25s ease;}

/* Card flip for memory game */
.memory-grid{display:grid;gap:10px;margin-bottom:20px;}
.mem-card{aspect-ratio:1;cursor:pointer;perspective:600px;}
.mem-card-inner{position:relative;width:100%;height:100%;transition:transform .45s ease;transform-style:preserve-3d;}
.mem-card.flipped .mem-card-inner,.mem-card.matched .mem-card-inner{transform:rotateY(180deg);}
.mem-front,.mem-back{position:absolute;inset:0;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:32px;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.mem-front{background:var(--green);color:var(--white);font-size:22px;font-weight:700;}
.mem-back{background:var(--white);border:2px solid var(--border);transform:rotateY(180deg);}
.mem-card.matched .mem-back{background:var(--green-light);border-color:var(--green);}

/* Letter display */
.g-letter-big{font-size:80px;font-weight:800;color:var(--green);text-align:center;line-height:1;padding:16px 0;}
.g-letter-hint{font-size:14px;color:var(--text-muted);text-align:center;margin-bottom:16px;}
.g-audio-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--blue-light);border:1.5px solid var(--blue);border-radius:var(--r-md);padding:12px 24px;font-size:14px;font-weight:600;color:var(--blue);margin:0 auto 20px;cursor:pointer;transition:background .15s;}
.g-audio-btn:hover{background:#c8ddf5;}

/* Word display with blanks */
.g-word-blanks{display:flex;align-items:center;justify-content:center;gap:6px;font-size:32px;font-weight:800;margin:16px 0;flex-wrap:wrap;}
.g-blank{width:44px;height:52px;border-bottom:3px solid var(--green);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:32px;}
.g-word-letters{display:flex;align-items:center;justify-content:center;gap:6px;margin:20px 0;flex-wrap:wrap;}
.g-letter-tile{width:48px;height:52px;background:var(--white);border:2px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s;}
.g-letter-tile:hover{border-color:var(--green);background:var(--green-xlight);}
.g-letter-tile.used{opacity:.3;pointer-events:none;}

/* Quantity display */
.g-qty-display{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:16px;background:var(--gray-50);border-radius:var(--r-md);margin-bottom:20px;min-height:80px;align-items:center;}
.g-qty-item{font-size:28px;}

/* Progress dots */
.g-dots{display:flex;justify-content:center;gap:6px;margin-bottom:16px;}
.g-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-200);transition:background .2s;}
.g-dot.done{background:var(--green);}
.g-dot.current{background:var(--teal,#5DCAA5);}

/* Timer bar */
.g-timer{height:5px;background:var(--gray-200);border-radius:3px;overflow:hidden;margin-bottom:16px;}
.g-timer-fill{height:100%;background:var(--green);border-radius:3px;transition:width 1s linear;}
.g-timer-fill.urgent{background:#E53935;}

@media(max-width:480px){
  .g-opts.cols-4{grid-template-columns:repeat(2,1fr);}
  .g-opts.cols-3{grid-template-columns:repeat(3,1fr);}
  .g-letter-big{font-size:60px;}
  .g-q-text{font-size:16px;}
}

/* ── Dark mode improvements (v3) ── */
body.dark .g-opt.correct{background:#0D2E1A;border-color:var(--green);color:var(--green)}
body.dark .g-opt.wrong{background:#2D0A0A;border-color:#F87171;color:#F87171}
body.dark .g-fb-box{background:var(--gray-50)}
/* Memory icon — high contrast */
.ac-icon-memory{color:#FFD95A!important}
body.dark .ac-icon-memory{color:#FFD95A!important;text-shadow:none}
/* Thin progress bar */
.g-prog{height:4px!important;border-radius:2px!important}
.g-prog-fill{border-radius:2px!important}

/* ── Games color fixes ── */
body.dark .g-card { color:var(--tx-1,#F1EFE8); }
body.dark .g-q-text { color:var(--tx-1,#F1EFE8); }
body.dark .g-stage { color:var(--tx-3,#B4B2A9); }
body.dark .phase-intro h3 { color:var(--green,#22C55E); }
body.dark .g-sound-btn { color:var(--blue,#60A5FA); border-color:var(--blue,#60A5FA); background:rgba(96,165,250,.12); }
body.dark .g-nav-title { color:var(--tx-1,#F1EFE8); }
body.dark .g-res-title { color:var(--tx-1,#F1EFE8); }
body.dark .g-res-score { color:var(--tx-3,#B4B2A9); }


/* iOS Safari AI Assistant Zoom Fix */
.ai-assistant input,
.ai-assistant textarea,
.ai-chat-input,
.ai-assistant-panel textarea,
.ai-widget-panel textarea {
  font-size: 16px !important;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ai-assistant-panel,
  .ai-chat-panel,
  .ai-widget-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .ai-assistant-panel * {
    max-width: 100%;
    box-sizing: border-box;
  }
}