/*
 * ============================================================
 *  PlayEngine — shell.css  v3.9.2  (Sprint 12)
 *  Single source of truth for all app CSS.
 *
 *  WHY EXTERNAL: Netlify's post-processing pipeline strips
 *  inline <style> tags from large single-file HTML apps.
 *  Moving CSS here prevents the CSS-as-text display bug.
 *
 *  Linked from: play.html <head>
 *    <link rel="stylesheet" href="/shell.css">
 *
 *  Rules 1–6 documented in comments below.
 *  FROZEN layout section: iOS/Android WKWebView rules.
 *  Do NOT edit without real-device testing.
 * ============================================================
 */
 — design system, CSS variables, component styles           ║
║                                                                              ║
║  ── SCREENS (HTML) ────────────────────────────────────────────────────────║
║  L3170   #mainApp — app shell wrapper                                       ║
║  L3190   .header — top nav bar (logo, bell, avatar)                        ║
║  L3199   #homeScreen — home dashboard                                       ║
║  L3213     Hero (user identity, stats bar)                                  ║
║  L3251     Up Next card                                                     ║
║  L3290     My Groups list                                                   ║
║  L3306     My Games (events) list                                           ║
║  L3318     Play Zone (Coin, Dice, Whistle, ASK JOY strip)                  ║
║  L3474     Public Events / Public Groups panes                              ║
║  L3550   #eventScreen — full event experience                               ║
║  L3581     Event header (venue, time tags)                                  ║
║  L3605     Host actions bar (Generate, Teams, Toss, TV, Edit)               ║
║  L3630     Segment tabs (Matches / Players / Ranks / Chat)                  ║
║  L3639     Court Assignment hero card                                       ║
║  L3657     All Rounds view                                                  ║
║  L3678     Players tab (#playersList)                                       ║
║  L3700   #groupScreen — group experience                                    ║
║  L3737     Group header                                                     ║
║  L3759     Group tabs (Overview / Chat / Members / Invite)                  ║
║  L3767     Overview pane                                                    ║
║  L3811     Chat pane                                                        ║
║  L3840     Members pane                                                     ║
║  L3868     Grow / Invite pane                                               ║
║  L3923   END groupScreen                                                    ║
║                                                                              ║
║  ── MODALS & OVERLAYS (HTML) ──────────────────────────────────────────────║
║  L3932   #createModal — create event / group                                ║
║  L3950     Event fields (activity, name, date, venue, courts, format)       ║
║  L4081     Group fields                                                     ║
║  L4155   #settingsModal — edit event (name, venue, date, courts, format)    ║
║  L4330   #addPlayerModal — add player by handle / roster / manual          ║
║  L4432   #scoreModal — score entry (badminton, pickleball, generic)         ║
║  L4534   #profileMenuSheet — user menu (sign out, settings, legal)         ║
║  L4626   edit-profile iframe anchor                                         ║
║  L4650   #legalSheet                                                        ║
║  L4656   #deleteAccountConfirm                                              ║
║  L4680   In-app chat notification toast                                     ║
║                                                                              ║
║  ── JAVASCRIPT — BOOTSTRAP ───────────────────────────────────────────────║
║  L4803   Firebase init (app, auth, db, functions)                           ║
║  L4823   Platform detection (iOS WKWebView, Android, --vh, safe areas)      ║
║  L4907   Date / time formatters (fmtDate, fmtTime, fmtAgo)                 ║
║  L4950   Sport icon registry (SPORT_EMOJI, SPORT_NAME)                      ║
║  L5027   Auto-capitalise helper                                             ║
║                                                                              ║
║  ── JAVASCRIPT — AUTH ─────────────────────────────────────────────────────║
║  L5175   Firebase action URL handler (email verify, password reset)         ║
║  L5258   Reset password functions                                           ║
║  L5344   Preserve invite params across auth gates                           ║
║  L5361   Login context banner                                               ║
║  L5443   onAuthStateChanged — main auth gate                                ║
║  L5517     Gate 1: email verified?                                          ║
║  L5526     Gate 2: handle claimed?                                          ║
║  L5555   Email verification flow                                            ║
║  L5647   Handle claim at signup                                             ║
║  L5640   _enterApp() — post-auth app entry                                  ║
║  L5910   Login mode switcher (email / Google / Apple)                       ║
║  L5959   Login brute-force throttle                                         ║
║                                                                              ║
║  ── JAVASCRIPT — PROFILE ──────────────────────────────────────────────────║
║  L6094   Profile photo upload                                               ║
║  L6186   Link placeholder → real account (openLinkModal, confirmLink)       ║
║  L6396   Login enhancements (password toggle)                               ║
║  L6480   Phone validation (E.164 international)                             ║
║  L6509   Google Maps — eager load                                           ║
║  L6621   Primary group rename                                               ║
║  L8153   viewProfile() — player profile drawer                              ║
║  L8294   User menu (toggleUserMenu, openUserMenu)                           ║
║  L8400   _syncPublicProfile()                                               ║
║  L8509   Edit profile tabs                                                  ║
║  L8604   Edit profile — lazy iframe (edit-profile.html)                     ║
║  L8662   Sport module — iframe                                              ║
║                                                                              ║
║  ── JAVASCRIPT — HOME SCREEN ──────────────────────────────────────────────║
║  L6746   populateHomeGreeting(), loadEvents(), loadGroupsWithBadges()       ║
║  L6812   Play Zone (fun-zone) init                                          ║
║  L6903   Coin flip 3D (rollCoin3d)                                          ║
║  L6982   Dice 3D (rollDice3d)                                               ║
║  L7041   ASK JOY chat (openJoyChat, sendJoyMsg, _joyRespond static)        ║
║  L7199   JOY Claude API (Cloud Function call, context, usage tracking)      ║
║  L7301   JOY Voice system (mic input, speech synthesis output)              ║
║  L7488   Whistle (Web Audio API)                                            ║
║  L7717   Reminder system                                                    ║
║                                                                              ║
║  ── JAVASCRIPT — NAVIGATION ───────────────────────────────────────────────║
║  L8931   _hideAllScreens(), _pinNavLast() — Rule 3 enforcer                ║
║  L8959   goHost(), _hostNewEvent(), _hostNewGroup()                         ║
║  L9153   goHelp() → goJOYIZM()                                              ║
║  L9180   Host card context menu                                             ║
║  L9308   Host bulk cleanup                                                  ║
║                                                                              ║
║  ── JAVASCRIPT — NOTIFICATIONS ────────────────────────────────────────────║
║  L9610   Notification system (_initNotifications, FCM)                      ║
║  L9751   _sendNotif(), _sendNotifMulti()                                    ║
║  L9762   _queueEmail(), _queueEmailMulti() — SendGrid via Cloud Function    ║
║                                                                              ║
║  ── JAVASCRIPT — EVENT SCREEN ─────────────────────────────────────────────║
║  L9999   Clubs / organisations browser                                      ║
║  L10491  openEvent() — load and render event                                ║
║  L10654  renderPlayers()                                                    ║
║  L11180  JOIN EVENT / GROUP flow (joinEvent, joinGroup)                     ║
║  L11532  CREATE EVENT / GROUP (_createNew, createNew)                       ║
║  L11594  Host playing toggle                                                ║
║  L11618  Activity catalog (50+ sports & games, categories)                           ║
║  L11956  Name validation helpers                                            ║
║  L11996  ensurePrimaryGroup()                                               ║
║  L12026  addPlayerToHostNetwork()                                           ║
║                                                                              ║
║  ── JAVASCRIPT — ROUND GENERATION ─────────────────────────────────────────║
║  L12075  generate() — main round generator                                  ║
║  L12225    Round 2+: auto-inherit format                                    ║
║  L12249    Round 1: full setup modal                                        ║
║  L12288  Winner format selection                                            ║
║  L12423  Fixed team mode                                                    ║
║  L12440  Rest rotation                                                      ║
║  L12471  Pure skill matching (J vs J, O vs O, Y vs Y)                      ║
║  L12508  Fixed partners                                                     ║
║  L12550  Rotating partners                                                  ║
║  L12599  Generate multiple rounds in advance                                ║
║                                                                              ║
║  ── JAVASCRIPT — SCORING ──────────────────────────────────────────────────║
║  L12626  Score entry (openScoreModal, voteScore, confirmScore)              ║
║  L13007  Cricket scorer, racket sports Live Scorer                          ║
║  L13160  Persist results to group leaderboard                               ║
║  L13338  saveSettings() — edit event save                                   ║
║  L13360  confirmDeleteEvent()                                               ║
║  L13548  renderSetupTab()                                                   ║
║  L13655  computeMVP(), renderRanks()                                        ║
║                                                                              ║
║  ── JAVASCRIPT — ADD PLAYER ───────────────────────────────────────────────║
║  L13732  openAddPlayerModal(), closeAddPlayerModal()                        ║
║  L13917  Handle lookup (primary fast path)                                  ║
║  L14032  Roster fallback (group members)                                    ║
║  L14160  openAddPlayerForGroup()                                            ║
║  L14174  removePlayerFromEvent()                                            ║
║  L14187  toggleEventCoHost()                                                ║
║                                                                              ║
║  ── JAVASCRIPT — INVITES & PENDING ────────────────────────────────────────║
║  L14220  sendGroupInvite(), sendEventInvitesToGroupMembers()                ║
║  L14464  Group invite pane — handle lookup                                  ║
║                                                                              ║
║  ── JAVASCRIPT — GROUP SCREEN ─────────────────────────────────────────────║
║  L14545  openGroup(), closeGroup()                                          ║
║  L14957  Group chat (sendChat, sendReaction, sendFile)                      ║
║  L15079  Chat rate limit                                                    ║
║  L15168  File security constants                                            ║
║  L15240  renderGroupMembers()                                               ║
║  L15320  Group role helpers (_isGroupAdmin, _isGroupAdminOrCoHost)          ║
║  L15352  Group Manage sheet (open/close/archive/delete)                     ║
║  L15400  Group Edit sheet (openGroupEditSheet, saveGroupEdit)               ║
║  L15482  renderGroupLeaderboard()                                           ║
║  L15542  Grow / Invite pane                                                 ║
║  L15609  QR encoder                                                         ║
║  L15635  Phase 2 invite — @handle search                                    ║
║                                                                              ║
║  ── JAVASCRIPT — COMMUNITY & LEADERBOARD ──────────────────────────────────║
║  L15962  Sport emojis                                                       ║
║  L16002  loadPublicEvents(), loadPublicGroups()                             ║
║  L16073  EXPOSE GLOBALS — window.xxx for onclick attributes                 ║
║  L16107  goGlobalLeaderboard(), switchGlobalLbTab()                         ║
║  L~9965  loadTrainers(), loadVenues(), _seedVenuesFromPlaces()                                       ║
║  L16352  Event chat (inside event screen)                                   ║
║  L16431  Live round view                                                    ║
║  L16657  In-app debug overlay (tap logo 5×)                                ║
║                                                                              ║
║  ── OVERLAYS & SCREENS (HTML, bottom of file) ─────────────────────────────║
║  L16861  #groupEditSheet                                                    ║
║  L16918  #resetPasswordOverlay                                              ║
║  L16998  #pendingInvitesPanel                                               ║
║  L17015  #chatMsgActionSheet                                                ║
║  L17034  #chatEditOverlay                                                   ║
║  L17046  #qrOverlay                                                         ║
║  L17057  #debugOverlay (iOS — tap logo 5×)                                 ║
║  L17082  #profileDrawer                                                     ║
║  L17112  #watchScreen                                                       ║
║  L17117  #hostScreen                                                        ║
║  L17183  #joyizmScreen — JOYIZM intro (5th tab)                            ║
║                                                                              ║
║  ── BOTTOM NAV (always last child of <body>) ──────────────────────────────║
║  L17290  <nav class="bottom-nav"> Home · Community · Profile · Host · JOY  ║
║                                                                              ║
║  ── CLOUD FUNCTIONS (not in this file — deployed separately) ──────────────║
║  emailNotifications.js  → onMailQueue  (SendGrid email, 7 types)           ║
║  joyProxy.js            → onJoyChat   (Claude API proxy, 10/day free)      ║
║                                                                              ║
║  ── DESIGN SYSTEM ─────────────────────────────────────────────────────────║
║  Pink:   #E6007E   Dark:  #122E76   Canvas: #F5F4F0                        ║
║  Font:   Inter (body)  Michroma (logo)   Frame: 440px                      ║
║  Nav z-index: 9100   Modals: 1000–8000   Action overlays: 9500+            ║
║                                                                              ║
║  ── SHELL.CSS RULES (DO NOT BREAK) ────────────────────────────────────────║
║  Rule 1: body must NOT have display:flex on iOS                             ║
║  Rule 2: overflow:hidden on html+body required on iOS                       ║
║  Rule 3: .bottom-nav must always be LAST child of body → _pinNavLast()     ║
║  Rule 4: Never set bottom:calc(66px+...) on fixed overlays                 ║
║  Rule 5: #mainApp must be display:flex + flex-direction:column              ║
╚══════════════════════════════════════════════════════════════════════════════╝
-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="google-site-verification" content="yU67TksJJBdLL81DkjV_iyuj71aG2oaAueoxY2797eo" />
    <title>PlayEngine | It's JOYIZM</title>
    <meta name="theme-color" content="#122E76">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="manifest" href="/manifest.json">
    <script data-cfasync="false">
        // ── APP VERSION — bump this on every deploy ────────────────────────────
var APP_VERSION = '3.9.2';
var BUILD_DATE  = '2026-04-01';
window.APP_VERSION = APP_VERSION;

if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/sw.js').then(function(reg) {
                    // If app version changed since last visit — wipe old caches
                    var lastVer = localStorage.getItem('pe_app_version');
                    if (lastVer && lastVer !== APP_VERSION) {
                        console.log('[App] Updated', lastVer, '→', APP_VERSION, '— clearing caches');
                        if (window.caches) caches.keys().then(function(keys){ keys.forEach(function(k){ caches.delete(k); }); });
                        if (reg.active) reg.active.postMessage({ type: 'PE_CLEAR_CACHE' });
                    }
                    localStorage.setItem('pe_app_version', APP_VERSION);
                }).catch(function() {});
            });
        }
    </script>

    <script data-cfasync="false">
    // iOS App Store banner — shown to iPhone/iPad users who haven't dismissed it
    (function() {
        var ua = navigator.userAgent;
        var isIOS = /iPhone|iPad|iPod/i.test(ua);
        var isStandalone = window.navigator.standalone === true;
        var isWKWebView = isIOS && !ua.includes('Safari/');
        var isNativeApp = /PlayEngineIOS|PlayEngineAndroid/.test(ua);
        var dismissed = localStorage.getItem('pe_appbanner_dismissed');
        // Don't show if: already in native app, PWA standalone, WKWebView wrapper, dismissed
        if (!isIOS || isStandalone || isWKWebView || isNativeApp || dismissed) return;

        window.addEventListener('DOMContentLoaded', function() {
            if (localStorage.getItem('pe_appbanner_dismissed')) return;
            if (window.navigator.standalone) return;
            if (/PlayEngineAndroid|PlayEngineIOS/.test(navigator.userAgent)) return;
            var _ua = navigator.userAgent;
            var _isWK = /iPhone|iPad|iPod/.test(_ua) && !_ua.includes('Safari/');
            if (_isWK) return; // already in native iOS app wrapper
            var isIOS = /iPhone|iPad|iPod/.test(_ua);
            if (!isIOS) return;

            var banner = document.createElement('div');
            banner.id = 'iosAppBanner';
            banner.style.cssText = [
                'position:fixed;bottom:0;left:0;right:0;z-index:900',
                'background:#122E76;color:white',
                'padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)) 16px',
                'display:flex;align-items:center;gap:12px',
                'box-shadow:0 -2px 20px rgba(0,0,0,.4)',
                'font-family:-apple-system,BlinkMacSystemFont,sans-serif',
                'max-width:430px;margin:0 auto'
            ].join(';');

            banner.innerHTML = [
                '<img src="/icon-192.png" style="width:44px;height:44px;border-radius:10px;flex-shrink:0">',
                '<div style="flex:1;min-width:0">',
                '  <div style="font-size:13px;font-weight:700;margin-bottom:2px">PlayEngine</div>',
                '  <div style="font-size:11px;color:#aaa">Better experience in the app</div>',
                '</div>',
                '<a href="https://apps.apple.com/us/app/playengine-by-joyizm/id6761193694"',
                '   style="background:#E6007E;color:white;padding:8px 16px;border-radius:20px;',
                '          font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0"',
                '   onclick="localStorage.setItem(\'pe_appbanner_dismissed\',\'1\')">',
                '  Download',
                '</a>',
                '<button onclick="this.closest(\'#iosAppBanner\').remove();localStorage.setItem(\'pe_appbanner_dismissed\',\'1\')"',
                '   style="background:none;border:none;color:#888;font-size:22px;cursor:pointer;',
                '          padding:0 0 0 4px;line-height:1;flex-shrink:0">×</button>'
            ].join('');

            // Wrap in a full-width container for centering on desktop
            var wrap = document.createElement('div');
            wrap.style.cssText = 'position:fixed;bottom:0;left:0;right:0;z-index:900;display:flex;justify-content:center;background:#122E76';
            wrap.appendChild(banner);
            document.body.appendChild(wrap);
        });
    })();
    </script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Michroma&display=swap" rel="stylesheet">
    <script src="/sport-icons.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-functions-compat.js"></script>
    
        :root {
            --sat: env(safe-area-inset-top, 0px);
            --sab: env(safe-area-inset-bottom, 0px);
            --dark: #122E76;
            --aubergine: #122E76;
            --pink: #E6007E;
            --bottom-nav-h: 66px;
            --pink-soft: #FDF2F8;
            --pink-dark: #BE005F;
            --green: #059669;
            --green-soft: #ECFDF5;
            --amber: #D97706;
            --amber-soft: #FEF3C7;
            --red: #DC2626;
            --purple: #7C3AED;
            --purple-soft: #EDE9FE;
            
            --text-1: #111827;
            --text-2: #4B5563;
            --text-3: #9CA3AF;
            
            /* Warm misty surface system */
            --surface-1: #FAFAF8;   /* warm off-white */
            --surface-2: #F2F1ED;   /* warm stone */
            --surface-3: #E9E8E3;   /* warm grey */
            --surface-4: #D8D6D0;   /* warm border */
            --canvas:    #F5F4F0;   /* parchment page */
            
            --sport: var(--pink);
        }
        
        /* Hide Cloudflare email decode residue */
        body > span[data-cfemail],
        body > a[href^="mailto"] { display:none!important; }
        /* Ensure nothing blocks nav */
        .bottom-nav { isolation: isolate; }
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        /* ── iOS WKWebView layout — Rule 1: body must NOT be display:flex ── */
        html.platform-ios {
            height: calc(var(--vh,1vh)*100);
            overflow: hidden;
        }
        html.platform-ios body {
            display: block !important;          /* Rule 1: kills inherited display:flex  */
            height: calc(var(--vh,1vh)*100);    /* Rule 2: clips scroll bounce           */
            overflow: hidden;
        }
        html.platform-ios #mainApp {
            display: flex !important;           /* Rule 5: flex column for .content{flex:1} */
            flex-direction: column;
            height: calc(var(--vh,1vh)*100);    /* explicit height — no longer via flex:1 on body */
            overflow: hidden;
            padding-bottom: calc(66px + max(env(safe-area-inset-bottom,0px), var(--sab,0px)));
        }
        html.platform-ios .content {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
        }
        html.platform-ios .bottom-nav {
            position: fixed !important;         /* Rule 3: always fixed, re-pinned by _pinNavLast() */
            bottom: 0 !important;
            left: max(0px, calc(50% - 215px)) !important;
            width: min(100vw, 430px) !important;
            z-index: 9100 !important;           /* Rule 4 */
            padding-bottom: max(env(safe-area-inset-bottom,0px), var(--sab,0px)) !important;
        }


        
        html {
            background: var(--canvas);
            height: 100%;
        }
        
        html { background: #E8E7E3; } /* desktop surround */
        /* Desktop: add brand context behind the app frame */
        @media (min-width: 500px) {
            html {
                background-color: #130720;
                background-image:
                    linear-gradient(rgba(230,0,126,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(230,0,126,.03) 1px, transparent 1px);
                background-size: 32px 32px;
            }
            /* Subtle brand watermark behind frame */
            html::before {
                content: 'PlayEngine';
                position: fixed;
                bottom: 32px;
                left: 50%;
                transform: translateX(-50%);
                font-family: 'Michroma', monospace;
                font-size: 11px;
                letter-spacing: 3px;
                color: rgba(230,0,126,.2);
                pointer-events: none;
                z-index: 0;
            }
        }
        body {
            background: #122E76;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--canvas);
            color: var(--text-1);
            min-height: 100%;
            max-width: 430px;
            margin: 0 auto;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        
        @media (min-width: 500px) {
            body {
                box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 8px 48px rgba(0,0,0,0.18);
                min-height: 100vh;
            }
            /* Desktop: center the bottom nav within the frame */
            .bottom-nav {
            pointer-events: all !important;
                left: max(0px, calc(50% - 215px));
                width: min(100vw, 430px);
            }
            .fab {
                right: max(20px, calc(50% - 215px + 20px));
            }
        }

        /* ========== HEADER ========== */
        .header {
            background: var(--dark, #122E76);
            padding: 0 16px;
            padding-top: var(--sat, 0px);
            height: calc(56px + var(--sat, 0px));
            display: flex;
            align-items: flex-end;
            padding-bottom: 8px;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            position: sticky;
            top: 0;
            z-index: 100;
        }


        /* ── STANDARDIZED SECTION HEADERS ──────────────────────── */
        .section-eyebrow {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-3);
            padding: 18px 20px 6px;
        }
        /* Consistent card shadow */
        .pe-card {
            background: white;
            border-radius: 14px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
            border: 1px solid rgba(0,0,0,0.04);
        }
        /* Bottom sheet standard radius */
        .pe-sheet-inner {
            border-radius: 24px 24px 0 0 !important;
        }

        /* ── PREVENT IOS AUTO-ZOOM ON INPUTS ───────────────────── */
        /* iOS zooms when input font-size < 16px — prevent with CSS */
        input[type="text"], input[type="email"], input[type="tel"],
        input[type="password"], input[type="search"], input[type="number"],
        textarea, select {
            font-size: max(16px, 1em) !important;
        }
        /* But visually scale them if container expects smaller */
        .join-input { font-size: 16px !important; }
        #venueCityInput { font-size: 16px !important; }
        #discoverSearch { font-size: 16px !important; }
        #trainerSearch  { font-size: 16px !important; }


        /* ── MOMENTUM SCROLLING ─────────────────────────────────── */
        .screen, #discoverList, #glbPlayersList, #glbEventsList,
        #glbGroupsList, #glbTrainersList, #glbVenuesList,
        [id$="List"], .ep-tab-pane {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        /* ── SCROLL LOCK WHEN MODALS OPEN ──────────────────────── */
        body.modal-open { overflow: hidden; }
        /* ── TAP FEEDBACK — premium native feel ─────────────── */
        .disc-card, .group-card, .event-card, .home-section-action,
        .global-lb-tab, .fun-zone-btn, button:not([disabled]) {
            -webkit-tap-highlight-color: transparent;
        }
        .disc-card:active, .group-card:active, .event-card:active {
            transform: scale(0.98);
            transition: transform 0.08s ease;
        }
        .disc-card, .group-card, .event-card {
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        /* Bottom sheet spring animation */
        @keyframes sheetSlideUp {
            from { transform: translateY(100%); opacity: 0.8; }
            to   { transform: translateY(0);    opacity: 1; }
        }
        .sheet-spring {
            animation: sheetSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        /* Screen crossfade */
        @keyframes screenFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .screen.active { animation: screenFadeIn 0.15s ease forwards; }
        /* Available pulse */
        @keyframes availPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.5); }
            50%       { box-shadow: 0 0 0 4px rgba(5,150,105,0); }
        }
        .avail-dot-pulse {
            animation: availPulse 2.5s ease-in-out infinite;
        }
        /* Stat counter */
        @keyframes countUp {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .stat-animate { animation: countUp 0.4s ease-out forwards; }
        .logo {
            display: flex;
            align-items: baseline;
            gap: 6px;
            text-decoration: none;
        }
        .logo-main {
            font-family: 'Michroma', monospace;
            font-size: 15px;
            color: var(--pink);
            letter-spacing: 1px;
        }
        .logo-sub {
            font-size: 9px;
            color: rgba(255,255,255,0.4);
            font-weight: 400;
            font-family: 'Michroma', monospace;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .header-right { display: flex; align-items: center; gap: 12px; }
        .sync-indicator {
            width: 8px; height: 8px;
            background: var(--green);
            border-radius: 50%;
            box-shadow: 0 0 0 3px var(--green-soft);
        }
        .avatar {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: var(--surface-3);
            cursor: pointer;
            object-fit: cover;
        }

        /* ========== CONTENT AREA ========== */
        .content {
            padding-bottom: calc(90px + var(--sab, 16px));
        }

        /* ========== SEGMENT CONTROL ========== */
        .segment {
            display: flex;
            margin: 12px 16px;
            background: var(--surface-3);
            border-radius: 10px;
            padding: 3px;
        }
        .segment-btn {
            flex: 1;
            padding: 10px 8px;
            border: none;
            background: transparent;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--text-3);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        .segment-btn.active {
            background: var(--surface-1);
            color: var(--pink);
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }
        .segment-btn svg { width: 14px; height: 14px; }

        /* ========== SECTIONS ========== */
        .section {
            background: var(--surface-1);
        }
        .section + .section {
            border-top: 8px solid var(--surface-2);
        }
        .section-head {
            padding: 14px 16px 10px;
            background: var(--surface-2);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .section-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-3);
        }
        .section-action {
            font-size: 13px;
            font-weight: 600;
            color: var(--pink);
            background: none;
            border: none;
            cursor: pointer;
        }

        /* ========== LIST ITEMS ========== */
        .list-item-upcoming {
            border-left: 3px solid #F59E0B;
        }
        .list-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 20px;
            background: white;
            cursor: pointer;
            transition: all 0.12s;
            border-bottom: 1px solid rgba(0,0,0,0.04);
            margin: 0 16px 8px;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .list-item:last-child { border-bottom: none; }
        .list-item:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
        .list-item.list-item-unread { background: #FDF2F8; border-left: 3px solid var(--pink); }
        
        .list-icon {
            width: 48px; height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 22px;
            line-height: 1;
            overflow: hidden;
        }
        .list-icon svg { width: 24px; height: 24px; }
        
        .list-body { flex: 1; min-width: 0; }
        .list-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; letter-spacing: -0.2px; color: var(--text-1); }
        .list-sub { font-size: 12px; color: var(--text-3); font-weight: 500; letter-spacing: 0.1px; }
        
        .list-meta { display: flex; align-items: center; gap: 8px; }
        .badge {
            padding: 3px 8px;
            border-radius: 20px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .badge-host { background: var(--purple-soft); color: var(--purple); }
        .badge-live { background: var(--green-soft); color: var(--green); }
        .chevron { color: var(--text-3); font-size: 18px; }

        /* ========== INPUT ROW ========== */
        .input-section {
            padding: 14px 16px;
            background: var(--surface-2);
            display: flex;
            gap: 10px;
        }
        .input-field {
            flex: 1;
            padding: 12px 14px;
            border: 1px solid var(--surface-4);
            border-radius: 10px;
            font-size: 15px;
            background: var(--surface-1);
            font-family: 'Michroma', monospace;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .input-field:focus { outline: none; border-color: var(--pink); }
        .input-field::placeholder { 
            font-family: 'Inter', sans-serif; 
            text-transform: none; 
            letter-spacing: 0;
            color: var(--text-3);
        }

        /* ========== BUTTONS ========== */
        .btn {
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            transition: all 0.12s;
        }
        .btn svg { width: 18px; height: 18px; }
        .btn-primary { background: var(--pink); color: white; }
        .btn-primary:active { background: var(--pink-dark); transform: scale(0.98); }
        .btn-secondary { background: var(--surface-3); color: var(--text-1); }
        .btn-ghost { background: transparent; color: var(--text-2); padding: 8px 12px; }
        .btn-sm { padding: 8px 14px; font-size: 13px; }
        .btn-block { width: 100%; }

        /* ========== EMPTY STATE ========== */
        .empty {
            text-align: center;
            padding: 48px 24px;
        }
        .empty-icon {
            width: 64px; height: 64px;
            margin: 0 auto 16px;
            background: var(--surface-2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .empty-icon svg { width: 28px; height: 28px; stroke: var(--text-3); }
        .empty h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
        .empty p { font-size: 13px; color: var(--text-3); }

        /* ========== FAB ========== */
        .fab {
            position: fixed;
            bottom: calc(72px + var(--sab, 12px) + 12px);
            right: max(20px, calc((100vw - 430px) / 2 + 20px));
            width: 56px; height: 56px;
            border-radius: 16px;
            background: var(--pink);
            color: white;
            border: none;
            font-size: 28px;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(230,0,126,0.4);
            z-index: 90;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .fab:active { transform: scale(0.95); }



        /* ========== BOTTOM NAV ========== */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100%, 430px);
            background: rgba(253,252,250,0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-top: 1px solid rgba(0,0,0,0.05);
            display: flex;
            padding: 8px 12px calc(8px + var(--sab, 12px));
            z-index: 9100;
            box-shadow: 0 -1px 0 rgba(0,0,0,0.04);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            will-change: transform;
        }
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 6px;
            text-decoration: none;
            color: var(--text-3);
            font-size: 10px;
            font-weight: 600;
        }
        .nav-item.active { color: var(--pink); }
        .nav-item:active { opacity: 0.6; transform: scale(0.92); transition: all 0.1s; }
        .nav-item svg { width: 24px; height: 24px; }


        /* ── PULSE ANIMATION for live dot ── */
        @keyframes pulse {
            0%,100% { opacity: 1; transform: scale(1); }
            50%      { opacity: 0.5; transform: scale(1.3); }
        }
        /* ── HOST SCREEN ── */
        .host-section-head { display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px; }
        .host-section-title { font-size:10px;font-weight:900;color:var(--text-3);letter-spacing:2px;text-transform:uppercase; }
        .host-event-card { background:white;border-radius:16px;margin:0 16px 10px;padding:14px 18px;box-shadow:0 2px 12px rgba(0,0,0,0.06);cursor:pointer;display:flex;align-items:center;gap:14px; }
        .host-event-card:active { transform:scale(0.98); }
        .host-event-live { border-left:3px solid #10B981; }
        /* ── HELP SCREEN ── */
        .help-topic { background:white;border-radius:14px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,0.05);cursor:pointer;margin-bottom:8px; }
        .help-topic:active { transform:scale(0.98); }

        /* ── WATCH SCREEN ── */
        .watch-inner { width: 100%; max-width: 340px; }
        .watch-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
        .watch-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 2px; text-transform: uppercase; }
        .watch-close { background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.5); font-size: 16px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
        .wca-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 20px; margin-bottom: 16px; }
        .wca-round { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
        .wca-court { font-size: 26px; font-weight: 900; color: white; letter-spacing: -1px; margin-bottom: 14px; }
        .wca-teams { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .wca-team { flex: 1; font-size: 15px; font-weight: 700; color: white; line-height: 1.4; }
        .wca-you { color: #E6007E; }
        .wca-vs { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.25); flex-shrink: 0; }
        .wca-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .wca-btn { padding: 16px; border: none; border-radius: 12px; font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer; letter-spacing: 0.5px; }
        .wca-btn.won  { background: #059669; color: white; box-shadow: 0 4px 16px rgba(5,150,105,0.4); }
        .wca-btn.lost { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
        .wca-btn:active { transform: scale(0.96); }
        .wca-result { text-align: center; padding: 14px; border-radius: 12px; font-size: 18px; font-weight: 900; letter-spacing: 0.5px; }
        .wca-result.won  { background: rgba(5,150,105,0.2); color: #4ADE80; }
        .wca-result.lost { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); }
        .wlb-section { background: rgba(255,255,255,0.04); border-radius: 16px; padding: 16px; }
        .wlb-title { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
        .wlb-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .wlb-row:last-child { border-bottom: none; }
        .wlb-row.me { background: rgba(230,0,126,0.08); border-radius: 8px; padding: 6px 8px; margin: 0 -8px; }
        .wlb-rank { font-size: 14px; width: 24px; text-align: center; }
        .wlb-name { flex: 1; font-size: 13px; font-weight: 700; color: white; }
        .wlb-wins { font-size: 13px; font-weight: 800; color: #E6007E; }

        /* ── STICKY GENERATE BAR — host only, always visible ── */
        #stickyGenerateBar {
            position: sticky;
            bottom: 0;
            left: 0; right: 0;
            background: rgba(245,244,240,0.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(0,0,0,0.06);
            padding: 10px 16px calc(10px + var(--sab,0px));
            display: none;
            gap: 8px;
            align-items: center;
            z-index: 50;
        }
        #stickyGenerateBar.visible { display: flex; }
        .gen-main-btn {
            flex: 1;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 16px;
            background: var(--pink);
            border: none; border-radius: 12px;
            font-family: inherit; font-size: 14px; font-weight: 800;
            color: white; cursor: pointer;
            box-shadow: 0 4px 16px rgba(230,0,126,0.3);
            letter-spacing: -0.2px;
        }
        .gen-main-btn:active { transform: scale(0.98); box-shadow: none; }
        .gen-multi-btn {
            width: 48px; height: 48px;
            display: flex; align-items: center; justify-content: center;
            background: var(--surface-2);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 12px;
            cursor: pointer; font-family: inherit;
            font-size: 11px; font-weight: 800; color: var(--text-2);
            flex-shrink: 0;
        }
        .gen-multi-btn:active { transform: scale(0.95); }
        /* ── COURT ASSIGNMENT HERO ── */
        #courtAssignCard {
            margin: 12px 16px;
            background: linear-gradient(135deg, #122E76 0%, #1A3A8F 100%);
            border-radius: 16px;
            padding: 16px 20px;
            display: none;
        }
        #courtAssignCard.visible { display: block; }
        .ca-round { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
        .ca-court { font-size: 22px; font-weight: 900; color: white; letter-spacing: -0.5px; margin-bottom: 12px; }
        .ca-teams { display: flex; align-items: center; gap: 10px; }
        .ca-team { flex: 1; }
        .ca-team-label { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
        .ca-team-names { font-size: 14px; font-weight: 800; color: white; line-height: 1.3; }
        .ca-you { color: #E6007E; }
        .ca-vs { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.3); flex-shrink: 0; }
        .ca-resting { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 12px; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.5); }

        /* ========== DASHBOARD HEADER ========== */
        .dash-head {
            background: linear-gradient(160deg, #122E76 0%, var(--sport, #2563EB) 100%);
            color: white;
            padding: 14px 16px 18px;
        }
        .dash-back {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            opacity: 0.75;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .dash-back svg { width: 18px; height: 18px; }
        .dash-title { font-size: 26px; font-weight: 900; margin-bottom: 4px; letter-spacing: -0.5px; line-height: 1.1; }
        .dash-info {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            opacity: 0.9;
            margin-bottom: 12px;
        }
        .dash-code {
            font-family: 'Michroma', monospace;
            background: rgba(255,255,255,0.2);
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 12px;
            letter-spacing: 1px;
        }
        .dash-role {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            background: rgba(255,255,255,0.18);
            border-radius: 4px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .dash-role svg { width: 14px; height: 14px; }
        .dash-actions {
            display: flex;
            gap: 8px;
            margin-top: 14px;
        }
        .dash-actions .btn {
            flex: 1;
            padding: 10px 8px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.3px;
            background: rgba(255,255,255,0.12);
            color: white;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.15);
        }
        .dash-actions .btn:active { opacity: 0.75; transform: scale(0.97); }
        .dash-actions .btn-highlight {
            background: white;
            color: var(--sport);
            border-color: transparent;
            font-weight: 800;
        }

        /* ========== ROUND HEADER ========== */
        .round-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--surface-1);
            border-bottom: 2px solid var(--pink);
        }
        .round-title { font-size: 13px; font-weight: 800; color: var(--pink); letter-spacing: 0.3px; text-transform: uppercase; }
        .round-meta { font-size: 11px; color: var(--text-2); }

        /* ========== MATCH CARD ========== */
        .match {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(0,0,0,0.04);
        }
        .match:last-child { border-bottom: none; }
        .match-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .match-court {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: var(--sport);
            background: var(--pink-soft);
            padding: 4px 10px;
            border-radius: 4px;
        }
        .match-status {
            font-size: 9px;
            font-weight: 800;
            padding: 4px 9px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }
        .match-status.live     { background: var(--surface-3); color: var(--text-3); }
        .match-status.voting   { background: #EFF6FF; color: #2563EB; }
        .match-status.done     { background: var(--green-soft); color: var(--green); }
        .match-status.disputed { background: #FEF3C7; color: var(--amber); }
        .match-status.pending  { background: var(--surface-3); color: var(--text-3); }

        /* Vote tally bar */
        .vote-tally {
            display: flex; align-items: center; gap: 6px;
            padding: 6px 14px 4px; font-size: 11px; font-weight: 700;
        }
        .vote-tally-t1 { color: var(--pink); }
        .vote-tally-t2 { color: #2563EB; }
        .vote-tally-sep { color: var(--text-3); font-weight: 400; }
        .vote-tally-bar {
            flex: 1; height: 4px; border-radius: 2px;
            background: var(--surface-3); overflow: hidden; display: flex;
        }
        .vote-bar-t1 { background: var(--pink); height: 100%; transition: width .3s; }
        .vote-bar-t2 { background: #2563EB; height: 100%; transition: width .3s; flex: 1; }
        .vote-mine   { font-size: 10px; color: var(--text-3); margin-left: auto; }

        /* Vote buttons — contextual state */
        .vote-btn.voted-this { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); }
        .vote-btn.voted-other { opacity: 0.45; }

        /* Odd player rest badge */
        .rest-rotate-note {
            font-size:11px; color: var(--text-3); text-align: center;
            padding: 6px 12px; background: var(--surface-2);
            border-radius: 8px; margin: 4px 16px 0;
        }
        
        .match-teams {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .match-team {
            flex: 1;
            text-align: center;
            padding: 14px 8px;
            background: var(--surface-2);
            border-radius: 8px;
            transition: all 0.15s;
            border: 1px solid var(--surface-3);
        }
        .match-team.winner { background: var(--green-soft); }
        .match-team-name {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 6px;
            line-height: 1.3;
            color: var(--text-1);
        }
        .match-team.winner .match-team-name { color: var(--green); }
        .match-score {
            font-size: 28px;
            font-weight: 900;
            color: var(--text-3);
            line-height: 1;
        }
        .match-team.winner .match-score { color: var(--green); }
        .match-vs {
            font-size: 10px;
            font-weight: 800;
            color: var(--text-3);
            flex-shrink: 0;
            letter-spacing: 0.5px;
        }

        /* ========== REST SECTION ========== */
        .rest-bar {
            padding: 12px 16px;
            background: var(--surface-2);
        }
        .rest-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-3);
            margin-bottom: 8px;
        }
        .rest-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .rest-chip {
            padding: 6px 12px;
            background: var(--surface-1);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-2);
        }

        /* ========== PLAYER ROW ========== */
        .player {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--surface-3);
        }
        .player:last-child { border-bottom: none; }
        .player-rank {
            width: 24px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-3);
            text-align: center;
        }
        .player-rank.top { color: var(--pink); }
        .player-avatar {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--surface-3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-2);
            flex-shrink: 0;
        }
        .player-body { flex: 1; min-width: 0; }
        .player-name { font-size: 14px; font-weight: 600; }
        .player-detail { font-size: 11px; color: var(--text-3); }
        .player-stats { text-align: right; }
        .player-wins { font-size: 14px; font-weight: 700; color: var(--green); }
        .player-losses { font-size: 12px; color: var(--text-3); margin-left: 4px; }
        .player-check {
            width: 28px; height: 28px;
            border-radius: 50%;
            border: 2px solid var(--surface-4);
            background: var(--surface-1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.15s;
        }
        .player-check.on { background: var(--green); border-color: var(--green); }
        .player-check svg { width: 16px; height: 16px; stroke: transparent; stroke-width: 3; }
        .player-check.on svg { stroke: white; }

        /* ========== MODALS ========== */
        .modal-bg {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            display: none;
            align-items: flex-end;
            justify-content: center;
            z-index: 9500;
            padding-top: var(--sat, 0px);
        }
        .modal-bg.open { display: flex; }
        .modal {
            background: #F5F4F0;
            width: 100%;
            max-width: 430px;
            max-height: calc(96vh - var(--sat, 0px));
            border-radius: 20px 20px 0 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-top: var(--sat, 0px);
        }
        @media (min-width: 500px) {
            .modal-bg { align-items: center; padding: 24px; }
            .modal { border-radius: 20px; max-width: 400px; }
        }
        .modal-head {
            padding: 18px 20px;
            border-bottom: 1px solid var(--surface-3);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .modal-title { font-size: 17px; font-weight: 700; }
        .modal-x {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: var(--surface-2);
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-body { padding: 20px; overflow-y: scroll; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; touch-action: pan-y; max-height: 60vh; }
        .modal-foot {
            padding: 16px 20px calc(16px + max(var(--sab, 8px), env(safe-area-inset-bottom, 0px)));
            background: var(--surface-2);
            display: flex;
            gap: 10px;
        }
        /* Prevent iOS long-press text selection on all buttons and modal areas */
        button, .btn, .modal-foot, .modal-bg, .toggle-btn, .toggle-group {
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }
        .modal-foot .btn { flex: 1; }

        /* ========== FORM ========== */
        .field { margin-bottom: 18px; }
        .field-label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-3);
            margin-bottom: 8px;
        }
        .field-input, .field-select {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--surface-4);
            border-radius: 12px;
            font-size: 15px;
            background: var(--surface-1);
        }
        .field-input:focus, .field-select:focus {
            outline: none;
            border-color: var(--pink);
        }

        /* ========== TOGGLE ========== */
        .toggle-group {
            display: flex;
            background: var(--surface-3);
            border-radius: 10px;
            padding: 3px;
        }
        .toggle-btn {
            flex: 1;
            padding: 12px 14px;
            border: none;
            background: transparent;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-2);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .toggle-btn.on {
            background: var(--surface-1);
            color: var(--pink);
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        /* ========== TYPE CARDS ========== */
        .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
        .type-card {
            padding: 20px 12px;
            border: 2px solid var(--surface-4);
            border-radius: 14px;
            text-align: center;
            cursor: pointer;
            transition: all 0.15s;
        }
        .type-card.on { border-color: var(--pink); background: var(--pink-soft); }
        .type-card svg { width: 28px; height: 28px; color: var(--text-3); margin-bottom: 8px; }
        .type-card.on svg { color: var(--pink); }
        .type-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
        .type-card p { font-size: 11px; color: var(--text-3); }

        /* ========== SPORT GRID ========== */
        .sport-grid { max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0; }
        .sport-category { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin: 12px 0 8px; }
        .sport-category:first-child { margin-top: 0; }
        .sport-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
        .sport-opt {
            padding: 12px 4px 10px;
            border: 2px solid var(--surface-4);
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }
        .sport-opt span:first-child {
            font-size: 24px;
            line-height: 1.1;
            margin-bottom: 4px;
        }
        .sport-opt span:last-child {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-2);
            letter-spacing: 0.3px;
            text-transform: uppercase;
            line-height: 1.2;
        }
        .sport-opt.on { border-color: var(--pink); background: var(--pink-soft); }
        .sport-opt svg { width: 26px; height: 26px; stroke: var(--text-3); margin-bottom: 6px; }
        .sport-opt.on svg { stroke: var(--pink); }
        .sport-opt span { display: block; font-size: 10px; font-weight: 600; color: var(--text-3); }
        .sport-opt.on span { color: var(--pink); }

        /* ========== SCORE ENTRY ========== */
        /* ── Sport scoring engine CSS ── */
        .bop3-game {
            margin-bottom: 8px;
            padding: 12px;
            background: var(--surface-2);
            border-radius: 12px;
            transition: opacity 0.2s;
        }
        .score-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 24px 0;
        }
        .score-team { text-align: center; flex: 1; }
        .score-team-name { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 12px; }
        .score-input {
            width: 80px;
            padding: 16px;
            text-align: center;
            font-size: 28px;
            font-weight: 800;
            border: 2px solid var(--surface-4);
            border-radius: 14px;
            background: var(--surface-2);
        }
        .score-input:focus { border-color: var(--pink); background: var(--surface-1); outline: none; }
        .score-vs { font-size: 16px; font-weight: 700; color: var(--text-3); }

        /* ========== LOGIN ========== */
        /* ========== LOGIN SCREEN ========== */
        .login-screen {
            min-height: 100vh;
            width: 100%;
            max-width: 430px;
            display: flex;
            flex-direction: column;
            background: #122E76;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-top: var(--sat, 0px);
        }

        /* Animated sport ticker — top half */
        .login-sport-bg {
            flex: 0 0 auto;
            height: 40vh;
            min-height: 180px;
            max-height: 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px 24px 12px;
            position: relative;
            overflow: hidden;
        }

        /* Floating emoji grid behind */
        .login-emoji-grid {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(4, 1fr);
            opacity: 0.07;
            pointer-events: none;
            padding: 8px;
        }
        .login-emoji-grid span {
            display: flex;
            align-items: center;
            justify-content: center;
            animation: emojiPulse 4s ease-in-out infinite;
        }
        .login-emoji-grid span svg {
            width: 28px;
            height: 28px;
            color: white;
        }
        .login-emoji-grid span:nth-child(odd) { animation-delay: -2s; }
        .login-emoji-grid span:nth-child(3n) { animation-delay: -1s; }
        @keyframes emojiPulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.15); opacity: 1; }
        }

        /* Center spotlight: rotating sport + quote */
        .login-sport-spotlight {
            position: relative;
            z-index: 2;
            text-align: center;
        }
        .login-sport-emoji {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            transition: transform 0.2s;
        }
        .login-sport-emoji svg {
            width: 80px;
            height: 80px;
            color: white;
            filter: drop-shadow(0 4px 16px rgba(230,0,126,0.4));
        }
        .login-sport-name {
            font-family: 'Michroma', monospace;
            font-size: 11px;
            letter-spacing: 3px;
            color: var(--pink);
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .login-quote {
            font-size: 20px;
            font-weight: 800;
            color: #FFFFFF;
            line-height: 1.3;
            max-width: 280px;
            margin: 0 auto;
        }
        /* JS-driven fade class */
        .login-sport-spotlight.fading .login-sport-emoji { opacity: 0; transform: scale(0.8) translateY(6px); }
        .login-sport-spotlight.fading .login-sport-name  { opacity: 0; transform: translateY(6px); }
        .login-sport-spotlight.fading .login-quote       { opacity: 0; transform: translateY(6px); }
        .login-sport-spotlight {
            transition: opacity 0.25s;
        }
        .login-sport-spotlight .login-sport-emoji,
        .login-sport-spotlight .login-sport-name,
        .login-sport-spotlight .login-quote {
            transition: opacity 0.25s, transform 0.25s;
        }

        /* Progress dots */
        .login-dots {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-top: 24px;
            position: relative;
            z-index: 2;
        }
        .login-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            transition: all 0.3s;
        }
        .login-dot.active {
            background: var(--pink);
            width: 20px;
            border-radius: 3px;
        }

        /* Bottom card — sign in */
        .login-card {
            flex: 1;
            background: #F5F4F0;
            border-radius: 28px 28px 0 0;
            padding: 28px 24px calc(36px + var(--sab, 16px));
            width: 100%;
            border-top: 1px solid rgba(0,0,0,0.06);
        }
        .login-logo {
            font-family: 'Michroma', monospace;
            font-size: 28px;
            color: var(--pink);
            letter-spacing: 2px;
            margin-bottom: 2px;
        }
        .login-title { font-size: 13px; font-weight: 500; color: var(--text-3); margin-bottom: 24px; }
        .google-btn {
            width: 100%;
            padding: 14px;
            border: 1.5px solid #D8D6D0;
            border-radius: 12px;
            background: #FAFAF8;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: border-color 0.15s, background 0.15s;
        }
        .google-btn:active { background: #F2F1ED; border-color: #C8C6BF; }
        .apple-btn {
            width: 100%;
            padding: 14px;
            border: 1.5px solid #000;
            border-radius: 12px;
            background: #221236;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 10px;
        }
        .apple-btn:active { background: #222; }

        .login-input {
            width: 100%;
            padding: 14px 16px;
            border: 1.5px solid var(--surface-4, #D8D6D0);
            border-radius: 12px;
            font-size: 15px;
            font-family: inherit;
            background: var(--surface-1, #FAFAF8);
            color: #111827;
            outline: none;
            margin-bottom: 12px;
            transition: border-color 0.15s;
        }
        .login-input:focus { border-color: #E6007E; }
        .login-input::placeholder { color: #9CA3AF; }
        .login-or {
            display: flex;
            align-items: center;
            margin: 16px 0;
            color: var(--text-3);
            font-size: 12px;
        }
        .login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: #D8D6D0; }
        .login-or span { padding: 0 12px; }

        /* ========== STATS BOX ========== */
        .stat-box {
            text-align: center;
            padding: 20px;
            background: var(--surface-2);
            border-radius: 12px;
        }
        .stat-num { font-size: 32px; font-weight: 800; color: var(--pink); }
        .stat-label { font-size: 12px; color: var(--text-3); margin-top: 2px; }

        /* ========== TOAST ========== */
        .toast {
            position: fixed;
            bottom: 90px;
            left: max(0px, calc(50% - 150px));
            width: min(100%, 300px);
            transform: translateY(20px);
            background: var(--text-1);
            color: white;
            padding: 12px 24px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            opacity: 0;
            transition: all 0.25s;
            z-index: 2000;
            max-width: 300px;
            text-align: center;
        }
        .toast.show { transform: translateY(0); opacity: 1; }


        /* ========== GROUP SCREEN ========== */
        .group-header {
            background: linear-gradient(135deg, #122E76 0%, #1A3A8F 100%);
            padding: 16px 16px 20px;
            color: white;
            position: relative;
            flex-shrink: 0;
        }
        .group-header-top {
            display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
        }
        .group-back-btn {
            width: 36px; height: 36px; border-radius: 10px;
            background: rgba(255,255,255,0.2); border: none;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; flex-shrink: 0;
        }
        .group-back-btn svg { width: 18px; height: 18px; stroke: white; }
        .group-header-name { font-size: 18px; font-weight: 900; flex: 1; letter-spacing: -0.3px; }
        .group-header-code {
            font-size: 11px; font-weight: 700; letter-spacing: 2px;
            background: rgba(255,255,255,0.2); padding: 4px 10px;
            border-radius: 6px;
        }
        .group-header-stats {
            display: flex; gap: 20px;
        }
        .group-hstat { text-align: center; }
        .group-hstat-n { font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -0.5px; }
        .group-hstat-l { font-size: 9px; font-weight: 700; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.8px; }

        /* Group tabs */
        .group-tabs {
            display: flex; background: #F2F1ED;
            border-bottom: 1px solid #D8D6D0;
            flex-shrink: 0;
        }
        #groupChatPane {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            min-height: 0;
        }
        #groupChatPane.hidden { display: none !important; }
        #groupMembersPane, #groupLeaderPane, #groupInvitePane,
        #groupOverviewPane, #groupInvitePane {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
            padding-bottom: calc(80px + var(--sab, 0px));
        }
        .group-tab {
            flex: 1; padding: 12px 8px; border: none; background: transparent;
            font-size: 12px; font-weight: 700; color: var(--text-3);
            cursor: pointer; border-bottom: 2px solid transparent;
            transition: all 0.15s; font-family: inherit;
        }
        .group-tab.on { color: var(--pink); border-bottom-color: var(--pink); background: #F5F4F0; }

        /* Members tab */
        .group-action-bar {
            display: flex; gap: 8px; padding: 12px 16px;
            background: #F5F4F0; border-bottom: 1px solid #E9E8E3;
        }
        .group-action-btn {
            flex: 1; padding: 10px 8px; border-radius: 10px;
            border: 1.5px solid #D8D6D0; background: #FAFAF8;
            font-size: 12px; font-weight: 700; color: var(--text-1);
            cursor: pointer; font-family: inherit;
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .group-action-btn svg { width: 15px; height: 15px; }
        .group-action-btn.primary { background: var(--pink); color: white; border-color: var(--pink); }
        .member-row {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; border-bottom: 1px solid #E9E8E3;
        }
        .member-avatar {
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; font-weight: 800; color: white; flex-shrink: 0;
        }
        .member-body { flex: 1; }
        .member-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
        .member-meta { font-size: 11px; color: var(--text-3); }
        .member-role {
            font-size: 9px; font-weight: 700; letter-spacing: 1px;
            text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
        }
        .member-role.admin { background: rgba(230,0,126,0.12); color: var(--pink); }
        .member-role.cohost { background: rgba(37,99,235,0.1); color: #2563EB; }
        .member-role.member { background: #E9E8E3; color: var(--text-3); }

        /* Global Leaderboard */
        .global-lb-tab { flex:1;min-width:100px;padding:12px 8px;border:none;background:transparent;font-size:12px;font-weight:700;color:var(--text-3);cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s }
        .scroll-fade-right {
    position: relative;
}
.scroll-fade-right::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 56px;
    background: linear-gradient(to right, rgba(245,244,240,0) 0%, rgba(245,244,240,1) 70%);
    pointer-events: none;
    transition: opacity .15s;
    z-index: 1;
}
.scroll-fade-right.no-more::after {
    opacity: 0;
}
.global-lb-tab.on { color:var(--pink);border-bottom-color:var(--pink) }
        .disc-filter{flex-shrink:0;padding:6px 12px;border-radius:20px;border:1.5px solid var(--surface-3);background:var(--surface-2);font-size:11px;font-weight:700;color:var(--text-3);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
        .disc-filter.on{background:var(--pink);border-color:var(--pink);color:white}
        .disc-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--surface-3);cursor:pointer;transition:background .1s}
        .disc-card:active{background:var(--surface-2)}
        .fpriv-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--surface-1);border-bottom:1px solid var(--surface-3);gap:8px}
        .fpriv-label{font-size:12px;font-weight:600;color:var(--text-2);flex:1}
        .fpriv-btns{display:flex;gap:4px;flex-shrink:0}
        .fpriv-btn{padding:4px 9px;border-radius:8px;border:1.5px solid var(--surface-3);background:var(--surface-2);font-size:10px;font-weight:700;color:var(--text-3);cursor:pointer;font-family:inherit;transition:all .12s}
        .fpriv-btn.on{background:var(--pink);border-color:var(--pink);color:white}
        .glb-row { display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-1) }
        .glb-row:first-child { background:linear-gradient(90deg,rgba(230,0,126,.04),transparent) }
        .glb-rank { width:32px;text-align:center;font-size:18px;flex-shrink:0 }
        .glb-rank.num { font-size:14px;font-weight:800;color:var(--text-3) }
        .glb-avatar { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:white;flex-shrink:0 }
        .glb-body { flex:1;min-width:0 }
        .glb-name { font-size:14px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
        .glb-meta { font-size:11px;color:var(--text-3);margin-top:2px }
        .glb-stat { text-align:right;flex-shrink:0 }
        .glb-stat-n { font-size:20px;font-weight:900;color:var(--pink);line-height:1 }
        .glb-stat-l { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3) }
        .sport-bar-row { padding:12px 16px;border-bottom:1px solid var(--border-1) }
        .sport-bar-label { display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:5px }
        .sport-bar-track { height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden }
        .sport-bar-fill { height:100%;border-radius:4px;background:linear-gradient(90deg,var(--pink),#FF6B9D);transition:width .5s ease }
        .member-joy {
            width: 28px; height: 28px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Michroma', monospace; font-size: 12px; font-weight: 900; color: white;
        }
        .member-joy.j { background: var(--pink); }
        .member-joy.o { background: #2563EB; }
        .member-joy.y { background: #059669; }

        /* CHAT */
        .chat-container {
            display: flex; flex-direction: column;
            height: calc(100vh - 280px); min-height: 300px;
        }
        .chat-messages {
            flex: 1; overflow-y: auto; padding: 12px 16px;
            display: flex; flex-direction: column; gap: 8px;
            min-height: 0;
        }
        .chat-msg { display: flex; flex-direction: column; max-width: 78%; }
        .chat-msg.mine { align-self: flex-end; align-items: flex-end; }
        .chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
        .chat-msg-author { font-size: 10px; font-weight: 700; color: var(--text-3); margin-bottom: 3px; padding: 0 4px; }
        .chat-bubble {
            padding: 9px 13px; border-radius: 16px;
            font-size: 13px; line-height: 1.5; word-break: break-word;
        }
        .chat-msg.mine  .chat-bubble { background: var(--pink); color: white; border-radius: 16px 16px 4px 16px; }
        .chat-msg.theirs .chat-bubble { background: #F2F1ED; color: var(--text-1); border-radius: 16px 16px 16px 4px; }
        .chat-msg-time { font-size: 9px; color: var(--text-3); margin-top: 2px; padding: 0 4px; }

        /* Reaction message */
        .chat-msg.reaction { align-self: center; }
        .chat-bubble.reaction-bubble {
            background: transparent; font-size: 28px; padding: 4px 8px;
        }

        /* System message */
        .chat-system {
            text-align: center; font-size: 11px; color: var(--text-3);
            padding: 4px 12px; background: #E9E8E3; border-radius: 20px;
            align-self: center; font-style: italic;
        }

        /* File attachment bubble */
        .chat-file {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 12px; background: rgba(255,255,255,0.2);
            border-radius: 10px; margin-top: 4px; cursor: pointer;
        }
        .chat-file svg { width: 18px; height: 18px; flex-shrink: 0; }
        .chat-file-name { font-size: 12px; font-weight: 600; }
        .chat-msg.theirs .chat-file { background: #E9E8E3; }

        /* Chat input bar */
        .chat-input-bar {
            background: #F5F4F0; border-top: 1px solid #D8D6D0;
            padding: 10px 12px calc(10px + var(--sab, 0px));
            flex-shrink: 0;
        }
        .chat-quick-reactions {
            display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
        }
        .chat-reaction-btn {
            font-size: 20px; padding: 4px 8px; border-radius: 8px;
            border: none; background: #E9E8E3; cursor: pointer;
            transition: transform 0.1s;
        }
        .chat-reaction-btn:active { transform: scale(1.3); }
        .chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
        .chat-input {
            flex: 1; padding: 10px 14px; border: 1.5px solid #D8D6D0;
            border-radius: 20px; font-size: 14px; font-family: inherit;
            background: #FAFAF8; color: var(--text-1); outline: none;
            resize: none; max-height: 100px; line-height: 1.4;
        }
        .chat-input:focus { border-color: var(--pink); }
        .chat-send-btn {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--pink); border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .chat-send-btn svg { width: 18px; height: 18px; stroke: white; }
        .chat-attach-btn {
            width: 40px; height: 40px; border-radius: 50%;
            background: #E9E8E3; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .chat-attach-btn svg { width: 18px; height: 18px; stroke: var(--text-2); }
        #chatFileInput { display: none; }

        /* Invite sheet */
        .invite-options { display: flex; flex-direction: column; gap: 10px; }
        .invite-option {
            display: flex; align-items: center; gap: 14px;
            padding: 16px; border-radius: 14px;
            border: 1.5px solid #D8D6D0; background: #FAFAF8;
            cursor: pointer; font-family: inherit; text-align: left;
        }
        .invite-option:active { background: #F2F1ED; }
        .invite-option-icon {
            width: 42px; height: 42px; border-radius: 11px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .invite-option-icon svg { width: 20px; height: 20px; }
        .io-pink  { background: var(--pink-soft); }
        .io-green { background: #ECFDF5; }
        .io-blue  { background: #EFF6FF; }
        .io-amber { background: #FEF3C7; }
        .invite-option-body { flex: 1; }
        .invite-option-title { font-size: 14px; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
        .invite-option-desc  { font-size: 11px; color: var(--text-3); }

        /* Group code display */
        .group-code-big {
            font-family: 'Michroma', monospace;
            font-size: 28px; font-weight: 700; letter-spacing: 6px;
            color: var(--pink); text-align: center;
            padding: 20px; background: var(--pink-soft);
            border-radius: 14px; border: 2px dashed rgba(230,0,126,0.3);
            margin: 8px 0;
        }

        /* ========== TEAM BUILDER ========== */
        .team-builder { display:flex; flex-direction:column; gap:12px; }
        .team-col { flex:1; }
        .team-col-head {
            display:flex; align-items:center; gap:8px;
            padding:10px 14px; border-radius:10px 10px 0 0;
            font-size:13px; font-weight:800;
        }
        .team-col-head.a { background:var(--pink); color:white; }
        .team-col-head.b { background:#2563EB; color:white; }
        .team-col-head svg { width:16px; height:16px; }
        .team-col-count {
            margin-left:auto; background:rgba(255,255,255,0.25);
            padding:2px 8px; border-radius:10px; font-size:11px;
        }
        .team-drop-zone {
            min-height:80px; padding:8px;
            border:2px dashed #D8D6D0; border-top:none;
            border-radius:0 0 10px 10px; background:#FAFAF8;
        }
        .team-drop-zone.a-zone { border-color:rgba(230,0,126,0.3); background:#FDF2F8; }
        .team-drop-zone.b-zone { border-color:rgba(37,99,235,0.3); background:#EFF6FF; }
        .team-pool-head {
            font-size:10px; font-weight:700; letter-spacing:1.5px;
            text-transform:uppercase; color:var(--text-3);
            padding:10px 0 6px;
        }
        .team-pool { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 8px; }
        .team-chip {
            display:flex; align-items:center; gap:6px;
            padding:7px 12px; border-radius:20px;
            font-size:13px; font-weight:600; cursor:pointer;
            border:1.5px solid #D8D6D0; background:#F2F1ED;
            transition:all 0.15s;
        }
        .team-chip:active { transform:scale(0.95); }
        .team-chip.in-a { background:var(--pink); color:white; border-color:var(--pink); }
        .team-chip.in-b { background:#2563EB; color:white; border-color:#2563EB; }
        .team-chip-joy {
            width:18px; height:18px; border-radius:5px;
            display:flex; align-items:center; justify-content:center;
            font-family:'Michroma',monospace; font-size:9px; font-weight:900; color:white;
        }
        .team-chip-joy.j { background:var(--pink); }
        .team-chip-joy.o { background:#2563EB; }
        .team-chip-joy.y { background:#059669; }
        .team-chip.in-a .team-chip-joy,
        .team-chip.in-b .team-chip-joy { background:rgba(255,255,255,0.25); color:white; }
        .team-balance-bar {
            display:flex; height:6px; border-radius:3px; overflow:hidden; margin:8px 0 4px;
        }
        .team-balance-a { background:var(--pink); transition:width 0.3s; }
        .team-balance-b { background:#2563EB; transition:width 0.3s; flex:1; }
        .team-balance-label { font-size:11px; color:var(--text-3); text-align:center; }
        .fixed-team-badge {
            display:inline-flex; align-items:center; gap:4px;
            padding:3px 8px; border-radius:6px;
            background:rgba(37,99,235,0.1); color:#2563EB;
            font-size:10px; font-weight:700; letter-spacing:0.5px;
        }

        /* ========== COIN TOSS ========== */
        .toss-overlay {
            position:fixed; top:0; bottom:0; left:max(0px,calc(50% - 215px)); width:min(100vw,430px); background:rgba(9,9,16,0.85);
            z-index:3000; display:flex; align-items:center; justify-content:center;
            opacity:0; pointer-events:none; transition:opacity 0.25s;
        }
        .toss-overlay.open { opacity:1; pointer-events:all; }
        .toss-card {
            background:#F5F4F0; border-radius:24px; padding:32px 28px 28px;
            width:320px; max-width:90vw; text-align:center;
        }
        .toss-title { font-size:18px; font-weight:800; margin-bottom:4px; }
        .toss-sub   { font-size:13px; color:var(--text-3); margin-bottom:24px; }
        .coin-wrap  { perspective:600px; height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
        .coin {
            width:100px; height:100px; border-radius:50%;
            position:relative; transform-style:preserve-3d;
            transition:transform 1.2s cubic-bezier(0.4,0,0.2,1);
            cursor:pointer;
        }
        .coin.spinning { animation: coinSpin 1.2s ease-out forwards; }
        @keyframes coinSpin {
            0%   { transform: rotateY(0deg) rotateX(10deg); }
            40%  { transform: rotateY(900deg) rotateX(30deg) translateY(-30px); }
            70%  { transform: rotateY(1620deg) rotateX(15deg) translateY(-10px); }
            100% { transform: rotateY(var(--coin-end,1800deg)) rotateX(0deg); }
        }
        .coin-face {
            position:absolute; inset:0; border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            backface-visibility:hidden; -webkit-backface-visibility:hidden;
            font-size:36px; font-weight:900;
            box-shadow:0 4px 20px rgba(0,0,0,0.15);
        }
        .coin-heads {
            background:linear-gradient(135deg,#F59E0B,#D97706);
            border:3px solid rgba(255,255,255,0.4);
        }
        .coin-tails {
            background:linear-gradient(135deg,#9CA3AF,#6B7280);
            border:3px solid rgba(255,255,255,0.3);
            transform:rotateY(180deg);
        }
        .toss-result {
            font-size:22px; font-weight:800; margin-bottom:8px;
            min-height:28px; transition:opacity 0.3s;
        }
        .toss-result.heads { color:var(--amber); }
        .toss-result.tails { color:var(--text-2); }
        .toss-pick-row { display:flex; gap:10px; margin-bottom:16px; }
        .toss-pick-btn {
            flex:1; padding:12px; border-radius:12px; font-size:14px; font-weight:700;
            border:2px solid #D8D6D0; background:#F2F1ED; cursor:pointer;
            font-family:inherit; transition:all 0.15s;
        }
        .toss-pick-btn.selected { border-color:var(--pink); background:var(--pink-soft); color:var(--pink); }
        .toss-flip-btn {
            width:100%; padding:14px; border-radius:14px;
            background:var(--pink); color:white; border:none;
            font-size:15px; font-weight:800; cursor:pointer; font-family:inherit;
        }
        .toss-flip-btn:disabled { opacity:0.5; }
        .toss-close {
            margin-top:12px; background:none; border:none;
            font-size:13px; color:var(--text-3); cursor:pointer;
            font-family:inherit;
        }

        /* ========== SETUP TAB ========== */
        .setup-card {
            margin: 0 16px 12px;
            background: var(--surface-1);
            border: 1.5px solid var(--surface-4);
            border-radius: 16px;
            padding: 16px;
        }
        .setup-card-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .setup-card-icon {
            font-size: 26px;
            line-height: 1;
            flex-shrink: 0;
        }
        .setup-card-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-1);
            margin-bottom: 1px;
        }
        .setup-card-sub {
            font-size: 12px;
            color: var(--text-3);
        }
        .setup-action-btn {
            width: 100%;
            padding: 13px;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .setup-action-btn.pink { background: var(--pink); color: white; }
        .setup-action-btn.blue { background: #2563EB; color: white; }
        .setup-action-btn.green { background: #059669; color: white; }
        .setup-action-btn:active { opacity: 0.85; }

        /* Partner mode toggle */
        .setup-toggle-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .setup-toggle {
            padding: 12px;
            border: 2px solid var(--surface-4);
            border-radius: 12px;
            background: var(--surface-2);
            text-align: left;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.15s;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .setup-toggle.on {
            border-color: var(--pink);
            background: var(--pink-soft);
        }
        .setup-toggle-icon { font-size: 20px; line-height: 1; }
        .setup-toggle-label {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-1);
        }
        .setup-toggle.on .setup-toggle-label { color: var(--pink); }
        .setup-toggle-hint {
            font-size: 10px;
            color: var(--text-3);
            line-height: 1.3;
        }

        /* ========== FUN ZONE — HOME SCREEN ========== */
        /* ── FUN ZONE ─────────────────────────────────────────── */
        .fun-zone-wrap { padding: 0 16px 12px; }

        .fun-zone-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }

        /* ── COIN ── */
        .joy-coin-btn {
            background: linear-gradient(160deg,#122E76 0%,#2D1550 100%);
            border: 1.5px solid rgba(230,0,126,0.25);
            border-radius: 20px;
            padding: 16px 8px 14px;
            cursor: pointer; font-family: inherit;
            display: flex; flex-direction: column;
            align-items: center; gap: 0;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            position: relative; overflow: hidden;
            box-shadow: 0 4px 20px rgba(230,0,126,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
            transition: transform 0.12s, box-shadow 0.12s;
        }
        .joy-coin-btn:active { transform: scale(0.95); }

        /* 3-D coin scene */
        .coin-scene {
            perspective: 300px;
            width: 72px; height: 72px;
            margin-bottom: 10px;
        }
        .coin-3d {
            width: 100%; height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: none;
        }
        .coin-face {
            position: absolute; inset: 0;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .coin-face.heads {
            background: radial-gradient(circle at 35% 35%, #FFD700, #B8860B 60%, #8B6914);
            box-shadow: inset -4px -4px 10px rgba(0,0,0,0.35), inset 2px 2px 6px rgba(255,255,255,0.4);
            font-size: 36px;
        }
        .coin-face.tails {
            background: radial-gradient(circle at 35% 35%, #C0C0C0, #808080 60%, #505050);
            box-shadow: inset -4px -4px 10px rgba(0,0,0,0.35), inset 2px 2px 6px rgba(255,255,255,0.4);
            font-size: 36px;
            transform: rotateY(180deg);
        }
        .coin-edge-ring {
            position: absolute; inset: -3px;
            border-radius: 50%;
            border: 3px solid transparent;
            background: linear-gradient(135deg,#FFD700,#B8860B) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            pointer-events: none;
        }
        .coin-label {
            font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
            text-transform: uppercase; color: rgba(255,255,255,0.5);
        }
        .coin-result-text {
            font-size: 13px; font-weight: 800;
            color: #FFD700; margin-top: 4px; min-height: 18px;
            letter-spacing: 0.5px;
        }

        /* ── DICE ── */
        .joy-dice-btn {
            background: linear-gradient(160deg,#0F172A 0%,#1E293B 100%);
            border: 1.5px solid rgba(99,102,241,0.3);
            border-radius: 20px;
            padding: 16px 8px 14px;
            cursor: pointer; font-family: inherit;
            display: flex; flex-direction: column;
            align-items: center; gap: 0;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            position: relative; overflow: visible;
            box-shadow: 0 4px 20px rgba(99,102,241,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
            transition: transform 0.12s;
            min-height: 0;
        }
        .joy-dice-btn:active { transform: scale(0.95); }

        /* 3-D dice scene */
        .dice-scene {
            perspective: 200px;
            width: 72px; height: 72px;
            margin-bottom: 10px;
            flex-shrink: 0;
            overflow: visible;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dice-3d {
            width: 44px; height: 44px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-15deg) rotateY(30deg);
            transition: none;
            flex-shrink: 0;
        }
        .dice-face {
            position: absolute;
            width: 44px; height: 44px;
            background: white;
            border-radius: 9px;
            display: grid;
            padding: 6px;
            box-sizing: border-box;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
        }
        .dice-face.f1 { transform: translateZ(22px); }
        .dice-face.f2 { transform: rotateY(90deg)  translateZ(22px); }
        .dice-face.f3 { transform: rotateY(180deg) translateZ(22px); }
        .dice-face.f4 { transform: rotateY(-90deg) translateZ(22px); }
        .dice-face.f5 { transform: rotateX(90deg)  translateZ(22px); }
        .dice-face.f6 { transform: rotateX(-90deg) translateZ(22px); }
        .pip {
            width: 7px; height: 7px; border-radius: 50%;
            background: #122E76;
            align-self: center; justify-self: center;
        }
        /* pip layouts */
        .dice-face[data-v="1"] { place-items: center; }
        .dice-face[data-v="2"] { grid-template: 1fr 1fr / 1fr; }
        .dice-face[data-v="2"] .pip:nth-child(2) { align-self: end; }
        .dice-face[data-v="3"] { grid-template: 1fr 1fr 1fr / 1fr; }
        .dice-face[data-v="4"] { grid-template: 1fr 1fr / 1fr 1fr; }
        .dice-face[data-v="5"] { grid-template: 1fr 1fr 1fr / 1fr 1fr; }
        .dice-face[data-v="5"] .pip:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
        .dice-face[data-v="6"] { grid-template: 1fr 1fr 1fr / 1fr 1fr; }
        .dice-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
        .dice-result-text { font-size: 13px; font-weight: 800; color: #818CF8; margin-top: 4px; min-height: 18px; }

        /* ── WHISTLE ── */
        .joy-whistle-btn {
            background: linear-gradient(160deg,#052E16 0%,#14532D 100%);
            border: 1.5px solid rgba(5,150,105,0.35);
            border-radius: 20px;
            padding: 16px 6px 14px;
            cursor: pointer; font-family: inherit;
            display: flex; flex-direction: column;
            align-items: center; gap: 0;
            -webkit-tap-highlight-color: transparent;
            user-select: none; touch-action: none;
            position: relative; overflow: hidden;
            box-shadow: 0 4px 20px rgba(5,150,105,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
            transition: transform 0.08s;
        }
        .joy-whistle-btn:active { transform: scale(0.96); }
        .whistle-scene {
            width: 66px; height: 66px; position: relative;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 10px;
        }
        .whistle-icon {
            font-size: 38px; line-height: 1;
            transition: transform 0.06s;
            position: relative; z-index: 2;
        }
        .whistle-rings {
            position: absolute; inset: 0;
            pointer-events: none;
        }
        .whistle-ring {
            position: absolute;
            border-radius: 50%;
            border: 2px solid rgba(5,150,105,0.6);
            animation: whistleRing 0.5s ease-out forwards;
        }
        @keyframes whistleRing {
            from { opacity: 0.9; transform: scale(0.5); }
            to   { opacity: 0;   transform: scale(2.6); }
        }
        .whistle-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
        .whistle-result-text { font-size: 11px; font-weight: 800; color: #6EE7B7; margin-top: 4px; min-height: 18px; }
        @keyframes whistleShake { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }

        /* ── ASK JOY STRIP ── */
        .joy-strip {
            display: flex; align-items: center; gap: 10px;
            background: linear-gradient(135deg,#122E76,#2D1550);
            border: 1.5px solid rgba(230,0,126,0.3);
            border-radius: 16px;
            padding: 12px 14px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            box-shadow: 0 2px 16px rgba(230,0,126,0.1);
            transition: transform 0.1s;
            width: 100%;
            box-sizing: border-box;
            font-family: inherit;
            text-align: left;
        }
        .joy-strip:active { transform: scale(0.98); }
        .joy-strip-avatar {
            width: 38px; height: 38px; border-radius: 50%;
            background: linear-gradient(135deg,#E6007E,#7C3AED);
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
            box-shadow: 0 0 0 3px rgba(230,0,126,0.2);
        }
        .joy-strip-text { flex: 1; min-width: 0; }
        .joy-strip-name { font-size: 12px; font-weight: 800; color: var(--pink); letter-spacing: .5px; }
        .joy-strip-hint {
            font-size: 12px; color: rgba(255,255,255,0.45);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .joy-strip-arrow { color: rgba(255,255,255,0.3); font-size: 18px; flex-shrink: 0; }

        /* ── JOY CHAT OVERLAY ── */
        .joy-overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            left: max(0px,calc(50% - 220px));
            width: min(100vw,440px);
            background: rgba(0,0,0,0.6);
            z-index: 8500;
            display: none; flex-direction: column;
        }
        /* Pad the chat sheet so it clears the nav bar */
        .joy-overlay .joy-chat-sheet {
            padding-bottom: calc(66px + max(env(safe-area-inset-bottom,0px), var(--sab,0px)));
        }
        .joy-overlay.open { display: flex; }
        .joy-chat-sheet {
            margin-top: auto;
            background: #122E76;
            border-radius: 24px 24px 0 0;
            /* Start compact — grows to 75vh max as content fills */
            height: auto;
            min-height: 220px;
            max-height: 75vh;
            display: flex; flex-direction: column;
            overflow: hidden;
            transition: min-height 0.3s ease;
        }
        /* Expand when JOY has responded */
        .joy-chat-sheet.has-response {
            min-height: 50vh;
        }
        .joy-chat-header {
            display: flex; align-items: center; gap: 10px;
            padding: 16px 16px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            flex-shrink: 0;
        }
        .joy-chat-msgs {
            flex: 1; overflow-y: auto; padding: 12px 14px;
            display: flex; flex-direction: column; gap: 10px;
            -webkit-overflow-scrolling: touch;
        }
        .joy-msg {
            max-width: 88%; padding: 10px 14px;
            border-radius: 16px; font-size: 14px; line-height: 1.5;
            animation: joyMsgIn .2s ease;
        }
        @keyframes joyMsgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
        .joy-msg.joy { background: rgba(230,0,126,0.15); color: rgba(255,255,255,0.9); border-radius: 4px 16px 16px 16px; }
        .joy-msg.user { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); margin-left: auto; border-radius: 16px 4px 16px 16px; }
        .joy-typing { display: flex; gap: 4px; align-items: center; padding: 10px 14px; }
        .joy-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); opacity: 0.5; animation: joyBounce 1s infinite; }
        .joy-typing span:nth-child(2) { animation-delay: .15s; }
        .joy-typing span:nth-child(3) { animation-delay: .3s; }
        @keyframes joyBounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-5px);opacity:1} }
        @keyframes slideUp   { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
        .joy-chat-input-row {
            display: flex; gap: 8px;
            padding: 10px 12px calc(10px + max(var(--sab,0px), env(safe-area-inset-bottom,0px)));
            border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
        }
        .joy-chat-input {
            flex: 1; background: rgba(255,255,255,0.07);
            border: 1.5px solid rgba(255,255,255,0.12);
            border-radius: 14px; padding: 10px 14px;
            font-size: 14px; color: white; font-family: inherit; outline: none;
        }
        .joy-chat-input::placeholder { color: rgba(255,255,255,0.3); }
        .joy-send-btn {
            width: 42px; height: 42px; border-radius: 12px;
            background: var(--pink); border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .joy-mic-btn {
            width: 42px; height: 42px; border-radius: 12px;
            background: rgba(255,255,255,0.08);
            border: 1.5px solid rgba(255,255,255,0.15);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: all 0.2s;
        }
        .joy-mic-btn.listening {
            background: rgba(230,0,126,0.25);
            border-color: var(--pink);
            animation: joyMicPulse 1s ease-in-out infinite;
        }
        .joy-mic-btn.unsupported { display: none; }
        @keyframes joyMicPulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(230,0,126,0.4); }
            50%      { box-shadow: 0 0 0 8px rgba(230,0,126,0); }
        }
        .joy-prompt-pills {
            display: flex; gap: 6px; overflow-x: auto; padding: 6px 14px 2px;
            scrollbar-width: none; flex-shrink: 0;
        }
        .joy-prompt-pill {
            flex-shrink: 0; padding: 5px 12px;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 20px; color: rgba(255,255,255,0.6);
            font-size: 12px; font-weight: 600; cursor: pointer;
            font-family: inherit; white-space: nowrap;
        }
        .joy-prompt-pill:active { background: rgba(230,0,126,0.2); border-color: var(--pink); color: var(--pink); }

        /* result bubble (kept for whistle/drumroll compat) */
        .fun-result {
            position: fixed; bottom: 90px;
            left: max(0px,calc(50% - 120px)); width: min(100%,240px);
            transform: translateY(10px);
            background: var(--text-1); color: white;
            padding: 10px 20px; border-radius: 20px;
            font-size: 14px; font-weight: 700;
            opacity: 0; transition: opacity .2s, transform .2s;
            z-index: 500; white-space: nowrap; pointer-events: none;
        }
        .fun-result.show { opacity: 1; transform: translateY(0); }

        /* ── SPINNER OVERLAY ──────────────────────── */
        .spinner-overlay {
            position: fixed;
            top: 0; bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            background: rgba(9,9,16,0.88);
            z-index: 2000;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.2s;
        }
        .spinner-overlay.open { opacity: 1; pointer-events: all; }
        .spinner-card {
            background: #F5F4F0; border-radius: 24px;
            padding: 28px 24px; width: 310px; text-align: center;
        }
        .spinner-drum {
            height: 120px; overflow: hidden; position: relative;
            border-radius: 14px; background: var(--dark); margin: 0 0 16px;
        }
        .spinner-drum::before, .spinner-drum::after {
            content: ''; position: absolute; left: 0; right: 0; height: 36px; z-index: 2;
        }
        .spinner-drum::before { top: 0; background: linear-gradient(to bottom, #122E76, transparent); }
        .spinner-drum::after  { bottom: 0; background: linear-gradient(to top, #122E76, transparent); }
        .spinner-highlight {
            position: absolute; top: 50%; left: 8px; right: 8px;
            transform: translateY(-50%); height: 40px;
            background: rgba(230,0,126,0.18); border: 1.5px solid rgba(230,0,126,0.4);
            border-radius: 10px; z-index: 1;
        }
        .spinner-reel {
            display: flex; flex-direction: column; align-items: center;
            transition: transform 0s;
        }
        .spinner-name {
            height: 40px; line-height: 40px;
            font-size: 16px; font-weight: 800; color: white;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            width: 100%; padding: 0 16px; text-align: center;
        }
        .spinner-name.winner { color: var(--pink); font-size: 18px; }
        .spinner-result-name {
            font-size: 22px; font-weight: 900; color: var(--pink);
            margin-bottom: 4px;
        }
        .spinner-result-sub { font-size: 12px; color: var(--text-3); margin-bottom: 16px; }
        .spinner-close-btn {
            width: 100%; padding: 13px; background: var(--dark); color: white;
            border: none; border-radius: 12px; font-size: 14px; font-weight: 700;
            cursor: pointer; font-family: inherit;
        }
        .spinner-spin-btn {
            width: 100%; padding: 13px; background: var(--pink); color: white;
            border: none; border-radius: 12px; font-size: 14px; font-weight: 700;
            cursor: pointer; font-family: inherit; margin-bottom: 8px;
        }

        /* ── SHOT CLOCK ────────────────────────────────── */
        .shotclock-overlay {
            position: fixed;
            top: 0; bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            background: rgba(9,9,16,0.92);
            z-index: 2000;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.2s;
        }
        .shotclock-overlay.open { opacity: 1; pointer-events: all; }
        .shotclock-card {
            background: #122E76; border-radius: 28px;
            padding: 32px 28px 24px; width: 300px; text-align: center;
            border: 1px solid rgba(255,255,255,0.08);
        }
        .shotclock-display {
            font-family: 'Michroma', monospace;
            font-size: 88px; font-weight: 900;
            line-height: 1; margin-bottom: 8px;
            transition: color 0.3s;
        }
        .shotclock-display.running { color: #FFFFFF; }
        .shotclock-display.urgent  { color: #E6007E; animation: clockPulse 0.5s infinite; }
        .shotclock-display.zero    { color: #E6007E; }
        @keyframes clockPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
        .shotclock-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 24px; }
        .shotclock-presets { display: flex; gap: 8px; margin-bottom: 16px; }
        .shotclock-preset {
            flex: 1; padding: 10px; background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
            color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: inherit;
        }
        .shotclock-preset.on { background: rgba(230,0,126,0.2); border-color: rgba(230,0,126,0.5); color: var(--pink); }
        .shotclock-start {
            width: 100%; padding: 15px; border-radius: 14px; border: none;
            font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
            margin-bottom: 8px;
        }
        .shotclock-start.ready { background: var(--pink); color: white; }
        .shotclock-start.running { background: #FEF3C7; color: #D97706; }
        .shotclock-close {
            width: 100%; padding: 11px; background: transparent;
            border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
            color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: inherit;
        }

        .fun-zone-label {
            padding: 16px 16px 6px;
            font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; color: var(--text-3);
        }

        /* ========== CHAT NOTIFICATIONS ========== */
        /* Unread dot on nav bar */
        .nav-notif-dot {
            position: absolute;
            top: 6px; right: calc(50% - 18px);
            width: 8px; height: 8px;
            background: var(--pink);
            border-radius: 50%;
            border: 2px solid var(--canvas);
            display: none;
        }
        .nav-notif-dot.show { display: block; }

        /* Unread badge on group list item */
        .unread-badge {
            background: var(--pink);
            color: white;
            font-size: 10px;
            font-weight: 800;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            padding: 0 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: 4px;
        }

        /* Notification strip above group list */
        /* Header icon buttons — bell + messages */
        .hdr-icon-btn {
            position: relative;
            width: 36px; height: 36px;
            border-radius: 10px;
            background: rgba(255,255,255,0.08);
            border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: white; flex-shrink: 0;
            transition: background 0.15s;
        }
        .hdr-icon-btn:active { background: rgba(255,255,255,0.15); }
        .hdr-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; }
        .hdr-icon-badge {
            position: absolute;
            top: -3px; right: -3px;
            min-width: 16px; height: 16px;
            background: var(--pink);
            border-radius: 8px;
            font-size: 9px; font-weight: 800;
            color: white;
            display: none;
            align-items: center; justify-content: center;
            padding: 0 3px;
            border: 1.5px solid var(--dark);
            line-height: 1;
        }
        .hdr-icon-badge.show { display: flex; }

        /* In-app notification bar — sits below header, never overlaps */
        .chat-toast {
            position: fixed;
            bottom: 76px;           /* above bottom nav */
            right: 12px;
            max-width: 280px;
            background: #221236;
            border-radius: 14px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 9400;
            box-shadow: 0 4px 20px rgba(0,0,0,0.35);
            cursor: pointer;
            border-left: 3px solid var(--pink);
            transform: translateX(120%);
            transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1);
            pointer-events: none;
        }
        @media(min-width:460px){.chat-toast{right:max(12px,calc(50% - 203px));bottom:84px;}}
        .chat-toast.show { transform: translateX(0); pointer-events: all; }
        .chat-toast-icon { font-size: 16px; flex-shrink: 0; }
        .chat-toast-body { flex: 1; min-width: 0; }
        .chat-toast-group { font-size: 9px; font-weight: 800; color: var(--pink); margin-bottom: 1px; text-transform: uppercase; letter-spacing: 0.5px; }
        .chat-toast-msg { font-size: 12px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
        .chat-toast-close { color: rgba(255,255,255,0.4); font-size: 18px; flex-shrink: 0; cursor: pointer; padding: 2px 0 2px 6px; line-height: 1; }

        /* ========== PROFILE MENU SHEET ========== */
        .profile-sheet-overlay {
            position: fixed;
            top: 0; bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            background: rgba(9,9,16,0.6);
            z-index: 900;
            opacity: 0; pointer-events: none;
            transition: opacity 0.25s;
        }
        .profile-sheet-overlay.open { opacity: 1; pointer-events: all; }
        .profile-sheet {
            position: fixed; bottom: 0; left: max(0px, calc(50% - 215px));
            transform: translateY(100%);
            width: min(100%, 430px); max-width: 430px;
            background: #F5F4F0;
            border-radius: 24px 24px 0 0;
            z-index: 901;
            transition: transform 0.32s cubic-bezier(0.34,1.1,0.64,1);
            padding-bottom: var(--sab, 16px);
        }
        .profile-sheet-overlay.open .profile-sheet {
            transform: translateY(0);
        }
        .profile-sheet-handle {
            width: 40px; height: 4px;
            background: #D8D6D0; border-radius: 2px;
            margin: 12px auto 0;
        }
        .profile-sheet-head {
            display: flex; align-items: center; gap: 14px;
            padding: 16px 20px 14px;
            border-bottom: 1px solid #E9E8E3;
        }
        .profile-sheet-avatar {
            width: 52px; height: 52px; border-radius: 50%;
            object-fit: cover; flex-shrink: 0;
            border: 2px solid #D8D6D0;
        }
        .profile-sheet-avatar-init {
            width: 52px; height: 52px; border-radius: 50%;
            background: var(--pink); color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; font-weight: 800; flex-shrink: 0;
        }
        .profile-sheet-name { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
        .profile-sheet-email { font-size: 12px; color: var(--text-3); }
        .profile-sheet-joy {
            margin-left: auto; flex-shrink: 0;
            width: 32px; height: 32px; border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Michroma', monospace; font-size: 14px; font-weight: 900; color: white;
        }
        .psj-j{background:var(--pink)} .psj-o{background:#2563EB} .psj-y{background:#059669}

        /* Menu items */
        .profile-menu-section { padding: 8px 12px; }
        .profile-menu-label {
            font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; color: var(--text-3);
            padding: 6px 8px 4px;
        }
        .profile-menu-item {
            display: flex; align-items: center; gap: 14px;
            padding: 13px 12px; border-radius: 12px;
            cursor: pointer; font-family: inherit;
            background: transparent; border: none;
            width: 100%; text-align: left;
            transition: background 0.12s;
            font-size: 14px; font-weight: 600; color: var(--text-1);
        }
        .profile-menu-item:active { background: #E9E8E3; }
        .profile-menu-item.danger { color: #DC2626; }
        .profile-menu-item.warn   { color: #D97706; }
        .profile-menu-icon {
            width: 36px; height: 36px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: 17px;
        }
        .pmi-pink   { background: var(--pink-soft); }
        .pmi-blue   { background: #EFF6FF; }
        .pmi-green  { background: #ECFDF5; }
        .pmi-amber  { background: #FEF3C7; }
        .pmi-red    { background: #FEE2E2; }
        .pmi-grey   { background: #F3F4F6; }
        .profile-menu-arrow { margin-left: auto; color: var(--text-3); font-size: 16px; }

        /* Edit profile sheet (full) */
        .edit-profile-sheet {
            position: fixed;
            top: 0; bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            background: #F5F4F0; z-index: 950;
            transform: translateX(100%);
            transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.28s;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            visibility: hidden;
        }
        .edit-profile-sheet.open {
            transform: translateX(0);
            transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s;
            visibility: visible;
        }
        .ep-tab {
            flex-shrink: 0;
            padding: 8px 14px;
            font-size: 12px; font-weight: 700;
            background: transparent;
            border: none;
            border-radius: 8px;
            color: var(--text-3);
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap;
            letter-spacing: 0.2px;
            transition: background .15s, color .15s;
            margin: 6px 0;
        }
        .ep-tab:hover { background: var(--surface-3); color: var(--text-1); }
        .ep-tab.on {
            background: var(--pink);
            color: white;
            box-shadow: 0 2px 8px rgba(230,0,126,0.35);
        }
        .ep-tab-pane { padding-top: 8px; }
        .lifestyle-chip {
            padding: 7px 12px;
            border: 1.5px solid var(--surface-3);
            border-radius: 20px;
            background: var(--surface-1);
            font-size: 12px; font-weight: 600;
            color: var(--text-2);
            cursor: pointer;
            font-family: inherit;
            transition: all .15s;
            white-space: nowrap;
        }
        .lifestyle-chip.on {
            background: var(--pink);
            border-color: var(--pink);
            color: white;
        }
        .edit-profile-head {
            display: flex; align-items: center; gap: 12px;
            padding: calc(14px + var(--sat, 0px)) 16px 14px;
            border-bottom: 1px solid #E9E8E3;
            background: #F5F4F0;
            position: sticky; top: 0; z-index: 10;
        }
        .ep-back {
            width: 36px; height: 36px; border-radius: 10px;
            background: #E9E8E3; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .ep-back svg { width: 18px; height: 18px; }
        .ep-title { font-size: 16px; font-weight: 800; }
        .ep-save  {
            margin-left: auto; padding: 8px 18px;
            background: var(--pink); color: white;
            border: none; border-radius: 10px;
            font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
        }
        .ep-section-head {
            font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; color: var(--text-3);
            padding: 18px 16px 6px;
        }
        .ep-field { padding: 0 16px 12px; }
        .ep-label { font-size: 11px; font-weight: 700; color: var(--text-3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
        .ep-input {
            width: 100%; padding: 12px 14px;
            border: 1.5px solid #D8D6D0; border-radius: 11px;
            font-size: 14px; font-family: inherit; font-weight: 500;
            background: #FAFAF8; color: var(--text-1); outline: none;
        }
        .ep-input:focus { border-color: var(--pink); background: white; }
        .ep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 12px; }
        .ep-row .ep-field { padding: 0; }

        /* Sport card grid */
        .ep-sport-card {
            border: 2px solid #E9E8E3; border-radius: 12px;
            padding: 8px 4px; text-align: center; cursor: pointer;
            transition: all .15s; position: relative; background: #FAFAF8;
        }
        .ep-sport-card.active-play  { border-color: var(--pink); background: #FDF2F8; }
        .ep-sport-card.active-learn { border-color: #2563EB; background: #EFF6FF; }
        .ep-sport-card .sc-emoji { font-size: 20px; display: block; margin-bottom: 2px; }
        .ep-sport-card .sc-name  { font-size: 9px; font-weight: 700; color: var(--text-3); line-height: 1.2; display: block; }
        .ep-sport-card.active-play  .sc-name { color: var(--pink); }
        .ep-sport-card.active-learn .sc-name { color: #2563EB; }
        .ep-sport-card .sc-skill { font-size: 8px; font-weight: 700; color: white; background: var(--pink);
            border-radius: 4px; padding: 1px 4px; display: none; margin-top: 3px; }
        .ep-sport-card.active-play  .sc-skill { display: block; }
        .ep-sport-card.active-learn .sc-skill { display: block; background: #2563EB; }
        .sc-mode-dot { width: 6px; height: 6px; border-radius: 50%; position: absolute;
            top: 4px; right: 4px; display: none; }
        .ep-sport-card.active-play  .sc-mode-dot { display: block; background: var(--pink); }
        .ep-sport-card.active-learn .sc-mode-dot { display: block; background: #2563EB; }

        /* Sport skill bottom sheet */
        /* epSportSkillSheet moved to edit-profile.html */

        /* Legal sheet */
        /* legal-sheet removed — legal links navigate directly to terms.html / privacy.html */

        /* Account deletion confirmation */
        .delete-confirm-sheet {
            position: fixed;
            top: 0; bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            background: rgba(9,9,16,0.85); z-index: 960;
            display: flex; align-items: flex-end; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.2s;
        }
        .delete-confirm-sheet.open { opacity: 1; pointer-events: all; }
        .delete-confirm-card {
            background: #F5F4F0; border-radius: 24px 24px 0 0;
            padding: 24px 20px calc(28px + var(--sab, 0px));
            width: 100%; max-width: 430px;
        }
        .delete-warning-icon { font-size: 40px; text-align: center; margin-bottom: 12px; }
        .delete-warning-title { font-size: 18px; font-weight: 900; text-align: center; margin-bottom: 8px; color: #DC2626; }
        .delete-warning-body  { font-size: 13px; color: var(--text-2); line-height: 1.6; text-align: center; margin-bottom: 20px; }
        .delete-checkbox-row  { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #FEE2E2; border-radius: 10px; margin-bottom: 16px; font-size: 12px; color: #991B1B; line-height: 1.5; }
        .delete-confirm-btn   { width: 100%; padding: 14px; border-radius: 12px; border: none; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; margin-bottom: 8px; }
        .delete-confirm-btn.red { background: #DC2626; color: white; }
        .delete-confirm-btn.red:disabled { background: #D8D6D0; color: var(--text-3); cursor: not-allowed; }
        .delete-cancel-btn    { width: 100%; padding: 13px; border-radius: 12px; border: 1px solid #D8D6D0; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text-2); }

        /* ========== PROFILE DRAWER ========== */
        .profile-drawer-overlay {
            position: fixed; inset: 0;
            background: rgba(9,9,16,0.6);
            z-index: 800;
            opacity: 0; pointer-events: none;
            transition: opacity 0.25s;
            display: flex; align-items: flex-end; justify-content: center;
        }
        .profile-drawer-overlay.open { opacity: 1; pointer-events: all; }
        .profile-drawer {
            background: var(--canvas);
            border-radius: 24px 24px 0 0;
            width: 100%; max-width: 430px;
            padding: 0 0 calc(80px + var(--sab, 0px));
            transform: translateY(100%);
            transition: transform 0.32s cubic-bezier(0.34,1.1,0.64,1);
        }
        .profile-drawer-overlay.open .profile-drawer { transform: translateY(0); }
        .pd-handle { width: 40px; height: 4px; background: var(--surface-4); border-radius: 2px; margin: 14px auto 0; }
        .pd-hero { background: #122E76; padding: 20px 20px 18px; display: flex; align-items: center; gap: 14px; }
        .pd-avatar-wrap { position: relative; flex-shrink: 0; }
        .pd-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--pink); color: white; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
        .pd-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: none; }
        .pd-info { flex: 1; min-width: 0; }
        .pd-name { font-size: 18px; font-weight: 800; color: white; margin-bottom: 2px; }
        .pd-handle-txt { font-size: 11px; color: rgba(255,255,255,0.4); font-family: 'Michroma', monospace; margin-bottom: 6px; }
        .pd-joy { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
        .pd-body { padding: 14px 16px; }
        .pd-sports { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
        .pd-location { font-size: 12px; color: var(--text-3); margin-bottom: 14px; }
        .pd-view-btn { width: 100%; padding: 14px; background: var(--pink); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px rgba(230,0,126,0.3); letter-spacing: -0.2px; }

        /* ========== VISIBILITY ========== */
        .screen { display: none; }
        .screen.active { display: block; }
        .hidden { display: none !important; }

        /* Sub-screens (event, group, leaderboard) are full overlays */
        #eventScreen, #groupScreen, #leaderboardScreen {
            position: fixed;
            top: calc(56px + var(--sat, 0px));
            bottom: calc(66px + var(--sab, 0px));
            left: max(0px, calc(50% - 215px));
            width: min(100%, 430px);
            z-index: 50;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: var(--canvas);
            padding-bottom: 8px;
        }


        #eventScreen { display: none; }
        #groupScreen { display: none; }
        #leaderboardScreen { display: none; }
        #eventScreen.active { display: block; }
        #groupScreen.active {
            display: flex;
            position: fixed;
            top: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            z-index: 150;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
            background: var(--canvas);
        }
        #leaderboardScreen.active { display: block; }

        /* Platform-specific padding — leaderboard only */
        html.platform-ios #leaderboardScreen.active,
        html.platform-android #leaderboardScreen.active {
            padding-bottom: 90px;
        }

        /* ========== HOME DASHBOARD ========== */
        .home-greeting { padding: 20px 56px 0 16px; position: relative; transition: background .15s; border-radius: 12px; }
        .home-greeting:active { background: var(--surface-2); }
        .home-welcome { font-size: 13px; font-weight: 500; color: var(--text-3); margin-bottom: 2px; }
        .home-greeting-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
        .home-name { font-size: 26px; font-weight: 900; color: var(--text-1); letter-spacing: -1px; line-height: 1; }
        .home-joy-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; }
        .home-joy-tag.j { background:#FDF2F8; color:#E6007E; }
        .home-joy-tag.o { background:#EFF6FF; color:#2563EB; }
        .home-joy-tag.y { background:#ECFDF5; color:#059669; }

        /* Stats bar */
        .home-stats-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; background: var(--surface-3); border-radius: 14px; overflow: hidden; margin: 14px 16px 0; }
        .home-stat { background: transparent; padding: 16px 10px; text-align: center; }
        .home-stat-n { font-size: 26px; font-weight: 900; color: var(--pink); line-height: 1; margin-bottom: 4px; letter-spacing: -1px; }
        .home-stat-n.green { color: var(--green); }
        .home-stat-n.amber { color: var(--amber); }
        .home-stat-n.blue  { color: #2563EB; }
        .home-stat-l { font-size: 8px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.2px; }

        /* Action cards */
        .home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 0; }
        .action-card { border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; border: none; text-align: left; font-family: inherit; transition: opacity 0.15s; }
        .action-card:active { opacity: 0.85; }
        .action-card.primary { background: var(--pink); color: white; grid-column: span 2; flex-direction: row; align-items: center; gap: 14px; }
        .action-card.secondary { background: var(--surface-2); border: 1.5px solid var(--surface-4); }
        .action-card.tertiary  { background: #ECFDF5; border: 1.5px solid rgba(5,150,105,0.2); }
        .action-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .action-icon svg { width: 20px; height: 20px; display: block; }
        .action-card.primary   .action-icon { background: rgba(255,255,255,0.2); }
        .action-card.secondary .action-icon { background: var(--pink-soft); }
        .action-card.tertiary  .action-icon { background: rgba(5,150,105,0.12); }
        .action-body { flex: 1; }
        .action-title { font-size: 15px; font-weight: 800; margin-bottom: 2px; letter-spacing: -0.2px; }
        .action-card.primary   .action-title { color: white; }
        .action-card.secondary .action-title { color: var(--text-1); }
        .action-card.tertiary  .action-title { color: #059669; }
        .action-desc { font-size: 11px; font-weight: 500; line-height: 1.3; }
        .action-card.primary   .action-desc { color: rgba(255,255,255,0.7); }
        .action-card.secondary .action-desc { color: var(--text-3); }
        .action-card.tertiary  .action-desc { color: rgba(5,150,105,0.6); }
        .action-arrow { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .action-arrow svg { width: 16px; height: 16px; stroke: white; display: block; }

        /* Join row */
        .home-join-row { display: flex; gap: 8px; padding: 12px 16px 0; }
        .join-input { flex: 1; padding: 13px 14px; border: 1.5px solid var(--surface-4); border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-family: 'Michroma', monospace; background: var(--surface-2); color: var(--text-1); outline: none; }
        .join-input:focus { border-color: var(--pink); background: var(--surface-1); }
        .join-input::placeholder { color: var(--text-3); font-size: 12px; letter-spacing: 1px; text-transform: none; font-family: inherit; font-weight: 500; }
        .join-btn { padding: 13px 20px; background: var(--text-1); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
        .join-btn:active { background: var(--text-2); }

        /* Section heads */

        /* ── HOME TAB PANELS ─────────────────────────────────────────── */
        .home-tab-panel {
            margin: 0 0 4px;
        }
        .home-tab-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 16px 10px;
        }
        .home-tab-pills {
            display: flex;
            background: var(--surface-2);
            border-radius: 10px;
            padding: 3px;
            gap: 2px;
        }
        .home-tab-pill {
            padding: 7px 14px;
            border-radius: 8px;
            border: none;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            background: transparent;
            color: var(--text-3);
            transition: background .15s, color .15s;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
        }
        .home-tab-pill.on {
            background: #122E76;
            color: white;
            box-shadow: 0 1px 4px rgba(18,46,118,.25);
        }
        .home-tab-pill:active {
            transform: scale(0.96);
        }
        .home-section-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 8px; }
        .home-section-title { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #9CA3AF; }
        .home-section-action { font-size: 11px; font-weight: 700; color: var(--pink); background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px 10px; border-radius: 20px; background: rgba(230,0,126,0.08); }

        /* Consensus notice */
        .consensus-notice { margin: 10px 16px 0; padding: 12px 14px; background: #FEF3C7; border: 1px solid rgba(217,119,6,0.2); border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--amber); font-weight: 600; }
        .consensus-notice svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--amber); }
    
.match-disputed { border-left: 3px solid var(--amber); }
        .match-games { display:flex; gap:5px; padding:6px 14px 8px; flex-wrap:wrap; }
        .match-game { font-size:11px; font-weight:700; padding:3px 8px; background:var(--surface-3); border-radius:6px; color:var(--text-2); }
        .match-game.done { background:var(--green-soft); color:var(--green); }
        .match-vote-row { display:flex; gap:6px; padding:6px 14px 10px; }
        .vote-btn { flex:1; padding:8px; border-radius:10px; border:1.5px solid var(--surface-4); background:var(--surface-2); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; color:var(--text-1); transition:all 0.15s; }
        .vote-btn:active { background:var(--green-soft); border-color:var(--green); color:var(--green); }
    
        /* ── BELL & REMINDER PANEL ───────────────────────── */
        /* bell-btn replaced by .hdr-icon-btn — see above */
        .reminder-panel {
            position: fixed; top: 56px; left: max(0px, calc(50% - 215px));
            width: min(100%, 430px); max-width: 430px;
            background: #F5F4F0;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            z-index: 300;
            display: none;
            max-height: calc(100vh - 80px); overflow-y: auto;
        }
        .reminder-panel.open { display: block; }
        .reminder-panel-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 16px 10px; border-bottom: 1px solid var(--surface-3);
        }
        .reminder-panel-title { font-size: 14px; font-weight: 800; }
        .reminder-panel-close {
            width: 36px; height: 36px; border-radius: 10px;
            background: var(--surface-3); border: none; cursor: pointer;
            font-size: 20px; color: var(--text-2);
            display: flex; align-items: center; justify-content: center;
        }
        .reminder-item {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 13px 16px; border-bottom: 1px solid var(--surface-2);
            cursor: pointer; transition: background 0.12s;
        }
        .reminder-item:last-child { border-bottom: none; }
        .reminder-item:active { background: var(--surface-2); }
        .reminder-icon {
            width: 36px; height: 36px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
        }
        .ri-pink  { background: var(--pink-soft); }
        .ri-amber { background: #FEF3C7; }
        .ri-blue  { background: #EFF6FF; }
        .ri-green { background: #ECFDF5; }
        .reminder-body { flex: 1; min-width: 0; }
        .reminder-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
        .reminder-sub   { font-size: 11px; color: var(--text-3); line-height: 1.4; }
        .reminder-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-3); }
        .reminder-overlay {
            position: fixed;
            top: 0; bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            z-index: 299;
            display: none;
            background: rgba(9,9,16,0.35);
        }
        .reminder-overlay.open { display: block; }

        /* Set-reminder bottom sheet */
        .set-reminder-sheet {
            position: fixed; bottom: 0; left: max(0px, calc(50% - 215px));
            transform: translateY(100%);
            width: min(100%, 430px); max-width: 430px;
            background: #F5F4F0;
            border-radius: 24px 24px 0 0;
            z-index: 910;
            transition: transform 0.3s cubic-bezier(0.34,1.1,0.64,1);
            padding-bottom: var(--sab, 20px);
        }
        .set-reminder-sheet.open { transform: translateY(0); }
        .set-reminder-overlay {
            position: fixed;
            top: 0; bottom: 0;
            left: max(0px, calc(50% - 215px));
            width: min(100vw, 430px);
            z-index: 909;
            background: rgba(9,9,16,0.5);
            opacity: 0; pointer-events: none; transition: opacity 0.25s;
        }
        .set-reminder-overlay.open { opacity: 1; pointer-events: all; }
        .srs-handle { width: 40px; height: 4px; background: #D8D6D0; border-radius: 2px; margin: 12px auto 0; }
        .srs-head { padding: 14px 20px 6px; }
        .srs-event-name { font-size: 17px; font-weight: 900; color: var(--text-1); margin-bottom: 2px; }
        .srs-event-time { font-size: 12px; color: var(--text-3); }
        .srs-section-label {
            font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; color: var(--text-3);
            padding: 14px 20px 6px;
        }
        .srs-options { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 8px; }
        .srs-option {
            display: flex; align-items: center; gap: 14px;
            padding: 15px 16px; border-radius: 14px;
            background: white; border: 2px solid var(--surface-3);
            cursor: pointer; font-family: inherit; text-align: left;
            transition: all 0.15s; width: 100%;
        }
        .srs-option.active {
            border-color: var(--pink);
            background: var(--pink-soft);
        }
        .srs-option.active .srs-opt-time { color: var(--pink); }
        .srs-opt-icon { font-size: 22px; flex-shrink: 0; }
        .srs-opt-body { flex: 1; }
        .srs-opt-time { font-size: 15px; font-weight: 800; color: var(--text-1); margin-bottom: 1px; }
        .srs-opt-desc { font-size: 11px; color: var(--text-3); }
        .srs-opt-check { font-size: 18px; color: var(--pink); opacity: 0; transition: opacity 0.15s; }
        .srs-option.active .srs-opt-check { opacity: 1; }
        .srs-save-btn {
            margin: 8px 16px 4px; width: calc(100% - 32px);
            padding: 15px; background: var(--pink); color: white;
            border: none; border-radius: 14px;
            font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
        }
        .srs-save-btn:disabled { background: var(--surface-4); color: var(--text-3); cursor: not-allowed; }
        .srs-clear-btn {
            width: calc(100% - 32px); margin: 6px 16px 8px;
            padding: 12px; background: transparent;
            border: 1px solid var(--surface-4); border-radius: 12px;
            font-size: 13px; font-weight: 600; color: var(--text-3);
            cursor: pointer; font-family: inherit;
        }
        /* Reminder badge on event list item */
        .event-reminder-badge {
            font-size: 10px; font-weight: 700; color: #D97706;
            background: #FEF3C7; padding: 2px 6px; border-radius: 5px;
            white-space: nowrap;
        }
        /* Countdown ring — shown on reminder panel when time is near */
        .reminder-countdown {
            font-size: 11px; font-weight: 800;
            padding: 3px 8px; border-radius: 6px;
            margin-left: auto; flex-shrink: 0;
        }
        .rc-urgent { background: #FEE2E2; color: #DC2626; }
        .rc-soon   { background: #FEF3C7; color: #D97706; }
        .rc-later  { background: #EFF6FF; color: #2563EB; }
    
        /* ── ROUND NAVIGATION ─────────────────────────────────────── */
        .round-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 12px;
            background: var(--pink-soft);
            border-radius: 12px;
            margin-bottom: 10px;
        }
        .round-bar-center { flex: 1; min-width: 0; }
        .round-nav-btn {
            width: 30px; height: 30px;
            border-radius: 8px;
            background: white;
            border: 1px solid var(--border);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: background 0.12s, border-color 0.12s;
        }
        .round-nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        .round-nav-btn:not(:disabled):active { background: var(--pink-soft); border-color: var(--pink); }
        .round-nav-btn svg { width: 16px; height: 16px; stroke: var(--text-2); }
        .round-nav-btn:not(:disabled):hover svg { stroke: var(--pink); }
        /* Past round overlay hint */
        .past-round-banner {
            background: #FEF3C7;
            border: 1px solid #FDE68A;
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 12px;
            color: #92400E;
            font-weight: 600;
            text-align: center;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
    
        /* Photo upload */
        .profile-sheet-avatar { cursor: pointer; }
        .profile-sheet-avatar-init { cursor: pointer; }
        .photo-uploading { opacity: 0.6; }


        /* Winner Format buttons */
        .wfmt-btn {
            padding: 12px 8px;
            border-radius: 12px;
            border: 2px solid var(--surface-4);
            background: var(--surface-2);
            cursor: pointer;
            font-family: inherit;
            text-align: center;
            transition: all 0.15s;
            color: var(--text-1);
        }
        .wfmt-btn.on {
            border-color: var(--pink);
            background: var(--pink-soft, #FDF2F8);
        }

        
        /* Login shake animation */
        @keyframes loginShake {
            0%,100% { transform: translateX(0); }
            20%      { transform: translateX(-8px); }
            40%      { transform: translateX(8px); }
            60%      { transform: translateX(-5px); }
            80%      { transform: translateX(5px); }
        }

        