.arabic-page{background:var(--cream);}

/* ---------- Hero ---------- */
.arabic-hero{max-width:1200px;margin:0 auto;padding:4rem 6vw 2rem;text-align:center;}
.arabic-hero .eyebrow{font-size:.78rem;letter-spacing:.06em;font-weight:700;color:var(--gold-dark);}
.arabic-hero h1{font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);color:var(--night);margin:.5rem 0;}
.arabic-hero h1 span{color:var(--gold-dark);}
.arabic-hero p{font-size:1.05rem;color:var(--ink-soft);max-width:600px;margin:0 auto 1.4rem;}

.arabic-progress-wrap{max-width:480px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.4rem;}
.arabic-progress-wrap b{color:var(--night);font-family:'Fraunces',serif;}
.arabic-bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:.6rem;}
.arabic-bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s;}

/* ---------- Mode tabs ---------- */
.arabic-tabs{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.6rem 0 .6rem;padding:0 20px;}
.arabic-tabs button{border:2px solid var(--line);background:var(--paper);color:var(--night);font-weight:700;font-family:'Fraunces',serif;padding:.7rem 1.3rem;border-radius:999px;cursor:pointer;font-size:.95rem;transition:.15s;}
.arabic-tabs button.active{background:var(--night);border-color:var(--night);color:var(--cream);}
.arabic-tabs button:hover{transform:translateY(-2px);}

.arabic-panel{max-width:1200px;margin:0 auto;padding:1.2rem 6vw 5rem;display:none;}
.arabic-panel.active{display:block;}

/* ---------- Alphabet grid ---------- */
.letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem;}
.letter-tile{position:relative;border-radius:var(--radius);padding:1.1rem .6rem .9rem;text-align:center;cursor:pointer;border:1px solid rgba(0,0,0,.05);box-shadow:none;transition:transform .15s ease;font-family:inherit;}
.letter-tile:hover{transform:translateY(-4px);}
.letter-tile .big{font-family:'Fraunces',serif;font-size:2.4rem;color:var(--night);line-height:1;}
.letter-tile .translit{display:block;margin-top:.4rem;font-weight:700;color:var(--ink-soft);font-size:.8rem;}
.letter-tile .check{position:absolute;top:.5rem;right:.6rem;font-size:1rem;opacity:0;transition:.15s;color:var(--green);}
.letter-tile.learned .check{opacity:1;}
.letter-tile.learned{box-shadow:0 0 0 2px var(--green) inset;}
.letter-tile .say{position:absolute;bottom:.5rem;right:.6rem;font-size:.85rem;opacity:.55;}

.letter-tile[data-hue="0"]{background:#E4F0E7;}
.letter-tile[data-hue="1"]{background:#FBE7DA;}
.letter-tile[data-hue="2"]{background:#EAE5F5;}
.letter-tile[data-hue="3"]{background:#E4EEF5;}
.letter-tile[data-hue="4"]{background:#FBF0DC;}
.letter-tile[data-hue="5"]{background:#F7E3E8;}

/* ---------- Letter detail modal ---------- */
.letter-modal{position:fixed;inset:0;background:rgba(31,58,92,.55);display:none;place-items:center;z-index:60;padding:18px;}
.letter-modal.show{display:grid;}
.letter-modal-box{background:var(--paper);border-radius:var(--radius);max-width:500px;width:100%;padding:2rem 1.8rem;position:relative;max-height:92vh;overflow:auto;}
.letter-modal-box .close{position:absolute;right:1rem;top:.9rem;border:0;background:var(--cream);border-radius:50%;width:36px;height:36px;font-size:1.3rem;cursor:pointer;color:var(--ink-soft);}
.letter-modal-head{text-align:center;margin-bottom:.6rem;}
.letter-modal-head .big{font-family:'Fraunces',serif;font-size:5.5rem;color:var(--night);line-height:1;}
.letter-modal-head .name{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--gold-dark);margin-top:.2rem;}
.letter-modal-actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1rem 0;}
.letter-modal-actions button{border:0;border-radius:999px;padding:.65rem 1.2rem;font-weight:700;cursor:pointer;font-family:inherit;font-size:.9rem;}
.btn-play{background:var(--night);color:var(--cream);}
.btn-repeat{background:var(--cream);color:var(--night);border:1px solid var(--line);}
.btn-learned{background:var(--green);color:#fff;}
.btn-learned.done{background:#CFE4D6;color:#2F5B3E;}

.word-card{background:var(--cream);border-radius:var(--radius-sm);padding:1rem;text-align:center;margin:1rem 0;}
.word-card .arabic-word{font-family:'Fraunces',serif;font-size:2rem;color:var(--night);}
.word-card .translit{color:var(--ink-soft);font-weight:700;margin-top:.2rem;}
.word-card .translation{color:var(--ink-soft);font-size:.85rem;}

.trace-wrap{text-align:center;margin-top:1rem;}
.trace-wrap canvas{border:2px dashed var(--line);border-radius:var(--radius-sm);background:var(--paper);touch-action:none;max-width:100%;}
.trace-actions{margin-top:.5rem;display:flex;gap:.5rem;justify-content:center;}
.trace-actions button{border:0;background:var(--paper);border:1.5px solid var(--line);color:var(--night);border-radius:999px;padding:.5rem 1rem;font-weight:700;cursor:pointer;}

/* ---------- Practice / games ---------- */
.game-choose{max-width:640px;margin:.6rem auto;text-align:center;}
.game-choose .prompt-letter{font-family:'Fraunces',serif;font-size:5.5rem;color:var(--night);}
.game-choose .prompt-audio{font-size:3.4rem;background:none;border:0;cursor:pointer;}
.game-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:1.2rem;}
.game-options button{border:0;border-radius:var(--radius-sm);padding:1.3rem .6rem;font-family:'Fraunces',serif;font-size:2rem;background:var(--paper);border:2px solid var(--line);cursor:pointer;color:var(--night);transition:.15s;}
.game-options button.name-opt{font-family:'Figtree',sans-serif;font-size:1.1rem;font-weight:700;}
.game-options button:hover{transform:translateY(-3px);}
.game-options button.correct{background:#E4F0E7;border-color:var(--green);}
.game-options button.incorrect{background:#F7E3E1;border-color:var(--peach);}
.game-feedback{min-height:1.8rem;font-weight:700;font-size:1.05rem;margin-top:1rem;color:var(--green);}
.game-scorebar{display:flex;justify-content:center;gap:1.6rem;margin-bottom:1rem;font-weight:700;color:var(--night);}
.game-mode-pick{display:flex;justify-content:center;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap;}
.game-mode-pick button{border:2px solid var(--line);background:var(--paper);padding:.6rem 1.1rem;border-radius:999px;font-weight:700;cursor:pointer;color:var(--night);}
.game-mode-pick button.active{background:var(--purple);border-color:var(--purple);color:#fff;}
.game-next{margin-top:.9rem;}
.game-next button{background:var(--gold);border:0;color:#3A2600;font-weight:700;padding:.7rem 1.3rem;border-radius:999px;cursor:pointer;}

/* ---------- Progress list ---------- */
.progress-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-top:1rem;}
.progress-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .8rem;display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--ink-soft);}
.progress-item .dot{width:10px;height:10px;border-radius:50%;background:var(--line);}
.progress-item.done .dot{background:var(--green);}
.progress-item.done{background:#E4F0E7;}

.arabic-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--night);color:var(--cream);padding:.8rem 1.3rem;border-radius:999px;z-index:100;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.2);display:none;}

@media(max-width:560px){
  .letter-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));}
  .letter-modal-head .big{font-size:4rem;}
  .game-options{grid-template-columns:1fr;}
}