/* Keep compatibility controls present for existing game adapters, but never visible/focusable. */
#menu-panel[data-react-menu="true"] > :not(#hub-react-root) {
  display: none !important;
}
#hub-react-root {
  min-width: 0;
}
#hub-react-root .setting {
  margin-bottom: 15px;
}
#hub-react-root .setting label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
#hub-react-root select {
  width: 100%;
  min-height: 44px;
}
#hub-react-root input[type="range"] {
  width: 100%;
  min-height: 36px;
  accent-color: #e9dcaa;
}
#hub-react-root .glass-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#hub-react-root .close {
  min-width: 44px;
  min-height: 44px;
}
#hub-react-root h2 {
  font: 25px Georgia;
  margin: 0 0 16px;
}
.react-cloak {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}
.react-cloak legend {
  margin-bottom: 10px;
}
.react-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.react-swatches button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 2px solid #eff3db66;
  padding: 0;
  color: white;
  text-shadow: 0 1px 4px #000;
}
.react-swatches button[aria-checked="true"] {
  outline: 2px solid #fff4c8;
  outline-offset: 3px;
}
.react-custom-color {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.react-custom-color input {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid #edffe357;
  border-radius: 8px;
  padding: 3px;
}
.react-volume-value {
  font-size: 12px;
  white-space: nowrap;
}
.react-music-status {
  font-size: 12px;
}
#hub-react-root .menu-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
#hub-react-root .menu-actions .setting {
  margin: 0;
}
#hub-react-root button:focus-visible,
#hub-react-root input:focus-visible {
  outline: 2px solid #ffe5a8;
  outline-offset: 3px;
}

.hub-team-link{display:block;text-align:center;padding:12px;border:1px solid #fff5c940;border-radius:12px;color:inherit;text-decoration:none;min-height:44px}.hub-team-link:focus-visible{outline:3px solid #ffe7a4}
/* Information hierarchy: avatar → guide → world → sound → controls → sharing. */
#menu-panel[data-react-menu="true"]{padding:16px;box-sizing:border-box;width:min(370px,calc(100vw - var(--syl-safe-left,12px) - var(--syl-safe-right,12px)))}
#hub-react-root .glass-heading{position:sticky;top:-16px;z-index:2;background:linear-gradient(135deg,#3d554df5,#203e35f5);backdrop-filter:blur(18px);padding:12px 0;margin:0 0 4px;border-bottom:1px solid #eee2bd2b}
#hub-react-root h2{margin:0;font-size:26px}#hub-react-root .hub-menu-section{display:flex;flex-direction:column;gap:12px;padding:18px 0;border-bottom:1px solid #eee2bd2b;min-width:0}#hub-react-root .hub-menu-section:last-of-type{border-bottom:0}#hub-react-root .hub-menu-section h3{margin:0 0 2px;color:#eddbb0;font:600 12px/1.4 system-ui;letter-spacing:.09em;text-transform:uppercase}#hub-react-root .setting{display:block;margin:0;min-width:0}#hub-react-root .setting label{font-size:14px;line-height:1.5;margin-bottom:6px}#hub-react-root select{box-sizing:border-box;max-width:100%;padding:9px 10px;font:15px system-ui}#hub-react-root .react-cloak{margin:0;padding:0}#hub-react-root .react-cloak legend{font-size:14px;margin-bottom:10px}#hub-react-root .react-cloak .muted{margin:10px 0;font-size:12px}#hub-react-root .hub-menu-section>button{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;font-size:14px}#hub-react-root .hub-team-link{font-size:14px;margin:0}#hub-react-root .react-music-status{margin:0}.hub-menu-section .react-custom-color{margin:0}

@media(min-width:640px) and (max-width:1000px){body[data-node=hub]:has(#menu-panel:not([hidden])) #setup-guide{width:calc(100vw - var(--syl-safe-left,12px) - var(--syl-safe-right,12px) - 394px);max-width:340px;left:var(--syl-safe-left,12px)!important;padding:16px}}

body[data-intention-open=true] #setup-guide{display:none!important}