/* One look for the player pages (sprint 36 item 2; studio/ART-BIBLE.md). The roadmap, how it works, verify, the rooms, the Lineup and practice
   open in the game's panel (index.html #panel, client/panel.js). This sheet is the game's own and each of those pages links it too:
   - the panel's frame: a window title bar (stripes, the bold title on a paper plate) with the default button "Back to the door", 44 px and up;
   - the night look: the whole panel, the page inside included, goes through #panelnight (index.html), the strip's threshold: every grey pixel
     is cut at the game's 25 % text line to the night ink #0b0d1a or its cream #f6ecd2, and coloured pixels (gold, red, plague green, Halloween
     orange, the knock lights) pass unchanged. On the one-bit door the same cut lands on #000 / #fff (#panelbit); the colour look keeps its own;
   - inside a page (html.in-panel): no second title, no second "Back to the door", "Report a bug" as a plain game button. */

/* ---- the frame ---- */
#panel{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#fff;color:#000;font:17px/22px "Atkinson Hyperlegible",Verdana,sans-serif}
#panel[hidden]{display:none}
html[data-look="one-bit"][data-door="night"] #panel{filter:url(#panelnight)}
html[data-look="one-bit"][data-door="one-bit"] #panel{filter:url(#panelbit)}
/* the title bar: back on the left, the title centred on the stripes (the third column only balances the first) */
#panel .pn-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:60px;padding:6px 10px;border-bottom:2px solid #000;
  background:repeating-linear-gradient(#000 0 2px,#fff 2px 4px)}
#panel .pn-bar h2{grid-column:2;margin:0;padding:0 14px;background:#fff;text-align:center;font:700 22px/30px "Atkinson Hyperlegible",Verdana,sans-serif}
#panel .pn-bar h2,#panel .btn .t{filter:url(#bitb)}
/* the default button of the game's windows ("Watch the door"): a 2 px frame, a paper gap, then the heavy ring */
#panel .btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:5px;padding:0 14px;background:#fff;color:#000;border:2px solid #000;
  box-shadow:0 0 0 2px #fff,0 0 0 5px #000;font:700 18px/22px "Atkinson Hyperlegible",Verdana,sans-serif;cursor:pointer}
#panel .btn .short{display:none}
#panel .btn:active{background:#000;color:#fff}
#panel .btn:active .t{color:#000;filter:url(#bitb) invert(1)}
#panel .btn:focus-visible{outline:3px dotted #000;outline-offset:8px}
#panel-frame{flex:1 1 auto;min-height:0;width:100%;border:0;background:#000}
/* a phone held upright: the short label ("< The door") leaves the long titles room on one line ("Practice the mini-games" at 390 px) */
@media (max-width:639px){
  #panel .pn-bar{grid-template-columns:auto minmax(0,1fr);min-height:58px;padding:4px 8px}
  #panel .pn-bar h2{justify-self:center;max-width:100%;padding:0 10px;font:700 18px/24px "Atkinson Hyperlegible",Verdana,sans-serif}
  #panel .btn{padding:0 12px}
  #panel .btn .long{display:none}
  #panel .btn .short{display:inline}
}

/* ---- inside the panel: the pages ---- */
/* the roadmap and verify: the page's own bar keeps only "Report a bug", a plain game button on the right, no paper strip under it */
html.in-panel .bar:has(#report.btn){justify-content:flex-end;background:none;border:0;padding:14px 0 0;margin:0 0 14px}
html.in-panel #report.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;box-shadow:none;font:700 18px/22px var(--sentence)}
/* the roadmap: the panel's bar already says "What's coming" */
html.in-panel .plate h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* how it works: its section menu stays (a game menu bar), without the second name of the game */
html.in-panel .menubar .brand{display:none}
html.in-panel .menubar{justify-content:flex-end}
/* the Lineup: the panel's bar is the title, so the room's bar is a plain tool row (rooms, help, the run), not a second striped title */
html.in-panel #app>.bar{height:52px;background:#fff}
html.in-panel #app>.bar h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.in-panel #intro .title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the intro window's title is the panel's again: said once (still its aria label) */
html.in-panel #app>.bar #back{display:none} /* one way back: the panel's; the door's menu has "Pick a room" */
html.in-panel #app>.bar #help{margin-left:auto}
/* the roadmap and how it works end on the disclaimer: in the panel it is the game's fixed strip at the bottom, as on every other page */
html.in-panel footer{position:fixed;left:0;right:0;bottom:0;z-index:5;margin:0;background:#fff;border:0;border-top:2px solid #000;box-shadow:none;padding:3px 10px;
  font:16px/20px var(--sentence);text-align:center} /* 16 px: the roadmap's own floor (test/readability-type.test.js) */
html.in-panel footer p{margin:0;font:inherit}
html.in-panel:has(footer) body{padding-bottom:72px}
/* the narrow rooms (the picker, the Lineup, practice): a window on the night dither, framed like the game's windows on a wide screen */
@media (min-width:640px){
  html.in-panel #picker,html.in-panel #app{margin-top:24px;border:2px solid #000;box-shadow:4px 4px 0 #000}
  html.in-panel #picker{min-height:calc(100dvh - 92px)}
  html.in-panel #app{height:calc(100dvh - 92px)}
}

/* "Step away from the door?" (client/ui.js knockSession): a one-bit window over the game when a page would open mid-door */
#leave{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%230b0d1a'/%3E%3C/svg%3E");
  font:17px/22px "Atkinson Hyperlegible",Verdana,sans-serif;color:#000}
#leave[hidden]{display:none}
html[data-look="one-bit"][data-door="night"] #leave .lv-card{filter:url(#panelnight)} /* the card only: the veil stays a sparse night-ink pattern over the door */
#leave .lv-card{width:min(360px,100%);background:#fff;border:2px solid #000;box-shadow:4px 4px 0 #000}
#leave .lv-bar{display:flex;justify-content:center;min-height:36px;align-items:center;border-bottom:2px solid #000;background:repeating-linear-gradient(#000 0 2px,#fff 2px 4px)}
#leave .lv-bar h2{margin:0;padding:0 12px;background:#fff;font:700 20px/30px "Atkinson Hyperlegible",Verdana,sans-serif}
#leave p{margin:14px 16px}
#leave .lv-acts{display:flex;flex-wrap:wrap;gap:10px;padding:0 16px 16px}
#leave .btn{flex:1 1 140px;min-height:48px;background:#fff;color:#000;border:2px solid #000;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #000;font:700 17px/22px "Atkinson Hyperlegible",Verdana,sans-serif;cursor:pointer}
#leave .btn.ink{background:#000;color:#fff;box-shadow:none}
#leave .btn.ink .t{color:#000;filter:url(#bitb) invert(1)}
#leave .t{filter:url(#bitb)}