/* Mobile section layouts, version 1.7.
 * Opted in explicitly by each page. Keep ALL rules inside mobile media queries.
 * Desktop, games, grammar and the completed Reading/Listening flows are excluded.
 */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) {
  html[data-mobile-page] { min-height: 100%; height: auto; overflow-y: auto; zoom: var(--mobile-phone-scale, 1); --mobile-vw: calc(1vw / var(--mobile-phone-scale, 1)); --mobile-vh: calc(1vh / var(--mobile-phone-scale, 1)); --mobile-svh: calc(1svh / var(--mobile-phone-scale, 1)); --mobile-dvh: calc(1dvh / var(--mobile-phone-scale, 1)); }
  html[data-mobile-page] body {
    box-sizing: border-box;
    min-height: calc(100 * var(--mobile-svh, 1svh));
    height: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    overflow: visible;
    justify-content: flex-start;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }
  [data-mobile-page] :is(main, section, form, fieldset, div) { min-width: 0; }
  [data-mobile-page] :is(input, select, textarea, button) { box-sizing: border-box; max-width: 100%; }
  [data-mobile-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
    font-size: 16px; line-height: 1.4; min-height: 44px;
  }
  [data-mobile-page] textarea { user-select: text; }
  [data-mobile-page] :is(button, .btn, .button, .action-button) {
    min-height: 44px; font-size: 16px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
  }
  [data-mobile-page] :is(#top_buttons, #top_buttons_div, #top_buttons_vocabulary, #top_buttons_roboteacher) {
    position: relative; inset: auto; transform: none;
    display: flex; flex-direction: row; flex: 0 0 auto; align-items: center; justify-content: space-between;
    box-sizing: border-box; width: 100%; max-width: 100%;
    height: auto; min-height: 80px; margin: 0 0 12px;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    gap: 10px; z-index: 20;
  }
  [data-mobile-page] :is(#backBtn, #homeBtn) {
    flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  [data-mobile-page] :is(#backBtn, #homeBtn) img { width: auto; height: 36px; max-width: 44px; max-height: 40px; }
  [data-mobile-page] #logo { position: static; transform: none; width: auto; max-width: calc(100% - 108px); }
  [data-mobile-page] #logo img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; }
  [data-mobile-page] :is(#helloUser, #vocabs_title, #vocabs_learning_title, #page_title, .page-title) {
    height: auto; min-height: 0; max-width: 94%; margin: 10px auto 18px;
    font-size: clamp(28px, calc(7.7 * var(--mobile-vw, 1vw)), 44px); line-height: 1.15; letter-spacing: 1px;
    text-align: center; overflow-wrap: anywhere; box-sizing: border-box;
  }
  [data-mobile-page] :is(#page_title_container, #title_container) { height: auto; min-height: 0; }
  [data-mobile-page] :is(#total_points, #show_total_list_button, #instructions_button) {
    height: auto; min-height: 44px; max-width: 94%; box-sizing: border-box;
    padding: 8px 12px; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere;
  }
  [data-mobile-page] :is(.modal-content, .modal-box, .modal_total_ranking_content, .cancel_modal_panel) {
    box-sizing: border-box; width: min(calc(94 * var(--mobile-vw, 1vw)), 560px); max-width: calc(94 * var(--mobile-vw, 1vw));
    height: auto; min-height: 0; max-height: calc(86 * var(--mobile-dvh, 1dvh)); overflow: auto; padding: 20px 16px; font-size: 16px;
  }
  [data-mobile-page] :is(.modal-content, .modal-box, .modal_total_ranking_content) :is(p, label, li) { font-size: 17px; line-height: 1.5; }
  [data-mobile-page] :is(.modal-content, .modal-box, .modal_total_ranking_content) > * { flex-shrink: 0; }
  [data-mobile-page=jewellery_store] .modal-buttons { width: 100%; justify-content: center; }
  [data-mobile-page=jewellery_store] .modal-button { width: auto; min-width: 88px; min-height: 44px; padding: 10px 16px; font-size: 18px; }
  [data-mobile-page] :is(.modal-actions, .modal-buttons, .action-buttons, .form-actions) { flex-wrap: wrap; gap: 10px; }
  [data-mobile-page] :is(#closing_div_total, .close_text, #close_instructions, .close-button) { min-height: 44px; min-width: 44px; font-size: 20px; }
  [data-mobile-page] :is(#total_text_points_score_list_container, #total_points_score_list_container) {
    position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(calc(94 * var(--mobile-vw, 1vw)), 560px); max-width: calc(94 * var(--mobile-vw, 1vw)); max-height: calc(84 * var(--mobile-dvh, 1dvh)); overflow: auto;
    box-sizing: border-box; z-index: 10001;
  }
  [data-mobile-page] :is(#total_text_points_score_list_title, #total_points_score_list_title) { height: auto; font-size: 22px; line-height: 1.3; padding: 12px; }
  [data-mobile-page] :is(.list_item_total, .list_item_first_class_total, .list_item_second_class_total, .list_item_third_class_total, #current_user_total) { font-size: 17px; line-height: 1.4; padding: 10px; overflow-wrap: anywhere; }
  [data-mobile-page] :is(#backBtn, #homeBtn, #logo, #helloUser, button, .btn, .button, .overview-button, .admin-card, .castle-card):hover { transform: none; scale: 1; }
  [data-mobile-page] .site-footer { position: static; box-sizing: border-box; width: 94%; flex-wrap: wrap; height: auto; margin: 24px auto 0; padding: 8px; }
  [data-mobile-page] .site-footer-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

  /* Keep legacy vh-sized labels readable when the phone is sideways. */
  [data-mobile-page=about] #main_container :is(p, a, strong, em, span) { font-size: 17px; line-height: 1.55; }
  [data-mobile-page=about] #main_container [id^=about-paragraph] { font-size: 17px; line-height: 1.55; }
  [data-mobile-page=account_settings] :is(.settings-section, .danger-zone) :is(p, li, label, strong, a, .account-type-badge) { font-size: 16px; line-height: 1.5; }
  [data-mobile-page=support] #main_container :is(.form-subtitle, .char-counter, .char-counter span) { font-size: 16px; line-height: 1.5; }
  [data-mobile-page=create_class] :is(#edit-name-btn-1, #edit-name-btn-2, #create-students-btn-1, #create-students-btn-2) { box-sizing: border-box; width: auto; max-width: 100%; height: auto; min-height: 44px; font-size: 18px; line-height: 1.35; padding: 10px 14px; white-space: normal; }
  [data-mobile-page=teacher_home] #settingsInfoBtn .settings-btn-text { font-size: 18px; line-height: 1.4; }
  [data-mobile-page^=teacher_] :is(.student-name-button, .default-indicator) { font-size: 16px; line-height: 1.4; }
  [data-mobile-page=teacher_assignments_overview] .section-badge { font-size: 14px; line-height: 1.3; width: auto; min-width: 24px; height: auto; padding: 4px; }
  [data-mobile-page=turn_on_off_features] #main_container :is(p, strong, label) { font-size: 17px; line-height: 1.45; }
  [data-mobile-page=turn_on_off_features] #main_container h2 { font-size: 26px; line-height: 1.3; }
  [data-mobile-page=castle_shop] :is(#coin-note, .btn-locked) { font-size: 16px; line-height: 1.4; }
  [data-mobile-page=jewellery_store] :is(.total, .level_span) { font-size: inherit; line-height: inherit; }
  [data-mobile-page=reading_roboteacher] .button-icon { font-size: 18px; }
  [data-mobile-page=assignments] .no-assignments { font-size: 17px; line-height: 1.5; }
  :is([data-mobile-page=pricing], [data-mobile-page=guide]) :is(.price-save, .breadcrumb, .breadcrumb a, .breadcrumb span, .article-meta, footer a) { font-size: 14px; line-height: 1.5; }
  [data-mobile-page=subscription] .plan_badge { font-size: 14px; }

  [data-mobile-page=support] .contact-label { font-size: 16px; line-height: 1.5; }
  [data-mobile-page=teacher_change_text_titles] .default-indicator { font-size: 14px !important; line-height: 1.4; }
  [data-mobile-page=admin_backlink_cold_emails] .eyebrow { font-size: 14px !important; }
  [data-mobile-page=admin_delete_users] .pagination, [data-mobile-page=admin_delete_users] .pagination :is(a, span) { font-size: 16px; min-height: 44px; align-content: center; }
  [data-mobile-page=admin_linkedin_performance] strong { font-size: max(14px, 1em); }
  [data-mobile-page=admin_seo_tracking] .ai-table :is(td.ai-plat, td.competitors) { font-size: 15px; }
  [data-mobile-page=castle_shop] .active-badge { font-size: 14px; }
  /* Vocabulary landing and flashcards: generous, readable rows. */
  [data-mobile-page=vocabulary_home] #vocabs_starting_page_container {
    width: min(92%, 600px); height: auto; min-height: calc(55 * var(--mobile-svh, 1svh)); margin: 12px auto 32px;
    display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, calc(5 * var(--mobile-svh, 1svh)), 48px);
  }
  [data-mobile-page=vocabulary_home] :is(#vocabs_learn, #vocabs_play) {
    box-sizing: border-box; width: 100%; height: auto; min-height: 120px; margin: 0;
    padding: 20px 12px; font-size: clamp(40px, calc(12 * var(--mobile-vw, 1vw)), 64px); line-height: 1.2;
  }
  [data-mobile-page=vocabulary_home] :is(#vocabs_learn, #vocabs_play):hover { transform: none; }
  [data-mobile-page=vocabulary_learning] .flashcard-container { width: 100%; height: auto; padding-bottom: 20px; }
  [data-mobile-page=vocabulary_learning] #vocabs_select_box_container { height: auto; width: 100%; flex-direction: column; gap: 14px; }
  [data-mobile-page=vocabulary_learning] #vocabs_select_box_form { height: auto; margin: 0; max-width: 94%; }
  [data-mobile-page=vocabulary_learning] #vocabs_select_box { font-size: 20px; height: auto; padding: 8px 16px; }
  [data-mobile-page=vocabulary_learning] .flashcard { box-sizing: border-box; width: min(calc(92 * var(--mobile-vw, 1vw)), 640px); max-width: 100%; height: clamp(190px, calc(36 * var(--mobile-svh, 1svh)), 320px); padding: 8px; margin: 0; }
  [data-mobile-page=vocabulary_learning] :is(.flashcard-front, .flashcard-back) { box-sizing: border-box; padding: 20px 18px 56px; font-size: clamp(26px, calc(6 * var(--mobile-vw, 1vw)), 40px); line-height: 1.25; overflow-wrap: anywhere; overflow-y: auto; }
  [data-mobile-page=vocabulary_learning] #speak-button { min-width: 44px; min-height: 44px; font-size: 22px; bottom: 8px; right: 10px; }
  [data-mobile-page=vocabulary_learning] .word-counter { font-size: 18px; padding: 6px 12px; margin: 0; }
  [data-mobile-page=vocabulary_learning] .navigation { margin: 0; gap: 24px; }
  [data-mobile-page=vocabulary_learning] .nav-button { min-width: 80px; font-size: 28px; }

  /* Writing overview and feedback; mobile editor styles live in writing_text.css. */
  [data-mobile-page=writing_home] #adverbs { box-sizing: border-box; width: min(92%, 600px); height: auto; min-height: 0; margin: 24px auto 10px; padding: 0; justify-content: flex-start; align-items: stretch; background: none; animation: none; }
  [data-mobile-page=writing_home] #mark_container { box-sizing: border-box; width: 100%; margin: 0; height: auto; padding: 8px 10px; font-size: 22px; line-height: 1.3; }
  [data-mobile-page=writing_home] #practise_status_available { height: auto; min-height: 0; padding: 10px; font-size: 23px; line-height: 1.25; overflow-wrap: anywhere; }
  [data-mobile-page=writing_home] :is(#deadline, #days_remaining, #days_remaining_late) { box-sizing: border-box; height: auto; padding: 8px; font-size: 16px; line-height: 1.3; }
  [data-mobile-page=writing_home] #assignment-badge { height: auto; width: auto; min-width: 100px; font-size: 14px; padding: 4px 8px; top: -24px; }
  [data-mobile-page=writing_home] :is(.view_text_button, .text_feedback_button, .close_text) { box-sizing: border-box; min-height: 44px; padding: 10px 16px; font-size: 18px; line-height: 1.3; }
  [data-mobile-page=writing_home] :is(#adverbs, .view_text_button, .text_feedback_button):hover { transform: none; }
  [data-mobile-page=writing_home] .view_text_container { box-sizing: border-box; max-width: calc(94 * var(--mobile-vw, 1vw)); max-height: calc(86 * var(--mobile-dvh, 1dvh)); overflow: auto; padding: 20px 16px; font-size: 18px; line-height: 1.5; }
  [data-mobile-page=writing_text] .writing-access-overlay { box-sizing: border-box; padding: 20px; overflow-y: auto; }
  [data-mobile-page=writing_text] .writing-access-panel { box-sizing: border-box; max-width: 100%; padding: 24px 18px; }
  [data-mobile-page=writing_text] .writing-access-panel h2 { font-size: clamp(24px, calc(6 * var(--mobile-vw, 1vw)), 36px); line-height: 1.3; }
  [data-mobile-page=text_feedback] :is(#container_of_robot_and_text, #feedbackContainer) { width: 100%; min-height: 0; height: auto; }
  [data-mobile-page=text_feedback] #select_form { width: 92%; height: auto; margin: 0 auto 16px; }
  [data-mobile-page=text_feedback] #select_item { width: 100%; height: auto; font-size: 18px; padding: 10px; }
  [data-mobile-page=text_feedback] #robot_container { height: auto; max-width: 94%; margin: 0 auto 20px; flex-direction: column; gap: 12px; }
  [data-mobile-page=text_feedback] #robot_image { display: flex; flex-direction: column; gap: 12px; height: auto; max-height: none; width: 100%; max-width: 100%; object-fit: contain; }
  [data-mobile-page=text_feedback] #robot_image img { width: auto; height: 160px; max-width: 100%; object-fit: contain; }
  [data-mobile-page=text_feedback] #robot_text { box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; font-size: 20px; line-height: 1.4; padding: 14px; }
  [data-mobile-page=text_feedback] #view_text_container { box-sizing: border-box; width: 94%; margin: 16px auto; padding: 16px; }
  [data-mobile-page=text_feedback] :is(.text_content, #feedback, #feedback .bot-message, #feedback #total-mistakes) { font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; text-align: left; }
  [data-mobile-page=text_feedback] #feedbackButtons { flex-wrap: wrap; gap: 12px; }
  [data-mobile-page=text_feedback] :is(#feedbackButton, #feedbackButtonNo, #back_to_text_btn, #recheckButton, #showPreviousFeedbackButton, #confirmRecheckButton, #cancelRecheckButton) { height: auto; min-height: 44px; max-width: calc(92 * var(--mobile-vw, 1vw)); padding: 10px 16px; font-size: 18px; line-height: 1.3; }

  [data-mobile-page=account_settings] .modal-overlay { box-sizing: border-box; padding: 12px; overflow-y: auto; }
  [data-mobile-page=account_settings] .modal-content { flex: 0 0 auto; margin: auto; }
  [data-mobile-page=account_settings] .modal-content :is(p, li, label, strong, .switch-confirm-label, .warning-box, .modal-warning) { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
  [data-mobile-page=account_settings] .modal-content h2 { font-size: 24px; line-height: 1.3; }
  [data-mobile-page=account_settings] .modal-content :is(button, input) { min-height: 44px; font-size: 16px; }

  /* Result cards grow with their copy rather than overlap bottom navigation. */
  :is([data-mobile-page=reading_results], [data-mobile-page=listening_results]) :is(#body_passed, #body_failed) { min-height: calc(100 * var(--mobile-svh, 1svh)); height: auto; }
  :is([data-mobile-page=reading_results], [data-mobile-page=listening_results]) #box { position: relative; inset: auto; box-sizing: border-box; width: 92%; margin: auto auto 20px; padding: 18px; }
  :is([data-mobile-page=reading_results], [data-mobile-page=listening_results]) #results { font-size: clamp(24px, calc(6 * var(--mobile-vw, 1vw)), 34px); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
  :is([data-mobile-page=reading_results], [data-mobile-page=listening_results]) #bottom_btns_div { position: relative; inset: auto; width: 92%; margin: 0 auto 20px; }
  :is([data-mobile-page=reading_results], [data-mobile-page=listening_results]) #button1 { width: 100%; max-width: 320px; min-height: 48px; font-size: 26px; padding: 10px; }

  /* Public information, account and billing pages. */
  [data-mobile-page=about] #firstcontainer { width: 94%; padding-bottom: 20px; }
  [data-mobile-page=about] #profile-image-container { height: clamp(180px, calc(30 * var(--mobile-svh, 1svh)), 300px); }
  [data-mobile-page=about] #main_container { padding: 20px 18px; }
  [data-mobile-page=about] #main_container p { font-size: 17px; line-height: 1.55; text-align: left; }
  :is([data-mobile-page=support], [data-mobile-page=legal], [data-mobile-page=account_settings]) #main_container { box-sizing: border-box; width: 94%; height: auto; max-height: none; padding: 20px 16px; overflow: visible; }
  [data-mobile-page=support] :is(.form-title, .legal-title) { font-size: 30px; line-height: 1.2; }
  [data-mobile-page=support] :is(.form-subtitle, .form-label, .message-text, .contact-info) { font-size: 16px; line-height: 1.5; }
  [data-mobile-page=support] .form-header { gap: 8px; }
  [data-mobile-page=support] .header-decoration { display: none; }
  [data-mobile-page=support] .submit-btn { width: 100%; min-height: 48px; font-size: 20px; }
  [data-mobile-page=support] .contact-email { overflow-wrap: anywhere; font-size: 17px; }
  [data-mobile-page=legal] .legal-scroll-container { height: auto; max-height: none; overflow: visible; padding: 0; }
  [data-mobile-page=legal] .legal-title { font-size: 30px; }
  [data-mobile-page=legal] :is(.legal-subtitle, .legal-section p, .legal-section li, .info-label, .info-value) { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
  [data-mobile-page=legal] .legal-section h2 { font-size: 22px; line-height: 1.3; }
  [data-mobile-page=legal] .info-row { flex-direction: column; }
  [data-mobile-page=account_settings] :is(.settings-section, .danger-zone) { padding: 18px 14px; }
  [data-mobile-page=account_settings] .section-title { font-size: 22px; }
  [data-mobile-page=account_settings] :is(.info-display, .form-label, .warning-text, .workspace-note) { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
  [data-mobile-page=subscription] #main_container { box-sizing: border-box; width: 94%; margin: 16px auto; padding: 12px; }
  [data-mobile-page=subscription] #pricing_cards_container { flex-direction: column; gap: 24px; width: 100%; }
  [data-mobile-page=subscription] :is(.pricing_card, .plan_card) { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; }
  [data-mobile-page=subscription] :is(.plan_features, .plan_features li, .security_note, .badge-date, .badge-countdown) { font-size: 16px; line-height: 1.5; }
  [data-mobile-page=subscription] .pricing_card.featured { transform: none; }
  [data-mobile-page=subscription] .pricing_card:hover { transform: none; }
  [data-mobile-page=pricing] .plans { grid-template-columns: minmax(0, 1fr); }
  [data-mobile-page=pricing] .plan { padding: 24px 16px; }
  [data-mobile-page=pricing] :is(.plan-desc, .price-period, .included-item, .faq-a) { font-size: 16px; line-height: 1.5; }
  [data-mobile-page=guide] .guide-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
  [data-mobile-page=guide] .guide-table :is(th, td) { font-size: 16px; line-height: 1.4; min-width: 130px; }
  [data-mobile-page=guide] :is(.content-card strong, .content-card span, .plan-period, .plan-yearly) { font-size: 16px; line-height: 1.5; }
  [data-mobile-page=subscription_success] #main_container { width: 94%; box-sizing: border-box; margin: 16px auto; }
  [data-mobile-page=subscription_success] .success_container { padding: 24px 16px; }
  [data-mobile-page=subscription_success] .success_title { font-size: 28px; line-height: 1.3; }
  [data-mobile-page=subscription_success] .subscription_details { padding: 16px; }
  [data-mobile-page=subscription_success] .detail_row { flex-direction: column; gap: 8px; font-size: 16px; }
  [data-mobile-page=subscription_success] .btn_action { box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 12px 18px; font-size: 18px; }

  /* Shops retain the artwork while making prices and actions legible. */
  [data-mobile-page=jewellery_store] #container { box-sizing: border-box; width: 94%; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin-bottom: 24px; }
  [data-mobile-page=jewellery_store] .container_2 { width: 100%; gap: 8px; }
  [data-mobile-page=jewellery_store] .gem_image img { width: 100%; max-width: 130px; height: 110px; object-fit: contain; }
  [data-mobile-page=jewellery_store] .coins_title { box-sizing: border-box; width: 100%; height: auto; min-height: 38px; font-size: 24px; line-height: 1.2; margin: 0; padding: 4px; }
  [data-mobile-page=jewellery_store] .coins_price { box-sizing: border-box; width: 100%; height: auto; min-height: 95px; font-size: 22px; line-height: 1.25; padding: 10px 6px; }
  [data-mobile-page=jewellery_store] .coins_extra { box-sizing: border-box; width: 100%; height: auto; min-height: 60px; font-size: 18px; line-height: 1.25; margin: 0; padding: 8px; }
  [data-mobile-page=jewellery_store] :is(.locked, .coins_buy, .coins_buy_bought) { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: 44px; padding: 8px; font-size: 17px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  [data-mobile-page=jewellery_store] #container_3 { width: 94%; height: auto; gap: 12px; }
  [data-mobile-page=jewellery_store] :is(#coins_title, #avatar_level) { box-sizing: border-box; width: 100%; max-width: 360px; font-size: 22px; padding: 8px; margin: 0; }
  [data-mobile-page=jewellery_store] :is(.gem_image img, #coins_title, #avatar_level):hover { transform: none; }
  [data-mobile-page=jewellery_store_purchase] #parent { width: 100%; min-height: calc(100 * var(--mobile-svh, 1svh)); height: auto; }
  [data-mobile-page=jewellery_store_purchase] #container { box-sizing: border-box; width: 94%; height: auto; padding: 20px 12px; margin-top: 24px; flex-direction: column; align-items: center; gap: 20px; }
  [data-mobile-page=jewellery_store_purchase] #congrats_text { font-size: 26px; line-height: 1.4; overflow-wrap: anywhere; }
  [data-mobile-page=jewellery_store_purchase] #avatar_image { max-width: 100%; height: auto; max-height: calc(45 * var(--mobile-svh, 1svh)); object-fit: contain; }
  [data-mobile-page=jewellery_store_purchase] #avatar_image img { max-width: 100%; width: auto; height: auto; max-height: calc(45 * var(--mobile-svh, 1svh)); object-fit: contain; }
  [data-mobile-page=castle_shop] #castle-shop-wrapper { box-sizing: border-box; width: 100%; padding: 0 12px 24px; }
  [data-mobile-page=castle_shop] #shop-header { flex-direction: column; gap: 16px; }
  [data-mobile-page=castle_shop] #shop-title { font-size: clamp(30px, calc(9 * var(--mobile-vw, 1vw)), 44px); }
  [data-mobile-page=castle_shop] #castle-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  [data-mobile-page=castle_shop] .castle-name { font-size: 24px; line-height: 1.25; }
  [data-mobile-page=castle_shop] :is(.price-amount, .coin-count) { font-size: 26px; }
  [data-mobile-page=castle_shop] :is(.price-label, .coin-label, #coin-note, #active-castle-name) { font-size: 16px; line-height: 1.4; }
  [data-mobile-page=the_royal_hall] #parent { width: 100%; height: auto; min-height: calc(100 * var(--mobile-svh, 1svh)); }
  [data-mobile-page=the_royal_hall] #hall-container { box-sizing: border-box; width: 94%; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px 16px; margin: 24px auto; }
  [data-mobile-page=the_royal_hall] #hall-title { font-size: clamp(28px, calc(8 * var(--mobile-vw, 1vw)), 42px); margin: 76px 12px 12px; }
  [data-mobile-page=the_royal_hall] .royal-card { width: 100%; }
  [data-mobile-page=the_royal_hall] .royal-card .card-arch { height: auto; width: 100%; max-width: 180px; }
  [data-mobile-page=the_royal_hall] .royal-card.rank-1 { grid-column: 1 / -1; grid-row: 1; max-width: 210px; justify-self: center; }
  [data-mobile-page=the_royal_hall] #top-bar { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
  [data-mobile-page=the_royal_hall] #home-icon { height: 44px; }
  [data-mobile-page=the_royal_hall] :is(.card-label, .card-name, .card-points) { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }

  /* Wide assignment tables scroll inside their section, never shrink to tiny text. */
  [data-mobile-page=assignments] #main_container { box-sizing: border-box; width: 100%; padding: 0 12px; height: auto; }
  [data-mobile-page=assignments] .assignment-section-container { width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: 16px; }
  [data-mobile-page=assignments] .assignments-table { width: 100%; min-width: 860px; table-layout: auto; }
  [data-mobile-page=assignments] .assignments-table :is(th, td) { font-size: 16px; line-height: 1.4; padding: 12px 10px; }
  [data-mobile-page=assignments] .assignment-section-button { min-width: 90px; width: auto; height: auto; min-height: 44px; padding: 10px; font-size: 18px; }
  [data-mobile-page=assignments] .retro-progress-container { height: 28px; }
  [data-mobile-page=assignments] .progress-text { font-size: 16px; line-height: 28px; }
  [data-mobile-page=assignments] :is(.status-text, .status-icon) { font-size: 16px; line-height: 1.3; }

  /* Teacher tools: compact forms, full-size text, local horizontal table scrolling. */
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_class], [data-mobile-page=create_students], [data-mobile-page=turn_on_off_features]) body { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_class], [data-mobile-page=create_students], [data-mobile-page=turn_on_off_features]) #main_container { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: 0; margin: 0 auto 24px; padding: 12px; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_class], [data-mobile-page=create_students], [data-mobile-page=turn_on_off_features]) #mobile-warning-overlay { display: none !important; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_students]) :is(#main_container, .table-scroll-container, .student-table-section, .assignments-list, #studentForm) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_students]) table { width: max-content; min-width: 100%; max-width: none; table-layout: auto; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_students]) :is(th, td) { font-size: 16px; line-height: 1.4; padding: 10px; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_students]) td :is(input:not([type=checkbox]):not([type=radio]), select) { min-width: 110px; font-size: 16px; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_class], [data-mobile-page=create_students], [data-mobile-page=turn_on_off_features]) :is(#instructions, .page-instructions, .form-label, .form-group label, #create_class_instructions, .class-label, .text-content, .class-code) { font-size: 16px; line-height: 1.5; height: auto; overflow-wrap: anywhere; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_class]) :is(.form-group, .form-section, .settings-section, .form-container, .assignment-form, .assignments-list) { box-sizing: border-box; max-width: 100%; padding: 14px; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_class]) :is(.filter-container, .class-options, .form-actions, .button-group, .leaderboard-bulk-controls, .leaderboard-bulk-actions) { flex-wrap: wrap; gap: 10px; }
  :is([data-mobile-page^=teacher_], [data-mobile-page=create_class]) :is(.text-sets-grid, .leaderboard-grid, .price-grid, .classes-container) { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; height: auto; gap: 20px; }
  [data-mobile-page=create_class] :is(#class-box-1, #class-box-2, .class-box-1, .class-box-2) { box-sizing: border-box; width: 100%; height: auto; margin: 0; padding: 20px 14px; }
  [data-mobile-page=create_class] :is(.class_title, #class1_title, #class2_title) { font-size: 28px; line-height: 1.3; }
  [data-mobile-page=create_class] .class-info { font-size: 18px; overflow-wrap: anywhere; }
  [data-mobile-page=create_students] #studentForm { width: 100%; }
  [data-mobile-page=create_students] :is(#current_students_title, #page_title) { font-size: 26px; }
  [data-mobile-page=teacher_overview] #overview_buttons_container { width: 100%; height: auto; gap: 16px; }
  [data-mobile-page=teacher_overview] .overview-button { box-sizing: border-box; width: min(100%, 520px); height: auto; min-height: 60px; font-size: 26px; padding: 12px; line-height: 1.3; }
  [data-mobile-page=teacher_assignments] :is(#writing-texts-container, #grammar-topics-container, #vocab-container) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-mobile-page=teacher_assignments] :is(.text-option, .topic-option, .vocab-option) { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px; font-size: 16px; line-height: 1.3; }
  [data-mobile-page=teacher_assignments] .page-spacer { height: 24px; }
  [data-mobile-page=teacher_assignments_overview] .assignment-cards-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
  [data-mobile-page=teacher_assignments_overview] .assignment-card { width: 100%; box-sizing: border-box; }
  [data-mobile-page=teacher_assignments_overview] .card-title { font-size: 24px; }
  [data-mobile-page=teacher_assignments_overview] :is(.card-deadline, .card-status, .card-pct) { font-size: 16px; line-height: 1.4; }
  [data-mobile-page=teacher_assignments_overview] .section-buttons-row { flex-wrap: wrap; gap: 8px; }
  [data-mobile-page=teacher_other_class_settings] :is(.leaderboard-title, .jewellery-title) { font-size: 22px; }
  [data-mobile-page=teacher_other_class_settings] :is(.leaderboard-description, .leaderboard-note, .input-label, .input-suffix, .default-price, .section-subtitle) { font-size: 16px; line-height: 1.4; }
  [data-mobile-page=turn_on_off_features] :is(.class-selection, .feature-container) { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; flex-wrap: wrap; gap: 16px; padding: 12px; }
  [data-mobile-page=turn_on_off_features] :is(.class-item, .feature-item) { box-sizing: border-box; width: 100%; height: auto; min-height: 64px; font-size: 24px; padding: 12px; }
  [data-mobile-page=teacher_home] #logo_container { height: auto; min-height: 90px; margin: 16px auto; }
  [data-mobile-page=teacher_home] #logo { max-width: 240px; }
  [data-mobile-page=teacher_home] :is(#helloUser_title, #hello_1, #hello_1_name) { height: auto; font-size: clamp(22px, calc(6 * var(--mobile-vw, 1vw)), 32px); line-height: 1.3; }
  [data-mobile-page=teacher_home] #hello_2 { font-size: 17px; line-height: 1.45; letter-spacing: 0; padding: 12px; }
  [data-mobile-page=teacher_home] #hello_2 br { display: none; }
  [data-mobile-page=teacher_home] #helloUser { margin: 6px auto 16px; }
  [data-mobile-page=teacher_home] #main_container { flex: 0 0 auto; overflow: visible; justify-content: flex-start; }
  [data-mobile-page=teacher_home] body > div { flex-shrink: 0; }
  [data-mobile-page=teacher_home] #main_button_container { width: 100%; height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 24px; margin: 20px auto; }
  [data-mobile-page=teacher_home] .main_button { min-height: 90px; height: auto; flex-direction: row; justify-content: flex-start; padding: 12px 16px; gap: 16px; }
  [data-mobile-page=teacher_home] .button_icon { position: static; transform: none; height: 64px; max-width: 72px; flex-shrink: 0; }
  [data-mobile-page=teacher_home] :is(.button_text, #edit_class_text) { font-size: 24px; line-height: 1.2; max-width: 100%; text-align: left; }
  [data-mobile-page=teacher_home] .main_button:hover { transform: none; }
  [data-mobile-page=teacher_home] #subscription_status_banner { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; padding: 12px; flex-wrap: wrap; gap: 10px; }
  [data-mobile-page=teacher_home] #subscription_status_banner :is(.subscription-text, .subscription-note, .subscription-days, .subscription-renewal, .subscription-free-note, .subscription-action) { font-size: 16px; line-height: 1.4; white-space: normal; }
  [data-mobile-page=teacher_home] :is(#settingsInfoBtn_container, #logOutBtn_container) { position: relative; inset: auto; width: 100%; height: auto; margin: 8px auto; }
  [data-mobile-page=teacher_home] #settingsInfoBtn { min-height: 48px; font-size: 18px; }
  [data-mobile-page=teacher_home] #settingsDropdown { max-width: calc(94 * var(--mobile-vw, 1vw)); }
  [data-mobile-page=teacher_home] .dropdown-item { min-height: 44px; font-size: 17px; }
  [data-mobile-page=teacher_home] :is(#logOutBtn, #logOutBtn_img) { height: 44px; }

  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(p, .info-banner, .help-toggle, #dirCount) { font-size: 16px; line-height: 1.5; }
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(small, .eyebrow, .file-rule, .safe-badge, .tag, .admin-card-id, .count-pill, .legend-teachers, .legend-total, .legend-users, .back-link, .empty-chart, .fine-print, .chart-total, .metric-label, .metric-note, .section-kicker, .source-note, .sync-time, .shield, .metric-foot, .lbl, .metric-name, .seal, summary, code, .summary-label, .download-button) { font-size: 14px; line-height: 1.5; }
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(span:not([class]):not([id]), strong, em) { font-size: inherit; line-height: inherit; }

  /* Administrative forms and reports share the same small-screen treatment. */
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) body { padding: 12px; }
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(#main_container, .main-container, .container, .wrapper, .page-shell, .page-wrap, .page, .admin-wrapper, .linkedin-page, .exports-shell) { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 auto; padding: 12px; }
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(.layout-grid, .stats-grid, .readiness-grid, .metric-grid, .chart-grid, .breakdown-grid, .form-grid, .tool-grid, .teachers-grid, .admin-grid, .castle-admin-grid, .summary-grid, .compose-grid, .gsc-grid, .day-grid) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(.hero, .hero-stats, .page-hero, .exports-header, .panel-heading, .panel-toolbar, .toolbar, .filter-row, .form-row, .form-row-inline, .campaign-actions, .campaign-meta, .edit-section-horizontal-layout, .row) { flex-wrap: wrap; height: auto; gap: 12px; }
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(.panel, .card, .section-card, .admin-section, .edit-form-section, .display-form-section) { box-sizing: border-box; padding: 16px; max-width: 100%; }
  :is([data-mobile-page^=admin_], [data-mobile-page=database_exports]) :is(.table-wrap, .table-container, .ai-table, .exports-panel, .prospects-panel, .daily-card) { max-width: 100%; overflow-x: auto; }
  [data-mobile-page^=admin_] table { min-width: 640px; font-size: 16px; }
  [data-mobile-page^=admin_] :is(th, td) { font-size: 15px; line-height: 1.4; padding: 10px; }
  [data-mobile-page^=admin_] :is(h1, .admin-title, .title) { font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
  [data-mobile-page^=admin_] :is(.card-title, .section-heading, .stat-number) { font-size: 24px; }
  [data-mobile-page^=admin_] :is(.card-desc, .stat-label, .subtitle, label, .small) { font-size: 16px; line-height: 1.45; }
  [data-mobile-page^=admin_] :is(#selected-text-display, #questions-editing-area, .main-column, .side-column) { width: 100%; max-width: 100%; flex-basis: 100%; }
  [data-mobile-page^=admin_] :is(code, pre) { white-space: pre-wrap; overflow-wrap: anywhere; }
  [data-mobile-page=admin_seo_tracking] table { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
  [data-mobile-page=database_exports] .export-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-mobile-page=database_exports] :is(.file-title-line, .filters) { flex-wrap: wrap; gap: 8px; }
  [data-mobile-page=database_exports] :is(.file-date, .file-size, .security-note) { font-size: 16px; line-height: 1.4; }

  /* RoboTeacher keeps the article and answer area together in landscape. */
  [data-mobile-page=reading_roboteacher] #helloUser_container { height: auto; min-height: 0; }
  [data-mobile-page=reading_roboteacher] #helloUser { font-size: clamp(26px, calc(5 * var(--mobile-vw, 1vw)), 38px); margin: 0 auto 14px; }
  [data-mobile-page=reading_roboteacher] #main_buttons_container { position: relative; inset: auto; display: flex; flex-direction: row; flex-wrap: wrap; width: 94%; height: auto; gap: 10px; margin: 0 auto 16px; justify-content: center; }
  [data-mobile-page=reading_roboteacher] :is(#instructions_button, #show_total_list_button, #score_list_button_container) { width: auto; max-width: 100%; min-width: 140px; margin: 0; height: auto; font-size: 16px; white-space: nowrap; }
  [data-mobile-page=reading_roboteacher] :is(#difficulty_level_container, #today_read_counter) { height: auto; width: auto; min-height: 44px; padding: 8px 12px; font-size: 17px; line-height: 1.3; }
  [data-mobile-page=reading_roboteacher] #difficulty-selection-container { width: 94%; height: auto; padding: 16px; margin: 12px auto; }
  [data-mobile-page=reading_roboteacher] .difficulty-options { height: auto; min-height: 0; }
  [data-mobile-page=reading_roboteacher] #difficulty-form { display: flex; flex-wrap: wrap; width: 100%; gap: 16px; justify-content: center; }
  [data-mobile-page=reading_roboteacher] .difficulty-box { box-sizing: border-box; width: 100%; height: auto; min-height: 120px; padding: 16px; display: flex; align-items: center; justify-content: center; gap: 16px; }
  [data-mobile-page=reading_roboteacher] .shield-container { height: 76px; width: 76px; }
  [data-mobile-page=reading_roboteacher] .shield-image { height: 100%; max-width: 100%; object-fit: contain; }
  [data-mobile-page=reading_roboteacher] .difficulty-text { font-size: 32px; line-height: 1.2; }
  [data-mobile-page=reading_roboteacher] #chat_container { flex: 0 0 auto; overflow: visible; box-sizing: border-box; width: 94%; max-width: 100%; height: auto; min-height: 0; padding: 16px; margin: 0 auto 20px; justify-content: flex-start; }
  [data-mobile-page=reading_roboteacher] :is(#prompt_wrapper, #prompt_container) { position: static; inset: auto; transform: none; flex: 0 0 auto; box-sizing: border-box; width: 100%; max-width: 100%; height: auto; padding: 12px; }
  [data-mobile-page=reading_roboteacher] :is(#prompt_text, #prompt_instructions, #typing_text, #back_to_difficulty) { font-size: 18px; line-height: 1.45; }
  [data-mobile-page=reading_roboteacher] #prompt_buttons { height: auto; flex: 0 0 auto; flex-wrap: wrap; gap: 12px; }
  [data-mobile-page=reading_roboteacher] #chat_messages { box-sizing: border-box; width: 100%; min-height: 140px; max-height: calc(55 * var(--mobile-svh, 1svh)); padding: 8px; }
  [data-mobile-page=reading_roboteacher] :is(.bot-message, .user-message, .question, #title) { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
  [data-mobile-page=reading_roboteacher] #chat_input { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; gap: 8px; }
  [data-mobile-page=reading_roboteacher] #textarea-container { gap: 10px; align-items: stretch; }
  [data-mobile-page=reading_roboteacher] #user_message { width: 100%; min-height: 90px; margin: 0; font-size: 18px; }
  [data-mobile-page=reading_roboteacher] #send_button { flex: 0 0 76px; width: 76px; font-size: 20px; padding: 8px; }
  [data-mobile-page=reading_roboteacher] #back_to_difficulty { min-height: 44px; padding: 10px; box-sizing: border-box; }
  [data-mobile-page=reading_roboteacher] #char_count { font-size: 14px; line-height: 1.3; }
  [data-mobile-page=reading_roboteacher] #logo_roboteacher { position: static; transform: none; margin: 16px auto; }
  [data-mobile-page=reading_roboteacher] #logo_roboteacher img { height: auto; max-height: 64px; max-width: 200px; }
  [data-mobile-page=reading_roboteacher] #instructions_container { box-sizing: border-box; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 94%; max-height: calc(86 * var(--mobile-dvh, 1dvh)); overflow: auto; padding: 20px 16px; }
  [data-mobile-page=reading_roboteacher] #instructions { font-size: 18px; line-height: 1.5; }
  [data-mobile-page=reading_roboteacher] #fullscreen-guard .fullscreen-guard-card { box-sizing: border-box; max-width: calc(94 * var(--mobile-vw, 1vw)); max-height: calc(86 * var(--mobile-dvh, 1dvh)); overflow: auto; font-size: 18px; padding: 20px; }

  /* Vocabulary practice: preserve the parchment and keep the input usable. */
  [data-mobile-page=vocabulary_practice] body { padding-top: 68px; }
  [data-mobile-page=vocabulary_practice] #homeBtn { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
  [data-mobile-page=vocabulary_practice] #highscores_button { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); min-height: 44px; max-width: 48%; font-size: 17px; padding: 8px 12px; }
  [data-mobile-page=vocabulary_practice] #vocabs_select_box_form { height: auto; min-height: 56px; margin: 0 0 12px; }
  [data-mobile-page=vocabulary_practice] #vocabs_select_box { height: auto; font-size: 22px; padding: 8px 16px; }
  [data-mobile-page=vocabulary_practice] #vocab_assignment_badge { font-size: 13px; }
  [data-mobile-page=vocabulary_practice] :is(#start_game_form, #countdown_wrapper) { height: auto; min-height: 130px; padding: 12px; }
  [data-mobile-page=vocabulary_practice] #start_game_button { height: auto; min-height: 56px; font-size: 32px; line-height: 1.2; padding: 10px 28px; }
  [data-mobile-page=vocabulary_practice] #main_container { height: auto; min-height: 0; width: 94%; margin: 12px auto; }
  [data-mobile-page=vocabulary_practice] #scroll_image_container { width: min(calc(90 * var(--mobile-vw, 1vw)), 440px); height: auto; aspect-ratio: 1 / 1; max-height: none; }
  [data-mobile-page=vocabulary_practice] #scroll_image { width: 100%; height: 100%; object-fit: contain; }
  [data-mobile-page=vocabulary_practice] .scroll-content { font-size: 16px; line-height: 1.25; }
  [data-mobile-page=vocabulary_practice] :is(#my_best, #my_best_not_completed, #best_current, #best_ever, #total_points_wrapper) { font-size: 16px; padding: 4px; margin-bottom: 6px; }
  [data-mobile-page=vocabulary_practice] #game_content { width: 94%; height: auto; min-height: 180px; gap: 12px; padding: 12px; }
  [data-mobile-page=vocabulary_practice] :is(#stopwatch_wrapper, #german_word_wrapper, #english_word_wrapper) { height: auto; min-height: 44px; width: 100%; padding: 0; }
  [data-mobile-page=vocabulary_practice] #stopwatch { font-size: 20px; }
  [data-mobile-page=vocabulary_practice] #german_word { font-size: clamp(24px, calc(4 * var(--mobile-vw, 1vw)), 34px); line-height: 1.3; padding: 8px; overflow-wrap: anywhere; }
  [data-mobile-page=vocabulary_practice] #vocabForm { width: 100%; }
  [data-mobile-page=vocabulary_practice] #english_word { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 48px; font-size: 24px; padding: 8px; }
  [data-mobile-page=vocabulary_practice] #words_answered { font-size: 18px; width: auto; padding: 6px; }
  [data-mobile-page=vocabulary_practice] :is(.game-completed, #regular-completion, #new-personal-best, #new-class-best, #new-best-ever) { box-sizing: border-box; height: auto; min-height: 0; max-width: 100%; padding: 16px; font-size: 20px; line-height: 1.4; }
  [data-mobile-page=vocabulary_practice] .highscores-table :is(th, td) { font-size: 16px; padding: 10px 6px; }
  [data-mobile-page=vocabulary_practice] #scroll_image_container:hover { transform: none; scale: 1; }
  [data-mobile-page] .mobile-landscape-gate { position: fixed; inset: 0; z-index: 2147483647; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); background: rgba(5, 6, 9, .98); color: white; font-family: Arial, sans-serif; text-align: center; overflow: auto; }
  [data-mobile-page] .mobile-landscape-gate[hidden] { display: none; }
  [data-mobile-page] body:has(.mobile-landscape-gate:not([hidden])) { overflow: hidden; }
  [data-mobile-page] .mobile-landscape-gate { overscroll-behavior: contain; }
  [data-mobile-page] .mobile-landscape-card { max-width: 420px; font-size: 20px; line-height: 1.5; }
  [data-mobile-page] .mobile-landscape-card h2 { font-size: 30px; line-height: 1.2; margin: 16px 0; }
  [data-mobile-page] .mobile-landscape-card a { display: inline-flex; align-items: center; min-height: 44px; color: #ffe598; padding: 8px 16px; }
  [data-mobile-page] .mobile-landscape-icon { font-size: 64px; line-height: 1; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 768px), (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) and (hover: none) and (pointer: coarse), (orientation: landscape) and (max-device-width: 600px), (orientation: landscape) and (max-device-height: 600px) {
  [data-mobile-page] :is(#top_buttons, #top_buttons_vocabulary, #top_buttons_roboteacher) { min-height: 56px; padding-top: max(6px, env(safe-area-inset-top)); margin-bottom: 6px; }
  [data-mobile-page] #logo img { max-height: 44px; }
  [data-mobile-page=vocabulary_learning] #vocabs_learning_title { font-size: 26px; margin: 0 auto 10px; }
  [data-mobile-page=vocabulary_learning] .flashcard-container { flex: 0 0 auto; padding: 0; }
  [data-mobile-page=vocabulary_learning] #vocabs_select_box_container { display: grid; grid-template-columns: minmax(160px, 28%) minmax(0, 1fr); grid-template-areas: 'select card' 'counter card' 'nav card'; align-items: center; width: 94%; gap: 10px 20px; flex: 0 0 auto; }
  [data-mobile-page=vocabulary_learning] #vocabs_select_box_form { grid-area: select; justify-self: center; }
  [data-mobile-page=vocabulary_learning] .flashcard { grid-area: card; width: 100%; max-width: none; height: clamp(160px, calc(58 * var(--mobile-svh, 1svh)), 240px); }
  [data-mobile-page=vocabulary_learning] .word-counter { grid-area: counter; justify-self: center; }
  [data-mobile-page=vocabulary_learning] .navigation { grid-area: nav; width: 100%; justify-content: center; gap: 12px; }
  [data-mobile-page=vocabulary_learning] .nav-button { min-width: 64px; }
  [data-mobile-page=reading_roboteacher] #helloUser { font-size: 26px; }
  [data-mobile-page=reading_roboteacher] #main_buttons_container { gap: 6px; padding: 0; margin-bottom: 6px; }
  [data-mobile-page=reading_roboteacher] :is(#difficulty_level_container, #today_read_counter, #total_points, #instructions_button, #show_total_list_button, #score_list_button_container) { min-width: 0; width: auto; font-size: 16px; padding: 6px 8px; }
  [data-mobile-page=reading_roboteacher] #score_list_button_container { padding: 0; }
  [data-mobile-page=reading_roboteacher] #difficulty-selection-container { box-sizing: border-box; margin: 4px auto; padding: 8px; }
  [data-mobile-page=reading_roboteacher] .difficulty-options { padding: 0; margin: 0; }
  [data-mobile-page=reading_roboteacher] #difficulty-form { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  [data-mobile-page=reading_roboteacher] .difficulty-box { width: auto; flex: 1 1 0; min-height: 140px; flex-direction: column; gap: 8px; padding: 12px; }
  [data-mobile-page=reading_roboteacher] .difficulty-text { font-size: 28px; }
  [data-mobile-page=reading_roboteacher] #chat_messages { max-height: calc(50 * var(--mobile-svh, 1svh)); min-height: 150px; }
  [data-mobile-page=reading_roboteacher] #robot_image { height: 100px; min-height: 100px; flex-basis: 100px; }
  [data-mobile-page=vocabulary_practice] body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 35%); align-content: start; align-items: start; gap: 8px 12px; padding: 60px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  [data-mobile-page=vocabulary_practice] :is(#vocabs_select_box_form, #start_game_form, #countdown_wrapper, #game_content) { grid-column: 1; width: 100%; margin: 0; }
  [data-mobile-page=vocabulary_practice] #main_container { grid-column: 2; grid-row: 1 / span 4; width: 100%; margin: 0; }
  [data-mobile-page=vocabulary_practice] #scroll_image_container { width: 100%; min-width: 220px; }
  [data-mobile-page=vocabulary_practice] .scroll-content { font-size: 14px; }
  [data-mobile-page=vocabulary_practice] :is(#my_best, #my_best_not_completed, #best_current, #best_ever, #total_points_wrapper) { font-size: 14px; padding: 2px; margin-bottom: 3px; }
  [data-mobile-page=vocabulary_practice] #english_word_wrapper { display: flex; flex-direction: column; gap: 8px; }
}
/* Keep mobile feedback compact and stationary, including dynamically shown messages. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) {
  [data-mobile-page=text_feedback] #helloUser { width: auto; max-width: 100%; margin: 4px auto 12px; min-height: 0; font-size: clamp(24px, calc(7 * var(--mobile-vw, 1vw)), 34px); line-height: 1.15; letter-spacing: .5px; white-space: nowrap; overflow-wrap: normal; }
  [data-mobile-page=text_feedback] :is(#helloUser, #robot_image, #robot_text, #view_text_container, #feedbackContainer, #select_form, #select_item) { animation: none !important; transition: none !important; transform: none !important; opacity: 1; }
  [data-mobile-page=text_feedback] #select_form { width: calc(100% - 24px); max-width: 680px; margin: 0 auto 12px; }
  [data-mobile-page=text_feedback] #select_item { font-size: 16px; padding: 8px 12px; min-height: 42px; }
  [data-mobile-page=text_feedback] #robot_container { width: calc(100% - 24px); max-width: 680px; margin: 0 auto 12px; gap: 8px; }
  [data-mobile-page=text_feedback] #robot_image { flex-direction: row; align-items: flex-start; gap: 10px; }
  [data-mobile-page=text_feedback] #robot_image img { flex: 0 0 72px; width: 72px; height: 100px; object-fit: contain; }
  [data-mobile-page=text_feedback] #robot_text { flex: 1; width: auto; padding: 10px 12px; font-size: 16px; line-height: 1.45; text-align: left; overflow-wrap: break-word; }
  [data-mobile-page=text_feedback] #view_text_container { width: calc(100% - 24px); max-width: 680px; min-height: 0; margin: 8px auto 12px; padding: 12px; border-radius: 12px; }
  [data-mobile-page=text_feedback] :is(.text_content, #feedback, #feedback .bot-message, #feedback #total-mistakes) { font-size: 17px; line-height: 1.5; }
  [data-mobile-page=text_feedback] .text_content { padding: 0; }
  [data-mobile-page=text_feedback] #feedback { margin: 12px 0; padding: 10px; }
  [data-mobile-page=text_feedback] #feedback .bot-message { margin: 0; padding: 8px; }
  [data-mobile-page=text_feedback] #feedbackButtons { width: auto; max-width: 100%; margin: 8px auto; gap: 8px; }
  [data-mobile-page=text_feedback] :is(#feedbackButton, #feedbackButtonNo, #back_to_text_btn, #recheckButton, #showPreviousFeedbackButton, #confirmRecheckButton, #cancelRecheckButton) { font-size: 16px; padding: 8px 12px; width: fit-content; letter-spacing: .5px; }
  [data-mobile-page=writing_home] :is(#deadline_container, #deadline, #days_remaining, #days_remaining_late) { margin: 0; }
  [data-mobile-page=writing_home] #practise_status_available { width: 100%; box-sizing: border-box; margin: 0; }
  [data-mobile-page=writing_text] .writing-access-overlay { background: rgba(5, 6, 9, .98); padding: 16px; }
  [data-mobile-page=writing_text] .writing-access-panel { font-family: Arial, sans-serif; background: #111217; color: #fff; border: 1px solid #68616a; border-radius: 14px; box-shadow: 0 12px 36px #0008; width: min(100%, 440px); min-height: 0; padding: 22px; }
  [data-mobile-page=writing_text] .writing-access-panel h2 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
  [data-mobile-page=writing_text] .writing-access-panel p { font-size: 17px; line-height: 1.4; margin-bottom: 16px; }
  [data-mobile-page=writing_text] #startFullscreenBtn { background: #f4e4b6; color: #19150e; border: 1px solid #b79a55; border-radius: 7px; min-height: 44px; padding: 8px 24px; font-size: 22px; }
  [data-mobile-page=writing_text] #writing-security-message:empty { display: none; }
  [data-mobile-page=writing_text] #writing-security-message { font-size: 15px; min-height: 0; margin-top: 12px; color: #e2c99b; }
}
/* Desktop-site mode still needs phone-sized forms, not legacy vh/grid minimums. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) {
  [data-mobile-page=create_class] :is(#class-box-1, #class-box-2) { min-width: 0; max-width: 100%; font-size: 18px; }
  [data-mobile-page=create_class] :is(#create-class-form-1, #create-class-form-2, .edit-form, .class-info) { width: 100%; max-width: 100%; }
  [data-mobile-page=create_class] :is(#class_name_1_input, #class_name_2_input, .class-name-input) { width: 100%; min-width: 0; }
  [data-mobile-page=teacher_home] #hello_2 { box-sizing: border-box; width: 100%; max-width: 100%; }
  [data-mobile-page=admin_linkedin_performance] :is(.setup-card, .connect-card, .metric-grid, .chart-grid, .post-library) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-mobile-page=admin_linkedin_performance] .breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-mobile-page=admin_migrations] :is(.migration-row, .result-row) { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
  [data-mobile-page=castle_shop] #shop-title { font-size: 34px; line-height: 1.2; }
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) {
  [data-mobile-page=writing_home] #total_points { display: block; width: fit-content; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 18px; letter-spacing: 0; text-align: center; margin: 0 auto 12px; overflow-wrap: normal; }
  [data-mobile-page=writing_home] #total_points_number { white-space: nowrap; }
  [data-mobile-page=writing_home] #show_total_list_button { margin: 0 auto 12px; }
  [data-mobile-page=writing_home] .view_text_button { margin: 0 auto 8px; }
  [data-mobile-page=writing_home] .text_feedback_button { margin: 0 auto 12px; }
}
/* Rotation screen: identical to the Games gate (games_birds_with_letters.css).
 * Same sizes and units as the Games; the root zoom is cancelled on the gate. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) {
  /* Cancel the Desktop-site root zoom so the gate renders exactly like the Games gate. */
  [data-mobile-page] .mobile-landscape-gate,
  [data-mobile-page=writing_text] .writing-access-overlay { background: #000; padding: 24px; zoom: calc(1 / var(--mobile-phone-scale, 1)); }
  [data-mobile-page] .mobile-landscape-card,
  [data-mobile-page=writing_text] .writing-access-panel { box-sizing: border-box; width: min(520px, 94vw); max-width: none; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; }
  [data-mobile-page] .mobile-landscape-card h2,
  [data-mobile-page=writing_text] .writing-access-panel h2 { margin: 0; color: #fff; font-family: 'Cinzel', serif; font-size: clamp(28px, 8vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: normal; }
  [data-mobile-page] .mobile-landscape-card p,
  [data-mobile-page=writing_text] .writing-access-panel p { max-width: 34rem; margin: 0; color: #fff; font-family: Arial, sans-serif; font-size: clamp(17px, 4.8vw, 23px); line-height: 1.45; }
  [data-mobile-page] .orientation-phone-animation { position: relative; flex: 0 0 auto; box-sizing: border-box; width: 64px; height: 104px; border: 5px solid #fff; border-radius: 12px; transform-origin: center; animation: orientation-phone-turn 2.2s ease-in-out infinite; }
  [data-mobile-page] .orientation-phone-animation::before { content: ''; position: absolute; top: 7px; left: 50%; width: 20px; height: 3px; border-radius: 999px; background: #fff; transform: translateX(-50%); }
  [data-mobile-page] .orientation-phone-animation::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; transform: translateX(-50%); }
  [data-mobile-page] .orientation-phone-screen { position: absolute; inset: 17px 7px; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 3px; }
}
/* The Writing entry panel has a real button: keep it phone-sized under the root zoom. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px), (max-device-width: 600px), (max-device-height: 600px) {
  [data-mobile-page=writing_text] .writing-access-overlay { zoom: 1; }
  [data-mobile-page=writing_text] .writing-access-panel { width: min(520px, calc(94 * var(--mobile-vw, 1vw))); }
  [data-mobile-page=writing_text] .writing-access-panel h2 { font-size: clamp(28px, calc(8 * var(--mobile-vw, 1vw)), 42px); }
  [data-mobile-page=writing_text] .writing-access-panel p { font-size: clamp(17px, calc(4.8 * var(--mobile-vw, 1vw)), 23px); }
}
@keyframes orientation-phone-turn {
  0%, 24% { transform: rotate(0deg); }
  48%, 76% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { [data-mobile-page] .orientation-phone-animation { animation: none; transform: rotate(90deg); } }