/*
 * Einheitlicher Rahmen für alles außerhalb der Spiele: gleicher Hintergrund, gleicher Kopf, gleicher Zurück-Knopf,
 * gleiche Breite. Wird zuletzt geladen; nachgeladene Fenster-Stile (hype, season, maps) schlagen sich über „body“.
 */
:root {
  --radius: 20px;
  --line: rgba(255, 255, 255, .1);
  --u-page: linear-gradient(rgba(20, 13, 52, .72), rgba(12, 9, 32, .84)), url('bg-migs.webp') center / cover no-repeat fixed;
  --u-home: linear-gradient(rgba(20, 13, 52, .3), rgba(12, 9, 32, .5)), url('bg-migs.webp') center / cover no-repeat fixed;
  --u-btn: 46px;
  --u-title: clamp(24px, 2.6vw, 30px);
  --u-w: 1240px;
}

/* Seiten */
#scr-solo, #scr-campaign, #scr-daily, #scr-friends, #scr-skins, #scr-ranks, #scr-settings, #scr-shows, #scr-studio, #scr-twland, #scr-rooms, #scr-lobby, #scr-werkstatt, #scr-legal { background: var(--u-page); }
.scr-head { width: 100%; max-width: var(--u-w); margin: 0 auto 14px; min-height: var(--u-btn); gap: 14px; }
.scr-head h2 { font-size: var(--u-title); font-weight: 700; text-shadow: none; }
.scr-body { width: 100%; max-width: var(--u-w); }
#scr-settings .scr-head { max-width: 860px; }
#scr-settings .scr-body.narrow { max-width: 860px; display: flex; columns: auto; }
#scr-solo .scr-head, #scr-solo .solo-body { max-width: var(--u-w); }
#scr-rooms .scr-head, #scr-lobby .scr-head, #scr-werkstatt .scr-head, #scr-legal .scr-head { max-width: none; }

#scr-menu { background: var(--u-home); }

/* Zurück: überall derselbe runde Knopf links */
.back-btn, body .hy-back, body .mym-overlay .mym-back, body .mm-head .mm-x, body .mx-head .mx-x {
  width: var(--u-btn) !important; height: var(--u-btn) !important; min-height: 0 !important; padding: 0 0 4px !important; flex: none;
  display: grid; place-items: center; border-radius: 50% !important;
  background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .15) !important; box-shadow: none !important;
  color: #fff !important; font-size: 30px !important; line-height: 1 !important; font-weight: 400 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .15s, transform .15s;
}
.back-btn:hover, body .hy-back:hover, body .mym-overlay .mym-back:hover, body .mm-head .mm-x:hover, body .mx-head .mx-x:hover { background: rgba(255, 255, 255, .16) !important; translate: none; transform: translateX(-2px); }
body .mm-head .mm-x, body .mx-head .mx-x { order: -1; }

/* Titel: weiß, gleiche Größe */
body .hy-title, body .mm-head h2, body .mx-head h2, .mym-title b { font-size: var(--u-title) !important; font-weight: 700; }
body .hy-title > span:last-child { background: none !important; color: #fff; -webkit-text-fill-color: #fff; }
body .hy-title small { -webkit-text-fill-color: rgba(255, 255, 255, .6); }
body .hy-title small, body .mm-sub, body .mx-sub, .mym-title small { font-size: 13px !important; }

/* Fenster: gleicher Hintergrund wie die Seiten */
body .hy-overlay, body .mm-overlay, body .mx-overlay { background: var(--u-page); }
body .hy-shell, body .hy-season .hy-shell { background: none; border: 0; box-shadow: none; }
body .hy-season { background: var(--u-page); }
.mym-bg { background: var(--u-page) !important; }
.mym-bg::before { display: none; }

@media (max-width: 640px) {
  :root { --u-btn: 42px; }
}

/* Rundgang-Reste */
#ui .lb-slot .lb-invite-btn { box-sizing: border-box; min-width: 0; max-width: 100%; }
@media (max-height: 500px) { #scr-lobby { padding-bottom: calc(96px + var(--safe-b, 0px)); } }
@media (pointer: coarse) { .legal-links button, .acc-logout { min-height: 40px; padding: 8px 10px; } }

/* Spielerzeile: langer Name wird gekürzt, nichts rutscht aus der Kachel */
#ui .lb-mname { min-width: 0; overflow: hidden; }
#ui .lb-mname > * { flex: none; }
#ui .lb-mname > .lb-mname-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chat: ein Emoji-Knopf, die Auswahl geht als Fenster auf */
.lb-chat-card { position: relative; }
#ui .lb-chat-row { align-items: stretch; }
#ui .lb-emoji-btn { flex: none; width: 46px; min-height: 0; padding: 0; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); font-size: 22px; line-height: 1; cursor: pointer; }
#ui .lb-emoji-btn:hover, #ui .lb-emoji-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.lb-emoji-pop { position: absolute; left: 10px; right: 10px; bottom: 66px; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: #1c1646; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.lb-emoji-pop[hidden] { display: none; }
.lb-emoji-say { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
#ui .lb-emo { aspect-ratio: 1; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
#ui .lb-emo:hover { background: rgba(255, 255, 255, .14); }

/* Spielen: Lobby-Kachel */
.pg-lobby-new { gap: 12px; }
.pg-lobby-new p { line-height: 1.4; }
#ui #pg-create { min-height: 52px; font-size: 17px; }
.pg-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.pg-or::before, .pg-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
.pg-join-lbl { font-size: 14px; font-weight: 600; color: #fff; }
#ui .pg-code { flex: 1 1 auto; min-width: 0; letter-spacing: .12em; text-align: left; padding: 0 14px; }

/* Lobby: während der Verbindung steht schon das Gerüst, kein schmaler Streifen */
#ui #scr-lobby > .lb-connect { position: absolute; left: 50%; top: 42%; z-index: 5; width: auto; margin: 0; padding: 12px 22px; transform: translate(-50%, -50%); animation: lbConnIn .2s ease 1.4s both; }
@keyframes lbConnIn { from { opacity: 0; } to { opacity: 1; } }

/* Migs Air in der Lobby: beste Belohnung mit diesen Einstellungen */
.lb-air-reward { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-top: 4px; border-radius: 12px; background: rgba(255, 210, 63, .08); border: 1px solid rgba(255, 210, 63, .3); }
.lb-air-reward .set-label { flex: 1; min-width: 0; }
.lb-rw-c { color: #ffd23f; font-size: 16px; white-space: nowrap; }
.lb-rw-x { color: #7dfcff; font-size: 16px; white-space: nowrap; }
#ui .seg-btn[hidden] { display: none; }

/* Spielen & Entdecken: gleich hoch wie die Tagesmissionen daneben, alles endet bündig */
.dash-center { display: flex; flex-direction: column; align-self: stretch; min-height: 0; }
.dash-center .dash-group { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.dash-center .dash-tiles { flex: 1 1 auto; grid-auto-rows: 1fr; align-content: stretch; }
.dash-center .dash-tiles .tile { height: 100%; justify-content: center; }