/* ============================================================ MOBILE LAYOUT ------------------------------------------------------------ The single breakpoint in the whole project: narrow screen OR coarse pointer (a finger). Do not introduce other width media queries. Layout bottom-up: mode switcher → meter → the "ТЕСТ ЛЕКАРСТВА" button. All three live in #bottomBar, which becomes a flex column here, so the offsets are not hard-coded and do not drift when the hint text changes the meter's height. ============================================================ */ @media (max-width: 820px), (pointer: coarse){ /* ---------- turn the mobile-only elements on ---------- */ .mobileOnly{display:block} #modeBar{display:flex} /* ---------- header: compact, one line ---------- */ #hdr{top:6px;left:6px;right:6px;padding:8px 10px;gap:8px} #hdrText{flex:1;min-width:0} #hdr h1{font-size:12px;letter-spacing:1.5px} #hdrSub{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #hdrScore{font-size:10px;color:var(--cyan);letter-spacing:1px;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iconBtn{width:44px;height:44px;font-size:19px} /* at least 44px for a finger */ /* ---------- panels that do not exist on a phone ---------- */ /* #score is collapsed into #hdrScore, #lb opens from the sheet's 🏆 button, #help described mouse controls — on a touch device it is simply wrong */ #score, #lb, #help{display:none} /* ---------- the bottom stack ---------- */ #bottomBar{position:fixed;z-index:6;left:6px;right:6px;bottom:0; display:flex;flex-direction:column;gap:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom))} /* the children stop positioning themselves — the stack lays them out */ #meter, #actions{position:static;left:auto;right:auto;bottom:auto; transform:none;width:auto;max-width:none} #meter{padding:9px 12px} #mission{font-size:11px;margin-bottom:7px;padding-bottom:7px} #hint{font-size:10.5px} .mrow{font-size:11px} #actions{padding:0;border:none;background:none;box-shadow:none;backdrop-filter:none} #btnDock{width:100%;padding:15px 16px;font-size:15px} /* ---------- mode switcher ---------- */ #modeBar{gap:6px} #modeBar button{flex:1;min-height:44px;padding:9px 4px;font-size:11px;letter-spacing:.5px; background:var(--panel);color:#7f9cc9;border:1px solid var(--line);border-radius:12px; backdrop-filter:blur(10px)} #modeBar button.on{background:linear-gradient(90deg,rgba(34,224,255,.20),rgba(161,91,255,.20)); color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(33,224,255,.25)} /* ---------- bottom sheet with the secondary buttons ---------- */ #actionsRest{position:fixed;z-index:71;left:0;right:0;bottom:0; padding:14px 12px calc(18px + env(safe-area-inset-bottom)); gap:10px;border-radius:18px 18px 0 0; background:linear-gradient(160deg,#0b1230,#0a0e22);border-top:1px solid #2a3a74; box-shadow:0 -8px 40px rgba(0,0,0,.6); transform:translateY(110%);transition:transform .25s ease; max-height:80vh;overflow:auto} #actionsRest.open{transform:none} #actionsRest button{min-height:48px;font-size:14px} #sheetBack.show{display:block;position:fixed;inset:0;z-index:70; background:rgba(2,4,12,.6);backdrop-filter:blur(2px)} /* The sheet is nested inside #bottomBar, and #bottomBar is position:fixed — i.e. its own stacking context, so the z-index:71 above cannot escape it. Left alone, the scrim (z:70, a direct child of ) paints over the sheet and a tap on ☰ only blurs the screen. Lift the whole bar above the scrim while the sheet is open; the sheet covers the bar's own panels. */ body.sheetOpen #bottomBar{z-index:71} /* ---------- leaderboard as a modal ---------- */ #lb.asModal{display:block;position:fixed;z-index:72;left:12px;right:12px;top:50%; transform:translateY(-50%);width:auto;padding:18px 20px} #lb.asModal ol{font-size:15px;line-height:2.1} /* ---------- full-screen modals ---------- */ #tutCard, #levelsCard, #coachDoneCard{width:calc(100vw - 12px);max-height:88vh; overflow:auto;padding:20px 16px;border-radius:16px} #levelGrid{grid-template-columns:1fr} #tutBody{font-size:13.5px;min-height:0} #tutSkip, #levelsClose{min-width:44px;min-height:44px;font-size:13px; display:flex;align-items:center;justify-content:flex-end;top:8px;right:10px} /* The ✕ control is absolutely positioned in the card's top-right corner, where a title that wraps (and its width differs per language) runs underneath it. On a phone put it in the flow instead — its own right-aligned row above the title, so no overlap is possible at any label length — and give it a chip so it reads as a button on the dark card rather than as dim grey text. */ #levelsCard{display:flex;flex-direction:column} #levelsClose{position:static;align-self:flex-end;flex:none;margin-bottom:6px; justify-content:center;padding:0 14px;border-radius:11px; background:#0e1738;border:1px solid var(--line);color:var(--txt)} .cdPreviewWrap{height:150px} /* ---------- coach: full-width narration bubble ---------- */ #coach{left:6px;right:6px;width:auto;transform:translateY(14px); bottom:calc(6px + env(safe-area-inset-bottom));padding:14px 16px 16px} #coach.show{transform:none} #coachText{font-size:13px;min-height:0} /* during onboarding the mode switcher only appears when it is actually needed (step 3), otherwise the narration bubble covers it */ body.coaching #modeBar{display:none} body.coaching.coach-modes #modeBar{display:flex} /* styles.css hides the whole #actions panel until the final TEST step. On a phone the ☰ sheet lives inside that panel and hides itself with a transform, so that rule would leave ☰ opening an empty, zero-height sheet. Hide only the TEST button here — that is what the rule is actually about. */ body.coaching #actions{display:flex !important} body.coaching #btnDock{display:none} body.coaching.coach-actions #btnDock{display:block} /* ---------- study-mode tooltip — as a bottom sheet ---------- */ #tip.sheet{left:6px !important;right:6px !important;top:auto !important; bottom:calc(6px + env(safe-area-inset-bottom)) !important; max-width:none;font-size:13px} /* ---------- toast ---------- */ #toast{width:calc(100vw - 24px);font-size:15px;padding:14px 16px; white-space:normal;text-align:center;letter-spacing:1px} } /* ---------- landscape: almost no vertical room ---------- */ @media (max-height: 500px) and (pointer: coarse){ #mission{display:none} #hdrScore{display:none} #meter{padding:7px 12px} #hint{display:none} #btnDock{padding:11px 16px;font-size:13px} #modeBar button{min-height:40px;padding:7px 4px} }