/* Phone navigation: four main tabs plus "Mehr"; groups, studio, shop, inbox, settings and the
   language open as a sheet above the bar. Loaded last, so it replaces the older scrolling bar. */
.more-sheet{display:none}
@media (max-width:730px){
  .mobile-nav,.mobile-nav.has-admin{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;overflow:visible;justify-content:normal;padding:6px 4px max(8px,env(safe-area-inset-bottom))}
  .mobile-nav button,.mobile-nav.has-admin button{flex:none;min-width:0;padding:5px 2px 3px;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:12px}
  .mobile-nav button>span{font-size:20px;margin-bottom:2px}
  .mobile-nav button.active>span{text-shadow:0 0 12px currentColor}
  .mobile-nav button .nav-hint{top:1px;left:calc(50% + 7px)}
  .mobile-nav button .nav-hint.is-dot{width:9px;height:9px;min-width:0;padding:0;top:4px;left:calc(50% + 9px)}
  .mobile-nav button[aria-expanded="true"]{color:#ff9e57}

  /* The language lives in the sheet; the top bar keeps search, Gems and the inbox. */
  .topbar .top-language{display:none}
  .topbar .icon-btn{display:grid;flex:none}

  .more-sheet:not([hidden]){display:block;position:fixed;inset:0;z-index:19}
  .more-backdrop{position:absolute;inset:0;background:#09060bb3;animation:more-fade .18s ease-out}
  .more-panel{position:absolute;left:0;right:0;bottom:calc(48px + env(safe-area-inset-bottom));max-height:calc(100dvh - 130px);overflow-y:auto;background:var(--surface,#201a23);border-radius:20px 20px 0 0;padding:8px 14px 26px;box-shadow:0 -12px 40px #00000088;animation:more-up .2s ease-out}
  .more-panel:before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:#ffffff26;margin:0 auto 10px}
  .more-profile{position:relative;display:flex;align-items:center;gap:11px;width:100%;border:0;border-radius:14px;background:var(--surface-2,#27202b);color:inherit;padding:10px 12px;text-align:left;margin-bottom:10px}
  .more-profile>span:not(.chevron){display:flex;flex-direction:column;min-width:0}
  .more-profile strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .more-profile small{font-size:11px;color:#a497a2}
  .more-profile .chevron{margin-left:auto;color:#a497a2;font-size:20px}
  .more-profile .nav-hint{position:absolute;top:6px;left:44px}
  .more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .more-grid button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;border-radius:14px;background:var(--surface-2,#27202b);color:#dcceda;font-size:11px;font-weight:800;padding:13px 4px 11px;min-height:66px}
  .more-grid button>span{font-size:20px;line-height:1;color:#a497a2}
  .more-grid button.active{color:#ff9e57;box-shadow:inset 0 0 0 1px #ff9e5755}
  .more-grid button.active>span{color:#ff9e57}
  .more-grid button:active,.more-profile:active{background:var(--surface-hover,#2c2530)}
  .more-grid .nav-hint{position:absolute;top:7px;right:7px;min-width:16px;height:16px;padding:0 5px;font-size:8px}
  .more-language{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:2px 2px 0;font-size:12px;color:#a497a2}
  .more-language select{flex:0 1 170px;min-width:0;height:38px;border:0;border-radius:10px;background:var(--surface-2,#27202b);color:inherit;padding:0 10px;font:inherit;font-weight:700}
}
@keyframes more-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes more-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.more-panel,.more-backdrop{animation:none}}