:root {
      --primary: #2c3e50;
      --secondary: #3498db;
      --accent: #e74c3c;
      --light: #ecf0f1;
      --dark: #2c3e50;
      --success: #2ecc71;
      --warning: #f39c12;
      --purple: #9b59b6;
      --gray: #95a5a6;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    body { 
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 25%, #e8dcc0 50%, #d4c4a8 75%, #8b4513 100%);
      color: var(--dark); 
      line-height: 1.6; 
      min-height: 100vh;
    }
    .container { max-width: 1400px; margin: 0 auto; padding: 20px; }

    header {
      background: 
        linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a2c1a 50%, #3d2817 75%, #2c1810 100%),
        radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.12) 0%, transparent 50%);
      color: white; 
      padding: 30px; 
      border-radius: 15px; 
      margin-bottom: 25px; 
      text-align: center;
      box-shadow: 
        0 8px 20px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
      border: 2px solid #8b4513;
      border-top: 3px solid #cd853f;
    }
    
    .forge-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      position: relative;
      z-index: 2;
      text-align: center;
    }
    
    .forge-title {
      position: relative;
      display: inline-block;
    }
    
    
    .forge-anvil {
      display: none; /* Hide anvil icons from desktop header */
    }
    
    .forge-title h1 {
      margin: 0;
      font-size: 2.5rem;
      color: #4a0000; /* Deeper red text */
      text-shadow: 
        1px 1px 0px #4a0000,
        2px 2px 0px #2c1810,
        3px 3px 0px #1a0f0a,
        inset 0 2px 4px rgba(0,0,0,0.6),
        inset 0 4px 8px rgba(0,0,0,0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(255, 255, 255, 0.1);
      letter-spacing: 3px;
      font-weight: 800;
      font-family: 'Orbitron', 'Copperplate', 'Copperplate Gothic Light', 'Copperplate Gothic Bold', 'Impact', 'Arial Black', Arial, sans-serif;
      text-transform: uppercase;
      position: relative;
      font-style: italic;
      padding: 15px 25px;
      background: 
        linear-gradient(135deg, 
          #ffd700 0%, 
          #ffed4e 15%, 
          #daa520 25%, 
          #ffd700 35%, 
          #b8860b 45%, 
          #ffd700 55%, 
          #cd853f 65%, 
          #ffd700 75%, 
          #ffb347 85%, 
          #ffd700 100%),
        radial-gradient(circle at 20% 30%, rgba(139, 69, 19, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(101, 67, 33, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(160, 82, 45, 0.2) 0%, transparent 30%);
      border-radius: 8px;
      box-shadow: 
        0 4px 8px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        inset 2px 0 6px rgba(139, 69, 19, 0.4),
        inset -2px 0 6px rgba(101, 67, 33, 0.3);
      transform: perspective(100px) rotateX(5deg);
      border: 2px solid #8b6914;
      filter: contrast(1.1) saturate(0.9);
    }
    
    .forge-title h1::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        repeating-linear-gradient(
          45deg,
          transparent 0px,
          transparent 2px,
          rgba(139, 69, 19, 0.1) 2px,
          rgba(139, 69, 19, 0.1) 4px
        ),
        repeating-linear-gradient(
          -45deg,
          transparent 0px,
          transparent 3px,
          rgba(101, 67, 33, 0.08) 3px,
          rgba(101, 67, 33, 0.08) 6px
        );
      border-radius: 8px;
      pointer-events: none;
    }
    
    .forge-title h1::after {
      content: '';
      position: absolute;
      top: 10%;
      left: 5%;
      right: 5%;
      height: 1px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 69, 19, 0.6) 20%, 
        rgba(101, 67, 33, 0.8) 50%, 
        rgba(139, 69, 19, 0.6) 80%, 
        transparent 100%);
      pointer-events: none;
    }
    
    /* Dented damage effect on top left corner */
    
    
    
    .forge-title h1 i {
      display: none; /* Hide fire icons from desktop header */
    }
    
    .forge-sparks {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }
    
    .workshop-tools {
      display: none;
    }
    
    .workshop-tools-right {
      display: none;
    }
    
    .spark {
      position: absolute;
      border-radius: 50%;
      animation: sparkFloat 3s ease-in-out infinite;
      opacity: 0;
    }
    
    /* Yellow sparks */
    .spark-1, .spark-3, .spark-5, .spark-7 {
      width: 2px;
      height: 2px;
      background: radial-gradient(circle, #ffdd44 0%, #ffaa00 50%, transparent 100%);
      box-shadow: 0 0 4px #ffdd44, 0 0 8px #ffaa00;
    }
    
    /* Red sparks */
    .spark-2, .spark-4, .spark-6, .spark-8 {
      width: 4px;
      height: 4px;
      background: radial-gradient(circle, #ff4444 0%, #cc0000 50%, transparent 100%);
      box-shadow: 0 0 6px #ff4444, 0 0 12px #ff6666;
    }
    
    .spark-1 { top: 15%; left: 8%; animation-delay: 0s; }
    .spark-2 { top: 25%; right: 12%; animation-delay: 0.5s; }
    .spark-3 { top: 45%; left: 15%; animation-delay: 1.0s; }
    .spark-4 { top: 65%; right: 20%; animation-delay: 1.5s; }
    .spark-5 { top: 35%; left: 5%; animation-delay: 2.0s; }
    .spark-6 { top: 55%; right: 8%; animation-delay: 2.5s; }
    .spark-7 { top: 75%; left: 12%; animation-delay: 0.3s; }
    .spark-8 { top: 40%; right: 5%; animation-delay: 1.8s; }
    
    @keyframes hammerSwing {
      0%, 100% { transform: rotate(-5deg); }
      50% { transform: rotate(5deg); }
    }
    
    @keyframes flameFlicker {
      0% { transform: scale(1) rotate(-2deg); }
      100% { transform: scale(1.1) rotate(2deg); }
    }
    
    @keyframes sparkFloat {
      0% { 
        transform: translateY(0px) translateX(0px) scale(0.5);
        opacity: 0;
      }
      15% { 
        transform: translateY(-8px) translateX(3px) scale(0.8);
        opacity: 0.6;
      }
      30% { 
        transform: translateY(-15px) translateX(6px) scale(1);
        opacity: 1;
      }
      70% { 
        transform: translateY(-30px) translateX(-5px) scale(0.9);
        opacity: 0.7;
      }
      85% { 
        transform: translateY(-45px) translateX(-12px) scale(0.6);
        opacity: 0.3;
      }
      100% { 
        transform: translateY(-60px) translateX(-20px) scale(0.3);
        opacity: 0;
      }
    }
    h1 { margin-bottom: 10px; font-size: 2.5rem; }
    
    .subtitle { 
      font-style: italic; 
      opacity: 0.9; 
      font-size: 1.1rem;
      color: #f5f5dc;
      text-shadow: 
        1px 1px 2px rgba(0,0,0,0.7),
        0 0 10px rgba(218, 165, 32, 0.6),
        0 0 20px rgba(255, 215, 0, 0.4);
      font-weight: 500;
      letter-spacing: 0.5px;
    }
    

    .tabs {
      display: flex; margin-bottom: 20px; background: #fefefe; border-radius: 12px; overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }
    .tab {
      padding: 15px 20px; cursor: pointer; font-weight: 500; transition: background-color 0.2s; flex: 1; text-align: center;
      position: relative;
      z-index: 1;
    }
    .tab:not(.active):hover { background-color: #f8f9fa; }
    .tab.active { background-color: var(--secondary); color: white; }
    .tab-content { display: none; }
    .tab-content.active { display: block; }

    .dashboard { display: grid; grid-template-columns: 1fr 350px; gap: 25px; }
    .games-container { background: #fefefe; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); padding: 25px; }
    .section-header {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid var(--light);
    }
    .game-list { display: flex; flex-direction: column; gap: 20px; }
    .game-card {
      border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; background: #fefefe; transition: transform 0.2s, box-shadow 0.2s; position: relative;
    }
    .game-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
    .game-card.active-dropdown { z-index: 102; } /* Ensure active card is above siblings */
    .game-card.completed { background-color: #e6ffe6; border-color: var(--success); }
    .game-card.completed .game-title { color: var(--success); }
    .game-card.dragging { opacity: 0.5; border: 2px dashed var(--secondary); }
    .game-card.drag-over { border: 2px solid var(--secondary); }
    .game-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-right: 30px; /* Add padding to make space for the delete button */
    }
    .game-delete-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 40px; /* Adjust size as needed */
      height: 40px; /* Adjust size as needed */
      background: rgba(231, 76, 60, 0.1); /* Faded red */
      border: none;
      border-bottom-left-radius: 100%; /* Quarter circle for top-right */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2em;
      color: transparent; /* Make icon invisible by default */
      cursor: pointer;
      opacity: 1; /* Keep opacity at 1, will fade with background color */
      transition: all 0.2s ease-in-out;
      z-index: 10; /* Ensure it's above other elements */
    }
    .game-delete-btn:hover {
      opacity: 1;
      background-color: var(--accent); /* Vibrant red on hover */
      color: white; /* White icon on hover */
    }
    .game-title { font-weight: bold; font-size: 1.1em; color: var(--primary); display: flex; align-items: center; gap: 10px; }
    .game-title select { padding: 6px 8px; border-radius: 6px; border: 1px solid #ddd; }
    .game-progress { font-size: 0.95em; color: #666; display: flex; gap: 15px; }
    /* Styles for searchable dropdown */
    .searchable-dropdown { position: relative; width: 250px; }
    .searchable-dropdown input { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid #ddd; font-size: 0.95em; }
    .searchable-dropdown-results { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    .searchable-dropdown-item { padding: 6px 8px; cursor: pointer; font-size: 0.9em; }
    .searchable-dropdown-item:hover { background-color: #f0f0f0; }
    .searchable-dropdown.active { z-index: 101; } /* Ensure active dropdown is above other cards */

    .game-details { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
    .handicap-section strong { display: block; margin-bottom: 6px; }
    .handicap {
      background: transparent; 
      padding: 10px; 
      border-radius: 6px; 
      font-size: 0.9em; 
      margin-bottom: 8px;
      display: flex; 
      justify-content: space-between; 
      align-items: center;
      border: 1px solid #8b4513;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      color: #f5f5dc;
    }
    .handicap.permanent { border-left: 4px solid var(--accent); }
    .handicap.temporary { border-left: 4px solid var(--secondary); }

    /* Stylized rarity backgrounds for challenge tab handicaps - forge theme */
    .handicap.common { 
      background: linear-gradient(135deg, 
        rgba(149, 165, 166, 0.15) 0%, 
        rgba(189, 195, 199, 0.25) 50%, 
        rgba(149, 165, 166, 0.15) 100%) !important;
      border: 2px solid rgba(149, 165, 166, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(149, 165, 166, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .handicap.common::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    .handicap.uncommon { 
      background: linear-gradient(135deg, 
        rgba(46, 204, 113, 0.15) 0%, 
        rgba(88, 214, 141, 0.25) 50%, 
        rgba(46, 204, 113, 0.15) 100%) !important;
      border: 2px solid rgba(46, 204, 113, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(46, 204, 113, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .handicap.uncommon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.15) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    .handicap.rare { 
      background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.15) 0%, 
        rgba(93, 173, 226, 0.25) 50%, 
        rgba(52, 152, 219, 0.15) 100%) !important;
      border: 2px solid rgba(52, 152, 219, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(52, 152, 219, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .handicap.rare::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    .handicap.legendary { 
      background: linear-gradient(135deg, 
        rgba(155, 89, 182, 0.15) 0%, 
        rgba(187, 143, 206, 0.25) 50%, 
        rgba(155, 89, 182, 0.15) 100%) !important;
      border: 2px solid rgba(155, 89, 182, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(155, 89, 182, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .handicap.legendary::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.25) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    .handicap.mythic { 
      background: linear-gradient(135deg, 
        rgba(233, 30, 99, 0.15) 0%, 
        rgba(240, 98, 146, 0.25) 50%, 
        rgba(233, 30, 99, 0.15) 100%) !important;
      border: 2px solid rgba(233, 30, 99, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(233, 30, 99, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .handicap.mythic::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 75%, 
        transparent 100%);
      pointer-events: none;
    }

    .handicap-actions { display: flex; gap: 8px; }
    .handicap-btn { background: none; border: none; cursor: pointer; font-size: 0.9em; color: var(--gray); }
    .handicap-btn:hover { color: var(--accent); }
    
    /* Override any background colors on span elements inside handicaps */
    .handicap span {
      background: transparent !important;
      color: inherit !important;
    }

    .timer-widget {
      display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 6px;
    }
    .timer-display { font-family: monospace; font-size: 1.2em; font-weight: bold; }
    .timer-btn { padding: 6px 10px; font-size: 0.9em; }

    .controls { display: flex; gap: 12px; margin-top: 15px; flex-wrap: wrap; }
    button {
      padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s;
      display: inline-flex; align-items: center; gap: 6px;
    }
    /* Forge-themed button colors for challenge tab */
    #challenge-tab .btn-primary { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
      color: white; 
      border: 1px solid #654321;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #challenge-tab .btn-primary:hover { 
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #challenge-tab .btn-danger { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
      color: white; 
      border: 1px solid #660000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #challenge-tab .btn-danger:hover { 
      background: linear-gradient(135deg, #a00000 0%, #ff1744 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #challenge-tab .btn-success { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
      color: white; 
      border: 1px solid #1b3009;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #challenge-tab .btn-success:hover { 
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #challenge-tab .btn-warning { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
      color: #2c1810; 
      border: 1px solid #8b6914;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      font-weight: 600;
    }
    #challenge-tab .btn-warning:hover { 
      background: linear-gradient(135deg, #daa520 0%, #ffff00 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #challenge-tab .btn-purple { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
      color: white; 
      border: 1px solid #2e0050;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #challenge-tab .btn-purple:hover { 
      background: linear-gradient(135deg, #6a0dad 0%, #a855f7 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #challenge-tab .btn-secondary { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
      color: white; 
      border: 1px solid #4a4a4a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #challenge-tab .btn-secondary:hover { 
      background: linear-gradient(135deg, #808080 0%, #c0c0c0 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #challenge-tab .btn-gray { 
      background: linear-gradient(135deg, #708090 0%, #b0c4de 100%); 
      color: #2c1810; 
      cursor: default; 
      border: 1px solid #556b7a;
    }

    /* Default button styles for other tabs */
    .btn-primary { background-color: var(--secondary); color: white; }
    .btn-primary:hover { background-color: #2980b9; transform: translateY(-2px); }
    .btn-danger { background-color: var(--accent); color: white; }
    .btn-danger:hover { background-color: #c0392b; transform: translateY(-2px); }
    .btn-success { background-color: var(--success); color: white; }
    .btn-success:hover { background-color: #27ae60; transform: translateY(-2px); }
    .btn-warning { background-color: var(--warning); color: white; }
    .btn-warning:hover { background-color: #e67e22; transform: translateY(-2px); }
    .btn-purple { background-color: var(--purple); color: white; }
    .btn-purple:hover { background-color: #8e44ad; transform: translateY(-2px); }
    .btn-gray { background-color: #bdc3c7; color: white; cursor: default; }

    /* Rarity Colors (Diablo-like) */
    .rarity-common { color: var(--gray); /* White/Light Gray */ }
    .rarity-uncommon { color: var(--success); /* Green */ }
    .rarity-rare { color: var(--secondary); /* Blue */ }
    .rarity-legendary { color: var(--purple); /* Purple */ }
    .rarity-mythic { color: var(--warning); /* Orange */ }

    .sidebar { display: flex; flex-direction: column; gap: 25px; }
    .panel { background: #fefefe; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); padding: 20px; }
    .panel h3 { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--light); color: var(--primary); }

    .action-buttons { display: flex; flex-direction: column; gap: 12px; }
    .action-button { width: 100%; text-align: left; padding: 12px; justify-content: flex-start; }

    .stats { background: #f8f9fa; padding: 15px; border-radius: 8px; }
    .stat-item {
      display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e0e0e0;
    }
    .stat-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

    .token-counter {
      display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.2em; margin: 15px 0;
    }
    .token-icon { color: var(--warning); font-size: 1.5em; }
    .token-value { font-weight: bold; font-size: 1.3em; }

    footer {
      text-align: center; 
      margin-top: 40px; 
      padding: 25px; 
      color: #8b4513; 
      font-size: 0.95em; 
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 50%, #e8dcc0 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
      animation: footerGlow 3s ease-in-out infinite alternate;
      transition: all 0.3s ease;
    }
    
    footer:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      animation-play-state: paused;
    }
    
    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
      animation: footerAccentPulse 2s ease-in-out infinite;
    }
    
    footer::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      animation: footerShimmer 4s ease-in-out infinite;
    }
    
    footer p {
      position: relative;
      z-index: 1;
      margin: 0;
      font-weight: 500;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      animation: footerTextGlow 2.5s ease-in-out infinite alternate;
    }
    
    @keyframes footerGlow {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 20px rgba(218, 165, 32, 0.3);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 30px rgba(218, 165, 32, 0.5);
      }
    }
    
    @keyframes footerAccentPulse {
      0%, 100% { 
        opacity: 0.8;
        transform: scaleX(1);
      }
      50% { 
        opacity: 1;
        transform: scaleX(1.02);
      }
    }
    
    @keyframes footerShimmer {
      0% { left: -100%; }
      50% { left: 100%; }
      100% { left: 100%; }
    }
    
    @keyframes footerTextGlow {
      0% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      }
      100% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 8px rgba(218, 165, 32, 0.4);
      }
    }

    .dark-mode-toggle {
      background: none; border: none; font-size: 1.5em; cursor: pointer; color: white; position: absolute; top: 20px; right: 20px;
      transition: color 0.3s; z-index: 10;
    }
    .dark-mode-toggle:hover {
      color: var(--light);
    }

    /* Dark Mode Styles */
    body.dark-mode {
      --primary: #82a8cf;
      --secondary: #5a9bd4;
      --accent: #e06c75;
      --light: #3b4252;
      --dark: #eceff4;
      --success: #67b867;
      --warning: #e5c07b;
      --purple: #c678dd;
      --gray: #9baec8;

      background: linear-gradient(135deg, #2d1810 0%, #3d2815 25%, #654321 50%, #8b4513 75%, #1a0f0a 100%);
      color: var(--dark);
    }

    body.dark-mode header {
      background: 
        linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a2c1a 50%, #3d2817 75%, #2c1810 100%),
        radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.12) 0%, transparent 50%);
      color: white; 
      padding: 30px; 
      border-radius: 15px; 
      margin-bottom: 25px; 
      text-align: center;
      box-shadow: 
        0 8px 20px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
      border: 2px solid #8b4513;
      border-top: 3px solid #cd853f;
    }

    body.dark-mode .tabs, body.dark-mode .games-container, body.dark-mode .panel, body.dark-mode footer {
      background: #21252b;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    body.dark-mode .tab:not(.active):hover {
      background-color: #3b4252;
    }

    body.dark-mode .tab.active {
      background-color: var(--secondary);
    }

    body.dark-mode .game-card {
      border: 1px solid #3b4252;
      background: #2c313a;
    }

    body.dark-mode .game-card:hover {
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    }

    body.dark-mode .game-card.completed {
      background-color: #3b4252;
      border-color: var(--success);
    }

    body.dark-mode .game-title {
      color: var(--dark);
    }

    body.dark-mode .game-progress {
      color: var(--gray);
    }

    body.dark-mode .searchable-dropdown input {
      background: #3b4252;
      border-color: #4b5263;
      color: var(--dark);
    }

    body.dark-mode .searchable-dropdown-results {
      background: #21252b;
      border-color: #4b5263;
    }

    body.dark-mode .searchable-dropdown-item:hover {
      background-color: #3b4252;
    }

    body.dark-mode .handicap {
      background: transparent;
      border-color: #8b4513;
      border: 1px solid #8b4513;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      color: #f5f5dc;
    }

    body.dark-mode .handicap-btn {
      color: var(--gray);
    }

    body.dark-mode .timer-widget {
      background: #3b4252;
    }

    body.dark-mode .section-header, body.dark-mode .panel h3 {
      border-bottom-color: #4b5263;
      color: var(--dark);
    }

    body.dark-mode .stat-item {
      border-bottom-color: #4b5263;
    }

    body.dark-mode hr {
      border-top-color: #4b5263;
    }

    body.dark-mode .modal-content {
      background: #21252b;
      box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    }

    body.dark-mode .modal-header {
      border-bottom-color: #4b5263;
    }
    body.dark-mode .modal-header h2 {
      color: var(--dark);
    }
    body.dark-mode .modal-body {
      color: #e5e5e5;
    }
    body.dark-mode .modal-body p {
      color: #e5e5e5;
    }
    body.dark-mode .form-actions {
      border-top-color: #4b5263;
    }

    body.dark-mode .close {
      color: var(--gray);
    }
    body.dark-mode .close:hover {
      color: var(--dark);
    }

    /* Start Challenge Modal - Sleek Forge Theme */
    .start-challenge-modal {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 3px solid #8b4513;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
    }

    .start-challenge-header {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: #ffd700;
      border-radius: 8px 8px 0 0;
      margin: -30px -30px 20px -30px;
      padding: 20px 30px;
      border-bottom: 3px solid #654321;
    }

    .start-challenge-header h2 {
      margin: 0;
      font-size: 1.8em;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    .start-challenge-header h2 i {
      color: #ff4500;
      margin-right: 10px;
      text-shadow: 0 0 8px rgba(255, 69, 0, 0.6);
    }

    .start-challenge-header .close {
      color: #ffd700;
      font-size: 1.5em;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }

    .start-challenge-header .close:hover {
      color: #ff4500;
      text-shadow: 0 0 8px rgba(255, 69, 0, 0.8);
    }

    .start-challenge-body {
      padding: 0 10px;
    }

    .start-challenge-warning {
      background: linear-gradient(135deg, #faf8f3 0%, #f5f0e6 100%);
      border: 2px solid #daa520;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 8px rgba(218, 165, 32, 0.2);
    }

    .start-challenge-warning h4 {
      color: #8b4513;
      margin-bottom: 15px;
      font-weight: bold;
      font-size: 1.1em;
      display: flex;
      align-items: center;
    }

    .start-challenge-warning h4 i {
      color: #ff4500;
      margin-right: 10px;
      font-size: 1.2em;
    }

    .start-challenge-warning ul {
      color: #2c1810;
      margin: 0;
      padding-left: 25px;
      line-height: 1.7;
    }

    .start-challenge-warning li {
      margin-bottom: 10px;
    }

    .start-challenge-warning strong {
      color: #8b4513;
      font-weight: bold;
    }

    .start-challenge-alternative {
      background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);
      border: 2px solid #5a9bd4;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 8px rgba(90, 155, 212, 0.2);
    }

    .start-challenge-alternative h4 {
      color: #2c3e50;
      margin-bottom: 15px;
      font-weight: bold;
      font-size: 1.1em;
      display: flex;
      align-items: center;
    }

    .start-challenge-alternative h4 i {
      color: #ffd700;
      margin-right: 10px;
      font-size: 1.2em;
    }

    .start-challenge-alternative p {
      color: #2c3e50;
      margin: 0 0 15px 0;
      line-height: 1.7;
    }

    .start-challenge-alternative strong {
      color: #2c3e50;
      font-weight: bold;
    }

    .start-challenge-question {
      color: #2c1810;
      font-size: 1.2em;
      font-weight: 600;
      text-align: center;
      margin: 25px 0;
      padding: 15px;
      background: linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
      border-radius: 8px;
      border: 2px solid #cd853f;
    }

    .start-challenge-footer {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border-top: 2px solid #daa520;
      margin: 20px -30px -30px -30px;
      padding: 20px 30px;
      border-radius: 0 0 8px 8px;
    }

    /* Dark mode for start challenge modal */
    body.dark-mode .start-challenge-modal {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 8px 25px rgba(139, 69, 19, 0.4);
    }

    body.dark-mode .start-challenge-header {
      background: linear-gradient(135deg, #2d1810 0%, #8b4513 100%);
      border-bottom-color: #654321;
    }

    body.dark-mode .start-challenge-warning {
      background: linear-gradient(135deg, #3d2815 0%, #4a2d1a 100%);
      border-color: #daa520;
      box-shadow: 0 4px 8px rgba(218, 165, 32, 0.3);
    }

    body.dark-mode .start-challenge-warning h4 {
      color: #ffd700;
    }

    body.dark-mode .start-challenge-warning ul {
      color: #e6d7c3;
    }

    body.dark-mode .start-challenge-warning strong {
      color: #ffd700;
    }

    body.dark-mode .start-challenge-alternative {
      background: linear-gradient(135deg, #1a2d3a 0%, #2d4a5a 100%);
      border-color: #5a9bd4;
      box-shadow: 0 4px 8px rgba(90, 155, 212, 0.3);
    }

    body.dark-mode .start-challenge-alternative h4 {
      color: #66c0f4;
    }

    body.dark-mode .start-challenge-alternative p {
      color: #c7d5e0;
    }

    body.dark-mode .start-challenge-alternative strong {
      color: #66c0f4;
    }

    body.dark-mode .start-challenge-question {
      color: #ffd700;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #daa520;
    }

    body.dark-mode .start-challenge-footer {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-top-color: #daa520;
    }

    body.dark-mode .form-group input, body.dark-mode .form-group select, body.dark-mode .form-group textarea {
      background: #3b4252;
      border-color: #4b5263;
      color: var(--dark);
    }

    body.dark-mode .db-handicap {
      background: #3b4252;
    }

    body.dark-mode .db-game-title {
      color: var(--dark);
    }

    body.dark-mode .form-group p.hint {
      color: var(--gray);
    }

    body.dark-mode #rulesContent h3 {
      color: var(--dark);
    }

    body.dark-mode #rulesContent p, body.dark-mode #rulesContent li {
      color: var(--dark);
    }

    body.dark-mode .token-counter .token-icon {
      color: var(--warning);
    }

    body.dark-mode .stats {
      background: #3b4252;
      color: var(--dark);
    }

    body.dark-mode .database-list > div {
      background-color: #2c313a !important;
      border: 1px dashed #4b5263 !important;
    }

    body.dark-mode .database-list > div p {
      color: var(--gray) !important;
    }

    /* Dark mode for database cards */
    body.dark-mode .database-game-card {
      background: #3b4252;
      border-color: #4b5263;
      color: var(--text);
    }

    body.dark-mode .database-game-card:hover {
      border-color: #5a9bd4;
      box-shadow: 0 4px 12px rgba(90, 155, 212, 0.3);
    }

    body.dark-mode .db-game-settings {
      background: #4b5263;
      color: var(--gray);
    }

    body.dark-mode .handicap-section-title {
      color: var(--text);
    }

    body.dark-mode .db-handicap {
      background: #2c313a;
      border-color: #4b5263;
    }

    body.dark-mode .db-handicap:hover {
      background: #3b4252;
    }

    body.dark-mode .handicap-name {
      color: var(--text);
    }

    body.dark-mode .handicap-description {
      color: var(--gray);
    }

    body.dark-mode .handicap-rarity {
      background: #4b5263;
      color: var(--text);
    }

    body.dark-mode .handicap-btn {
      color: var(--gray);
    }

    body.dark-mode .handicap-btn:hover {
      color: var(--accent);
      background: rgba(231, 76, 60, 0.2);
    }

    body.dark-mode .no-handicaps {
      background: #4b5263;
      color: var(--gray);
    }

    /* Dark mode rarity colors for challenge tab handicaps */
    body.dark-mode .handicap.common { 
      background: transparent; 
      color: #f5f5dc;
      border: 1px solid #8b4513;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      border-left-color: #cd853f !important;
    }
    body.dark-mode .handicap.uncommon { 
      background: transparent; 
      color: #f5f5dc;
      border: 1px solid #8b4513;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      border-left-color: #daa520 !important;
    }
    body.dark-mode .handicap.rare { 
      background: transparent; 
      color: #f5f5dc;
      border: 1px solid #8b4513;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      border-left-color: #ffd700 !important;
    }
    body.dark-mode .handicap.legendary { 
      background: transparent; 
      color: #f5f5dc;
      border: 1px solid #8b4513;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      border-left-color: #ff8c00 !important;
    }
    body.dark-mode .handicap.mythic { 
      background: transparent; 
      color: #f5f5dc;
      border: 1px solid #8b4513;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      border-left-color: #ff4500 !important;
    }

    /* Dark mode rarity colors for database handicaps */
    body.dark-mode .db-handicap.common { 
      background: #3b4252; 
      color: var(--text);
    }
    body.dark-mode .db-handicap.uncommon { 
      background: #2d3b2d; 
      color: var(--text);
    }
    body.dark-mode .db-handicap.rare { 
      background: #2d3b4a; 
      color: var(--text);
    }
    body.dark-mode .db-handicap.legendary { 
      background: #3d2d4a; 
      color: var(--text);
    }
    body.dark-mode .db-handicap.mythic { 
      background: #4a2d3d; 
      color: var(--text);
    }

    /* Database Cards Styles - Based on Targeted Clear Cards */
    .database-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 15px;
      max-height: 600px;
      overflow-y: auto;
    }

    .database-game-card {
      border: 2px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      background: #f8f9fa;
      transition: all 0.3s ease;
    }

    .database-game-card:hover {
      border-color: var(--secondary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    }

    .db-game-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
      gap: 15px;
    }

    .db-game-title {
      font-weight: bold;
      font-size: 1.1em;
      color: var(--primary);
      margin: 0;
      flex: 1;
      min-width: 0; /* Allow text to wrap */
    }

    .db-game-actions {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0; /* Prevent buttons from shrinking */
    }

    .db-game-actions .btn-sm {
      padding: 4px 8px;
      font-size: 0.75em;
    }

    .db-game-settings {
      font-size: 0.8em;
      color: var(--gray);
      margin-bottom: 10px;
      padding: 4px 8px;
      background: #e9ecef;
      border-radius: 4px;
      text-align: center;
    }

    .handicap-section {
      margin-bottom: 12px;
      background: rgba(139, 69, 19, 0.05);
      border: 1px solid #daa520;
      border-radius: 8px;
      padding: 12px;
    }

    .handicap-section:last-child {
      margin-bottom: 0;
    }

    .handicap-section-title {
      font-weight: 600;
      font-size: 0.85em;
      color: var(--primary);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      padding: 2px 0;
    }

    .handicap-section-title button {
      margin-left: 10px;
      font-size: 0.8em;
      padding: 4px 8px;
    }

    .handicap-section-title:hover {
      color: var(--secondary);
    }

    .handicap-section-title i {
      font-size: 0.8em;
    }

    .handicap-toggle {
      font-size: 0.7em;
      color: var(--gray);
      transition: transform 0.2s ease;
    }

    .handicap-toggle.expanded {
      transform: rotate(180deg);
    }

    .handicap-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .db-handicap {
      background: white;
      padding: 6px 8px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background-color 0.2s;
      border: 1px solid #e0e0e0;
    }

    .db-handicap:hover {
      background: #f8f9fa;
    }

    .db-handicap.permanent {
      border-left: 3px solid var(--accent);
    }

    .db-handicap.temporary {
      border-left: 3px solid var(--secondary);
    }

    /* Rarity color backgrounds for database handicaps */
    .db-handicap.common { 
      background: #f8f9fa; 
      border-left-color: var(--gray) !important;
    }
    .db-handicap.uncommon { 
      background: #e8f5e8; 
      border-left-color: var(--success) !important;
    }
    .db-handicap.rare { 
      background: #e3f2fd; 
      border-left-color: var(--secondary) !important;
    }
    .db-handicap.legendary { 
      background: #f3e5f5; 
      border-left-color: var(--purple) !important;
    }
    .db-handicap.mythic { 
      background: #fce4ec; 
      border-left-color: #e91e63 !important;
    }

    .handicap-info {
      flex: 1;
      min-width: 0;
    }

    .handicap-name {
      font-weight: 500;
      color: var(--primary);
      margin-bottom: 1px;
      font-size: 0.85em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .handicap-description {
      font-size: 0.75em;
      color: var(--gray);
      margin-bottom: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .handicap-rarity {
      font-size: 0.7em;
      font-weight: 500;
      padding: 1px 4px;
      border-radius: 3px;
      background: var(--light);
      white-space: nowrap;
    }

    .handicap-actions {
      display: flex;
      gap: 2px;
      margin-left: 6px;
      flex-shrink: 0;
    }

    .handicap-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.75em;
      color: var(--gray);
      padding: 2px 4px;
      border-radius: 2px;
      transition: all 0.2s;
      min-width: 20px;
    }

    .handicap-btn:hover {
      color: var(--accent);
      background: rgba(231, 76, 60, 0.1);
    }

    .handicap-list.hidden {
      display: none;
    }

    .handicap-list.minimized {
      display: none;
    }

    .handicap-section.minimized .handicap-list {
      display: none;
    }

    .handicap-section.minimized .handicap-section-title {
      margin-bottom: 0;
    }

    .no-handicaps {
      text-align: center;
      color: var(--gray);
      font-style: italic;
      padding: 8px;
      background: #e9ecef;
      border-radius: 4px;
      font-size: 0.8em;
    }


    .modal {
      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background-color: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;
    }
    .modal-content {
      background: #fefefe; padding: 30px; border-radius: 12px; width: 90%; max-width: 700px; max-height: 80vh; overflow-y: auto;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    
    /* Override for Ruleset Builder Modal */
    .ruleset-builder-modal {
      max-width: 1600px !important;
      width: 98vw !important;
      max-height: 95vh !important;
      height: 95vh !important;
      margin: 1vh auto !important;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
      border-radius: 20px !important;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
      padding: 0 !important;
    }
    
    .ruleset-builder-content {
      max-width: 1500px;
      margin: 0 auto;
      padding: 20px;
      height: 100%;
      overflow-y: auto;
    }
    
    /* Enhanced Ruleset Builder Styling */
    .builder-options-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
    }
    
    .builder-option-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      border: 4px solid #dee2e6;
      border-radius: 20px;
      padding: 0;
      cursor: pointer;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 280px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .builder-option-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #cd853f 100%);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    
    .builder-option-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      border-color: #8b4513;
    }
    
    .builder-option-card:hover::before {
      transform: scaleX(1);
    }
    
    .builder-option-card.selected {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #654321;
      color: white;
      transform: translateY(-6px);
      box-shadow: 0 15px 40px rgba(139, 69, 19, 0.4);
    }
    
    .builder-option-card.selected::before {
      transform: scaleX(1);
      background: linear-gradient(90deg, #f5f5dc 0%, #ffffff 100%);
    }
    
    .option-icon {
      padding: 35px 35px 20px 35px;
      text-align: center;
      background: rgba(255, 255, 255, 0.1);
      position: relative;
    }
    
    .option-icon i {
      font-size: 4em;
      color: #8b4513;
      display: block;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .builder-option-card.selected .option-icon i {
      color: #f5f5dc;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .option-content {
      padding: 0 35px 35px 35px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .option-content h4 {
      margin: 0 0 15px 0;
      font-size: 1.6em;
      font-weight: bold;
      color: #495057;
      text-align: center;
    }
    
    .builder-option-card.selected .option-content h4 {
      color: #f5f5dc;
    }
    
    .option-content p {
      margin: 0 0 20px 0;
      font-size: 1.1em;
      line-height: 1.6;
      color: #6c757d;
      flex: 1;
      text-align: center;
    }
    
    .builder-option-card.selected .option-content p {
      color: rgba(245, 245, 220, 0.9);
    }
    
    .option-features {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: auto;
      justify-content: center;
    }
    
    .feature-tag {
      background: rgba(139, 69, 19, 0.1);
      color: #8b4513;
      padding: 6px 16px;
      border-radius: 15px;
      font-size: 0.9em;
      font-weight: 600;
      border: 2px solid rgba(139, 69, 19, 0.2);
      transition: all 0.3s ease;
    }
    
    .feature-tag:hover {
      background: rgba(139, 69, 19, 0.2);
      transform: scale(1.05);
    }
    
    .builder-option-card.selected .feature-tag {
      background: rgba(245, 245, 220, 0.2);
      color: #f5f5dc;
      border-color: rgba(245, 245, 220, 0.3);
    }
    
    /* Info Cards */
    .info-cards {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    
    .info-card {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      padding: 20px;
      background: rgba(139, 69, 19, 0.05);
      border: 2px solid rgba(139, 69, 19, 0.1);
      border-radius: 12px;
      transition: all 0.3s ease;
    }
    
    .info-card:hover {
      background: rgba(139, 69, 19, 0.1);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(139, 69, 19, 0.1);
    }
    
    .info-icon {
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5em;
      box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
    }
    
    .info-content h5 {
      margin: 0 0 8px 0;
      color: #8b4513;
      font-size: 1.2em;
      font-weight: 700;
    }
    
    .info-content p {
      margin: 0;
      color: #6c757d;
      font-size: 0.95em;
      line-height: 1.5;
    }
    
    /* Settings Cards Grid */
    .settings-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 25px;
      margin-bottom: 40px;
      width: 100%;
    }
    
    .setting-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      border: 3px solid #dee2e6;
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .setting-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      border-color: #8b4513;
    }
    
    .setting-card-header {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
    }
    
    .setting-card-icon {
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5em;
    }
    
    .setting-card-title h4 {
      margin: 0 0 5px 0;
      font-size: 1.3em;
      font-weight: 700;
    }
    
    .setting-card-title p {
      margin: 0;
      font-size: 0.9em;
      opacity: 0.9;
    }
    
    .setting-card-content {
      padding: 20px;
    }
    
    .setting-card-content .setting-group {
      margin-bottom: 20px;
    }
    
    .setting-card-content .setting-group:last-child {
      margin-bottom: 0;
    }
    
    /* Dark mode for setting cards */
    body.dark-mode .setting-card {
      background: linear-gradient(135deg, #2c1810 0%, #3d2815 100%);
      border-color: #654321;
    }
    
    body.dark-mode .setting-card:hover {
      border-color: #daa520;
      box-shadow: 0 8px 25px rgba(218, 165, 32, 0.2);
    }
    
    body.dark-mode .setting-card-header {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
    }
    
    body.dark-mode .setting-card-icon {
      background: rgba(245, 245, 220, 0.2);
    }
    
    /* Review Content */
    .review-content {
      margin-top: 30px;
      padding: 20px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 12px;
      border: 2px solid #dee2e6;
    }
    
    .review-content h3 {
      color: #8b4513;
      margin-bottom: 15px;
      font-size: 1.4em;
    }
    
    body.dark-mode .review-content {
      background: linear-gradient(135deg, #2c1810 0%, #3d2815 100%);
      border-color: #654321;
    }
    
    body.dark-mode .review-content h3 {
      color: #daa520;
    }
    .modal-header {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid var(--light);
    }
    .modal-header h2 {
      color: var(--primary);
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      margin: 0;
    }
    .close { font-size: 1.8em; cursor: pointer; color: var(--gray); }
    .close:hover { color: var(--dark); }

    .modal-body {
      color: var(--dark);
      line-height: 1.6;
    }
    .modal-body p {
      margin-bottom: 15px;
      font-weight: 500;
    }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1em;
    }
    .form-group.min-slot-warning-checkbox-group {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    .form-group.min-slot-warning-checkbox-group label {
      margin-bottom: 0; /* Remove bottom margin to align with checkbox */
      margin-left: 10px; /* Space between checkbox and label */
    }
    .form-group.min-slot-warning-checkbox-group input[type="checkbox"] {
      width: auto; /* Allow checkbox to take its natural width */
      padding: 0; /* Remove padding */
      margin: 0; /* Remove margin */
    }
    .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

    /* Settings Lock Styles */
    .settings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--light);
    }

    .settings-lock-controls {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .settings-locked {
      opacity: 0.6;
      pointer-events: none;
    }

    .settings-locked .form-group input,
    .settings-locked .form-group select,
    .settings-locked .form-group textarea {
      background-color: #f5f5f5;
      cursor: not-allowed;
    }

    .lock-notice {
      background-color: #d1ecf1;
      border-left: 4px solid #17a2b8;
      padding: 10px;
      margin-bottom: 20px;
      border-radius: 4px;
      color: #0c5460;
    }

    /* Legitimacy Indicator Styles */
    .header-controls {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .legitimacy-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.9em;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .legitimacy-indicator.verified {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .legitimacy-indicator.bypassed {
      background-color: #fff3cd;
      color: #856404;
      border: 1px solid #ffeaa7;
    }

    .legitimacy-indicator.compromised {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    .legitimacy-indicator i {
      font-size: 0.8em;
    }

    .header-buttons {
      display: flex;
      gap: 10px;
    }

    /* Password Warning Styles */
    .password-warning {
      background-color: #fff3cd;
      border: 1px solid #ffeaa7;
      border-radius: 6px;
      padding: 12px;
      margin-top: 10px;
      color: #856404;
      font-size: 0.9em;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .password-warning i {
      color: #f39c12;
      margin-top: 2px;
      flex-shrink: 0;
    }

    /* Miracle Event Modal Styles */
    .miracle-modal {
      max-width: 800px;
      text-align: center;
    }

    .miracle-choices {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 30px;
    }

    .miracle-choice {
      border: 2px solid #ddd;
      border-radius: 12px;
      padding: 25px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .miracle-choice:hover {
      border-color: #007bff;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.25);
    }

    .choice-icon {
      font-size: 3em;
      margin-bottom: 15px;
    }

    .miracle-choice h3 {
      margin: 15px 0;
      color: #333;
      font-size: 1.4em;
      font-weight: 600;
    }

    .miracle-choice p {
      margin: 0;
      color: #666;
      font-size: 1em;
      line-height: 1.5;
    }

    /* Dark mode for miracle modal */
    body.dark-mode .miracle-choice {
      background: linear-gradient(135deg, #3b4252 0%, #4b5263 100%);
      border-color: #4b5263;
    }

    body.dark-mode .miracle-choice:hover {
      border-color: #5a9bd4;
      box-shadow: 0 6px 20px rgba(90, 155, 212, 0.3);
    }

    body.dark-mode .miracle-choice h3 {
      color: var(--dark);
    }

    body.dark-mode .miracle-choice p {
      color: var(--gray);
    }

    /* Targeted Clear Token Selection Styles */
    .targeted-clear-games {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 15px;
      margin-top: 20px;
    }

    .targeted-clear-game-card {
      border: 2px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #f8f9fa;
    }

    .targeted-clear-game-card:hover {
      border-color: var(--secondary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    }

    .targeted-clear-game-card.selected {
      border-color: var(--success);
      background: #e8f5e8;
    }

    .targeted-clear-game-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .targeted-clear-game-title {
      font-weight: bold;
      font-size: 1.1em;
      color: var(--primary);
    }

    .targeted-clear-handicap-count {
      background: var(--accent);
      color: white;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 0.9em;
      font-weight: bold;
    }

    .targeted-clear-handicaps {
      margin-top: 10px;
    }

    .targeted-clear-handicap {
      background: #e9ecef;
      padding: 6px 10px;
      border-radius: 4px;
      margin: 4px 0;
      font-size: 0.9em;
      border-left: 3px solid var(--accent);
    }

    .targeted-clear-handicap-name {
      font-weight: 500;
      color: #333;
    }

    .targeted-clear-handicap-description {
      color: #666;
      font-size: 0.85em;
      margin-top: 2px;
    }

    /* Dark mode for targeted clear cards */
    body.dark-mode .targeted-clear-game-card {
      background: #3b4252;
      border-color: #4b5263;
    }

    body.dark-mode .targeted-clear-game-card:hover {
      border-color: #5a9bd4;
      box-shadow: 0 4px 12px rgba(90, 155, 212, 0.3);
    }

    body.dark-mode .targeted-clear-game-card.selected {
      border-color: var(--success);
      background: #2d4a2d;
    }

    body.dark-mode .targeted-clear-game-title {
      color: var(--dark);
    }

    body.dark-mode .targeted-clear-handicap {
      background: #4b5263;
    }

    body.dark-mode .targeted-clear-handicap-name {
      color: var(--dark);
    }

    body.dark-mode .targeted-clear-handicap-description {
      color: var(--gray);
    }

    /* Game Selection Modal Styles */
    .game-selection-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .game-selection-card {
      border: 2px solid #ddd;
      border-radius: 8px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #f8f9fa;
      min-height: 120px;
    }

    .game-selection-card:hover {
      border-color: var(--secondary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    }

    .game-selection-card.selected {
      border-color: var(--success);
      background: #e8f5e8;
    }

    .game-selection-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .game-selection-title {
      font-weight: bold;
      font-size: 1em;
      color: var(--primary);
    }



    /* Dark mode for game selection cards */
    body.dark-mode .game-selection-card {
      background: #3b4252;
      border-color: #4b5263;
    }

    body.dark-mode .game-selection-card:hover {
      border-color: #5a9bd4;
      box-shadow: 0 4px 12px rgba(90, 155, 212, 0.3);
    }

    body.dark-mode .game-selection-card.selected {
      border-color: var(--success);
      background: #2d4a2d;
    }

    body.dark-mode .game-selection-title {
      color: var(--dark);
    }





    /* Game Selection Container Styles */
    .game-selection-container {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .game-display {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: #f8f9fa;
      font-size: 0.9em;
      min-height: 20px;
      display: flex;
      align-items: center;
    }

    .game-display.has-game {
      background: #e8f5e8;
      border-color: #28a745;
      color: #155724;
      font-weight: 500;
    }

    .game-display.no-game {
      color: #6c757d;
      font-style: italic;
    }

    /* Dark mode for game selection */
    body.dark-mode .game-display {
      background: #3b4252;
      border-color: #4b5263;
      color: var(--dark);
    }

    body.dark-mode .game-display.has-game {
      background: #2d4a2d;
      border-color: #28a745;
      color: #90ee90;
    }

    body.dark-mode .game-display.no-game {
      color: #6c757d;
    }

    .setting-toggle-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 15px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s;
      margin-bottom: 16px;
      border: 2px solid transparent; /* default border */
      position: relative;
    }

    .setting-toggle-button label {
      flex-grow: 1;
      cursor: pointer;
      margin-bottom: 0; /* Override default form-group label margin */
      font-weight: 500;
      padding-right: 10px; /* Space between label and indicator */
    }

    .setting-toggle-button .hint {
      position: absolute;
      bottom: -20px; /* Adjust as needed */
      left: 0;
      font-size: 0.85em;
      color: var(--gray);
      width: 100%;
      margin-top: 5px; /* Space below the button */
    }

    .setting-toggle-indicator {
      padding: 5px 12px;
      border-radius: 5px;
      font-weight: bold;
      color: white;
      min-width: 50px;
      text-align: center;
      transition: background-color 0.2s;
    }

    /* ON state */
    .setting-toggle-button.is-on {
      background-color: rgba(46, 204, 113, 0.1); /* Faded green */
      border-color: var(--success);
    }
    .setting-toggle-button.is-on:hover {
      background-color: var(--accent); /* Red on hover */
      border-color: var(--accent);
    }
    .setting-toggle-button.is-on:hover .setting-toggle-indicator {
      background-color: #c0392b; /* Darker red */
    }
    .setting-toggle-button.is-on .setting-toggle-indicator {
      background-color: var(--success); /* Solid green */
    }

    /* OFF state */
    .setting-toggle-button.is-off {
      background-color: rgba(231, 76, 60, 0.1); /* Faded red */
      border-color: var(--accent);
    }
    .setting-toggle-button.is-off:hover {
      background-color: var(--success); /* Green on hover */
      border-color: var(--success);
    }
    .setting-toggle-button.is-off:hover .setting-toggle-indicator {
      background-color: #27ae60; /* Darker green */
    }
    .setting-toggle-button.is-off .setting-toggle-indicator {
      background-color: var(--accent); /* Solid red */
    }

    /* Dark Mode Overrides */
    body.dark-mode .setting-toggle-button.is-on {
      background-color: rgba(103, 184, 103, 0.15); /* Dark mode faded green */
      border-color: var(--success);
    }
    body.dark-mode .setting-toggle-button.is-on:hover {
      background-color: var(--accent); /* Dark mode red on hover */
      border-color: var(--accent);
    }
    body.dark-mode .setting-toggle-button.is-off {
      background-color: rgba(224, 108, 117, 0.15); /* Dark mode faded red */
      border-color: var(--accent);
    }
    body.dark-mode .setting-toggle-button.is-off:hover {
      background-color: var(--success); /* Dark mode green on hover */
      border-color: var(--success);
    }
    body.dark-mode .setting-toggle-button.is-off .setting-toggle-indicator {
      background-color: var(--accent); /* Solid red */
    }

    @media (max-width: 992px) {
      .dashboard { grid-template-columns: 1fr; }
      .game-details { grid-template-columns: 1fr; }
    }
    @media (max-width: 576px) {
      .game-header { flex-direction: column; align-items: flex-start; gap: 10px; }
      .controls { flex-direction: column; }
      .controls button { width: 100%; }
      .tabs { flex-direction: column; }
    }

    hr {
      border: none;
      border-top: 1px solid var(--light);
      margin: 20px 0;
    }

    #rulesContent p, #rulesContent ul {
      margin-bottom: 1em; /* Adds space below paragraphs and lists */
    }

    #rulesContent li {
      margin-bottom: 0.5em; /* Adds space between list items */
    }

    /* Legitimacy Indicator Tooltip */
    .legitimacy-indicator {
      position: relative;
      cursor: help;
    }

    .legitimacy-tooltip {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: white;
      color: #2c3e50;
      padding: 20px;
      border-radius: 12px;
      font-size: 0.9em;
      line-height: 1.5;
      max-width: 500px;
      min-width: 400px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      border: 1px solid #e0e0e0;
      z-index: 10000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      margin-top: 12px;
      white-space: normal;
      text-align: left;
    }

    .legitimacy-tooltip.show {
      opacity: 1;
    }

    .legitimacy-tooltip::after {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-bottom-color: white;
    }

    .legitimacy-tooltip::before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 9px solid transparent;
      border-bottom-color: #e0e0e0;
      margin-bottom: 1px;
    }

    /* Dark mode for legitimacy tooltip */
    body.dark-mode .legitimacy-tooltip {
      background: #3b4252;
      color: #e5e5e5;
      border-color: #4b5263;
    }

    body.dark-mode .legitimacy-tooltip::after {
      border-bottom-color: #3b4252;
    }

    body.dark-mode .legitimacy-tooltip::before {
      border-bottom-color: #4b5263;
    }

    /* Onboarding Modal Styles */
    .onboarding-section {
      margin-bottom: 30px;
    }

    .onboarding-section h3 {
      color: #2c3e50;
      margin-bottom: 15px;
      font-size: 1.2em;
    }

    .onboarding-section p {
      margin-bottom: 15px;
      line-height: 1.6;
    }

    .onboarding-section ol {
      margin-left: 20px;
    }

    .onboarding-section li {
      margin-bottom: 8px;
      line-height: 1.5;
    }

    .onboarding-demo {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 20px;
      margin: 20px 0;
    }

    .demo-challenge-interface {
      margin-bottom: 25px;
    }

    .demo-slot {
      background: white;
      border: 1px solid #dee2e6;
      border-radius: 6px;
      margin-bottom: 15px;
      padding: 15px;
    }

    .demo-slot-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e9ecef;
    }

    .demo-slot-title {
      font-weight: bold;
      color: #2c3e50;
    }

    .demo-slot-status {
      font-size: 0.9em;
      padding: 4px 8px;
      border-radius: 4px;
      background: #e9ecef;
      color: #6c757d;
    }

    .demo-slot-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .demo-game-selection {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .demo-game-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .demo-game-name {
      font-weight: bold;
      color: #2c3e50;
    }

    .demo-timer {
      font-family: monospace;
      background: #f8f9fa;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.9em;
    }

    .demo-handicaps {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 10px;
    }

    .demo-handicap {
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 0.9em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .demo-handicap.temporary {
      background: #e3f2fd;
      border-left: 3px solid #5a9bd4;
    }

    .demo-handicap.permanent {
      background: #f8f9fa;
      border-left: 3px solid #e06c75;
    }

    .demo-handicap.completed {
      background: #d4edda;
      border-color: #c3e6cb;
      color: #155724;
    }

    .demo-handicap-rarity {
      font-size: 0.7em;
      font-weight: 500;
      padding: 1px 4px;
      border-radius: 3px;
      background: #e9ecef;
      color: #6c757d;
    }

    .demo-actions {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .demo-controls {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 25px;
    }

    .demo-control-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .demo-tokens {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
    }

    .demo-token-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .demo-token-label {
      font-weight: bold;
      color: #2c3e50;
    }

    .demo-token-count {
      background: #007bff;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
      min-width: 20px;
      text-align: center;
    }

    .demo-btn {
      width: 100%;
      text-align: left;
      padding: 12px;
      border: none;
      border-radius: 6px;
      font-size: 0.9em;
      font-weight: 500;
      cursor: not-allowed;
      opacity: 0.7;
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: flex-start;
      transition: all 0.2s;
    }

    .demo-btn-primary {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      border: 1px solid #654321;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .demo-btn-success {
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%);
      color: white;
      border: 1px solid #1b3009;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .demo-btn-secondary {
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%);
      color: white;
      border: 1px solid #4a4a4a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .demo-btn-warning {
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
      color: #2c1810;
      border: 1px solid #8b6914;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      font-weight: 600;
    }

    .demo-btn-danger {
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
      color: white;
      border: 1px solid #660000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .demo-btn-info {
      background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
      color: white;
      border: 1px solid #138496;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .demo-btn-purple {
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%);
      color: white;
      border: 1px solid #2e0050;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .demo-explanation {
      font-size: 0.8em;
      color: #6c757d;
      font-style: italic;
      margin-top: 4px;
      margin-left: 4px;
    }

    /* Dark mode for onboarding */
    body.dark-mode .onboarding-section h3 {
      color: #e5e5e5;
    }

    body.dark-mode .onboarding-demo {
      background: #3b4252;
      border-color: #4b5263;
    }

    body.dark-mode .demo-slot {
      background: #4b5263;
      border-color: #5a6470;
    }

    body.dark-mode .demo-slot-title {
      color: #e5e5e5;
    }

    body.dark-mode .demo-slot-status {
      background: #5a6470;
      color: #b0b8c0;
    }

    body.dark-mode .demo-game-name {
      color: #e5e5e5;
    }

    body.dark-mode .demo-timer {
      background: #5a6470;
      color: #e5e5e5;
    }

    body.dark-mode .demo-token-label {
      color: #e5e5e5;
    }

    body.dark-mode .demo-explanation {
      color: #b0b8c0;
    }

    body.dark-mode .demo-handicap {
      background: #3b4252;
      border-color: #4b5263;
      color: #e5e5e5;
    }

    body.dark-mode .demo-handicap.temporary {
      background: #2c3e50;
      border-left-color: #5a9bd4;
    }

    body.dark-mode .demo-handicap.permanent {
      background: #3b4252;
      border-left-color: #e06c75;
    }

    body.dark-mode .demo-handicap.completed {
      background: #2d4a2d;
      border-color: #c3e6cb;
      color: #d4edda;
    }

    body.dark-mode .demo-handicap-rarity {
      background: #4b5263;
      color: #e5e5e5;
    }

    body.dark-mode .demo-timer span {
      color: #b0b8c0 !important;
    }

    /* Dark mode demo buttons - forge theme */
    body.dark-mode .demo-btn-primary {
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%);
      border-color: #4a2c17;
    }

    body.dark-mode .demo-btn-success {
      background: linear-gradient(135deg, #1a3009 0%, #2d5a2d 100%);
      border-color: #0f1f05;
    }

    body.dark-mode .demo-btn-secondary {
      background: linear-gradient(135deg, #4a4a4a 0%, #696969 100%);
      border-color: #2a2a2a;
    }

    body.dark-mode .demo-btn-warning {
      background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%);
      color: #1a0f0a;
      border-color: #6b4f0a;
    }

    body.dark-mode .demo-btn-danger {
      background: linear-gradient(135deg, #660000 0%, #a00000 100%);
      border-color: #4d0000;
    }

    body.dark-mode .demo-btn-info {
      background: linear-gradient(135deg, #0d7377 0%, #17a2b8 100%);
      border-color: #0a5d61;
    }

    body.dark-mode .demo-btn-purple {
      background: linear-gradient(135deg, #2e0050 0%, #4a0082 100%);
      border-color: #1a0030;
    }

    /* Forge-themed button colors for database tab */
    #database-tab .btn-primary { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
      color: white; 
      border: 1px solid #654321;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #database-tab .btn-primary:hover { 
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #database-tab .btn-danger { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
      color: white; 
      border: 1px solid #660000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #database-tab .btn-danger:hover { 
      background: linear-gradient(135deg, #a00000 0%, #ff1744 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #database-tab .btn-success { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
      color: white; 
      border: 1px solid #1b3009;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #database-tab .btn-success:hover { 
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #database-tab .btn-warning { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
      color: #2c1810; 
      border: 1px solid #8b6914;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      font-weight: 600;
    }
    #database-tab .btn-warning:hover { 
      background: linear-gradient(135deg, #daa520 0%, #ffff00 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #database-tab .btn-purple { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
      color: white; 
      border: 1px solid #2e0050;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #database-tab .btn-purple:hover { 
      background: linear-gradient(135deg, #6a0dad 0%, #a855f7 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #database-tab .btn-secondary { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
      color: white; 
      border: 1px solid #4a4a4a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #database-tab .btn-secondary:hover { 
      background: linear-gradient(135deg, #808080 0%, #c0c0c0 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #database-tab .btn-gray { 
      background: linear-gradient(135deg, #708090 0%, #b0c4de 100%); 
      color: #2c1810; 
      cursor: default; 
      border: 1px solid #556b7a;
    }

    /* Dark mode database tab buttons - forge theme */
    body.dark-mode #database-tab .btn-primary { 
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%); 
      border-color: #4a2c17;
    }
    body.dark-mode #database-tab .btn-primary:hover { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
    }
    
    body.dark-mode #database-tab .btn-danger { 
      background: linear-gradient(135deg, #660000 0%, #a00000 100%); 
      border-color: #4d0000;
    }
    body.dark-mode #database-tab .btn-danger:hover { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
    }
    
    body.dark-mode #database-tab .btn-success { 
      background: linear-gradient(135deg, #1a3009 0%, #2d5a2d 100%); 
      border-color: #0f1f05;
    }
    body.dark-mode #database-tab .btn-success:hover { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
    }
    
    body.dark-mode #database-tab .btn-warning { 
      background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%); 
      color: #1a0f0a; 
      border-color: #6b4f0a;
    }
    body.dark-mode #database-tab .btn-warning:hover { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
    }
    
    body.dark-mode #database-tab .btn-purple { 
      background: linear-gradient(135deg, #2e0050 0%, #4a0082 100%); 
      border-color: #1a0030;
    }
    body.dark-mode #database-tab .btn-purple:hover { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
    }
    
    body.dark-mode #database-tab .btn-secondary { 
      background: linear-gradient(135deg, #4a4a4a 0%, #696969 100%); 
      border-color: #2a2a2a;
    }
    body.dark-mode #database-tab .btn-secondary:hover { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
    }
    
    body.dark-mode #database-tab .btn-gray { 
      background: linear-gradient(135deg, #556b7a 0%, #708090 100%); 
      color: #e5e5e5; 
      border-color: #3a4a5a;
    }

    /* Hide mobile elements on desktop */
    .mobile-dashboard-toggles,
    .mobile-dashboard-panel {
      display: none !important;
    }

    /* Mobile-specific fixes */
    @media screen and (max-width: 768px) {
      /* Fix 1: Center database tab buttons and prevent overflow */
      .header-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
      }
      
      .header-controls button {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
      }
      
      /* Fix 2: Fix overlapping toggle descriptions in settings */
      .setting-toggle-button {
        margin-bottom: 40px !important; /* Increase spacing */
        position: relative !important;
      }
      
      .setting-toggle-button .hint {
        position: static !important; /* Remove absolute positioning */
        margin-top: 10px !important;
        font-size: 0.8em !important;
        line-height: 1.3 !important;
        padding: 8px !important;
        background: rgba(0,0,0,0.05) !important;
        border-radius: 4px !important;
      }
      
      body.dark-mode .setting-toggle-button .hint {
        background: rgba(255,255,255,0.05) !important;
      }
      
      /* Fix 3: Center dashboard elements */
      .dashboard {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
      }
      
      .games-container,
      .panel {
        margin: 0 auto !important;
        max-width: 100% !important;
      }
      
      /* Fix 4: Center header, footer, and tabs */
      header,
      footer {
        margin: 0 auto !important;
        text-align: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
      }
      
      .tabs {
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto 20px auto !important;
        max-width: 100% !important;
        overflow-x: auto !important;
      }
      
      .tab {
        min-width: fit-content !important;
        flex-shrink: 0 !important;
        text-align: center !important;
      }
      
      /* Fix 5: Prevent zoom on tab switching */
      .tab-content {
        transform: none !important;
        zoom: 1 !important;
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
      }
      
      /* Additional mobile optimizations */
      .container {
        padding: 10px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
      }
      
      /* Make modals mobile-friendly */
      .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
        padding: 20px !important;
      }
      
      /* Mobile-friendly form elements */
      .form-actions {
        flex-direction: column !important;
        gap: 10px !important;
      }
      
      .form-actions button {
        width: 100% !important;
      }
      
      /* Fix 5: Scale challenge tab to match other tabs */
      #challenge-tab {
        zoom: 0.8 !important;
        transform-origin: top left !important;
        margin-left: 10px !important;
      }
      
      /* Compensate for zoom by adjusting card slots */
      #challenge-tab .slot {
        min-height: 180px !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        max-width: 95% !important;
      }
      
      #challenge-tab .slot h3 {
        font-size: 1.2em !important;
        margin-bottom: 10px !important;
      }
      
      #challenge-tab .slot .game-display {
        font-size: 1.1em !important;
        margin-bottom: 8px !important;
      }
      
      #challenge-tab .slot .handicap-item {
        padding: 8px 12px !important;
        margin-bottom: 6px !important;
        font-size: 0.95em !important;
      }
      
      #challenge-tab .slot button {
        padding: 8px 16px !important;
        font-size: 0.9em !important;
        margin: 4px !important;
      }
      
      /* Adjust dashboard panels for the new scale */
      #challenge-tab .dashboard {
        padding: 15px !important;
        gap: 15px !important;
      }
      
      #challenge-tab .panel {
        padding: 15px !important;
      }
      
      /* Prevent zooming on all tabs */
      .tab-content {
        touch-action: manipulation !important;
        user-select: none !important;
      }
      
      /* Disable zoom gestures */
      html {
        touch-action: manipulation !important;
        -ms-touch-action: manipulation !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
      }
      
      /* Prevent double-tap zoom */
      * {
        touch-action: manipulation !important;
      }
      
      /* Hide only the sidebar dashboard on mobile, keep games visible */
      #challenge-tab .sidebar {
        display: none !important;
      }
      
      /* Ensure games container takes full width on mobile */
      #challenge-tab .games-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      
      /* Make sure the main dashboard container doesn't hide games */
      #challenge-tab .dashboard {
        display: flex !important;
        flex-direction: column !important;
      }
      
      /* Fix game card elements positioning on mobile */
      .slot {
        padding: 12px !important;
        overflow: hidden !important;
      }
      
      /* Fix timer widget layout on mobile */
      .timer-widget {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      
      /* Timer display gets its own row */
      .timer-widget .timer-display {
        width: 100% !important;
        text-align: center !important;
        order: 1 !important;
      }
      
      /* Buttons container - horizontal layout */
      .timer-widget .timer-btn {
        flex: 1 !important;
        min-height: 40px !important;
        font-size: 0.9em !important;
        padding: 8px 12px !important;
        margin: 0 2px !important;
        order: 2 !important;
      }
      
      /* Create a flex container for buttons */
      .timer-widget {
        flex-wrap: wrap !important;
      }
      
      .timer-widget .timer-btn:nth-of-type(1),
      .timer-widget .timer-btn:nth-of-type(2),
      .timer-widget .timer-btn:nth-of-type(3) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: calc(33.33% - 4px) !important;
        max-width: calc(33.33% - 4px) !important;
      }
      
      /* Duration div gets its own row and full width */
      .timer-widget > div:last-child {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 8px !important;
        display: block !important;
      }
      
      /* Duration input styling */
      .timer-widget input[type="number"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px !important;
        margin-top: 4px !important;
      }
      
      /* Duration label */
      .timer-widget label {
        display: block !important;
        width: 100% !important;
        font-size: 0.9em !important;
        margin-bottom: 4px !important;
      }
      
      /* Fix timer display overflow */
      .slot .timer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
      }
      
      /* Ensure all slot content stays within bounds */
      .slot * {
        max-width: 100% !important;
        box-sizing: border-box !important;
      }
      
      /* Show and position mobile elements on mobile only */
      .mobile-dashboard-toggles {
        display: flex !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 15px !important;
        z-index: 1000 !important;
        flex-direction: column !important;
        gap: 8px !important;
      }
      
      .mobile-dashboard-panel {
        display: none !important; /* Hidden by default, shown with .show class */
      }
      
      .mobile-toggle-btn {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%) !important;
        border: 2px solid #654321 !important;
        color: white !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        transition: all 0.2s ease !important;
      }
      
      .mobile-toggle-btn:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
      }
      
      .mobile-toggle-btn.active {
        background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%) !important;
        border-color: #1b3009 !important;
      }
      
      /* Floating dashboard panels */
      .mobile-dashboard-panel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        background: linear-gradient(135deg, #2d1810 0%, #4a2c1a 50%, #2d1810 100%) !important;
        border: 3px solid #daa520 !important;
        border-radius: 20px !important;
        padding: 20px !important;
        max-width: 90vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 1001 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
        display: none !important;
        color: #f5f5f5 !important;
      }
      
      .mobile-dashboard-panel.show {
        display: block !important;
      }
      
      .mobile-dashboard-panel h3 {
        margin-top: 0 !important;
        background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        font-size: 1.4em !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        border: none !important;
        padding: 0 !important;
      }
      
      /* Close button for panels */
      .mobile-panel-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #4a0000 0%, #660000 100%) !important;
        color: #ffd700 !important;
        border: 2px solid #daa520 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        transition: all 0.2s ease !important;
      }
      
      .mobile-panel-close:hover {
        background: linear-gradient(135deg, #660000 0%, #4a0000 100%) !important;
        transform: scale(1.1) !important;
      }
      
      /* Dark mode for floating elements */
      body.dark-mode .mobile-dashboard-panel {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d1810 50%, #1a1a1a 100%) !important;
        border-color: #daa520 !important;
        color: #f5f5f5 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
      }
      
      body.dark-mode .mobile-dashboard-panel h3 {
        background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
      }
      
      /* Force light text color for all mobile panel content */
      .mobile-dashboard-panel .stat-item,
      .mobile-dashboard-panel .stat-item span,
      .mobile-dashboard-panel p,
      .mobile-dashboard-panel div {
        color: #f5f5f5 !important;
      }
      
      .mobile-dashboard-panel .stat-item span:first-child {
        color: #ffd700 !important;
      }
      
      /* Fix mobile action button text alignment */
      .mobile-dashboard-panel .action-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
      }
      
      .mobile-dashboard-panel .action-button span {
        display: inline !important;
        vertical-align: baseline !important;
      }
    }
    
    /* Extra small mobile devices */
    @media screen and (max-width: 480px) {
      .header-controls button {
        font-size: 0.9em !important;
        padding: 10px 15px !important;
      }
      
      .tab {
        font-size: 0.9em !important;
        padding: 12px 15px !important;
      }
      
      .setting-toggle-button {
        margin-bottom: 50px !important;
      }
    }

    /* Forge-themed button colors for modals */
    .modal .btn-primary { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
      color: white; 
      border: 1px solid #654321;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .modal .btn-primary:hover { 
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .modal .btn-danger { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
      color: white; 
      border: 1px solid #660000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .modal .btn-danger:hover { 
      background: linear-gradient(135deg, #a00000 0%, #ff1744 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .modal .btn-success { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
      color: white; 
      border: 1px solid #1b3009;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .modal .btn-success:hover { 
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .modal .btn-warning { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
      color: #2c1810; 
      border: 1px solid #8b6914;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      font-weight: 600;
    }
    .modal .btn-warning:hover { 
      background: linear-gradient(135deg, #daa520 0%, #ffff00 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .modal .btn-purple { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
      color: white; 
      border: 1px solid #2e0050;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .modal .btn-purple:hover { 
      background: linear-gradient(135deg, #6a0dad 0%, #a855f7 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .modal .btn-secondary { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
      color: white; 
      border: 1px solid #4a4a4a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .modal .btn-secondary:hover { 
      background: linear-gradient(135deg, #808080 0%, #c0c0c0 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .modal .btn-gray { 
      background: linear-gradient(135deg, #708090 0%, #b0c4de 100%); 
      color: #2c1810; 
      cursor: default; 
      border: 1px solid #556b7a;
    }

    /* Dark mode modal buttons - forge theme */
    body.dark-mode .modal .btn-primary { 
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%); 
      border-color: #4a2c17;
    }
    body.dark-mode .modal .btn-primary:hover { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
    }
    
    body.dark-mode .modal .btn-danger { 
      background: linear-gradient(135deg, #660000 0%, #a00000 100%); 
      border-color: #4d0000;
    }
    body.dark-mode .modal .btn-danger:hover { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
    }
    
    body.dark-mode .modal .btn-success { 
      background: linear-gradient(135deg, #1a3009 0%, #2d5a2d 100%); 
      border-color: #0f1f05;
    }
    body.dark-mode .modal .btn-success:hover { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
    }
    
    body.dark-mode .modal .btn-warning { 
      background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%); 
      color: #1a0f0a; 
      border-color: #6b4f0a;
    }
    body.dark-mode .modal .btn-warning:hover { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
    }
    
    body.dark-mode .modal .btn-purple { 
      background: linear-gradient(135deg, #2e0050 0%, #4a0082 100%); 
      border-color: #1a0030;
    }
    body.dark-mode .modal .btn-purple:hover { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
    }
    
    body.dark-mode .modal .btn-secondary { 
      background: linear-gradient(135deg, #4a4a4a 0%, #696969 100%); 
      border-color: #2a2a2a;
    }
    body.dark-mode .modal .btn-secondary:hover { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
    }
    
    body.dark-mode .modal .btn-gray { 
      background: linear-gradient(135deg, #556b7a 0%, #708090 100%); 
      color: #e5e5e5; 
      border-color: #3a4a5a;
    }

    /* Forge-themed button colors for rules tab */
    #rules-tab .btn-primary { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
      color: white; 
      border: 1px solid #654321;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #rules-tab .btn-primary:hover { 
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #rules-tab .btn-danger { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
      color: white; 
      border: 1px solid #660000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #rules-tab .btn-danger:hover { 
      background: linear-gradient(135deg, #a00000 0%, #ff1744 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #rules-tab .btn-success { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
      color: white; 
      border: 1px solid #1b3009;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #rules-tab .btn-success:hover { 
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #rules-tab .btn-warning { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
      color: #2c1810; 
      border: 1px solid #8b6914;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      font-weight: 600;
    }
    #rules-tab .btn-warning:hover { 
      background: linear-gradient(135deg, #daa520 0%, #ffff00 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #rules-tab .btn-purple { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
      color: white; 
      border: 1px solid #2e0050;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #rules-tab .btn-purple:hover { 
      background: linear-gradient(135deg, #6a0dad 0%, #a855f7 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #rules-tab .btn-secondary { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
      color: white; 
      border: 1px solid #4a4a4a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    #rules-tab .btn-secondary:hover { 
      background: linear-gradient(135deg, #808080 0%, #c0c0c0 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #rules-tab .btn-gray { 
      background: linear-gradient(135deg, #708090 0%, #b0c4de 100%); 
      color: #2c1810; 
      cursor: default; 
      border: 1px solid #556b7a;
    }

    /* Rules content styling - forge theme */
    #rulesContent {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 25px;
      margin: 20px 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #rulesContent::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
    }
    
    #rulesContent h3 {
      color: #8b4513;
      font-size: 1.4em;
      margin: 25px 0 15px 0;
      padding-bottom: 8px;
      border-bottom: 2px solid #daa520;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    #rulesContent h3:first-child {
      margin-top: 0;
    }
    
    #rulesContent p {
      line-height: 1.7;
      margin-bottom: 15px;
      color: #2c1810;
      text-align: justify;
    }
    
    #rulesContent hr {
      border: none;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, #daa520 50%, transparent 100%);
      margin: 25px 0;
    }
    
    #rulesContent strong {
      color: #8b4513;
      font-weight: 700;
    }
    
    /* Dark mode rules content */
    body.dark-mode #rulesContent {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #rulesContent h3 {
      color: #daa520;
      border-bottom-color: #8b4513;
    }
    
    body.dark-mode #rulesContent p {
      color: #f5f5dc;
    }
    
    body.dark-mode #rulesContent strong {
      color: #daa520;
    }
    
    body.dark-mode #rulesContent hr {
      background: linear-gradient(90deg, transparent 0%, #8b4513 50%, transparent 100%);
    }

    /* Table of Contents Modal Styling */
    .toc-content {
      max-height: 60vh;
      overflow-y: auto;
      padding: 10px 0;
    }
    
    .toc-section {
      margin-bottom: 8px;
    }
    
    .toc-section a {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      text-decoration: none;
      color: #2c1810;
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 1px solid #daa520;
      border-radius: 8px;
      transition: all 0.3s ease;
      font-weight: 500;
    }
    
    .toc-section a:hover {
      background: linear-gradient(135deg, #daa520 0%, #ffd700 100%);
      color: #2c1810;
      transform: translateX(5px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    .toc-section a i {
      margin-right: 12px;
      width: 20px;
      text-align: center;
      color: #8b4513;
    }
    
    .toc-section a:hover i {
      color: #2c1810;
    }
    
    /* Dark mode table of contents */
    body.dark-mode .toc-section a {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode .toc-section a:hover {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 100%);
      color: #2c1810;
    }
    
    body.dark-mode .toc-section a i {
      color: #daa520;
    }
    
    body.dark-mode .toc-section a:hover i {
      color: #2c1810;
    }

    /* Floating Table of Contents Toggle */
    .toc-floating-toggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
    }
    
    .toc-floating-toggle:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    }
    
    .toc-floating-toggle.active {
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
      border-color: #8b6914;
      transform: scale(1.05);
    }
    
    .toc-floating-toggle.active i {
      color: #2c1810;
    }
    
    .toc-floating-toggle i {
      color: white;
      font-size: 24px;
    }
    
    /* Floating Table of Contents Panel */
    .toc-floating-panel {
      position: fixed;
      bottom: 90px;
      right: 20px;
      width: 300px;
      max-height: 70vh;
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
      z-index: 1001;
      display: none;
      overflow: hidden;
    }
    
    .toc-panel-header {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .toc-panel-header h3 {
      margin: 0;
      font-size: 1.2em;
      font-weight: 700;
    }
    
    .toc-close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      padding: 5px;
      border-radius: 4px;
      transition: background-color 0.2s ease;
    }
    
    .toc-close-btn:hover {
      background-color: rgba(255,255,255,0.2);
    }
    
    .toc-panel-content {
      max-height: calc(70vh - 60px);
      overflow-y: auto;
      padding: 10px;
    }
    
    .toc-panel-content .toc-section {
      margin-bottom: 6px;
    }
    
    .toc-panel-content .toc-section a {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      text-decoration: none;
      color: #2c1810;
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 1px solid #daa520;
      border-radius: 6px;
      transition: all 0.3s ease;
      font-weight: 500;
      font-size: 0.9em;
    }
    
    .toc-panel-content .toc-section a:hover {
      background: linear-gradient(135deg, #daa520 0%, #ffd700 100%);
      color: #2c1810;
      transform: translateX(3px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    
    .toc-panel-content .toc-section a i {
      margin-right: 10px;
      width: 16px;
      text-align: center;
      color: #8b4513;
    }
    
    .toc-panel-content .toc-section a:hover i {
      color: #2c1810;
    }
    
    /* Dark mode floating TOC */
    body.dark-mode .toc-floating-toggle {
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%);
      border-color: #4a2c17;
    }
    
    body.dark-mode .toc-floating-toggle:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
    }
    
    body.dark-mode .toc-floating-toggle.active {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 100%);
      border-color: #654321;
    }
    
    body.dark-mode .toc-floating-toggle.active i {
      color: #2c1810;
    }
    
    body.dark-mode .toc-floating-panel {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
    }
    
    body.dark-mode .toc-panel-content .toc-section a {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode .toc-panel-content .toc-section a:hover {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 100%);
      color: #2c1810;
    }
    
    body.dark-mode .toc-panel-content .toc-section a i {
      color: #daa520;
    }
    
    body.dark-mode .toc-panel-content .toc-section a:hover i {
      color: #2c1810;
    }

    /* Settings Content Styling - Forge Theme */
    #settingsContent {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 25px;
      margin: 20px 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #settingsContent::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
    }
    
    #settingsContent h3 {
      color: #8b4513;
      font-size: 1.4em;
      margin: 25px 0 15px 0;
      padding-bottom: 8px;
      border-bottom: 2px solid #daa520;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    #settingsContent h3:first-child {
      margin-top: 0;
    }
    
    #settingsContent p {
      line-height: 1.7;
      margin-bottom: 15px;
      color: #2c1810;
      text-align: justify;
    }
    
    #settingsContent hr {
      border: none;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, #daa520 50%, transparent 100%);
      margin: 25px 0;
    }
    
    #settingsContent strong {
      color: #8b4513;
      font-weight: 700;
    }
    
    /* Settings Form Styling */
    #settingsContent .form-group {
      background: rgba(255,255,255,0.7);
      border: 1px solid #daa520;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    #settingsContent .form-group label {
      color: #8b4513;
      font-weight: 600;
      font-size: 1.1em;
      margin-bottom: 8px;
      display: block;
    }
    
    #settingsContent .form-group input[type="text"],
    #settingsContent .form-group input[type="number"] {
      width: 100%;
      padding: 12px 15px;
      border: 2px solid #daa520;
      border-radius: 6px;
      background: #f8f6f0;
      color: #2c1810;
      font-size: 1em;
      transition: all 0.3s ease;
    }
    
    #settingsContent .form-group input[type="text"]:focus,
    #settingsContent .form-group input[type="number"]:focus {
      outline: none;
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff;
    }
    
    #settingsContent .hint {
      color: #8b4513;
      font-style: italic;
      font-size: 0.9em;
      margin-top: 8px;
      margin-bottom: 0;
    }
    
    /* Lock Notice Styling */
    #settingsContent .lock-notice {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
      border: 2px solid #e74c3c;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      color: white;
      font-weight: 600;
      text-align: center;
    }
    
    /* Warning Notice Styling */
    #settingsContent div[style*="background-color: #fff3cd"] {
      background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
      border: 2px solid #f39c12 !important;
      border-radius: 8px !important;
      color: #8b4513 !important;
      font-weight: 600;
    }
    
    /* Dark mode settings content */
    body.dark-mode #settingsContent {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #settingsContent h3 {
      color: #daa520;
      border-bottom-color: #8b4513;
    }
    
    body.dark-mode #settingsContent p {
      color: #f5f5dc;
    }
    
    body.dark-mode #settingsContent strong {
      color: #daa520;
    }
    
    body.dark-mode #settingsContent hr {
      background: linear-gradient(90deg, transparent 0%, #8b4513 50%, transparent 100%);
    }
    
    body.dark-mode #settingsContent .form-group {
      background: rgba(45, 24, 16, 0.7);
      border-color: #8b4513;
    }
    
    body.dark-mode #settingsContent .form-group label {
      color: #daa520;
    }
    
    body.dark-mode #settingsContent .form-group input[type="text"],
    body.dark-mode #settingsContent .form-group input[type="number"] {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #settingsContent .form-group input[type="text"]:focus,
    body.dark-mode #settingsContent .form-group input[type="number"]:focus {
      border-color: #daa520;
      box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
      background: #2d1810;
    }
    
    body.dark-mode #settingsContent .hint {
      color: #daa520;
    }
    
    body.dark-mode #settingsContent .lock-notice {
      background: linear-gradient(135deg, #8b0000 0%, #a00000 100%);
      border-color: #660000;
    }
    
    body.dark-mode #settingsContent div[style*="background-color: #fff3cd"] {
      background: linear-gradient(135deg, #3d2815 0%, #4a2c17 100%) !important;
      border-color: #8b4513 !important;
      color: #daa520 !important;
    }

    /* Notes Tab Styling - Forge Theme */
    #notes-tab .panel {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #notes-tab .panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
    }
    
    #notes-tab .section-header h2 {
      color: #8b4513;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    #notes-tab .form-group {
      background: rgba(255,255,255,0.7);
      border: 1px solid #daa520;
      border-radius: 8px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    #notes-tab #challengeNotes {
      width: 100%;
      padding: 15px;
      border: 2px solid #daa520;
      border-radius: 8px;
      background: #f8f6f0;
      color: #2c1810;
      font-size: 1em;
      line-height: 1.6;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      resize: vertical;
      min-height: 300px;
      transition: all 0.3s ease;
    }
    
    #notes-tab #challengeNotes:focus {
      outline: none;
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff;
    }
    
    #notes-tab #challengeNotes::placeholder {
      color: #8b4513;
      font-style: italic;
    }
    
    #notes-tab .lock-notice {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
      border: 2px solid #e74c3c;
      border-radius: 8px;
      padding: 15px;
      margin: 20px 0;
      color: white;
      font-weight: 600;
      text-align: center;
    }
    
    /* Challenge Creator Modal Styling */
    .challenge-creator-modal .modal-content {
      max-width: 800px;
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
    }
    
    .challenge-creator-modal .modal-header {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      border-bottom: 2px solid #daa520;
    }
    
    .challenge-creator-modal .modal-header h2 {
      color: white;
      font-weight: 700;
    }
    
    .challenge-creator-modal .form-group {
      background: rgba(255,255,255,0.7);
      border: 1px solid #daa520;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }
    
    .challenge-creator-modal .form-group label {
      color: #8b4513;
      font-weight: 600;
      font-size: 1.1em;
      margin-bottom: 8px;
      display: block;
    }
    
    .challenge-creator-modal .form-group input,
    .challenge-creator-modal .form-group textarea {
      width: 100%;
      padding: 12px 15px;
      border: 2px solid #daa520;
      border-radius: 6px;
      background: #f8f6f0;
      color: #2c1810;
      font-size: 1em;
      transition: all 0.3s ease;
    }
    
    .challenge-creator-modal .form-group input:focus,
    .challenge-creator-modal .form-group textarea:focus {
      outline: none;
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff;
    }
    
    .challenge-creator-modal .form-group textarea {
      min-height: 120px;
      resize: vertical;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
    }
    
    .challenge-creator-modal .hint {
      color: #8b4513;
      font-style: italic;
      font-size: 0.9em;
      margin-top: 8px;
      margin-bottom: 0;
    }
    
    .challenge-creator-modal h3 {
      color: #8b4513;
      font-size: 1.2em;
      font-weight: 700;
      margin: 20px 0 8px 0;
      padding-bottom: 5px;
      border-bottom: 2px solid #daa520;
    }
    
    .challenge-creator-modal input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #8b4513;
    }
    
    .challenge-creator-modal input[type="checkbox"] + label {
      font-size: 0.9em;
      color: #8b4513;
      cursor: pointer;
    }
    
    /* Dark mode notes tab */
    body.dark-mode #notes-tab .panel {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
    }
    
    body.dark-mode #notes-tab .section-header h2 {
      color: #daa520;
    }
    
    body.dark-mode #notes-tab .form-group {
      background: rgba(45, 24, 16, 0.7);
      border-color: #8b4513;
    }
    
    body.dark-mode #notes-tab #challengeNotes {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #notes-tab #challengeNotes:focus {
      border-color: #daa520;
      box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
      background: #2d1810;
    }
    
    body.dark-mode #notes-tab #challengeNotes::placeholder {
      color: #daa520;
    }
    
    body.dark-mode #notes-tab .lock-notice {
      background: linear-gradient(135deg, #8b0000 0%, #a00000 100%);
      border-color: #660000;
    }
    
    /* Notes Tab Button Styling - Forge Theme */
    #notes-tab .btn-primary,
    #notes-tab .btn-success {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #notes-tab .btn-primary:hover,
    #notes-tab .btn-success:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #notes-tab .btn-primary:active,
    #notes-tab .btn-success:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    #notes-tab .btn-primary i,
    #notes-tab .btn-success i {
      margin-right: 8px;
      color: #ffd700;
    }
    
    /* Dark mode notes tab buttons */
    body.dark-mode #notes-tab .btn-primary,
    body.dark-mode #notes-tab .btn-success {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #notes-tab .btn-primary:hover,
    body.dark-mode #notes-tab .btn-success:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    body.dark-mode #notes-tab .btn-primary i,
    body.dark-mode #notes-tab .btn-success i {
      color: #ffd700;
    }
    
    /* Database Tab Styling - Forge Theme */
    #database-tab .panel {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #database-tab .panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
      z-index: -1;
    }
    
    #database-tab .section-header h2 {
      color: #8b4513;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    #database-tab .header-controls .btn-primary,
    #database-tab .header-controls .btn-success,
    #database-tab .header-controls .btn-danger {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #database-tab .header-controls .btn-primary:hover,
    #database-tab .header-controls .btn-success:hover,
    #database-tab .header-controls .btn-danger:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #database-tab .header-controls .btn-primary i,
    #database-tab .header-controls .btn-success i,
    #database-tab .header-controls .btn-danger i {
      margin-right: 8px;
      color: #ffd700;
    }
    
    #database-tab #databaseSearchInput {
      background: #f8f6f0;
      border: 2px solid #daa520;
      color: #2c1810;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    #database-tab #databaseSearchInput:focus {
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff8dc;
    }
    
    #database-tab #databaseSearchInput::placeholder {
      color: #8b4513;
      font-style: italic;
    }
    
    /* Database cards styling */
    #database-tab .database-cards {
      position: relative;
      z-index: 1;
    }
    
    /* Dark mode database tab */
    body.dark-mode #database-tab .panel {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #database-tab .section-header h2 {
      color: #daa520;
    }
    
    body.dark-mode #database-tab .header-controls .btn-primary,
    body.dark-mode #database-tab .header-controls .btn-success,
    body.dark-mode #database-tab .header-controls .btn-danger {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #database-tab .header-controls .btn-primary:hover,
    body.dark-mode #database-tab .header-controls .btn-success:hover,
    body.dark-mode #database-tab .header-controls .btn-danger:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    body.dark-mode #database-tab .header-controls .btn-primary i,
    body.dark-mode #database-tab .header-controls .btn-success i,
    body.dark-mode #database-tab .header-controls .btn-danger i {
      color: #ffd700;
    }
    
    body.dark-mode #database-tab #databaseSearchInput {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #database-tab #databaseSearchInput:focus {
      border-color: #daa520;
      box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
      background: #2d1810;
    }
    
    body.dark-mode #database-tab #databaseSearchInput::placeholder {
      color: #daa520;
    }
    
    /* Add Handicap Modal Styling - Forge Theme */
    #addHandicapModal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #addHandicapModal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    #addHandicapModal .modal-header h2 {
      color: #8b4513;
      font-weight: 700;
    }
    
    #addHandicapModal .form-group {
      position: relative;
      z-index: 1;
    }
    
    #addHandicapModal .form-group label {
      color: #8b4513;
      font-weight: 600;
    }
    
    #addHandicapModal .form-group input,
    #addHandicapModal .form-group select,
    #addHandicapModal .form-group textarea {
      background: #f8f6f0;
      border: 2px solid #daa520;
      color: #2c1810;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    #addHandicapModal .form-group input:focus,
    #addHandicapModal .form-group select:focus,
    #addHandicapModal .form-group textarea:focus {
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff8dc;
    }
    
    #addHandicapModal .form-group input::placeholder,
    #addHandicapModal .form-group textarea::placeholder {
      color: #8b4513;
      font-style: italic;
    }
    
    #addHandicapModal .form-actions .btn-primary,
    #addHandicapModal .form-actions .btn-success,
    #addHandicapModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #addHandicapModal .form-actions .btn-primary:hover,
    #addHandicapModal .form-actions .btn-success:hover,
    #addHandicapModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    /* Load Example Seed Modal Styling - Forge Theme */
    #loadExampleSeedModal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #loadExampleSeedModal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    #loadExampleSeedModal .modal-header h2 {
      color: #8b4513;
      font-weight: 700;
    }
    
    #loadExampleSeedModal .form-actions {
      position: relative;
      z-index: 1;
    }
    
    #loadExampleSeedModal .form-actions .btn-secondary,
    #loadExampleSeedModal .form-actions .btn-success {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #loadExampleSeedModal .form-actions .btn-secondary:hover,
    #loadExampleSeedModal .form-actions .btn-success:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #loadExampleSeedModal .form-actions .btn-secondary i,
    #loadExampleSeedModal .form-actions .btn-success i {
      margin-right: 8px;
      color: #ffd700;
    }
    
    /* Clear Seed Modal Styling - Forge Theme */
    #clearSeedModal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #clearSeedModal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    #clearSeedModal .modal-header h2 {
      color: #8b4513;
      font-weight: 700;
    }
    
    #clearSeedModal .form-actions {
      position: relative;
      z-index: 1;
    }
    
    #clearSeedModal .form-actions .btn-secondary,
    #clearSeedModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #clearSeedModal .form-actions .btn-secondary:hover,
    #clearSeedModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #clearSeedModal .form-actions .btn-secondary i,
    #clearSeedModal .form-actions .btn-danger i {
      margin-right: 8px;
      color: #ffd700;
    }
    
    /* Dark mode for all three modals */
    body.dark-mode #addHandicapModal .modal-content,
    body.dark-mode #loadExampleSeedModal .modal-content,
    body.dark-mode #clearSeedModal .modal-content {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #addHandicapModal .modal-header h2,
    body.dark-mode #loadExampleSeedModal .modal-header h2,
    body.dark-mode #clearSeedModal .modal-header h2 {
      color: #daa520;
    }
    
    body.dark-mode #addHandicapModal .form-group label,
    body.dark-mode #loadExampleSeedModal .form-group label,
    body.dark-mode #clearSeedModal .form-group label {
      color: #daa520;
    }
    
    body.dark-mode #addHandicapModal .form-group input,
    body.dark-mode #addHandicapModal .form-group select,
    body.dark-mode #addHandicapModal .form-group textarea {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #addHandicapModal .form-group input:focus,
    body.dark-mode #addHandicapModal .form-group select:focus,
    body.dark-mode #addHandicapModal .form-group textarea:focus {
      border-color: #daa520;
      box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
      background: #2d1810;
    }
    
    body.dark-mode #addHandicapModal .form-group input::placeholder,
    body.dark-mode #addHandicapModal .form-group textarea::placeholder {
      color: #daa520;
    }
    
    body.dark-mode #addHandicapModal .form-actions .btn-primary,
    body.dark-mode #addHandicapModal .form-actions .btn-success,
    body.dark-mode #addHandicapModal .form-actions .btn-danger,
    body.dark-mode #loadExampleSeedModal .form-actions .btn-secondary,
    body.dark-mode #loadExampleSeedModal .form-actions .btn-success,
    body.dark-mode #clearSeedModal .form-actions .btn-secondary,
    body.dark-mode #clearSeedModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #addHandicapModal .form-actions .btn-primary:hover,
    body.dark-mode #addHandicapModal .form-actions .btn-success:hover,
    body.dark-mode #addHandicapModal .form-actions .btn-danger:hover,
    body.dark-mode #loadExampleSeedModal .form-actions .btn-secondary:hover,
    body.dark-mode #loadExampleSeedModal .form-actions .btn-success:hover,
    body.dark-mode #clearSeedModal .form-actions .btn-secondary:hover,
    body.dark-mode #clearSeedModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    /* Database Cards Styling - Forge Theme */
    .database-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .database-game-card {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .database-game-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    .database-game-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
      border-color: #8b4513;
    }
    
    .db-game-title {
      color: #8b4513;
      font-size: 1.2em;
      font-weight: 700;
      margin-bottom: 15px;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    .db-game-settings {
      background: rgba(139, 69, 19, 0.1);
      border: 1px solid #daa520;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 15px;
      color: #8b4513;
      font-size: 0.9em;
      position: relative;
      z-index: 1;
    }
    
    .handicap-section-title {
      color: #8b4513;
      font-weight: 600;
      margin: 15px 0 8px 0;
      font-size: 1.1em;
      position: relative;
      z-index: 1;
    }
    
    .db-handicap {
      background: rgba(245, 245, 220, 0.8);
      border: 1px solid #daa520;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s ease;
      position: relative;
      z-index: 1;
    }
    
    .db-handicap:hover {
      background: rgba(255, 248, 220, 0.9);
      border-color: #8b4513;
    }
    
    .handicap-name {
      color: #2c1810;
      font-weight: 600;
    }
    
    .handicap-description {
      color: #5d4e37;
      font-size: 0.9em;
      margin-top: 4px;
    }
    
    .handicap-rarity {
      background: #8b4513;
      color: #f5f5dc;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.8em;
      font-weight: 600;
      text-transform: uppercase;
    }
    
    .handicap-btn {
      background: none;
      border: none;
      color: #8b4513;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    
    .handicap-btn:hover {
      background: rgba(139, 69, 19, 0.1);
      color: #654321;
    }
    
    .no-handicaps {
      background: rgba(139, 69, 19, 0.1);
      border: 1px solid #daa520;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      color: #8b4513;
      font-style: italic;
      position: relative;
      z-index: 1;
    }
    
    /* Dark mode database cards */
    body.dark-mode .database-game-card {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode .db-game-title {
      color: #daa520;
    }
    
    body.dark-mode .db-game-settings {
      background: rgba(218, 165, 32, 0.1);
      border-color: #8b4513;
      color: #daa520;
    }
    
    body.dark-mode .handicap-section-title {
      color: #daa520;
    }
    
    body.dark-mode .db-handicap {
      background: rgba(45, 24, 16, 0.8);
      border-color: #8b4513;
    }
    
    body.dark-mode .db-handicap:hover {
      background: rgba(61, 40, 21, 0.9);
      border-color: #daa520;
    }
    
    body.dark-mode .handicap-name {
      color: #f5f5dc;
    }
    
    body.dark-mode .handicap-description {
      color: #daa520;
    }
    
    body.dark-mode .handicap-rarity {
      background: #daa520;
      color: #2c1810;
    }
    
    body.dark-mode .handicap-btn {
      color: #daa520;
    }
    
    body.dark-mode .handicap-btn:hover {
      background: rgba(218, 165, 32, 0.1);
      color: #ffd700;
    }
    
    body.dark-mode .no-handicaps {
      background: rgba(218, 165, 32, 0.1);
      border-color: #8b4513;
      color: #daa520;
    }
    
    /* Edit Game Modal Styling - Forge Theme */
    #editGameModal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #editGameModal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    #editGameModal .modal-header h2 {
      color: #8b4513;
      font-weight: 700;
    }
    
    #editGameModal .form-group {
      position: relative;
      z-index: 1;
    }
    
    #editGameModal .form-group label {
      color: #8b4513;
      font-weight: 600;
    }
    
    #editGameModal .form-group input {
      background: #f8f6f0;
      border: 2px solid #daa520;
      color: #2c1810;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    #editGameModal .form-group input:focus {
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff8dc;
    }
    
    #editGameModal .form-group input::placeholder {
      color: #8b4513;
      font-style: italic;
    }
    
    #editGameModal .form-actions .btn-danger,
    #editGameModal .form-actions .btn-success {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #editGameModal .form-actions .btn-danger:hover,
    #editGameModal .form-actions .btn-success:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    /* Dark mode edit game modal */
    body.dark-mode #editGameModal .modal-content {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #editGameModal .modal-header h2 {
      color: #daa520;
    }
    
    body.dark-mode #editGameModal .form-group label {
      color: #daa520;
    }
    
    body.dark-mode #editGameModal .form-group input {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #editGameModal .form-group input:focus {
      border-color: #daa520;
      box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
      background: #2d1810;
    }
    
    body.dark-mode #editGameModal .form-group input::placeholder {
      color: #daa520;
    }
    
    body.dark-mode #editGameModal .form-actions .btn-danger,
    body.dark-mode #editGameModal .form-actions .btn-success {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #editGameModal .form-actions .btn-danger:hover,
    body.dark-mode #editGameModal .form-actions .btn-success:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    /* Delete Confirmation Modal Styling - Forge Theme */
    #deleteConfirmationModal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    #deleteConfirmationModal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    #deleteConfirmationModal .modal-header h2 {
      color: #8b4513;
      font-weight: 700;
    }
    
    #deleteConfirmationModal .form-group {
      position: relative;
      z-index: 1;
    }
    
    #deleteConfirmationModal #deleteConfirmationMessage {
      color: #2c1810;
      font-size: 1.1em;
      line-height: 1.6;
      margin: 0;
    }
    
    #deleteConfirmationModal .form-actions .btn-secondary,
    #deleteConfirmationModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #deleteConfirmationModal .form-actions .btn-secondary:hover,
    #deleteConfirmationModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #deleteConfirmationModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
      border-color: #660000;
    }
    
    #deleteConfirmationModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #a00000 0%, #ff1744 100%);
      border-color: #8b0000;
    }
    
    /* Dark mode delete confirmation modal */
    body.dark-mode #deleteConfirmationModal .modal-content {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #deleteConfirmationModal .modal-header h2 {
      color: #daa520;
    }
    
    body.dark-mode #deleteConfirmationModal #deleteConfirmationMessage {
      color: #f5f5dc;
    }
    
    body.dark-mode #deleteConfirmationModal .form-actions .btn-secondary,
    body.dark-mode #deleteConfirmationModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #deleteConfirmationModal .form-actions .btn-secondary:hover,
    body.dark-mode #deleteConfirmationModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    body.dark-mode #deleteConfirmationModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #660000 0%, #a00000 100%);
      border-color: #4d0000;
    }
    
    body.dark-mode #deleteConfirmationModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
      border-color: #660000;
    }
    
    /* Rules Tab Panel Styling - Forge Theme */
    #rules-tab .panel {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #rules-tab .panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
    }
    
    #rules-tab .section-header {
      position: relative;
      z-index: 1;
    }
    
    #rules-tab .section-header h2 {
      color: #8b4513;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    #rules-tab .settings-lock-controls {
      position: relative;
      z-index: 1;
    }
    
    /* Dark mode rules tab panel */
    body.dark-mode #rules-tab .panel {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #rules-tab .panel::before {
      background: linear-gradient(90deg, #daa520 0%, #8b4513 50%, #daa520 100%);
    }
    
    body.dark-mode #rules-tab .section-header h2 {
      color: #daa520;
    }
    
    /* Dark mode footer */
    body.dark-mode footer {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 50%, #654321 100%);
      border-color: #8b4513;
      color: #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      animation: footerGlowDark 3s ease-in-out infinite alternate;
    }
    
    body.dark-mode footer:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      animation-play-state: paused;
    }
    
    body.dark-mode footer::before {
      background: linear-gradient(90deg, #daa520 0%, #8b4513 50%, #daa520 100%);
      animation: footerAccentPulseDark 2s ease-in-out infinite;
    }
    
    body.dark-mode footer::after {
      background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.2), transparent);
    }
    
    body.dark-mode footer p {
      animation: footerTextGlowDark 2.5s ease-in-out infinite alternate;
    }
    
    @keyframes footerGlowDark {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 20px rgba(218, 165, 32, 0.2);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 30px rgba(218, 165, 32, 0.4);
      }
    }
    
    @keyframes footerAccentPulseDark {
      0%, 100% { 
        opacity: 0.8;
        transform: scaleX(1);
      }
      50% { 
        opacity: 1;
        transform: scaleX(1.02);
      }
    }
    
    @keyframes footerTextGlowDark {
      0% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
      }
      100% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3), 0 0 8px rgba(218, 165, 32, 0.6);
      }
    }
    
    /* Custom Scrollbar Styling - Forge Theme */
    /* Webkit browsers (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }
    
    ::-webkit-scrollbar-track {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border-radius: 10px;
      border: 1px solid #daa520;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
    }
    
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
      border-radius: 10px;
      border: 2px solid #f5f5dc;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #a0522d 0%, #ffd700 50%, #a0522d 100%);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      transform: scale(1.1);
    }
    
    ::-webkit-scrollbar-thumb:active {
      background: linear-gradient(135deg, #654321 0%, #cd853f 50%, #654321 100%);
    }
    
    ::-webkit-scrollbar-corner {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
    }
    
    /* Database and Notes specific scrollbars */
    #databaseList::-webkit-scrollbar,
    #notes-tab textarea::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar {
      width: 14px;
    }
    
    #databaseList::-webkit-scrollbar-track,
    #notes-tab textarea::-webkit-scrollbar-track,
    .modal-content::-webkit-scrollbar-track {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border-radius: 12px;
      border: 2px solid #daa520;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
    }
    
    #databaseList::-webkit-scrollbar-thumb,
    #notes-tab textarea::-webkit-scrollbar-thumb,
    .modal-content::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 30%, #ffd700 50%, #daa520 70%, #8b4513 100%);
      border-radius: 12px;
      border: 2px solid #f5f5dc;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
      animation: scrollbarGlow 3s ease-in-out infinite alternate;
    }
    
    #databaseList::-webkit-scrollbar-thumb:hover,
    #notes-tab textarea::-webkit-scrollbar-thumb:hover,
    .modal-content::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #a0522d 0%, #ffd700 30%, #ffff00 50%, #ffd700 70%, #a0522d 100%);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
      transform: scale(1.05);
    }
    
    @keyframes scrollbarGlow {
      0% { 
        box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
      }
      100% { 
        box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3), 0 0 8px rgba(218, 165, 32, 0.4);
      }
    }
    
    /* Dark mode scrollbars */
    body.dark-mode ::-webkit-scrollbar-track {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
    }
    
    body.dark-mode ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #654321 0%, #8b4513 50%, #daa520 100%);
      border-color: #3d2815;
      box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }
    
    body.dark-mode ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 50%, #ffd700 100%);
      box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    }
    
    body.dark-mode #databaseList::-webkit-scrollbar-track,
    body.dark-mode #notes-tab textarea::-webkit-scrollbar-track,
    body.dark-mode .modal-content::-webkit-scrollbar-track {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
    }
    
    body.dark-mode #databaseList::-webkit-scrollbar-thumb,
    body.dark-mode #notes-tab textarea::-webkit-scrollbar-thumb,
    body.dark-mode .modal-content::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #654321 0%, #8b4513 30%, #daa520 50%, #8b4513 70%, #654321 100%);
      border-color: #3d2815;
      box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(218, 165, 32, 0.2);
      animation: scrollbarGlowDark 3s ease-in-out infinite alternate;
    }
    
    body.dark-mode #databaseList::-webkit-scrollbar-thumb:hover,
    body.dark-mode #notes-tab textarea::-webkit-scrollbar-thumb:hover,
    body.dark-mode .modal-content::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 30%, #ffd700 50%, #daa520 70%, #8b4513 100%);
      box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(218, 165, 32, 0.4);
    }
    
    @keyframes scrollbarGlowDark {
      0% { 
        box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(218, 165, 32, 0.2);
      }
      100% { 
        box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(218, 165, 32, 0.2), 0 0 12px rgba(218, 165, 32, 0.3);
      }
    }
    
    /* Firefox scrollbar styling */
    * {
      scrollbar-width: thin;
      scrollbar-color: #daa520 #f5f5dc;
    }
    
    body.dark-mode * {
      scrollbar-color: #daa520 #3d2815;
    }
    
    /* No Games Found Styling - Forge Theme */
    .no-games-found {
      text-align: center;
      padding: 40px 20px;
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
      animation: noGamesGlow 3s ease-in-out infinite alternate;
    }
    
    .no-games-found::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
      animation: noGamesAccentPulse 2s ease-in-out infinite;
    }
    
    .no-games-found::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: noGamesShimmer 4s ease-in-out infinite;
    }
    
    .no-games-icon {
      position: relative;
      z-index: 1;
      margin-bottom: 20px;
    }
    
    .no-games-icon i {
      font-size: 3em;
      color: #8b4513;
      animation: noGamesIconPulse 2s ease-in-out infinite;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .no-games-title {
      position: relative;
      z-index: 1;
      color: #8b4513;
      font-size: 1.5em;
      font-weight: 700;
      margin-bottom: 15px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      animation: noGamesTextGlow 2.5s ease-in-out infinite alternate;
    }
    
    .no-games-description {
      position: relative;
      z-index: 1;
      color: #5d4e37;
      font-size: 1em;
      margin-bottom: 25px;
      line-height: 1.6;
    }
    
    .no-games-add-btn {
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
      padding: 12px 24px;
      font-size: 1.1em;
    }
    
    .no-games-add-btn:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }
    
    .no-games-add-btn i {
      margin-right: 8px;
      color: #ffd700;
    }
    
    @keyframes noGamesGlow {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 20px rgba(218, 165, 32, 0.2);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 30px rgba(218, 165, 32, 0.4);
      }
    }
    
    @keyframes noGamesAccentPulse {
      0%, 100% { 
        opacity: 0.8;
        transform: scaleX(1);
      }
      50% { 
        opacity: 1;
        transform: scaleX(1.02);
      }
    }
    
    @keyframes noGamesShimmer {
      0% { left: -100%; }
      50% { left: 100%; }
      100% { left: 100%; }
    }
    
    @keyframes noGamesIconPulse {
      0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
      }
      50% { 
        transform: scale(1.1);
        opacity: 1;
      }
    }
    
    @keyframes noGamesTextGlow {
      0% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      }
      100% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 8px rgba(218, 165, 32, 0.4);
      }
    }
    
    /* Dark mode no games found */
    body.dark-mode .no-games-found {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      animation: noGamesGlowDark 3s ease-in-out infinite alternate;
    }
    
    body.dark-mode .no-games-found::before {
      background: linear-gradient(90deg, #daa520 0%, #8b4513 50%, #daa520 100%);
    }
    
    body.dark-mode .no-games-found::after {
      background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.1), transparent);
    }
    
    body.dark-mode .no-games-icon i {
      color: #daa520;
    }
    
    body.dark-mode .no-games-title {
      color: #daa520;
    }
    
    body.dark-mode .no-games-description {
      color: #b8a082;
    }
    
    body.dark-mode .no-games-add-btn {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode .no-games-add-btn:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    @keyframes noGamesGlowDark {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 20px rgba(218, 165, 32, 0.1);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 30px rgba(218, 165, 32, 0.3);
      }
    }
    
    /* Challenge Tab Styling - Forge Theme */
    #challenge-tab .dashboard {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
      animation: challengeTabGlow 3s ease-in-out infinite alternate;
    }
    
    #challenge-tab .dashboard::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
      animation: challengeTabAccentPulse 2s ease-in-out infinite;
    }
    
    #challenge-tab .games-container {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #challenge-tab .games-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
      animation: challengeTabAccentPulse 2s ease-in-out infinite;
    }
    
    #challenge-tab .section-header {
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .section-header h2 {
      color: #8b4513;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      animation: challengeTabTextGlow 2.5s ease-in-out infinite alternate;
    }
    
    #challenge-tab .sidebar {
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .panel {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #challenge-tab .panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
      animation: challengeTabAccentPulse 2s ease-in-out infinite;
    }
    
    #challenge-tab .panel h3 {
      color: #8b4513;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .stats {
      background: rgba(139, 69, 19, 0.1);
      border: 1px solid #daa520;
      border-radius: 8px;
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .stat-item {
      color: #2c1810;
      border-bottom-color: #daa520;
    }
    
    #challenge-tab .token-counter {
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .token-icon {
      color: #ffd700;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    }
    
    #challenge-tab .token-value {
      color: #8b4513;
      font-weight: 700;
    }
    
    @keyframes challengeTabGlow {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 20px rgba(218, 165, 32, 0.2);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 30px rgba(218, 165, 32, 0.4);
      }
    }
    
    @keyframes challengeTabAccentPulse {
      0%, 100% { 
        opacity: 0.8;
        transform: scaleX(1);
      }
      50% { 
        opacity: 1;
        transform: scaleX(1.02);
      }
    }
    
    @keyframes challengeTabTextGlow {
      0% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      }
      100% { 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 8px rgba(218, 165, 32, 0.4);
      }
    }
    
    /* Dark mode challenge tab */
    body.dark-mode #challenge-tab .dashboard {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      animation: challengeTabGlowDark 3s ease-in-out infinite alternate;
    }
    
    body.dark-mode #challenge-tab .dashboard::before {
      background: linear-gradient(90deg, #daa520 0%, #8b4513 50%, #daa520 100%);
    }
    
    body.dark-mode #challenge-tab .games-container {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #challenge-tab .games-container::before {
      background: linear-gradient(90deg, #daa520 0%, #8b4513 50%, #daa520 100%);
    }
    
    body.dark-mode #challenge-tab .section-header h2 {
      color: #daa520;
    }
    
    body.dark-mode #challenge-tab .panel {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #challenge-tab .panel::before {
      background: linear-gradient(90deg, #daa520 0%, #8b4513 50%, #daa520 100%);
    }
    
    body.dark-mode #challenge-tab .panel h3 {
      color: #daa520;
    }
    
    body.dark-mode #challenge-tab .stats {
      background: rgba(218, 165, 32, 0.1);
      border-color: #8b4513;
    }
    
    body.dark-mode #challenge-tab .stat-item {
      color: #f5f5dc;
      border-bottom-color: #8b4513;
    }
    
    body.dark-mode #challenge-tab .token-value {
      color: #daa520;
    }
    
    @keyframes challengeTabGlowDark {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 20px rgba(218, 165, 32, 0.1);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 30px rgba(218, 165, 32, 0.3);
      }
    }
    
    /* Game Slots Styling - Forge Theme */
    #challenge-tab .game-card {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      animation: gameSlotGlow 4s ease-in-out infinite alternate;
    }
    
    #challenge-tab .game-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
      animation: gameSlotAccentPulse 3s ease-in-out infinite;
    }
    
    #challenge-tab .game-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      border-color: #8b4513;
      animation-play-state: paused;
    }
    
    #challenge-tab .game-card.completed {
      background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
      border-color: #28a745;
      box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }
    
    #challenge-tab .game-card.completed::before {
      background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #28a745 100%);
    }
    
    #challenge-tab .game-card.completed .game-title {
      color: #155724;
      font-weight: 700;
    }
    
    #challenge-tab .game-card.dragging {
      opacity: 0.7;
      border: 2px dashed #daa520;
      background: linear-gradient(135deg, rgba(245, 245, 220, 0.8) 0%, rgba(240, 230, 140, 0.8) 100%);
    }
    
    #challenge-tab .game-card.drag-over {
      border: 2px solid #8b4513;
      background: linear-gradient(135deg, rgba(139, 69, 19, 0.1) 0%, rgba(218, 165, 32, 0.1) 100%);
    }
    
    #challenge-tab .game-header {
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .game-title {
      color: #8b4513;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    #challenge-tab .game-progress {
      color: #5d4e37;
      font-weight: 600;
    }
    
    #challenge-tab .game-delete-btn {
      color: #8b4513;
      background: linear-gradient(135deg, #8b0000 0%, #a00000 100%) !important;
      border: 2px solid #daa520;
      border-radius: 6px;
      padding: 6px 12px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    #challenge-tab .game-delete-btn:hover {
      color: #8b0000;
      background: linear-gradient(135deg, #a00000 0%, #8b0000 100%) !important;
      border-color: #8b0000;
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 15px rgba(220, 20, 60, 0.4);
    }
    
    #challenge-tab .handicap-section {
      position: relative;
      z-index: 1;
      margin: 15px 0;
    }
    
    #challenge-tab .handicap-section strong {
      color: #8b4513;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    #challenge-tab .handicap {
      background: rgba(139, 69, 19, 0.1);
      border: 1px solid #daa520;
      border-radius: 6px;
      padding: 8px 12px;
      margin: 5px 0;
      position: relative;
      transition: all 0.3s ease;
      color: #2c1810;
    }
    
    #challenge-tab .handicap:hover {
      background: rgba(139, 69, 19, 0.2);
      border-color: #8b4513;
      transform: translateX(5px);
    }
    
    #challenge-tab .handicap.permanent {
      border-left: 4px solid #dc3545;
    }
    
    #challenge-tab .handicap.temporary {
      border-left: 4px solid #007bff;
    }
    
    #challenge-tab .handicap-btn {
      color: #8b4513;
      background: none;
      border: none;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    
    #challenge-tab .handicap-btn:hover {
      color: #dc3545;
      background: rgba(220, 53, 69, 0.1);
      transform: scale(1.1);
    }
    
    #challenge-tab .timer-widget {
      background: rgba(139, 69, 19, 0.1);
      border: 1px solid #daa520;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .timer-display {
      color: #8b4513;
      font-weight: 700;
      font-size: 1.2em;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    #challenge-tab .timer-btn {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #challenge-tab .timer-btn:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #challenge-tab .timer-btn:disabled {
      background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%);
      border-color: #495057;
      color: #6c757d;
      cursor: not-allowed;
      transform: none;
    }
    
    #challenge-tab .controls {
      position: relative;
      z-index: 1;
    }
    
    #challenge-tab .controls .btn-primary,
    #challenge-tab .controls .btn-success,
    #challenge-tab .controls .btn-info {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #challenge-tab .controls .btn-primary:hover,
    #challenge-tab .controls .btn-success:hover,
    #challenge-tab .controls .btn-info:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    @keyframes gameSlotGlow {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 15px rgba(218, 165, 32, 0.1);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 25px rgba(218, 165, 32, 0.3);
      }
    }
    
    @keyframes gameSlotAccentPulse {
      0%, 100% { 
        opacity: 0.8;
        transform: scaleX(1);
      }
      50% { 
        opacity: 1;
        transform: scaleX(1.02);
      }
    }
    
    /* Dark mode game slots */
    body.dark-mode #challenge-tab .game-card {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      animation: gameSlotGlowDark 4s ease-in-out infinite alternate;
    }
    
    body.dark-mode #challenge-tab .game-card::before {
      background: linear-gradient(90deg, #daa520 0%, #8b4513 50%, #daa520 100%);
    }
    
    body.dark-mode #challenge-tab .game-card:hover {
      border-color: #daa520;
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    }
    
    body.dark-mode #challenge-tab .game-card.completed {
      background: linear-gradient(135deg, #1e3a2e 0%, #2d5a3d 100%);
      border-color: #28a745;
    }
    
    body.dark-mode #challenge-tab .game-card.completed .game-title {
      color: #d4edda;
    }
    
    body.dark-mode #challenge-tab .game-card.dragging {
      background: linear-gradient(135deg, rgba(45, 24, 16, 0.8) 0%, rgba(61, 40, 21, 0.8) 100%);
    }
    
    body.dark-mode #challenge-tab .game-card.drag-over {
      background: linear-gradient(135deg, rgba(218, 165, 32, 0.1) 0%, rgba(139, 69, 19, 0.1) 100%);
    }
    
    body.dark-mode #challenge-tab .game-title {
      color: #daa520;
    }
    
    body.dark-mode #challenge-tab .game-progress {
      color: #b8a082;
    }
    
    body.dark-mode #challenge-tab .game-delete-btn {
      color: #daa520;
      background: linear-gradient(135deg, #4a0000 0%, #660000 100%) !important;
      border-color: #daa520;
    }
    
    body.dark-mode #challenge-tab .game-delete-btn:hover {
      color: #daa520;
      background: linear-gradient(135deg, #660000 0%, #4a0000 100%) !important;
      border-color: #daa520;
    }
    
    body.dark-mode #challenge-tab .handicap-section strong {
      color: #daa520;
    }
    
    body.dark-mode #challenge-tab .handicap {
      background: transparent;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #challenge-tab .handicap:hover {
      background: transparent;
      border-color: #daa520;
    }
    
    /* Override any background colors on span elements inside handicaps in dark mode */
    body.dark-mode .handicap span {
      background: transparent !important;
      color: inherit !important;
    }
    
    /* Dark mode stylized rarity backgrounds - forge theme */
    body.dark-mode .handicap.common { 
      background: linear-gradient(135deg, 
        rgba(149, 165, 166, 0.2) 0%, 
        rgba(189, 195, 199, 0.3) 50%, 
        rgba(149, 165, 166, 0.2) 100%) !important;
      border: 2px solid rgba(149, 165, 166, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(149, 165, 166, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .handicap.common::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.1) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .handicap.uncommon { 
      background: linear-gradient(135deg, 
        rgba(46, 204, 113, 0.2) 0%, 
        rgba(88, 214, 141, 0.3) 50%, 
        rgba(46, 204, 113, 0.2) 100%) !important;
      border: 2px solid rgba(46, 204, 113, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(46, 204, 113, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .handicap.uncommon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.1) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .handicap.rare { 
      background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.2) 0%, 
        rgba(93, 173, 226, 0.3) 50%, 
        rgba(52, 152, 219, 0.2) 100%) !important;
      border: 2px solid rgba(52, 152, 219, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(52, 152, 219, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .handicap.rare::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.1) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .handicap.legendary { 
      background: linear-gradient(135deg, 
        rgba(155, 89, 182, 0.2) 0%, 
        rgba(187, 143, 206, 0.3) 50%, 
        rgba(155, 89, 182, 0.2) 100%) !important;
      border: 2px solid rgba(155, 89, 182, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(155, 89, 182, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .handicap.legendary::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.12) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.1) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .handicap.mythic { 
      background: linear-gradient(135deg, 
        rgba(233, 30, 99, 0.2) 0%, 
        rgba(240, 98, 146, 0.3) 50%, 
        rgba(233, 30, 99, 0.2) 100%) !important;
      border: 2px solid rgba(233, 30, 99, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(233, 30, 99, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .handicap.mythic::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.15) 25%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.1) 75%, 
        transparent 100%);
      pointer-events: none;
    }

    /* Modal handicap displays with rarity colors */
    .modal .handicap.common { 
      background: linear-gradient(135deg, 
        rgba(149, 165, 166, 0.15) 0%, 
        rgba(189, 195, 199, 0.25) 50%, 
        rgba(149, 165, 166, 0.15) 100%) !important;
      border: 2px solid rgba(149, 165, 166, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(149, 165, 166, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .modal .handicap.common::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    .modal .handicap.uncommon { 
      background: linear-gradient(135deg, 
        rgba(46, 204, 113, 0.15) 0%, 
        rgba(88, 214, 141, 0.25) 50%, 
        rgba(46, 204, 113, 0.15) 100%) !important;
      border: 2px solid rgba(46, 204, 113, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(46, 204, 113, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .modal .handicap.uncommon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    .modal .handicap.rare { 
      background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.15) 0%, 
        rgba(93, 173, 226, 0.25) 50%, 
        rgba(52, 152, 219, 0.15) 100%) !important;
      border: 2px solid rgba(52, 152, 219, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(52, 152, 219, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .modal .handicap.rare::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    .modal .handicap.legendary { 
      background: linear-gradient(135deg, 
        rgba(155, 89, 182, 0.15) 0%, 
        rgba(187, 143, 206, 0.25) 50%, 
        rgba(155, 89, 182, 0.15) 100%) !important;
      border: 2px solid rgba(155, 89, 182, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(155, 89, 182, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .modal .handicap.legendary::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    .modal .handicap.mythic { 
      background: linear-gradient(135deg, 
        rgba(233, 30, 99, 0.15) 0%, 
        rgba(240, 98, 146, 0.25) 50%, 
        rgba(233, 30, 99, 0.15) 100%) !important;
      border: 2px solid rgba(233, 30, 99, 0.6) !important;
      box-shadow: 
        0 4px 8px rgba(233, 30, 99, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
      color: #2c1810 !important;
      position: relative;
      overflow: hidden;
    }
    .modal .handicap.mythic::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.05) 75%,
        transparent 100%);
      pointer-events: none;
    }

    /* Dark mode modal handicap displays */
    body.dark-mode .modal .handicap.common { 
      background: linear-gradient(135deg, 
        rgba(149, 165, 166, 0.2) 0%, 
        rgba(189, 195, 199, 0.3) 50%, 
        rgba(149, 165, 166, 0.2) 100%) !important;
      border: 2px solid rgba(149, 165, 166, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(149, 165, 166, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .modal .handicap.common::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .modal .handicap.uncommon { 
      background: linear-gradient(135deg, 
        rgba(46, 204, 113, 0.2) 0%, 
        rgba(88, 214, 141, 0.3) 50%, 
        rgba(46, 204, 113, 0.2) 100%) !important;
      border: 2px solid rgba(46, 204, 113, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(46, 204, 113, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .modal .handicap.uncommon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .modal .handicap.rare { 
      background: linear-gradient(135deg, 
        rgba(52, 152, 219, 0.2) 0%, 
        rgba(93, 173, 226, 0.3) 50%, 
        rgba(52, 152, 219, 0.2) 100%) !important;
      border: 2px solid rgba(52, 152, 219, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(52, 152, 219, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .modal .handicap.rare::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .modal .handicap.legendary { 
      background: linear-gradient(135deg, 
        rgba(155, 89, 182, 0.2) 0%, 
        rgba(187, 143, 206, 0.3) 50%, 
        rgba(155, 89, 182, 0.2) 100%) !important;
      border: 2px solid rgba(155, 89, 182, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(155, 89, 182, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .modal .handicap.legendary::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .modal .handicap.mythic { 
      background: linear-gradient(135deg, 
        rgba(233, 30, 99, 0.2) 0%, 
        rgba(240, 98, 146, 0.3) 50%, 
        rgba(233, 30, 99, 0.2) 100%) !important;
      border: 2px solid rgba(233, 30, 99, 0.7) !important;
      box-shadow: 
        0 4px 8px rgba(233, 30, 99, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      color: #f5f5dc !important;
      position: relative;
      overflow: hidden;
    }
    body.dark-mode .modal .handicap.mythic::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode #challenge-tab .handicap-btn {
      color: #daa520;
    }
    
    body.dark-mode #challenge-tab .handicap-btn:hover {
      color: #ff6b6b;
      background: rgba(255, 107, 107, 0.1);
    }
    
    body.dark-mode #challenge-tab .timer-widget {
      background: rgba(218, 165, 32, 0.1);
      border-color: #8b4513;
    }
    
    body.dark-mode #challenge-tab .timer-display {
      color: #daa520;
    }
    
    body.dark-mode #challenge-tab .timer-btn {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #challenge-tab .timer-btn:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    body.dark-mode #challenge-tab .controls .btn-primary,
    body.dark-mode #challenge-tab .controls .btn-success,
    body.dark-mode #challenge-tab .controls .btn-info {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #challenge-tab .controls .btn-primary:hover,
    body.dark-mode #challenge-tab .controls .btn-success:hover,
    body.dark-mode #challenge-tab .controls .btn-info:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }
    
    @keyframes gameSlotGlowDark {
      0% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 15px rgba(218, 165, 32, 0.1);
      }
      100% { 
        box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 25px rgba(218, 165, 32, 0.2);
      }
    }
    
    /* Dark mode challenge creator modal */
    body.dark-mode .challenge-creator-modal .modal-content {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
    }
    
    body.dark-mode .challenge-creator-modal .form-group {
      background: rgba(45, 24, 16, 0.7);
      border-color: #8b4513;
    }
    
    body.dark-mode .challenge-creator-modal .form-group label {
      color: #daa520;
    }
    
    body.dark-mode .challenge-creator-modal .form-group input,
    body.dark-mode .challenge-creator-modal .form-group textarea {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode .challenge-creator-modal .form-group input:focus,
    body.dark-mode .challenge-creator-modal .form-group textarea:focus {
      border-color: #daa520;
      box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
      background: #2d1810;
    }
    
    body.dark-mode .challenge-creator-modal .hint {
      color: #daa520;
    }
    
    body.dark-mode .challenge-creator-modal h3 {
      color: #daa520;
      border-bottom-color: #8b4513;
    }
    
    body.dark-mode .challenge-creator-modal input[type="checkbox"] {
      accent-color: #daa520;
    }
    
    body.dark-mode .challenge-creator-modal input[type="checkbox"] + label {
      color: #daa520;
    }
    
    /* Result Modal Styling - Forge Theme */
    .result-modal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .result-modal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    .result-modal .modal-header h2 {
      color: #f5f5dc;
      font-weight: 700;
    }
    
    .result-modal #resultContent {
      color: #2c1810;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px 0;
    }
    
    .result-modal #resultContent p {
      text-align: center;
      margin: 0.5em 0;
    }
    
    .result-modal #resultContent pre {
      background: #2c1810;
      color: #f5f5dc;
      padding: 15px;
      border-radius: 8px;
      border: 1px solid #8b4513;
      font-family: 'Courier New', monospace;
      white-space: pre-wrap;
      word-wrap: break-word;
      max-height: 60vh;
      overflow-y: auto;
    }
    
    /* Dark mode result modal */
    body.dark-mode .result-modal .modal-content {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode .result-modal .modal-header h2 {
      color: #daa520;
    }
    
    body.dark-mode .result-modal #resultContent {
      color: #f5f5dc;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px 0;
    }
    
    body.dark-mode .result-modal #resultContent p {
      text-align: center;
      margin: 0.5em 0;
    }
    
    body.dark-mode .result-modal #resultContent pre {
      background: #1a0f0a;
      color: #f5f5dc;
      border-color: #daa520;
    }
    
    /* Mobile floating TOC */
    @media screen and (max-width: 768px) {
      .toc-floating-toggle {
        bottom: 80px;
        right: 15px;
        width: 50px;
        height: 50px;
      }
      
      .toc-floating-toggle i {
        font-size: 20px;
      }
      
      .toc-floating-panel {
        bottom: 140px;
        right: 15px;
        left: 15px;
        width: auto;
        max-height: 60vh;
      }
      
      .toc-panel-content .toc-section a {
        padding: 12px 15px;
        font-size: 0.95em;
      }
    }

    /* Dark mode rules tab buttons - forge theme */
    body.dark-mode #rules-tab .btn-primary { 
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%); 
      border-color: #4a2c17;
    }
    body.dark-mode #rules-tab .btn-primary:hover { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
    }
    
    body.dark-mode #rules-tab .btn-danger { 
      background: linear-gradient(135deg, #660000 0%, #a00000 100%); 
      border-color: #4d0000;
    }
    body.dark-mode #rules-tab .btn-danger:hover { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
    }
    
    body.dark-mode #rules-tab .btn-success { 
      background: linear-gradient(135deg, #1a3009 0%, #2d5a2d 100%); 
      border-color: #0f1f05;
    }
    body.dark-mode #rules-tab .btn-success:hover { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
    }
    
    body.dark-mode #rules-tab .btn-warning { 
      background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%); 
      color: #1a0f0a; 
      border-color: #6b4f0a;
    }
    body.dark-mode #rules-tab .btn-warning:hover { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
    }
    
    body.dark-mode #rules-tab .btn-purple { 
      background: linear-gradient(135deg, #2e0050 0%, #4a0082 100%); 
      border-color: #1a0030;
    }
    body.dark-mode #rules-tab .btn-purple:hover { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
    }
    
    body.dark-mode #rules-tab .btn-secondary { 
      background: linear-gradient(135deg, #4a4a4a 0%, #696969 100%); 
      border-color: #2a2a2a;
    }
    body.dark-mode #rules-tab .btn-secondary:hover { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
    }
    
    body.dark-mode #rules-tab .btn-gray { 
      background: linear-gradient(135deg, #556b7a 0%, #708090 100%); 
      color: #e5e5e5; 
      border-color: #3a4a5a;
    }

    /* Forge-themed tab buttons */
    .tab { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
      color: white; 
      border: 1px solid #654321;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    .tab:hover { 
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .tab.active { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
      color: #2c1810; 
      border: 1px solid #8b6914;
      font-weight: 600;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .tab.active:hover { 
      background: linear-gradient(135deg, #daa520 0%, #ffff00 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    }

    /* Dark mode tab buttons - forge theme */
    body.dark-mode .tab { 
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%); 
      border-color: #4a2c17;
    }
    body.dark-mode .tab:hover { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
    }
    body.dark-mode .tab.active { 
      background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%); 
      color: #1a0f0a; 
      border-color: #6b4f0a;
    }
    body.dark-mode .tab.active:hover { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
    }

    /* Dark mode forge theme */
    body.dark-mode header {
      background: 
        linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a2c1a 50%, #3d2817 75%, #2c1810 100%),
        radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.12) 0%, transparent 50%);
      color: white; 
      padding: 30px; 
      border-radius: 15px; 
      margin-bottom: 25px; 
      text-align: center;
      box-shadow: 
        0 8px 20px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
      border: 2px solid #8b4513;
      border-top: 3px solid #cd853f;
    }
    
    body.dark-mode .forge-anvil {
      color: #ffb347;
      text-shadow: 0 0 15px rgba(255, 179, 71, 0.7);
    }
    
    body.dark-mode .forge-title h1 {
      color: #4a0000; /* Deeper red text */
      text-shadow: 
        1px 1px 0px #4a0000,
        2px 2px 0px #2c1810,
        3px 3px 0px #1a0f0a,
        inset 0 2px 4px rgba(0,0,0,0.7),
        inset 0 4px 8px rgba(0,0,0,0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(255, 255, 255, 0.05);
      font-family: 'Orbitron', 'Copperplate', 'Copperplate Gothic Light', 'Copperplate Gothic Bold', 'Impact', 'Arial Black', Arial, sans-serif;
      background: 
        linear-gradient(135deg, 
          #b8860b 0%, 
          #cd853f 15%, 
          #8b6914 25%, 
          #b8860b 35%, 
          #654321 45%, 
          #b8860b 55%, 
          #8b4513 65%, 
          #b8860b 75%, 
          #8b6914 85%, 
          #b8860b 100%),
        radial-gradient(circle at 20% 30%, rgba(101, 67, 33, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(139, 69, 19, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(160, 82, 45, 0.3) 0%, transparent 30%);
      box-shadow: 
        0 6px 12px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        inset 2px 0 6px rgba(101, 67, 33, 0.5),
        inset -2px 0 6px rgba(139, 69, 19, 0.4);
      border: 2px solid #654321;
      filter: contrast(1.2) saturate(0.8);
    }
    
    body.dark-mode .forge-title h1::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        repeating-linear-gradient(
          45deg,
          transparent 0px,
          transparent 2px,
          rgba(101, 67, 33, 0.15) 2px,
          rgba(101, 67, 33, 0.15) 4px
        ),
        repeating-linear-gradient(
          -45deg,
          transparent 0px,
          transparent 3px,
          rgba(139, 69, 19, 0.12) 3px,
          rgba(139, 69, 19, 0.12) 6px
        );
      border-radius: 8px;
      pointer-events: none;
    }
    
    body.dark-mode .forge-title h1::after {
      content: '';
      position: absolute;
      top: 10%;
      left: 5%;
      right: 5%;
      height: 1px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(101, 67, 33, 0.7) 20%, 
        rgba(139, 69, 19, 0.9) 50%, 
        rgba(101, 67, 33, 0.7) 80%, 
        transparent 100%);
      pointer-events: none;
    }
    
    body.dark-mode .forge-title h1 i {
      color: #ff6b35;
      text-shadow: 0 0 20px rgba(255, 107, 53, 0.9);
    }
    

    /* Dark mode forge-themed buttons for challenge tab */
    body.dark-mode #challenge-tab .btn-primary { 
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%); 
      border-color: #4a2c17;
    }
    body.dark-mode #challenge-tab .btn-primary:hover { 
      background: linear-gradient(135deg, #7a4a2a 0%, #a68b5b 100%); 
    }
    
    body.dark-mode #challenge-tab .btn-danger { 
      background: linear-gradient(135deg, #660000 0%, #a00000 100%); 
      border-color: #4d0000;
    }
    body.dark-mode #challenge-tab .btn-danger:hover { 
      background: linear-gradient(135deg, #800000 0%, #c00000 100%); 
    }
    
    body.dark-mode #challenge-tab .btn-success { 
      background: linear-gradient(135deg, #1a3009 0%, #2d5a2d 100%); 
      border-color: #0f1f05;
    }
    body.dark-mode #challenge-tab .btn-success:hover { 
      background: linear-gradient(135deg, #2a4019 0%, #3d6a3d 100%); 
    }
    
    body.dark-mode #challenge-tab .btn-warning { 
      background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%); 
      color: #1a0f0a; 
      border-color: #6b4f0a;
    }
    body.dark-mode #challenge-tab .btn-warning:hover { 
      background: linear-gradient(135deg, #a67c1a 0%, #daa520 100%); 
    }
    
    body.dark-mode #challenge-tab .btn-purple { 
      background: linear-gradient(135deg, #2e0050 0%, #4a0082 100%); 
      border-color: #1a0030;
    }
    body.dark-mode #challenge-tab .btn-purple:hover { 
      background: linear-gradient(135deg, #4a0082 0%, #6a0dad 100%); 
    }
    
    body.dark-mode #challenge-tab .btn-secondary { 
      background: linear-gradient(135deg, #4a4a4a 0%, #696969 100%); 
      border-color: #2a2a2a;
    }
    body.dark-mode #challenge-tab .btn-secondary:hover { 
      background: linear-gradient(135deg, #5a5a5a 0%, #808080 100%); 
    }
    
    body.dark-mode #challenge-tab .btn-gray { 
      background: linear-gradient(135deg, #556b7a 0%, #708090 100%); 
      color: #e5e5e5; 
      border-color: #3a4a5a;
    }

    /* Demo buttons inherit exact challenge tab button styles */
    .demo-btn {
      padding: 10px 15px; 
      border: none; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: 500; 
      transition: all 0.2s;
      display: inline-flex; 
      align-items: center; 
      gap: 6px;
    }
    
    /* Demo buttons use exact same styles as challenge tab buttons - 1:1 copy */
    .demo-btn-primary { 
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%); 
      color: white; 
      border: 1px solid #654321;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .demo-btn-primary:hover { 
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .demo-btn-danger { 
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%); 
      color: white; 
      border: 1px solid #660000;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .demo-btn-danger:hover { 
      background: linear-gradient(135deg, #a00000 0%, #ff1744 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .demo-btn-success { 
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%); 
      color: white; 
      border: 1px solid #1b3009;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .demo-btn-success:hover { 
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .demo-btn-warning { 
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%); 
      color: #2c1810; 
      border: 1px solid #8b6914;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      font-weight: 600;
    }
    .demo-btn-warning:hover { 
      background: linear-gradient(135deg, #daa520 0%, #ffff00 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .demo-btn-purple { 
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%); 
      color: white; 
      border: 1px solid #2e0050;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .demo-btn-purple:hover { 
      background: linear-gradient(135deg, #6a0dad 0%, #a855f7 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .demo-btn-secondary { 
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%); 
      color: white; 
      border: 1px solid #4a4a4a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .demo-btn-secondary:hover { 
      background: linear-gradient(135deg, #808080 0%, #c0c0c0 100%); 
      transform: translateY(-2px); 
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .demo-btn-gray { 
      background: linear-gradient(135deg, #708090 0%, #b0c4de 100%); 
      color: #2c1810; 
      cursor: default; 
      border: 1px solid #556b7a;
    }

    /* Dark mode demo buttons - exact same as challenge tab dark mode */
    body.dark-mode .demo-btn-primary { 
      background: linear-gradient(135deg, #654321 0%, #8b7355 100%); 
      border-color: #4a2c17;
    }
    body.dark-mode .demo-btn-primary:hover { 
      background: linear-gradient(135deg, #7a4a2a 0%, #a68b5b 100%); 
    }
    
    body.dark-mode .demo-btn-danger { 
      background: linear-gradient(135deg, #660000 0%, #a00000 100%); 
      border-color: #4d0000;
    }
    body.dark-mode .demo-btn-danger:hover { 
      background: linear-gradient(135deg, #800000 0%, #c00000 100%); 
    }
    
    body.dark-mode .demo-btn-success { 
      background: linear-gradient(135deg, #1a3009 0%, #2d5a2d 100%); 
      border-color: #0f1f05;
    }
    body.dark-mode .demo-btn-success:hover { 
      background: linear-gradient(135deg, #2a4019 0%, #3d6a3d 100%); 
    }
    
    body.dark-mode .demo-btn-warning { 
      background: linear-gradient(135deg, #8b6914 0%, #b8860b 100%); 
      color: #1a0f0a; 
      border-color: #6b4f0a;
    }
    body.dark-mode .demo-btn-warning:hover { 
      background: linear-gradient(135deg, #a67c1a 0%, #daa520 100%); 
    }
    
    body.dark-mode .demo-btn-purple { 
      background: linear-gradient(135deg, #2e0050 0%, #4a0082 100%); 
      border-color: #1a0030;
    }
    body.dark-mode .demo-btn-purple:hover { 
      background: linear-gradient(135deg, #4a0082 0%, #6a0dad 100%); 
    }
    
    body.dark-mode .demo-btn-secondary { 
      background: linear-gradient(135deg, #4a4a4a 0%, #696969 100%); 
      border-color: #2a2a2a;
    }
    body.dark-mode .demo-btn-secondary:hover { 
      background: linear-gradient(135deg, #5a5a5a 0%, #808080 100%); 
    }
    
    body.dark-mode .demo-btn-gray { 
      background: linear-gradient(135deg, #556b7a 0%, #708090 100%); 
      color: #e5e5e5; 
      border-color: #3a4a5a;
    }

    /* Reset Progress Modal Styling - Forge Theme */
    #resetModal .modal-header h2 {
      text-align: center;
      color: #f5f5dc;
      font-weight: 700;
    }
    
    #resetModal p {
      text-align: center;
    }

    /* Handicap Viewer Modal Styling */
    #handicapViewerModal {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 10000 !important;
      background: rgba(0, 0, 0, 0.8) !important;
    }

    .handicap-viewer-content {
      max-width: 100vw !important;
      width: 100vw !important;
      max-height: 100vh !important;
      height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      z-index: 10001 !important;
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%) !important;
      border: 2px solid #daa520 !important;
    }

    .handicap-viewer-controls {
      margin-bottom: 20px;
      padding: 20px;
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-bottom: 2px solid #8b4513;
    }

    .handicap-viewer-controls .game-navigation button {
      background: #8b4513;
      color: #f5f5dc;
      border: 1px solid #daa520;
    }

    .handicap-viewer-controls .game-navigation button:hover {
      background: #daa520;
      color: #2d1810;
    }

    .handicap-viewer-controls .game-navigation button:disabled {
      background: #666;
      color: #999;
      border-color: #666;
      cursor: not-allowed;
      opacity: 0.6;
    }

    .handicap-viewer-controls .game-navigation .blacklist-btn {
      background: #8b4513;
      color: #f5f5dc;
      border: 1px solid #daa520;
      padding: 8px 16px;
      font-size: 0.9em;
      white-space: nowrap;
    }

    .handicap-viewer-controls .game-navigation .blacklist-btn:hover {
      background: #daa520;
      color: #2d1810;
    }

    .handicap-viewer-controls .game-navigation .blacklist-btn.active {
      background: #daa520;
      color: #2d1810;
      border-color: #8b4513;
    }

    .handicap-viewer-controls .game-selector input,
    .handicap-viewer-controls .game-selector select {
      background: #f8f6f0;
      border: 1px solid #8b4513;
      color: #2d1810;
    }

    .handicap-viewer-controls .game-selector input:disabled,
    .handicap-viewer-controls .game-selector select:disabled {
      background: #f0f0f0;
      border-color: #ccc;
      color: #999;
      cursor: not-allowed;
      opacity: 0.6;
    }

    .handicap-viewer-controls .filter-group input,
    .handicap-viewer-controls .filter-group select {
      background: #f8f6f0;
      border: 1px solid #8b4513;
      color: #2d1810;
    }

    .game-navigation {
      display: flex;
      align-items: center;
      gap: 15px;
      justify-content: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .game-selector {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 300px;
    }

    .game-selector input,
    .game-selector select {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
    }

    .handicap-filters {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 150px;
    }

    .filter-group label {
      font-weight: 600;
      color: #daa520;
      font-size: 0.9em;
    }

    .filter-group input,
    .filter-group select {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
    }

    .handicap-viewer-content-area {
      height: calc(100vh - 200px);
      display: flex;
      flex-direction: column;
      padding: 15px;
    }

    .game-info {
      text-align: center;
      margin-bottom: 15px;
      padding: 10px;
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border-radius: 8px;
      border: 1px solid #daa520;
    }

    .game-info h3 {
      color: #8b4513;
      margin: 0 0 10px 0;
      font-size: 1.4em;
    }

    .game-info p {
      color: #2c1810;
      margin: 0;
      font-size: 0.9em;
    }

    .handicap-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%) !important;
      border: 1px solid #8b4513 !important;
      margin-bottom: 20px;
      border-radius: 8px;
    }

    .handicap-section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%) !important;
      border: 1px solid #8b4513 !important;
      margin-bottom: 10px;
      border-radius: 8px;
      color: #f5f5dc !important;
    }

    .handicap-section-title .handicap-viewer-btn {
      background: linear-gradient(135deg, #daa520 0%, #cd853f 100%) !important;
      border: 1px solid #8b4513 !important;
      color: #2d1810 !important;
      font-weight: bold;
    }

    .handicap-section-title .handicap-viewer-btn:hover {
      background: linear-gradient(135deg, #cd853f 0%, #daa520 100%) !important;
      border-color: #654321 !important;
      transform: translateY(-1px);
    }

    .handicap-section-header h4 {
      margin: 0;
      color: #daa520 !important;
      font-size: 1.1em;
    }

    .handicap-count {
      background: #8b4513;
      color: white;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 0.8em;
      font-weight: bold;
    }

    .unified-handicap-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 10px;
      align-content: start;
      flex: 1;
      overflow-y: auto;
      padding: 10px 0;
    }

    .unified-handicap-grid.empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }



    .handicap-viewer-item {
      padding: 15px;
      border-radius: 8px;
      border-left: 4px solid;
      background: #f8f9fa;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      min-height: 120px;
    }

    .handicap-viewer-item:hover {
      background: #e9ecef;
      transform: translateX(2px);
    }

    .handicap-viewer-item.common {
      border-left-color: var(--gray);
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .handicap-viewer-item.uncommon {
      border-left-color: var(--success);
      background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
    }

    .handicap-viewer-item.rare {
      border-left-color: var(--secondary);
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    }

    .handicap-viewer-item.legendary {
      border-left-color: var(--purple);
      background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    }

    .handicap-viewer-item.mythic {
      border-left-color: #e91e63;
      background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    }

    .handicap-viewer-item.permanent {
      border-left-width: 6px;
    }

    .handicap-viewer-item.temporary {
      border-left-width: 4px;
    }

    .handicap-name {
      font-weight: bold;
      color: #2c1810;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .handicap-description {
      color: #6c757d;
      font-size: 0.9em;
      margin-bottom: 4px;
    }

    .handicap-rarity {
      font-size: 0.8em;
      font-weight: bold;
      text-transform: uppercase;
      color: #2c1810;
    }

    .handicap-type-badge {
      position: absolute;
      top: 0;
      right: 0;
      width: 24px;
      height: 24px;
      border-radius: 0 8px 0 24px;
      font-size: 0.7em;
      font-weight: bold;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 2px 4px 0 0;
      z-index: 5;
    }

    .handicap-type-badge.permanent {
      background: #17a2b8;
      color: #fff;
    }

    .handicap-type-badge.temporary {
      background: #ffc107;
      color: #2d1810;
    }

    /* Floating Tooltip */
    .handicap-description {
      max-height: 1.8em; /* 1.5 lines - more aggressive truncation */
      overflow: hidden;
      transition: max-height 0.3s ease;
      line-height: 1.2em;
      display: block;
      word-wrap: break-word;
      text-overflow: ellipsis;
    }

    .handicap-viewer-item.description-expanded {
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

    .handicap-viewer-item.description-expanded .handicap-description {
      max-height: none !important;
      display: block !important;
      -webkit-line-clamp: unset !important;
      -webkit-box-orient: unset !important;
      overflow: visible !important;
      white-space: normal !important;
    }

    .expand-description-btn {
      position: absolute;
      bottom: 0;
      right: 0;
      background: #daa520;
      border: 1px solid #8b4513;
      border-radius: 24px 0 8px 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #2d1810;
      font-size: 0.6em;
      transition: all 0.2s ease;
      z-index: 10;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .expand-description-btn:hover {
      background: #daa520;
      transform: scale(1.1);
    }

    .handicap-viewer-item {
      position: relative;
    }

    /* Handicap Viewer Tabs */
    .handicap-viewer-tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
      border-bottom: 2px solid #8b4513;
      padding-bottom: 8px;
    }

    .tab-button {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border: 2px solid #8b4513;
      border-radius: 8px;
      color: #f5f5dc;
      padding: 10px 20px;
      cursor: pointer;
      font-size: 0.9em;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
    }

    .tab-button:hover {
      background: linear-gradient(135deg, #3d2815 0%, #4d3820 100%);
      transform: translateY(-2px);
    }

    .tab-button.active {
      background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
      border-color: #daa520;
      color: #2d1810;
    }

    .tab-content {
      display: none;
      flex: 1;
      overflow: hidden;
    }

    .tab-content.active {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }

    /* Blacklist Mode */
    .blacklist-mode .handicap-viewer-item {
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .blacklist-mode .handicap-viewer-item:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .handicap-viewer-item.selected {
      border: 3px solid #ff6b35;
      background: linear-gradient(135deg, #3d2815 0%, #4d3820 100%);
      transform: scale(1.02);
    }

    .blacklist-toggle.active {
      background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
      border-color: #ff6b35;
      color: white;
    }

    .remove-from-blacklist-btn {
      position: absolute;
      top: 0;
      left: 0;
      width: 24px;
      height: 24px;
      border-radius: 8px 0 24px 0;
      background: #dc3545;
      color: #fff;
      font-size: 0.7em;
      font-weight: bold;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 2px 0 0 4px;
      z-index: 5;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .remove-from-blacklist-btn:hover {
      background: #c82333;
      transform: scale(1.1);
    }

    .selection-indicator {
      position: absolute;
      top: 8px;
      right: 8px;
      background: #28a745;
      border: 2px solid #1e7e34;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.7em;
      font-weight: bold;
      z-index: 10;
    }

    .blacklisted-indicator {
      position: absolute;
      top: 0;
      left: 0;
      background: #dc3545;
      border: 2px solid #c82333;
      border-radius: 0 8px 0 24px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      color: white;
      font-size: 0.6em;
      font-weight: bold;
      z-index: 5;
      padding: 2px 4px 0 0;
    }

    /* Dark mode for expand button */
    body.dark-mode .expand-description-btn {
      background: rgba(139, 69, 19, 0.8);
      border-color: #8b4513;
      color: #f5f5dc;
    }

    body.dark-mode .expand-description-btn:hover {
      background: #8b4513;
    }

    /* Dark mode for handicap viewer */
    body.dark-mode .handicap-viewer-controls {
      background: linear-gradient(135deg, #1a1a1a 0%, #2d1810 100%);
      border-color: #8b4513;
    }

    body.dark-mode .handicap-viewer-controls .game-navigation button {
      background: #8b4513;
      color: #f5f5dc;
      border: 1px solid #daa520;
    }

    body.dark-mode .handicap-viewer-controls .game-navigation button:hover {
      background: #daa520;
      color: #2d1810;
    }

    body.dark-mode .handicap-viewer-controls .game-navigation button:disabled {
      background: #444;
      color: #666;
      border-color: #444;
      cursor: not-allowed;
      opacity: 0.6;
    }

    body.dark-mode .handicap-viewer-controls .game-navigation .blacklist-btn {
      background: #8b4513;
      color: #f5f5dc;
      border: 1px solid #daa520;
    }

    body.dark-mode .handicap-viewer-controls .game-navigation .blacklist-btn:hover {
      background: #daa520;
      color: #2d1810;
    }

    body.dark-mode .handicap-viewer-controls .game-navigation .blacklist-btn.active {
      background: #daa520;
      color: #2d1810;
      border-color: #8b4513;
    }

    body.dark-mode .handicap-viewer-controls .game-selector input,
    body.dark-mode .handicap-viewer-controls .game-selector select {
      background: #2c313a;
      border: 1px solid #8b4513;
      color: #f5f5dc;
    }

    body.dark-mode .handicap-viewer-controls .game-selector input:disabled,
    body.dark-mode .handicap-viewer-controls .game-selector select:disabled {
      background: #1a1a1a;
      border-color: #444;
      color: #666;
      cursor: not-allowed;
      opacity: 0.6;
    }

    body.dark-mode .filter-group label {
      color: #daa520;
    }

    body.dark-mode .filter-group input,
    body.dark-mode .filter-group select {
      background: #2c313a;
      border: 1px solid #8b4513;
      color: #f5f5dc;
    }

    body.dark-mode .game-info {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
    }

    body.dark-mode .game-info h3 {
      color: #daa520;
    }

    body.dark-mode .game-info p {
      color: #f5f5dc;
    }

    body.dark-mode .handicap-section {
      background: rgba(45, 24, 16, 0.3);
      border: 1px solid #8b4513;
      border-radius: 8px;
      padding: 12px;
    }

    body.dark-mode .handicap-section-header {
      background: #3b4252;
      border-color: #4b5263;
    }

    body.dark-mode .handicap-section-header h4 {
      color: #e5e5e5;
    }

    body.dark-mode .handicap-viewer-item {
      background: #3b4252;
      color: #e5e5e5;
    }

    body.dark-mode .handicap-viewer-item:hover {
      background: #4b5263;
    }

    body.dark-mode .handicap-viewer-item.permanent {
      background: linear-gradient(135deg, #3d2815 0%, #4a2d1a 100%);
    }

    body.dark-mode .handicap-viewer-item.temporary {
      background: linear-gradient(135deg, #1a2d3a 0%, #2d4a5a 100%);
    }

    body.dark-mode .handicap-viewer-item.common {
      background: linear-gradient(135deg, #3b4252 0%, #4b5263 100%);
    }

    body.dark-mode .handicap-viewer-item.uncommon {
      background: linear-gradient(135deg, #2d3b2d 0%, #3d4a3d 100%);
    }

    body.dark-mode .handicap-viewer-item.rare {
      background: linear-gradient(135deg, #2d3b4a 0%, #3d4a5a 100%);
    }

    body.dark-mode .handicap-viewer-item.legendary {
      background: linear-gradient(135deg, #3d2d4a 0%, #4d3a5a 100%);
    }

    body.dark-mode .handicap-viewer-item.mythic {
      background: linear-gradient(135deg, #4d2d3a 0%, #5d3a4a 100%);
    }

    body.dark-mode .handicap-section-header {
      background: #3b4252;
      border-color: #4b5263;
    }

    body.dark-mode .handicap-section-header h4 {
      color: #e5e5e5;
    }

    body.dark-mode #handicapViewerModal {
      background: rgba(0, 0, 0, 0.9) !important;
    }

    body.dark-mode .handicap-viewer-content {
      background: #1a1a1a !important;
    }

    body.dark-mode .handicap-name {
      color: #e5e5e5;
    }

    body.dark-mode .handicap-description {
      color: #b8a082;
    }

    /* Mobile responsiveness */
    @media screen and (max-width: 768px) {
      .handicap-sections {
        grid-template-columns: 1fr;
      }
      
      .game-navigation {
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }
      
      .game-navigation .blacklist-btn {
        order: 4;
        flex: 1;
        min-width: 120px;
        margin-top: 10px;
      }
      
      .game-selector {
        min-width: auto;
        width: 100%;
      }
      
      .game-info {
        display: none;
      }
    }

    /* Game Selection Modal Styling - Forge Theme */
    #gameSelectionModal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #gameSelectionModal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
    }
    
    #gameSelectionModal .modal-header {
      position: relative;
      z-index: 1;
      border-bottom: 2px solid #daa520;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      margin: -30px -30px 20px -30px;
      padding: 20px 30px;
      border-radius: 12px 12px 0 0;
    }
    
    #gameSelectionModal .modal-header h2 {
      color: #f5f5dc;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    #gameSelectionModal .modal-header h2 i {
      color: #ff4500;
      text-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
    }
    
    #gameSelectionModal .close {
      color: #f5f5dc;
      font-size: 1.8em;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    
    #gameSelectionModal .close:hover {
      color: #ffd700;
      transform: scale(1.1);
    }
    
    #gameSelectionModal .form-group {
      position: relative;
      z-index: 1;
    }
    
    #gameSelectionModal input[type="text"] {
      background: #f8f6f0;
      border: 2px solid #daa520;
      color: #2c1810;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      border-radius: 8px;
    }
    
    #gameSelectionModal input[type="text"]:focus {
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff8dc;
    }
    
    #gameSelectionModal input[type="text"]::placeholder {
      color: #8b4513;
      font-style: italic;
    }
    
    #gameSelectionModal .game-selection-cards {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 15px;
      max-height: 400px;
      overflow-y: auto;
      padding: 10px 0;
    }
    
    #gameSelectionModal .game-selection-card {
      background: linear-gradient(135deg, #fff8dc 0%, #f5f5dc 100%);
      border: 2px solid #daa520;
      border-radius: 8px;
      padding: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    #gameSelectionModal .game-selection-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
    }
    
    #gameSelectionModal .game-selection-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(139, 69, 19, 0.3);
      border-color: #8b4513;
    }
    
    #gameSelectionModal .game-selection-card h3 {
      color: #8b4513;
      font-weight: 700;
      margin: 0 0 8px 0;
      font-size: 1.1em;
    }
    
    #gameSelectionModal .game-selection-card p {
      color: #2c1810;
      margin: 0;
      font-size: 0.9em;
      line-height: 1.4;
    }
    
    #gameSelectionModal .game-selection-card .handicap-count {
      color: #8b4513;
      font-weight: 600;
      font-size: 0.85em;
      margin-top: 8px;
    }
    
    /* Dark mode for game selection modal */
    body.dark-mode #gameSelectionModal .modal-content {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #gameSelectionModal .modal-header {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-bottom-color: #daa520;
    }
    
    body.dark-mode #gameSelectionModal .modal-header h2 {
      color: #f5f5dc;
    }
    
    body.dark-mode #gameSelectionModal input[type="text"] {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #gameSelectionModal input[type="text"]:focus {
      border-color: #daa520;
      background: #4a2c17;
    }
    
    body.dark-mode #gameSelectionModal input[type="text"]::placeholder {
      color: #b8a082;
    }
    
    body.dark-mode #gameSelectionModal .game-selection-card {
      background: linear-gradient(135deg, #3d2815 0%, #4a2c17 100%);
      border-color: #8b4513;
    }
    
    body.dark-mode #gameSelectionModal .game-selection-card:hover {
      border-color: #daa520;
      box-shadow: 0 6px 20px rgba(218, 165, 32, 0.3);
    }
    
    body.dark-mode #gameSelectionModal .game-selection-card h3 {
      color: #daa520;
    }
    
    body.dark-mode #gameSelectionModal .game-selection-card p {
      color: #f5f5dc;
    }
    
    body.dark-mode #gameSelectionModal .game-selection-card .handicap-count {
      color: #daa520;
    }

    /* Select Game Button and Elements - Forge Theme */
    .game-selection-container {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }
    
    .game-display {
      flex: 1;
      padding: 8px 12px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    
    .game-display.has-game {
      background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
      border: 2px solid #28a745;
      color: #155724;
    }
    
    .game-display.no-game {
      background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
      border: 2px solid #daa520;
      color: #8b4513;
      font-style: italic;
      text-align: center;
    }
    
    .game-display.no-game::before {
      content: '';
      margin-right: 8px;
    }
    
    .btn-sm {
      padding: 6px 12px;
      font-size: 0.85em;
      border-radius: 6px;
    }
    
    /* Forge-themed Select Game button */
    .game-selection-container .btn-primary {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      border: 2px solid #654321;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    .game-selection-container .btn-primary:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .game-selection-container .btn-primary i {
      margin-right: 6px;
    }
    
    /* Placeholder text styling for empty slots */
    .handicap.no-game-placeholder {
      background: linear-gradient(135deg, #fff8dc 0%, #f5f5dc 100%);
      border: 2px solid #daa520;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      color: #8b4513;
      font-style: italic;
      position: relative;
      overflow: hidden;
    }
    
    .handicap.no-game-placeholder::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #8b4513 0%, #daa520 50%, #8b4513 100%);
    }
    
    .handicap.no-game-placeholder::after {
      content:'';;
      font-size: 1.5em;
      display: block;
      margin-bottom: 8px;
    }
    
    /* Dark mode for select game elements */
    body.dark-mode .game-display.has-game {
      background: linear-gradient(135deg, #2d3b2d 0%, #3d4a3d 100%);
      border-color: #67b867;
      color: #d4edda;
    }
    
    body.dark-mode .game-display.no-game {
      background: linear-gradient(135deg, #3d2815 0%, #4a2c17 100%);
      border-color: #8b4513;
      color: #daa520;
    }
    
    body.dark-mode .game-selection-container .btn-primary {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #4a2c17;
    }
    
    body.dark-mode .game-selection-container .btn-primary:hover {
      background: linear-gradient(135deg, #7a4a2a 0%, #a68b5b 100%);
      border-color: #8b4513;
    }
    
    body.dark-mode .handicap.no-game-placeholder {
      background: linear-gradient(135deg, #3d2815 0%, #4a2c17 100%);
      border-color: #8b4513;
      color: #daa520;
    }

    /* Slot Removal Button - Quarter Circle Design */
    .game-delete-btn {
      position: absolute !important;
      top: -16px !important;
      right: -20px !important;
      width: 36px !important;
      height: 36px !important;
      border-radius: 0 0 0 100% !important;
      background: linear-gradient(135deg, #4a0000 0%, #660000 100%) !important;
      border: 2px solid #daa520 !important;
      color: transparent !important;
      font-size: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.2) !important;
      transition: all 0.3s ease !important;
      z-index: 10 !important;
      cursor: pointer !important;
    }
    
    .game-delete-btn:hover {
      background: linear-gradient(135deg, #660000 0%, #4a0000 100%) !important;
      transform: scale(1.1) !important;
      box-shadow: 
        0 6px 16px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 0 20px rgba(220, 20, 60, 0.6) !important;
    }
    
    .game-delete-btn:active {
      transform: scale(0.95) !important;
      box-shadow: 
        0 2px 6px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(0,0,0,0.3),
        inset 0 -1px 2px rgba(255,255,255,0.1) !important;
    }
    
    .game-delete-btn i {
      display: none !important;
    }
    
    /* Ensure the game card and header have relative positioning for absolute button */
    .game-card {
      position: relative !important;
    }
    
    .game-header {
      position: relative !important;
    }
    
    /* Dark mode adjustments for slot removal button */
    body.dark-mode .game-delete-btn {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
      border-color: #daa520 !important;
      box-shadow: 
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    }
    
    body.dark-mode .game-delete-btn:hover {
      background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%) !important;
      box-shadow: 
        0 4px 12px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 0 20px rgba(220, 53, 69, 0.7) !important;
    }
    
    body.dark-mode .game-delete-btn i {
      display: none !important;
    }

    /* Export & Import Seed Modals - Forge Theme */
    #exportModal .modal-content,
    #importModal .modal-content {
      background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
      border: 2px solid #daa520;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    
    #exportModal .modal-content::before,
    #importModal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 0%, rgba(218, 165, 32, 0.1) 50%, transparent 100%);
      pointer-events: none;
    }
    
    #exportModal .modal-header,
    #importModal .modal-header {
      position: relative;
      z-index: 1;
      border-bottom: 2px solid #daa520;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      margin: 0 0 20px 0;
      padding: 20px 30px;
      border-radius: 12px 12px 0 0;
    }
    
    #exportModal .modal-header h2,
    #importModal .modal-header h2 {
      color: #f5f5dc;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    #exportModal .modal-header h2 i,
    #importModal .modal-header h2 i {
      color: #ffd700;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    }
    
    #exportModal .close,
    #importModal .close {
      color: #f5f5dc;
      font-size: 1.8em;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    
    #exportModal .close:hover,
    #importModal .close:hover {
      color: #ffd700;
      transform: scale(1.1);
    }
    
    #exportModal .modal-body,
    #importModal .modal-body {
      position: relative;
      z-index: 1;
      color: #2c1810;
    }
    
    #exportModal p,
    #importModal p {
      color: #2c1810;
      margin-bottom: 15px;
      padding-left: 10px;
      margin-left: 0;
    }
    
    #exportModal .form-group,
    #importModal .form-group {
      position: relative;
      z-index: 1;
    }
    
    #exportModal .form-group label,
    #importModal .form-group label {
      color: #8b4513;
      font-weight: 600;
    }
    
    #exportModal .form-group textarea,
    #exportModal .form-group input,
    #importModal .form-group textarea,
    #importModal .form-group input {
      background: #f8f6f0;
      border: 2px solid #daa520;
      color: #2c1810;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    #exportModal .form-group textarea:focus,
    #exportModal .form-group input:focus,
    #importModal .form-group textarea:focus,
    #importModal .form-group input:focus {
      border-color: #8b4513;
      box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
      background: #fff8dc;
    }
    
    #exportModal .form-group textarea::placeholder,
    #importModal .form-group textarea::placeholder {
      color: #8b4513;
      font-style: italic;
    }
    
    #exportModal .form-actions,
    #importModal .form-actions {
      position: relative;
      z-index: 1;
    }
    
    #exportModal .form-actions .btn-primary,
    #exportModal .form-actions .btn-success,
    #exportModal .form-actions .btn-danger,
    #importModal .form-actions .btn-primary,
    #importModal .form-actions .btn-success,
    #importModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #654321;
      color: #f5f5dc;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }
    
    #exportModal .form-actions .btn-primary:hover,
    #exportModal .form-actions .btn-success:hover,
    #exportModal .form-actions .btn-danger:hover,
    #importModal .form-actions .btn-primary:hover,
    #importModal .form-actions .btn-success:hover,
    #importModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      border-color: #8b4513;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    #exportModal .form-actions .btn-primary i,
    #exportModal .form-actions .btn-success i,
    #importModal .form-actions .btn-primary i,
    #importModal .form-actions .btn-success i {
      margin-right: 8px;
      color: #ffd700;
    }
    
    /* Dark mode for export & import modals */
    body.dark-mode #exportModal .modal-content,
    body.dark-mode #importModal .modal-content {
      background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
      border-color: #8b4513;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    body.dark-mode #exportModal .modal-header,
    body.dark-mode #importModal .modal-header {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
    }
    
    body.dark-mode #exportModal .modal-header h2,
    body.dark-mode #importModal .modal-header h2 {
      color: #daa520;
    }
    
    body.dark-mode #exportModal .close,
    body.dark-mode #importModal .close {
      color: #daa520;
    }
    
    body.dark-mode #exportModal .close:hover,
    body.dark-mode #importModal .close:hover {
      color: #ffd700;
    }
    
    body.dark-mode #exportModal .modal-body,
    body.dark-mode #importModal .modal-body {
      color: #f5f5dc;
    }
    
    body.dark-mode #exportModal p,
    body.dark-mode #importModal p {
      color: #f5f5dc;
      padding-left: 10px;
      margin-left: 0;
    }
    
    body.dark-mode #exportModal .form-group label,
    body.dark-mode #importModal .form-group label {
      color: #daa520;
    }
    
    body.dark-mode #exportModal .form-group textarea,
    body.dark-mode #exportModal .form-group input,
    body.dark-mode #importModal .form-group textarea,
    body.dark-mode #importModal .form-group input {
      background: #3d2815;
      border-color: #8b4513;
      color: #f5f5dc;
    }
    
    body.dark-mode #exportModal .form-group textarea:focus,
    body.dark-mode #exportModal .form-group input:focus,
    body.dark-mode #importModal .form-group textarea:focus,
    body.dark-mode #importModal .form-group input:focus {
      border-color: #daa520;
      box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
      background: #2d1810;
    }
    
    body.dark-mode #exportModal .form-group textarea::placeholder,
    body.dark-mode #importModal .form-group textarea::placeholder {
      color: #daa520;
    }
    
    body.dark-mode #exportModal .form-actions .btn-primary,
    body.dark-mode #exportModal .form-actions .btn-success,
    body.dark-mode #exportModal .form-actions .btn-danger,
    body.dark-mode #importModal .form-actions .btn-primary,
    body.dark-mode #importModal .form-actions .btn-success,
    body.dark-mode #importModal .form-actions .btn-danger {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
      color: #f5f5dc;
    }
    
    body.dark-mode #exportModal .form-actions .btn-primary:hover,
    body.dark-mode #exportModal .form-actions .btn-success:hover,
    body.dark-mode #exportModal .form-actions .btn-danger:hover,
    body.dark-mode #importModal .form-actions .btn-primary:hover,
    body.dark-mode #importModal .form-actions .btn-success:hover,
    body.dark-mode #importModal .form-actions .btn-danger:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-color: #ffd700;
    }

    /* Onboarding Modal - Demo Elements Match Challenge Page Forge Theme */
    #onboardingModal .demo-challenge-interface {
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 40px;
      margin: 30px 0;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
      position: relative;
      overflow: visible; /* Allow content to breathe */
      min-height: 600px; /* Much more space for content */
      max-width: 100%; /* Use full available width */
    }
    
    #onboardingModal .demo-challenge-interface::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(218, 165, 32, 0.03) 25%, 
        transparent 50%, 
        rgba(218, 165, 32, 0.03) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    #onboardingModal .demo-slot {
      background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 35px;
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      margin-bottom: 30px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      min-height: 180px; /* Much more space for content */
      display: flex;
      flex-direction: column;
      justify-content: flex-start; /* Allow natural spacing */
      width: 100%; /* Use full width available */
    }
    
    #onboardingModal .demo-slot.completed {
      background: linear-gradient(135deg, #1e3a1e 0%, #2d4a2d 100%);
      border-color: #28a745;
    }
    
    #onboardingModal .demo-slot.completed .demo-slot-title {
      color: #28a745;
    }
    
    #onboardingModal .demo-slot-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 25px;
      padding-right: 0; /* Remove right padding constraint */
      min-height: 80px; /* Much more space for header elements */
      gap: 20px; /* Add gap between elements */
    }
    
    #onboardingModal .demo-slot-title {
      font-weight: bold;
      font-size: 1.3em;
      color: #ffd700;
      display: flex;
      align-items: center;
      gap: 15px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      min-width: 120px; /* Ensure title has adequate space */
      flex-shrink: 0; /* Prevent title from shrinking */
    }
    
    #onboardingModal .demo-slot-status {
      font-size: 1.1em;
      color: #ffd700;
      display: flex;
      gap: 20px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      min-width: 150px; /* Ensure adequate space for status */
      flex-shrink: 0; /* Prevent status from shrinking */
      align-items: center;
    }
    
    #onboardingModal .game-selection-container {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1; /* Take up available space */
      min-width: 200px; /* Ensure adequate minimum width */
    }
    
    #onboardingModal .game-display {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #daa520;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 1em;
      margin-bottom: 0;
      color: #ffd700;
      min-height: 48px; /* Adequate height for content */
      display: flex;
      align-items: center;
      width: 100%;
    }
    
    #onboardingModal .game-display.has-game {
      background: rgba(255, 255, 255, 0.2);
      color: #ffd700;
    }
    
    #onboardingModal .game-display.no-game {
      background: rgba(255, 255, 255, 0.05);
      color: #ccc;
      font-style: italic;
    }
    
    #onboardingModal .btn-primary.btn-sm {
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 1em;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      border: 1px solid #daa520;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      min-height: 48px; /* Adequate height for touch */
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    #onboardingModal .game-delete-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
      border: 2px solid #dc3545;
      border-bottom-left-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2em;
      color: white;
      cursor: pointer;
      opacity: 1;
      transition: all 0.2s ease-in-out;
      z-index: 10;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    
    #onboardingModal .game-delete-btn:hover {
      opacity: 1;
      background: linear-gradient(135deg, #ff1744 0%, #dc143c 100%);
      color: white;
      transform: scale(1.1);
    }
    
    #onboardingModal .handicap-section {
      margin-bottom: 15px;
    }
    
    #onboardingModal .handicap-section strong {
      display: block;
      margin-bottom: 6px;
      color: #ffd700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #onboardingModal .handicap {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #daa520;
      border-radius: 6px;
      padding: 10px;
      font-size: 0.9em;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #f5f5f5;
    }
    
    #onboardingModal .handicap.permanent {
      border-left: 4px solid #dc3545;
    }
    
    #onboardingModal .handicap.temporary {
      border-left: 4px solid #ffc107;
    }
    
    #onboardingModal .handicap.common {
      background: rgba(108, 117, 125, 0.2);
      border-left-color: #6c757d !important;
    }
    
    #onboardingModal .handicap.uncommon {
      background: rgba(40, 167, 69, 0.2);
      border-left-color: #28a745 !important;
    }
    
    #onboardingModal .timer-widget {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #daa520;
      border-radius: 6px;
    }
    
    #onboardingModal .timer-display {
      font-family: monospace;
      font-size: 1.2em;
      font-weight: bold;
      color: #ffd700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #onboardingModal .timer-btn {
      padding: 6px 10px;
      font-size: 0.9em;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      border: 1px solid #daa520;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    #onboardingModal .timer-btn.btn-success {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      border-color: #28a745;
    }
    
    #onboardingModal .timer-btn.btn-warning {
      background: linear-gradient(135deg, #ffc107 0%, #ffed4e 100%);
      border-color: #ffc107;
      color: #2c1810;
    }
    
    #onboardingModal .timer-btn.btn-danger {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
      border-color: #dc3545;
    }
    
    #onboardingModal .controls {
      display: flex;
      gap: 12px;
      margin-top: 15px;
      flex-wrap: wrap;
    }
    
    #onboardingModal .btn-primary {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      border: 1px solid #daa520;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      padding: 10px 15px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    
    #onboardingModal .btn-primary:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }
    
    #onboardingModal .btn-success {
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%);
      color: white;
      border: 1px solid #28a745;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      padding: 10px 15px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    
    #onboardingModal .btn-success:hover {
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }
    
    #onboardingModal .action-button {
      width: 100%;
      text-align: left;
      padding: 12px;
      justify-content: flex-start;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: white;
      border: 1px solid #daa520;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
    }
    
    #onboardingModal .action-button.btn-success {
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%);
      border: 1px solid #28a745;
    }
    
    #onboardingModal .action-button.btn-success:hover {
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }
    
    #onboardingModal .action-button.btn-warning {
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
      color: #2c1810;
      border: 1px solid #daa520;
      font-weight: 600;
    }
    
    #onboardingModal .action-button.btn-warning:hover {
      background: linear-gradient(135deg, #daa520 0%, #ffff00 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }
    
    #onboardingModal .action-button.btn-purple {
      background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%);
      color: white;
      border: 1px solid #6f42c1;
    }
    
    #onboardingModal .action-button.btn-purple:hover {
      background: linear-gradient(135deg, #6a0dad 0%, #a855f7 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }
    
    #onboardingModal .action-button.btn-danger {
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
      color: white;
      border: 1px solid #dc3545;
    }
    
    #onboardingModal .action-button.btn-danger:hover {
      background: linear-gradient(135deg, #a00000 0%, #ff1744 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }
    
    #onboardingModal .token-counter {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 1.2em;
      margin: 15px 0;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #daa520;
      border-radius: 6px;
      padding: 10px 15px;
    }
    
    #onboardingModal .token-icon {
      color: #ffd700;
      font-size: 1.5em;
    }
    
    #onboardingModal .token-value {
      font-weight: bold;
      font-size: 1.3em;
      color: #ffd700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #onboardingModal .demo-explanation {
      font-size: 0.85em;
      color: #ccc;
      font-style: italic;
      margin-top: 5px;
      padding: 5px 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      border-left: 3px solid #daa520;
    }
    
    #onboardingModal .onboarding-demo {
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
      position: relative;
      overflow: hidden;
    }
    
    #onboardingModal .onboarding-demo::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(218, 165, 32, 0.03) 25%, 
        transparent 50%, 
        rgba(218, 165, 32, 0.03) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    /* Onboarding Modal - Main Content Theming */
    #onboardingModal .modal-content {
      background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    
    #onboardingModal .modal-header {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: #ffd700;
      border-bottom: 2px solid #daa520;
      padding: 20px;
      border-radius: 10px 10px 0 0;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #onboardingModal .modal-header h2 {
      color: #ffd700;
      font-size: 1.8em;
      margin: 0;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #onboardingModal .close {
      color: #ffd700;
      font-size: 1.5em;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #onboardingModal .close:hover {
      color: #fff;
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    }
    
    #onboardingModal .modal-body {
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      color: #f5f5f5;
      padding: 25px;
      position: relative;
      overflow: hidden;
    }
    
    #onboardingModal .modal-body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(218, 165, 32, 0.02) 25%, 
        transparent 50%, 
        rgba(218, 165, 32, 0.02) 75%, 
        transparent 100%);
      pointer-events: none;
    }
    
    #onboardingModal .onboarding-section {
      margin-bottom: 25px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(218, 165, 32, 0.3);
      border-radius: 8px;
    }
    
    #onboardingModal .onboarding-section h3 {
      color: #ffd700;
      font-size: 1.3em;
      margin-bottom: 15px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      border-bottom: 2px solid #daa520;
      padding-bottom: 8px;
    }
    
    #onboardingModal .onboarding-section p {
      color: #f5f5f5;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    
    #onboardingModal .onboarding-section ol,
    #onboardingModal .onboarding-section ul {
      color: #f5f5f5;
      padding-left: 20px;
    }
    
    #onboardingModal .onboarding-section li {
      margin-bottom: 8px;
      line-height: 1.5;
    }
    
    #onboardingModal .onboarding-section strong {
      color: #ffd700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    #onboardingModal .modal-footer {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border-top: 2px solid #daa520;
      padding: 20px;
      border-radius: 0 0 10px 10px;
      display: flex;
      gap: 15px;
      justify-content: flex-end;
    }
    
    #onboardingModal .modal-footer .btn-primary,
    #onboardingModal .modal-footer .btn-success,
    #onboardingModal .modal-footer .btn-secondary {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      color: #ffd700;
      border: 2px solid #daa520;
      padding: 12px 20px;
      border-radius: 6px;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
    }
    
    #onboardingModal .modal-footer .btn-success {
      background: linear-gradient(135deg, #2d5016 0%, #4caf50 100%);
      border-color: #28a745;
    }
    
    #onboardingModal .modal-footer .btn-secondary {
      background: linear-gradient(135deg, #696969 0%, #a9a9a9 100%);
      border-color: #808080;
    }
    
    #onboardingModal .modal-footer .btn-primary:hover,
    #onboardingModal .modal-footer .btn-success:hover,
    #onboardingModal .modal-footer .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }
    
    #onboardingModal .modal-footer .btn-primary:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
    }
    
    #onboardingModal .modal-footer .btn-success:hover {
      background: linear-gradient(135deg, #3d7026 0%, #66bb6a 100%);
    }
    
    #onboardingModal .modal-footer .btn-secondary:hover {
      background: linear-gradient(135deg, #808080 0%, #c0c0c0 100%);
    }



    /* SUPER STYLIZED ACHIEVEMENT THEME - Game Completion Miracle Modal */
    #gameCompletionMiracleModal .modal-content {
      background: linear-gradient(135deg, #1a1a1a 0%, #2d1810 50%, #1a1a1a 100%);
      border: 3px solid #ffd700;
      border-radius: 20px;
      box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.3),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
      position: relative;
      overflow-y: auto;
      overflow-x: hidden;
      height: auto;
      min-height: 200px;
      max-height: 90vh;
      scroll-behavior: auto;
      overscroll-behavior: none;
      scrollbar-width: none;
      -ms-overflow-style: none;
      position: relative;
      animation: achievementGlow 2s ease-in-out infinite alternate;
    }
    
    #gameCompletionMiracleModal .modal-content::-webkit-scrollbar {
      display: none;
    }
    
    #gameCompletionMiracleModal .modal-body {
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overscroll-behavior: none;
      scroll-snap-type: y mandatory;
      position: relative;
      z-index: 2;
    }
    
    #gameCompletionMiracleModal .modal-body::-webkit-scrollbar {
      display: none;
    }
    
    #gameCompletionMiracleModal .miracle-choices {
      scroll-snap-align: end;
      padding-bottom: 20px;
    }
    
    #gameCompletionMiracleModal .miracle-choice:last-child {
      scroll-snap-align: end;
      margin-bottom: 0;
    }
    
    
    #gameCompletionMiracleModal h2 {
      background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 1.8em;
      text-align: center;
      margin-bottom: 15px;
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
      filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
      position: relative;
      z-index: 2;
    }
    
    #gameCompletionMiracleModal p {
      color: #ffd700;
      font-size: 1em;
      text-align: center;
      margin-bottom: 20px;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    
    #gameCompletionMiracleModal .miracle-choices {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 20px;
    }
    
    #gameCompletionMiracleModal .miracle-choice {
      background: linear-gradient(135deg, #2d1810 0%, #4a2c1a 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    
    #gameCompletionMiracleModal .miracle-choice:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
      border-color: #ffd700;
    }
    
    #gameCompletionMiracleModal .miracle-choice::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
      transition: left 0.5s ease;
    }
    
    #gameCompletionMiracleModal .miracle-choice:hover::before {
      left: 100%;
    }
    
    #gameCompletionMiracleModal .choice-icon {
      font-size: 2em;
      margin-bottom: 8px;
      color: #ffd700;
      text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }
    
    #gameCompletionMiracleModal .miracle-choice h3 {
      color: #ffd700;
      font-size: 1.1em;
      margin-bottom: 6px;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    }
    
    #gameCompletionMiracleModal .miracle-choice p {
      color: #f5f5f5;
      font-size: 0.85em;
      margin: 0;
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    
    @keyframes achievementGlow {
      0% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.1); }
      100% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 215, 0, 0.5), inset 0 0 30px rgba(255, 215, 0, 0.2); }
    }
    
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    /* SUPER STYLIZED ACHIEVEMENT THEME - 1% Chance Miracle Modal */
    #miracleEventModal .modal-content {
      background: linear-gradient(135deg, #1a1a1a 0%, #2d1810 50%, #1a1a1a 100%);
      border: 3px solid #ffd700;
      border-radius: 20px;
      box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.3),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
      position: relative;
      overflow-y: auto;
      overflow-x: hidden;
      height: auto;
      min-height: 200px;
      max-height: 90vh;
      scroll-behavior: auto;
      overscroll-behavior: none;
      scrollbar-width: none;
      -ms-overflow-style: none;
      position: relative;
      animation: achievementGlow 2s ease-in-out infinite alternate;
    }
    
    #miracleEventModal .modal-content::-webkit-scrollbar {
      display: none;
    }
    
    #miracleEventModal h2 {
      background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: 1.8em;
      text-align: center;
      margin-bottom: 15px;
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
      filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    }
    
    #miracleEventModal p {
      color: #ffd700;
      font-size: 1em;
      text-align: center;
      margin-bottom: 20px;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    
    #miracleEventModal .miracle-choices {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 20px;
    }
    
    #miracleEventModal .miracle-choice {
      background: linear-gradient(135deg, #2d1810 0%, #4a2c1a 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    
    #miracleEventModal .miracle-choice:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
      border-color: #ffd700;
    }
    
    #miracleEventModal .miracle-choice::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
      transition: left 0.5s ease;
    }
    
    #miracleEventModal .miracle-choice:hover::before {
      left: 100%;
    }
    
    #miracleEventModal .choice-icon {
      font-size: 2em;
      margin-bottom: 8px;
      color: #ffd700;
      text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }
    
    #miracleEventModal .miracle-choice h3 {
      color: #ffd700;
      font-size: 1.1em;
      margin-bottom: 6px;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    }
    
    #miracleEventModal .miracle-choice p {
      color: #f5f5f5;
      font-size: 0.85em;
      margin: 0;
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    
    #miracleEventModal .modal-body {
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overscroll-behavior: none;
      scroll-snap-type: y mandatory;
      position: relative;
      z-index: 2;
    }
    
    #miracleEventModal .modal-body::-webkit-scrollbar {
      display: none;
    }
    
    #miracleEventModal .miracle-choices {
      scroll-snap-align: end;
      padding-bottom: 20px;
    }
    
    #miracleEventModal .miracle-choice:last-child {
      scroll-snap-align: end;
      margin-bottom: 0;
    }

    /* Steam Integration Styles */
    .steam-integration-section {
      margin-top: 20px;
      background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
      border: 2px solid #66c0f4;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .steam-integration-section .section-header h3 {
      color: #66c0f4;
      margin-bottom: 15px;
      font-size: 1.3em;
      text-shadow: 0 0 10px rgba(102, 192, 244, 0.5);
    }

    .steam-integration-actions {
      text-align: center;
      padding: 20px;
    }

    .steam-integration-actions .btn-primary {
      background: linear-gradient(135deg, #66c0f4 0%, #4f9fd4 100%);
      border: 2px solid #4f9fd4;
      color: #1b2838;
      font-weight: 600;
      padding: 15px 30px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
    }

    .steam-integration-actions .btn-primary:hover {
      background: linear-gradient(135deg, #4f9fd4 0%, #66c0f4 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(102, 192, 244, 0.4);
    }

    .steam-btn {
      background: linear-gradient(135deg, #66c0f4 0%, #4f9fd4 100%) !important;
      border: 2px solid #4f9fd4 !important;
      color: #1b2838 !important;
      font-weight: 600 !important;
      padding: 15px 30px !important;
      border-radius: 8px !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      font-size: 16px !important;
      box-shadow: 0 4px 12px rgba(102, 192, 244, 0.3) !important;
    }

    .steam-btn:hover {
      background: linear-gradient(135deg, #4f9fd4 0%, #66c0f4 100%) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 16px rgba(102, 192, 244, 0.4) !important;
    }

    .steam-description {
      color: #c7d5e0;
      margin-top: 15px;
      font-size: 14px;
      line-height: 1.5;
    }

    .steam-status {
      background: rgba(27, 40, 56, 0.9);
      border-radius: 6px;
      padding: 12px;
      border-left: 4px solid #66c0f4;
    }

    .steam-status p {
      margin: 0;
      font-weight: 500;
    }

    /* Dark mode adjustments for Steam integration */
    body.dark-mode .steam-integration-section {
      background: linear-gradient(135deg, #0f1419 0%, #1b2838 100%);
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-description {
      color: #8f98a0;
    }

    body.dark-mode .steam-status {
      background: rgba(15, 20, 25, 0.9);
      border-left-color: #4f9fd4;
    }

    /* Steam Modal Styles */
    #steamModal .modal-content {
      background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
      border: 2px solid #66c0f4;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

    #steamModal .modal-header {
      background: linear-gradient(135deg, #0f1419 0%, #1b2838 100%);
      border-bottom: 2px solid #66c0f4;
    }

    #steamModal .modal-header h2 {
      color: #66c0f4;
      text-shadow: 0 0 10px rgba(102, 192, 244, 0.5);
    }

    #steamModal .modal-body {
      background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
    }

    .steam-modal-content .form-group label {
      color: #c7d5e0;
      font-weight: 600;
    }

    .steam-modal-content .form-group input,
    .steam-modal-content .form-group select {
      background: #0f1419;
      border: 2px solid #66c0f4;
      color: #c7d5e0;
      border-radius: 6px;
      padding: 12px;
      width: 100%;
    }
    
    .steam-modal-content .form-group select {
      cursor: pointer;
    }

    .steam-modal-content .form-group input:focus,
    .steam-modal-content .form-group select:focus {
      outline: none;
      border-color: #4f9fd4;
      box-shadow: 0 0 8px rgba(102, 192, 244, 0.3);
    }

    .steam-modal-content .form-group input::placeholder {
      color: #8f98a0;
    }

    .steam-modal-content .hint {
      color: #8f98a0;
      font-size: 0.9em;
      margin-top: 5px;
    }

    .steam-modal-content .steam-info {
      background: rgba(15, 20, 25, 0.8);
      border: 1px solid #66c0f4;
      border-radius: 6px;
      padding: 15px;
      margin-top: 20px;
    }

    .steam-modal-content .steam-info h3 {
      color: #66c0f4;
      margin-bottom: 10px;
      font-size: 1.1em;
    }

    .steam-modal-content .steam-info ol {
      margin-left: 20px;
      color: #8f98a0;
    }

    .steam-modal-content .steam-info li {
      margin-bottom: 5px;
      line-height: 1.4;
    }

    .steam-modal-content .steam-info a {
      color: #66c0f4;
      text-decoration: none;
    }

    .steam-modal-content .steam-info a:hover {
      color: #4f9fd4;
      text-decoration: underline;
    }

    .steam-modal-content .steam-status {
      background: rgba(15, 20, 25, 0.9);
      border-radius: 6px;
      padding: 12px;
      border-left: 4px solid #66c0f4;
      margin-top: 15px;
    }

    .steam-warning {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      background: rgba(15, 20, 25, 0.8);
      border: 1px solid #f39c12;
      border-radius: 8px;
      padding: 15px;
      margin-top: 15px;
    }

    .steam-warning-bubble {
      background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
      border: 2px solid #f39c12;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
      animation: steam-warning-pulse 2s infinite;
    }

    .steam-warning-bubble i {
      color: #0f1419;
      font-size: 1.2em;
      font-weight: bold;
    }

    .steam-warning p {
      color: #c7d5e0;
      margin: 0;
      line-height: 1.5;
      flex: 1;
    }

    .steam-warning strong {
      color: #f39c12;
    }

    @keyframes steam-warning-pulse {
      0% {
        box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
      }
      50% {
        box-shadow: 0 2px 8px rgba(243, 156, 18, 0.6), 0 0 15px rgba(243, 156, 18, 0.4);
      }
      100% {
        box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
      }
    }

    /* Steam Error Modal Styles */
    #steamErrorModal .modal-content {
      background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
      border: 2px solid #e74c3c;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

    #steamErrorModal .modal-header {
      background: linear-gradient(135deg, #0f1419 0%, #1b2838 100%);
      border-bottom: 2px solid #e74c3c;
    }

    #steamErrorModal .modal-header h2 {
      color: #e74c3c;
      text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
    }

    #steamErrorModal .modal-body {
      background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
      color: #c7d5e0;
    }

    .steam-error-icon {
      text-align: center;
      margin-bottom: 20px;
    }

    .steam-error-icon i {
      font-size: 4rem;
      color: #e74c3c;
      text-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
    }

    .steam-error-content h3 {
      color: #e74c3c;
      text-align: center;
      margin-bottom: 15px;
      font-size: 1.4em;
    }

    .steam-error-content p {
      color: #c7d5e0;
      text-align: center;
      margin-bottom: 25px;
      font-size: 1.1em;
    }

    .steam-error-solution {
      background: rgba(15, 20, 25, 0.8);
      border: 1px solid #e74c3c;
      border-radius: 6px;
      padding: 20px;
      margin-bottom: 20px;
    }

    .steam-error-solution h4 {
      color: #e74c3c;
      margin-bottom: 15px;
      font-size: 1.1em;
    }

    .steam-error-solution ul {
      margin-left: 20px;
      color: #c7d5e0;
    }

    .steam-error-solution li {
      margin-bottom: 8px;
      line-height: 1.5;
    }

    .steam-error-solution strong {
      color: #66c0f4;
    }

    .steam-error-help {
      background: rgba(15, 20, 25, 0.8);
      border: 1px solid #66c0f4;
      border-radius: 6px;
      padding: 20px;
    }

    .steam-error-help h4 {
      color: #66c0f4;
      margin-bottom: 15px;
      font-size: 1.1em;
    }

    .steam-error-help ol {
      margin-left: 20px;
      color: #c7d5e0;
    }

    .steam-error-help li {
      margin-bottom: 8px;
      line-height: 1.5;
    }

    .steam-error-help a {
      color: #66c0f4;
      text-decoration: none;
    }

    .steam-error-help a:hover {
      color: #4f9fd4;
      text-decoration: underline;
    }

    #steamErrorModal .modal-footer {
      background: linear-gradient(135deg, #0f1419 0%, #1b2838 100%);
      border-top: 2px solid #e74c3c;
    }

    #steamErrorModal .btn-primary {
      background: linear-gradient(135deg, #66c0f4 0%, #4f9fd4 100%);
      border: 2px solid #66c0f4;
      color: #0f1419;
      font-weight: 600;
    }

    #steamErrorModal .btn-primary:hover {
      background: linear-gradient(135deg, #4f9fd4 0%, #66c0f4 100%);
      box-shadow: 0 0 15px rgba(102, 192, 244, 0.4);
    }

    #steamErrorModal .modal-close {
      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
      border: 2px solid #e74c3c;
      color: white;
      font-size: 1.2em;
      font-weight: bold;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    }

    #steamErrorModal .modal-close:hover {
      background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
      box-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
      transform: scale(1.1);
    }

    #steamErrorModal .modal-close:active {
      transform: scale(0.95);
    }

    .steam-modal-content .steam-status p {
      margin: 0;
      font-weight: 500;
    }

    #steamModal .modal-footer .btn-primary {
      background: linear-gradient(135deg, #66c0f4 0%, #4f9fd4 100%);
      border: 2px solid #4f9fd4;
      color: #1b2838;
      font-weight: 600;
    }

    #steamModal .modal-footer .btn-primary:hover {
      background: linear-gradient(135deg, #4f9fd4 0%, #66c0f4 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(102, 192, 244, 0.4);
    }

    /* Dark mode adjustments for Steam modal */
    body.dark-mode #steamModal .modal-content {
      background: linear-gradient(135deg, #0f1419 0%, #1b2838 100%);
      border-color: #4f9fd4;
    }

    body.dark-mode #steamModal .modal-header {
      background: linear-gradient(135deg, #0a0e12 0%, #0f1419 100%);
      border-bottom-color: #4f9fd4;
    }

    body.dark-mode #steamModal .modal-body {
      background: linear-gradient(135deg, #0f1419 0%, #1b2838 100%);
    }

    body.dark-mode .steam-modal-content .form-group input {
      background: #0a0e12;
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-modal-content .form-group input:focus {
      border-color: #66c0f4;
      box-shadow: 0 0 8px rgba(102, 192, 244, 0.4);
    }

    body.dark-mode .steam-modal-content .steam-info {
      background: rgba(10, 14, 18, 0.9);
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-modal-content .steam-status {
      background: rgba(10, 14, 18, 0.9);
      border-left-color: #4f9fd4;
    }

    /* Enhanced Steam Game Selection Interface */
    .steam-game-selection {
      display: none;
      margin-top: 20px;
    }

    .steam-game-selection.show {
      display: block !important;
    }

    .steam-search-controls {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      align-items: center;
    }

    .steam-search-box {
      flex: 1;
      min-width: 250px;
      position: relative;
    }

    .steam-search-box input {
      width: 100%;
      padding: 12px 40px 12px 15px;
      background: rgba(15, 20, 25, 0.9);
      border: 2px solid #66c0f4;
      border-radius: 8px;
      color: #c7d5e0;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .steam-search-box input:focus {
      outline: none;
      border-color: #4f9fd4;
      box-shadow: 0 0 8px rgba(102, 192, 244, 0.4);
    }

    .steam-search-box .search-icon {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #66c0f4;
      font-size: 16px;
    }

    .steam-genre-filter {
      min-width: 200px;
    }

    .steam-genre-filter select {
      width: 100%;
      padding: 12px 15px;
      background: rgba(15, 20, 25, 0.9);
      border: 2px solid #66c0f4;
      border-radius: 8px;
      color: #c7d5e0;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .steam-genre-filter select:focus {
      outline: none;
      border-color: #4f9fd4;
      box-shadow: 0 0 8px rgba(102, 192, 244, 0.4);
    }

    .steam-sort-controls {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .steam-sort-controls select {
      padding: 8px 12px;
      background: rgba(15, 20, 25, 0.9);
      border: 2px solid #66c0f4;
      border-radius: 6px;
      color: #c7d5e0;
      font-size: 12px;
      cursor: pointer;
    }

    .steam-selection-stats {
      background: rgba(15, 20, 25, 0.8);
      border: 1px solid #66c0f4;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .steam-selection-stats .stats-left {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .steam-selection-stats .stats-right {
      display: flex;
      gap: 15px;
      align-items: center;
    }

    .steam-selection-stats .stat-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #c7d5e0;
      font-size: 14px;
    }

    .steam-selection-stats .stat-number {
      background: linear-gradient(135deg, #66c0f4 0%, #4f9fd4 100%);
      color: #1b2838;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 12px;
    }

    .steam-bulk-actions {
      display: flex;
      gap: 10px;
    }

    .steam-bulk-actions button {
      padding: 8px 16px;
      background: rgba(102, 192, 244, 0.1);
      border: 1px solid #66c0f4;
      border-radius: 6px;
      color: #66c0f4;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .steam-bulk-actions button:hover {
      background: rgba(102, 192, 244, 0.2);
      transform: translateY(-1px);
    }

    .steam-games-list {
      max-height: 400px;
      overflow-y: auto;
      border: 2px solid #66c0f4;
      border-radius: 8px;
      background: rgba(15, 20, 25, 0.9);
    }

    .steam-game-item {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid rgba(102, 192, 244, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
    }

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

    .steam-game-item:hover {
      background: rgba(102, 192, 244, 0.1);
    }

    .steam-game-item.selected {
      background: rgba(102, 192, 244, 0.2);
      border-left: 4px solid #66c0f4;
    }

    .steam-game-checkbox {
      margin-right: 15px;
      width: 18px;
      height: 18px;
      accent-color: #66c0f4;
      cursor: pointer;
    }

    .steam-game-icon {
      width: 40px;
      height: 40px;
      margin-right: 15px;
      border-radius: 4px;
      background: #1b2838;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #8f98a0;
    }

    .steam-game-icon img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      object-fit: cover;
    }

    .steam-game-details {
      flex: 1;
      min-width: 0;
    }

    .steam-game-name {
      font-weight: 600;
      color: #c7d5e0;
      margin-bottom: 4px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .steam-game-meta {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #8f98a0;
    }

    .steam-game-playtime {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .steam-game-genre {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .steam-game-developer {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .metacritic-score {
      background: #66c0f4;
      color: #1b2838;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 600;
      margin-left: 8px;
    }

    .steam-game-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .steam-game-actions button {
      padding: 6px 12px;
      background: rgba(102, 192, 244, 0.1);
      border: 1px solid #66c0f4;
      border-radius: 4px;
      color: #66c0f4;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .steam-game-actions button:hover {
      background: rgba(102, 192, 244, 0.2);
    }

    .steam-game-actions button.selected {
      background: #66c0f4;
      color: #1b2838;
    }

    .steam-no-games {
      text-align: center;
      padding: 40px 20px;
      color: #8f98a0;
    }

    .steam-no-games i {
      font-size: 48px;
      margin-bottom: 15px;
      color: #66c0f4;
    }

    .steam-loading {
      text-align: center;
      padding: 40px 20px;
      color: #66c0f4;
    }

    .steam-loading i {
      font-size: 24px;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }

    .steam-loading p {
      margin: 10px 0 0 0;
      color: #66c0f4;
    }
    
    .steam-loading-progress {
      font-size: 0.9em;
      color: #8f98a0;
      font-style: italic;
    }

    /* Floating Loader Styles */
    .floating-loader {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      background: linear-gradient(135deg, #2d1810 0%, #4a2c1a 100%);
      border: 2px solid #daa520;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
      width: 250px;
      animation: loaderSlideIn 0.3s ease-out;
    }

    .loader-content {
      padding: 15px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .loader-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #daa520 0%, #ffd700 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2d1810;
      font-size: 14px;
      animation: loaderHammer 1.5s ease-in-out infinite;
    }

    .loader-text {
      flex: 1;
      min-width: 0;
    }

    .loader-title {
      color: #ffd700;
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 2px;
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }

    .loader-subtitle {
      color: #c7d5e0;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 16px;
      line-height: 16px;
    }

    .loader-progress {
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 8px;
    }

    .loader-bar {
      height: 100%;
      background: linear-gradient(90deg, #daa520 0%, #ffd700 50%, #daa520 100%);
      border-radius: 2px;
      width: 0%;
      transition: width 0.3s ease;
      animation: loaderShimmer 2s ease-in-out infinite;
    }

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

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

    @keyframes loaderShimmer {
      0% {
        background-position: -200% 0;
      }
      100% {
        background-position: 200% 0;
      }
    }

    /* Dark mode adjustments for floating loader */
    body.dark-mode .floating-loader {
      background: linear-gradient(135deg, #1a0f0a 0%, #2d1810 100%);
      border-color: #8b4513;
    }

    body.dark-mode .loader-icon {
      background: linear-gradient(135deg, #8b4513 0%, #daa520 100%);
    }

    body.dark-mode .loader-title {
      color: #daa520;
    }

    body.dark-mode .loader-subtitle {
      color: #b8a082;
    }

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

    /* Dark mode adjustments for enhanced Steam modal */
    body.dark-mode .steam-search-box input {
      background: rgba(10, 14, 18, 0.9);
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-genre-filter select {
      background: rgba(10, 14, 18, 0.9);
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-sort-controls select {
      background: rgba(10, 14, 18, 0.9);
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-selection-stats {
      background: rgba(10, 14, 18, 0.8);
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-games-list {
      background: rgba(10, 14, 18, 0.9);
      border-color: #4f9fd4;
    }

    body.dark-mode .steam-game-item {
      border-bottom-color: rgba(79, 159, 212, 0.2);
    }

    body.dark-mode .steam-game-item:hover {
      background: rgba(79, 159, 212, 0.1);
    }

    body.dark-mode .steam-game-item.selected {
      background: rgba(79, 159, 212, 0.2);
      border-left-color: #4f9fd4;
    }

    body.dark-mode .steam-game-icon {
      background: #0a0e12;
    }

    body.dark-mode .steam-bulk-actions button {
      border-color: #4f9fd4;
      color: #4f9fd4;
    }

    body.dark-mode .steam-bulk-actions button:hover {
      background: rgba(79, 159, 212, 0.2);
    }

    body.dark-mode .steam-game-actions button {
      border-color: #4f9fd4;
      color: #4f9fd4;
    }

    body.dark-mode .steam-game-actions button:hover {
      background: rgba(79, 159, 212, 0.2);
    }

    body.dark-mode .steam-game-actions button.selected {
      background: #4f9fd4;
      color: #0a0e12;
    }

    /* Mobile Optimizations for Onboarding Modal */
    @media (max-width: 768px) {
      /* Onboarding Modal Mobile Layout */
      #onboardingModal .modal-content {
        max-width: 95vw;
        max-height: 95vh;
        margin: 2.5vh auto;
        padding: 0;
        overflow-y: auto;
      }

      #onboardingModal .modal-header {
        padding: 15px 20px;
        position: sticky;
        top: 0;
        z-index: 10;
        background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
        border-bottom: 2px solid #daa520;
      }

      #onboardingModal .modal-header h2 {
        font-size: 1.4em;
        margin: 0;
        line-height: 1.2;
      }

      #onboardingModal .modal-body {
        padding: 20px;
        max-height: calc(95vh - 120px);
        overflow-y: auto;
      }

      #onboardingModal .modal-footer {
        padding: 15px 20px;
        position: sticky;
        bottom: 0;
        background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
        border-top: 2px solid #daa520;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      #onboardingModal .modal-footer button {
        width: 100%;
        padding: 12px 20px;
        font-size: 1em;
        margin: 0;
      }

      /* Onboarding Sections Mobile - Compact */
      #onboardingModal .onboarding-section {
        margin-bottom: 15px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        border: 1px solid rgba(218, 165, 32, 0.3);
      }

      #onboardingModal .onboarding-section h3 {
        font-size: 1em;
        margin-bottom: 8px;
        color: #ffd700;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      }

      #onboardingModal .onboarding-section p {
        font-size: 0.8em;
        line-height: 1.3;
        margin-bottom: 6px;
        color: #f5f5dc;
      }

      #onboardingModal .onboarding-section ul,
      #onboardingModal .onboarding-section ol {
        font-size: 0.9em;
        line-height: 1.4;
        padding-left: 20px;
        margin-bottom: 10px;
      }

      #onboardingModal .onboarding-section li {
        margin-bottom: 8px;
        color: #f5f5dc;
      }

      /* Demo Challenge Interface Mobile - Simplified Layout */
      #onboardingModal .demo-challenge-interface {
        padding: 15px;
        margin: 15px 0;
        border-radius: 8px;
        min-height: auto; /* Let content determine height */
        overflow: visible;
        background: transparent; /* Remove background to reduce nesting */
        border: none; /* Remove outer border */
        box-shadow: none; /* Remove shadow */
      }

      #onboardingModal .demo-slot {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
        min-height: auto; /* Let content determine height */
        max-height: none; /* Remove height cap */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
        border: 2px solid #daa520;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        overflow: visible; /* Allow content to be visible */
      }

      #onboardingModal .demo-slot-header {
        margin-bottom: 8px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      #onboardingModal .demo-slot-title {
        font-size: 1.1em;
        font-weight: bold;
        color: #ffd700;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        margin: 0;
        display: inline-block;
      }

      #onboardingModal .game-selection-container {
        width: 100%;
        margin-bottom: 12px;
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: nowrap;
      }

      #onboardingModal .game-display {
        font-size: 0.95em;
        padding: 10px 15px;
        margin: 0;
        flex: 1;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid #daa520;
        border-radius: 6px;
        color: #ffd700;
        display: flex;
        align-items: center;
        min-height: 40px;
        max-height: none;
      }

      #onboardingModal .btn-primary.btn-sm {
        padding: 10px 16px;
        font-size: 0.9em;
        text-align: center;
        min-height: 40px;
        max-height: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
      }

      #onboardingModal .demo-slot-status {
        font-size: 0.85em;
        color: #ffd700;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        margin: 0;
        display: inline-block;
        background: rgba(0, 0, 0, 0.2);
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid rgba(218, 165, 32, 0.3);
      }

      /* Demo Slot Content - Mobile Optimized */
      #onboardingModal .demo-slot-content {
        margin: 10px 0;
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(218, 165, 32, 0.3);
        border-radius: 6px;
        min-height: auto;
        font-size: 0.85em;
        line-height: 1.4;
        color: #f5f5dc;
        display: block; /* Show all content */
      }

      #onboardingModal .demo-slot-content.handicap {
        font-size: 0.9em;
        line-height: 1.4;
        color: #f5f5dc;
        margin-top: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        border: 1px solid rgba(218, 165, 32, 0.2);
      }

      #onboardingModal .demo-slot-content.game-details {
        display: block;
        margin-top: 10px;
      }

      #onboardingModal .demo-slot-content.timer-widget {
        background: none;
        border: none;
        margin-top: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
      }

      #onboardingModal .demo-slot-content.controls {
        background: none;
        border: none;
        margin-top: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        display: block;
      }

      /* Handicap Sections Mobile - Expanded */
      #onboardingModal .handicap-section {
        margin-bottom: 15px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(218, 165, 32, 0.2);
        border-radius: 6px;
      }

      #onboardingModal .handicap-section strong {
        font-size: 1em;
        margin-bottom: 8px;
        display: block;
        color: #ffd700;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      }

      #onboardingModal .handicap {
        padding: 10px 15px;
        font-size: 0.9em;
        margin-bottom: 8px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(218, 165, 32, 0.4);
        border-radius: 6px;
        display: block;
        line-height: 1.4;
      }

      /* Timer Widget Mobile - Expanded */
      #onboardingModal .timer-widget {
        display: block;
        padding: 15px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(218, 165, 32, 0.3);
        border-radius: 6px;
        margin-top: 15px;
      }

      #onboardingModal .timer-display {
        font-size: 1.1em;
        margin-bottom: 10px;
        color: #ffd700;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
      }

      #onboardingModal .timer-btn {
        padding: 10px 15px;
        font-size: 0.85em;
        margin-right: 8px;
        margin-bottom: 8px;
        display: inline-block;
        min-width: 80px;
      }

      #onboardingModal .timer-widget > div:last-child {
        margin-top: 8px;
        display: block;
      }

      #onboardingModal .timer-widget label {
        font-size: 0.8em;
        margin-bottom: 4px;
        display: block;
        color: #f5f5dc;
      }

      #onboardingModal .timer-widget input {
        width: 60px;
        padding: 4px 6px;
        font-size: 0.8em;
        margin-left: 8px;
      }

      /* Demo Controls Mobile - Simplified */
      #onboardingModal .demo-controls {
        display: block;
        margin: 15px 0;
        padding: 0;
        background: none;
        border: none;
      }

      #onboardingModal .demo-control-group {
        display: block;
        margin-bottom: 10px;
      }

      #onboardingModal .action-button {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.9em;
        text-align: left;
        justify-content: flex-start;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      #onboardingModal .demo-explanation {
        font-size: 0.8em;
        line-height: 1.3;
        color: #c7d5e0;
        background: rgba(0, 0, 0, 0.1);
        padding: 6px 8px;
        border-radius: 3px;
        border-left: 2px solid #daa520;
        margin-top: 4px;
        display: block;
      }

      /* Token Counters Mobile - Simplified */
      #onboardingModal .demo-tokens {
        display: block;
        margin: 15px 0;
        padding: 0;
        background: none;
        border: none;
      }

      #onboardingModal .token-counter {
        padding: 8px 12px;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        border: 1px solid rgba(218, 165, 32, 0.2);
      }

      #onboardingModal .token-icon {
        font-size: 1.1em;
        color: #ffd700;
      }

      #onboardingModal .token-value {
        font-size: 1em;
        font-weight: bold;
        color: #ffd700;
      }





      /* Steam Integration Demo Mobile */
      #onboardingModal .steam-integration-demo {
        padding: 15px;
        margin: 15px 0;
      }

      #onboardingModal .steam-integration-demo h4 {
        font-size: 1.1em;
        margin-bottom: 12px;
      }

      #onboardingModal .steam-integration-demo ol {
        font-size: 0.9em;
        line-height: 1.4;
        padding-left: 18px;
      }

      #onboardingModal .steam-integration-demo li {
        margin-bottom: 8px;
      }

      #onboardingModal .steam-integration-demo a {
        word-break: break-all;
      }

      /* Info Boxes Mobile */
      #onboardingModal .onboarding-section > div[style*="background"] {
        padding: 12px;
        margin: 12px 0;
        font-size: 0.9em;
      }

      #onboardingModal .onboarding-section h5 {
        font-size: 1em;
        margin-bottom: 8px;
      }

      #onboardingModal .onboarding-section ul {
        font-size: 0.85em;
        line-height: 1.3;
        padding-left: 18px;
      }

      /* Close Button Mobile */
      #onboardingModal .close {
        font-size: 1.5em;
        padding: 5px;
        line-height: 1;
        top: 15px;
        right: 15px;
      }

      /* Dark Mode Mobile Adjustments */
      body.dark-mode #onboardingModal .modal-header {
        background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
        border-bottom-color: #daa520;
      }

      body.dark-mode #onboardingModal .modal-footer {
        background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
        border-top-color: #daa520;
      }

      body.dark-mode #onboardingModal .onboarding-section {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(218, 165, 32, 0.4);
      }

      body.dark-mode #onboardingModal .demo-challenge-interface {
        background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
        border-color: #daa520;
      }

      body.dark-mode #onboardingModal .demo-slot {
        background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
        border-color: #daa520;
      }

      body.dark-mode #onboardingModal .demo-explanation {
        background: rgba(0, 0, 0, 0.4);
        border-left-color: #daa520;
        color: #b8a082;
      }
    }

    /* Floating Action Button for Onboarding Modal */
    .floating-action-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 2000; /* Higher than modal z-index */
      display: none; /* Hidden by default, shown when onboarding modal is open on mobile */
    }

    .fab-main {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
      border: 2px solid #daa520;
      color: #ffd700;
      font-size: 1.5em;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fab-main:hover {
      background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

    .fab-main.active {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
      border-color: #dc3545;
    }

    .fab-main.active i {
      transform: rotate(45deg);
    }

    .fab-menu {
      position: absolute;
      bottom: 70px;
      right: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.3s ease;
    }

    .fab-menu.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .fab-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
      border: 2px solid #daa520;
      border-radius: 25px;
      color: #ffd700;
      font-size: 0.9em;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      white-space: nowrap;
      min-width: 160px;
    }

    .fab-item:hover {
      background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%);
      transform: translateX(-5px);
    }

    /* Mobile Header Layout - Workshop Theme Focus */
    @media (max-width: 768px) {
      header {
        background: 
          linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a2c1a 50%, #3d2817 75%, #2c1810 100%),
          radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.15) 0%, transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.12) 0%, transparent 50%);
        border: 2px solid #8b4513;
        border-top: 3px solid #cd853f;
      }
      
      .workshop-tools {
        display: none;
      }
      
      .workshop-tools-right {
        display: none;
      }
      
      .forge-header {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
      }
      
      .forge-anvil {
        display: none; /* Hide side anvils on mobile */
      }
      
      .forge-title::before {
        display: none;
      }
      
      .forge-title h1 {
        font-size: 2.2rem;
        margin: 0;
        color: #4a0000; /* Deeper red text */
        text-shadow: 
          1px 1px 0px #4a0000,
          2px 2px 0px #2c1810,
          3px 3px 0px #1a0f0a,
          inset 0 2px 4px rgba(0,0,0,0.6),
          inset 0 4px 8px rgba(0,0,0,0.3),
          inset 0 -1px 2px rgba(255, 255, 255, 0.3),
          inset 0 -2px 4px rgba(255, 255, 255, 0.1);
        letter-spacing: 3px;
        font-weight: 800;
        font-family: 'Orbitron', 'Copperplate', 'Copperplate Gothic Light', 'Copperplate Gothic Bold', 'Impact', 'Arial Black', Arial, sans-serif;
        text-transform: uppercase;
        position: relative;
        font-style: italic;
        padding: 15px 15px;
        background: linear-gradient(135deg, 
          #ffd700 0%, 
          #ffed4e 20%, 
          #ffd700 50%, 
          #ffb347 80%, 
          #ffd700 100%);
        border-radius: 8px;
        box-shadow: 
          0 4px 8px rgba(0,0,0,0.3),
          inset 0 2px 4px rgba(255, 255, 255, 0.3),
          inset 0 -2px 4px rgba(0,0,0,0.2);
        transform: perspective(100px) rotateX(5deg);
        border: 2px solid #b8860b;
      }
      
      /* Dark mode mobile title */
      .dark-mode .forge-title h1 {
        color: #4a0000; /* Deeper red text */
        text-shadow: 
          1px 1px 0px #4a0000,
          2px 2px 0px #2c1810,
          3px 3px 0px #1a0f0a,
          inset 0 2px 4px rgba(0,0,0,0.7),
          inset 0 4px 8px rgba(0,0,0,0.4),
          inset 0 -1px 2px rgba(255, 255, 255, 0.2),
          inset 0 -2px 4px rgba(255, 255, 255, 0.05);
        font-family: 'Orbitron', 'Copperplate', 'Copperplate Gothic Light', 'Copperplate Gothic Bold', 'Impact', 'Arial Black', Arial, sans-serif;
        background: linear-gradient(135deg, 
          #b8860b 0%, 
          #cd853f 20%, 
          #b8860b 50%, 
          #8b6914 80%, 
          #b8860b 100%);
        box-shadow: 
          0 6px 12px rgba(0,0,0,0.5),
          inset 0 2px 4px rgba(255, 255, 255, 0.2),
          inset 0 -2px 4px rgba(0,0,0,0.4);
        border: 2px solid #8b6914;
      }
      
      .forge-title h1 i {
        display: none; /* Hide fire icons from title on mobile */
      }
      
      .subtitle {
        font-size: 1rem;
        margin-top: 10px;
        opacity: 0.9;
        font-weight: 500;
      }
      
      @keyframes forgeGlow {
        0% { 
          text-shadow: 
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 69, 0, 0.6);
        }
        100% { 
          text-shadow: 
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 69, 0, 0.8),
            0 0 80px rgba(255, 69, 0, 0.4);
        }
      }
    .floating-action-button {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

    .fab-item i {
      font-size: 1.1em;
      width: 20px;
      text-align: center;
    }

    .fab-item span {
      font-size: 0.9em;
    }

    /* Show FAB only on mobile */
    @media (max-width: 768px) {
      .floating-action-button {
        display: block;
      }
      
      .modal-footer {
        display: none !important;
      }
      
      /* Show modal footer for Steam modal on mobile */
      #steamModal .modal-footer {
        display: flex !important;
      }
      
      /* Fix gameCompletionMiracleModal on mobile */
      #gameCompletionMiracleModal .modal-content {
        height: auto;
        min-height: 200px;
        max-height: 85vh;
        margin: 10px;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        padding: 20px 15px;
        overflow-x: hidden;
        scroll-behavior: auto;
        overscroll-behavior: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      
      #gameCompletionMiracleModal .miracle-choices {
        gap: 8px;
        margin-top: 15px;
      }
      
      #gameCompletionMiracleModal .miracle-choice {
        padding: 12px;
        margin-bottom: 8px;
      }
      
      #gameCompletionMiracleModal .choice-icon {
        font-size: 1.5em;
        margin-bottom: 6px;
      }
      
      #gameCompletionMiracleModal .miracle-choice h3 {
        font-size: 1em;
        margin-bottom: 4px;
      }
      
      #gameCompletionMiracleModal .miracle-choice p {
        font-size: 0.8em;
        line-height: 1.3;
      }
      
      #gameCompletionMiracleModal .modal-body {
        max-height: calc(95vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: none;
        scroll-snap-type: y mandatory;
      }
      
      #gameCompletionMiracleModal .modal-body::-webkit-scrollbar {
        display: none;
      }
      
      #gameCompletionMiracleModal .miracle-choices {
        scroll-snap-align: end;
        padding-bottom: 15px;
      }
      
      #gameCompletionMiracleModal .miracle-choice:last-child {
        scroll-snap-align: end;
        margin-bottom: 0;
      }
      
      /* Fix miracleEventModal on mobile */
      #miracleEventModal .modal-content {
        height: auto;
        min-height: 200px;
        max-height: 85vh;
        margin: 10px;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        padding: 20px 15px;
        overflow-x: hidden;
        scroll-behavior: auto;
        overscroll-behavior: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      
      #miracleEventModal .miracle-choices {
        gap: 8px;
        margin-top: 15px;
      }
      
      #miracleEventModal .miracle-choice {
        padding: 12px;
        margin-bottom: 8px;
      }
      
      #miracleEventModal .choice-icon {
        font-size: 1.5em;
        margin-bottom: 6px;
      }
      
      #miracleEventModal .miracle-choice h3 {
        font-size: 1em;
        margin-bottom: 4px;
      }
      
      #miracleEventModal .miracle-choice p {
        font-size: 0.8em;
        line-height: 1.3;
      }
      
      #miracleEventModal .modal-body {
        max-height: calc(95vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: none;
        scroll-snap-type: y mandatory;
      }
      
      #miracleEventModal .modal-body::-webkit-scrollbar {
        display: none;
      }
      
      #miracleEventModal .miracle-choices {
        scroll-snap-align: end;
        padding-bottom: 15px;
      }
      
      #miracleEventModal .miracle-choice:last-child {
        scroll-snap-align: end;
        margin-bottom: 0;
      }
    }

    /* Dark mode for FAB */
    body.dark-mode .fab-main {
      background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
      border-color: #daa520;
    }

    body.dark-mode .fab-main:hover {
      background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
    }

    body.dark-mode .fab-main.active {
      background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%);
      border-color: #dc3545;
    }

    body.dark-mode .fab-item {
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      border-color: #daa520;
      color: #daa520;
    }

    body.dark-mode .fab-item:hover {
      background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
    }
}

/* Community Database Modal Styles */
.community-database-modal {
  max-width: 1200px;
  width: 95%;
  max-height: 90vh;
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a2c1a 50%, #3d2817 75%, #2c1810 100%),
    radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.12) 0%, transparent 50%);
  border: 2px solid #8b4513;
  border-top: 3px solid #cd853f;
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0,0,0,0.2);
  border-radius: 15px;
}

.community-tabs {
  display: flex;
  border-bottom: 2px solid #cd853f;
  margin-bottom: 20px;
  background: 
    linear-gradient(135deg, #3d2817 0%, #4a2c1a 50%, #3d2817 100%);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.community-tab {
  flex: 1;
  padding: 15px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #daa520;
  transition: all 0.3s ease;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.community-tab:hover {
  background: rgba(255, 140, 0, 0.2);
  color: #ff8c00;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.community-tab.active {
  background: 
    linear-gradient(135deg, #daa520 0%, #ff8c00 50%, #daa520 100%);
  color: #2c1810;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  text-shadow: none;
  font-weight: 700;
}

.community-section {
  display: none;
}

.community-section.active {
  display: block;
}

.community-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #cd853f;
  background: 
    linear-gradient(135deg, #3d2817 0%, #4a2c1a 50%, #3d2817 100%);
  padding: 20px;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.community-header h3 {
  margin-bottom: 15px;
  color: #daa520;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  font-weight: 700;
}

.community-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.community-controls input,
.community-controls select {
  padding: 8px 12px;
  border: 2px solid #8b4513;
  border-radius: 6px;
  font-size: 14px;
  min-width: 150px;
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  color: #daa520;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.community-controls input:focus,
.community-controls select:focus {
  outline: none;
  border-color: #cd853f;
  box-shadow: 
    0 0 0 2px rgba(205, 133, 63, 0.3),
    inset 0 1px 2px rgba(0,0,0,0.3);
}

.community-controls input::placeholder {
  color: #8b4513;
}

.community-content {
  max-height: 500px;
  overflow-y: auto;
  padding: 10px 0;
}

.loading-spinner {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 16px;
}

.loading-spinner i {
  margin-right: 10px;
  font-size: 20px;
}

.community-item {
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a2c1a 50%, #3d2817 75%, #2c1810 100%);
  border: 2px solid #8b4513;
  border-top: 3px solid #cd853f;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1),
    inset 0 -1px 2px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  color: #f5f5dc;
}

.community-item:hover {
  box-shadow: 
    0 6px 12px rgba(0,0,0,0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 2px rgba(0,0,0,0.3);
  transform: translateY(-2px);
  border-color: #daa520;
}

.community-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.community-item-title {
  font-size: 18px;
  font-weight: 700;
  color: #daa520;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.community-item-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 14px;
  color: #cd853f;
  margin-bottom: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.community-item-description {
  color: #f5f5dc;
  line-height: 1.5;
  margin-bottom: 15px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.community-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 2px solid #8b4513;
}

.community-item-stats {
  display: flex;
  gap: 20px;
  align-items: center;
}

.community-item-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Collection Styles */
.collection-item {
  background: #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  border-left: 4px solid #4CAF50;
  transition: all 0.3s ease;
}

.collection-item:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.collection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.collection-info {
  flex: 1;
}

.collection-name {
  font-size: 1.3em;
  font-weight: bold;
  color: #4CAF50;
  margin: 0 0 8px 0;
}

.collection-description {
  color: #ccc;
  margin: 0 0 10px 0;
  font-size: 0.9em;
}

.collection-meta {
  display: flex;
  gap: 15px;
  font-size: 0.8em;
  color: #999;
}

.collection-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.collection-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.collection-handicaps-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.handicap-preview {
  background: #333;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.8em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.handicap-name {
  font-weight: bold;
  color: #fff;
}

.handicap-game {
  color: #999;
  font-size: 0.9em;
}

.more-handicaps {
  background: #444;
  color: #ccc;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.8em;
  font-style: italic;
}

.collection-button {
  background: #9C27B0;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.collection-button:hover {
  background: #7B1FA2;
}

.collection-option {
  background: #333;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collection-option:hover {
  background: #444;
}

.collection-option-info h5 {
  margin: 0 0 5px 0;
  color: #4CAF50;
}

.collection-option-info p {
  margin: 0;
  color: #999;
  font-size: 0.9em;
}

.collection-handicap-item {
  background: #333;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.collection-handicap-item .handicap-info {
  flex: 1;
}

.collection-handicap-item .handicap-info h5 {
  margin: 0 0 5px 0;
  color: #fff;
}

.collection-handicap-item .handicap-info p {
  margin: 0 0 8px 0;
  color: #999;
  font-size: 0.9em;
}

.handicap-description {
  color: #ccc !important;
  font-size: 0.85em !important;
  margin-top: 5px !important;
}

.collection-handicap-item .handicap-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.collection-details {
  margin-bottom: 20px;
  padding: 15px;
  background: #333;
  border-radius: 8px;
}

.collection-stats {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  font-size: 0.9em;
  color: #999;
}

.collection-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.empty-state h3 {
  margin: 15px 0 10px 0;
  color: #ccc;
}

.empty-state p {
  margin: 0 0 20px 0;
  line-height: 1.5;
}

/* Collection Modal Styles */
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #444;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #ccc;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #444;
  border-radius: 5px;
  background: #333;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.handicap-info {
  background: #333;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #4CAF50;
}

.handicap-info h4 {
  margin: 0 0 8px 0;
  color: #4CAF50;
  font-size: 1.2em;
}

.handicap-info p {
  margin: 0;
  color: #ccc;
  font-size: 0.9em;
}

.collection-selection h4 {
  margin: 0 0 15px 0;
  color: #fff;
}

.collection-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 15px;
}

.warning-message {
  text-align: center;
  padding: 20px;
  background: #2a1a1a;
  border-radius: 8px;
  border: 1px solid #f44336;
}

.warning-message h4 {
  margin: 0 0 10px 0;
  color: #f44336;
}

.warning-message p {
  margin: 0;
  color: #ccc;
  line-height: 1.5;
}

.btn-danger {
  background: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.btn-danger:hover {
  background: #d32f2f;
}

/* Pagination Styles */
.pagination-container {
  margin-top: 30px;
  padding: 20px;
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 25%, #4a2c1a 50%, #3d2817 75%, #2c1810 100%);
  border: 2px solid #8b4513;
  border-top: 3px solid #cd853f;
  border-radius: 12px;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.pagination-info {
  text-align: center;
  color: #cd853f;
  font-size: 14px;
  margin-bottom: 15px;
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination-btn {
  background: 
    linear-gradient(135deg, #8b4513 0%, #a0522d 25%, #cd853f 50%, #a0522d 75%, #8b4513 100%);
  border: 2px solid #654321;
  border-top: 2px solid #daa520;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
  min-width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(.disabled) {
  background: 
    linear-gradient(135deg, #a0522d 0%, #cd853f 25%, #daa520 50%, #cd853f 75%, #a0522d 100%);
  border-color: #daa520;
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.pagination-btn.active {
  background: 
    linear-gradient(135deg, #daa520 0%, #ffd700 25%, #ffed4e 50%, #ffd700 75%, #daa520 100%);
  border-color: #ffd700;
  color: #2c1810;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.pagination-btn.disabled {
  background: 
    linear-gradient(135deg, #5d4037 0%, #6d4c41 25%, #8d6e63 50%, #6d4c41 75%, #5d4037 100%);
  border-color: #5d4037;
  color: #a1887f;
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination-ellipsis {
  color: #cd853f;
  font-weight: bold;
  padding: 0 8px;
  font-size: 16px;
}

/* Dark mode pagination */
body.dark-mode .pagination-container {
  background: 
    linear-gradient(135deg, #1a0f0a 0%, #2c1810 25%, #3d2817 50%, #2c1810 75%, #1a0f0a 100%);
  border-color: #5d4037;
}

body.dark-mode .pagination-info {
  color: #cd853f;
}

body.dark-mode .pagination-btn {
  background: 
    linear-gradient(135deg, #5d4037 0%, #6d4c41 25%, #8d6e63 50%, #6d4c41 75%, #5d4037 100%);
  border-color: #4e342e;
  border-top-color: #8d6e63;
}

body.dark-mode .pagination-btn:hover:not(.disabled) {
  background: 
    linear-gradient(135deg, #6d4c41 0%, #8d6e63 25%, #a1887f 50%, #8d6e63 75%, #6d4c41 100%);
  border-color: #a1887f;
}

body.dark-mode .pagination-btn.active {
  background: 
    linear-gradient(135deg, #daa520 0%, #ffd700 25%, #ffed4e 50%, #ffd700 75%, #daa520 100%);
  border-color: #ffd700;
  color: #1a0f0a;
}

body.dark-mode .pagination-ellipsis {
  color: #cd853f;
}

.vote-button {
  background: 
    linear-gradient(135deg, #3d2817 0%, #4a2c1a 100%);
  border: 2px solid #8b4513;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #daa520;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.vote-button:hover {
  background: 
    linear-gradient(135deg, #4a2c1a 0%, #5a3c2a 100%);
  border-color: #cd853f;
  color: #ff8c00;
  box-shadow: 
    inset 0 1px 2px rgba(0,0,0,0.3),
    0 0 0 2px rgba(205, 133, 63, 0.3);
}

.vote-button.upvote:hover {
  border-color: #2ecc71;
  color: #2ecc71;
  box-shadow: 
    inset 0 1px 2px rgba(0,0,0,0.3),
    0 0 0 2px rgba(46, 204, 113, 0.3);
}

.vote-button.downvote:hover {
  border-color: #e74c3c;
  color: #e74c3c;
  box-shadow: 
    inset 0 1px 2px rgba(0,0,0,0.3),
    0 0 0 2px rgba(231, 76, 60, 0.3);
}

.vote-button.voted {
  background: 
    linear-gradient(135deg, #daa520 0%, #ff8c00 100%);
  color: #2c1810;
  border-color: #daa520;
  text-shadow: none;
  font-weight: 700;
}

.rarity-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.rarity-common { background: #e8f5e8; color: #2d5a2d; }
.rarity-uncommon { background: #e8f4fd; color: #1e3a8a; }
.rarity-rare { background: #fef3c7; color: #92400e; }
.rarity-legendary { background: #fce7f3; color: #be185d; }
.rarity-mythic { background: #f3e8ff; color: #7c3aed; }

.creator-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.creator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.download-button {
  background: 
    linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: white;
  border: 2px solid #27ae60;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.download-button:hover {
  background: 
    linear-gradient(135deg, #27ae60 0%, #229954 100%);
  border-color: #229954;
  transform: translateY(-1px);
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #cd853f;
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  border: 2px solid #8b4513;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 20px;
  color: #8b4513;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.empty-state h3 {
  margin-bottom: 10px;
  color: #daa520;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.empty-state p {
  color: #f5f5dc;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Dark mode styles for community database - keeping forge theme */
body.dark-mode .community-database-modal {
  background: 
    linear-gradient(135deg, #1a0f0a 0%, #2c1810 25%, #3d2817 50%, #2c1810 75%, #1a0f0a 100%),
    radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.08) 0%, transparent 50%);
  border-color: #5d4037;
}

body.dark-mode .community-tabs {
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 50%, #2c1810 100%);
  border-color: #8b4513;
}

body.dark-mode .community-tab {
  color: #cd853f;
}

body.dark-mode .community-tab:hover {
  background: rgba(255, 140, 0, 0.15);
  color: #ff8c00;
}

/* Community Database Modal Header Auth Section */
#communityDatabaseModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#communityDatabaseModal .community-auth-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

#communityDatabaseModal .community-auth-section #communityGoogleSignInButton {
  display: inline-block !important;
  min-width: 200px;
  min-height: 40px;
}

#communityDatabaseModal .community-auth-section #communityUserProfile {
  display: flex;
  align-items: center;
  gap: 10px;
}

#communityDatabaseModal .community-auth-section #communityUserProfile img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #daa520;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

#communityDatabaseModal .community-auth-section #communityUserProfile span {
  color: #ffd700;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#communityDatabaseModal .community-auth-section .btn-sm {
  padding: 6px 12px;
  font-size: 0.85em;
  background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
  border: 2px solid #654321;
  color: #f5f5dc;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

#communityDatabaseModal .community-auth-section .btn-sm:hover {
  background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
  border-color: #8b4513;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Dark mode community auth section */
body.dark-mode #communityDatabaseModal .community-auth-section #communityUserProfile span {
  color: #ffd700;
}

body.dark-mode #communityDatabaseModal .community-auth-section .btn-sm {
  background: linear-gradient(135deg, #654321 0%, #8b4513 100%);
  border-color: #daa520;
  color: #f5f5dc;
}

body.dark-mode #communityDatabaseModal .community-auth-section .btn-sm:hover {
  background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
  border-color: #ffd700;
}

/* Community Database Modal - Full Screen Override */
#communityDatabaseModal .modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 20px !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
  border: 2px solid #daa520;
  box-shadow: 0 0 30px rgba(218, 165, 32, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Community Database Modal - Light Mode Forge Theme */
body:not(.dark-mode) #communityDatabaseModal .modal-content {
  background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 25%, #e8dcc0 50%, #d4c4a8 75%, #c4a484 100%);
  border-color: #8b4513;
  box-shadow: 0 0 30px rgba(139, 69, 19, 0.2);
}

body:not(.dark-mode) #communityDatabaseModal .modal-header h2 {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Community Database Modal - Dark Mode */
body.dark-mode #communityDatabaseModal .modal-content {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1810 50%, #1a1a1a 100%);
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

/* Community Database Modal - Better Section Separation */
#communityDatabaseModal .community-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: rgba(0,0,0,0.1);
  border-radius: 8px;
  margin: 10px 0;
  border: 1px solid rgba(218, 165, 32, 0.2);
}

#communityDatabaseModal .community-section {
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#communityDatabaseModal .community-section:last-child {
  margin-bottom: 0;
}

#communityDatabaseModal .community-header {
  border-bottom: 2px solid rgba(218, 165, 32, 0.4);
  padding-bottom: 15px;
  margin-bottom: 20px;
}

#communityDatabaseModal .community-header h3 {
  color: #ffd700;
  margin: 0;
  font-size: 1.5em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Mobile Floating Tabs - 640px and below */
@media (max-width: 640px) {
  /* Hide the regular tab bar on mobile */
  #communityDatabaseModal .community-tabs {
    display: none !important;
  }
  
  /* Show floating tab buttons on mobile */
  #communityDatabaseModal .community-tabs-mobile {
    display: flex !important;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 12px;
    z-index: 1001;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    width: auto;
    max-width: 90vw;
  }
  
  
  /* Individual floating tab button */
  #communityDatabaseModal .community-tab-mobile {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(139, 69, 19, 0.8);
    border: 1px solid rgba(218, 165, 32, 0.5);
    color: rgba(255, 215, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    text-decoration: none;
    position: relative;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
    backdrop-filter: blur(4px);
  }
  
  /* Floating tab button hover effect */
  #communityDatabaseModal .community-tab-mobile:hover {
    background: rgba(160, 82, 45, 0.9);
    border-color: rgba(218, 165, 32, 0.7);
    color: rgba(255, 215, 0, 1);
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  }
  
  /* Active floating tab button */
  #communityDatabaseModal .community-tab-mobile.active {
    background: rgba(218, 165, 32, 0.9);
    border-color: rgba(255, 215, 0, 0.7);
    color: rgba(44, 24, 16, 1);
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 6px 15px rgba(218, 165, 32, 0.5), 0 3px 8px rgba(0,0,0,0.3);
  }
  
  /* Tooltip for floating tabs */
  #communityDatabaseModal .community-tab-mobile::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: #ffd700;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(218, 165, 32, 0.6);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  
  /* Show tooltip on hover */
  #communityDatabaseModal .community-tab-mobile:hover::after {
    opacity: 1;
    visibility: visible;
  }
  
  /* Fade out tooltip after 1 second for active button */
  #communityDatabaseModal .community-tab-mobile.active::after {
    opacity: 1;
    visibility: visible;
    animation: fadeOutTooltip 1s ease-in-out 1s forwards;
  }
  
  @keyframes fadeOutTooltip {
    0% {
      opacity: 1;
      visibility: visible;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  /* Dark mode floating tabs */
  body.dark-mode #communityDatabaseModal .community-tabs-mobile {
    background: none;
    border: none;
  }
  
  
  body.dark-mode #communityDatabaseModal .community-tab-mobile {
    background: rgba(101, 67, 33, 0.8);
    border-color: rgba(218, 165, 32, 0.4);
    color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  }
  
  body.dark-mode #communityDatabaseModal .community-tab-mobile:hover {
    background: rgba(139, 69, 19, 0.9);
    border-color: rgba(218, 165, 32, 0.6);
    color: rgba(255, 215, 0, 1);
    box-shadow: 0 5px 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  }
  
  body.dark-mode #communityDatabaseModal .community-tab-mobile.active {
    background: rgba(218, 165, 32, 0.9);
    border-color: rgba(255, 215, 0, 0.6);
    color: rgba(44, 24, 16, 1);
    box-shadow: 0 6px 15px rgba(218, 165, 32, 0.6), 0 3px 8px rgba(0,0,0,0.4);
  }
}

/* Seed Preview Styling */
.seed-preview-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 15px 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
}


.seed-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
}

.seed-preview-header h4 {
  color: #ffd700;
  margin: 0;
  font-size: 1.2em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.seed-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.seed-stat {
  display: flex;
  align-items: center;
  background: rgba(139, 69, 19, 0.2);
  border: 1px solid #8b4513;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
}

.seed-stat:hover {
  background: rgba(139, 69, 19, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.seed-stat-icon {
  font-size: 1.5em;
  color: #daa520;
  margin-right: 10px;
  width: 30px;
  text-align: center;
}

.seed-stat-content {
  flex: 1;
}

.seed-stat-number {
  font-size: 1.4em;
  font-weight: bold;
  color: #ffd700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.seed-stat-label {
  font-size: 0.85em;
  color: #cd853f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.seed-stat-sub {
  font-size: 0.75em;
  color: #8b7355;
  margin-top: 2px;
  font-style: italic;
}

.seed-preview-details {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 20px;
}

.seed-detail-section {
  margin-bottom: 20px;
  background: rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid rgba(139, 69, 19, 0.2);
}

.seed-detail-section:last-child {
  margin-bottom: 0;
}

.seed-detail-section h5 {
  color: #daa520;
  margin: 0 0 12px 0;
  font-size: 1em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.seed-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.seed-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
}

.seed-detail-row:last-child {
  border-bottom: none;
}

.seed-detail-label {
  color: #cd853f;
  font-weight: 600;
  font-size: 0.9em;
}

.seed-detail-value {
  color: #ffd700;
  font-weight: bold;
  font-size: 0.9em;
}

.seed-games-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seed-game-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(139, 69, 19, 0.1);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 6px;
}

.seed-game-name {
  color: #f5f5dc;
  font-weight: 600;
  font-size: 0.9em;
}

.seed-game-count {
  color: #cd853f;
  font-size: 0.85em;
  font-style: italic;
}

.seed-preview-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Seed Overview Modal Styling */
.seed-overview-content {
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
}

.seed-overview-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #8b4513;
}

.seed-overview-header h3 {
  color: #ffd700;
  margin: 0 0 15px 0;
  font-size: 1.5em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.seed-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.seed-overview-stat {
  text-align: center;
  background: linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  border: 1px solid #8b4513;
  border-radius: 8px;
  padding: 15px;
}

.stat-number {
  display: block;
  font-size: 1.8em;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.stat-label {
  display: block;
  font-size: 0.9em;
  color: #cd853f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 5px;
}

.seed-overview-section {
  margin-bottom: 25px;
  background: rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(139, 69, 19, 0.3);
}

.seed-overview-section h4 {
  color: #daa520;
  margin: 0 0 15px 0;
  font-size: 1.1em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.seed-games-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.seed-games-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
  color: #f5f5dc;
}

.seed-games-list li:last-child {
  border-bottom: none;
}

.seed-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.seed-setting-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
}

.seed-setting-label {
  color: #cd853f;
  font-weight: 600;
}

.seed-setting-value {
  color: #ffd700;
  font-weight: bold;
}

.seed-slots-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.seed-slot-item {
  background: rgba(139, 69, 19, 0.1);
  border: 1px solid #8b4513;
  border-radius: 8px;
  padding: 15px;
}

.seed-slot-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #f5f5dc;
  font-size: 1.1em;
}

.seed-slot-header i {
  margin-right: 8px;
}

.seed-slot-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  font-size: 0.9em;
}

.seed-slot-details span {
  color: #cd853f;
  padding: 4px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  text-align: center;
}

.seed-raw-data {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 15px;
  overflow-x: auto;
  max-height: 300px;
}

.seed-raw-data pre {
  margin: 0;
  color: #cd853f;
  font-size: 0.85em;
  line-height: 1.4;
}

.seed-overview-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 2px solid #8b4513;
}

/* Dark mode seed preview */
body.dark-mode .seed-preview-card {
  background: transparent;
  border: none;
}

body.dark-mode .seed-preview-header h4 {
  color: #ffd700;
}

body.dark-mode .seed-stat {
  background: rgba(218, 165, 32, 0.1);
  border-color: #daa520;
}

body.dark-mode .seed-stat:hover {
  background: rgba(218, 165, 32, 0.2);
}

body.dark-mode .seed-preview-details {
  background: transparent;
}

body.dark-mode .seed-detail-section {
  background: rgba(0,0,0,0.2);
  border-color: rgba(218, 165, 32, 0.2);
}

body.dark-mode .seed-detail-label {
  color: #daa520;
}

body.dark-mode .seed-detail-value {
  color: #ffd700;
}

body.dark-mode .seed-overview-section {
  background: rgba(0,0,0,0.2);
  border-color: rgba(218, 165, 32, 0.3);
}

body.dark-mode .seed-overview-section h4 {
  color: #ffd700;
}

body.dark-mode .seed-games-list li {
  color: #f5f5dc;
}

body.dark-mode .seed-setting-label {
  color: #daa520;
}

body.dark-mode .seed-setting-value {
  color: #ffd700;
}

body.dark-mode .seed-slot-item {
  background: rgba(218, 165, 32, 0.05);
  border-color: #daa520;
}

body.dark-mode .seed-slot-details span {
  color: #daa520;
  background: rgba(0,0,0,0.3);
}

body.dark-mode .seed-stat-sub {
  color: #a0a0a0;
}

body.dark-mode .seed-detail-section h5 {
  color: #ffd700;
}

body.dark-mode .seed-game-item {
  background: rgba(218, 165, 32, 0.05);
  border-color: rgba(218, 165, 32, 0.3);
}

body.dark-mode .seed-game-name {
  color: #f5f5dc;
}

body.dark-mode .seed-game-count {
  color: #daa520;
}

body.dark-mode .community-tab.active {
  background: 
    linear-gradient(135deg, #cd853f 0%, #daa520 50%, #cd853f 100%);
  color: #2c1810;
}

body.dark-mode .community-header {
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 50%, #2c1810 100%);
  border-color: #8b4513;
}

body.dark-mode .community-header h3 {
  color: #daa520;
}

body.dark-mode .community-controls input,
body.dark-mode .community-controls select {
  background: 
    linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
  border-color: #5d4037;
  color: #cd853f;
}

body.dark-mode .community-controls input:focus,
body.dark-mode .community-controls select:focus {
  border-color: #8b4513;
}

body.dark-mode .community-item {
  background: 
    linear-gradient(135deg, #1a0f0a 0%, #2c1810 25%, #3d2817 50%, #2c1810 75%, #1a0f0a 100%);
  border-color: #5d4037;
  color: #f5f5dc;
}

body.dark-mode .community-item:hover {
  border-color: #cd853f;
}

body.dark-mode .community-item-title {
  color: #daa520;
}

body.dark-mode .community-item-meta {
  color: #cd853f;
}

body.dark-mode .community-item-description {
  color: #f5f5dc;
}

body.dark-mode .community-item-footer {
  border-color: #5d4037;
}

body.dark-mode .vote-button {
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  border-color: #5d4037;
  color: #cd853f;
}

body.dark-mode .vote-button:hover {
  background: 
    linear-gradient(135deg, #3d2817 0%, #4a2c1a 100%);
  border-color: #8b4513;
  color: #daa520;
}

/* Light mode forge theme for community database */
body:not(.dark-mode) .community-database-modal {
  background: 
    linear-gradient(135deg, #f8f6f0 0%, #f2ede4 25%, #e8dcc0 50%, #d4c4a8 75%, #c4a484 100%);
  border-color: #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) .community-item {
  background: 
    linear-gradient(135deg, #f8f6f0 0%, #f2ede4 25%, #e8dcc0 50%, #d4c4a8 75%, #c4a484 100%);
  border: 2px solid #8b4513;
  border-top: 3px solid #cd853f;
  color: #2c1810;
  box-shadow: 
    0 4px 8px rgba(139, 69, 19, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0,0,0,0.1);
}

body:not(.dark-mode) .community-item:hover {
  box-shadow: 
    0 6px 12px rgba(139, 69, 19, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0,0,0,0.15);
  border-color: #daa520;
}

body:not(.dark-mode) .community-item-title {
  color: #8b4513;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

body:not(.dark-mode) .community-item-meta {
  color: #a0522d;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

body:not(.dark-mode) .community-item-description {
  color: #2c1810;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

body:not(.dark-mode) .community-item-footer {
  border-color: #8b4513;
}

body:not(.dark-mode) .pagination-container {
  background: 
    linear-gradient(135deg, #f8f6f0 0%, #f2ede4 25%, #e8dcc0 50%, #d4c4a8 75%, #c4a484 100%);
  border: 2px solid #8b4513;
  border-top: 3px solid #cd853f;
}

body:not(.dark-mode) .vote-button {
  background: 
    linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
  border-color: #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) .vote-button:hover {
  background: 
    linear-gradient(135deg, #e8dcc0 0%, #d4c4a8 100%);
  border-color: #a0522d;
  color: #8b4513;
}

body:not(.dark-mode) .download-button {
  background: 
    linear-gradient(135deg, #cd853f 0%, #b8956b 100%);
  border-color: #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) .download-button:hover {
  background: 
    linear-gradient(135deg, #b8956b 0%, #a0522d 100%);
  border-color: #8b4513;
  color: #f8f6f0;
}

body:not(.dark-mode) .pagination-button {
  background: 
    linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
  border-color: #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) .pagination-button:hover {
  background: 
    linear-gradient(135deg, #e8dcc0 0%, #d4c4a8 100%);
  border-color: #a0522d;
  color: #8b4513;
}

body:not(.dark-mode) .pagination-button.active {
  background: 
    linear-gradient(135deg, #cd853f 0%, #b8956b 100%);
  border-color: #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) .pagination-info {
  color: #a0522d;
}

/* Light mode forge theme for community database form elements */
body:not(.dark-mode) #communityDatabaseModal .community-content .form-group label {
  color: #8b4513;
}

body:not(.dark-mode) #communityDatabaseModal .community-content .form-group input,
body:not(.dark-mode) #communityDatabaseModal .community-content .form-group select,
body:not(.dark-mode) #communityDatabaseModal .community-content .form-group textarea {
  background: #f8f6f0;
  border: 2px solid #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) #communityDatabaseModal .community-content .form-group input:focus,
body:not(.dark-mode) #communityDatabaseModal .community-content .form-group select:focus,
body:not(.dark-mode) #communityDatabaseModal .community-content .form-group textarea:focus {
  border-color: #cd853f;
  box-shadow: 0 0 0 0.2rem rgba(205, 133, 63, 0.25);
}

body:not(.dark-mode) #communityDatabaseModal .seed-preview {
  background: 
    linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
  border: 2px solid #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) #communityDatabaseModal .seed-preview .seed-info {
  background: rgba(205, 133, 63, 0.2);
  border-color: #cd853f;
}

body:not(.dark-mode) #communityDatabaseModal .seed-preview .seed-info strong {
  color: #8b4513;
}

body:not(.dark-mode) #communityDatabaseModal .warning-box {
  background: 
    linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
  border-color: #cd853f;
  color: #8b4513;
}

body:not(.dark-mode) #communityDatabaseModal .warning-box .warning-icon {
  color: #cd853f;
}

/* Light mode forge theme for community database tabs */
body:not(.dark-mode) .community-tabs {
  background: 
    linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
  border-color: #8b4513;
}

body:not(.dark-mode) .community-tab {
  color: #2c1810;
  background: transparent;
  border-color: transparent;
}

body:not(.dark-mode) .community-tab.active {
  background: #f8f6f0;
  border-color: #8b4513;
  color: #8b4513;
  box-shadow: 0 -2px 4px rgba(139, 69, 19, 0.2);
}

body:not(.dark-mode) .community-tab:hover:not(.active) {
  background: rgba(205, 133, 63, 0.2);
  color: #8b4513;
}

/* Light mode forge theme for community header */
body:not(.dark-mode) .community-header {
  background: 
    linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
  border-color: #8b4513;
}

body:not(.dark-mode) .community-header h3 {
  color: #8b4513;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Light mode forge theme for community database controls */
body:not(.dark-mode) .community-controls {
  background: 
    linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
  border-color: #8b4513;
}

body:not(.dark-mode) .community-controls .btn {
  background: 
    linear-gradient(135deg, #f2ede4 0%, #e8dcc0 100%);
  border-color: #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) .community-controls .btn:hover {
  background: 
    linear-gradient(135deg, #e8dcc0 0%, #d4c4a8 100%);
  border-color: #a0522d;
  color: #8b4513;
}

body:not(.dark-mode) .community-controls .btn.active {
  background: 
    linear-gradient(135deg, #cd853f 0%, #b8956b 100%);
  border-color: #8b4513;
  color: #2c1810;
}

/* Light mode forge theme for community controls input and select */
body:not(.dark-mode) .community-controls input,
body:not(.dark-mode) .community-controls select {
  background: 
    linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
  border-color: #8b4513;
  color: #2c1810;
}

body:not(.dark-mode) .community-controls input:focus,
body:not(.dark-mode) .community-controls select:focus {
  border-color: #cd853f;
  box-shadow: 
    0 0 0 2px rgba(205, 133, 63, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

body:not(.dark-mode) .community-controls input::placeholder {
  color: #8b4513;
}

/* Light mode forge theme for empty state/error messages */
body:not(.dark-mode) .empty-state {
  background: 
    linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%);
  border-color: #8b4513;
  color: #8b4513;
  box-shadow: 
    0 4px 8px rgba(139, 69, 19, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

body:not(.dark-mode) .empty-state i {
  color: #cd853f;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

body:not(.dark-mode) .empty-state h3 {
  color: #8b4513;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

body:not(.dark-mode) .empty-state p {
  color: #2c1810;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

body.dark-mode .empty-state {
  background: 
    linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
  border-color: #5d4037;
  color: #cd853f;
}

body.dark-mode .empty-state h3 {
  color: #daa520;
}

body.dark-mode .empty-state p {
  color: #f5f5dc;
}

/* Community Form Styles - Scoped to community database modal only */
#communityDatabaseModal .community-content .form-group {
  margin-bottom: 20px;
}

#communityDatabaseModal .community-content .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #daa520;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#communityDatabaseModal .community-content .form-group input,
#communityDatabaseModal .community-content .form-group select,
#communityDatabaseModal .community-content .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #8b4513;
  border-radius: 6px;
  font-size: 14px;
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  color: #f5f5dc;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

#communityDatabaseModal .community-content .form-group input:focus,
#communityDatabaseModal .community-content .form-group select:focus,
#communityDatabaseModal .community-content .form-group textarea:focus {
  outline: none;
  border-color: #cd853f;
  box-shadow: 
    0 0 0 2px rgba(205, 133, 63, 0.3),
    inset 0 1px 2px rgba(0,0,0,0.3);
}

#communityDatabaseModal .community-content .form-group input::placeholder,
#communityDatabaseModal .community-content .form-group textarea::placeholder {
  color: #8b4513;
}

#communityDatabaseModal .community-content .form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #8b4513;
}

#communityDatabaseModal .seed-preview {
  background: 
    linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  border: 2px solid #8b4513;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  max-height: 200px;
  overflow-y: auto;
  color: #f5f5dc;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

#communityDatabaseModal .seed-preview .seed-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

#communityDatabaseModal .seed-preview .seed-info div {
  background: rgba(0,0,0,0.2);
  padding: 8px;
  border-radius: 4px;
  border-left: 3px solid #cd853f;
}

#communityDatabaseModal .seed-preview .seed-info strong {
  color: #daa520;
  display: block;
  margin-bottom: 4px;
}

#communityDatabaseModal .warning-box {
  background: 
    linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
  border: 2px solid #daa520;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  color: #f5f5dc;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

#communityDatabaseModal .warning-box i {
  color: #ff8c00;
  font-size: 18px;
  flex-shrink: 0;
}

#communityDatabaseModal .warning-box strong {
  color: #ff8c00;
}

/* Dark mode form styles - Scoped to community database modal only */
body.dark-mode #communityDatabaseModal .community-content .form-group label {
  color: #daa520;
}

body.dark-mode #communityDatabaseModal .community-content .form-group input,
body.dark-mode #communityDatabaseModal .community-content .form-group select,
body.dark-mode #communityDatabaseModal .community-content .form-group textarea {
  background: 
    linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
  border-color: #5d4037;
  color: #f5f5dc;
}

/* Fix dropdown option text visibility */
#communityDatabaseModal .community-content .form-group select option {
  background: #2c1810 !important;
  color: #f5f5dc !important;
  padding: 8px 12px;
}

body.dark-mode #communityDatabaseModal .community-content .form-group select option {
  background: #2c1810 !important;
  color: #f5f5dc !important;
}

/* Light mode dropdown options */
#communityDatabaseModal .community-content .form-group select option {
  background: #f5f5dc !important;
  color: #2c1810 !important;
}

body.dark-mode #communityDatabaseModal .community-content .form-group input:focus,
body.dark-mode #communityDatabaseModal .community-content .form-group select:focus,
body.dark-mode #communityDatabaseModal .community-content .form-group textarea:focus {
  border-color: #8b4513;
}

body.dark-mode #communityDatabaseModal .community-content .form-group input::placeholder,
body.dark-mode #communityDatabaseModal .community-content .form-group textarea::placeholder {
  color: #5d4037;
}

body.dark-mode #communityDatabaseModal .community-content .form-actions {
  border-color: #5d4037;
}

body.dark-mode #communityDatabaseModal .seed-preview {
  background: 
    linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
  border-color: #5d4037;
  color: #f5f5dc;
}

body.dark-mode #communityDatabaseModal .seed-preview .seed-info strong {
  color: #daa520;
}

body.dark-mode #communityDatabaseModal .warning-box {
  background: 
    linear-gradient(135deg, #5d4037 0%, #8b4513 100%);
  border-color: #cd853f;
  color: #f5f5dc;
}

/* Vote Success Animation */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

/* Profile Section Styling */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(0,0,0,0.1);
  border-radius: 12px;
  border: 1px solid rgba(139, 69, 19, 0.3);
}

.profile-stat {
  text-align: center;
  padding: 15px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  border: 1px solid rgba(139, 69, 19, 0.2);
}

.profile-stat-number {
  font-size: 2.5em;
  font-weight: bold;
  color: #ffd700;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.profile-stat-label {
  font-size: 0.9em;
  color: #cd853f;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.profile-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(139, 69, 19, 0.3);
}

.profile-tab {
  background: transparent;
  border: none;
  padding: 12px 20px;
  color: #cd853f;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.profile-tab:hover {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.profile-tab.active {
  color: #ffd700;
  border-bottom-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.profile-content {
  min-height: 400px;
}

.profile-section {
  display: none;
}

.profile-section.active {
  display: block;
}

.profile-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
}

.profile-section-header h4 {
  margin: 0;
  color: #ffd700;
  font-size: 1.3em;
}

.profile-actions {
  display: flex;
  gap: 10px;
}

.profile-items {
  display: grid;
  gap: 15px;
}

.profile-item {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.profile-item:hover {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.profile-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.profile-item-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #ffd700;
  margin-bottom: 5px;
}

.profile-item-meta {
  display: flex;
  gap: 15px;
  font-size: 0.9em;
  color: #cd853f;
}

.profile-item-description {
  color: #f5f5dc;
  margin-bottom: 15px;
  line-height: 1.5;
}

.profile-item-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 0.9em;
}

.profile-item-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #cd853f;
}

.profile-item-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.profile-item-action {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.profile-item-action.edit {
  background: #3498db;
  color: white;
}

.profile-item-action.edit:hover {
  background: #2980b9;
}

.profile-item-action.delete {
  background: #e74c3c;
  color: white;
}

.profile-item-action.delete:hover {
  background: #c0392b;
}

.profile-item-action.download {
  background: #27ae60;
  color: white;
}

.profile-item-action.download:hover {
  background: #229954;
}

.profile-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #cd853f;
}

.profile-empty-state i {
  font-size: 3em;
  margin-bottom: 20px;
  color: #8b4513;
}

.profile-empty-state h3 {
  margin-bottom: 10px;
  color: #ffd700;
}

/* Dark mode profile styles */
body.dark-mode .profile-stats {
  background: rgba(0,0,0,0.3);
  border-color: rgba(218, 165, 32, 0.3);
}

body.dark-mode .profile-stat {
  background: rgba(0,0,0,0.4);
  border-color: rgba(218, 165, 32, 0.2);
}

body.dark-mode .profile-item {
  background: rgba(0,0,0,0.3);
  border-color: rgba(218, 165, 32, 0.3);
}

body.dark-mode .profile-item:hover {
  background: rgba(0,0,0,0.4);
  border-color: rgba(255, 215, 0, 0.5);
}

/* Handicap Creator Layout */
.handicap-creator-layout {
  display: block;
  max-width: 800px;
  margin: 0 auto;
}

.handicap-form-section {
  width: 100%;
}

.handicap-form-section form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.handicap-form-section .form-group:last-of-type,
.handicap-form-section .form-group:nth-last-of-type(2) {
  grid-column: 1 / -1;
}

.handicap-form-section .form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 20px;
}





/* Basic Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

#addHandicapModal {
  z-index: 10002 !important;
}

/* Manual Assign Handicap Modal - Full Screen Design */
#manualAssignHandicapModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10003 !important;
  background: rgba(0, 0, 0, 0.8) !important;
}

.manual-assign-content {
  max-width: 100vw !important;
  width: 100vw !important;
  max-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10004 !important;
  background: linear-gradient(135deg, #f8f6f0 0%, #f2ede4 100%) !important;
  border: 2px solid #daa520 !important;
}

.manual-assign-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
  border-bottom: 2px solid #daa520;
  margin-bottom: 0;
}

.manual-assign-controls .game-info h3 {
  color: #8b4513;
  margin: 0 0 5px 0;
  font-size: 1.3em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.manual-assign-controls .game-info p {
  color: #2c1810;
  margin: 0;
  font-size: 0.9em;
  opacity: 0.9;
}

.manual-assign-controls .handicap-filters {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: end;
}

.manual-assign-controls .filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}

.manual-assign-controls .filter-group label {
  color: #f5f5dc;
  font-weight: 600;
  font-size: 0.9em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.manual-assign-controls .filter-group input,
.manual-assign-controls .filter-group select {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #daa520;
  border-radius: 6px;
  padding: 8px 12px;
  color: #2c1810;
  font-size: 0.9em;
}

.manual-assign-controls .filter-group input:focus,
.manual-assign-controls .filter-group select:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.manual-assign-content-area {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
}

.selected-handicaps-info {
  background: rgba(139, 69, 19, 0.1);
  border: 1px solid #daa520;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 15px;
  text-align: center;
  color: #8b4513;
  font-weight: 600;
}

.manual-assign-content-area .unified-handicap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  align-content: start;
  padding: 0;
}

.manual-assign-content-area .handicap-viewer-item {
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid;
  background: #f8f9fa;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  position: relative;
  cursor: pointer;
}

.manual-assign-content-area .handicap-viewer-item:hover {
  background: #e9ecef;
  transform: translateX(2px);
}

.manual-assign-content-area .handicap-viewer-item.selected {
  border: 3px solid #ff6b35;
  background: linear-gradient(135deg, #3d2815 0%, #4d3820 100%);
  transform: scale(1.02);
}

.manual-assign-content-area .handicap-viewer-item.selected::before {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff6b35;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  z-index: 10;
}

.manual-assign-content-area .handicap-viewer-item.common {
  border-left-color: var(--gray);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.manual-assign-content-area .handicap-viewer-item.uncommon {
  border-left-color: var(--success);
  background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
}

.manual-assign-content-area .handicap-viewer-item.rare {
  border-left-color: var(--secondary);
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.manual-assign-content-area .handicap-viewer-item.legendary {
  border-left-color: var(--purple);
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}

.manual-assign-content-area .handicap-viewer-item.mythic {
  border-left-color: #e91e63;
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
}

.manual-assign-content-area .handicap-viewer-item.permanent {
  border-left-width: 6px;
}

.manual-assign-content-area .handicap-viewer-item.temporary {
  border-left-width: 4px;
}

.manual-assign-content-area .handicap-name {
  font-weight: bold;
  color: #2c1810;
  margin-bottom: 4px;
}

.manual-assign-content-area .handicap-description {
  color: #6c757d;
  font-size: 0.9em;
  margin-bottom: 4px;
  max-height: 1.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  line-height: 1.2em;
  display: block;
}

.manual-assign-content-area .handicap-rarity {
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  color: #2c1810;
}

.manual-assign-content-area .handicap-type-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 0 8px 0 24px;
  font-size: 0.7em;
  font-weight: bold;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 4px 0 0;
  z-index: 5;
}

.manual-assign-content-area .handicap-type-badge.permanent {
  background: #17a2b8;
  color: #fff;
}

.manual-assign-content-area .handicap-type-badge.temporary {
  background: #ffc107;
  color: #2d1810;
}

.manual-assign-content-area .expand-description-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #daa520;
  border: 1px solid #8b4513;
  border-radius: 24px 0 8px 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  color: #2d1810;
  z-index: 10;
  transition: all 0.2s ease;
}

.manual-assign-content-area .expand-description-btn:hover {
  background: #daa520;
  transform: scale(1.1);
}

.manual-assign-content-area .handicap-viewer-item.description-expanded {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.manual-assign-content-area .handicap-viewer-item.description-expanded .handicap-description {
  max-height: none !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* Dark mode for manual assign modal */
body.dark-mode .manual-assign-content {
  background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%) !important;
  border-color: #8b4513 !important;
}

body.dark-mode .manual-assign-controls {
  background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
  border-bottom-color: #8b4513;
}

body.dark-mode .manual-assign-controls .game-info h3,
body.dark-mode .manual-assign-controls .game-info p {
  color: #daa520;
}

body.dark-mode .manual-assign-controls .filter-group label {
  color: #daa520;
}

body.dark-mode .manual-assign-controls .filter-group input,
body.dark-mode .manual-assign-controls .filter-group select {
  background: rgba(45, 24, 16, 0.8);
  border-color: #8b4513;
  color: #f5f5dc;
}

body.dark-mode .selected-handicaps-info {
  background: rgba(45, 24, 16, 0.3);
  border-color: #8b4513;
  color: #daa520;
}

/* Dark mode for manual assign modal cards */
body.dark-mode .manual-assign-content-area .handicap-viewer-item {
  background: #3b4252;
  color: #e5e5e5;
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item:hover {
  background: #4b5263;
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item.permanent {
  background: linear-gradient(135deg, #3d2815 0%, #4a2d1a 100%);
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item.temporary {
  background: linear-gradient(135deg, #1a2d3a 0%, #2d4a5a 100%);
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item.common {
  background: linear-gradient(135deg, #3b4252 0%, #4b5263 100%);
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item.uncommon {
  background: linear-gradient(135deg, #2d4a2d 0%, #3d5a3d 100%);
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item.rare {
  background: linear-gradient(135deg, #2d3d4a 0%, #3d4a5a 100%);
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item.legendary {
  background: linear-gradient(135deg, #4a2d4a 0%, #5a3d5a 100%);
}

body.dark-mode .manual-assign-content-area .handicap-viewer-item.mythic {
  background: linear-gradient(135deg, #4a2d3d 0%, #5a3d4a 100%);
}

body.dark-mode .manual-assign-content-area .handicap-name {
  color: #e5e5e5;
}

body.dark-mode .manual-assign-content-area .handicap-description {
  color: #c0c0c0;
}

body.dark-mode .manual-assign-content-area .handicap-rarity {
  color: #e5e5e5;
}

body.dark-mode .manual-assign-content-area .expand-description-btn {
  background: rgba(139, 69, 19, 0.8);
  border-color: #8b4513;
  color: #f5f5dc;
}

body.dark-mode .manual-assign-content-area .expand-description-btn:hover {
  background: #8b4513;
}

/* Modal header controls for manual assign modal */
.manual-assign-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
  border-bottom: 2px solid #daa520;
  margin-bottom: 0;
}

.manual-assign-content .modal-header h2 {
  color: #f5f5dc;
  margin: 0;
  font-size: 1.5em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.manual-assign-content .modal-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.manual-assign-content .modal-header .close {
  color: #f5f5dc;
  font-size: 2em;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: color 0.2s ease;
}

.manual-assign-content .modal-header .close:hover {
  color: #ffd700;
}

/* Dark mode for modal header */
body.dark-mode .manual-assign-content .modal-header {
  background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%);
  border-bottom-color: #8b4513;
}

body.dark-mode .manual-assign-content .modal-header h2 {
  color: #daa520;
}

body.dark-mode .manual-assign-content .modal-header .close {
  color: #daa520;
}

body.dark-mode .manual-assign-content .modal-header .close:hover {
  color: #ffd700;
}

/* Floating Action Buttons for Mobile */
.floating-action-buttons {
  position: fixed;
  right: 8px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10005;
  pointer-events: none;
}

.floating-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
}


.floating-assign-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  min-width: 50px;
}

.floating-assign-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
  border-color: rgba(255, 255, 255, 0.4);
}

.floating-assign-btn:disabled {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.floating-btn-text {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff6b35;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.floating-assign-btn:disabled .floating-btn-text {
  background: #6c757d;
}

/* Show floating buttons only on mobile */
@media (max-width: 768px) {
  .manual-assign-content .form-actions {
    display: none;
  }
  
  .floating-action-buttons {
    display: flex;
  }
  
  /* Ensure content doesn't overlap with floating buttons */
  .manual-assign-content-area {
    padding-bottom: 100px;
  }
  
  /* Make floating buttons more prominent on mobile */
  .floating-btn {
    width: 55px;
    height: 55px;
    font-size: 20px;
  }
  
  .floating-btn-text {
    width: 20px;
    height: 20px;
    font-size: 10px;
    top: -9px;
    right: -9px;
  }
}

/* Hide floating buttons on desktop */
@media (min-width: 769px) {
  .floating-action-buttons {
    display: none;
  }
  
  .manual-assign-content .form-actions {
    display: flex;
  }
}

/* Handicap Preview Modal - Higher z-index to appear above community database */
#handicapPreviewModal {
  z-index: 1001;
}

.modal-content {
  background-color: #f5f5dc;
  margin: 5% auto;
  padding: 0;
  border: 2px solid #8b4513;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  position: relative;
}

/* Handicap Preview Modal - Responsive sizing */
#handicapPreviewModal .modal-content {
  max-width: 800px;
  width: 60%;
  min-width: 50%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Hide stats on screens below 1000px */
@media (max-width: 999px) {
  .handicap-preview-modal-content .handicap-footer {
    display: none;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  #handicapPreviewModal .modal-content {
    max-width: 95%;
    width: 90%;
    min-width: 85%;
    margin: 2% auto;
    max-height: 95vh;
  }
  
  /* Mobile header adjustments */
  .handicap-preview-modal-content .handicap-header {
    padding: 20px 20px 16px 20px;
  }
  
  .handicap-preview-modal-content .handicap-title-section {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .handicap-preview-modal-content .handicap-name {
    font-size: 1.5em;
  }
  
  .handicap-preview-modal-content .handicap-meta {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .handicap-preview-modal-content .meta-item {
    font-size: 0.95em;
  }
  
  /* Mobile description adjustments */
  .handicap-preview-modal-content .handicap-description-section {
    padding: 20px 20px;
  }
  
  .handicap-preview-modal-content .description-text {
    font-size: 14px;
    padding-left: 16px;
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .handicap-preview-modal-content .handicap-header {
    padding: 16px 16px 12px 16px;
  }
  
  .handicap-preview-modal-content .handicap-name {
    font-size: 1.3em;
  }
  
  .handicap-preview-modal-content .handicap-description-section {
    padding: 16px 16px;
  }
}

.modal-header {
  background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
  color: #f5f5dc;
  padding: 20px;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #654321;
}

.modal-header-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5em;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  font-weight: bold;
  color: #f5f5dc;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  pointer-events: auto;
  z-index: 1000;
}

.modal-close:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}

/* Ensure modals are clickable */
#handicapPreviewModal,
#savedSeedsModal,
#seedBrowserModal {
  pointer-events: auto;
}

#handicapPreviewModal .modal-content,
#savedSeedsModal .modal-content,
#seedBrowserModal .modal-content {
  pointer-events: auto;
}

/* Autocomplete styling for handicap game input */
#communityHandicapGame {
  position: relative;
}

/* Ensure the parent container has relative positioning for autocomplete */
#communityHandicapGame + .autocomplete-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 0 0 4px 4px;
}

.autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
  background-color: #f0f8ff;
}

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

/* Red X button in top-left corner (matching blacklist style) */
.corner-delete-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px 0 24px 0;
  background: #dc3545;
  color: #fff;
  font-size: 0.7em;
  font-weight: bold;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2px 0 0 4px;
  z-index: 5;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.corner-delete-btn:hover {
  background: #c82333;
  transform: scale(1.1);
}

.corner-delete-btn:active {
  transform: scale(0.95);
}

/* Delete toggle button styling */
.delete-btn.active {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

.delete-btn.active:hover {
  background: #c82333;
  border-color: #c82333;
}

/* Ensure handicap viewer items have relative positioning for absolute corner button */
.handicap-viewer-item {
  position: relative;
}

/* Dark mode for corner delete button */
body.dark-mode .corner-delete-btn {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

body.dark-mode .corner-delete-btn:hover {
  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.modal-body {
  padding: 20px;
  background: #f5f5dc;
  border-radius: 0 0 10px 10px;
}

/* Dark mode for modals */
body.dark-mode .modal-content {
  background-color: #2c1810;
  border-color: #8b4513;
}

body.dark-mode .modal-header {
  background: linear-gradient(135deg, #2c1810 0%, #8b4513 100%);
  border-bottom-color: #654321;
}

body.dark-mode .modal-body {
  background: #2c1810;
  color: #f5f5dc;
}

/* Handicap Preview Modal - Elegant Design */
.handicap-preview-modal-content {
  padding: 0;
}

.handicap-preview-modal-content .handicap {
  margin: 0;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* Elegant Header */
.handicap-preview-modal-content .handicap-header {
  padding: 32px 32px 24px 32px;
  background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 100%);
  border-bottom: 1px solid rgba(218, 165, 32, 0.2);
}

.handicap-preview-modal-content .handicap-title-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.handicap-preview-modal-content .handicap-name {
  font-size: 1.8em;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin: 0;
  line-height: 1.2;
}

.handicap-preview-modal-content .handicap-rarity-badge {
  background: linear-gradient(135deg, #cd853f 0%, #daa520 100%);
  color: #2c1810;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.3);
}

.handicap-preview-modal-content .handicap-meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.handicap-preview-modal-content .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f5f5dc;
  font-size: 0.9em;
  font-weight: 500;
}

.handicap-preview-modal-content .meta-item i {
  color: #cd853f;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

/* Description Section */
.handicap-preview-modal-content .handicap-description-section {
  padding: 28px 32px;
  background: rgba(0,0,0,0.05);
}

.handicap-preview-modal-content .description-content {
  position: relative;
}

.handicap-preview-modal-content .description-text {
  margin: 0;
  color: #f5f5dc;
  line-height: 1.7;
  font-size: 15px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-style: italic;
  position: relative;
  padding-left: 20px;
}

.handicap-preview-modal-content .description-text::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -5px;
  font-size: 2em;
  color: #cd853f;
  opacity: 0.6;
  font-family: serif;
}

.handicap-preview-modal-content .description-text::after {
  content: '"';
  position: absolute;
  right: 0;
  bottom: -15px;
  font-size: 2em;
  color: #cd853f;
  opacity: 0.6;
  font-family: serif;
}

/* Footer with Stats */
.handicap-preview-modal-content .handicap-footer {
  padding: 28px 32px 32px 32px;
  background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.05) 100%);
  border-top: 1px solid rgba(218, 165, 32, 0.2);
}

.handicap-preview-modal-content .community-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.handicap-preview-modal-content .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: rgba(0,0,0,0.1);
  border-radius: 12px;
  border: 1px solid rgba(218, 165, 32, 0.2);
  transition: all 0.3s ease;
}

.handicap-preview-modal-content .stat:hover {
  background: rgba(218, 165, 32, 0.1);
  transform: translateY(-2px);
}

.handicap-preview-modal-content .stat i {
  color: #cd853f;
  font-size: 16px;
  margin-bottom: 4px;
}

.handicap-preview-modal-content .stat-number {
  color: #ffd700;
  font-weight: 700;
  font-size: 1.1em;
}

.handicap-preview-modal-content .stat-label {
  color: #f5f5dc;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* Dark mode for preview modal */
body.dark-mode .handicap-preview-modal-content .handicap {
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

/* Saved Seeds Modal Styles */
.saved-seed-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(139, 69, 19, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.saved-seed-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(139, 69, 19, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.saved-seed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.saved-seed-header h4 {
  margin: 0;
  color: #ffd700;
  font-size: 1.2em;
}

.saved-seed-actions {
  display: flex;
  gap: 8px;
}

.saved-seed-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.saved-seed-meta span {
  color: #cd853f;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.saved-seed-meta i {
  color: #8b4513;
}

.saved-seed-description {
  color: #f5f5dc;
  line-height: 1.5;
  font-size: 0.95em;
}

/* Dark mode for saved seeds */
body.dark-mode .saved-seed-item {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(218, 165, 32, 0.3);
}

body.dark-mode .saved-seed-item:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(218, 165, 32, 0.5);
}

body.dark-mode .saved-seed-header h4 {
  color: #ffd700;
}

body.dark-mode .saved-seed-meta span {
  color: #daa520;
}

body.dark-mode .saved-seed-meta i {
  color: #cd853f;
}

body.dark-mode .saved-seed-description {
  color: #e6d7f7;
}



/* Dark mode handicap creator */

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
  .handicap-creator-layout {
    max-width: 100%;
    margin: 0 20px;
  }
}

@media (max-width: 768px) {
  .handicap-form-section form {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .handicap-form-section .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .handicap-form-section .form-actions button {
    width: 100%;
  }
}

/* Profile Settings Styles */
.profile-settings-content {
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(218, 165, 32, 0.3);
}

.settings-form {
  max-width: 500px;
  margin: 0 auto;
}

.settings-form .form-group {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.settings-form .form-group label {
  color: #daa520;
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 10px;
  display: block;
}

.settings-form .form-group label i {
  margin-right: 8px;
  color: #cd853f;
}

.settings-form .form-group input[type="text"] {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #daa520;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #2c1810;
  font-size: 1em;
  transition: all 0.3s ease;
}

.settings-form .form-group input[type="text"]:focus {
  outline: none;
  border-color: #8b4513;
  box-shadow: 0 0 8px rgba(139, 69, 19, 0.3);
  background: #fff;
}

.settings-form .form-group input[readonly] {
  background: #333 !important;
  color: #888 !important;
  cursor: not-allowed;
}

.settings-form .form-help {
  color: #cd853f;
  font-size: 0.9em;
  margin-top: 5px;
  font-style: italic;
}

.settings-form .form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.settings-form .form-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-form .form-actions .btn {
  background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
  color: #f5f5dc;
  border: 2px solid #654321;
}

.settings-form .form-actions .btn:hover {
  background: linear-gradient(135deg, #a0522d 0%, #daa520 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.settings-form .form-actions .btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%);
  color: #fff;
  border: 2px solid #495057;
}

.settings-form .form-actions .btn-secondary:hover {
  background: linear-gradient(135deg, #5a6268 0%, #9ca3af 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


/* Dark mode for profile settings */
body.dark-mode .profile-settings-content {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(218, 165, 32, 0.2);
}

body.dark-mode .settings-form .form-group {
  background: rgba(45, 24, 16, 0.7);
  border-color: rgba(218, 165, 32, 0.3);
}

body.dark-mode .settings-form .form-group label {
  color: #daa520;
}

body.dark-mode .settings-form .form-group input[type="text"] {
  background: #3d2815;
  border-color: #8b4513;
  color: #f5f5dc;
}

body.dark-mode .settings-form .form-group input[type="text"]:focus {
  border-color: #daa520;
  box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
  background: #2d1810;
}

body.dark-mode .settings-form .form-help {
  color: #cd853f;
}

/* Username Setup Modal Styles */
.username-setup-content {
  padding: 20px 0;
}

/* Fuzzy Match Dialog Styles */
.fuzzy-match-comparison {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
}

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

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

.community-name {
  color: #ffd700;
  font-weight: bold;
}

.local-name {
  color: #4CAF50;
  font-weight: bold;
}

.fuzzy-match-options {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.fuzzy-match-options .btn {
  flex: 1;
  text-align: center;
}

.seed-matches {
  max-height: 300px;
  overflow-y: auto;
  margin: 15px 0;
}

.seed-match-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(218, 165, 32, 0.2);
  border-radius: 6px;
  margin: 8px 0;
}

.match-comparison {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.match-comparison i {
  color: #ffd700;
}

.match-score {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: bold;
}

/* Saved Seeds Styles */
.saved-seeds-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid rgba(218, 165, 32, 0.3);
}

.seeds-section-header h3 {
  color: #ffd700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.seeds-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.saved-seed-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
}

.saved-seed-card:hover {
  border-color: rgba(218, 165, 32, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.seed-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.seed-title {
  color: #ffd700;
  margin: 0;
  font-size: 1.2em;
  flex: 1;
  margin-right: 15px;
}

.seed-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.seed-card-body {
  color: #ccc;
}

.seed-description {
  margin-bottom: 15px;
  line-height: 1.5;
}

.seed-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: #888;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
}

.seed-creator {
  color: #4CAF50;
}

.seed-saved {
  color: #888;
}

/* Seed Browser Modal Styles */
.seed-browser-content {
  padding: 20px 0;
}

.seed-info {
  margin-bottom: 25px;
}

.seed-description {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.seed-details {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 15px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row strong {
  color: #ffd700;
  min-width: 120px;
}

.seed-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
}

/* Dark mode adjustments for saved seeds */
body.dark-mode .saved-seed-card {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(218, 165, 32, 0.4);
}

body.dark-mode .seed-description {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(218, 165, 32, 0.4);
}

body.dark-mode .seed-details {
  background: rgba(0, 0, 0, 0.1);
}

/* Game Name Autocomplete Styles */
.form-group {
  position: relative;
}

.autocomplete-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.autocomplete-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
  background: rgba(218, 165, 32, 0.2);
}

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

.game-name {
  color: #fff;
  font-weight: 500;
  flex: 1;
}

.match-score {
  color: #4CAF50;
  font-size: 0.85em;
  background: rgba(76, 175, 80, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 10px;
}

/* Dark mode adjustments for autocomplete */
body.dark-mode .autocomplete-container {
  background: rgba(0, 0, 0, 0.98);
  border-color: rgba(218, 165, 32, 0.4);
}

body.dark-mode .autocomplete-item:hover {
  background: rgba(218, 165, 32, 0.3);
}

.username-setup-info {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.username-setup-info p {
  margin: 0 0 10px 0;
  color: #f5f5dc;
  line-height: 1.5;
}

.username-setup-info p:last-child {
  margin-bottom: 0;
}

.username-setup-info i {
  color: #daa520;
  margin-right: 8px;
}

.username-requirements {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(218, 165, 32, 0.2);
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.username-requirements h4 {
  color: #daa520;
  margin: 0 0 10px 0;
  font-size: 1em;
}

.username-requirements h4 i {
  color: #2ecc71;
  margin-right: 8px;
}

.username-requirements ul {
  margin: 0;
  padding-left: 20px;
  color: #cd853f;
}

.username-requirements li {
  margin-bottom: 5px;
  font-size: 0.9em;
}

.username-requirements li:last-child {
  margin-bottom: 0;
}

/* Dark mode for username setup */
body.dark-mode .username-setup-info {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(218, 165, 32, 0.2);
}

body.dark-mode .username-setup-info p {
  color: #f5f5dc;
}

body.dark-mode .username-requirements {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(218, 165, 32, 0.1);
}

body.dark-mode .username-requirements h4 {
  color: #daa520;
}

body.dark-mode .username-requirements li {
  color: #cd853f;
}

/* Handicap Rotation Event Styles */
.handicap-rotation-event {
  background: linear-gradient(135deg, #2c1810 0%, #3d2317 100%);
  border: 2px solid #daa520;
  border-radius: 12px;
  padding: 20px;
  margin: 10px 0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.rotation-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(218, 165, 32, 0.3);
}

.rotation-icon {
  font-size: 2.5em;
  color: #daa520;
  margin-bottom: 10px;
  animation: rotate 2s linear infinite;
}

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

.rotation-header h3 {
  color: #daa520;
  margin: 10px 0 5px 0;
  font-size: 1.4em;
  font-weight: bold;
}

.rotation-subtitle {
  color: #cd853f;
  font-size: 1em;
  margin: 0;
  font-style: italic;
}

.rotation-controls {
  margin-top: 10px;
}

.mute-toggle-btn {
  background: rgba(218, 165, 32, 0.2);
  border: 1px solid rgba(218, 165, 32, 0.4);
  border-radius: 6px;
  color: #daa520;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9em;
}

.mute-toggle-btn:hover {
  background: rgba(218, 165, 32, 0.3);
  border-color: rgba(218, 165, 32, 0.6);
  transform: scale(1.05);
}

.mute-toggle-btn:active {
  transform: scale(0.95);
}

.rotation-content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.rotation-section {
  flex: 1;
  min-width: 200px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid rgba(218, 165, 32, 0.2);
}

.rotation-section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: bold;
  color: #daa520;
  font-size: 1.1em;
}

.removed-icon {
  color: #ff6b6b;
  margin-right: 8px;
  font-size: 1.2em;
}

.added-icon {
  color: #51cf66;
  margin-right: 8px;
  font-size: 1.2em;
}

.rotation-handicaps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rotation-handicaps .handicap {
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 4px solid;
  font-size: 0.9em;
}

.removed-handicaps .handicap {
  background: rgba(255, 107, 107, 0.1);
  border-left-color: #ff6b6b;
  opacity: 0.8;
}

.added-handicaps .handicap {
  background: rgba(81, 207, 102, 0.1);
  border-left-color: #51cf66;
}

.handicap-rotation-none {
  color: #cd853f;
  font-style: italic;
  text-align: center;
  padding: 10px;
  background: rgba(205, 133, 63, 0.1);
  border-radius: 6px;
  border: 1px dashed rgba(205, 133, 63, 0.3);
}

/* Dark mode for handicap section title */
body.dark-mode .handicap-section-title {
  background: linear-gradient(135deg, #2d1810 0%, #3d2815 100%) !important;
  border-color: #8b4513 !important;
  color: #daa520 !important;
}

body.dark-mode .handicap-section-title .handicap-viewer-btn {
  background: linear-gradient(135deg, #daa520 0%, #cd853f 100%) !important;
  border: 1px solid #8b4513 !important;
  color: #2d1810 !important;
}

body.dark-mode .handicap-section-title .handicap-viewer-btn:hover {
  background: linear-gradient(135deg, #cd853f 0%, #daa520 100%) !important;
  border-color: #654321 !important;
}

/* Update Notification Styles */
.update-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #2a2a2a;
  border: 2px solid #4CAF50;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  max-width: 400px;
  animation: slideInRight 0.3s ease-out;
}

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

.update-notification-content {
  padding: 0;
}

.update-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: #4CAF50;
  color: white;
  border-radius: 6px 6px 0 0;
  font-weight: bold;
}

.update-notification-header i {
  margin-right: 8px;
  animation: spin 2s linear infinite;
}

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

.update-notification-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.update-notification-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.update-notification-body {
  padding: 20px;
}

.update-notification-body p {
  margin: 0 0 15px 0;
  color: #ccc;
}

.update-item-preview {
  background: #1a1a1a;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 15px;
  border: 1px solid #444;
}

.update-item-preview strong {
  color: #4CAF50;
  display: block;
  margin-bottom: 10px;
}

.update-changes {
  color: #ccc;
  font-size: 14px;
  line-height: 1.4;
}

.update-notification-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.update-notification-actions .btn {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.update-notification-actions .btn-secondary {
  background: #666;
  color: white;
}

.update-notification-actions .btn-secondary:hover {
  background: #777;
}

.update-notification-actions .btn-primary {
  background: #4CAF50;
  color: white;
}

.update-notification-actions .btn-primary:hover {
  background: #45a049;
}

/* Edit Modal Z-Index Fix */
#editHandicapModal,
#editSeedModal {
  z-index: 10001 !important;
}

#editHandicapModal .modal-content,
#editSeedModal .modal-content {
  z-index: 10002 !important;
}

/* Update Badge Styles */
.update-badge {
  background: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: pulse 2s infinite;
}

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

.update-badge i {
  font-size: 10px;
}