/* THE DESK, LIT (Jon, 4 Oct 2026, on the signed-in My agencies screen: "why do I have such a dark background behind the ipad?"). The room behind the device was the floor footage dropped to 42% brightness under a heavy scrim, so it read as a murky black room. It should read as a real, lit office that is clearly BEHIND the device: visible, soft, never competing. The device stays the brightest and sharpest thing on the page. 1. the pre-game stage (My agencies, sign-in): account.js .pn-room, the floor_live_loop footage. This is what Jon was looking at. 2. a worn style's room (#worn-world): the same idea, lighter grade, still soft. NOT touched, on purpose: the Floor's own desk. Measured on the Floor, nothing of #penthouse-bg (the work-mode plate, the veil, the wash) is painted outside the device: pn-ceo-0720 hides the plate on the office and the margin is the body's flat light grey (194,199,205), so there is no dark room to lift there. Loaded LAST, so these win by order as well as specificity. The light themes keep their own rules (every selector below is dark-only). */ /* 1 · the footage lit, softened, scrimmed at the edges only */ html body .pn-stage:not(.is-light) .pn-room__v{ filter:saturate(.86) contrast(1.0) brightness(.78) blur(3px); } html body .pn-stage:not(.is-light) .pn-room::after{ background:radial-gradient(125% 105% at 50% 46%, rgba(15,20,25,0) 0%, rgba(15,20,25,0) 56%, rgba(15,20,25,.2) 100%); } /* 2 · a worn style's room: visible and soft, glass and ink inside the device still read */ html body:not(.mvc-light) #worn-world .ww-grade{ background: linear-gradient(180deg,rgba(4,7,13,.22) 0%,rgba(4,7,13,.16) 42%,rgba(4,7,13,.34) 100%), radial-gradient(130% 100% at 50% 0%,transparent 40%,rgba(3,5,10,.3) 100%) !important; } html body:not(.mvc-light) #worn-world .ww-vignette{ background:radial-gradient(120% 120% at 50% 46%,transparent 58%,rgba(2,4,9,.2) 100%) !important; box-shadow:inset 0 0 160px 20px rgba(2,4,9,.18) !important; } html body:not(.mvc-light) #worn-world-img{ filter:var(--col-grade,none) blur(2px) saturate(.9) !important; } /* 3 · THE DEVICE AS AN OBJECT (Jon, 4 Oct 2026: "add a metallic sheen to the ipad frame ... a real object", then "looks ok but a little fake, add slightly more detail, and a super subtle glass light sheen over the top left of the screen"). Space-grey aluminium in studio light, built the way a real iPad Pro is built, outside in: · a hairline chamfer: its own 1px bright line on the very outer edge (an outline), distinct from the body of the band; · the aluminium band, 5px: graphite to steel and back on a 135 degree sweep, one soft diagonal sheen, a corner specular streak and a very faint brushed grain, all painted as background layers UNDER the black glass layer, so they can only ever show on the band; · a darker inner lip and a 1px reflection line where the band meets the glass (one inset ring); · the black glass border, 6px, true black and a hair glossy; the band's corner radius is larger than the screen's, so that black border reads even all round; · a top power button and a volume rocker on the right edge (3px bumps, drawn outside the box by a pseudo-element); · a contact shadow, dark close in and spreading wide, to sit it on the desk. The screen's own colours, the camera dot and every control are untouched. Nothing moves. Restrained on purpose: if you can point at it, it is too strong. Both devices: the game's (.dev) and the pre-game one (.pn-tablet). Desktop widths only. The five views whose .dev is display:contents (boot, create, meetteam, store, weeksummary) have no box to dress and are skipped, so no pseudo-element can land on the viewport. */ @media (min-width:721px){ html.pn-cased body.pn-folio:not([data-view="boot"]):not([data-view="create"]):not([data-view="meetteam"]):not([data-view="store"]):not([data-view="weeksummary"]) .dev, html body .pn-stage .pn-tablet{ position:relative !important; box-sizing:border-box !important; border:5px solid transparent !important; padding:6px !important; /* 5px band + 6px glass border = the 11px it always was */ background-origin:border-box !important; background: linear-gradient(160deg,#0c0f13 0%,#030405 36%,#06080b 100%) padding-box, /* the black glass, a hair glossy */ repeating-linear-gradient(0deg,rgba(255,255,255,.032) 0 1px,rgba(255,255,255,0) 1px 2px) border-box, /* faint brushed grain */ linear-gradient(112deg,transparent 0 26%,rgba(255,255,255,.16) 36%,rgba(255,255,255,.34) 40%,rgba(255,255,255,.1) 46%,transparent 56%) border-box, /* the diagonal sheen */ radial-gradient(90px 56px at 5% 2.5%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 100%) border-box, /* the corner specular streak */ linear-gradient(135deg,#323840 0%,#5d656e 13%,#a0a8b1 27%,#5e666f 41%,#252a30 57%,#171b20 69%,#4c545c 85%,#2b3137 100%) border-box !important; background-origin:border-box !important; background-blend-mode:normal,screen,screen,screen,normal !important; outline:1px solid rgba(255,255,255,.3) !important; outline-offset:-1px !important; /* the hairline chamfer */ box-shadow: inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(255,255,255,.03), /* a faint reflection on the glass edge */ 0 0 0 1px rgba(0,0,0,.72), /* the dark outer ring: a cut edge */ 0 1px 1px rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.38), 0 26px 52px -4px rgba(0,0,0,.30), 0 60px 110px -10px rgba(0,0,0,.28) !important; } /* the darker inner lip and the 1px reflection line, where the band meets the glass */ html.pn-cased body.pn-folio:not([data-view="boot"]):not([data-view="create"]):not([data-view="meetteam"]):not([data-view="store"]):not([data-view="weeksummary"]) .dev::before{ content:""; position:absolute; inset:4px; border-radius:32px; pointer-events:none; z-index:4; box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.1); } html body .pn-stage .pn-tablet::before{ content:""; position:absolute; inset:5px; border-radius:39px; pointer-events:none; z-index:4; box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.1); } /* the side buttons: a power button on the top edge, a volume rocker on the right. 3px bumps, outside the box. */ html.pn-cased body.pn-folio:not([data-view="boot"]):not([data-view="create"]):not([data-view="meetteam"]):not([data-view="store"]):not([data-view="weeksummary"]) .dev::after, html body .pn-stage .pn-tablet::after{ content:""; position:absolute; inset:-3px -3px 0 0; pointer-events:none; z-index:3; border-radius:0; background: linear-gradient(180deg,#232930 0%,#7b838c 50%,#262c33 100%) right 11% top 0 / 40px 3px no-repeat, /* power */ linear-gradient(90deg,#252b32 0%,#767e88 55%,#2a3037 100%) right 0 top 19% / 3px 30px no-repeat, /* volume up */ linear-gradient(90deg,#252b32 0%,#767e88 55%,#2a3037 100%) right 0 top 29% / 3px 30px no-repeat !important;/* volume down */ } /* the pre-game device draws its camera and glass reflection as children offset from the box's edge; the border moved them 6px in */ html body .pn-stage .pn-tablet{ border-width:6px !important; padding:8px !important; } html body .pn-stage .pn-cam{ top:.5px !important; } html body .pn-stage .pn-sheen{ inset:8px !important; } } /* 4 · THE GLASS (Jon: "a super subtle glass light sheen over the top left of the screen, just super subtle"). One soft diagonal from the top-left corner: white at 5.5% at most, gone by 35% across, screen-blended, above the content, never catching the pointer. Static. */ html.pn-cased body.pn-folio:not([data-view="boot"]):not([data-view="create"]):not([data-view="meetteam"]):not([data-view="store"]):not([data-view="weeksummary"]) .screen::before{ content:""; position:absolute; inset:0; z-index:81; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 35%); mix-blend-mode:screen; } html body .pn-stage .pn-sheen{ background:linear-gradient(135deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 35%) !important; mix-blend-mode:screen; opacity:1 !important; }