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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #0b1020;
  /* touch-action wird NICHT vererbt: ohne diese Zeilen an jedem einzelnen
     Element verbucht der Browser das Wischen als Scrollen und bricht den
     Zeigerstrom ab — pointerdown kommt noch an, pointermove nicht mehr.
     Der Knüppel stand dann still und man konnte sich nicht bewegen. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

#app,
#app canvas,
#app-hud {
  touch-action: none;
}

#app canvas {
  display: block;
  position: fixed;
  inset: 0;
}

/* ---------- HUD overlay ---------- */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  color: #fff;
}

#topbar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#money-card {
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 12px 20px;
  backdrop-filter: blur(6px);
}

#money {
  font-size: 30px;
  font-weight: 900;
  color: #7cfc7c;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

#income {
  font-size: 14px;
  color: #b8f5b8;
  font-weight: 600;
}

#slots {
  font-size: 12px;
  color: #9aa7c7;
  margin-top: 2px;
}

#blockade {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

#leaderboard {
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 210px;
  backdrop-filter: blur(6px);
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 2px 0;
}

.lb-row.me {
  font-weight: 800;
}

.lb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.lb-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-money {
  color: #7cfc7c;
  font-weight: 700;
}

#carry-banner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 90, 40, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

#carry-banner.stolen {
  background: rgba(160, 30, 30, 0.88);
  animation: pulse 0.8s infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 4px rgba(255, 60, 60, 0.6); }
  to { box-shadow: 0 0 22px rgba(255, 60, 60, 1); }
}

#prompt {
  position: absolute;
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 12, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

#feed {
  position: absolute;
  bottom: 18px;
  left: 14px;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  max-width: 460px;
}

.feed-item {
  background: rgba(8, 12, 24, 0.78);
  border-left: 4px solid #fff;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  transition: opacity 0.6s;
}

.feed-item.fade {
  opacity: 0;
}

#lock-hint {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 12, 24, 0.85);
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  opacity: 0.7;
  text-shadow: 0 0 4px #000;
}

.hidden {
  display: none !important;
}

/* ---------- loading screen ---------- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(160deg, #131a33, #2a1140);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: #fff;
  transition: opacity 0.6s;
}

#loading.gone {
  opacity: 0;
  pointer-events: none;
}

#loading h1 {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #ff5a5a, #ffd24d, #4dffa6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#loading-bar-outer {
  width: 340px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

#loading-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4dffa6, #ffd24d);
  transition: width 0.25s;
}

#loading-label {
  font-size: 14px;
  color: #b9c2e0;
}

/* ---------- Quellenangabe ---------- */
#quellen{
  position: fixed; left: 10px; bottom: 10px; z-index: 30;
  max-width: min(420px, 80vw);
  font-size: 11.5px; line-height: 1.5; color: #cdd6e6;
  background: #0b1020cc; border: 1px solid #ffffff26; border-radius: 8px;
  padding: 6px 10px; backdrop-filter: blur(3px);
}
#quellen summary{
  cursor: pointer; letter-spacing: .12em; text-transform: uppercase;
  font-size: 10px; color: #93a0b8; list-style: none;
}
#quellen summary::-webkit-details-marker{ display: none }
#quellen[open] summary{ margin-bottom: 5px }
#quellen p{ margin: 0 0 5px }
#quellen a{ color: #7fd8a0 }
@media (max-height:430px){ #quellen{ font-size: 10.5px; max-width: 60vw } }