/* ============================================================================= * 美少女數學世界 — device-responsive overlays (loaded AFTER main app stylesheet) * * Three breakpoints driven by classes on : .is-mobile / .is-tablet / .is-desktop * These styles only *enhance* the existing layout for mobile and tablet — they do * not touch desktop appearance. * ============================================================================= */ /* ---------- shared touch sizing ---------- */ html.is-touch button, html.is-touch .radio-label, html.is-touch .checkbox-item, html.is-touch input[type=text], html.is-touch input[type=password], html.is-touch input[type=number], html.is-touch select, html.is-touch textarea { min-height: 40px; font-size: 1em; } html.is-touch button.small-btn { min-height: 34px; } /* ---------- mobile ---------- */ @media (max-width: 767.98px), screen and (orientation: portrait) and (max-width: 900px){ html.is-mobile body{ padding: 6px !important; padding-top: 48px !important; } html.is-mobile .container{ padding: 12px !important; border-radius: 12px !important; box-shadow:none !important; } html.is-mobile h1{ font-size:1.25em !important; } html.is-mobile h3{ font-size:1.05em !important; } /* Settings panel — stack everything vertically, reduce whitespace */ html.is-mobile .settings-panel{ padding: 10px !important; gap: 8px !important; } html.is-mobile .setting-row{ flex-direction: column !important; gap: 8px !important; align-items: stretch !important; } html.is-mobile .form-group{ min-width: 0 !important; } html.is-mobile .toggles-group{ gap: 6px !important; } html.is-mobile .radio-label, html.is-mobile .checkbox-item{ padding: 8px 10px !important; font-size: .85em !important; } /* Tabs — horizontal scroll snap, sticky to top under the BMW topbar */ html.is-mobile .tabs{ position: sticky; top: 36px; z-index: 100; background:#fff0f5; margin: 0 -12px 12px; padding: 4px 8px; border-bottom-width: 2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } html.is-mobile .tab{ padding: 9px 12px !important; font-size:.88em !important; scroll-snap-align: start; flex: 0 0 auto; } /* Inputs — full width by default */ html.is-mobile .input-row{ flex-direction: column !important; padding: 12px !important; } html.is-mobile .col, html.is-mobile .col.narrow{ flex: 1 1 auto !important; } /* Jobs panel — full width sheet from bottom on mobile */ html.is-mobile #jobsPanel{ left: 6px !important; right: 6px !important; top: auto !important; bottom: 6px !important; width: auto !important; max-height: 60vh !important; border-radius: 14px 14px 12px 12px !important; } html.is-mobile #jobsPanel.collapsed{ max-height: 40px !important; } html.is-mobile .jp-head{ padding: 7px 10px !important; } html.is-mobile #loadingOverlay{ left: 6px; right: 6px; bottom: 6px; max-width:none; font-size:.88em; } /* Cost panel — tighter grid */ html.is-mobile .cost-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 6px !important; } html.is-mobile .cost-card .val{ font-size: 14px !important; } html.is-mobile .cost-card .lbl{ font-size: 10px !important; } /* History cards — denser */ html.is-mobile .history-card{ padding: 11px !important; } html.is-mobile pre.latex-code{ font-size:.78em !important; max-height: 340px !important; } html.is-mobile .history-top-row{ flex-direction: column; gap: 8px; } html.is-mobile .history-checkbox{ transform: scale(1.6); align-self:flex-start; } /* Course builder — stack drag blocks */ html.is-mobile .course-block{ flex-wrap: wrap; } html.is-mobile .block-inputs{ flex-direction: column !important; align-items: stretch !important; } /* Modal — full screen sheet */ html.is-mobile .qa-modal{ padding: 0; } html.is-mobile .qa-card{ width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; } /* Storage meter top-right widget — wrap underneath title */ html.is-mobile .storage-meter{ align-items: stretch; min-width: 0; width: 100%; } html.is-mobile .storage-bar-bg{ width: 100% !important; } /* Hide background animation on mobile for perf */ html.is-mobile body::before, html.is-mobile body::after{ display:none !important; } } /* ---------- tablet ---------- */ @media (min-width: 768px) and (max-width: 1179.98px){ html.is-tablet body{ padding: 12px !important; padding-top: 44px !important; } html.is-tablet .container{ padding: 18px !important; } html.is-tablet .setting-row{ gap: 10px !important; } html.is-tablet .form-group{ min-width: 180px !important; } html.is-tablet #jobsPanel{ width: 300px !important; } html.is-tablet .cost-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; } html.is-tablet .tabs{ position: sticky; top: 36px; z-index: 90; background: rgba(255,240,245,.95); } } /* ---------- desktop polish (subtle) ---------- */ @media (min-width: 1180px){ html.is-desktop body{ padding-top: 24px; } } /* ---------- iOS safe-area ---------- */ @supports(padding:max(0px)){ body{ padding-left: max(8px, env(safe-area-inset-left)); padding-right:max(8px, env(safe-area-inset-right)); padding-bottom:max(8px, env(safe-area-inset-bottom)); } #bmw-topbar{ top: max(8px, env(safe-area-inset-top)) !important; } }