/* =====================================================================================
 *  Panel chat - "relay glass". UP16_DirectLobby/PLAN_PanelChat.md §11.
 *  Built on the panel's tokens (--bg* --fg* --accent) so both themes hold; everything here is
 *  prefixed mmc- and lives under #mmc or the top-bar button.
 * ===================================================================================== */

:root {
  --mmc-glass: color-mix(in srgb, var(--bg2) 74%, transparent);
  --mmc-glass2: color-mix(in srgb, var(--bg3) 62%, transparent);
  --mmc-edge: color-mix(in srgb, var(--fg) 13%, transparent);
  --mmc-hi: rgba(255,255,255,.55);
  --mmc-shadow: 0 28px 70px -24px rgba(20,28,45,.45), 0 2px 10px rgba(20,28,45,.10);
  --mmc-gold: #b37d00; --mmc-discord: #5b57d9; --mmc-web: #0c8f7a; --mmc-err: var(--fail);
  --mmc-p0:#2f6db8; --mmc-p1:#b53030; --mmc-p2:#23843a; --mmc-p3:#c46b00;
  --mmc-p4:#b02e83; --mmc-p5:#0f8b8c; --mmc-p6:#8a7400; --mmc-p7:#5c61c7;
  --mmc-mine: color-mix(in srgb, var(--accent) 16%, var(--bg2));
  --mmc-radius: 16px;
  --mmc-thumb: color-mix(in srgb, var(--fg) 16%, transparent);
  --mmc-thumb-hi: color-mix(in srgb, var(--fg) 34%, transparent);
  --mmc-raise: #ffffff; --mmc-track: color-mix(in srgb, var(--fg) 7%, transparent);
  --mmc-ink: #171b22; --mmc-on-ink: #ffffff;
  --mmc-duo: linear-gradient(90deg, #febc34, #39d3b6);
  --mmc-nk-l: 35%; --mmc-nk-discord: #2f64c8; --mmc-nk-web: #1f8a5b; --mmc-nkc-lmin: 24; --mmc-nkc-lmax: 44;
  --mmc-tr: #1e5aa8;   /* translated text (user 2026-09-15: more noticeable than the original, not grey) */
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --mmc-glass: color-mix(in srgb, #121720 72%, transparent);
  --mmc-glass2: color-mix(in srgb, #1c232d 60%, transparent);
  --mmc-edge: rgba(190,210,240,.12);
  --mmc-hi: rgba(255,255,255,.07);
  --mmc-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.35);
  --mmc-gold: #febc34; --mmc-discord: #9b97ff; --mmc-web: #39d3b6;
  --mmc-p0:#6fa5e8; --mmc-p1:#ef7171; --mmc-p2:#5fd177; --mmc-p3:#ffa23a;
  --mmc-p4:#ec6cc0; --mmc-p5:#5fe0e0; --mmc-p6:#f3dd4e; --mmc-p7:#aeb2f2;
  --mmc-mine: color-mix(in srgb, var(--accent) 22%, #121720);
  --mmc-raise: #232b37; --mmc-track: rgba(0,0,0,.28);
  --mmc-ink: #eef2f7; --mmc-on-ink: #10151c;
  --mmc-nk-l: 64%; --mmc-nk-discord: #7fa8ff; --mmc-nk-web: #74c99a; --mmc-nkc-lmin: 58; --mmc-nkc-lmax: 80;
  --mmc-tr: #c4ddff;   /* nearly white, a touch of blue */
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --mmc-glass: color-mix(in srgb, var(--bg2) 74%, transparent);
  --mmc-glass2: color-mix(in srgb, var(--bg3) 62%, transparent);
  --mmc-edge: color-mix(in srgb, var(--fg) 13%, transparent);
  --mmc-hi: rgba(255,255,255,.55);
  --mmc-shadow: 0 28px 70px -24px rgba(20,28,45,.45), 0 2px 10px rgba(20,28,45,.10);
  --mmc-gold: #b37d00; --mmc-discord: #5b57d9; --mmc-web: #0c8f7a;
  --mmc-p0:#2f6db8; --mmc-p1:#b53030; --mmc-p2:#23843a; --mmc-p3:#c46b00;
  --mmc-p4:#b02e83; --mmc-p5:#0f8b8c; --mmc-p6:#8a7400; --mmc-p7:#5c61c7;
  --mmc-mine: color-mix(in srgb, var(--accent) 16%, var(--bg2));
  --mmc-raise: #ffffff; --mmc-track: color-mix(in srgb, var(--fg) 7%, transparent);
  --mmc-ink: #171b22; --mmc-on-ink: #ffffff;
  --mmc-nk-l: 35%; --mmc-nk-discord: #2f64c8; --mmc-nk-web: #1f8a5b; --mmc-nkc-lmin: 24; --mmc-nkc-lmax: 44;
  --mmc-tr: #1e5aa8;
} }

/* ---- the top-bar button: the chat's home, also while minimized ------------------------------------ */
#mmc [hidden], .mmc-top [hidden] { display:none !important; }
.top .mmc-top { position:relative; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px 0 9px; margin-left:4px;
  border-radius:999px; border:1px solid transparent; cursor:pointer; color:var(--fg); font:600 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box,
              conic-gradient(from var(--mmc-spin,0deg), var(--accent), #39d3b6, #febc34, var(--accent)) border-box; }
.top .mmc-top + .tabrow.sectiontabs { margin-left:0; }
@property --mmc-spin { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes mmc-spin { to { --mmc-spin:360deg; } }
/* the rainbow rests; it turns once for every arrival and keeps turning while private messages wait */
.top .mmc-top.mmc-stir { animation: mmc-spin 1.3s cubic-bezier(.3,.6,.25,1) 1; }
.top .mmc-top.mmc-alert { animation: mmc-spin 2.6s linear infinite; }
.mmc-top.mmc-alert::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  animation: mmc-halo 1.9s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes mmc-halo {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--fail) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  70%  { box-shadow:0 0 0 7px transparent, 0 0 0 13px transparent; }
  100% { box-shadow:0 0 0 7px transparent, 0 0 0 13px transparent; } }
.top .mmc-top:hover, .top .mmc-top.mmc-open {
  background: linear-gradient(var(--mmc-raise), var(--mmc-raise)) padding-box,
              conic-gradient(from var(--mmc-spin,0deg), var(--accent), #39d3b6, #febc34, var(--accent)) border-box; }
/* under the pointer the colours run around the frame, open or not (the open state already looks like a hover) */
.top .mmc-top:hover { animation: mmc-spin 1.9s linear infinite; }
/* the wrapper takes the GLYPH's own box, so the count centres on the drawn bubble, not on a guessed square */
.mmc-top .mmc-emowrap { position:relative; display:inline-flex; flex:0 0 auto; transition:margin .38s cubic-bezier(.3,1.5,.5,1); }
.mmc-top .mmc-emo { display:block; font-style:normal; font-size:17px; line-height:1; transform-origin:50% 80%;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; transition: font-size .38s cubic-bezier(.3,1.5,.5,1); }
/* unread private messages: the bubble grows and carries its count in the middle */
.mmc-top.mmc-hasunread .mmc-emowrap { margin:-6px -5px -6px -4px; }
.mmc-top.mmc-hasunread .mmc-emo { font-size:26px; }
/* Unread direct messages: our own speech bubble with the count REPLACES the emoji (user 2026-09-15: text laid over the emoji sat high
   on their system - the glyph's shape and metrics differ per Windows/browser - and plain red digits looked flat). A gradient bubble
   with a tail like 💬 and a soft glow; the number is centred in a box we control. `translate`, so mmc-bump's scale keeps it centred. */
.mmc-top.mmc-hasunread .mmc-emo { visibility:hidden; }
.mmc-emocount { position:absolute; left:50%; top:50%; translate:-50% -56%; pointer-events:none; box-sizing:border-box;
  min-width:25px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:10px;
  color:#fff; font:800 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.3px; white-space:nowrap;
  text-shadow:0 1px 1px rgba(90,0,20,.35);
  background:linear-gradient(155deg, #ff8a5c 0%, #f0445a 55%, #d42a55 100%);
  box-shadow:0 5px 14px -4px rgba(240,68,90,.75), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(120,0,40,.18); }
.mmc-emocount::after { content:""; position:absolute; left:3px; bottom:-5px; width:9px; height:8px; background:#e0335a;
  clip-path:polygon(0 0, 100% 0, 8% 100%); }
.mmc-emocount.mmc-emowide { font-size:10px; padding:0 5px; letter-spacing:-.2px; }
.mmc-top .mmc-lock { font-size:12px; opacity:.8 }
/* counts: red = unread private messages, accent pill = new lobby lines */
.mmc-badge, .mmc-lcount { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  font:700 10.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.mmc-badge { color:#fff; background:linear-gradient(180deg, color-mix(in srgb, var(--fail) 78%, #fff), var(--fail));
  box-shadow:0 0 0 2px var(--bg2), 0 3px 8px -2px color-mix(in srgb, var(--fail) 65%, transparent); }
.mmc-lcount { color:var(--fg); background:color-mix(in srgb, var(--fg) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent); }
.mmc-bump { animation: mmc-bump .5s cubic-bezier(.3,1.7,.5,1); }
@keyframes mmc-bump { 0% { transform:scale(.5); } 55% { transform:scale(1.22); } 100% { transform:scale(1); } }
.mmc-top.mmc-ping .mmc-emo { animation: mmc-ping .9s cubic-bezier(.3,.7,.3,1); }
@keyframes mmc-ping { 30% { transform:scale(1.35) rotate(-12deg); } 60% { transform:scale(.92); } }
/* opening: the bubble gives one small pop while the window fades in (the old crouch-and-spring jumped, user 2026-09-15) */
.mmc-top.mmc-launch .mmc-emo { animation: mmc-launch .3s cubic-bezier(.2,.8,.2,1); }
@keyframes mmc-launch { 40% { transform:scale(1.16); } 100% { transform:none; } }

/* ---- root + modes ---------------------------------------------------------------------------------- */
#mmc { --mmc-top-offset: 50px; font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); }
#mmc button { font:inherit; color:inherit; }
.mmc-win { position:fixed; z-index:35; display:flex; flex-direction:column; overflow:hidden;
  background: var(--mmc-glass); border:1px solid var(--mmc-edge); border-radius:var(--mmc-radius);
  box-shadow: var(--mmc-shadow), inset 0 1px 0 var(--mmc-hi);
  -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  container: mmcwin / inline-size; }
.mmc-win::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* minimized: hidden in place (layout and scroll positions kept); the flight to the Chat button is chat.js */
#mmc.mmc--docked .mmc-win { opacity:0; pointer-events:none; visibility:hidden; }
#mmc.mmc--window .mmc-win { left:var(--mmc-x); top:var(--mmc-y); width:var(--mmc-w); height:var(--mmc-h); }
#mmc.mmc--full .mmc-win { left:12px; right:12px; top:calc(var(--mmc-top-offset) + 10px); bottom:12px; border-radius:18px; z-index:30; }

.mmc-toast { position:fixed; right:16px; top:64px; z-index:41; width:max-content; max-width:min(340px, calc(100vw - 32px)); padding:10px 14px 10px 12px; cursor:pointer;
  border-radius:14px; background:color-mix(in srgb, var(--bg2) 94%, transparent); border:1px solid var(--mmc-edge); box-shadow:var(--mmc-shadow);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: mmc-toast-in .28s cubic-bezier(.2,.8,.2,1); }
.mmc-toast::before { content:""; position:absolute; top:-6px; left:var(--mmc-arrow, calc(100% - 30px)); width:10px; height:10px; transform:translateX(-50%) rotate(45deg);
  background:inherit; border-left:1px solid var(--mmc-edge); border-top:1px solid var(--mmc-edge); }
.mmc-toast b { display:block; font-size:12px; letter-spacing:.2px; }
.mmc-toast span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--fg2); }
@keyframes mmc-toast-in { from { opacity:0; transform: translateY(-8px); } }

/* ---- scrollbars: thin, rounded, no arrows (Firefox gets the standard properties) --------------------- */
#mmc .mmc-scroll::-webkit-scrollbar { width:10px; height:10px; }
#mmc .mmc-scroll::-webkit-scrollbar-track, #mmc .mmc-scroll::-webkit-scrollbar-corner { background:transparent; }
#mmc .mmc-scroll::-webkit-scrollbar-button { display:none; height:0; width:0; }
#mmc .mmc-scroll::-webkit-scrollbar-thumb { background-color:var(--mmc-thumb); border-radius:10px; border:3px solid transparent; background-clip:content-box; min-height:36px; }
#mmc .mmc-scroll:hover::-webkit-scrollbar-thumb { background-color:color-mix(in srgb, var(--fg) 24%, transparent); }
#mmc .mmc-scroll::-webkit-scrollbar-thumb:hover { background-color:var(--mmc-thumb-hi); }
@supports not selector(::-webkit-scrollbar) { #mmc .mmc-scroll { scrollbar-width:thin; scrollbar-color:var(--mmc-thumb) transparent; } }

/* ---- header --------------------------------------------------------------------------------------- */
.mmc-head { position:relative; display:flex; align-items:center; gap:10px; padding:10px 10px 10px 14px; cursor:grab; user-select:none;
  border-bottom:1px solid var(--mmc-edge); background: linear-gradient(180deg, var(--mmc-hi), transparent); touch-action:none; }
#mmc.mmc--full .mmc-head, #mmc.mmc-mobile .mmc-head { cursor:default; }
.mmc-head:active { cursor:grabbing; }
.mmc-meridian { position:absolute; right:150px; top:-26px; width:110px; height:110px; opacity:.09; pointer-events:none; color:var(--fg); }
.mmc-meridian ellipse { transform-origin:55px 55px; animation: mmc-meridian 14s linear infinite; }
.mmc-meridian ellipse:nth-child(2) { animation-delay:-4.6s; } .mmc-meridian ellipse:nth-child(3) { animation-delay:-9.3s; }
@keyframes mmc-meridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.02); } 100% { transform: scaleX(-1); } }
.mmc-brand { display:flex; align-items:center; gap:9px; min-width:0; }
.mmc-brand img { width:26px; height:26px; }
.mmc-title { font-size:15.5px; font-weight:700; letter-spacing:-.1px; white-space:nowrap; }
.mmc-title small { font-family:system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--fg3); margin-left:6px; }

.mmc-title small { transition:opacity .2s; }
/* tabs: a recessed track, the chosen tab a raised plate with a gold-teal line; icon + name (long where it fits) */
.mmc-seg { position:relative; display:flex; gap:2px; padding:3px; border-radius:12px; margin-left:auto;
  background:var(--mmc-track); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), inset 0 0 0 1px var(--mmc-edge); }
.mmc-seg button { position:relative; z-index:1; display:flex; align-items:center; gap:7px; border:0; background:none; padding:6px 12px; border-radius:9px; cursor:pointer;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important; letter-spacing:.1px; white-space:nowrap; color:var(--fg3) !important; transition:color .2s; }
.mmc-seg button:hover { color:var(--fg2) !important; }
.mmc-seg button svg { width:15px; height:15px; flex:0 0 15px; transition:color .2s; }
.mmc-seg button[aria-selected="true"] { color:var(--fg) !important; }
.mmc-seg button[aria-selected="true"] svg { color:var(--mmc-gold); }
.mmc-seg-ink { position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:9px; box-sizing:border-box; border:1px solid transparent;
  background: linear-gradient(var(--mmc-raise), var(--mmc-raise)) padding-box,
              conic-gradient(from var(--mmc-spin,0deg), var(--accent), #39d3b6, #febc34, var(--accent)) border-box;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.55);
  transition: left .3s cubic-bezier(.3,.8,.2,1), width .3s cubic-bezier(.3,.8,.2,1); }
/* the chosen tab wears the Chat button's rainbow frame (no underline); it turns once when the tab changes */
.mmc-seg-ink.mmc-spinonce, .mmc-tabbar button.mmc-spinonce { animation: mmc-spin 1.1s cubic-bezier(.3,.6,.25,1) 1; }
.mmc-tl-long { display:none; }
@container mmcwin (min-width: 900px) { .mmc-tl-long { display:inline; } .mmc-tl-short { display:none; } }
@container mmcwin (max-width: 610px) { .mmc-title small { display:none; } }
@container mmcwin (max-width: 470px) { .mmc-title { display:none; } .mmc-seg button { padding:6px 9px; } }
@container mmcwin (max-width: 400px) { .mmc-seg button svg { display:none; } }
.mmc-seg .mmc-badge { box-shadow:0 2px 6px -2px color-mix(in srgb, var(--fail) 70%, transparent); }
.mmc-seg .mmc-lcount, .mmc-tabbar .mmc-lcount { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }

.mmc-tools { display:flex; align-items:center; gap:2px; }
.mmc-ib { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:9px; background:none; cursor:pointer; color:var(--fg2) !important; }
.mmc-ib:hover { background:var(--mmc-glass2); color:var(--fg) !important; }
.mmc-ib svg { width:17px; height:17px; }
.mmc-ib.mmc-off { opacity:.45; }
.mmc-ib[aria-pressed="true"] { color:var(--mmc-gold) !important; }

.mmc-banner { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:8px 14px; font-size:13px;
  background: color-mix(in srgb, var(--warn) 14%, transparent); border-bottom:1px solid var(--mmc-edge); }
.mmc-banner button { border:1px solid var(--mmc-edge); background:var(--mmc-glass2); padding:4px 10px; border-radius:8px; cursor:pointer; }

/* ---- body layout ---------------------------------------------------------------------------------- */
.mmc-body { position:relative; flex:1; min-height:0; display:flex; }
.mmc-pane { flex:1; min-width:0; display:flex; }
#mmc[data-tab="lobby"] .mmc-private, #mmc[data-tab="private"] .mmc-lobby { display:none; }
.mmc-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.mmc-streamwrap { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }

.mmc-chanbar { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--mmc-edge); overflow-x:auto; scrollbar-width:none; }
.mmc-chanbar::-webkit-scrollbar { display:none; }
.mmc-chip { display:inline-flex; align-items:center; border:1px solid var(--mmc-edge); background:none; border-radius:8px; padding:3px 10px; cursor:pointer; font-size:12.5px; white-space:nowrap; color:var(--fg2) !important; }
.mmc-chip[aria-selected="true"] { background:var(--mmc-raise); border-color:color-mix(in srgb, var(--fg) 20%, transparent); color:var(--fg) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
/* the head count in its own compartment: divider, people glyph, mono digits */
.mmc-chipn { display:inline-flex; align-items:center; gap:4px; margin-left:9px; padding-left:9px; border-left:1px solid var(--mmc-edge);
  font:600 11px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--fg3); }
.mmc-chipn svg { width:12px; height:12px; opacity:.85; }
.mmc-chip[aria-selected="true"] .mmc-chipn { color:var(--mmc-gold); }
.mmc-chipro { margin-left:7px; font:600 9.5px/1 system-ui,sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--fg3); }
/* who is here: an emoji, not a button - it wakes up (colour + glow) under the pointer and while the list is open */
.mmc-peopletoggle { display:grid; place-items:center; flex:0 0 auto; width:30px; height:26px; padding:0; border:0; background:none; cursor:pointer;
  font:17px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important; filter:grayscale(.6) opacity(.75); transition:filter .2s, transform .2s; }
.mmc-peopletoggle:hover { filter:grayscale(0) drop-shadow(0 0 6px color-mix(in srgb, var(--mmc-gold) 75%, transparent)); transform:translateY(-1px); }
.mmc-peopletoggle[aria-pressed="true"] { filter:grayscale(0) drop-shadow(0 0 7px color-mix(in srgb, var(--mmc-web) 80%, transparent)); }
#mmc.mmc-wide:not(.mmc-mobile) .mmc-peopletoggle { display:none; }

.mmc-stream { position:relative; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px 0 12px; scroll-behavior:auto; }
.mmc-loadmore { display:block; margin:6px auto 10px; font-size:12px; color:var(--fg3); background:none; border:0; cursor:pointer; }
/* where lobby history stops on purpose (privacy): a quiet dashed pill, not a button */
.mmc-histcap { width:max-content; max-width:88%; margin:8px auto 12px; padding:3px 11px; border-radius:999px; border:1px dashed var(--mmc-edge);
  font-size:11px; letter-spacing:.3px; color:var(--fg3); text-align:center; }
.mmc-empty { margin:auto; padding:30px 24px; text-align:center; color:var(--fg3); max-width:300px; }
.mmc-empty b { display:block; font-weight:650; font-size:16px; color:var(--fg2); margin-bottom:4px; }
.mmc-day { display:flex; align-items:center; gap:10px; margin:14px 16px 6px; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--fg3); }
.mmc-day::before, .mmc-day::after { content:""; flex:1; height:1px; background:var(--mmc-edge); }

/* lobby lines: a log, like the game - every line is time | nick | text; wrapped text hangs under the text,
   a translation takes the next row with its language tag ending where the nick ends */
.mmc-line { --src: var(--mmc-gold); display:grid; grid-template-columns:40px auto minmax(0, 1fr); column-gap:8px; align-items:baseline;
  padding:2px 16px 2px 8px;
  /* where it came from, as a faint wash from the left edge: game gold, website green, Discord blurple */
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--src) 7%, transparent), transparent 42%);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--src) 30%, transparent); }
.mmc-line.mmc-src-game { --src: var(--mmc-gold); background-image: linear-gradient(90deg, color-mix(in srgb, var(--src) 4%, transparent), transparent 30%);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--src) 16%, transparent); }
.mmc-line.mmc-src-web { --src: var(--mmc-web); }
.mmc-line.mmc-src-discord { --src: var(--mmc-discord); }
.mmc-line:hover { background-color: color-mix(in srgb, var(--fg) 4%, transparent); }
.mmc-line.mmc-pending { opacity:.6; }
.mmc-time { grid-column:1; font:11px/20px var(--mono); color:var(--fg3); text-align:right; font-variant-numeric:tabular-nums; cursor:default; }
/* the source mark hangs left of the time text and takes no space, so the time column keeps its width */
.mmc-tt { position:relative; }
.mmc-srcico { position:absolute; right:100%; top:50%; width:10px; height:10px; margin-right:3px; transform:translateY(-50%); display:grid; pointer-events:none; }
.mmc-srcico svg { width:100%; height:100%; stroke-width:2.6; }
.mmc-srcico-web { color:var(--mmc-web); } .mmc-srcico-discord { color:var(--mmc-discord); }
/* the game's mark: its own icon (EE2.ico / EE2X.ico from the game folder, the hand-drawn 16 px frame cropped: it stays readable this small) */
.mmc-srcico.mmc-srcgame { width:13px; height:13px; margin-right:1px; background-position:center; background-size:contain; background-repeat:no-repeat; }
.mmc-srcgame-ee2 { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABjklEQVR42o2SQUjTYRjGf+9/Y5veooHkIRiIkE1vO+0smLgKBlMjFAUvZl4CF8pgIMjKHSLRizAUdQfZbUEaKCgqEnSRSRBOKdKT5MHVNg3fDrox2X/mc/v48bzf83zfK1xKW3xtDPV3kVcL61tbjI1GEREBFMPB8qc4mj/jV+Y3nYFeRESMK7MsJT/I159Z9g8zvJ3YLBgBhIuc7O6dkj7K86xjpMgEIHWwqJjI7QpIJQZgTR0s6s7zUVMYiQUVoBI33K6ANM2HAJiywabnAXv+Zn70PeV17xsp5butHt7b4W84xNw9J9bSSVV2B8GBdu7X+cXsptqH9WyPxNheDQiAUQp7TnNsdIeJextNe94ZXyDubWQ4PKhl5imLcDHwmHd2m2nHpvkQsVonZ7ksZeZqu5W7NQ18Xv0ilV74ZVcb0ch0eWybIXxLfwdQwDT+E98rCkxu+ioA38cxko+GTdmNS/K/RbnWbXJ6VgFe9HXfihU668raUnG6qqKqhbNm/5wU2UwiwfHJecWkt9Y/ik+Y10OKWUMAAAAASUVORK5CYII=); }
.mmc-srcgame-aos { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAwklEQVR42qWSUQ7DMAhDX6YdjKN5N/PN2EeThrbZqmlIKU1sAQawnSuznQCScsUZ+G6DZDslJTAICeQCB6B1xjHaBNs3DOBRL68esfV/ih9vr/J2sISlNkEmpKRdPx8DlKPSgy/YJqE2ZJyF5k2GBL9I4CThjP89hSefunqawq3VReGUtU7gImGhebeIuMVbzRIR2L6tNiKIiLmJY7ftAImI4pm+Z8I2o7LHJXwnIHo18z7w3rM5xqOEmOSVaftIagBv8LHrolvZHQIAAAAASUVORK5CYII=); }
/* fixed sizes, measured at 1x-3x screen scales: EE2 (it fills its square and crowded the time) 82:100 at 12 px tall; AOS 11 px,
   because its top and bottom pixel rows are bright where EE2's are dim - at 12 px it looked taller (user 2026-09-15) */
.mmc-srcico.mmc-srcgame-ee2 { background-size:9.8px 12px; background-position:left center; }
.mmc-srcico.mmc-srcgame-aos { background-size:11px 11px; background-position:left center; }
.mmc-nick { grid-column:2; max-width:15em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; cursor:pointer; line-height:20px; }
.mmc-nick::after { content:":"; color:var(--fg3); font-weight:400; }
.mmc-nick:hover { text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); }
.mmc-msg { grid-column:3; min-width:0; overflow-wrap:anywhere; line-height:20px; }
/* The translation flags start where the nickname starts, so stacked translations line up (user 2026-09-15). .mmc-trtag fills the
   nickname column without widening it (contain:inline-size); the pill's margin-right:auto keeps it left, and when the nickname is
   narrower than the pill the auto margin drops to 0 and flex-end lets it overflow LEFT into the empty time column of its row. */
.mmc-trtag { grid-column:2; align-self:center; display:flex; justify-content:flex-end; min-width:0; contain:inline-size; }
.mmc-trpill { flex:none; margin-right:auto; display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
  font:600 9.5px/1 var(--mono); letter-spacing:.2px; font-style:normal; text-transform:lowercase; padding:2px 4px; border-radius:6px; cursor:default;
  color:var(--fg2); background:color-mix(in srgb, var(--mmc-tr) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mmc-tr) 22%, transparent); }
.mmc-trside { display:inline-flex; align-items:center; gap:3px; }
.mmc-trarrow { font-style:normal; font-size:11px; line-height:1; color:color-mix(in srgb, var(--mmc-tr) 75%, transparent); margin:0 1px; }
.mmc-flag { display:block; flex:none; width:14px; height:10.5px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.3); }
:root[data-theme="light"] .mmc-flag { box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.12); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mmc-flag { box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.12); } }
.mmc-ptr .mmc-trtag { display:inline-flex; contain:none; vertical-align:1px; margin-right:7px; }
.mmc-ptr .mmc-trpill { margin-right:0; }
.mmc-trtext { grid-column:3; min-width:0; overflow-wrap:anywhere; color:var(--mmc-tr); font-style:italic; line-height:20px; }
.mmc-line .mmc-failnote { grid-column:3; }
.mmc-mine .mmc-nick { color:var(--fg) !important; }
@keyframes mmc-in { from { opacity:0; transform: translateY(4px); } }
.mmc-line.mmc-arrive { animation: mmc-in .3s cubic-bezier(.2,.8,.2,1), mmc-lflash 1.8s ease-out; }
.mmc-line.mmc-sent { animation: mmc-in .25s ease-out; }
@keyframes mmc-lflash { 0%, 15% { background-color: color-mix(in srgb, var(--src) 20%, transparent); } 100% { background-color: transparent; } }
/* what the lobby server says itself: fine diagonal hatching, a quiet small-caps name, never clickable */
.mmc-line.mmc-src-server { --src: var(--fg); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 4%, transparent) 0 5px, transparent 5px 11px);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--fg) 24%, transparent); }
.mmc-src-server .mmc-nick { color:var(--fg2); font-weight:600; font-variant:small-caps; letter-spacing:.4px; cursor:default; }
.mmc-src-server .mmc-nick::before { content:"\25C6  "; font-size:.8em; color:var(--fg3); }
.mmc-src-server .mmc-nick:hover { text-decoration:none; }
.mmc-src-server .mmc-msg { white-space:pre-line; color:var(--fg2); }

/* a taunt inside the text: the words themselves, framed in gold with a small speaker - click to hear */
.mmc-tword { display:inline-flex; align-items:center; gap:3px; padding:0 5px 0 3px; margin:0 1px; border-radius:6px; cursor:pointer; font:inherit; line-height:18px; vertical-align:baseline;
  color:inherit !important; background:color-mix(in srgb, var(--mmc-gold) 12%, transparent); border:1px solid color-mix(in srgb, var(--mmc-gold) 55%, transparent); }
.mmc-tword svg { width:11px; height:11px; flex:0 0 11px; color:var(--mmc-gold); }
.mmc-tword:hover { background:color-mix(in srgb, var(--mmc-gold) 20%, transparent); }
.mmc-tword.mmc-playing { animation: mmc-tglow .9s ease-in-out infinite alternate; }
.mmc-tword.mmc-playing svg { animation: mmc-tbeat .45s ease-in-out infinite alternate; }
@keyframes mmc-tglow { to { box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-gold) 22%, transparent), 0 0 12px color-mix(in srgb, var(--mmc-gold) 40%, transparent); } }
@keyframes mmc-tbeat { to { transform:scale(1.25); } }

.mmc-tip { position:fixed; z-index:80; max-width:280px; padding:5px 9px; border-radius:8px; pointer-events:none; opacity:0; transform:translateY(3px);
  font:500 12px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--fg); background:color-mix(in srgb, var(--bg2) 96%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow:0 8px 24px -8px rgba(0,0,0,.45); transition:opacity .12s, transform .12s; }
.mmc-tip.mmc-tipon { opacity:1; transform:none; }

/* lobby nicknames by source (user 2026-09-15): game gold, Discord a clear blue, website a soft green */
.mmc-nk-discord { color:var(--mmc-nk-discord); } .mmc-nk-web { color:var(--mmc-nk-web); }
/* a colour the player chose (Profile Style & Avatar) wins over every default above; its lightness is clamped per theme so a
   dark pick stays readable on the dark theme and a pale one on the light theme (relative colours; older browsers: as chosen) */
.mmc-nkc, .mmc-mine .mmc-nick.mmc-nkc { color:var(--nkc) !important; }
@supports (color: hsl(from red h s l)) {
  .mmc-nkc, .mmc-mine .mmc-nick.mmc-nkc { color:hsl(from var(--nkc) h s clamp(var(--mmc-nkc-lmin), l, var(--mmc-nkc-lmax))) !important; }
}
.mmc-av.mmc-avimg { background:#121821; }
.mmc-av.mmc-avimg img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* game lines: the colour is BUILT from the sender's version tokens (ChatCore mmc_version_family), warm neutrals only -
   the game picks the hue (EE2 gold, AOS amber), "+ Mod" mutes it to khaki/tan, non-1.6-units washes it out to grey sand.
   The same version always gets the same colour, and a combination nobody has used yet still gets one. */
.mmc-nk-game { --nk-h:42; --nk-s:88%; color:hsl(var(--nk-h) var(--nk-s) var(--mmc-nk-l)); }
.mmc-nk-game.mmc-nkv-aos { --nk-h:27; }
.mmc-nk-game.mmc-nkv-mod { --nk-s:42%; }
.mmc-nk-game.mmc-nkv-nu { --nk-s:18%; }
.mmc-nk-game.mmc-nkv-mod.mmc-nkv-nu { --nk-s:12%; }
.mmc-p0{color:var(--mmc-p0)} .mmc-p1{color:var(--mmc-p1)} .mmc-p2{color:var(--mmc-p2)} .mmc-p3{color:var(--mmc-p3)}
.mmc-p4{color:var(--mmc-p4)} .mmc-p5{color:var(--mmc-p5)} .mmc-p6{color:var(--mmc-p6)} .mmc-p7{color:var(--mmc-p7)}
.mmc-bg0{background:var(--mmc-p0)} .mmc-bg1{background:var(--mmc-p1)} .mmc-bg2{background:var(--mmc-p2)} .mmc-bg3{background:var(--mmc-p3)}
.mmc-bg4{background:var(--mmc-p4)} .mmc-bg5{background:var(--mmc-p5)} .mmc-bg6{background:var(--mmc-p6)} .mmc-bg7{background:var(--mmc-p7)}

.mmc-msg a, .mmc-trtext a, .mmc-ptext a, .mmc-ptr a { color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset:2px; }
.mmc-msg a.mmc-ext::after, .mmc-trtext a.mmc-ext::after, .mmc-ptext a.mmc-ext::after, .mmc-ptr a.mmc-ext::after { content:"↗"; font-size:10px; margin-left:1px; }

.mmc-jump { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); border:1px solid var(--mmc-edge); background:var(--mmc-glass); border-radius:999px;
  padding:5px 13px; font-size:12px; cursor:pointer; box-shadow:var(--mmc-shadow); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

/* people: the left column of the lobby */
.mmc-people { width:220px; flex:0 0 220px; border-right:1px solid var(--mmc-edge); overflow-y:auto; padding:10px 8px; background:color-mix(in srgb, var(--bg) 18%, transparent); }
.mmc-peopleclose { display:none; margin:0 0 8px auto; border:1px solid var(--mmc-edge); background:var(--mmc-glass2); border-radius:999px; padding:3px 11px; font-size:12px; cursor:pointer; }
#mmc.mmc--window:not(.mmc-wide) .mmc-people { display:none; }
#mmc.mmc--window:not(.mmc-wide).mmc-showpeople .mmc-people { display:block; position:absolute; left:0; top:43px; bottom:0; z-index:3; background:var(--mmc-glass); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:var(--mmc-shadow); }
#mmc.mmc--window:not(.mmc-wide).mmc-showpeople .mmc-peopleclose, #mmc.mmc-mobile.mmc-showpeople .mmc-peopleclose { display:block; }
.mmc-group { margin:4px 6px 6px; font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--fg3); display:flex; justify-content:space-between; }
.mmc-person { display:flex; align-items:center; gap:8px; width:100%; padding:5px 6px; border:0; background:none; border-radius:9px; cursor:pointer; text-align:left; }
.mmc-person:hover { background:var(--mmc-glass2); }
.mmc-person .mmc-pn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.mmc-state { width:16px; height:16px; flex:0 0 16px; display:grid; place-items:center; font-size:11px; }
.mmc-state img { width:16px; height:16px; }
.mmc-state.mmc-started img { filter: saturate(1.3) drop-shadow(0 0 3px color-mix(in srgb, var(--mmc-gold) 80%, transparent)); }
.mmc-state .mmc-dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.mmc-state .mmc-dot.mmc-webdot { background:var(--mmc-web); box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-web) 18%, transparent); }
.mmc-person small { color:var(--fg3); font-size:11px; }

/* ---- private: conversation left, list right --------------------------------------------------------- */
.mmc-threads { width:270px; flex:0 0 270px; display:flex; flex-direction:column; border-left:1px solid var(--mmc-edge); min-height:0; }
.mmc-find { position:relative; padding:10px; border-bottom:1px solid var(--mmc-edge); }
.mmc-find input { width:100%; height:34px; border-radius:10px; border:1px solid var(--mmc-edge); background:var(--mmc-glass2); color:var(--fg); padding:0 10px 0 32px; font:inherit; }
.mmc-find svg { position:absolute; left:20px; top:19px; width:15px; height:15px; color:var(--fg3); }
.mmc-found { position:absolute; left:10px; right:10px; top:48px; z-index:4; background:var(--mmc-glass); border:1px solid var(--mmc-edge); border-radius:12px; box-shadow:var(--mmc-shadow);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); padding:4px; max-height:280px; overflow:auto; }
.mmc-tlist { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px; }
.mmc-thread { display:grid; grid-template-columns:38px 1fr auto; gap:0 10px; align-items:center; width:100%; border:0; background:none; text-align:left; padding:8px; border-radius:12px; cursor:pointer; }
.mmc-thread:hover { background:var(--mmc-glass2); }
.mmc-thread[aria-current="true"] { background:var(--mmc-raise); box-shadow:inset 0 0 0 1px var(--mmc-edge); }
.mmc-av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; position:relative; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.mmc-av i { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; border:2px solid var(--bg2); background:var(--ok); }
.mmc-av i.mmc-webdot { background:var(--mmc-web); }
.mmc-tn { min-width:0; }
.mmc-tn b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mmc-tn span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg3); font-size:12.5px; }
.mmc-tn .mmc-was { display:inline; font-size:11px; color:var(--fg3); font-weight:400; margin-left:5px; }
.mmc-tm { display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:11px; color:var(--fg3); }
.mmc-unread b { color:var(--fg); } .mmc-unread .mmc-tn span { color:var(--fg2); }

.mmc-conv { flex:1; min-width:0; display:flex; flex-direction:column; }
.mmc-convhead { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--mmc-edge); min-height:56px; }
.mmc-convhead .mmc-av { width:34px; height:34px; font-size:13px; }
.mmc-convhead b { display:block; font-size:15px; }
.mmc-convhead small { color:var(--fg3); font-size:12px; }
.mmc-back { display:none; }
/* a conversation as a log: one card per run of messages (as wide as its longest line), every time on the left,
   a coloured rail per sender (theirs = their nick colour, yours = gold-teal) */
.mmc-grp { display:grid; grid-template-columns:44px minmax(0, max-content); column-gap:10px; justify-content:start; max-width:min(100%, 780px); padding:0 18px 0 8px; margin-top:12px; }
.mmc-grp > * { position:relative; }
.mmc-gname { grid-column:2; padding:0 0 5px 3px; font:700 12.5px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.2px; white-space:nowrap; }
.mmc-gcard { grid-column:2; border-radius:14px; background:var(--mmc-glass2); border:1px solid var(--mmc-edge); }
.mmc-me .mmc-gcard { background:linear-gradient(180deg, color-mix(in srgb, var(--fg) 8%, transparent), color-mix(in srgb, var(--fg) 4%, transparent)); }
.mmc-ptime { grid-column:1; justify-self:end; padding-top:2px; font:11px/20px var(--mono); color:var(--fg3); font-variant-numeric:tabular-nums; cursor:default; }
.mmc-ptext { grid-column:2; min-width:0; padding:2px 16px 2px 14px; line-height:20px; overflow-wrap:anywhere; }
.mmc-ptr { grid-column:2; min-width:0; padding:0 16px 2px 14px; line-height:19px; color:var(--mmc-tr); font-style:italic; overflow-wrap:anywhere; }
/* unread for you: a green band across the whole card row (no pill, no rail), dying away to the right; a run of unread
   lines is one band that fades in at its first line and out at its last. The time in the gutter takes the colour too.
   Once the conversation is read the band stays ~3 s, then fades (.mmc-urfade, chat.js fadeUnread). */
.mmc-ptext.mmc-ur, .mmc-ptr.mmc-ur { isolation:isolate; }
.mmc-ptext.mmc-ur::before, .mmc-ptr.mmc-ur::before { content:""; position:absolute; inset:0 1px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ok) 21%, transparent), color-mix(in srgb, var(--ok) 11%, transparent) 55%, color-mix(in srgb, var(--ok) 2%, transparent));
  transition:opacity 1.6s ease; }
.mmc-ur.mmc-urtop::before { -webkit-mask:linear-gradient(180deg, transparent, #000 9px); mask:linear-gradient(180deg, transparent, #000 9px); }
.mmc-ur.mmc-urbot::before { -webkit-mask:linear-gradient(180deg, #000 calc(100% - 9px), transparent); mask:linear-gradient(180deg, #000 calc(100% - 9px), transparent); }
.mmc-ur.mmc-urtop.mmc-urbot::before { -webkit-mask:linear-gradient(180deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
  mask:linear-gradient(180deg, transparent, #000 8px, #000 calc(100% - 8px), transparent); }
.mmc-ur.mmc-urfade::before { opacity:0; }
/* the card is rounded: a band on its first or last line follows the corners instead of showing square ones */
.mmc-grp .mmc-first.mmc-ur::before { border-top-left-radius:13px; border-top-right-radius:13px; }
.mmc-grp .mmc-last.mmc-ur::before { border-bottom-left-radius:13px; border-bottom-right-radius:13px; }
.mmc-ptime.mmc-ur { color:color-mix(in srgb, var(--ok) 78%, var(--fg3)); transition:color 1.6s ease; }
.mmc-ptime.mmc-ur::before { content:""; display:inline-block; width:5px; height:5px; margin:0 5px 1px 0; border-radius:50%; vertical-align:middle;
  background:var(--ok); box-shadow:0 0 6px color-mix(in srgb, var(--ok) 80%, transparent); transition:opacity 1.6s ease; }
.mmc-ptime.mmc-ur.mmc-urfade { color:var(--fg3); }
.mmc-ptime.mmc-ur.mmc-urfade::before { opacity:0; }
/* a website line's globe takes the unread dot's place: it turns green instead, so the two never crowd the gutter */
.mmc-ptime.mmc-hassrc.mmc-ur::before { display:none; }
.mmc-ptime.mmc-ur .mmc-srcico { color:var(--ok); filter:drop-shadow(0 0 3px color-mix(in srgb, var(--ok) 70%, transparent)); transition:color 1.6s ease, filter 1.6s ease; }
.mmc-ptime.mmc-ur.mmc-urfade .mmc-srcico { color:var(--mmc-web); filter:none; }
.mmc-grp .mmc-first { padding-top:9px; }
.mmc-grp .mmc-last { padding-bottom:9px; }
.mmc-ptext.mmc-pending { opacity:.55; }
.mmc-ptext.mmc-failed { color:var(--mmc-err); }
.mmc-failnote { font-size:11.5px; color:var(--mmc-err); margin-top:3px; }
.mmc-failnote button { border:0; background:none; color:var(--fg) !important; cursor:pointer; text-decoration:underline; padding:0 3px; }
.mmc-grp .mmc-failnote { grid-column:2; margin:0; padding:0 16px 7px 14px; }
.mmc-grp .mmc-receipt { grid-column:2; justify-self:end; padding:4px 2px 0; font-size:11px; color:var(--fg3); }
.mmc-receipt:empty { display:none; }
/* a message that just arrived: the card warms up, a gold sweep runs through the line, its time glows */
.mmc-grpnew { animation: mmc-in .35s cubic-bezier(.2,.8,.2,1); }
.mmc-ptext.mmc-arrive { background-image:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--mmc-gold) 32%, transparent) 50%, transparent 70%);
  background-size:300% 100%; background-repeat:no-repeat; background-position:150% 0; animation: mmc-sweep 1.6s cubic-bezier(.3,.6,.2,1) both, mmc-in .35s ease-out; }
.mmc-ptime.mmc-arrive { animation: mmc-tflash 2.2s ease-out; }
.mmc-grp:has(.mmc-arrive) .mmc-gcard { animation: mmc-cardglow 1.8s ease-out; }
.mmc-ptext.mmc-sent { animation: mmc-in .25s ease-out; }
@keyframes mmc-sweep { from { background-position:150% 0; } to { background-position:-60% 0; } }
@keyframes mmc-tflash { 0%, 25% { color:var(--mmc-gold); text-shadow:0 0 10px color-mix(in srgb, var(--mmc-gold) 70%, transparent); } }
@keyframes mmc-cardglow { 0%, 20% { box-shadow:0 0 0 1px color-mix(in srgb, var(--mmc-gold) 45%, transparent), 0 0 24px -6px color-mix(in srgb, var(--mmc-gold) 55%, transparent); } }

/* ---- composer: inside the active message column ------------------------------------------------------ */
.mmc-compose { position:relative; display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--mmc-edge); background:linear-gradient(0deg, var(--mmc-hi), transparent); }
.mmc-compose input { flex:1; min-width:0; height:40px; border-radius:12px; border:1px solid var(--mmc-edge); background:var(--mmc-glass2); color:var(--fg); padding:0 12px; font:inherit; font-size:14.5px; outline:none; transition:border-color .15s, box-shadow .15s; }
.mmc-compose input:focus { border-color:color-mix(in srgb, var(--fg) 32%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 8%, transparent); }
.mmc-compose input:disabled { opacity:.55; }
.mmc-count { position:absolute; right:114px; bottom:21px; font:10.5px var(--mono); color:var(--fg3); pointer-events:none; }
.mmc-count.mmc-near { color:var(--warn); }
/* the send key: a quiet plate while the box is empty, solid ink (white on dark, black on light) once there is text */
.mmc-send { width:40px; height:40px; border-radius:12px; border:0; cursor:pointer; display:grid; place-items:center; color:var(--fg3) !important;
  background:color-mix(in srgb, var(--fg) 9%, transparent); box-shadow:inset 0 0 0 1px var(--mmc-edge); transition:background .18s, color .18s, box-shadow .18s, transform .12s; }
.mmc-send.mmc-ready { color:var(--mmc-on-ink) !important; background:var(--mmc-ink); box-shadow:0 6px 18px -8px rgba(0,0,0,.6); }
.mmc-send.mmc-ready:hover { box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-gold) 32%, transparent), 0 6px 18px -8px rgba(0,0,0,.6); }
.mmc-send:active { transform:scale(.93); } .mmc-send:disabled { opacity:.45; cursor:default; }
.mmc-send svg { width:18px; height:18px; }
.mmc-hint { position:absolute; left:12px; right:12px; bottom:calc(100% + 6px); z-index:2; padding:8px 12px; border-radius:10px; font-size:12.5px; background:var(--mmc-glass); border:1px solid var(--mmc-edge);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--mmc-shadow); animation: mmc-in .2s ease-out; }
.mmc-hint.mmc-bad { border-color:color-mix(in srgb, var(--mmc-err) 60%, transparent); color:var(--mmc-err); }

#mmc.mmc-nocompose .mmc-compose { display:none; }

/* ---- taunt picker: a soundboard. Speaker-grille header, taunt codes in mono, numbered sets as a stacked deck that
   unfolds into a rail of number keys, a live equalizer on whatever is playing, and a deck bar to insert it ---------- */
.mmc-tpbtn { width:40px; height:40px; flex:0 0 40px; border-radius:12px; border:0; display:grid; place-items:center; cursor:pointer; background:none;
  color:var(--fg3) !important; transition:color .18s, background .18s, transform .12s; }
.mmc-tpbtn svg { width:21px; height:21px; }
.mmc-tpbtn svg { transform-origin:50% 80%; }
.mmc-tpbtn:hover, .mmc-tpbtn.mmc-on { color:var(--mmc-gold) !important; background:color-mix(in srgb, var(--mmc-gold) 12%, transparent); }
/* the notes sway to a beat under the pointer and while the picker is open */
.mmc-tpbtn:hover svg, .mmc-tpbtn.mmc-on svg { animation:mmc-notebob .9s ease-in-out infinite; }
@keyframes mmc-notebob { 25% { transform:rotate(-8deg) translateY(-1px); } 75% { transform:rotate(6deg); } }
.mmc-tpbtn:active { transform:scale(.93); } .mmc-tpbtn:disabled { opacity:.45; cursor:default; background:none; }
/* sized by the chat window: a share of the message column's width, and (chat.js tpSize) its full height up to the header */
.mmc-tp { position:absolute; right:12px; bottom:calc(100% + 8px); z-index:4; width:clamp(min(440px, calc(100% - 24px)), 66%, calc(100% - 24px)); height:440px;
  display:flex; flex-direction:column; overflow:hidden;
  /* ⚠ nearly opaque: inside the chat window (itself a backdrop-filter root) its own blur does not soften the lines behind it */
  border-radius:16px; background:linear-gradient(160deg, rgba(255,255,255,.05), transparent 40%), color-mix(in srgb, var(--bg2) 95%, transparent);
  border:1px solid var(--mmc-edge); box-shadow:var(--mmc-shadow), inset 0 1px 0 var(--mmc-hi);
  -webkit-backdrop-filter:blur(28px) saturate(170%); backdrop-filter:blur(28px) saturate(170%);
  transform-origin:calc(100% - 72px) 100%; animation:mmc-tpin .24s cubic-bezier(.2,.9,.3,1.12); }
@keyframes mmc-tpin { from { opacity:0; transform:translateY(10px) scale(.94); } }
.mmc-tphead { position:relative; display:flex; align-items:center; gap:8px; padding:11px 10px 8px 14px;
  background-image:radial-gradient(color-mix(in srgb, var(--fg) 13%, transparent) 1px, transparent 1.3px); background-size:6px 6px; }
.mmc-tphead::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent 20%, var(--mmc-glass) 62%); z-index:0; }
.mmc-tptitle { position:relative; z-index:1; font:700 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.1px; white-space:nowrap; }
.mmc-tp { container:mmctp / inline-size; }
.mmc-tptitle .mmc-tl-long { display:inline; } .mmc-tptitle .mmc-tl-short { display:none; }
@container mmctp (max-width: 430px) { .mmc-tptitle .mmc-tl-long { display:none; } .mmc-tptitle .mmc-tl-short { display:inline; } }
/* 🔞 in the header after the count: a quiet grey emoji, in colour only while it hides the blocked taunts. No frame. */
.mmc-tpadult { position:relative; z-index:1; flex:0 0 auto; width:34px; height:34px; margin-left:4px; padding:0; border:0 !important; border-radius:9px;
  background:none !important; cursor:pointer; display:grid; place-items:center;
  font:21px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important; filter:grayscale(1) opacity(.4); transition:filter .15s, transform .15s; }
.mmc-tpadult:active { transform:scale(.92); }
.mmc-tpadult:hover { filter:grayscale(1) opacity(.75); }
.mmc-tpadult[aria-pressed="true"] { filter:none; }
/* a blocked taunt: dimmed a little, nothing loud */
.mmc-tk.mmc-tkblk { opacity:.62; }
.mmc-tk.mmc-tkblk.mmc-sel, .mmc-tk.mmc-tkblk:hover { opacity:1; }
.mmc-tptitle small { margin-left:8px; font:600 10.5px/1 var(--mono); letter-spacing:.2px; color:var(--mmc-gold); padding:2px 6px; border-radius:6px;
  background:color-mix(in srgb, var(--mmc-gold) 12%, transparent); vertical-align:3px; }
.mmc-tpx { position:relative; z-index:1; margin-left:auto; width:28px; height:28px; border:0; border-radius:8px; background:none; cursor:pointer; display:grid; place-items:center; color:var(--fg3) !important; }
.mmc-tpx:hover { background:var(--mmc-glass2); color:var(--fg) !important; }
.mmc-tpx svg { width:14px; height:14px; }
/* search lives in the bottom bar, short: taunt names are short */
.mmc-tpfind { position:relative; display:block; flex:0 1 158px; min-width:96px; }
.mmc-tpfind svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:var(--fg3); pointer-events:none; }
.mmc-tpfind input { width:100%; height:36px; border-radius:11px; border:1px solid var(--mmc-edge); background:var(--mmc-glass2); color:var(--fg); padding:0 8px 0 29px;
  font:13px system-ui,-apple-system,"Segoe UI",sans-serif; outline:none; }
.mmc-tpfind input:focus { border-color:color-mix(in srgb, var(--mmc-gold) 55%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-gold) 14%, transparent); }
.mmc-tpbody { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 12px 12px; }
.mmc-tpsec { margin:8px 2px 6px; font:600 10px/1 system-ui,sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg3); }
.mmc-tpgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; }
.mmc-tpkeys { display:flex; flex-wrap:wrap; gap:5px; }
.mmc-tpmore { margin:10px 2px 0; font-size:11.5px; color:var(--fg3); }
.mmc-tk { position:relative; display:flex; align-items:center; gap:6px; min-width:0; height:30px; padding:0 9px; border-radius:9px; cursor:pointer;
  border:1px solid var(--mmc-edge); background:color-mix(in srgb, var(--fg) 4%, transparent); color:var(--fg2) !important;
  font:600 12px/1 var(--mono) !important; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--fg) 7%, transparent);
  transition:background .14s, border-color .14s, color .14s, transform .1s; }
.mmc-tk:hover { background:color-mix(in srgb, var(--fg) 9%, transparent); color:var(--fg) !important; }
.mmc-tk:active { transform:translateY(1px); box-shadow:none; }
.mmc-tkl { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mmc-tk.mmc-tile { height:34px; }
/* a numbered set: two cards peeking out behind it, and how many are in the deck */
.mmc-tk.mmc-set { margin:3px 3px 0 0; box-shadow:2px -2px 0 -1px var(--mmc-raise), 2px -2px 0 0 var(--mmc-edge), 4px -4px 0 -2px var(--mmc-raise), 4px -4px 0 -1px var(--mmc-edge); }
.mmc-tkn { margin-left:auto; padding:2px 5px; border-radius:5px; font:700 9.5px/1 var(--mono); color:var(--mmc-gold); background:color-mix(in srgb, var(--mmc-gold) 13%, transparent); }
.mmc-tk.mmc-set.mmc-open { border-color:color-mix(in srgb, var(--mmc-gold) 60%, transparent); color:var(--fg) !important; background:color-mix(in srgb, var(--mmc-gold) 10%, transparent); }
.mmc-rail { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:5px; padding:9px; margin:1px 0 3px; border-radius:12px;
  border:1px dashed color-mix(in srgb, var(--mmc-gold) 38%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--mmc-gold) 8%, transparent), transparent 80%);
  animation:mmc-railin .26s cubic-bezier(.2,.9,.3,1); }
@keyframes mmc-railin { from { opacity:0; transform:translateY(-4px); } }
.mmc-tk.mmc-num { min-width:36px; justify-content:center; padding:0 7px; }
.mmc-tk.mmc-sel { border-color:color-mix(in srgb, var(--mmc-gold) 70%, transparent); color:var(--fg) !important;
  background:color-mix(in srgb, var(--mmc-gold) 16%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-gold) 12%, transparent); }
.mmc-eq { display:none; align-items:flex-end; gap:1.5px; height:11px; flex:0 0 auto; }
.mmc-eq i { width:2px; height:35%; border-radius:1px; background:var(--mmc-gold); animation:mmc-eqb .62s ease-in-out infinite alternate; }
.mmc-eq i:nth-child(2) { animation-delay:-.31s; animation-duration:.5s; } .mmc-eq i:nth-child(3) { animation-delay:-.12s; animation-duration:.74s; } .mmc-eq i:nth-child(4) { animation-delay:-.45s; }
@keyframes mmc-eqb { to { height:100%; } }
.mmc-tpplaying .mmc-eq { display:inline-flex; }
.mmc-tpdeck { display:flex; align-items:center; gap:8px; min-height:58px; padding:9px 10px 10px 10px; border-top:1px solid var(--mmc-edge);
  background:linear-gradient(0deg, var(--mmc-hi), transparent); }
.mmc-tpselbox { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; }
.mmc-tphelp { font-size:12px; color:var(--fg3); padding-left:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mmc-tpplay { flex:0 0 40px; width:40px; height:40px; padding:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; color:var(--mmc-gold) !important;
  border:1px solid color-mix(in srgb, var(--mmc-gold) 55%, transparent); background:color-mix(in srgb, var(--mmc-gold) 11%, transparent);
  transition:background .15s, box-shadow .15s; }
.mmc-tpplay:hover { background:color-mix(in srgb, var(--mmc-gold) 20%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-gold) 14%, transparent); }
/* the triangle's centroid is its optical centre; the 24-unit box already places it there */
.mmc-tpplay svg { width:18px; height:18px; display:block; }
.mmc-tpplay.mmc-tpplaying svg { display:none; }
.mmc-tpplay .mmc-eq { height:15px; } .mmc-tpplay .mmc-eq i { width:2.5px; }
.mmc-tpname { min-width:0; display:flex; flex-direction:column; gap:3px; }
.mmc-tpname b { font:700 13.5px/1.1 var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mmc-tpname small { font:10.5px/1 var(--mono); color:var(--fg3); }
/* Insert: mica with a gold edge, not a white slab */
.mmc-tpins { flex:0 0 auto; height:36px; padding:0 14px; border-radius:11px; cursor:pointer; white-space:nowrap;
  font:600 12.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important; color:var(--fg) !important;
  border:1px solid color-mix(in srgb, var(--mmc-gold) 48%, transparent);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), color-mix(in srgb, var(--mmc-gold) 14%, var(--mmc-glass2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -10px color-mix(in srgb, var(--mmc-gold) 60%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .15s, box-shadow .15s, opacity .15s; }
.mmc-tpins:hover:not(:disabled) { background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)), color-mix(in srgb, var(--mmc-gold) 24%, var(--mmc-glass2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 3px color-mix(in srgb, var(--mmc-gold) 16%, transparent); }
.mmc-tpins:disabled { opacity:.45; cursor:default; }
#mmc.mmc-mobile .mmc-tp { left:8px; right:8px; width:auto; }

/* ---- the player card (hover a nickname) - also the top of the name menu ------------------------------------------ */
.mmc-pc { position:fixed; z-index:82; width:304px; max-width:calc(100vw - 16px); border-radius:16px; overflow:hidden; color:var(--fg);
  font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; text-transform:none; letter-spacing:0;
  background:linear-gradient(158deg, rgba(255,255,255,.08), transparent 42%), var(--mmc-glass); border:1px solid var(--mmc-edge);
  box-shadow:var(--mmc-shadow), inset 0 1px 0 var(--mmc-hi); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  opacity:0; transform:translateY(5px) scale(.98); transform-origin:top left; transition:opacity .14s, transform .2s cubic-bezier(.2,.9,.3,1); }
.mmc-pc.mmc-pcup { transform-origin:bottom left; transform:translateY(-5px) scale(.98); }
.mmc-pc.mmc-pcon { opacity:1; transform:none; }
.mmc-pcbody { padding:12px 14px 13px; }
.mmc-pchead { display:flex; align-items:center; gap:11px; }
.mmc-pchead .mmc-av { flex:0 0 40px; }
/* the card shows the WHOLE game icon (user 2026-09-15): no rounding or cropping, edges feathered into the card, a soft shadow */
.mmc-pchead .mmc-av.mmc-avimg { display:block; flex:0 0 77px; width:77px; height:60px; border-radius:0; background:none; filter:drop-shadow(0 5px 9px rgba(0,0,0,.45)); }
.mmc-pchead .mmc-av.mmc-avimg img { display:block; object-fit:contain; border-radius:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  mask-composite:intersect; }
.mmc-pcwho { min-width:0; display:flex; flex-direction:column; gap:3px; }
.mmc-pcnamerow { display:flex; align-items:center; gap:7px; min-width:0; }
.mmc-pcnamerow .mmc-flag { width:17px; height:12.75px; }
.mmc-pcname { min-width:0; font:700 16px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mmc-pcstate { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--fg3); }
.mmc-pcstate:empty, .mmc-pc-load i { display:none; }
.mmc-pcstate i { width:7px; height:7px; border-radius:50%; background:var(--fg3); flex:0 0 auto; }
.mmc-pc-lobby i { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.mmc-pc-room i, .mmc-pc-game i { background:var(--mmc-gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-gold) 22%, transparent); }
.mmc-pc-web i { background:var(--mmc-web); box-shadow:0 0 0 3px color-mix(in srgb, var(--mmc-web) 20%, transparent); }
.mmc-pc-away i { background:var(--warn); }
.mmc-pc-off i { background:transparent; box-shadow:inset 0 0 0 1.5px var(--fg3); }
/* version: the game and whether it is Enhanced on the left, the minor version as its own pill on the right */
.mmc-pcver { display:flex; align-items:center; gap:10px; margin-top:11px; padding:8px 8px 8px 11px; border-radius:11px; background:var(--mmc-track); box-shadow:inset 0 0 0 1px var(--mmc-edge); }
.mmc-pcverl { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.mmc-pcverk { font:600 9.5px/1 system-ui,sans-serif; letter-spacing:1.3px; text-transform:uppercase; color:var(--fg3); }
.mmc-pcverv { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.mmc-pcgame { font:700 14px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif; white-space:nowrap; }
.mmc-pcgame.mmc-pcee2 { color:var(--mmc-gold); } .mmc-pcgame.mmc-pcaos { color:var(--mmc-web); }
.mmc-pcflav { padding:2px 7px; border-radius:6px; font:600 11px/1.2 system-ui,sans-serif; color:var(--fg2); background:color-mix(in srgb, var(--fg) 8%, transparent); white-space:nowrap; }
.mmc-pcflav.mmc-pcenh { color:var(--fg); background:linear-gradient(90deg, color-mix(in srgb, #febc34 22%, transparent), color-mix(in srgb, #39d3b6 18%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #febc34 38%, transparent); }
.mmc-pcflav.mmc-pcenh::before { content:"✦ "; color:var(--mmc-gold); }
.mmc-pcminor { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 9px; border-radius:9px;
  background:color-mix(in srgb, var(--bg2) 70%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 16%, transparent); }
.mmc-pcminor span { font:600 8.5px/1 system-ui,sans-serif; letter-spacing:1.1px; text-transform:uppercase; color:var(--fg3); }
.mmc-pcminor b { font:700 13px/1 var(--mono); color:var(--fg); letter-spacing:.3px; }
.mmc-pcmod { margin-top:6px; font-size:12px; color:var(--fg2); }
.mmc-pcstats { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:11px; border-radius:11px; overflow:hidden; background:var(--mmc-edge); }
.mmc-pcstat { display:flex; flex-direction:column; gap:3px; padding:8px 10px 9px; background:color-mix(in srgb, var(--bg2) 72%, transparent); min-width:0; }
.mmc-pcstat span { font:600 9.5px/1.15 system-ui,sans-serif; letter-spacing:.8px; text-transform:uppercase; color:var(--fg3); }
.mmc-pcstat b { font:700 14px/1.15 system-ui,-apple-system,"Segoe UI",sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mmc-pcstat small { font:10.5px/1 var(--mono); color:var(--fg3); }
/* the two ratings: the panel's gold-to-teal duo, in mono numerals */
.mmc-pcstat.mmc-pcrate b { font:700 22px/1 var(--mono); letter-spacing:-.5px; background:var(--mmc-duo); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mmc-pcfacts { margin-top:9px; }
.mmc-pcfacts > div { display:flex; justify-content:space-between; gap:12px; padding:4px 1px; font-size:12px; border-bottom:1px dotted var(--mmc-edge); }
.mmc-pcfacts > div:last-child { border-bottom:0; }
.mmc-pcfacts span { color:var(--fg3); white-space:nowrap; }
.mmc-pcfacts b { font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere; }
.mmc-pcspecial { margin-top:8px; padding:6px 9px; border-radius:9px; font-size:12px; font-style:italic; color:var(--fg2);
  background:linear-gradient(90deg, color-mix(in srgb, var(--mmc-gold) 10%, transparent), transparent); }
.mmc-pcload { margin-top:10px; font-size:12px; color:var(--fg3); }
.mmc-pop.mmc-popcard { width:304px; max-width:calc(100vw - 16px); padding:0 0 5px; overflow:hidden; }
.mmc-pop.mmc-popcard > button, .mmc-pop.mmc-popcard > small { margin:0 5px; width:calc(100% - 10px); }
.mmc-popslot { border-bottom:1px solid var(--mmc-edge); margin-bottom:5px; }

/* resize handles */
.mmc-rz { position:absolute; z-index:5; }
#mmc:not(.mmc--window) .mmc-rz { display:none; }
.mmc-rz[data-d="n"], .mmc-rz[data-d="s"] { left:12px; right:12px; height:8px; cursor:ns-resize; }
.mmc-rz[data-d="e"], .mmc-rz[data-d="w"] { top:12px; bottom:12px; width:8px; cursor:ew-resize; }
.mmc-rz[data-d="n"] { top:-3px; } .mmc-rz[data-d="s"] { bottom:-3px; } .mmc-rz[data-d="e"] { right:-3px; } .mmc-rz[data-d="w"] { left:-3px; }
.mmc-rz[data-d$="e"][data-d^="n"], .mmc-rz[data-d$="w"][data-d^="s"] { width:16px; height:16px; cursor:nesw-resize; }
.mmc-rz[data-d$="w"][data-d^="n"], .mmc-rz[data-d$="e"][data-d^="s"] { width:16px; height:16px; cursor:nwse-resize; }
.mmc-rz[data-d="ne"] { top:-4px; right:-4px; } .mmc-rz[data-d="nw"] { top:-4px; left:-4px; } .mmc-rz[data-d="se"] { bottom:-4px; right:-4px; } .mmc-rz[data-d="sw"] { bottom:-4px; left:-4px; }

/* narrow window: private becomes list -> conversation */
#mmc.mmc--window:not(.mmc-wide) .mmc-threads { width:100%; flex:1 1 auto; border-left:0; }
#mmc.mmc--window:not(.mmc-wide) .mmc-private.mmc-inconv .mmc-threads { display:none; }
#mmc.mmc--window:not(.mmc-wide) .mmc-private:not(.mmc-inconv) .mmc-conv { display:none; }
#mmc.mmc--window:not(.mmc-wide) .mmc-back, #mmc.mmc-mobile .mmc-back { display:grid; }

/* link confirm + overlays */
.mmc-modal { position:fixed; inset:0; z-index:72; display:grid; place-items:center; padding:16px; background:rgba(8,12,18,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation: mmc-fade .15s; }
.mmc-card { width:min(440px, 100%); background:var(--bg2); border:1px solid var(--line); border-radius:16px; box-shadow:var(--mmc-shadow); padding:20px 20px 16px; }
.mmc-card h3 { margin:0 0 6px; font-weight:650; font-size:18px; }
.mmc-card p { margin:0 0 12px; color:var(--fg2); }
.mmc-url { font:13px/1.45 var(--mono); padding:10px 12px; border-radius:10px; background:var(--bg3); overflow-wrap:anywhere; color:var(--fg3); }
.mmc-url b { color:var(--fg); font-weight:700; }
.mmc-acts { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.mmc-acts button { border-radius:10px; padding:8px 14px; border:1px solid var(--line); background:var(--bg3); cursor:pointer; }
.mmc-acts .mmc-go { background:var(--mmc-ink); border-color:var(--mmc-ink); color:var(--mmc-on-ink) !important; }
@keyframes mmc-fade { from { opacity:0; } }
.mmc-pop { position:fixed; z-index:40; min-width:180px; max-width:260px; padding:5px; border-radius:12px; background:var(--mmc-glass); border:1px solid var(--mmc-edge); box-shadow:var(--mmc-shadow); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
.mmc-pop > b { display:block; padding:6px 10px 4px; font-size:13px; }
.mmc-pop > small { display:block; padding:2px 10px 7px; font-size:12px; color:var(--fg3); }
.mmc-pop > button { display:block; width:100%; text-align:left; border:0; background:none; padding:7px 10px; border-radius:8px; cursor:pointer; }
.mmc-pop > button:hover { background:var(--mmc-glass2); }

.mmc-gate { position:absolute; inset:0; z-index:6; display:grid; place-items:center; text-align:center; padding:24px; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg2) 70%, transparent) 40%); }
.mmc-gate > div { max-width:300px; }
.mmc-gate b { display:block; font-weight:650; font-size:18px; margin-bottom:6px; }
.mmc-gate p { color:var(--fg2); margin:0 0 14px; }
.mmc-gate button { border:0; border-radius:12px; padding:10px 18px; cursor:pointer; color:#fff !important; font-weight:600; background:var(--mmc-ink); color:var(--mmc-on-ink) !important; }
.mmc-blurred > .mmc-pane { filter: blur(3.5px) saturate(.9); pointer-events:none; user-select:none; }

/* ---- the top bar on small screens (app.css drops the section tabs to their own line under 900px) ------- */
@media (max-width: 900px) {
  .top .mmc-top { height:32px; padding:0 11px 0 8px; margin-left:0; font-size:13px; }
}

/* ---- phone: its own layout, not a shrunk window --------------------------------------------------- */
@media (max-width: 700px) {
  .top .mmc-top { padding:0 9px; }
  .mmc-top .mmc-toplabel { display:none; }
  #mmc.mmc-mobile.mmc--window .mmc-win, #mmc.mmc-mobile.mmc--full .mmc-win { left:0; right:auto; top:0; bottom:auto; width:100vw; max-width:100vw; border-radius:0; border:0; z-index:38;
    padding-bottom: env(safe-area-inset-bottom); height: var(--mmc-vvh, 100dvh); }
  #mmc.mmc-mobile .mmc-head { padding:calc(8px + env(safe-area-inset-top)) 8px 8px 12px; }
  #mmc.mmc-mobile .mmc-seg { display:none; }
  #mmc.mmc-mobile.mmc--window .mmc-title, #mmc.mmc-mobile .mmc-title { display:block; }
  #mmc.mmc-mobile .mmc-title small { display:inline; }
  #mmc.mmc-mobile .mmc-tools { margin-left:auto; }
  #mmc.mmc-mobile .mmc-meridian { right:60px; }
  #mmc.mmc-mobile .mmc-tools .mmc-desk { display:none; }
  #mmc.mmc-mobile .mmc-tabbar { display:flex; }
  #mmc.mmc-mobile .mmc-people { display:none; }
  #mmc.mmc-mobile.mmc-showpeople .mmc-people { display:block; position:absolute; inset:43px 0 0 0; width:auto; z-index:3; background:var(--bg2); border:0; }
  #mmc.mmc-mobile .mmc-threads { width:100%; flex:1 1 auto; border-left:0; }
  #mmc.mmc-mobile .mmc-private.mmc-inconv .mmc-threads { display:none; }
  #mmc.mmc-mobile .mmc-private:not(.mmc-inconv) .mmc-conv { display:none; }
  #mmc.mmc-mobile .mmc-private.mmc-inconv .mmc-conv { animation: mmc-push .24s cubic-bezier(.2,.8,.2,1); }
  #mmc.mmc-mobile .mmc-compose input { height:44px; font-size:16px; }
  #mmc.mmc-mobile .mmc-send { width:44px; height:44px; }
  #mmc.mmc-mobile .mmc-line { grid-template-columns:36px auto minmax(0, 1fr); column-gap:6px; padding-right:12px; }
  #mmc.mmc-mobile .mmc-nick { max-width:9em; }
  #mmc.mmc-mobile .mmc-srcico { width:9px; height:9px; margin-right:2px; }
  #mmc.mmc-mobile .mmc-srcico.mmc-srcgame { width:11px; height:11px; margin-right:.5px; }
  #mmc.mmc-mobile .mmc-srcico.mmc-srcgame-ee2 { background-size:8.2px 10px; } #mmc.mmc-mobile .mmc-srcico.mmc-srcgame-aos { background-size:9px 9px; }
  #mmc.mmc-mobile .mmc-grp { grid-template-columns:38px minmax(0, max-content); column-gap:6px; padding-right:10px; }
}
@keyframes mmc-push { from { transform: translateX(28px); opacity:.4; } }
.mmc-tabbar { display:none; gap:4px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border-top:1px solid var(--mmc-edge); background:var(--mmc-glass); }
.mmc-tabbar button { position:relative; flex:1; height:46px; border-radius:12px; border:0; background:none; display:flex; align-items:center; justify-content:center; gap:8px;
  font:600 14.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important; color:var(--fg3) !important; }
.mmc-tabbar button svg { width:18px; height:18px; }
.mmc-tabbar button { border:1px solid transparent !important; }
.mmc-tabbar button[aria-selected="true"] { color:var(--fg) !important;
  background: linear-gradient(var(--mmc-raise), var(--mmc-raise)) padding-box,
              conic-gradient(from var(--mmc-spin,0deg), var(--accent), #39d3b6, #febc34, var(--accent)) border-box; }
.mmc-tabbar button[aria-selected="true"] svg { color:var(--mmc-gold); }


@media (prefers-reduced-motion: reduce) {
  .top .mmc-top, .mmc-top .mmc-emo, .mmc-top::before, .mmc-bump, .mmc-meridian ellipse, .mmc-tword, .mmc-tword svg { animation:none !important; }
  .mmc-line, .mmc-grp, .mmc-grp *, .mmc-toast, .mmc-seg-ink, .mmc-send { animation:none !important; transition:none !important; }
  .mmc-tp, .mmc-rail, .mmc-tpbtn svg path, .mmc-emowrap, .mmc-pc { animation:none !important; transition:none !important; }
  .mmc-eq i { animation:none !important; height:70%; }
}
@media (prefers-reduced-transparency: reduce) {
  .mmc-win, .mmc-toast, .mmc-pop, .mmc-found { background:var(--bg2) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}