/* THE CLAW — arcade cabinet styling */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --neon-pink: #ff4fd8;
  --neon-cyan: #3ff5ff;
  --neon-gold: #ffd23f;
  --cab-dark: #1a0f2e;
  --cab-mid: #2b1a4a;
  --cab-edge: #4a2d78;
  --led-red: #ff3b30;
  --led-off: #2a1216;
}

html, body {
  min-height: 100%;
  background: radial-gradient(ellipse at 50% 30%, #231242 0%, #12081f 55%, #0a0512 100%);
  font-family: "Avenir Next", "Trebuchet MS", Verdana, system-ui, sans-serif;
  color: #eee;
  overscroll-behavior: none;
}

.arcade-room {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 10px 40px;
  position: relative;
}

.room-glow {
  position: fixed; inset: auto 0 0 0; height: 30vh; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,79,216,.12), transparent 70%);
}

/* ---------- cabinet ---------- */
.machine {
  width: min(860px, 100%);
  border-radius: 26px;
  background: linear-gradient(160deg, var(--cab-mid) 0%, var(--cab-dark) 60%);
  border: 3px solid var(--cab-edge);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.6),
    0 0 34px rgba(255,79,216,.35),
    0 0 90px rgba(63,245,255,.18),
    0 24px 60px rgba(0,0,0,.6);
  padding: 10px 14px 16px;
  position: relative;
}

/* ---------- marquee ---------- */
.marquee {
  border-radius: 16px;
  background: linear-gradient(180deg, #3d2166, #241143);
  border: 2px solid #6a3fa8;
  padding: 8px 10px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.marquee::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 45%, transparent 60%);
}
.marquee-face {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.marquee-title {
  font-size: clamp(30px, 7vw, 52px);
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 18px var(--neon-pink),
    0 0 42px var(--neon-pink),
    0 0 70px var(--neon-cyan);
  animation: marqueeFlicker 4.2s infinite;
}
.marquee-star { color: var(--neon-gold); font-size: clamp(20px, 4vw, 34px); text-shadow: 0 0 14px var(--neon-gold); }
.marquee-sub {
  margin-top: 2px; font-size: clamp(9px, 1.8vw, 13px); letter-spacing: .32em; color: #cbb3ff; opacity: .85;
}
@keyframes marqueeFlicker {
  0%, 100% { opacity: 1; }
  91% { opacity: 1; }
  92% { opacity: .55; }
  93% { opacity: 1; }
  96% { opacity: .8; }
  97% { opacity: 1; }
}
.bulb-strip { display: flex; justify-content: space-between; padding: 2px 8px; }
.bulb {
  width: 9px; height: 9px; border-radius: 50%;
  background: #5a4a2a;
  transition: background .12s, box-shadow .12s;
}
.bulb.on { background: var(--neon-gold); box-shadow: 0 0 8px var(--neon-gold), 0 0 16px var(--neon-gold); }
.bulb.on.alt { background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan), 0 0 14px var(--neon-cyan); }

/* ---------- playfield ---------- */
.cabinet-face {
  border-radius: 14px;
  border: 2px solid #5b3790;
  background: #0d0718;
  padding: 6px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.8);
}
.canvas-wrap { width: 100%; aspect-ratio: 800 / 620; }
#game { width: 100%; height: 100%; display: block; border-radius: 8px; touch-action: none; }

/* ---------- LED row ---------- */
.led-row {
  display: flex; align-items: stretch; gap: 10px;
  margin: 10px 2px;
}
.led-panel {
  flex: 1;
  background: #140a10;
  border: 2px solid #3d2430;
  border-radius: 10px;
  padding: 5px 8px 7px;
  text-align: center;
  box-shadow: inset 0 0 12px #000;
}
.led-label {
  display: block; font-size: 10px; letter-spacing: .3em; color: #b98;
  margin-bottom: 3px; font-weight: 700;
}
.led-digits { display: flex; justify-content: center; gap: 4px; }
.led-digits svg { width: clamp(18px, 3.4vw, 26px); height: auto; filter: drop-shadow(0 0 4px rgba(255,59,48,.8)); }
.led-panel.alarm .led-digits svg { animation: ledBlink .5s steps(2, jump-none) infinite; }
@keyframes ledBlink { 50% { opacity: .25; } }
.mute-btn {
  align-self: center;
  font-size: 22px;
  background: #241143;
  border: 2px solid #6a3fa8;
  border-radius: 10px;
  color: #fff;
  width: 52px; height: 52px;
  cursor: pointer;
  transition: transform .08s;
}
.mute-btn:active { transform: scale(.92); }

/* ---------- control deck ---------- */
.deck {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  background: linear-gradient(180deg, #341d5c, #22103f);
  border: 2px solid #5b3790;
  border-radius: 14px;
  padding: 12px 8px 8px;
}
.coin-block, .joystick-block, .drop-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.coin-hint, .joy-hint, .drop-hint { font-size: 10px; letter-spacing: .12em; color: #9d86c9; text-transform: uppercase; }

.coin-slot {
  width: 84px; height: 108px;
  border-radius: 12px;
  background: linear-gradient(160deg, #4a4a58, #26262e);
  border: 2px solid #6a6a78;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.15), 0 4px 10px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  color: var(--neon-gold);
  font-weight: 800; font-size: 12px; letter-spacing: .14em; line-height: 1.35;
  text-shadow: 0 0 8px rgba(255,210,63,.7);
  animation: coinPulse 1.6s ease-in-out infinite;
}
.machine.playing .coin-slot { animation: none; }
@keyframes coinPulse {
  0%, 100% { box-shadow: inset 0 2px 4px rgba(255,255,255,.15), 0 4px 10px rgba(0,0,0,.5); }
  50% { box-shadow: inset 0 2px 4px rgba(255,255,255,.15), 0 0 18px rgba(255,210,63,.75); }
}
.coin-slot:active { transform: translateY(2px); }
.coin-slot-mouth {
  width: 8px; height: 40px; border-radius: 4px;
  background: #0c0c10;
  border: 1px solid #555;
  box-shadow: inset 0 0 6px #000;
}

.joystick {
  width: 112px; height: 112px;
  position: relative;
  touch-action: none;
  cursor: grab;
}
.joystick:active { cursor: grabbing; }
.joystick-base-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #3a2a5e, #191029 70%);
  border: 3px solid #5b3790;
  box-shadow: inset 0 4px 10px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
}
.joystick-stick {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 46px;
  margin: -46px 0 0 -7px;
  transform-origin: 50% 100%;
  background: linear-gradient(90deg, #888, #ddd 50%, #777);
  border-radius: 7px;
  transition: transform .06s linear;
}
.joystick-ball {
  position: absolute; top: -19px; left: 50%; margin-left: -19px;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff8a5c, #e83e2c 55%, #8f1a10);
  box-shadow: 0 4px 8px rgba(0,0,0,.5), inset -3px -4px 8px rgba(0,0,0,.35);
}

.drop-btn {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 19px; font-weight: 900; letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.5);
  background: radial-gradient(circle at 35% 28%, #ff7a66, #e02f22 55%, #8f140c);
  box-shadow:
    0 7px 0 #6e0f08,
    0 10px 18px rgba(0,0,0,.55),
    inset -4px -6px 12px rgba(0,0,0,.3);
  transition: transform .06s, box-shadow .06s;
}
.drop-btn:active, .drop-btn.pressed {
  transform: translateY(5px);
  box-shadow: 0 2px 0 #6e0f08, 0 4px 10px rgba(0,0,0,.55), inset -4px -6px 12px rgba(0,0,0,.3);
}

/* ---------- shelf ---------- */
.shelf {
  margin-top: 10px;
  background: linear-gradient(180deg, #2c1850, #1a0d33);
  border: 2px solid #5b3790;
  border-radius: 14px;
  padding: 8px 12px 12px;
}
.shelf-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: .22em; font-weight: 800; color: var(--neon-gold);
  text-shadow: 0 0 10px rgba(255,210,63,.6);
  margin-bottom: 8px;
}
.shelf-reset {
  background: none; border: 1px solid #6a3fa8; color: #9d86c9; border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; font-size: 14px;
}
.shelf-reset:hover { color: #fff; border-color: var(--neon-pink); }
.shelf-tray {
  min-height: 62px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 8px), #120822;
  border-radius: 10px;
  border: 1px solid #3d2364;
  padding: 8px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.6);
}
.shelf-empty { font-size: 12px; color: #7a68a0; font-style: italic; align-self: center; margin: auto; }
.shelf-item {
  width: 54px; height: 54px; position: relative;
  animation: shelfPop .5s cubic-bezier(.2, 1.6, .4, 1);
}
.shelf-item img { width: 100%; height: 100%; }
.shelf-item .rare-tag {
  position: absolute; top: -6px; right: -4px; font-size: 12px;
  filter: drop-shadow(0 0 4px gold);
}
@keyframes shelfPop {
  0% { transform: scale(0) rotate(-30deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .arcade-room { padding: 8px 6px 28px; }
  .machine { padding: 8px 8px 12px; }
  .deck { flex-wrap: nowrap; gap: 4px; padding: 10px 4px 6px; }
  .coin-slot { width: 68px; height: 92px; font-size: 10px; }
  .joystick { width: 96px; height: 96px; }
  .drop-btn { width: 84px; height: 84px; font-size: 16px; }
  .coin-hint, .joy-hint, .drop-hint { font-size: 8px; }
}
@media (max-width: 380px) {
  .drop-btn { width: 74px; height: 74px; }
  .joystick { width: 84px; height: 84px; }
}