* {
  box-sizing: border-box;
  cursor: url('../img/cursor2.png') 0 0, auto;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: radial-gradient(circle at top, #1e2c48 0%, #0a101d 70%);
  font-family: 'Press Start 2P', monospace;
  color: var(--text-color);
  letter-spacing: 0.05em;
  image-rendering: pixelated;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

.game-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(16, 26, 49, 0.7), rgba(9, 15, 30, 0.9));
  filter: contrast(1.05) saturate(1.1);
}

.scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 2px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay;
  animation: scan 6s linear infinite;
  z-index: 100;
}

@keyframes scan {
  0% {
    transform: translateY(-100%);
    opacity: 0.1;
  }

  45% {
    opacity: 0.25;
  }

  100% {
    transform: translateY(100%);
    opacity: 0.1;
  }
}

.message {
  line-height: 1.6;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .game-container {
    filter: contrast(1.03) saturate(1.05);
  }
}

@media (max-width: 768px) {
  * {
    touch-action: manipulation;
  }

  .icon,
  .window,
  .dialog-box,
  button {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }

  .scanline {
    display: none;
  }

  .game-container {
    height: 100dvh;
    background: linear-gradient(135deg, #101a31, #090f1e);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  body {
    background: #0a101d;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  button,
  .window-action,
  .icon {
    -webkit-tap-highlight-color: rgba(83, 245, 200, 0.3);
  }
}

@media (max-width: 480px) {

  html,
  body {
    font-size: 16px;
  }

  .game-container {
    overflow-x: hidden;
  }
}

@media (max-width: 360px) {

  html,
  body {
    font-size: 14px;
  }
}