/* [retrospective] museum — 1-bit world. No position:fixed (WP iframe rule). */

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: #101010;
  overflow: hidden;
  overscroll-behavior: none;
}

#stage {
  position: absolute; left: 0; top: 0;
  display: block;
  touch-action: none;
  image-rendering: pixelated;              /* fixed backing, crisp scale — detail never changes */
  image-rendering: crisp-edges;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#overlay { /* debug hotspot outlines (?debug=1) */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
  pointer-events: none;
}
body.debug #overlay { display: block; }

/* boot veil: ink until the first card has painted (prevents white flash into the dark facade) */
#boot {
  position: absolute; inset: 0;
  background: #101010;
  pointer-events: none;
  transition: opacity .5s ease;
}
body.ready #boot { opacity: 0; }

/* ============ the loading card ============
   A System-6 / HyperCard dialog: square corners, doubled black rule, a hard
   un-blurred drop shadow, and a progress bar filled with the classic 50%
   checkerboard rather than a solid — the same one bit as everything else. */
#loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #101010;
  z-index: 40;
  cursor: url(assets/cursors/watch1.png) 15 15, wait;
  transition: opacity .6s ease;
}
#loader.is-gone { opacity: 0; pointer-events: none; }

.ld-win {
  width: min(78vw, 430px);
  background: #f4f1e8;
  border: 2px solid #000;
  box-shadow: 0 0 0 2px #f4f1e8, 0 0 0 4px #000, 7px 8px 0 4px rgba(0,0,0,.85);
  padding: 0 0 18px;
  animation: ldIn .34s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes ldIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* the striped title bar of a classic Mac window */
.ld-chrome {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  height: 22px; padding: 0 12px;
  border-bottom: 2px solid #000;
}
.ld-chrome span { display: block; height: 1px; background: #000; opacity: .85; }

.ld-body { padding: 16px 22px 0; text-align: center; }
.ld-title {
  font: 700 20px/1.15 "Courier Prime", "Courier New", monospace;
  letter-spacing: .06em; color: #101010;
}
.ld-sub {
  margin-top: 5px;
  font: 400 11px/1.3 "Courier Prime", "Courier New", monospace;
  letter-spacing: .10em; color: #101010; opacity: .62;
}

.ld-bar {
  position: relative; height: 18px; margin: 17px 0 8px;
  border: 2px solid #000; background: #fff;
  overflow: hidden;
}
.ld-bar > i {
  display: block; height: 100%; width: 0;
  transition: width .18s linear;
  /* 50% checkerboard — the authentic Mac progress fill */
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  border-right: 2px solid #000;
}

.ld-status {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 10px/1.4 "Courier Prime", "Courier New", monospace;
  letter-spacing: .08em; color: #101010; opacity: .78;
}

@media (prefers-reduced-motion: reduce) {
  .ld-win { animation: none; }
  #loader { transition: none; }
}

/* ---- guest book input: typewriter on the ledger ---- */
/* invisible capture field — the visible, blinking, DITHERED text is drawn on
   the canvas (world.js guestbook). This just catches keystrokes + the mobile keyboard. */
#gbInput {
  position: absolute;
  display: none;
  /* It only exists to catch keystrokes and raise the mobile keyboard, but it's an
     invisible click-eater: keep it OFF the lower third so the "close the book"
     plate underneath actually receives the click. */
  left: 0; top: 0; width: 100%; height: 55%;
  background: transparent;
  border: 0; outline: 0;
  opacity: 0;
  font-size: 16px;                 /* ≥16px so iOS doesn't zoom on focus */
  caret-color: transparent;
  padding: 0;
}
body.gb-open #gbInput { display: block; }

/* ---- cursors (1-bit PNGs, hotspot baked into rule) ---- */
body.cur-arrow  { cursor: url(assets/cursors/arrow.png)  2  2, default; }
body.cur-hand   { cursor: url(assets/cursors/hand.png)   11 2, pointer; }
body.cur-fwd    { cursor: url(assets/cursors/fwd.png)    15 4, pointer; }
body.cur-back   { cursor: url(assets/cursors/back.png)   15 26, pointer; }
body.cur-left   { cursor: url(assets/cursors/left.png)   4 15, pointer; }
body.cur-right  { cursor: url(assets/cursors/right.png)  27 15, pointer; }
body.cur-zoom   { cursor: url(assets/cursors/zoom.png)   13 13, zoom-in; }
body.cur-listen { cursor: url(assets/cursors/listen.png) 15 15, pointer; }
body.cur-quill  { cursor: url(assets/cursors/quill.png)  3 28, text; }
body.cur-key    { cursor: url(assets/cursors/key.png)    15 15, pointer; }
body.cur-lock   { cursor: url(assets/cursors/lock.png)   15 15, pointer; }
body.cur-watch  { cursor: url(assets/cursors/watch1.png) 15 15, wait; }
body.cur-watch2 { cursor: url(assets/cursors/watch2.png) 15 15, wait; }

/* touch devices: no cursor art, and never show the desktop arrow ghost */
@media (pointer: coarse) {
  body[class*="cur-"] { cursor: none; }
}