/* ── SideRays background (fixed — does not move with tab carousel) ── */
#side-rays-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.side-rays-container{width:100%;height:100%;position:relative;pointer-events:none;overflow:hidden;}
#side-rays-bg canvas{position:absolute;inset:0;display:block;width:100%;height:100%;}

/* Native shell: keep content below system status area while letting page
   background extend into the notch area (no black strip). */
html.native-shell body{padding-top:calc(18px + env(safe-area-inset-top,0px));}

/* ── HEADER ── */
.app-header{width:100%;max-width:600px;margin-bottom:16px;animation:fadeDown .5s ease both;}
/* App-only badge (native): the one intentional chrome difference from the
   website, see js/app_screens.js's _updateOfflineBadge. Absolutely
   positioned (relative to .app-header, see "position:relative" rule below)
   so it never disturbs the h1's own sizing/layout — putting it inline next
   to the title instead (app-header as a flex row) made the title render
   smaller too, since it was now sharing the row with the badge. Hidden on
   web even if ever unhidden by mistake, since only the native runtime
   calls it. */
.app-offline-badge{display:none;}
html.capacitor-native .app-offline-badge:not(.hidden){
  display:inline-flex;align-items:center;position:absolute;top:0;
  inset-inline-end:0;font-size:.7rem;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:3px 10px;
  white-space:nowrap;}
/* Logo stays visible on sub-pages */
.app-header h1{font-family:'Fraunces','Vazirmatn',serif;font-size:clamp(1.55rem,4.8vw,2.2rem);font-weight:700;
  background:linear-gradient(180deg,#f0d78c 0%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-0.5px;line-height:1;cursor:pointer;}
#screen-top-bar{display:none!important;}
.tab-page-chrome{width:100%;display:flex;align-items:stretch;gap:10px;margin-bottom:14px;min-height:40px;}
.tab-page-chrome.hidden{display:none;}
.tab-page-chrome-main{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:12px;}
.tab-page-title-wrap{flex:1;min-width:0;text-align:start;}
.tab-page-title{font-family:'Vazirmatn',sans-serif;font-size:1.25rem;line-height:1.2;color:var(--blue);}
.tab-page-title.hidden{display:none;}
.tab-page-subtitle{font-size:.74rem;color:var(--muted);margin-top:3px;line-height:1.35;}
.tab-page-subtitle.hidden{display:none;}
.tab-page-actions{flex:0 0 auto;max-width:50%;min-width:0;display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;}
.tab-page-actions.hidden{display:none;}
.tab-page-actions .quiz-header{margin-bottom:0;width:100%;justify-content:flex-end;align-items:flex-end;}
.tab-page-body{width:100%;box-sizing:border-box;}
.tab-page-chrome .page-back-btn.hidden{display:none;}
.app-back-btn,.app-top-action-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .18s,transform .4s ease;color:var(--text);flex-shrink:0;
  padding:0;line-height:1;direction:ltr;--glass-radius:20px;}
.app-back-btn .ui-icon,.app-top-action-btn .ui-icon{width:20px;height:20px;}
.app-top-action-btn.is-spinning{transform:rotate(360deg);}

/* ── Offline screen ── */
.app-header{position:relative;z-index:60;}
/* Mask the app chrome so the shared side-rays wallpaper shows behind the box */
body.app-offline .app-header,
body.app-offline #screen-top-bar,
body.app-offline #screen-levels,
body.app-offline .bottom-tabs{display:none!important;}
#offline-screen{position:fixed;inset:0;z-index:50;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;
  padding-top:calc(2rem + env(safe-area-inset-top,0px));
  padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px));}
#offline-screen.hidden{display:none;}
.offline-card{width:100%;max-width:340px;padding:38px 28px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  --glass-elevation:var(--modal-panel-shadow);animation:fadeUp .4s var(--modal-ease) both;}
.offline-icon-wrap{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(126,184,247,0.12);color:var(--blue);margin-bottom:2px;}
.offline-icon-wrap .ui-icon{width:30px;height:30px;}
#offline-screen h2{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  font-size:1.45rem;font-weight:700;color:var(--text);line-height:1.15;margin:0;}
#offline-screen p{color:var(--muted);font-size:.88rem;max-width:280px;margin:0;line-height:1.55;}
#offline-refresh-btn{margin-top:8px;width:100%;padding:13px;background:var(--gold);
  color:#0b0d13;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  font-size:.92rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;transition:opacity .15s;}
#offline-refresh-btn:hover{opacity:.88;}
#offline-refresh-btn:disabled{opacity:.5;cursor:default;}
.auth-btn-offline{opacity:.45!important;pointer-events:none!important;cursor:default!important;}

/* ── Quiz prep loading overlay ── */
#quiz-prep-overlay{display:none;position:fixed;inset:0;background:var(--bg);z-index:400;
  align-items:center;justify-content:center;}
#quiz-prep-overlay.active{display:flex;}

/* ── TAB PANELS & BOTTOM NAV ── */
#screen-levels{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:var(--tab-content-max);overflow:visible;}
.tab-stage{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);flex-shrink:0;}
/* Clip the carousel horizontally (4 panels are laid out side-by-side at 100vw
   each) so iOS Safari can't horizontally pan the page. `clip` is used instead
   of `hidden` so the vertical axis can stay `visible` for stack animations. */
.tab-viewport{width:100%;overflow-x:clip;overflow-y:visible;}
.tab-track{display:flex;align-items:flex-start;gap:var(--tab-page-gap);will-change:transform;transition:transform var(--modal-dur) var(--modal-ease);}
.tab-track.is-dragging{transition:none;}
.tab-panel{display:flex;flex-direction:column;flex:0 0 100vw;width:100vw;max-width:100vw;min-width:0;box-sizing:border-box;padding-inline:var(--tab-panel-gutter);}
.tab-panel:not(.tab-flow-visible){height:0;min-height:0;overflow:hidden;pointer-events:none;}
#tab-panel-practice.active{overflow:visible;flex:0 0 100vw;min-height:auto;flex-direction:column;gap:0;position:relative;}
#tab-panel-practice.active.tab-flow-visible{height:auto;min-height:calc(100svh - 170px);overflow:visible;pointer-events:auto;}
/* The 170px above bakes in a fixed header allowance (~87px) plus the HTML
   tab bar's own fixed height (~83px, the non-native --tab-h value) as one
   constant — it never adjusts for the native bar's real (and variable)
   height, so content/buttons pinned to the bottom of this panel end up
   positioned as if the (now hidden) HTML bar still owned that space. Same
   87px header allowance, but the tab-bar portion now comes from --tab-h
   (redirected to the real native bar height) with safe-area added back
   separately — same pattern as .drawer/.app-dialog/.practice-dock above. */
html.native-tabbar-active #tab-panel-practice.active.tab-flow-visible{min-height:calc(100svh - 87px - var(--tab-h) - env(safe-area-inset-bottom,0px));}
#screen-levels:has(#tab-panel-practice.active){overflow:visible;}
#tab-panel-stats{padding-bottom:4px;}
#tab-panel-settings{padding-bottom:4px;}
.settings-head{margin-bottom:18px;}
.settings-head-title{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;font-size:1.45rem;font-weight:700;color:var(--text);line-height:1.15;margin:0;}
#tab-panel-settings .drawer-section:last-of-type{margin-bottom:0;}
#tab-panel-settings .settings-footer{margin-top:24px;}

/* ── TAB PAGE STACKS ── */
.tab-stack{position:relative;width:100%;min-height:0;overflow:visible;}
.tab-stack.is-stack-animating{overflow:visible;--stack-travel:100vh;}
.tab-stack.is-stack-measuring{width:100%;min-height:0!important;height:auto!important;overflow:visible!important;}
.tab-page{width:100%;box-sizing:border-box;}
.tab-page:not(.is-stack-top):not(.is-stack-enter):not(.is-stack-exit):not(.is-stack-enter-back):not(.is-stack-exit-back){visibility:hidden;height:0;min-height:0;max-height:0;overflow:hidden;pointer-events:none;margin:0;padding:0;border:none;}
.tab-page.is-stack-top{visibility:visible;height:auto;overflow:visible;pointer-events:auto;}
.tab-page.is-stack-exit,
.tab-page.is-stack-enter,
.tab-page.is-stack-exit-back,
.tab-page.is-stack-enter-back{position:absolute;left:0;right:0;top:0;width:100%;visibility:visible;overflow:visible;pointer-events:none;will-change:transform;}
.tab-page.is-stack-exit,.tab-page.is-stack-exit-back{z-index:3;}
.tab-page.is-stack-enter,.tab-page.is-stack-enter-back{z-index:2;}
.tab-page.is-stack-exit{animation:stackExitDown var(--stack-dur) var(--stack-ease) forwards;}
.tab-page.is-stack-enter{animation:stackEnterDown var(--stack-dur) var(--stack-ease) forwards;}
.tab-page.is-stack-exit-back{animation:stackExitUp var(--stack-dur) var(--stack-ease) forwards;}
.tab-page.is-stack-enter-back{animation:stackEnterUp var(--stack-dur) var(--stack-ease) forwards;}
@keyframes stackExitDown{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--stack-travel,100vh),0)}}
@keyframes stackEnterDown{from{transform:translate3d(0,calc(-1 * var(--stack-travel,100vh)),0)}to{transform:translate3d(0,0,0)}}
@keyframes stackExitUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--stack-travel,100vh)),0)}}
@keyframes stackEnterUp{from{transform:translate3d(0,var(--stack-travel,100vh),0)}to{transform:translate3d(0,0,0)}}
#tab-shared-depot{display:none!important;visibility:hidden;pointer-events:none;height:0;overflow:hidden;}
@media(prefers-reduced-motion:reduce){
  .tab-page.is-stack-exit,.tab-page.is-stack-enter,.tab-page.is-stack-exit-back,.tab-page.is-stack-enter-back{animation:none!important;}
}
.bottom-tabs{position:fixed;bottom:var(--tab-bar-viewport-offset);left:50%;width:min(calc(100vw - 24px),402px);transform:translateX(-50%);z-index:80;display:flex;justify-content:center;padding-inline:0;
  pointer-events:none;}
.bottom-tabs.hidden{display:none;}
/* Native bottom tab bar (js/app_screens.js's _initNativeTabBar): once the
   plugin confirms it's actually rendered, hide this HTML one (avoids a
   double nav bar) and redirect --tab-h — the single "space reserved below
   the tab bar" variable used throughout this file (body padding, dialogs,
   the practice dock, etc.) — to the native bar's real height instead, so
   everything that already accounts for that space keeps working unchanged. */
html.native-tabbar-active .bottom-tabs{display:none!important;}
html.native-tabbar-active{--tab-h:calc(var(--cap-native-navigation-bottom,64px) - env(safe-area-inset-bottom,0px));}
.bottom-tabs-inner{width:100%;max-width:402px;min-height:var(--tab-bar-content-height);position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:8px;padding:var(--tab-bar-padding-block);border:1px solid rgba(255,255,255,.14);border-radius:999px;box-sizing:border-box;overflow:visible;background:rgba(18,20,28,.42);-webkit-backdrop-filter:blur(10px) saturate(135%);backdrop-filter:blur(10px) saturate(135%);box-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);--tab-item-effective:min(88px,calc((100% - 24px) / 4));pointer-events:all;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;}
.bottom-tabs-inner.is-dragging{cursor:grabbing;}
.bottom-tabs-inner.is-pressed{background:rgba(24,27,38,.48);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);}
.bottom-tab-indicator{position:absolute;top:0;left:0;border-radius:999px;background:var(--gold-soft);transform-origin:center;
  scale:var(--ind-sx,1) var(--ind-sy,1);
  z-index:1;pointer-events:none;border:1px solid transparent;transition:translate var(--modal-dur) var(--modal-ease),width var(--modal-dur) var(--modal-ease),height var(--modal-dur) var(--modal-ease),background-color .16s ease,border-color .16s ease,box-shadow .16s ease;}
.bottom-tabs-inner.is-pressed .bottom-tab-indicator{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.06);}
.bottom-tab-indicator.is-dragging{transition:none;}
.bottom-tab-gold-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:inset(0 75% 0 0 round 999px);
  transition:clip-path var(--modal-dur) var(--modal-ease);}
.bottom-tab-gold-overlay.is-dragging{transition:none;}
.bottom-tab--gold{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 6px;box-sizing:border-box;font-family:inherit;color:var(--gold);}
.bottom-tab--gold .ui-icon{width:var(--tab-icon-size);height:var(--tab-icon-size);color:var(--gold);}
.bottom-tab{appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:var(--tab-item-effective);flex:0 0 var(--tab-item-effective);align-self:stretch;box-sizing:border-box;padding:5px 6px;border:none;border-radius:var(--tab-highlight-radius);outline:none;
  background:transparent;color:rgba(255,255,255,0.55);cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;transition:color .18s;min-height:0;position:relative;z-index:0;}
.bottom-tab:hover{color:rgba(255,255,255,0.72);}
.bottom-tab:focus-visible{outline:2px solid rgba(212,175,90,.85);outline-offset:-3px;}
.bottom-tab-label{font-size:var(--tab-label-size);font-weight:500;letter-spacing:.01em;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-level-tab.adaptive-tab{font-size:.72rem;padding:7px 9px;}
.profile-level-tabs.has-adaptive-tab{flex-wrap:wrap;justify-content:flex-end;max-width:220px;}