:root{
  --bg:#000;
  --card: rgba(18,24,38,.92);
  --text:#eaf2ff;
  --muted:#8aa0b6;
  --accent:#6ee7ff;
  --danger:#ff6b6b;
  --border: rgba(255,255,255,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#000;color:var(--text);overflow-x:hidden}
.wrap{max-width:980px;margin:0 auto;padding:22px 14px 50px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter: blur(2px)}
h1{margin:0 0 8px;font-size:22px}
p{margin:8px 0;color:var(--muted);line-height:1.5}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button,a.btn{appearance:none;border:0;cursor:pointer;border-radius:12px;padding:12px 14px;font-weight:700;color:#061018;background:var(--accent);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color: transparent}
button.secondary,a.btn.secondary{background:rgba(255,255,255,.12);color:var(--text);border:1px solid rgba(255,255,255,.14)}
button:disabled{opacity:.55;cursor:not-allowed}
.badge{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04)}
.hidden{display:none !important}

#arena{position:relative;width:100%;height:min(70vh, 560px);border-radius:16px;border:1px solid rgba(255,255,255,.12);background:
  radial-gradient(1200px 600px at 20% 0%, rgba(110,231,255,.12), rgba(0,0,0,0)),
  radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,.06), rgba(0,0,0,0)),
  #070a0f;
overflow:hidden;touch-action: manipulation;user-select:none}
#arena.bg{background-image:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),url("../img/bg.jpg");background-size:cover;background-position:center}

.target{position:absolute;width:64px;height:64px;border-radius:999px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 25px rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.25);background:
  radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 35%, rgba(0,0,0,.0) 36%),
  radial-gradient(circle at 50% 50%, rgba(110,231,255,.95), rgba(110,231,255,.25) 42%, rgba(0,0,0,.0) 43%),
  radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(0,0,0,.0) 70%);
cursor:pointer}
.target:active{transform:translate(-50%,-50%) scale(.98)}
.target::after{content:"";width:10px;height:10px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.45)}

.flash{position:absolute;inset:0;background:rgba(110,231,255,.08);opacity:0;pointer-events:none;transition:opacity 140ms ease}
.flash.on{opacity:1}

.toast{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--text);line-height:1.4}
.toast.ok{border-color:rgba(110,231,255,.35)}
.toast.bad{border-color:rgba(255,107,107,.35)}
.bigHint{margin-top:12px;padding:14px;border-radius:14px;background:rgba(110,231,255,.10);border:1px solid rgba(110,231,255,.28);color:var(--text)}

/* --- Override: Target als Bild (Kopf) --- */
.target{
  background: none !important;                 /* kill shorthand background */
  background-image: url("/assets/img/target.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.target::after{ display:none !important; }     /* Punkt in der Mitte ausblenden */

/* --- DEBUG: Target sichtbar machen (nachher wieder entfernen) --- */
.target{
  outline: 3px solid #ff0 !important;
  background-color: #fff !important;
  background-image: url("/assets/img/target.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.target::after{ display:none !important; }

/* ===== Visual Upgrade Pack ===== */
:root{
  --neon: rgba(110,231,255,.95);
  --neon2: rgba(255,255,255,.22);
}

#arena{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

#arena::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(800px 520px at 80% 10%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(110,231,255,.10), transparent 60%);
  filter: blur(.2px);
  z-index:0;
}

#arena::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(closest-side, transparent 60%, rgba(0,0,0,.45));
  z-index:1;
  pointer-events:none;
}

.flash{ z-index: 5; }
.target{ z-index: 3; }

.target{
  border-radius: 999px !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.14),
    0 0 22px rgba(110,231,255,.22),
    0 12px 25px rgba(0,0,0,.45);
  animation: spawn .12s ease-out;
}

@keyframes spawn{
  from{ transform: translate(-50%,-50%) scale(.85); filter: brightness(.95); }
  to  { transform: translate(-50%,-50%) scale(1); }
}

/* Treffer-Pop */
.pop{
  position:absolute;
  transform: translate(-50%,-50%);
  font-weight:800;
  letter-spacing:.2px;
  color: #eaf2ff;
  text-shadow: 0 6px 18px rgba(0,0,0,.65), 0 0 18px rgba(110,231,255,.45);
  pointer-events:none;
  z-index:6;
  animation: pop 650ms ease-out forwards;
}
@keyframes pop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.9); }
  15%{ opacity:1; transform:translate(-50%,-62%) scale(1.05); }
  100%{ opacity:0; transform:translate(-50%,-110%) scale(1.1); }
}

/* Subtile Kamera-Schüttelung */
.shake{
  animation: shake 140ms ease-out;
}
@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  55%{ transform: translateX(3px); }
  100%{ transform: translateX(0); }
}

/* Audio Controls (falls vorhanden) */
.audioRow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px
}
.audioRow select, .audioRow input[type="range"]{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
}
.audioRow input[type="range"]{ padding: 10px 0; }