/* Real CSS faces share one camera; controls and links stay native HTML. */
.cabinet-stage {
  --depth:65px;
  position:relative;
  width:100%;
  max-width:620px;
  perspective:2000px;
  perspective-origin:50% 50%;
  padding-bottom:10px;
}
.cabinet-rig {
  position:relative;
  transform-style:preserve-3d;
  transform:translateZ(0);
}
.arcade-machine {
  max-width:none;
  transform:translateZ(var(--depth));
  border-radius:15px 15px 10px 10px;
  border-color:#34252b;
  background:linear-gradient(90deg,#d9838d,var(--pink) 4%,#f6b4b7 94%,#ce7784);
  box-shadow:inset 1px 0 0 #ffe4d9,inset -3px 0 0 #9b5265;
  animation:none;
}
.arcade-machine:before,.arcade-machine:after {
  width:6px;
  border-color:#5e3946;
  background:linear-gradient(90deg,#8d5264,#f4d9c6 45%,#a87382);
  box-shadow:1px 0 3px #23191e80;
}
.cabinet-side {
  position:absolute;
  top:5px;
  bottom:2px;
  right:0;
  width:calc(var(--depth) * 2);
  border:4px solid #34252b;
  border-radius:4px 10px 4px 2px;
  transform-origin:right center;
  transform:translateX(-3px) rotateY(90deg) translateX(var(--depth));
  background:linear-gradient(90deg,#3b2931 0 9%,#904e64 10%,#bc6a7c 70%,#663d50);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:35px;
  box-shadow:inset 4px 0 8px #24182070;
  backface-visibility:hidden;
}
.cabinet-side span { writing-mode:vertical-rl; font-size:34px; font-weight:700; letter-spacing:6px; opacity:.8; }
.cabinet-side b { font-size:50px; font-weight:400; color:var(--pink); }
.cabinet-side i { width:55px; height:54px; background:repeating-linear-gradient(0deg,#2d2028 0 4px,transparent 4px 9px); border-radius:5px; }
.cabinet-top {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:calc(var(--depth) * 2);
  border:4px solid #34252b;
  border-radius:12px 12px 3px 3px;
  background:linear-gradient(#754557,#b76b7f);
  transform-origin:center top;
  transform:rotateX(90deg) translateY(calc(var(--depth) * -1));
  backface-visibility:hidden;
}
.cabinet-top span { display:block; width:60%; height:25px; margin:14px auto; border-radius:5px; background:repeating-linear-gradient(90deg,#30232b 0 4px,transparent 4px 10px); }
.machine-marquee {
  position:relative;
  border-color:#34252b;
  border-top:2px solid #ffe3d8;
  border-radius:16px 16px 0 0;
  background:linear-gradient(#ffc5bd,#ee9ca5 42%,#c9768b);
  box-shadow:inset 0 6px 15px #fff2c745,inset 0 -4px 5px #6b334b35;
  text-shadow:0 1px #ffe9cf90;
}
.monitor-bezel {
  background:linear-gradient(125deg,#48413e,#211f20 20%,#302c2d 78%,#514347);
  border:3px solid #403239;
  box-shadow:inset 6px 4px 6px #0c0b0ccc,inset -3px -3px 3px #84707865;
}
.screen-toolbar { background:transparent; }
.game-tab { border-color:#726263; border-radius:4px 4px 2px 2px; box-shadow:inset 0 1px #ffffff15,0 2px 2px #0005; }
.game-tab[aria-current='true'] { background:linear-gradient(#ffbbb7,#e292a0); box-shadow:inset 0 1px #ffe7d8,0 2px 0 #783f56; }
.reel-viewport { border-color:#121113; box-shadow:0 2px 0 #80717166,0 0 0 3px #171416,inset 0 0 24px #000; }
.crt-overlay { box-shadow:inset 0 0 38px #0008,inset 0 0 5px #eadbc855; }
.crt-overlay:after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(125deg,#ffffff13 0%,#ffffff05 23%,transparent 24% 65%,#ffffff04 65% 68%,transparent 69%); }
.crt-sweep { position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(transparent 35%,#eee5d2a0 48%,#ef9b9f50 53%,transparent 65%); }
.machine-controls {
  z-index:1;
  border:3px solid #342a2d;
  border-bottom-width:6px;
  margin-bottom:9px;
  background:linear-gradient(175deg,#f6edd8,#ded0b5 70%,#bdab91);
  transform:perspective(900px) rotateX(9deg);
  transform-origin:center top;
  box-shadow:inset 0 2px 0 #fff9,0 7px 0 #736354,0 11px 7px #21171d66;
}
.joystick-base { background:radial-gradient(ellipse at 45% 35%,#625b56,#252326 65%); border:2px solid #141315; box-shadow:0 4px 0 #121113,0 6px 5px #241c2266; }
.joystick-shaft { border-color:#383039; background:linear-gradient(90deg,#777079,#f9f2d7 42%,#aaa0a2 70%,#4a404a); }
.joystick-ball { border-color:#663443; background:radial-gradient(circle at 30% 23%,#ffdfcd 0 6%,#ffc4bd 9%,#ef9b9f 35%,#be637e 75%,#6f354e); box-shadow:inset -3px -5px 4px #73384e70,0 3px 1px #592a3e50; }
.round-control { border-color:#703c4c; background:radial-gradient(ellipse at 32% 15%,#ffcfbe,#f5a8ac 40%,#d87990); box-shadow:inset 0 2px 2px #ffe4cf,0 5px 0 #a35b70,0 8px 0 #3b2b32,0 10px 7px #241c224d; }
.round-control:active,.round-control.is-pressed { transform:translateY(6px) scale(.97); box-shadow:inset 0 2px 2px #fce3d4,0 1px 0 #8e4e64,0 3px 0 #3b2b32; }
.launch-game { border-color:#733b4b; border-radius:7px; background:linear-gradient(#ffc3b9,#e68a9d); box-shadow:inset 0 2px #ffdec8,0 5px 0 #8c4c63,0 8px 0 #35252e,0 10px 7px #241c2244; }
.launch-game:active,.launch-game.is-pressed { transform:translateY(5px); box-shadow:inset 0 2px #fbc6b9,0 1px 0 #8c4c63,0 3px 0 #35252e; }
.launch-disc { border-color:#683347; background:radial-gradient(circle at 32% 20%,#ffdbbf,#f8b1ac 28%,#e08a9e 67%,#ba5e7c); box-shadow:inset 0 2px 2px #ffe8c9,0 4px 0 #a0566d,0 6px 0 #402630; }
.screen-play { border-radius:5px; background:linear-gradient(#ffc4ba,#e68a9d); border-color:#70394a; box-shadow:inset 0 1px #ffe0c7,0 3px 0 #8e4c64; }
.screen-play.is-pressed { transform:translateY(3px); }
.game-tab.is-pressed { transform:translateY(2px); }
.machine-base { background:linear-gradient(#d38496,#ef9b9f 50%,#ba6b81); box-shadow:inset 0 -2px 3px #6d3e5050; }
.cabinet-plinth { border-color:#6e3e50; background:linear-gradient(115deg,#c5758a,var(--pink) 40%,#d58298); box-shadow:inset 0 4px 5px #683e4e50,inset 0 -7px 0 #99536e; }
.coin-door { background:linear-gradient(135deg,#b2aca1,#e1d7bf 40%,#a99b8c); border-color:#58404b; box-shadow:inset 1px 1px 0 #efe7d3,inset -2px -2px 0 #78646e,0 2px 3px #5e364c80; }
.cabinet-plinth:before,.cabinet-plinth:after { border-color:#201c22; background:linear-gradient(#685c65,#241e25); box-shadow:0 3px 3px #0006; }
.arcade:after { display:none; }
.cabinet-stage:after { content:''; position:absolute; z-index:-1; left:50%; bottom:-26px; width:98%; height:24px; border-radius:50%; background:var(--ink); opacity:.23; filter:blur(9px); transform:translateX(-50%); }
.machine-banter { position:absolute; top:13px; right:13px; max-width:min(78%,270px); margin:0; padding:10px 13px; border:2px solid #392b32; border-radius:9px 9px 2px 9px; color:var(--ink); background:var(--paper); box-shadow:3px 4px 0 #251c2550; font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.1px; pointer-events:none; opacity:0; transform:translateY(-8px) rotate(3deg) scale(.96); transition:opacity .15s,transform .3s var(--spring); }
.machine-banter.visible { opacity:1; transform:translateY(0) rotate(2deg) scale(1); }
.machine-banter:after { content:''; position:absolute; right:16px; bottom:-7px; width:11px; height:11px; border-right:2px solid #392b32; border-bottom:2px solid #392b32; background:var(--paper); transform:rotate(45deg); }
@media (min-width:768px) and (min-height:821px) {
  .reel-viewport { height:clamp(215px,calc(100svh - 600px),300px); }
  .cabinet-plinth { min-height:82px; padding-bottom:9px; }
}
@media (min-width:768px) {
  .cabinet-rig { animation:rig-arrive .65s var(--ease) backwards; }
  @keyframes rig-arrive { from { translate:0 20px; } to { translate:0 0; } }
}
@media (max-width:767px), (orientation:landscape) and (max-height:600px) and (any-pointer:coarse) {
  .cabinet-stage { --depth:24px; width:calc(100% - 20px); }
  .cabinet-side span { font-size:19px; letter-spacing:3px; }.cabinet-side b { font-size:25px; }.cabinet-side i { width:20px; }
  .cabinet-top span { height:13px; margin-top:4px; }
  .machine-controls { transform:perspective(900px) rotateX(7deg); }
  .launch-game { border:0; background:none; box-shadow:none; }
  .launch-game:active,.launch-game.is-pressed { box-shadow:none; }
  .launch-disc { box-shadow:inset 0 2px 2px #ffe8c9,0 5px 0 #a0566d,0 8px 0 #402630,0 10px 6px #34212a50; }
  .launch-game:active .launch-disc,.launch-game.is-pressed .launch-disc { box-shadow:inset 0 2px 2px #ffe8c9,0 1px 0 #a0566d,0 3px 0 #402630; }
  .machine-banter { font-size:9px; padding:8px 10px; top:9px; right:9px; }
}
@media (max-width:359px) {
  .machine-controls { gap:4px; padding-inline:4px; }
  .round-control { font-size:23px; }
}
@media (max-width:767px) and (max-height:700px) {
  .arcade { align-content:start; padding-top:12px; }
  .reel-viewport { height:clamp(208px,calc(100svh - 447px),250px); }
  .cabinet-plinth { min-height:54px; padding-block:5px 7px; }
  .coin-door { height:39px; }
}