/*
 * DUELL — Spiel No. 06 von games.rackpc.de
 * Noir-Dächer um Mitternacht, Banden-/Wurm-Teams, Glut-Explosionen.
 * Noir-Deco-Rahmen (remade.games) + Duell-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 {
  --sky-top: #0a0e1a;
  --sky-bottom: #1a1420;
  --tar: #2a2a30;
  --brick: #5a3a30;
  --team-red: #ff4d4d;
  --team-blue: #4da6ff;
  --ember: #ff9a3c;
  --white-hot: #fff3e0;
  --warn: #ffc400;
  --gold: #c9a84c;
  --display: 'Limelight', cursive;
  --body: 'Cormorant Garamond', serif;
  --mono: 'Courier New', monospace;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sky-top);
  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;
}

#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-hot); 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(--ember), 0 0 60px rgba(255, 154, 60, 0.4);
  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(--ember);
  opacity: 0.85;
  margin-bottom: 1.5em;
}

.screen .prompt {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--white-hot);
  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 .hint {
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  color: rgba(255, 243, 224, 0.5);
  margin-top: 1.2em;
  line-height: 1.6;
}

.menu-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5em 0;
}

.menu-btn {
  font-family: var(--mono);
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  color: var(--warn);
  background: rgba(255, 196, 0, 0.08);
  border: 2px solid var(--warn);
  padding: 0.7em 1.6em;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background 0.2s, transform 0.1s;
  min-width: 11em;
}
.menu-btn:hover { background: rgba(255, 196, 0, 0.2); }
.menu-btn:active { transform: scale(0.96); background: rgba(255, 196, 0, 0.3); }

/* Tastenbelegungs-Overlay */
#controls {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  background: rgba(10, 14, 26, 0.94);
  border: 2px solid var(--warn);
  padding: 1.4em 1.8em;
  color: var(--white-hot);
  font-family: var(--mono);
  max-width: 90vw;
  box-shadow: 0 0 40px rgba(255, 154, 60, 0.25);
}
#controls[hidden] { display: none; }
#controls h2 {
  font-family: var(--display);
  color: var(--warn);
  letter-spacing: 0.15em;
  margin-bottom: 0.6em;
  font-size: 1.3rem;
}
#controls dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.4em 1.6em;
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
}
#controls dt { color: rgba(255, 243, 224, 0.6); }
#controls dd { color: var(--warn); text-align: right; }
#controls .controls-close {
  margin-top: 1em;
  font-size: 0.72rem;
  color: rgba(255, 243, 224, 0.4);
  text-align: center;
}

#help-btn {
  position: fixed;
  top: calc(0.7rem + var(--safe-top, 0px));
  right: 4rem;
  z-index: 25;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 196, 0, 0.6);
  background: rgba(10, 14, 26, 0.6);
  color: var(--warn);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
#help-btn:hover { background: rgba(255, 196, 0, 0.2); }

/* Waffen-Menü (Grid mit Icons, wie bei Worms) */
#weapon-btn {
  position: fixed;
  bottom: calc(3.2rem + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  padding: 0.4em 1em;
  border: 2px solid rgba(255, 196, 0, 0.6);
  border-radius: 6px;
  background: rgba(10, 14, 26, 0.7);
  color: var(--warn);
  font-family: var(--mono);
  font-size: 0.9rem;
  cursor: pointer;
}
#weapon-btn:hover { background: rgba(255, 196, 0, 0.2); }

#weapons {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 8px;
  padding: 14px;
  background: rgba(10, 14, 26, 0.95);
  border: 2px solid var(--warn);
  box-shadow: 0 0 40px rgba(255, 154, 60, 0.25);
  max-width: 94vw;
}
#weapons[hidden] { display: none; }

.weapon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 78px;
  padding: 6px 4px;
  border: 2px solid rgba(255, 243, 224, 0.15);
  background: rgba(255, 243, 224, 0.04);
  color: var(--white-hot);
  font-family: var(--mono);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.weapon-btn:hover { background: rgba(255, 196, 0, 0.15); border-color: rgba(255, 196, 0, 0.5); }
.weapon-btn.selected { border-color: var(--warn); background: rgba(255, 196, 0, 0.22); }
.weapon-btn.empty { opacity: 0.35; }
.weapon-btn .weapon-icon { width: 44px; height: 44px; }
.weapon-btn .weapon-label { font-size: 0.6rem; line-height: 1.1; text-align: center; }
.weapon-btn .weapon-ammo { font-size: 0.62rem; color: var(--warn); }

@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;
  }
}