/* Simplified Chinese the Japanese bitmap face doesn't cover. See tools/build_font.py. */
@font-face { font-family: "Ran Pixel SC"; src: url("../assets/ranpixel.woff") format("woff"); font-display: swap; }

/* A 640x400 screen. --u is one screen pixel, set by the engine so it always
   lands on whole device pixels. No blur, no gradients, no rounded corners. */
:root {
  --u: 1px;
  --ink: #001;
  --navy: #112244;
  --navy2: #223366;
  --line: #99bbdd;
  --line2: #445588;
  --text: #eeffff;
  --dim: #6677aa;
  --pink: #ff55aa;
  --teal: #44eeee;
  --sodium: #ff9900;
  --warm: #ffee88;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body {
  color: var(--text);
  font-family: "DotGothic16", "Ran Pixel SC", "Hiragino Sans GB", "PingFang SC", "MS Gothic", monospace;
  font-size: calc(16 * var(--u));
  line-height: 1.25;
  -webkit-font-smoothing: none;
  font-smooth: never;
  display: grid;
  place-items: center;
}
canvas, img { image-rendering: pixelated; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
a { color: var(--teal); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
noscript { display: block; padding: 16px; }

#stage {
  position: relative;
  width: calc(640 * var(--u));
  height: calc(400 * var(--u));
  background: var(--ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
/* scanlines: one hard dark line per screen pixel row, nothing soft */
#stage.scan::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 50;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent 1px,
    rgba(0, 0, 17, .2) 1px, rgba(0, 0, 17, .2) 2px);
}

/* ── status bar ── */
#bar {
  position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(3 * var(--u));
  height: calc(16 * var(--u));
  display: flex; gap: calc(16 * var(--u)); align-items: baseline;
}
#bar h1 { font-size: inherit; font-weight: normal; color: var(--text); white-space: nowrap; }
#bar h1 span { color: var(--pink); }
#where { color: var(--teal); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: clip; }
#tally { color: var(--warm); white-space: nowrap; }

/* ── the picture ── */
#view {
  position: absolute;
  left: calc(8 * var(--u)); top: calc(22 * var(--u));
  width: calc(448 * var(--u)); height: calc(272 * var(--u));
  outline: var(--u) solid var(--line);
  overflow: hidden;
  background: #000;
}
#scene { width: 100%; height: 100%; }
#bust {
  position: absolute; right: 0; bottom: 0;
  width: calc(256 * var(--u)); height: 100%;
  transition: transform 90ms steps(2), visibility 0s;
}
#bust.off { visibility: hidden; transform: translateX(calc(8 * var(--u))); }

#spots { position: absolute; inset: 0; }
.spot {
  position: absolute;
  outline: var(--u) dashed var(--warm);
  outline-offset: calc(-1 * var(--u));
  animation: march 1.2s steps(2) infinite;
}
.spot.found { outline-color: var(--dim); animation: none; }
.spot:hover, .spot:focus-visible { outline: calc(2 * var(--u)) solid var(--pink); animation: none; }
.spot.quiet { outline: none; animation: none; }
.spot.quiet:hover, .spot.quiet:focus-visible { outline: var(--u) solid var(--warm); }
.spot b {
  position: absolute; left: 0; top: 0;
  font-weight: normal;
  background: var(--navy); color: var(--text);
  padding: 0 calc(3 * var(--u));
  white-space: nowrap;
  display: none;
  z-index: 3;
}
.spot:hover b, .spot:focus-visible b { display: block; }
@keyframes march { 50% { outline-color: var(--sodium); } }

/* ── a window drawn inside the picture ── */
#sheet {
  position: absolute; inset: calc(6 * var(--u));
  background: var(--navy);
  outline: var(--u) solid var(--line);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), 0 0 0 calc(3 * var(--u)) var(--line2);
  padding: calc(8 * var(--u));
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) var(--navy);
  user-select: text; -webkit-user-select: text;
}
.sheet-h { color: var(--teal); display: flex; justify-content: space-between; gap: calc(8 * var(--u)); border-bottom: var(--u) solid var(--line2); padding-bottom: calc(2 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.sheet-h b { font-weight: normal; }
.sheet-h span { color: var(--dim); }
.exhibit { height: 100%; display: flex; flex-direction: column; }
.exhibit-img { flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: center top; }
.exhibit-link { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); color: var(--teal); text-decoration: none; cursor: pointer; }
.exhibit-link.bare { flex: none; margin-top: calc(6 * var(--u)); }
.exhibit-go { flex: none; padding: calc(1 * var(--u)) calc(4 * var(--u)); outline: var(--u) solid var(--line2); outline-offset: calc(-1 * var(--u)); overflow-wrap: anywhere; }
.exhibit-link:hover .exhibit-go, .exhibit-link:focus-visible .exhibit-go { background: var(--line); color: var(--ink); }
.exhibit-link:focus-visible { outline: none; }
.tabs { display: flex; gap: calc(4 * var(--u)); margin-bottom: calc(6 * var(--u)); flex-wrap: wrap; }
.tabs button { padding: 0 calc(8 * var(--u)); outline: var(--u) solid var(--line2); color: var(--line); }
.tabs button[aria-pressed="true"] { background: var(--line); color: var(--ink); }
.tabs button:hover, .tabs button:focus-visible { outline-color: var(--pink); color: var(--text); }
.tabs button[aria-pressed="true"]:hover, .tabs button[aria-pressed="true"]:focus-visible { color: var(--ink); }
.row {
  display: grid; grid-template-columns: 2.4em 1fr auto;
  gap: calc(6 * var(--u)); width: 100%;
  padding: calc(1 * var(--u)) calc(4 * var(--u));
}
.row:hover, .row:focus-visible { background: var(--line); color: var(--ink); outline: none; }
.row .no { color: var(--dim); }
.row:hover .no, .row:focus-visible .no { color: var(--navy2); }
.row .st { color: var(--dim); }
.row .st.done { color: var(--pink); }
.row:hover .st, .row:focus-visible .st { color: var(--ink); }
.also a:hover, .also a:focus-visible { background: var(--teal); color: var(--ink); outline: none; }
.also { display: grid; gap: calc(3 * var(--u)); }
.also span { color: var(--dim); }
.sheet-note { color: var(--dim); margin-top: calc(6 * var(--u)); }

#stamp {
  position: absolute; left: 28%; top: 46%;
  transform: translate(-50%, -50%) rotate(-7deg);
  border: calc(3 * var(--u)) solid var(--pink);
  outline: var(--u) solid var(--pink);
  outline-offset: calc(2 * var(--u));
  color: var(--pink);
  background: var(--ink);
  font-size: calc(32 * var(--u));
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  white-space: nowrap;
  pointer-events: none;
  animation: thud 240ms steps(3);
}
@keyframes thud { from { transform: translate(-50%, -50%) rotate(-7deg) scale(1.8); } }

/* ── commands ── */
#cmds {
  position: absolute;
  left: calc(464 * var(--u)); top: calc(22 * var(--u));
  width: calc(168 * var(--u)); height: calc(272 * var(--u));
  background: var(--navy);
  outline: var(--u) solid var(--line);
  padding: calc(6 * var(--u)) calc(4 * var(--u));
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  overflow: auto;
  scrollbar-width: none;
}
.hd { color: var(--teal); padding: 0 calc(4 * var(--u)) calc(3 * var(--u)); border-bottom: var(--u) solid var(--line2); margin-bottom: calc(3 * var(--u)); }
.cmd {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: calc(6 * var(--u));
  width: 100%;
  padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)) calc(14 * var(--u));
  position: relative;
}
a.cmd { color: var(--teal); text-decoration: none; }
a.cmd:hover, a.cmd:focus-visible { color: var(--ink); }
.cmd i { font-style: normal; color: var(--dim); white-space: nowrap; }
.cmd::before { content: ""; position: absolute; left: calc(4 * var(--u)); top: 50%; border: solid transparent; border-width: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(6 * var(--u)); transform: translateY(-50%); }
.cmd:hover, .cmd:focus-visible { background: var(--line); color: var(--ink); outline: none; }
.cmd:hover i, .cmd:focus-visible i { color: var(--navy2); }
.cmd:hover::before, .cmd:focus-visible::before { border-left-color: var(--ink); }
.cmd.got { color: var(--dim); }
.cmd.got:hover, .cmd.got:focus-visible { color: var(--ink); }
.cmd.wait { color: var(--line2); cursor: default; pointer-events: none; }
.cmd.wait i { color: var(--navy2); }
.gap { flex: 1; }
.case-tag { padding: calc(4 * var(--u)); color: var(--dim); border-top: var(--u) solid var(--line2); }
.case-tag b { display: block; font-weight: normal; color: var(--text); }
.case-tag em { font-style: normal; color: var(--pink); }

/* ── dialogue ── */
#box {
  position: absolute;
  left: calc(8 * var(--u)); top: calc(300 * var(--u));
  width: calc(624 * var(--u)); height: calc(92 * var(--u));
  background: var(--navy);
  outline: var(--u) solid var(--line);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--navy), inset 0 0 0 calc(3 * var(--u)) var(--line2);
  padding: calc(7 * var(--u)) calc(14 * var(--u)) calc(5 * var(--u));
  cursor: pointer;
}
#who {
  position: absolute; left: calc(10 * var(--u)); top: calc(-7 * var(--u));
  background: var(--ink); color: var(--warm);
  outline: var(--u) solid var(--line);
  padding: 0 calc(6 * var(--u));
  line-height: calc(14 * var(--u));
  font-size: calc(14 * var(--u));
}
#line { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
#line span { visibility: hidden; }
#more {
  position: absolute; right: calc(10 * var(--u)); bottom: calc(5 * var(--u));
  font-style: normal; color: var(--warm);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── language and sound, tucked into the status bar ── */
#sys { display: flex; gap: calc(4 * var(--u)); white-space: nowrap; }
#sys button { padding: 0 calc(4 * var(--u)); color: var(--line); outline: var(--u) solid var(--line2); line-height: calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
#sys button:hover, #sys button:focus-visible { background: var(--line); color: var(--ink); }
.tall #sys button { position: relative; }
.tall #sys button::after { content: ""; position: absolute; inset: -10px -2px; }   /* a finger-sized target without a bigger button */

/* ── title ── */
#front { position: fixed; inset: 0; background: #000; z-index: 60; }   /* above the scanlines: the cover is shown as it was painted */
#cover { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#cover-art { display: block; width: 100%; height: 100%; }
#cover-m, #cover-logo { display: none; }
#menu {
  position: absolute;
  left: calc(176 * var(--u)); top: calc(148 * var(--u));
  width: calc(240 * var(--u));
  background: var(--navy);
  outline: var(--u) solid var(--line);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), 0 0 0 calc(3 * var(--u)) var(--line2);
  padding: calc(6 * var(--u));
  display: grid; gap: calc(2 * var(--u));
}
#menu .foot { display: flex; gap: calc(4 * var(--u)); border-top: var(--u) solid var(--line2); margin-top: calc(4 * var(--u)); padding-top: calc(4 * var(--u)); color: var(--line); flex-wrap: wrap; }
#menu .foot button { padding: 0 calc(6 * var(--u)); outline: var(--u) solid var(--line2); }
#menu .foot button:hover, #menu .foot button:focus-visible { background: var(--line); color: var(--ink); }
#menu .back { display: none; }
/* On the picture: its button panel, one painted state per selected button. 52,692 432x296 of 1448x1086. */
#front:not(.phone) #menu {
  left: 3.591%; top: 63.72%; width: 29.834%; height: 27.256%;
  padding: 0; display: block; outline: none; box-shadow: none;
  background: url(../assets/cover-menu.webp) 0 0 / 100% 400% no-repeat;
}
#front:not(.phone) #menu[data-sel="1"] { background-position: 0 33.333%; }
#front:not(.phone) #menu[data-sel="2"] { background-position: 0 66.667%; }
#front:not(.phone) #menu[data-sel="3"] { background-position: 0 100%; }
#front:not(.phone) #menu .cmd, #front:not(.phone) #menu .cmd:hover, #front:not(.phone) #menu .cmd:focus-visible {
  position: absolute; left: 0; width: 100%; min-height: 0; padding: 0;
  background: none; color: transparent; outline: none; cursor: pointer;
}
#front:not(.phone) #menu .cmd::before, #front:not(.phone) #menu .cmd i { display: none; }
#front:not(.phone) #menu .m0 { top: 0; height: 26.4%; }
#front:not(.phone) #menu .m1 { top: 26.4%; height: 23.6%; }
#front:not(.phone) #menu .m2 { top: 50%; height: 24.3%; }
#front:not(.phone) #menu .m3 { top: 74.3%; height: 25.7%; }
#front:not(.phone) #menu .off, #front:not(.phone) #menu .off:hover { background: rgba(13, 10, 53, .66); cursor: default; }
#front:not(.phone) #menu .foot { display: none; }
#front:not(.phone) #menu.opts .foot {
  display: flex; flex-direction: column; justify-content: center; gap: calc(3 * var(--u));
  position: absolute; inset: 0; margin: 0; padding: calc(6 * var(--u)) calc(14 * var(--u));
  border: none; background: var(--navy); outline: var(--u) solid var(--line);
  font-size: max(12px, calc(14 * var(--u)));
}
#front:not(.phone) #menu.opts .foot .back { display: block; margin-top: calc(2 * var(--u)); }
#boot {
  position: absolute; inset: 0; background: #000; color: var(--line);
  padding: calc(16 * var(--u)); white-space: pre-wrap; cursor: pointer; z-index: 2;
}

/* ── phones held upright: same screen, stacked ── */
#stage.tall {
  width: 100vw; height: 100dvh;
  display: flex; flex-direction: column;
  --pad: max(8px, env(safe-area-inset-left, 0px));
  padding: calc(env(safe-area-inset-top, 0px) + 4px) var(--pad) calc(env(safe-area-inset-bottom, 0px) + 8px);
  gap: 8px;
  font-size: 16px;
}
.tall #bar { position: static; height: auto; flex-wrap: wrap; gap: 0 10px; }
.tall #bar h1 { flex-basis: auto; }
.tall #where { order: 3; flex-basis: 100%; }
.tall #tally { margin-left: auto; }
.tall #view { position: relative; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 448 / 272; flex: none; }
.tall #box { order: 2; position: relative; left: 0; top: 0; width: 100%; height: auto; flex: 1 1 0; min-height: 5.2em; overflow: auto; padding: 12px 12px 10px; }
.tall #who { top: 0; left: 8px; position: relative; display: inline-block; margin-bottom: 4px; }
.tall #who[hidden] { display: none; }
.tall #cmds { order: 3; position: static; width: 100%; height: auto; flex: none; max-height: 36dvh; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 2px; }
.tall .hd, .tall .case-tag, .tall .gap { grid-column: 1 / -1; }
.tall .gap { display: none; }
.tall .cmd { min-height: 36px; align-items: center; }
.tall .case-tag { display: none; }
.tall #stamp { font-size: 24px; }
.tall #sheet { padding: 8px; inset: 3px; }
.tall.sheeted #view { flex: 1 1 0; aspect-ratio: auto; min-height: 0; }
.tall.sheeted #box { flex: none; }
.tall .row { grid-template-columns: 2em 1fr; }
.tall .row .st { display: none; }
.tall .row { padding-block: 6px; }
.tall .tabs button { padding: 6px 10px; }
#front.phone { background: #0d0a35; }
.phone #cover { inset: 0; transform: none; display: flex; flex-direction: column; }
.phone #cover-art { display: none; }
.phone #cover-logo { display: block; flex: none; width: min(100% - 16px, 460px); margin: calc(env(safe-area-inset-top, 0px) + 12px) auto -18px; position: relative; z-index: 1; }
.phone #cover-m { display: block; flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 0; }
.phone #menu .m3, .phone #menu .off { display: none; }
.phone #menu { position: relative; left: 0; top: 0; width: auto; margin: 0 8px calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 2; }
.phone #menu .cmd { min-height: 44px; align-items: center; }
.phone #menu .foot button { padding: 6px 10px; }
.tall.scan::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .spot, #more, #stamp { animation: none !important; }
  #bust { transition: none; }
}