/* ============================================================
   Truth Defender — Global Styles
   Design tokens from UX Design Specification (D2 Compact Max)
   ============================================================ */

:root {
  /* Colors */
  --color-bg: #050810;
  --color-fact: #4DCCFF;
  --color-wave-hot: #FF3B30;
  --color-wave-warm: #FF9500;
  --color-text-primary: #F0F0F0;
  --color-text-muted: #7A8AA0;
  --color-district-intact: #2C5F8A;
  --color-district-damaged: #8A6F2C;
  --color-district-polarized: #8A2C2C;
  --color-district-destroyed: #1A1A1A;

  /* Typography */
  --font-primary: 'JetBrains Mono', 'Courier New', 'Lucida Console', monospace;

  /* Animation durations */
  --anim-feedback-flash: 150ms;
  --anim-wave-enter: 400ms;
  --anim-district-degrade: 600ms;

  /* D2 Layout zones (portrait mobile) */
  --zone-hud: 4vh;
  --zone-game: 66vh;
  --zone-districts: 6vh;
  --zone-arguments: 24vh;
}

/* ============================================================
   Reset & Base
   ============================================================ */

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--color-bg);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100dvh;
}

#game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#countdown-bar {
  flex-shrink: 0;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(77,204,255,0.75);
  text-align: center;
  padding: 6px 0 2px;
  width: min(480px, 100vw);
  margin: 0 auto;
  display: block;
}

/* Story 7.3 — Accessibility: Skip link + screen-reader utility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-fact);
  color: var(--color-bg);
  padding: 8px 16px;
  font-family: var(--font-primary);
  font-size: 14px;
  z-index: 9999;
  text-decoration: none;
  transition: top 100ms;
}
.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Game Container — Canvas + Overlay
   ============================================================ */

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Overlay sits directly on top of canvas — all HTML UI goes here */
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* re-enabled per-component where needed */
}

/* ============================================================
   Story 7.5 — Portrait lock + responsive finalization
   ============================================================ */

/* Safe area insets for notched devices */
#game-container {
  position: relative;
  aspect-ratio: 480 / 854;
  width: min(480px, 100vw, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 56px) * 480 / 854));
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 56px);
  overflow: hidden;
  flex-shrink: 0;
}

/* Landscape warning overlay — mobile only (max-width: 900px) */
@media (orientation: landscape) and (max-width: 900px) {
  body::after {
    content: '↕ Bitte Gerät drehen / Please rotate device';
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    z-index: 9999;
    font-size: 1rem;
  }

  /* Prevent interaction in landscape on mobile */
  #game-container {
    pointer-events: none;
  }
}

/* Tall desktop screens: constrain to phone-like layout */
@media (min-width: 600px) and (orientation: portrait) {
  body {
    align-items: center;
    min-height: 100svh;
  }

  #game-container {
    border-left: 1px solid rgba(77,204,255,0.1);
    border-right: 1px solid rgba(77,204,255,0.1);
  }
}


/* ============================================================
   Reduced motion support
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Story 7.2 — Visual Polish: CRT overlay, glow, art direction
   ============================================================ */

/* CRT scanline overlay — drawn via a pseudo-element on game-container */
#game-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
  mix-blend-mode: overlay;
}

/* Fact-color glow on interactive elements */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-fact);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(77,204,255,0.25);
}

/* Canvas glow aura */
#gameCanvas {
  box-shadow: 0 0 30px rgba(77,204,255,0.08), 0 0 60px rgba(5,8,16,0.8);
}

/* Subtle vignette via game container */
#game-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,3,0.55) 100%);
}

/* Score / HUD elements glow */
#hud-panel {
  text-shadow: 0 0 8px rgba(77,204,255,0.5);
}

/* Wave intercept flash on argument buttons @reduced-ok */
@keyframes btn-correct-flash {
  0%   { background: rgba(76,175,80,0.5); }
  100% { background: rgba(77,204,255,0.05); }
}
@keyframes btn-wrong-flash {
  0%   { background: rgba(255,59,48,0.5); }
  100% { background: rgba(77,204,255,0.05); }
}

/* Retry button hover/active */
#nochmal-btn:hover {
  background: rgba(77,204,255,0.3);
  border-color: rgba(77,204,255,0.9);
}
#nochmal-btn:active {
  background: rgba(77,204,255,0.45);
}

/* Site footer */
#site-footer {
  font-family: var(--font-primary);
  font-size: 10px;
  color: rgba(77,204,255,0.4);
  text-align: center;
  padding: 6px 0 4px;
  width: min(480px, 100vw);
  letter-spacing: 0.06em;
}
#site-footer a {
  color: rgba(77,204,255,0.55);
  text-decoration: none;
}
#site-footer a:hover {
  color: rgba(77,204,255,0.9);
  text-decoration: underline;
}