/* page shell styles - extracted from sb_v227_gold.html.txt */
:root {
  --ggz-safe-top: env(safe-area-inset-top, 0px);
  --ggz-safe-right: env(safe-area-inset-right, 0px);
  --ggz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ggz-safe-left: env(safe-area-inset-left, 0px);
  --ggz-vw: 100vw;
  --ggz-vh: 100dvh;
  --ggz-vx: 0px;
  --ggz-vy: 0px;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Oxanium", system-ui, sans-serif;
  background:
    radial-gradient(
      1600px 520px at 50% -10%,
      rgba(255, 255, 255, 0.05),
      transparent 58%
    ),
    radial-gradient(
      1100px 280px at 50% 0,
      rgba(255, 240, 138, 0.035),
      transparent 62%
    ),
    linear-gradient(180deg, #06080d 0%, #010204 52%, #000 100%);
}
.sb-page {
  --page-pad-top: max(14px, calc(var(--ggz-safe-top) + 10px));
  --page-pad-right: max(14px, calc(var(--ggz-safe-right) + 10px));
  --page-pad-bottom: max(18px, calc(var(--ggz-safe-bottom) + 14px));
  --page-pad-left: max(14px, calc(var(--ggz-safe-left) + 10px));
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-right) var(--page-pad-bottom)
    var(--page-pad-left);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 28px;
}
#ggz-shell {
  --bez-pad: clamp(42px, 4.6vw, 64px);
  --bez-top-band: clamp(38px, 3.4vw, 52px);
  --bez-bottom-band: clamp(36px, 3.3vw, 50px);
  --bez-radius: 8px;
  position: relative;
  box-sizing: border-box;
  width: min(
    calc(1500px + var(--bez-pad) * 2),
    calc(var(--ggz-vw) - var(--page-pad-left) - var(--page-pad-right)),
    calc(
      (
          (
              (
                var(--ggz-vh) - var(--page-pad-top) - var(--page-pad-bottom) -
                  var(--bez-top-band) - var(--bez-bottom-band)
              )
            ) *
            16 / 9
        ) +
        var(--bez-pad) * 2
    )
  );
  max-width: calc(var(--ggz-vw) - var(--page-pad-left) - var(--page-pad-right));
  max-height: calc(
    var(--ggz-vh) - var(--page-pad-top) - var(--page-pad-bottom)
  );
  margin: 0 auto;
  padding: var(--bez-top-band) var(--bez-pad) var(--bez-bottom-band);
  border-radius: var(--bez-radius);
  background:
    linear-gradient(
      90deg,
      rgba(255, 240, 138, 0.08) 0 1px,
      transparent 1px calc(100% - 1px),
      rgba(95, 232, 255, 0.08) calc(100% - 1px)
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.018) 10%,
      rgba(0, 0, 0, 0.2) 52%,
      rgba(255, 255, 255, 0.03)
    ),
    linear-gradient(180deg, #151923, #05070d 42%, #030408);
  border: 1px solid rgba(223, 235, 255, 0.18);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: visible;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

#ggz-shell::before,
#ggz-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
#ggz-shell::before {
  inset: 7px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 240, 138, 0.13) 0 10px,
      transparent 10px calc(100% - 10px),
      rgba(95, 232, 255, 0.12) calc(100% - 10px)
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0 1px,
      transparent 1px calc(100% - 1px),
      rgba(255, 255, 255, 0.08) calc(100% - 1px)
    );
  opacity: 0.36;
}
#ggz-shell::after {
  inset: calc(var(--bez-top-band) - 2px) calc(var(--bez-pad) - 2px)
    calc(var(--bez-bottom-band) - 2px);
  background:
    linear-gradient(
      90deg,
      rgba(255, 240, 138, 0.16) 0 4px,
      transparent 4px calc(100% - 4px),
      rgba(95, 232, 255, 0.15) calc(100% - 4px)
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0 1px,
      transparent 1px calc(100% - 1px),
      rgba(255, 255, 255, 0.12) calc(100% - 1px)
    );
  opacity: 0.2;
}
#ggz-bezpause {
  appearance: none;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 0;
  border: 1px solid rgba(255, 240, 138, 0.32);
  background: rgba(0, 0, 0, 0.18);
  color: #fff08a;
  font:
    900 10px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#ggz-bezpause:hover,
#ggz-bezpause:focus-visible {
  outline: none;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
}
@media (pointer: fine) {
  #ggz-bezpause {
    display: none !important;
  }
}
#ggz-shell.ggz-bezel-off #ggz-bezpause {
  display: none;
}
#ggz-shell.ggz-bezel-off {
  --bez-pad: clamp(4px, 0.8vw, 8px);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}
#ggz-shell.ggz-bezel-off::before,
#ggz-shell.ggz-bezel-off::after {
  opacity: 0;
}

/* main game styles - extracted from sb_v227_gold.html.txt */
#ggz-wrap,
#ggz-wrap * {
  box-sizing: border-box;
}
#ggz-wrap {
  cursor: auto;
  position: relative;
  isolation: isolate;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.075),
    0 0 0 2px rgba(0, 0, 0, 0.72);
  background: #0b0d12;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
#ggz-shell:has(#ggz-wrap.title) #ggz-hudwrap {
  display: none;
}
#ggz-wrap::before,
#ggz-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
#ggz-wrap::before {
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 18px 36px rgba(255, 255, 255, 0.03),
    inset 0 -20px 36px rgba(0, 0, 0, 0.18);
}
#ggz-wrap::after {
  z-index: 2;
  background: radial-gradient(
    110% 88% at 50% 8%,
    transparent 52%,
    rgba(0, 0, 0, 0.1) 78%,
    rgba(0, 0, 0, 0.2) 100%
  );
  opacity: 0.85;
}
#ggz-shell.ggz-bezel-off #ggz-wrap {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}
#ggz-shell.ggz-bezel-off #ggz-wrap::before {
  opacity: 0.45;
}
#ggz-shell.ggz-bezel-off #ggz-wrap::after {
  opacity: 0.28;
}
#ggz-c {
  position: relative;
  z-index: 1;
}
#ggz-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.3;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 4px
    ),
    radial-gradient(
      900px 220px at 50% -8%,
      rgba(255, 240, 138, 0.03),
      transparent 56%
    );
}
#ggz-hudwrap,
#ggz-flash {
  position: absolute;
  z-index: 5;
}
#ggz-hudwrap {
  inset: 0;
  color: #fff;
}
#ggz-hudwrap b {
  color: #fff !important;
}
#ggz-hudtop {
  position: absolute;
  left: calc(var(--bez-pad) + 10px);
  right: calc(var(--bez-pad) + 10px);
  top: 8px;
  height: calc(var(--bez-top-band) - 16px);
  min-height: 24px;
  display: grid;
  align-items: center;
  padding: 0 18px;
  background: linear-gradient(
    90deg,
    rgba(255, 240, 138, 0.12),
    rgba(5, 9, 17, 0.76) 12%,
    rgba(5, 9, 17, 0.76) 88%,
    rgba(95, 232, 255, 0.12)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  border-bottom: 1px solid rgba(255, 240, 138, 0.34);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
}
#ggz-hudline {
  display: grid;
  grid-template-columns: 1fr minmax(190px, 1.2fr) 1fr;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.94);
}
#ggz-hudline .sep {
  display: none;
}
.ggz-hudstat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.ggz-hudstat.score {
  justify-content: center;
}
.ggz-hudstat:last-child {
  justify-content: flex-end;
}
.ggz-hudstat em {
  display: none;
}
.ggz-hudstat b {
  font:
    900 clamp(13px, 1.35vw, 18px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ggz-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ggz-powerstack {
  position: absolute;
  top: calc(var(--bez-top-band) + 14px);
  display: grid;
  gap: 8px;
  align-items: start;
}
.ggz-powerstack.danger {
  left: 12px;
  transform: none;
}
.ggz-powerstack.boost {
  right: 12px;
  transform: none;
  justify-items: end;
}
.ggz-orbind {
  --orb-rgb: 201, 210, 223;
  --orb-p: 100%;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 128px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(var(--orb-rgb), 0.42);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(4, 8, 16, 0.74);
  color: #fff;
  font:
    900 12px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.1em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 0 10px rgba(var(--orb-rgb), 0.12);
}
.ggz-orbind:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--orb-p);
  background: linear-gradient(
    90deg,
    rgba(var(--orb-rgb), 0.72),
    rgba(var(--orb-rgb), 0.24)
  );
  box-shadow: 0 0 10px rgba(var(--orb-rgb), 0.18);
  transition: width 0.18s linear;
}
.ggz-orbind:after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.ggz-orbind b {
  position: relative;
  z-index: 1;
  color: #fff !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.7),
    0 0 8px rgba(var(--orb-rgb), 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ggz-orbind.neg {
  border-color: rgba(255, 90, 90, 0.48);
  background: rgba(12, 4, 8, 0.78);
}
.ggz-synergy {
  display: grid;
  justify-items: end;
  gap: 5px;
  padding-right: 4px;
  margin: 0 0 4px;
  color: #c98cff;
}
.ggz-synergy em {
  font-style: normal;
  font:
    900 9px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.2em;
  color: #efd7ff;
}
.ggz-synergy div {
  display: grid;
  place-items: center;
  min-width: 128px;
  height: 24px;
  padding: 0 10px;
  border-left: 1px solid rgba(201, 140, 255, 0.58);
  border-top: 1px solid rgba(201, 140, 255, 0.28);
  border-bottom: 1px solid rgba(201, 140, 255, 0.28);
  color: #fff;
  font:
    900 10px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.1em;
}
.ggz-syn-3 em {
  color: #fff;
}
.ggz-syn-4 em,
.ggz-syn-5 em {
  color: #fff08a;
}
.ggz-standby {
  position: absolute;
  left: 50%;
  top: calc(var(--bez-top-band) * 0.5);
  transform: translate(-50%, -50%);
  font:
    900 9px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.22em;
  color: rgba(219, 231, 255, 0.54);
}
#ggz-combo {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 7px !important;
  margin-left: -45px;
  transform-origin: 50% 100%;
  min-width: 90px;
  padding: 0 10px 5px;
  border-left: 1px solid rgba(255, 240, 138, 0.42);
  border-right: 1px solid rgba(95, 232, 255, 0.26);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.28),
    rgba(0, 0, 0, 0)
  );
  font-size: 34px !important;
  line-height: 0.9 !important;
  text-align: center;
}
#ggz-combo:before {
  content: "MULTIPLIER";
  display: block;
  margin-bottom: 4px;
  color: rgba(219, 231, 255, 0.76);
  font:
    900 9px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.2em;
  -webkit-text-fill-color: currentColor;
  background: none;
}
#ggz-flash.ggz-pop {
  animation: ggzPop 2s ease-out forwards;
}
#ggz-flash.ggz-warn {
  animation: ggzWarn 2s ease-out forwards;
}
#ggz-combo[data-t="0"] {
  color: #fff !important;
  background: linear-gradient(180deg, #fff 0%, #f1f1f1 55%, #cfd5e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#ggz-combo[data-t="1"] {
  color: #ffe600 !important;
  background: linear-gradient(180deg, #fff7a8 0%, #ffe600 52%, #d8aa00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(255, 230, 0, 0.4) !important;
}
#ggz-combo[data-t="2"] {
  color: #ff8a00 !important;
  background: linear-gradient(180deg, #ffd39b 0%, #ff8a00 52%, #c75a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255, 138, 0, 0.5) !important;
}
#ggz-combo[data-t="3"] {
  color: #ff3b30 !important;
  background: linear-gradient(180deg, #ffc0bb 0%, #ff584d 48%, #bf1f18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(255, 59, 48, 0.58) !important;
}
#ggz-combo[data-t="4"] {
  color: #ff2d55 !important;
  background: linear-gradient(180deg, #ffb4c8 0%, #ff2d55 48%, #b10032 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255, 45, 85, 0.72) !important;
}
#ggz-combo[data-t] {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.34),
    rgba(0, 0, 0, 0.08)
  ) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
@keyframes ggzPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86) skewX(-6deg);
    filter: contrast(1.8);
  }
  6% {
    opacity: 0.8;
    transform: translate(calc(-50% - 10px), -50%) scale(1.03) skewX(5deg);
  }
  11% {
    opacity: 0.35;
    transform: translate(calc(-50% + 7px), -50%) scale(0.98) skewX(-3deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
    filter: contrast(1.15);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
    filter: contrast(1);
  }
}
@keyframes ggzWarn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.02);
  }
  26% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  34% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  42% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
  85% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}
#ggz-splash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000 center/cover no-repeat url(art/3.png);
  opacity: 0;
  transform: scale(1.15);
  pointer-events: none;
}
#ggz-wrap.title.ggz-title-on #ggz-splash {
  opacity: 1;
  animation: ggzZoom 11s linear forwards;
}
#ggz-wrap.go #ggz-splash,
#ggz-wrap.ggz-starting #ggz-splash {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
@keyframes ggzZoom {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
#ggz-gate {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  font-family: "Oxanium", system-ui;
  text-align: center;
  padding: 28px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 1.2s ease;
}
#ggz-gate.off {
  opacity: 0;
  pointer-events: none;
}
#ggz-gatecopy {
  max-width: 760px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 800;
  transform: translateY(8vh);
}
#ggz-gateok {
  margin-top: 24vh;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  text-transform: none;
}
#ggz-startprompt {
  position: absolute;
  left: 50%;
  top: 82%;
  z-index: 6;
  transform: translateX(-50%);
  font:
    700 20px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  color: #fff08a;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255, 240, 138, 0.18);
}
#ggz-wrap.title.ggz-title-on #ggz-startprompt {
  opacity: 1;
  animation: ggzBlink 1.5s ease-in-out infinite;
}
#ggz-wrap.go #ggz-startprompt,
#ggz-wrap.paused #ggz-startprompt {
  opacity: 0 !important;
  animation: none !important;
}
/* Title menu and how-to-play panels */
#ggz-titlemenu {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  place-content: center;
  place-items: center;
  gap: 12px;
  grid-template-columns: min(900px, 94vw);
  font-family: "Oxanium", system-ui;
  background:
    radial-gradient(
      740px 300px at 50% 56%,
      rgba(95, 232, 255, 0.08),
      transparent 58%
    ),
    linear-gradient(180deg, #020309, #07101d 54%, #020306);
  overflow: hidden;
  cursor: auto;
}
#ggz-wrap.ggz-play-cursor,
#ggz-wrap.ggz-play-cursor *,
#ggz-shell:has(#ggz-wrap.ggz-play-cursor),
#ggz-shell:has(#ggz-wrap.ggz-play-cursor) * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Ccircle cx='3.5' cy='3.5' r='2' fill='white'/%3E%3C/svg%3E")
      3 3,
    crosshair;
}
#ggz-titlemenu.ggz-how-on {
  place-content: stretch;
  place-items: stretch;
  grid-template-columns: 1fr;
  padding: 18px;
  box-sizing: border-box;
}
#ggz-titlemenu:before,
#ggz-titlemenu:after {
  display: none;
}
#ggz-menustars {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#ggz-wrap.title.ggz-title-on.ggz-menu-on #ggz-titlemenu {
  display: grid;
}
#ggz-wrap.title.ggz-menu-on #ggz-splash {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
#ggz-wrap.title.ggz-menu-on #ggz-startflash,
#ggz-wrap.go #ggz-startflash,
#ggz-wrap.ggz-starting #ggz-startflash {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
#ggz-wrap.go #ggz-titlemenu,
#ggz-wrap.paused #ggz-titlemenu,
#ggz-wrap.ggz-starting #ggz-titlemenu {
  display: none !important;
}
.ggz-titlebtn {
  appearance: none;
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  border: 1px solid rgba(255, 240, 138, 0.36);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(12, 14, 22, 0.78)
  );
  color: #fff08a;
  border-radius: 14px;
  padding: 13px 18px;
  font:
    900 16px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 10px rgba(255, 240, 138, 0.2);
}
.ggz-titlebtn:hover,
.ggz-titlebtn:focus-visible {
  outline: none;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(255, 240, 138, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-shadow: 0 0 14px rgba(255, 240, 138, 0.5);
}
.ggz-titlebtn.minor {
  margin-top: 16px;
  border-color: rgba(255, 255, 255, 0.16);
  color: #dbe7ff;
  font-size: 13px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(12, 14, 22, 0.64)
  );
}
#ggz-menutitle {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: #ffe600;
  font:
    900 clamp(44px, 8vw, 92px) / 0.88 "Oxanium",
    system-ui;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 4px 0 #f05a00,
    0 8px 0 #7a1600,
    0 0 22px rgba(255, 230, 0, 0.28),
    0 0 44px rgba(255, 72, 0, 0.22);
  white-space: nowrap;
}
#ggz-menuaudio {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  display: grid;
  gap: 0;
  margin: 2px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 240, 138, 0.36);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(12, 14, 22, 0.78)
  );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  text-shadow: 0 0 10px rgba(255, 240, 138, 0.2);
}
#ggz-menuaudio summary {
  min-height: 42px;
  list-style: none;
  cursor: pointer;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff08a;
  font:
    900 16px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
#ggz-menuaudio summary::-webkit-details-marker {
  display: none;
}
#ggz-menuaudio summary:after {
  content: " +";
  color: #dbe7ff;
}
#ggz-menuaudio[open] summary:after {
  content: " -";
}
#ggz-menuaudio:hover,
#ggz-menuaudio:focus-within {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(255, 240, 138, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#ggz-menuaudio:hover summary,
#ggz-menuaudio:focus-within summary {
  color: #fff;
}
.ggz-menuaudiolabel {
  display: grid;
  gap: 6px;
  text-align: left;
}
#ggz-menuaudio .ggz-menuaudiolabel {
  padding: 0 14px;
  background: rgba(2, 4, 10, 0.36);
}
#ggz-menuaudio .ggz-menuaudiolabel:first-of-type {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 240, 138, 0.14);
}
#ggz-menuaudio .ggz-menuaudiolabel:last-child {
  padding-bottom: 13px;
}
.ggz-menuaudiotop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font:
    800 11px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.13em;
  color: #c8d5ed;
  text-transform: uppercase;
}
.ggz-menuaudiotop b {
  color: #fff08a;
  font-weight: 900;
}
.ggz-menuaudiorange {
  width: 100%;
  accent-color: #fff08a;
  cursor: pointer;
  touch-action: pan-x;
}
#ggz-how {
  position: relative;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 18px;
  border: 1px solid rgba(255, 240, 138, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(
      860px 260px at 50% -22%,
      rgba(255, 230, 0, 0.13),
      transparent 58%
    ),
    linear-gradient(180deg, rgba(8, 12, 24, 0.95), rgba(2, 4, 10, 0.97));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #eef4ff;
  overflow: hidden;
}
#ggz-titlemenu.ggz-how-on > #ggz-menutitle,
#ggz-titlemenu.ggz-how-on > .ggz-titlebtn,
#ggz-titlemenu.ggz-how-on > #ggz-menuaudio {
  display: none;
}
#ggz-titlemenu.ggz-how-on #ggz-how {
  display: grid;
  grid-template-rows: auto auto 1fr;
}
#ggz-howhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #ffe600;
  font:
    900 32px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  text-shadow:
    0 4px 0 #7a1600,
    0 0 20px rgba(255, 230, 0, 0.3);
}
.ggz-howback,
#ggz-howtabs button {
  appearance: none;
  border: 1px solid rgba(255, 240, 138, 0.32);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(12, 14, 22, 0.78)
  );
  color: #fff08a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font:
    900 12px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.ggz-howback {
  padding: 10px 14px;
}
#ggz-howtabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
#ggz-howtabs button {
  padding: 10px 10px;
  font-size: 13px;
}
#ggz-how[data-tab="basics"] [data-howtab="basics"],
#ggz-how[data-tab="powerups"] [data-howtab="powerups"],
#ggz-how[data-tab="advanced"] [data-howtab="advanced"],
.ggz-howback:hover,
.ggz-howback:focus-visible,
#ggz-howtabs button:hover,
#ggz-howtabs button:focus-visible {
  outline: none;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 16px rgba(255, 240, 138, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ggz-howpage {
  display: none;
  min-height: 0;
}
#ggz-how[data-tab="basics"] [data-page="basics"],
#ggz-how[data-tab="powerups"] [data-page="powerups"],
#ggz-how[data-tab="advanced"] [data-page="advanced"] {
  display: block;
}
.ggz-cardgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 100%;
}
.ggz-cardgrid > div,
.ggz-powergroups > div,
.ggz-advanced p {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ggz-cardgrid > div {
  padding: 20px;
}
#ggz-how h3 {
  margin: 0 0 12px;
  color: #fff08a;
  font:
    900 16px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#ggz-how p {
  margin: 0;
  color: #eef4ff;
  font:
    800 20px/1.32 "Oxanium",
    system-ui;
}
.ggz-controls {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 11px 16px;
  margin: 0;
  font:
    800 17px/1.16 "Oxanium",
    system-ui;
}
.ggz-controls dt {
  color: #fff08a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ggz-controls dd {
  margin: 0;
  color: #fff;
}
.ggz-powergroups {
  display: grid;
  grid-template-columns: 1.28fr 0.9fr;
  gap: 14px;
  height: 100%;
  min-height: 0;
}
.ggz-powergroups > div {
  padding: 12px;
}
.ggz-pu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ggz-powergroups > div:first-child .ggz-pu-grid {
  grid-template-columns: repeat(3, 1fr);
}
.ggz-pu-grid span {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.055);
}
.ggz-orb {
  grid-row: 1/3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: center;
}
.ggz-orb canvas {
  display: block;
  width: 46px;
  height: 46px;
}
.ggz-orb.coin.silver,
.ggz-orb.coin.gold {
  background: none;
}
.ggz-pu-grid em {
  font-style: normal;
  color: #fff;
  font:
    900 13px/1.08 "Oxanium",
    system-ui;
}
.ggz-pu-grid small {
  color: #b7c6e4;
  font:
    800 11px/1.18 "Oxanium",
    system-ui;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}
.ggz-pu-grid.danger .ggz-orb {
  box-shadow: none;
}
.ggz-pu-grid.special {
  grid-template-columns: repeat(2, 1fr);
}
.ggz-advanced {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  height: 100%;
}
.ggz-advanced p {
  margin: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 0.72fr 1.45fr;
  gap: 14px;
  align-items: center;
}
.ggz-advanced b {
  color: #fff08a;
  font:
    900 14px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ggz-advanced span {
  color: #fff;
  font:
    800 14px/1.24 "Oxanium",
    system-ui;
}
#ggz-copyright {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  color: rgba(219, 231, 255, 0.64);
  font:
    700 10px/1.2 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: none;
  pointer-events: none;
}
#ggz-wrap.title.ggz-menu-on #ggz-startprompt {
  display: none;
}
@keyframes ggzBlink {
  50% {
    opacity: 0.18;
  }
}
#ggz-startflash {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#ggz-startflash.on {
  animation: ggzStartFlash 0.62s linear;
}
@keyframes ggzStartFlash {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 0.96;
  }
  16% {
    opacity: 0;
  }
  32% {
    opacity: 0.92;
  }
  44% {
    opacity: 0;
  }
  60% {
    opacity: 0.88;
  }
  74% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#ggz-wrap.title,
#ggz-wrap.title *,
#ggz-wrap.paused,
#ggz-wrap.paused *,
#sbhs-root,
#sbhs-root * {
  cursor: auto;
}
.ggz-titlebtn,
.ggz-howback,
#ggz-howtabs button,
.sbhs-btn,
#ggz-gate,
#ggz-gate *,
#ggz-menu-music,
#ggz-menu-sfx,
#ggz-music,
#ggz-sfx,
#ggz-pmenu button {
  cursor: pointer;
}
#ggz-pmenu {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  display: none;
  transform: translate(-50%, -50%);
  width: min(420px, 88vw);
  max-height: min(84vh, 560px);
  overflow: auto;
  padding: 18px 18px 16px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(18, 22, 34, 0.96),
    rgba(8, 10, 18, 0.97)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#ggz-wrap.paused #ggz-pmenu {
  display: block;
}
#ggz-resume-confirm,
#ggz-ready-countdown {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 80;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: "Oxanium", system-ui;
  font-weight: 900;
}
#ggz-wrap.paused[data-resume-stage="confirm"] #ggz-pmenu,
#ggz-wrap.paused[data-resume-stage="countdown"] #ggz-pmenu {
  display: none;
}
#ggz-wrap.paused[data-resume-stage="confirm"] #ggz-resume-confirm {
  display: grid;
  gap: 22px;
  min-width: 300px;
  padding: 28px 34px;
  color: #fff;
  background: rgba(5, 8, 16, 0.94);
  border: 2px solid rgba(255, 255, 255, 0.72);
}
#ggz-wrap.paused[data-resume-stage="countdown"] #ggz-ready-countdown {
  display: grid;
  gap: 4px;
  color: #fff;
  text-shadow: 0 3px 0 #000;
}
#ggz-ready-countdown span { font-size: 28px; }
#ggz-ready-countdown b { font-size: 112px; line-height: 1; }
#ggz-pmt {
  font:
    800 26px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
  text-align: center;
  color: #fff08a;
}
#ggz-pml,
#ggz-pmc {
  display: grid;
  gap: 10px;
}
#ggz-pmc {
  display: none;
  margin-bottom: 10px;
}
#ggz-pmenu[data-ask] #ggz-pml {
  display: none;
}
#ggz-pmenu[data-ask] #ggz-pmc {
  display: grid;
}
.ggz-pmb {
  appearance: none;
  border: 0;
  background: none;
  color: #fff;
  padding: 9px 16px;
  font:
    700 18px/1.3 "Oxanium",
    system-ui;
  cursor: pointer;
  text-align: center;
  justify-self: center;
}
.ggz-pmb.r {
  margin-top: 10px;
}
.ggz-pmb:hover,
.ggz-pmb:focus-visible {
  color: #ffe600;
  outline: none;
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.28);
}
.ggz-pmq {
  font:
    700 20px/1.2 "Oxanium",
    system-ui;
  text-align: center;
  color: #fff08a;
  margin: 2px 0 8px;
}
#ggz-audioctl {
  margin-top: 14px;
  display: none;
  gap: 10px;
  text-align: left;
}
#ggz-pmenu[data-audio="open"] #ggz-audioctl {
  display: grid;
}
#ggz-pmenu[data-ask] #ggz-audioctl {
  display: none;
}
.ggz-audiolabel {
  display: grid;
  gap: 6px;
  text-align: left;
}
.ggz-audiotop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font:
    700 12px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  color: #c8d5ed;
  text-transform: uppercase;
}
.ggz-audiotop b {
  color: #fff;
  font-weight: 800;
}
.ggz-audiorange {
  width: 100%;
  accent-color: #fff08a;
}
#ggz-uiopts {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.ggz-optbtn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  color: #dbe7ff;
  border-radius: 14px;
  padding: 12px 14px;
  font:
    800 13px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ggz-optbtn:hover,
.ggz-optbtn:focus-visible {
  outline: none;
  color: #fff08a;
  border-color: rgba(255, 240, 138, 0.26);
  text-shadow: 0 0 8px rgba(255, 240, 138, 0.18);
}
.ggz-optbtn[aria-pressed="false"] {
  color: #a7b8d4;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.015)
  );
  border-color: rgba(255, 255, 255, 0.08);
}
#ggz-status {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 8;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 6px;
  pointer-events: none;
  text-align: center;
  font-family: "Oxanium", system-ui;
}
#ggz-status b {
  display: none;
  padding: 8px 18px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.34),
    rgba(0, 0, 0, 0)
  );
  font:
    900 28px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  animation: ggzPulse 1s ease-in-out infinite;
}
#ggz-wrap.gg-link #ggz-linkfx {
  display: block;
  color: #aef4c2;
}
#ggz-wrap.gg-syn #ggz-synfx {
  display: block;
  color: #c98cff;
}
#ggz-wrap.paused #ggz-status {
  display: none;
}
@keyframes ggzPulse {
  50% {
    transform: scale(1.06);
    opacity: 0.86;
  }
}
#ggz-mpause {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 9;
  display: none;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font:
    700 12px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  border-radius: 12px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#ggz-shell.ggz-bezel-off #ggz-wrap.mob.go:not(.paused) #ggz-mpause {
  display: block;
}
@media (max-width: 700px) {
  #ggz-shell {
    --bez-pad: clamp(10px, 2.2vw, 16px);
    --bez-top-band: clamp(14px, 1.8vw, 18px);
    --bez-radius: clamp(24px, 4vw, 34px);
  }
  #ggz-flash {
    font-size: 34px !important;
  }
  #ggz-gate {
    justify-content: center;
    padding: 24px;
  }
  #ggz-gatecopy {
    max-width: 92%;
    font-size: 19px;
    line-height: 1.35;
    transform: none;
  }
  #ggz-gateok {
    margin-top: 18px;
    font-size: 19px;
  }
  #ggz-startprompt {
    top: 84%;
    font-size: 18px;
    white-space: nowrap;
  }
  #ggz-pmenu {
    width: min(96vw, 420px);
    max-height: min(88vh, 640px);
    padding: 16px 14px 14px;
  }
  #ggz-pmt {
    font-size: 22px;
    margin-bottom: 12px;
  }
  #ggz-pml,
  #ggz-pmc {
    gap: 8px;
  }
  .ggz-pmb {
    font-size: 16px;
    line-height: 1.2;
    padding: 9px 10px;
  }
  .ggz-pmq {
    font-size: 17px;
  }
  #ggz-audioctl {
    margin-top: 12px;
    gap: 8px;
  }
  .ggz-audiotop {
    font-size: 11px;
  }
  .ggz-status {
    top: 86px;
  }
  #ggz-status b {
    font-size: 20px;
  }
  #ggz-hudwrap > div {
    font-size: 15px !important;
    padding: 10px 20px !important;
  }
  #ggz-combo {
    top: 62px !important;
    font-size: 32px !important;
  }
}
@media (max-width: 700px) {
  #ggz-hudtop {
    min-width: 0;
    width: min(90vw, 560px);
    padding: 10px 14px 11px;
  }
  #ggz-hudline {
    font-size: 13px;
    gap: 7px;
  }
  #ggz-badges {
    gap: 5px;
    max-width: 88vw;
  }
  .ggz-badge {
    font-size: 10px;
    padding: 4px 7px;
  }
}
@media (max-width: 540px) {
  #ggz-shell {
    --bez-pad: 8px;
    --bez-top-band: 12px;
    --bez-radius: 22px;
  }
  #ggz-bezpause {
    left: calc(var(--bez-pad) + 8px);
    right: calc(var(--bez-pad) + 8px);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
}
@media (orientation: portrait) and (pointer: coarse) {
  #ggz-shell {
    --bez-pad: 8px;
    --bez-top-band: 10px;
    --bez-radius: 22px;
    width: min(
      calc(var(--ggz-vw) - var(--page-pad-left) - var(--page-pad-right)),
      calc(
        (
            (
                (
                  var(--ggz-vh) - var(--page-pad-top) - var(--page-pad-bottom) -
                    var(--bez-top-band) - var(--bez-bottom-band)
                )
              ) *
              16 / 9
          ) +
          var(--bez-pad) * 2
      )
    );
  }
  #ggz-shell::after {
    opacity: 0.1;
  }
  #ggz-bezpause {
    height: calc(var(--bez-top-band) + 8px);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}
@media (pointer: fine) {
  #ggz-mpause {
    display: none !important;
  }
}
@media (max-width: 700px) {
  #ggz-hudwrap > #ggz-hudtop {
    left: 10px;
    right: 10px;
    width: auto !important;
    min-width: 0;
    height: 30px;
    padding: 0 10px !important;
  }
  #ggz-hudwrap > #ggz-badges {
    padding: 0 !important;
    font-size: inherit !important;
  }
  .ggz-hudstat em {
    font-size: 8px;
  }
  .ggz-hudstat b {
    font-size: 12px;
  }
  #ggz-hudline {
    grid-template-columns: 0.8fr 1.2fr 0.8fr;
    gap: 7px;
  }
  .ggz-powerstack {
    top: 46px;
    gap: 6px;
  }
  .ggz-powerstack.danger {
    left: 8px;
  }
  .ggz-powerstack.boost {
    right: 8px;
  }
  .ggz-orbind {
    width: 30px;
    height: 30px;
    font-size: 9px;
  }
  .ggz-synergy i {
    width: 18px;
    height: 18px;
    font-size: 7px;
  }
  #ggz-combo {
    left: auto !important;
    right: 10px !important;
    top: auto !important;
    bottom: 10px !important;
    min-width: 72px;
    padding: 8px 9px 7px 13px !important;
    font-size: 28px !important;
  }
  #ggz-status {
    top: 42%;
  }
  #ggz-status b {
    font-size: 20px;
  }
}
@media (max-width: 700px) {
  #ggz-shell {
    --bez-pad: clamp(34px, 7vw, 46px);
    --bez-top-band: 34px;
    --bez-bottom-band: 34px;
    --bez-radius: 6px;
  }
  #ggz-hudwrap > #ggz-hudtop {
    left: calc(var(--bez-pad) + 6px);
    right: calc(var(--bez-pad) + 6px);
    top: 6px;
    height: 22px;
    min-height: 22px;
    padding: 0 8px !important;
  }
  #ggz-hudline {
    grid-template-columns: 0.8fr 1.15fr 0.8fr;
    gap: 6px;
  }
  .ggz-hudstat b {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .ggz-powerstack {
    top: calc(var(--bez-top-band) + 12px);
    gap: 5px;
  }
  .ggz-powerstack.danger {
    left: calc(var(--bez-pad) * 0.5);
    transform: translateX(-50%);
  }
  .ggz-powerstack.boost {
    right: calc(var(--bez-pad) * 0.5);
    transform: translateX(50%);
  }
  .ggz-orbind {
    width: 28px;
    height: 28px;
    font-size: 8px;
  }
  .ggz-synergy {
    gap: 4px;
  }
  .ggz-synergy em {
    font-size: 7px;
    letter-spacing: 0.12em;
  }
  .ggz-synergy i {
    width: 17px;
    height: 17px;
    font-size: 6px;
  }
  #ggz-combo {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 5px !important;
    margin-left: -36px;
    min-width: 72px;
    padding: 0 7px 4px !important;
    font-size: 25px !important;
    text-align: center;
  }
  #ggz-combo:before {
    font-size: 7px;
    margin-bottom: 2px;
  }
}
@media (max-width: 540px) {
  #ggz-shell {
    --bez-pad: 30px;
    --bez-top-band: 30px;
    --bez-bottom-band: 30px;
    --bez-radius: 5px;
  }
  #ggz-bezpause {
    left: 6px;
    top: 6px;
    height: 20px;
    padding: 0 7px;
    font-size: 8px;
    letter-spacing: 0.12em;
  }
  .ggz-orbind {
    width: 24px;
    height: 24px;
    font-size: 7px;
  }
  .ggz-powerstack {
    gap: 4px;
  }
  .ggz-synergy {
    display: none;
  }
  #ggz-hudwrap > #ggz-hudtop {
    left: calc(var(--bez-pad) + 4px);
    right: calc(var(--bez-pad) + 4px);
    top: 5px;
    height: 20px;
  }
  .ggz-hudstat b {
    font-size: 10px;
  }
  #ggz-combo {
    bottom: 4px !important;
    font-size: 22px !important;
  }
}

/* high score overlay */
#sbhs-root {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
  font-family: "Oxanium", system-ui;
  background: rgba(5, 8, 14, 0.72);
  overflow: hidden;
  contain: paint;
  clip-path: inset(0 round 2px);
}
#sbhs-root.show {
  display: flex;
}
#sbhs-panel {
  width: min(720px, 94%);
  max-height: 88%;
  overflow: auto;
  padding: 20px;
  border-radius: 22px;
  position: relative;
  background:
    radial-gradient(
      900px 220px at 50% -12%,
      rgba(255, 230, 0, 0.08),
      transparent 56%
    ),
    linear-gradient(180deg, rgba(8, 10, 14, 0.96), rgba(2, 3, 6, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#sbhs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
#sbhs-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #fff08a;
  text-shadow: 0 0 18px rgba(255, 240, 138, 0.12);
}
#sbhs-listhead {
  display: grid;
  grid-template-columns: 58px 1.2fr 1fr 90px;
  gap: 10px;
  align-items: center;
  padding: 0 12px 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8ea3cb;
  position: relative;
  z-index: 1;
}
#sbhs-list {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.sbhs-row {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.sbhs-row.top {
  background: linear-gradient(
    180deg,
    rgba(255, 240, 138, 0.09),
    rgba(255, 255, 255, 0.04)
  );
  border-color: rgba(255, 240, 138, 0.18);
  box-shadow: 0 0 18px rgba(255, 240, 138, 0.06);
}
.sbhs-main {
  display: grid;
  grid-template-columns: 58px 1.15fr 1fr 90px;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  line-height: 1.05;
}
.rk {
  font-weight: 900;
  color: #ffe600;
}
.nm {
  font-weight: 800;
  color: #eef4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc {
  font-weight: 900;
  color: #fff;
  text-align: right;
}
.lv {
  font-weight: 800;
  color: #c8d5ed;
  text-align: right;
}
#sbhs-screen-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
#sbhs-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 8, 14, 0.72);
  z-index: 9999;
  overflow: hidden;
  contain: paint;
}
#sbhs-modal.show {
  display: flex;
}
#sbhs-pop {
  box-sizing: border-box;
  width: min(680px, calc(100vw - 36px));
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(
      1200px 300px at 50% -20%,
      rgba(255, 230, 0, 0.16),
      transparent 50%
    ),
    linear-gradient(180deg, rgba(20, 24, 36, 0.98), rgba(10, 12, 18, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #fff;
}
#sbhs-pop h2 {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1;
  color: #ffe600;
}
#sbhs-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 16px;
}
#sbhs-mini b {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8ea3cb;
  margin-bottom: 7px;
}
#sbhs-mini span {
  display: block;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 22px;
  font-weight: 900;
}
#sbhs-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  outline: none;
  color: #fff;
  font:
    800 20px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.03em;
}
#sbhs-input::placeholder {
  color: rgba(219, 231, 255, 0.48);
}
#sbhs-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.sbhs-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 13px 18px;
  border-radius: 16px;
  font:
    900 14px/1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sbhs-btn.alt {
  background: rgba(255, 255, 255, 0.07);
  color: #dbe7ff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sbhs-btn.main {
  background: linear-gradient(180deg, #fff08a, #ffd000);
  color: #141822;
  box-shadow: 0 12px 28px rgba(255, 208, 0, 0.22);
}
@media (max-width: 700px) {
  #sbhs-listhead,
  .sbhs-main {
    grid-template-columns: 46px 1.05fr 0.9fr 70px;
    gap: 8px;
  }
  #sbhs-title {
    font-size: 24px;
  }
  #sbhs-mini {
    grid-template-columns: 1fr;
  }
  #sbhs-root {
    padding: 14px;
  }
  #sbhs-panel {
    padding: 16px;
  }
}

/* V247 layout lock: cabinet presentation is the only supported runtime layout. */
html,
body {
  overflow-x: hidden;
}
.sb-page {
  width: 100%;
  max-width: 1600px;
  box-sizing: border-box;
  margin-inline: auto;
  justify-items: center;
}
#ggz-shell {
  width: min(
    100%,
    1600px,
    calc(
      (
          (
              (
                var(--ggz-vh) - var(--page-pad-top) - var(--page-pad-bottom) -
                  var(--bez-top-band) - var(--bez-bottom-band)
              )
            ) *
            16 / 9
        ) +
        var(--bez-pad) * 2
    )
  ) !important;
  margin-inline: auto !important;
  transform: none !important;
}
#ggz-uiopts,
#ggz-bezeltoggle {
  display: none !important;
}
#ggz-shell.ggz-bezel-off {
  --bez-pad: clamp(42px, 4.6vw, 64px);
  background:
    linear-gradient(
      90deg,
      rgba(255, 240, 138, 0.08) 0 1px,
      transparent 1px calc(100% - 1px),
      rgba(95, 232, 255, 0.08) calc(100% - 1px)
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.018) 10%,
      rgba(0, 0, 0, 0.2) 52%,
      rgba(255, 255, 255, 0.03)
    ),
    linear-gradient(180deg, #151923, #05070d 42%, #030408);
  border-color: rgba(223, 235, 255, 0.18);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#ggz-shell.ggz-bezel-off::before,
#ggz-shell.ggz-bezel-off::after {
  opacity: inherit;
}
#ggz-combo {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(4px, 0.75vw, 10px) !important;
  margin-left: 0 !important;
  min-width: clamp(88px, 9vw, 142px) !important;
  max-width: min(220px, 42vw) !important;
  padding: 2px 14px 7px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 240, 138, 0.42);
  border-right: 1px solid rgba(95, 232, 255, 0.26);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 0 4px 4px;
  background:
    radial-gradient(
      120px 28px at 50% 100%,
      rgba(255, 240, 138, 0.18),
      transparent 70%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.42),
      rgba(0, 0, 0, 0)
    ) !important;
  line-height: 0.92 !important;
  text-align: center !important;
  transform: translateX(-50%) scale(1);
  transform-origin: 50% 100%;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
#ggz-combo:before {
  font-size: clamp(7px, 0.7vw, 10px) !important;
  margin-bottom: 3px !important;
}
#ggz-hudwrap #ggz-combo {
  bottom: clamp(4px, 0.75vw, 10px) !important;
  max-width: min(220px, 42vw) !important;
}
/* Developer and performance overlays */
#ggz-perf {
  position: absolute;
  left: calc(var(--bez-pad) + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: none;
  padding: 8px 10px;
  border: 1px solid rgba(95, 232, 255, 0.28);
  background: rgba(2, 5, 10, 0.58);
  color: #dff8ff;
  font:
    800 11px/1.28 "Oxanium",
    Consolas,
    monospace;
  letter-spacing: 0.04em;
  white-space: pre;
  pointer-events: none;
  opacity: 0.78;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (max-width: 700px) {
  #ggz-shell {
    width: min(
      100%,
      calc(
        (
            (
                (
                  var(--ggz-vh) - var(--page-pad-top) - var(--page-pad-bottom) -
                    var(--bez-top-band) - var(--bez-bottom-band)
                )
              ) *
              16 / 9
          ) +
          var(--bez-pad) * 2
      )
    ) !important;
  }
  #ggz-combo {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 4px !important;
    margin-left: 0 !important;
    font-size: clamp(20px, 5.8vw, 25px) !important;
  }
  #ggz-perf {
    left: calc(var(--bez-pad) + 4px);
    top: 50%;
    bottom: auto;
    font-size: 9px;
    padding: 6px 7px;
  }
}

#ggz-pmenu,
#ggz-pmenu * {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#ggz-music,
#ggz-sfx {
  touch-action: pan-x;
}
#ggz-shell,
.sb-page,
#ggz-wrap,
#ggz-c,
#ggz-fx,
#ggz-status,
#ggz-hudwrap {
  -webkit-tap-highlight-color: transparent;
}

/* V245+ polish: keep live status UI inside the playfield, away from the bezel. */
#ggz-hudwrap .ggz-powerstack.danger {
  left: 12px !important;
  right: auto !important;
  transform: none !important;
}
#ggz-hudwrap .ggz-powerstack.boost {
  right: 12px !important;
  left: auto !important;
  transform: none !important;
}
#ggz-hudwrap #ggz-combo {
  max-width: min(180px, 40vw);
  overflow: hidden;
}
@media (max-width: 700px) {
  #ggz-hudwrap .ggz-powerstack {
    top: calc(var(--bez-top-band) + 10px) !important;
  }
  #ggz-hudwrap .ggz-powerstack.danger {
    left: 8px !important;
  }
  #ggz-hudwrap .ggz-powerstack.boost {
    right: 8px !important;
  }
  #ggz-hudwrap #ggz-combo {
    bottom: 6px !important;
    max-width: 120px;
  }
}
@media (max-width: 700px) {
  #ggz-titlemenu {
    grid-template-columns: min(700px, 92vw);
    gap: 10px;
  }
  #ggz-menutitle {
    font-size: clamp(38px, 12vw, 62px);
  }
  #ggz-menuaudio summary {
    padding: 10px 12px;
  }
  .ggz-titlebtn {
    width: min(330px, 100%);
    padding: 12px 14px;
    font-size: 15px;
  }
  .ggz-titlebtn.minor {
    font-size: 12px;
    margin-top: 14px;
  }
  #ggz-how {
    max-height: min(88vh, 480px);
    padding: 10px;
  }
  #ggz-howhead {
    font-size: 20px;
    margin-bottom: 8px;
  }
  #ggz-howtabs {
    gap: 6px;
    margin-bottom: 8px;
  }
  #ggz-howtabs button,
  .ggz-howback {
    font-size: 10px;
    padding: 8px 7px;
  }
  .ggz-cardgrid,
  .ggz-powergroups,
  .ggz-advanced {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  #ggz-how p {
    font-size: 13px;
    line-height: 1.28;
  }
  .ggz-controls {
    font-size: 11px;
    gap: 6px 8px;
  }
  .ggz-powergroups > div {
    padding: 8px;
  }
  .ggz-pu-grid,
  .ggz-powergroups > div:first-child .ggz-pu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  .ggz-pu-grid span {
    grid-template-columns: 24px 1fr;
    padding: 5px;
  }
  .ggz-orb,
  .ggz-orb canvas {
    width: 24px !important;
    height: 24px !important;
  }
  .ggz-pu-grid em {
    font-size: 10px;
  }
  .ggz-pu-grid small {
    font-size: 8px;
  }
  .ggz-advanced p {
    padding: 8px;
    grid-template-columns: 0.8fr 1.2fr;
  }
  .ggz-advanced b {
    font-size: 10px;
  }
  .ggz-advanced span {
    font-size: 11px;
  }
  #ggz-copyright {
    bottom: 8px;
    font-size: 9px;
  }
}

/* V264.12 temporary HUD breathing room before cabinet/DMD pass. */
#ggz-ui #ggz-hudtop,
#ggz-hudwrap > #ggz-hudtop {
  top: 8px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 3px 18px !important;
}
#ggz-ui #ggz-hudline,
#ggz-hudwrap #ggz-hudline {
  height: 100% !important;
  gap: 18px !important;
  align-items: center !important;
}
@media (max-width: 700px) {
  #ggz-ui #ggz-hudtop,
  #ggz-hudwrap > #ggz-hudtop {
    top: 6px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 2px 9px !important;
  }
  #ggz-ui #ggz-hudline,
  #ggz-hudwrap #ggz-hudline {
    gap: 8px !important;
  }
}

/* Final V247 override: keep combo locked to the bottom cabinet display after legacy rules. */
#ggz-hudwrap #ggz-combo,
#ggz-combo {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(4px, 0.75vw, 10px) !important;
  margin-left: 0 !important;
  max-width: min(220px, 42vw) !important;
  transform: translateX(-50%) scale(1);
}
@media (max-width: 700px) {
  #ggz-hudwrap #ggz-combo,
  #ggz-combo {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 4px !important;
    margin-left: 0 !important;
    max-width: min(170px, 44vw) !important;
  }
}

/* V264: fullscreen-first arcade presentation without the legacy cabinet shell. */
html,
body {
  background: #02040a;
}
.sb-page {
  min-height: 100dvh;
  align-content: center;
  background: #02040a;
}
#ggz-shell,
#ggz-shell.ggz-bezel-on,
#ggz-shell.ggz-bezel-off {
  --bez-pad: 0px !important;
  --bez-top-band: 0px !important;
  --bez-bottom-band: 0px !important;
  --bez-radius: 0px !important;
  width: min(100vw, calc(100dvh * 16 / 9)) !important;
  max-width: 100vw !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #02040a !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#ggz-shell::before,
#ggz-shell::after,
#ggz-fx,
#ggz-bezpause {
  display: none !important;
}
#ggz-wrap {
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(95, 232, 255, 0.1) !important;
}
#ggz-wrap::before {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  opacity: 0.55 !important;
}
#ggz-wrap::after {
  background: radial-gradient(
    110% 88% at 50% 50%,
    transparent 78%,
    rgba(0, 0, 0, 0.2) 100%
  ) !important;
  opacity: 0.45 !important;
}
#ggz-shell:fullscreen,
#ggz-shell:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  background: #000 !important;
}
#ggz-shell:fullscreen #ggz-wrap,
#ggz-shell:-webkit-full-screen #ggz-wrap {
  width: min(100vw, calc(100vh * 16 / 9)) !important;
  height: auto !important;
}
#ggz-status {
  left: auto !important;
  right: 14px !important;
  top: 52px !important;
  transform: none !important;
  z-index: 6 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
#ggz-status b {
  position: relative !important;
  display: none !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid currentColor !important;
  background: rgba(5, 12, 22, 0.62) !important;
  box-shadow: 0 0 12px currentColor !important;
  font-size: 0 !important;
  overflow: hidden !important;
  animation: ggzPulse 0.9s ease-in-out infinite !important;
}
#ggz-status b::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 11px;
  height: 4px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  transform: rotate(-28deg);
}
#ggz-wrap.gg-link #ggz-linkfx,
#ggz-wrap.gg-syn #ggz-synfx {
  display: block !important;
}
#ggz-wrap.gg-link #ggz-linkfx {
  left: auto !important;
  right: auto !important;
  top: auto !important;
  color: #aef4c2 !important;
}
#ggz-wrap.gg-syn #ggz-synfx {
  color: #c98cff !important;
}
@media (max-width: 700px) {
  #ggz-shell,
  #ggz-shell.ggz-bezel-on,
  #ggz-shell.ggz-bezel-off {
    width: 100vw !important;
  }
  #ggz-status {
    right: 8px !important;
    top: 48px !important;
  }
  #ggz-status b {
    width: 22px !important;
    height: 22px !important;
  }
}

/* V264.1: explicit engine-style viewport scaling. */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sb-page {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  overflow: hidden !important;
}
#ggz-shell,
#ggz-shell.ggz-bezel-on,
#ggz-shell.ggz-bezel-off {
  width: min(100vw, calc(100dvh * 16 / 9)) !important;
  height: min(100dvh, calc(100vw * 9 / 16)) !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  display: block !important;
  aspect-ratio: 16/9 !important;
}
#ggz-wrap {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16/9 !important;
  margin: 0 !important;
}
#ggz-shell:fullscreen,
#ggz-shell:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
}
#ggz-shell:fullscreen #ggz-wrap,
#ggz-shell:-webkit-full-screen #ggz-wrap {
  width: min(100vw, calc(100vh * 16 / 9)) !important;
  height: min(100vh, calc(100vw * 9 / 16)) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* V264.2: single shared origin for canvas, HUD, pointer mapping, and overlays. */
#ggz-shell,
#ggz-shell.ggz-bezel-on,
#ggz-shell.ggz-bezel-off {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
#ggz-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
}
#ggz-c,
#ggz-hudwrap,
#ggz-flash,
#ggz-status,
#ggz-pmenu,
#sbhs-root {
  box-sizing: border-box !important;
}
#ggz-c {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#ggz-hudwrap {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* V264.3: shell is the viewport, wrap is the canonical 16:9 game field. */
#ggz-shell,
#ggz-shell.ggz-bezel-on,
#ggz-shell.ggz-bezel-off {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #000 !important;
}
#ggz-wrap {
  position: relative !important;
  inset: auto !important;
  width: min(100vw, calc(100dvh * 16 / 9)) !important;
  height: min(100dvh, calc(100vw * 9 / 16)) !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  aspect-ratio: 16/9 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#ggz-c {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#ggz-hudwrap,
#ggz-flash,
#ggz-status {
  transform-origin: 0 0 !important;
}
#ggz-shell:fullscreen,
#ggz-shell:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  display: grid !important;
  place-items: center !important;
}
#ggz-shell:fullscreen #ggz-wrap,
#ggz-shell:-webkit-full-screen #ggz-wrap {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(100vw, calc(100vh * 16 / 9)) !important;
  height: min(100vh, calc(100vw * 9 / 16)) !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* V264.4: engine owns the canonical 1920x1080 layout; CSS only supplies the black viewport. */
#ggz-shell,
#ggz-shell.ggz-bezel-on,
#ggz-shell.ggz-bezel-off {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: block !important;
  overflow: hidden !important;
  background: #000 !important;
}
#ggz-wrap {
  position: absolute !important;
  inset: auto !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
}
#ggz-c {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: block !important;
}
#ggz-cabinet-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  display: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
}
#ggz-wrap.ggz-framed-session #ggz-cabinet-frame {
  display: block !important;
}
#ggz-frame-lighting {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  display: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.12;
  mix-blend-mode: normal;
  filter: none;
  animation: none;
}
#ggz-wrap.ggz-framed-session.ggz-frame-lighting-on #ggz-frame-lighting {
  display: block !important;
}

/* Restrained cabinet ignition. Five crops reuse the production light map so
   electrical regions can settle independently without adding artwork. */
#ggz-cabinet-startup-lights {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
}
.ggz-cabinet-startup-region {
  position: absolute;
  inset: 0;
  background: url("art/frame_lighting.png") center / 100% 100% no-repeat;
  opacity: 0;
}
.ggz-cabinet-startup-region.top { clip-path: inset(0 0 78% 0); }
.ggz-cabinet-startup-region.left { clip-path: inset(18% 72% 10% 0); }
.ggz-cabinet-startup-region.right { clip-path: inset(18% 0 10% 72%); }
.ggz-cabinet-startup-region.lower { clip-path: inset(78% 24% 0 24%); }
.ggz-cabinet-startup-region.dmd { clip-path: inset(1% 26% 82% 26%); }
#ggz-wrap.ggz-framed-session.ggz-cabinet-startup #ggz-cabinet-startup-lights {
  display: block;
}
#ggz-wrap.ggz-cabinet-startup #ggz-frame-lighting { opacity: 0 !important; }
#ggz-wrap.ggz-cabinet-startup #ggz-cabinet-frame {
  animation: ggzCabinetFramePower 780ms linear both;
}
#ggz-wrap.ggz-cabinet-startup .ggz-cabinet-startup-region {
  animation: ggzCabinetRegionPower 560ms linear var(--startup-delay, 0ms) both;
}
#ggz-wrap.ggz-cabinet-startup #ggz-frame-ui { animation: ggzCabinetUiPower 780ms linear both; }
#ggz-wrap.ggz-cabinet-startup .ggz-frame-dmd { animation: ggzCabinetDmdPower 780ms linear both; }
@keyframes ggzCabinetFramePower {
  0%, 16% { filter: brightness(.24); }
  37% { filter: brightness(.38); }
  63% { filter: brightness(.62); }
  69% { filter: brightness(1.16); }
  75%, 100% { filter: brightness(1); }
}
@keyframes ggzCabinetRegionPower {
  0%, 13% { opacity: .008; }
  22% { opacity: .055; }
  29% { opacity: .018; }
  43% { opacity: .09; }
  49% { opacity: .045; }
  66% { opacity: .12; }
  73% { opacity: .19; }
  82%, 100% { opacity: .12; }
}
@keyframes ggzCabinetUiPower {
  0%, 56% { opacity: 0; }
  62% { opacity: .28; }
  68% { opacity: .08; }
  76%, 100% { opacity: 1; }
}
@keyframes ggzCabinetDmdPower {
  0%, 66% { opacity: 0; }
  72% { opacity: .42; }
  77% { opacity: .12; }
  84%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #ggz-wrap.ggz-cabinet-startup #ggz-cabinet-frame,
  #ggz-wrap.ggz-cabinet-startup .ggz-cabinet-startup-region,
  #ggz-wrap.ggz-cabinet-startup #ggz-frame-ui,
  #ggz-wrap.ggz-cabinet-startup .ggz-frame-dmd { animation-duration: 1ms; animation-delay: 0ms; }
}
#ggz-wrap.ggz-framed-session.ggz-frame-pulse #ggz-frame-lighting {
  display: block !important;
  animation: ggzFramePulse var(--ggz-frame-pulse-dur, 0.18s) ease-out 1;
}
#ggz-wrap.ggz-frame-pulse.wave #ggz-frame-lighting {
  animation-name: ggzFrameWavePulse;
}
#ggz-frame-ui {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  display: none !important;
  font-family: "Oxanium", system-ui, sans-serif;
  color: #eaf8ff;
  text-shadow: 0 0 6px rgba(148, 224, 255, 0.32);
}
#ggz-wrap.ggz-framed-session #ggz-frame-ui {
  display: block !important;
}
/* Experimental Pixi overlay (opt-in only) */
#ggz-pixi-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
}
#ggz-wrap:not(.ggz-framed-session) #ggz-pixi-overlay {
  display: none !important;
}
#ggz-pixi-overlay canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
#ggz-wrap.ggz-pixi-ready #ggz-cabinet-frame,
#ggz-wrap.ggz-pixi-ready #ggz-frame-lighting,
#ggz-wrap.ggz-pixi-ready #ggz-frame-ui {
  display: none !important;
}
/* Cabinet frame HUD */
.ggz-frame-readout,
.ggz-frame-dmd,
.ggz-frame-status,
.ggz-frame-lives,
.ggz-frame-title {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.ggz-frame-readout em {
  display: block;
  margin-bottom: 0.12em;
  color: rgba(170, 230, 255, 0.68);
  font:
    900 clamp(7px, 0.78vw, 15px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.16em;
  font-style: normal;
}
.ggz-frame-readout b {
  display: block;
  max-width: 100%;
  color: #f5fcff;
  font:
    900 clamp(18px, 2.35vw, 48px) / 0.95 "Oxanium",
    system-ui;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ggz-frame-readout.score {
  left: 10.98%;
  top: 3.75%;
  width: 13.05%;
  height: 5.69%;
}
.ggz-frame-readout.mult {
  left: 78.55%;
  top: 3.4%;
  width: 8.32%;
  height: 6.74%;
}
.ggz-frame-readout.level {
  left: 14.38%;
  top: 91.46%;
  width: 8.95%;
  height: 6.25%;
}
/* Lives panel */
.ggz-frame-lives {
  left: 75.16%;
  top: 91.46%;
  width: 12.34%;
  height: 6.25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.18vw, 4px);
  overflow: visible;
}
.ggz-frame-lives-label {
  display: block;
  width: 100%;
  color: rgba(170, 230, 255, 0.68);
  font:
    900 clamp(7px, 0.78vw, 15px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.16em;
  font-style: normal;
  text-align: center;
}
.ggz-frame-lives-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.42vw, 8px);
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  min-height: clamp(14px, 2vw, 37px);
  flex: 0 0 clamp(14px, 2vw, 37px);
}
.ggz-frame-lives img {
  display: block;
  width: clamp(14px, 2vw, 37px);
  height: clamp(14px, 2vw, 37px);
  object-fit: contain;
  filter: none;
  box-shadow: none;
}
.ggz-frame-lives span {
  font:
    900 clamp(15px, 2vw, 38px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.06em;
  color: #f5fcff;
  text-shadow: none;
}
.ggz-frame-title {
  left: 34.4%;
  top: 0.21%;
  width: 31.2%;
  height: 1.53%;
  color: rgba(234, 248, 255, 0.5);
  font:
    900 clamp(9px, 0.98vw, 20px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(95, 232, 255, 0.22);
}
/* Dot-matrix display */
.ggz-frame-dmd {
  left: 29.38%;
  top: 2.5%;
  width: 41.05%;
  height: 11.04%;
  padding: 0.25% 1.2%;
  align-content: center;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(210, 244, 255, 0.08) 0 1px,
      transparent 1px 5px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(210, 244, 255, 0.05) 0 1px,
      transparent 1px 5px
    );
}
.ggz-frame-dmd b {
  display: block;
  max-width: 100%;
  color: #f3fbff;
  font:
    900 clamp(14px, 1.55vw, 32px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ggz-frame-dmd span {
  display: block;
  max-width: 100%;
  margin-top: 0.16em;
  color: rgba(210, 242, 255, 0.82);
  font:
    800 clamp(8px, 0.82vw, 16px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ggz-frame-dmd b[data-fit="tight"] {
  font-size: clamp(12px, 1.32vw, 27px);
  letter-spacing: 0.075em;
}
.ggz-frame-dmd b[data-fit="tiny"] {
  font-size: clamp(10px, 1.12vw, 23px);
  letter-spacing: 0.045em;
}
.ggz-frame-dmd span[data-fit="tight"] {
  font-size: clamp(7px, 0.72vw, 14px);
  letter-spacing: 0.085em;
}
.ggz-frame-dmd span[data-fit="tiny"] {
  font-size: clamp(6px, 0.64vw, 12px);
  letter-spacing: 0.055em;
}
#ggz-frame-ui.ggz-dmd-pulse .ggz-frame-dmd b {
  animation: ggzDmdBlink 0.42s steps(2, end) 2;
}
#ggz-frame-ui.ggz-void-corrupt .ggz-frame-dmd,
#ggz-frame-ui.ggz-void-corrupt .ggz-frame-readout,
#ggz-frame-ui.ggz-void-corrupt .ggz-frame-lives {
  animation: ggzVoidReadoutJitter 0.42s steps(2, end) 1;
}
#ggz-frame-ui.ggz-void-corrupt .ggz-frame-dmd:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  height: 1px;
  background: rgba(184, 0, 255, 0.42);
  box-shadow:
    0 5px 0 rgba(95, 232, 255, 0.18),
    0 -6px 0 rgba(255, 255, 255, 0.12);
  opacity: 0.55;
  pointer-events: none;
}
.ggz-frame-status {
  left: 30.47%;
  top: 89.17%;
  width: 39.3%;
  height: 10.83%;
  padding: 0.55% 1.1%;
  align-content: center;
}
.ggz-frame-status b {
  max-width: 100%;
  color: #d8f5ff;
  font:
    900 clamp(9px, 1.1vw, 23px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ggz-frame-synergy.ggz-status-standby {
  animation: ggzStandbyBreathe 2.8s ease-in-out infinite;
}
@keyframes ggzStandbyBreathe {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.46;
    filter: brightness(0.82);
  }
}
@media (prefers-reduced-motion: reduce) {
  #ggz-frame-synergy.ggz-status-standby {
    animation: none;
  }
}
.ggz-frame-status span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(3px, 0.35vw, 7px);
  max-width: 100%;
  margin-top: 0.32em;
  overflow: hidden;
}
.ggz-frame-chip {
  --chip-p: 100%;
  position: relative;
  display: grid;
  place-items: center;
  min-width: clamp(66px, 6.8vw, 132px);
  height: clamp(16px, 1.55vw, 31px);
  padding: 0 0.72em;
  border: 1px solid rgba(var(--chip-rgb), 0.52);
  border-radius: 3px;
  background: rgba(4, 8, 16, 0.72);
  color: #fff;
  font:
    900 clamp(7px, 0.72vw, 13px) / 1 "Oxanium",
    system-ui;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
}
.ggz-frame-chip:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--chip-p);
  background: linear-gradient(
    90deg,
    rgba(var(--chip-rgb), 0.68),
    rgba(var(--chip-rgb), 0.18)
  );
  transition: width 0.18s linear;
}
.ggz-frame-chip b {
  position: relative;
  z-index: 1;
}
.ggz-frame-chip.neg {
  border-color: rgba(255, 90, 90, 0.6);
  background: rgba(13, 4, 8, 0.78);
}
#ggz-ui #ggz-hudtop,
#ggz-ui #ggz-combo,
#ggz-ui #ggz-badges,
#ggz-ui #ggz-status {
  display: none !important;
}
/* Cabinet frame debug guides */
#ggz-frame-debug {
  display: none;
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 238, 0, 0.65);
  background: rgba(0, 238, 0, 0.05);
}
#ggz-wrap.ggz-frame-debug #ggz-frame-debug {
  display: block;
}
#ggz-wrap.ggz-frame-debug .ggz-frame-readout,
#ggz-wrap.ggz-frame-debug .ggz-frame-dmd,
#ggz-wrap.ggz-frame-debug .ggz-frame-status,
#ggz-wrap.ggz-frame-debug .ggz-frame-lives,
#ggz-wrap.ggz-frame-debug .ggz-frame-title {
  outline: 1px solid rgba(0, 238, 0, 0.82);
  background: rgba(0, 238, 0, 0.08);
}
.ggz-life-shard {
  position: fixed;
  z-index: 9999;
  display: block;
  border-radius: 1px;
  pointer-events: none;
  box-shadow:
    0 0 5px rgba(170, 224, 255, 0.68),
    0 0 9px rgba(255, 255, 255, 0.32);
  transform: translate(-50%, -50%);
  animation: ggzLifeShard 0.48s ease-out forwards;
}
@keyframes ggzLifeShard {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
  72% {
    opacity: 0.86;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy)))
      scale(0.42) rotate(var(--sr));
  }
}
@keyframes ggzDmdBlink {
  50% {
    opacity: 0.45;
  }
}
@keyframes ggzVoidReadoutJitter {
  50% {
    transform: translateX(0.45px);
  }
  75% {
    transform: translateX(-0.65px);
  }
}
@keyframes ggzFramePulse {
  0% {
    opacity: 0;
    filter: hue-rotate(var(--ggz-frame-pulse-hue, 0deg)) saturate(1.2);
  }
  35% {
    opacity: var(--ggz-frame-pulse-alpha, 0.48);
    filter: hue-rotate(var(--ggz-frame-pulse-hue, 0deg)) saturate(1.6)
      brightness(1.25);
  }
  100% {
    opacity: 0;
    filter: hue-rotate(var(--ggz-frame-pulse-hue, 0deg)) saturate(1);
  }
}
@keyframes ggzFrameWavePulse {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  45% {
    opacity: var(--ggz-frame-pulse-alpha, 0.38);
    transform: translateY(-0.35%);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* V264.5: DOM overlays live in the same 960x540 world layer as gameplay. */
#ggz-ui {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 960px !important;
  height: 540px !important;
  overflow: hidden !important;
  transform-origin: 0 0 !important;
}
#ggz-ui > #ggz-titlemenu,
#ggz-ui > #ggz-gate,
#ggz-ui > #ggz-splash,
#ggz-ui > #ggz-startflash {
  position: absolute !important;
  inset: 0 !important;
  width: 960px !important;
  height: 540px !important;
  max-width: none !important;
  max-height: none !important;
}
#ggz-ui > #ggz-titlemenu {
  grid-template-columns: 900px !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#ggz-ui > #ggz-titlemenu.ggz-how-on {
  grid-template-columns: 1fr !important;
  padding: 18px !important;
}
#ggz-ui #ggz-menutitle {
  font-size: 78px !important;
}
#ggz-ui .ggz-titlebtn {
  width: 360px !important;
  font-size: 16px !important;
  padding: 13px 16px !important;
}
#ggz-ui .ggz-titlebtn.minor {
  font-size: 12px !important;
  margin-top: 10px !important;
}
#ggz-ui #ggz-menuaudio {
  width: 360px !important;
}
#ggz-ui #ggz-how {
  max-height: 504px !important;
}
#ggz-ui #ggz-pmenu {
  width: 420px !important;
  max-height: 500px !important;
  padding: 18px 18px 16px !important;
  overflow: auto !important;
}
#ggz-ui #ggz-flash {
  width: 760px !important;
  max-width: 760px !important;
  font-size: 42px !important;
  left: 50% !important;
  text-align: center !important;
  display: grid !important;
  place-items: center !important;
  transform-origin: 50% 50% !important;
}
#ggz-ui #ggz-status {
  right: 14px !important;
  top: 52px !important;
}
#ggz-ui #ggz-hudwrap {
  position: absolute !important;
  inset: 0 !important;
  width: 960px !important;
  height: 540px !important;
}
#ggz-ui #sbhs-root,
#ggz-ui #sbhs-modal {
  position: absolute !important;
  inset: 0 !important;
  width: 960px !important;
  height: 540px !important;
  padding: 18px !important;
  z-index: 10 !important;
}
#ggz-ui #sbhs-pop {
  width: 680px !important;
}