/* Hexenwald — Reaktionsspiel. Dunkles Wald-Theme, touch-first. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #1e1033 url("../img/wald.jpg") center bottom / cover no-repeat fixed;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }

/* ---------- Start & Game Over ---------- */
.start-card {
  margin: auto;
  text-align: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  max-width: 420px;
  width: 100%;
  background: rgba(20, 8, 40, .72);
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.start-card h1 { font-size: 2rem; margin-bottom: 6px; text-shadow: 2px 2px 4px #000; }
.start-card h2 { font-size: 1.8rem; margin-bottom: 10px; }
.tagline { opacity: .92; margin-bottom: 14px; }
.start-img { max-width: 200px; width: 60%; height: auto; margin-bottom: 12px; }
.over-img { max-height: 160px; margin: 8px 0 12px; }
.highscore { margin: 6px 0 14px; font-size: 1.1rem; color: #fcd34d; }
.over-score { font-size: 1.4rem; margin-bottom: 4px; }
.over-record { color: #4ade80; font-size: 1.2rem; margin-bottom: 6px; }
.howto { margin-top: 16px; font-size: .9rem; opacity: .8; line-height: 1.45; }

.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  color: #1e1033;
  background: #fcd34d;
  box-shadow: 0 4px 0 #b45309;
  margin-top: 10px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b45309; }
.btn-big { font-size: 1.4rem; padding: 16px 24px; }
.btn-ghost { background: transparent; color: #ddd; box-shadow: none; border: 2px solid rgba(255,255,255,.35); }
.btn-ghost:active { transform: none; }

/* ---------- HUD ---------- */
.hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: rgba(20, 8, 40, .65);
}
.hud-hearts { display: flex; gap: 2px; min-width: 90px; }
.hud-hearts img { width: 24px; height: auto; }
.hud-level { flex: 1; text-align: center; font-weight: 700; text-shadow: 1px 1px 2px #000; }
.hud-score { font-size: 1.5rem; font-weight: 800; color: #fcd34d; text-shadow: 2px 2px 2px #7c2d12; min-width: 48px; text-align: right; }
.icon-btn {
  border: 0; background: rgba(255,255,255,.15); color: #fff;
  width: 40px; height: 40px; border-radius: 10px; font-size: 1.1rem; cursor: pointer;
}

/* ---------- Arena ---------- */
#arena { position: relative; flex: 1; overflow: hidden; }

.bat {
  position: absolute;
  cursor: pointer;
  animation: batfloat 2.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.bat img {
  height: 74px; width: auto; display: block;
  pointer-events: none;
}
.bat .bat-hp {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,.5); margin-bottom: 3px;
}
.bat .bat-hp span { display: block; height: 100%; background: #ef4444; transition: width .15s; }
.bat.flip img { transform: scaleX(-1); }
.bat.hit img { animation: bathit .12s linear; }
.bat.dead { animation: batdead .3s ease-in forwards; pointer-events: none; }

@keyframes batfloat {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(14px) rotate(2deg); }
}
@keyframes bathit {
  50% { filter: brightness(3) sepia(1) hue-rotate(-50deg) saturate(6); }
}
@keyframes batdead {
  to { transform: scale(0) rotate(180deg); opacity: 0; }
}

#hexe {
  position: absolute;
  bottom: 4%;
  left: 40%;
  height: 130px;
  transition: left .18s ease-out, top .18s ease-out;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
  z-index: 5;
}
#hexe.flip { transform: scaleX(-1); }

.float-points {
  position: absolute;
  font-size: 1.5rem; font-weight: 800; color: #4ade80;
  text-shadow: 1px 1px 2px #000;
  pointer-events: none; z-index: 6;
  animation: floatup .8s ease-out forwards;
}
@keyframes floatup {
  to { transform: translateY(-60px); opacity: 0; }
}

/* Schaden-Feedback */
body.ouch #arena { animation: shake .3s linear; }
body.ouch::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: rgba(220, 38, 38, .25); animation: ouchfade .4s linear forwards;
  z-index: 40;
}
@keyframes shake {
  25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); }
}
@keyframes ouchfade { to { opacity: 0; } }

/* ---------- Level-Up & Pause ---------- */
.levelup {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  pointer-events: none; z-index: 50;
}
.levelup img { height: 150px; animation: pop .4s ease-out; }
.levelup-text {
  font-size: 2.4rem; font-weight: 900; color: #fcd34d;
  text-shadow: 3px 3px 0 #7c2d12; animation: pop .4s ease-out;
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

.pause-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 60;
}
.pause-box { background: rgba(20,8,40,.95); padding: 28px 40px; border-radius: 16px; text-align: center; font-size: 1.4rem; }
[hidden] { display: none !important; }

@media (min-width: 700px) {
  .bat img { height: 88px; }
  #hexe { height: 160px; }
}