/*
 * Friends panel — v1.2.5
 *
 * Rewritten to use the plugin's design tokens from core.css instead of
 * a hand-picked Material palette. The shortcode root carries the
 * standard `.mg-themed` + `.mg-theme-clean | .mg-theme-arcade` classes
 * so the panel inherits the same dark / pixel-art chassis that
 * scoreboards, lobbies, and game frames use everywhere else.
 *
 * Buttons compose with `.mg-btn` (core.css ~line 380) — same neon-tube
 * border + glow that every other plugin button uses. Variants (Play /
 * Join / Decline / Add) just pick the right .mg-btn-- modifier or set
 * a color, never re-invent the chassis.
 *
 * No hardcoded colors. Online dot uses `--mg-green`, danger actions
 * use `--mg-red`, match-invite tint uses `--mg-orange`. Accents trail
 * the user's chosen `--mg-accent` (theme picker) automatically.
 *
 * Arcade theme: Cubic 11 pixel font kicks in via `var(--mg-display)`
 * + `var(--mg-body)`; corners get the tighter `var(--mg-radius)` (4px
 * vs clean's 10px); existing `.mg-btn` rules already swap to the
 * scanline / glow variants in arcade automatically.
 */

/* ============================================================
   Root chassis
   ============================================================ */
.mg-friends {
    /* v1.3.2: width matches the other shortcodes. .mg-frame and
       .mg-scoreboard (assets/core.css) don't set max-width either —
       they're width:auto and fill the parent container. The earlier
       max-width:480px + margin:auto centering made the friends panel
       conspicuously narrower than the scoreboard / game frame sitting
       beside it on the same page. Width is now whatever the
       surrounding page/column gives us, same as the others. */
    background: var(--mg-bg);
    color: var(--mg-ink);
    font-family: var(--mg-body);
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-radius);
    margin: 16px 0;
    overflow: hidden;
    /* v1.3.6: match .mg-frame's box-sizing so a theme that injects
       arbitrary widths into our chassis doesn't render us wider than
       its sibling shortcodes. Without this declaration the cascade
       falls back to whatever the user's theme sets globally — which
       is sometimes content-box, sometimes border-box, and produces
       chassis-width drift relative to .mg-frame (which IS explicitly
       border-box). Same defensive reset for list-style — some themes
       wrap shortcodes in <li> elements and inherit list-item padding,
       which manifests as a sneaky few-pixel offset that looks like
       "the friends panel is wider on phones". */
    box-sizing: border-box;
    list-style: none;
}

.mg-friends--logged-out {
    padding: var(--mg-pad);
    text-align: center;
    color: var(--mg-ink-muted);
    font-family: var(--mg-body);
}

/* ============================================================
   Header — tabs + visibility toggle
   ============================================================ */
.mg-friends__header {
    display: flex;
    align-items: stretch;
    background: var(--mg-bg-2);
    border-bottom: 1px solid var(--mg-line);
}
.mg-friends__tabs {
    display: flex;
    flex: 1;
}
.mg-friends__tab {
    flex: 1;
    /* v1.3.1: more breathing room. Was 12px×8px → too cramped for
       finger taps, and Chinese characters at 13px need vertical air
       to not feel squashed. 16px top/bottom gives a 44px touch
       target that meets mobile-tap guidelines. Horizontal padding
       kept generous so the count pill doesn't crowd the label. */
    padding: 16px 14px;
    /* v1.6.5: defensive bg:transparent !important. Reported screenshot
       showed an orange fill on hover/active — caused by a WP site
       theme rule like `button:hover { background: <brand-color> }`
       winning on specificity grounds over our `background: transparent`
       declaration. Same defensive pattern .mg-friends__btn now uses. */
    background: transparent !important;
    border: none !important;
    /* v1.6.3: defensive border-radius: 0 — WP themes sometimes apply
       a global button { border-radius: 999px } that turns every tab
       into an unwanted pill. Reported as "好醜". */
    border-radius: 0 !important;
    color: var(--mg-ink-muted) !important;
    font-family: var(--mg-body);
    font-size: 13px;
    font-weight: 600;
    /* v1.3.1: wider letter-spacing improves Chinese character
       legibility — CJK glyphs without spacing read as a wall of
       ink. The arcade theme override below pushes it further. */
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 150ms ease, border-bottom-color 150ms ease;
    border-bottom: 2px solid transparent !important;
    /* v1.3.1: flex-align label + count so the count pill sits on
       the same baseline as the label and doesn't drop a half-pixel
       below on sub-pixel rendering. gap replaces .mg-friends__count
       margin-left.
       v1.6.3: bumped gap 8 → 10 for more breathing space between
       label and count badge. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* v1.6.2: suppress browser default focus ring (the red rounded
       outline that mobile Firefox / WebKit add on tap looked like a
       second styling layer competing with the .is-active state).
       Keyboard users get a proper :focus-visible ring below. */
    -webkit-tap-highlight-color: transparent !important;
    outline: none;
}
.mg-friends__tab:focus-visible {
    /* Accessibility-friendly focus ring for keyboard navigation —
       only shown when :focus-visible matches (keyboard, not pointer). */
    outline: 2px solid var(--mg-accent);
    outline-offset: -3px;
}
.mg-theme-arcade .mg-friends__tab {
    font-family: var(--mg-display);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 12px;
}
.mg-friends__tab:hover {
    /* v1.6.5: defensive !important on bg + color. Without these,
       a site theme with `button:hover { background: <brand>;
       color: <brand-ink> }` wins on specificity and fills the
       tab with brand color — reported as a full-orange-fill
       screenshot that looked broken. */
    background: transparent !important;
    color: var(--mg-ink) !important;
}
/* v1.6.2: active state is now ONLY the colored bottom border + ink
   shift (no background fill). The earlier `background: var(--mg-bg-3)`
   created a filled-cell look that competed visually with the count
   pill, and on mobile Firefox the tap-state focus ring layered on
   top making the active tab look like a rounded pill while the
   inactive ones were flat — the inconsistency reported in v1.6.1.
   v1.6.5: !important added so site themes can't reintroduce a fill. */
.mg-friends__tab.is-active {
    background: transparent !important;
    color: var(--mg-accent) !important;
    border-bottom-color: var(--mg-accent) !important;
}
.mg-theme-arcade .mg-friends__tab.is-active {
    text-shadow: 0 0 6px var(--mg-accent-glow);
}

.mg-friends__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v1.6.3: cleaner count display. Previously this was a filled
       pill (`bg: var(--mg-bg-3)`) which created a tiny dark capsule
       next to every tab label. Reported as "中間沒有任何呼吸空間
       整個堆在一起". New treatment: plain accent-colored text by
       default for the friends-count (a positive signal — "you have
       N friends"); the badge variant below still uses a filled red
       pill so 邀請 alerts pop as a real notification signal. */
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    color: var(--mg-accent);
    background: transparent;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.mg-friends__count--badge {
    /* Real alert: filled red pill. */
    background: var(--mg-red);
    color: #fff;
    border-radius: 999px;
    padding: 0 6px;
    height: 16px;
    line-height: 16px;
    min-width: 16px;
    font-size: 11px;
    /* Subtle red glow so the badge reads as "active alert" not
       "decoration", especially in arcade theme. */
    box-shadow: 0 0 6px rgba(217, 43, 43, 0.5);
}
/* Arcade theme: square corners on the badge (the rest of the
   arcade UI uses square corners; the rounded pill looked
   inconsistent in screenshots). */
.mg-theme-arcade .mg-friends__count--badge {
    border-radius: 0;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4),
                0 0 8px var(--mg-accent-glow);
}
/* v1.6.2 retained: any zero count hides entirely. */
.mg-friends__count.is-zero,
.mg-friends__count--badge.is-zero {
    display: none;
}

/* Visibility toggle — uses ghost-button styling so it doesn't compete
   with the tabs visually. Icon swaps via ::before in JS state.
   v1.3.1: match the new tab letter-spacing + gap so the header reads
   as one rhythm instead of "tabs + bolted-on extra".
   v1.6.3: defensive square + no focus ring. WP themes sometimes apply
   button { border-radius: 999px } and the tap-focus outline added a
   competing rounded pill that the screenshot showed as visual noise. */
.mg-friends__visibility {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--mg-line) !important;
    border-radius: 0 !important;
    padding: 0 16px;
    color: var(--mg-ink-muted) !important;
    font-family: var(--mg-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 150ms ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.mg-friends__visibility:focus-visible {
    outline: 2px solid var(--mg-accent);
    outline-offset: -3px;
}
.mg-theme-arcade .mg-friends__visibility {
    font-family: var(--mg-display);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 11px;
}
.mg-friends__visibility::before {
    content: "👁";
    font-size: 14px;
}
.mg-friends__visibility:hover {
    /* v1.6.3: removed bg fill on hover — just color shift. Filled
       hover state was reported as ugly.
       v1.6.5: !important — same site-theme defense as the tabs. */
    background: transparent !important;
    color: var(--mg-ink) !important;
}
.mg-friends__visibility.is-invisible {
    color: var(--mg-yellow);
}
.mg-friends__visibility.is-invisible::before {
    content: "🙈";
}

/* ============================================================
   Panes / lists
   ============================================================ */
.mg-friends__body {
    max-height: 480px;
    overflow-y: auto;
}
.mg-friends__pane {
    display: none;
    /* v1.3.6: bumped from var(--mg-pad-sm) [12px] to var(--mg-pad)
       [18px] so the body content sits at roughly the same inset from
       the chassis edge as in .mg-frame (28×24 padding) and
       .mgs-combined (20px padding). The previous 12px inset made the
       friends-panel content look "wider" / more spread out than
       neighbouring shortcodes on the same page — the chassis widths
       matched, but the rows, search input, and section headers
       reached visibly closer to the chassis edges than the
       surrounding game frame's content did. */
    padding: var(--mg-pad);
}
.mg-friends__pane.is-active {
    display: block;
}
.mg-friends__section-title {
    margin: 8px 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--mg-ink-subtle);
    font-family: var(--mg-body);
}
.mg-theme-arcade .mg-friends__section-title {
    font-family: var(--mg-display);
    letter-spacing: 0.18em;
    font-size: 12px;
}
.mg-friends__section-title:first-child { margin-top: 0; }

.mg-friends__empty {
    margin: 12px 0;
    padding: 12px;
    text-align: center;
    color: var(--mg-ink-subtle);
    font-size: 13px;
}
/* v1.3.0: bigger version for the Pending tab's single consolidated
   empty state — replaces three stacked "no X" empty messages. Centered
   and roomier so the pane doesn't look broken / "is anything here?". */
.mg-friends__empty--big {
    margin: 40px 0;
    padding: 20px;
    font-size: 14px;
    color: var(--mg-ink-muted);
}

/* Search input */
.mg-friends__search-input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--mg-line);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-bg-2);
    color: var(--mg-ink);
    font-family: var(--mg-body);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mg-friends__search-input::placeholder {
    color: var(--mg-ink-subtle);
}
.mg-friends__search-input:focus {
    outline: none;
    border-color: var(--mg-accent);
    box-shadow: 0 0 0 3px var(--mg-accent-soft);
}

/* v1.14.70: harden against host-theme CSS leaking in. Some site
   themes ship a generic `input:focus`/`input:hover` rule (often a red
   validation-style border) that overrode the plugin's themed focus
   ring because their selector won on specificity or used !important.
   Re-assert the themed border/glow at a higher specificity (the
   `.mg-friends` ancestor) and force the colour so the input always
   follows the plugin theme, never the surrounding page. Scoped to
   this one input — no other host styles are touched. */
.mg-friends .mg-friends__search-input,
.mg-friends.mg-themed .mg-friends__search-input {
    border-color: var(--mg-line) !important;
}
.mg-friends .mg-friends__search-input:hover,
.mg-friends.mg-themed .mg-friends__search-input:hover {
    border-color: var(--mg-line-strong) !important;
}
.mg-friends .mg-friends__search-input:focus,
.mg-friends.mg-themed .mg-friends__search-input:focus {
    outline: none !important;
    border-color: var(--mg-accent) !important;
    box-shadow: 0 0 0 3px var(--mg-accent-soft) !important;
}

/* ============================================================
   User row
   ============================================================ */
.mg-friends__row {
    /* v1.4.0: row is now a vertical flex container — the existing
       horizontal content sits in .mg-friends__row-main, and optional
       sub-panels (H2H stats) sit below it as a sibling. Previously
       the row was itself the horizontal flex and there was no place
       to put expandable content without overflowing the layout. */
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid var(--mg-line);
    transition: background 100ms ease;
}
.mg-friends__row-main {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mg-friends__row:last-child {
    border-bottom: none;
}
.mg-friends__row:hover {
    background: var(--mg-bg-2);
}
.mg-friends__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mg-bg-3);
    border: 1px solid var(--mg-line);
    flex-shrink: 0;
}
.mg-theme-arcade .mg-friends__avatar {
    border-radius: var(--mg-radius-xs);
    image-rendering: pixelated;
}
.mg-friends__meta {
    flex: 1;
    min-width: 0;
}
.mg-friends__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mg-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--mg-body);
}
.mg-theme-arcade .mg-friends__name {
    font-family: var(--mg-display);
    letter-spacing: 0.02em;
}
.mg-friends__online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mg-green);
    box-shadow: 0 0 4px var(--mg-green);
    flex-shrink: 0;
}
.mg-friends__sub {
    font-size: 11px;
    color: var(--mg-ink-subtle);
    margin-top: 2px;
}
/* v1.4.0: "Playing <Game>" status line — uses the accent (cyan or
   theme color) to draw the eye, signalling "this friend is busy
   right now". Same font-size as default sub but more saturated. */
.mg-friends__sub--playing {
    color: var(--mg-accent);
    font-weight: 600;
}

/* v1.4.0: head-to-head stats panel — lazy-expanded below a friend
   row when the user taps the Stats button. Sits as a sibling of
   .mg-friends__row-main inside the row's column flex. */
.mg-friends__h2h {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--mg-bg-2);
    border-radius: var(--mg-radius-sm);
    font-size: 12px;
    color: var(--mg-ink-muted);
    line-height: 1.5;
}
.mg-friends__h2h.is-loading,
.mg-friends__h2h.is-error {
    color: var(--mg-ink-subtle);
    text-align: center;
}
.mg-friends__h2h.is-error {
    color: var(--mg-red);
}
.mg-friends__h2h-empty {
    margin: 0;
    text-align: center;
    color: var(--mg-ink-subtle);
}
.mg-friends__h2h-summary {
    color: var(--mg-ink);
    font-weight: 600;
    margin-bottom: 6px;
}
.mg-friends__h2h-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.mg-friends__h2h-table td {
    padding: 3px 0;
    font-size: 11px;
}
.mg-friends__h2h-game {
    color: var(--mg-ink-muted);
}
.mg-friends__h2h-record {
    text-align: right;
    font-family: var(--mg-display, monospace);
    color: var(--mg-ink);
    font-variant-numeric: tabular-nums;
}
/* v1.14.47: rows where no h2h match has been played yet sit dimmed.
   Lets the eye land on real history first while still conveying
   the full inventory of available PvP games at a glance.
   v1.14.61: the W/L/D section migrated from `__h2h-table` (compact
   "0勝-2負" one-cell form) to `__h2h-scores` (3-column comparison
   form matching the other sections). Both class hierarchies kept
   here so the dimming still fires for the zero-row pad rows. */
.mg-friends__h2h-table tr.is-empty .mg-friends__h2h-game,
.mg-friends__h2h-table tr.is-empty .mg-friends__h2h-record,
.mg-friends__h2h-scores tr.is-empty .mg-friends__h2h-game,
.mg-friends__h2h-scores tr.is-empty .mg-friends__h2h-mine,
.mg-friends__h2h-scores tr.is-empty .mg-friends__h2h-theirs {
    opacity: 0.45;
}

/* v1.6.5: best-scores comparison section. Sits below the PvP
   matches table when both exist; appears standalone when the pair
   has only played single-player games (no shared PvP history). */
.mg-friends__h2h-section {
    margin: 12px 0 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mg-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--mg-line);
}
.mg-theme-arcade .mg-friends__h2h-section {
    font-family: var(--mg-display);
    letter-spacing: 0.10em;
}
.mg-friends__h2h-scores {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.mg-friends__h2h-scores td,
.mg-friends__h2h-scores th {
    padding: 3px 6px;
    font-size: 11px;
}
.mg-friends__h2h-scores-header th {
    color: var(--mg-ink-subtle);
    font-weight: 600;
    text-align: right;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--mg-line);
}
.mg-friends__h2h-scores-header th:first-child {
    text-align: left;
}
.mg-friends__h2h-mine,
.mg-friends__h2h-theirs {
    text-align: right;
    font-family: var(--mg-display, monospace);
    font-variant-numeric: tabular-nums;
    color: var(--mg-ink-muted);
    /* Equal-width-ish — keeps numbers from jumping around between
       different score magnitudes (12 vs 12,345 vs 01:23.45). */
    min-width: 70px;
    white-space: nowrap;
}
/* Winner cell highlighted green. `only_me` / `only_them` also
   classed as is-winner — meaningful signal that THIS user has
   played the game and the other hasn't. */
.mg-friends__h2h-mine.is-winner,
.mg-friends__h2h-theirs.is-winner {
    color: var(--mg-green);
    font-weight: 700;
}
/* v1.7.13: the head-to-head tables are <table> elements with no
   background of their own, so they were inheriting the site
   theme's table skin — a pale grey cell fill (and pale borders)
   that looked washed-out and too light inside the dark panel.
   Pin them to the plugin's own surface: transparent cells let the
   panel's --mg-bg-2 (a proper dark grey) show through uniformly,
   and any theme-drawn borders are retinted to the on-theme
   --mg-line. !important because the theme styles `td`/`th`
   directly and a plain class would lose to a themed element rule
   that uses !important. */
.mg-friends__h2h-table,
.mg-friends__h2h-scores,
.mg-friends__h2h-table thead,
.mg-friends__h2h-scores thead,
.mg-friends__h2h-table tbody,
.mg-friends__h2h-scores tbody,
.mg-friends__h2h-table tr,
.mg-friends__h2h-scores tr,
.mg-friends__h2h-table td,
.mg-friends__h2h-table th,
.mg-friends__h2h-scores td,
.mg-friends__h2h-scores th {
    background: transparent !important;
    border-color: var(--mg-line);
}

/* ============================================================
   Action buttons — compose with .mg-btn from core.css
   ============================================================
   Tile-style smaller variant (we override .mg-btn's default padding
   to fit the row). The default .mg-btn ghost styling (transparent
   bg + border + accent text) is what we want for neutral actions;
   accent variants pile on for primary/destructive states.
   ============================================================ */
.mg-friends__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.mg-friends__btn {
    /* v1.6.4: rebuilt to match `.mg-btn` patterns from core.css —
     * the in-game button vocabulary. Reported as inconsistent with
     * the rest of the plugin; this brings the row-action buttons
     * into the same neon-tube border + uppercase / letter-spaced
     * label + active-tap flash family.
     *
     * Defensive `!important` on color + background + border because
     * the screenshot also reported a broken hover state ("戰績 hover
     * 字是黑色 背景也黑色"). Root cause: WordPress themes commonly
     * apply `button:hover { background: <theme-color>; color:
     * <theme-color> }` rules that the previous declarations couldn't
     * outweigh on specificity grounds. Tap-highlight transparent
     * also fixes the Android Chrome dark-overlay flash on tap.
     */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent !important;
    /* 1.5px border = neon-tube look matching .mg-btn */
    border: 1.5px solid var(--mg-line-strong) !important;
    color: var(--mg-ink) !important;
    font-family: var(--mg-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: var(--mg-radius-xs) !important;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    position: relative;
    transition:
        border-color .18s ease,
        color        .18s ease,
        background   .18s ease,
        box-shadow   .18s ease,
        transform    .04s ease;
    user-select: none;
    -webkit-user-select: none;
    /* Kill the dark tap-overlay on Android Chrome — was making
       the button briefly black-on-black during taps. */
    -webkit-tap-highlight-color: transparent !important;
    outline: none;
}
.mg-friends__btn:focus-visible {
    outline: 2px solid var(--mg-accent);
    outline-offset: 2px;
}
.mg-theme-arcade .mg-friends__btn {
    font-family: var(--mg-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}
.mg-friends__btn:hover {
    /* Subtle white wash + brighter border — same pattern as .mg-btn. */
    border-color: var(--mg-ink) !important;
    color: var(--mg-ink) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.mg-friends__btn:active {
    /* Sharp flash on press — matches .mg-btn:active so the row
       buttons feel like the in-game buttons mechanically. */
    transform: translateY(1px);
    box-shadow:
        0 0 12px 2px rgba(255, 255, 255, 0.20),
        inset 0 0 8px rgba(255, 255, 255, 0.14);
}
.mg-friends__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Primary actions (Add friend / Accept / Play / Join) — accent-tinted,
   matches .mg-btn--ghost / --primary patterns in core.css.
   v1.6.4: !important on color + border so variant accents survive
   site-theme button rules. Without it, the variant tint loses to
   the defensive `color: var(--mg-ink) !important` on the base
   `.mg-friends__btn` above. */
.mg-friends__btn--add,
.mg-friends__btn--accept {
    color: var(--mg-accent) !important;
    border-color: var(--mg-accent) !important;
}
.mg-friends__btn--add:hover,
.mg-friends__btn--accept:hover {
    background: transparent !important;
    border-color: var(--mg-accent) !important;
    color: var(--mg-accent) !important;
    box-shadow: 0 0 6px var(--mg-accent-glow);
}

/* v1.6.9: Message — the primary social action on a friend row.
   Accent-tinted so it reads as the obvious "start chatting" entry
   point. Added because users couldn't find where to begin a DM:
   the DM panel's conversation list is empty for a never-messaged
   friend, so this per-row button is the way in. */
.mg-friends__btn--message {
    color: var(--mg-accent) !important;
    border-color: var(--mg-accent) !important;
}
.mg-friends__btn--message:hover {
    background: transparent !important;
    border-color: var(--mg-accent) !important;
    color: var(--mg-accent) !important;
    box-shadow: 0 0 6px var(--mg-accent-glow);
}

/* Play <Game> — green to read as "go". Uses --mg-green from the
   game-palette tokens, not accent (accent is user-customizable;
   game-palette tokens are fixed across the install). */
.mg-friends__btn--play {
    color: var(--mg-green) !important;
    border-color: var(--mg-green) !important;
}
.mg-friends__btn--play:hover {
    background: color-mix(in srgb, var(--mg-green) 12%, transparent) !important;
    border-color: var(--mg-green) !important;
    color: var(--mg-green) !important;
}

/* Join (match invite) — uses --mg-cyan to distinguish from Play
   ("Play" is invite-out, "Join" is accept-invite-in). */
.mg-friends__btn--join {
    color: var(--mg-cyan) !important;
    border-color: var(--mg-cyan) !important;
}
.mg-friends__btn--join:hover {
    background: color-mix(in srgb, var(--mg-cyan) 12%, transparent) !important;
    border-color: var(--mg-cyan) !important;
    color: var(--mg-cyan) !important;
}

/* Destructive actions */
.mg-friends__btn--unfriend,
.mg-friends__btn--block,
.mg-friends__btn--decline,
.mg-friends__btn--cancel {
    color: var(--mg-red) !important;
    border-color: color-mix(in srgb, var(--mg-red) 50%, var(--mg-line-strong)) !important;
}
.mg-friends__btn--unfriend:hover,
.mg-friends__btn--block:hover,
.mg-friends__btn--decline:hover,
.mg-friends__btn--cancel:hover {
    background: color-mix(in srgb, var(--mg-red) 12%, transparent) !important;
    border-color: var(--mg-red) !important;
    color: var(--mg-red) !important;
}

/* v1.6.4: neutral 戰績 (Stats / h2h) — explicit because it has no
   variant class and was inheriting the base which couldn't outweigh
   site theme `button:hover` rules. Reported as black-text-on-black-
   background broken hover state. */
.mg-friends__btn--h2h {
    color: var(--mg-ink) !important;
    border-color: var(--mg-line-strong) !important;
}
.mg-friends__btn--h2h:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--mg-ink) !important;
    color: var(--mg-ink) !important;
}

/* ============================================================
   Match invite row — special tint via --mg-orange to draw attention
   ============================================================ */
.mg-friends__row--invite {
    background: color-mix(in srgb, var(--mg-orange) 8%, transparent);
    border-left: 3px solid var(--mg-orange);
}
.mg-friends__row--invite:hover {
    background: color-mix(in srgb, var(--mg-orange) 14%, transparent);
}
.mg-friends__sub--invite {
    color: var(--mg-orange);
    font-weight: 600;
}
.mg-theme-arcade .mg-friends__sub--invite {
    text-shadow: 0 0 4px color-mix(in srgb, var(--mg-orange) 50%, transparent);
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 540px) {
    /* v1.3.3: match the 12px horizontal inset that .mg-frame and
       .mgs-combined use on mobile (core.css line ~1170). Without
       this our chassis stuck to the screen edges while the game
       frame next to it was inset 12px — friends panel looked
       conspicuously wider on phones. 16px vertical kept (same as
       desktop) so the rhythm between stacked shortcodes is the
       same as everywhere else.
    */
    .mg-friends {
        margin: 16px 12px;
    }
    .mg-friends__tab {
        /* v1.3.1: keep the same 44px touch target on mobile. Was
           reducing padding to 10×4 — too tight, taps on neighbouring
           tabs were easy. Reduce horizontal a little to fit narrower
           viewport, but keep vertical generous. */
        font-size: 12px;
        padding: 14px 8px;
        letter-spacing: 0.04em;
        gap: 6px;
    }
    .mg-friends__visibility {
        padding: 0 12px;
        font-size: 11px;
    }
    .mg-friends__btn {
        padding: 7px 12px;
        font-size: 13px;
    }
    .mg-friends__avatar {
        width: 36px;
        height: 36px;
    }
    /* v1.7.5: on phones the row's action buttons wrap onto their
       own line below the avatar + name. A friends row carries up to
       3-4 buttons (Message / Play / Stats / Unfriend); inline with
       the name they squeezed the username down to a few ellipsised
       characters. Two rows now — line 1: avatar + full-width name,
       line 2: the buttons. The 10px row-main gap doubles as the
       gap between the two lines once it wraps. */
    .mg-friends__row-main {
        flex-wrap: wrap;
    }
    .mg-friends__actions {
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* v1.3.3: very narrow viewports (phones < 400px). At this width the
   four header items (3 tabs + visibility toggle) can't fit their
   labels side-by-side without clipping. Hide the visibility toggle's
   text label and keep just the 👁 / 🙈 icon — the icon alone is
   universally legible and reclaims ~50px for the tabs. */
@media (max-width: 399px) {
    .mg-friends__visibility {
        padding: 0 10px;
    }
    .mg-friends__visibility [data-visibility-label] {
        display: none;
    }
    .mg-friends__tab {
        padding: 14px 6px;
        font-size: 11px;
        letter-spacing: 0.02em;
    }
}

/* =====================================================================
 * Reduced motion (v1.7.20)
 *
 * friends.css had no prefers-reduced-motion handling. Scoped to the
 * friends block and the head-to-head panel (which friends.js may
 * mount as a standalone element) so both are covered regardless of
 * where the h2h panel is attached in the DOM.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mg-friends, .mg-friends *,
    .mg-friends__h2h, .mg-friends__h2h * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}