:root { color-scheme: dark; --blue:rgb(var(--bb-d17-rgb)); --blue2:rgb(var(--bb-d36-rgb)); --yellow:rgb(var(--bb-a58-rgb)); --paper:#fff8df; }
* { box-sizing: border-box; }
html, body, #store-shell, #store-frame-host { width:100%; height:100%; height:100dvh; margin:0; overflow:hidden; }
body { background:rgb(var(--bb-d06-rgb)); color:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button, input { font:inherit; }
#store-frame-host { position:absolute; inset:0; }
.store-frame { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; background:rgb(var(--bb-d06-rgb)); touch-action:none; }
body.store-intro .store-frame { touch-action:pan-y; }
#x-cursor { position:fixed; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; z-index:150;
  pointer-events:none; opacity:0; border-radius:50%; border:2px solid rgba(255,255,255,.92);
  background:rgba(255,255,255,.16); box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 5px rgba(0,0,0,.55);
  transition:opacity .16s,transform .1s,border-color .1s,background .1s; }
body.store-locked:not(.store-inspecting) #x-cursor, #x-cursor.free-show { opacity:1; }
#x-cursor.over { border-color:var(--yellow); background:rgba(var(--bb-a58-rgb),.32); transform:scale(1.4);
  box-shadow:0 0 11px rgba(var(--bb-a58-rgb),.62),0 0 0 1px rgba(0,0,0,.4); }
.skip-link { position:fixed; top:10px; left:10px; z-index:500; padding:10px 14px; border-radius:5px; color:rgb(var(--bb-d17-rgb)); background:var(--yellow); font-weight:800; transform:translateY(-160%); transition:transform .15s ease; }
.skip-link:focus { transform:none; }
.skip-link-browse { left:auto; right:10px; }
.no-script a { color:var(--yellow); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
#store-loader { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; background:radial-gradient(circle at 50% 43%,rgb(var(--bb-d36-rgb)) 0,rgb(var(--bb-d17-rgb)) 35%,rgb(var(--bb-d06-rgb)) 100%); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease,visibility 0s linear .35s; }
body.store-loading #store-loader { opacity:1; visibility:visible; pointer-events:auto; transition:none; }
.loader-mark,.loader-copy,.loader-track { transition:opacity .06s linear; }
#store-loader.revealing .loader-mark,#store-loader.revealing .loader-copy,#store-loader.revealing .loader-track { opacity:0; }
/* Same bar the shelf restock uses, so opening the store reads as the same act as restocking one. Every step is a
   real milestone posted by the room (see store-shell.js progress table) — nothing here creeps on a timer. */
.loader-track { position:relative; width:min(390px,calc(100vw - 64px)); height:8px; overflow:hidden; border:1px solid rgba(var(--bb-a62-rgb),.72); border-radius:999px; background:rgb(var(--bb-d17-rgb)); box-shadow:inset 0 1px 3px rgba(0,0,0,.55); }
.loader-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,rgb(var(--bb-a47-rgb)),rgb(var(--bb-a71-rgb))); box-shadow:0 0 12px rgba(var(--bb-a62-rgb),.72); transition:width .34s ease; }
/* The room is a same-origin iframe, so it shares this thread: while its module evaluates and the fixtures build,
   nothing here can repaint and the bar genuinely cannot move. A transform animation runs on the compositor, so
   this sheen keeps sweeping through that block and the store never reads as hung. */
.loader-track::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,transparent,rgba(var(--bb-a71-rgb),.3),transparent); transform:translateX(-100%); animation:loader-sheen 1.3s linear infinite; }
@keyframes loader-sheen { to { transform:translateX(100%); } }
#store-loader.revealing .loader-track::after { animation:none; }
@media (prefers-reduced-motion:reduce) { .loader-track i { transition:none; } .loader-track::after { animation:none; } }
.loader-mark { color:var(--yellow); font-size:clamp(24px,4vw,48px); line-height:1; font-weight:950; font-style:italic; letter-spacing:-.045em; text-shadow:0 4px 0 rgb(var(--bb-d13-rgb)); }
.loader-copy { max-width:calc(100vw - 32px); padding:0 8px; color:rgba(255,248,223,.72); font-size:13px; letter-spacing:.08em; text-align:center; }
.share-hit { display:none; position:fixed; z-index:120; padding:0; margin:0; border:0; background:transparent; -webkit-tap-highlight-color:transparent; }
.share-toast { position:fixed; left:50%; bottom:max(28px,env(safe-area-inset-bottom)); z-index:180; max-width:calc(100vw - 32px); padding:10px 17px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(var(--bb-d06-rgb),.9); color:#fff8df; box-shadow:0 12px 40px rgba(0,0,0,.42); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .18s ease,transform .18s ease; }
.share-toast.show { opacity:1; transform:translate(-50%,0); }
.trailer-modal { position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:clamp(14px,4vw,48px); }
.trailer-modal[hidden] { display:none; }
.trailer-scrim { position:absolute; inset:0; background:rgba(var(--bb-d03-rgb),.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.trailer-card { position:relative; z-index:1; width:min(1080px,94vw,calc(177.78svh - 170.67px)); }
.trailer-frame { overflow:hidden; width:100%; aspect-ratio:16/9; border:1px solid rgba(var(--bb-a58-rgb),.5); border-radius:10px; background:#000; box-shadow:0 28px 100px #000; }
.trailer-frame iframe { width:100%; height:100%; border:0; }
.trailer-close { position:absolute; right:0; top:-48px; width:40px; height:40px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(var(--bb-d06-rgb),.8); color:#fff; font-size:27px; line-height:1; cursor:pointer; }
.trailer-close:focus-visible,.trailer-close:hover { outline:2px solid var(--yellow); outline-offset:2px; }
.no-script { position:fixed; inset:0; display:grid; place-items:center; margin:0; padding:24px; background:rgb(var(--bb-d06-rgb)); text-align:center; }
@media (pointer:coarse) { #x-cursor { display:none; } }
body.roku-mode { cursor:none; }
body.roku-mode:not(.store-loading):not(.store-revealing):not(.store-entry-loading):not(.store-intro):not(.store-inspecting) #x-cursor { display:block!important; left:50%!important; top:50%!important; opacity:1!important; }
body.roku-mode:is(.store-loading,.store-revealing,.store-entry-loading,.store-intro) #x-cursor,
body.roku-mode.store-inspecting #x-cursor { display:none!important; opacity:0!important; }
body.roku-mode #account-button,body.roku-mode #account-modal { display:none!important; pointer-events:none!important; }
body.roku-mode #share-hit,body.roku-mode #trailer-modal { pointer-events:none!important; }
body.roku-mode :is(button,a[href],[role="button"],[tabindex]:not([tabindex="-1"])):focus { outline:3px solid var(--yellow)!important; outline-offset:3px!important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; animation-iteration-count:1!important; } }