/* v1.9.0: compact slot picker, multi-match slot copy, modern manage sheets, achievements v2, teams hub,
 * friends global search, all-stats sheet. Theme tokens only; rgba tints (older Android WebViews drop color-mix). */

/* ---------- slot picker: fold the big grid once a slot is picked ---------- */
.sl-picker.sl-folded .sl-grid, .sl-picker.sl-folded .sl-legend, .sl-picker.sl-folded .sl-summary { display: none !important; }
.sl-chosen { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; border: 1px solid var(--sm-success, #3ecf8e);
  background: linear-gradient(135deg, rgba(62, 207, 142, .18), var(--sm-glass-raised, rgba(255, 255, 255, .04))); }
.sl-chosen-num { flex: none; min-width: 58px; height: 58px; padding: 0 8px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 900; color: #0b1a12; background: var(--sm-success, #3ecf8e); font-variant-numeric: tabular-nums; }
.sl-chosen-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sl-chosen-text small { color: var(--sm-muted, #aeb8c7); }
.sl-change { flex: none; min-height: 40px; }
.sl-pop { animation: v19-pop .32s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes v19-pop { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }

.ms-lobby-wrap { margin-top: 10px; border-radius: 16px; border: 1px solid var(--sm-line, rgba(255, 255, 255, .1)); background: var(--sm-glass-raised, rgba(255, 255, 255, .03)); padding: 0 10px; }
.ms-lobby-wrap > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 800; }
.ms-lobby-wrap > summary::-webkit-details-marker { display: none; }
.ms-lobby-wrap > summary small { color: var(--sm-muted, #aeb8c7); font-weight: 600; }
.ms-lobby-wrap > summary i { margin-left: auto; font-style: normal; transition: transform .2s; }
.ms-lobby-wrap[open] > summary i { transform: rotate(180deg); }
.ms-lobby-wrap[open] { padding-bottom: 10px; }

@media (prefers-reduced-motion: reduce) { .sl-pop { animation: none; } .ms-lobby-wrap > summary i { transition: none; } }

/* ---------- same slot for every match of an event ---------- */
.ms-event-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 12px; padding: 12px; border-radius: 16px;
  border: 1px dashed rgba(246, 196, 69, .55); background: rgba(246, 196, 69, .08); }
.ms-event-copy > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 160px; }
.ms-event-copy small, .ms-same-all small { color: var(--sm-muted, #aeb8c7); font-weight: 500; }
.ms-event-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: rgba(246, 196, 69, .18); color: var(--primary, #f6c445); }
.ms-same-all { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--sm-line, rgba(255, 255, 255, .1)); cursor: pointer; }
.ms-same-all input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--primary, #f6c445); flex: none; }
.ms-same-all span { display: grid; gap: 2px; }

/* ---------- achievements v2 (practice / public sets, five difficulties) ---------- */
.ach2 { --d: #8fd3a8; display: grid; gap: 12px; }
.ach2-d-easy { --d: #8fd3a8; --d2: #3ecf8e; }
.ach2-d-hard { --d: #7db4ff; --d2: #3d7dff; }
.ach2-d-harder { --d: #c79bff; --d2: #8a4dff; }
.ach2-d-near { --d: #ffb36b; --d2: #ff6a3d; }
.ach2-d-impossible { --d: #ff6b8a; --d2: #f6c445; }
:root[data-theme="light"] .ach2-ladder b, :root[data-theme="light"] .ach2-chip small, :root[data-theme="light"] .ach2-sec h4 { color: color-mix(in srgb, var(--d2) 70%, #000); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .ach2-ladder b, :root:not([data-theme]) .ach2-chip small, :root:not([data-theme]) .ach2-sec h4 { color: color-mix(in srgb, var(--d2) 70%, #000); } }
.ach2-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ach2-score { display: grid; line-height: 1.05; }
.ach2-score b { font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #f6c445, #ff8a4c); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .ach2-score b { background: linear-gradient(90deg, #a87a00, #c4501a); -webkit-background-clip: text; background-clip: text; }
.ach2-score small { color: var(--sm-muted, #aeb8c7); font-size: .72rem; }
.ach2-tabs { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--on-surface, #fff) 6%, transparent); border: 1px solid var(--sm-line, rgba(255, 255, 255, .1)); }
.ach2-tabs button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--sm-muted, #aeb8c7); font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
.ach2-tabs button small { font-weight: 700; opacity: .8; }
.ach2-tabs button.is-on { background: var(--primary, #f6c445); color: #1a1405; }
.ach2-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ach2-ladder span { display: grid; gap: 3px; min-width: 0; }
.ach2-ladder i { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--on-surface, #fff) 10%, transparent); position: relative; overflow: hidden; }
.ach2-ladder i::after { content: ''; position: absolute; inset: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--d), var(--d2)); animation: ach2-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.ach2-ladder small { font-size: .6rem; color: var(--sm-muted, #aeb8c7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach2-ladder b { font-size: .72rem; color: var(--d); }
.ach2-next { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--sm-line, rgba(255, 255, 255, .08)); background: linear-gradient(135deg, color-mix(in srgb, var(--on-surface, #fff) 6%, transparent), color-mix(in srgb, var(--on-surface, #fff) 1%, transparent)); color: inherit; }
.ach2-next > span:not(.ach2-medal) { display: grid; gap: 3px; flex: 1; min-width: 0; }
.ach2-next small { color: var(--sm-muted, #aeb8c7); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach2-bar { display: block; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--on-surface, #fff) 10%, transparent); overflow: hidden; }
.ach2-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--d), var(--d2)); animation: ach2-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
.ach2-done { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 800; color: var(--primary, #f6c445); }
.ach2-done svg { width: 20px; height: 20px; fill: currentColor; }
.ach2-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.ach2-row::-webkit-scrollbar { display: none; }
.ach2-chip { flex: none; width: 86px; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: 16px; background: transparent; color: inherit; text-align: center;
  animation: ach2-in .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ach2-chip b { font-size: .74rem; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach2-chip small { font-size: .6rem; color: var(--d); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ach2-chip:not(.is-on) b { color: var(--sm-muted, #aeb8c7); }
.ach2-chip:active { transform: scale(.94); }
.ach2-medal { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.ach2-medal > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ach2-track { fill: none; stroke: color-mix(in srgb, var(--on-surface, #fff) 12%, transparent); stroke-width: 4; }
.ach2-ring { fill: none; stroke: var(--d); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--o); animation: ach2-ring 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.ach2-core { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--on-surface, #fff) 6%, transparent); color: var(--sm-muted, #8a94a6); }
.ach2-core svg { width: 22px; height: 22px; fill: currentColor; }
.ach2-medal.is-on .ach2-core { background: radial-gradient(circle at 35% 30%, var(--d), var(--d2)); color: #10131a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 6px 18px -6px var(--d2); }
.ach2-medal.is-on.ach2-d-impossible .ach2-core, .ach2-medal.is-on.ach2-d-near .ach2-core { animation: ach2-glow 2.6s ease-in-out infinite; }
.ach2-shine { position: absolute; inset: 8px; border-radius: 50%; overflow: hidden; pointer-events: none; }
.ach2-shine::after { content: ''; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: ach2-shine 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 180ms); }
.ach2-chip.is-new .ach2-medal { animation: ach2-burst .9s cubic-bezier(.2, .9, .3, 1.4) both; }
.ach2-chip.is-new::after { content: 'NEW'; position: relative; margin-top: 2px; padding: 1px 6px; border-radius: 999px; font-size: .55rem; font-weight: 900; background: var(--primary, #f6c445); color: #1a1405; }
.ach2-sm { width: 46px; height: 46px; flex: none; } .ach2-sm .ach2-core { width: 32px; height: 32px; } .ach2-sm .ach2-core svg { width: 18px; height: 18px; }
.ach2-big { width: 110px; height: 110px; justify-self: center; } .ach2-big .ach2-core { width: 80px; height: 80px; } .ach2-big .ach2-core svg { width: 40px; height: 40px; }
.ach2-all { min-height: 44px; }
.ach2-all svg { width: 18px; height: 18px; fill: currentColor; margin-right: 6px; vertical-align: -3px; }
.ach2-sheet { max-height: 70vh; overflow-y: auto; }
.ach2-sheet-sum { margin: 0; color: var(--sm-muted, #aeb8c7); }
.ach2-sec h4 { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; color: var(--d); }
.ach2-sec h4 i { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--d), var(--d2)); }
.ach2-sec h4 small { margin-left: auto; color: var(--sm-muted, #aeb8c7); font-weight: 600; }
.ach2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ach2-grid .ach2-chip { width: auto; }
.ach2-detail { text-align: center; justify-items: center; }
.ach2-detail p { margin: 0; }
.ach2-detail .ach2-bar { width: 100%; max-width: 280px; }
.ach2-diff { color: var(--d); font-weight: 800; }
.ach2--loading { grid-template-columns: repeat(4, 1fr); }
.ach2--loading i { height: 76px; border-radius: 16px; background: color-mix(in srgb, var(--on-surface, #fff) 6%, transparent); animation: ach2-pulse 1.2s ease-in-out infinite; }
@keyframes ach2-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ach2-ring { from { stroke-dashoffset: var(--c); } }
@keyframes ach2-grow { from { transform: translateX(-100%); } }
@keyframes ach2-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes ach2-glow { 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .2), 0 0 22px 2px var(--d2); } }
@keyframes ach2-burst { 0% { transform: scale(.3) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: none; } }
@keyframes ach2-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ach2 *, .ach2 *::after { animation: none !important; } }

/* ---------- v1.9.0 player stats ("All stats") ---------- */
.pse--v190 .pse-head { padding: 14px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #f6c445) 22%, transparent), color-mix(in srgb, var(--primary, #f6c445) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--primary, #f6c445) 30%, var(--sm-line)); }
.pse--v190 .pse-head__txt { min-width: 0; }
.pse-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary, #f6c445); }
.pse-eyebrow svg { width: 14px; height: 14px; }
.pse--v190 .pse-head h1 { font-size: 22px; }
.pse-live { color: var(--primary, #f6c445); font-weight: 700; }
.pse-filterbar { gap: 10px; }
.pse-frow { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.pse-flabel { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); }
.pse-flabel svg { width: 14px; height: 14px; flex: none; }
.pse-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; min-width: 0; }
.pse-chips::-webkit-scrollbar { display: none; }
.pse-chip { flex: none; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--sm-line); background: transparent; color: var(--on-surface); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.pse-chip:active { transform: scale(.96); }
.pse-chip.is-on { background: color-mix(in srgb, var(--primary, #f6c445) 18%, transparent); border-color: var(--primary, #f6c445); color: var(--on-surface); }
.pse-filterbar .pse-filters:empty { display: none; }
.pse-clear { justify-self: start; }
.pse-hero { background: linear-gradient(160deg, color-mix(in srgb, var(--primary, #f6c445) 10%, var(--sm-glass)), var(--sm-glass)); }
.pse-hero__top h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pse-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--primary, #f6c445) 20%, transparent); color: var(--on-surface); }
.pse-tag svg { width: 12px; height: 12px; }
.pse-hero__big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pse-big { display: grid; gap: 2px; padding: 12px 8px; border-radius: 16px; text-align: center; background: color-mix(in srgb, var(--on-surface) 6%, transparent); min-width: 0; animation: pse-pop .35s ease both; }
.pse-big:nth-child(2) { animation-delay: .04s; } .pse-big:nth-child(3) { animation-delay: .08s; } .pse-big:nth-child(4) { animation-delay: .12s; }
.pse-big b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pse-big small { font-size: 10.5px; font-weight: 700; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pse-trend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 700; }
.pse-trend svg { width: 16px; height: 16px; color: var(--primary, #f6c445); flex: none; }
@keyframes pse-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 360px) { .pse-hero__big { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pse-frow { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pse-big { animation: none; } }

/* ---------- v1.9.0 Teams: My team / Discover ---------- */
.tm-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 16px; background: var(--sm-glass, rgba(255,255,255,.04)); border: 1px solid var(--sm-line, rgba(255,255,255,.08)); }
.tm-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--on-surface-variant); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: color .2s; }
.tm-tab svg { width: 18px; height: 18px; }
.tm-tab em { font-style: normal; font-size: 11px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--primary, #f6c445) 25%, transparent); color: var(--on-surface); }
.tm-tab.is-on { color: var(--on-primary, #1a1400); }
.tm-tab.is-on em { background: var(--surface, #fff); color: var(--on-surface, #111); }
.tm-tabs__ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 12px; background: var(--primary, #f6c445); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary, #f6c445) 35%, transparent); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.tm-tabs:has(.tm-tab[data-tab="discover"].is-on) .tm-tabs__ink { transform: translateX(calc(100% + 4px)); }
.tm-panel { display: grid; gap: 12px; animation: tm-in .25s ease both; }
@keyframes tm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tm-hero { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--primary, #f6c445) 35%, var(--sm-line, transparent)); background: linear-gradient(150deg, color-mix(in srgb, var(--primary, #f6c445) 18%, var(--surface-container, #15171d)), var(--surface-container, #15171d) 70%); }
.tm-hero__glow { position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary, #f6c445) 35%, transparent), transparent 70%); pointer-events: none; animation: tm-glow 6s ease-in-out infinite alternate; }
@keyframes tm-glow { from { transform: translate(0, 0); opacity: .7; } to { transform: translate(-30px, 20px); opacity: 1; } }
.tm-hero__top { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-hero__logo .sm-avatar { width: 58px; height: 58px; border-radius: 16px; }
.tm-hero__t { flex: 1; min-width: 0; }
.tm-hero__t .eyebrow { margin: 0; color: var(--primary, #f6c445); }
.tm-hero__t h3 { margin: 2px 0; font-size: 22px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-hero__t small { color: var(--on-surface-variant); font-size: 13px; }
.tm-fav { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--sm-line, rgba(255,255,255,.1)); background: color-mix(in srgb, var(--on-surface, #fff) 6%, var(--surface, transparent)); color: var(--primary, #f6c445); font-size: 18px; cursor: pointer; }
.tm-tiles { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; border: 1px solid var(--sm-line, rgba(255,255,255,.08)); background: color-mix(in srgb, var(--on-surface, #fff) 6%, var(--surface, transparent)); color: var(--on-surface); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .12s, border-color .15s; min-width: 0; }
.tm-tile span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tm-tile:active { transform: scale(.96); }
.tm-tile:hover { border-color: color-mix(in srgb, var(--primary, #f6c445) 50%, transparent); }
.tm-tile__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--primary, #f6c445) 18%, transparent); color: var(--primary, #f6c445); }
.tm-tile__ic svg { width: 20px; height: 20px; }
.tm-hero__open { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; }
.tm-hero__open svg { width: 18px; height: 18px; }
.tm-stats { margin: 0; }
.tm-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; text-align: center; border-radius: 22px; border: 1px dashed var(--sm-line, rgba(255,255,255,.14)); background: var(--sm-glass, transparent); }
.tm-empty > svg { width: 42px; height: 42px; color: var(--primary, #f6c445); }
.tm-empty h3 { margin: 0; font-size: 18px; }
.tm-empty p { margin: 0; color: var(--on-surface-variant); font-size: 13.5px; max-width: 34ch; }
.tm-row .sm-avatar { flex: none; }
.tm-invite h3 { display: flex; align-items: center; gap: 8px; }
.tm-invite h3 svg { width: 18px; height: 18px; color: var(--primary, #f6c445); }
@media (max-width: 340px) { .tm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .tm-hero__glow, .tm-panel { animation: none; } .tm-tabs__ink { transition: none; } }

/* ---------- v1.9.0 Manage match / Edit scrim / Times & maps ---------- */
.mm-v190 { display: grid; gap: 12px; }
.mm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mm-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: capitalize; letter-spacing: .02em; background: rgba(90,130,230,.16); color: color-mix(in srgb, #6f9bff 65%, var(--on-surface)); }
.mm-pill--warn { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.mm-pill--live { background: rgba(255,80,80,.18); color: color-mix(in srgb, #ff5a5a 70%, var(--on-surface)); animation: mm-pulse 1.6s ease-in-out infinite; }
.mm-pill--ok { background: rgba(70,200,120,.16); color: color-mix(in srgb, #3fbf75 70%, var(--on-surface)); }
.mm-pill--bad { background: rgba(255,90,90,.12); color: color-mix(in srgb, #ff6a6a 70%, var(--on-surface)); }
@keyframes mm-pulse { 50% { box-shadow: 0 0 0 5px rgba(255,80,80,.0), 0 0 12px rgba(255,80,80,.35); } }
.mm-when { display: inline-flex; align-items: center; gap: 5px; color: var(--on-surface-variant); font-size: 12.5px; font-weight: 600; }
.mm-when svg { width: 14px; height: 14px; }
.mm-card { display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--sm-line, rgba(255,255,255,.08)); background: var(--sm-glass, rgba(255,255,255,.03)); }
.sm-match-manage.mm-v190 .mm-card form, .mm-form { display: grid; gap: 10px; padding: 0; border: 0; }
.mm-card__h { display: flex; align-items: flex-start; gap: 10px; }
.mm-card__h h3 { margin: 0; font-size: 15px; font-weight: 800; }
.mm-card__h p { margin: 2px 0 0; color: var(--on-surface-variant); font-size: 12.5px; line-height: 1.4; }
.mm-card__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--primary, #f6c445) 16%, transparent); color: var(--primary, #f6c445); }
.mm-card__ic svg { width: 18px; height: 18px; }
.mm-card--late h4 { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.mm-card--late h4 small { color: var(--on-surface-variant); font-weight: 600; }
.mm-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-btn-row .btn { flex: 1 1 120px; }
.mm-wide { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mm-wide svg { width: 18px; height: 18px; }
.mm-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mm-chip { display: grid; justify-items: center; gap: 0; min-height: 50px; padding: 6px 2px; border-radius: 14px; border: 1px solid var(--sm-line, rgba(255,255,255,.1)); background: color-mix(in srgb, var(--on-surface, #fff) 6%, var(--surface, transparent)); color: var(--on-surface); font: inherit; font-size: 16px; font-weight: 900; cursor: pointer; transition: transform .12s, border-color .15s, background .15s; }
.mm-chip small { font-size: 10.5px; font-weight: 700; color: var(--on-surface-variant); }
.mm-chip:hover:not(:disabled) { border-color: var(--primary, #f6c445); background: color-mix(in srgb, var(--primary, #f6c445) 12%, transparent); }
.mm-chip:active:not(:disabled) { transform: scale(.94); }
.mm-chip:disabled { opacity: .45; cursor: not-allowed; }
.mm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; border: 0; }
.mm-seg .sm-choice { margin: 0; }
.mm-player small { color: var(--on-surface-variant); margin-left: 4px; }
.mm-muted { margin: 0; color: var(--on-surface-variant); font-size: 12.5px; font-weight: 500; }
.mm-cap { display: grid; gap: 4px; }
.mm-cap input { max-width: 120px; font-size: 18px; font-weight: 800; text-align: center; }
.mm-hint b { color: var(--on-surface); }
.mm-switch { margin: 0; }
.sm-scrim-manage .mm-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-scrim-manage .mm-toolbar > .btn, .sm-scrim-manage .mm-toolbar > button { width: 100%; min-height: 44px; margin: 0; border-radius: 14px; white-space: normal; line-height: 1.2; }
.sm-scrim-manage .mm-toolbar > .btn.danger { grid-column: 1 / -1; }
@media (min-width: 640px) { .sm-scrim-manage .mm-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 360px) { .mm-two, .mm-seg { grid-template-columns: 1fr; } .mm-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mm-pill--live { animation: none; } }

/* ---------- v1.9.0 Friends: search anyone, friends first ---------- */
.fr-search { display: grid; gap: 4px; margin-bottom: 14px; }
.fr-group h4 small { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: var(--sm-glass, rgba(255,255,255,.06)); color: var(--on-surface-variant); }
.fr-tag { display: inline-flex; align-items: center; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.fr-tag--friend { background: rgba(70,200,120,.16); color: color-mix(in srgb, #3fbf75 70%, var(--on-surface)); }
.fr-tag--other { background: color-mix(in srgb, var(--on-surface) 7%, transparent); color: var(--on-surface-variant); }
.fr-result--friend { border-color: rgba(70,200,120,.28); }
.fr-result .sm-friend-actions .btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.fr-note { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--on-surface-variant); font-size: 12.5px; }
.fr-note svg { flex: none; width: 15px; height: 15px; }
.fr-group h4 { margin: 10px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--on-surface-variant); }