:root{
    --gold:#FFD64D;
    --gold-hi:#FFF3A3;
    --bg:#0b0f12;
    --success:#4CAF50;
    --danger:#F44336;

    /* Glow position */
    --glow-x: 80%;
    --glow-y: 32%;
    --glow-w: 211px;
    --glow-h: 366px;
  }
  *{box-sizing:border-box}
  html{
    height:100%;
    margin:0;
    /* Enable smooth scrolling */
    scroll-behavior:smooth;
    /* Optimize text rendering on mobile */
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  body{
    height:100%;
    margin:0;
    background:var(--bg);
    color:#e6ecf1;
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
    /* Enable momentum scrolling on iOS */
    -webkit-overflow-scrolling:touch;
    /* Prevent text selection on tap/hold on mobile */
    -webkit-tap-highlight-color:transparent;
  }
  /* Better touch targets for interactive elements */
  button, a, input, select, textarea{
    -webkit-tap-highlight-color:transparent;
  }
  
  /* Background with continuous animation */
  .bg{position:fixed;inset:0;overflow:hidden;z-index:0}
  .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:contrast(1.04) saturate(1.02)}

  /* Enhanced multi-layer lava glow animations */
  @keyframes lavaPulse{
    0%,100% { opacity:.25; filter:brightness(1.0) saturate(1.0); }
    20%     { opacity:.45; filter:brightness(1.25) saturate(1.2); }
    40%     { opacity:.35; filter:brightness(1.15) saturate(1.1); }
    60%     { opacity:.55; filter:brightness(1.35) saturate(1.3); }
    80%     { opacity:.30; filter:brightness(1.1) saturate(1.05); }
  }
  
  @keyframes lavaFlicker{
    0%,100% { opacity:0.3; }
    50%     { opacity:0.7; }
  }

  /* Primary glow layer */
  .bg::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      /* Core bright glow */
      radial-gradient( circle 220px at var(--glow-x) var(--glow-y),
        rgba(255,180,80,.8), rgba(255,140,60,.4) 30%, rgba(255,100,40,.2) 50%, transparent 70%),
      /* Secondary warm glow */
      radial-gradient( ellipse 280px 400px at var(--glow-x) var(--glow-y),
        rgba(255,200,120,.5), rgba(255,160,80,.25) 40%, rgba(255,120,60,.1) 60%, transparent 80%),
      /* Outer ambient glow */
      radial-gradient( circle 350px at var(--glow-x) var(--glow-y),
        rgba(255,220,180,.2), rgba(255,180,140,.1) 50%, transparent 75%);
    mix-blend-mode: screen;
    animation: lavaPulse 6s ease-in-out infinite;
  }
  
  /* Additional flicker layer for more dynamic effect */
  .bg::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient( circle 180px at var(--glow-x) var(--glow-y),
        rgba(255,220,180,.6), rgba(255,160,100,.2) 40%, transparent 60%);
    mix-blend-mode: color-dodge;
    animation: lavaFlicker 3s ease-in-out infinite;
  }

  /* Particle system canvas */
  .particles-canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:2;
  }

  /* CRT Scanlines overlay */
  .scanlines{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:10;
    background:repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0.08) 1px,
      rgba(0,0,0,0) 2px
    );
    opacity:0.4;
  }

  /* Enhanced brand design */
  .brand{
    position:fixed; 
    left:24px; 
    top:24px; 
    z-index:6;
  }
  
  .brand .title{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
  }

  .brand-logo{
    filter: drop-shadow(2px 2px 0px #000)
            drop-shadow(0 0 20px rgba(255,214,77,.4))
            drop-shadow(0 0 40px rgba(255,214,77,.2));
    flex-shrink: 0;
  }

  .brand-text{
    font-family:'Press Start 2P', monospace;
    font-size:32px;
    letter-spacing:.08em;
    /* Multi-layer text effects */
    background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, #D4A033 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0px #000)
            drop-shadow(0 0 20px rgba(255,214,77,.4))
            drop-shadow(0 0 40px rgba(255,214,77,.2));
  }

  /* Enhanced slogan with better styling */
  .brand .slogan{
    font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
    opacity: 0.9;
    animation: sloganFade 8s ease-in-out infinite;
    position: relative;
    padding-left: 2px;
  }
  
  /* Divider dots between slogan parts */
  .slogan-divider{
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    margin: 0 8px 1px;
    opacity: 0.6;
    box-shadow: 0 0 6px rgba(255,214,77,.5);
  }

  @keyframes sloganFade{
    0%, 100% { 
      opacity: 0.4; 
      filter: blur(0.5px);
    }
    50% { 
      opacity: 1; 
      filter: blur(0px) drop-shadow(0 0 8px rgba(255,255,255,.3));
    }
  }

  /* Center aligned for warrior naming screen */
  .page-container.center-aligned{
    align-items:center;
    padding-bottom:20px;
  }

  /* Page container */
  .page-container{position:fixed;inset:0;display:grid;place-items:center center;padding:20px;overflow-y:auto; z-index:4}

  /* Bottom-aligned for access code screen */
  .page-container.bottom-aligned{
    place-items:end center;
    padding-bottom:40px;
  }

  /* Modern panel styles matching dashboard */
  .panel{
    position:relative;
    width:min(520px,92vw);
    margin:0 auto;
    background:rgba(12,16,20,.10);
    border:2px solid rgba(255,214,77,.3);
    border-radius:12px;
    padding:32px 28px;
    backdrop-filter:blur(8px);
    box-shadow:0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* Extra transparent for access code screen */
  .panel-transparent{
    background:rgba(12,16,20,.03);
  }

  .panel-header{
    text-align:center;
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,214,77,.15);
  }

  .sys{
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    color:var(--gold);
    text-shadow:0 0 20px rgba(255,214,77,.5);
    margin-bottom:8px;
  }
  
  .sub-text{
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
    font-size:13px;
    color:#a0a8b0;
    margin-top:8px;
  }
  
  /* Continuous blink animation */
  .blink{animation:blinkDot 1s infinite}
  @keyframes blinkDot{0%,50%{opacity:1}50.1%,100%{opacity:0}}

  .input-group{
    margin-bottom:16px;
  }

  .input-label{
    display:block;
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#a0a8b0;
    margin-bottom:8px;
    text-transform:uppercase;
  }

  .bar{display:flex;gap:12px;align-items:stretch;}
  
  .input-field{
    flex:1;
    padding:12px 14px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    color:#e6ecf1;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    transition:all 0.2s;
  }
  
  .input-field:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(0,0,0,.6);
    box-shadow:0 0 0 2px rgba(255,214,77,.1);
  }
  
  .input-field::placeholder{
    color:rgba(160,168,176,.5);
  }

  /* Standardized button sizes */
  .btn-small{
    padding:8px 16px;
    font-size:9px;
  }
  .btn-medium{
    padding:10px 20px;
    font-size:10px;
  }
  .btn-large{
    padding:12px 24px;
    font-size:11px;
  }

  .btn-submit{
    padding:12px 24px;
    background:var(--gold);
    border:2px solid var(--gold);
    border-radius:8px;
    color:#000;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space:nowrap;
    position:relative;
    box-shadow:
      0 1px 2px rgba(0,0,0,.4),
      0 4px 8px rgba(0,0,0,.2),
      inset 0 1px 0 rgba(255,255,255,.3);
  }

  .btn-submit:hover{
    background:var(--gold-hi);
    transform:translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0,0,0,.4),
      0 6px 16px rgba(255,214,77,.4),
      inset 0 1px 0 rgba(255,255,255,.4);
  }

  .btn-submit:active{
    transform:translateY(1px);
    box-shadow:
      0 0 2px rgba(0,0,0,.4),
      0 2px 4px rgba(0,0,0,.2),
      inset 0 2px 4px rgba(0,0,0,.2);
  }

  .helper{
    margin-top:20px;
    text-align:center;
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
    font-size:13px;
    color:#a0a8b0;
  }
  
  .helper a{
    color:var(--gold);
    text-decoration:none;
    cursor:pointer;
    transition:color 0.2s;
    font-family:'Press Start 2P', monospace;
    font-size:10px;
  }
  
  .helper a:hover{
    color:var(--gold-hi);
    text-shadow:0 0 8px rgba(255,214,77,.5);
  }
  
  /* Decorative elements */
  .panel::before{
    content:'';
    position:absolute;
    top:-1px;
    left:50%;
    transform:translateX(-50%);
    width:100px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:0.8;
  }

  .footer{position:fixed;right:20px;bottom:16px;font-size:12px;opacity:.85; z-index:5; display:flex; align-items:center; gap:12px;}
  .footer a{color:var(--gold); text-decoration:none; transition:all 0.2s; display:flex; align-items:center; gap:4px;}
  .footer a:hover{opacity:1; text-shadow:0 0 8px var(--gold);}

  /* Warrior naming screen */
  .warrior-naming{
    animation: warriorEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes warriorEntrance{
    0%{
      opacity:0;
      transform:scale(0.8) translateY(-30px);
      filter:blur(10px);
    }
    50%{
      opacity:0.5;
      transform:scale(1.05) translateY(5px);
      filter:blur(2px);
    }
    100%{
      opacity:1;
      transform:scale(1) translateY(0);
      filter:blur(0);
    }
  }

  .warrior-title{
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    color:var(--gold);
    text-align:center;
    margin-bottom:24px;
    animation:titleGlow 2s ease-in-out infinite;
    text-shadow:0 0 20px rgba(255,214,77,.6);
  }

  @keyframes titleGlow{
    0%,100%{
      text-shadow:0 0 20px rgba(255,214,77,.6), 0 0 30px rgba(255,214,77,.3);
      filter:brightness(1);
    }
    50%{
      text-shadow:0 0 30px rgba(255,214,77,.8), 0 0 50px rgba(255,214,77,.5);
      filter:brightness(1.2);
    }
  }

  .warrior-input{
    width:100%;
    padding:16px;
    background:rgba(0,0,0,.5);
    border:2px solid rgba(255,214,77,.3);
    border-radius:8px;
    color:#e6ecf1;
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    text-align:center;
    transition:all 0.3s;
    margin-bottom:24px;
    letter-spacing:0.1em;
  }

  .warrior-input:focus{
    outline:none;
    border-color:var(--gold);
    background:rgba(0,0,0,.7);
    box-shadow:0 0 0 3px rgba(255,214,77,.2), 0 0 30px rgba(255,214,77,.3);
    transform:scale(1.02);
  }

  .warrior-input::placeholder{
    color:#6b7280;
    font-family:Inter, system-ui, Segoe UI, Roboto, Arial;
    font-size:13px;
    letter-spacing:0.05em;
  }

  /* Dashboard specific styles */
  .dashboard-content{
    display:none;
    width:min(720px,92vw);
    background:rgba(12,16,20,.10);
    border:2px solid rgba(255,214,77,.3);
    border-radius:12px;
    padding:24px;
    backdrop-filter:blur(8px);
  }

  .dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,214,77,.2);
  }

  .user-info{font-family:'Press Start 2P', monospace;}
  .user-name{color:var(--gold);font-size:16px;margin-bottom:4px;}
  .user-stats{color:#a0a8b0;font-size:10px;}

  .logout-btn{
    padding:8px 12px;
    background:rgba(255,214,77,.1);
    border:1px solid var(--gold);
    color:var(--gold);
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    cursor:pointer;
    border-radius:4px;
    transition:all 0.2s;
  }
  .logout-btn:hover{background:rgba(255,214,77,.2);}

  .stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:16px;
    margin-bottom:24px;
  }

  .stat-card{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:16px;
    text-align:center;
    transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position:relative;
  }

  .stat-card:hover{
    transform:translateY(-3px) scale(1.02);
    border-color:rgba(255,214,77,0.5);
    background:rgba(255,214,77,.08);
    box-shadow:0 8px 24px rgba(255,214,77,0.15), 0 0 0 1px rgba(255,214,77,0.1);
  }

  .stat-label{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#a0a8b0;
    margin-bottom:8px;
  }

  .stat-value{
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    color:var(--gold);
  }

  /* Card-based dashboard layout */
  .dashboard-cards-row{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-bottom:20px;
  }

  .dashboard-card{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:20px;
    margin-bottom:20px;
    transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position:relative;
  }

  .dashboard-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,214,77,0.4);
    background:rgba(0,0,0,.4);
    box-shadow:0 6px 20px rgba(0,0,0,0.4);
  }

  /* Themed cards */
  .dashboard-card.invest{
    border:2px solid rgba(76,175,80,.4);
    background:rgba(16,24,16,.25);
  }

  .dashboard-card.gamble{
    border:2px solid rgba(244,67,54,.4);
    background:rgba(24,16,16,.25);
  }

  .dashboard-card.invest .card-title{
    color:#4CAF50;
    text-shadow:0 0 10px rgba(76,175,80,.5);
  }

  .dashboard-card.gamble .card-title{
    color:#F44336;
    text-shadow:0 0 10px rgba(244,67,54,.5);
  }

  .btn-invest{
    background:rgba(76,175,80,.2);
    border-color:#4CAF50;
    color:#4CAF50;
  }
  .btn-invest:hover:not(:disabled){
    background:rgba(76,175,80,.35);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(76,175,80,.4);
  }

  .btn-gamble{
    background:rgba(244,67,54,.2);
    border-color:#F44336;
    color:#F44336;
  }
  .btn-gamble:hover:not(:disabled){
    background:rgba(244,67,54,.35);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(244,67,54,.4);
  }

  .card-title{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:var(--gold);
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,214,77,.15);
  }

  .card-content{
    font-size:13px;
    line-height:1.6;
  }

  .recent-matches{
    /* Removed redundant styles - now inside dashboard-card */
  }

  .recent-matches-content{
    filter:blur(2px);
    opacity:0.4;
    pointer-events:none;
  }

  /* Old coming-soon styles removed - now using consistent .coming-soon-wrapper approach */

  .match-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .match-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px;
    background:rgba(255,214,77,.02);
    border:1px solid rgba(255,214,77,.1);
    border-radius:4px;
    font-family:'Press Start 2P', monospace;
    font-size:10px;
  }

  .match-result{
    padding:2px 6px;
    border-radius:3px;
    font-size:9px;
  }
  .win{background:rgba(76,175,80,.3);color:#4CAF50;}
  .win::before{content:'✓ ';}
  .loss{background:rgba(244,67,54,.3);color:#F44336;}
  .loss::before{content:'✕ ';}

  .dashboard-inventory{
    /* Removed redundant styles - now inside dashboard-card */
  }

  .section-title{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:var(--gold);
    margin-bottom:12px;
  }

  .dashboard-items-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }

  .dashboard-item-slot{
    position:relative;
    aspect-ratio:1;
    background:rgba(255,214,77,.05);
    border:2px solid rgba(255,214,77,.2);
    border-radius:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s;
  }

  .dashboard-item-slot:hover{
    background:rgba(255,214,77,.15);
    border-color:var(--gold);
    transform:translateY(-2px);
  }

  .dashboard-item-slot.empty{
    opacity:0.3;
    cursor:default;
  }

  .dashboard-item-slot.empty:hover{
    background:rgba(255,214,77,.05);
    border-color:rgba(255,214,77,.2);
    transform:none;
  }

  .dashboard-item-icon{
    font-size:24px;
    margin-bottom:4px;
  }

  .dashboard-item-name{
    font-family:'Press Start 2P', monospace;
    font-size:7px;
    color:#e6ecf1;
    text-align:center;
    line-height:1.3;
  }

  .dashboard-item-count{
    position:absolute;
    top:4px;
    right:4px;
    background:rgba(255,214,77,.9);
    color:#000;
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    padding:2px 4px;
    border-radius:3px;
  }

  /* Tooltip for hover */
  .dashboard-item-tooltip{
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.95);
    border:2px solid var(--gold);
    border-radius:6px;
    padding:8px 12px;
    min-width:150px;
    z-index:1000;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.2s;
  }

  .dashboard-item-slot:hover .dashboard-item-tooltip{
    opacity:1;
  }

  .tooltip-name{
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:var(--gold);
    margin-bottom:4px;
  }

  .tooltip-desc{
    font-family:Inter, system-ui, Arial;
    font-size:11px;
    color:#e6ecf1;
    line-height:1.4;
  }

  .tooltip-type{
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    color:#a0a8b0;
    margin-top:4px;
    text-transform:uppercase;
  }

  .wallet-section{
    /* Removed redundant styles - now inside dashboard-card */
  }

  .wallet-info{
    text-align:center;
  }

  .wallet-status{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:#a0a8b0;
    margin-bottom:8px;
    word-break:break-all;
  }

  .wallet-status.connected{
    color:#4CAF50;
  }

  .action-buttons{
    display:flex;
    gap:12px;
    margin-top:24px;
  }

  .action-btn{
    flex:1;
    padding:10px 20px;
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border:2px solid;
    position:relative;
  }

  .btn-primary{
    background:var(--gold);
    border-color:var(--gold);
    color:#000;
    box-shadow:
      0 1px 2px rgba(0,0,0,.4),
      0 4px 8px rgba(0,0,0,.2),
      inset 0 1px 0 rgba(255,255,255,.3);
  }
  .btn-primary:hover{
    background:var(--gold-hi);
    transform:translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0,0,0,.4),
      0 6px 16px rgba(255,214,77,.4),
      inset 0 1px 0 rgba(255,255,255,.4);
  }
  .btn-primary:active{
    transform:translateY(1px);
    box-shadow:
      0 0 2px rgba(0,0,0,.4),
      0 2px 4px rgba(0,0,0,.2),
      inset 0 2px 4px rgba(0,0,0,.2);
  }

  .btn-secondary{
    background:transparent;
    border-color:rgba(255,214,77,.5);
    color:var(--gold);
    box-shadow:
      0 1px 2px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,214,77,.1);
  }
  .btn-secondary:hover{
    background:rgba(255,214,77,.1);
    transform:translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0,0,0,.3),
      0 4px 12px rgba(255,214,77,.15),
      inset 0 1px 0 rgba(255,214,77,.2);
  }
  .btn-secondary:active{
    transform:translateY(1px);
    box-shadow:
      0 0 2px rgba(0,0,0,.3),
      inset 0 1px 3px rgba(0,0,0,.2);
  }

  /* Gold Particle Effects */
  @keyframes goldParticle{
    0%{
      transform:translate(0, 0) scale(1);
      opacity:1;
    }
    100%{
      transform:translate(var(--tx), var(--ty)) scale(0);
      opacity:0;
    }
  }

  .gold-particle{
    position:fixed;
    width:8px;
    height:8px;
    background:radial-gradient(circle, #FFD700 0%, #FFA500 100%);
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    animation:goldParticle 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow:0 0 10px rgba(255,215,0,0.8), 0 0 20px rgba(255,215,0,0.4);
  }

  /* Loading Skeletons */
  @keyframes shimmer{
    0%{background-position:-1000px 0;}
    100%{background-position:1000px 0;}
  }

  .skeleton{
    background:linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.05) 75%);
    background-size:1000px 100%;
    animation:shimmer 2s infinite;
    border-radius:8px;
  }

  .skeleton-text{
    height:14px;
    margin-bottom:8px;
    border-radius:4px;
  }

  .skeleton-title{
    height:24px;
    width:60%;
    margin-bottom:16px;
    border-radius:6px;
  }

  .skeleton-card{
    height:120px;
    border-radius:12px;
    margin-bottom:16px;
  }

  /* Page transitions */
  .fade-in{
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes fadeIn{
    from{
      opacity:0;
      transform:translateY(20px) translateX(-5px) scale(0.96);
      filter:blur(4px);
    }
    to{
      opacity:1;
      transform:translateY(0) translateX(0) scale(1);
      filter:blur(0);
    }
  }

  .fade-in-delayed{
    opacity: 0;
    animation: fadeInDelayed 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  }
  @keyframes fadeInDelayed{
    from{
      opacity:0;
      transform:translateY(30px) translateX(-8px) scale(0.95);
      filter:blur(6px);
    }
    to{
      opacity:1;
      transform:translateY(0) translateX(0) scale(1);
      filter:blur(0);
    }
  }

  .fade-out{
    animation: fadeOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  @keyframes fadeOut{
    from{
      opacity:1;
      transform:translateY(0) translateX(0) scale(1);
      filter:blur(0);
    }
    to{
      opacity:0;
      transform:translateY(-15px) translateX(5px) scale(0.97);
      filter:blur(3px);
    }
  }

  /* Oven Investment Styles */
  .oven-container{
    display:none;
    width:min(600px,92vw);
    background:rgba(12,16,20,.92);
    border:2px solid rgba(76,175,80,.4);
    border-radius:12px;
    padding:24px;
    backdrop-filter:blur(8px);
  }

  .oven-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(76,175,80,.3);
  }

  .oven-title{
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    color:#4CAF50;
    text-shadow:0 0 20px rgba(76,175,80,.6);
  }

  .oven-stats-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-bottom:20px;
  }

  .oven-stat-box{
    background:rgba(76,175,80,.08);
    border:1px solid rgba(76,175,80,.25);
    border-radius:8px;
    padding:14px;
    text-align:center;
  }

  .oven-stat-label{
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    color:#a0a8b0;
    margin-bottom:8px;
    letter-spacing:0.05em;
  }

  .oven-stat-value{
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    color:#e6ecf1;
  }

  .oven-stat-value.highlight{
    color:#4CAF50;
    text-shadow:0 0 10px rgba(76,175,80,.4);
  }

  .oven-timer-box{
    text-align:center;
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:#4CAF50;
    padding:16px;
    background:rgba(76,175,80,.1);
    border:1px solid rgba(76,175,80,.3);
    border-radius:8px;
    margin-bottom:24px;
  }

  .oven-action-section{
    margin-bottom:20px;
  }

  .oven-section-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#a0a8b0;
    margin-bottom:10px;
    letter-spacing:0.05em;
  }

  .oven-input-row{
    display:flex;
    gap:10px;
  }

  .oven-button-row{
    display:flex;
    gap:10px;
  }

  .oven-input{
    flex:1;
    padding:12px 14px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(76,175,80,.3);
    border-radius:8px;
    color:#e6ecf1;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    transition:all 0.2s;
  }

  .oven-input:focus{
    outline:none;
    border-color:#4CAF50;
    background:rgba(0,0,0,.6);
    box-shadow:0 0 0 2px rgba(76,175,80,.15);
  }

  .oven-info{
    background:rgba(76,175,80,.08);
    border:1px solid rgba(76,175,80,.2);
    border-radius:8px;
    padding:14px;
    font-family:Inter, system-ui, Arial;
    font-size:12px;
    color:#b0b8c0;
    text-align:center;
    line-height:1.6;
  }

  .oven-info strong{
    color:#4CAF50;
  }

  /* Airdrop Farm Styles */
  .farm-button-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    margin:32px 0;
  }

  .farm-btn{
    width:200px;
    height:200px;
    border-radius:50%;
    background:linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    border:4px solid rgba(76,175,80,.6);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:0 8px 30px rgba(76,175,80,.4), inset 0 2px 4px rgba(255,255,255,.3);
    position:relative;
    overflow:hidden;
  }

  .farm-btn:hover:not(:disabled){
    transform:scale(1.05);
    box-shadow:0 12px 40px rgba(76,175,80,.6), inset 0 2px 4px rgba(255,255,255,.4);
  }

  .farm-btn:active:not(:disabled){
    transform:scale(0.95);
  }

  .farm-btn:disabled{
    opacity:0.5;
    cursor:not-allowed;
    filter:grayscale(0.5);
  }

  .farm-btn-text{
    font-family:'Press Start 2P', monospace;
    font-size:24px;
    color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,.4);
    z-index:1;
  }

  .farm-cooldown{
    text-align:center;
    width:100%;
    max-width:300px;
  }

  .farm-cooldown-text{
    font-family:Inter, system-ui, Arial;
    font-size:14px;
    color:#b0b8c0;
    margin-bottom:8px;
  }

  .farm-cooldown-text span{
    color:#4CAF50;
    font-weight:700;
  }

  .farm-cooldown-bar{
    width:100%;
    height:8px;
    background:rgba(0,0,0,.4);
    border-radius:4px;
    overflow:hidden;
    border:1px solid rgba(76,175,80,.3);
  }

  .farm-cooldown-fill{
    height:100%;
    background:linear-gradient(90deg, #4CAF50 0%, #45a049 100%);
    transition:width 0.1s linear;
    border-radius:4px;
  }

  .farm-result{
    text-align:center;
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Press Start 2P', monospace;
    font-size:32px;
    font-weight:700;
  }

  .farm-result.flash-red{
    animation:flashRed 0.5s ease-out;
    color:#f44336;
  }

  .farm-result.flash-green{
    animation:flashGreen 0.5s ease-out;
    color:#4CAF50;
  }

  .farm-result.flash-gold{
    animation:flashGold 0.8s ease-out;
    color:#FFD700;
  }

  @keyframes flashRed{
    0%{transform:scale(1); opacity:0;}
    20%{transform:scale(1.5); opacity:1;}
    100%{transform:scale(1); opacity:1;}
  }

  @keyframes flashGreen{
    0%{transform:scale(1) rotate(0deg); opacity:0;}
    20%{transform:scale(1.3) rotate(-5deg); opacity:1;}
    40%{transform:scale(1.3) rotate(5deg); opacity:1;}
    100%{transform:scale(1) rotate(0deg); opacity:1;}
  }

  @keyframes flashGold{
    0%{transform:scale(1) rotate(0deg); opacity:0; filter:brightness(1);}
    15%{transform:scale(1.5) rotate(-10deg); opacity:1; filter:brightness(1.5);}
    30%{transform:scale(1.5) rotate(10deg); opacity:1; filter:brightness(2);}
    45%{transform:scale(1.5) rotate(-5deg); opacity:1; filter:brightness(1.5);}
    60%{transform:scale(1.5) rotate(5deg); opacity:1; filter:brightness(2);}
    100%{transform:scale(1) rotate(0deg); opacity:1; filter:brightness(1);}
  }

  /* Campaign Banner Styles */
  .campaign-banner{
    background:linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,165,0,0.2) 100%);
    border:2px solid rgba(255,215,0,0.4);
    border-radius:12px;
    padding:20px 24px;
    margin-bottom:24px;
    cursor:pointer;
    opacity:1;
    transition:all 0.3s ease;
    box-shadow:0 4px 20px rgba(255,215,0,0.15);
  }

  .campaign-banner:hover{
    background:linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(255,165,0,0.25) 100%);
    border-color:rgba(255,215,0,0.6);
    box-shadow:0 6px 24px rgba(255,215,0,0.25);
    transform:translateY(-2px);
  }

  .campaign-banner-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:16px;
  }

  .campaign-banner-icon{
    font-size:24px;
  }

  .campaign-banner-text{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    color:#FFD700;
    text-shadow:0 2px 4px rgba(0,0,0,0.4);
    letter-spacing:1px;
  }

  .campaign-banner-info{
    font-size:16px;
    opacity:0.8;
  }

  .campaign-banner-subtitle{
    font-family:'Courier New', monospace;
    font-size:13px;
    color:#4CAF50;
    text-align:center;
    font-weight:bold;
    letter-spacing:0.5px;
    margin-top:-8px;
  }

  .campaign-progress{
    margin-bottom:8px;
  }

  .campaign-progress-text{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#FFD700;
    text-align:center;
    margin-bottom:8px;
  }

  .campaign-progress-bar{
    width:100%;
    height:8px;
    background:rgba(0,0,0,0.3);
    border-radius:4px;
    overflow:hidden;
    position:relative;
  }

  .campaign-progress-fill{
    height:100%;
    background:linear-gradient(90deg, #FFD700, #FFA500);
    border-radius:4px;
    transition:width 0.5s ease;
    box-shadow:0 0 10px rgba(255,215,0,0.5);
  }

  .campaign-time-remaining{
    font-family:Inter, system-ui, Arial;
    font-size:11px;
    color:rgba(255,215,0,0.8);
    text-align:center;
    margin-top:8px;
  }

  .campaign-leaderboard-link{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:8px;
  }

  .campaign-rank-display{
    display:flex;
    align-items:center;
    gap:4px;
    font-family:'Press Start 2P', monospace;
  }

  .campaign-rank-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
  }

  .campaign-rank-left{
    flex:1;
    min-width:280px;
  }

  .campaign-rank-info{
    display:flex;
    align-items:baseline;
    gap:16px;
    margin-top:16px;
  }

  .campaign-rank-number{
    font-family:'Press Start 2P', monospace;
    font-size:48px;
    color:#FFD700;
    font-weight:bold;
    text-shadow:0 0 20px rgba(255,215,0,0.4);
    line-height:1;
  }

  .campaign-rank-gc{
    font-family:'Courier New', monospace;
    font-size:18px;
    color:#888;
    font-weight:normal;
  }

  /* About Section Styles */
  .about-section{
    width:min(720px,92vw);
    background:linear-gradient(135deg, rgba(12,16,20,0.85) 0%, rgba(20,25,30,0.90) 100%);
    border:2px solid rgba(255,214,77,0.4);
    border-radius:12px;
    margin-bottom:24px;
    overflow:hidden;
    backdrop-filter:blur(12px);
    transition:all 0.3s ease;
  }

  .about-section:hover{
    border-color:rgba(255,214,77,0.6);
    box-shadow:0 4px 20px rgba(255,214,77,0.15);
  }

  .about-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 24px;
    background:linear-gradient(90deg, rgba(255,215,0,0.1) 0%, rgba(255,165,0,0.05) 100%);
    border-bottom:1px solid rgba(255,214,77,0.2);
    cursor:pointer;
    user-select:none;
  }

  .about-header:hover{
    background:linear-gradient(90deg, rgba(255,215,0,0.15) 0%, rgba(255,165,0,0.08) 100%);
  }

  .about-title{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:#FFD700;
    text-shadow:0 2px 4px rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    gap:12px;
  }

  .about-toggle{
    font-size:14px;
    color:#FFD700;
    transition:transform 0.3s ease;
  }

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

  .about-content{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease, padding 0.4s ease;
    padding:0 24px;
  }

  .about-content.expanded{
    max-height:800px;
    padding:24px;
  }

  .about-intro{
    font-family:'Courier New', monospace;
    font-size:15px;
    line-height:1.8;
    color:#e0e8f0;
    margin-bottom:20px;
    text-align:center;
    font-weight:500;
  }

  .about-intro strong{
    color:#FFD700;
    font-weight:700;
  }

  .about-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:16px;
    margin-top:20px;
  }

  .about-card{
    background:rgba(0,0,0,0.4);
    border:1px solid rgba(255,214,77,0.25);
    border-radius:8px;
    padding:20px;
    transition:all 0.3s ease;
  }

  .about-card:hover{
    border-color:rgba(255,214,77,0.5);
    background:rgba(0,0,0,0.5);
    transform:translateY(-2px);
  }

  .about-card-icon{
    font-size:36px;
    margin-bottom:12px;
    display:block;
  }

  .about-card-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#FFD700;
    margin-bottom:12px;
    text-transform:uppercase;
  }

  .about-card-text{
    font-family:'Courier New', monospace;
    font-size:13px;
    line-height:1.6;
    color:#c0c8d0;
  }

  .about-card-text strong{
    color:#FFD700;
  }

  /* Campaign Page Styles */
  .campaign-container{
    display:none;
    width:min(720px,92vw);
    background:rgba(12,16,20,.10);
    border:2px solid rgba(255,214,77,.3);
    border-radius:12px;
    padding:24px;
    backdrop-filter:blur(8px);
  }

  .campaign-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,214,77,.2);
  }

  .campaign-title{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    color:#FFD700;
    text-shadow:0 2px 4px rgba(0,0,0,0.4);
  }

  .campaign-stats-section{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    margin-bottom:24px;
  }

  .campaign-stat-card{
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,214,77,0.3);
    border-radius:8px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:12px;
    transition:all 0.3s ease;
  }

  .campaign-stat-card:hover{
    border-color:rgba(255,214,77,0.5);
    background:rgba(0,0,0,0.4);
  }

  .campaign-stat-icon{
    font-size:32px;
  }

  .campaign-stat-info{
    flex:1;
  }

  .campaign-stat-label{
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    color:#a0a8b0;
    margin-bottom:4px;
  }

  .campaign-stat-value{
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    color:#FFD700;
  }

  .campaign-progress-section{
    background:linear-gradient(135deg, rgba(255,215,0,0.08) 0%, rgba(255,165,0,0.12) 100%);
    border:2px solid rgba(255,214,77,0.3);
    border-radius:12px;
    padding:20px;
    margin-bottom:24px;
  }

  .campaign-progress-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
  }

  .campaign-progress-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#FFD700;
  }

  .campaign-progress-percentage{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:#FFD700;
  }

  .campaign-progress-bar-large{
    width:100%;
    height:16px;
    background:rgba(0,0,0,0.4);
    border-radius:8px;
    overflow:hidden;
    position:relative;
    margin-bottom:12px;
  }

  .campaign-progress-fill-large{
    height:100%;
    background:linear-gradient(90deg, #FFD700, #FFA500);
    border-radius:8px;
    transition:width 0.5s ease;
    box-shadow:0 0 15px rgba(255,215,0,0.6);
  }

  .campaign-progress-info{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:#FFD700;
    text-align:center;
  }

  .campaign-info-section{
    background:rgba(0,0,0,0.2);
    border:1px solid rgba(255,214,77,0.2);
    border-radius:12px;
    padding:20px;
    margin-bottom:24px;
  }

  .campaign-info-title{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:#FFD700;
    margin-bottom:16px;
  }

  .campaign-info-content{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .campaign-info-item{
    display:flex;
    gap:12px;
    font-family:Inter, system-ui, Arial;
    font-size:13px;
    line-height:1.6;
    color:#e0e0e0;
  }

  .campaign-info-bullet{
    color:#FFD700;
    font-weight:bold;
  }

  .campaign-disclaimer-section{
    background:rgba(244,67,54,0.08);
    border:1px solid rgba(244,67,54,0.2);
    border-radius:8px;
    padding:12px;
    margin-top:16px;
    font-family:Inter, system-ui, Arial;
    font-size:11px;
    color:rgba(244,67,54,0.9);
    text-align:center;
    line-height:1.6;
  }

  .campaign-time-section{
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,214,77,0.3);
    border-radius:8px;
    padding:16px;
    text-align:center;
  }

  .campaign-time-label{
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:#a0a8b0;
    margin-bottom:8px;
  }

  .campaign-time-value{
    font-family:Inter, system-ui, Arial;
    font-size:14px;
    color:#FFD700;
  }

  .campaign-earn-section{
    margin-top:24px;
  }

  .campaign-earn-title{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:#FFD700;
    margin-bottom:16px;
    text-align:center;
  }

  .campaign-cards-row{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    margin-bottom:16px;
  }

  .campaign-card{
    background:rgba(0,0,0,0.3);
    border:2px solid rgba(255,214,77,0.3);
    border-radius:12px;
    padding:16px;
    transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position:relative;
    overflow:hidden;
  }

  .campaign-card:hover{
    border-color:rgba(255,214,77,0.6);
    transform:translateY(-4px) scale(1.01);
    box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,214,77,0.1);
    background:rgba(0,0,0,0.4);
  }

  .campaign-card.invest{
    border-color:rgba(76,175,80,0.3);
  }

  .campaign-card.invest:hover{
    border-color:rgba(76,175,80,0.7);
    box-shadow:0 8px 28px rgba(76,175,80,0.2), 0 0 40px rgba(76,175,80,0.1);
    background:rgba(16,24,16,0.3);
  }

  .campaign-card.gamble{
    border-color:rgba(244,67,54,0.3);
  }

  .campaign-card.gamble:hover{
    border-color:rgba(244,67,54,0.7);
    box-shadow:0 8px 28px rgba(244,67,54,0.2), 0 0 40px rgba(244,67,54,0.1);
    background:rgba(24,16,16,0.3);
  }

  .campaign-card-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#FFD700;
    margin-bottom:12px;
    text-align:center;
  }

  .campaign-card-content{
    display:flex;
    flex-direction:column;
  }

  @media(max-width:600px){
    .campaign-cards-row{
      grid-template-columns:1fr;
    }
  }

  .gambling-disclaimer{
    background:rgba(244,67,54,0.08);
    border:1px solid rgba(244,67,54,0.2);
    border-radius:8px;
    padding:12px;
    margin-top:12px;
    font-family:Inter, system-ui, Arial;
    font-size:10px;
    color:#f44336;
    text-align:center;
    line-height:1.5;
  }

  /* Mines Game Styles */
  .mines-game-area{
    max-width:600px;
    margin:0 auto;
  }

  .mines-bet-section{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:16px;
    margin-bottom:20px;
  }

  .mines-bet-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .mines-input-group{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .mines-label{
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:#a0a8b0;
    letter-spacing:0.05em;
  }

  .mines-input{
    padding:10px 12px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(255,214,77,.2);
    border-radius:6px;
    color:#e6ecf1;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
  }

  .mines-input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(255,214,77,.1);
  }

  .mines-stats-display{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-bottom:20px;
  }

  .mines-stat{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
    text-align:center;
  }

  .mines-stat-label{
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    color:#a0a8b0;
    margin-bottom:6px;
  }

  .mines-stat-value{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    color:var(--gold);
  }

  .mines-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:8px;
    margin-bottom:20px;
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
  }

  .mines-tile{
    aspect-ratio:1;
    background:rgba(255,214,77,.1);
    border:2px solid rgba(255,214,77,.3);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    cursor:pointer;
    transition:all 0.2s;
    user-select:none;
  }

  .mines-tile:hover:not(.revealed){
    background:rgba(255,214,77,.2);
    transform:scale(1.05);
  }

  .mines-tile.revealed{
    cursor:default;
    border-color:rgba(76,175,80,.4);
    background:rgba(76,175,80,.15);
  }

  .mines-tile.mine{
    border-color:rgba(244,67,54,.6);
    background:rgba(244,67,54,.2);
    animation:mineExplode 0.5s ease-out;
  }

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

  .mines-tile.disabled{
    opacity:0.5;
    cursor:not-allowed;
    pointer-events:none;
  }

  .mines-info{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.15);
    border-radius:8px;
    padding:12px;
    text-align:center;
    font-size:12px;
    color:#a0a8b0;
    font-family:Inter, system-ui, Arial;
  }

  /* Blackjack Game Styles */
  .blackjack-game-area{
    max-width:700px;
    margin:0 auto;
  }

  .blackjack-bet-section{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:16px;
    margin-bottom:20px;
  }

  .blackjack-bet-row{
    display:flex;
    gap:12px;
    align-items:flex-end;
  }

  .blackjack-input-group{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .blackjack-label{
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:#a0a8b0;
    letter-spacing:0.05em;
  }

  .blackjack-input{
    padding:10px 12px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(255,214,77,.2);
    border-radius:6px;
    color:#e6ecf1;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
  }

  .blackjack-input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(255,214,77,.1);
  }

  .blackjack-stats-display{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-bottom:20px;
  }

  .blackjack-stat{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
    text-align:center;
  }

  .blackjack-stat-label{
    font-family:'Press Start 2P', monospace;
    font-size:8px;
    color:#a0a8b0;
    margin-bottom:6px;
  }

  .blackjack-stat-value{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    color:var(--gold);
  }

  .blackjack-table{
    background:rgba(16,24,16,.3);
    border:2px solid rgba(255,214,77,.2);
    border-radius:12px;
    padding:24px;
    margin-bottom:20px;
    min-height:300px;
  }

  .blackjack-hand-section{
    margin-bottom:24px;
  }

  .blackjack-hand-section.player{
    border-top:1px solid rgba(255,214,77,.1);
    padding-top:24px;
  }

  .blackjack-hand-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#a0a8b0;
    margin-bottom:12px;
    text-align:center;
  }

  .blackjack-cards{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    min-height:80px;
  }

  .blackjack-card{
    width:60px;
    height:84px;
    background:#fff;
    border:2px solid #333;
    border-radius:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    box-shadow:0 4px 8px rgba(0,0,0,.3);
    animation:cardDeal 0.3s ease-out;
  }

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

  .blackjack-card.red{
    color:#dc143c;
  }

  .blackjack-card.black{
    color:#000;
  }

  .blackjack-card.hidden{
    background:linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color:#fff;
    font-size:24px;
  }

  .blackjack-card-value{
    font-size:14px;
    margin-top:4px;
  }

  .blackjack-actions{
    display:flex;
    gap:12px;
    margin-bottom:20px;
  }

  .blackjack-actions .action-btn{
    flex:1;
  }

  .blackjack-info{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.15);
    border-radius:8px;
    padding:12px;
    text-align:center;
    font-size:12px;
    color:#a0a8b0;
    font-family:Inter, system-ui, Arial;
  }

  /* Reaction Game Styles */
  .game-container{
    display:none;
    width:min(900px,92vw);
    background:rgba(12,16,20,.10);
    border:2px solid rgba(255,214,77,.3);
    border-radius:12px;
    padding:20px;
    backdrop-filter:blur(8px);
  }

  .game-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,214,77,.2);
  }

  .game-title{
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    color:var(--gold);
  }

  .back-btn{
    padding:8px 16px;
    background:rgba(255,214,77,.1);
    border:1px solid var(--gold);
    color:var(--gold);
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    cursor:pointer;
    border-radius:4px;
    transition:all 0.2s;
  }
  .back-btn:hover{background:rgba(255,214,77,.2);}

  /* Breadcrumb Navigation */
  .breadcrumb{
    padding:12px 0;
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:#a0a8b0;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
  }
  .breadcrumb-item{
    cursor:pointer;
    transition:all 0.2s;
  }
  .breadcrumb-item:hover{
    color:var(--gold-hi);
  }
  .breadcrumb-item.active{
    color:var(--gold);
    cursor:default;
  }
  .breadcrumb-separator{
    color:rgba(255,214,77,.3);
  }

  /* Game Disclaimer Bar */
  .game-disclaimer{
    background:rgba(244,67,54,.15);
    border:1px solid rgba(244,67,54,.3);
    border-radius:6px;
    padding:12px 16px;
    margin-top:16px;
    font-family:Inter,system-ui;
    font-size:11px;
    color:#F44336;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .game-disclaimer.info{
    background:rgba(255,214,77,.1);
    border-color:rgba(255,214,77,.3);
    color:var(--gold);
  }
  .game-disclaimer.success{
    background:rgba(76,175,80,.15);
    border-color:rgba(76,175,80,.3);
    color:#4CAF50;
  }

  /* Empty States */
  .empty-state{
    text-align:center;
    padding:48px 24px;
    color:#a0a8b0;
  }
  .empty-state-icon{
    font-size:48px;
    margin-bottom:16px;
    opacity:0.5;
  }
  .empty-state-title{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:var(--gold);
    margin-bottom:12px;
  }
  .empty-state-message{
    font-family:Inter,system-ui;
    font-size:13px;
    line-height:1.6;
    max-width:400px;
    margin:0 auto;
  }

  /* Consistent Coming Soon Overlay */
  .coming-soon-wrapper{
    position:relative;
  }
  .coming-soon-wrapper.disabled{
    pointer-events:none;
  }
  .coming-soon-overlay{
    position:absolute;
    inset:0;
    background:rgba(11,15,18,.85);
    backdrop-filter:blur(4px);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
  }
  .coming-soon-badge{
    background:linear-gradient(135deg, var(--gold), var(--gold-hi));
    color:#000;
    padding:12px 24px;
    border-radius:8px;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    font-weight:bold;
    box-shadow:0 4px 16px rgba(255,214,77,.4);
    animation:pulse 2s ease-in-out infinite;
  }

  /* GC Animation */
  @keyframes countUp{
    0%{
      opacity:0;
      transform:translateY(10px);
    }
    100%{
      opacity:1;
      transform:translateY(0);
    }
  }
  .gc-change{
    animation:countUp 0.3s ease-out;
  }
  .gc-increase{
    color:#4CAF50;
    text-shadow:0 0 8px rgba(76,175,80,.6);
  }
  .gc-decrease{
    color:#F44336;
    text-shadow:0 0 8px rgba(244,67,54,.6);
  }

  /* Game layout - sidebar + main */
  .game-layout{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:20px;
  }

  .game-sidebar{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.15);
    border-radius:8px;
    padding:16px;
  }

  .game-main{
    background:rgba(0,0,0,.2);
    border:1px solid rgba(255,214,77,.15);
    border-radius:8px;
    padding:20px;
  }

  .game-area{
    background:rgba(0,0,0,.5);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:24px;
    margin-bottom:20px;
  }

  .chart-container{
    width:100%;
    height:200px;
    background:rgba(16,20,24,.8);
    border:2px solid rgba(255,214,77,.1);
    border-radius:8px;
    position:relative;
    overflow:hidden;
    margin-bottom:16px;
    transition:all 0.2s;
  }

  .chart-container.green{
    border-color:rgba(76,175,80,.5);
    background:rgba(16,24,16,.8);
  }

  .chart-container.red{
    border-color:rgba(244,67,54,.8);
    background:rgba(24,16,16,.9);
    animation:redPulse 0.5s ease-out;
  }

  @keyframes redPulse{
    0%{box-shadow:0 0 0 0 rgba(244,67,54,.8);}
    100%{box-shadow:0 0 30px 10px rgba(244,67,54,0);}
  }

  .chart-line{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:60%;
    overflow:hidden;
  }

  .price-display{
    position:absolute;
    top:20px;
    right:20px;
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    color:#4CAF50;
    text-shadow:0 0 10px currentColor;
    transition:all 0.2s;
  }

  .red .price-display{
    color:#F44336;
  }

  .sell-button{
    width:100%;
    padding:20px;
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    background:#F44336;
    border:2px solid #D32F2F;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.2s;
    text-transform:uppercase;
    letter-spacing:0.1em;
  }

  .sell-button:hover:not(:disabled){
    background:#D32F2F;
    transform:translateY(-2px);
    box-shadow:0 4px 20px rgba(244,67,54,.4);
  }

  .sell-button:active:not(:disabled){
    transform:translateY(0);
  }

  .sell-button:disabled{
    background:rgba(100,100,100,.3);
    border-color:rgba(100,100,100,.2);
    color:rgba(255,255,255,.3);
    cursor:not-allowed;
  }

  .instructions{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
    margin-bottom:16px;
  }

  .instructions-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:var(--gold);
    margin-bottom:8px;
  }

  .instructions-text{
    font-family:Inter, system-ui, Arial;
    font-size:13px;
    color:#a0a8b0;
    line-height:1.6;
  }

  .attempts-counter{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
    margin-bottom:16px;
  }

  .attempts-label{
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:#a0a8b0;
  }

  .attempts-value{
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    color:var(--gold);
  }

  .results-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }

  .result-card{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.2);
    border-radius:6px;
    padding:8px;
    text-align:center;
  }

  .result-card.best{
    background:rgba(76,175,80,.1);
    border-color:rgba(76,175,80,.4);
  }

  .result-attempt{
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:#a0a8b0;
    margin-bottom:6px;
  }

  .result-time{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:var(--gold);
  }

  .game-status{
    text-align:center;
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    padding:16px;
    margin-bottom:20px;
  }

  .status-ready{
    color:#4CAF50;
  }

  .status-go{
    color:#F44336;
  }

  .canvas-chart{
    width:100%;
    height:100%;
    image-rendering:crisp-edges;
  }

  /* Crash Rocket Game Styles */
  .crash-bet-section{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
    margin-bottom:16px;
  }

  .crash-input{
    width:100%;
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:4px;
    padding:8px;
    color:var(--gold);
    font-family:'Press Start 2P', monospace;
    font-size:11px;
  }

  .crash-input:focus{
    outline:none;
    border-color:var(--gold);
  }

  .crash-info-section{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
    margin-bottom:16px;
  }

  .crash-stat{
    padding:8px 0;
    border-bottom:1px solid rgba(255,214,77,.1);
  }

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

  .crash-history{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
  }

  .crash-history-list{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top:8px;
  }

  .crash-history-item{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    padding:6px 8px;
    border-radius:4px;
    background:rgba(0,0,0,.3);
  }

  .crash-history-item.crashed-low{
    color:#F44336;
    border:1px solid rgba(244,67,54,.3);
  }

  .crash-history-item.crashed-med{
    color:#FF9800;
    border:1px solid rgba(255,152,0,.3);
  }

  .crash-history-item.crashed-high{
    color:#4CAF50;
    border:1px solid rgba(76,175,80,.3);
  }

  .crash-game-area{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .crash-hash-display{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:12px;
  }

  .crash-rocket-container{
    position:relative;
    height:350px;
    background:linear-gradient(to bottom, rgba(16,20,24,.9), rgba(16,16,32,.9));
    border:2px solid rgba(255,214,77,.2);
    border-radius:8px;
    overflow:hidden;
  }

  .crash-rocket-container.crashed{
    animation:explosion 0.5s ease-out;
    border-color:rgba(244,67,54,.8);
  }

  @keyframes explosion{
    0%{background:rgba(16,20,24,.9);}
    50%{background:rgba(244,67,54,.3);}
    100%{background:rgba(16,20,24,.9);}
  }

  .crash-multiplier-display{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:10;
  }

  .crash-multiplier-value{
    font-family:'Press Start 2P', monospace;
    font-size:48px;
    color:var(--gold);
    text-shadow:0 0 20px rgba(255,214,77,.8), 0 4px 8px rgba(0,0,0,.8);
    animation:pulse 2s ease-in-out infinite;
  }

  .crash-multiplier-value.flying{
    animation:flyingPulse 0.3s ease-in-out infinite;
  }

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

  .crash-status-text{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:#a0a8b0;
    margin-top:8px;
  }

  .crash-rocket{
    position:absolute;
    font-size:40px;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    transition:all 0.05s linear;
    z-index:5;
  }

  .crash-rocket.flying{
    animation:rocketShake 0.1s infinite;
  }

  @keyframes rocketShake{
    0%, 100%{transform:translateX(-50%) rotate(-2deg);}
    50%{transform:translateX(-50%) rotate(2deg);}
  }

  .crash-trail-canvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
  }

  .crash-cashout-btn{
    width:100%;
    padding:16px;
    background:var(--gold);
    border:2px solid var(--gold);
    color:#000;
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    cursor:pointer;
    border-radius:8px;
    transition:all 0.2s;
  }

  .crash-cashout-btn:hover:not(:disabled){
    background:rgba(255,214,77,.8);
    transform:scale(1.02);
  }

  .crash-cashout-btn:disabled{
    background:rgba(255,214,77,.2);
    border-color:rgba(255,214,77,.2);
    color:rgba(255,255,255,.3);
    cursor:not-allowed;
  }

  .crash-game-status{
    text-align:center;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:#a0a8b0;
    padding:12px;
    background:rgba(0,0,0,.3);
    border-radius:8px;
  }

  /* Leaderboard Screen Styles */
  .leaderboard-container{
    display:none;
    width:min(780px,92vw);
    background:rgba(12,16,20,.10);
    border:2px solid rgba(255,214,77,.3);
    border-radius:12px;
    padding:24px;
    backdrop-filter:blur(8px);
  }

  .leaderboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,214,77,.2);
  }

  .leaderboard-title{
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    color:var(--gold);
  }

  .podium{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-bottom:32px;
    align-items:flex-end;
  }

  .podium-item{
    background:rgba(255,214,77,.05);
    border:2px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:20px 16px;
    text-align:center;
    transition:all 0.3s;
    position:relative;
  }

  .podium-item.rank-1{
    order:2;
    border-color:var(--gold);
    background:rgba(255,214,77,.15);
    transform:scale(1.1);
  }

  .podium-item.rank-2{
    order:1;
    border-color:rgba(192,192,192,.5);
    background:rgba(192,192,192,.08);
  }

  .podium-item.rank-3{
    order:3;
    border-color:rgba(205,127,50,.5);
    background:rgba(205,127,50,.08);
  }

  .podium-rank{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    font-weight:bold;
    border:2px solid;
  }

  .rank-1 .podium-rank{
    background:var(--gold);
    border-color:var(--gold-hi);
    color:#000;
    box-shadow:0 0 20px rgba(255,214,77,.6);
  }

  .rank-2 .podium-rank{
    background:#C0C0C0;
    border-color:#E8E8E8;
    color:#000;
  }

  .rank-3 .podium-rank{
    background:#CD7F32;
    border-color:#E4A853;
    color:#000;
  }

  .podium-player{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:var(--gold);
    margin:8px 0 4px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .podium-time{
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    color:#4CAF50;
    margin:4px 0;
  }

  .podium-date{
    font-size:9px;
    color:#a0a8b0;
    font-family:Inter, system-ui, Arial;
  }

  .leaderboard-filters{
    display:flex;
    gap:12px;
    margin-bottom:20px;
    flex-wrap:wrap;
  }

  .filter-btn{
    padding:8px 16px;
    background:rgba(255,214,77,.1);
    border:1px solid rgba(255,214,77,.3);
    color:var(--gold);
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    cursor:pointer;
    border-radius:6px;
    transition:all 0.2s;
  }

  .filter-btn.active{
    background:var(--gold);
    color:#000;
    border-color:var(--gold);
  }

  .filter-btn:hover{
    background:rgba(255,214,77,.2);
    transform:translateY(-1px);
  }

  .leaderboard-table{
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    overflow:hidden;
  }

  .table-header{
    display:grid;
    grid-template-columns:60px 1fr 120px 140px;
    gap:12px;
    padding:12px 16px;
    background:rgba(255,214,77,.1);
    border-bottom:1px solid rgba(255,214,77,.2);
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:var(--gold);
  }

  .table-row{
    display:grid;
    grid-template-columns:60px 1fr 120px 140px;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid rgba(255,214,77,.1);
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    transition:all 0.2s;
  }

  .table-row:hover{
    background:rgba(255,214,77,.05);
  }

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

  .table-row.user-row{
    background:rgba(76,175,80,.1);
    border:1px solid rgba(76,175,80,.3);
  }

  .rank-badge{
    color:#a0a8b0;
    text-align:center;
  }

  .player-name{
    color:#e6ecf1;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .reaction-time{
    color:#4CAF50;
    text-align:center;
  }

  .entry-date{
    color:#a0a8b0;
    font-size:9px;
    text-align:right;
  }

  .no-data{
    text-align:center;
    padding:40px 20px;
    color:#a0a8b0;
    font-family:'Press Start 2P', monospace;
    font-size:11px;
  }

  .your-best{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:16px;
    margin-bottom:20px;
    text-align:center;
  }

  .your-best-label{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#a0a8b0;
    margin-bottom:8px;
  }

  .your-best-time{
    font-family:'Press Start 2P', monospace;
    font-size:20px;
    color:var(--gold);
  }

  /* Loading state */
  .loading-spinner{
    display:inline-block;
    width:20px;
    height:20px;
    border:3px solid rgba(255,214,77,.2);
    border-top-color:var(--gold);
    border-radius:50%;
    animation:spin 1s linear infinite;
  }

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

  /* Error message - glassmorphism style */
  .error-msg{
    color:#ff6b6b;
    font-size:12px;
    font-family:Inter, system-ui, Arial;
    margin-top:8px;
    padding:12px 16px;
    background:rgba(12,16,20,0.85);
    border:2px solid rgba(244, 67, 54, 0.5);
    border-radius:8px;
    backdrop-filter:blur(8px);
    box-shadow:0 4px 16px rgba(0,0,0,0.3), 0 0 20px rgba(244, 67, 54, 0.1);
    display:none;
    line-height:1.4;
  }

  .error-msg.show{
    display:block;
    animation:slideDown 0.2s ease-out;
  }

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

  /* Responsive improvements */
  @media(max-width:600px){
    /* Leaderboard table - improved readability */
    .table-header, .table-row{
      grid-template-columns:50px 1fr 90px;
      font-size:11px;
    }
    .entry-date{
      display:none;
    }
    .podium{
      grid-template-columns:1fr;
    }
    .podium-item.rank-1{
      order:1;
    }
    .podium-item.rank-2{
      order:2;
    }
    .podium-item.rank-3{
      order:3;
    }
    .quest-grid, .inventory-grid{
      grid-template-columns:1fr;
    }

    /* Panel and container sizing */
    .panel{
      width:96vw;
      padding:20px 16px;
      max-height:88vh;
      overflow-y:auto;
    }
    .dashboard-container, .quest-container, .leaderboard-container, .game-container, .inventory-container, .campaign-container{
      width:96vw;
      padding:16px 12px;
      max-height:88vh;
      overflow-y:auto;
    }

    /* Typography adjustments - improved readability */
    .panel-title, .dashboard-title, .quest-title, .leaderboard-title, .game-title, .inventory-title{
      font-size:16px;
    }
    .warrior-subtitle{
      font-size:11px;
    }
    .input-label{
      font-size:12px;
    }
    .warrior-input{
      font-size:14px;
      padding:14px 16px;
    }

    /* Buttons - better touch targets (minimum 44px height) */
    .btn-submit, .back-btn, .action-btn{
      font-size:12px;
      padding:16px 20px;
      min-height:48px;
    }
    .sell-button{
      font-size:14px;
      padding:20px;
      min-height:52px;
    }

    /* Dashboard stats grid */
    .stats-grid{
      grid-template-columns:1fr;
      gap:14px;
    }
    .stat-value{
      font-size:20px;
    }
    .stat-label{
      font-size:11px;
    }

    /* Quest tabs - better touch targets */
    .quest-tabs{
      flex-wrap:wrap;
      gap:10px;
    }
    .quest-tab{
      font-size:10px;
      padding:12px 16px;
      min-height:44px;
    }

    /* Quest cards */
    .quest-card{
      padding:16px;
    }
    .quest-name{
      font-size:11px;
      line-height:1.4;
    }
    .quest-desc{
      font-size:13px;
      line-height:1.5;
    }

    /* Game layout - stack vertically on mobile */
    .game-layout{
      grid-template-columns:1fr;
      gap:16px;
    }

    /* Chart game */
    .chart-container{
      height:250px;
    }
    .price-display{
      font-size:16px;
      top:12px;
      right:12px;
    }
    .instructions-title{
      font-size:12px;
    }
    .instructions-text{
      font-size:13px;
      line-height:1.5;
    }

    /* Footer */
    .footer{
      right:10px;
      bottom:10px;
      font-size:11px;
      gap:10px;
    }
    .footer svg{
      width:16px;
      height:16px;
    }

    /* Page container */
    .page-container{
      padding:20px 12px;
    }
    .page-container.bottom-aligned{
      padding-bottom:30px;
    }

    /* Shop grid */
    .shop-grid{
      grid-template-columns:1fr;
      gap:16px;
    }

    /* Results grid */
    .results-grid{
      grid-template-columns:repeat(auto-fit, minmax(70px, 1fr));
      gap:10px;
    }
    .result-item{
      padding:10px;
      font-size:12px;
    }

    /* Coming soon overlay */
    .coming-soon-overlay{
      font-size:18px;
      padding:16px;
    }

    /* Dashboard header - stack on mobile */
    .dashboard-header{
      flex-direction:column;
      align-items:flex-start;
      gap:16px;
    }
    .dashboard-header > div:last-child{
      width:100%;
      justify-content:space-between;
      gap:8px !important;
      flex-wrap:wrap;
    }

    /* Game disclaimer - better mobile formatting */
    .game-disclaimer{
      font-size:11px;
      padding:14px;
      line-height:1.5;
    }

    /* Breadcrumb improvements */
    .breadcrumb{
      font-size:11px;
      flex-wrap:wrap;
    }

    /* Attempts counter */
    .attempts-counter{
      font-size:12px;
    }

    /* Game status */
    .game-status, .crash-game-status{
      font-size:13px;
      padding:12px;
    }
  }

  /* Quest System Styles */
  .quest-container{
    display:none;
    width:min(720px,92vw);
    background:rgba(12,16,20,.10);
    border:2px solid rgba(255,214,77,.3);
    border-radius:12px;
    padding:24px;
    backdrop-filter:blur(8px);
  }

  .quest-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,214,77,.2);
  }

  .quest-title{
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    color:var(--gold);
  }

  .quest-tabs{
    display:flex;
    gap:12px;
    margin-bottom:20px;
  }

  .quest-tab{
    padding:10px 20px;
    background:rgba(255,214,77,.1);
    border:1px solid rgba(255,214,77,.3);
    color:var(--gold);
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    cursor:pointer;
    border-radius:6px;
    transition:all 0.2s;
  }

  .quest-tab.active{
    background:var(--gold);
    color:#000;
  }

  .quest-tab.locked{
    opacity:0.5;
    cursor:not-allowed;
    filter:blur(1px);
  }

  .quest-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:16px;
    margin-bottom:20px;
    position:relative;
  }

  .quest-grid.locked{
    filter:blur(2px);
    opacity:0.4;
    pointer-events:none;
    user-select:none;
  }

  .quest-grid-wrapper{
    position:relative;
  }

  @keyframes pulse{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.7; transform:scale(1.05); }
  }

  .quest-card{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:16px;
    transition:all 0.2s;
  }

  .quest-card:hover{
    border-color:var(--gold);
    background:rgba(255,214,77,.1);
  }

  .quest-card.completed{
    background:rgba(76,175,80,.1);
    border-color:rgba(76,175,80,.3);
    opacity:1 !important;
    visibility:visible !important;
  }

  .quest-name{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:var(--gold);
    margin-bottom:8px;
  }

  .quest-desc{
    font-family:Inter, system-ui, Arial;
    font-size:12px;
    color:#a0a8b0;
    margin-bottom:12px;
    line-height:1.5;
  }

  .quest-progress{
    margin-bottom:10px;
  }

  .progress-bar{
    width:100%;
    height:8px;
    background:rgba(0,0,0,.4);
    border-radius:4px;
    overflow:hidden;
  }

  .progress-fill{
    height:100%;
    background:linear-gradient(90deg, var(--gold), var(--gold-hi));
    transition:width 0.3s;
  }

  .progress-text{
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:#a0a8b0;
    margin-top:4px;
  }

  .quest-reward{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:#4CAF50;
  }

  .quest-icon{
    font-size:16px;
  }

  /* Inventory System Styles */
  .inventory-container{
    display:none;
    width:min(600px,92vw);
    max-height:85vh;
    overflow-y:auto;
    background:linear-gradient(135deg, rgba(20,25,30,.95) 0%, rgba(12,16,20,.98) 100%);
    border:2px solid rgba(255,214,77,.4);
    border-radius:16px;
    padding:24px;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,214,77,.1);
  }

  .inventory-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:2px solid rgba(255,214,77,.3);
  }

  .inventory-title{
    font-family:'Press Start 2P', monospace;
    font-size:18px;
    color:var(--gold);
    text-shadow:0 0 10px rgba(255,214,77,.3);
  }

  .gc-display{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    color:#4CAF50;
  }

  .inventory-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-bottom:20px;
    padding:16px;
    background:rgba(0,0,0,.3);
    border-radius:12px;
    border:1px solid rgba(255,214,77,.15);
  }

  .inventory-slot{
    aspect-ratio:1;
    background:linear-gradient(145deg, rgba(30,35,40,.8) 0%, rgba(20,25,30,.9) 100%);
    border:2px solid rgba(255,214,77,.25);
    border-radius:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
    padding:8px;
    position:relative;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.3);
  }

  .inventory-slot:hover{
    border-color:var(--gold);
    background:linear-gradient(145deg, rgba(255,214,77,.15) 0%, rgba(255,214,77,.05) 100%);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(255,214,77,.2);
  }

  .inventory-slot.empty{
    opacity:0.4;
    cursor:default;
  }

  .inventory-slot.empty:hover{
    transform:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.3);
    background:linear-gradient(145deg, rgba(30,35,40,.8) 0%, rgba(20,25,30,.9) 100%);
    border-color:rgba(255,214,77,.25);
  }

  .inventory-slot.invite-code{
    border-color:rgba(34,197,94,.5);
    background:linear-gradient(145deg, rgba(34,197,94,.15) 0%, rgba(20,25,30,.9) 100%);
  }

  .inventory-slot.invite-code:hover{
    border-color:#22c55e;
    box-shadow:0 4px 12px rgba(34,197,94,.3);
  }

  .item-icon{
    font-size:28px;
    margin-bottom:6px;
  }

  .item-name{
    font-family:'Press Start 2P', monospace;
    font-size:7px;
    color:#e6ecf1;
    text-align:center;
    line-height:1.3;
  }

  .item-count{
    position:absolute;
    bottom:4px;
    right:4px;
    background:rgba(0,0,0,.8);
    padding:2px 4px;
    border-radius:3px;
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    color:var(--gold);
  }

  .inventory-section-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:var(--gold);
    margin-bottom:12px;
    padding-left:4px;
    opacity:0.8;
  }

  .shop-section{
    position:relative;
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid rgba(255,214,77,.2);
    min-height:200px;
  }

  .shop-title{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    color:var(--gold);
    margin-bottom:16px;
  }

  .shop-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:16px;
  }

  .shop-item{
    background:rgba(255,214,77,.05);
    border:1px solid rgba(255,214,77,.2);
    border-radius:8px;
    padding:16px;
    text-align:center;
    transition:all 0.2s;
  }

  .shop-item:hover{
    border-color:var(--gold);
    background:rgba(255,214,77,.1);
  }

  .shop-item .item-icon{
    font-size:48px;
    margin-bottom:8px;
  }

  .shop-item-name{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:var(--gold);
    margin-bottom:8px;
  }

  .shop-item-desc{
    font-family:Inter, system-ui, Arial;
    font-size:11px;
    color:#a0a8b0;
    margin-bottom:12px;
  }

  .shop-item-price{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:#4CAF50;
    margin-bottom:12px;
  }

  .buy-btn{
    width:100%;
    padding:8px;
    background:var(--gold);
    border:2px solid var(--gold);
    color:#000;
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    cursor:pointer;
    border-radius:6px;
    transition:all 0.2s;
  }

  .buy-btn:hover:not(:disabled){
    background:var(--gold-hi);
    transform:translateY(-2px);
  }

  .buy-btn:disabled{
    background:rgba(100,100,100,.3);
    border-color:rgba(100,100,100,.2);
    color:rgba(255,255,255,.3);
    cursor:not-allowed;
  }

  /* ===== CUSTOM MODAL SYSTEM - Glassmorphism Design ===== */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(12px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    animation:fadeIn 0.3s ease-out;
  }

  .modal-overlay.show{
    display:flex;
  }

  .modal-container{
    background:rgba(12,16,20,0.95);
    border:2px solid rgba(255,214,77,0.4);
    border-radius:16px;
    max-width:420px;
    width:90%;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    box-shadow:
      0 24px 80px rgba(0,0,0,0.8),
      0 0 60px rgba(255,214,77,0.15),
      inset 0 1px 0 rgba(255,255,255,0.05);
    animation:modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow:hidden;
    backdrop-filter:blur(20px);
  }

  @keyframes modalSlideIn{
    0%{
      opacity:0;
      transform:scale(0.95) translateY(-20px);
    }
    100%{
      opacity:1;
      transform:scale(1) translateY(0);
    }
  }

  .modal-logo{
    display:block;
    width:56px;
    height:56px;
    margin:0 auto 16px;
    filter:drop-shadow(0 4px 12px rgba(255,214,77,0.3));
  }

  .modal-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 24px 20px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    background:transparent;
    position:relative;
  }

  .modal-header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    position:absolute;
    top:16px;
    left:0;
    right:0;
    padding:0 16px;
  }

  .modal-title{
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:var(--gold);
    text-shadow:0 2px 8px rgba(255,214,77,0.3);
    text-align:center;
    margin-top:8px;
  }

  .modal-close{
    background:rgba(255,255,255,0.1);
    border:none;
    color:#888;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s;
    border-radius:8px;
    position:absolute;
    right:16px;
    top:16px;
  }

  .modal-close:hover{
    background:rgba(255,255,255,0.2);
    color:#fff;
  }

  .modal-body{
    padding:24px;
    font-family:Inter, system-ui, Arial;
    font-size:14px;
    line-height:1.6;
    color:#e6ecf1;
    white-space:pre-wrap;
    text-align:center;
    overflow-y:auto;
    flex:1;
  }

  .modal-actions{
    display:flex;
    gap:12px;
    padding:20px 24px;
    background:rgba(0,0,0,0.2);
    border-top:1px solid rgba(255,255,255,0.1);
  }

  .modal-btn{
    flex:1;
    padding:12px 24px;
    font-family:'Press Start 2P', monospace;
    font-size:9px;
    border:2px solid;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.2s;
    text-transform:uppercase;
  }

  .modal-btn-primary{
    background:var(--gold);
    border-color:var(--gold-hi);
    color:#000;
    box-shadow:0 4px 12px rgba(255,214,77,0.3);
  }

  .modal-btn-primary:hover{
    background:var(--gold-hi);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,214,77,0.5);
  }

  .modal-btn-primary:active{
    transform:translateY(0);
  }

  .modal-btn-secondary{
    background:transparent;
    border-color:rgba(255,255,255,0.2);
    color:#e6ecf1;
  }

  .modal-btn-secondary:hover{
    background:rgba(255,255,255,0.1);
    border-color:rgba(255,255,255,0.3);
  }

  /* ===== TOAST NOTIFICATION SYSTEM ===== */
  .toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:10000;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none;
  }

  .toast{
    background:rgba(12,16,20,0.95);
    border:2px solid;
    border-radius:12px;
    padding:16px 20px;
    min-width:300px;
    max-width:420px;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.05);
    display:flex;
    align-items:center;
    gap:12px;
    pointer-events:auto;
    animation:toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter:blur(12px);
  }

  .toast.removing{
    animation:toastSlideOut 0.3s ease-out forwards;
  }

  @keyframes toastSlideIn{
    0%{
      opacity:0;
      transform:translateX(400px);
    }
    100%{
      opacity:1;
      transform:translateX(0);
    }
  }

  @keyframes toastSlideOut{
    0%{
      opacity:1;
      transform:translateX(0) scale(1);
    }
    100%{
      opacity:0;
      transform:translateX(400px) scale(0.8);
    }
  }

  .toast-icon{
    font-size:24px;
    line-height:1;
    flex-shrink:0;
  }

  .toast-content{
    flex:1;
  }

  .toast-title{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    margin-bottom:4px;
    line-height:1.4;
  }

  .toast-message{
    font-family:Inter, system-ui, Arial;
    font-size:13px;
    color:#a0a8b0;
    line-height:1.4;
  }

  .toast-success{
    border-color:rgba(76,175,80,0.6);
    box-shadow:
      0 8px 32px rgba(0,0,0,0.6),
      0 0 20px rgba(76,175,80,0.15),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .toast-success .toast-title{
    color:#4CAF50;
  }

  .toast-error{
    border-color:rgba(244,67,54,0.6);
    box-shadow:
      0 8px 32px rgba(0,0,0,0.6),
      0 0 20px rgba(244,67,54,0.15),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .toast-error .toast-title{
    color:#ff6b6b;
  }

  .toast-warning{
    border-color:rgba(255,152,0,0.6);
    box-shadow:
      0 8px 32px rgba(0,0,0,0.6),
      0 0 20px rgba(255,152,0,0.15),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .toast-warning .toast-title{
    color:#FF9800;
  }

  .toast-info{
    border-color:rgba(255,214,77,0.6);
    box-shadow:
      0 8px 32px rgba(0,0,0,0.6),
      0 0 20px rgba(255,214,77,0.15),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .toast-info .toast-title{
    color:var(--gold);
  }

  /* ===== LOADING OVERLAY ===== */
  .loading-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(8px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:9998;
    animation:fadeIn 0.2s ease-out;
  }

  .loading-spinner{
    position:relative;
    width:80px;
    height:80px;
  }

  .spinner-ring{
    position:absolute;
    width:100%;
    height:100%;
    border:4px solid transparent;
    border-top-color:var(--gold);
    border-radius:50%;
    animation:spinnerRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }

  .spinner-ring:nth-child(1){
    animation-delay:-0.45s;
    border-top-color:rgba(255,214,77,1);
  }

  .spinner-ring:nth-child(2){
    animation-delay:-0.3s;
    border-top-color:rgba(255,214,77,0.6);
  }

  .spinner-ring:nth-child(3){
    animation-delay:-0.15s;
    border-top-color:rgba(255,214,77,0.3);
  }

  @keyframes spinnerRotate{
    0%{
      transform:rotate(0deg);
    }
    100%{
      transform:rotate(360deg);
    }
  }

  .loading-text{
    margin-top:24px;
    font-family:'Press Start 2P', monospace;
    font-size:12px;
    color:var(--gold);
    text-shadow:0 0 10px rgba(255,214,77,0.5);
    animation:pulse 2s ease-in-out infinite;
  }

  /* ===== PULSE EFFECTS ===== */
  @keyframes pulse{
    0%, 100%{
      opacity:1;
      transform:scale(1);
    }
    50%{
      opacity:0.7;
      transform:scale(1.05);
    }
  }

  .pulse{
    animation:pulse 2s ease-in-out infinite;
  }

  @keyframes pulseGlow{
    0%, 100%{
      box-shadow:0 0 5px rgba(255,214,77,0.3), 0 0 10px rgba(255,214,77,0.2);
    }
    50%{
      box-shadow:0 0 20px rgba(255,214,77,0.6), 0 0 40px rgba(255,214,77,0.3);
    }
  }

  .pulse-glow{
    animation:pulseGlow 2s ease-in-out infinite;
  }

  .quest-card.claimable{
    animation:pulseGlow 2s ease-in-out infinite;
    cursor:pointer;
  }

  /* ===== ENHANCED HOVER EFFECTS ===== */
  .btn-submit, .action-btn, .back-btn, .filter-btn{
    transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative;
    overflow:hidden;
  }

  .btn-submit::before, .action-btn::before, .back-btn::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,0.2);
    transform:translate(-50%, -50%);
    transition:width 0.6s, height 0.6s;
  }

  .btn-submit:active::before, .action-btn:active::before, .back-btn:active::before{
    width:300px;
    height:300px;
  }

  .dashboard-stat{
    transition:all 0.3s ease;
  }

  .dashboard-stat:hover{
    transform:translateY(-4px) scale(1.02);
    border-color:var(--gold);
    box-shadow:0 8px 24px rgba(255,214,77,0.2);
  }

  .quest-card{
    transition:all 0.3s ease;
    transform-origin:center;
  }

  .quest-card:hover:not(.claimable){
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(255,214,77,0.2);
  }

  .leaderboard-entry{
    transition:all 0.2s ease;
  }

  .leaderboard-entry:hover{
    background:rgba(255,214,77,0.05);
    transform:translateX(4px);
  }

  .shop-item{
    transition:all 0.3s ease;
  }

  .shop-item:hover{
    transform:translateY(-4px) scale(1.02);
    border-color:var(--gold);
    box-shadow:0 8px 24px rgba(255,214,77,0.2);
  }

  .inventory-item{
    transition:all 0.3s ease;
  }

  .inventory-item:hover{
    transform:scale(1.05) rotate(2deg);
    box-shadow:0 8px 24px rgba(255,214,77,0.3);
  }

  .podium-item{
    transition:all 0.3s ease;
  }

  .podium-item:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 12px 32px rgba(255,214,77,0.3);
  }

  /* Button press effect */
  .btn-submit:active, .action-btn:active, .back-btn:active{
    transform:scale(0.95);
  }

  /* Fade in animation */
  @keyframes fadeIn{
    0%{
      opacity:0;
    }
    100%{
      opacity:1;
    }
  }

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

  /* Card entrance animations */
  .dashboard-card{
    animation:slideInUp 0.4s ease-out forwards;
    opacity:0;
  }

  .dashboard-cards-row .dashboard-card:nth-child(1){animation-delay:0.1s;}
  .dashboard-cards-row .dashboard-card:nth-child(2){animation-delay:0.2s;}

  .stats-grid .stat-card{
    animation:slideInUp 0.3s ease-out forwards;
    opacity:0;
  }

  .stats-grid .stat-card:nth-child(1){animation-delay:0.05s;}
  .stats-grid .stat-card:nth-child(2){animation-delay:0.1s;}
  .stats-grid .stat-card:nth-child(3){animation-delay:0.15s;}
  .stats-grid .stat-card:nth-child(4){animation-delay:0.2s;}

  .quest-card{
    animation:slideInUp 0.4s ease-out forwards;
    opacity:0;
  }

  .quest-card:nth-child(1){animation-delay:0.1s;}
  .quest-card:nth-child(2){animation-delay:0.15s;}
  .quest-card:nth-child(3){animation-delay:0.2s;}
  .quest-card:nth-child(4){animation-delay:0.25s;}
  .quest-card:nth-child(5){animation-delay:0.3s;}
  .quest-card:nth-child(6){animation-delay:0.35s;}

  .market-bar{
    animation:slideInUp 0.4s ease-out forwards;
    opacity:0;
    animation-delay:0.25s;
  }

  /* Mobile responsive for new elements */
  @media(max-width:600px){
    /* Card layout - single column on mobile */
    .dashboard-cards-row{
      grid-template-columns:1fr;
      gap:16px;
    }

    .dashboard-card{
      padding:18px;
      margin-bottom:16px;
    }

    .card-title{
      font-size:12px;
      line-height:1.4;
    }

    .card-subtitle{
      font-size:11px;
    }

    .card-description{
      font-size:12px;
      line-height:1.5;
    }

    /* Market bar mobile optimization */
    .market-bar{
      padding:16px 20px !important;
      flex-direction:column;
      gap:12px;
      text-align:center;
    }

    .market-bar > div:first-child{
      flex-direction:column;
      gap:8px;
      width:100%;
    }

    .market-bar .action-btn{
      width:100%;
    }

    /* Toast notifications */
    .toast-container{
      top:10px;
      right:10px;
      left:10px;
    }

    .toast{
      min-width:unset;
      width:100%;
      font-size:12px;
    }

    .toast-title{
      font-size:11px;
    }

    /* Modals */
    .modal-container{
      width:94%;
      max-width:unset;
      padding:20px;
    }

    .modal-title{
      font-size:14px;
      line-height:1.4;
    }

    .modal-message{
      font-size:13px;
      line-height:1.5;
    }

    .modal-btn{
      font-size:12px;
      padding:14px 20px;
      min-height:48px;
    }

    /* Loading spinner */
    .loading-spinner{
      width:60px;
      height:60px;
    }

    .loading-text{
      font-size:12px;
    }

    /* Crash game mobile optimizations */
    .crash-rocket-container{
      height:250px;
    }

    .crash-multiplier-value{
      font-size:32px;
    }

    .crash-status-text{
      font-size:13px;
    }

    .crash-cashout-btn{
      font-size:14px;
      padding:18px;
      min-height:52px;
    }

    .crash-input{
      font-size:14px;
      padding:14px;
    }

    /* Mines game mobile */
    .mines-grid{
      gap:8px;
    }

    .mine-cell{
      font-size:18px;
      min-height:50px;
    }

    /* Blackjack mobile */
    .bj-card{
      width:50px;
      height:70px;
      font-size:18px;
    }

    .bj-hand-value{
      font-size:14px;
    }

    /* Oven game mobile */
    .oven-display{
      font-size:40px;
      padding:30px;
    }

    .oven-progress-bar{
      height:16px;
    }

    .oven-stat-value{
      font-size:16px;
    }

    .oven-stat-label{
      font-size:10px;
    }

    /* Farm game mobile */
    .farm-btn{
      width:140px;
      height:140px;
      font-size:16px;
    }

    .farm-result{
      font-size:14px;
    }

    /* Inventory items */
    .inventory-item{
      padding:14px;
    }

    .item-name{
      font-size:11px;
    }

    .item-description{
      font-size:12px;
    }

    /* Shop items */
    .shop-item{
      padding:16px;
    }

    .shop-item-title{
      font-size:12px;
    }

    .shop-item-desc{
      font-size:12px;
    }

    .shop-item-price{
      font-size:14px;
    }

    /* Stat cards in dashboard header */
    .stat-card{
      padding:10px 14px !important;
    }

    .stat-card .stat-value{
      font-size:16px !important;
    }

    .stat-card .stat-label{
      font-size:10px !important;
    }

    /* Logout button */
    .logout-btn{
      font-size:10px;
      padding:10px 12px;
      min-height:44px;
    }

    /* Input bar - stack vertically on mobile for better UX */
    .bar{
      flex-direction:column;
      gap:12px;
    }

    .btn-submit{
      width:100%;
      padding:14px 20px;
      font-size:13px;
    }

    .input-field{
      width:100%;
    }

    /* Input group spacing */
    .input-group{
      margin-bottom:20px;
    }

    .helper{
      margin-top:16px;
      font-size:12px;
    }

    /* Stat cards in header - reduce size to prevent overflow */
    .dashboard-header .stat-card{
      padding:6px 10px !important;
    }

    .dashboard-header .stat-label{
      font-size:9px !important;
    }

    .dashboard-header .stat-value{
      font-size:14px !important;
    }

    /* User info */
    .user-name{
      font-size:16px;
    }

    .user-stats{
      font-size:11px;
    }

    /* Brand title adjustments */
    .brand .title{
      font-size:20px;
    }

    .brand .slogan{
      font-size:9px;
    }
  }

  /* Extra small mobile devices (iPhone SE, etc.) */
  @media(max-width:375px){
    .brand .title{
      font-size:18px;
    }

    .panel-title, .dashboard-title, .quest-title, .leaderboard-title, .game-title, .inventory-title{
      font-size:14px;
    }

    .dashboard-header{
      gap:12px;
    }

    .stat-card{
      padding:6px 10px !important;
    }

    .dashboard-header .stat-card{
      padding:5px 8px !important;
    }

    .dashboard-header .stat-label{
      font-size:8px !important;
    }

    .dashboard-header .stat-value{
      font-size:13px !important;
    }

    .logout-btn{
      font-size:9px;
      padding:8px 10px;
    }

    .btn-submit{
      padding:14px 18px;
      font-size:12px;
    }

    .market-bar{
      padding:14px 16px !important;
    }

    .game-disclaimer{
      font-size:10px;
      padding:12px;
    }

    /* Tighter panel padding */
    .panel{
      padding:16px 12px;
    }

    .dashboard-container{
      padding:12px 10px;
    }
  }

  /* Landscape orientation on mobile */
  @media(max-width:900px) and (orientation:landscape){
    .brand .title{
      font-size:16px;
    }

    .brand .slogan{
      font-size:8px;
    }

    .panel, .dashboard-container, .quest-container, .leaderboard-container, .game-container, .inventory-container, .campaign-container{
      max-height:85vh;
    }

    .chart-container{
      height:200px;
    }

    .crash-rocket-container{
      height:200px;
    }

    .oven-display{
      font-size:32px;
      padding:20px;
    }

    .farm-btn{
      width:120px;
      height:120px;
    }
  }