html,
body {
  height: 100%;
  margin: 0;
  background: #070414;
  color: #f3e6c8;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button,
p,
h1,
h2 {
  font-family: ui-monospace, "Courier New", monospace;
}

#app {
  position: fixed;
  inset: 0;
}

#camera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #070414;
  transform: scaleX(-1);
}

#camera[data-facing="environment"] {
  transform: none;
}

#app[data-phase="intro"] #camera {
  opacity: 0;
}

/* The playfield: fixed game-pixel size, warped onto the sheet window with matrix3d. */
#stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  visibility: hidden;
  will-change: transform;
}

#stage.is-placed,
#label.is-placed {
  visibility: visible;
}

#label {
  position: absolute;
  top: 0;
  left: 0;
  width: 278px;
  height: 400px;
  background: #000;
  transform-origin: 0 0;
  visibility: hidden;
  overflow: hidden;
}

#label img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

#game-root canvas {
  display: block;
  image-rendering: pixelated;
}

#outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

#outline-shape {
  fill: rgba(61, 255, 242, 0.12);
  stroke: #3dfff2;
  stroke-width: 3;
  stroke-dasharray: 10 6;
  visibility: hidden;
}

#app[data-phase="searching"] #outline-shape.is-seen,
#app[data-phase="countdown"] #outline-shape.is-seen {
  visibility: visible;
}

#aim-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46vmin;
  height: 44vmin;
  border: 3px dashed rgba(243, 230, 200, 0.7);
  border-radius: 6px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  visibility: hidden;
}

#app[data-phase="searching"] #aim-guide {
  visibility: visible;
}

#countdown {
  position: absolute;
  top: 0;
  left: 0;
  color: #f0a202;
  font: 700 72px/1 ui-monospace, "Courier New", monospace;
  text-shadow:
    0 0 12px #ff2bd6,
    4px 4px 0 #070414;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#countdown:empty {
  display: none;
}

#status {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  max-width: min(88vw, 26em);
  margin: 0;
  padding: 10px 14px;
  background: rgba(7, 4, 20, 0.82);
  border: 2px solid #3dfff2;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

#status:empty {
  display: none;
}

#intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: #070414;
}

#intro[hidden] {
  display: none;
}

#intro h1 {
  margin: 0;
  color: #3dfff2;
  font-size: 30px;
  text-shadow: 0 0 10px #3dfff2;
}

#intro p {
  max-width: 22em;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

#start,
#retry,
#play,
#follow,
#score-post,
#flip-camera {
  border: 0;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 0 0 3px #070414,
    5px 5px 0 0 #ff2bd6;
}

#start,
#retry,
#play,
#score-post {
  align-self: flex-start;
  padding: 16px 22px;
  background: #f0a202;
  color: #070414;
  font-size: 16px;
  letter-spacing: 0.04em;
}

#start:disabled {
  cursor: progress;
  opacity: 0.7;
}

#play {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
}

#play[hidden] {
  display: none;
}

#flip-camera {
  position: absolute;
  top: calc(96px + env(safe-area-inset-top));
  right: 12px;
  padding: 8px 12px;
  background: #f3e6c8;
  color: #070414;
  font-size: 13px;
}

#flip-camera[hidden],
#app[data-phase="playing"] #flip-camera {
  display: none;
}