/* Phone-only home; the original service-owned library remains the action source. */
.vv-mobile-home{display:none}
@media(max-width:700px){
body.vv-phone-home{background:#070d18;overflow:hidden!important}
body.vv-phone-home>header{display:none!important}
body.vv-phone-home>main{padding:0!important;margin:0!important;width:100%!important;max-width:none!important;height:100dvh!important}
body.vv-phone-home #home-screen{display:block!important;height:100dvh!important;min-height:100dvh!important;padding:0!important;margin:0!important}
body.vv-phone-home #home-screen>.library-sidebar,body.vv-phone-home #home-screen>.home-content{display:none!important}
.vv-mobile-home{display:flex;position:relative;isolation:isolate;flex-direction:column;align-items:stretch;min-height:100dvh!important;height:100dvh!important;max-height:100dvh;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 26px max(14px,env(safe-area-inset-bottom));box-sizing:border-box;color:#e8fbfa;scrollbar-width:none}
.vv-mobile-backdrop{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% 22%,#2d254f 0,transparent 48%),linear-gradient(155deg,#071824,#101324 50%,#130c22)}
.vv-mobile-backdrop:before,.vv-mobile-backdrop:after{content:'';position:absolute;width:140%;height:72%;left:-35%;top:22%;border-radius:45%;background:radial-gradient(ellipse at 50% 50%,#65dfcb20,transparent 63%);transform:rotate(-28deg);animation:vv-mobile-drift 18s ease-in-out infinite alternate;will-change:transform}
.vv-mobile-backdrop:after{left:15%;top:4%;background:radial-gradient(ellipse at 50% 50%,#cb69c52a,transparent 62%);animation-delay:-9s}
@keyframes vv-mobile-drift{to{transform:translate3d(8%,14%,0) rotate(12deg)}}
.vv-mobile-home[data-paused=true] .vv-mobile-backdrop:before,.vv-mobile-home[data-paused=true] .vv-mobile-backdrop:after{animation-play-state:paused}
.vv-mobile-top{display:flex;align-items:center;justify-content:space-between;font:10px Consolas,monospace;letter-spacing:.28em;color:#a6d7d6;min-height:34px}
body .vv-mobile-profile{width:36px;height:36px;border:1px solid #74ccc955;border-radius:50%;background:#13283088;color:#aaf2e5;font:21px system-ui;padding:0}
.vv-mobile-clock{text-align:center;margin:30px 0 24px;flex:0 0 auto}
.vv-mobile-clock time{font:300 clamp(66px,18vw,92px)/1 system-ui;letter-spacing:-.07em;color:#ecfcf9;text-shadow:0 0 42px #62ddd72b}
.vv-mobile-clock p{margin:12px 0 0;font:12px system-ui;letter-spacing:.06em;color:#b7c2d2}
#vv-mobile-music{min-height:90px;margin-bottom:30px;border:1px solid #91cedd22;border-radius:22px;background:linear-gradient(125deg,#26404a66,#201d3544);box-shadow:0 12px 35px #03071133;backdrop-filter:blur(14px)}
.vv-mobile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;align-items:start}
body .vv-mobile-tile{display:flex;flex-direction:column;align-items:center;gap:11px;min-width:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;animation:none!important;color:#e8edf3}
.vv-mobile-tile strong{font:11px system-ui;font-weight:500;letter-spacing:.01em}
.vv-mobile-icon{display:flex;align-items:center;justify-content:center;width:62px;height:62px;max-width:100%;aspect-ratio:1;border-radius:19px;border:1px solid #a7d6e636;background:linear-gradient(145deg,#30495099,#24253eaa);box-shadow:inset 0 1px #efffff18,0 8px 25px #03061355;font:36px system-ui;color:#90efdf}
.vv-mobile-folder{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;box-sizing:border-box}
.vv-mobile-folder i{width:15px;height:15px;border-radius:5px;background:linear-gradient(145deg,#89e4da,#286b79);box-shadow:0 2px 7px #0004}
.vv-mobile-folder .pink{background:linear-gradient(145deg,#e09ace,#8d436f)}.vv-mobile-folder .violet{background:linear-gradient(145deg,#af9fe7,#655193)}.vv-mobile-folder .mint{background:linear-gradient(145deg,#bddfc4,#588b89)}
.vv-mobile-chat img{width:46px;height:46px;object-fit:contain}.vv-mobile-game{background:linear-gradient(145deg,#342b4d,#582947);color:#ffd8f1}.vv-mobile-party{background:linear-gradient(145deg,#153b41,#234a58);color:#99ffe6}
.vv-mobile-dock{display:flex;gap:10px;margin-top:auto;padding-top:44px;justify-content:center}
body .vv-mobile-dock button{flex:1;min-height:44px;max-width:180px;font:11px system-ui;letter-spacing:.02em;background:#25354470;border:1px solid #9acecc22;border-radius:24px;box-shadow:none}
.vv-mobile-hint{text-align:center;color:#729799;font:9px system-ui;letter-spacing:.05em;margin:17px 0 2px}
.vv-mobile-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:88dvh;box-sizing:border-box;padding:0;border:1px solid #76a8ac66;border-bottom:0;border-radius:26px 26px 0 0;background:linear-gradient(145deg,#142933f7,#191729fa);color:#e2f5f2;box-shadow:0 -20px 70px #0006;overflow:hidden}
.vv-mobile-sheet::backdrop{background:#02061399;backdrop-filter:blur(6px)}
.vv-mobile-sheet>header{position:static;display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid #7ca9ac22;background:none;font:14px system-ui;letter-spacing:0}
.vv-mobile-sheet h2{margin:0;font:20px system-ui;color:#e3f6f3}
.vv-mobile-sheet>header button{width:38px;height:38px;padding:0;border:0;background:#72839122;font:24px system-ui;border-radius:50%;color:#e3f6f3}
.vv-mobile-sheet-body{padding:20px 20px max(24px,env(safe-area-inset-bottom));overflow-y:auto;max-height:calc(88dvh - 80px);box-sizing:border-box;overscroll-behavior:contain}
.vv-mobile-sheet[data-sheet=games]{inset:0 0 0 auto;width:min(86vw,360px);height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;border-radius:26px 0 0 26px;border-bottom:1px solid #76a8ac66}
.vv-mobile-sheet[open][data-sheet=games]{display:flex;flex-direction:column}
.vv-mobile-sheet[data-sheet=games]>header{flex:0 0 auto;padding-top:max(19px,env(safe-area-inset-top));padding-right:max(22px,env(safe-area-inset-right))}
.vv-mobile-sheet[data-sheet=games] .vv-mobile-sheet-body{flex:1 1 auto;min-height:0;max-height:none;padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.vv-mobile-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body .vv-mobile-app{display:flex;align-items:center;flex-direction:column;gap:8px;padding:13px 5px;border:1px solid #7cc8d222;background:#1a33413d;min-height:98px;border-radius:15px;color:#d8eeed;font:11px system-ui;overflow-wrap:anywhere;box-shadow:none}
.vv-mobile-app img{width:46px;height:46px;object-fit:contain}.vv-mobile-app small{font:8px/1.3 system-ui;color:#aaa3b5}.vv-mobile-app:disabled{opacity:.5}
.vv-mobile-sheet input[type=search]{width:100%;box-sizing:border-box;padding:13px;margin-bottom:18px;border:1px solid #65b7b955;border-radius:13px;background:#061a24;color:#e2f6f6;font:15px system-ui}
.vv-mobile-empty{font:13px/1.7 system-ui;color:#b5c6ce;grid-column:1/-1}
@media(max-height:700px){.vv-mobile-clock{margin:19px 0}.vv-mobile-clock time{font-size:64px}#vv-mobile-music{margin-bottom:22px}.vv-mobile-dock{padding-top:24px}}
@media(prefers-reduced-motion:reduce){.vv-mobile-backdrop:before,.vv-mobile-backdrop:after{animation:none!important;will-change:auto}}
}

/* Stationary wallpaper; content and app surfaces move independently. */
@media(max-width:700px){
.vv-mobile-backdrop{position:fixed;inset:0;transform:none}
.vv-mobile-backdrop:before,.vv-mobile-backdrop:after{animation:none;will-change:auto}
.vv-mobile-home{width:100%;overscroll-behavior:contain;overflow-x:hidden}
.vv-mobile-home>.vv-mobile-top,.vv-mobile-home>.vv-mobile-clock,.vv-mobile-home>#vv-mobile-music,.vv-mobile-home>.vv-mobile-grid,.vv-mobile-home>.vv-mobile-dock,.vv-mobile-home>.vv-mobile-hint{flex-shrink:0}
#vv-mobile-music{height:auto;min-height:90px;overflow:hidden}
.vv-music-widget{box-sizing:border-box;width:100%;min-width:0}
.vv-mobile-sheet[open]{animation:vv-surface-in .36s cubic-bezier(.16,1,.3,1)}
.vv-mobile-sheet::backdrop{backdrop-filter:none;background:#02061355}
.vv-mobile-tile{transition:transform .2s ease,opacity .2s ease}.vv-mobile-tile:active{transform:scale(.92)}
}
@keyframes vv-surface-in{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vv-mobile-sheet[open]{animation:none}.vv-mobile-tile{transition:none}}

/* ===== Phone home on every launcher theme (tokens from tokens.css) =====
   Classic themes keep their CSS background; scenic themes show their scene (or still) behind a
   soft scrim so the clock, tiles and dock stay readable; Paper flips to light. */
@media(max-width:700px){
html.vv-alt:not(.vvt-css) body.vv-phone-home{background:transparent!important}
html.vv-alt .vv-mobile-backdrop{background:none}
html.vv-alt .vv-mobile-backdrop:before,html.vv-alt .vv-mobile-backdrop:after{display:none}
html[data-vv-group=scenic] .vv-mobile-backdrop{background:linear-gradient(color-mix(in srgb,var(--vv-bg) 62%,transparent),color-mix(in srgb,var(--vv-bg) 30%,transparent) 38%,color-mix(in srgb,var(--vv-bg) 30%,transparent) 62%,color-mix(in srgb,var(--vv-bg) 70%,transparent))}
html.vv-alt .vv-mobile-home{color:var(--vv-ink)}
html.vv-alt .vv-mobile-top{color:var(--vv-ink-2);font-family:var(--vv-font-ui);letter-spacing:.18em}
html.vv-alt .vv-mobile-clock time{color:var(--vv-ink);text-shadow:none}
html.vv-alt .vv-mobile-clock p{color:var(--vv-ink-2)}
html.vv-alt #vv-mobile-music{background:color-mix(in srgb,var(--vv-surface) 88%,transparent);border-color:var(--vv-edge);box-shadow:var(--vv-shadow-2);backdrop-filter:none}
html.vv-alt body .vv-mobile-tile{color:var(--vv-ink)}
html.vv-alt .vv-mobile-icon{background:var(--vv-surface-2);border-color:var(--vv-edge-strong);color:var(--vv-accent-text);box-shadow:var(--vv-shadow-1)}
html.vv-alt .vv-mobile-game,html.vv-alt .vv-mobile-party{background:var(--vv-raised);color:var(--vv-accent-text)}
html.vv-alt body .vv-mobile-dock button{background:color-mix(in srgb,var(--vv-surface) 90%,transparent);border-color:var(--vv-edge-strong);color:var(--vv-ink)}
html.vv-alt .vv-mobile-hint{color:var(--vv-ink-2)}
html.vv-alt body .vv-mobile-profile{background:var(--vv-surface-2);border-color:var(--vv-edge-strong);color:var(--vv-ink)}
html.vv-alt .vv-mobile-sheet>header{border-color:var(--vv-edge)}
html.vv-alt .vv-mobile-sheet h2{color:var(--vv-ink)}
html.vv-alt body .vv-mobile-app{background:var(--vv-surface-2);border-color:var(--vv-edge);color:var(--vv-ink)}
html.vv-alt .vv-mobile-app small{color:var(--vv-ink-3)}
html.vv-alt .vv-mobile-sheet input[type=search]{background:var(--vv-field);color:var(--vv-ink);border-color:var(--vv-field-edge)}
html.vv-alt .vv-mobile-empty{color:var(--vv-ink-2)}
.vv-mobile-tile strong{font:500 var(--vv-fs-1)/1.25 var(--vv-font-ui);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .vv-mobile-dock button{font:500 var(--vv-fs-2)/1.2 var(--vv-font-ui)}
.vv-mobile-hint{font:var(--vv-fs-1)/1.4 var(--vv-font-ui)}
.vv-mobile-clock p{font:var(--vv-fs-2)/1.4 var(--vv-font-ui)}
}
/* Readability on the phone home (all themes). */
@media(max-width:700px){body .vv-music-art{color:#160a22}.vv-mobile-hint{color:#a3bfc1}}
/* Text that sits directly on the wallpaper uses the theme's on-background ink (dark on Marble's light stone). */
@media(max-width:700px){
html.vv-alt .vv-mobile-home{--vv-onbg:var(--t-onbg,var(--vv-ink))}
html.vv-alt :is(.vv-mobile-top,.vv-mobile-clock time,.vv-mobile-clock p,.vv-mobile-hint){color:var(--vv-onbg)}
html.vv-alt body .vv-mobile-tile{color:var(--vv-onbg)}
html[data-vv-theme=marble] .vv-mobile-backdrop{background:linear-gradient(#f4f1ecd9,#f4f1ec80 40%,#f4f1ec80 60%,#f4f1ecd9)}
html[data-vv-theme=marble] .vv-mobile-tile strong{background:#f4f1eccc!important}
}
