@import url('./library-mobile.css?v=20261013-mobilefeedback2');
/* Persistent application navigation. Load after the page-specific stylesheets. */
:root{--navigation-chrome:#0d1422;--navigation-workspace:#080d17;--navigation-hover:#1c2a3d;--navigation-active:#253f51;--navigation-top:72px;--navigation-side:256px}
html{min-width:0;background:var(--navigation-chrome)}
body.navigation-shell-mounted{background:var(--navigation-chrome)}
body.navigation-shell-campaign{--navigation-top:72px}
.navigation-shell-mounted [hidden]{display:none!important}
.navigation-topbar{position:fixed;z-index:90;inset:0 0 auto;height:var(--navigation-top);display:flex;align-items:center;gap:18px;padding:0 22px;background:var(--navigation-chrome);border:0}body.modal-active .navigation-topbar{filter:blur(7px);pointer-events:none;user-select:none}
.navigation-brand{display:block;flex:0 0 240px;color:inherit;text-decoration:none}
.navigation-brand .brand{display:flex;align-items:center;gap:12px;width:240px;text-align:left}
.navigation-brand .brand:before{flex:0 0 78px;width:78px;height:40px;margin:0}
.navigation-brand .brand-name{font-size:1.12rem;line-height:1;letter-spacing:.27em;margin-left:.27em}
.navigation-brand .tagline{display:none}
.navigation-top-actions{display:flex;align-items:center;gap:14px;margin-left:auto;min-width:0}
.navigation-role-controls{display:flex;align-items:center;gap:8px;flex:none}
.navigation-help{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:#a5b1c2;text-decoration:none}
.navigation-help:hover{background:var(--navigation-hover);color:#e4edf5}
.navigation-help:focus-visible{outline:2px solid var(--bright);outline-offset:2px;background:var(--navigation-hover);color:#e4edf5}
.navigation-help svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.navigation-role-slot .role-switch{display:flex;height:40px;margin:0;padding:3px;border:1px solid #2b3850;border-radius:999px;background:#101b2c}
.navigation-role-slot .role-switch a{display:flex;align-items:center;height:32px;padding:0 11px;border:0;border-radius:999px;color:#a5b1c2;font-size:.86rem;font-weight:650;text-decoration:none;white-space:nowrap}
.navigation-role-slot .role-switch a:hover{color:#e4edf5;background:#1c2a3d}
.navigation-role-slot .role-switch a[aria-current="page"]{color:#ccf1ed;background:#2a3e4d}
.navigation-search-slot{position:relative;flex:1;max-width:720px;min-width:180px}
.navigation-search{display:flex;align-items:center;gap:13px;width:100%;height:46px;padding:0 18px;border:0;border-radius:999px;background:#192537;color:#bdc9d5;cursor:text;text-align:left}
.navigation-search:hover{background:#223148}.navigation-search:focus-within{background:#223148;outline:2px solid var(--bright);outline-offset:2px}
.navigation-search svg,.navigation-mobile-toggle svg,.navigation-new svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.navigation-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#edf1f6;font:inherit;font-size:.95rem}.navigation-search input::placeholder{color:#aab6c6;opacity:1}.navigation-search kbd{margin-left:auto;color:#8090a4;font:12px system-ui}
.navigation-membership{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 14px;border:1px solid #33465f;border-radius:999px;background:#162337;color:#dce6f0;text-decoration:none;white-space:nowrap}
.navigation-membership-balance{display:flex;align-items:center;gap:5px;font-size:.76rem;color:#aebccd}.navigation-membership-balance strong{color:#eef5fb;font-size:.86rem;font-variant-numeric:tabular-nums}.navigation-membership .credit-coin-icon{color:var(--bright)}
.navigation-membership small{padding-left:10px;border-left:1px solid #394a60;color:#beb8f4;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.navigation-membership:hover{border-color:#536981;background:#203149}.navigation-membership:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
.navigation-account-slot{display:grid;place-items:center;width:42px;height:42px;flex:none}
.navigation-account-slot .user-panel{position:relative;width:40px;height:40px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;overflow:visible}
.navigation-account-slot .user-avatar{position:absolute;inset:2px;width:36px;height:36px;border:1px solid #7c9dbd;border-radius:50%;background:#395b83;overflow:hidden;box-shadow:0 0 0 2px #0d1422}
.navigation-account-slot .user-avatar img,.navigation-account-slot .user-avatar svg{width:100%;height:100%;object-fit:cover}
.navigation-account-slot .user-details,.navigation-account-slot .user-chevron,.navigation-account-slot .sign-out-button{display:none!important}
.navigation-account-slot .account-menu-toggle{position:absolute;z-index:2;inset:0;width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.navigation-account-slot .account-menu-toggle:hover{box-shadow:0 0 0 2px var(--bright)}.navigation-account-slot .account-menu-toggle:focus-visible{outline:2px solid var(--bright);outline-offset:3px}
.navigation-shell-mounted .app-shell{grid-template-columns:var(--navigation-side) minmax(0,1fr);min-height:100vh;padding-top:var(--navigation-top);background:var(--navigation-chrome)}
.navigation-shell-mounted .sidebar{position:sticky;z-index:40;top:var(--navigation-top);height:calc(100vh - var(--navigation-top));padding:18px 12px 18px;border:0;background:var(--navigation-chrome);box-shadow:none;overflow-y:auto;scrollbar-width:thin}
.navigation-shell-campaign .navigation-topbar{left:var(--navigation-side)}
.navigation-shell-campaign .app-shell{padding-top:0}
.navigation-shell-campaign .sidebar{top:0;height:100vh}
.navigation-shell-mounted .sidebar>.role-switch,.navigation-shell-mounted .sidebar>.global-search-button{display:none!important}
.navigation-shell-mounted .sidebar>.brand{display:block;margin:10px 0 25px;text-align:center}
.navigation-shell-mounted .sidebar>.brand:before{width:138px;height:70px;margin:0 auto 7px}
.navigation-shell-mounted .sidebar>.brand .brand-name{font-size:1.56rem;line-height:1;letter-spacing:.32em;margin-left:.32em}
.navigation-shell-mounted .sidebar>.brand .tagline{display:none}
.navigation-shell-campaign .navigation-topbar>.navigation-brand{display:none}
.navigation-shell-mounted .sidebar nav{display:flex;flex-direction:column;gap:2px}
.navigation-shell-mounted .sidebar nav a{min-height:37px;padding:8px 16px;border:0;border-radius:999px;background:none;box-shadow:none;color:#bec9d8;font-size:.88rem}
.navigation-shell-mounted .sidebar nav a:hover{background:var(--navigation-hover)}
.navigation-shell-mounted .sidebar nav a.active,.navigation-shell-mounted .sidebar nav a[aria-current="page"]{background:var(--navigation-active);box-shadow:none;color:#c9f4f0}
.navigation-shell-mounted .sidebar nav>.nav-rule{margin:7px 8px;background:#233044}
.navigation-shell-mounted .sidebar .nav-icon{width:20px;font-size:.95rem}.navigation-shell-mounted .sidebar .nav-icon svg{width:18px;height:18px}
.navigation-shell-mounted .sidebar .navigation-design-icon{display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.navigation-shell-mounted main{min-width:0;min-height:calc(100vh - var(--navigation-top) - 16px);margin:0 16px 16px 0;border-radius:20px;background:var(--navigation-workspace)}
.navigation-shell-campaign main{margin-top:var(--navigation-top)}
.navigation-shell-mounted.navigation-shell-mounted:not(.navigation-shell-campaign) .app-shell{grid-template-columns:minmax(0,1fr)}
.navigation-shell-mounted:not(.navigation-shell-campaign) .sidebar{display:none}
.navigation-shell-mounted:not(.navigation-shell-campaign) main{margin-left:16px}
.navigation-new-wrap{position:relative;margin:0 3px 20px}
.navigation-new{display:flex;align-items:center;gap:13px;min-width:126px;height:54px;padding:0 21px 0 17px;border:1px solid #344458;border-radius:17px;background:#233449;color:#e7edf4;box-shadow:0 2px 4px #0005;cursor:pointer;font-weight:600}
.navigation-new:hover,.navigation-new[aria-expanded="true"]{background:#2e425b}.navigation-new:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
.navigation-new svg{width:25px;height:25px}
.navigation-new-menu{position:absolute;z-index:95;top:60px;left:0;min-width:220px;padding:8px;border:1px solid #35455c;border-radius:14px;background:#1a2638;box-shadow:0 12px 30px #0008}
.navigation-new-menu button{display:flex;align-items:center;gap:14px;width:100%;padding:11px 12px;border:0;border-radius:8px;background:transparent;color:#dce6f0;cursor:pointer;text-align:left}
.navigation-new-menu button>span{display:grid;place-items:center;width:20px;color:var(--bright)}.navigation-new-menu button>span svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.navigation-new-menu button:hover,.navigation-new-menu button:focus-visible{background:#2a3a50;outline:0}
.navigation-new-menu .nav-film{color:var(--bright)}
.navigation-shell-mounted .sidebar>.campaign-chip{flex:none;margin:0 3px 14px}
.navigation-shell-mounted .side-bottom{margin-top:14px}
.navigation-shell-mounted .campaign-switcher-menu{position:fixed;z-index:100;right:auto;bottom:auto}
.navigation-shell-mounted .account-popover{position:fixed;z-index:130;width:218px!important;min-width:218px;padding:8px;border:1px solid #35455c;border-radius:14px;background:#1a2638;box-shadow:0 12px 30px #0008;color:#e5ecf4}
.navigation-shell-mounted .account-popover .account-menu-link,.navigation-shell-mounted .account-popover .sign-out-button{display:flex!important;align-items:center;gap:12px;width:100%;min-height:42px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#dce6f0;text-decoration:none;text-align:left;cursor:pointer}
.navigation-shell-mounted .account-popover .account-menu-link:hover,.navigation-shell-mounted .account-popover .sign-out-button:hover,.navigation-shell-mounted .account-popover :focus-visible{background:#2a3a50;outline:0}
.navigation-shell-mounted .account-popover .account-menu-legal{display:flex;justify-content:center;gap:12px;margin-top:8px;padding:13px 5px 5px;border-top:1px solid #33435a;color:#91a0b5;font-size:.72rem}
.navigation-shell-mounted .account-popover .account-menu-legal a{color:#b6c4d7;text-decoration:none}.navigation-shell-mounted .account-popover .account-menu-legal a:hover{text-decoration:underline}
.navigation-mobile-toggle{display:none;border:0;background:transparent;color:#c1ccda}
@media(max-width:1050px){.navigation-topbar{gap:10px;padding-inline:14px}.navigation-brand{flex-basis:195px}.navigation-brand .brand{width:195px}.navigation-search-slot{min-width:130px}.navigation-search kbd{display:none}.navigation-top-actions{gap:8px}.navigation-role-slot .role-switch a{padding-inline:8px}.navigation-membership{padding-inline:11px}.navigation-membership small{display:none}}
@media(max-width:760px){:root,body.navigation-shell-campaign{--navigation-side:248px;--navigation-top:210px}.navigation-topbar,.navigation-shell-campaign .navigation-topbar{left:0;height:var(--navigation-top);display:grid;grid-template-columns:40px 40px minmax(0,1fr) 40px;grid-template-rows:110px 48px 44px;padding:0 10px;gap:4px 6px}.navigation-mobile-toggle{display:grid;grid-column:1;grid-row:1;place-items:center;width:38px;height:38px;padding:0;border-radius:50%}.navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-mobile-toggle{visibility:hidden;pointer-events:none}.navigation-mobile-toggle:hover{background:var(--navigation-hover)}.navigation-brand,.navigation-shell-campaign .navigation-topbar>.navigation-brand{display:block;grid-column:2/4;grid-row:1;align-self:center;justify-self:center;width:166px}.navigation-brand .brand{width:166px}.navigation-top-actions{display:contents}.navigation-account-slot{grid-column:4;grid-row:1;width:40px;justify-self:end}.navigation-search-slot{grid-column:1;grid-row:2;min-width:40px;width:40px;align-self:start}.navigation-search{width:40px;height:40px;padding:0 9px;justify-content:center;transition:width .15s ease}.navigation-search input{width:0;flex-basis:0;opacity:0}.navigation-search kbd{display:none}.navigation-search:focus-within{position:fixed;z-index:140;left:10px;top:4px;width:calc(100vw - 20px);justify-content:flex-start}.navigation-search:focus-within input{width:auto;flex-basis:auto;opacity:1}.navigation-search kbd{display:none}.navigation-role-controls{display:flex;grid-column:3/5;grid-row:2;align-self:start;justify-self:end}.navigation-role-slot .role-switch a{padding-inline:8px;font-size:.86rem}.navigation-membership{grid-column:3/5;grid-row:3;align-self:start;justify-self:end;min-height:40px;padding-inline:12px}.navigation-shell-mounted .sidebar,.navigation-shell-campaign .sidebar{display:none;position:fixed;left:0;bottom:0;top:var(--navigation-top);width:var(--navigation-side);height:auto;background:var(--navigation-chrome);box-shadow:20px 0 40px #0009}.navigation-shell-mounted.navigation-shell-campaign.navigation-sidebar-open .sidebar{display:flex}.navigation-shell-mounted .app-shell,.navigation-shell-campaign .app-shell{grid-template-columns:minmax(0,1fr);padding-top:var(--navigation-top)}.navigation-shell-mounted main,.navigation-shell-campaign main{margin-top:0;margin-left:8px;margin-right:8px;border-radius:15px}.navigation-new-menu{position:fixed;left:12px;top:calc(var(--navigation-top) + 68px)}.navigation-shell-mounted .account-popover{right:10px!important;left:auto!important;top:calc(110px - 5px)!important;bottom:auto!important;width:min(218px,calc(100vw - 20px))!important;min-width:0}}
@media(max-width:760px){:root{--navigation-top:110px}.navigation-topbar{grid-template-rows:52px 52px}.navigation-brand{grid-column:1/4;justify-self:start;width:220px}.navigation-brand .brand{width:220px}.navigation-role-controls{grid-column:1/4;grid-row:2;justify-self:start}.navigation-membership{grid-column:3/5;grid-row:2;justify-self:end}.navigation-account-slot{grid-column:4;grid-row:1}}
@media(max-width:760px){body.navigation-shell-campaign{--navigation-top:96px}.navigation-shell-campaign .navigation-topbar{grid-template-rows:44px 44px}.navigation-shell-campaign .navigation-topbar>.navigation-brand{display:none}.navigation-shell-campaign .navigation-search-slot{grid-column:1;grid-row:1}.navigation-shell-campaign .navigation-role-controls{grid-column:2/5;grid-row:1}.navigation-shell-campaign .navigation-mobile-toggle{grid-column:1;grid-row:2}.navigation-shell-campaign .navigation-membership{grid-column:2/4;grid-row:2;justify-self:start}.navigation-shell-campaign .navigation-account-slot{grid-column:4;grid-row:2}.navigation-shell-mounted.navigation-shell-campaign main{margin-top:0}.navigation-shell-campaign .navigation-new-menu{top:calc(var(--navigation-top) + 68px)}}
@media(prefers-reduced-motion:reduce){.navigation-shell-mounted *,.navigation-shell-mounted *:before,.navigation-shell-mounted *:after{scroll-behavior:auto!important;transition:none!important}}

/* Keep the player chrome continuous around the workspace frame. */
body.player-hub-page.navigation-shell-mounted .app-shell,
body.player-hub-page.navigation-shell-mounted .navigation-topbar,
body.player-hub-page.navigation-shell-mounted .sidebar{background:linear-gradient(180deg,var(--player-chrome-top),var(--player-chrome-bottom)) fixed}

/* Keep the visible frame balanced and use the active role's chrome in the scrollbar rail. */
html:has(body.player-hub-page){background:#0d1422;scrollbar-color:#36566f #0d1422}
html:has(body.navigation-shell-gm){background:#0d1422;scrollbar-color:#36566f #0d1422}
html:has(body.navigation-shell-mounted:not(.navigation-shell-campaign)){scrollbar-gutter:stable both-edges}
body.navigation-shell-mounted::before{content:"";position:fixed;z-index:89;pointer-events:none;left:var(--navigation-frame-left,16px);right:var(--navigation-frame-right,16px);bottom:0;height:36px;background:radial-gradient(circle at top right,transparent 19.5px,var(--navigation-chrome) 20px) left top/20px 20px no-repeat,radial-gradient(circle at top left,transparent 19.5px,var(--navigation-chrome) 20px) right top/20px 20px no-repeat,linear-gradient(var(--navigation-chrome),var(--navigation-chrome)) left bottom/100% 16px no-repeat}
body.player-hub-page.navigation-shell-mounted::before{background:radial-gradient(circle at top right,transparent 19.5px,var(--player-chrome-bottom) 20px) left top/20px 20px no-repeat,radial-gradient(circle at top left,transparent 19.5px,var(--player-chrome-bottom) 20px) right top/20px 20px no-repeat,linear-gradient(var(--player-chrome-bottom),var(--player-chrome-bottom)) left bottom/100% 16px no-repeat}
body.navigation-shell-mounted::after{content:"";position:fixed;z-index:89;pointer-events:none;left:var(--navigation-frame-left,16px);right:var(--navigation-frame-right,16px);top:var(--navigation-top);bottom:auto;height:20px;background:radial-gradient(circle at bottom right,transparent 19.5px,var(--navigation-chrome) 20px) left top/20px 20px no-repeat,radial-gradient(circle at bottom left,transparent 19.5px,var(--navigation-chrome) 20px) right top/20px 20px no-repeat}
/* Keep the top corners rounded as the main element scrolls behind the fixed top bar. */
body.player-hub-page.navigation-shell-mounted::after{background:linear-gradient(180deg,var(--player-chrome-top),var(--player-chrome-bottom)) fixed;-webkit-mask:radial-gradient(circle at bottom right,transparent 19.5px,#000 20px) left top/20px 20px no-repeat,radial-gradient(circle at bottom left,transparent 19.5px,#000 20px) right top/20px 20px no-repeat;mask:radial-gradient(circle at bottom right,transparent 19.5px,#000 20px) left top/20px 20px no-repeat,radial-gradient(circle at bottom left,transparent 19.5px,#000 20px) right top/20px 20px no-repeat}
/* At the top, the workspace's own rounded border is visible; the fixed mask is only needed after scrolling. */
body.player-hub-page.navigation-shell-mounted:not(.navigation-frame-scrolled)::after{display:none}
@media(max-width:760px){body.navigation-shell-mounted::before{height:23px;background-size:15px 15px,15px 15px,100% 8px;background-image:radial-gradient(circle at top right,transparent 14.5px,var(--navigation-chrome) 15px),radial-gradient(circle at top left,transparent 14.5px,var(--navigation-chrome) 15px),linear-gradient(var(--navigation-chrome),var(--navigation-chrome))}body.player-hub-page.navigation-shell-mounted::before{background-image:radial-gradient(circle at top right,transparent 14.5px,var(--player-chrome-bottom) 15px),radial-gradient(circle at top left,transparent 14.5px,var(--player-chrome-bottom) 15px),linear-gradient(var(--player-chrome-bottom),var(--player-chrome-bottom))}body.navigation-shell-mounted::after{height:15px;background-size:15px 15px}}
@media(max-width:760px){body.player-hub-page.navigation-shell-mounted::after{-webkit-mask:radial-gradient(circle at bottom right,transparent 14.5px,#000 15px) left top/15px 15px no-repeat,radial-gradient(circle at bottom left,transparent 14.5px,#000 15px) right top/15px 15px no-repeat;mask:radial-gradient(circle at bottom right,transparent 14.5px,#000 15px) left top/15px 15px no-repeat,radial-gradient(circle at bottom left,transparent 14.5px,#000 15px) right top/15px 15px no-repeat}}
body.navigation-shell-gm .sidebar nav a:hover,body.navigation-shell-gm .sidebar nav a:focus-visible{box-shadow:inset 4px 0 0 var(--bright);outline:0}
.navigation-new-menu [data-navigation-create="memory"] .navigation-design-icon,.sidebar [data-navigation-icon="memory"] .navigation-design-icon{fill:currentColor;stroke:none}

.navigation-shell-mounted .sidebar nav [data-navigation-icon="session"] svg,.navigation-shell-mounted .sidebar nav [data-navigation-icon="memory"] svg{width:26px;height:26px}

/* Compact header logos stay still, including cloned sidebar blink state. */
.navigation-topbar .brand::before{animation:none!important;transform:none!important}.navigation-topbar .brand::after{animation:none!important;content:none!important}

/* Match the root gutters and corner masks to the same viewport-wide Player gradient. */
html:has(body.player-hub-page){background:#0d1422}
body.player-hub-page.navigation-shell-mounted{background:linear-gradient(180deg,var(--player-chrome-top),var(--player-chrome-bottom)) fixed}
body.player-hub-page.navigation-shell-mounted::before{background:linear-gradient(180deg,var(--player-chrome-top),var(--player-chrome-bottom)) fixed;mask:radial-gradient(circle at top right,transparent 19.5px,#000 20px) left top/20px 20px no-repeat,radial-gradient(circle at top left,transparent 19.5px,#000 20px) right top/20px 20px no-repeat,linear-gradient(#000,#000) left bottom/100% 16px no-repeat}
@media(max-width:760px){body.player-hub-page.navigation-shell-mounted::before{mask:radial-gradient(circle at top right,transparent 14.5px,#000 15px) left top/15px 15px no-repeat,radial-gradient(circle at top left,transparent 14.5px,#000 15px) right top/15px 15px no-repeat,linear-gradient(#000,#000) left bottom/100% 8px no-repeat}}
/* A mirrored scrollbar gutter cannot paint the viewport gradient; keep Player chrome edge-to-edge. */
html:has(body.player-hub-page.navigation-shell-mounted){scrollbar-gutter:auto;background-color:#0d1422}

/* Keep application scrolling inside the workspace and navigation panels. */
html:has(body.navigation-shell-mounted){height:100%;overflow:hidden;scrollbar-gutter:auto}
body.navigation-shell-mounted{height:100dvh;overflow:hidden}
.navigation-shell-mounted .app-shell{height:100dvh;min-height:0;grid-template-rows:minmax(0,1fr);overflow:hidden}
.navigation-shell-mounted main{height:calc(100dvh - var(--navigation-top) - 16px);min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#36566f var(--navigation-workspace);scroll-padding-top:20px}
.navigation-shell-mounted .sidebar{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin}
.navigation-shell-mounted .sidebar>*{flex-shrink:0}
.navigation-shell-campaign .sidebar{height:100dvh}
body.player-hub-page.navigation-shell-mounted main{scrollbar-color:#36566f var(--navigation-workspace)}
body.navigation-shell-mounted::before,body.navigation-shell-mounted::after{display:none}
.navigation-shell-mounted main.catalog-sticky-ready>.catalog-sticky-region,.navigation-shell-mounted main.catalog-sticky-ready>.page-header{top:0}
.navigation-shell-mounted main.catalog-sticky-ready>.catalog-toolbar{top:var(--catalog-header-height,120px)}
@media(max-width:760px){.navigation-shell-mounted main{height:calc(100dvh - var(--navigation-top) - 8px);margin-bottom:8px}.navigation-shell-mounted .sidebar{height:calc(100dvh - var(--navigation-top))}}
@media(max-height:650px){.navigation-shell-mounted main.catalog-sticky-ready>.catalog-sticky-region,.navigation-shell-mounted main.catalog-sticky-ready>.page-header,.navigation-shell-mounted main.catalog-sticky-ready>.catalog-toolbar{position:relative;top:auto}}

/* Catalog headers sit outside the scrolling portion of the workspace. */
.navigation-shell-mounted main.catalog-sticky-ready{margin-top:calc(var(--navigation-top) + var(--catalog-chrome-height,0px));height:calc(100dvh - var(--navigation-top) - var(--catalog-chrome-height,0px) - 16px);padding-top:0;border-top-left-radius:0;border-top-right-radius:0}
.navigation-shell-mounted main.catalog-sticky-ready>.catalog-sticky-region{position:fixed;top:var(--navigation-top);left:var(--catalog-frame-left);width:var(--catalog-frame-width);margin:0;background:var(--navigation-workspace);backdrop-filter:none;border-radius:20px 20px 0 0;max-height:calc(100dvh - var(--navigation-top) - 120px);overflow:auto;box-shadow:none}
@media(max-width:760px){.navigation-shell-mounted main.catalog-sticky-ready{margin-top:var(--catalog-chrome-height,0px);height:calc(100dvh - var(--navigation-top) - var(--catalog-chrome-height,0px) - 8px)}.navigation-shell-mounted main.catalog-sticky-ready>.catalog-sticky-region{border-radius:15px 15px 0 0}}
/* Chromium's native thin scrollbar includes arrows; custom tracks do not. */
@supports selector(::-webkit-scrollbar){
  .navigation-shell-mounted,.navigation-shell-mounted *{scrollbar-width:auto!important;scrollbar-color:auto!important}
  .navigation-shell-mounted ::-webkit-scrollbar{width:8px;height:8px}
  .navigation-shell-mounted ::-webkit-scrollbar-track{background:transparent}
  .navigation-shell-mounted ::-webkit-scrollbar-thumb{background:#36566f;border:2px solid transparent;background-clip:padding-box;border-radius:999px}
  .player-hub-page.navigation-shell-mounted ::-webkit-scrollbar-thumb{background-color:#36566f}
  .navigation-shell-mounted ::-webkit-scrollbar-button{display:none;width:0;height:0}
}

/* Inset scrollbar travel from the rounded ends of each scroll surface. */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar-track:vertical{margin-block:20px}
  ::-webkit-scrollbar-track:horizontal{margin-inline:20px}
  .navigation-shell-mounted main.catalog-sticky-ready::-webkit-scrollbar-track:vertical{margin-top:0}
}

/* Shared application controls: predictable sizing, type, and keyboard focus. */
.navigation-shell-mounted{--ui-control-radius:8px;--ui-control-height:40px;--ui-label-size:.8125rem;--ui-muted:#b1becd;--ui-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.navigation-shell-mounted :is(.primary-action,.secondary-action,.danger-action,.fast-upload-toggle){box-sizing:border-box;min-height:var(--ui-control-height);border-radius:var(--ui-control-radius);font-family:var(--ui-font);font-size:.875rem;line-height:1.25}
.navigation-shell-mounted :is(.primary-action,.secondary-action,.danger-action){display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;text-decoration:none}
.navigation-shell-mounted :is(.primary-action,.secondary-action,.danger-action,.fast-upload-toggle,.scene-choice-buttons button):focus-visible{outline:2px solid #a5dff3;outline-offset:3px}
.navigation-shell-mounted :is(input,textarea,select){font-family:var(--ui-font)}
.navigation-shell-mounted :is(input,textarea)::placeholder{color:var(--ui-muted);opacity:1}
.navigation-shell-mounted :is(.import-explainer h2,.memory-invitation h2,.player-live-workspace>.memory-invitation h2,.quest-card h2,.quest-import h3){font-family:var(--ui-font);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.navigation-shell-mounted :is(.inline-memory-form,.memory-dialog) label{font-family:var(--ui-font);font-size:var(--ui-label-size);line-height:1.4}
.navigation-shell-mounted .scene-choice-buttons[aria-label="Invitation type"]{display:flex;width:max-content;max-width:100%;gap:4px;padding:4px;border:1px solid #40536a;border-radius:999px;background:#0b1220}
.navigation-shell-mounted .scene-choice-buttons[aria-label="Invitation type"] button{min-height:36px;border:0;border-radius:999px;padding:8px 20px;background:transparent;color:#bdcad8;font:600 .875rem/1.25 var(--ui-font)}
.navigation-shell-mounted .scene-choice-buttons[aria-label="Invitation type"] button[aria-pressed="true"]{background:var(--bright);color:#08121c}
@media(max-width:520px){.navigation-shell-mounted .catalog-sticky-region .page-actions>.primary-action{font-size:.78rem;padding:8px 10px}}
.navigation-shell-mounted :is(.primary-action,.secondary-action,.danger-action,.fast-upload-toggle)[hidden]{display:none}
/* Back navigation is a quiet, consistent text action. */
.navigation-shell-mounted :is(.settings-back,.back-link,.pricing-back){display:inline-flex;align-items:center;width:max-content;min-height:36px;margin-bottom:16px;padding:6px 0;border:0;border-radius:4px;background:transparent;color:var(--muted);font:500 .875rem/1.4 var(--ui-font);text-decoration:none;box-shadow:none;cursor:pointer}
.navigation-shell-mounted :is(.settings-back,.back-link,.pricing-back):hover{color:var(--bright)}
.navigation-shell-mounted :is(.settings-back,.back-link,.pricing-back):focus-visible{outline:2px solid #a5dff3;outline-offset:4px}
/* Credit totals support the card heading; back controls have a padded hit area. */
.navigation-shell-mounted .account-membership-settings .account-credit-total{font-size:1.05rem;font-weight:650;margin-top:8px}
.navigation-shell-mounted .account-credit-total .credit-coin-icon{width:18px;height:18px}
.navigation-shell-mounted :is(.settings-back,.back-link,.pricing-back){padding:8px 12px;margin-left:-12px}

/* App layouts: keep artwork prominent and supporting panels compact. */
.navigation-shell-mounted .account-settings-layout .account-membership-group{align-items:start}
.navigation-shell-mounted .account-settings-layout .account-membership-group>.settings-card{height:auto}
.navigation-shell-mounted .account-settings-layout .account-membership-group>.account-membership-main{padding-bottom:44px}
.navigation-shell-mounted .memory-page-generator:has(>.memory-generator-disclosure:not([open])){padding:14px 20px}
.navigation-shell-mounted .memory-generator-disclosure>summary{min-height:32px}
.navigation-shell-mounted .memory-generator-disclosure>summary h2{font-size:1.15rem}
.navigation-shell-mounted .player-live-empty{min-height:160px;border:0;background:none}
.navigation-shell-mounted .session-empty{border:0;background:none;padding:32px 24px}
.navigation-shell-mounted .character-appearance-profile{background:var(--panel,#101e2c);border-color:var(--line);border-radius:12px}
.navigation-shell-mounted .player-character-profile-layout>.player-character-support-grid :is(.character-sheet-panel,.character-appearance-profile){background:var(--panel,#101e2c);border-color:var(--line)}
.navigation-shell-mounted .profile-header>[data-delete-entry]{background:transparent;border-color:transparent;color:var(--muted)}
.navigation-shell-mounted .profile-header>[data-delete-entry]:hover{color:#ffadb3;border-color:rgba(255,120,130,.4);background:rgba(54,16,25,.3)}
.navigation-shell-mounted .import-explainer{padding:20px;background:transparent}
.navigation-shell-mounted .import-explainer h2{font-size:1.2rem;margin:8px 0 12px}
.navigation-shell-mounted .import-explainer summary{padding-block:13px;font-size:.875rem}
@media(min-width:1051px){.navigation-shell-mounted .import-start-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.6fr)}}

/* Both roles share the existing GM palette; role labels identify the workspace. */
body.navigation-shell-player{--bright:#66c5e7;--gold:#8f86ff;--line:#2b3850;--navigation-active:#253f51}
body.navigation-shell-player.navigation-shell-campaign{--gold:#82aee4;--line:#2d465f}
body.navigation-shell-player :is(.navigation-new,.campaign-chip,.party-panel){border-color:var(--line)}


body.player-hub-page .memory-generator-aperture{background:var(--memory-purple)!important;filter:drop-shadow(0 0 10px #9a75dcaa)}

body.player-hub-page .memory-composer-header{border-color:rgba(182,149,240,.52)}
body.player-hub-page .memory-composer-header .eyebrow{color:#cdb7f3}
body.player-hub-page .memory-composer-header>.memory-generator-aperture{background:var(--memory-purple)!important;filter:drop-shadow(0 0 10px #9a75dcaa)}
/* Memory composer background is shared with all generators in sessions.css. */

/* Keep the current role legible without using a separate color theme. */
.navigation-role-slot .role-switch{height:44px;padding:3px}
.navigation-role-slot .role-switch a{height:36px;padding-inline:16px;font-size:.95rem;font-weight:600}
.navigation-role-slot .role-switch a[aria-current="page"]{font-weight:750;box-shadow:inset 0 0 0 1px #567083}
@media(max-width:760px){.navigation-role-slot .role-switch a{padding-inline:10px;font-size:.86rem}}

/* Balance overview spacing around the reserved internal scrollbar. */
.navigation-shell-mounted main#overview{scrollbar-gutter:stable both-edges;padding-top:26px}

/* Space the chapter content below fixed catalog chrome once, not per nested group. */
.navigation-shell-mounted main.catalog-sticky-ready{padding-top:28px}
.navigation-shell-mounted main.catalog-sticky-ready>:nth-child(1 of .catalog-section:not([hidden]),.scene-chapter-group:not([hidden])){margin-top:0}

/* Keep Help beside the role switch, with credits below on narrow account pages. */
/* Search uses the space left after fixed controls; long credit labels can shrink. */
.navigation-membership{max-width:100%}
.navigation-membership,.navigation-membership-balance,.navigation-membership-balance strong,.navigation-membership small{min-width:0}
.navigation-membership-balance strong,.navigation-membership small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navigation-membership-balance .credit-coin-icon{flex:none}
@media(min-width:761px){
  .navigation-shell-campaign .navigation-search-slot{min-width:40px}
  .navigation-search-compact .navigation-search{width:40px;padding-inline:9px}
  .navigation-search-compact .navigation-search input{width:0;flex-basis:0;opacity:0}
  .navigation-search-compact .navigation-search kbd{display:none}
  .navigation-search-compact:focus-within .navigation-search{position:fixed;z-index:140;left:calc(var(--navigation-side) + 14px);top:13px;width:calc(100vw - var(--navigation-side) - 28px)}
  .navigation-search-compact:focus-within .navigation-search input{width:auto;flex-basis:auto;opacity:1}
  .navigation-search-compact .global-search-panel{position:fixed;top:calc(var(--navigation-top) + 5px);left:calc(var(--navigation-side) + 14px);right:14px;width:auto}
}
@media(min-width:761px) and (max-width:1100px){.navigation-shell-campaign .navigation-role-slot .role-switch a{padding-inline:10px;font-size:.86rem}}

@media(max-width:520px){body.navigation-shell-mounted:not(.navigation-shell-campaign){--navigation-top:154px}.navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-topbar{grid-template-rows:52px 44px 44px}.navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-role-controls{grid-column:1/5;grid-row:2}.navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-membership{grid-row:3}}

@media(min-width:761px) and (max-width:900px){.navigation-shell-campaign .navigation-top-actions{gap:6px}.navigation-shell-campaign .navigation-role-controls{gap:4px}.navigation-shell-campaign .navigation-role-slot .role-switch a{padding-inline:8px}.navigation-shell-campaign .navigation-membership{padding-inline:8px}.navigation-shell-campaign .navigation-membership-balance>span:last-child{display:none}}

/* Give the two account-page controls separate grid tracks between mobile layouts. */
@media(min-width:521px) and (max-width:760px){
  .navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-topbar{grid-template-columns:max-content minmax(0,1fr) 40px}
  .navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-role-controls{grid-column:1;grid-row:2}
  .navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-membership{grid-column:2/4;grid-row:2;max-width:100%}
  .navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-account-slot{grid-column:3;grid-row:1}
  .navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-brand{grid-column:1/3;grid-row:1}
}

.navigation-new-menu [data-navigation-create="studio"] .navigation-design-icon{color:var(--memory-purple)}
.navigation-new-menu [data-navigation-create="memory"] .navigation-design-icon{color:var(--memory-purple)}

/* Mobile visual feedback: keep every app-shell control on one compact row. */
.navigation-role-short{display:none}
@media(max-width:760px){
  body.navigation-shell-mounted,body.navigation-shell-mounted.navigation-shell-campaign,body.navigation-shell-mounted:not(.navigation-shell-campaign){--navigation-top:60px}
  .navigation-topbar,.navigation-shell-campaign .navigation-topbar,.navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-topbar{display:flex;align-items:center;gap:4px;padding:8px;height:var(--navigation-top);grid-template-columns:none;grid-template-rows:none;justify-content:space-between}
  .navigation-topbar>*{align-self:center}
  .navigation-brand{order:0;flex:0 0 48px;width:48px;margin-right:0}
  .navigation-brand .brand{width:48px;gap:0}
  .navigation-brand .brand:before{flex-basis:48px;width:48px;height:32px}
  .navigation-brand .brand-name{display:none}
  .navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-mobile-toggle{display:none}
  .navigation-shell-campaign .navigation-topbar>.navigation-brand{display:none}
  .navigation-mobile-toggle{order:0;flex:none;width:40px;height:40px}
  .navigation-search-slot{order:1;flex:0 0 40px;min-width:40px;width:40px;align-self:center}
  .navigation-search{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;gap:0}
  .navigation-search:not(:focus-within) input{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer}
  .navigation-search:focus-within{display:flex;gap:10px;top:8px;left:8px;width:calc(100vw - 16px);padding-inline:12px}
  .navigation-search:focus-within input{position:static;width:auto;height:auto;flex:1;opacity:1;cursor:text}
  .navigation-top-actions{display:contents}
  .navigation-role-controls{display:contents;margin-left:0}
  .navigation-help{order:2}
  .navigation-role-slot{order:3;flex:none}
  .navigation-help{width:44px;height:44px}
  .navigation-help svg{width:21px;height:21px}
  .navigation-role-slot .role-switch{height:44px;padding:3px}
  .navigation-role-slot .role-switch a{height:36px;padding-inline:9px;font-size:.8rem}
  .navigation-role-full{display:none}
  .navigation-role-short{display:inline}
  .navigation-membership{order:4;flex:0 1 auto;min-width:0;min-height:40px;max-width:100px;padding:6px 9px;align-self:center}
  .navigation-membership-balance{gap:4px}
  .navigation-membership-balance>span:last-child,.navigation-membership small{display:none}
  .navigation-membership-balance strong{font-size:.82rem}
  .navigation-membership .credit-coin-icon{width:17px;height:17px}
  .navigation-account-slot{order:5;flex:none;width:40px;height:40px;align-self:center}
  .navigation-shell-mounted .account-popover{top:calc(var(--navigation-top) - 4px)!important}
}
@media(max-width:359px){
  .navigation-topbar,.navigation-shell-campaign .navigation-topbar,.navigation-shell-mounted:not(.navigation-shell-campaign) .navigation-topbar{gap:2px;padding-inline:6px}
  .navigation-brand{flex-basis:40px;width:40px}
  .navigation-brand .brand{width:40px}
  .navigation-brand .brand:before{flex-basis:40px;width:40px}
  .navigation-mobile-toggle,.navigation-search-slot,.navigation-search{width:36px;min-width:36px}
  .navigation-search-slot{flex-basis:36px}
  .navigation-search:focus-within{width:calc(100vw - 16px)}
  .navigation-role-slot .role-switch a{padding-inline:4px;font-size:.75rem}
  .navigation-membership{padding-inline:6px}
  .navigation-membership .credit-coin-icon{width:15px;height:15px}
  .navigation-account-slot{width:36px}
}

/* Keep the coin and ordinary balances visible beside evenly spaced mobile controls. */
@media(max-width:400px){
  .navigation-shell-campaign .navigation-membership{padding-inline:4px;min-width:44px}
  .navigation-shell-campaign .navigation-membership .credit-coin-icon{display:block}
}
@media(min-width:360px) and (max-width:400px){
  .navigation-shell-campaign .navigation-role-slot .role-switch a{padding-inline:5px}
}

/* Distribute mobile controls individually, including the Guide target. */
@media(max-width:400px){
  .navigation-shell-campaign .navigation-mobile-toggle,.navigation-shell-campaign .navigation-search-slot,.navigation-shell-campaign .navigation-search{width:36px;min-width:36px}
  .navigation-shell-campaign .navigation-search-slot{flex-basis:36px}
  .navigation-shell-campaign .navigation-account-slot{width:36px}
  .navigation-shell-campaign .navigation-membership-balance{gap:3px}
  .navigation-shell-campaign .navigation-membership .credit-coin-icon{width:15px;height:15px}
}
@media(max-width:760px){
  .navigation-shell-campaign .navigation-search:focus-within{width:calc(100vw - 16px)}
}

/* At 320px, reclaim padding rather than hiding the coin or shrinking the Guide target. */
@media(max-width:359px){
  .navigation-shell-campaign .navigation-topbar{padding-inline:4px;gap:1px}
  .navigation-shell-campaign .navigation-role-slot .role-switch a{flex:none;padding-inline:2px}
  .navigation-shell-campaign .navigation-membership{padding-inline:2px}
}

/* Keep catalog creation controls together on mobile without shrinking hit height. */
@media(max-width:760px){
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))){display:flex;flex-wrap:nowrap;gap:6px;min-width:0}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden])))>:is(.primary-action,.add-chapter-action){flex:1 1 auto;min-width:0;min-height:44px;padding:8px 6px;font-size:.78rem;white-space:nowrap}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))) .fast-upload-toggle{flex:none;min-height:44px;padding:6px;gap:4px}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))) .fast-upload-toggle input{width:16px;height:16px}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))) .fast-upload-toggle svg{width:28px;height:20px}
}
@media(max-width:359px){
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))){gap:4px}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden])))>:is(.primary-action,.add-chapter-action){font-size:.72rem;padding-inline:5px}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))) .fast-upload-toggle{padding-inline:5px;gap:3px}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))) .fast-upload-toggle svg{width:26px}
}

@media(max-width:374px){
  .navigation-shell-mounted .catalog-sticky-region>.page-header:has(>.page-actions>.primary-action[data-entry-type="character"]):has(>.page-actions>.fast-upload-toggle):has(>.page-actions>.add-chapter-action):not(:has(>.page-actions>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))){padding-inline:8px}
}

/* Phone landscape retains the full Characters action row beside the existing sidebar. */
@media(min-width:761px) and (max-width:899px){
  .navigation-shell-mounted .catalog-sticky-region>.page-header:has(>.page-actions>.primary-action[data-entry-type="character"]):has(>.page-actions>.fast-upload-toggle):has(>.page-actions>.add-chapter-action){flex-direction:column;align-items:stretch;gap:4px;padding-block:6px}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action){width:100%;min-width:0;justify-content:flex-start}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action):not(:has(>:not(.primary-action,.fast-upload-toggle,.add-chapter-action,[hidden]))){flex-wrap:nowrap}
  .navigation-shell-mounted .catalog-sticky-region .page-actions:has(>.primary-action[data-entry-type="character"]):has(>.fast-upload-toggle):has(>.add-chapter-action)>:is(.primary-action,.add-chapter-action,.fast-upload-toggle){min-height:44px}
}

/* The shared mobile drawer supersedes the legacy session-page horizontal bar. */
@media(max-width:760px){
  body.navigation-shell-mounted.navigation-shell-campaign .sidebar{position:fixed;top:var(--navigation-top);bottom:0;left:0;height:calc(100dvh - var(--navigation-top));max-width:calc(100vw - 24px);padding:18px 12px calc(18px + env(safe-area-inset-bottom,0px));border:0;overflow-x:hidden;overflow-y:auto}
  body.navigation-shell-mounted.navigation-shell-campaign .sidebar nav{flex-direction:column;gap:2px;overflow:visible}
  body.navigation-shell-mounted.navigation-shell-campaign .sidebar nav>a,body.navigation-shell-mounted.navigation-shell-campaign .sidebar nav>button{flex:0 0 auto;width:100%;grid-template-columns:22px minmax(0,1fr);padding:8px 16px;font-size:.88rem}
  body.navigation-shell-mounted.navigation-shell-campaign .sidebar>.brand,body.navigation-shell-mounted.navigation-shell-campaign .sidebar>.side-bottom,body.navigation-shell-mounted.navigation-shell-campaign .sidebar nav>.nav-rule{display:block}
}

/* Mobile redesign. The existing 760px boundary and desktop rules stay intact. */
.mobile-profile-actions{display:none}
@media(max-width:760px){
  body.mobile-redesign.navigation-shell-mounted{--navigation-top:60px;--mobile-bottom-size:calc(64px + env(safe-area-inset-bottom,0px))}
  body.mobile-redesign.mobile-library-open{--navigation-top:104px}
  body.mobile-redesign .navigation-topbar,body.mobile-redesign.navigation-shell-campaign .navigation-topbar{left:0;right:0;height:60px;padding:8px;gap:4px;justify-content:flex-start}
  body.mobile-redesign .navigation-topbar>.navigation-brand{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;order:0}
  body.mobile-redesign .navigation-brand .brand{width:44px}
  body.mobile-redesign .navigation-brand .brand:before{width:40px;flex-basis:40px;height:32px}
  body.mobile-redesign .navigation-mobile-toggle,body.mobile-redesign .navigation-role-controls,body.mobile-redesign .navigation-role-slot,body.mobile-redesign .navigation-help{display:none}
  body.mobile-redesign .navigation-search-slot{order:1;flex:1 1 120px;width:auto;min-width:44px;max-width:none}
  body.mobile-redesign .navigation-search{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:6px;width:100%;min-width:44px;height:44px;padding:0 10px}
  body.mobile-redesign .navigation-search:not(:focus-within) input{position:static;inset:auto;opacity:1;width:100%;height:auto;min-width:0;font-size:16px;cursor:text}
  body.mobile-redesign .navigation-search-compact .navigation-search:not(:focus-within){padding:0;justify-content:center}
  body.mobile-redesign .navigation-search-compact .navigation-search:not(:focus-within) input{position:absolute;inset:0;opacity:0;cursor:pointer;height:44px}
  body.mobile-redesign .navigation-search:focus-within{position:fixed;top:8px;left:8px;width:calc(100vw - 16px);padding:0 12px;z-index:140}
  body.mobile-redesign .navigation-search:focus-within input{position:static;opacity:1;width:auto;flex:1;font-size:16px}
  body.mobile-redesign .navigation-membership{order:2;flex:0 1 auto;min-width:44px;max-width:min(42vw,160px);min-height:44px;padding:6px 8px;margin-left:auto}
  body.mobile-redesign .navigation-membership-balance{min-width:0;gap:4px}
  body.mobile-redesign .navigation-membership-balance strong{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.15;font-size:.82rem}
  body.mobile-redesign .navigation-membership .credit-coin-icon{flex:none;width:18px;height:18px}
  body.mobile-redesign .navigation-account-slot,body.mobile-redesign .navigation-account-slot .user-panel,body.mobile-redesign .navigation-account-slot .account-menu-toggle{order:3;width:44px;height:44px;flex:none}
  body.mobile-redesign .navigation-account-slot .user-avatar{inset:4px}
  body.mobile-redesign .navigation-search-slot .global-search-panel{position:fixed;left:8px;right:8px;top:60px;width:auto;max-height:calc(100dvh - 144px)}
  body.mobile-redesign .app-shell{grid-template-columns:minmax(0,1fr);padding-top:var(--navigation-top)}
  body.mobile-redesign .app-shell>.sidebar{display:none!important}
  body.mobile-redesign.navigation-shell-mounted main{height:calc(100dvh - var(--navigation-top) - var(--mobile-bottom-size));min-height:0;margin:0;border-radius:0;scrollbar-gutter:auto;padding-bottom:96px;scroll-padding-bottom:96px}
  body.mobile-redesign.navigation-shell-mounted main.catalog-sticky-ready{margin-top:var(--catalog-chrome-height,0px);height:calc(100dvh - var(--navigation-top) - var(--catalog-chrome-height,0px) - var(--mobile-bottom-size))}
  body.mobile-redesign.navigation-shell-mounted main.catalog-sticky-ready>.catalog-sticky-region{top:var(--navigation-top);left:0;width:100%;border-radius:0;max-height:calc(100dvh - var(--navigation-top) - var(--mobile-bottom-size) - 96px)}
  body.mobile-redesign .catalog-sticky-region .page-actions :is(.primary-action,.secondary-action,.add-chapter-action,.fast-upload-toggle){min-height:44px}
  body.mobile-redesign.navigation-shell-mounted::before,body.mobile-redesign.navigation-shell-mounted::after{display:none}
  .mobile-library-tabs{position:fixed;z-index:89;top:60px;left:0;right:0;height:44px;display:flex;flex-direction:row;gap:0;align-items:stretch;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none!important;background:var(--navigation-chrome);border-bottom:1px solid #435167}
  .mobile-library-tabs::-webkit-scrollbar{display:none}
  body.mobile-redesign .mobile-library-tabs a{box-sizing:border-box;flex:0 0 calc((100vw - 64px)/2);min-width:0;display:flex;align-items:center;height:44px;padding:0 16px;white-space:nowrap;font:700 16px var(--ui-font,system-ui);color:#aab8c9;text-decoration:none;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;box-shadow:none}
  body.mobile-redesign .mobile-library-tabs a:is(:hover,:focus-visible){border-color:transparent;border-bottom-color:transparent;border-radius:0;background:var(--navigation-hover);box-shadow:none}
  body.mobile-redesign .mobile-library-tabs a[aria-current]{color:#e6f8f4;border-bottom-color:var(--bright)}
  body.mobile-redesign.mobile-catalog-titles :is(main.catalog-page,main.player-catalog-page) .page-header h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  body.mobile-redesign.mobile-catalog-titles main.catalog-page .page-header{gap:0}
  body.mobile-redesign.mobile-catalog-titles :is(main.catalog-page,main.player-catalog-page) .page-header h1+p{margin-top:0}
  .mobile-bottom-navigation{position:fixed;z-index:90;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:var(--mobile-bottom-size);padding:0 0 env(safe-area-inset-bottom,0px);background:var(--navigation-chrome);border-top:1px solid #33465a;box-sizing:border-box}
  body.mobile-redesign .mobile-bottom-navigation a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-width:0;min-height:44px;padding:5px 2px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#aab8c9;text-decoration:none;font:600 12px var(--ui-font,system-ui)}
  body.mobile-redesign .mobile-bottom-navigation a:is(:hover,:focus-visible){border:0;border-radius:0;background:var(--navigation-hover);box-shadow:none}
  body.mobile-redesign .mobile-bottom-navigation a[aria-current]{border-radius:0;color:var(--bright);background:#152838;box-shadow:none}
  body.mobile-redesign :is(.mobile-bottom-navigation a,.mobile-library-tabs a)::before,body.mobile-redesign :is(.mobile-bottom-navigation a,.mobile-library-tabs a)::after{content:none;display:none}
  .mobile-bottom-navigation a[aria-disabled]{opacity:.5}
  .mobile-bottom-navigation svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-new-trigger{position:fixed;z-index:91;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--mobile-bottom-size) + 16px);display:grid;place-items:center;width:78px;height:78px;border:1px solid #b3f4e8;border-radius:50%;background:var(--bright);color:#081a24;box-shadow:0 4px 18px #0007;opacity:1;transform:translateY(0);visibility:visible;transition:opacity .14s ease,transform .14s ease,visibility 0s linear}
  .mobile-new-trigger svg,.mobile-campaign-settings svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-new-trigger svg{width:36px;height:36px}
  .mobile-new-trigger.is-scroll-hidden:not(:focus){opacity:0;pointer-events:none;transform:translateY(12px);visibility:hidden;transition-delay:0s,0s,.14s}
  body.mobile-redesign :is(.mobile-bottom-navigation a,.mobile-library-tabs a,.mobile-new-trigger,.mobile-campaign-settings):focus-visible{outline:2px solid #fff;outline-offset:-4px}
  body.mobile-redesign .account-popover{max-height:calc(100dvh - 140px);overflow-y:auto;top:60px!important;right:8px!important;left:auto!important;width:min(280px,calc(100vw - 16px))!important}
  body.mobile-redesign .mobile-profile-actions{display:block}
  body.mobile-redesign .mobile-profile-actions .navigation-role-slot{display:flex;justify-content:center;padding:4px 0 10px}
  body.mobile-redesign .mobile-profile-actions .role-switch{width:max-content;max-width:100%;height:44px;margin:0;padding:3px}
  body.mobile-redesign .mobile-profile-actions .role-switch a{flex:1;justify-content:center;height:36px;padding:0 16px;font-size:.95rem;font-weight:600}
  body.mobile-redesign .mobile-profile-actions .role-switch a[aria-current]{font-weight:750}
  body.mobile-redesign .mobile-profile-actions .navigation-role-full{display:inline}
  body.mobile-redesign .mobile-profile-actions .navigation-role-short{display:none}
  body.mobile-redesign .mobile-profile-actions :is(.role-switch a,.campaign-switcher-toggle,.campaign-switcher-option):focus-visible{outline:2px solid #fff;outline-offset:-3px;background:#243d4c}
  .mobile-profile-campaign{padding:0 12px 8px}
  .mobile-profile-campaign .campaign-switcher-toggle{min-height:38px;padding:0 10px}
  .mobile-profile-campaign .campaign-switcher-toggle>span{margin:0;line-height:1}
  .mobile-profile-campaign .campaign-switcher-toggle>b{display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:0;margin:0}
  .mobile-profile-campaign .campaign-switcher-toggle>b::before{content:"";display:block;width:5px;height:5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
  body.mobile-redesign .mobile-profile-campaign .campaign-switcher-menu{z-index:131}
  .mobile-profile-label{display:block;padding:10px 12px 2px;font-size:.75rem;color:#9cacc0}
  body.mobile-redesign .account-popover .account-menu-link{box-sizing:border-box;min-height:44px;width:100%;border:0;background:transparent;text-align:left;font:inherit;font-size:.88rem;overflow-wrap:anywhere}
  body.mobile-redesign .account-popover .account-menu-link[aria-current]{color:var(--bright);background:#213747}
  body.mobile-redesign .account-popover .account-menu-link:focus-visible{outline:2px solid #fff;outline-offset:-3px;background:#243d4c}
  body.mobile-redesign dialog.mobile-new-sheet.navigation-new-menu{position:fixed;inset:auto max(16px,env(safe-area-inset-right,0px)) calc(var(--mobile-bottom-size) + 110px) auto;box-sizing:border-box;width:220px;max-width:calc(100vw - 32px);max-height:calc(100dvh - var(--mobile-bottom-size) - 126px);margin:0;overflow-y:auto;color:#e5ecf4}
  .mobile-new-sheet::backdrop{background:transparent}
  .mobile-campaign-settings{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:44px;height:44px;margin-left:8px;color:var(--bright)}
  body.mobile-redesign .hero-copy h1{overflow-wrap:anywhere}
  body.mobile-redesign .hero-copy:has(.mobile-campaign-settings) h1{display:inline-block;max-width:calc(100% - 52px);vertical-align:middle}
  body.mobile-redesign .hero-copy>.eyebrow{display:block;margin-bottom:12px}
  body.mobile-redesign #overview .edit-button{width:44px;height:44px}
  body.mobile-redesign #overview .section-heading{height:auto;min-height:44px;flex-wrap:wrap;gap:8px}
  body.mobile-redesign #overview .section-heading h2{min-width:0;white-space:normal}
  body.mobile-redesign #overview .section-heading h2:after{display:none}
  body.mobile-redesign #overview .section-heading>a{display:flex;align-items:center;min-height:44px;white-space:nowrap}
  body.mobile-redesign .entry-profile .profile-art :is(.profile-source .source-icon,.edit-button,.image-download,.vision-crop-handle){width:44px;height:44px;min-width:44px;min-height:44px}
  body.mobile-redesign .entry-profile .profile-art :is(.edit-button,.image-download,.vision-crop-handle):is(:hover,:focus-visible){width:44px}
  body.mobile-redesign :is(.profile-art,.player-character-art-frame) .token-stamp-launch{min-width:44px;height:44px;min-height:44px}
  body.mobile-redesign .player-character-art-frame .player-art-tools>:is(button,a){width:44px!important;height:44px!important;min-width:44px;min-height:44px}
  body.mobile-redesign .player-character-art-frame .player-art-tools>:is(button,a)>span{display:none}
  body.mobile-redesign .player-character-art-frame .player-art-tools>:is(button,a):focus-visible{outline:2px solid #fff;outline-offset:-3px}
  body.mobile-redesign .entry-profile-actions>button{min-width:44px;min-height:44px}
  body.mobile-redesign button:is(.lightbox-close,.modal-close,[aria-label^="Close"]){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  body.mobile-redesign button:is(.lightbox-close,.modal-close,[aria-label^="Close"]):focus-visible{outline:2px solid #fff;outline-offset:-3px}
  body.mobile-redesign .entry-profile .profile-art:not(.is-token-stamping) :is(button,.profile-source){opacity:1;pointer-events:auto}
  body.mobile-redesign .entry-profile .profile-art button:focus-visible{outline:2px solid #fff;outline-offset:-3px}
  body.mobile-redesign .getting-started{bottom:calc(var(--mobile-bottom-size) + 110px)}
}
/* Short landscape keeps the title, creation row and search visible together. */
@media(max-width:760px) and (max-height:520px){
  body.mobile-redesign.navigation-shell-mounted main.catalog-sticky-ready{margin-top:0;padding-top:0;height:calc(100dvh - var(--navigation-top) - var(--mobile-bottom-size))}
  body.mobile-redesign .catalog-sticky-region>.page-header{padding-block:6px;gap:4px}
  body.mobile-redesign .catalog-sticky-region>.page-header .eyebrow{display:none}
  body.mobile-redesign .catalog-sticky-region>.page-header h1{font-size:1.5rem;margin:2px 0 0}
  body.mobile-redesign .catalog-sticky-region>.catalog-toolbar{padding-block:4px}
  body.mobile-redesign.navigation-shell-mounted main.catalog-sticky-ready>.catalog-sticky-region{position:relative;top:auto;left:auto;width:var(--catalog-frame-width,100%);margin-inline:calc((100% - var(--catalog-frame-width,100%))/2);max-height:none;overflow:visible}
}
@media(min-width:521px) and (max-width:760px){body.mobile-redesign .mobile-library-tabs a{flex:0 0 auto;padding-inline:24px}}
@media(prefers-reduced-motion:reduce){.mobile-new-trigger{transition:none}}