.current-language-flag{width:25px;height:17px;object-fit:cover;border-radius:2px;vertical-align:middle;box-shadow:0 0 0 1px #0002}

/* Compact icon controls: same footprint on desktop and phone without changing content buttons. */
.compact-toolbar{gap:6px;align-items:center}
.compact-toolbar .voice-control{display:inline-flex}
button.compact-control{
  width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
  padding:0!important;border-radius:9px!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;font-size:18px!important;line-height:1!important;white-space:nowrap!important;
}
#langBtn .current-language-flag{width:23px;height:16px;margin:auto}
.nav-controls{gap:7px!important;flex-wrap:nowrap!important}
.nav-controls .arrow,.nav-controls .nav-btn,.nav-controls .nav-play{
  width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;
  border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
.nav-controls .arrow{font-size:30px!important}.nav-controls .nav-btn{font-size:21px!important}
.nav-play{font-size:20px;font-weight:900;background:var(--primary,#1976d2);color:#fff;border:0;box-shadow:inset 0 0 0 2px #ffffff38}
.nav-play.playing{background:#fff!important;color:#1677f2!important}
#mixBtn,#searchBtn,#shareBtn,#studyToggleBtn{width:40px!important;min-width:40px!important;height:36px!important;min-height:36px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:17px!important}
@media(max-width:560px){
  .compact-toolbar{gap:5px}
  button.compact-control{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;font-size:16px!important}
  #langBtn .current-language-flag{width:21px;height:14px}
  .nav-controls{gap:5px!important}
  .nav-controls .arrow,.nav-controls .nav-btn,.nav-controls .nav-play{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
  .nav-controls .arrow{font-size:27px!important}.nav-controls .nav-btn{font-size:19px!important}.nav-play{font-size:18px!important}
  #mixBtn,#searchBtn,#shareBtn,#studyToggleBtn{width:36px!important;min-width:36px!important;height:34px!important;min-height:34px!important}
}

/* 2026-09-05 mobile-first control and phoneme layout refresh */
.top-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.top-title-row h1{margin:0}.menu-toggle{flex:0 0 auto}.compact-toolbar{margin-top:12px;max-height:90px;overflow:hidden;opacity:1;transition:max-height .22s ease,opacity .18s ease,margin .22s ease}.compact-toolbar.toolbar-hidden{max-height:0;opacity:0;margin-top:0;pointer-events:none}.hero{display:block!important;padding:22px!important}.image-panel{width:100%;max-width:760px;margin:auto}.imgbox{width:min(100%,520px);min-height:260px;margin:auto}.imgbox img{max-height:330px}.nav-controls{width:100%;margin:4px auto 0;justify-content:center}.nav-controls .arrow,.nav-controls .nav-btn,.nav-controls .nav-play{background:#fff!important;color:#1677f2!important;border:1px solid #d8e1ee!important;box-shadow:0 5px 14px #00000012!important}.nav-controls .nav-play{width:72px!important;min-width:72px!important;height:72px!important;min-height:72px!important;background:#fff!important;color:#1677f2!important;box-shadow:0 0 18px #8db6ff66!important;font-size:32px!important}.nav-controls .arrow,.nav-controls .nav-btn{width:58px!important;min-width:58px!important;height:58px!important;min-height:58px!important;font-size:25px!important}.details{width:min(100%,620px);margin:8px auto 0;text-align:center}.details .meta{display:inline-block;margin:2px 7px 6px}.details .ipa{font-size:54px;margin:5px 0 8px}.details .pill{margin:4px}.search-controls{margin-top:10px}.search-controls input{max-width:100%;width:min(100%,420px)}
@media(max-width:560px){.wrap{padding:8px}.top{padding:12px;margin-bottom:10px}.top-title-row h1{font-size:25px}.hero{padding:12px 10px!important}.imgbox{min-height:210px;width:100%}.imgbox img{max-height:260px}.nav-controls{gap:8px!important;overflow:visible}.nav-controls .arrow,.nav-controls .nav-btn{width:50px!important;min-width:50px!important;height:50px!important;min-height:50px!important;font-size:22px!important}.nav-controls .nav-play{width:64px!important;min-width:64px!important;height:64px!important;min-height:64px!important;font-size:28px!important}.details .ipa{font-size:48px}.details .pill{font-size:16px;padding:8px 11px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.word{min-width:0;font-size:18px;overflow-wrap:anywhere}.search-controls input{min-width:0}}
@media(max-width:360px){.nav-controls{gap:5px!important}.nav-controls .arrow,.nav-controls .nav-btn{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}.nav-controls .nav-play{width:58px!important;min-width:58px!important;height:58px!important;min-height:58px!important}.top-title-row h1{font-size:22px}}

/* 2026-09-05: PWA install state + mobile viewport stability. */
#installBtn[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:hidden}
#mainToolbar{max-width:100%}

/* En teléfonos, el árabe conserva la interfaz física de izquierda a derecha para evitar
   desplazamientos/zoom horizontal. El texto árabe mantiene su lectura RTL dentro de sus bloques. */
@media(max-width:560px){
  html.mobile-arabic-ltr,html.mobile-arabic-ltr body{direction:ltr!important;max-width:100%;overflow-x:hidden}
  html.mobile-arabic-ltr .wrap,html.mobile-arabic-ltr .top,html.mobile-arabic-ltr .hero,
  html.mobile-arabic-ltr .study,html.mobile-arabic-ltr .sections,html.mobile-arabic-ltr .grid,
  html.mobile-arabic-ltr .buttons,html.mobile-arabic-ltr .nav-controls,html.mobile-arabic-ltr .search-controls{
    direction:ltr!important;
  }
  html.mobile-arabic-ltr .details,html.mobile-arabic-ltr .study-body,html.mobile-arabic-ltr .info,
  html.mobile-arabic-ltr .modal-card,html.mobile-arabic-ltr .word{
    unicode-bidi:plaintext;
  }
}