/* Installed experience. Every override is scoped to is-pwa; browser UI is unchanged. */
.papp { display: none; }
.papp[hidden] { display: none !important; }

html.is-pwa {
  --app-bar-h: 68px;
  --app-rail-w: 104px;
  --app-canvas: #100b1c;
  --app-surface: #1c142d;
  --app-raised: #261c3a;
  --app-text: #f5efff;
  --app-muted: #c2b5d5;
  --app-line: rgba(255,255,255,.1);
  --app-accent: var(--mui-accent);
  --app-bg-art: url('../../images/heroes/home-hero-dark.webp?v=1');
  color-scheme: dark;
  scrollbar-width: thin;
  -webkit-font-smoothing: antialiased;
}
html.is-pwa[data-theme=light] {
  --app-canvas: #f3eefb;
  --app-surface: #fffcff;
  --app-raised: #ece5f6;
  --app-text: #29173f;
  --app-muted: #665578;
  --app-line: rgba(42,20,70,.12);
  --app-bg-art: url('../../images/heroes/home-hero-light.webp?v=1');
  color-scheme: light;
}
html.is-pwa body,
html.is-pwa body.home-landing-active {
  background: var(--app-canvas);
  min-height: 100dvh;
  padding-top: calc(var(--app-bar-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
html.is-pwa .site-fixed-background { opacity: .16; }
html.is-pwa body.hx-immersive-page { padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
html.is-pwa .papp { box-sizing: border-box; }
html.is-pwa .papp-bar {
  align-items: center;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
  color: var(--app-text);
  display: flex;
  gap: 8px;
  height: calc(var(--app-bar-h) + env(safe-area-inset-top, 0px));
  inset: 0 0 auto;
  padding: env(safe-area-inset-top, 0px) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  position: fixed;
  z-index: 1030;
}
html.is-pwa .papp-icon {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 14px;
  color: var(--app-text);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  padding: 10px;
  width: 44px;
}
html.is-pwa .papp-icon:disabled { opacity: .3; cursor: default; }
html.is-pwa .papp svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 24px; height: 24px; flex-shrink: 0; }
html.is-pwa .papp-brand { flex: 0 0 36px; }
html.is-pwa .papp-brand img { border-radius: 12px; display: block; }
html.is-pwa .papp-bar__heading { display: grid; flex: 1; gap: 3px; min-width: 0; }
html.is-pwa .papp-bar__heading span { color: var(--app-muted); font-size: 11px; }
html.is-pwa .papp-bar__heading strong { font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.is-pwa .papp-bar__actions { align-items: center; display: flex; gap: 2px; }
html.is-pwa .papp-bar .settings-trigger { width: 44px; height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--app-text); }
html.is-pwa .papp-bar .settings-trigger svg { fill: currentColor; stroke: none; }
html.is-pwa .papp-bar .settings-row__icon svg { fill: currentColor; stroke: none; }
html.is-pwa .papp-bar .settings-panel { max-width: calc(100vw - 24px); }
html.is-pwa .papp :is(a,button):focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; }
html.is-pwa .papp :is(button,a) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.is-pwa .papp :is(button,a) { transition: background-color .16s ease, transform .16s ease; }
html.is-pwa .papp-icon:not(:disabled):hover { background: var(--app-raised); }
html.is-pwa .papp :is(button,a):active { transform: scale(.96); }

html.is-pwa .desktop-navbar,
html.is-pwa #arcane-loader,
html.is-pwa .mobile-top-bar,
html.is-pwa .mhub,
html.is-pwa .mhub-rail,
html.is-pwa .book-club-floating-ad,
html.is-pwa .bc-floating-ad,
html.is-pwa .pm-floating-ad,
html.is-pwa #toggle-right-sidebar,
html.is-pwa #xp-ls-sidebar,
html.is-pwa .hp-footer { display: none !important; }
html.is-pwa body .home-landing-layout { margin-top: 0; }
html.is-pwa .hp-landing > .hp-hero { display: none; }
html.is-pwa .hp-landing { background: transparent; }
html.is-pwa .hp-body { width: 100%; margin-inline: 0; }
html.is-pwa .hp-body > .hp-section { padding-block: 28px; }
html.is-pwa .hp-landing::before,
html.is-pwa .hp-landing::after { display: none; }
html.is-pwa .papp-home { color: var(--app-text); display: block; margin: 0 auto; max-width: 1200px; padding: 24px 20px 8px; }
html.is-pwa .papp-welcome {
  background: linear-gradient(90deg,transparent,var(--app-surface) 82%),var(--app-bg-art) center 42% / cover;
  border: 1px solid var(--app-line);
  border-radius: 24px;
  min-height: 214px;
  overflow: hidden;
  padding: 28px;
}
html.is-pwa .papp-welcome__copy { max-width: 560px; }
html.is-pwa .papp-eyebrow { color: var(--app-accent); font-size: 12px; }
html.is-pwa .papp-home h1 { color: var(--app-text); font: 700 clamp(23px,3vw,34px)/1.6 var(--mui-font); margin: 8px 0; text-wrap: balance; }
html.is-pwa .papp-home p { color: var(--app-muted); font-size: 14px; line-height: 1.9; margin: 0 0 20px; }
html.is-pwa .papp-continue { align-items: center; background: var(--app-accent); border-radius: 12px; color: var(--mui-on-accent); display: inline-flex; font-size: 14px; font-weight: 700; gap: 28px; min-height: 46px; padding: 10px 18px; text-decoration: none; }
html.is-pwa .papp-home__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 26px 0 14px; }
html.is-pwa .papp-home__head h2 { font: 700 16px/1.6 var(--mui-font); color: var(--app-text); margin: 0; }
html.is-pwa .papp-home__head button { background: transparent; border: 0; color: var(--app-accent); font: inherit; font-size: 13px; min-height: 44px; padding: 8px; }
html.is-pwa .papp-shortcuts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
html.is-pwa .papp-shortcut { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 18px; color: var(--app-text); display: flex; flex-direction: column; align-items: flex-start; font: inherit; gap: 8px; min-width: 0; padding: 20px; text-align: start; text-decoration: none; cursor: pointer; }
html.is-pwa .papp-shortcut svg { color: var(--app-accent); margin-bottom: 8px; }
html.is-pwa .papp-shortcut strong { color: var(--app-text); font-size: 14px; line-height: 1.7; }
html.is-pwa .papp-shortcut span { color: var(--app-muted); font-size: 12px; line-height: 1.7; }
html.is-pwa .papp-shortcut:hover { background: var(--app-raised); }
html.is-pwa .mobile-bottom-navbar.mdock { background: var(--app-surface); backdrop-filter: none; box-shadow: 0 -4px 24px rgba(0,0,0,.1); }
html.is-pwa .mdock__item.is-active { background: var(--mui-indicator); }
html.is-pwa .mdock__item { min-height: 68px; }
html.is-pwa .mdock__label { font-size: 11px; }
html.is-pwa .papp-extras { display: grid; gap: 8px; margin-top: 20px; border-top: 1px solid var(--app-line); padding-top: 16px; }
html.is-pwa .papp-extras button,
html.is-pwa .papp-extras a { background: var(--mui-surface-raised); border: 0; border-radius: 12px; color: var(--mui-text); font: inherit; font-size: 14px; min-height: 48px; padding: 12px 16px; text-align: start; text-decoration: none; }

html.is-pwa .papp-notice { align-items: center; background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 16px; bottom: calc(84px + env(safe-area-inset-bottom,0px)); box-shadow: 0 8px 32px rgba(0,0,0,.2); color: var(--app-text); display: flex; gap: 12px; inset-inline: 16px; margin: auto; max-width: 540px; padding: 8px 14px; position: fixed; z-index: 1035; }
html.is-pwa .papp-notice span { flex: 1; font-size: 13px; line-height: 1.8; }
html.is-pwa .papp-notice button { background: transparent; border: 0; color: var(--app-accent); font: inherit; font-size: 13px; font-weight: 700; min-height: 44px; padding: 8px; }
html.is-pwa .papp-progress { background: var(--app-accent); height: 3px; inset: env(safe-area-inset-top,0px) 0 auto; pointer-events: none; position: fixed; transform: scaleX(0); transform-origin: right; z-index: 100001; }
html.is-pwa.is-app-navigating .papp-progress { display: block; transform: scaleX(.88); transition: transform 8s cubic-bezier(.05,.9,.1,1); }
html.is-pwa .papp-loading { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 99px; color: var(--app-text); display: block; font-size: 13px; left: 50%; padding: 10px 20px; position: fixed; top: calc(var(--app-bar-h) + env(safe-area-inset-top,0px) + 12px); transform: translateX(-50%); z-index: 1035; }
html.is-pwa.is-app-keyboard .mobile-bottom-navbar,
html.is-pwa.is-app-keyboard .chat-fab { visibility: hidden; pointer-events: none; }
html.is-pwa.is-app-keyboard .papp-notice { bottom: auto; top: calc(var(--app-bar-h) + env(safe-area-inset-top,0px) + 8px); }
html.is-pwa :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size: max(16px,1rem); }
html.is-pwa :is(.btn,.dropdown-item,.settings-row,.list-group-item-action,a.card):active { transform: scale(.96); }
html.is-pwa #main-content { scroll-margin-top: calc(var(--app-bar-h) + env(safe-area-inset-top,0px) + 16px); }
html.is-pwa .newbb-cat__header { grid-template-columns: 120px 1fr 48px; min-height: 104px; }
html.is-pwa .newbb-cat__image-wrap,
html.is-pwa .newbb-cat__image { min-height: 104px; }
html.is-pwa .newbb-cat__title { font-size: 18px !important; margin: 0 !important; line-height: 1.7; }
html.is-pwa .newbb-hero { padding: 20px 16px; margin-bottom: 16px; }
html.is-pwa .newbb-hero__title { font-size: 18px; }
html.is-pwa .newbb-hero__desc { font-size: 14px; }
html.is-pwa .newbb-hero__menu select { min-height: 44px; }
html.is-pwa .papp-forum-guide { border-top: 1px solid var(--app-line); color: var(--app-muted); }
html.is-pwa .papp-forum-guide summary { cursor: pointer; font-size: 13px; min-height: 48px; padding: 14px 18px; }
html.is-pwa .papp-forum-guide summary:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -3px; }
html.is-pwa .papp-forum-guide__body { padding: 0 18px 18px; font-size: 14px; line-height: 1.9; }
html.is-pwa .papp-forum-guide .newbb-cat__desc { font-size: 14px; line-height: 1.9; padding: 0; text-align: start; }
html.is-pwa :is(.cc-window,.cc_container,.cc_banner) { bottom: calc(78px + env(safe-area-inset-bottom,0px)) !important; }
html.is-pwa .cc_container { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 16px; color: var(--app-text); display: flex; align-items: center; gap: 14px; inset-inline: 12px; padding: 12px; font: 12px/1.8 var(--mui-font); }
html.is-pwa .cc_container .cc_message { flex: 1; font: inherit; margin: 0; }
html.is-pwa .cc_container .cc_btn { align-items: center; background: var(--app-accent); color: var(--mui-on-accent); display: inline-flex; flex: 0 0 auto; font: 700 12px/1.5 var(--mui-font); justify-content: center; margin: 0; min-height: 44px; padding: 8px 12px; width: auto; }
html.is-pwa .cc_container { animation: none !important; transform: none !important; }
html.is-pwa body.modal-open :is(.cc_banner-wrapper,.papp-notice) { visibility: hidden; }
html.is-pwa:has(.papp-notice:not([hidden])) :is(.cc_container,.cc_banner) { bottom: calc(162px + env(safe-area-inset-bottom,0px)) !important; }
html.is-pwa .papp :is(button,a) { -webkit-user-select: none; user-select: none; }
html.is-pwa.pwa-splash-on #pwa-splash { transition: opacity .2s ease, visibility .2s; }
html.is-pwa #pwa-splash :is(.ps-ink,.ps-logo,.ps-halo) { animation-duration: .4s; animation-delay: 0s; }
html.is-pwa #pwa-splash :is(.ps-tagline,.ps-rule) { animation-duration: .2s; animation-delay: .2s; }
html.is-pwa #pwa-splash :is(.ps-shine,.ps-spark,.ps-glint) { display: none; }

/* Named chrome stays in place while the document content transitions. */
@media (display-mode: standalone) and (prefers-reduced-motion: no-preference) {
  html.is-pwa .papp-bar { view-transition-name: papp-bar; }
  html.is-pwa .papp-rail { view-transition-name: papp-rail; }
  ::view-transition-group(papp-bar), ::view-transition-group(papp-rail) { animation-duration: .2s; }
}

@media (max-width: 767.98px) {
  html.is-pwa .newbb-cat__header { grid-template-columns: 1fr 44px; min-height: 80px; }
  html.is-pwa .papp-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  html.is-pwa .papp-shortcut { padding: 16px; }
  html.is-pwa .papp-home { padding: 18px 16px 0; }
  html.is-pwa .papp-welcome { padding: 24px 20px; min-height: 226px; }
  html.is-pwa .papp-refresh { display: none; }
  html.is-pwa .papp-home h1 { font-size: 24px; }
}
@media (min-width: 992px) {
  html.is-pwa body { padding-inline-start: var(--app-rail-w); padding-bottom: 24px; }
  html.is-pwa .papp-bar { padding-inline: 20px; }
  html.is-pwa .papp-rail { align-items: stretch; background: var(--app-surface); border-inline-end: 1px solid var(--app-line); bottom: 0; display: flex; flex-direction: column; gap: 12px; inset-inline-start: 0; overflow-y: auto; padding: 20px 8px; position: fixed; top: calc(var(--app-bar-h) + env(safe-area-inset-top,0px)); width: var(--app-rail-w); z-index: 1010; }
  html.is-pwa .papp-rail .mdock__item { align-items: center; background: transparent; border: 0; border-radius: 16px; color: var(--app-muted); display: flex; flex-direction: column; font: inherit; gap: 8px; justify-content: center; min-height: 76px; padding: 10px 2px; text-align: center; text-decoration: none; }
  html.is-pwa .papp-rail .mdock__item:is(:hover,.is-active) { background: var(--mui-indicator); color: var(--app-accent); }
  html.is-pwa .papp-rail .mdock__icon { height: 28px; width: 28px; display: grid; place-items: center; position: relative; }
  html.is-pwa .papp-rail .mdock__glyph { background: currentColor; mask-image: var(--glyph); -webkit-mask-image: var(--glyph); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; display: block; width: 26px; height: 26px; }
  html.is-pwa .papp-rail .mdock__label { line-height: 1.6; }
  html.is-pwa .papp-rail .mdock__avatar { width: 28px; height: 28px; border-radius: 50%; }
  html.is-pwa .papp-rail .mdock__badge { position: absolute; inset: -6px auto auto -8px; }
  html.is-pwa #main-content.container-fluid { width: min(100%,1440px); max-width: 100%; margin-inline: auto; padding-inline: 32px; }
  html.is-pwa #main-content > .row { margin: 20px 0 0 !important; }
  html.is-pwa .papp-notice { bottom: 24px; inset-inline-start: calc(var(--app-rail-w) + 16px); }
  html.is-pwa .papp-home { padding: 32px 32px 8px; }
  html.is-pwa :is(.cc-window,.cc_container,.cc_banner) { bottom: 20px !important; inset-inline: auto; left: 20px; max-width: 520px; }
  html.is-pwa:has(.papp-notice:not([hidden])) :is(.cc_container,.cc_banner) { bottom: 104px !important; }
}
@media (max-width: 359.98px) {
  html.is-pwa .papp-bar { gap: 4px; padding-inline: 8px; }
  html.is-pwa .papp-brand { display: none; }
  html.is-pwa .papp-shortcut { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-pwa *, html.is-pwa *::before, html.is-pwa *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.is-pwa .papp :is(a,button):active { transform: none; }
}