, so scoping these to .mscreen left its artwork unconstrained and the images blew up to natural size, overlapping the rows. */ .cv{ position:relative; overflow:hidden; background-size:cover; background-position:center; flex:none; } .cv img.cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; opacity:0; transition:opacity .35s var(--ease); } .cv img.cover-img.loaded{ opacity:1; } /* ---- screen header ---- */ .m-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; } .m-greet{ font-size:25px; font-weight:800; letter-spacing:-.02em; color:var(--text); line-height:1.15; max-width:calc(100vw - 120px); } .m-h1{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--text); margin-bottom:16px; } .m-acts{ display:flex; align-items:center; gap:10px; flex:none; } .m-ibtn{ position:relative; width:38px; height:38px; border-radius:50%; background:var(--surface-3); display:grid; place-items:center; color:var(--text-2); border:none; cursor:pointer; } .m-ibtn .ic{ width:20px; height:20px; } .m-av{ width:38px; height:38px; border-radius:50%; background:var(--accent-grad); display:grid; place-items:center; color:#fff; font-weight:700; cursor:pointer; flex:none; overflow:hidden; } .m-prof-av{ cursor:pointer; overflow:hidden; } .m-dot{ position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:#FF5A7A; border:2px solid var(--surface-3); } /* ---- filter chips (jump to a section) ---- */ .m-chips{ display:flex; gap:8px; overflow-x:auto; margin:0 -13px 18px; padding:0 13px 2px; scrollbar-width:none; } .m-chips::-webkit-scrollbar{ display:none; } .m-chip{ flex:none; padding:9px 18px; border-radius:999px; border:none; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:-.01em; background:var(--surface-3); color:var(--text-2); transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--spring); } .m-chip:active{ transform:scale(.94); } .m-chip.on{ background:var(--accent); color:#fff; box-shadow:0 6px 16px -6px var(--accent); } /* ---- hero wave card ---- */ .m-hero{ position:relative; border-radius:22px; padding:22px; margin-bottom:22px; overflow:hidden; background:linear-gradient(125deg,#3A1C8C,#6C3CE0 55%,#9D5BE0); color:#fff; } .m-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(300px 160px at 90% 0%, rgba(255,255,255,.22), transparent 60%); } .m-hero > *{ position:relative; } .m-hero .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; opacity:.85; } .m-hero h1{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin-top:6px; } .m-hero p{ font-size:13.5px; opacity:.88; margin-top:6px; line-height:1.4; } .m-hero .hrow{ display:flex; gap:10px; margin-top:18px; } .m-hbtn{ border:none; border-radius:999px; padding:11px 20px; font-weight:700; font-size:14px; font-family:inherit; display:inline-flex; align-items:center; gap:8px; cursor:pointer; } .m-hbtn .ic{ width:16px; height:16px; } .m-hbtn.white{ background:#fff; color:#3A1C8C; } .m-hbtn.glass{ background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px); } /* ---- quick 2x2 grid ---- */ .m-quick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:26px; } .m-qtile{ display:flex; align-items:center; gap:10px; background:var(--surface-3); border-radius:12px; overflow:hidden; cursor:pointer; } .m-qtile .cv{ width:48px; height:48px; flex:none; } .m-qtile .cv > div{ width:100%; height:100%; display:grid; place-items:center; } .m-qname{ font-size:13px; font-weight:700; color:var(--text); padding-right:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---- horizontal section rows ---- */ /* More air between sections and a more confident title weight — the page reads as edited groups rather than one continuous list. */ .m-sec{ margin-bottom:34px; } .m-sec-t{ font-size:21px; font-weight:800; letter-spacing:-.025em; color:var(--text); margin-bottom:16px; } .m-hs{ display:flex; gap:12px; overflow-x:auto; margin:0 -13px; padding:0 13px; } .m-card{ width:130px; flex:none; cursor:pointer; } .m-card .cv{ width:130px; height:130px; border-radius:14px; } .m-card.round .cv{ border-radius:65px; } .m-card .ct{ font-size:14px; font-weight:600; color:var(--text); margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m-card .cs{ font-size:12.5px; color:var(--text-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m-card.round .ct, .m-card.round .cs{ text-align:center; } /* ---- search box + genres ---- */ .m-searchbox{ display:flex; align-items:center; gap:10px; background:var(--surface-3); border-radius:14px; padding:13px 16px; margin-bottom:20px; } .m-searchbox .ic{ width:21px; height:21px; color:var(--text-3); } .m-searchbox input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:15.5px; font-family:inherit; } .m-searchbox input::placeholder{ color:var(--text-3); } /* Artist page + artist cards in mobile search */ .m-artist-av{ position:relative; width:150px; height:150px; border-radius:24px; overflow:hidden; display:grid; place-items:center; } .m-artist-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .m-artist-av span{ font-size:52px; font-weight:800; color:#fff; } .m-artist-row{ display:flex; gap:14px; overflow-x:auto; margin:0 -20px 20px; padding:0 20px 4px; } .m-artist-card{ flex:none; width:88px; text-align:center; } .m-artist-av.sm{ width:88px; height:88px; border-radius:50%; } .m-artist-av.sm span{ font-size:30px; } .m-artist-name{ margin-top:8px; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ta-link{ cursor:pointer; } .m-genres{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .m-genre{ position:relative; height:92px; border-radius:14px; overflow:hidden; padding:14px; cursor:pointer; } .m-genre h3{ color:#fff; font-size:16px; font-weight:700; position:relative; z-index:2; } .m-genre .genre-ic{ position:absolute; right:10px; bottom:6px; z-index:1; font-size:36px; line-height:1; opacity:.8; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); pointer-events:none; user-select:none; } /* ---- track rows ---- .track ships a 6-column desktop grid (~400px of fixed columns). On a phone that cannot fit, the grid blows out and the artwork stretches across the row. Collapse it to a simple flex line and drop the desktop-only columns. */ .track{ display:flex !important; align-items:center; gap:12px; grid-template-columns:none !important; padding:8px 4px; width:100%; min-width:0; overflow:hidden; } .track .idx, .track .talbum, .track .tdur, .track .src-tag{ display:none !important; } .track .tcover{ width:48px !important; height:48px !important; flex:0 0 48px !important; border-radius:10px; overflow:hidden; position:relative; } .track .tcover img, .track .tcover .cover-img{ width:100% !important; height:100% !important; object-fit:cover; border-radius:inherit; } .track .tinfo{ flex:1 1 auto; min-width:0; } .track .tinfo .tt, .track .tinfo .ta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .track .tinfo .tt{ font-size:14.5px; } .track .tinfo .ta{ font-size:12.5px; } .track .addpl, .track .more{ flex:none; width:34px; height:34px; } /* ---- library tabs + list rows ---- */ .m-ltabs{ display:flex; gap:8px; overflow-x:auto; margin:0 -20px 18px; padding:0 20px; } .m-ltab{ flex:none; padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; font-family:inherit; border:none; cursor:pointer; background:var(--surface-3); color:var(--text-2); } .m-ltab.on{ background:var(--text); color:var(--bg); } .m-lrow{ display:flex; align-items:center; gap:14px; padding:10px 4px; cursor:pointer; content-visibility:auto; contain-intrinsic-size:auto 76px; } .m-lrow .cv{ width:56px; height:56px; border-radius:12px; flex:none; } .m-lrow .cv > div{ width:100%; height:100%; display:grid; place-items:center; } .m-lrow .lt{ font-size:16px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m-lrow .ls{ font-size:13px; color:var(--text-3); margin-top:2px; } .m-lrow .ic{ width:20px; height:20px; color:var(--text-3); } /* ---- track rows (playlist / liked) ---- */ .m-trow{ display:flex; align-items:center; gap:8px; padding:9px 4px; border-radius:12px; cursor:pointer; /* Списки бывают по 40+ строк. Строки за пределами экрана браузер теперь пропускает при пересчёте стилей и отрисовке — прокрутка ровнее. */ content-visibility:auto; contain-intrinsic-size:auto 64px; } .m-trow.cur{ background:var(--hover); } .m-trow .cv{ width:46px; height:46px; border-radius:9px; flex:none; } .m-trow .tw{ flex:1; min-width:0; } .m-trow .tt{ font-size:15px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m-trow.cur .tt{ color:var(--accent-2); } .m-trow .ta{ font-size:13px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m-trow .lk{ padding:4px; flex:none; color:var(--text-3); cursor:pointer; } .m-trow .lk.on{ color:var(--accent); } .m-trow .lk .ic{ width:19px; height:19px; } .m-trow .maddpl{ width:34px; height:34px; border-radius:50%; border:none; background:var(--accent-soft); color:var(--accent-2); display:grid; place-items:center; flex:none; cursor:pointer; } .m-trow .maddpl .ic{ width:18px; height:18px; } .m-trow .mmore{ width:34px; height:34px; border-radius:50%; border:none; background:transparent; color:var(--text-3); display:grid; place-items:center; flex:none; cursor:pointer; } .m-trow .dur{ font-size:13px; color:var(--text-3); min-width:34px; text-align:right; flex:none; } /* track action menu → bottom sheet */ .ctx-menu, .ctx-menu.ctx-sheet{ position:fixed !important; left:10px !important; right:10px !important; top:auto !important; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px) !important; min-width:0; width:auto; max-height:64vh; border-radius:20px; padding:8px; z-index:520 !important; } .ctx-menu button{ padding:13px 14px; font-size:15px; } .ctx-menu button svg{ width:20px; height:20px; } .ctx-label{ padding:10px 14px 5px; } /* ---- playlist detail ---- */ .m-pl-back{ margin-bottom:4px; } .m-pl-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; } .m-pl-hero > .cv, .m-pl-cover{ width:min(52vw, 220px) !important; height:min(52vw, 220px) !important; flex:none; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 24px 50px -16px rgba(20,8,50,.5); } .m-pl-cover.liked{ display:grid; place-items:center; background:linear-gradient(135deg,#A78BFA,#6C3CE0); } .m-pl-cover-fallback{ display:grid; place-items:center; width:100%; height:100%; } .m-pl-hero > .cv img.cover-img, .m-pl-cover img.cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; opacity:0; transition:opacity .35s var(--ease); } .m-pl-hero > .cv img.cover-img.loaded, .m-pl-cover img.cover-img.loaded{ opacity:1; } .m-pl-meta{ width:100%; max-width:340px; margin-top:18px; } .m-pl-kind{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--text-3); text-transform:uppercase; } .m-pl-title{ font-size:28px; font-weight:800; letter-spacing:-.03em; color:var(--text); margin-top:6px; line-height:1.1; word-break:break-word; } .m-pl-desc{ font-size:13.5px; color:var(--text-2); margin-top:8px; line-height:1.45; } .m-pl-stats{ font-size:13px; color:var(--text-3); margin-top:10px; } .m-pl-actions{ display:flex; align-items:center; justify-content:center; gap:28px; margin-top:20px; width:100%; } .m-pl-actions .sm{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--text-2); background:var(--surface-3); cursor:pointer; } .m-pl-actions .sm.on{ color:var(--accent-2); } .m-pl-actions .sm .ic{ width:22px; height:22px; } .m-pl-play{ border:none; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#7C4DE8,var(--accent)); display:grid; place-items:center; box-shadow:0 12px 26px -8px rgba(108,60,224,.6); cursor:pointer; } .m-pl-play .ic{ width:26px; height:26px; color:#fff; } .m-pl-list{ padding-top:24px; } /* ---- profile ---- */ .m-prof-top{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0 20px; } .m-prof-av-wrap{ position:relative; display:inline-block; margin-bottom:10px; } .m-prof-av{ width:96px; height:96px; border-radius:50%; background:var(--accent-grad); display:grid; place-items:center; color:#fff; font-size:38px; font-weight:800; cursor:pointer; overflow:hidden; } .m-av-badge{ position:absolute; right:-2px; bottom:-2px; width:32px; height:32px; border-radius:50%; background:var(--accent); display:grid; place-items:center; border:3px solid var(--bg); box-shadow:0 4px 12px rgba(108,60,224,.4); cursor:pointer; } .m-avatar-btn{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; background:var(--accent-soft); color:var(--accent-2); font-weight:700; font-size:14px; border:none; cursor:pointer; font-family:inherit; } .m-prof-name{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--text); margin-top:14px; } .m-prof-sub{ font-size:13.5px; color:var(--text-2); margin-top:6px; } .m-prof-sub b{ color:var(--text); } .m-seclbl{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:700; margin:26px 4px 12px; } .m-card-row{ display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface-3); border-radius:14px; margin-bottom:10px; cursor:pointer; } .m-card-row .ico{ width:42px; height:42px; border-radius:11px; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent-2); flex:none; } .m-card-row .ico .ic{ width:20px; height:20px; } .m-card-row .tw{ flex:1; min-width:0; } .m-card-row .a{ font-size:15px; font-weight:600; color:var(--text); overflow-wrap:anywhere; line-height:1.25; } .m-card-row .b{ font-size:12.5px; color:var(--text-3); margin-top:2px; overflow-wrap:anywhere; } .m-badge-go{ border:none; font-family:inherit; font-size:13px; font-weight:600; color:#fff; padding:8px 15px; border-radius:999px; background:var(--accent); cursor:pointer; flex:none; } .m-seg{ display:flex; background:var(--bg); border-radius:999px; padding:3px; gap:2px; flex:none; } .m-seg button{ border:none; font-family:inherit; padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:600; background:transparent; color:var(--text-3); cursor:pointer; white-space:nowrap; } .m-seg button.on{ background:var(--accent); color:#fff; } .m-seg3 button{ padding:7px 10px; font-size:12px; } /* Theme picker row: the 3-button segmented control is too wide to sit beside the label on a phone — it was crushing "Тема" into a vertical sliver. Let it drop onto its own full-width line below the label. */ .m-card-row{ flex-wrap:wrap; } .m-card-row .tw{ min-width:0; } .m-card-row .m-seg{ order:3; flex-basis:100%; width:100%; margin-top:12px; } .m-card-row .m-seg button{ flex:1; } .m-switch{ width:46px; height:27px; border-radius:999px; background:var(--line); position:relative; transition:.2s var(--ease); flex:none; } .m-switch.on{ background:var(--accent); } .m-switch::after{ content:''; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:.2s var(--ease); box-shadow:0 2px 5px rgba(0,0,0,.25); } .m-switch.on::after{ left:22px; } .m-empty{ text-align:center; color:var(--text-3); padding:40px 10px; font-size:14px; } /* ============================================================ mini-player (floats above tab bar) + bottom tabs + fs player ============================================================ */ .player{ position:fixed; left:10px; right:10px; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); z-index:60; overflow:hidden; display:flex; align-items:center; gap:11px; padding:10px 14px; grid-template-columns:none; border-radius:16px; background: color-mix(in srgb, var(--player-bg) 72%, transparent); /* На Android размытие пересчитывается каждый кадр прокрутки, и цена растёт с радиусом. 16px визуально почти неотличим от 30px, но заметно дешевле. */ -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); } .np-left{ flex:1; gap:12px; min-width:0; } .np-left .npc{ width:44px; height:44px; border-radius:10px; } .np-left .npmeta{ min-width:0; } .np-like, .np-addpl{ flex:none; } .np-addpl{ width:36px; height:36px; border:1.5px solid var(--fs-tint-border, rgba(108,60,224,.45)); background:var(--fs-tint-soft, var(--accent-soft)); color:var(--fs-on-tint, var(--accent-2)); box-shadow:0 4px 14px var(--fs-tint-glow, rgba(108,60,224,.25)); } .np-right{ display:none; } .np-center{ flex:none; width:auto; max-width:none; flex-direction:row; gap:0; } .np-controls{ gap:0; } .np-controls .sm{ display:none; } .np-play{ width:42px; height:42px; } /* progress = thin accent fill clipped to the rounded card top; no idle track line */ .np-progress{ position:absolute; left:0; right:0; top:0; width:auto; padding:0; gap:0; } .np-progress .tm{ display:none; } .np-progress .bar{ height:3px; border-radius:0; background:rgba(255,255,255,.1); cursor:default; } .np-progress .bar .fill{ border-radius:0; } .np-progress .bar .knob{ display:none; } /* Дорожка и на телефоне. Раньше прогресс был прижат к ВЕРХНЕЙ кромке карточки полоской в 3px — волна там читалась серой лентой, поэтому её отключали. Теперь она уходит вниз карточки во всю ширину: место под неё даёт padding-bottom у .player. В разметке .np-progress лежит внутри .np-center, так что вытащить её в поток нельзя — только absolute относительно .player. */ .player{ padding-bottom:26px; } .np-progress{ left:14px; right:14px; top:auto; bottom:7px; } .np-progress .bar.wave{ height:17px; background:none; } .np-progress .bar.wave .wave-bars{ gap:1.5px; } .np-progress .bar.wave .wave-bars i{ min-width:1.5px; max-width:2.5px; min-height:4px; transition:none; } /* 0 0 7px на каждой сыгранной палочке = 96 размытий, перерисовываемых по четыре раза в секунду. Заметнее всего бьёт по слабым Android. */ .np-progress .bar.wave .wave-played .wave-bars i{ box-shadow:none; } /* Floating pill navigation — detached from the screen edge so the app reads as layered cards rather than a flat page stuck to the bottom bezel. */ .mtabs{ display:flex; position:fixed; z-index:65; /* Flush to the physical bottom edge — no gap underneath. The gesture-bar inset becomes the bar's own bottom padding, so the icons still sit above it while the surface itself reaches the very edge of the screen. */ left:0; right:0; bottom:0; height: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--player-bg) 72%, transparent); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid var(--line); border-top-left-radius:26px; border-top-right-radius:26px; border-bottom:none; box-shadow: 0 14px 34px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); } .mtab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; position:relative; border-radius:20px; color:var(--text-3); font-size:11px; font-weight:600; background:none; border:none; cursor:pointer; transition:color .18s var(--ease), transform .18s var(--spring); } .mtab:active{ transform:scale(.93); } /* The active tab sits on its own soft pill instead of just changing colour. */ .mtab.active::before{ content:''; position:absolute; inset:6px 10px; border-radius:18px; background:var(--accent-soft); z-index:-1; } .mtab svg{ width:23px; height:23px; } .mtab.active{ color:var(--accent-2); } /* full-screen player → single column sheet */ .fsplayer{ grid-template-columns:1fr; } .fs-right{ display:none; } .fs-qopen{ display:none !important; } /* queue-collapse handle is desktop-only */ .fs-left{ justify-content:flex-start; align-items:center; padding: calc(56px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px)); gap:0; overflow-y:auto; -webkit-overflow-scrolling:touch; } .fs-cover{ width:min(58vw,280px); margin-top:8px; } .fs-trackinfo{ width:min(86vw,340px); margin-top:22px; text-align:center; } .fs-trackinfo .tt{ font-size:22px; line-height:1.2; } .fs-trackinfo .ta{ font-size:15px; margin-top:8px; } .fs-track-actions{ margin-top:18px; gap:18px; } .fs-like, .fs-addpl{ width:50px; height:50px; } .fs-progress{ width:min(86vw,340px); margin-top:20px; } .fs-controls{ margin-top:22px; gap:22px; } .fs-controls .fs-play{ width:62px; height:62px; background:#fff !important; color:#111 !important; } .fs-controls .fs-play svg{ width:26px; height:26px; } .fs-controls button svg{ width:23px; height:23px; } .fs-close{ top: calc(10px + env(safe-area-inset-top, 0px)); left:50%; right:auto; transform:translateX(-50%); padding:10px 20px 10px 16px; box-shadow:0 8px 28px rgba(0,0,0,.35); } /* Phone GPUs choke on a 100px blur: halving it keeps the same look but makes the sheet slide smoothly instead of stepping frame by frame. */ .fsplayer .ambient{ filter: blur(52px) saturate(150%) brightness(.65); } .fsplayer .ambient::after{ filter: blur(64px) saturate(160%) brightness(.7); } .fsplayer::before{ -webkit-backdrop-filter:none; backdrop-filter:none; } /* Grab handle — the affordance for "drag this sheet down to close". */ .fsplayer::after{ content:''; position:absolute; z-index:3; left:50%; transform:translateX(-50%); top: calc(8px + env(safe-area-inset-top, 0px)); width:38px; height:4px; border-radius:999px; background:rgba(255,255,255,.34); pointer-events:none; } /* The pill button moves below the handle so they don't collide. */ .fs-close{ top: calc(22px + env(safe-area-inset-top, 0px)); } .fs-close-label{ display:inline; } /* the top "⌄ Свернуть" already collapses the player; the bottom duplicate fell below the viewport and wasn't tappable — drop it on mobile */ .fs-minimize{ display:none !important; } .fs-close:active{ transform: translateX(-50%) scale(.96); } /* notifications panel as centered top sheet */ .notif-panel{ position:fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left:12px; right:12px; width:auto; max-height:70vh; z-index:300; } /* ============================================================ YouTube engine on mobile — must stay visible to actually play. Base: rendered but invisible (so playback can start on tap). When a YT track is open fullscreen, it becomes the cover. ============================================================ */ /* The YouTube engine stays off-screen — the player always shows the track artwork, never the video. */ #ytplayer-wrap{ position:fixed; left:-9999px; top:0; width:200px; height:120px; opacity:0; pointer-events:none; overflow:hidden; } #ytplayer-wrap iframe, #ytplayer{ width:100% !important; height:100% !important; border:0; display:block; } } @media (max-width: 760px){ /* На телефоне текст — отдельный слой поверх плеера, иначе он не помещается рядом с обложкой и управлением. */ .fs-lyrics{ position:absolute; inset:0; z-index:5; padding:calc(64px + env(safe-area-inset-top,0px)) 22px 150px; background:linear-gradient(180deg, rgba(12,8,20,.72), rgba(12,8,20,.9)); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); } .lyr{ font-size:20px; } body.karaoke .lyr{ font-size:24px; } .fs-karaoke{ position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:16px; z-index:6; } } @media (max-width: 760px){ /* Строка поиска задевалась пальцем при прокрутке и поднимала клавиатуру. Делаем её ниже и не даём растягиваться на всю высоту шапки. */ .m-searchbox{ padding:10px 14px; margin-bottom:16px; } .m-searchbox input{ font-size:15px; } }