:root{
  --bg:#0b1020; --panel:#0d1424; --ink:#e5e7eb; --muted:#9aa3b2;
  --accent:#b400ff; --accent2:#00e5ff; --good:#22c55e;
}
*{box-sizing:border-box; touch-action:manipulation}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(60% 100% at 50% 100%, #0b1020 0%, #030712 60%, #000 100%);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* HUD */
.hud{
  position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem .75rem; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  backdrop-filter:blur(6px) saturate(1.2);
}
.hud .stats{display:flex; gap:1rem; font-variant-numeric:tabular-nums}
.hud .ghost{background:transparent; border:1px solid #334155; color:#94a3b8; padding:.4rem .7rem; border-radius:10px; cursor:pointer}

/* Frame */
.stage-wrap{display:grid; place-items:center; padding:10px}
.canvas-frame{
  position:relative; width:min(92vw, 600px); aspect-ratio:3/4;
  border-radius:18px; overflow:hidden; background:#000;
  box-shadow:0 30px 80px #0008, inset 0 3px 10px #fff1, inset 0 -6px 12px #0008;
}

.bg-sprite{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; z-index:1;}
#game{position:absolute; inset:0; width:100%; height:100%; image-rendering:crisp-edges; z-index:2;}
.bell-sprite{position:absolute; width:16%; pointer-events:none; filter:drop-shadow(0 6px 14px #0008); z-index:4;}
.title-sprite{position:absolute; left:0; top:0; width:100%; height:auto; pointer-events:none; filter:drop-shadow(0 3px 8px #0009); z-index:5;}

/* Promo-Bild (399 x 520) unterhalb der Bumper */
.promo-img{
  position:absolute;
  width:min(399px, 70%);
  aspect-ratio: 399 / 520;
  height:auto;
  left:50%;
  top:58%;
  transform:translate(-50%, -50%);
  border-radius:12px;
  box-shadow:0 10px 30px #000a, inset 0 2px 6px #fff3;
  filter:drop-shadow(0 8px 18px #0008);
  z-index:3;
  pointer-events:none;
}
.promo-img[hidden]{display:none}

/* Controls */
.controls{position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:space-between; padding:0 8px; gap:8px; z-index:6;}
.control{
  width:28%; height:54px; border-radius:14px; font-size:22px; font-weight:800; letter-spacing:.04em;
  border:none; color:white; cursor:pointer;
  background: radial-gradient(120% 120% at 30% 30%, #ef4444 0%, #b91c1c 70%, #7f1d1d 100%);
  box-shadow:0 6px 16px #ff000040, inset 0 2px 6px #fff2;
}
.control.right{
  background: radial-gradient(120% 120% at 30% 30%, #00e5ff 0%, #0090ff 70%, #0037a3 100%);
  box-shadow:0 6px 16px #0090ff40, inset 0 2px 6px #fff2;
}
.control:active{transform:translateY(1px)}
.control.pulse{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

.choice{
  position:absolute; left:50%; transform:translateX(-50%); bottom:78px; z-index:7;
  padding:6px 12px; border-radius:12px; backdrop-filter:blur(3px);
  color:#e5e7eb; background:linear-gradient(180deg,#0009,#0006); border:1px solid #334155; font-weight:700;
}
.choice[hidden]{display:none}

/* Footer */
.site-footer{
  max-width:min(92vw,700px); margin:8px auto 16px; display:flex; justify-content:space-between; align-items:center;
  gap:10px; color:var(--muted); font-size:12px;
}
.site-footer .share{
  display:inline-block; padding:6px 10px; border-radius:12px; text-decoration:none; color:#052e16; font-weight:700;
  background:linear-gradient(90deg, #25D366, #C6F7D0); box-shadow:0 3px 10px #25d36644, inset 0 1px 0 #fff8;
}

/* Overlays */
.overlay{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, #0009, #0006); backdrop-filter: blur(4px); z-index:20;}
.overlay[hidden]{display:none}
.overlay .card{background:linear-gradient(180deg,#0b1220,#0a0f1c); border:1px solid #1f2937; color:#e5e7eb; border-radius:16px; padding:18px 20px; width:min(90%, 420px); box-shadow:0 16px 40px #000a;}
.primary{background:linear-gradient(90deg, #00e5ff, #7c3aed); color:#0b1020; border:none; border-radius:12px; padding:10px 16px; font-weight:800; cursor:pointer; box-shadow: 0 8px 18px #00e6ff44, inset 0 2px 0 #fff6;}
.primary.green{ background:linear-gradient(90deg, #22c55e, #16a34a); color:#052e16; }

dialog{border:none; padding:0; border-radius:14px; width:min(92vw, 640px); box-shadow:0 20px 60px #000c; background:#0a0f1c; color:#e5e7eb; border:1px solid #1f2937;}
dialog::backdrop{background:#0008; backdrop-filter:blur(2px)}
dialog header{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid #1f2937}
dialog section{padding:14px}

@media (max-width:430px){
  .control{height:48px; font-size:20px}
}