/* Mogs: alles liegt über dem Spielfeld in #mogs-root. Größen hängen an --u, damit es vom Handy bis 5K passt. */
#mogs-root { --u: clamp(11px, min(1.15vw, 1.9vh), 44px); position: fixed; inset: 0; z-index: 900; overflow: hidden; background: #05080e; font-family: Fredoka, var(--font, sans-serif); font-size: calc(var(--u) * 1.15); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
#mogs-root[hidden] { display: none; }
.mx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-ui { position: absolute; inset: 0; pointer-events: none; }
.mx-ui button, .mx-ui input, .mx-pick { pointer-events: auto; }
.mx-ui [hidden] { display: none !important; }
#mogs-root button { font: inherit; color: inherit; cursor: pointer; }

/* Oben */
.mx-top { position: absolute; top: calc(var(--u) * .7); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * .7); align-items: center; }
.mx-x { position: absolute; top: calc(var(--u) * .7); left: calc(var(--u) * .7); width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border: 0; border-radius: 50%; background: rgba(8, 12, 22, .72); }
.mx-tb { width: calc(var(--u) * 24); max-width: 52vw; height: calc(var(--u) * 1.5); border-radius: 99px; background: rgba(8, 12, 22, .76); box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); overflow: hidden; position: relative; }
.mx-tb i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #39d98a, #7dff8a); transition: width .4s; }
.mx-tb span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * .84); font-weight: 600; text-shadow: 0 1px 3px #000; }
.mx-code { position: absolute; top: calc(var(--u) * .9); right: calc(var(--u) * .9); padding: calc(var(--u) * .3) calc(var(--u) * .7); border-radius: 99px; background: rgba(8, 12, 22, .72); font-size: calc(var(--u) * .9); }

/* Aufgabenliste */
.mx-list { position: absolute; top: calc(var(--u) * 3.8); left: calc(var(--u) * .7); padding: calc(var(--u) * .6) calc(var(--u) * .8); border-radius: calc(var(--u) * .7); background: rgba(8, 12, 22, .72); max-width: calc(var(--u) * 20); font-size: calc(var(--u) * .92); }
.mx-list h4 { margin: 0 0 calc(var(--u) * .3); font-size: calc(var(--u) * .84); font-weight: 600; opacity: .72; }
.mx-list div { margin: calc(var(--u) * .18) 0; white-space: nowrap; }
.mx-list div.ok { opacity: .5; text-decoration: line-through; }
.mx-list div small { opacity: .68; font-size: .84em; }
.mx-where { position: absolute; bottom: calc(var(--u) * .8); left: 50%; transform: translateX(-50%); padding: calc(var(--u) * .24) calc(var(--u) * .8); border-radius: 99px; background: rgba(8, 12, 22, .6); font-size: calc(var(--u) * .9); }

/* Knöpfe */
.mx-btns { position: absolute; right: calc(var(--u) * .9); bottom: calc(var(--u) * .9); display: flex; gap: calc(var(--u) * .7); align-items: flex-end; }
.mx-b { position: relative; min-width: calc(var(--u) * 6); height: calc(var(--u) * 6); padding: 0 calc(var(--u) * .5); border: 2px solid rgba(255, 255, 255, .24); border-radius: calc(var(--u) * 1.1); background: rgba(14, 20, 34, .84); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .12); font-size: calc(var(--u) * .82); line-height: 1.05; text-align: center; font-weight: 600; }
.mx-b .i { font-size: calc(var(--u) * 2.1); line-height: 1; }
.mx-b .k { position: absolute; top: calc(var(--u) * .2); right: calc(var(--u) * .35); font-size: calc(var(--u) * .72); opacity: .6; }
.mx-b.off { opacity: .34; }
.mx-b.red { background: rgba(120, 18, 30, .9); border-color: #ff6b76; }
.mx-b.vio { background: rgba(70, 24, 120, .9); border-color: #c58bff; }
.mx-b.gold { background: rgba(110, 80, 10, .9); border-color: #ffd23f; }
.mx-b .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 2.2); font-weight: 700; background: rgba(0, 0, 0, .5); border-radius: inherit; }
.mx-sab { position: absolute; right: calc(var(--u) * .9); bottom: calc(var(--u) * 7.8); display: flex; flex-direction: column; gap: calc(var(--u) * .4); }
.mx-sab button { padding: calc(var(--u) * .55) calc(var(--u) * 1.1); border: 2px solid #ff6b76; border-radius: calc(var(--u) * .7); background: rgba(70, 12, 22, .94); font-weight: 600; text-align: left; }

/* Hinweise */
.mx-hint { position: absolute; bottom: calc(var(--u) * 3); left: 50%; transform: translateX(-50%); padding: calc(var(--u) * .4) calc(var(--u) * 1); border-radius: 99px; background: rgba(8, 12, 22, .78); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.mx-hint.on { opacity: 1; }
.mx-alert { position: absolute; top: calc(var(--u) * 3.4); left: 50%; transform: translateX(-50%); padding: calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .6); background: rgba(150, 16, 30, .9); font-weight: 700; animation: mx-blink 1s infinite; white-space: nowrap; }
.mx-alert.soft { background: rgba(30, 40, 80, .9); animation: none; }
@keyframes mx-blink { 50% { background: rgba(230, 40, 50, .95); } }
.mx-red { position: absolute; inset: 0; box-shadow: inset 0 0 calc(var(--u) * 7) rgba(255, 30, 40, .55); animation: mx-pulse 1s infinite; }
@keyframes mx-pulse { 50% { opacity: .25; } }
.mx-big { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) scale(.9); font-size: calc(var(--u) * 3.4); font-weight: 700; text-shadow: 0 3px 16px #000; opacity: 0; white-space: nowrap; }
.mx-big.on { animation: mx-big 2.2s; }
@keyframes mx-big { 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }

/* Volle Tafeln */
.mx-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 14, .82); pointer-events: auto; }
.mx-panel { width: min(92vw, calc(var(--u) * 42)); max-height: 92vh; overflow: auto; padding: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.2); background: rgba(14, 20, 34, .96); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); touch-action: pan-y; }
.mx-panel h2 { margin: 0 0 calc(var(--u) * .5); font-size: calc(var(--u) * 2); }
.mx-panel p { margin: calc(var(--u) * .4) 0; opacity: .86; line-height: 1.32; }
.mx-rows { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .4); margin: calc(var(--u) * .6) 0; }
.mx-pl { display: flex; align-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * .2) calc(var(--u) * .6) calc(var(--u) * .2) calc(var(--u) * .2); border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: calc(var(--u) * .94); }
.mx-pl canvas { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); }
.mx-maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .5); margin: calc(var(--u) * .6) 0; }
.mx-map { position: relative; padding: 0; border: 2px solid transparent; border-radius: calc(var(--u) * .6); overflow: hidden; background: #000; }
.mx-map img { display: block; width: 100%; aspect-ratio: 112 / 74; object-fit: cover; }
.mx-map span { display: block; padding: calc(var(--u) * .2); font-size: calc(var(--u) * .86); background: rgba(8, 12, 22, .9); }
.mx-map.on { border-color: #ffd23f; }
.mx-map i { position: absolute; top: calc(var(--u) * .3); right: calc(var(--u) * .3); padding: 0 calc(var(--u) * .4); border-radius: 99px; background: #ffd23f; color: #000; font-style: normal; font-weight: 700; }
.mx-map i:empty { display: none; }
.mx-go { display: block; width: 100%; margin-top: calc(var(--u) * .7); padding: calc(var(--u) * .7); border: 0; border-radius: calc(var(--u) * .8); background: linear-gradient(#ff5a68, #c8202e); font-size: calc(var(--u) * 1.4); font-weight: 700; }
.mx-go.off { opacity: .4; }
.mx-tog { display: inline-flex; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * .3) calc(var(--u) * .7); border: 2px solid rgba(255, 255, 255, .2); border-radius: 99px; background: none; }

/* Rollenkarte */
.mx-role { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .6); text-align: center; background: radial-gradient(circle at 50% 44%, rgba(30, 60, 90, .78), rgba(3, 5, 10, .97)); }
.mx-role.mog { background: radial-gradient(circle at 50% 44%, rgba(120, 12, 26, .82), rgba(3, 5, 10, .97)); }
.mx-role h1 { margin: 0; font-size: calc(var(--u) * 4.4); letter-spacing: .03em; }
.mx-role p { margin: 0; max-width: 90vw; font-size: calc(var(--u) * 1.3); opacity: .9; }
.mx-role canvas { width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin: calc(var(--u) * -3) 0; }

/* Besprechung */
.mx-meet { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * .6); background: rgba(4, 7, 14, .62); pointer-events: auto; touch-action: pan-y; }
.mx-mbox { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--u) * .8); width: min(96vw, calc(var(--u) * 58)); height: min(92vh, calc(var(--u) * 34)); padding: calc(var(--u) * 1); border-radius: calc(var(--u) * 1.1); background: rgba(14, 20, 34, .96); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.mx-mhead { grid-column: 1 / 3; display: flex; align-items: center; gap: calc(var(--u) * .7); font-size: calc(var(--u) * 1.3); font-weight: 600; }
.mx-mhead b { margin-left: auto; font-size: calc(var(--u) * 1.6); }
.mx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * .4); align-content: start; overflow: auto; }
.mx-pv { position: relative; display: flex; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * .24) calc(var(--u) * .5); border: 2px solid transparent; border-radius: calc(var(--u) * .6); background: rgba(255, 255, 255, .07); text-align: left; min-width: 0; }
.mx-pv canvas { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); flex: none; }
.mx-pv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--u) * .98); }
.mx-pv.dead { opacity: .42; }
.mx-pv.sel { border-color: #ffd23f; }
.mx-pv i { margin-left: auto; font-style: normal; flex: none; }
.mx-vb { display: flex; gap: calc(var(--u) * .4); margin-top: calc(var(--u) * .5); }
.mx-vb button { flex: 1; padding: calc(var(--u) * .5); border: 0; border-radius: calc(var(--u) * .6); background: rgba(255, 255, 255, .12); font-weight: 600; }
.mx-vb button.on { background: linear-gradient(#ff5a68, #c8202e); }
.mx-vb button.off { opacity: .35; }
.mx-side { display: flex; flex-direction: column; gap: calc(var(--u) * .4); min-height: 0; }
.mx-chat { flex: 1; min-height: 0; overflow: auto; padding: calc(var(--u) * .4); border-radius: calc(var(--u) * .6); background: rgba(0, 0, 0, .3); font-size: calc(var(--u) * .92); user-select: text; -webkit-user-select: text; touch-action: pan-y; }
.mx-chat div { margin: calc(var(--u) * .22) 0; line-height: 1.22; }
.mx-chat b { color: #ffd23f; font-weight: 600; }
.mx-chat .g { opacity: .62; font-style: italic; }
.mx-cards { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .24); }
.mx-cards button { padding: calc(var(--u) * .2) calc(var(--u) * .5); border: 0; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: calc(var(--u) * .82); }
.mx-cards button.off { opacity: .35; }
.mx-say { display: flex; gap: calc(var(--u) * .3); }
.mx-say input { flex: 1; min-width: 0; padding: calc(var(--u) * .4) calc(var(--u) * .6); border: 0; border-radius: calc(var(--u) * .5); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; user-select: text; -webkit-user-select: text; }
.mx-say button { padding: 0 calc(var(--u) * .7); border: 0; border-radius: calc(var(--u) * .5); background: rgba(255, 255, 255, .16); }

/* Ergebnis */
.mx-tbl { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * .94); }
.mx-tbl td { padding: calc(var(--u) * .16) calc(var(--u) * .3); }
.mx-tbl tr.me td { color: #ffd23f; }
.mx-tbl td:last-child { text-align: right; white-space: nowrap; }

/* Minispiel und Karte */
.mx-mg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(88vmin, calc(var(--u) * 24)); border-radius: calc(var(--u) * .9); background: rgba(10, 14, 24, .97); box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0, 0, 0, .6); overflow: hidden; pointer-events: auto; }
.mx-mg-h { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * .4) calc(var(--u) * .7); font-weight: 600; background: rgba(255, 255, 255, .06); }
.mx-mg-h button { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.mx-mg canvas { display: block; width: 100%; aspect-ratio: 1; touch-action: none; }
.mx-mapbox { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 14, .78); pointer-events: auto; }
.mx-mapbox canvas { max-width: 96vw; max-height: 92vh; border-radius: calc(var(--u) * .7); }

@media (max-width: 720px) {
  .mx-where { bottom: calc(var(--u) * 7.6); }
  .mx-hint { bottom: calc(var(--u) * 10); }
  .mx-mbox { grid-template-columns: 1fr; height: 96vh; overflow: auto; }
  .mx-mhead { grid-column: 1; }
  .mx-chat { min-height: calc(var(--u) * 9); }
}
.mx-touch .mx-b .k { display: none; }
.mx-touch .mx-x { min-width: 44px; min-height: 44px; }
/* Rollen */
.mx-role.neu h1 { color: #ffd23f; }
.mx-role h2 { margin: .1em 0 .3em; font-size: calc(var(--u) * 1.9); font-weight: 700; color: #fff; }
.mx-b[hidden] { display: none; }
/* Geister-Chat während der Runde */
.mx-gc { position: absolute; left: calc(var(--u) * .7); bottom: calc(var(--u) * .9); width: min(calc(var(--u) * 19), 62vw); display: flex; flex-direction: column; gap: calc(var(--u) * .3); padding: calc(var(--u) * .5); border-radius: calc(var(--u) * .7); background: rgba(16, 26, 60, .82); border: 1px solid rgba(150, 190, 255, .35); color: #dbe6ff; font-size: calc(var(--u) * .86); pointer-events: auto; }
.mx-gc[hidden] { display: none; }
.mx-gh { font-weight: 600; opacity: .8; }
.mx-gl { max-height: calc(var(--u) * 8); min-height: calc(var(--u) * 2.4); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.mx-gs { display: flex; gap: calc(var(--u) * .3); }
.mx-gc.ro .mx-gs { display: none; }
.mx-gs input { flex: 1; min-width: 0; padding: calc(var(--u) * .3) calc(var(--u) * .5); border-radius: calc(var(--u) * .4); border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; }
.mx-gs button { padding: 0 calc(var(--u) * .7); border: 0; border-radius: calc(var(--u) * .4); background: #7dfcff; color: #06222c; font-weight: 700; cursor: pointer; }
/* Notizen in der Besprechung */
.mx-notes { display: flex; flex-direction: column; gap: 2px; padding: calc(var(--u) * .4) calc(var(--u) * .6); border-radius: calc(var(--u) * .5); background: rgba(255, 210, 63, .1); border: 1px solid rgba(255, 210, 63, .35); font-size: calc(var(--u) * .84); }
.mx-notes[hidden] { display: none; }
/* Handy: Knöpfe umbrechen statt aus dem Bild zu laufen */
@media (max-width: 640px) {
  .mx-btns { left: calc(var(--u) * .5); right: calc(var(--u) * .5); flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * .4); }
  .mx-b { min-width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
  .mx-gc { bottom: calc(var(--u) * 12); }
}
/* Rollenkarte: immer sichtbar, sagt, was man kann */
.mx-jobt { position: absolute; top: calc(var(--u) * 3.2); right: calc(var(--u) * .7); width: min(calc(var(--u) * 17), 46vw); display: flex; flex-direction: column; gap: calc(var(--u) * .2); padding: calc(var(--u) * .5) calc(var(--u) * .7); border-radius: calc(var(--u) * .7); background: rgba(8, 12, 26, .84); border: 1px solid rgba(125, 252, 255, .45); color: #fff; font-size: calc(var(--u) * .84); line-height: 1.3; pointer-events: auto; cursor: pointer; }
.mx-jobt.mog { border-color: rgba(255, 90, 104, .65); }
.mx-jobt.neu { border-color: rgba(255, 210, 63, .65); }
.mx-jobt[hidden] { display: none; }
.mx-jobt b { font-size: 1.2em; }
.mx-jobt em { font-style: normal; color: #ffd23f; font-weight: 600; }
.mx-jobt span { opacity: .86; }
.mx-jobt i { font-style: normal; color: #7dfcff; font-weight: 600; }
.mx-jobt button { align-self: flex-start; margin-top: 2px; padding: 2px calc(var(--u) * .5); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; cursor: pointer; }
/* Alle Rollen */
.mx-book { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 1); background: rgba(3, 5, 12, .7); pointer-events: auto; }
.mx-book[hidden] { display: none; }
.mx-bbox { position: relative; width: min(100%, calc(var(--u) * 58)); max-height: 100%; overflow-y: auto; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1); background: #12102c; border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.mx-bbox h2 { margin: 0 0 calc(var(--u) * .5); }
.mx-bbox h3 { margin: calc(var(--u) * .8) 0 calc(var(--u) * .3); color: #ffd23f; }
.mx-bx { position: absolute; top: calc(var(--u) * .7); right: calc(var(--u) * .7); width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.mx-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 15), 1fr)); gap: calc(var(--u) * .4); }
.mx-brole { display: flex; flex-direction: column; gap: 2px; padding: calc(var(--u) * .45) calc(var(--u) * .6); border-radius: calc(var(--u) * .5); background: rgba(255, 255, 255, .05); font-size: calc(var(--u) * .84); line-height: 1.3; }
.mx-brole.me { outline: 2px solid #7dfcff; }
.mx-brole b { font-size: 1.1em; }
.mx-brole span { opacity: .8; }
.mx-mbook { margin-left: auto; margin-right: calc(var(--u) * .6); padding: 2px calc(var(--u) * .5); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1em; cursor: pointer; }
@media (max-width: 640px) {
  .mx-jobt { top: calc(var(--u) * 2.7); right: calc(var(--u) * .5); width: auto; max-width: 62vw; }
  .mx-jobt span, .mx-jobt i, .mx-jobt button { display: none; }
  .mx-jobt.open span, .mx-jobt.open i, .mx-jobt.open button { display: block; }
}
/* Besprechung: ablaufende Zeit */
.mx-tbar { grid-column: 1 / 3; position: relative; height: calc(var(--u) * 1.5); border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .16); }
.mx-tbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #39d7ff, #7dfcff); }
.mx-tbar i.vote { background: linear-gradient(90deg, #ffb03a, #ffd23f); }
.mx-tbar i.hot { background: linear-gradient(90deg, #ff3d5a, #ff7a6a); }
.mx-tbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * .9); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
/* Ergebnis der Abstimmung */
.mx-mbox.tally .mx-side { display: none; }
.mx-mbox.tally { grid-template-columns: minmax(0, 1fr); }
.mx-mbox.tally .mx-tbar, .mx-mbox.tally .mx-mhead { grid-column: 1; }
.mx-tl { display: flex; align-items: center; gap: calc(var(--u) * .4); padding: calc(var(--u) * .24) calc(var(--u) * .5); border-radius: calc(var(--u) * .5); background: rgba(255, 255, 255, .06); color: #fff; font-size: calc(var(--u) * .98); }
.mx-tl.out { background: rgba(255, 77, 94, .22); outline: 2px solid #ff4d5e; }
.mx-tl canvas { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); flex: none; }
.mx-tl b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-tl u { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px; text-decoration: none; }
.mx-tl u i { font-style: normal; animation: mxVote .3s ease both; }
@keyframes mxVote { from { opacity: 0; transform: scale(2); } to { opacity: 1; transform: scale(1); } }

/* Besprechung: Leiste und Kopf oben, der Rest gehört Spielern und Chat */
.mx-mbox { grid-template-rows: auto auto minmax(0, 1fr); align-content: start; }
.mx-mhead b.mx-mt { display: none; }
.mx-side { min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .4); }
.mx-side .mx-chat { flex: 1 1 auto; min-height: calc(var(--u) * 7); }
.mx-cards { flex: none; font-size: .86em; }