/* Each destination has a finished illustration behind the app.
   Each theme gets a separate veil; cards, navigation and fields stay opaque. */
:root{
 --page-art:url('/stadium-dusk.webp');
 --page-art-position:center;
 --page-art-mobile-position:72% center;
 --stadium-veil:linear-gradient(90deg,#f2ecdfd9,#f2ecdfc2 45%,#f2ecdfb0),linear-gradient(180deg,#f2ecdf44,transparent 45%,#f2ecdf66);
}
[data-theme="dark"]{
 --stadium-veil:linear-gradient(90deg,#101b28bf,#101b2899 45%,#101b2873),linear-gradient(180deg,#101b2833,transparent 45%,#101b2859);
}
.app-shell[data-room],.franchise-library{position:relative;isolation:isolate;background:var(--paper)}
/* Scope artwork to the page root, so links with data-view cannot inherit a
   different scene. Only the active page's raster is requested by the browser. */
.app-shell[data-view="hub"]{--page-art:url('/bg-franchise.webp');--page-art-mobile-position:65% center}
.app-shell[data-view="gameday"]{--page-art:url('/bg-gameday.webp');--page-art-mobile-position:58% center}
.app-shell[data-view="roster"]{--page-art:url('/bg-locker.webp');--page-art-mobile-position:75% center}
.app-shell[data-view="playbook"]{--page-art:url('/bg-playbook.webp');--page-art-mobile-position:25% center}
.app-shell[data-view="draft"]{--page-art:url('/bg-draft.webp');--page-art-mobile-position:73% center}
.app-shell[data-view="office"],.franchise-library.library-new{--page-art:url('/bg-office.webp');--page-art-mobile-position:70% center}
.app-shell[data-view="schedule"]{--page-art:url('/bg-schedule.webp');--page-art-mobile-position:65% center}
.app-shell[data-view="stats"]{--page-art:url('/bg-statistics.webp');--page-art-mobile-position:72% center}
.app-shell[data-view="trades"]{--page-art:url('/bg-trades.webp');--page-art-mobile-position:70% center}
.app-shell[data-view="market"]{--page-art:url('/bg-market.webp');--page-art-mobile-position:70% center}
.app-shell[data-view="scouting"]{--page-art:url('/bg-scouting.webp');--page-art-mobile-position:68% center}
.app-shell[data-view="league"]{--page-art:url('/bg-league.webp');--page-art-mobile-position:73% center}
.app-shell[data-view="film"]{--page-art:url('/bg-film.webp');--page-art-mobile-position:73% center}
.franchise-library.library-setup{--page-art:url('/bg-draft.webp');--page-art-mobile-position:73% center}
.app-shell[data-room]::before,.franchise-library::before{
 content:"";
 position:fixed;
 inset:0;
 z-index:-1;
 pointer-events:none;
 background-image:var(--stadium-veil),var(--page-art);
 background-size:cover;
 background-position:var(--page-art-position);
 background-repeat:no-repeat;
}
.app-shell[data-room]{--room-edge:var(--line);--room-metal:#8c9a94}
.app-shell[data-room] .main-shell{background:transparent}
/* Standalone descriptions need full contrast over art, especially in light
   mode. Muted text inside solid cards keeps its existing hierarchy. */
.app-shell[data-room] .page-heading p:not(.eyebrow),
.app-shell[data-room] .league-statistics>.league-note{color:var(--ink)}
[data-theme="dark"] .app-shell[data-room]{--room-metal:#566c70}
/* Retain a room's scenery in portrait instead of cropping to the empty center.
   The decorative layer never captures clicks and needs no parallax or motion. */
@media(max-width:760px){
 .app-shell[data-room]::before,.franchise-library::before{background-position:var(--page-art-mobile-position)}
}
/* Legacy photo assets remain available for their existing attribution. */
.room-backdrop{position:relative;isolation:isolate;height:clamp(180px,19vw,260px);margin:0 0 24px;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:#18272e}
.room-backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:saturate(.48) brightness(.88);image-rendering:auto}
.room-backdrop--locker img{object-position:center 55%;filter:saturate(.38) brightness(.91)}
.room-backdrop::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,#0c192c80)}
.room-backdrop figcaption{position:absolute;right:14px;bottom:9px;z-index:1;margin:0;color:#f2f0e6;font:14px/1.4 var(--font);text-shadow:0 1px 3px #000}
[data-theme="dark"] .room-backdrop img{filter:saturate(.4) brightness(.85)}
[data-theme="dark"] .room-backdrop--locker img{filter:saturate(.35) brightness(.72)}
@media(max-width:760px){.room-backdrop{height:164px;margin-bottom:20px}.room-backdrop img{object-position:center bottom}.room-backdrop--locker img{object-position:center 58%}.room-backdrop figcaption{right:9px;bottom:7px;font-size:12px}}