/* Grand Ta'lim — Arabic Typing Tutor */
:root{
  --bg:#15171e; --panel:#1e212b; --panel2:#272b37; --line:#323848;
  --text:#e7e9f0; --dim:#8b91a4; --faint:#565d72;
  --accent:#f5b301; --accent-ink:#1a1c22; --good:#54c98a; --bad:#e0563f;
  --r:16px; --ar:"Noto Naskh Arabic","Segoe UI",serif; --ui:"Poppins",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#1c2030,var(--bg));color:var(--text);
  font-family:var(--ui);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}

/* top bar */
.gt-top{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;gap:16px}
.gt-brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:17px}
.gt-brand .logo{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:800}
.gt-brand b{color:var(--accent)}
.gt-top .tag{color:var(--dim);font-size:13px}
.gt-lessons-btn{display:none;background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:99px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer}
.gt-top-right{display:flex;align-items:center;gap:12px}
.gt-iconbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);font-size:15px;cursor:pointer;display:grid;place-items:center;padding:0;line-height:1}
.gt-iconbtn:hover{border-color:var(--accent)}
.gt-iconbtn.authed{background:var(--good);color:#06301a;border-color:var(--good);font-weight:700}
/* login / account modal */
.login-fields{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px}
.login-fields input{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  color:var(--text);font-family:var(--ar);font-size:16px;text-align:right;direction:rtl}
.login-fields input:focus{outline:none;border-color:var(--accent)}
.login-err{color:var(--bad);font-size:13px;min-height:18px;margin:4px 0 6px;text-align:center}
.login-note{margin-top:14px;font-size:13px;color:var(--dim);text-align:center}
.login-note a{color:var(--accent);text-decoration:none}

/* layout */
.gt-wrap{flex:1;display:grid;grid-template-columns:300px 1fr;gap:22px;max-width:1240px;width:100%;margin:0 auto;padding:6px 24px 30px}

/* unit rail */
.gt-rail{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow:auto;max-height:78vh}
.gt-rail h3{margin:6px 8px 12px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.ul-item{display:block;width:100%;text-align:right;background:var(--panel2);border:1px solid transparent;border-radius:12px;
  padding:11px 13px;margin-bottom:9px;color:var(--text);transition:.15s}
.ul-item:hover{border-color:var(--line)}
.ul-item.active{border-color:var(--accent);background:#2a2e3c}
.ul-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.ul-num{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--text);display:grid;place-items:center;font-size:12px;font-weight:700}
.ul-item.active .ul-num{background:var(--accent);color:var(--accent-ink)}
.ul-stars,.ov-star,.ul-star{color:var(--faint)}
.ul-star{font-size:12px}.ul-star.on{color:var(--accent)}
.ul-title{font-size:13.5px;font-weight:600}
.ul-sub{font-family:var(--ar);font-size:18px;color:var(--dim);direction:rtl;margin-top:3px}

/* stage */
.gt-stage{display:flex;flex-direction:column;gap:18px;min-width:0}
.gt-stagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.gt-unit-title{font-size:20px;font-weight:600}
.gt-unit-sub{font-family:var(--ar);font-size:22px;color:var(--accent);direction:rtl;margin-top:2px}
.gt-stats{display:flex;gap:22px}
.gt-stat{ text-align:center }
.gt-stat b{display:block;font-size:26px;font-weight:700;font-family:var(--ar)}
.gt-stat span{font-size:12px;color:var(--dim)}
.gt-stat.wpm b{color:var(--accent)}

/* progress bar */
.gt-bar{height:6px;background:var(--panel2);border-radius:99px;overflow:hidden}
.gt-bar>i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .15s}

/* prompt */
.gt-prompt-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;position:relative;min-height:120px;
  display:flex;align-items:center;justify-content:center}
.gt-prompt{direction:rtl;font-family:var(--ar);font-size:2.5rem;line-height:1.8;letter-spacing:.12em;
  display:flex;flex-wrap:wrap;gap:.18em;justify-content:center;color:var(--faint)}
.gt-ch{transition:color .08s,transform .08s;padding:0 .04em;border-radius:6px}
/* word units: keep each word's letters joined (cursive) while still coloring per-letter */
.gt-word{display:inline-block;white-space:nowrap;letter-spacing:0}
.gt-word .gt-ch{padding:0;border-radius:0}  /* no per-letter padding -> letters touch & join */
.gt-ch.gt-done{color:var(--text)}
.gt-ch.gt-cur{color:var(--accent);background:rgba(245,179,1,.14);box-shadow:0 2px 0 var(--accent)}
.gt-ch.gt-wrong{color:var(--bad)!important;background:rgba(224,86,63,.18)}
.gt-ch.gt-space{opacity:.4}
.gt-finger-hint{text-align:center;color:var(--dim);font-size:14px}
.gt-finger-hint b{color:var(--text)}

/* keyboard */
/* keyboard must mirror the PHYSICAL keyboard (left-to-right), even though the page is RTL */
.gt-kb{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;direction:ltr}
.kb-row{display:flex;gap:8px;justify-content:center}
.kb-spacer{max-width:34px}
.kb-key{position:relative;flex:1 1 0;max-width:60px;aspect-ratio:1/1;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line);border-bottom:3px solid #000a;display:grid;place-items:center;transition:.08s;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.kb-key:active{transform:translateY(1px)}
.kb-key .kb-ar{font-family:var(--ar);font-size:1.5rem;color:var(--text)}
/* faint finger tint on every key */
.kb-key::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--fc);opacity:.10}
.kb-key.kb-finger-on::before{opacity:.22}
.kb-key.kb-next{border-color:var(--fc);box-shadow:0 0 0 2px var(--fc),0 0 22px -4px var(--fc);transform:translateY(-2px)}
.kb-key.kb-next::before{opacity:.30}
.kb-key.kb-hit{background:var(--good);transform:translateY(1px)}
.kb-key.kb-miss{background:var(--bad)}
.kb-bump{position:absolute;bottom:7px;width:14px;height:3px;border-radius:3px;background:var(--dim)}
.kb-row-space{margin-top:2px}
.kb-space{max-width:none;flex:1;aspect-ratio:auto;height:42px}
/* ---- Shift key + hamza (shift-layer) glyphs أ إ آ ---- */
.kb-key.kb-shift{--fc:#9aa0b0;flex:1.5 1 0;max-width:74px}
.kb-key.kb-shift .kb-ar{font-size:1.1rem;color:var(--dim)}
.kb-key.kb-shift.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.kb-key.kb-shift.active .kb-ar{color:var(--accent)}
.kb-key.kb-shift.kb-shift-need{border-color:var(--accent);animation:kbpulse 1.1s ease-in-out infinite}
.kb-key.kb-shift.kb-shift-need .kb-ar{color:var(--accent)}
@keyframes kbpulse{0%,100%{box-shadow:0 0 0 1px var(--accent)}50%{box-shadow:0 0 0 3px var(--accent),0 0 18px -4px var(--accent)}}
.kb-shift-glyph{position:absolute;top:3px;right:5px;font-family:var(--ar);font-size:.72rem;line-height:1;color:var(--accent);opacity:.65}
.gt-kb.kb-shifted .kb-shift-glyph{opacity:1;font-weight:700;font-size:.95rem}
/* ---- MOBILE phone-style keyboard (tap + long-press for أ إ آ ؤ ئ), neutral keys ---- */
.mkey{position:relative;background:var(--panel2)}
.mkey::before{display:none}                       /* no finger tint on mobile */
.kb-long-dot{position:absolute;top:4px;left:5px;width:5px;height:5px;border-radius:50%;background:var(--dim);opacity:.7}
.kb-key.kb-longneed{border-color:var(--accent);animation:kbpulse 1.1s ease-in-out infinite}
.kb-key.kb-longneed .kb-long-dot{background:var(--accent);opacity:1}
.kb-popup-scrim{position:fixed;inset:0;z-index:80}
.kb-popup{position:fixed;z-index:81;transform:translate(-50%,-100%);display:flex;gap:6px;padding:8px;direction:rtl;
  background:var(--panel2);border:1px solid var(--accent);border-radius:14px;box-shadow:0 12px 32px -6px #000}
.kb-popup-key{min-width:46px;height:54px;display:grid;place-items:center;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);font-family:var(--ar);font-size:1.8rem;color:var(--text)}
.kb-popup-key:first-child{color:var(--dim)}
.kb-popup-key:active{background:var(--accent);color:var(--ink)}

/* completion overlay */
.gt-overlay{position:fixed;inset:0;background:rgba(8,9,13,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.2s;z-index:50}
.gt-overlay.show{opacity:1;pointer-events:auto}
.ov-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:34px 40px;text-align:center;width:min(420px,92vw);
  transform:translateY(10px);transition:.2s;box-shadow:0 30px 90px -20px #000}
.gt-overlay.show .ov-card{transform:none}
.ov-card h2{margin:0 0 6px;font-size:22px}
.ov-stars{font-size:46px;letter-spacing:.1em;margin:6px 0 16px}
.ov-star.on{color:var(--accent);text-shadow:0 0 16px rgba(245,179,1,.5)}
.ov-row{display:flex;justify-content:center;gap:34px;margin-bottom:22px}
.ov-row .v{font-size:30px;font-weight:700;font-family:var(--ar)}
.ov-row .v.acc{color:var(--good)} .ov-row .v.wpm{color:var(--accent)}
.ov-row .l{font-size:12px;color:var(--dim)}
.ov-actions{display:flex;gap:10px;justify-content:center}
.btn{border:0;border-radius:99px;padding:11px 22px;font-weight:600}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:var(--panel2);color:var(--text)}

/* ===== views + falling-letters game ===== */
.gt-view{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0}
.gt-view[hidden]{display:none}
.gt-iconbtn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ov-note{color:var(--dim);font-size:14px;margin-bottom:16px}
.ov-note b{color:var(--accent)}
.game-hud{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;color:var(--dim);font-size:13px}
.game-hud .ghud b{color:var(--text);font-size:22px;font-family:var(--ar);margin-inline-start:5px}
.g-lives{display:flex;gap:5px;font-size:20px}
.g-lives .heart{color:var(--faint);transition:.15s}
.g-lives .heart.on{color:#e0563f}
.game-area{flex:1;position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:0}
.gl{position:absolute;top:0;width:50px;height:50px;display:grid;place-items:center;
  font-family:var(--ar);font-size:1.9rem;color:var(--accent);background:var(--panel2);
  border:1px solid var(--line);border-bottom:2px solid #000a;border-radius:11px;will-change:transform;box-shadow:0 4px 14px -4px #000}
.gl.pop{opacity:0;transition:opacity .12s}
/* falling WORDS (letters join: inline .gw-ch spans, no per-letter padding) */
.gw{position:absolute;top:0;direction:rtl;white-space:nowrap;font-family:var(--ar);font-size:1.7rem;color:var(--text);
  background:var(--panel2);border:1px solid var(--line);border-bottom:2px solid #000a;border-radius:11px;
  padding:6px 14px;will-change:transform;box-shadow:0 4px 14px -4px #000}
.gw .gw-ch{transition:color .08s}
.gw .gw-ch.on{color:var(--good)}
.gw.locked{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 6px 18px -4px var(--accent)}
.gw.pop{opacity:0;transition:opacity .14s}
/* game mode toggle (حروف / كلمات) */
.game-modes{display:flex;gap:6px;justify-content:center}
.gm-btn{font-family:var(--ar);background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:99px;
  padding:5px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:.12s}
.gm-btn.active{background:var(--accent);color:var(--ink);border-color:var(--accent)}

/* tablet / small-desktop */
@media (max-width:900px){
  .gt-wrap{grid-template-columns:240px 1fr}
  .gt-prompt{font-size:2.1rem}
  .kb-key{max-width:54px}
}

/* ============ MOBILE (body.m toggled by JS at <=760px) ============ */
/* svh = small viewport height: fits within the browser's toolbar-visible area so the
   keyboard is never hidden behind the address bar (the iOS Chrome/Safari problem). */
body.m{height:100vh;height:100svh;height:var(--app-h,100svh);min-height:0;overflow:hidden}
body.m .gt-top{padding:max(9px,env(safe-area-inset-top)) 14px 9px}
body.m .brand-tag,body.m .gt-phase{display:none}
body.m .gt-brand{font-size:15px;gap:9px}
body.m .gt-brand .logo{width:26px;height:26px}
body.m .gt-lessons-btn{display:inline-flex;align-items:center}
body.m .gt-wrap{grid-template-columns:1fr;gap:8px;padding:0 6px calc(6px + env(safe-area-inset-bottom));min-height:0}

/* lessons drawer (animated, with backdrop) */
body.m .gt-rail{position:fixed;top:52px;left:9px;right:9px;max-height:64vh;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s;box-shadow:0 24px 60px -16px #000}
body.m.rail-open .gt-rail{opacity:1;visibility:visible;transform:none}
body.m.rail-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39}

body.m .gt-stage{gap:9px;height:100%;min-height:0}
body.m .gt-view{gap:8px}
body.m .game-hud .ghud b{font-size:19px}
body.m .gl{width:46px;height:46px;font-size:1.7rem}
body.m .gw{font-size:1.4rem;padding:5px 11px}
body.m .gm-btn{padding:4px 15px;font-size:13px}
body.m .gt-stagehead{align-items:center}
body.m .gt-unit-title{font-size:14px}
body.m .gt-unit-sub{font-size:17px}
body.m .gt-stats{gap:14px}
body.m .gt-stat b{font-size:19px}
body.m .gt-stat span{font-size:10px}

body.m .gt-prompt-wrap{flex:1;min-height:0;padding:14px 10px;display:flex;align-items:center;justify-content:center}
body.m .gt-prompt{font-size:1.7rem;line-height:1.55;letter-spacing:.06em;gap:.12em}
body.m .gt-finger-hint{display:none}
body.m .gt-finger-hint.has-hint{display:block;color:var(--accent);font-size:13px}

/* keyboard fills width like a phone keyboard: no stagger, no number row */
body.m .gt-kb{padding:6px 4px;gap:4px;border-radius:14px;margin-top:auto}
body.m .kb-row{gap:3px}
body.m .kb-row-0{display:none}
body.m .kb-spacer{display:none}
body.m .kb-key{max-width:none;aspect-ratio:auto;height:50px;border-radius:8px;border-bottom-width:2px}
body.m .kb-key .kb-ar{font-size:1.08rem}
body.m .kb-bump{bottom:5px}
body.m .kb-space{height:42px}
body.m .kb-key.kb-shift{flex:1.2 1 0;max-width:none}
body.m .kb-key.kb-shift .kb-ar{font-size:.95rem}
body.m .kb-shift-glyph{top:2px;right:3px;font-size:.6rem}
body.m .gt-kb.kb-shifted .kb-shift-glyph{font-size:.78rem}
body.m .ov-card{padding:26px 22px}