:root {
  --ink: #e9eef6;
  --ink-dim: #8e9bb0;
  --ground: #161b24;
  --edge: #242b3a;
  --cyan: #4de3f0;
  --magenta: #ff3d9a;
  --amber: #ffc24d;
  --violet: #a98cff;
  --mint: #5fe8b4;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  background: var(--ground);
}
body {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
}
#gl {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#gl.dragging {
  cursor: grabbing;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, #0000 46%, #1a2030a6);
}
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image: repeating-linear-gradient(0deg, #ffffff09 0 1px, #0000 1px 3px);
}
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lamp {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.spill {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.tube {
  position: relative;
  pointer-events: auto;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 9px 16px;
  border: 1px solid #6b7384;
  border-radius: 2px;
  background: #4b5363e6;
  color: #e8edf5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  white-space: nowrap;
  font-kerning: none;
  text-decoration: none;
  display: inline-block;
  transition:
    color 0.32s ease,
    border-color 0.32s ease,
    text-shadow 0.32s ease,
    box-shadow 0.32s ease,
    background 0.32s ease;
}
.tube:after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid #222736;
  border-radius: 3px;
  opacity: 0.55;
  pointer-events: none;
  transition:
    border-color 0.32s ease,
    opacity 0.32s ease;
}
.tube:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.lit .spill {
  opacity: 1;
}
.lit .tube {
  background: #5c6576d9;
  animation: ignite 0.52s ease-out;
}
@keyframes ignite {
  0% {
    opacity: 0.2;
  }
  8% {
    opacity: 1;
  }
  13% {
    opacity: 0.25;
  }
  21% {
    opacity: 1;
  }
  27% {
    opacity: 0.45;
  }
  33% {
    opacity: 1;
  }
  41% {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
.s-magenta.lit .tube {
  color: #ff8cc5;
  border-color: var(--magenta);
  text-shadow:
    0 0 9px var(--magenta),
    0 0 26px rgba(255, 61, 154, 0.9);
  box-shadow:
    0 0 34px #ff3d9a80,
    inset 0 0 20px #ff3d9a33;
}
.s-magenta.lit .tube:after {
  border-color: var(--magenta);
  opacity: 0.5;
}
.s-magenta .spill {
  background: radial-gradient(circle, #ff3d9a80, #ff3d9a24 44%, #ff3d9a00 70%);
}
.s-amber.lit .tube {
  color: #ffd98c;
  border-color: var(--amber);
  text-shadow:
    0 0 9px var(--amber),
    0 0 26px rgba(255, 194, 77, 0.9);
  box-shadow:
    0 0 34px #ffc24d73,
    inset 0 0 20px #ffc24d2e;
}
.s-amber.lit .tube:after {
  border-color: var(--amber);
  opacity: 0.5;
}
.s-amber .spill {
  background: radial-gradient(circle, #ffc24d73, #ffc24d21 44%, #ffc24d00 70%);
}
.s-cyan.lit .tube {
  color: #a6f3fa;
  border-color: var(--cyan);
  text-shadow:
    0 0 9px var(--cyan),
    0 0 26px rgba(77, 227, 240, 0.9);
  box-shadow:
    0 0 34px #4de3f073,
    inset 0 0 20px #4de3f02e;
}
.s-cyan.lit .tube:after {
  border-color: var(--cyan);
  opacity: 0.5;
}
.s-cyan .spill {
  background: radial-gradient(circle, #4de3f073, #4de3f021 44%, #4de3f000 70%);
}
.s-violet.lit .tube {
  color: #cdbbff;
  border-color: var(--violet);
  text-shadow:
    0 0 9px var(--violet),
    0 0 26px rgba(169, 140, 255, 0.9);
  box-shadow:
    0 0 34px #a98cff73,
    inset 0 0 20px #a98cff2e;
}
.s-violet.lit .tube:after {
  border-color: var(--violet);
  opacity: 0.5;
}
.s-violet .spill {
  background: radial-gradient(circle, #a98cff73, #a98cff21 44%, #a98cff00 70%);
}
.s-mint.lit .tube {
  color: #9bf3d4;
  border-color: var(--mint);
  text-shadow:
    0 0 9px var(--mint),
    0 0 26px rgba(95, 232, 180, 0.9);
  box-shadow:
    0 0 34px #5fe8b473,
    inset 0 0 20px #5fe8b42e;
}
.s-mint.lit .tube:after {
  border-color: var(--mint);
  opacity: 0.5;
}
.s-mint .spill {
  background: radial-gradient(circle, #5fe8b473, #5fe8b421 44%, #5fe8b400 70%);
}
.glyph-hit {
  display: block;
  width: 120px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.glyph-hit:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.plate {
  position: absolute;
  top: 0;
  left: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  pointer-events: none;
}
.plate h1 {
  margin: 0;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.3em;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}
.plate p {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--ink-dim);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.hint {
  position: absolute;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  color: var(--ink-dim);
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  transition: opacity 0.5s ease;
}
.fallback {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 24px 20px;
  background: var(--ground);
  z-index: 3;
}
.fallback img {
  width: 100%;
  border: 1px solid var(--edge);
}
.fallback ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fallback a {
  color: var(--cyan);
  font: inherit;
}
@media (max-width: 420px) {
  .tube {
    font-size: 16px;
    padding: 8px 13px;
  }
  .spill {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
  }
  .glyph-hit {
    width: 96px;
    height: 34px;
  }
  .plate h1 {
    font-size: 15px;
  }
  .hint {
    font-size: 10.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tube,
  .spill {
    transition: none;
  }
  .lit .tube {
    animation: none;
  }
}