@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&family=Shippori+Mincho:wght@400;600;700&display=swap');

:root {
  --sw: min(100vw, calc(100vh * 0.5625));
  --font: 'Shippori Mincho', 'Noto Serif JP', 'PingFang TC', 'Heiti TC', 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', 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: #0d0d11;
  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;
  background: radial-gradient(circle at center, #1a1a24 0%, #08080c 100%);
}

#stage {
  position: relative;
  width: var(--sw);
  height: calc(var(--sw) / 0.5625);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.1);
  background: #000;
  overflow: hidden;
}

#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: #000;
}

#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;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

#held[hidden] {
  display: none;
}

body.holding,
body.holding * {
  cursor: none !important;
}

#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;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#bag[hidden] {
  display: none;
}

#bag:hover {
  transform: scale(1.06);
}

#bag:focus {
  outline: none;
}

#bag img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

#bag.open img {
  transform: rotate(180deg);
}

#inventory {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
}

#inventory[hidden] {
  display: none;
}

.cell {
  position: absolute;
  cursor: pointer;
  transition: transform 0.15s ease-out;
}

.cell:hover {
  transform: scale(1.05);
}

.cell img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  display: block;
}

#dialog {
  position: absolute;
  z-index: 11;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#dialog[hidden] {
  display: none;
}

#dialog-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6));
}

#dialog-icon {
  position: absolute;
  height: auto;
}

#dialog-body {
  position: absolute;
}

#dialog-text,
#dialog-choices {
  font-size: calc(var(--sw) * 0.0355);
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: #111;
  font-weight: 500;
}

#dialog-text {
  white-space: pre-wrap;
}

#dialog.small {
  left: 6.36%;
  top: 82.42%;
  width: 85.62%;
  height: 15.8%;
}

#dialog.small #dialog-icon {
  left: 13.34%;
  top: 24.32%;
  width: 5.13%;
}

#dialog.small #dialog-body {
  left: 20.37%;
  right: 10.6%;
  top: 20.46%;
}

#dialog.big {
  left: 1.25%;
  top: 60.42%;
  width: 96.13%;
  height: 31.78%;
}

#dialog.big.high {
  top: 0.7%;
}

#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.flat #dialog-text {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

#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.5em;
}

#dialog-choices[hidden] {
  display: none;
}

.choice {
  position: relative;
  display: block;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.2em 0 0.2em 1.5em;
  cursor: pointer;
  text-align: left;
  appearance: none;
  transition: opacity 0.15s ease;
}

.choice:hover {
  opacity: 0.8;
}

.choice:focus {
  outline: none;
}

.choice-arrow {
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.55em;
  height: auto;
  visibility: hidden;
}

.choice.on .choice-arrow {
  visibility: visible;
}

#catcher {
  position: fixed;
  inset: 0;
  z-index: 10;
}

#catcher[hidden] {
  display: none;
}

body.debug .hotspot {
  background: rgba(255, 0, 0, 0.18);
  outline: 1px solid rgba(255, 0, 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;
}