/* Ilm for Kids — Arabic page: a softer, more tactile feel (loads after arabic.css) */
:root{ --ar-font:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif; }

/* Arabic letters in a proper Arabic font */
.letter-tile .big,.letter-modal-head .big,.word-card .arabic-word,.prompt-letter,.game-options button,.progress-item,.ar-forms .f b{font-family:var(--ar-font);}

/* ---------- Letter tiles: chunky, squishy, colourful ---------- */
.letter-grid{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));}
.letter-tile{border:0;border-radius:24px;padding:1.2rem .6rem 1rem;box-shadow:0 6px 0 rgba(31,58,92,.10),0 10px 22px rgba(31,58,92,.06);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;animation:arTileIn .45s both;}
.letter-tile:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 10px 0 rgba(31,58,92,.10),0 16px 30px rgba(31,58,92,.10);}
.letter-tile:active{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 rgba(31,58,92,.12);}
.letter-tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
.letter-tile .big{font-size:3.2rem;line-height:1.35;display:block;transition:transform .2s;}
.letter-tile:hover .big{transform:scale(1.12);}
.letter-tile .translit{font-size:.88rem;color:var(--night);opacity:.75;margin-top:.1rem;}
.letter-tile .say{bottom:.55rem;right:.6rem;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;opacity:1;font-size:.85rem;transition:.15s;}
.letter-tile .say:hover{transform:scale(1.15);background:#fff;}
.letter-tile .check{top:.55rem;right:.6rem;left:auto;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;transform:scale(.4);}
.letter-tile.learned .check{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.letter-tile.learned{box-shadow:0 0 0 3px #7FBF95 inset,0 6px 0 rgba(47,91,62,.18);}
.letter-tile[data-hue="0"]{background:linear-gradient(160deg,#EEF7F0,#DCEFE2);}
.letter-tile[data-hue="1"]{background:linear-gradient(160deg,#FDF0E7,#F9DFCE);}
.letter-tile[data-hue="2"]{background:linear-gradient(160deg,#F2EFFA,#E2DBF3);}
.letter-tile[data-hue="3"]{background:linear-gradient(160deg,#EDF4FA,#DAE8F3);}
.letter-tile[data-hue="4"]{background:linear-gradient(160deg,#FDF6E8,#F8E8C9);}
.letter-tile[data-hue="5"]{background:linear-gradient(160deg,#FBEEF1,#F4D9E0);}
@keyframes arTileIn{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:none;}}

/* ---------- Letter window ---------- */
.letter-modal.show .letter-modal-box{animation:arPopUp .32s cubic-bezier(.34,1.56,.64,1);}
@keyframes arPopUp{from{opacity:0;transform:translateY(30px) scale(.95);}to{opacity:1;transform:none;}}
.letter-modal-box{border-radius:28px;padding:2.2rem 1.8rem 1.8rem;}
.letter-modal-head .big{font-size:7rem;line-height:1.3;animation:arBounce .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes arBounce{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);}}
.letter-modal-head .name{font-size:1.6rem;}
.letter-modal-actions button{transition:transform .15s;}
.letter-modal-actions button:active{transform:scale(.95);}
.ar-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);color:var(--night);font-size:1.3rem;cursor:pointer;box-shadow:0 3px 0 rgba(31,58,92,.12);}
.ar-nav:hover{background:#fff;}
.ar-nav.prev{right:.6rem;} .ar-nav.next{left:.6rem;}
.letter-modal-head{position:relative;}
.ar-pos{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-top:.2rem;}

.ar-forms{margin:1rem 0;background:var(--cream);border-radius:18px;padding:.9rem;}
.ar-forms > b{display:block;text-align:center;color:var(--night);margin-bottom:.6rem;}
.ar-forms .row{display:flex;gap:.5rem;justify-content:center;direction:rtl;}
.ar-forms .f{flex:1;max-width:100px;background:var(--paper);border-radius:14px;padding:.4rem .3rem .5rem;text-align:center;direction:ltr;box-shadow:0 3px 0 rgba(31,58,92,.06);}
.ar-forms .f b{display:block;font-size:2.2rem;line-height:1.5;color:var(--night);font-weight:400;}
.ar-forms .f small{font-size:.72rem;font-weight:700;color:var(--ink-soft);}
.ar-forms p{margin:.6rem 0 0;text-align:center;font-size:.82rem;color:var(--ink-soft);}

.word-card{border-radius:18px;}
.word-card .arabic-word{font-size:2.6rem;line-height:1.6;}

.trace-wrap{text-align:center;}
#traceCanvas{width:100%;max-width:340px;height:auto;border-radius:18px;border:2px dashed var(--line);background:#fffef8;touch-action:none;cursor:crosshair;}
.crayons{display:flex;gap:.5rem;justify-content:center;margin:.7rem 0 .2rem;}
.crayon{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line);cursor:pointer;transition:transform .15s;}
.crayon.on{transform:scale(1.2);box-shadow:0 0 0 3px var(--night);}
.trace-actions button{border:0;background:var(--cream);border-radius:999px;padding:.5rem 1rem;font-weight:700;cursor:pointer;font-family:inherit;}

/* ---------- Celebration ---------- */
.ar-confetti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden;}
.ar-confetti span{position:absolute;top:-30px;font-size:1.6rem;animation:arFall 1.6s ease-in forwards;}
@keyframes arFall{to{transform:translateY(105vh) rotate(360deg);opacity:.2;}}

/* ---------- Practice games ---------- */
.game-options button{border-radius:20px!important;box-shadow:0 5px 0 rgba(31,58,92,.10);transition:transform .15s;}
.game-options button:active{transform:translateY(3px);}
.game-options button.correct{animation:arPulse .5s;}
.game-options button.incorrect{animation:arShake .4s;}
@keyframes arPulse{50%{transform:scale(1.08);}}
@keyframes arShake{20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
.prompt-letter{font-size:6rem!important;line-height:1.4;}

@media (prefers-reduced-motion: reduce){
  .letter-tile,.letter-modal.show .letter-modal-box,.letter-modal-head .big,.ar-confetti span{animation:none!important;transition:none!important;}
}
@media (max-width:600px){
  .letter-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.7rem;}
  .letter-tile .big{font-size:2.6rem;}
  .letter-modal-head .big{font-size:5.5rem;}
  .ar-nav{width:38px;height:38px;}
}
.ar-teacher{text-align:center;margin:1rem auto 0;}
.ar-teacher button{background:var(--gold);color:#fff;border:0;border-radius:999px;padding:.7rem 1.4rem;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 4px 0 var(--gold-dark);font-size:.95rem;}
.ar-teacher button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-dark);}
.ar-teacher small{display:block;margin-top:.4rem;color:var(--ink-soft);font-size:.78rem;}