/*
 * REVOLT — Spiel No. 05 von games.rackpc.de
 * Industrie-Warnfarben auf Stahl-Schwarz.
 * Noir-Deco-Rahmen (remade.games) + Revolt-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 {
  --steel: #0b0d12;
  --warn: #ffc400;
  --alarm: #ff3131;
  --signal: #ff7a00;
  --weld: #f5f7ff;
  --rescue: #2bff88;
  --gold: #c9a84c;
  --display: 'Limelight', cursive;
  --body: 'Cormorant Garamond', serif;
  --mono: 'Courier New', monospace;
  --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(--steel);
  font-family: var(--mono);
}

body {
  position: fixed;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Canvas-Größe kommt vom JS (style.width/-height = Viewport, Bitmap = ×scale).
   Kein 100vh/inset — das kann auf Mobile zu Stretch/Zoom führen (Fall 11). */
#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(--weld); font-family: var(--mono); }

.screen h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--warn);
  text-shadow: 0 0 20px var(--warn), 0 0 60px rgba(255, 196, 0, 0.35);
  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(--signal);
  opacity: 0.8;
  margin-bottom: 2em;
}

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

.screen .score-display {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--warn);
  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: rgba(255, 196, 0, 0.4);
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.85rem;
  z-index: 20;
  transition: color 0.3s;
}
.backlink:hover { color: var(--gold); }

@media (pointer: coarse), (max-width: 720px) {
  .backlink {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(0.5rem + var(--safe-bottom));
    font-size: 0.75rem;
  }
}