/* ---------- Grundlayout ---------- */
body{
  margin:0; padding:0; text-align:center;
  font-family:Segoe UI,Arial,sans-serif; color:#fff;
  background:radial-gradient(circle at center,#111 0%,#000 90%);
}
h1{font-size:2.5rem;color:#ffcc00; margin-top:20px; text-shadow:0 0 10px #ffcc00;}
h2{font-size:1.4rem;color:#0f0;     margin:5px 0 25px; text-shadow:0 0 6px #0f0;}

/* ---------- Automat ---------- */
.automat{
  position:relative; width:360px; margin:0 auto 20px;
  padding:25px 20px; border:8px solid #555; border-radius:20px;
  background:#333; box-shadow:0 0 40px rgba(255,0,0,.4),inset 0 0 15px rgba(255,255,255,.1);
}
.display{
  background:#000; border:5px inset #444; border-radius:10px;
  padding:10px; box-shadow:inset 0 0 18px #0ff;
}
.slot-container{display:flex;justify-content:center;gap:12px;}
.slot{
  width:90px;height:90px;border:3px solid #999;border-radius:10px;
  background:#222; box-shadow:0 0 12px #00f,inset 0 0 10px #444;
}
.slot img{width:100%;height:100%;object-fit:cover}

/* ---------- Coin‑Drop ---------- */
.coin-container{position:absolute;top:-35px;left:15px;width:50px;height:50px;overflow:visible}
.coin-container img{width:50px;opacity:0}
@keyframes coin-drop{
  0%{transform:translateY(-50px) scale(1);opacity:1}
  80%{transform:translateY(5px) scale(0.9);opacity:1}
  100%{transform:translateY(20px) scale(0.8);opacity:0}
}

/* ---------- SPIN‑Button (extravaganter) ---------- */
.spin-btn{
  font-size:1.3rem; font-weight:700; padding:15px 40px;
  border:none; border-radius:50px; cursor:pointer;
  background:linear-gradient(45deg,#ff0066,#ffcc00,#00ff99,#0066ff);
  background-size:400% 400%;
  color:#fff; box-shadow:0 0 20px rgba(255,0,102,.7);
  animation:gradientShift 8s linear infinite,glow 5s ease infinite;
  transition:transform .2s;
}
.spin-btn:hover{transform:scale(1.07)}
.spin-btn:active{transform:scale(0.95)}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes glow{
  0%,100%{box-shadow:0 0 10px rgba(255,0,102,.8)}
  50%    {box-shadow:0 0 25px rgba(0,102,255,.8)}
}

/* ---------- Meldungen ---------- */
.meldung{font-size:1.3rem;margin-top:15px}
.gewinn{color:#0f0;text-shadow:0 0 10px #0f0;animation:blink .8s infinite}
.verlust{color:#f00;text-shadow:0 0 6px #f00}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- Mobile ---------- */
@media(max-width:400px){
  .automat{width:90%}
  .slot{width:70px;height:70px}
  .spin-btn{width:90%;font-size:1.1rem;padding:12px 0; margin-top:10px}
}

.control-panel input[type="number"] {
  font-size: 1.2rem;
  padding: 12px 20px;
  border: 2px solid #ffcc00;
  border-radius: 10px;
  background: #111;
  color: #fff;
  width: 120px;
  box-shadow: 0 0 10px rgba(255,204,0,0.4);
  transition: all 0.3s ease;
}

.control-panel input[type="number"]:focus {
  outline: none;
  border-color: #00ff99;
  box-shadow: 0 0 15px rgba(0,255,153,0.6);
  background: #222;
}