/* Shared controls can use measured letterbox gutters. No breakpoint guesses:
   layout.js enables these classes only when all controls fit outside the scene. */
.arcade-app.gr-side-tools{
  box-sizing:border-box!important;
  padding-left:calc(var(--gr-side-tools-width,72px) + env(safe-area-inset-left,0px))!important;
}
.arcade-app.gr-side-tools>.arc-header{
  position:absolute!important;
  left:env(safe-area-inset-left,0px)!important;
  top:env(safe-area-inset-top,0px)!important;
  bottom:env(safe-area-inset-bottom,0px)!important;
  right:auto!important;
  width:var(--gr-side-tools-width,72px)!important;
  height:auto!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:10px 8px!important;
  margin:0!important;
  border-bottom:0!important;
  border-right:1px solid #8aa9d14d!important;
  border-radius:0!important;
  overflow:visible;
  z-index:5;
}
.arcade-app.gr-side-tools>.arc-header>.arc-brand{
  display:flex!important;
  flex-direction:column!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  gap:0!important;
  margin:0!important;
}
.arcade-app.gr-side-tools>.arc-header .arc-title{
  display:block!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}
.arcade-app.gr-side-tools>.arc-header>.arc-tools{
  display:flex!important;
  flex-direction:column!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:44px!important;
  gap:6px!important;
  margin:0!important;
}
.arcade-app.gr-side-tools>.arc-header :is(.arc-tool,.arc-brand a){
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:8px!important;
  border-radius:12px!important;
  margin:0!important;
}
.arcade-app.gr-side-tools>.arc-header :is(.arc-tool,.arc-brand a)>svg{
  width:25px!important;
  height:25px!important;
}
.arcade-app.gr-side-tools>.arc-header :is(button,a):focus-visible{
  outline-offset:2px!important;
}
.arcade-app>.arc-playfield>.arc-side-panel{display:none}
.arcade-app.gr-side-panel>.arc-playfield>.arc-side-panel{
  box-sizing:border-box;
  position:absolute;
  top:calc(var(--arc-scoreboard-height,40px) + var(--gr-layout-panel-inset,8px));
  right:var(--gr-layout-panel-inset,8px);
  bottom:var(--gr-layout-panel-inset,8px);
  width:var(--gr-side-panel-width,112px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  padding:8px;
  margin:0;
  border:1px solid #8eacd76b;
  border-radius:14px;
  background:linear-gradient(150deg,#21335be8,#0b1731ed);
  box-shadow:inset 0 1px 0 #e6f1ff33,0 7px 24px #0005;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  z-index:1;
}
.arcade-app.gr-side-panel>.arc-playfield>.arc-side-panel :is(button,a){
  box-sizing:border-box;
  min-height:44px;
  min-width:44px;
  flex:0 0 auto;
  font-size:14px;
  line-height:1.2;
}
.arcade-app.gr-side-panel>.arc-playfield>.arc-side-panel :is(h2,h3,p){
  margin:0 0 3px;
  font-size:14px;
  line-height:1.3;
}
@media(prefers-reduced-motion:reduce){.arcade-app.gr-side-tools>.arc-header,.arcade-app.gr-side-panel .arc-side-panel{transition:none!important}}