/* ═══════════════════════════════════════════════════════════
   Arcade Cabinet – Responsive Wrapper + Control Panel
   Shared across all arcade machines
   ═══════════════════════════════════════════════════════════ */

/* Stage = full viewport, clips everything */
.arcade-stage{
  width:100vw;
  height:100vh;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* Machine = fixed-size container, scaled via transform */
.arcade-machine{
  will-change:transform;
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;
}

/* ── CONTROL PANEL (uses cabinet color vars) ── */
.control-panel{
  position:relative;
  width:100%;
  background:linear-gradient(180deg, var(--cab-dark, #0d1a0d) 0%, var(--cab-light, #0a140a) 50%, var(--cab-light, #081008) 100%);
  border-left:3px solid var(--cab-border, #2a5a2a);
  border-right:3px solid var(--cab-border, #2a5a2a);
  padding:26px 12px 6px;
  z-index:2;
}
.cp-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
/* Controls row: joystick + buttons always side by side */
.cp-controls-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  order:1;
}
/* Center card section wraps below on narrow cabinets */
.cp-center{
  order:2;
}
.cp-screw{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #888, #444);
  border:1px solid #333;
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.15);
}
.cp-screw::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:6px;height:1px;background:#555;
}
.cp-screw-tl{top:6px;left:8px}
.cp-screw-tr{top:6px;right:8px}
.cp-screw-bl{bottom:6px;left:8px}
.cp-screw-br{bottom:6px;right:8px}

/* Credit display — absolute top-left of panel */
.seg7-row{
  position:absolute;
  top:8px;left:20px;
  display:flex;align-items:center;gap:6px;
  z-index:3;
}
.seg7-inline-label{
  font-size:10px;font-weight:900;letter-spacing:2px;
  color:rgba(100,255,100,0.5);text-transform:uppercase;
}
.seg7-display{
  position:relative;
  width:46px;height:26px;
  background:#0a0a0a;
  border:2px solid #333;
  border-radius:4px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.seg7-display::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,40,0,0.15), transparent 40%, rgba(0,40,0,0.1));
  pointer-events:none;
}
.seg7-digits{
  font-family:'Courier New',monospace;
  font-size:16px;font-weight:900;
  color:#33ff33;
  text-shadow:0 0 8px rgba(50,255,50,0.6), 0 0 20px rgba(50,255,50,0.3);
  letter-spacing:2px;
  line-height:1;
}
.seg7-digits.glow{
  animation:seg7pulse 0.4s ease-out;
}
@keyframes seg7pulse{
  0%{color:#88ff88;text-shadow:0 0 15px rgba(100,255,100,0.9),0 0 30px rgba(100,255,100,0.5);}
  100%{color:#33ff33;text-shadow:0 0 8px rgba(50,255,50,0.6),0 0 20px rgba(50,255,50,0.3);}
}

/* Joystick */
.joystick-area{
  display:flex;align-items:center;gap:10px;
}
.joy-col{
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.joystick-base{
  position:relative;
  width:56px;height:56px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #333, #1a1a1a);
  border:3px solid #444;
  box-shadow:0 4px 12px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.05);
  display:flex;align-items:center;justify-content:center;
}
.joystick-ring{
  position:absolute;inset:4px;border-radius:50%;
  border:2px solid rgba(100,255,100,0.08);
}
.joystick-stick{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #555, #2a2a2a);
  border:2px solid #666;
  box-shadow:0 2px 6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.1);
  cursor:pointer;transition:transform 0.08s;
}
.joystick-stick.tilt-l{transform:translateX(-6px)}
.joystick-stick.tilt-r{transform:translateX(6px)}
.joystick-stick.tilt-u{transform:translateY(-6px)}
.joy-label{
  position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  font-size:7px;letter-spacing:2px;color:rgba(255,255,255,0.2);text-transform:uppercase;
}
.joy-arrows{
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.joy-arrow-row{display:flex;gap:2px;}
.joy-arrow{
  width:28px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, #222, #111);
  border:2px solid #444;border-radius:4px;
  color:rgba(255,255,255,0.4);font-size:11px;
  cursor:pointer;user-select:none;transition:all 0.08s;
  -webkit-tap-highlight-color:transparent;
}
.joy-arrow:active,.joy-arrow.pressed{
  background:linear-gradient(180deg, #1a3a1a, #0a2a0a);
  border-color:#4a8a4a;color:#88ff88;
  box-shadow:0 0 8px rgba(100,255,100,0.2);
}

/* Center section */
.cp-center{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;
}
.cp-card-slots{
  display:flex;align-items:stretch;gap:12px;justify-content:center;
}
.cp-slot-col{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.cp-credit-btn{
  width:100%;padding:6px 10px;
  border:2px solid var(--cab-border, #3a6a3a);border-radius:6px;
  background:linear-gradient(180deg, var(--cab-dark, #1a2a1a), var(--cab-light, #0a1a0a));
  color:var(--cab-accent, #88cc88);
  font-size:9px;font-weight:800;letter-spacing:0.5px;
  cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.cp-credit-btn:hover:not(:disabled){
  background:linear-gradient(180deg, var(--cab-border, #2a4a2a), var(--cab-dark, #1a3a1a));
  border-color:var(--cab-accent, #4a8a4a);color:var(--cab-accent, #aaffaa);
  box-shadow:0 0 8px rgba(255,255,255,0.1);
}
.cp-credit-btn:disabled{opacity:0.3;cursor:not-allowed;}
.cp-card-slots .card-slot-area,
.cp-card-slots .wallet-card-slot-area{
  min-height:80px!important;min-width:180px;padding:4px 8px;
  font-size:0.85em;
}
.cp-card-balance{
  width:100%;text-align:center;font-size:8px;letter-spacing:0.5px;
  color:rgba(100,255,100,0.35);margin-top:2px;
}
.cp-center-label{
  display:flex;align-items:center;gap:6px;
  font-size:7px;letter-spacing:2px;font-weight:700;
  color:rgba(255,255,255,0.12);text-transform:uppercase;
}
.cp-dot{font-size:4px;color:rgba(100,255,100,0.2);}

/* Hide separate insert/eject buttons */
.card-insert-btn,.wcard-insert-btn{display:none!important;}

/* Arcade Buttons */
.buttons-area{display:flex;flex-direction:column;align-items:center;gap:4px;}
.arcade-btn-group{display:flex;gap:14px;}
.arcade-btn{
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  position:relative;padding:0;background:transparent;-webkit-tap-highlight-color:transparent;
}
.btn-face{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  font-size:9px;font-weight:900;letter-spacing:1px;
  color:rgba(255,255,255,0.8);text-transform:uppercase;transition:all 0.08s;
}
.btn-jump .btn-face{
  background:radial-gradient(circle at 40% 35%, #cc3333, #881111);
  border:3px solid #dd4444;
  box-shadow:0 4px 0 #660808, 0 6px 12px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.15);
}
.btn-jump:active .btn-face,.btn-jump.pressed .btn-face{
  box-shadow:0 1px 0 #660808, 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.15);
  transform:translateY(3px);background:radial-gradient(circle at 40% 35%, #ff4444, #aa2222);border-color:#ff6666;
}
.btn-action .btn-face{
  background:radial-gradient(circle at 40% 35%, #2266cc, #113388);
  border:3px solid #4488dd;
  box-shadow:0 4px 0 #0a1a44, 0 6px 12px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.15);
}
.btn-action:active .btn-face,.btn-action.pressed .btn-face{
  box-shadow:0 1px 0 #0a1a44, 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.15);
  transform:translateY(3px);background:radial-gradient(circle at 40% 35%, #4488ff, #2266cc);border-color:#66aaff;
}
.btn-labels{
  display:flex;gap:38px;font-size:8px;color:rgba(255,255,255,0.15);letter-spacing:1px;font-weight:700;
}