/* Yalla — Arab-world travel phrasebook. Self-contained styles. */
:root{
  --teal:#0E5C6B; --teal-d:#093F4A; --teal-t:#E0EDEF;
  --gold:#D98A2B; --gold-d:#AE6C1C; --gold-t:#F7E9CF;
  --clay:#C24B33;
  --sand:#F4ECDC; --panel:#FFFDF8; --panel-2:#FBF6EC;
  --ink:#1E2A2E; --ink-soft:#586965; --ink-mute:#8A968F;
  --line:#E8DFCB; --line-2:#EFE7D6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--sand); color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  overflow-x:hidden;
}
[lang="ar"],.ph-ar,.dia-ar,.ar{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:620px;margin:0 auto;padding:18px 16px 96px;}
h1{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.7rem;line-height:1.12;margin:.1em 0 .25em;letter-spacing:-.01em;}
h3{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.16rem;margin:0 0 .4em;color:var(--ink);}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-d);margin:0 0 2px;}
.lead{font-size:.92rem;color:var(--ink-soft);margin:.1em 0 .9em;}

/* top bar */
.ytop{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.yback{width:38px;height:38px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1.1rem;flex:none;}
.ytop h2{font-family:"Fraunces",Georgia,serif;font-size:1.15rem;margin:0;flex:1;}
.ychip{font-size:.74rem;font-weight:700;color:var(--teal-d);background:var(--teal-t);border:1px solid #CFE3DE;border-radius:999px;padding:5px 11px;}
.ychip b{font-weight:800;}

/* intro */
.intro{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;border-radius:20px;padding:18px;margin-bottom:16px;box-shadow:0 8px 26px rgba(15,110,98,.22);}
.intro-ic{width:62px;height:62px;border-radius:16px;flex:none;background:var(--panel);object-fit:contain;}
.intro-tx .eyebrow{color:#F0D9A0;}
.intro-tx h1{color:#fff;margin-top:0;}
.intro-tx p{font-size:.92rem;line-height:1.5;margin:.2em 0 0;color:rgba(255,255,255,.92);}

/* dialect toggle bar */
.dia-bar{margin:0 -16px 16px;padding:0 16px;}
.dia-lab{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:0 2px 7px;}
.dia-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.dia-row::-webkit-scrollbar{display:none;}
.dia{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:78px;background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:9px 12px;cursor:pointer;font-family:inherit;transition:transform .1s;}
.dia:active{transform:scale(.96);}
.dia-ar{font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.3;}
.dia-en{font-size:.72rem;font-weight:700;color:var(--ink-mute);}
.dia.on{background:linear-gradient(135deg,var(--teal),var(--teal-d));border-color:var(--teal-d);}
.dia.on .dia-ar{color:#fff;} .dia.on .dia-en{color:#F0D9A0;}

/* card */
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 3px 12px rgba(34,48,46,.05);}
.card>h3:first-child{margin-top:0;}

/* phrase row */
.ph{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line-2);}
.ph:last-child{border-bottom:none;padding-bottom:2px;}
.ph-say{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid #CFE3DE;background:var(--teal-t);color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:2px;}
.ph-say svg{width:21px;height:21px;} .ph-say:active{transform:scale(.93);}
.ph-body{flex:1;min-width:0;text-align:right;}
.ph-en{font-size:.86rem;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;}
.ph-univ{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-d);background:var(--gold-t);border-radius:999px;padding:2px 7px;}
.ph-ar{font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1.5;margin:1px 0;}
.ph-tr{font-size:.95rem;font-weight:600;color:var(--teal-d);font-style:italic;}
.ph-note{font-size:.8rem;color:var(--ink-mute);margin-top:4px;line-height:1.45;}

/* notes */
.note{background:var(--teal-t);border-left:3px solid var(--teal);border-radius:10px;padding:11px 13px;font-size:.86rem;line-height:1.5;color:var(--ink);margin-top:6px;}
.note.tip{background:var(--gold-t);border-left-color:var(--gold);}
.note.warn{background:#FBE7E2;border-left-color:var(--clay);}
.note b{font-weight:800;}

/* home: brand + module grid */
.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.brand-name{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.5rem;}
.brand-name .ar{font-weight:700;}
.qrow{display:flex;gap:10px;margin-bottom:16px;}
.qcard{flex:1;border-radius:18px;padding:15px 14px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:96px;box-shadow:0 5px 16px rgba(34,48,46,.12);}
.qcard .qic{font-size:1.6rem;} .qcard .qt{font-weight:800;font-size:.98rem;margin-top:8px;}
.q-dia{background:linear-gradient(135deg,var(--gold),var(--gold-d));}
.q-help{background:linear-gradient(135deg,var(--clay),#8E3F2B);}
.q-phr{background:linear-gradient(135deg,var(--teal),var(--teal-d));}

.daily{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:14px;margin-bottom:18px;box-shadow:0 3px 12px rgba(34,48,46,.05);}
.daily-ic{width:46px;height:46px;border-radius:13px;background:var(--gold-t);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:none;}
.daily-tx{flex:1;min-width:0;}
.daily .dl-tag{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);}
.daily .dl-ar{font-size:1.5rem;font-weight:700;color:var(--ink);} 
.daily .dl-tr{font-size:.85rem;color:var(--ink-soft);}

.sec-h{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:6px 2px 10px;}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.mcard{display:flex;align-items:center;gap:11px;border-radius:17px;padding:14px 13px;color:#fff;min-height:84px;box-shadow:0 4px 14px rgba(34,48,46,.1);}
.mcard .mc-ic{width:48px;height:48px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:rgba(255,255,255,.16);}
.mcard .mc-ic img{width:100%;height:100%;object-fit:contain;}
.mc-t{flex:1;min-width:0;}
.mc-t h3{color:#fff;font-size:1rem;margin:0;line-height:1.1;}
.mc-t span{font-size:.72rem;font-weight:600;opacity:.9;display:block;margin-top:3px;}
.m-greet{background:linear-gradient(135deg,#0E5C6B,#093F4A);}
.m-num{background:linear-gradient(135deg,#D98A2B,#AE6C1C);}
.m-around{background:linear-gradient(135deg,#2C6E9B,#1F4E72);}
.m-eat{background:linear-gradient(135deg,#C24B33,#8E3F2B);}
.m-shop{background:linear-gradient(135deg,#7A3F62,#5A2F49);}
.m-help{background:linear-gradient(135deg,#3C4E8A,#2A3A6B);}
.m-talk{background:linear-gradient(135deg,#2D8A8A,#1E6E6E);}
.m-stay{background:linear-gradient(135deg,#5B6FB0,#3F5290);}
.m-see{background:linear-gradient(135deg,#2C8CB0,#1E6E8C);}
.m-time{background:linear-gradient(135deg,#7A5AA0,#5A3F80);}
.m-culture{background:linear-gradient(135deg,#B07A2E,#8A5E1E);}
.m-family{background:linear-gradient(135deg,#B5527A,#8E3A5E);}
.m-food{background:linear-gradient(135deg,#C86A2C,#9E4E1C);}
.m-connect{background:linear-gradient(135deg,#3E7C8A,#2A5662);}
.m-words{background:linear-gradient(135deg,#6E8A4E,#516B38);}

/* which-arabic dialect cards */
.dcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:12px;box-shadow:0 3px 12px rgba(34,48,46,.05);}
.dcard-h{display:flex;align-items:baseline;gap:10px;margin-bottom:5px;}
.dcard-ar{font-size:1.5rem;font-weight:700;color:var(--teal-d);}
.dcard-en{font-size:1.05rem;font-weight:800;}
.dcard-where{font-size:.78rem;color:var(--ink-mute);font-weight:700;margin-left:auto;}
.dcard p{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin:.2em 0 0;}

/* splash */
.splash{position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,#0E5C6B 0%,#093F4A 60%,#08382F 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;transition:opacity .45s;}
.splash.hide{opacity:0;pointer-events:none;}
.splash-star{width:120px;height:120px;margin-bottom:18px;}
.splash-ar{font-size:4rem;font-weight:700;color:#F2D58A;line-height:1;margin-bottom:2px;}
.splash-en{font-family:"Fraunces",Georgia,serif;font-size:2.1rem;font-weight:700;color:#fff;letter-spacing:.02em;}
.splash-tag{color:rgba(255,255,255,.82);font-size:.98rem;margin-top:12px;max-width:300px;}
.splash-cities{color:#F2D58A;font-size:.8rem;font-weight:700;letter-spacing:.05em;margin-top:6px;}
.splash-go{margin-top:26px;background:#F2D58A;color:#093F4A;border:none;border-radius:999px;padding:13px 38px;font-weight:800;font-size:1rem;font-family:inherit;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25);}

/* bottom nav */
.ynav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,253,248,.96);backdrop-filter:saturate(1.4) blur(8px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:7px 6px calc(7px + env(safe-area-inset-bottom,0));z-index:500;}
.ynav a{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink-mute);font-weight:700;flex:1;}
.ynav a .yn-ic{font-size:1.25rem;line-height:1.1;filter:grayscale(.2);}
.ynav a small{font-size:.66rem;}
.ynav a.on{color:var(--teal-d);}
.ynav a.on .yn-ic{filter:none;}

/* ---- saved button on phrase cards ---- */
.ph-save{flex:none;width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--ink-mute);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:2px;}
.ph-save svg{width:19px;height:19px;}
.ph-save.on{color:var(--gold-d);} .ph-save.on svg{fill:var(--gold);}
.ph-save:active{transform:scale(.9);}
.ph-mod{font-size:.62rem;font-weight:700;color:var(--ink-mute);background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;padding:2px 8px;}

/* ---- search & saved ---- */
.search-box{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;font-size:1.05rem;font-family:inherit;background:var(--panel);color:var(--ink);}
.search-box:focus{outline:none;border-color:var(--teal);}
.search-meta{font-size:.8rem;color:var(--ink-mute);margin:10px 2px 12px;}
.empty{text-align:center;color:var(--ink-mute);padding:34px 20px;}
.empty-ic{font-size:2.4rem;display:block;margin-bottom:10px;}
.empty a{color:var(--gold-d);font-weight:800;}

/* ---- flashcards ---- */
.fc-progress{font-size:.82rem;color:var(--ink-mute);font-weight:700;margin-bottom:12px;text-align:center;}
.fc-card{width:100%;min-height:290px;background:var(--panel);border:1.5px solid var(--line);border-radius:22px;box-shadow:0 8px 26px rgba(34,48,46,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 22px;cursor:pointer;position:relative;}
.fc-tap{position:absolute;top:14px;left:0;right:0;font-size:.72rem;color:var(--ink-mute);font-weight:600;}
.fc-ar{font-size:2.6rem;font-weight:700;color:var(--ink);line-height:1.5;}
.fc-en{font-size:1.2rem;font-weight:800;color:var(--teal-d);margin-bottom:6px;}
.fc-tr{font-size:1.1rem;font-style:italic;color:var(--ink-soft);}
.fc-mod{font-size:.72rem;color:var(--ink-mute);margin-top:12px;}
.fc-hidden{opacity:.2;}
.fc-say{margin-top:16px;width:54px;height:54px;border-radius:50%;border:1.5px solid #CFE3DE;background:var(--teal-t);color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.fc-say svg{width:26px;height:26px;}
.fc-controls{display:flex;gap:10px;margin-top:18px;width:100%;}
.fc-controls button{flex:1;border:none;border-radius:13px;padding:14px;font-weight:800;font-size:.95rem;font-family:inherit;cursor:pointer;}
.fc-again{background:var(--panel-2);border:1.5px solid var(--line)!important;color:var(--ink-soft);}
.fc-next{background:var(--teal);color:#fff;}

/* ---- alphabet & numerals ---- */
.alpha-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.alpha-cell{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 6px 10px;text-align:center;}
.alpha-letter{font-size:2rem;font-weight:700;color:var(--teal-d);line-height:1.4;}
.alpha-name{font-size:.8rem;font-weight:700;color:var(--ink);margin-top:3px;}
.alpha-sound{font-size:.72rem;color:var(--ink-mute);}
.num-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.num-cell{background:var(--gold-t);border-radius:12px;padding:10px 4px;text-align:center;}
.num-ar{font-size:1.8rem;font-weight:700;color:var(--gold-d);}
.num-en{font-size:.82rem;font-weight:700;color:var(--ink);}

/* ---- panic card ---- */
.panic-card{background:#fff;border:2px solid var(--clay);border-radius:18px;padding:15px 16px;margin-bottom:11px;display:flex;align-items:center;gap:12px;}
.panic-card .pc-say{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid #E7C3B8;background:#FBE7E2;color:var(--clay);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.panic-card .pc-say svg{width:22px;height:22px;}
.panic-ar{font-size:1.8rem;font-weight:800;color:#13202E;line-height:1.5;}
.panic-en{font-size:.85rem;font-weight:800;color:var(--clay);text-transform:uppercase;letter-spacing:.03em;}
.panic-tr{font-size:.95rem;font-style:italic;color:var(--ink-soft);}
.m-script{background:linear-gradient(135deg,#566B8C,#3C4E6E);}
.m-signs{background:linear-gradient(135deg,#7E6A3A,#5E4E28);}
.m-review{background:linear-gradient(135deg,#2E8A6E,#1E6E54);}
.m-panic{background:linear-gradient(135deg,#C0432B,#8E2E1E);}

/* ---- module nav: jump drawer + next-up ---- */
.jump-fab{position:fixed;right:15px;bottom:calc(82px + env(safe-area-inset-bottom,0));width:50px;height:50px;border-radius:50%;background:var(--teal);color:#fff;border:none;box-shadow:0 6px 18px rgba(15,110,98,.42);display:flex;align-items:center;justify-content:center;z-index:600;cursor:pointer;}
.jump-fab svg{width:23px;height:23px;} .jump-fab:active{transform:scale(.92);}
.jump-ov{position:fixed;inset:0;background:rgba(18,32,46,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:700;}
.jump-ov.open{opacity:1;pointer-events:auto;}
.jump-sheet{position:fixed;left:0;right:0;bottom:0;max-height:80vh;overflow-y:auto;background:var(--panel);border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.28);transform:translateY(102%);transition:transform .3s;z-index:701;padding:10px 16px calc(22px + env(safe-area-inset-bottom,0));}
.jump-sheet.open{transform:translateY(0);}
.jump-grip{width:40px;height:4px;background:var(--line);border-radius:2px;margin:6px auto 10px;}
.jump-h{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.1rem;margin-bottom:6px;}
.jump-sec{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:13px 2px 5px;}
.jump-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 10px;border-radius:11px;font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer;background:none;border:none;font-family:inherit;}
.jump-row span{font-size:1.15rem;width:26px;text-align:center;flex:none;}
.jump-row:active{background:var(--panel-2);}
.jump-row.on{background:var(--teal-t);color:var(--teal-d);font-weight:800;}
.nextup{display:flex;flex-direction:column;gap:2px;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;border-radius:16px;padding:15px 18px;margin-top:8px;box-shadow:0 5px 16px rgba(15,110,98,.22);}
.nu-lab{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#F0D9A0;}
.nu-name{font-size:1.1rem;font-weight:800;}

/* ---- practice modes ---- */
.q-stage{background:var(--panel);border:1.5px solid var(--line);border-radius:20px;padding:22px 18px;text-align:center;margin-bottom:14px;box-shadow:0 4px 14px rgba(34,48,46,.06);}
.q-prompt-lab{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px;}
.q-prompt{font-size:1.7rem;font-weight:800;color:var(--ink);line-height:1.5;}
.q-prompt.ar{font-size:2.3rem;}
.q-opts{display:grid;gap:9px;margin-bottom:12px;}
.q-opt{background:var(--panel);border:1.5px solid var(--line-2);border-radius:14px;padding:14px 15px;font-size:1.25rem;font-family:inherit;cursor:pointer;text-align:center;color:var(--ink);}
.q-opt.ar{font-weight:700;} .q-opt .qo-tr{font-size:.8rem;color:var(--ink-mute);font-style:italic;display:block;margin-top:3px;}
.q-opt:active{transform:scale(.98);}
.q-opt.good{background:#E7F5EC;border-color:#37A06A;color:#1E6E54;}
.q-opt.bad{background:#FBE7E2;border-color:var(--clay);color:var(--clay);}
.q-bar{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-bottom:10px;}
.q-bar .qb-streak{color:var(--gold-d);}
.q-next{width:100%;background:var(--teal);color:#fff;border:none;border-radius:14px;padding:14px;font-weight:800;font-size:1rem;font-family:inherit;cursor:pointer;}
.q-play{margin:8px auto;width:74px;height:74px;border-radius:50%;border:none;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(15,110,98,.35);}
.q-play svg{width:34px;height:34px;} .q-play:active{transform:scale(.95);}
.q-replay{background:none;border:none;color:var(--teal-d);font-weight:700;font-size:.85rem;cursor:pointer;font-family:inherit;margin-top:4px;}
.q-fb{text-align:center;font-weight:800;min-height:1.3em;margin-bottom:8px;}

/* reflex */
.rf-timer{font-size:2.2rem;font-weight:800;color:var(--teal-d);text-align:center;}
.rf-count{text-align:center;color:var(--ink-soft);font-weight:700;margin-bottom:10px;}
.rf-controls{display:flex;gap:10px;margin-top:14px;}
.rf-controls button{flex:1;border:none;border-radius:13px;padding:14px;font-weight:800;font-family:inherit;cursor:pointer;font-size:.95rem;}
.rf-miss{background:var(--panel-2);border:1.5px solid var(--line)!important;color:var(--ink-soft);}
.rf-got{background:#2E8A6E;color:#fff;}
.rf-start{width:100%;background:var(--teal);color:#fff;border:none;border-radius:14px;padding:15px;font-weight:800;font-size:1.05rem;font-family:inherit;cursor:pointer;}

/* scenarios */
.scn-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:11px;display:flex;align-items:center;gap:12px;cursor:pointer;}
.scn-ic{font-size:1.7rem;}.scn-card h3{margin:0;font-size:1.02rem;}.scn-card p{margin:2px 0 0;font-size:.82rem;color:var(--ink-mute);}
.line{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start;}
.line.them{flex-direction:row-reverse;}
.line-b{flex:1;background:var(--panel-2);border:1px solid var(--line-2);border-radius:14px;padding:10px 13px;}
.line.you .line-b{background:var(--teal-t);border-color:#CFE3DE;}
.line-who{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:3px;}
.line.you .line-who{color:var(--teal-d);}
.line-ar{font-size:1.5rem;font-weight:700;color:var(--ink);}
.line-tr{font-size:.86rem;font-style:italic;color:var(--ink-soft);}
.line-en{font-size:.82rem;color:var(--ink-mute);margin-top:2px;}
.line-say{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid #CFE3DE;background:#fff;color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:2px;}
.line-say svg{width:18px;height:18px;}

/* missions */
.mish{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1.5px solid var(--line-2);border-radius:14px;padding:13px;margin-bottom:9px;cursor:pointer;}
.mish.done{background:var(--teal-t);border-color:#CFE3DE;}
.mish-box{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;margin-top:1px;}
.mish.done .mish-box{background:var(--teal);border-color:var(--teal);}
.mish-t{font-weight:700;color:var(--ink);}.mish.done .mish-t{color:var(--teal-d);}
.mish-h{font-size:.82rem;color:var(--ink-mute);margin-top:2px;}
.mish-prog{height:9px;background:var(--line-2);border-radius:6px;overflow:hidden;margin:4px 2px 16px;}
.mish-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .3s;}
.m-quiz{background:linear-gradient(135deg,#7A5AA0,#5A3F80);}
.m-listen{background:linear-gradient(135deg,#2C6E9B,#1F4E72);}
.m-reflex{background:linear-gradient(135deg,#C86A2C,#9E4E1C);}
.m-scenario{background:linear-gradient(135deg,#2E8A6E,#1E6E54);}
.m-mission{background:linear-gradient(135deg,#B07A2E,#8A5E1E);}

/* ===== explore features ===== */
/* arabizi */
.az-out{background:var(--teal-t);border:1.5px solid #CFE3DE;border-radius:16px;padding:16px;text-align:center;margin:10px 0;min-height:54px;display:flex;align-items:center;justify-content:center;gap:12px;}
.az-ar{font-size:2rem;font-weight:700;color:var(--ink);direction:rtl;}
.az-hint{color:var(--ink-mute);font-style:italic;}
.az-say{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid #CFE3DE;background:#fff;color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.az-say svg{width:19px;height:19px;}
.az-key{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;}
.az-cell{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 4px;text-align:center;}
.az-num{font-size:1.3rem;font-weight:800;color:var(--clay);}
.az-let{font-size:1.4rem;font-weight:700;color:var(--teal-d);direction:rtl;}
.az-snd{font-size:.7rem;color:var(--ink-mute);}
.az-ex{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-2);}
.az-ex code{background:var(--panel-2);border-radius:6px;padding:2px 8px;font-weight:700;color:var(--clay);font-family:ui-monospace,monospace;}
.az-ex b{font-size:1.3rem;direction:rtl;}
.az-ex span{color:var(--ink-mute);font-size:.85rem;margin-left:auto;}
/* compare */
.cmp-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 14px 8px;margin-bottom:13px;}
.cmp-en{font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:6px;}
.cmp-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-2);}
.cmp-lab{flex:none;width:72px;font-size:.72rem;font-weight:800;color:var(--ink-mute);text-transform:uppercase;}
.cmp-body{flex:1;}
.cmp-ar{font-size:1.4rem;font-weight:700;color:var(--ink);direction:rtl;}
.cmp-tr{font-size:.8rem;font-style:italic;color:var(--ink-soft);}
.cmp-say{flex:none;width:33px;height:33px;border-radius:50%;border:1.5px solid #CFE3DE;background:var(--teal-t);color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.cmp-say svg{width:16px;height:16px;}
/* roots */
.root-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:13px;}
.root-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.root-glyph{font-size:1.7rem;font-weight:800;color:var(--gold-d);direction:rtl;background:var(--gold-t);border-radius:12px;padding:6px 14px;letter-spacing:4px;}
.root-mean{font-weight:800;color:var(--ink);}
.root-word{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-2);}
.root-w-ar{font-size:1.3rem;font-weight:700;color:var(--ink);direction:rtl;flex:none;min-width:86px;text-align:right;}
.root-w-tr{font-style:italic;color:var(--teal-d);font-size:.88rem;}
.root-w-en{color:var(--ink-mute);font-size:.84rem;margin-left:auto;text-align:right;}
.root-say{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #CFE3DE;background:var(--teal-t);color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.root-say svg{width:15px;height:15px;}
/* sounds */
.snd-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:12px;}
.snd-head{display:flex;align-items:center;gap:12px;}
.snd-glyph{font-size:2.2rem;font-weight:800;color:var(--teal-d);direction:rtl;flex:none;width:50px;text-align:center;}
.snd-name{font-weight:800;}.snd-name small{font-weight:500;color:var(--ink-mute);}
.snd-how{font-size:.9rem;color:var(--ink-soft);margin:8px 0;}
.snd-pair{display:flex;gap:8px;}
.snd-min{flex:1;display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:11px;padding:8px 10px;}
.snd-min b{font-size:1.2rem;direction:rtl;}
.snd-min span{font-size:.76rem;color:var(--ink-mute);}
.snd-say,.bl-say{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid #CFE3DE;background:var(--teal-t);color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.snd-say svg,.bl-say svg{width:16px;height:16px;}
/* blessings */
.bl-pair{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;}
.bl-when{font-size:.82rem;font-weight:700;color:var(--gold-d);margin-bottom:8px;}
.bl-line{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:11px;}
.bl-line.reply{background:var(--teal-t);}
.bl-tag{flex:none;width:42px;font-size:.62rem;font-weight:800;text-transform:uppercase;color:var(--ink-mute);}
.bl-ar{font-size:1.3rem;font-weight:700;direction:rtl;}
.bl-tr{font-size:.8rem;font-style:italic;color:var(--ink-soft);}
.bl-say{background:#fff;margin-left:auto;}
/* loanwords */
.loan-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:9px;}
.loan-en{font-weight:800;color:var(--ink);font-size:1.05rem;}
.loan-from{font-size:.76rem;color:var(--ink-mute);}
.loan-ar{margin-left:auto;text-align:right;cursor:pointer;}
.loan-ar b{font-size:1.35rem;color:var(--teal-d);direction:rtl;display:block;}
.loan-ar span{font-size:.76rem;font-style:italic;color:var(--ink-soft);}
/* gestures */
.gest-card{display:flex;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;}
.gest-ic{font-size:2rem;flex:none;line-height:1.2;}
.gest-t{font-weight:800;color:var(--ink);}
.gest-d{font-size:.9rem;color:var(--ink-soft);margin-top:2px;}
.gest-m{font-size:.82rem;color:var(--ink-mute);margin-top:4px;}
/* explore tile accents */
.m-arabizi{background:linear-gradient(135deg,#C0432B,#8E2E1E);}
.m-compare{background:linear-gradient(135deg,#0E5C6B,#093F4A);}
.m-roots{background:linear-gradient(135deg,#8A6E2E,#6A521E);}
.m-sounds{background:linear-gradient(135deg,#7A5AA0,#5A3F80);}
.m-loan{background:linear-gradient(135deg,#2C6E9B,#1F4E72);}
.m-bless{background:linear-gradient(135deg,#2E8A6E,#1E6E54);}
.m-ramadan{background:linear-gradient(135deg,#7A4E8C,#5A3468);}
.m-eye{background:linear-gradient(135deg,#3E7C8A,#2A5662);}
.m-gest{background:linear-gradient(135deg,#C24B33,#8A3E2A);}

/* clear the fixed bottom nav so the last element (and next-up card) is never hidden */
body{padding-bottom:calc(90px + env(safe-area-inset-bottom,0));}
.nextup{margin-bottom:6px;}
.nextup{padding-right:74px;}

/* ===== root lab ===== */
.rb{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:14px 14px 16px;margin-bottom:14px;}
.rb-h{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);margin:8px 2px 7px;}
.rb-chips{display:flex;flex-wrap:wrap;gap:7px;}
.rb-chip{border:1.5px solid var(--line-2);background:var(--panel-2);border-radius:12px;padding:7px 11px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.25;min-width:58px;}
.rb-chip .rc-ar{font-size:1.1rem;color:var(--ink);direction:rtl;letter-spacing:3px;font-weight:700;}
.rb-chip .rc-en{font-size:.66rem;color:var(--ink-mute);font-weight:700;text-transform:capitalize;}
.rb-chip.on{border-color:var(--gold-d);background:var(--gold-t);}
.rb-chip.on .rc-ar{color:var(--gold-d);}
.rb-result{margin-top:15px;background:linear-gradient(135deg,#8A6E2E,#6A521E);border-radius:16px;padding:20px 16px;text-align:center;color:#fff;}
.rb-word{font-size:2.7rem;font-weight:800;direction:rtl;line-height:1.4;}
.rb-tr{font-style:italic;opacity:.92;margin-top:2px;}
.rb-en{font-size:1.15rem;font-weight:800;margin-top:3px;}
.rb-say{margin:12px auto 0;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.rb-say svg{width:23px;height:23px;}
.rb-break{margin-top:13px;font-size:.84rem;color:#F0D9A0;font-weight:700;direction:ltr;}
.rb-break b{color:#fff;font-weight:800;}
.mold-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px;}
.mold-top{display:flex;align-items:baseline;gap:11px;margin-bottom:9px;}
.mold-tmpl{font-size:1.6rem;font-weight:800;color:var(--teal-d);direction:rtl;flex:none;}
.mold-nm{font-weight:800;color:var(--ink);}.mold-nm small{font-weight:500;color:var(--ink-mute);}
.mold-ex{display:flex;flex-wrap:wrap;gap:7px;}
.mold-pill{display:flex;align-items:center;gap:7px;background:var(--panel-2);border-radius:10px;padding:6px 9px;font-size:.84rem;}
.mold-pill b{font-size:1.1rem;direction:rtl;font-weight:700;color:var(--ink);}
.mold-pill>span{color:var(--ink-mute);}
.mold-pill button{border:none;background:none;color:var(--teal-d);cursor:pointer;padding:0;display:flex;align-items:center;}
.mold-pill svg{width:15px;height:15px;}

/* ===== spot the root ===== */
.sr-bar{display:flex;justify-content:space-between;font-weight:700;color:var(--ink-soft);font-size:.86rem;margin-bottom:10px;}
.sr-bar .qb-streak{color:var(--gold-d);}
.sr-stage{background:var(--panel);border:1.5px solid var(--line);border-radius:20px;padding:22px 16px;text-align:center;margin-bottom:14px;box-shadow:0 4px 14px rgba(34,48,46,.06);}
.sr-word{font-size:2.7rem;font-weight:800;direction:rtl;color:var(--ink);line-height:1.4;}
.sr-en{color:var(--ink-mute);margin-top:2px;}
.sr-say{margin:8px auto 0;width:40px;height:40px;border-radius:50%;border:1.5px solid #CFE3DE;background:var(--teal-t);color:var(--teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sr-say svg{width:19px;height:19px;}
.sr-prompt{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-d);margin:16px 0 9px;}
.sr-tiles{display:flex;flex-direction:row-reverse;justify-content:center;flex-wrap:wrap;gap:8px;}
.sr-tile{width:52px;height:60px;border:2px solid var(--line-2);background:var(--panel-2);border-radius:13px;font-size:2rem;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;transition:transform .08s;}
.sr-tile:active{transform:scale(.94);}
.sr-tile.sel{border-color:var(--gold-d);background:var(--gold-t);color:var(--gold-d);}
.sr-tile.good{border-color:#37A06A;background:#E7F5EC;color:#1E6E54;}
.sr-tile.bad{border-color:var(--clay);background:#FBE7E2;color:var(--clay);}
.sr-fb{font-weight:800;min-height:1.3em;margin:14px 0 6px;}
.sr-reveal{display:none;background:var(--gold-t);border-radius:13px;padding:12px 14px;text-align:left;}
.sr-reveal b{font-size:1.25rem;direction:rtl;color:var(--gold-d);}
.sr-reveal span{display:block;color:var(--ink-soft);margin-top:4px;font-size:.88rem;}
.sr-next{width:100%;background:var(--teal);color:#fff;border:none;border-radius:14px;padding:14px;font-weight:800;font-size:1rem;font-family:inherit;cursor:pointer;margin-top:12px;}
.m-spot{background:linear-gradient(135deg,#A86A3C,#7E4A24);}

/* page container: most pages render straight into <body>, so body IS the
   centered, padded column. (.wrap is neutralised — only 3 legacy pages use it.) */
body{max-width:620px;margin:0 auto;padding:18px 16px calc(90px + env(safe-area-inset-bottom,0));}
.wrap{max-width:none;margin:0;padding:0;}


/* phrase card: icons grouped left, text right-aligned to mirror the Arabic */
.ph-icons{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;}
.ph-icons .ph-say{margin-top:0;}
.ph-icons .ph-save{margin-top:0;}
.ph-phon{font-size:.82rem;color:var(--ink-mute);margin-top:1px;}
.ph-note{text-align:right;}

/* All-dialects comparison view + colored dialect pills */
.dia-all.on{background:var(--ink);border-color:var(--ink);}
.dia-all.on .dia-ar,.dia-all.on .dia-en{color:#fff;}
.ph-all .ph-body{text-align:right;}
.ph-var{padding:7px 0 3px;}
.ph-var + .ph-var{border-top:1px dashed var(--line-2);margin-top:5px;}
.ph-var-top{display:flex;align-items:center;justify-content:flex-end;gap:9px;}
.ph-vsay{width:34px;height:34px;flex:none;}
.ph-vsay svg{width:17px;height:17px;}
.ph-pills{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;margin-top:5px;}
.dia-pill{font-size:.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:2px 8px;white-space:nowrap;}
.p-msa{background:var(--teal-t);color:var(--teal-d);}
.p-egy{background:var(--gold-t);color:var(--gold-d);}
.p-lev{background:#E8F0DD;color:#4E6A2E;}
.p-gulf{background:#FBE7E2;color:#C24B33;}
.p-mgh{background:#ECE6F5;color:#6A4C93;}
.p-all{background:var(--ink);color:#FCFAF4;}

/* ===== topic icon tiles (geometric, white glyph) ===== */
.topico{width:100%;height:100%;display:block;}
.mc-ic.has-svg{background:none;}
.mc-ic .topico{filter:drop-shadow(0 3px 6px rgba(34,48,46,.16));}
.intro-ic.has-svg{background:none;}
.intro-ic .topico{width:100%;height:100%;filter:drop-shadow(0 4px 9px rgba(0,0,0,.22));}
.jump-ic{width:30px;height:30px;flex:none;display:inline-flex;vertical-align:middle;margin-right:5px;}
.jump-emo{display:inline-flex;width:30px;justify-content:center;margin-right:5px;}
.nu-ic{width:42px;height:42px;flex:none;}
.nu-tx{display:flex;flex-direction:column;min-width:0;}
.nextup{flex-direction:row;align-items:center;gap:12px;}

/* home dialect picker: 2 rows of 3, fits screen width */
.dia-grid .dia-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;padding-bottom:0;}
.dia-grid .dia{min-width:0;}
.daily{align-items:flex-start;}
.daily .dl-tr{line-height:1.5;margin-top:3px;}

/* ===== homepage topic accordion (concertina) ===== */
.acc-list{display:flex;flex-direction:column;gap:10px;}
.acc{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;box-shadow:0 2px 9px rgba(34,48,46,.045);}
.acc-h{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;}
.acc-h:active{background:rgba(34,48,46,.03);}
.acc-ic{width:40px;height:40px;flex:none;display:block;}
.acc-ic .topico{filter:drop-shadow(0 2px 5px rgba(34,48,46,.16));}
.acc-tt{flex:1;min-width:0;font-size:1.04rem;font-weight:800;color:var(--ink);line-height:1.2;}
.acc-n{flex:none;font-size:.8rem;font-weight:800;color:var(--ink-soft);background:rgba(34,48,46,.07);border-radius:999px;min-width:24px;text-align:center;padding:2px 8px;}
.acc-chev{flex:none;display:flex;color:var(--ink-mute);}
.acc.open .acc-chev{transform:rotate(180deg);}
.acc-p{display:grid;grid-template-rows:0fr;}
.acc.open .acc-p{grid-template-rows:1fr;}
.acc-pi{overflow:hidden;min-height:0;}
.acc-pi .mgrid{padding:3px 12px 14px;}
body.acc-ready .acc-p{transition:grid-template-rows .3s ease;}
body.acc-ready .acc-chev{transition:transform .3s ease;}

/* ===== Twende: Latin-script (LTR) phrase cards ===== */
.ph-body{text-align:left;}
.ph-en{justify-content:flex-start;}
.ph-ar{text-align:left;}
.ph-note{text-align:left;}
.ph-var{text-align:left;}

/* search box */
.sbox{width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:0 2px 8px rgba(30,42,46,.05);}
.sbox:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-t);}

/* ===== scenarios (dialogue) + culture panels ===== */
.scn-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.scn-head h3{margin:0;font-size:1.05rem;}
.scn-set{margin:1px 0 0;font-size:.8rem;color:var(--ink-mute);}
.dlg{display:flex;flex-direction:column;}
.line-say svg{width:18px;height:18px;}
.cul-head{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
.cul-head h3{margin:0;font-size:1.05rem;}
.cul-ic{font-size:1.6rem;flex:none;line-height:1;}
.cul-ph{display:flex;align-items:center;gap:11px;margin-top:12px;background:var(--teal-t);border:1px solid #CFE3DE;border-radius:13px;padding:9px 12px;}
.cul-sw{font-size:1.15rem;font-weight:700;color:var(--ink);}
.cul-en{font-size:.8rem;color:var(--ink-soft);}

/* ===== practice: tabs, quiz, home card ===== */
.seg{display:flex;gap:6px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:13px;padding:4px;margin-bottom:12px;}
.seg button{flex:1;border:none;background:none;font-family:inherit;font-weight:800;font-size:.92rem;color:var(--ink-soft);padding:10px;border-radius:10px;cursor:pointer;}
.seg button.on{background:var(--teal);color:#fff;box-shadow:0 2px 8px rgba(14,92,107,.25);}
.psrc{display:flex;gap:8px;justify-content:center;margin-bottom:16px;}
.psrc button{border:1.5px solid var(--line);background:var(--panel);font-family:inherit;font-weight:700;font-size:.82rem;color:var(--ink-soft);padding:6px 15px;border-radius:999px;cursor:pointer;}
.psrc button.on{border-color:var(--teal);color:var(--teal-d);background:var(--teal-t);}
.qz-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:800;color:var(--ink-mute);font-size:.82rem;}
.qz-q{font-size:1.4rem;font-weight:800;color:var(--ink);text-align:center;margin:6px 0 18px;line-height:1.35;}
.qz-opts{display:flex;flex-direction:column;gap:10px;}
.qz-opt{border:1.5px solid var(--line);background:var(--panel);border-radius:14px;padding:15px 16px;font-family:inherit;font-size:1.18rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;transition:transform .08s;}
.qz-opt:active{transform:scale(.99);}
.qz-opt.correct{border-color:#2E8B57;background:#E7F4EC;color:#1E6B40;}
.qz-opt.wrong{border-color:var(--clay);background:#F7E7E2;color:#9E3B27;}
.qz-next{margin-top:16px;width:100%;border:none;border-radius:13px;padding:15px;font-weight:800;font-size:1rem;font-family:inherit;background:var(--teal);color:#fff;cursor:pointer;}
.pdone{text-align:center;padding:34px 10px;}
.pdone .big{font-size:2.6rem;font-weight:800;color:var(--teal-d);margin-bottom:4px;}
.pcard{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;border-radius:18px;padding:16px 18px;margin:2px 0 16px;box-shadow:0 8px 22px rgba(14,92,107,.25);text-decoration:none;}
.pcard-ic{font-size:1.9rem;line-height:1;}
.pcard-tx{flex:1;}
.pcard-tx h3{margin:0;color:#fff;font-size:1.15rem;}
.pcard-tx span{font-size:.85rem;color:rgba(255,255,255,.92);}
.pcard-go{font-size:1.4rem;font-weight:800;opacity:.9;}