/* ============================================================================
       CSS VARIABLES - Wordle-Inspired Minimal Design System
       ============================================================================ */
    
    /* Light Theme (Default) */
    :root[data-theme="light"],
    :root:not([data-theme]) {
      /* Backgrounds */
      --bg-primary: #ffffff;
      --bg-secondary: #f7f7f7;
      --bg-elevated: #ffffff;
      --bg-hover: #f0f0f0;
      
      /* Borders */
      --border-default: #d3d6da;
      --border-hover: #878a8c;
      --border-selected: #6aaa64;
      --border-error: #e63946;
      
      /* Text */
      --text-primary: #1a1a1a;
      --text-secondary: #787c7e;
      --text-muted: #b0b0b0;
      --text-on-accent: #ffffff;
      
      /* Accents */
      --accent-success: #6aaa64;
      --accent-success-hover: #5a9a54;
      --accent-warning: #c9b458;
      --accent-error: #e63946;
      --accent-info: #4a90e2;
      
      /* Grid Tile States */
      --tile-bg-default: #ffffff;
      --tile-bg-selected: rgba(106, 170, 100, 0.2);
      --tile-bg-success: #6aaa64;
      --tile-bg-error: rgba(230, 57, 70, 0.1);
      
      /* Legacy compatibility */
      --success: #6aaa64;
      --error: #e63946;
      --warning: #c9b458;
    }

    /* Dark Theme - Improved Contrast */
    :root[data-theme="dark"] {
      /* Backgrounds - Dark mode palette */
      --bg-primary: #0d1117;
      --bg-secondary: #111827;
      --bg-elevated: #161b22;
      --bg-hover: #1f2937;
      
      /* Borders */
      --border-default: #1f2937;
      --border-hover: #2d3748;
      --border-selected: #5b8def;
      --border-error: #f87171;
      
      /* Text */
      --text-primary: #e5e7eb;
      --text-secondary: #c7cdd8;
      --text-muted: #8b93a7;
      --text-on-accent: #ffffff;
      
      /* Accents */
      --accent-success: #34d399;
      --accent-success-hover: #059669;
      --accent-warning: #fbbf24;
      --accent-error: #f87171;
      --accent-info: #38bdf8;
      
      /* Grid Tile States */
      --tile-bg-default: #161b22;
      --tile-bg-selected: rgba(91, 141, 239, 0.25);
      --tile-bg-success: #34d399;
      --tile-bg-error: rgba(248, 113, 113, 0.22);
      
      /* Legacy compatibility */
      --success: #34d399;
      --error: #f87171;
      --warning: #fbbf24;
    }

    /* Typography Scale */
    :root {
      --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-xs: calc(0.75rem * var(--font-size-multiplier));
      --font-sm: calc(0.875rem * var(--font-size-multiplier));
      --font-base: calc(1rem * var(--font-size-multiplier));
      --font-lg: calc(1.25rem * var(--font-size-multiplier));
      --font-xl: calc(1.5rem * var(--font-size-multiplier));
      --font-2xl: calc(2rem * var(--font-size-multiplier));
      --font-3xl: calc(2.5rem * var(--font-size-multiplier));
      --font-display: calc(3rem * var(--font-size-multiplier));
      
      --font-normal: 400;
      --font-medium: 500;
      --font-semibold: 600;
      --font-bold: 700;
      
      --leading-tight: 1.25;
      --leading-normal: 1.5;
      --leading-relaxed: 1.75;
      
      /* Safe area insets for notched devices (iOS 11+) */
      --safe-area-inset-top: env(safe-area-inset-top, 0px);
      --safe-area-inset-right: env(safe-area-inset-right, 0px);
      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
      --safe-area-inset-left: env(safe-area-inset-left, 0px);
    }

    /* Spacing Scale (8px base) */
    :root {
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.5rem;
      --space-6: 2rem;
      --space-8: 3rem;
      --space-10: 4rem;
      --space-12: 6rem;
    }

    /* Global tap highlight removal for modern look */
    * {
      -webkit-tap-highlight-color: transparent;
      tap-highlight-color: transparent;
    }

    /* Border Radius */
    :root {
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-full: 9999px;
    }

    /* Shadows (Subtle, Wordle-style) */
    :root {
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
      --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.12);
      --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      --shadow-tile: 0 2px 4px rgba(0, 0, 0, 0.1);
      --shadow-tile-selected: 0 4px 8px rgba(106, 170, 100, 0.3);
    }

    /* Transitions */
    :root {
      --transition-fast: 150ms ease-out;
      --transition-normal: 200ms ease-out;
      --transition-slow: 300ms ease-out;
      --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
      
      /* Legacy compatibility */
      --transition-fast: 0.15s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }

    /* Grid Dimensions */
    :root {
      --grid-tile-size-4: calc(62px * var(--font-size-multiplier));
      --grid-tile-size-5: calc(50px * var(--font-size-multiplier));
      --grid-gap: calc(6px * var(--font-size-multiplier));
      --grid-font-size: calc(32px * var(--font-size-multiplier));
      --grid-tile-size-4-mobile: calc(70px * var(--font-size-multiplier));
      --grid-tile-size-5-mobile: calc(56px * var(--font-size-multiplier));
      --grid-font-size-mobile: calc(28px * var(--font-size-multiplier));
    }

    /* Font Size Multiplier (for accessibility) */
    /* Default multiplier - will be overridden by inline styles from JavaScript */
    :root {
      --font-size-multiplier: 1;
    }
    
    /* Font Size Options - Set multiplier on :root so all variables can use it */
    /* Using :root, html, and body selectors for maximum specificity */
    :root.font-size-small,
    html.font-size-small,
    body.font-size-small {
      --font-size-multiplier: 0.85;
    }

    :root.font-size-large,
    html.font-size-large,
    body.font-size-large {
      --font-size-multiplier: 1.15;
    }

    :root.font-size-xlarge,
    html.font-size-xlarge,
    body.font-size-xlarge {
      --font-size-multiplier: 1.3;
    }

    :root.font-size-xxlarge,
    html.font-size-xxlarge,
    body.font-size-xxlarge {
      --font-size-multiplier: 1.5;
    }

    :root.font-size-normal,
    html.font-size-normal,
    body.font-size-normal {
      --font-size-multiplier: 1;
    }

    body {
      font-size: calc(14px * var(--font-size-multiplier));
    }

    /* Screen Reader Only */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ============================================================================
       RESET & BASE STYLES
       ============================================================================ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Industry Standard: Reserve space for scrollbar to prevent layout shifts */
    html {
      scrollbar-gutter: stable;
    }

    body {
      font-family: var(--font-family);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: var(--font-base);
      line-height: var(--leading-normal);
      min-height: 100vh;
      overflow-x: hidden;
      transition: background-color 200ms ease, color 200ms ease;
      /* Safe area insets for notched devices */
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      /* Industry Standard: Allow scrolling when not in modal */
      touch-action: pan-y pan-x;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    #app {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ============================================================================
       HEADER - Minimal Wordle-style
       ============================================================================ */
    .header {
      background: var(--bg-primary);
      padding: calc(var(--space-4) + var(--safe-area-inset-top)) var(--space-5) var(--space-4);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      transition: background-color 200ms ease;
    }

    .logo-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
    }

    .level-badge {
      display: inline-flex;
      align-items: center;
      background: var(--bg-secondary);
      color: var(--accent-primary);
      padding: 0.15rem 0.6rem;
      border-radius: var(--radius-full);
      font-size: var(--font-sm);
      font-weight: var(--font-bold);
      border: 1px solid var(--accent-primary);
      margin-left: var(--space-2);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      vertical-align: middle;
    }

    .level-label {
      text-transform: uppercase;
      font-size: 0.7em;
      margin-right: 2px;
      opacity: 0.8;
    }

    /* Level Up Notification */
    .level-up-notification {
      position: fixed;
      top: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      background: linear-gradient(135deg, var(--accent-primary), var(--accent-success));
      color: white;
      padding: 1rem 2rem;
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      z-index: 10000;
      transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      pointer-events: none;
    }

    .level-up-notification.show {
      transform: translateX(-50%) translateY(0);
    }

    .level-up-content {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .level-up-icon {
      font-size: 2.5rem;
      animation: pulse 1s infinite alternate;
    }

    .level-up-title {
      font-weight: var(--font-black, 900);
      font-size: var(--font-xl);
      letter-spacing: 0.1em;
    }

    .level-up-subtitle {
      font-size: var(--font-base);
      opacity: 0.9;
    }

    @keyframes pulse {
      from { transform: scale(1); }
      to { transform: scale(1.2); }
    }

    /* Profile Level Styles */
    .profile-level-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-2);
    }

    .profile-level-badge {
      background: var(--accent-primary);
      color: white;
      padding: 0.25rem 0.75rem;
      border-radius: var(--radius-full);
      font-weight: var(--font-bold);
      font-size: var(--font-lg);
    }

    .profile-level-xp {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      font-weight: var(--font-medium);
    }

    .profile-level-progress-container {
      width: 100%;
      height: 1.25rem;
      background: var(--bg-accent-soft);
      border-radius: var(--radius-full);
      position: relative;
      overflow: hidden;
      margin-bottom: var(--space-1);
      border: 1px solid var(--border-default);
    }

    .profile-level-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-primary), var(--accent-success));
      border-radius: var(--radius-full);
      transition: width 1s ease-out;
    }

    .profile-level-progress-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.65rem;
      font-weight: var(--font-bold);
      color: var(--text-primary);
      text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
      white-space: nowrap;
      pointer-events: none;
    }

    .header-logo {
      height: 40px;
      width: 40px;
      max-width: 40px;
      max-height: 40px;
      display: block;
      object-fit: contain;
      flex-shrink: 0;
    }

    @media (max-width: 640px) {
      .header-logo {
        height: 32px;
        width: 32px;
        max-width: 32px;
        max-height: 32px;
      }
    }

    .title {
      font-size: var(--font-3xl);
      font-weight: var(--font-bold);
      color: var(--text-primary);
      letter-spacing: -0.02em;
      margin: 0;
      display: block;
    }

    /* ============================================================================
       DICTIONARY STATUS - Between Header and Nav Bar
       ============================================================================ */
    .dict-status-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: var(--space-2) var(--space-4);
      background: var(--bg-primary);
      width: 100%;
    }

    .dict-badge {
      display: inline-block;
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-full);
      padding: var(--space-1) var(--space-3);
      font-size: var(--font-xs);
      color: var(--text-secondary);
      font-weight: var(--font-medium);
      white-space: nowrap;
    }

    /* ============================================================================
       NAVIGATION BAR - New Horizontal Bar below Header
       ============================================================================ */
    .nav-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: var(--space-5);
      padding: var(--space-2) var(--space-5) var(--space-4);
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border-default);
      width: 100%;
      flex-wrap: wrap;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    /* Sync status inside user menu */
    .user-menu {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .sync-status {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      font-size: var(--font-xs);
      color: var(--text-secondary);
    }

    .sync-status-text {
      color: var(--accent-success);
    }

    /* Desktop/Mobile visibility helpers */
    .desktop-only {
      display: inline-flex !important;
    }

    .mobile-only {
      display: none !important;
    }

    @media (max-width: 767px) {
      .desktop-only {
        display: none !important;
        visibility: hidden !important;
      }

      .mobile-only {
        display: inline-flex !important;
      }
      
      /* Hide the top nav bar entirely on mobile - bottom nav takes over */
      .nav-bar {
        display: none !important;
      }
      
      footer {
        /* Account for the ~70px height of the bottom nav + extra breathing room */
        margin-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
      }
      
      /* Force hide desktop elements on mobile even if inline styles are set */
      #username-display.desktop-only,
      #sync-status.desktop-only,
      #btn-theme-toggle.desktop-only,
      #btn-settings.desktop-only,
      #btn-profile.desktop-only,
      #btn-leaderboard.desktop-only,
      #user-menu.desktop-only,
      .username-display.desktop-only,
      .sync-status.desktop-only,
      .btn-theme-toggle.desktop-only,
      .btn-settings.desktop-only,
      .btn-profile.desktop-only,
      .btn-leaderboard.desktop-only,
      .user-menu.desktop-only,
      .nav-bar.desktop-only {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
      }
    }

    /* ============================================================================
       MOBILE MENU
       ============================================================================ */
    .mobile-menu {
      position: fixed;
      top: 0;
      right: 0;
      width: 280px;
      max-width: 85vw;
      height: 100vh;
      background: var(--bg-elevated);
      border-left: 1px solid var(--border-default);
      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      overflow-y: auto;
    }

    .mobile-menu[aria-hidden="false"] {
      transform: translateX(0);
    }

    .mobile-menu-content {
      padding: var(--space-4);
      padding-top: calc(var(--space-4) + 60px); /* Space for header */
    }

    .mobile-menu-section {
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--border-default);
    }

    .mobile-menu-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .mobile-menu-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3);
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-size: var(--font-base);
      text-align: left;
      cursor: pointer;
      border-radius: var(--radius-md);
      transition: background-color var(--transition-fast);
    }

    .mobile-menu-item:hover,
    .mobile-menu-item:focus {
      background: var(--bg-hover);
      outline: none;
    }

    .mobile-menu-icon {
      font-size: var(--font-xl);
      width: 24px;
      text-align: center;
    }

    .mobile-menu-label {
      flex: 1;
    }

    .mobile-username {
      font-weight: var(--font-semibold);
      color: var(--text-primary);
      font-size: var(--font-lg);
    }

    .mobile-menu-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mobile-menu-backdrop.active {
      opacity: 1;
      pointer-events: all;
    }

    @media (max-width: 767px) {
      .mobile-menu {
        display: block;
      }
    }

    @media (min-width: 768px) {
      .mobile-menu {
        display: none !important;
      }
    }

    /* ============================================================================
       START GAME BUTTON - Prominent Position (inside main-container)
       ============================================================================ */
    .start-game-container-top {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.5rem 0 1rem;
      margin: 0 auto;
    }

    .start-game-btn-large {
      min-width: 280px;
      padding: 1.25rem 3rem;
      font-size: 1.5rem;
      font-weight: 700;
      border-radius: var(--radius-lg);
      box-shadow: 0 4px 16px rgba(106, 170, 100, 0.4);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      letter-spacing: 0.5px;
    }

    .start-game-btn-large:hover:not(:disabled) {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(106, 170, 100, 0.5);
    }

    .start-game-btn-large:active:not(:disabled) {
      transform: scale(0.98);
    }

    .start-game-btn-large:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* ============================================================================
       COMPACT HOMEPAGE INTRO
       ============================================================================ */
    .homepage-intro-compact {
      width: 100%;
      max-width: 700px;
      margin: 0 auto var(--space-4);
      padding: var(--space-4) var(--space-5);
      text-align: center;
      font-size: var(--font-base); /* Wordle standard: 16px readable */
      color: var(--text-primary); /* Better contrast */
      line-height: 1.6;
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }

    .homepage-intro-compact .intro-text strong {
      color: var(--accent-success);
      font-weight: var(--font-semibold);
    }

    .homepage-intro-compact .intro-main-text {
      margin-bottom: 0.75rem;
    }

    .homepage-intro-compact .intro-text {
      display: block;
      margin-bottom: 0.75rem;
    }

    .homepage-intro-compact .intro-text:last-child {
      margin-bottom: 0;
    }

    .homepage-intro-compact .intro-links {
      margin-top: 0.5rem;
    }

    .homepage-intro-compact .intro-link {
      background: none;
      border: none;
      color: var(--accent-color);
      text-decoration: underline;
      cursor: pointer;
      font-size: inherit;
      font-family: inherit;
      padding: 0;
      margin: 0 0.25rem;
      transition: opacity 0.2s;
    }

    .homepage-intro-compact .intro-link:hover {
      opacity: 0.8;
    }

    .homepage-intro-compact .intro-separator {
      margin: 0 0.5rem;
      color: var(--text-muted);
    }

    @media (max-width: 767px) {
      .header {
        padding: var(--space-3) var(--space-4);
      }

      .dict-status-container {
        padding: var(--space-1) var(--space-3);
      }
      
      /* Nav bar is completely hidden on mobile - bottom nav handles navigation */
      /* Removed all nav-bar styling rules for mobile */

      .start-game-container-top {
        padding: 1rem var(--space-3) 0.5rem; /* Match main-container padding */
        width: 100%;
        display: flex !important;
        justify-content: center !important; /* Ensure centering */
        align-items: center !important;
      }

      .start-game-btn-large {
        min-width: 200px;
        width: auto !important; /* Change from 100% to auto */
        max-width: 300px;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        margin: 0 auto !important; /* Explicit centering */
      }

      .homepage-intro-compact {
        /* NYT Spelling Bee standard: 16px minimum for readability */
        font-size: var(--font-base); /* 16px - readable */
        line-height: 1.6; /* Generous line spacing */
        padding: var(--space-3) var(--space-4); /* More padding */
        margin-bottom: var(--space-3);
        width: 100%;
      }

      /* NYT Spelling Bee standard: 14px minimum for labels */
      .mobile-hud-label {
        font-size: var(--font-sm); /* 14px - minimum readable */
      }

      .dict-badge {
        font-size: var(--font-sm); /* 14px */
        padding: var(--space-2) var(--space-4); /* More padding */
      }
    }

    .btn-icon {
      background: transparent;
      border: none;
      padding: var(--space-2);
      cursor: pointer;
      font-size: var(--font-xl);
      color: var(--text-secondary);
      border-radius: var(--radius-md);
      transition: background-color var(--transition-fast), color var(--transition-fast);
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-icon:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .btn-icon:focus {
      outline: none;
    }

    /* ============================================================================
       BOTTOM NAVIGATION BAR (Mobile Only)
       ============================================================================ */
    .bottom-nav {
      display: none; /* Hidden on desktop */
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--bg-elevated);
      border-top: 1px solid var(--border-default);
      padding: 0.4rem var(--space-3); /* Reduced by 20%: 0.5rem * 0.8 = 0.4rem */
      padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
      justify-content: space-around;
      align-items: center;
      z-index: 2000; /* Increased z-index to be above everything */
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      transition: background-color 200ms ease, border-color 200ms ease;
    }

    @media (max-width: 767px) {
      .bottom-nav {
        display: flex;
      }
    }

    .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-1);
      padding: 0.4rem; /* Reduced by 20%: 0.5rem * 0.8 = 0.4rem */
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: var(--font-xs);
      cursor: pointer;
      transition: color var(--transition-fast), transform var(--transition-fast);
      min-width: 60px;
      flex: 1;
      max-width: 100px;
    }

    .bottom-nav-item:hover,
    .bottom-nav-item:focus {
      color: var(--text-primary);
      outline: none;
    }

    .bottom-nav-item:active {
      transform: scale(0.95);
    }

    .bottom-nav-icon {
      font-size: var(--font-2xl);
      line-height: 1;
    }

    .bottom-nav-label {
      font-size: var(--font-xs);
      font-weight: var(--font-medium);
      white-space: nowrap;
    }

    /* ============================================================================
       COMPACT HUD (Score + Combo + Time) - Visible on all screens
       ============================================================================ */
    /* HUD and Score Breakdown Container - Always stacks vertically */
    .hud-score-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      width: 100%;
      max-width: 600px;
      flex-shrink: 0; /* Prevent shrinking */
      margin: 0 auto; /* Center it */
      background: transparent !important;
      background-color: transparent !important;
    }

    .mobile-hud {
      display: flex;
      justify-content: center;
      gap: var(--space-2); /* Reduced from var(--space-4) */
      padding: var(--space-1) var(--space-2); /* Reduced padding */
      margin: 0; /* Remove auto margins, container handles centering */
      background: transparent !important; /* Remove grey background on mobile */
      border-radius: var(--radius-full);
      border: none !important; /* Remove border that creates box effect */
      box-shadow: none !important; /* Remove shadow */
      width: 100%;
      min-height: 45px; /* Reduced from 60px */
      flex-shrink: 0; /* Prevent shrinking */
    }

    .mobile-hud-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 60px;
    }

    .mobile-hud-label {
      font-size: var(--font-xs);
      color: var(--text-secondary);
    }

    .mobile-hud-value {
      font-size: var(--font-lg);
      font-weight: var(--font-semibold);
      color: var(--text-primary);
    }

    /* Optional: Adjust for larger screens */
    @media (min-width: 768px) {
      .hud-score-container {
        flex: 0 0 600px; /* Fixed width on desktop */
      }
    }

    /* ============================================================================
       MAIN LAYOUT - Centered Wordle-style
       ============================================================================ */
    .main-container {
      display: flex;
      flex: 1;
      gap: var(--space-8);
      padding: var(--space-6) var(--space-4);
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      align-items: flex-start;
      min-height: 100%;
      height: auto !important;
      overflow-y: visible !important;
    }

    /* When game is not active, center everything */
    .main-container.game-inactive {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

    /* ============================================================================
       WORDLE-STANDARD: Hide stats during active gameplay for focus
       ============================================================================ */
    /* Hide stats panel during active gameplay - Wordle-style focus */
    .main-container.game-active .stats-panel {
      display: none !important;
    }

    /* Hide score breakdown during active gameplay */
    .main-container.game-active .score-breakdown-section {
      display: none !important;
    }

    /* Hide words list during active gameplay */
    .main-container.game-active .words-section {
      display: none !important;
    }

    /* Show stats when game is inactive */
    .main-container.game-inactive .stats-panel {
      display: flex;
    }

    /* Mobile: Single column - Letterpress-style generous spacing */
    @media (max-width: 767px) {
      .main-container {
        flex-direction: column;
        /* Letterpress standard: 16px minimum gaps */
        padding: var(--space-4) var(--space-4) !important; /* Generous padding */
        padding-bottom: calc(var(--space-4) + 80px) !important; /* Space for bottom nav */
        gap: var(--space-4) !important; /* 16px - generous spacing */
        align-items: center;
      }
      
      .hud-score-container {
        max-width: 100%; /* Full width on mobile */
        gap: var(--space-3) !important; /* 12px spacing */
        margin: 0 0 var(--space-4) 0 !important; /* Bottom margin */
      }

      .grid-panel {
        gap: var(--space-4) !important; /* 16px between elements */
      }

      .mobile-hud {
        gap: var(--space-4); /* 16px between HUD items */
        padding: var(--space-3) var(--space-4); /* More padding */
      }

      .status-word-bar {
        margin: var(--space-3) 0 !important; /* 12px top/bottom */
        gap: var(--space-2) !important; /* 8px internal */
      }

      /* Compact header on mobile */
      .header {
        padding: var(--space-3) var(--space-4) !important;
      }
    }

    /* ============================================================================
       GRID PANEL - Wordle-style Centered Layout
       ============================================================================ */
    .grid-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-4);
      max-width: 600px;
      width: 100%;
      position: relative; /* For absolute positioning of background timer */
      /* Standard CSS approach: Account for fixed header when scrolling into view */
      scroll-margin-top: 120px; /* Header + dict status + padding (desktop) */
    }

    /* Mobile: Smaller scroll margin (compact header) */
    @media (max-width: 767px) {
      .grid-panel {
        scroll-margin-top: 100px; /* Compact header + dict status + padding */
      }
    }

    /* When game is not active, grid panel should be centered */
    .main-container.game-inactive .grid-panel {
      max-width: 100%;
    }
    
    /* Start Game Button Container (at top of grid panel) */
    .start-game-container {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: var(--space-4) 0;
      margin-bottom: var(--space-2);
    }
    
    .start-game-container .start-game-btn {
      min-width: 200px;
      padding: var(--space-4) var(--space-8);
      font-size: var(--font-xl);
      font-weight: var(--font-bold);
      box-shadow: 0 4px 12px rgba(106, 170, 100, 0.3);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .start-game-container .start-game-btn:hover:not(:disabled) {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(106, 170, 100, 0.4);
    }
    
    .start-game-container .start-game-btn:active:not(:disabled) {
      transform: scale(0.98);
    }
    
    @media (max-width: 767px) {
      .start-game-container .start-game-btn {
        min-width: 180px;
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-lg);
      }
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
    }

    /* Mode Selection - At top of grid panel */
    .mode-selection {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: var(--space-2);
    }

    .mode-toggles {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      justify-content: center;
    }

    /* Submit Button Container - Directly under grid */
    .submit-button-container {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: var(--space-2);
      margin-bottom: var(--space-3);
    }

    .btn-submit {
      min-width: 220px;
      font-size: var(--font-2xl);
      padding: var(--space-4) var(--space-8);
      font-weight: var(--font-bold);
    }

    @media (max-width: 767px) {
      .btn-submit {
        min-width: 200px;
        font-size: var(--font-xl);
        padding: var(--space-3) var(--space-6);
      }
    }
    
    .grid-panel .action-buttons {
      margin-top: var(--space-2);
      gap: var(--space-2);
    }
    
    /* Mobile: Reduce spacing around action buttons */
    @media (max-width: 767px) {
      .grid-panel .action-buttons {
        margin-top: var(--space-1) !important;
        gap: var(--space-1) !important;
      }
      
      .grid-panel {
        gap: var(--space-1) !important; /* Reduced gap in grid panel */
      }
    }
    
    .grid-panel .btn {
      padding: var(--space-3) var(--space-5);
      font-size: var(--font-base);
      min-width: 100px;
    }

    .grid-container {
      display: grid;
      row-gap: 0; /* No gap between rows - match column spacing */
      column-gap: var(--grid-gap); /* Keep gap between columns */
      padding: var(--space-4);
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      min-height: 400px; /* Reserve space for grid */
      flex-shrink: 0; /* Prevent shrinking */
      position: relative; /* Ensure it's above background timer */
      z-index: 1; /* Above background timer */
      /* Industry Standard: Prevent scrolling/zooming on grid, allow drag gestures */
      touch-action: none;
      /* Standard CSS approach: Account for fixed header when scrolling into view */
      scroll-margin-top: 120px; /* Header + dict status + padding (desktop) */
    }

    /* Mobile: Smaller scroll margin (compact header) */
    @media (max-width: 767px) {
      .grid-container {
        scroll-margin-top: 100px; /* Compact header + dict status + padding */
      }
    }
    
    /* CRITICAL FIX: Allow scrolling when grid is in placeholder state (no game active) */
    .grid-container:has(.grid-placeholder) {
      touch-action: pan-y pan-x;
    }

    .grid-container.grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .grid-container.grid-5 {
      grid-template-columns: repeat(5, 1fr);
    }

    /* Industry standard: min 44px touch target (Apple HIG / Material) */
    .grid-tile {
      width: var(--grid-tile-size-4);
      height: var(--grid-tile-size-4);
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--tile-bg-default);
      border: 2px solid var(--border-default);
      border-radius: var(--radius-md);
      font-size: var(--grid-font-size);
      font-weight: var(--font-bold);
      color: var(--text-primary);
      cursor: pointer;
      transition: all var(--transition-fast);
      user-select: none;
      touch-action: manipulation;
      position: relative;
    }

    .grid-container.grid-5 .grid-tile {
      width: var(--grid-tile-size-5);
      height: var(--grid-tile-size-5);
    }

    @media (max-width: 767px) {
      .grid-tile {
        width: var(--grid-tile-size-4-mobile);
        height: var(--grid-tile-size-4-mobile);
        font-size: var(--grid-font-size-mobile);
      }
      
      .grid-container.grid-5 .grid-tile {
        width: var(--grid-tile-size-5-mobile);
        height: var(--grid-tile-size-5-mobile);
      }
    }

    .grid-tile:hover:not(.disabled) {
      border-color: var(--border-hover);
      transform: scale(1.05);
    }

    @media (hover: none) {
      .grid-tile:hover:not(.disabled) {
        transform: scale(1);
      }
    }

    .grid-tile.selected {
      background: var(--tile-bg-selected);
      border-color: var(--border-selected);
      box-shadow: var(--shadow-tile-selected);
      transform: scale(1.05);
    }
    
    /* Active state for mobile presses - clear visual feedback without toggle appearance */
    .grid-tile:active:not(.disabled):not(.selected) {
      transform: scale(0.98);
      opacity: 0.9;
      background: var(--bg-hover);
    }
    
    /* Selected tiles maintain their state during active press */
    .grid-tile.selected:active {
      transform: scale(1.05);
      opacity: 1;
      background: var(--tile-bg-selected);
    }

    /* Removed drag-path styles - they cause unwanted blue highlights */

    .grid-tile.disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .grid-container.paused .grid-tile {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    .grid-container.paused .grid-tile.selected {
      opacity: 0.3;
    }

    /* Word submission success state */
    .grid-tile.submitted {
      background: var(--tile-bg-success);
      border-color: var(--accent-success);
      color: var(--text-on-accent);
      animation: tileSuccess var(--transition-bounce);
    }

    @keyframes tileSuccess {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    /* Word submission error state */
    .grid-container.word-error .grid-tile.selected {
      background: var(--tile-bg-error);
      border-color: var(--border-error);
      animation: tileError 0.5s ease;
    }

    @keyframes tileError {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
      20%, 40%, 60%, 80% { transform: translateX(4px); }
    }

    /* Respect prefers-reduced-motion (WCAG / platform standard) */
    @media (prefers-reduced-motion: reduce) {
      .grid-tile,
      .grid-container .grid-tile.selected,
      .grid-container.word-error .grid-tile.selected,
      .grid-tile.submitted,
      .grid-tile.keyboard-highlight {
        animation: none;
        transition: none;
      }
    }

    /* Word Length Color Indicators - Subtle variations */
    .grid-container.word-length-4 .grid-tile.selected {
      background: var(--tile-bg-selected);
    }

    .grid-container.word-length-5 .grid-tile.selected {
      background: var(--tile-bg-selected);
    }

    .grid-container.word-length-6 .grid-tile.selected {
      background: var(--tile-bg-selected);
    }

    .grid-container.word-length-7 .grid-tile.selected {
      background: var(--tile-bg-selected);
    }

    .grid-container.word-length-8plus .grid-tile.selected {
      background: var(--tile-bg-selected);
    }

    /* Keyboard input feedback */
    .grid-tile.keyboard-highlight {
      animation: keyboardSelect 0.3s ease-out;
    }

    @keyframes keyboardSelect {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
        box-shadow: var(--shadow-tile-selected);
      }
      100% {
        transform: scale(1);
      }
    }

    /* Background Timer - Alarm Clock Style */
    .background-timer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1; /* Place specifically behind grid tiles */
      pointer-events: none;
      user-select: none;
      opacity: 0.12; /* Subtle transparency */
      display: none;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    .background-timer.enabled {
      display: flex;
    }

    .background-timer-text {
      font-family: 'Courier New', 'Monaco', monospace;
      font-size: clamp(8rem, 25vw, 16rem); /* Reduced to a much better size */
      font-weight: 700;
      color: #666; 
      letter-spacing: 0.05em;
      line-height: 1;
      text-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Softer shadow */
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    @media (prefers-reduced-motion: reduce) {
      .grid-tile.keyboard-highlight {
        animation: none;
      }
    }

    .grid-placeholder {
      padding: 2rem;
      text-align: center;
      color: var(--text-secondary);
      font-size: 1.1rem;
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 300px;
    }
    
    /* Start Game button styling - prominent and centered */
    .start-game-btn {
      min-width: 200px !important;
      padding: var(--space-4) var(--space-8) !important;
      font-size: var(--font-xl) !important;
      font-weight: var(--font-bold) !important;
      box-shadow: 0 4px 12px rgba(106, 170, 100, 0.3) !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    .start-game-btn:hover:not(:disabled) {
      transform: scale(1.05) !important;
      box-shadow: 0 6px 16px rgba(106, 170, 100, 0.4) !important;
    }
    
    .start-game-btn:active:not(:disabled) {
      transform: scale(0.98) !important;
    }
    
    @media (max-width: 767px) {
      .start-game-btn {
        min-width: 180px !important;
        padding: var(--space-3) var(--space-6) !important;
        font-size: var(--font-lg) !important;
      }
    }


    .stat-value.score-increase {
      animation: scorePop 0.6s ease;
      will-change: transform;
    }

    @keyframes scorePop {
      0%, 100% { 
        transform: scale(1);
      }
      50% { 
        transform: scale(1.3);
        color: var(--success);
      }
    }
    
    /* Performance optimizations */
    
    .achievement-notification {
      will-change: transform, opacity;
    }

    .current-word-display {
      text-align: center;
      min-height: 60px;
    }

    .cur-word-text {
      font-size: var(--font-2xl);
      font-weight: var(--font-bold);
      color: var(--text-primary);
      letter-spacing: 0.1em;
      min-height: 2.5rem;
    }

    .potential-score {
      font-size: var(--font-base);
      color: var(--text-secondary);
      margin-top: var(--space-2);
    }

    .score-breakdown {
      font-size: var(--font-xs);
      color: var(--text-secondary);
      margin-top: var(--space-2);
      padding: var(--space-2);
      background: var(--bg-elevated);
      border-radius: var(--radius-sm);
      border-left: 2px solid var(--accent-success);
      display: none;
    }

    .score-breakdown.visible {
      display: block;
    }

    .score-breakdown-line {
      display: flex;
      justify-content: space-between;
      margin: var(--space-1) 0;
    }

    .score-breakdown-label {
      color: var(--text-secondary);
    }

    .score-breakdown-value {
      color: var(--accent-success);
      font-weight: var(--font-semibold);
    }

    .score-breakdown-total {
      margin-top: var(--space-2);
      padding-top: var(--space-2);
      border-top: 1px solid var(--border-default);
      font-weight: var(--font-bold);
    }

    /* Combined Status & Word Display Bar */
    .status-word-bar {
      margin: 0.25rem 0 0.5rem;
      height: 3.5rem; /* Reduced from 5rem to reduce wasted space */
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      transition: opacity 0.2s ease;
      flex-shrink: 0; /* Prevent shrinking */
      justify-content: center; /* Center content vertically */
      border-radius: var(--radius-md);
      background: transparent !important; /* Removed grey background */
      background-color: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    
    /* Mobile: Reduce status bar spacing only, keep content size */
    @media (max-width: 767px) {
      .status-word-bar {
        margin: 0.1rem 0 0.1rem !important; /* Reduce top/bottom margin only */
        gap: var(--space-1) !important; /* Reduce gap between status line and word display */
      }
      
      /* Keep status line and word display at original size, just reduce padding */
      .status-word-bar .status-line {
        padding: var(--space-1) var(--space-2) !important; /* Reduce padding only */
      }
      
      .status-word-bar .current-word-display {
        gap: var(--space-1) !important; /* Reduce gap only */
      }
    }
    
    /* Ensure status line and word display are also transparent */
    .status-word-bar .status-line,
    .status-word-bar .current-word-display {
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }

    /* Success Glow & Error Shake Animations */
    @keyframes success-glow {
      0% { 
        box-shadow: 0 0 0 0 rgba(106, 170, 100, 0.7); 
        border-color: var(--accent-success); 
      }
      50% { 
        box-shadow: 0 0 0 20px rgba(106, 170, 100, 0); 
        border-color: var(--accent-success); 
      }
      100% { 
        box-shadow: 0 0 0 0 rgba(106, 170, 100, 0); 
      }
    }

    @keyframes tile-success-pop {
      0% { 
        transform: scale(1) translateY(0); 
      }
      30% { 
        transform: scale(1.15) translateY(-8px); 
      }
      60% { 
        transform: scale(0.95) translateY(-4px); 
      }
      100% { 
        transform: scale(1) translateY(0); 
      }
    }

    @keyframes tile-float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }

    .tile-success {
      border-color: var(--accent-success) !important;
      color: var(--accent-success) !important;
      /* Removed solid green background - keep original tile background for cleaner look */
      animation: success-glow 0.6s ease-out, tile-success-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      z-index: 10;
    }

    .tile-error {
      border-color: var(--accent-danger) !important;
      color: var(--accent-danger) !important;
      animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    }

    .grid-shake {
      animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    }

    .status-shake {
      animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    }

    .status-word-bar .status-line {
      margin: 0;
      padding: var(--space-2) var(--space-3);
      font-size: var(--font-base);
      font-weight: var(--font-semibold);
      text-align: center;
      color: var(--text-secondary);
      height: 2.5rem; /* Fixed height - always reserves space */
      line-height: 1.4;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease;
      opacity: 0; /* Hidden when empty, but still takes up space */
      flex-shrink: 0;
    }

    .status-word-bar .status-line:not(:empty) {
      opacity: 1; /* Show when has content */
    }

    .status-word-bar .status-line.status-success {
      color: var(--accent-success);
      font-weight: var(--font-bold);
    }

    .status-word-bar .status-line.status-error {
      color: var(--accent-danger);
      font-weight: var(--font-bold);
    }

    .status-word-bar .status-line.status-info {
      color: var(--text-primary);
      font-weight: var(--font-medium);
    }

    .status-word-bar .current-word-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-1);
      height: 2.5rem; /* Fixed height - always reserves space */
      transition: opacity 0.2s ease;
      opacity: 0; /* Hidden when empty, but still takes up space */
      text-align: center;
      flex-shrink: 0;
      justify-content: center;
    }

    /* Show when word is selected */
    .status-word-bar .current-word-display:has(#cur-word:not(:empty)) {
      opacity: 1; /* Show when has content */
    }

    .status-word-bar .cur-word-text {
      font-size: var(--font-2xl);
      font-weight: var(--font-bold);
      color: var(--text-primary);
      letter-spacing: 0.1em;
      min-height: 2.5rem;
    }

    /* ============================================================================
       STATS PANEL
       ============================================================================ */
    .stats-panel {
      flex: 0 0 300px; /* Fixed width, don't shrink */
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      min-width: 300px; /* Prevent shrinking below this */
      flex-shrink: 0; /* Prevent shrinking */
    }

    @media (max-width: 767px) {
      .stats-panel {
        flex: 1;
      }
    }

    /* Combo Timer Visual Indicator */
    .combo-item {
      position: relative;
    }

    .combo-wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
    }

    .combo-timer-ring {
      position: absolute;
      width: 60px;
      height: 60px;
      transform: rotate(-90deg);
      transition: opacity var(--transition-normal);
    }

    .combo-timer-ring.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .combo-timer-bg {
      fill: none;
      stroke: var(--border-default);
      stroke-width: 4;
    }

    .combo-timer-progress {
      fill: none;
      stroke: var(--accent-success);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 163.36; /* 2 * π * 26 */
      stroke-dashoffset: 163.36;
      transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
    }

    /* Color transitions based on time remaining */
    .combo-timer-progress.warning {
      stroke: var(--warning);
    }

    .combo-timer-progress.danger {
      stroke: var(--error);
    }

    .combo-value {
      position: relative;
      z-index: 1;
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
      .combo-timer-progress {
        transition: none;
      }
    }

    .stats-section {
      background: var(--bg-elevated);
      padding: var(--space-5);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-card);
    }

    .stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--border-default);
    }

    .stat-item.streak-active {
      background: rgba(106, 170, 100, 0.1);
      border-left: 3px solid var(--accent-success);
      padding-left: var(--space-2);
    }

    .stat-item.streak-active .stat-value {
      color: var(--accent-success);
      font-weight: var(--font-bold);
    }

    .stat-item:last-child {
      border-bottom: none;
    }

    .stat-label {
      color: var(--text-secondary);
      font-size: 14px;
    }

    .stat-value {
      color: var(--text-primary);
      font-size: var(--font-xl);
      font-weight: var(--font-bold);
    }

    /* Milestone Badges */
    .milestone-badges {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      padding: 0.5rem;
      margin-top: 0.5rem;
    }

    .milestone-badge {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid var(--text-secondary);
      background: var(--bg-primary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-normal);
      opacity: 0.4;
    }

    .milestone-badge.unlocked {
      border-color: var(--accent-success);
      background: var(--tile-bg-selected);
      opacity: 1;
      box-shadow: var(--shadow-tile-selected);
    }

    .milestone-badge.just-unlocked {
      animation: milestoneUnlock 0.6s ease-out;
    }

    @keyframes milestoneUnlock {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.3);
      }
      100% {
        transform: scale(1);
      }
    }

    .milestone-number {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
    }

    .milestone-badge.unlocked .milestone-number {
      color: var(--accent-success);
    }

    .milestone-label {
      font-size: 8px;
      color: var(--text-secondary);
      text-transform: uppercase;
      line-height: 1;
      margin-top: 2px;
    }

    .milestone-badge.unlocked .milestone-label {
      color: var(--accent-success);
    }

    @media (prefers-reduced-motion: reduce) {
      .milestone-badge.just-unlocked {
        animation: none;
      }
    }

    /* Score Breakdown Section - Under mobile HUD */
    .score-breakdown-section {
      background: var(--bg-elevated);
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-card);
      margin: 0; /* Remove auto margins */
      width: 100%;
      flex-shrink: 0; /* Prevent shrinking */
      /* Reserve minimum space even when collapsed */
      min-height: 60px; /* Header + padding minimum */
    }

    .score-breakdown-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-3);
    }

    .score-breakdown-title {
      font-size: var(--font-sm);
      font-weight: var(--font-semibold);
      color: var(--text-primary);
    }

    .score-breakdown-toggle {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: var(--space-1);
      font-size: var(--font-xs);
      min-width: 32px;
      min-height: 32px;
      display: flex; /* Always show toggle on both desktop and mobile */
      align-items: center;
      justify-content: center;
      transition: all var(--transition-fast);
      border-radius: var(--radius-sm);
    }

    .score-breakdown-toggle:hover {
      color: var(--text-primary);
      background: var(--bg-hover);
    }

    .score-breakdown-toggle:focus {
      outline: none;
    }

    .score-breakdown-toggle .toggle-icon {
      transition: transform var(--transition-fast);
      font-size: var(--font-xs);
    }

    .score-breakdown-toggle[aria-expanded="true"] .toggle-icon {
      transform: rotate(180deg);
    }

    .score-breakdown-content {
      transition: max-height var(--transition-normal) ease, opacity var(--transition-fast), visibility var(--transition-fast);
      overflow: hidden;
      /* Always reserve maximum space to prevent layout shifts */
      min-height: 200px; /* Reserve space for full content */
      max-height: 500px; /* Enough for full content */
      opacity: 1;
      visibility: visible;
    }

    .score-breakdown {
      font-size: var(--font-xs);
      color: var(--text-secondary);
      display: block;
    }

    .score-breakdown-line {
      display: flex;
      justify-content: space-between;
      margin: var(--space-1) 0;
      padding: var(--space-1) 0;
    }

    .score-breakdown-label {
      color: var(--text-secondary);
    }

    .score-breakdown-value {
      color: var(--accent-success);
      font-weight: var(--font-semibold);
    }

    .score-breakdown-total {
      margin-top: var(--space-2);
      padding-top: var(--space-2);
      border-top: 1px solid var(--border-default);
      font-weight: var(--font-bold);
    }

    /* Both desktop and mobile: Collapsible - reserves space to prevent shifts */
    .score-breakdown-content[aria-hidden="false"] {
      max-height: 500px;
      min-height: 200px;
      opacity: 1;
      visibility: visible;
    }

    .score-breakdown-content[aria-hidden="true"] {
      max-height: 0;
      min-height: 0; /* Allow collapse but parent reserves space */
      opacity: 0;
      visibility: hidden;
    }

    .progress-section {
      background: var(--bg-elevated);
      padding: var(--space-5);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-card);
    }

    .progress-label {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 0.5rem;
    }

    .progress-bar-container {
      height: 8px;
      background: var(--bg-hover);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      background: var(--accent-success);
      border-radius: var(--radius-sm);
      transition: width var(--transition-normal) ease;
      width: 0%;
    }

    .words-section {
      background: var(--bg-elevated);
      padding: var(--space-5);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-card);
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 200px;
    }

    .words-label {
      color: var(--text-secondary);
      font-size: var(--font-sm);
      font-weight: var(--font-semibold);
      margin-bottom: var(--space-4);
    }

    .words-list {
      flex: 1;
      overflow-y: auto;
      max-height: 300px;
    }

    .word-item {
      padding: var(--space-2);
      margin-bottom: var(--space-2);
      background: var(--bg-primary);
      border-left: 3px solid var(--border-default);
      border-radius: var(--radius-sm);
      display: flex;
      justify-content: space-between;
      align-items: center;
      animation: fadeIn var(--transition-fast) ease;
    }

    /* Recent Words Highlight */
    .word-item.newly-added {
      animation: fadeIn var(--transition-fast) ease, wordHighlight 1.5s ease-out;
    }

    @keyframes wordHighlight {
      0% {
        background: var(--tile-bg-selected);
        transform: scale(1.02);
      }
      100% {
        background: var(--bg-primary);
        transform: scale(1);
      }
    }

    /* Color-Coded Word Scores */
    .word-item.score-low {
      border-left-color: var(--text-secondary);
    }

    .word-item.score-medium {
      border-left-color: var(--accent-warning);
    }

    .word-item.score-high {
      border-left-color: var(--accent-success);
    }

    .word-item.score-very-high {
      border-left-color: var(--accent-success);
      border-left-width: 3px;
    }

    @media (prefers-reduced-motion: reduce) {
      .word-item.newly-added {
        animation: fadeIn var(--transition-fast) ease;
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .word-text {
      color: var(--text-primary);
      font-weight: 600;
    }

    .word-points {
      color: var(--accent-success);
      font-weight: var(--font-bold);
    }

    .best-score-section {
      background: var(--bg-elevated);
      padding: var(--space-5);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-card);
    }

    /* Session Statistics Section */
    .session-stats-section {
      background: var(--bg-elevated);
      padding: var(--space-5);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-card);
    }

    .session-stats-toggle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-3);
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      font-size: var(--font-sm);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .session-stats-toggle:hover {
      background: var(--bg-hover);
      border-color: var(--border-hover);
    }

    .session-stats-toggle:focus {
      outline: none;
    }

    .toggle-icon {
      transition: transform var(--transition-fast) ease;
      font-size: 12px;
    }

    .session-stats-toggle[aria-expanded="true"] .toggle-icon {
      transform: rotate(180deg);
    }

    .session-stats-content {
      margin-top: 1rem;
      display: none;
    }

    .session-stats-content[aria-hidden="false"] {
      display: block;
    }

    .session-stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 0;
      border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    }

    .session-stat-item:last-child {
      border-bottom: none;
    }

    .session-stat-label {
      color: var(--text-secondary);
      font-size: 14px;
    }

    .session-stat-value {
      color: var(--accent-neon);
      font-size: 16px;
      font-weight: 700;
    }

    /* ============================================================================
       CONTROLS (Removed - mode toggles moved to grid panel)
       ============================================================================ */
    @media (max-width: 767px) {
      
      /* Mobile modal improvements */
      .modal-content {
        width: 95%;
        max-height: 95vh;
        padding: 1.5rem;
        margin: 1rem;
      }
      
      /* Prevent pull-to-refresh on mobile */
      body {
        overscroll-behavior-y: contain;
      }
      
      /* Better keyboard handling */
      .main-container {
        padding-bottom: env(keyboard-inset-height, 0);
      }
    }

    .mode-btn {
      padding: var(--space-2) var(--space-4);
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-full);
      color: var(--text-primary);
      font-size: var(--font-sm);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .mode-btn:hover:not(:disabled) {
      background: var(--bg-hover);
      border-color: var(--border-hover);
    }

    .mode-btn.active {
      background: var(--accent-success);
      border-color: var(--accent-success);
      color: var(--text-on-accent);
    }

    .mode-btn:focus {
      outline: none;
    }

    /* Mobile: Words With Friends standard - Large, thumb-friendly buttons */
    @media (max-width: 767px) {
      .mode-btn {
        /* Words With Friends standard: 48px minimum touch target */
        min-height: 48px; /* Google Material Design minimum */
        padding: var(--space-2) var(--space-4); /* Generous padding */
        font-size: var(--font-sm); /* Readable size (14px) */
        font-weight: var(--font-semibold);
        min-width: 80px;
      }
      
      .mode-toggles {
        gap: var(--space-2); /* 8px spacing between buttons */
        /* Two-row layout for better fit - Words With Friends style */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
      }

      /* Center last 2 buttons in second row - Words With Friends style */
      .mode-btn:nth-child(4) {
        grid-column: 1 / 2;
        justify-self: end;
        margin-right: calc(var(--space-2) / 2);
      }

      .mode-btn:nth-child(5) {
        grid-column: 2 / 3;
        justify-self: start;
        margin-left: calc(var(--space-2) / 2);
      }
    }

    .action-buttons {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

/* Submit/Clear row */
.submit-clear-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 15px; /* Closer to game board */
}

.submit-clear-row .btn-submit {
  min-width: 9rem;
  min-height: 88px; /* 2x the default 44px */
  padding: calc(var(--space-3) * 2) var(--space-5); /* Double vertical padding */
  font-size: var(--font-lg); /* Slightly larger text for better visibility */
}

.submit-clear-row #btn-clear {
  min-width: 6rem;
  min-height: 88px; /* 2x the default 44px */
  padding: calc(var(--space-3) * 2) var(--space-5); /* Double vertical padding */
  font-size: var(--font-lg); /* Slightly larger text for better visibility */
}

@media (max-width: 767px) {
  .submit-clear-row {
    margin-top: 0.5rem !important; /* Much closer to game board - reduced from 15px */
    gap: 0.5rem !important; /* Reduced gap between buttons */
  }
  
  .submit-clear-row .btn-submit {
    min-height: 100px; /* Keep original height */
    padding: calc(var(--space-2) * 2.5) var(--space-4);
    font-weight: var(--font-bold);
  }
  
  .submit-clear-row #btn-clear {
    min-height: 100px; /* Keep original height */
    padding: calc(var(--space-2) * 2.5) var(--space-4);
  }
}

    /* Make primary action button more prominent */
    .action-buttons .btn-primary {
      min-width: 140px;
      font-size: var(--font-lg);
      padding: var(--space-3) var(--space-6);
    }

    /* Secondary buttons smaller for faster scanning */
    .action-buttons .btn-secondary {
      min-width: 90px;
      font-size: var(--font-sm);
    }

    @media (max-width: 767px) {
      .action-buttons {
        gap: var(--space-2);
      }
      
      .action-buttons .btn-primary {
        min-width: 120px;
        font-size: var(--font-base);
      }
      
      .action-buttons .btn-secondary {
        min-width: 80px;
        font-size: var(--font-sm);
      }
    }

    .btn {
      padding: var(--space-3) var(--space-5);
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--font-base);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition-fast);
      min-width: 120px;
      min-height: 44px;
      font-family: var(--font-family);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      tap-highlight-color: transparent;
      outline: none;
    }

    @media (max-width: 767px) {
      .btn {
        min-width: 100px;
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-sm);
      }
    }

    .btn:focus {
      outline: none;
    }

    .btn-primary {
      background: var(--accent-success);
      color: var(--text-on-accent);
      box-shadow: var(--shadow-md);
    }

    .btn-primary:hover:not(:disabled) {
      background: var(--accent-success-hover);
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
    }

    .btn-primary:active:not(:disabled) {
      transform: translateY(0);
      box-shadow: var(--shadow-sm);
    }

    .btn-secondary {
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      color: var(--text-primary);
    }

    .btn-secondary:hover:not(:disabled) {
      background: var(--bg-hover);
      border-color: var(--border-hover);
    }

    .btn-secondary:active:not(:disabled) {
      transform: scale(0.98);
    }

    .btn-success {
      background-color: var(--accent-success);
      color: var(--text-on-accent);
      border-color: var(--accent-success);
    }

    .btn-success:hover:not(:disabled) {
      background-color: var(--accent-success-hover);
      border-color: var(--accent-success-hover);
    }

    .btn-view-all-achievements {
      width: 100%;
      margin-top: var(--space-4);
    }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ============================================================================
       STATUS LINE (duplicate removed - see grid-panel section)
       ============================================================================ */

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
    }

    /* ============================================================================
       MODAL (Summary)
       ============================================================================ */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      /* Safe area insets for modals on mobile */
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    .modal[aria-hidden="false"] {
      display: flex;
    }

    /* Industry Standard: Prevent body scroll when modal is open (overflow:hidden only) */
    body.modal-open {
      overflow: hidden !important;
      height: 100vh !important;
      position: relative !important; /* Ensure it doesn't jump */
      /* Removed position: fixed - it breaks layout calculations */
      /* Industry Standard: Prevent touch scrolling when modal is open */
      touch-action: none;
    }

    .modal-content {
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      padding: calc(var(--space-6) + var(--safe-area-inset-top)) var(--space-6) calc(var(--space-6) + var(--safe-area-inset-bottom));
      max-width: 500px;
      width: 90%;
      box-shadow: var(--shadow-xl);
      animation: modalSlideIn var(--transition-normal) ease;
    }

    /* Mobile: Account for bottom nav in all modals */
    @media (max-width: 767px) {
      .modal-content {
        max-height: calc(100vh - 80px);
        padding-bottom: calc(var(--space-6) + var(--safe-area-inset-bottom) + 80px);
      }
    }

    /* Ensure long game summary content is scrollable on smaller viewports */
    #summary-modal .modal-content {
      max-height: 90vh;
      overflow-y: auto;
    }

    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .modal-title {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      text-align: center;
      color: var(--accent-neon);
    }

    .summary-stats {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .summary-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      background: var(--bg-primary);
      border-radius: 8px;
    }

    .summary-label {
      color: var(--text-secondary);
      font-size: 14px;
    }

    .summary-value {
      color: var(--accent-neon);
      font-size: 20px;
      font-weight: 700;
    }

    .modal-actions {
      display: flex;
      justify-content: center;
    }

/* Summary enhancements */
.summary-section {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.summary-guidance {
  margin: 0.5rem 0 0.75rem;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.summary-achievements-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.summary-achievement-item {
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
}

.summary-achievements-empty {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

/* Optional: streak bonus tone */
#summary-streak-bonus {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

    /* Settings Modal */
    .settings-modal-content {
      max-width: 520px;
      width: 92vw;
      max-height: 85vh;
      padding: var(--space-5);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .settings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--border-default);
      flex-shrink: 0; /* Prevent header from shrinking */
    }

    .settings-modal-content .modal-title {
      color: var(--text-primary);
      margin: 0;
    }

    .settings-close-btn {
      background: transparent;
      border: none;
      font-size: var(--font-xl);
      color: var(--text-secondary);
      cursor: pointer;
      padding: var(--space-2);
      min-width: 32px;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .settings-close-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .settings-content {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      flex: 1 1 auto; /* Allow content to grow and shrink */
      overflow-y: auto; /* Make content scrollable */
      overflow-x: hidden;
      padding-right: var(--space-2); /* Add padding for scrollbar */
      /* Smooth scrolling */
      -webkit-overflow-scrolling: touch;
    }

/* Help modal: make body scrollable within a constrained container */
#help-modal .modal-content {
  max-width: 520px;
  width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#help-modal .settings-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  gap: 0.85rem;
}

/* Light spacing tweaks */
#help-modal .settings-section-title {
  margin-bottom: 0.25rem;
}
#help-modal ul {
  padding-left: 1rem;
  margin: 0.3rem 0 0.6rem;
}
#help-modal p {
  margin: 0.25rem 0 0.5rem;
  line-height: 1.35;
}
#help-modal li {
  margin: 0.15rem 0;
}

/* Mobile: slightly tighter padding and taller allowance */
@media (max-width: 600px) {
  #help-modal .modal-content {
    max-width: 94vw;
    padding: 0.9rem;
    max-height: 82vh;
  }
  #help-modal .settings-content {
    max-height: calc(82vh - 3.5rem);
    padding: 0.9rem;
    gap: 0.75rem;
  }
}

    .settings-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .settings-section-title {
      font-size: var(--font-base);
      font-weight: var(--font-semibold);
      color: var(--text-primary);
      margin: 0;
    }

    .settings-option {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .settings-label {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      margin: 0;
    }

    .font-size-controls {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-2);
      justify-content: center;
      align-items: center;
    }

    .font-size-controls .font-size-btn {
      padding: var(--space-2) var(--space-4) !important;
      background: var(--bg-elevated) !important;
      border: 1px solid var(--border-default) !important;
      border-radius: var(--radius-full) !important;
      color: var(--text-primary) !important;
      font-size: var(--font-sm) !important;
      font-weight: var(--font-semibold) !important;
      cursor: pointer !important;
      transition: all var(--transition-fast) !important;
      display: inline-block !important;
      min-width: auto !important;
      min-height: auto !important;
      width: auto !important;
      height: auto !important;
    }

    .font-size-controls .font-size-btn:disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
    }

    .font-size-controls .font-size-btn:hover:not(:disabled) {
      background: var(--bg-hover) !important;
      border-color: var(--border-hover) !important;
    }

    .font-size-controls .font-size-btn.active {
      background: var(--accent-success) !important;
      border-color: var(--accent-success) !important;
      color: var(--text-on-accent) !important;
    }

    .font-size-controls .font-size-btn:focus {
      outline: none !important;
    }

    @media (max-width: 767px) {
      .settings-modal-content {
        max-width: 94vw;
        max-height: 75vh !important; /* Reduced to ensure it ends before bottom nav */
        padding: var(--space-4);
      }
      
      .settings-content {
        max-height: calc(75vh - 5rem); /* Adjusted for reduced max-height */
        padding-right: var(--space-1);
        padding-bottom: 1rem; /* Extra space at bottom */
      }
    }

    /* Word Report Modal */
    .word-report-modal-content {
      max-width: 420px;
      width: 92vw;
      max-height: 85vh;
      padding: var(--space-4);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .word-report-modal-content .settings-header {
      flex-shrink: 0; /* Prevent header from shrinking */
      margin-bottom: var(--space-3);
      padding-bottom: var(--space-3);
    }

    .word-report-content {
      padding: var(--space-3);
      flex: 1 1 auto; /* Allow content to grow and shrink */
      overflow-y: auto; /* Make content scrollable */
      overflow-x: hidden;
      padding-right: var(--space-2); /* Add padding for scrollbar */
      /* Smooth scrolling */
      -webkit-overflow-scrolling: touch;
    }

    .word-report-section {
      margin-bottom: var(--space-4);
    }

    .word-report-input,
    .word-report-textarea {
      width: 100%;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--border-default);
      border-radius: 4px;
      font-size: var(--font-sm);
      font-family: inherit;
      background: var(--bg-primary);
      color: var(--text-primary);
      margin-top: var(--space-1);
      box-sizing: border-box;
    }

    .word-report-textarea {
      resize: vertical;
      min-height: 60px;
    }

    .word-report-radio-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      margin-top: var(--space-1);
    }

    .word-report-radio {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      cursor: pointer;
      padding: var(--space-2);
      border-radius: 4px;
      transition: background 0.2s;
      font-size: var(--font-sm);
    }

    .word-report-radio:hover {
      background: var(--bg-secondary);
    }

    .word-report-radio input[type="radio"] {
      margin: 0;
      cursor: pointer;
    }

    .word-report-actions {
      display: flex;
      gap: var(--space-3);
      justify-content: flex-end;
      margin-top: var(--space-4);
      padding-top: var(--space-3);
      border-top: 1px solid var(--border-default);
    }

    @media (max-width: 767px) {
      .word-report-modal-content {
        max-width: 94vw;
        max-height: 75vh !important; /* Reduced to ensure it ends before bottom nav */
        padding: var(--space-3);
      }
      
      .word-report-content {
        max-height: calc(75vh - 4rem); /* Adjusted for reduced max-height */
        padding: var(--space-2);
        padding-right: var(--space-1);
        padding-bottom: var(--space-2);
      }
      
      .word-report-section {
        margin-bottom: var(--space-3);
      }
      
      .word-report-actions {
        margin-top: var(--space-3);
        padding-top: var(--space-2);
      }
    }

    /* End Game Confirmation Modal */
    .end-game-confirm-content {
      max-width: 420px;
      padding: var(--space-5);
    }

    .end-game-confirm-header {
      margin-bottom: var(--space-4);
      text-align: center;
    }

    .end-game-confirm-content .modal-title {
      color: var(--text-primary);
      margin: 0;
      font-size: var(--font-xl);
    }

    .end-game-confirm-body {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      margin-bottom: var(--space-5);
    }

    .end-game-confirm-message {
      color: var(--text-secondary);
      font-size: var(--font-base);
      line-height: 1.6;
      margin: 0;
      text-align: center;
    }

    .end-game-confirm-stats {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-4);
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
    }

    .end-game-confirm-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .end-game-confirm-stat-label {
      color: var(--text-secondary);
      font-size: var(--font-sm);
    }

    .end-game-confirm-stat-value {
      color: var(--text-primary);
      font-size: var(--font-lg);
      font-weight: var(--font-semibold);
    }

    .end-game-confirm-actions {
      display: flex;
      gap: var(--space-3);
      justify-content: flex-end;
    }

    .end-game-confirm-actions .btn {
      min-width: 100px;
    }

    @media (max-width: 767px) {
      .end-game-confirm-content {
        max-width: 90%;
        padding: var(--space-4);
      }
      
      .end-game-confirm-actions {
        flex-direction: column;
      }
      
      .end-game-confirm-actions .btn {
        width: 100%;
      }
    }

    /* Auth Modals */
    .auth-modal-content {
      max-width: 420px;
      padding: var(--space-5);
    }

    .auth-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-5);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--border-default);
    }

    .auth-modal-header .modal-title {
      margin: 0;
      color: var(--text-primary);
    }

    .modal-close {
      background: transparent;
      border: none;
      font-size: var(--font-2xl);
      color: var(--text-secondary);
      cursor: pointer;
      padding: var(--space-2);
      min-width: 32px;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .modal-close:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }

    .auth-modal-body {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .form-group label {
      font-size: var(--font-sm);
      font-weight: var(--font-medium);
      color: var(--text-primary);
    }

    .form-group input {
      padding: var(--space-3);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      font-size: var(--font-base);
      background: var(--bg-primary);
      color: var(--text-primary);
      transition: border-color var(--transition-fast);
    }

    .form-group input:focus {
      outline: none;
      border-color: var(--accent-success);
    }

    .auth-error {
      padding: var(--space-3);
      background: rgba(230, 57, 70, 0.1);
      border: 1px solid var(--accent-error);
      border-radius: var(--radius-md);
      color: var(--accent-error);
      font-size: var(--font-sm);
    }

    .auth-modal-footer {
      text-align: center;
      padding-top: var(--space-4);
      border-top: 1px solid var(--border-default);
    }

    .auth-modal-footer p {
      margin: var(--space-2) 0;
      color: var(--text-secondary);
      font-size: var(--font-sm);
    }

    .auth-modal-footer a {
      color: var(--accent-success);
      text-decoration: none;
    }

    .auth-modal-footer a:hover {
      text-decoration: underline;
    }

    .auth-remember {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--font-sm);
      color: var(--text-secondary);
      cursor: pointer;
      user-select: none;
    }

    .auth-remember input[type="checkbox"] {
      accent-color: var(--accent-success);
    }

    .auth-remember-help {
      margin-top: 0.25rem;
      font-size: var(--font-xs);
      color: var(--text-secondary);
    }

    .auth-show-password {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--font-sm);
      color: var(--text-secondary);
      cursor: pointer;
      user-select: none;
      margin-top: var(--space-2);
    }

    .auth-show-password input[type="checkbox"] {
      accent-color: var(--accent-success);
    }

    /* User Menu */
    .user-menu {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .username-display {
      color: var(--text-primary);
      font-weight: var(--font-medium);
    }

    /* Leaderboard Modal */
    .leaderboard-content {
      max-width: 600px;
      padding: var(--space-5);
      max-height: 80vh;
      display: flex;
      flex-direction: column;
    }

    /* Mobile: Account for bottom nav to prevent content cut-off */
    @media (max-width: 767px) {
      .leaderboard-content {
        max-height: calc(100vh - 80px);
        padding-bottom: calc(var(--space-5) + 80px);
      }
    }

    .leaderboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--border-default);
    }

    .leaderboard-header .modal-title {
      margin: 0;
      color: var(--text-primary);
    }

    .leaderboard-tabs {
      display: flex;
      gap: var(--space-2);
      margin-bottom: 0;
      border-bottom: 1px solid var(--border-default);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .leaderboard-time-filters {
      display: flex;
      justify-content: center;
      gap: 1rem;
      padding: 0.75rem 0;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-default);
      margin-bottom: var(--space-4);
    }

    .time-filter-btn {
      background: none;
      border: 1px solid transparent;
      color: var(--text-secondary);
      padding: 0.25rem 0.75rem;
      border-radius: var(--radius-full);
      font-size: var(--font-xs);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .time-filter-btn:hover {
      color: var(--text-primary);
      background: var(--bg-accent-soft);
    }

    .time-filter-btn.active {
      background: var(--accent-primary);
      color: white;
      border-color: var(--accent-primary);
    }

    /* Date Selector for Daily Leaderboards - matches time filters styling exactly */
    .leaderboard-date-selector {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: var(--space-2);
      padding: 0.75rem 0; /* Match time filters padding exactly */
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-default);
      margin-bottom: var(--space-4);
    }

    .date-selector-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
    }

    .date-nav-btn {
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-full); /* Match time filter button style */
      color: var(--text-primary);
      font-size: var(--font-sm);
      font-weight: var(--font-semibold);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .date-nav-btn:hover:not(:disabled) {
      background: var(--bg-accent-soft); /* Match time filter hover */
      border-color: var(--border-hover);
    }

    .date-nav-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .date-display-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-2);
      min-width: auto;
    }

    .date-picker-input {
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-full); /* Match time filter style */
      padding: 0.25rem 0.75rem; /* Match time filter button padding */
      font-size: var(--font-xs); /* Match time filter font size */
      color: var(--text-primary);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .date-picker-input:hover {
      background: var(--bg-accent-soft); /* Match time filter hover */
      border-color: var(--border-hover);
    }

    .date-picker-input:focus {
      outline: none;
      border-color: var(--accent-info);
    }

    .date-display-text {
      font-size: var(--font-xs); /* Match time filter size */
      font-weight: var(--font-semibold);
      color: var(--text-secondary); /* Match time filter color */
      text-align: center;
    }

    .date-display-text.is-today {
      color: var(--accent-success);
    }

    .date-today-btn {
      background: var(--accent-primary); /* Match active time filter */
      border: 1px solid var(--accent-primary);
      border-radius: var(--radius-full); /* Match time filter style */
      color: white;
      padding: 0.25rem 0.75rem; /* Match time filter button padding */
      font-size: var(--font-xs); /* Match time filter font size */
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .date-today-btn:hover {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
    }

    /* Mobile: Keep it compact to match time filters */
    @media (max-width: 767px) {
      .leaderboard-date-selector {
        padding: 0.5rem 0; /* Even more compact on mobile */
        gap: var(--space-1);
      }
      
      .date-selector-header {
        gap: var(--space-1);
      }
      
      .date-nav-btn {
        width: 28px;
        height: 28px;
        font-size: var(--font-xs);
      }
      
      .date-display-container {
        min-width: auto;
      }
      
      .date-picker-input {
        padding: 0.2rem 0.5rem;
        font-size: var(--font-xs);
      }
      
      .date-display-text {
        font-size: var(--font-xs);
      }
      
      .date-today-btn {
        padding: 0.2rem 0.5rem;
        font-size: var(--font-xs);
      }
    }

    .leaderboard-tab {
      padding: var(--space-2) var(--space-4);
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: var(--font-sm);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .leaderboard-tab:hover {
      color: var(--text-primary);
    }

    .leaderboard-tab.active {
      color: var(--accent-success);
      border-bottom-color: var(--accent-success);
    }

    .leaderboard-body {
      flex: 1;
      overflow-y: auto;
      min-height: 300px;
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .leaderboard-entry {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-3);
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .leaderboard-entry:hover {
      background: var(--bg-hover);
    }

    .leaderboard-entry.current-user {
      background: var(--tile-bg-selected);
      border-color: var(--accent-success);
    }

    .leaderboard-rank {
      font-weight: var(--font-bold);
      color: var(--text-secondary);
      min-width: 40px;
      text-align: center;
    }

    .leaderboard-user {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .leaderboard-username {
      color: var(--text-primary);
      font-weight: var(--font-medium);
    }

    .leaderboard-you {
      color: var(--accent-success);
      font-size: var(--font-sm);
    }

    .leaderboard-score {
      font-weight: var(--font-bold);
      color: var(--accent-success);
      min-width: 80px;
      text-align: right;
    }

    .leaderboard-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-4);
      margin-top: var(--space-4);
      padding-top: var(--space-4);
      border-top: 1px solid var(--border-default);
    }

    .leaderboard-page-info {
      color: var(--text-secondary);
      font-size: var(--font-sm);
    }

    .loading, .error, .empty {
      text-align: center;
      padding: var(--space-5);
      color: var(--text-secondary);
    }

    .error {
      color: var(--accent-error);
    }

    /* User Score Section (for users not in top 100) */
    .leaderboard-user-section {
      margin-top: var(--space-4);
      padding-top: var(--space-4);
    }

    .leaderboard-user-divider {
      height: 1px;
      background: var(--border-default);
      margin-bottom: var(--space-3);
    }

    .leaderboard-user-header {
      font-weight: var(--font-semibold);
      color: var(--text-primary);
      margin-bottom: var(--space-2);
      font-size: var(--font-sm);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .leaderboard-row.user-entry {
      background: var(--tile-bg-selected);
      border: 2px solid var(--accent-success);
      border-radius: var(--radius-md);
      font-weight: var(--font-semibold);
    }

    .leaderboard-row.user-entry .rank,
    .leaderboard-row.user-entry .player-name,
    .leaderboard-row.user-entry .score {
      color: var(--accent-success);
    }

    /* Profile Modal */
    .profile-content {
      max-width: 600px;
      padding: var(--space-5);
      max-height: 80vh;
      display: flex;
      flex-direction: column;
    }

    .profile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--border-default);
    }

    .profile-header .modal-title {
      margin: 0;
      color: var(--text-primary);
    }

    .profile-body {
      flex: 1;
      overflow-y: auto;
    }

    .profile-section {
      margin-bottom: var(--space-3); /* Reduced from var(--space-5) to reduce wasted space */
    }

    .profile-section h3 {
      font-size: var(--font-lg);
      font-weight: var(--font-semibold);
      color: var(--text-primary);
      margin-bottom: var(--space-3);
    }

    .profile-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-2); /* Reduced from var(--space-3) to reduce wasted space */
    }

    .profile-stat {
      display: flex;
      flex-direction: column;
      padding: var(--space-3);
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
    }

    .profile-stat-label {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      margin-bottom: var(--space-1);
    }

    .profile-stat-value {
      font-size: var(--font-xl);
      font-weight: var(--font-bold);
      color: var(--accent-success);
    }

    .achievements-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--space-2); /* Reduced from var(--space-3) to reduce wasted space */
    }

    .achievement-badge {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3);
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
    }

    .achievement-icon {
      font-size: var(--font-2xl);
    }

    .achievement-info {
      flex: 1;
    }

    .achievement-name {
      font-weight: var(--font-semibold);
      color: var(--text-primary);
      margin-bottom: var(--space-1);
    }

    .achievement-desc {
      font-size: var(--font-sm);
      color: var(--text-secondary);
    }

    .achievement-rarity {
      font-size: var(--font-xs);
      text-transform: capitalize;
      margin-top: var(--space-1);
      font-weight: var(--font-medium);
    }

    .rarity-common {
      color: var(--text-secondary);
    }

    .rarity-rare {
      color: var(--accent-info);
    }

    .rarity-epic {
      color: #a855f7; /* purple - no direct CSS variable, but works in both themes */
    }

    .rarity-legendary {
      color: var(--accent-warning);
    }

    /* Progress in achievement badges (Plan 2) */
    .achievement-icon-wrapper {
      position: relative;
      flex-shrink: 0;
    }

    .achievement-lock-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.5rem;
      opacity: 0.7;
      pointer-events: none;
    }

    .achievement-progress-container {
      margin-top: var(--space-2);
    }

    .achievement-progress-bar {
      width: 100%;
      height: 4px;
      background: var(--bg-secondary);
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin-bottom: var(--space-1);
    }

    .achievement-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-info), var(--accent-success));
      border-radius: var(--radius-sm);
      transition: width 0.3s ease;
    }

    .achievement-progress-text {
      font-size: var(--font-xs);
      color: var(--text-secondary);
      text-align: right;
    }

    /* Dark theme adjustments for rarity colors */
    :root[data-theme="dark"] .rarity-epic {
      color: #c084fc; /* lighter purple for dark theme */
    }

    .achievement-unearned {
      opacity: 0.5;
      filter: grayscale(0.7);
      position: relative;
    }

    .achievement-unearned::before {
      content: '🔒';
      position: absolute;
      top: var(--space-2);
      right: var(--space-2);
      font-size: var(--font-lg);
      opacity: 0.6;
    }

    .achievement-earned {
      border-color: var(--accent-success);
      background: var(--bg-elevated);
    }

    .profile-error-message {
      margin-top: var(--space-4);
    }

    /* Sync Status Indicator */
    .sync-status {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-1) var(--space-3);
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-full);
      font-size: var(--font-xs);
      color: var(--text-secondary);
    }

    .sync-status.syncing {
      color: var(--accent-warning);
    }

    .sync-status-text::before {
      content: '✓ ';
      color: var(--accent-success);
    }

    .sync-status.syncing .sync-status-text::before {
      content: '⟳ ';
      color: var(--accent-warning);
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @media (max-width: 767px) {
      .auth-modal-content,
      .leaderboard-content,
      .profile-content {
        max-width: 90%;
        padding: var(--space-4);
        /* Industry Standard: Account for bottom nav using viewport units */
        max-height: calc(100vh - 80px);
        padding-bottom: calc(var(--space-4) + 80px);
      }

      .leaderboard-tabs {
        gap: var(--space-1);
      }

      .leaderboard-tab {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-xs);
      }

      .profile-stats {
        grid-template-columns: 1fr;
      }

      .achievements-grid {
        grid-template-columns: 1fr;
      }

      /* Industry Standard: Prevent content cut-off by bottom nav */
      .profile-body,
      .leaderboard-body {
        max-height: calc(100% - 80px);
        padding-bottom: 80px; /* Space for bottom nav */
      }
    }

    /* ============================================================================
       ACHIEVEMENT NOTIFICATIONS - Epic Animations (Plan 1)
       ============================================================================ */
    .achievement-notification {
      position: fixed;
      top: 30px;
      left: 30px;
      background: var(--bg-elevated);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-5);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      z-index: 1500;
      transform: translateX(-400px) scale(0.8);
      opacity: 0;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                  opacity 0.5s ease;
      max-width: 380px;
      min-width: 300px;
      overflow: hidden;
      position: relative;
    }

    /* Rarity-specific border colors */
    .achievement-notification.achievement-common {
      border: 2px solid #9ca3af; /* gray */
    }

    .achievement-notification.achievement-rare {
      border: 2px solid #3b82f6; /* blue */
      box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4), 0 8px 30px rgba(0, 0, 0, 0.2);
    }

    .achievement-notification.achievement-epic {
      border: 2px solid #a855f7; /* purple */
      box-shadow: 0 4px 20px rgba(168, 85, 247, 0.5), 0 8px 30px rgba(0, 0, 0, 0.2);
    }

    .achievement-notification.achievement-legendary {
      border: 3px solid #fbbf24; /* gold */
      box-shadow: 0 8px 40px rgba(251, 191, 36, 0.6), 0 12px 50px rgba(0, 0, 0, 0.3);
    }

    .achievement-notification.show {
      transform: translateX(0) scale(1);
      opacity: 1;
    }

    .achievement-notification.fade-out {
      transform: translateX(-400px) scale(0.9);
      opacity: 0;
    }

    /* Backdrop for legendary */
    .achievement-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      z-index: 1499;
      transition: opacity 0.5s ease;
    }

    .achievement-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .achievement-backdrop.fade-out {
      opacity: 0;
    }

    /* Header with rarity badge */
    .achievement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-2);
    }

    .achievement-rarity-badge {
      font-size: var(--font-xs);
      font-weight: var(--font-bold);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .achievement-common .achievement-rarity-badge {
      background: #9ca3af;
      color: white;
    }

    .achievement-rare .achievement-rarity-badge {
      background: #3b82f6;
      color: white;
    }

    .achievement-epic .achievement-rarity-badge {
      background: #a855f7;
      color: white;
    }

    .achievement-legendary .achievement-rarity-badge {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: #1f2937;
      box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
    }

    .achievement-unlock-text {
      font-size: var(--font-xs);
      font-weight: var(--font-bold);
      color: var(--text-secondary);
      letter-spacing: 1px;
    }

    /* Icon wrapper with glow effects */
    .achievement-icon-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      margin: var(--space-3) 0;
    }

    .achievement-icon {
      font-size: 3rem;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    .rare-glow {
      filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
    }

    .epic-glow {
      filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.8));
      animation: epicPulse 2s ease-in-out infinite;
    }

    .legendary-glow {
      filter: drop-shadow(0 0 16px rgba(251, 191, 36, 1));
      animation: legendaryPulse 1.5s ease-in-out infinite;
    }

    @keyframes achievementIconPop {
      0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
      }
      60% {
        transform: scale(1.2) rotate(10deg);
      }
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
    }

    @keyframes epicPulse {
      0%, 100% {
        filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.8));
        transform: scale(1);
      }
      50% {
        filter: drop-shadow(0 0 20px rgba(168, 85, 247, 1));
        transform: scale(1.05);
      }
    }

    @keyframes legendaryPulse {
      0%, 100% {
        filter: drop-shadow(0 0 16px rgba(251, 191, 36, 1));
        transform: scale(1);
      }
      50% {
        filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1));
        transform: scale(1.1);
      }
    }

    /* Shimmer effect for epic+ */
    .achievement-notification.shimmer::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% {
        left: -100%;
      }
      100% {
        left: 100%;
      }
    }

    /* Particle effects for legendary */
    .achievement-particles {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #fbbf24;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      animation: particleExplode 1s ease-out forwards;
      animation-delay: var(--delay);
    }

    @keyframes particleExplode {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
      100% {
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
        opacity: 0;
      }
    }

    .achievement-content-wrapper {
      position: relative;
      z-index: 1;
    }

    .achievement-content {
      flex: 1;
      min-width: 0;
    }

    .achievement-name {
      font-weight: var(--font-bold);
      font-size: var(--font-lg);
      color: var(--text-primary);
      margin-bottom: var(--space-1);
      line-height: 1.3;
    }

    .achievement-desc {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .achievement-close {
      position: absolute;
      top: var(--space-2);
      right: var(--space-2);
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: var(--font-lg);
      cursor: pointer;
      padding: var(--space-1);
      min-width: 24px;
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      transition: all var(--transition-fast);
      line-height: 1;
      opacity: 0.7;
      z-index: 10;
    }

    .achievement-close:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
      opacity: 1;
    }

    /* Progress bar with rarity colors */
    .achievement-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 4px;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      transform-origin: left;
      animation: achievementProgress 6s linear forwards;
    }

    .achievement-common .achievement-progress {
      background: #9ca3af;
    }

    .achievement-rare .achievement-progress {
      background: #3b82f6;
    }

    .achievement-epic .achievement-progress {
      background: #a855f7;
    }

    .achievement-legendary .achievement-progress {
      background: linear-gradient(90deg, #fbbf24, #f59e0b);
    }

    @keyframes achievementProgress {
      from {
        transform: scaleX(1);
      }
      to {
        transform: scaleX(0);
      }
    }

    /* ============================================================================
       PROGRESS TRACKING NOTIFICATIONS (Plan 2)
       ============================================================================ */
    .achievement-progress-notification {
      position: fixed;
      top: 100px;
      left: 30px;
      background: var(--bg-elevated);
      border: 2px solid var(--accent-info);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-4);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      z-index: 1400;
      transform: translateX(-400px);
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.4s ease;
      max-width: 320px;
      display: flex;
      gap: var(--space-2);
      align-items: center;
    }

    .achievement-progress-notification.show {
      transform: translateX(0);
      opacity: 1;
    }

    .achievement-progress-notification.fade-out {
      transform: translateX(-400px);
      opacity: 0;
    }

    .progress-icon {
      font-size: 2rem;
      flex-shrink: 0;
    }

    .progress-content {
      flex: 1;
      min-width: 0;
    }

    .progress-achievement-name {
      font-weight: var(--font-bold);
      font-size: var(--font-sm);
      color: var(--text-primary);
      margin-bottom: var(--space-1);
    }

    .progress-text {
      font-size: var(--font-xs);
      color: var(--text-secondary);
      margin-bottom: var(--space-1);
    }

    .progress-bar-container {
      width: 100%;
      height: 6px;
      background: var(--bg-secondary);
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin-top: var(--space-1);
    }

    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-info), var(--accent-success));
      border-radius: var(--radius-sm);
      transition: width 0.3s ease;
    }

    .progress-almost {
      font-size: var(--font-xs);
      color: var(--accent-success);
      font-weight: var(--font-bold);
      margin-top: var(--space-1);
      animation: pulse 1s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
    }

    /* ============================================================================
       MILESTONE CELEBRATIONS (Plan 4)
       ============================================================================ */
    .milestone-celebration {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      z-index: 2000;
      pointer-events: none;
    }

    .milestone-celebration.show {
      animation: milestonePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .milestone-celebration.fade-out {
      animation: milestoneFadeOut 1s ease forwards;
    }

    @keyframes milestonePop {
      0% {
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
        opacity: 0;
      }
      60% {
        transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
      }
      100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
      }
    }

    @keyframes milestoneFadeOut {
      to {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
      }
    }

    .milestone-content {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      border-radius: var(--radius-lg);
      padding: 3rem;
      text-align: center;
      box-shadow: 0 20px 60px rgba(251, 191, 36, 0.5);
      border: 4px solid white;
    }

    .milestone-icon {
      font-size: 5rem;
      margin-bottom: 1rem;
      animation: bounce 1s ease infinite;
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

    .milestone-title {
      font-size: 1.5rem;
      font-weight: var(--font-bold);
      color: white;
      margin-bottom: 0.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .milestone-count {
      font-size: 2rem;
      font-weight: var(--font-bold);
      color: white;
      margin-bottom: 1rem;
    }

    .milestone-badge {
      font-size: 3rem;
    }

    /* ============================================================================
       ACHIEVEMENT STREAK NOTIFICATIONS (Plan 4)
       ============================================================================ */
    .achievement-streak-notification {
      position: fixed;
      top: 120px;
      left: 30px;
      background: linear-gradient(135deg, #f97316, #ea580c);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-4);
      display: flex;
      align-items: center;
      gap: var(--space-3);
      box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
      z-index: 1400;
      transform: translateX(-400px);
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .achievement-streak-notification.show {
      transform: translateX(0);
      opacity: 1;
    }

    .achievement-streak-notification.fade-out {
      transform: translateX(-400px);
      opacity: 0;
    }

    .streak-icon {
      font-size: 2.5rem;
      animation: flame 1s ease infinite;
    }

    @keyframes flame {
      0%, 100% {
        transform: scale(1) rotate(-5deg);
      }
      50% {
        transform: scale(1.1) rotate(5deg);
      }
    }

    .streak-content {
      color: white;
    }

    .streak-title {
      font-weight: var(--font-bold);
      font-size: var(--font-sm);
      margin-bottom: 0.25rem;
    }

    .streak-count {
      font-size: var(--font-lg);
      font-weight: var(--font-bold);
    }

    @media (max-width: 767px) {
      .achievement-notification {
        top: 20px;
        left: 20px;
        right: 20px;
        max-width: none;
        min-width: auto;
      }
      
      .achievement-progress-notification {
        top: 80px;
        left: 20px;
        right: 20px;
        max-width: none;
      }
      
      .achievement-streak-notification {
        top: 160px;
        left: 20px;
        right: 20px;
        max-width: none;
      }
    }

    /* ============================================================================
       ACHIEVEMENT GALLERY (Plan 3)
       ============================================================================ */
    .achievements-gallery-container {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 2rem;
    }

    .gallery-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .gallery-header .page-title {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: var(--text-primary);
    }

    .gallery-stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-top: 1rem;
    }

    .stat-item {
      text-align: center;
    }

    .stat-value {
      display: block;
      font-size: 2rem;
      font-weight: var(--font-bold);
      color: var(--accent-color);
    }

    .stat-label {
      display: block;
      font-size: var(--font-sm);
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }

    .gallery-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-bottom: 2rem;
      padding: 1.5rem;
      background: var(--bg-secondary);
      border-radius: var(--radius-lg);
      align-items: flex-end;
    }

    .filter-group, .sort-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .filter-group label, .sort-group label {
      font-size: var(--font-sm);
      font-weight: var(--font-medium);
      color: var(--text-secondary);
    }

    .filter-buttons {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .filter-btn {
      padding: 0.5rem 1rem;
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      cursor: pointer;
      transition: all var(--transition-fast);
      font-size: var(--font-sm);
    }

    .filter-btn:hover {
      background: var(--bg-hover);
    }

    .filter-btn.active {
      background: var(--accent-color);
      color: white;
      border-color: var(--accent-color);
    }

    #sort-select {
      padding: 0.5rem 1rem;
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      font-size: var(--font-sm);
    }

    .achievements-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .achievement-card {
      background: var(--bg-elevated);
      border: 2px solid var(--border-default);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      cursor: pointer;
      transition: all var(--transition-fast);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1rem;
    }

    .achievement-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .achievement-card.locked {
      opacity: 0.6;
      filter: grayscale(0.5);
    }

    .achievement-card-icon {
      font-size: 4rem;
      line-height: 1;
    }

    .achievement-card-icon.locked-icon {
      filter: grayscale(1);
    }

    .achievement-card-content {
      flex: 1;
      width: 100%;
    }

    .achievement-card-name {
      font-weight: var(--font-bold);
      font-size: var(--font-lg);
      margin-bottom: 0.5rem;
      color: var(--text-primary);
    }

    .achievement-card-desc {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .achievement-card-date {
      font-size: var(--font-xs);
      color: var(--text-muted);
      margin-top: 0.5rem;
    }

    .achievement-card-rarity {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: var(--radius-sm);
      font-size: var(--font-xs);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      margin-top: 0.5rem;
    }

    /* Rarity colors for cards */
    .achievement-card[data-rarity="common"] {
      border-color: #9ca3af;
    }

    .achievement-card[data-rarity="rare"] {
      border-color: #3b82f6;
    }

    .achievement-card[data-rarity="epic"] {
      border-color: #a855f7;
    }

    .achievement-card[data-rarity="legendary"] {
      border-color: #fbbf24;
    }

    .rarity-distribution {
      margin-top: 3rem;
      padding: 2rem;
      background: var(--bg-secondary);
      border-radius: var(--radius-lg);
    }

    .rarity-distribution h3 {
      margin-bottom: 1.5rem;
      color: var(--text-primary);
    }

    .rarity-bars {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .rarity-bar-item {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .rarity-bar-label {
      min-width: 100px;
      font-weight: var(--font-bold);
      font-size: var(--font-sm);
      color: var(--text-primary);
    }

    .rarity-bar-container {
      flex: 1;
      height: 24px;
      background: var(--bg-primary);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .rarity-bar-fill {
      height: 100%;
      transition: width 0.5s ease;
    }

    .rarity-bar-fill.common {
      background: #9ca3af;
    }

    .rarity-bar-fill.rare {
      background: #3b82f6;
    }

    .rarity-bar-fill.epic {
      background: #a855f7;
    }

    .rarity-bar-fill.legendary {
      background: linear-gradient(90deg, #fbbf24, #f59e0b);
    }

    .rarity-bar-text {
      min-width: 60px;
      text-align: right;
      font-size: var(--font-sm);
      color: var(--text-secondary);
    }

    /* Detail modal */
    .achievement-detail-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: 2rem;
    }

    .achievement-detail-modal .modal-content {
      background: var(--bg-elevated);
      border-radius: var(--radius-lg);
      padding: 2rem;
      max-width: 500px;
      width: 100%;
      text-align: center;
      position: relative;
    }

    .achievement-detail-modal .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: transparent;
      border: none;
      font-size: 2rem;
      color: var(--text-secondary);
      cursor: pointer;
      line-height: 1;
    }

    .detail-icon {
      font-size: 5rem;
      margin-bottom: 1rem;
    }

    .detail-rarity {
      display: inline-block;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      margin: 1rem 0;
    }

    .detail-date {
      color: var(--accent-success);
      margin-top: 1rem;
    }

    .detail-locked {
      color: var(--text-secondary);
      margin-top: 1rem;
    }

    .back-link {
      display: inline-block;
      margin: 2rem auto;
      text-align: center;
      color: var(--accent-color);
      text-decoration: none;
      font-weight: 500;
      transition: opacity 0.2s;
    }

    .back-link:hover {
      opacity: 0.8;
      text-decoration: underline;
    }

    /* ============================================================================
       CHALLENGES (Plan 5)
       ============================================================================ */
    .challenge-board {
      background: var(--bg-elevated);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      margin: 1rem 0;
    }

    .challenge-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      background: var(--bg-secondary);
      border-radius: var(--radius-md);
      margin-bottom: 1rem;
    }

    .challenge-info {
      flex: 1;
    }

    .challenge-name {
      font-weight: var(--font-bold);
      margin-bottom: 0.25rem;
      color: var(--text-primary);
    }

    .challenge-desc {
      font-size: var(--font-sm);
      color: var(--text-secondary);
    }

    .challenge-progress {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.5rem;
    }

    .challenge-progress-bar {
      width: 120px;
      height: 8px;
      background: var(--bg-primary);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .challenge-progress-fill {
      height: 100%;
      background: var(--accent-success);
      transition: width 0.3s ease;
    }

    .challenge-progress-text {
      font-size: var(--font-xs);
      color: var(--text-secondary);
    }

    .challenge-complete-notification {
      position: fixed;
      top: 180px;
      left: 30px;
      background: var(--bg-elevated);
      border: 2px solid var(--accent-success);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-4);
      display: flex;
      align-items: center;
      gap: var(--space-3);
      box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
      z-index: 1400;
      transform: translateX(-400px);
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.4s ease;
      max-width: 320px;
    }

    .challenge-complete-notification.show {
      transform: translateX(0);
      opacity: 1;
    }

    .challenge-complete-notification.fade-out {
      transform: translateX(-400px);
      opacity: 0;
    }

    .challenge-complete-icon {
      font-size: 2.5rem;
      flex-shrink: 0;
    }

    .challenge-complete-content {
      flex: 1;
      min-width: 0;
    }

    .challenge-complete-title {
      font-weight: var(--font-bold);
      font-size: var(--font-sm);
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .challenge-complete-name {
      font-size: var(--font-lg);
      font-weight: var(--font-bold);
      color: var(--accent-success);
      margin-bottom: 0.25rem;
    }

    .challenge-complete-reward {
      font-size: var(--font-xs);
      color: var(--text-secondary);
    }

    /* ============================================================================
       UTILITY CLASSES
       ============================================================================ */
    .hidden {
      display: none !important;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    /* Score Breakdown Tooltip */
    .score-wrapper {
      position: relative;
      display: inline-block;
    }

    .score-tooltip {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 0.5rem;
      background: var(--bg-secondary);
      border: 2px solid var(--accent-neon);
      border-radius: 8px;
      padding: 0.75rem;
      min-width: 200px;
      box-shadow: 0 4px 20px rgba(0, 243, 255, 0.3);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-fast) ease;
      z-index: 1000;
      white-space: nowrap;
    }

    .score-tooltip[aria-hidden="false"],
    .score-wrapper:hover .score-tooltip,
    .score-wrapper:focus-within .score-tooltip {
      opacity: 1;
      pointer-events: auto;
    }

    .tooltip-content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .tooltip-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent-neon);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.25rem;
    }

    .tooltip-breakdown {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .tooltip-breakdown-line {
      display: flex;
      justify-content: space-between;
      margin: 0.25rem 0;
    }

    .tooltip-breakdown-label {
      color: var(--text-secondary);
    }

    .tooltip-breakdown-value {
      color: var(--accent-neon);
      font-weight: 600;
      margin-left: 1rem;
    }

    @media (max-width: 767px) {
      .score-tooltip {
        left: auto;
        right: 0;
        transform: none;
        min-width: 180px;
      }
    }

    /* Ad Container Styles */
    .ad-container {
      min-height: 100px;
      margin: 1rem 0;
      padding: 0.5rem;
    }

    .ad-desktop {
      display: block;
    }

    .ad-mobile {
      display: none;
    }

    @media (max-width: 767px) {
      .ad-desktop {
        display: none;
      }
      
      .ad-mobile {
        display: block;
      }
    }

    /* Hide Google AdSense 1px iframes that appear when ads fail to load */
    /* These are injected by AdSense when ads aren't ready yet */
    iframe[id^="aswift_"],
    iframe[id^="google_ads_frame"] {
      position: absolute !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* Ensure ad containers don't show empty space when only 1px iframes are present */
    .ad-container:has(iframe[style*="1px"]:only-child) {
      display: none;
    }

    /* ============================================================================
       GDPR CONSENT BANNER & PANEL
       ============================================================================ */
    
    .consent-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--bg-elevated);
      border-top: 2px solid var(--border-default);
      box-shadow: var(--shadow-xl);
      z-index: 10000;
      padding: 1.5rem;
      animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .consent-banner-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .consent-banner-header h2 {
      margin: 0 0 0.5rem 0;
      color: var(--text-primary);
      font-size: calc(1.2rem * var(--font-size-multiplier));
    }

    .consent-banner-description {
      margin: 0;
      color: var(--text-secondary);
      font-size: calc(0.9rem * var(--font-size-multiplier));
      line-height: 1.5;
    }

    .consent-banner-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .consent-btn {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 6px;
      font-size: calc(1rem * var(--font-size-multiplier));
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition-normal);
      font-family: inherit;
    }

    .consent-btn-primary {
      background: var(--accent-success);
      color: var(--text-on-accent);
      font-weight: var(--font-semibold);
    }

    .consent-btn-primary:hover {
      background: var(--accent-success-hover);
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
    }

    .consent-btn-secondary {
      background: var(--bg-elevated);
      color: var(--text-primary);
      border: 2px solid var(--border-default);
      font-weight: var(--font-semibold);
    }

    .consent-btn-secondary:hover {
      background: var(--bg-hover);
      border-color: var(--border-hover);
    }

    .consent-btn-link {
      background: transparent;
      color: var(--text-secondary);
      text-decoration: underline;
      padding: 0.75rem 1rem;
      font-weight: var(--font-medium);
    }

    .consent-btn-link:hover {
      color: var(--text-primary);
      text-decoration: none;
    }

    /* Consent Panel (Modal) */
    .consent-panel {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(4px);
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      animation: fadeIn 0.3s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .consent-panel-content {
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      max-width: 600px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-xl);
      animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
      from {
        transform: translateY(-20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .consent-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-5);
      border-bottom: 1px solid var(--border-default);
    }

    .consent-panel-header h2 {
      margin: 0;
      color: var(--text-primary);
      font-size: calc(1.5rem * var(--font-size-multiplier));
    }

    .consent-panel-close {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: 2rem;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all var(--transition-fast);
    }

    .consent-panel-close:hover {
      color: var(--text-primary);
      background: var(--bg-hover);
    }

    .consent-panel-body {
      padding: 1.5rem;
    }

    .consent-panel-body > p {
      margin: 0 0 1.5rem 0;
      color: var(--text-secondary);
      font-size: calc(0.95rem * var(--font-size-multiplier));
    }

    .consent-option {
      margin-bottom: var(--space-5);
      padding: var(--space-4);
      background: var(--bg-primary);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-default);
    }

    .consent-option-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .consent-option-header label {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      color: var(--text-primary);
      font-size: calc(1rem * var(--font-size-multiplier));
      font-weight: 600;
    }

    .consent-option-header input[type="checkbox"] {
      width: 20px;
      height: 20px;
      cursor: pointer;
      accent-color: var(--accent-success);
    }

    .consent-option-status {
      font-size: calc(0.85rem * var(--font-size-multiplier));
      color: var(--text-secondary);
      font-weight: normal;
    }

    .consent-option-description {
      margin: 0;
      color: var(--text-secondary);
      font-size: calc(0.9rem * var(--font-size-multiplier));
      line-height: 1.5;
      padding-left: 2rem;
    }

    .consent-panel-actions {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      margin-top: var(--space-6);
      padding-top: var(--space-5);
      border-top: 1px solid var(--border-default);
    }

    @media (max-width: 768px) {
      .consent-banner {
        padding: 1rem;
      }

      .consent-banner-actions {
        flex-direction: column;
      }

      .consent-btn {
        width: 100%;
      }

      .consent-panel-content {
        max-width: 100%;
        margin: 0;
      }

      .consent-panel-actions {
        flex-direction: column;
      }

      .consent-panel-actions .consent-btn {
        width: 100%;
      }
    }

    /* ============================================================================
       SERVICE WORKER UPDATE NOTIFICATION
       ============================================================================ */

    #sw-update-notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--bg-elevated);
      border: 2px solid var(--accent-success);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      box-shadow: var(--shadow-xl), 0 0 20px rgba(106, 170, 100, 0.3);
      z-index: 10000;
      max-width: 360px;
      animation: slideUpBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      cursor: default;
      outline: none;
    }

    /* Critical update styles */
    #sw-update-notification.sw-update-critical {
      border-color: var(--accent-error, #ef4444);
      box-shadow: var(--shadow-xl), 0 0 20px rgba(239, 68, 68, 0.4);
      background: var(--bg-elevated);
      animation: slideUpBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), criticalPulse 2s ease-in-out infinite;
    }

    #sw-update-notification.sw-update-critical:focus {
      outline: 2px solid var(--accent-error, #ef4444);
      outline-offset: 2px;
    }

    @keyframes criticalPulse {
      0%, 100% {
        box-shadow: var(--shadow-xl), 0 0 20px rgba(239, 68, 68, 0.4);
      }
      50% {
        box-shadow: var(--shadow-xl), 0 0 30px rgba(239, 68, 68, 0.6);
      }
    }

    #sw-update-notification.sw-update-critical .sw-update-icon {
      animation: shake 0.5s ease-in-out infinite;
      filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.5));
    }

    @keyframes shake {
      0%, 100% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(-10deg);
      }
      75% {
        transform: rotate(10deg);
      }
    }

    #sw-update-notification.sw-update-critical .sw-update-title {
      color: var(--accent-error, #ef4444);
    }

    #sw-update-notification.sw-update-critical .sw-update-message strong {
      color: var(--accent-error, #ef4444);
    }

    #sw-update-notification.sw-update-critical .sw-update-btn-primary {
      background: var(--accent-error, #ef4444);
      color: white;
    }

    #sw-update-notification.sw-update-critical .sw-update-btn-primary:hover {
      background: var(--accent-error-hover, #dc2626);
    }

    #sw-update-notification:focus {
      outline: 2px solid var(--accent-success);
      outline-offset: 2px;
    }

    @keyframes slideUpBounce {
      0% {
        transform: translateY(100%) scale(0.9);
        opacity: 0;
      }
      60% {
        transform: translateY(-5px) scale(1.02);
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    .sw-update-header {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-3);
    }

    .sw-update-icon {
      font-size: var(--font-2xl);
      animation: rotate 2s linear infinite;
      filter: drop-shadow(0 2px 4px rgba(106, 170, 100, 0.3));
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .sw-update-title {
      font-weight: var(--font-bold);
      font-size: var(--font-lg);
      color: var(--text-primary);
      flex: 1;
    }

    .sw-update-message {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-3);
    }

    .sw-update-countdown {
      font-size: var(--font-xs);
      color: var(--text-muted);
      text-align: center;
      padding: var(--space-2);
      background: var(--bg-hover);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-3);
      transition: all var(--transition-fast);
    }

    .sw-update-countdown.sw-countdown-urgent {
      background: rgba(255, 71, 87, 0.1);
      color: var(--accent-error);
      font-weight: var(--font-semibold);
      animation: pulse 1s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
    }

    #sw-countdown-time {
      font-weight: var(--font-bold);
      font-size: var(--font-sm);
    }

    .sw-update-actions {
      display: flex;
      gap: var(--space-2);
    }

    .sw-update-btn {
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-md);
      cursor: pointer;
      font-weight: var(--font-semibold);
      font-size: var(--font-sm);
      transition: all var(--transition-fast);
      border: none;
      flex: 1;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sw-update-btn:focus {
      outline: none;
    }

    .sw-update-btn-primary {
      background: var(--accent-success);
      color: var(--text-on-accent);
      box-shadow: var(--shadow-md);
    }

    .sw-update-btn-primary:hover {
      background: var(--accent-success-hover);
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
    }

    .sw-update-btn-primary:active {
      transform: translateY(0);
      box-shadow: var(--shadow-sm);
    }

    .sw-update-btn-secondary {
      background: var(--bg-hover);
      color: var(--text-primary);
      border: 1px solid var(--border-default);
    }

    .sw-update-btn-secondary:hover {
      background: var(--bg-elevated);
      border-color: var(--border-hover);
    }

    .sw-update-btn-secondary:active {
      transform: scale(0.98);
    }

    @media (max-width: 767px) {
      #sw-update-notification {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        padding: var(--space-3);
      }

      .sw-update-header {
        margin-bottom: var(--space-2);
      }

      .sw-update-title {
        font-size: var(--font-base);
      }

      .sw-update-message {
        font-size: var(--font-xs);
        margin-bottom: var(--space-2);
      }

      .sw-update-countdown {
        margin-bottom: var(--space-2);
        padding: var(--space-1) var(--space-2);
      }

      .sw-update-btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-xs);
        min-height: 40px;
      }
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
      #sw-update-notification {
        animation: slideUp 0.2s ease-out;
      }

      .sw-update-icon {
        animation: none;
      }

      .sw-update-countdown.sw-countdown-urgent {
        animation: none;
      }
    }

/* Leaderboard Styles */
.leaderboard-content {
  max-width: 600px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.leaderboard-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leaderboard-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-secondary);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-default);
}

.leaderboard-tabs::-webkit-scrollbar {
  display: none;
}

.leaderboard-tab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: none;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: all 0.2s;
}

.leaderboard-tab:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.leaderboard-tab.active {
  background: var(--accent-success);
  color: white;
}

.leaderboard-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
  min-height: 300px;
}

.leaderboard-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 50px 1fr 120px;
  padding: var(--space-3) var(--space-2);
  align-items: center;
  border-radius: var(--radius-sm);
}

.leaderboard-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

.leaderboard-row.header {
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-default);
  background: none;
  margin-bottom: var(--space-2);
}

.leaderboard-row.is-me {
  background: rgba(106, 170, 100, 0.2);
  border: 1px solid var(--accent-success);
  border-left: 4px solid var(--accent-success);
  box-shadow: 0 0 0 1px rgba(106, 170, 100, 0.15);
  font-weight: 600;
}

.leaderboard-row.is-me .player-name {
  color: var(--text-primary);
}

/* "(You)" label only in main table; "Your Score" section already has a header so skip to avoid "You (You)" */
.leaderboard-row.is-me:not(.user-entry) .player-name::after {
  content: ' (You)';
  font-weight: 600;
  color: var(--accent-success);
  opacity: 0.95;
}

.leaderboard-row .rank {
  font-weight: 700;
  color: var(--text-secondary);
}

.leaderboard-row .player {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.leaderboard-row .player-name {
  color: var(--text-primary);
}

.leaderboard-row .score {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-success);
}

.leaderboard-loading, .leaderboard-error, .leaderboard-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-secondary);
}

[data-theme="dark"] .leaderboard-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .leaderboard-row.is-me {
  background: rgba(52, 211, 153, 0.12);
  border-left-color: var(--accent-success);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .leaderboard-row.is-me .player-name::after {
  color: var(--accent-success);
}

/* Ensure player name is visible in all themes (Fix 2.1) */
[data-theme="dark"] .leaderboard-row .player,
[data-theme="dark"] .leaderboard-row .player-name {
  color: var(--text-primary);
}

/* Success notification style for offline queue */
.error-notification.success {
  background-color: var(--accent-success, #10b981) !important;
  color: white;
}

/* ============================================================================
   TOOLTIPS
   ============================================================================ */
.tooltip {
  position: absolute;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-default);
  z-index: 10001;
  pointer-events: none;
  white-space: nowrap;
  max-width: 250px;
  white-space: normal;
  word-wrap: break-word;
}

.tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

.tooltip-top::before {
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--bg-elevated);
}

.tooltip-bottom::before {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--bg-elevated);
}

.tooltip-left::before {
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--bg-elevated);
}

.tooltip-right::before {
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--bg-elevated);
}

/* ============================================================================
   EMPTY STATES
   ============================================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--text-secondary);
}

.empty-state-compact {
  padding: var(--space-4);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.empty-state-title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-message {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  max-width: 400px;
}

.empty-state .btn {
  margin-top: var(--space-2);
}

/* ============================================================================
   CONFIRMATION DIALOG
   ============================================================================ */
.confirm-dialog {
  z-index: 2000;
}

.confirm-dialog-content {
  max-width: 400px;
  width: 90%;
}

.confirm-dialog-title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.confirm-dialog-message {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}

.confirm-dialog-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.confirm-dialog-actions .btn {
  min-width: 100px;
}

.btn-danger {
  background: var(--accent-error, #ef4444);
  color: white;
  border-color: var(--accent-error, #ef4444);
}

.btn-danger:hover:not(:disabled) {
  background: var(--accent-error-hover, #dc2626);
  border-color: var(--accent-error-hover, #dc2626);
}

/* ============================================================================
   MODAL ANIMATIONS
   ============================================================================ */
.modal {
  animation: fadeIn 0.2s ease-out;
}

.modal-content {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   FOCUS INDICATORS
   ============================================================================ */
/* Keep focus-visible for form inputs (accessibility), but remove for buttons */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent-info, #4a90e2);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.btn:focus-visible,
button:focus-visible {
  outline: none;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  z-index: 10000;
  border-radius: var(--radius-md);
  border: 2px solid var(--accent-info);
  font-weight: var(--font-semibold);
}

.skip-link:focus {
  top: var(--space-2);
  left: var(--space-2);
}

/* ============================================================================
   FORM VALIDATION
   ============================================================================ */
.field-error {
  border-color: var(--accent-error, #ef4444) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.field-error-message {
  display: none;
  color: var(--accent-error, #ef4444);
  font-size: var(--font-sm);
  margin-top: var(--space-1);
  padding-left: var(--space-2);
}

.field-error-message:not(:empty) {
  display: block;
}

/* ============================================================================
   BUTTON PRESS FEEDBACK
   ============================================================================ */
.btn:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.bottom-nav-item:active {
  transform: scale(0.95);
}