/* Compact, native-feeling presentation for the Android WebView shell. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.android-webview,
html.android-webview body {
  overscroll-behavior: none;
}

/* The Android shell keeps the document viewport fixed. Admin therefore owns
   one explicit vertical scroller, just like Home and the lesson surface. */
html.android-webview body.admin-mode {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

html.android-webview body.admin-mode #adminPanel {
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 600px) {
  html.android-webview .app-header {
    --native-header-side: 44px;
    display: grid;
    grid-template-columns: var(--native-header-side) minmax(0, 1fr) var(--native-header-side);
    column-gap: 8px;
    height: 52px;
    padding-inline: 10px;
    box-shadow: 0 2px 10px rgba(58, 78, 251, 0.18);
    transition-duration: 180ms;
  }

  html.android-webview[data-app-utility-count="2"] .app-header {
    --native-header-side: 94px;
  }

  html.android-webview[data-app-utility-count="3"] .app-header {
    --native-header-side: 144px;
  }

  html.android-webview .header-left,
  html.android-webview .header-right {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  html.android-webview .header-center {
    min-width: 0;
    overflow: hidden;
  }

  html.android-webview .header-right {
    box-sizing: border-box;
  }

  html.android-webview[data-app-profile-visible="true"] .header-right {
    padding-right: 50px;
  }

  html.android-webview .profile-btn {
    top: calc(env(safe-area-inset-top, 0px) + 5px);
    right: 10px;
  }

  html.android-webview .admin-entry {
    top: calc(env(safe-area-inset-top, 0px) + 5px);
    right: 10px;
  }

  html.android-webview[data-app-profile-visible="true"] .admin-entry,
  html.android-webview[data-app-menu-visible="true"] .admin-entry {
    right: 60px;
  }

  html.android-webview[data-app-profile-visible="true"][data-app-menu-visible="true"] .admin-entry {
    right: 110px;
  }

  html.android-webview .header-btn {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  html.android-webview .chapter-status {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    font-size: 13px;
  }

  html.android-webview body.app-mode {
    padding-top: 52px;
  }

  html.android-webview body.app-mode #home {
    height: calc(100dvh - 52px);
    padding: 22px 14px max(24px, env(safe-area-inset-bottom, 0px));
    justify-content: flex-start;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  /* The remote promo iframe is unreliable in Android WebView and used to
     reserve a tall blank rectangle. The native shell starts with real actions. */
  html.android-webview body.app-mode #home .home-promo-shell {
    display: none;
  }

  html.android-webview body.app-mode #home > .home-actions {
    width: min(100%, 332px);
    max-width: calc(100vw - 28px);
    margin-block: auto;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 9px;
  }

  html.android-webview[data-app-transition] :is(
    #adminEntryBtn,
    #profileBtn,
    .app-header button,
    #home .home-actions button,
    #chapters button,
    #chapters .chapter-card,
    #quizModeOverlay button,
    #examModeOverlay button
  ) {
    pointer-events: none;
  }

  html.android-webview body.app-mode #home .home-start-btn {
    width: 226px;
    max-width: 72vw;
    padding: 6px 12px 6px 6px;
    border-radius: 25px;
    box-shadow: 0 9px 22px rgba(5, 91, 67, 0.2);
    animation: none;
  }

  html.android-webview body.app-mode #home .home-start-btn::before {
    display: none;
  }

  html.android-webview body.app-mode #home .home-start-open-label {
    padding: 8px 5px;
    font-size: 14px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.android-webview body.app-mode #home .home-dictionary-entry {
    width: 246px;
    min-height: 54px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 7px 11px;
    border-radius: 17px;
    box-shadow: 0 6px 16px rgba(37, 41, 67, 0.14);
  }

  html.android-webview body.app-mode #home .home-dictionary-copy strong {
    font-size: 0.92rem;
  }

  html.android-webview body.app-mode #home .home-dictionary-copy small {
    margin-top: 2px;
    font-size: 0.65rem;
  }

  html.android-webview body.app-mode #home .home-learning-entries {
    width: 100%;
    gap: 8px;
  }

  html.android-webview body.app-mode #home .home-learning-entry {
    min-height: 60px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 9px;
    border-radius: 16px;
    box-shadow: 0 5px 14px rgba(37, 41, 67, 0.09);
  }

  html.android-webview body.app-mode #home .home-learning-entry > .home-learning-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
  }

  html.android-webview body.app-mode #home .home-learning-copy strong {
    font-size: 0.78rem;
  }

  html.android-webview body.app-mode #home .home-learning-copy small {
    margin-top: 3px;
    font-size: 0.59rem;
  }

  html.android-webview body.app-mode #home .watermark-link {
    bottom: max(4px, env(safe-area-inset-bottom, 0px));
    font-size: 9px;
  }

  html.android-webview body.app-mode .lesson-card {
    height: calc(100dvh - 52px);
    min-height: 0;
    padding: 9px 14px max(14px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  html.android-webview body.app-mode .lesson-head {
    padding-bottom: 7px;
  }

  html.android-webview body.app-mode .lesson-kicker {
    margin-bottom: 4px;
    padding: 4px 10px;
    font-size: 9px;
  }

  html.android-webview body.app-mode .lesson-head h2 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.08;
  }

  html.android-webview body.app-mode .lesson-board {
    margin-top: 4px;
    padding-top: 3px;
    gap: 6px;
  }

  html.android-webview body.app-mode .card-selector {
    gap: 4px;
    padding-block: 1px;
  }

  html.android-webview body.app-mode .card-selector-viewport {
    height: 158px;
  }

  html.android-webview body.app-mode .chapter-card-track {
    touch-action: pan-y;
    will-change: auto;
    transition-duration: 220ms;
  }

  html.android-webview body.app-mode .chapter-card-track.is-dragging {
    will-change: transform;
  }

  /* Width + horizontal margins keep the 140px slot used by script.js. */
  html.android-webview body.app-mode .chapter-card {
    width: 116px;
    height: 154px;
    margin-inline: 12px;
    border-radius: 17px;
    box-shadow: 0 8px 20px rgba(37, 41, 67, 0.2);
    transition-duration: 220ms;
    will-change: auto;
  }

  html.android-webview body.app-mode .chapter-card-label {
    font-size: 0.62rem;
  }

  html.android-webview body.app-mode .chapter-card-number {
    font-size: 2.25rem;
  }

  html.android-webview body.app-mode .chapter-card-title {
    right: 6px;
    bottom: 8px;
    left: 6px;
    font-size: 0.54rem;
  }

  html.android-webview body.app-mode .chapter-card-dots {
    gap: 3px;
  }

  html.android-webview body.app-mode .dashboard {
    gap: 12px;
    padding: 0;
  }

  html.android-webview body.app-mode .dash-engine {
    width: 60px;
    height: 60px;
    animation: none;
    filter: none;
  }

  html.android-webview body.app-mode .dash-engine::before {
    inset: -5px;
    animation: none;
    opacity: 0.3;
  }

  html.android-webview body.app-mode .dash-gauge {
    width: 46px;
    height: 46px;
  }

  html.android-webview body.app-mode .lesson-actions {
    gap: 7px;
  }

  html.android-webview body.app-mode .lesson-tool {
    min-height: 50px;
    padding: 7px 11px;
    border-radius: 17px;
  }

  html.android-webview body.app-mode .lesson-tool strong {
    font-size: 1.08rem;
  }

  html.android-webview .premium-new-badge::before {
    animation: none;
  }

  html.android-webview .quiz-container {
    padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  html.android-webview .top-bar {
    min-height: 44px;
  }

  html.android-webview .icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(37, 41, 67, 0.08);
  }

  html.android-webview .exit-btn {
    margin-right: 6px;
  }

  html.android-webview .top-bar h2 {
    font-size: 1.15rem;
  }

  html.android-webview .top-bar-tools {
    gap: 5px;
  }

  html.android-webview .text-size-control {
    height: 34px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(37, 41, 67, 0.07);
  }

  html.android-webview .text-size-control button {
    width: 29px;
  }

  html.android-webview #text-size-value {
    min-width: 31px;
  }

  html.android-webview #timer {
    padding: 5px 9px;
    font-size: 0.88rem;
  }

  html.android-webview #progress {
    gap: 4px;
  }

  html.android-webview .progress-dot {
    width: 25px;
    height: 25px;
    font-size: 8px;
    transition-duration: 120ms;
  }

  html.android-webview .progress-dot--current {
    transform: scale(1.1);
  }

  html.android-webview .question-area {
    --quiz-question-flow-gap: 8px;
    gap: var(--quiz-question-flow-gap);
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(37, 41, 67, 0.1);
  }

  html.android-webview .quiz-question-content {
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  html.android-webview .quiz-question-content::-webkit-scrollbar {
    display: none;
  }

  html.android-webview .figure-wrap {
    height: clamp(110px, 16dvh, 132px);
  }

  html.android-webview #figure {
    transition-duration: 160ms;
  }

  html.android-webview #question {
    font-size: clamp(0.96rem, 3.7vw, 1.03rem);
    line-height: 1.4;
  }

  html.android-webview[data-reader-size="large"] #question {
    font-size: clamp(1.08rem, 4vw, 1.16rem);
  }

  html.android-webview[data-reader-size="xlarge"] #question {
    font-size: clamp(1.2rem, 4.4vw, 1.3rem);
  }

  html.android-webview .quiz-command-bar {
    gap: 6px 4px;
  }

  html.android-webview .quiz-command-bar .controls button,
  html.android-webview .quiz-command-bar .answer-wrapper {
    height: 44px;
  }

  html.android-webview .quiz-command-bar .controls button {
    border-radius: 11px;
    transition-duration: 120ms;
  }

  html.android-webview .quiz-command-bar .controls button img {
    width: 18px;
    height: 18px;
  }

  html.android-webview .quiz-command-bar .answer-label {
    font-size: 0.62rem;
  }

  html.android-webview .modal-overlay,
  html.android-webview .qms-overlay,
  html.android-webview .menu-overlay,
  html.android-webview .trial-onboarding-scrim,
  html.android-webview .install-prompt {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 600px) and (max-height: 720px) {
  html.android-webview body.app-mode #home {
    padding-top: 12px;
  }

  html.android-webview body.app-mode #home .home-start-btn {
    width: 208px;
  }

  html.android-webview body.app-mode #home .home-dictionary-entry {
    min-height: 50px;
  }

  html.android-webview body.app-mode #home .home-learning-entry {
    min-height: 56px;
  }

  html.android-webview body.app-mode #home .watermark-link {
    display: none;
  }

  html.android-webview body.app-mode .card-selector-viewport {
    height: 146px;
  }

  html.android-webview body.app-mode .chapter-card {
    width: 108px;
    height: 142px;
    margin-inline: 16px;
  }

  html.android-webview body.app-mode .dash-engine {
    width: 54px;
    height: 54px;
  }

  html.android-webview body.app-mode .dash-gauge {
    width: 44px;
    height: 44px;
  }

  html.android-webview .figure-wrap {
    height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.android-webview *,
  html.android-webview *::before,
  html.android-webview *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}