/* systemfun's System 1 parts, shared by every page: the menu bar and the window.
   The menu bar is filled in by menubar.js. A page shown inside another page's window
   (html.embedded) drops its own menu bar, desk and window frame, since the window around it has them. */
@import url("/fonts.css");

:root{--bar:40px}   /* the menu bar's height: "system" fits inside, "fun" spills below on purpose, and its tall n just clears the top */
.menubar{display:flex;align-items:stretch;height:var(--bar);border-bottom:1px solid #1e1e1e;padding:0 12px 0 20px;position:relative;z-index:50;background:#fefefe}
.menubar>*{display:flex;align-items:center;position:relative}
.menubar time,.sysmenu a{font:15px "Departure Mono",monospace}
.menubar time{white-space:nowrap}
.menubar .r{margin-left:auto}
.menubar .brand{width:180px;margin-right:6px;color:#1e1e1e;text-decoration:none}
.menubar .brand img{position:absolute;left:0;top:0;width:250px;height:130px;pointer-events:none;z-index:2}
/* a phone greys the whole picture when tapped, transparent margins and all, a rectangle far past the bar; only the
   bar's box takes the tap, and "fun" swelling says it was pressed */
.menubar .brand{-webkit-tap-highlight-color:transparent}
/* the logo is bigger than its box, so instead of greying the box "fun" swells like fresh paint; "system" stays put.
   it pops: off the mark at once, past its size and back, then shrinks back quickly when you leave */
.menubar .brand .fun{transform-origin:83.6316px 38.7368px;transition:transform .12s ease-out}
.menubar .brand:hover .fun{transform:scale(1.15);transition:transform .22s cubic-bezier(.2,2.2,.4,1)}
@media (prefers-reduced-motion:reduce){.menubar .brand .fun,.menubar .brand:hover .fun{transition:none}}
.menubar .more:hover,.menubar .more.open{background:#e4e4e4}
.menubar .brand:focus-visible,.menubar .more:focus-visible{outline:1px dotted #1e1e1e;outline-offset:-3px}
/* the clock, sound and menu sit as one group; the two buttons are 32px targets with their icons 8px apart,
   and the menu's icon ends 20px from the edge, as the logo starts 20px in */
.menubar .more{width:40px;padding:0;border:0;background:none;cursor:pointer;justify-content:center}
.menubar .sound{width:40px;padding:0;border:0;background:none;cursor:pointer;justify-content:center}
.menubar .sound svg{width:16px;height:16px;fill:#1e1e1e;shape-rendering:crispEdges}
.menubar .sound .off,.menubar .sound.muted .on{display:none}.menubar .sound.muted .off{display:inline}
.menubar .sound:hover{background:#e4e4e4}.menubar .sound:focus-visible{outline:1px dotted #1e1e1e;outline-offset:-3px}
/* a phone: the date, sound and menu closer together */
@media (max-width:600px){.menubar .sound,.menubar .more{width:32px}}
.menubar .more i{width:16px;height:2px;background:#1e1e1e;box-shadow:0 -5px #1e1e1e,0 5px #1e1e1e}
.menubar>.sysmenu{display:block}
.menubar>.sysmenu:not(:popover-open){display:none}
.sysmenu{position:fixed;inset:auto;top:var(--bar);right:12px;margin:0;min-width:180px;background:#fefefe;border:1px solid #1e1e1e;box-shadow:2px 2px 0 #1e1e1e;padding:3px 0}
.sysmenu a{display:block;padding:5px 18px;color:#1e1e1e;text-decoration:none}
.sysmenu a:hover,.sysmenu a:focus-visible{background:#1e1e1e;color:#fefefe;outline:0}
/* Blurt with its orange mark, edged in black like System 1's pixel icons (docs/mockups/menu-blurt-mark.html), and
   the flag after "by sean" */
.sysmenu a.game,.sysmenu a[href="/made-by"]{display:flex;align-items:center;gap:8px}
.sysmenu a.game .mark{width:11px;height:11px;display:block;shape-rendering:crispEdges}
.sysmenu .sg{width:18px;height:12px;display:block;outline:1px solid rgba(30,30,30,.25)}

/* the site's button, after System 1's (docs/mockups/site-buttons-system-one.html): rounded and black, ringed like the
   Mac's default, and white while it's pressed (.down holds it there, as Return's blink does). Nothing happens on hover,
   as on the Mac, and the ring already marks where Return goes, so focus adds nothing to a black button. .plain is the other of a pair, white, and inverts the other way. Three heights: .big for the game's
   next step, the plain .btn for a pair or a small window's action, .small for an alert's buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:36px;min-width:72px;padding:0 16px;
  font:15px/1 "Departure Mono",monospace;text-transform:lowercase;white-space:nowrap;background:#1e1e1e;color:#fefefe;
  border:1px solid #1e1e1e;border-radius:7px;outline:2px solid #1e1e1e;outline-offset:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active,.btn.down{background:#fefefe;color:#1e1e1e}
.btn.plain{background:#fefefe;color:#1e1e1e;outline:0}
.btn.plain:active,.btn.plain.down{background:#1e1e1e;color:#fefefe}
.btn.plain:focus-visible{outline:1px dotted #1e1e1e;outline-offset:3px;text-decoration:none}
.btn.big{height:44px;font-size:16px}
.btn.small{height:28px;font-size:14px;padding:0 14px}

/* a System 1 window: a black title bar like Blurt's, close box, one-pixel frame and a hard shadow */
.desk{flex:1;display:grid;place-items:start center;padding:8vh 18px 48px}
.gw{width:min(var(--w,420px),100%);background:#fefefe;border:1px solid #1e1e1e;box-shadow:2px 2px 0 #1e1e1e;display:flex;flex-direction:column}
.gw>.title{flex:none;height:22px;display:flex;align-items:center;justify-content:center;position:relative;background:#1e1e1e;padding:0 3px}
.gw>.title b{padding:0 8px;font:15px/22px "Departure Mono",monospace;word-spacing:-.2em;color:#fefefe}
.popwin .title b{display:inline-flex;align-items:center;gap:6px}
/* Every window and dialog gets its close box, pixel X and tap area here. */
.gw .close{position:absolute;left:8px;top:5px;width:12px;height:12px;padding:0;background:#1e1e1e;color:#fefefe;border:1px solid #fefefe;cursor:pointer}
.gw .close::before{content:"";position:absolute;inset:-8px}
.gw .close::after{content:"";position:absolute;inset:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7zM8 8h1v1H8zM8 1h1v1H8zM7 2h1v1H7zM6 3h1v1H6zM5 4h1v1H5zM4 5h1v1H4zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z'/%3E%3C/svg%3E") center/10px 10px no-repeat;pointer-events:none}
.gw .close:active{background:#fefefe;color:#1e1e1e}
.gw .close:focus-visible{outline:1px dotted #fefefe;outline-offset:3px}

/* the menu's pages, opened straight from a link or in their own tab: the same window, framed with its black title bar,
   sitting just under the menu bar */
.desk.plain{padding-top:12px}
/* no page is taller than the screen (100svh: the height with a phone's browser bars showing). A page longer than
   that, like credits or privacy, scrolls inside, under a menu bar that stays put */
.desk.plain{min-height:0;overflow-y:auto}
.desk.plain .gw .close{display:none}   /* nothing to close back to: the page is the window */

html.embedded .menubar,html.embedded .gw>.title{display:none}
html.embedded .desk{padding:0;display:block}
html.embedded body{min-height:0;height:auto}   /* in a window the frame grows to the page, so the page keeps its own height */
html.embedded .desk{overflow:visible}
html.embedded .gw{width:100%;border:0;box-shadow:none}

/* a page opened over another page: the window floats on top, the page underneath stays as it was */
.popwin{position:fixed;z-index:60;left:50%;top:70px;transform:translateX(-50%);width:min(var(--w,420px),calc(100vw - 28px));max-height:calc(100vh - 100px);max-height:calc(100svh - 100px)}
/* behind it, the page goes grey under System 1's 50% dot pattern, the Mac desktop's own grey, with a dark
   wash between the dots so the page shows through faintly; the menu bar stays clear, and clicking the grey closes the window */
.popveil{position:fixed;inset:0;z-index:45;background:repeating-conic-gradient(#1e1e1e 0 25%,rgba(30,30,30,.35) 0 50%) 0 0/2px 2px;touch-action:none}
/* while a window is open the page underneath holds still: on a phone a swipe that reaches the window's end, or lands
   just off it, would otherwise scroll the page behind */
html.winopen,html.winopen body,html.winopen .desk{overflow:hidden}
html.embedded{overscroll-behavior:contain}
/* the outlines of the Mac's zoom as a window opens or closes, or a page changes (moves.js); a card turning over
   steps its own solid frame */
.zoomrect{position:fixed;border:1px dotted #1e1e1e;pointer-events:none;z-index:65}
.turnrect{border:1.5px solid #1e1e1e}
/* the zoom box sits in the title, beside the name, and opens the page in a tab of its own */
.popwin .pagebox{position:relative;flex:none;width:12px;height:12px;background:#1e1e1e;border:1px solid #fefefe}
.popwin .pagebox:active{background:#fefefe}
/* each box shows where it goes in one-pixel 1-bit icons, an x to close and an arrow out, and catches taps a
   little past its edges */
.popwin .mark{position:absolute;left:0;top:0;width:10px;height:10px;fill:#fefefe;shape-rendering:crispEdges;pointer-events:none}
.popwin .pagebox:active .mark{fill:#1e1e1e}
.popwin .pagebox::before{content:"";position:absolute;inset:-4px -6px -4px -2px}
.popwin iframe{display:block;width:100%;border:0;height:var(--h,200px);max-height:calc(100vh - 124px);max-height:calc(100svh - 124px);background:#fefefe}

/* Safari (WebKit only knows the -apple-system-body font) reads "pretty" as evening out every line of a paragraph,
   so it ends lines early and the text looks bunched. Chrome only keeps a word from sitting alone on the last line,
   which is all the pages want, so Safari just fills its lines */
@supports (font:-apple-system-body){html p{text-wrap:wrap}}