/* Oct 23 00:32 (Mark, glassbars): public fan site only (#app.fan-shell.mp-glass, set by js/app.js render; not chat/inbox views,
   admin, studio or the Mini App). Header + bottom tab bar are 50% see-through with a blur; on phones the page scrolls underneath.
   Gold border lines, safe-area padding, active tab colour unchanged. Off: drop this file's <link> from index.html. */
#app.fan-shell.mp-glass > .header{background:rgba(12,10,6,.5);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
#app.fan-shell.mp-glass > .header .container{text-shadow:0 1px 3px rgba(0,0,0,.55)}
#app.fan-shell.mp-glass > .bottom-nav{background:rgba(12,10,6,.5);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
#app.fan-shell.mp-glass > .bottom-nav a{text-shadow:0 1px 3px rgba(0,0,0,.6)}
#app.fan-shell.mp-glass > .bottom-nav a svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
@media (max-width:720px){
  html:not(.mp-standalone) #app.fan-shell.mp-glass{position:relative}   /* standalone keeps its position:fixed shell (pwa1 fix) */
  #app.fan-shell.mp-glass > .header{position:absolute;top:0;left:0;right:0;z-index:50}
  #app.fan-shell.mp-glass > .bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:60}
  #app.fan-shell.mp-glass > .app-scroll{padding-top:var(--mp-hdr-h,65px);padding-bottom:var(--mp-nav-h,72px);scroll-padding-top:var(--mp-hdr-h,65px);scroll-padding-bottom:var(--mp-nav-h,72px)}
  html.a2hs-pad #app.fan-shell.mp-glass > .app-scroll{padding-bottom:calc(var(--mp-nav-h,72px) + var(--a2hs-h,64px) + 18px)}
}

/* Oct 23 00:46 (Mark, statusbar): Home Screen app with the translucent status bar (index.html) draws the page under the clock.
   The header grows by the safe area so its glass covers the clock strip and the logo / menu stay below it; scrolled content
   (glass views) passes under both. The inset is 0 in Safari tabs and in apps still using the opaque bar, so nothing changes there.
   Overlays that start at the top keep their content below the clock. */
.header{padding-top:env(safe-area-inset-top,0px)}
.modal-back,.agegate{padding-top:max(20px,calc(env(safe-area-inset-top,0px) + 12px))}
.mp-chatfloat{padding-top:calc(8px + env(safe-area-inset-top,0px))}

/* Oct 23 00:56 (Mark, navbright): bottom tab labels + icons near-white, 600, stronger shadow so they read over photos behind the
   glass; the active tab stays gold (bolder) so it is clearly distinct. All fan pages (glass and the chat views). */
#app.fan-shell > .bottom-nav a{color:rgba(255,255,255,.9);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6)}
#app.fan-shell > .bottom-nav a svg{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.55))}
#app.fan-shell > .bottom-nav a.active{color:var(--gold2,#F0C060);font-weight:700}
/* navbright: header logo. The gold coin behind the star flips (js/star-spin.js); when it is edge-on the dark star had nothing
   behind it and the logo looked blank over the glass header. A thin gold outline keeps the star visible at every angle. */
.logo-mark::before{text-shadow:0 0 1px #F0C060,0 0 1px #F0C060,0 0 3px rgba(240,192,96,.85)}

/* Oct 23 01:08 (Mark, headbright): top header as readable as the bottom bar over photos. Public fan pages only (#app.fan-shell).
   Wordmark: "Member" near-white, "Prive" brighter gold, ".com" lighter; language button, Log in and the account chip brighter
   gold outline + text with a dark shadow; desktop nav links near-white. The star keeps its gold outline (rule above). */
#app.fan-shell > .header .container{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6)}
#app.fan-shell > .header .logo .lp0{color:rgba(255,255,255,.95)!important}
#app.fan-shell > .header .logo .lp1{color:#F7B84B!important}
#app.fan-shell > .header .logo .lp2{color:rgba(255,255,255,.75)!important}
/* the letter-wave animation owns the letters' text-shadow, so the dark contrast shadow goes on the word as a filter */
#app.fan-shell > .header .logo .lw-word{display:inline-block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(0,0,0,.55))}
#app.fan-shell > .header .mp-lang-btn{color:#F7C866;border-color:rgba(247,200,102,.95);background:rgba(12,10,6,.28)}
#app.fan-shell > .header .btn-login{color:#F7C866;border-color:#F7C866;background:rgba(12,10,6,.28)}
#app.fan-shell > .header .auth-badge{color:#fff;border-color:rgba(247,200,102,.95);background:rgba(12,10,6,.28)}
#app.fan-shell > .header .auth-badge .icon-sm{opacity:1;color:#F7C866}
#app.fan-shell > .header .mp-lang-btn svg,#app.fan-shell > .header .auth-badge svg,#app.fan-shell > .header .nav a svg{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.9))}
#app.fan-shell > .header .mp-lang-btn,#app.fan-shell > .header .btn-login,#app.fan-shell > .header .auth-badge{box-shadow:0 1px 6px rgba(0,0,0,.45)}
#app.fan-shell > .header .nav a{color:rgba(255,255,255,.88)}
#app.fan-shell > .header .nav a.active{color:#F7C866}

/* Oct 23 01:29 (Mark, homeappfix + bottomgap): Home Screen app on a real iPhone draws the page under the clock (safe-area-inset-top > 0,
   html.mp-sat from js/app-height.js). Then the shell reaches the physical screen bottom (height = screen.height / 100lvh, never shorter
   than the screen) and the bottom nav's glass background reaches the physical bottom edge (bottom:0 + safe-area padding with --mp-sab
   floor for home-indicator iPhones, plus a matching glass tail behind the home indicator in case WebKit clips the layout box).
   Normal Safari tabs and opaque-bar installs are untouched. */
@media (max-width:720px){
  html.mp-standalone.mp-sat,html.mp-standalone.mp-sat body{height:var(--mp-app-h,100lvh)!important;min-height:100lvh!important;min-height:var(--mp-app-h,100%)!important;background:#0C0A06}
  html.mp-standalone.mp-sat #app.fan-shell{top:0;bottom:0;height:var(--mp-app-h,100lvh);min-height:100lvh;overflow:visible}
  html.mp-standalone #app.fan-shell > .bottom-nav{bottom:0;padding-bottom:calc(10px + max(env(safe-area-inset-bottom,0px),var(--mp-sab,0px)))}
  html.mp-standalone.mp-sat #app.fan-shell.mp-glass > .bottom-nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:max(env(safe-area-inset-bottom,0px),var(--mp-sab,34px));background:rgba(12,10,6,.5);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);pointer-events:none}
}

/* Oct 24 20:57 (Mark, v331 / Prive+ z222): inside the Prive+ iPhone website viewer (full bleed, html.prive-full set by the app with
   the real screen insets --prive-sat / --prive-sab) the header pads below the clock and the bottom nav sits on the screen bottom with
   the home-indicator space inside its glass, even if WebKit reports env(safe-area-inset-*) as 0 there. Without the class (Safari,
   desktop, Android, older Prive+ builds) nothing changes. */
html.prive-full #app.fan-shell > .header,html.prive-full .header{padding-top:max(env(safe-area-inset-top,0px),var(--prive-sat,0px))}
html.prive-full .modal-back,html.prive-full .agegate{padding-top:max(20px,calc(max(env(safe-area-inset-top,0px),var(--prive-sat,0px)) + 12px))}
@media (max-width:720px){
  html.prive-full #app.fan-shell > .bottom-nav{bottom:0;padding-bottom:calc(10px + max(env(safe-area-inset-bottom,0px),var(--prive-sab,0px)))}
}

/* Oct 25 00:10 (Mark, slimbars2 - replaces the Oct 24 slimbars block): much slimmer glass header + bottom tab bar on phones (website
   fan pages, #app.fan-shell, <=720px) for more free screen.
   Header: clock area = env(safe-area-inset-top) exactly (unchanged), row below it 54 -> 34px, logo 15 -> 14px / star 22 -> 20px,
   pills (EN, Admin, avatar, Log in) 24px tall with an invisible 40px tap area.
   Bottom bar: compact icon + label row (18px icons, 9.5px labels); on home-indicator iPhones the indicator overlaps the lower part of
   the bar: the space below the labels is max(inset - 18px, 4px) instead of 10px + full inset. The bottom padding lives inside each tab
   so the whole height stays tappable; the glass still reaches the screen bottom. Without a home bar (Android, SE, Safari tab) ~44px.
   Scroller padding follows (--mp-hdr-h / --mp-nav-h measured by js/app.js). chatsub2 height rules, mp-sat, --mp-app-h untouched;
   Prive+ viewer (html.prive-full) keeps its own bottom padding. Desktop (>720px) unchanged. Off: delete this block. */
@media (max-width:720px){
  #app.fan-shell > .header .container{height:34px;gap:8px}
  #app.fan-shell > .header .logo{font-size:14px;gap:6px}
  #app.fan-shell > .header .logo-mark{width:20px!important;height:20px!important}
  #app.fan-shell > .header .logo-mark::before{font-size:10px}
  #app.fan-shell > .header .mp-lang{margin-inline-end:4px}
  #app.fan-shell > .header .mp-lang-btn{height:24px;font-size:11px;padding:0 7px 0 6px;gap:3px}
  #app.fan-shell > .header .mp-lang-btn svg{width:13px;height:13px}
  #app.fan-shell > .header .admin-pill{padding:0 9px;height:24px;box-sizing:border-box;font-size:11px;gap:4px}
  #app.fan-shell > .header .admin-pill .icon-sm{width:12px;height:12px}
  #app.fan-shell > .header .btn-login{padding:0 11px;height:24px;line-height:22px;box-sizing:border-box;font-size:11px}
  #app.fan-shell > .header .auth-badge{padding:0 7px 0 1px;height:24px;box-sizing:border-box;gap:5px}
  #app.fan-shell > .header .auth-badge .auth-ini,#app.fan-shell > .header .auth-badge .avatar{width:20px!important;height:20px!important;min-width:20px;font-size:10px}
  #app.fan-shell > .header .auth-badge .icon-sm{width:12px;height:12px}
  #app.fan-shell > .header .mp-lang-btn,#app.fan-shell > .header .admin-pill,#app.fan-shell > .header .btn-login,#app.fan-shell > .header .auth-badge{position:relative}
  #app.fan-shell > .header .mp-lang-btn::after,#app.fan-shell > .header .admin-pill::after,#app.fan-shell > .header .btn-login::after,#app.fan-shell > .header .auth-badge::after{content:"";position:absolute;left:-3px;right:-3px;top:-8px;bottom:-8px}
  #app.fan-shell > .bottom-nav{padding-top:0;padding-bottom:0}
  #app.fan-shell > .bottom-nav a{flex:1 1 0;min-width:0;justify-content:flex-start;min-height:43px;box-sizing:border-box;padding:4px 2px calc(3px + env(safe-area-inset-bottom,0px));gap:1px;font-size:9.5px;line-height:1.2}
  #app.fan-shell > .bottom-nav a svg{width:18px;height:18px}
  html.mp-standalone:not(.prive-full) #app.fan-shell > .bottom-nav{padding-bottom:0}
  html.mp-standalone:not(.prive-full) #app.fan-shell > .bottom-nav a{padding-bottom:max(4px,calc(max(env(safe-area-inset-bottom,0px),var(--mp-sab,0px)) - 18px))}
  html.prive-full #app.fan-shell > .bottom-nav a{padding-bottom:3px}
}

/* Oct 25 14:30 (Mark, bottombar): bottom tab bar inside the Prive+ iPhone website viewer sits exactly like in the Home Screen app
   (same 18px icons / 9.5px labels row, space under the labels = max(4px, home-indicator inset - 18px), home indicator over the lower
   part of the glass, glass to the screen bottom). Build 220 (html.prive-v220, js/prive-viewer-bar.js): inset 34px on home-indicator
   iPhones; z222+ (html.prive-full): the real inset from --prive-sab / env(). Replaces the earlier 10px + inset (+3px) padding there.
   Safari, Android, Home Screen app, desktop unchanged. Off: delete this block (and the prive-viewer-bar.js <script> in index.html). */
@media (max-width:720px){
  html.prive-full #app.fan-shell > .bottom-nav,html.prive-v220 #app.fan-shell > .bottom-nav{padding-bottom:0}
  html.prive-full #app.fan-shell > .bottom-nav a{padding-bottom:max(4px,calc(max(env(safe-area-inset-bottom,0px),var(--prive-sab,0px)) - 18px))}
  html.prive-v220 #app.fan-shell > .bottom-nav a{padding-bottom:max(4px,calc(var(--mp-pv-sab,34px) - 18px))}
}