:root {
  --ah-accent: #6ee7ff;
  --ah-shell-height: 68px;
  --ah-bezel-size: clamp(9px,1.15vw,17px);
}

body.ah-arcade-shell {
  padding-top: var(--ah-shell-height) !important;
  background:
    radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--ah-accent) 7%,transparent),transparent 38%),
    #020307 !important;
}

body.ah-arcade-shell > main,
body.ah-arcade-shell > .wrap,
body.ah-arcade-shell > #wrap {
  min-height: calc(100dvh - var(--ah-shell-height)) !important;
}

.ah-arcade-bar {
  position: fixed;
  z-index: 100000;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  min-height: var(--ah-shell-height);
  padding: 8px clamp(10px,2vw,24px);
  color: #edf5ff;
  border-bottom: 2px solid color-mix(in srgb,var(--ah-accent) 45%,#111723);
  background:
    radial-gradient(circle at 18px 18px,rgba(255,255,255,.07) 0 1px,transparent 1.5px) 0 0/36px 36px,
    linear-gradient(180deg,#171b22 0,#080a0f 54%,#030407 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.1),
    inset 0 -8px 16px rgba(0,0,0,.65),
    0 12px 35px rgba(0,0,0,.42),
    0 0 22px color-mix(in srgb,var(--ah-accent) 9%,transparent);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  backdrop-filter: blur(16px);
}

.ah-arcade-home,
.ah-arcade-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
  color: #eaf3ff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  text-decoration: none;
  cursor: pointer;
  font: 750 .72rem/1 Inter,ui-sans-serif,system-ui,sans-serif;
  transition: border-color .18s ease,background .18s ease,transform .18s ease;
}

.ah-arcade-home:hover,
.ah-arcade-action:hover,
.ah-arcade-home:focus-visible,
.ah-arcade-action:focus-visible {
  outline: none;
  border-color: color-mix(in srgb,var(--ah-accent) 68%,white 5%);
  background: color-mix(in srgb,var(--ah-accent) 12%,transparent);
  transform: translateY(-1px);
}

.ah-arcade-home {
  gap: 7px;
  color: #fff4e4;
  border-color: rgba(255,181,85,.42);
  background: linear-gradient(180deg,rgba(255,174,67,.16),rgba(91,40,5,.12));
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 0 15px rgba(255,137,40,.07);
}
.ah-arcade-home:hover,
.ah-arcade-home:focus-visible {
  border-color: #ffb24c;
  background: rgba(255,159,48,.16);
}
.ah-arcade-home svg { width: 17px; fill: none; stroke: #ffb24c; stroke-width: 1.9; }
.ah-arcade-identity { min-width: 0; padding: 0 14px; }
.ah-arcade-identity small {
  display: block;
  overflow: hidden;
  color: color-mix(in srgb,var(--ah-accent) 76%,white);
  font: 850 .52rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.ah-arcade-identity strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #fff;
  font: 800 clamp(.9rem,2vw,1.08rem)/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ah-arcade-actions { display: flex; align-items: center; gap: 7px; }
.ah-arcade-action { gap: 6px; padding-inline: 10px; }
.ah-arcade-action svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ah-arcade-action.is-active { color: #071018; background: var(--ah-accent); border-color: var(--ah-accent); }
.ah-key {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  color: #9facbe;
  border: 1px solid rgba(255,255,255,.17);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  font-size: .52rem;
  font-weight: 850;
}

.ah-cabinet-frame {
  position: fixed;
  z-index: 99990;
  inset: var(--ah-shell-height) 0 0;
  overflow: hidden;
  pointer-events: none;
  border: var(--ah-bezel-size) solid #090b10;
  border-top-width: clamp(8px,1vw,14px);
  border-bottom-width: clamp(18px,2.2vw,32px);
  border-radius: 0 0 clamp(12px,2vw,25px) clamp(12px,2vw,25px);
  background: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.07),
    inset 0 0 55px rgba(0,0,0,.68),
    inset 0 0 110px rgba(0,0,0,.24);
}

.ah-cabinet-frame::before,
.ah-cabinet-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ah-cabinet-frame::before {
  z-index: 1;
  inset: 0;
  opacity: .055;
  background: repeating-linear-gradient(180deg,transparent 0 3px,rgba(145,207,255,.65) 4px);
  mix-blend-mode: screen;
}

.ah-cabinet-frame::after {
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(118deg,rgba(255,255,255,.055),transparent 19%,transparent 75%,rgba(255,255,255,.018)),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.32) 100%);
}

.ah-cabinet-glass {
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid color-mix(in srgb,var(--ah-accent) 23%,rgba(255,255,255,.08));
  border-radius: 5px;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.7),
    0 0 14px color-mix(in srgb,var(--ah-accent) 8%,transparent);
}

.ah-cabinet-screw {
  position: absolute;
  z-index: 4;
  width: 7px;
  height: 7px;
  border: 1px solid #363b46;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#a0a7b2,#343942 38%,#07080b 72%);
  box-shadow: 0 1px 2px #000;
}
.ah-cabinet-screw::after {
  content: "";
  position: absolute;
  inset: 2px 0;
  height: 1px;
  background: #111319;
  transform: rotate(-24deg);
}
.ah-screw-tl { top: 4px; left: 4px; }
.ah-screw-tr { top: 4px; right: 4px; }
.ah-screw-bl { bottom: 8px; left: 4px; }
.ah-screw-br { right: 4px; bottom: 8px; }

.ah-cabinet-ledge {
  position: absolute;
  z-index: 5;
  right: clamp(24px,7vw,95px);
  bottom: -1px;
  left: clamp(24px,7vw,95px);
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  height: clamp(17px,2vw,27px);
  padding: 0 8px;
  color: #6f7784;
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg,#151820,#07080c);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.ah-cabinet-ledge strong {
  overflow: hidden;
  font: 800 clamp(.4rem,.65vw,.55rem)/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .17em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.ah-power-light {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ah-accent);
  box-shadow: 0 0 8px var(--ah-accent);
}
.ah-coin-slot {
  justify-self: end;
  width: 11px;
  height: 5px;
  border: 1px solid #303642;
  border-radius: 2px;
  background: #020305;
  box-shadow: inset 0 1px 2px #000;
}

.ah-help {
  width: min(650px,calc(100vw - 24px));
  max-height: min(760px,calc(100dvh - 90px));
  padding: 0;
  overflow: hidden auto;
  color: #edf5ff;
  border: 1px solid color-mix(in srgb,var(--ah-accent) 36%,#38435a);
  border-radius: 18px;
  background: linear-gradient(145deg,#101827,#070b13);
  box-shadow: 0 30px 100px rgba(0,0,0,.7);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.ah-help::backdrop { background: rgba(0,2,7,.72); backdrop-filter: blur(7px); }
.ah-help-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(10,15,25,.96);
}
.ah-help-head small { color: var(--ah-accent); font-size: .58rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.ah-help h2 { margin: 5px 0 0; color: #fff; font-size: 1.5rem; }
.ah-help-close { width: 36px; height: 36px; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.2rem; }
.ah-help-body { padding: 18px 22px 24px; }
.ah-help-body > p { margin: 0; color: #aeb9ca; line-height: 1.55; }
.ah-control-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 17px 0 23px;
}
.ah-control {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
}
.ah-control b { color: #fff; font-size: .72rem; }
.ah-control span { color: #8f9caf; font-size: .63rem; }
.ah-cabinet-heading { margin: 0 0 10px; color: #fff; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.ah-cabinet-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.ah-cabinet-link {
  display: grid;
  align-content: end;
  min-height: 84px;
  padding: 9px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: linear-gradient(180deg,color-mix(in srgb,var(--cabinet) 15%,#0a0e17),#080b12);
  text-decoration: none;
}
.ah-cabinet-link:hover,
.ah-cabinet-link:focus-visible { outline: none; border-color: var(--cabinet); box-shadow: inset 0 0 24px color-mix(in srgb,var(--cabinet) 9%,transparent); }
.ah-cabinet-link i { width: 8px; aspect-ratio: 1; margin-bottom: 17px; border-radius: 50%; background: var(--cabinet); box-shadow: 0 0 10px var(--cabinet); }
.ah-cabinet-link strong { font-size: .65rem; line-height: 1.2; }
.ah-cabinet-link.is-current { border-color: var(--cabinet); }

body.ah-arcade-shell #btnMenu,
body.ah-arcade-shell a.home[href*="index"],
body.ah-arcade-shell a.btn[href*="index"],
body.ah-arcade-shell #hud a.badge[href*="index"] { display: none !important; }

body.ah-game-barreljump #btnPause,
body.ah-game-barreljump #btnMute,
body.ah-game-hungryman #pauseBtn,
body.ah-game-spaceforce #btnPause,
body.ah-game-spaceforce #btnRestart,
body.ah-game-vanguard .topbar .actions { display: none !important; }

body.ah-game-starfight #hud .row:nth-child(2) { display: none !important; }

body.ah-arcade-shell #touchControls button,
body.ah-arcade-shell #mobile button,
body.ah-arcade-shell .touch button {
  border-color: color-mix(in srgb,var(--ah-accent) 34%,#344054) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg,color-mix(in srgb,var(--ah-accent) 13%,#151b28),#090d16) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.25);
}

@media (max-width: 760px) {
  :root { --ah-shell-height: 60px; }
  .ah-arcade-bar { padding: 7px 8px; }
  .ah-arcade-home,
  .ah-arcade-action { min-height: 40px; padding: 7px 9px; }
  .ah-arcade-action > span { display: none; }
  .ah-arcade-home { padding-inline: 8px; }
  .ah-arcade-home span { display: inline; font-size: .58rem; }
  .ah-arcade-identity { padding: 0 9px; }
  .ah-arcade-identity small { font-size: .45rem; }
  .ah-arcade-identity strong { font-size: .8rem; }
  .ah-arcade-actions { gap: 5px; }
  .ah-arcade-action .ah-key { display: none; }
  .ah-control-grid { grid-template-columns: 1fr; }
  .ah-cabinet-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ah-cabinet-link:last-child { grid-column: 1/-1; }
  .ah-cabinet-frame {
    border-right-width: 6px;
    border-bottom-width: 17px;
    border-left-width: 6px;
  }
  .ah-cabinet-frame::before { opacity: .04; }
  .ah-cabinet-ledge { right: 50px; left: 50px; height: 17px; }
}

@media (max-width: 410px) {
  .ah-arcade-action { width: 38px; padding: 0; }
  .ah-arcade-actions { gap: 4px; }
  .ah-arcade-home { min-width: 58px; padding: 0 7px; }
  .ah-arcade-home span { font-size: 0; }
  .ah-arcade-home span::after { content: "Exit"; font-size: .58rem; }
  .ah-help-head,.ah-help-body { padding-left: 15px; padding-right: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-arcade-home,.ah-arcade-action { transition: none; }
}