/* Spielen-Seite und Lobby: gleicher Aufbau in drei Spalten (Lobby-Kachel · Modus-Browser · Auswahl).
   Alles hat feste Größen: die Lobby behält ihre Plätze, die Modi blättern in einem festen Feld, die Seite selbst scrollt am PC nicht. */
:root { --pg-l: clamp(300px, 19vw, 350px); --pg-r: clamp(320px, 21vw, 390px); --pg-gap: 14px; --pg-tile: 112px; }

/* ---------- Suche, Reiter, Seiten ---------- */
.pg-tools { display: flex; gap: 10px; align-items: center; flex: none; }
#ui .pg-search { flex: 1 1 auto; min-width: 0; width: 100%; height: 42px; padding: 0 14px 0 40px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); color: var(--text); font: inherit; font-size: 15px;
  background: rgba(10, 8, 22, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49fcf' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 13px center / 18px; }
#ui .pg-search:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79, 227, 255, .18); }
#ui .pg-search::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
#ui .pg-code { background-image: none; padding: 0 12px; text-align: center; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
#ui .pg-code::placeholder { letter-spacing: normal; text-transform: none; font-weight: 500; }

.pl-nav, #ui .lb-mtabs { display: flex; flex-wrap: wrap; gap: 6px; flex: none; margin: 0; }
#ui .lb-mtabs[hidden] { display: flex; }
#ui .pl-nav-b { flex: none; gap: 6px; min-height: 38px; padding: 3px 13px; font-size: 14px; white-space: nowrap; }
#ui .pl-nav-b.on { background: linear-gradient(180deg, rgba(79, 227, 255, .35), rgba(79, 227, 255, .15)); border-color: var(--cyan); box-shadow: 0 0 14px rgba(79, 227, 255, .3); }
#ui .pg-all { margin-left: auto; }
.pl-nav-n { font-size: 11.5px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: var(--muted); }

.pg-pager { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; }
.pg-note { min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pg-pages { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.pg-count { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
#ui .pg-flip { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; font: inherit; font-size: 20px; font-weight: 700; line-height: 1; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
#ui .pg-flip:hover:not(:disabled) { border-color: var(--cyan); background: rgba(79, 227, 255, .16); }
#ui .pg-flip:disabled { opacity: .35; cursor: default; }
#ui .pg-sort .seg-btn { min-height: 32px; padding: 2px 10px; font-size: 13px; white-space: nowrap; }

/* ---------- Kachel: Bild, Glasscheibe, Text. Auf beiden Seiten dieselbe, immer gleich groß ---------- */
.pl-grid { --pg-col: 236px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pg-col)), 1fr)); grid-auto-rows: var(--pg-tile); gap: 10px; align-content: start; min-width: 0; }
#ui .pl-tile { height: 100%; aspect-ratio: auto; border-radius: 16px; border-color: color-mix(in srgb, var(--mc) 34%, rgba(255, 255, 255, .1)); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); animation: none; container-type: normal; }
#ui .pl-tile:hover { transform: none; }
#ui .pl-tile.on { transform: none; }
#ui .pl-tile.ro { cursor: default; }
.pl-mix { display: none; }
.pl-tile.has-pv .pl-pv-img { opacity: .8; }
#ui .pl-tile:hover .pl-pv-img, #ui .pl-tile.on .pl-pv-img { transform: none; }
.pl-pv-ico { position: absolute; z-index: 2; left: 10px; top: 50%; width: 44px; translate: 0 -50%; font-size: 32px; text-align: center; opacity: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mc) 60%, transparent)); }
.pl-shade { z-index: 1; background: linear-gradient(90deg, rgba(16, 14, 38, .86) 0%, rgba(16, 14, 38, .76) 62%, rgba(16, 14, 38, .5) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.15); backdrop-filter: blur(4px) saturate(1.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.pl-info { top: 9px; bottom: 7px; left: 62px; right: 10px; gap: 2px; padding: 0; justify-content: flex-start; }
.pl-name { padding-right: 52px; font-size: 15.5px; line-height: 1.2; text-shadow: none; }
.pl-ico { display: none; }
.pl-nm { display: block; white-space: nowrap; text-overflow: ellipsis; }
.pl-desc { font-size: 12px; line-height: 1.3; color: #d8d3fb; text-shadow: none; -webkit-line-clamp: 2; line-clamp: 2; }
.pl-by { font-size: 11px; }
.pl-people { margin-top: auto; font-size: 11px; }
.pl-tags { top: auto; bottom: 5px; left: auto; right: 8px; justify-content: flex-end; }
.pl-tile.on .pl-tags { translate: none; }
.pl-tag { font-size: 10px; padding: 1px 6px 2px; }
#ui .pl-tile .rmm-fav, #ui .pl-tile .rmm-help { top: 5px; width: 24px; height: 24px; }
#ui .pl-tile .rmm-fav { right: 5px; font-size: 15px; }
#ui .pl-tile .rmm-help { right: 32px; font-size: 13px; }
.pl-check { top: 5px; left: 5px; width: 22px; height: 22px; font-size: 13px; }
.pl-k-migsair.pl-hype { box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
#ui .pl-add { flex-direction: row; gap: 10px; text-align: left; }
.pl-add-ico { font-size: 30px; }
.pl-add-t { font-size: 15px; }
.pl-add-s { display: none; }
.pl-empty { grid-column: 1 / -1; }
.pg-browse:not(.show-stream) .rm-sec-streamer { display: none !important; }
.pg-browse.show-stream .pl-grid { display: none; }
#lb-modes .pl-people { display: none; }
#lb-modes .pl-desc { -webkit-line-clamp: 3; line-clamp: 3; }

/* ---------- Lobby-Kachel ---------- */
.pg-lobby { display: flex; flex-direction: column; gap: 10px; padding: 14px; flex: none; }
.pg-lobby .panel-head h3, .pg-modes .panel-head h3, .rm-sec-lobbies .panel-head h3 { font-size: 19px; }
.pg-lobby-new, .pg-lobby-open { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pg-lobby-new[hidden], .pg-lobby-open[hidden] { display: none; }
.pg-lobby-new p { margin: 0; }
.pg-lobby-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pg-lobby-slots i { height: 46px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .03); }
.pg-lobby-code { font-size: 30px; letter-spacing: .2em; color: #fff; }
.pg-join { display: flex; gap: 8px; }
#ui .pg-join .btn { flex: none; min-height: 42px; padding: 4px 16px; font-size: 15px; }
.rm-sec-lobbies { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 0; }
.rm-sec-lobbies .rm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }

/* ---------- Spieler: feste Plätze, die Liste hat von Anfang an ihre volle Größe ---------- */
.lb-members { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 44px; gap: 5px; }
#ui .lb-mem { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 0; height: 44px; padding: 3px 6px; border-radius: 12px; animation: none; }
#ui .lb-mem .lb-av { flex: none; width: 34px; height: 34px; }
#ui .lb-mem .lb-av canvas { width: 34px; height: 34px; }
.lb-mcol { min-width: 0; flex: 1 1 auto; }
.lb-mname { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-mstate { display: block; font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-you { font-size: 9.5px; padding: 0 4px; }
.lb-members-card { position: relative; }
#ui .lb-mem.lb-can { cursor: pointer; }
#ui .lb-mem.lb-can:hover, #ui .lb-mem.lb-can:focus-visible { border-color: rgba(79, 227, 255, .6); outline: none; }
.lb-menu { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 4px; min-width: 190px; padding: 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); background: #1d1944; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.lb-menu-n { padding: 0 6px 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .lb-menu-b { display: block; width: 100%; min-height: 38px; padding: 4px 10px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
#ui .lb-menu-b:hover { background: rgba(79, 227, 255, .18); }
#ui .lb-menu-b.bad { color: #ff8a9a; }
#ui .lb-menu-b.bad:hover { background: rgba(255, 84, 112, .22); }
#ui .lb-mem.lb-slot.off { border-color: transparent; background: rgba(255, 255, 255, .012); }
#ui .lb-viewers { width: 100%; min-height: 40px; font-size: 14px; }
.shp-top { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.shp-top[hidden] { display: none; }
#ui .shp-top .btn { flex: 1 1 200px; min-height: 52px; font-size: 17px; }
#ui .lb-mem.lb-slot { border: 1px dashed rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .02); padding: 0; }
#ui .lb-slot .lb-invite-btn { width: 100%; height: 100%; min-height: 0; padding: 0 6px; border: 0; border-radius: 12px; background: none; color: var(--cyan); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
#ui .lb-slot .lb-invite-btn:hover { background: rgba(79, 227, 255, .12); }
#ui .lb-quick .btn, #ui .lb-quick button { flex: none; white-space: nowrap; }
.lb-botline { height: 18px; line-height: 18px; margin-top: 6px; overflow: hidden; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- gewählter Modus: rechts auf beiden Seiten gleich ---------- */
.lb-msel-pv { display: block; position: relative; width: 100%; aspect-ratio: 16 / 7; flex: none; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mc) 38%, transparent), transparent 62%), #15122f; }
.lb-msel-pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-msel-pv img[hidden] { display: none; }
.pl-sel-desc { font-size: 13px; line-height: 1.3; color: #d8d3fb; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ---------- PC: drei feste Spalten, die Seite scrollt nicht ---------- */
@media (min-width: 1100px) and (min-height: 560px) {
  #ui #scr-rooms.pl-screen, #ui #scr-lobby.screen-lobby { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
  .pl-screen > .scr-head, .screen-lobby > .scr-head { flex: none; width: 100%; max-width: none; margin: 4px 0 10px; }
  #scr-rooms.pl-screen > .pg-grid { flex-shrink: 1; }
  .pg-grid { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; gap: var(--pg-gap); align-items: stretch; grid-template-columns: var(--pg-l) minmax(0, 1fr) var(--pg-r); grid-template-rows: minmax(0, 1fr); }
  #ui #scr-lobby.screen-lobby { display: grid; gap: 0 var(--pg-gap); grid-template-columns: var(--pg-l) minmax(0, 1fr) var(--pg-r); grid-template-rows: auto minmax(0, 1fr) auto; }
  .screen-lobby > .scr-head, .screen-lobby > .lb-connect { grid-column: 1 / -1; }
  .screen-lobby > .lb-grid:not([hidden]) { display: contents; }
  .pg-left, .pg-mid, .pg-right { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pg-gap); }
  .pg-left > .rm-sec-lobbies { flex: 1 1 0; }
  .pg-modes, .pg-mid > .pg-modes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
  .pg-browse { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .pg-browse > .pl-grid, .pg-browse > .rm-sec-streamer { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 3px; margin: -3px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }

  /* rechts: Auswahl als Karte, PLAY unten */
  .pl-bar { position: static; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; padding: 14px; border-radius: 22px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pl-bar::before { display: none; }
  .pl-sel { position: relative; flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; overflow: hidden; }
  .pl-sel-pv { position: relative; display: grid; width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; border-radius: 16px; }
  .pl-sel-name { font-size: 24px; }
  #ui .pl-sel-help { position: absolute; top: 8px; right: 8px; }
  .pl-acts { flex: none; flex-wrap: wrap; }
  #ui .pl-go { order: -1; flex: 1 1 100%; min-width: 0; }
  #ui .pl-alt { flex: 1 1 0; width: auto; min-height: 52px; flex-direction: row; gap: 8px; border-radius: 16px; }
  .pl-alt-ico { font-size: 22px; }
  #pl-lobby { display: none; }

  /* Lobby: gleiche Spalten */
  .lb-code-card { flex: none; gap: 8px; padding: 12px; }
  .lb-code-top { gap: 10px; }
  .lb-code-label { font-size: 11px; }
  .lb-ch { font-size: clamp(22px, 7cqi, 30px); }
  .lb-qr-btn { padding: 5px; flex: none; }
  .lb-qr { width: 58px; height: 58px; }
  .lb-qr-cap { display: none; }
  .lb-share-row { flex-wrap: nowrap; gap: 6px; }
  #ui .lb-share-row .btn { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 2px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lb-share-row .lb-friends { flex-basis: 0; }
  .lb-newbie { padding: 4px 8px; font-size: 12px; }
  .lb-members-card { padding: 10px 12px; }
  .lb-grid > .lb-col, .lb-grid > .lb-col:first-child, .lb-grid > .lb-col.lb-col-modes, .lb-grid > .lb-col.lb-col-set { display: flex; flex-direction: column; gap: var(--pg-gap); grid-row: 1; min-height: 0; padding: 0; margin: 0; overflow: hidden auto; scrollbar-width: thin; }
  .lb-grid > .lb-col:first-child { grid-column: 1; grid-row: 2 / 4; }
  .lb-grid > .lb-col.lb-col-modes { grid-column: 2; grid-row: 2 / 4; overflow: hidden; }
  .lb-grid > .lb-col.lb-col-set { grid-column: 3; grid-row: 2; }
  .lb-grid .lb-code-card, .lb-grid .lb-members-card, .lb-grid .lb-chat-card { grid-column: auto; grid-row: auto; }
  .lb-grid .lb-members-card { flex: none; align-self: stretch; max-height: none; overflow: visible; }
  .lb-grid .lb-members { height: calc(7 * var(--pg-mem, 44px) + 6 * 5px); overflow: hidden auto; scrollbar-width: none; grid-auto-rows: var(--pg-mem, 44px); }
  #ui .lb-grid .lb-mem { height: var(--pg-mem, 44px); }
  .lb-col > .lb-chat-card { flex: 1 1 0; min-height: 170px; display: flex; flex-direction: column; padding: 10px 12px; gap: 6px; }
  .lb-quick { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lb-quick::-webkit-scrollbar { display: none; }
  .lb-chat-card .lb-chat-log { flex: 1 1 0; min-height: 0; height: auto; }
  .lb-col-modes > .lb-modes-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .lb-modes-card > .lb-mgrid { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 3px; margin: -3px; }
  .lb-settings-card { flex: 1 1 auto; }
  .lb-msel { flex: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
  .lb-msel-ico { display: none; }
  .lb-msel-name { font-size: 20px; }
  .lb-bar { position: static; grid-column: 3; grid-row: 3; width: auto; margin: 10px 0 14px !important; padding: 0; display: flex; flex-direction: column; gap: 8px; border: 0; background: none; box-shadow: none; }
  #ui .lb-bar .btn { max-width: none; min-height: 52px; flex: none; width: 100%; }
  #ui .lb-bar .lb-start { order: -1; min-height: 76px; }
}
/* niedrige PC-Fenster: Kacheln und Bild etwas kleiner, gescrollt wird in den Spalten */
@media (min-width: 1100px) and (max-height: 820px) {
  .pl-sel-pv, .lb-msel-pv { aspect-ratio: 16 / 6; }
  .pl-sel-desc { -webkit-line-clamp: 2; }
  .pg-lobby p { display: none; }
}
@media (min-width: 1100px) and (max-height: 1150px) {
  .lb-newbie { display: none !important; }
}
@media (min-width: 1100px) and (max-height: 860px) {
  .lb-grid { --pg-mem: 36px; }
  #ui .lb-grid .lb-mem .lb-av, #ui .lb-grid .lb-mem .lb-av canvas { width: 28px; height: 28px; }
  #ui .lb-grid .lb-mstate { display: none; }
}

/* ---------- Handy und Tablet: alles untereinander, die Reihenfolge bestimmt der Bildschirm ---------- */
@media (max-width: 1099.98px), (max-height: 559.98px) {
  .pl-screen { display: flex; flex-direction: column; }
  .pg-grid, .pg-left, .pg-mid, .pg-right, .pg-modes { display: contents; }
  .pg-modes > .panel-head { display: none; }
  .pl-screen > .scr-head { order: 0; }
  .pl-bar { order: 1; }
  .pg-lobby { order: 2; flex: none; margin-bottom: 8px; padding: 8px; }
  .pg-lobby > .panel-head, .pg-lobby-slots, .pg-lobby-new p, #pg-create { display: none; }
  .pg-tools { order: 3; flex: none; margin-bottom: 8px; }
  .pl-nav, #ui .lb-mtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pl-nav { order: 4; flex: none; margin-bottom: 8px; }
  .pg-browse { order: 5; flex: none; }
  .pg-pager { order: 6; flex: none; flex-wrap: wrap; margin: 8px 0 14px; }
  .rm-sec-lobbies { order: 7; flex: none; margin-bottom: 12px; }
  .pl-sel-desc { display: none; }
  :root { --pg-tile: 102px; }
  .pl-grid { --pg-col: 260px; }
  #lb-modes { max-height: 56vh; overflow-y: auto; }
  .lb-msel-pv { display: none; }
  .lb-members { grid-template-columns: 1fr 1fr; }
}
@container pls (max-width: 699px) {
  .pl-bar { order: 10; }
}
@media (max-width: 1099.98px), (max-height: 559.98px) {
  #scr-rooms > .scroll-hint { order: 20; }
}
/* Handy quer: Raumcode klein halten, sonst bleibt für alles andere kein Platz */
@media (max-height: 480px) {
  .lb-code-card { gap: 8px; padding: 10px; }
  .lb-code-box .lb-code-label { display: none; }
  .lb-ch { font-size: 22px; }
  .lb-qr { width: 54px; height: 54px; }
  .lb-qr-cap { display: none; }
  .lb-share-row { flex-wrap: nowrap; }
  #ui .lb-share-row .btn { min-height: 36px; padding: 2px 8px; font-size: 13px; }
  .lb-share-row .lb-friends { flex-basis: auto; }
  .pg-lobby { padding: 6px 8px; }
}
/* Handy: oben ist kein Platz, das Stream-Studio liegt dort in den Einstellungen */
@media (max-width: 560px) { #ui .chip-studio { display: none; } }
/* große Bildschirme (bis 5K-Breitbild): Spalten, Kacheln und Schrift wachsen mit, damit die Fläche auch genutzt wird */
@media (min-width: 3000px) and (min-height: 1400px) {
  :root { --pg-l: 470px; --pg-r: 530px; --pg-gap: 18px; --pg-tile: 150px; }
  .pl-grid { --pg-col: 330px; gap: 14px; }
  .pl-info { top: 13px; bottom: 11px; left: 86px; right: 14px; gap: 4px; }
  .pl-name { font-size: 21px; padding-right: 70px; }
  .pl-desc { font-size: 15.5px; }
  .pl-people, .pl-by { font-size: 13.5px; }
  .pl-pv-ico { left: 14px; width: 60px; font-size: 44px; }
  .pl-tag { font-size: 12px; }
  #ui .pl-tile .rmm-fav, #ui .pl-tile .rmm-help { top: 8px; width: 30px; height: 30px; }
  #ui .pl-tile .rmm-fav { right: 8px; font-size: 18px; }
  #ui .pl-tile .rmm-help { right: 43px; font-size: 15px; }
  #ui .pl-nav-b { min-height: 46px; padding: 4px 18px; font-size: 17px; }
  #ui .pg-search { height: 50px; font-size: 17px; }
  .pg-lobby .panel-head h3, .pg-modes .panel-head h3, .rm-sec-lobbies .panel-head h3, .lb-modes-card .panel-head h3 { font-size: 23px; }
  .pl-sel-name, .lb-msel-name { font-size: 30px; }
  .pl-sel-desc, .lb-msel-desc { font-size: 16px; }
  .lb-grid { --pg-mem: 62px; }
  #ui .lb-grid .lb-mem .lb-av, #ui .lb-grid .lb-mem .lb-av canvas { width: 46px; height: 46px; }
  .lb-mname { font-size: 16px; }
  .lb-mstate { font-size: 12.5px; }
}

/* ---------- Obere Leiste: überall sichtbar, nur im laufenden Spiel nicht ---------- */
body.state-lobby .topbar, body.migsair-on.migsair-bar .topbar { opacity: 1; translate: none; pointer-events: auto; }
#ui #scr-lobby.screen-lobby { padding-top: calc(var(--tb-h) + var(--safe-t) + 6px); }
body .hy-overlay { top: calc(var(--tb-px, 0px) / var(--hz, 1)); }
body .hy-overlay.hy-season { top: calc(var(--tb-px, 0px) / var(--hz, 1) + 6px); }
body .hy-se-dim { top: var(--tb-px, 0px); }
body .shop-overlay { top: calc(var(--tb-px, 0px) / var(--uiz, 1)); }
#ui .mx-root, #ui .mm-root, #ui .swz-root { top: calc(var(--tb-h) + var(--safe-t)); }

/* ---------- Werkstatt ---------- */
.ws-new { margin-left: auto; display: flex; gap: 8px; flex: none; }
#ui .ws-new .btn { min-height: 40px; padding: 4px 14px; font-size: 14px; white-space: nowrap; }
.ws-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); grid-auto-rows: 214px; gap: 10px; align-content: start; min-width: 0; }
.ws-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--mc) 34%, rgba(255, 255, 255, .1)); background: #15122f; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.ws-pv { flex: 1 1 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mc) 34%, transparent), transparent 66%), #1a1640; }
.ws-pv canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-ico { font-size: 44px; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--mc) 60%, transparent)); }
.ws-txt { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 2px; min-width: 0; }
.ws-name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-kind { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-desc { display: none; }
.ws-acts { flex: none; display: flex; gap: 6px; padding: 6px 10px 10px; }
#ui .ws-acts .btn { min-height: 38px; padding: 2px 10px; font-size: 14px; }
#ui .ws-acts .btn-play { flex: 1 1 auto; }
#ui .ws-acts .btn-ghost { flex: none; width: 42px; padding: 0; }
#ui .ws-acts .ws-del:hover { background: rgba(255, 84, 112, .3); }

/* ---------- Rechtstexte ---------- */
.legal-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; min-height: 0; width: 100%; max-width: 900px; margin: 0 auto; }
.legal-text { min-height: 0; overflow-y: auto; padding-right: 8px; font-size: 15.5px; line-height: 1.55; color: #e3dffb; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.legal-text h3 { margin: 18px 0 4px; font-size: 18px; color: #fff; }
.legal-text h3:first-child { margin-top: 0; }
.legal-text p { margin: 0 0 8px; }
.legal-text ol, .legal-text ul { margin: 0 0 8px; padding-left: 22px; }
.legal-text li { margin-bottom: 4px; }
.legal-stand { color: var(--muted); font-size: 13.5px; }
.legal-links { font-size: 13px; color: var(--muted); }
.legal-links button { border: 0; padding: 4px 2px; background: none; color: inherit; font: inherit; cursor: pointer; }
.legal-links button:hover { color: var(--cyan); text-decoration: underline; }
.legal-links-set { margin: 4px 0 12px; text-align: center; }
@media (min-width: 1100px) and (min-height: 560px) {
  .ws-screen, .legal-screen { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
  #scr-werkstatt.pl-screen > .ws-panel, #scr-legal.pl-screen > .legal-panel { flex: 1 1 auto; flex-shrink: 1; min-height: 0; }
  .ws-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 3px; margin: -3px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
  .legal-text { flex: 1 1 auto; }
}
@media (max-width: 1099.98px), (max-height: 559.98px) {
  .ws-new { gap: 6px; }
  #ui .ws-new .btn { min-height: 36px; padding: 2px 10px; font-size: 13px; }
  .ws-grid { grid-auto-rows: 200px; }
}

/* ---------- Funde aus dem Rundgang ---------- */
#ui .gh-link { padding: 6px 8px; margin: -6px -2px; }
#ui .mx-btn.mx-x { flex: none; min-width: 38px; }
#ui .mx-color { width: 28px; height: 28px; }
.lb-you { font-size: 10px; }
.badge-new { font-size: 10px; }
.ma-lv .no, .ma-lv .st, .ma-chip { font-size: max(10.5px, 1em); }
.ma-tut-n { font-size: max(10.5px, 1em); }
.hy-se-tiernum small { font-size: max(10.5px, 1em); }
@media (pointer: coarse) {
  #ui .pl-tile .rmm-fav, #ui .pl-tile .rmm-help { width: 30px; height: 30px; }
  #ui .pl-tile .rmm-help { right: 38px; }
  .pl-name { padding-right: 70px; }
  #ui .shop-chip { min-height: 30px; }
}

/* Abgemeldet gehört nichts dir: keine Währung, kein Saison-Pass, kein Level */
body.acc-out #tb-coins-chip, body.acc-out #tb-streak-chip, body.acc-out #tb-season, body.acc-out #tb-profile { display: none !important; }