@font-face {
  font-family: 'Proto Nerd';
  src: url('../fonts/0xProtoNerdFont-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F;
}
@font-face {
  font-family: 'Proto Nerd';
  src: url('../fonts/0xProtoNerdFont-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F;
}
:root {
  --sw: min(100vw, calc(100vh * 0.5625));
  --font: 'Proto Nerd', 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei',
          'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
}
@supports (height: 100dvh) {
  :root { --sw: min(100vw, calc(100dvh * 0.5625)); }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: #fff;
  overflow: hidden;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage {
  position: relative;
  width: var(--sw);
  height: calc(var(--sw) / 0.5625);
}
#scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;      
  pointer-events: none;
}
#bg, #vid {
  position: absolute;
  left: -1px;
  top: -1px;
  right: auto;
  bottom: auto;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  display: block;
  pointer-events: none;
}
#tex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}
#tex[hidden] { display: none; }
#vid {
  object-fit: cover;
  background: #fff;
}
#vid[hidden] { display: none; }
#held {
  position: fixed;
  z-index: 20;
  width: calc(var(--sw) * 0.25);   
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#held[hidden] { display: none; }
body.holding, body.holding * { cursor: none; }
#layers, #hotspots { position: absolute; inset: 0; }
#layers { pointer-events: none; }
.layer {
  position: absolute;
  height: auto;
  display: block;
}
.layer.dim { opacity: 0.3; }
.hotspot {
  position: absolute;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
}
.hotspot:focus { outline: none; }
#bag {
  position: absolute;
  z-index: 6;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  appearance: none;
}
#bag[hidden] { display: none; }
#bag:focus { outline: none; }
#bag img { display: block; width: 100%; height: auto; }
#bag.open img { transform: rotate(180deg); }   
#inventory { position: absolute; inset: 0; z-index: 5; }
#inventory[hidden] { display: none; }
.cell { position: absolute; cursor: pointer; }
.cell img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  display: block;
}
#dialog { position: absolute; z-index: 11; }
#dialog[hidden] { display: none; }
#dialog-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#dialog-icon {
  position: absolute;
  height: auto;          
}
#dialog-body { position: absolute; }
#dialog-text, #dialog-choices {
  font-size: calc(var(--sw) * 0.0355);
  line-height: 1.7;
  letter-spacing: 0.07em;
  color: #000;
}
#dialog-text { white-space: pre-wrap; }
#dialog.small            { left: 6.36%; top: 82.42%; width: 85.62%; height: 15.80%; }
#dialog.small #dialog-icon { left: 13.34%; top: 24.32%; width: 5.13%; }
#dialog.small #dialog-body { left: 20.37%; right: 10.60%; top: 20.46%; }
#dialog.big              { left: 1.25%; top: 60.42%; width: 96.13%; height: 31.78%; }
#dialog.big.high         { top: 0.70%; }
#dialog.big #dialog-icon { left: 12.91%; top: 22.69%; width: 4.57%; }
#dialog.big #dialog-body { left: 19.17%; right: 10.22%; top: 20.76%; }
#dialog.flat              { left: 0; top: 0; width: 100%; height: 100%; }
#dialog.flat #dialog-frame { display: none; }
#dialog.flat #dialog-icon  { left: 8.99%; top: 84.06%; width: 4.393%; }
#dialog.flat #dialog-body  { left: 15.01%; right: 8.34%; top: 85.15%;
                             transform: translateY(-50%); }
#dialog-pic { position: absolute; display: none; object-fit: contain; }
#dialog.item               { left: 1.06%; top: 67.28%; width: 96.38%; height: 31.44%; }
#dialog.item #dialog-icon  { display: none; }
#dialog.item.pic #dialog-pic { display: block; left: 17.04%; top: 27.25%; width: 18.06%; height: 43.05%; }
#dialog.item #dialog-body  { left: 39.02%; right: 10.22%; top: 49.69%; transform: translateY(-50%); }
#dialog-text .rest { visibility: hidden; }
#dialog.item.wide #dialog-body { left: 15%; }
#dialog.item.page #dialog-body { top: 20.76%; transform: none; }
#dialog-more { position: absolute; display: none; right: 9%; bottom: 19%; width: 2.6%; }
#dialog.more #dialog-more { display: block; }
#dialog-answer {
  margin-top: 1.2em;
  font-size: calc(var(--sw) * 0.0355);
  line-height: 1.7;
  letter-spacing: 0.07em;
  color: #000;
}
#dialog-answer[hidden] { display: none; }
#dialog-answered { white-space: pre; }
#dialog-input {
  display: inline-block;
  width: 6em;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: #000;
  background: none;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding: 0 0 0.15em 0;
  appearance: none;
}
#dialog-input:focus { outline: none; }
#dialog-choices { margin-top: 1.7em; }
#dialog-choices[hidden] { display: none; }
.choice {
  position: relative;
  display: block;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0 0 0 1.5em;   
  cursor: default;
  text-align: left;
  appearance: none;
}
.choice:focus { outline: none; }
.choice-arrow {
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.55em;
  height: auto;
  visibility: hidden;
}
.choice.on .choice-arrow { visibility: visible; }
#catcher { position: fixed; inset: 0; z-index: 10; }
#hotspots.over { z-index: 12; pointer-events: none; }
#hotspots.over .hotspot { pointer-events: auto; }
#catcher[hidden] { display: none; }
body.debug .hotspot { background: rgba(255, 0, 0, .18); outline: 1px solid rgba(255, 0, 0, .6); }
body.debug #readout {
  position: fixed; left: 0; top: 0; z-index: 99;
  font: 12px/1.4 monospace; background: #000; color: #0f0; padding: 4px 6px;
}