/* Extracted from play.html by tools/split_play.py — INFRA.
   Linked at the SAME position the <style> block occupied: this sheet's cascade order
   is load-bearing, including several deliberate late overrides. */

  /* --- screen glass overlay (the game lives inside the device — see #pn-ipad-shell) ---
     SUPERSEDED 2026-07-20: the thick 15px graphite border used to be drawn as a fixed inset:0 overlay
     ON TOP of full-bleed content → content crashed under the bezel (the CEO's "content under the ipad
     frame / no clear space" car crash). The REAL bezel is now OUTSIDE the screen (the <body> device
     ring in #pn-ipad-shell); this overlay is demoted to a 1px inner screen-edge hairline + the diagonal
     glass sheen only, so it never crushes content. It anchors to the SCREEN (body is the containing
     block) so it hugs the device screen edge, both desktop-cased and full-bleed. */
  #pn-folio-frame{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;--pnf-w:0px;--pnf-r:30px}
  body.pn-folio #pn-folio-frame{display:block}
  #pn-folio-frame .pnf-edge{position:absolute;inset:0;border:0;border-radius:var(--pnf-r);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),                                 /* crisp screen-edge hairline */
      inset 0 0 0 2px rgba(0,0,0,.28)}                                       /* soft inner rim shade */
  /* subtle diagonal glass reflection across the whole screen — screen-blend, very low opacity so it
     lifts the glass without ever touching legibility. Corners rounded to match the screen window. */
  #pn-folio-frame .pnf-sheen{position:absolute;inset:0;border-radius:var(--pnf-r);pointer-events:none;
    background:linear-gradient(116deg,transparent 0 40%,rgba(255,255,255,.04) 47%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.025) 54%,transparent 61%);
    mix-blend-mode:screen;opacity:.5}
  @media (max-width:1024px),(pointer:coarse){ #pn-folio-frame{--pnf-r:0px} }  /* full-bleed: no rounded screen */
  @media (prefers-reduced-motion:no-preference){}  /* sheen is static — no motion to gate */

  /* --- the opening overlay (name-etched case swings open over the office) --- */
  #pn-doss-overlay{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 90% at 50% 42%,#141016,#05060a 78%);
    perspective:1700px;perspective-origin:60% 46%;opacity:1;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
  #pn-doss-overlay.pnd-gone{opacity:0;pointer-events:none}
  #pn-doss-clip{position:relative;width:min(74vw,300px);aspect-ratio:3/4;transform-style:preserve-3d}
  #pn-doss-clip::after{content:"";position:absolute;left:8%;right:8%;bottom:-3%;height:9%;
    background:radial-gradient(60% 100% at 50% 50%,rgba(0,0,0,.6),transparent 72%);filter:blur(6px)}
  .pnd-folio{position:absolute;inset:0;transform-style:preserve-3d}
  .pnd-cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;
    transform:rotateY(0deg);transition:transform 1150ms cubic-bezier(.66,.02,.16,1);will-change:transform}
  #pn-doss-overlay[data-act="open"] .pnd-cover{transform:rotateY(-158deg)}
  .pnd-face,.pnd-inner{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    border-radius:13px;overflow:hidden}
  .pnd-inner{transform:rotateY(180deg);background:linear-gradient(120deg,#1b140e,#0d0906 60%);
    box-shadow:inset 0 0 0 1px rgba(232,220,196,.08),inset 0 40px 90px rgba(0,0,0,.6)}
  .pnd-svg,.pnd-photo{position:absolute;inset:0;width:100%;height:100%;display:block}
  .pnd-photo{object-fit:cover;z-index:1}
  .pnd-etch{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:12px;padding:10% 12%;text-align:center;pointer-events:none}
  .pnd-plate{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 24px;border-radius:6px;
    box-shadow:inset 0 0 0 1px rgba(232,220,196,.26),inset 0 1px 0 rgba(232,220,196,.14),
      inset 0 -14px 30px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.4)}
  .pnd-name{font-family:'Heming Variable','Anton',sans-serif;font-weight:400;text-transform:uppercase;
    letter-spacing:.015em;line-height:.9;font-size:clamp(22px,6.4vw,38px);color:#ecdfc4;max-width:12ch;
    text-wrap:balance;text-shadow:0 1px 0 rgba(0,0,0,.7),0 -1px 0 rgba(255,244,214,.16)}
  .pnd-serial{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.24em;
    color:rgba(236,223,196,.66);text-transform:uppercase}
  .pnd-serial .dot{color:#ff6a2b}
  #pn-doss-caption{position:absolute;left:0;right:0;bottom:11%;text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.2em;
    color:rgba(236,223,196,.62);text-transform:uppercase;opacity:0;transition:opacity .5s ease .3s}
  #pn-doss-overlay[data-act="open"] #pn-doss-caption{opacity:1}
  /* mobile + reduced-motion: no 3D swing — the cover cross-fades in place (deterministic, no JS timing) */
  @media (max-width:880px){
    .pnd-cover{transition:opacity .34s ease}
    #pn-doss-overlay[data-act="open"] .pnd-cover{transform:none;opacity:0}
  }
  @media (prefers-reduced-motion:reduce){
    .pnd-cover{transition:opacity .2s ease}
    #pn-doss-overlay[data-act="open"] .pnd-cover{transform:none;opacity:0}
    #pn-doss-overlay{transition:opacity .2s ease}
  }
