/*
 * DRIFT — Spiel No. 03 von games.rackpc.de
 * Vektor-Ästhetik: Cyan auf Vakuum-Schwarz.
 * Noir-Deco-Rahmen (remade.games) + Drift-Identität im Spiel.
 */

@font-face {
  font-family: 'Limelight';
  src: url('../shared/fonts/limelight-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../shared/fonts/cormorant-400.woff2') format('woff2');
  font-display: swap;
}

:root {
  --vacuum: #050510;
  --cyan: #00e5ff;
  --white: #ffffff;
  --orange: #ff6b35;
  --gray: #3a3a5c;
  --gold: #c9a84c;
  --ink: #0a0a14;
  --display: 'Limelight', cursive;
  --body: 'Cormorant Garamond', serif;
  --mono: 'Courier New', monospace;
  /* Safe-Areas (Notch, Home-Indicator) — für Touch-Layout */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--vacuum);
  font-family: var(--mono);
}

body {
  position: fixed;            /* kein iOS-Bounce / Overscroll */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* kein Long-Press-Menü */
  -webkit-tap-highlight-color: transparent;
}

/* Canvas-Größe kommt vom JS (style.width/-height = Viewport, Bitmap = ×dpr).
   Kein width:100vw/height:100vh und kein inset — das kann auf Mobile durch
   die URL-Leiste (100vh ≠ innerHeight) zu Stretch/Zoom führen. */
#game {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  touch-action: none;
}

#hud {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  touch-action: none;
}

#screens {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

#screens.active {
  pointer-events: auto;
}

.screen {
  text-align: center;
  color: var(--white);
  font-family: var(--mono);
}

.screen h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan), 0 0 60px rgba(0, 229, 255, 0.3);
  letter-spacing: 0.3em;
  margin-bottom: 0.5em;
}

.screen .subtitle {
  font-family: var(--body);
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  color: var(--gray);
  margin-bottom: 2em;
}

.screen .prompt {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--white);
  animation: blink 1.5s ease-in-out infinite;
}

.screen .score-display {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--cyan);
  margin: 0.5em 0;
}

.screen .highscore {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--gold);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.backlink {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  color: var(--gray);
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.85rem;
  z-index: 20;
  transition: color 0.3s;
}
.backlink:hover {
  color: var(--gold);
}

/* Mobile: Backlink nach unten mitte (die Ecken gehören den Touch-Buttons),
   Platz für den Home-Indicator lassen */
@media (pointer: coarse), (max-width: 720px) {
  .backlink {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(0.5rem + var(--safe-bottom));
    font-size: 0.75rem;
    opacity: 0.7;
  }
}