@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Zen+Maru+Gothic:wght@400;700&display=swap');

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

:root{
  --cabinet-bg:#1a1033;
  --cabinet-border:#ff2d75;
  --accent-cyan:#00f0ff;
  --accent-yellow:#ffe156;
  --accent-pink:#ff6bb5;
  --glass-tint:rgba(0,240,255,0.04);
  --neon-glow:0 0 12px var(--cabinet-border),0 0 40px rgba(255,45,117,0.25);
}

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b0618;
  background-image:
    radial-gradient(ellipse at 20% 50%,rgba(255,45,117,0.08) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 50%,rgba(0,240,255,0.06) 0%,transparent 60%);
  font-family:'Zen Maru Gothic','Fredoka',sans-serif;
  overflow:hidden;
  user-select:none;
}

.machine-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.marquee{
  background:linear-gradient(135deg,#ff2d75,#ff6bb5,#ff2d75);
  color:#fff;
  font-family:'Fredoka',sans-serif;
  font-size:28px;
  font-weight:700;
  padding:10px 40px;
  border-radius:14px 14px 0 0;
  text-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 20px rgba(255,255,255,0.3);
  box-shadow:0 -4px 20px rgba(255,45,117,0.4),inset 0 2px 0 rgba(255,255,255,0.3);
  letter-spacing:4px;
  animation:marquee-glow 2s ease-in-out infinite alternate;
}

@keyframes marquee-glow{
  0%{text-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 20px rgba(255,255,255,0.3)}
  100%{text-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 40px rgba(255,255,255,0.6),0 0 80px rgba(255,107,181,0.5)}
}

.cabinet{
  position:relative;
  width:420px;
  height:560px;
  background:var(--cabinet-bg);
  border:4px solid var(--cabinet-border);
  border-radius:0 0 20px 20px;
  box-shadow:var(--neon-glow),inset 0 0 60px rgba(0,0,0,0.5);
  overflow:hidden;
}

.cabinet::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.03) 0%,transparent 50%,rgba(255,255,255,0.02) 100%);
  pointer-events:none;
  z-index:10;
}

canvas{
  display:block;
  width:100%;
  height:100%;
}

.controls{
  display:flex;
  gap:16px;
  align-items:center;
}

.ctrl-btn{
  width:64px;height:64px;
  border:3px solid var(--accent-cyan);
  border-radius:50%;
  background:rgba(0,240,255,0.08);
  color:var(--accent-cyan);
  font-size:24px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  box-shadow:0 0 12px rgba(0,240,255,0.2);
  font-family:'Fredoka',sans-serif;
}

.ctrl-btn:hover{
  background:rgba(0,240,255,0.2);
  box-shadow:0 0 24px rgba(0,240,255,0.4);
  transform:scale(1.08);
}

.ctrl-btn:active{
  transform:scale(0.95);
  background:rgba(0,240,255,0.3);
}

.ctrl-btn.grab-btn{
  width:80px;height:80px;
  border-color:var(--accent-yellow);
  color:var(--accent-yellow);
  background:rgba(255,225,86,0.08);
  box-shadow:0 0 12px rgba(255,225,86,0.2);
  font-size:18px;
  font-weight:700;
}

.ctrl-btn.grab-btn:hover{
  background:rgba(255,225,86,0.2);
  box-shadow:0 0 24px rgba(255,225,86,0.4);
}

.hud{
  position:absolute;
  top:8px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:16px;
  z-index:20;
}

.hud-item{
  background:rgba(0,0,0,0.6);
  border:2px solid rgba(255,255,255,0.1);
  border-radius:10px;
  padding:4px 14px;
  color:#fff;
  font-size:14px;
  font-family:'Fredoka',sans-serif;
  backdrop-filter:blur(4px);
}

.hud-item span{
  color:var(--accent-yellow);
  font-weight:700;
}

.msg-overlay{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:30;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
}

.msg-overlay.show{
  opacity:1;
}

.msg-text{
  font-family:'Fredoka',sans-serif;
  font-size:36px;
  font-weight:700;
  color:var(--accent-yellow);
  text-shadow:0 0 20px rgba(255,225,86,0.6),0 4px 12px rgba(0,0,0,0.5);
  animation:msg-bounce .5s ease-out;
}

@keyframes msg-bounce{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.3)}
  100%{transform:scale(1);opacity:1}
}

.prize-chute{
  position:absolute;
  bottom:0;right:0;
  width:80px;height:100px;
  background:rgba(0,0,0,0.4);
  border-left:2px solid rgba(255,45,117,0.3);
  border-top:2px solid rgba(255,45,117,0.3);
  border-radius:20px 0 0 0;
  z-index:5;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

.prize-chute::after{
  content:'出口';
  color:rgba(255,255,255,0.15);
  font-size:12px;
  font-family:'Fredoka',sans-serif;
}

.instructions{
  color:rgba(255,255,255,0.35);
  font-size:12px;
  text-align:center;
  font-family:'Fredoka',sans-serif;
}

@media(max-width:460px){
  .cabinet{width:340px;height:480px}
  .marquee{font-size:22px;padding:8px 28px}
  .ctrl-btn{width:52px;height:52px;font-size:20px}
  .ctrl-btn.grab-btn{width:66px;height:66px;font-size:15px}
}