/* THE STAGE (Ruth, design/stage_v1_2026-10-04; sized 80vw/80vh by Dave, 92vw/92vh by Jon 6 Oct: "ipad needs to fill more of screen like another 15%"). The iPad is an object in a room: a dark dusk office behind it (a still always, a slow video
   when motion is welcome), a desk it stands on, the screen the brightest thing in the room. The game's own screens AND the House pages render inside the device
   screen (the House overlay is positioned on it by pn-house.js), never full window. Phones (720 and under): no room, no video, the page goes full screen. */
:root{
  --ar:1.7; --stage-w:max(min(92vw,calc(92vh*var(--ar))),min(92vw,660px)); --stage-h:calc(var(--stage-w)/var(--ar));
  --stage-top:calc((100vh - var(--stage-h))*.42); --stage-ink:#050608;
}
.pn-room{display:none}
@media (min-width:721px){
  html,html.pn-cased{background:var(--stage-ink) !important}
  html.pn-cased{display:block !important;padding:0 !important}
  .pn-room{display:block;position:fixed;inset:0;overflow:hidden;background:var(--stage-ink);z-index:0;pointer-events:none}
  .pn-room-still{filter:brightness(1.18);position:absolute;inset:0;background:url(../../../stage/assets/room-still.jpg) center 38%/cover no-repeat}
  .pn-room-video{filter:brightness(1.18);position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:0}
  .pn-room-video.on{opacity:1}
  .pn-room-grade{position:absolute;inset:0;
    background:radial-gradient(ellipse 78% 70% at 50% 46%,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 52%,rgba(0,0,0,.56) 100%),linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 62%,rgba(0,0,0,.42) 100%)}
  .pn-room-desk{position:absolute;left:0;right:0;bottom:0;top:calc(var(--stage-top) + var(--stage-h) - 46px);
    background:linear-gradient(180deg,#14161a 0%,#0b0c0f 18%,#050608 100%);box-shadow:0 -1px 0 rgba(255,214,170,.16),0 -18px 40px rgba(0,0,0,.45)}
  .pn-room-desk::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,rgba(255,170,90,.075) 0%,rgba(255,170,90,0) 100%)}
  .pn-room-spill{position:absolute;left:50%;top:0;width:calc(var(--stage-w)*.86);height:min(22vh,220px);transform:translateX(-50%);
    background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(190,205,225,.22) 0%,rgba(190,205,225,.07) 55%,rgba(190,205,225,0) 100%)}
  /* the device: the game's own .dev, set on the stage geometry */
  body.pn-folio{background:transparent !important}
  body.pn-folio .pad{position:fixed;inset:0;height:auto;padding:0;display:block;z-index:1}
  body.pn-folio .pad>.dev{position:absolute;left:50%;top:var(--stage-top);width:var(--stage-w);max-width:none;height:var(--stage-h);margin:0;transform:translateX(-50%);border-radius:38px}
  body.pn-folio .pad>.dev::before{border-radius:33px}
  /* a tight dark ellipse where the bottom edge meets the desk, drawn in the room just under the device */
  .pn-room-contact{position:absolute;left:calc(50% - var(--stage-w)*.47);width:calc(var(--stage-w)*.94);top:calc(var(--stage-top) + var(--stage-h) - 5px);height:22px;z-index:1;
    background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,0) 100%);transform:translateY(55%)}
}
/* the device sits exactly where the stage maths says (Jon 6 Oct). Two older desktop sheets moved it: pn-shell-adopt pads .pad by
   clamp(30px,3.4vw,66px) to show a desk round the case, and pn-desk makes the .dev position:relative so it can carry its bezel. Together
   they pushed the device that padding below --stage-top, so at 92% the bottom ran off a short window. The pad is the room now, not a
   margin: no padding, and the device is absolutely placed on the stage (position:absolute still anchors the bezel's pseudo-elements). */
@media (min-width:721px){
  html.pn-cased:not(#x) body.pn-folio:not(#y) .pad{padding:0 !important}
  html.pn-cased:not(#x) body.pn-folio:not(#y) .pad>.dev{position:absolute !important;left:50% !important;top:var(--stage-top) !important;width:var(--stage-w) !important;height:var(--stage-h) !important;max-width:none !important;max-height:none !important;margin:0 !important}
  /* the TESTER RUN chip (CEO account only) stands in the room's left margin as an upright tab, centred on the device, never on the glass */
  html:not(#a):not(#b):not(#c):not(#d) body.pn-folio #pn-tester{left:max(2px,calc((100vw - var(--stage-w))/4 - 14px)) !important;right:auto !important;bottom:auto !important;top:calc(var(--stage-top) + var(--stage-h)/2) !important;transform:translateY(-50%) !important;align-items:center !important}
  html:not(#a):not(#b):not(#c):not(#d) body.pn-folio #pn-tester-chip{writing-mode:vertical-rl;transform:rotate(180deg);min-height:0;padding:12px 6px;letter-spacing:.18em}
}
@media (max-width:720px){ .pn-room{display:none} }
@media (prefers-reduced-motion:reduce){ .pn-room-video{display:none} }

/* one stage for everything: the full-bleed set-pieces (live call, review, result, preroom, boardroom) stop turning the
   device into display:contents. They render INSIDE the device screen; the transform makes the device their containing
   block, so nothing fixed can escape onto the room. Phones keep the old full-bleed behaviour. */
@media (min-width:721px){
  /* set-pieces (live call, review, result, preroom, boardroom) keep the device box instead of dissolving it; every other native screen (the account work, the hub) keeps the game's own layout inside the device */
  html:not(#x) body.pn-call-live.pn-folio:not(#y) .pad,
  html:not(#x) body:has(.pn-review).pn-folio:not(#y) .pad,
  html:not(#x) body:has(.result-screen).pn-folio:not(#y) .pad,
  html:not(#x) body:has(#vc-shell).pn-folio:not(#y) .pad,
  html:not(#x) body:has(.pn-preroom).pn-folio:not(#y) .pad,
  html:not(#x) body:has(.boardroom-mode).pn-folio:not(#y) .pad{display:block !important}
  html:not(#x) body.pn-call-live.pn-folio:not(#y) .pad>.dev,
  html:not(#x) body:has(.pn-review).pn-folio:not(#y) .pad>.dev,
  html:not(#x) body:has(.result-screen).pn-folio:not(#y) .pad>.dev,
  html:not(#x) body:has(#vc-shell).pn-folio:not(#y) .pad>.dev,
  html:not(#x) body:has(.pn-preroom).pn-folio:not(#y) .pad>.dev,
  html:not(#x) body:has(.boardroom-mode).pn-folio:not(#y) .pad>.dev{display:block !important;transform:translateX(-50%) !important;overflow:hidden}
  html:not(#x) body.pn-call-live.pn-folio:not(#y) .pad>.dev>.screen,
  html:not(#x) body:has(.pn-review).pn-folio:not(#y) .pad>.dev>.screen,
  html:not(#x) body:has(.result-screen).pn-folio:not(#y) .pad>.dev>.screen,
  html:not(#x) body:has(#vc-shell).pn-folio:not(#y) .pad>.dev>.screen,
  html:not(#x) body:has(.pn-preroom).pn-folio:not(#y) .pad>.dev>.screen,
  html:not(#x) body:has(.boardroom-mode).pn-folio:not(#y) .pad>.dev>.screen{display:block !important;width:100%;height:100%;position:relative;overflow:hidden}
  html:not(#x) body.pn-folio:not(#y) .pad>.dev{transform:translateX(-50%) !important;overflow:hidden}
  html:not(#x):has(body.pn-folio),html:not(#x) body.pn-folio:not(#y){overflow:hidden !important;height:100% !important}
}
/* while a House page is open on the device, the game's own screen underneath is inert and unseen */
@media (min-width:721px){html body.pn-folio.pn-house-open:not(#y) .pad>.dev>.screen>*{visibility:hidden !important}}
/* ...and nothing deeper in it either, at any width: the legacy verdict (.result-screen and its debrief line, "luck pushed you over"), the review and
   the call set-pieces set their own visibility while they animate in, and a child with visibility:visible shows through a hidden parent. While a
   House page is up the legacy screen draws nothing at all; the game's windows that must stay live are lifted into the page's layer first. */
html body.pn-house-open:not(#y) .pad>.dev>.screen *,html body.pn-house-open:not(#y) .pad>.dev>.screen *::before,html body.pn-house-open:not(#y) .pad>.dev>.screen *::after{visibility:hidden !important}

/* nothing of the UI sits in the room: the Feedback tab and its window live inside the glass, bottom-right of the device */
@media (min-width:721px){
  html:has(body.pn-folio) #pnfb-tab{right:calc((100vw - var(--stage-w))/2 + 3px);bottom:calc(100vh - var(--stage-top) - var(--stage-h) + 22px);border-right:1px solid rgba(255,255,255,.22);border-radius:10px}
  html:has(body.pn-folio) #pnfb-panel{right:calc((100vw - var(--stage-w))/2 + 10px);bottom:calc(100vh - var(--stage-top) - var(--stage-h) + 22px);max-height:calc(var(--stage-h) - 44px)}
}
html #pnfb-root{z-index:10900}

/* the Feedback tab never floats over a film or a full-screen moment: the cold open, the live pitch (and its result). On phones it leaves the screen
   edge altogether: "Send feedback" lives in the menu (the strip's burger, and the old bar's overflow). */
html:has(body.pn-coldopen-on) #pnfb-root,html:has(body.pn-house-film) #pnfb-root,html:has(body.pn-call-live) #pnfb-root,html:has(body[data-view="result"]) #pnfb-root{display:none!important}
@media (max-width:720px){html #pnfb-tab{display:none!important}}

/* the week-run set-piece (pnos) plays on the device's SCREEN, not across the room and not over the bezel (Jon 6 Oct: "hitting End the week
   forces the screen to slip down"). It took the whole device box (bezel included) and its Skip / Continue controls were position:fixed to the
   WINDOW, so Skip sat in the room top-right and Continue on the desk under the iPad. Now: the glass rect exactly (the bezel is 5px band + 6px
   glass = 11px, the screen's corner 24px), an opaque ground so nothing of the page shows through, and both controls absolute INSIDE it. */
:root{--stage-bezel:11px;--stage-screen-r:24px}
@media (min-width:721px){
  html:has(body.pn-folio) .pnos-run.pn-setpiece{position:fixed !important;left:calc((100vw - var(--stage-w))/2 + var(--stage-bezel)) !important;top:calc(var(--stage-top) + var(--stage-bezel)) !important;right:auto !important;bottom:auto !important;
    width:calc(var(--stage-w) - 2*var(--stage-bezel)) !important;height:calc(var(--stage-h) - 2*var(--stage-bezel)) !important;margin:0 !important;transform:none !important;border-radius:var(--stage-screen-r);overflow:hidden;box-sizing:border-box}
  html:has(body.pn-folio) .pnos-run.pn-setpiece .pnos-run-skip{position:absolute !important;top:20px !important;right:20px !important;bottom:auto !important;left:auto !important}
  html:has(body.pn-folio) .pnos-run.pn-setpiece .pnos-run-done{position:absolute !important;left:50% !important;bottom:28px !important;top:auto !important;right:auto !important;transform:translateX(-50%) !important}
  html:has(body.pn-folio) .pnos-run.pn-setpiece .pnos-run-done:active{transform:translateX(-50%) translateY(2px) !important}
  html:has(body.pn-folio) .pnos-run.pn-setpiece .pnos-run-inner{max-height:calc(100% - 150px);overflow:auto}
}
/* phones: the run takes the whole screen; its controls stay on it too (they were fixed to the window, which is the screen there) */
/* the week closing keeps the device too (the game dissolves it for that view) */
@media (min-width:721px){
  html:not(#x) body[data-view="weeksummary"].pn-folio:not(#y) .pad{display:block !important}
  html:not(#x) body[data-view="weeksummary"].pn-folio:not(#y) .pad>.dev{display:block !important;position:relative !important;transform:translateX(-50%) !important;overflow:hidden}
  html:not(#x) body[data-view="weeksummary"].pn-folio:not(#y) .pad>.dev>.screen{display:block !important;width:100%;height:100%;position:relative;overflow:hidden}
}

/* "Playing the week" started from a House page's End the week sits above that page (the House frame is z 10800), not hidden under it */
html body.pn-house-open .pnos-run{z-index:10850}