@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: block;
}

:root {
  --bezel: #16171b;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bezel);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* Landscape stage; main.js sizes it and rotates it 90deg when the phone is held upright. */
#root {
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: radial-gradient(ellipse at center, #24262c 0%, var(--bezel) 72%);
}

#screen {
  position: absolute;
  display: block;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 2px #0a0b0d, 0 0 28px rgba(0, 0, 0, 0.7);
  touch-action: none;
}

/* Game Boy style power LED and speaker grill, shown in the side bars of wide phones. */
#led {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
  font: 6px "Press Start 2P", monospace;
  color: #5b5e69;
  pointer-events: none;
}

#led::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a1416;
  box-shadow: inset 0 0 2px #000;
  transition: background 0.4s, box-shadow 0.4s;
}

#led.on::before {
  background: #ff2d3c;
  box-shadow: 0 0 6px 2px rgba(255, 45, 60, 0.6), inset 0 0 2px rgba(255, 255, 255, 0.4);
}

#grill {
  position: absolute;
  display: none;
  gap: 5px;
  transform: translate(-50%, -50%) rotate(-28deg);
  pointer-events: none;
}

#grill i {
  display: block;
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: #0c0d10;
  box-shadow: inset 1px 1px 1px #000, 0 1px 0 #2b2d34;
}

/* Used by main.js to read the notch / home indicator safe-area insets. */
#safe {
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}