html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0d0b14;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* size and position are set by js/main.js in whole screen pixels */
#stage {
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
}

#screen {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
}

/* Optional CRT look: scanlines + soft vignette, toggled in Options. */
#crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0.22) 100%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
  background-size: 100% var(--scan, 4px), 100% 100%;
}
body.crt #crt { display: block; }

/* Touch controls (shown only on touch devices). */
#touch {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 5;
}
body.touch #touch { display: block; }
.tbtn {
  position: absolute;
  pointer-events: auto;
  border-radius: 50%;
  background: rgba(236, 228, 212, 0.14);
  border: 2px solid rgba(236, 228, 212, 0.35);
  color: rgba(236, 228, 212, 0.8);
  font: bold 14px/1 monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.tbtn.on { background: rgba(255, 208, 74, 0.35); border-color: rgba(255, 208, 74, 0.8); }
.tbtn.hidden { display: none; }

/* Held upright: the game shows at the top, a turning phone below asks for landscape. */
#rotate {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: 52%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding-top: 24px;
  color: #ece4d4;
  font: 600 17px/1.45 -apple-system, system-ui, sans-serif;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}
#rotate .phone {
  width: 34px; height: 58px;
  border: 3px solid #ffd04a; border-radius: 8px;
  box-sizing: border-box;
  animation: lr-turn 2.4s ease-in-out infinite;
}
#rotate .sub { font-weight: 400; font-size: 14px; color: #a99fb4; }
@keyframes lr-turn { 0%, 25% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
body.portrait.touch #rotate { display: flex; }
body.portrait.touch #touch { display: none; }