:root {
            --danger:      #ff6b6b;
            --success:     #4ade80;
            --warning:     #fbbf24;
            --accent-glow: rgba(109, 93, 252, 0.35);
            --chip-bg:     #e8ecf1;
        }
        body.dark-mode {
            --danger:      #ff8a8a;
            --success:     #6ee7b7;
            --warning:     #fde047;
            --accent-glow: rgba(147, 112, 219, 0.45);
            --chip-bg:     #252538;
        }

        /* ── Page heading ── */
        .page-header {
            display: flex; align-items: center; gap: 15px;
            margin-bottom: 30px; font-size: 2.2rem; font-weight: 700;
            color: var(--primary-dark); flex-wrap: wrap;
        }
        .page-header i { color: var(--primary-accent); }

        /* ── Multiplayer cards ── */
        .multiplayer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px; margin-bottom: 40px;
        }
        .mp-card {
            background: var(--primary-bg);
            border-radius: 25px; padding: 30px;
            box-shadow: var(--neumorphic-shadow);
            transition: transform 0.3s ease;
        }
        .mp-card:hover { transform: translateY(-5px); }
        .mp-card-header {
            display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
        }
        .mp-icon {
            width: 60px; height: 60px; border-radius: 18px;
            background: linear-gradient(135deg, var(--primary-accent), var(--primary-dark));
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; color: white; flex-shrink: 0;
        }
        .mp-title { font-size: 1.4rem; font-weight: 700; }
        .mp-divider {
            height: 1px; background: var(--border-light); margin: 20px 0;
        }

        .neumorphic-btn.success {
            background: linear-gradient(135deg, var(--success), #22c55e);
            color: white;
        }
        .neumorphic-btn.danger {
            background: linear-gradient(135deg, var(--danger), #ef4444);
            color: white;
        }
        .btn-outline {
            background: transparent !important;
            border: 2px solid var(--primary-accent) !important;
            color: var(--primary-accent);
            box-shadow: none !important;
        }
        .btn-outline:hover {
            box-shadow: var(--neumorphic-inset) !important;
            background: rgba(109, 93, 252, 0.05) !important;
        }

        .input-group { display: flex; gap: 10px; flex-wrap: wrap; }
        .input-field {
            flex: 1;
            background: var(--primary-bg); border: none; border-radius: 50px;
            padding: 12px 18px; font-size: 1rem; color: var(--text-dark);
            box-shadow: var(--neumorphic-inset); outline: none;
            font-family: 'Poppins', sans-serif;
        }
        .input-field:focus { box-shadow: var(--neumorphic-shadow); }

        .room-code {
            font-family: monospace; font-size: 1.5rem; letter-spacing: 4px;
            background: var(--primary-bg); padding: 10px; border-radius: 12px;
            box-shadow: var(--neumorphic-inset); text-align: center; margin: 15px 0;
            color: var(--primary-accent); font-weight: 700;
        }

        .lobby-table { width: 100%; text-align: left; border-collapse: collapse; }
        .lobby-table th, .lobby-table td {
            padding: 12px 5px; border-bottom: 1px solid var(--border-light);
        }
        .lobby-table th { font-weight: 600; color: var(--primary-accent); }

        /* ── Overlays / modals ── */
        .overlay-base {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            z-index: 2000;
            display: flex; align-items: center; justify-content: center;
            animation: fadeInOverlay 0.3s ease;
        }
        @keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
        .modal-box {
            background: var(--primary-bg); border-radius: 30px;
            padding: 35px 30px;
            box-shadow: var(--neumorphic-shadow), 0 20px 60px rgba(0,0,0,0.3);
            max-width: 750px; width: 94%; max-height: 88vh; overflow-y: auto;
            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .modal-box-sm { max-width: 480px; }

        .circular-progress-container { position: relative; width: 180px; height: 180px; margin: 0 auto 20px; }
        .circular-progress { transform: rotate(-90deg); width: 180px; height: 180px; }
        .circular-progress .bg-circle { fill: none; stroke: #c1c8d1; stroke-width: 10; }
        body.dark-mode .circular-progress .bg-circle { stroke: #3d3d55; }
        .circular-progress .progress-circle {
            fill: none; stroke: var(--primary-accent); stroke-width: 10;
            stroke-linecap: round; stroke-dasharray: 502.65; stroke-dashoffset: 502.65;
            transition: stroke-dashoffset 0.15s linear;
            filter: drop-shadow(0 0 6px var(--accent-glow));
        }
        .brain-smile-wrapper {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            font-size: 64px;
            animation: brainPulse 1.2s ease-in-out infinite, brainWiggle 0.6s ease-in-out infinite;
            filter: drop-shadow(0 8px 16px rgba(109,93,252,0.4));
        }
        @keyframes brainPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.15); } }
        @keyframes brainWiggle { 0%,100% { transform: translate(-50%,-50%) rotate(0deg); } 25% { transform: translate(-50%,-50%) rotate(-5deg); } 75% { transform: translate(-50%,-50%) rotate(5deg); } }

        .matchmaking-title { font-size: 1.4rem; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
        .matchmaking-subtitle { font-size: 0.9rem; opacity: 0.7; color: var(--text-dark); margin-bottom: 12px; }
        .matchmaking-stats { display: flex; justify-content: center; gap: 24px; font-size: 0.85rem; opacity: 0.85; }
        .matchmaking-stats span { display: flex; align-items: center; gap: 6px; }
        .matchmaking-stats i { color: var(--primary-accent); }

        .lobby-header-icon { font-size: 50px; animation: brainPulse 1.5s ease-in-out infinite; display: inline-block; margin-bottom: 8px; }
        .lobby-room-code {
            font-family: monospace; font-size: 1.8rem; letter-spacing: 6px;
            background: var(--primary-bg); padding: 12px 20px; border-radius: 14px;
            box-shadow: var(--neumorphic-inset); display: inline-block; margin: 10px 0;
            color: var(--primary-accent); font-weight: 700;
        }
        .lobby-players { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 20px 0; }
        .lobby-player-slot {
            width: 70px; height: 70px; border-radius: 50%;
            background: var(--primary-bg); box-shadow: var(--neumorphic-inset);
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; color: var(--primary-accent); position: relative;
        }
        .lobby-player-slot.filled { box-shadow: var(--neumorphic-shadow); animation: slotFilled 0.5s ease; }
        @keyframes slotFilled { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .lobby-player-slot .slot-badge {
            position: absolute; bottom: -4px; right: -4px;
            width: 20px; height: 20px; border-radius: 50%;
            background: var(--success); border: 2px solid var(--primary-bg);
            font-size: 10px; display: flex; align-items: center; justify-content: center;
            color: white;
        }
        .lobby-player-slot.empty-slot { color: rgba(128,128,128,0.4); font-size: 22px; }
        .lobby-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

        .countdown-bar { height: 6px; background: rgba(0,0,0,0.08); border-radius: 10px; margin: 15px 0; overflow: hidden; }
        body.dark-mode .countdown-bar { background: rgba(255,255,255,0.08); }
        .countdown-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-accent), var(--primary-dark));
            border-radius: 10px; transition: width 1s linear; width: 100%;
        }

        /* ── Room Config (Create Private Room popup) ── */
        /* Sticky header + footer with a scrollable body so the action buttons
           are always reachable, even with many custom questions. */
        /* The box itself does NOT scroll; only the body does — that keeps the
           header and footer pinned without nested/overlapping scrollbars. */
        .room-config-box { display: flex; flex-direction: column; padding: 0; max-width: 720px; overflow: hidden; }
        .room-config-head {
            text-align: center; padding: 28px 30px 16px;
            background: var(--primary-bg); border-radius: 30px 30px 0 0;
            flex: 0 0 auto;
        }
        .room-config-emoji { font-size: 44px; display: inline-block; }
        .room-config-body { padding: 4px 30px 10px; overflow-y: auto; flex: 1 1 auto; }
        .room-config-foot {
            display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
            padding: 16px 30px 24px;
            position: sticky; bottom: 0; z-index: 2;
            background: var(--primary-bg); border-radius: 0 0 30px 30px;
            box-shadow: 0 -8px 18px -12px rgba(0,0,0,0.25);
        }
        .room-config-foot .neumorphic-btn { flex: 1 1 160px; max-width: 260px; }

        .config-section { margin-bottom: 22px; }
        .config-label { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .config-label i { color: var(--primary-accent); font-size: 1rem; }
        .config-count-pill {
            margin-left: auto; font-size: 0.78rem; font-weight: 600;
            background: var(--primary-bg); box-shadow: var(--neumorphic-inset);
            padding: 3px 12px; border-radius: 30px; color: var(--primary-accent);
        }

        .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
        .topic-chip {
            background: var(--chip-bg); border: 2px solid transparent; border-radius: 14px;
            padding: 11px 9px; text-align: center; cursor: pointer;
            font-size: 0.8rem; font-weight: 500; color: var(--text-dark);
            box-shadow: var(--neumorphic-shadow); transition: var(--transition);
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            font-family: 'Poppins', sans-serif; -webkit-user-select: none; user-select: none;
        }
        .topic-chip:hover { box-shadow: var(--neumorphic-inset); border-color: var(--primary-accent); }
        .topic-chip.selected {
            background: linear-gradient(135deg, var(--primary-accent), var(--primary-dark));
            color: #fff; border-color: transparent;
            box-shadow: var(--neumorphic-shadow), 0 0 18px var(--accent-glow);
        }
        .topic-chip .topic-emoji { font-size: 1.5rem; }

        /* Responsive auto-fitting grid of labelled selects. */
        .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
        .config-field { display: flex; flex-direction: column; gap: 5px; }
        .config-field-label { font-size: 0.78rem; opacity: 0.7; font-weight: 500; }
        .config-select {
            width: 100%;
            background: var(--primary-bg); border: none; border-radius: 50px;
            padding: 12px 18px; font-size: 0.9rem; font-weight: 500; color: var(--text-dark);
            box-shadow: var(--neumorphic-inset); outline: none; cursor: pointer;
            font-family: 'Poppins', sans-serif;
            -webkit-appearance: none; appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d5dfc' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
        }
        .config-select:focus { box-shadow: var(--neumorphic-shadow); }

        .config-add-btn { margin-top: 12px; width: 100%; }
        .config-add-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

        /* Summary as wrap-friendly pills instead of a pipe-separated sentence. */
        .config-summary {
            display: flex; flex-wrap: wrap; gap: 8px;
            background: var(--primary-bg); border-radius: 16px; padding: 14px;
            box-shadow: var(--neumorphic-inset);
        }
        .summary-chip {
            font-size: 0.8rem; opacity: 0.9;
            background: var(--chip-bg); box-shadow: var(--neumorphic-shadow);
            padding: 6px 12px; border-radius: 30px;
        }
        .summary-chip strong { color: var(--primary-accent); }
        .summary-chip--total { background: linear-gradient(135deg, var(--primary-accent), var(--primary-dark)); }
        .summary-chip--total, .summary-chip--total strong { color: #fff; }

        .question-card {
            background: var(--primary-bg); border-radius: 20px; padding: 18px;
            box-shadow: var(--neumorphic-inset); margin-bottom: 15px; position: relative;
        }
        .question-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .question-card-header h4 { font-size: 0.95rem; font-weight: 600; }
        .remove-question-btn {
            background: var(--danger); color: white; border: none; border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            font-size: 14px; box-shadow: var(--neumorphic-shadow);
        }
        .image-preview-small { max-width: 80px; max-height: 60px; border-radius: 10px; margin-top: 6px; display: none; }

        /* Custom-question card internals (class-based layout, responsive). */
        .custom-q-text { margin-top: 4px; }
        .custom-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
        .custom-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
        .custom-correct-label { font-size: 0.85rem; font-weight: 500; }
        .custom-correct { width: auto; min-width: 92px; padding: 9px 34px 9px 16px; }
        .custom-image-btn { cursor: pointer; padding: 9px 16px; }
        .image-file-name { font-size: 0.8rem; opacity: 0.7; }
        @media (max-width: 480px) {
            .custom-opt-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .multiplayer-grid { grid-template-columns: 1fr; }
            .topic-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; }
            .topic-chip { padding: 9px 6px; font-size: 0.7rem; border-radius: 10px; }
            .topic-chip .topic-emoji { font-size: 1.2rem; }
            .config-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
            .modal-box { padding: 24px 16px; border-radius: 22px; max-height: 92vh; }
            .lobby-player-slot { width: 55px; height: 55px; font-size: 22px; }
            .circular-progress-container,
            .circular-progress { width: 140px; height: 140px; }
            .brain-smile-wrapper { font-size: 48px; }

            /* The room-config modal manages its own padding via head/body/foot
               so it can keep a sticky header & footer — override the generic rule. */
            .room-config-box { padding: 0; max-height: 94vh; }
            .room-config-head { padding: 22px 18px 12px; }
            .room-config-body { padding: 4px 18px 8px; }
            .room-config-foot { padding: 14px 18px 20px; }
            .room-config-foot .neumorphic-btn { flex: 1 1 100%; max-width: none; }
        }

        @media (max-width: 420px) {
            .config-grid { grid-template-columns: 1fr; }
            .topic-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
        }

        /* ════════════════════════════════════════
           NEW INTERACTIVE ENHANCEMENTS
        ════════════════════════════════════════ */

        /* ── Grid: explicit 3 columns on desktop ── */
        .multiplayer-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        /* ── Stats Banner ── */
        .mp-stats-banner {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 32px;
        }
        .mp-stat-item {
            background: var(--primary-bg);
            box-shadow: var(--neumorphic-shadow);
            border-radius: 18px;
            padding: 20px 16px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        .mp-stat-item:hover { transform: translateY(-4px); }
        .mp-stat-num {
            display: block;
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-accent);
            line-height: 1;
            margin-bottom: 7px;
        }
        .mp-stat-label {
            font-size: 0.78rem;
            opacity: 0.65;
            font-weight: 500;
        }

        /* ── Card sub-header & description ── */
        .mp-subtitle { font-size: 0.83rem; opacity: 0.6; margin-top: 2px; }
        .mp-desc     { font-size: 0.88rem; opacity: 0.78; line-height: 1.6; margin-bottom: 16px; }
        .mp-action-btn { width: 100%; justify-content: center; margin-bottom: 14px; }
        .mp-meta-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.88rem;
            opacity: 0.8;
        }

        /* ── Icon colour variants ── */
        .mp-icon--bolt   { background: linear-gradient(135deg, #6d5dfc, #3d35b5); }
        .mp-icon--green  { background: linear-gradient(135deg, #4ade80, #16a34a); }
        .mp-icon--purple { background: linear-gradient(135deg, #c084fc, #9333ea); }

        /* ── Room-code lock icon ── */
        .room-code-lock { font-size: 0.85rem; opacity: 0.4; }

        /* ── Quick-match topic chips ── */
        .qm-topic-row {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 16px;
            /* With 20+ topics the row can grow tall — cap its height and let it
               scroll so the card stays compact and balanced with its siblings. */
            max-height: 136px;
            overflow-y: auto;
            padding-right: 4px;
            /* thin, subtle scrollbar (Firefox) */
            scrollbar-width: thin;
            scrollbar-color: var(--primary-accent) transparent;
        }
        .qm-topic-row::-webkit-scrollbar { width: 6px; }
        .qm-topic-row::-webkit-scrollbar-thumb {
            background: var(--primary-accent);
            border-radius: 3px;
        }
        .qm-topic-row::-webkit-scrollbar-track { background: transparent; }
        .qm-chip {
            background: var(--primary-bg);
            box-shadow: var(--neumorphic-shadow);
            border: none;
            border-radius: 20px;
            padding: 6px 13px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text-dark);
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;       /* keep emoji + label on one line */
            flex: 0 0 auto;
        }
        .qm-chip:hover { transform: translateY(-2px); }
        .qm-chip.active {
            background: var(--primary-accent);
            color: #fff;
            box-shadow: 0 3px 10px rgba(109,93,252,0.4);
        }

        /* ── Capacity bar (shared by lobby cards) ── */
        .cap-bar-wrap {
            height: 6px;
            background: var(--primary-bg);
            box-shadow: var(--neumorphic-inset);
            border-radius: 3px;
            overflow: hidden;
            margin: 8px 0 12px;
        }
        .cap-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-accent), #a78bfa);
            border-radius: 3px;
            transition: width 0.7s ease;
            min-width: 2px;
        }
        .cap-bar-fill--full {
            background: linear-gradient(90deg, var(--danger), #ef4444);
        }

        /* ── Live Lobbies section ── */
        .lobbies-section { margin-bottom: 40px; }
        .lobbies-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 22px;
        }
        .lobbies-title-wrap { display: flex; align-items: center; gap: 12px; }
        .section-title-mp {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }
        .section-title-mp i { color: var(--primary-accent); }
        .live-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--danger);
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 11px;
            border-radius: 20px;
            letter-spacing: 0.5px;
            position: relative;
        }
        /* Pulsing "live" dot */
        .live-badge .live-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
            animation: liveDotPulse 1.6s ease-out infinite;
        }
        @keyframes liveDotPulse {
            0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); opacity: 1; }
            70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); opacity: 0.85; }
            100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .live-badge .live-dot { animation: none; }
        }
        .refresh-btn { font-size: 0.82rem; padding: 8px 16px; }
        .lobbies-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        /* ── Lobby card ── */
        .lobby-card {
            background: var(--primary-bg);
            border-radius: 20px;
            padding: 20px;
            box-shadow: var(--neumorphic-shadow);
            border: 1.5px solid transparent;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .lobby-card:hover { transform: translateY(-4px); }
        .lobby-card--full { opacity: 0.72; }
        /* Briefly highlight a lobby that just appeared/updated */
        .lobby-card--new {
            animation: lobbyCardIn 0.5s cubic-bezier(.34,1.56,.64,1);
            border-color: var(--primary-accent);
        }
        @keyframes lobbyCardIn {
            0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
            100% { opacity: 1; transform: none; }
        }
        .lobby-mine-tag {
            background: var(--primary-accent);
            color: #fff;
            font-size: 0.6rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 10px;
            margin-left: 6px;
            vertical-align: middle;
        }
        .lobby-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 4px;
        }
        .lobby-emoji { font-size: 1.8rem; flex-shrink: 0; }
        .lobby-name  { font-weight: 700; font-size: 0.95rem; }
        .lobby-host  { font-size: 0.75rem; opacity: 0.55; margin-top: 2px; }
        .lobby-level-badge {
            margin-left: auto;
            background: var(--primary-bg);
            box-shadow: var(--neumorphic-inset);
            border-radius: 20px;
            padding: 4px 10px;
            font-size: 0.72rem;
            font-weight: 600;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .lobby-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }
        .lobby-players-count {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            opacity: 0.8;
        }
        .lobby-full-tag {
            background: var(--danger);
            color: #fff;
            font-size: 0.62rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 10px;
            margin-left: 4px;
        }
        .lobby-join-btn { font-size: 0.82rem; padding: 7px 16px; }
        .lobby-join-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        /* ── Activity feed ── */
        .activity-section { margin-bottom: 40px; }
        .activity-feed {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 16px;
        }
        .activity-item {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--primary-bg);
            box-shadow: var(--neumorphic-shadow);
            border-radius: 14px;
            padding: 12px 18px;
            font-size: 0.88rem;
            animation: feedSlide 0.35s ease;
        }
        @keyframes feedSlide {
            from { opacity: 0; transform: translateX(-12px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        .activity-emoji { font-size: 1.3rem; flex-shrink: 0; }
        .activity-text  { flex: 1; line-height: 1.4; }
        .activity-time  { font-size: 0.75rem; opacity: 0.5; flex-shrink: 0; white-space: nowrap; }

        /* ── Reveal / scroll-in animation ── */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        .revealed { opacity: 1; transform: translateY(0); }
        .mp-card--delay1 { transition-delay: 90ms; }
        .mp-card--delay2 { transition-delay: 180ms; }

        /* ── Spin animation for refresh icon ── */
        @keyframes spin { to { transform: rotate(360deg); } }
        .spinning { animation: spin 0.55s linear; }

        /* ── Responsive additions ── */
        @media (max-width: 1024px) {
            .mp-stats-banner  { grid-template-columns: repeat(2, 1fr); }
            .lobbies-grid     { grid-template-columns: repeat(2, 1fr); }
            /* 3 action cards are too tight on tablets — drop to 2 across. */
            .multiplayer-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .mp-stats-banner { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .lobbies-grid    { grid-template-columns: 1fr; }
            .multiplayer-grid { grid-template-columns: 1fr; }
            /* Card is full-width here, so the chips have more room — relax the cap. */
            .qm-topic-row { max-height: 168px; }
        }
        @media (max-width: 480px) {
            .mp-stat-num { font-size: 1.45rem; }
            .mp-stats-banner { grid-template-columns: 1fr 1fr; gap: 10px; }
            .qm-topic-row { gap: 5px; max-height: 152px; }
            .qm-chip {
                padding: 7px 11px;     /* taller = easier touch target */
                font-size: 0.72rem;
            }
        }
        @media (max-width: 360px) {
            .mp-stats-banner { grid-template-columns: 1fr; }
        }