:root {
  --navy: #0a0e1f;
  --kimi: #4D6BFE;
  --light: #8BA2FF;
  --white: #EAF0FF;
  --px: "Press Start 2P", monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--navy); color: var(--white);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
#scene {
  position: fixed; inset: 0;
  image-rendering: pixelated; image-rendering: crisp-edges;
  cursor: ew-resize;
}
.title {
  position: fixed; top: 16px; left: 16px;
  font-family: var(--px); font-size: 12px; letter-spacing: 1px;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--kimi), 4px 4px 0 #121a3a;
  pointer-events: none;
}
.hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 6px 12px; white-space: nowrap;
  font-family: "Noto Sans SC", sans-serif; font-size: 14px; font-weight: 700;
  color: var(--white); background: rgba(10, 14, 31, 0.78);
  border: 2px solid var(--kimi); box-shadow: 3px 3px 0 #121a3a;
  pointer-events: none;
}
@media (max-width: 480px) { .hint { font-size: 12px; white-space: normal; text-align: center; width: max-content; max-width: 90vw; } }
.bubble {
  position: fixed; z-index: 5; width: max-content; max-width: min(320px, 86vw);

  padding: 10px 12px;
  font-family: "Noto Sans SC", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5;
  color: var(--navy); background: var(--white);
  border: 4px solid var(--navy);
  box-shadow: 0 0 0 4px var(--white), 4px 4px 0 4px var(--kimi);
  transform: translate(-50%, -100%);
  pointer-events: auto;
}
.bubble-text {
  max-height: 38vh; overflow-y: auto; overscroll-behavior: contain;
  white-space: pre-wrap; word-break: break-word;
  scrollbar-width: thin; scrollbar-color: var(--kimi) transparent;
}
.bubble .cursor { display: inline-block; width: 8px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--kimi); animation: cur 0.8s steps(2) infinite; }
@keyframes cur { 50% { opacity: 0; } }
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -16px; margin-left: -6px;
  width: 8px; height: 8px; background: var(--white);
  box-shadow: 4px 4px 0 var(--white), 0 0 0 4px var(--navy);
}
.bubble[hidden] { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ask {
  position: fixed; z-index: 6; display: flex; transform: translateX(-50%);
  width: min(300px, 86vw);
  border: 4px solid var(--navy);
  box-shadow: 0 0 0 4px var(--kimi), 4px 4px 0 4px #121a3a;
}
.ask[hidden] { display: none; }
.ask input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 0; outline: 0;
  font: 700 14px "Noto Sans SC", sans-serif; color: var(--navy); background: var(--white);
}
.ask button {
  border: 0; padding: 0 12px; cursor: pointer;
  font: 12px var(--px); color: var(--white); background: var(--kimi);
}
.ask button:hover { background: #6B84FF; }
.ask button:disabled { opacity: .6; cursor: wait; }