
:root{--fren-shell-green:#79ff9a;--fren-shell-bg:#06150b}
#frenUnifiedTop,#frenUnifiedDock{font-family:system-ui,-apple-system,sans-serif!important;box-sizing:border-box!important;color:#e8ffec!important}
#frenUnifiedTop * ,#frenUnifiedDock *{box-sizing:border-box!important}
#frenUnifiedTop{position:sticky!important;top:0!important;left:0!important;right:0!important;z-index:2147482000!important;min-height:48px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px max(12px,env(safe-area-inset-left))!important;background:linear-gradient(100deg,#05120af5,#0c2716f5)!important;border-bottom:1px solid #2d7544!important;box-shadow:0 3px 15px #0007!important;backdrop-filter:blur(12px)!important}
#frenUnifiedTop .frenTopLeft,#frenUnifiedTop .frenTopActions{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important}
#frenUnifiedTop .frenTopTitle{font-weight:850!important;font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#frenUnifiedTop a,#frenUnifiedTop button{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important;width:34px!important;height:34px!important;padding:6px!important;border-radius:10px!important;background:#0e2b19!important;border:1px solid #2b7542!important;color:#caffd4!important;text-decoration:none!important;cursor:pointer!important}
#frenUnifiedTop img{width:20px!important;height:20px!important;object-fit:contain!important;filter:drop-shadow(0 0 3px #49ff6a66)}
#frenUnifiedDock{position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:2147482000!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;align-items:center!important;min-height:67px!important;padding:5px 3px calc(6px + env(safe-area-inset-bottom,0px))!important;background:#06150bf7!important;border-top:1px solid #347b49!important;box-shadow:0 -5px 22px #0009!important;backdrop-filter:blur(12px)!important}
#frenUnifiedDock a{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;text-decoration:none!important;color:#b8d4bf!important;font-size:clamp(8px,2vw,10px)!important;font-weight:750!important;line-height:1.1!important;white-space:nowrap!important}
#frenUnifiedDock .frenShellIcon{width:35px!important;height:35px!important;display:grid!important;place-items:center!important;border-radius:11px!important;border:1px solid #244b30!important;background:#0b2415!important;transition:transform .16s,box-shadow .16s,border-color .16s!important}
#frenUnifiedDock img{width:22px!important;height:22px!important;object-fit:contain!important;filter:drop-shadow(0 0 4px #47ff7777)!important}
#frenUnifiedDock a[aria-current="page"] .frenShellIcon{border-color:#78ff94!important;background:#143d24!important;box-shadow:0 0 12px #36ff6a50!important}
#frenUnifiedDock a:active .frenShellIcon{transform:scale(.9)!important}
body.frenShellMain{padding-bottom:calc(75px + env(safe-area-inset-bottom,0px))!important}
body.frenShellMain #frenMainBottomNav,body.frenShellMain #frenArcadeDock,body.frenShellMain nav.dock[aria-label="Shared Fren navigation"]{display:none!important}
body.frenShellGame #frenUnifiedTop{position:relative!important;z-index:2147482000!important;min-height:42px!important;padding:3px 9px!important}
body.frenShellGame #frenUnifiedDock{display:none!important}
body.frenShellGame #frenGameNavTrigger,body.frenShellGame #frenGameNavOverlay{display:none!important}
body.frenShellGame:fullscreen #frenUnifiedTop,body.frenShellGame:fullscreen #frenUnifiedDock{display:none!important}
#frenUnifiedTop .frenGameMenu{position:absolute!important;top:calc(100% + 5px)!important;right:8px!important;display:none!important;flex-direction:column!important;gap:4px!important;width:min(260px,90vw)!important;padding:10px!important;border:1px solid #347b49!important;border-radius:12px!important;background:#08190df9!important;box-shadow:0 12px 30px #000a!important}
#frenUnifiedTop .frenGameMenu[aria-hidden="false"]{display:flex!important}
#frenUnifiedTop .frenGameMenu a{width:100%!important;flex:auto!important;justify-content:flex-start!important;padding:9px!important;height:auto!important;font-size:13px!important}
@media(prefers-reduced-motion:reduce){#frenUnifiedDock .frenShellIcon{transition:none!important}}

/* V82: native phone dock, independent of page containers */
html{overflow-x:clip!important}
#frenUnifiedTop{display:none!important}
#frenUnifiedDock{position:fixed!important;inset:auto 0 0 0!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:100vw!important;transform:none!important;margin:0!important;box-sizing:border-box!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;min-height:88px!important;padding:7px 3px calc(9px + env(safe-area-inset-bottom,0px))!important;overflow:hidden!important;z-index:2147483000!important}
#frenUnifiedDock a{min-width:0!important;min-height:68px!important;gap:5px!important;font-size:clamp(9px,2.5vw,12px)!important;line-height:1.05!important}
#frenUnifiedDock .frenShellIcon{width:clamp(40px,11vw,54px)!important;height:clamp(40px,11vw,54px)!important;border-radius:15px!important;background:linear-gradient(145deg,#143a20,#061a0d)!important;border:1px solid #368a4b!important;box-shadow:inset 0 1px 0 #8aff9630,0 3px 12px #0008!important}
#frenUnifiedDock img{width:clamp(27px,7.4vw,36px)!important;height:clamp(27px,7.4vw,36px)!important}
#frenUnifiedDock a[aria-current="page"] .frenShellIcon{box-shadow:0 0 16px #37ff6d65,inset 0 0 10px #43ff6933!important;border-color:#75ff92!important}
body.frenShellMain{padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))!important}
body.frenShellMain #frenMainBottomNav,body.frenShellMain #frenArcadeDock,body.frenShellMain nav.dock[aria-label="Shared Fren navigation"]{display:none!important;visibility:hidden!important}
@media(max-width:370px){#frenUnifiedDock .frenShellIcon{width:40px!important;height:40px!important}#frenUnifiedDock img{width:27px!important;height:27px!important}}

/* V83 — Fren Network dimensional glass dock. No game viewport changes. */
#frenUnifiedDock{
 isolation:isolate!important;
 min-height:108px!important;
 padding:11px max(5px,env(safe-area-inset-right,0px)) calc(11px + env(safe-area-inset-bottom,0px))!important;
 background:linear-gradient(180deg,rgba(15,48,27,.97) 0%,rgba(3,15,9,.99) 48%,#020a06 100%)!important;
 border-top:1px solid rgba(124,255,154,.65)!important;
 box-shadow:0 -8px 32px #000b,0 -1px 15px #49ff6840,inset 0 1px 0 #baffb438!important;
 backdrop-filter:blur(22px) saturate(1.5)!important;
 overflow:visible!important;
}
#frenUnifiedDock:before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#a2ffb8,#45ff77,#a2ffb8,transparent);box-shadow:0 0 15px 2px #4cff73a0;pointer-events:none}
#frenUnifiedDock a{
 position:relative!important;min-height:84px!important;gap:6px!important;
 color:#d6f7df!important;font-size:clamp(9px,2.35vw,12px)!important;
 font-weight:800!important;letter-spacing:-.15px!important;
 text-shadow:0 1px 5px #000!important;
 -webkit-tap-highlight-color:transparent;
}
#frenUnifiedDock .frenShellIcon{
 position:relative!important;isolation:isolate!important;
 width:clamp(44px,12.4vw,65px)!important;height:clamp(44px,12.4vw,65px)!important;
 border-radius:clamp(14px,4vw,21px)!important;
 border:1px solid #6eff8c9c!important;
 background:radial-gradient(ellipse at 30% 8%,#5cfb8150,transparent 55%),linear-gradient(145deg,#245e36 0%,#0a2b19 42%,#03130b 100%)!important;
 box-shadow:inset 0 2px 2px #d4ffdb5c,inset 0 -5px 10px #0009,0 4px 0 #010b05,0 7px 12px #000a,0 0 12px #31ff5945!important;
 transform:translateY(0) perspective(180px) rotateX(0)!important;
 transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s!important;
}
#frenUnifiedDock .frenShellIcon:before{content:"";position:absolute;inset:3px 5px auto;height:31%;border-radius:55% 55% 40% 40%;background:linear-gradient(#e0ffe038,transparent);pointer-events:none;z-index:2}
#frenUnifiedDock .frenShellIcon:after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid #a7ffc82b;pointer-events:none;z-index:2}
#frenUnifiedDock img{width:clamp(29px,8.4vw,42px)!important;height:clamp(29px,8.4vw,42px)!important;filter:drop-shadow(0 0 3px #adffad) drop-shadow(0 0 7px #25ff65a0)!important;position:relative;z-index:1}
#frenUnifiedDock a[aria-current="page"]{color:#fff!important;text-shadow:0 0 10px #7dff99!important}
#frenUnifiedDock a[aria-current="page"] .frenShellIcon{
 transform:translateY(-6px) perspective(180px) rotateX(5deg)!important;
 border-color:#d0ffbd!important;
 background:radial-gradient(ellipse at 35% 12%,#8bff8e87,transparent 58%),linear-gradient(145deg,#317e3d,#0d4821 48%,#061c0d)!important;
 box-shadow:inset 0 2px 3px #e2ffe38c,inset 0 -5px 9px #001608,0 5px 0 #0c3a1c,0 10px 17px #000a,0 0 14px 2px #3fff69a0,0 0 28px #30ff5e69!important;
}
#frenUnifiedDock a[aria-current="page"]:before{content:"";position:absolute;top:-9px;width:22px;height:3px;border-radius:5px;background:#a6ffb1;box-shadow:0 0 8px 2px #51ff79,0 0 17px #51ff79;pointer-events:none}
#frenUnifiedDock a:active .frenShellIcon{transform:translateY(2px) scale(.91)!important;box-shadow:inset 0 2px 12px #0009,0 0 15px #54ff7370!important}
@media(hover:hover){#frenUnifiedDock a:hover .frenShellIcon{transform:translateY(-5px) scale(1.05)!important;border-color:#d2ffd8!important;box-shadow:inset 0 2px 2px #d4ffdb5c,0 7px 17px #000a,0 0 19px #39ff6c99!important}}
body.frenShellMain{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))!important}
@media(max-width:370px){#frenUnifiedDock .frenShellIcon{width:clamp(39px,11.9vw,45px)!important;height:clamp(39px,11.9vw,45px)!important}#frenUnifiedDock img{width:29px!important;height:29px!important}#frenUnifiedDock{padding-left:2px!important;padding-right:2px!important}}
@media(prefers-reduced-motion:reduce){#frenUnifiedDock .frenShellIcon{transition:none!important}}

/* V85 — restrained circular optical-glass dock. Shared routing unchanged. */
#frenUnifiedDock{min-height:100px!important;padding:10px 3px calc(10px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,rgba(7,26,15,.94),rgba(1,10,6,.98))!important;border-top:1px solid rgba(140,244,166,.35)!important;box-shadow:0 -12px 32px #0009,inset 0 1px 0 #d1ffe013!important;backdrop-filter:blur(28px) saturate(1.2)!important;overflow:visible!important}
#frenUnifiedDock:before{background:linear-gradient(90deg,transparent,#72f79775,transparent)!important;box-shadow:none!important}
#frenUnifiedDock a{min-height:78px!important;gap:5px!important;color:#bcd7c3!important;font-weight:700!important;text-shadow:none!important;letter-spacing:0!important}
#frenUnifiedDock .frenShellIcon{width:clamp(39px,11.5vw,56px)!important;height:clamp(39px,11.5vw,56px)!important;border-radius:50%!important;background:radial-gradient(circle at 30% 20%,rgba(107,202,132,.22),transparent 45%),linear-gradient(155deg,#173e28,#071c11 70%,#041109)!important;border:1px solid rgba(132,230,158,.35)!important;box-shadow:inset 0 1px 1px #c6ffe044,inset 0 -8px 12px #0008,0 5px 13px #0009!important;transform:none!important}
#frenUnifiedDock .frenShellIcon:before{inset:3px 8px auto!important;height:27%!important;background:linear-gradient(#d4ffe022,transparent)!important}
#frenUnifiedDock .frenShellIcon:after{border:1px solid #e0ffe014!important}
#frenUnifiedDock img{width:clamp(25px,7.2vw,35px)!important;height:clamp(25px,7.2vw,35px)!important;filter:drop-shadow(0 0 2px #53d97c65)!important}
#frenUnifiedDock a[aria-current="page"]{color:#f3fff4!important;text-shadow:none!important}
#frenUnifiedDock a[aria-current="page"] .frenShellIcon{transform:translateY(-3px)!important;background:radial-gradient(circle at 35% 20%,#7dfb9c45,transparent 53%),linear-gradient(150deg,#23643b,#0b2b19 72%)!important;border-color:#a1ffb8!important;box-shadow:inset 0 1px 2px #d6ffe078,inset 0 -6px 10px #0007,0 5px 14px #0008,0 0 13px #4dff7960!important}
#frenUnifiedDock a[aria-current="page"]:before{top:-5px!important;width:5px!important;height:5px!important;border-radius:50%!important;box-shadow:0 0 7px #65ff89!important}
#frenUnifiedDock a:active .frenShellIcon{transform:scale(.92)!important}
@media(hover:hover){#frenUnifiedDock a:hover .frenShellIcon{transform:translateY(-3px)!important;border-color:#a3ffbb!important;box-shadow:inset 0 1px 2px #d6ffe078,0 7px 17px #000a,0 0 12px #4cff7460!important}}
body.frenShellMain{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
@media(max-width:370px){#frenUnifiedDock .frenShellIcon{width:clamp(36px,11vw,42px)!important;height:clamp(36px,11vw,42px)!important}#frenUnifiedDock img{width:clamp(23px,7vw,29px)!important;height:clamp(23px,7vw,29px)!important}}
@media(prefers-reduced-motion:reduce){#frenUnifiedDock .frenShellIcon{transition:none!important}}

/* V96: use the supplied full-color circular artwork in the actual shared dock. */
#frenUnifiedDock .frenShellIcon{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:50%!important;overflow:visible!important;width:clamp(40px,11.5vw,58px)!important;height:clamp(40px,11.5vw,58px)!important}
#frenUnifiedDock .frenShellIcon:before,#frenUnifiedDock .frenShellIcon:after{display:none!important}
#frenUnifiedDock .frenShellIcon img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:50%!important;filter:drop-shadow(0 0 5px #56ff5a77)!important}
#frenUnifiedDock a[href="/frenphone/"] .frenShellIcon{width:clamp(46px,13vw,66px)!important;height:clamp(46px,13vw,66px)!important}
#frenUnifiedDock a[aria-current="page"] .frenShellIcon{background:transparent!important;border:0!important;box-shadow:none!important}
#frenUnifiedDock a[aria-current="page"] img{filter:drop-shadow(0 0 9px #70ff63)!important}
#frenUnifiedDock a{gap:2px!important;font-size:clamp(8px,1.65vw,11px)!important}
/* V97: actual circular artwork is the entire button; no nested frames. */
#frenUnifiedDock{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;align-items:end!important;gap:0!important;min-height:94px!important;padding:8px 3px calc(9px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,#06170eea,#010b06fa)!important;border:0!important;border-top:1px solid #5bf17c44!important;border-radius:0!important;box-shadow:0 -7px 24px #0008!important;max-width:none!important}
#frenUnifiedDock a{min-width:0!important;min-height:75px!important;gap:5px!important;justify-content:flex-end!important;padding:0!important;font-size:clamp(9px,2.4vw,12px)!important;line-height:1.12!important;text-align:center!important;color:#e4f3e6!important}
#frenUnifiedDock .frenShellIcon,#frenUnifiedDock a[aria-current="page"] .frenShellIcon{width:clamp(43px,12.2vw,62px)!important;height:clamp(43px,12.2vw,62px)!important;flex:none!important;overflow:visible!important;border:0!important;background:none!important;box-shadow:none!important;transform:none!important;border-radius:50%!important}
#frenUnifiedDock .frenShellIcon img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;border-radius:50%!important;filter:none!important;clip-path:circle(48% at 50% 50%)!important}
#frenUnifiedDock a[href="/frenphone/"] .frenShellIcon{width:clamp(50px,14vw,72px)!important;height:clamp(50px,14vw,72px)!important}
#frenUnifiedDock a[aria-current="page"] .frenShellIcon img{filter:drop-shadow(0 0 5px #54ff7a99)!important}
#frenUnifiedDock a[aria-current="page"]:before,#frenUnifiedDock:before{display:none!important}
#frenUnifiedDock .frenShellIcon:before,#frenUnifiedDock .frenShellIcon:after{display:none!important}
@media(max-width:370px){#frenUnifiedDock .frenShellIcon{width:clamp(39px,11.5vw,45px)!important;height:clamp(39px,11.5vw,45px)!important}#frenUnifiedDock a[href="/frenphone/"] .frenShellIcon{width:clamp(46px,13vw,54px)!important;height:clamp(46px,13vw,54px)!important}}
/* Fren Phone uses the same shared dock instead of its older independent bar. */
body:has(#phone) .dock{display:none!important}
body:has(#phone) #frenUnifiedTop{display:none!important}
body:has(#phone) #frenUnifiedDock{z-index:1000!important}

/* V103: one uniform dock size on every route, including the Phone slot. */
#frenUnifiedDock .frenShellIcon,
#frenUnifiedDock a[href="/frenphone/"] .frenShellIcon,
#frenUnifiedDock a[aria-current="page"] .frenShellIcon{width:clamp(40px,12vw,58px)!important;height:clamp(40px,12vw,58px)!important;min-width:0!important;max-width:58px!important;transform:none!important}
#frenUnifiedDock .frenShellIcon img{width:100%!important;height:100%!important;object-fit:contain!important}
#frenUnifiedDock a{align-items:center!important;justify-content:flex-end!important;gap:5px!important}

/* V107: profile photos occupy the same circular frame as the seven nav icons. */
#frenUnifiedDock a[href^="https://frensocial.net/profile/"] .frenShellIcon img.frenUserAvatar,
#frenUnifiedDock a[href^="https://frensocial.net/feed/?frenphone=login"] .frenShellIcon img.frenUserAvatar{border-radius:50%!important;object-fit:cover!important;aspect-ratio:1/1;}
