/* Retro Arcade shared top bar for game cabinets.
   Fixed glass bar: RA monogram (home), wordmark, PROFILE / CREDITS button.
   Height is exposed as --rab-h so each cabinet reserves it for the canvas.
   Slim 36px version on short screens (RG36S, phone landscape). Hidden in fullscreen. */
:root{--rab-h:calc(56px + env(safe-area-inset-top))}
@media (max-height:520px){:root{--rab-h:calc(36px + env(safe-area-inset-top))}}
html.rab-fs{--rab-h:0px}
html:has(:fullscreen){--rab-h:0px}

.rab{position:fixed;top:0;left:0;right:0;z-index:9000;box-sizing:border-box;
  display:flex;align-items:center;gap:12px;height:var(--rab-h);
  padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  background:rgba(14,8,26,.78);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(153,69,255,.35);box-shadow:0 6px 22px rgba(0,0,0,.45);
  font-family:'Chakra Petch',sans-serif;line-height:1.2;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.rab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#9945FF,#00C2FF 50%,#14F195)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rab{background:rgba(11,7,20,.95)}}
html.rab-fs .rab,html:has(:fullscreen) .rab{display:none}

.rab-mono{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:40px;height:40px;border-radius:50%;text-decoration:none;
  background:rgba(20,12,36,.55);border:1px solid rgba(153,69,255,.55);
  box-shadow:0 0 10px rgba(153,69,255,.35),inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .2s ease,box-shadow .2s ease}
.rab-mono img{width:30px;height:30px;border-radius:50%;display:block}
.rab-mono:hover,.rab-mono:focus-visible{outline:none;border-color:#00C2FF;box-shadow:0 0 14px rgba(0,194,255,.6)}

.rab-logo{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:'Audiowide',monospace;font-size:18px;letter-spacing:1px;color:#fff;
  background:linear-gradient(90deg,#9945FF,#00C2FF 50%,#14F195);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rab-logo span{color:#14F195;-webkit-text-fill-color:#14F195}

.rab-pf{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;
  min-height:44px;padding:6px 16px 6px 6px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font-family:'Audiowide','Chakra Petch',monospace;font-size:14px;letter-spacing:.5px;color:#fff;
  background:rgba(20,241,149,.1);border:1px solid rgba(20,241,149,.7);
  box-shadow:0 0 8px rgba(20,241,149,.35),inset 0 0 8px rgba(20,241,149,.18);
  transition:border-color .2s ease,box-shadow .2s ease}
.rab-pf:hover,.rab-pf:focus-visible{outline:none;border-color:#14F195;box-shadow:0 0 14px rgba(20,241,149,.6),inset 0 0 10px rgba(20,241,149,.3)}
.rab-av{display:inline-flex;flex:0 0 auto;width:30px;height:30px;margin-left:2px}
.rab-av .raav{--s:30px}
.rab-lv{color:#14F195}
.rab-txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rab-cr{color:#F9C80E}

@media (max-width:420px){
  .rab{gap:8px}
  .rab-logo{font-size:14px;letter-spacing:.5px}
  .rab-pf{padding-right:12px;font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:0}
}
@media (max-width:330px){.rab-logo{display:none}.rab-pf{margin-left:auto}}

/* Slim bar on short screens: game gets the height back */
@media (max-height:520px){
  .rab{gap:10px}
  .rab-mono{width:30px;height:30px;border-radius:50%}
  .rab-mono img{width:24px;height:24px;border-radius:50%}
  .rab-logo{font-size:14px}
  .rab-pf{min-height:30px;padding:2px 12px 2px 3px}
  .rab-av{width:24px;height:24px}
  .rab-av .raav{--s:24px}
}
@media (prefers-reduced-motion:reduce){.rab-mono,.rab-pf{transition:none}}

/* Reserve the bar height for the cabinet so it never covers the canvas.
   Fullscreen elements are forced to inset 0 by the browser, and --rab-h is 0 there. */
html.rab-on #app{top:var(--rab-h);height:calc(100% - var(--rab-h))}
html.rab-on #app>.crt{height:min(97vh,97%)}
html.rab-on #stage{top:var(--rab-h)}
@media (max-width:420px){.rab-lv{display:none}}