@import url('./bonus-controls.css?v=3-chip-button');
/* Standard and fullscreen play share the same edge-to-edge cabinet stage. */
body.moonlit-preview {
  --fullscreen-backdrop: url('../art/backgrounds/moonlit-broadway-wide-v1.png') !important;
  overflow: hidden;
  background: linear-gradient(#02091416, #02091416), var(--fullscreen-backdrop) center / cover no-repeat fixed;
}
body.moonlit-preview > .topbar,
body.moonlit-preview > main > .playbar,
body.moonlit-preview > main > .ledger,
body.moonlit-preview > main > footer {
  display: none;
}
/* Retain status announcements without another visible bar below the cabinet. */
body.moonlit-preview > main > .message-bar {
  position: fixed; width: 1px; height: 1px; min-height: 0;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.moonlit-preview > main {
  height: 100dvh; max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
body.moonlit-preview #loading:not([hidden]) {
  position: fixed; inset: 40% 10% auto; z-index: 60;
  padding: 24px; background: #071729ed; border-radius: 12px;
}
body.moonlit-preview .reference-machine,
body.moonlit-preview .cabinet {
  mask-image: url('../art/ui/cabinet-foreground-matte-v1.png');
  mask-mode: alpha; mask-size: 100% 100%; mask-repeat: no-repeat;
}
body.moonlit-preview.bonus-test-view:not(.immersive-view) .test-controls {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
}
.moonlit-preview .cabinet-assembly {
  width: var(--assembly-width, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.moonlit-preview #machine.machine {
  width: 100%;
  flex: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.moonlit-preview .cabinet-foot {
  position: relative;
  width: 87.3697916667%;
  height: var(--foot-height, 52px);
  flex: none;
  margin-top: -1px;
  isolation: isolate;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 3%;
  visibility: hidden;
}
.moonlit-preview .cabinet-assembly.is-ready .cabinet-foot { visibility: visible; }
.moonlit-preview .foot-art { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
/* Fit only the registered alpha bounds, leaving the source PNG untouched. */
.moonlit-preview .foot-art img {
  position: absolute;
  width: 104.072831816%;
  height: 574.603174603%;
  max-width: none;
  left: -2.060373742%;
  top: -251.587301587%;
}
.moonlit-preview #cabinetFoot #fullscreenButton,
.moonlit-preview #cabinetFoot #cabinetSound {
  position: relative;
  width: clamp(44px, calc(var(--foot-height) - 12px), 64px);
  height: clamp(44px, calc(var(--foot-height) - 12px), 64px);
  flex: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  overflow: hidden;
  color: #fff0d1;
  font-size: 0;
  touch-action: manipulation;
}
.moonlit-preview #cabinetFoot #cabinetSound {
  margin-right: auto;
  inset: auto;
  transform: none;
  box-shadow: none;
}
.moonlit-preview #cabinetFoot #cabinetSound .sprite { position: absolute; inset: 0; }
.moonlit-preview #cabinetFoot #cabinetSound .sound-off { clip-path: none; }
.moonlit-preview #cabinetFoot #cabinetSound[data-muted=true] .sound-on { visibility: hidden; }
.moonlit-preview #cabinetFoot #cabinetSound:active:not(:disabled) { transform: translateY(1px); filter: brightness(.82); }
.moonlit-preview .base-volume {
  position: absolute;
  z-index: 40;
  left: 3%;
  bottom: calc(100% + 8px);
  display: grid;
  gap: 7px;
  min-width: 128px;
  padding: 10px 12px;
  border: 1px solid #9bafbf;
  border-radius: 8px;
  background: linear-gradient(#182b3b, #070d16);
  box-shadow: 0 3px 12px #000a, inset 0 1px #fff2;
  color: #fff0d1;
  font: 700 12px/1.2 Arial, sans-serif;
  letter-spacing: .04em;
  pointer-events: none;
}
.moonlit-preview .base-volume[hidden] { display: none; }
.moonlit-preview .base-volume__meter { display: block; height: 5px; border-radius: 3px; overflow: hidden; background: #ffffff26; }
.moonlit-preview .base-volume__meter > span { display: block; height: 100%; width: var(--volume-level, 0%); border-radius: inherit; background: #f7e0b0; transition: width .15s ease; }
.moonlit-preview #fullscreenButton::before {
  content: '';
  position: absolute;
  width: 128.879753340%;
  height: 128.615384615%;
  top: -13.128205128%;
  left: -14.285714286%;
  background: url('../art/ui/fullscreen-gunmetal-v1.png') center / 100% 100% no-repeat;
  pointer-events: none;
}
.moonlit-preview #fullscreenButton:active { transform: translateY(1px); filter: brightness(.82); }
.moonlit-preview .test-controls, .moonlit-preview footer a { display: none; }
.moonlit-preview.bonus-test-view:not(.immersive-view) .test-controls { display: flex; }
body.moonlit-preview.immersive-view {
  background-image: linear-gradient(#02091416, #02091416), var(--fullscreen-backdrop);
}
body.moonlit-preview.immersive-view > main {
  height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
body.moonlit-preview.immersive-view .cabinet-assembly {
  width: var(--assembly-width, 100vw);
  margin: 0;
  flex: none;
}
body.moonlit-preview.immersive-view #machine.machine {
  width: 100%;
  height: auto;
  margin: 0;
  background: transparent;
}
body.moonlit-preview.immersive-view .playbar { display: none; }

/* Independent sound power and loudness controls on the rubber cabinet foot. */
.moonlit-preview .base-audio-controls { display:flex; gap:10px; align-items:center; margin-right:auto; }
.moonlit-preview #cabinetFoot #cabinetSound.base-audio-button,
.moonlit-preview #cabinetFoot .base-audio-button {
  position:relative; inset:auto; flex:none; width:clamp(44px,calc(var(--foot-height) - 12px),64px);
  height:clamp(44px,calc(var(--foot-height) - 12px),64px); margin:0; padding:9px;
  border:0; border-radius:50%; color:#eee6cf;
  background:radial-gradient(circle at 35% 20%,#3a4149,#171c22 60%,#080b0f);
  box-shadow:none;
  overflow:visible; font-size:0;
}
/* Reuse the fullscreen control's exact brushed-metal rim, masking its icon. */
.moonlit-preview #cabinetFoot .base-audio-button::before{
 content:'';position:absolute;pointer-events:none;
 width:128.879753340%;height:128.615384615%;top:-13.128205128%;left:-14.285714286%;
 background:url('../art/ui/fullscreen-gunmetal-v1.png') center/100% 100% no-repeat;
 mask-image:radial-gradient(circle closest-side,transparent 57%,#000 59%);
}
.moonlit-preview #cabinetFoot .base-audio-button svg { position:relative;z-index:1;width:100%; height:100%; display:block; overflow:visible; }
.base-audio-toggle svg { fill:currentColor; filter:drop-shadow(0 0 3px currentColor); }
.base-audio-toggle .audio-signal { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.moonlit-preview #cabinetFoot #cabinetSound.base-audio-toggle[data-muted=false] { color:#50ff69; }
.moonlit-preview #cabinetFoot #cabinetSound.base-audio-toggle[data-muted=true] { color:#ff394b; }
.base-audio-volume .volume-wave { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.base-audio-volume[data-waves="1"] .wave-2,.base-audio-volume[data-waves="1"] .wave-3,
.base-audio-volume[data-waves="2"] .wave-3 { display:none; }
.moonlit-preview #cabinetFoot .base-audio-button:focus-visible { outline:2px solid #fff3be; outline-offset:3px; }
.moonlit-preview #cabinetFoot .base-audio-button:active:not(:disabled) { transform:translateY(1px); }
.moonlit-preview #cabinetFoot .cabinet-bonus{
 margin-right:14px;padding:7px;opacity:1;
 background:radial-gradient(circle at 35% 22%,var(--bonus-light),var(--bonus-face) 54%,#060a15 92%);
}
.cabinet-bonus .bonus-paw-word{
 fill:#392510;stroke:#ffe9a0;stroke-width:.3px;paint-order:stroke fill;
 font:900 11px Georgia,serif;letter-spacing:.2px;
}
.moonlit-preview #cabinetFoot .cabinet-bonus[data-ready=true]:not(:disabled){
 animation:bonus-paw-ready 1.6s ease-in-out infinite alternate;
}
@keyframes bonus-paw-ready{from{box-shadow:0 0 4px var(--bonus-face)}to{box-shadow:0 0 14px var(--bonus-light)}}
@media(prefers-reduced-motion:reduce){.moonlit-preview #cabinetFoot .cabinet-bonus[data-ready=true]:not(:disabled){animation:none;box-shadow:0 0 8px var(--bonus-light)}}