/* ==========================================================
 * MOYAMOVA 1.12.3 — Mobile Prepositions Trainer
 * Mobile presentation only. Desktop Prepositions remains unchanged.
 * ========================================================== */

@media (max-width:899px){
  html[data-mobile-shell="prepositions"]{
    --footer-h-actual:0px;
  }

  html[data-mobile-shell="prepositions"] .header,
  html[data-mobile-shell="prepositions"] .app-footer{
    display:none!important;
  }

  html[data-mobile-shell="prepositions"] #app.content{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:var(--mobile-viewport-height)!important;
    padding:
      max(8px,var(--mobile-safe-top,0px))
      max(10px,var(--mobile-safe-right,0px))
      calc(18px + var(--mobile-safe-bottom,0px))
      max(10px,var(--mobile-safe-left,0px))!important;
    overflow:visible!important;
    box-sizing:border-box;
  }

  html[data-mobile-shell="prepositions"] .trainer-desktop-shell{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html[data-mobile-shell="prepositions"] .trainer-side,
  html[data-mobile-shell="prepositions"] .preps-desktop-head,
  html[data-mobile-shell="prepositions"] .articles-desktop-head,
  html[data-mobile-shell="prepositions"] .home-sets,
  html[data-mobile-shell="prepositions"] .mm-context-gap,
  html[data-mobile-shell="prepositions"] .home-hints,
  html[data-mobile-shell="prepositions"] .home-filters{
    display:none!important;
  }

  /* Hide only the legacy Auto / Reverse / Focus / TTS bar above the card.
     The new .preps-mobile-tools bar below the card remains visible. */
  html[data-mobile-shell="prepositions"] .trainer-quickbar:not(.preps-mobile-tools){
    display:none!important;
  }

  html[data-mobile-shell="prepositions"] .trainer-desktop-main{
    width:100%!important;
    max-width:560px!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:0!important;
  }

  .mobile-preps-bar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 44px;
    align-items:center;
    gap:8px;
    min-height:52px;
    margin:0 0 10px;
  }

  .mobile-preps-back{
    min-width:0;
    height:44px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    justify-self:start;
    padding:0 12px 0 10px;
    border:1px solid rgba(69,88,165,.12);
    border-radius:14px;
    background:rgba(255,255,255,.78);
    color:inherit;
    box-shadow:0 5px 18px rgba(44,55,112,.06);
    font:inherit;
    font-size:12px;
    font-weight:750;
  }

  .mobile-preps-back__arrow{
    font-size:20px;
    line-height:1;
    transform:translateY(-1px);
  }

  .mobile-preps-title{
    min-width:0;
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-size:13px;
    font-weight:800;
  }

  .mobile-preps-menu{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid rgba(69,88,165,.12);
    border-radius:14px;
    background:rgba(255,255,255,.78);
    color:inherit;
    box-shadow:0 5px 18px rgba(44,55,112,.06);
    font:inherit;
    font-size:18px;
    font-weight:800;
    letter-spacing:1px;
  }

  html[data-theme="dark"][data-mobile-shell="prepositions"] .mobile-preps-back,
  html[data-theme="dark"][data-mobile-shell="prepositions"] .mobile-preps-menu,
  html.dark[data-mobile-shell="prepositions"] .mobile-preps-back,
  html.dark[data-mobile-shell="prepositions"] .mobile-preps-menu{
    background:rgba(24,36,52,.92);
    border-color:rgba(142,166,215,.16);
    box-shadow:none;
  }

  html[data-mobile-shell="prepositions"] .trainer-desktop-main>.home{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  /* Main exercise card — same mobile language as Words/Articles. */
  html[data-mobile-shell="prepositions"] .home-trainer.home-trainer--preps{
    order:1!important;
    position:relative!important;
    min-height:0!important;
    margin:0!important;
    padding:12px 10px 11px!important;
    border-radius:18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    box-shadow:0 10px 30px rgba(32,46,96,.075)!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .trainer-top{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-height:40px!important;
    margin:0!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .trainer-mode-indicator{
    display:grid!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    padding:0!important;
    place-items:center!important;
    border:1px solid rgba(69,88,165,.14)!important;
    border-radius:12px!important;
    background:rgba(247,249,255,.92)!important;
    font-size:18px!important;
    line-height:1!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .trainer-stars{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    margin:0!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .heart{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:38px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .trainer-audio-btn{
    display:none!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .trainer-word{
    margin:20px auto 4px!important;
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
    font-size:clamp(24px,6.9vw,31px)!important;
    line-height:1.28!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .trainer-subtitle{
    margin:5px 0 9px!important;
    text-align:center!important;
    font-size:11.5px!important;
    opacity:.62!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:3px 0 6px!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn{
    width:100%!important;
    min-width:0!important;
    min-height:82px!important;
    height:82px!important;
    padding:9px 8px!important;
    border:1px solid #dfe7f0!important;
    border-radius:15px!important;
    background:#f8fbff!important;
    color:#1c2637!important;
    box-shadow:none!important;
    font-size:22px!important;
    font-weight:800!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn.is-correct{
    background:#e7f8ef!important;
    border-color:#24b86b!important;
    color:#127341!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn.is-wrong{
    background:#fff0f1!important;
    border-color:#ef4f62!important;
    color:#b82d3d!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn.is-dim{
    opacity:.42!important;
  }

  html[data-mobile-shell="prepositions"] .home-trainer--preps .idk-btn,
  html[data-mobile-shell="prepositions"] .home-trainer--preps .dict-stats{
    display:none!important;
  }

  /* Mobile-only utility bar: TTS / Skip / Reveal. */
  .preps-mobile-tools.trainer-quickbar{
    order:2!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin:0!important;
    padding:7px!important;
    border-radius:15px!important;
    box-sizing:border-box!important;
  }

  .preps-mobile-tools .trainer-qbtn{
    min-width:0!important;
    height:48px!important;
    padding:4px 3px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
  }

  .preps-mobile-tools .trainer-qico{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    display:grid!important;
    place-items:center!important;
    font-size:13px!important;
  }

  .preps-mobile-tools .trainer-qlabel{
    display:block!important;
    line-height:1.05!important;
  }

  .preps-mobile-tools .trainer-qbtn.is-active{
    background:rgba(14,165,233,.08)!important;
  }

  .preps-mobile-tools .trainer-qbtn.is-active .qico-word{
    box-shadow:inset 0 0 0 1px currentColor!important;
  }

  /* Shared migrated bottom sheet. */
  html[data-mobile-shell="prepositions"] .oc-root{
    inset:0;
    max-height:var(--mobile-viewport-height);
  }

  html[data-mobile-shell="prepositions"] .oc-overlay{
    inset:0!important;
    background:rgba(12,20,38,.30);
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html[data-mobile-shell="prepositions"] .oc-panel{
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:max(8px,var(--mobile-safe-bottom,0px))!important;
    width:auto!important;
    min-width:0!important;
    max-width:560px!important;
    max-height:min(82dvh,calc(var(--mobile-viewport-height) - 24px));
    margin:0 auto;
    border-radius:22px;
    overflow:hidden;
    transform:translateY(calc(100% + 28px))!important;
    transition:transform .22s ease!important;
  }

  html[data-mobile-shell="prepositions"] body.menu-open .oc-panel{
    transform:translateY(0)!important;
  }

  html[data-mobile-shell="prepositions"] .oc-back{
    display:none!important;
  }

  html[data-mobile-shell="prepositions"] .oc-body{
    display:block!important;
    min-height:0;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding:10px 12px calc(82px + var(--mobile-safe-bottom,0px))!important;
  }

  html[data-theme="dark"][data-mobile-shell="prepositions"] .home-trainer--preps .trainer-mode-indicator,
  html.dark[data-mobile-shell="prepositions"] .home-trainer--preps .trainer-mode-indicator{
    background:#162231!important;
    border-color:rgba(135,157,204,.16)!important;
  }

  html[data-theme="dark"][data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn,
  html.dark[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn{
    background:#162231!important;
    border-color:rgba(135,157,204,.16)!important;
    color:#edf4fb!important;
  }

  html[data-theme="dark"][data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn.is-correct,
  html.dark[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn.is-correct{
    background:#123c31!important;
    border-color:#25c17e!important;
    color:#56e6a6!important;
  }

  html[data-theme="dark"][data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn.is-wrong,
  html.dark[data-mobile-shell="prepositions"] .home-trainer--preps .answers-grid .answer-btn.is-wrong{
    background:#48252b!important;
    border-color:#ff5059!important;
    color:#ff7b82!important;
  }
}

@media(max-width:390px){
  html[data-mobile-shell="prepositions"] .mobile-preps-title{
    display:none;
  }
  html[data-mobile-shell="prepositions"] .mobile-preps-bar{
    grid-template-columns:minmax(0,1fr) 44px;
  }
}


/* MOYAMOVA 1.12.10 — match the vertical rhythm of Words / Articles.
   Their sets panel occupies this visual band; Prepositions intentionally leaves it calm. */
@media (max-width:899px){
  html[data-mobile-shell="prepositions"] .trainer-desktop-main>.home{
    padding-top:58px!important;
  }
}