/* Fantasy Studio — app shell (store app only)
   Every rule here is gated on html.fs-app, which the 3-line <head> script
   sets in the Capacitor webview and nowhere else, so a browser matches
   nothing in this file but the one base rule that hides app-only bits.
   The pages keep their own look; this only adds the bottom tab bar, the
   native pack's two bits of UI (the lock screen #fsLock and the
   pull-to-refresh row .fs-ptr, both drawn by app-shell.js) and the two
   helper classes:
     .fs-web-only   website chrome the app must not show (Home links, install cards…)
     .fs-app-only   app-only bits a browser must never see (Me tab rows…)
   Tab contents are the pages' own section ids under html.fs-app[data-tab]. */

/* app-only bits do not exist for a browser… */
.fs-app-only{display:none}
/* …and the website chrome does not exist for the app. `revert` hands an
   .fs-app-only element back its UA display (block, inline, list-item), so
   put the class on a plain wrapper, not on something that needs display:flex. */
html.fs-app .fs-web-only{display:none!important}
html.fs-app .fs-app-only{display:revert}

html.fs-app{
  --fs-tabs-h:58px;                       /* refreshed by app-shell.js from the real bar */
  --fs-tabs-bg:rgba(20,17,10,.97);
  --fs-tabs-line:rgba(226,194,117,.22);
  --fs-tabs-mut:#b3a98f;
  --fs-tabs-gold:#E2C275;
  --fs-tabs-safe:max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px));
  touch-action:manipulation;              /* no double-tap zoom (app-shell.js sets user-scalable=no) */
}

/* keep the page's last rows above the bar; the pages' own bottom padding
   is unchanged, this adds to it only while the bar is showing */
html.fs-app.fs-tabs-on body{padding-bottom:var(--fs-tabs-h)}

html.fs-app .fs-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  display:flex;justify-content:center;
  background:var(--fs-tabs-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--fs-tabs-line);
  /* Android draws the app under the gesture bar and passes its height as
     --safe-area-inset-bottom; env() covers iOS. max() never adds them twice. */
  padding:0 max(0px,env(safe-area-inset-right)) var(--fs-tabs-safe) max(0px,env(safe-area-inset-left));
}
html.fs-app .fs-tabs[hidden]{display:none}
/* the keyboard is up: a fixed bar would ride on top of it and cover the field */
html.fs-app.fs-kb .fs-tabs{display:none}

html.fs-app .fs-tab{
  flex:1 1 0;min-width:0;max-width:200px;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 4px 7px;margin:0;
  background:none;border:0;border-radius:0;cursor:pointer;
  font-family:'Jost',system-ui,sans-serif;color:var(--fs-tabs-mut);
  -webkit-tap-highlight-color:transparent;
  position:relative;transition:color .18s;
}
/* a thin gold rule above the open tab, like the underline the site uses on nav */
html.fs-app .fs-tab::before{
  content:'';position:absolute;top:-1px;left:22%;right:22%;height:2px;border-radius:0 0 2px 2px;
  background:var(--fs-tabs-gold);opacity:0;transform:scaleX(.4);transition:opacity .18s,transform .18s;
}
html.fs-app .fs-tab[aria-selected="true"]{color:var(--fs-tabs-gold)}
html.fs-app .fs-tab[aria-selected="true"]::before{opacity:1;transform:none}
html.fs-app .fs-tab:active{color:var(--fs-tabs-gold)}
html.fs-app .fs-tab:focus{outline:none}
html.fs-app .fs-tab:focus-visible{outline:2px solid var(--fs-tabs-gold);outline-offset:-4px;border-radius:10px}
html.fs-app .fs-tab[hidden]{display:none}

html.fs-app .fs-tab-ic{
  display:flex;align-items:center;justify-content:center;width:26px;height:24px;
  font-size:20px;line-height:1;
  filter:grayscale(1) opacity(.8);transition:filter .18s;
}
html.fs-app .fs-tab[aria-selected="true"] .fs-tab-ic{filter:none}
html.fs-app .fs-tab-ic svg{width:22px;height:22px;fill:currentColor}
html.fs-app .fs-tab-lb{
  font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1.1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- the lock screen (FSApp.lock.screen) ----
   Over everything, tab bar included (z 1300 > the bar's 1200); the page
   underneath cannot scroll while it is up. Dark ink like /start/, the FS
   mark, the site's gold-gradient button. */
html.fs-app.fs-locked body{overflow:hidden}
html.fs-app #fsLock{
  position:fixed;inset:0;z-index:1300;
  display:flex;align-items:center;justify-content:center;
  padding:max(env(safe-area-inset-top),var(--safe-area-inset-top,0px)) 24px var(--fs-tabs-safe);
  background:linear-gradient(180deg,#1a150c,#14110a 40%);color:#f3ecdc;
  font-family:'Jost',system-ui,sans-serif;text-align:center;
}
html.fs-app .fs-lock-in{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center}
html.fs-app .fs-lock-mark{width:64px;height:64px;margin-bottom:1.1rem}
html.fs-app #fsLock h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:1.4rem;line-height:1.2;color:#fff;margin:0 0 .45rem;text-wrap:balance}
html.fs-app .fs-lock-sub{color:var(--fs-tabs-mut);font-size:.88rem;line-height:1.45;margin:0 0 1.6rem}
html.fs-app .fs-lock-btn{
  width:100%;min-height:50px;margin:0;padding:.9em 1.2em;
  background:linear-gradient(135deg,#C9A347,#8E6E1E);border:0;border-radius:40px;color:#fff;
  font-family:inherit;font-size:.9rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:opacity .18s;
}
html.fs-app .fs-lock-btn:active{opacity:.85}
html.fs-app .fs-lock-btn:disabled{opacity:.55;cursor:default}
html.fs-app .fs-lock-btn:focus{outline:none}
html.fs-app .fs-lock-btn:focus-visible{outline:2px solid var(--fs-tabs-gold);outline-offset:3px}
/* the way out: a quiet text link, but a full 44px tap target */
html.fs-app .fs-lock-out{
  margin:.9rem 0 0;padding:.8em 1em;background:none;border:0;
  font-family:inherit;font-size:.85rem;color:var(--fs-tabs-mut);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(179,169,143,.5);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
html.fs-app .fs-lock-out:active{color:var(--fs-tabs-gold)}
html.fs-app .fs-lock-out:focus{outline:none}
html.fs-app .fs-lock-out:focus-visible{outline:2px solid var(--fs-tabs-gold);outline-offset:2px;border-radius:8px}

/* ---- pull to refresh (FSApp.pullToRefresh) ----
   A small pill under the status bar, fixed so the page never reflows;
   appended when the drag passes the threshold, removed when the refresh
   is done. The gold ring spins once the finger lets go. */
html.fs-app .fs-ptr{
  position:fixed;left:50%;top:calc(max(env(safe-area-inset-top),var(--safe-area-inset-top,0px)) + 66px);z-index:1250;   /* below the header row and its gold rule */
  display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:30px;
  background:var(--fs-tabs-bg);border:1px solid var(--fs-tabs-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--fs-tabs-gold);font:500 12px/1 'Jost',system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap;
  opacity:0;transform:translate(-50%,-8px);transition:opacity .15s,transform .15s;pointer-events:none;
}
html.fs-app .fs-ptr.on{opacity:1;transform:translate(-50%,0)}
html.fs-app .fs-ptr i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--fs-tabs-line);border-top-color:var(--fs-tabs-gold)}
html.fs-app .fs-ptr.spin i{animation:fs-ptr-spin .8s linear infinite}
@keyframes fs-ptr-spin{to{transform:rotate(360deg)}}

/* ---- the update popup (app-shell.js, the app update block) ----
   One card over the page: above the tab bar (1250 > 1200), under the lock
   screen (1300). Same gold button as the lock screen. */
html.fs-app .fs-upd{
  position:fixed;inset:0;z-index:1250;
  display:flex;align-items:center;justify-content:center;
  padding:max(env(safe-area-inset-top),var(--safe-area-inset-top,0px)) 16px var(--fs-tabs-safe);
  background:rgba(10,8,4,.72);font-family:'Jost',system-ui,sans-serif;
}
html.fs-app .fs-upd-card{
  width:100%;max-width:360px;padding:24px 22px 14px;text-align:center;color:#f3ecdc;
  background:linear-gradient(180deg,#1f1a10,#14110a);border:1px solid var(--fs-tabs-line);border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
html.fs-app .fs-upd-card h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:1.3rem;line-height:1.25;color:#fff;margin:0 0 .5rem;text-wrap:balance}
html.fs-app .fs-upd-sub{color:var(--fs-tabs-mut);font-size:.9rem;line-height:1.5;margin:0 0 .9rem}
html.fs-app .fs-upd-msg{min-height:1.4em;color:var(--fs-tabs-gold);font-size:.88rem;line-height:1.4;margin:0 0 .6rem}
html.fs-app .fs-upd-btn{
  width:100%;min-height:50px;margin:0;padding:.9em 1.2em;
  background:linear-gradient(135deg,#C9A347,#8E6E1E);border:0;border-radius:40px;color:#fff;
  font-family:inherit;font-size:.9rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:opacity .18s;
}
html.fs-app .fs-upd-btn:active{opacity:.85}
html.fs-app .fs-upd-btn:disabled{opacity:.55;cursor:default}
html.fs-app .fs-upd-later{
  display:block;width:100%;min-height:44px;margin:.3rem 0 0;padding:.6em 1em;background:none;border:0;
  font-family:inherit;font-size:.88rem;color:var(--fs-tabs-mut);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
html.fs-app .fs-upd-later:active{color:var(--fs-tabs-gold)}
html.fs-app .fs-upd-btn:focus,html.fs-app .fs-upd-later:focus{outline:none}
html.fs-app .fs-upd-btn:focus-visible,html.fs-app .fs-upd-later:focus-visible{outline:2px solid var(--fs-tabs-gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html.fs-app .fs-tab,
  html.fs-app .fs-tab::before,
  html.fs-app .fs-tab-ic,
  html.fs-app .fs-lock-btn,
  html.fs-app .fs-ptr{transition:none}
  html.fs-app .fs-ptr.spin i{animation-duration:1.6s}   /* still a sign of life, just calmer */
}