* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #f5f5f5;
  background: #0c0f14;
  overflow: hidden;
}
#app { position: relative; width: 100vw; height: 100vh; }

#canvas {
  position: absolute; inset: 0;
  width: 100vw; height: 100vh;
  background: radial-gradient(ellipse at center, #1a2030 0%, #07090d 75%);
  display: block;
}
#canvas canvas { display: block; width: 100% !important; height: 100% !important; }

.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 16, 0.86);
  backdrop-filter: blur(6px);
  z-index: 30;
}
.lobby-card {
  background: #131826; border: 1px solid #2a3650;
  padding: 28px 32px; border-radius: 16px;
  width: min(520px, 92vw);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.lobby-card h1 { margin: 0 0 6px 0; font-size: 26px; }
.lobby-card .subtitle { margin: 0 0 18px 0; color: #95a3c2; }
#lobby-form label {
  display: block; margin-top: 12px; font-size: 13px; color: #a0adc8;
}
#lobby-form input[type=text] {
  width: 100%; padding: 10px 12px; margin-top: 4px;
  background: #0d1220; border: 1px solid #243250; color: #f5f5f5;
  border-radius: 8px; font-size: 15px;
}
.actions {
  display: flex; align-items: center; gap: 16px; margin-top: 18px;
}
#btn-spielen, #btn-new-round {
  background: linear-gradient(180deg, #5b8def, #3b67c6);
  color: white; border: none; padding: 12px 24px;
  border-radius: 10px; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
#btn-spielen:hover, #btn-new-round:hover { filter: brightness(1.1); }
.toggle { display: flex; align-items: center; gap: 6px; color: #b6c2de; font-size: 14px; }
#lobby-status { margin-top: 10px; min-height: 18px; font-size: 13px; color: #8ac2ff; }

#feature-markers { margin-top: 18px; border-top: 1px solid #243250; padding-top: 12px; }
#feature-markers ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
#feature-markers li {
  background: #1c2540; color: #cdd6f2;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
}

#hud {
  position: absolute; top: 16px; right: 16px;
  background: rgba(15, 20, 34, 0.85);
  border: 1px solid #2a3650; border-radius: 12px;
  padding: 14px 16px; min-width: 220px;
  z-index: 10; backdrop-filter: blur(4px);
}
#hud h2 { margin: 0 0 8px 0; font-size: 15px; color: #cfe0ff; }
#hud-turn, #hud-phase { font-size: 14px; margin: 4px 0; }
#hud-players { list-style: none; padding: 0; margin: 8px 0 4px; }
#hud-players li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 3px 0;
}
#hud-players li.active { font-weight: 700; color: #ffe39a; }
#hud-players li.out { text-decoration: line-through; opacity: 0.5; }
#hud-players .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#hud-tick { display: block; margin-top: 6px; color: #6f7fa8; font-size: 11px; }

#controls-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(15, 20, 34, 0.75);
  border: 1px solid #243250; border-radius: 10px;
  padding: 8px 14px; font-size: 13px; color: #b6c2de;
  z-index: 10;
}
#controls-hint kbd {
  background: #1c2540; padding: 2px 6px; border-radius: 4px;
  font-family: monospace; border: 1px solid #2a3650;
}

#fx-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
}
#fx-banner {
  position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
  font-size: 88px; font-weight: 900; letter-spacing: 4px;
  color: #ff5050; text-shadow: 0 4px 24px rgba(255,80,80,0.6);
  animation: bigflashAnim 1.6s ease-out forwards;
}
@keyframes bigflashAnim {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
#fx-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 0; height: 0; border-radius: 50%; border: 4px solid transparent;
  pointer-events: none;
}
#fx-ring.on {
  animation: ringflashAnim 0.7s ease-out forwards;
  border-color: rgba(255, 220, 130, 0.8);
}
@keyframes ringflashAnim {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 70vmin; height: 70vmin; opacity: 0; }
}
#fx-flash {
  position: absolute; inset: 0;
  background: white; opacity: 0;
}
#fx-flash.on { animation: flashAnim 0.35s ease-out forwards; }
@keyframes flashAnim {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

#chat {
  position: absolute; bottom: 16px; right: 16px;
  width: 320px; max-height: 40vh;
  background: rgba(15, 20, 34, 0.85);
  border: 1px solid #2a3650; border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column;
  z-index: 10;
}
#chat h3 { margin: 0 0 6px 0; font-size: 14px; color: #cfe0ff; }
#chat-log {
  list-style: none; padding: 0; margin: 0;
  overflow-y: auto; flex: 1; font-size: 13px;
}
#chat-log li { padding: 3px 0; }
#chat-log li .who { font-weight: 600; }
#chat-form { display: flex; gap: 6px; margin-top: 6px; }
#chat-form input { flex: 1; padding: 6px 8px; border-radius: 6px;
  background: #0d1220; border: 1px solid #243250; color: #fff; }
#chat-form button {
  padding: 6px 10px; border: none; border-radius: 6px;
  background: #3b67c6; color: white; cursor: pointer;
}

#endscreen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8, 10, 16, 0.92);
  z-index: 25; gap: 16px;
}
#endscreen h2 { font-size: 64px; color: #ffe39a; margin: 0; }
#winner-name { font-size: 28px; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #fx-banner, #fx-ring, #fx-flash { animation-duration: 0.01ms !important; }
}