:root{
    --sky1:#87CEEB;
    --sky2:#98D8C8;
    --road:#333;
    --lane:#fff;
  
    /* Night mode controls */
    --sceneDarken: 0;           /* 0 (day) → 0.35 (night) */
    --beamOpacity: 0;           /* 0 (off) → 0.9 (on) */
    --nightSky1: #1a1a2e;       /* Dark blue for night */
    --nightSky2: #0f3460;       /* Slightly lighter dark blue */
    --skyMix: 0;                /* 0 (day) → 1 (night) */
  
    /* Road dash duration (will be updated by JS) */
    --dashDur: 1.3s;
  
    /* Car color filter */
    --car-filter: none;
  }
  
  *{margin:0;padding:0;box-sizing:border-box;}
  
  body{
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    touch-action: none; /* Prevent default touch behaviors like scrolling */
    position: fixed; /* Lock body position */
    width: 100%;
  }
  
  /* Start Screen Overlay */
  .start-screen{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.85);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:1000;
    backdrop-filter: blur(5px);
  }
  .start-screen.hidden{
    display:none;
  }
  .start-content{
    text-align:center;
    color:#fff;
    max-width: 600px;
    padding: 20px;
  }
  .start-title{
    font-size:48px;
    font-weight:700;
    margin-bottom:20px;
    text-shadow: 0 0 20px rgba(231,76,60,.8);
  }
  .start-subtitle{
    font-size:20px;
    margin-bottom:30px;
    color:#95a5a6;
  }
  
  /* Car Color Picker Section */
  .color-picker-section{
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
  }
  .color-picker-title{
    font-size: 18px;
    margin-bottom: 15px;
    color: #fff;
    font-weight: 600;
  }
  .color-options{
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .color-option{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
  .color-option:hover{
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
  }
  .color-option.selected{
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.6);
    transform: scale(1.15);
  }
  .color-option::after{
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .color-option.selected::after{
    opacity: 1;
  }
  
  /* Individual color backgrounds */
  .color-red{ background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); }
  .color-blue{ background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); }
  .color-green{ background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }
  .color-yellow{ background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%); }
  .color-purple{ background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); }
  .color-orange{ background: linear-gradient(135deg, #e67e22 0%, #d35400 100%); }
  .color-pink{ background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%); }
  .color-white{ background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%); }
  .color-black{ background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); }
  .color-silver{ background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%); }
  
  .start-btn{
    padding:20px 50px;
    font-size:24px;
    font-weight:700;
    border:none;
    border-radius:15px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color:#fff;
    cursor:pointer;
    box-shadow: 0 8px 20px rgba(231,76,60,.4);
    transition: transform .2s, box-shadow .2s;
  }
  .start-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(231,76,60,.6);
  }
  .start-btn:active{
    transform: translateY(-1px);
  }
  
  /* ========== FIRE ANIMATION ON DEATH ========== */
  .fire-overlay{
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .fire-overlay.active{
    opacity: 1;
    pointer-events: all;
  }
  
  /* Fire particles container */
  .fire-particles{
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  
  /* Individual flame particle */
  .flame{
    position: absolute;
    bottom: -50px;
    width: 40px;
    height: 80px;
    background: linear-gradient(to top, 
      #ff4500 0%, 
      #ff6b00 30%, 
      #ff8c00 50%, 
      #ffa500 70%, 
      rgba(255, 200, 0, 0.8) 85%,
      transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(2px);
    animation: flameRise 2s ease-out forwards, flameFlicker 0.1s infinite;
    box-shadow: 0 0 20px #ff4500, 0 0 40px #ff6b00;
  }
  
  /* Different flame sizes */
  .flame.small{
    width: 25px;
    height: 50px;
    animation-duration: 1.5s;
  }
  .flame.large{
    width: 60px;
    height: 120px;
    animation-duration: 2.5s;
  }
  
  @keyframes flameRise{
    0%{
      bottom: -50px;
      transform: translateX(0) scale(1);
      opacity: 1;
    }
    50%{
      transform: translateX(var(--sway, 0px)) scale(1.2);
      opacity: 0.9;
    }
    100%{
      bottom: 110vh;
      transform: translateX(var(--sway, 0px)) scale(0.5);
      opacity: 0;
    }
  }
  
  @keyframes flameFlicker{
    0%, 100%{
      filter: blur(2px) brightness(1);
    }
    50%{
      filter: blur(3px) brightness(1.2);
    }
  }
  
  /* Burning edges effect */
  .burn-edge{
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
      radial-gradient(ellipse at bottom, 
        rgba(255, 69, 0, 0.4) 0%,
        rgba(255, 107, 0, 0.2) 20%,
        transparent 40%);
    animation: burnSpread 2s ease-out forwards;
  }
  
  @keyframes burnSpread{
    0%{
      clip-path: inset(100% 0 0 0);
    }
    100%{
      clip-path: inset(0 0 0 0);
    }
  }
  
  /* Heat distortion effect */
  .heat-distortion{
    position: absolute;
    inset: 0;
    background: 
      repeating-linear-gradient(
        0deg,
        transparent 0px,
        rgba(255, 100, 0, 0.05) 2px,
        transparent 4px
      );
    animation: heatWave 0.3s linear infinite;
    opacity: 0;
    animation: heatWave 0.3s linear infinite, heatFadeIn 1s ease-out forwards;
  }
  
  @keyframes heatWave{
    0%{
      transform: translateY(0) scaleY(1);
    }
    100%{
      transform: translateY(-10px) scaleY(1.02);
    }
  }
  
  @keyframes heatFadeIn{
    0%{
      opacity: 0;
    }
    100%{
      opacity: 0.6;
    }
  }
  
  /* Screen flash */
  .fire-flash{
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
      rgba(255, 69, 0, 0.8) 0%,
      rgba(255, 107, 0, 0.4) 30%,
      transparent 60%);
    animation: fireFlash 0.5s ease-out forwards;
  }
  
  @keyframes fireFlash{
    0%{
      opacity: 0;
      transform: scale(0.5);
    }
    30%{
      opacity: 1;
      transform: scale(1.2);
    }
    100%{
      opacity: 0;
      transform: scale(2);
    }
  }
  
  /* Smoke effect */
  .smoke{
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, 
      rgba(50, 50, 50, 0.6) 0%,
      rgba(80, 80, 80, 0.3) 40%,
      transparent 70%);
    border-radius: 50%;
    filter: blur(15px);
    animation: smokeRise 3s ease-out forwards;
  }
  
  @keyframes smokeRise{
    0%{
      bottom: 0;
      transform: translateX(0) scale(1);
      opacity: 0.8;
    }
    100%{
      bottom: 100vh;
      transform: translateX(var(--drift, 0px)) scale(3);
      opacity: 0;
    }
  }
  
  /* Lives Display */
  .lives-display{
    position:absolute;
    top:60px;
    right:20px;
    background: rgba(0,0,0,.7);
    padding:10px 20px;
    border-radius:10px;
    color:#fff;
    font-size:18px;
    z-index:100;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .heart-life{
    font-size:24px;
    transition: opacity .3s;
  }
  .heart-life.lost{
    opacity:0.2;
  }
  
  /* Score Display */
  .score-display{
    position:absolute;
    top:60px;
    left:20px;
    background: rgba(0,0,0,.7);
    padding:10px 20px;
    border-radius:10px;
    color:#fff;
    font-size:18px;
    z-index:100;
    text-align:center;
  }
  .score-value{
    font-size:32px;
    font-weight:700;
    color:#3aa0ff;
    text-shadow: 0 0 10px rgba(58,160,255,.5);
  }
  .score-label{
    font-size:14px;
    color:#95a5a6;
  }
  
  /* Game Area */
  .game-area{
    flex:1;
    position:relative;
    overflow:hidden;
    transition: background 3s ease;
    touch-action: none; /* Prevent scrolling on touch */
  }
  .game-area::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to bottom, var(--sky1) 0%, var(--sky2) 100%);
    z-index:0;
    transition: opacity 3s ease;
  }
  .game-area::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to bottom, var(--nightSky1) 0%, var(--nightSky2) 100%);
    opacity: var(--skyMix);
    z-index:1;
    transition: opacity 3s ease;
  }
  
  /* Moon */
  .moon{
    position:absolute;
    top:80px;
    right:100px;
    width:80px;
    height:80px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #fff, #e8e8e8);
    box-shadow: 0 0 40px rgba(255,255,255,0.6), 0 0 80px rgba(255,255,255,0.3);
    opacity: var(--skyMix);
    transition: opacity 3s ease;
    z-index:5;
  }
  /* Moon craters */
  .moon::before{
    content:"";
    position:absolute;
    top:20px;
    left:15px;
    width:15px;
    height:15px;
    border-radius:50%;
    background: rgba(200,200,200,0.4);
    box-shadow: 25px 10px 0 8px rgba(200,200,200,0.3),
                10px 30px 0 5px rgba(200,200,200,0.35);
  }
  
  /* ---------- SCENERY: seamless, two identical panels ---------- */
  .layer{
    position:absolute; inset:0;
    display:flex; width:200%; height:100%;
    pointer-events:none;
    z-index:2;
  }
  .layer .panel{ position:relative; width:50%; height:100%; }
  
  /* ===== Clouds (more detailed) ===== */
  .clouds{ animation:cloudScroll 45s linear infinite; opacity:.92; }
  @keyframes cloudScroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  
  .cloud{
    position:absolute;
    /* base size (you can tweak per element with style="--cw:140px; --ch:64px") */
    --cw: 120px; --ch: 54px;
    width: var(--cw); height: var(--ch);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
    animation: cloudFloat 6.5s ease-in-out infinite, cloudMorph 9s ease-in-out infinite;
    transform-origin: 50% 60%;
  }
  /* Build the cloud with layered "puffs" and a soft rim */
  .cloud::before{
    content:""; position:absolute; inset:0; border-radius:40px;
    background:
      /* rim glow */
      radial-gradient(120% 120% at 50% 60%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%),
      /* big center puff */
      radial-gradient(60% 70% at 45% 55%, #ffffff 0 55%, rgba(255,255,255,.0) 56%),
      /* left puff */
      radial-gradient(42% 48% at 28% 62%, #ffffff 0 60%, rgba(255,255,255,0) 61%),
      /* right puff */
      radial-gradient(45% 50% at 70% 50%, #ffffff 0 60%, rgba(255,255,255,0) 61%),
      /* top puff */
      radial-gradient(40% 40% at 52% 32%, #ffffff 0 60%, rgba(255,255,255,0) 61%);
    mask: radial-gradient(120% 120% at 50% 60%, #000 0 60%, transparent 61%);
  }
  /* subtle underside shading */
  .cloud::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.08), rgba(0,0,0,0) 60%);
    pointer-events:none;
  }
  @keyframes cloudFloat{
    0%,100%{ transform: translateY(0) }
    50%    { transform: translateY(-4px) }
  }
  @keyframes cloudMorph{
    0%,100%{ border-radius: 40px }
    50%    { border-radius: 46px }
  }
  
  /* ===== Trees (more detailed) ===== */
  .trees{ animation:treeScroll 18s linear infinite; }
  @keyframes treeScroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  
  .tree{
    position:absolute; bottom:200px;
    /* you can scale per tree: style="--ts:1.0" */
    --ts: 1;
    width: calc(70px * var(--ts));
    height: calc(110px * var(--ts));
    animation: treeSway 3.8s ease-in-out infinite;
    transform-origin: 50% 100%;
  }
  /* canopy and ambient shadow (using multiple gradients) */
  .tree::before{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom: 24px; /* leave space for trunk */
    width: 100%; height: 86%;
    border-radius: 50% 50% 40% 40%;
    background:
      /* highlight */
      radial-gradient(120% 100% at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
      /* top cluster */
      radial-gradient(70% 70% at 55% 35%, #2fcf6e 0 60%, rgba(0,0,0,0) 61%),
      /* left cluster */
      radial-gradient(70% 70% at 28% 56%, #2dbf66 0 60%, rgba(0,0,0,0) 61%),
      /* right cluster */
      radial-gradient(70% 70% at 72% 56%, #30b861 0 60%, rgba(0,0,0,0) 61%),
      /* deep green body */
      radial-gradient(85% 80% at 50% 58%, #29a85a 0 70%, rgba(0,0,0,0) 71%);
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.12));
  }
  /* trunk with bark texture */
  .tree::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom:0; width: calc(16px * var(--ts)); height: calc(28px * var(--ts));
    border-radius: 4px;
    background:
      /* bark darker edges */
      linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,.18)),
      /* bark stripes */
      repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, rgba(0,0,0,0) 2px 6px),
      /* base bark color */
      #8b6239;
    box-shadow: 0 2px 0 rgba(0,0,0,.15);
  }
  /* ground shadow ellipse */
  .tree > i{
    position:absolute; content:""; display:block;
    left:50%; bottom:-8px; transform:translateX(-50%);
    width: calc(64px * var(--ts)); height: 10px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(0,0,0,.18), rgba(0,0,0,0));
    pointer-events:none;
  }
  @keyframes treeSway{
    0%,100%{ transform: rotate(-1deg) }
    50%    { transform: rotate(1.6deg) }
  }
  
  /* ---------- ROAD ---------- */
  .road{
    position:absolute; left:0; right:0; bottom:0; height:200px;
    background: var(--road);
    overflow:hidden;
    animation-play-state: running;
    z-index:2;
  }
  .road::before{
    content:""; position:absolute; left:0; right:0; top:50%; height:8px; transform:translateY(-50%);
    background: repeating-linear-gradient(90deg, var(--lane) 0 60px, transparent 60px 120px);
    animation:dashScroll var(--dashDur) linear infinite;
    opacity:.95;
  }
  @keyframes dashScroll{ 0%{background-position-x:0} 100%{background-position-x:-120px} }
  
  /* ---------- Speed lines ---------- */
  .speed-lines{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s; z-index:2;}
  .speed-line{
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(to right,transparent,rgba(255,255,255,.85),transparent);
    animation:speedLine .25s linear infinite;
  }
  .speed-line:nth-child(1){top:22%}
  .speed-line:nth-child(2){top:42%}
  .speed-line:nth-child(3){top:62%}
  .speed-line:nth-child(4){top:82%}
  @keyframes speedLine{ 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
  
  /* ---------- Car (Image-based) ---------- */
  .car{
    position:absolute; bottom:50px; left:50%; transform:translateX(-50%);
    /* CAR COLLISION BOX SIZE - This is what hits obstacles */
    width:120px;      /* ← CHANGE THIS: Collision box width */
    height:15px;      /* ← CHANGE THIS: Collision box height */
    z-index:10;
    transition:bottom .3s ease, left .3s ease;
  }
  .car-image{
    /* CAR IMAGE SIZE - This is what you see visually */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;     /* ← CHANGE THIS: Visual car width (can be bigger than container) */
    height: 90px;     /* ← CHANGE THIS: Visual car height (can be bigger than container) */
    object-fit: cover;
    z-index: 1;
    /* Apply color filter */
    filter: var(--car-filter);
    transition: filter 0.3s ease;
  }
  .car-body{
    position:relative; width:100%; height:100%;
  }
  
  /* RIGHT-SIDE headlights beam (front is RIGHT) */
  .beams{
    position:absolute; right: -66px; top:-11px;
    width:56px; height:40px; pointer-events:none;
    background: radial-gradient(ellipse at right,
              rgba(210,235,255,var(--beamOpacity)) 0%,
              rgba(210,235,255,0) 75%);
    transform: translateX(20px) scaleX(2.0);
    transition: background 3s ease;
  }
  
  /* Exhaust emitter at REAR (left side) */
  .exhaust{
    position:absolute; left:-6px; bottom:20px; width:0; height:0; overflow:visible; pointer-events:none;
  }
  .puff{
    position:absolute; width:10px; height:6px; border-radius:50%;
    background: radial-gradient(circle at 40% 50%, rgba(200,200,200,.9), rgba(200,200,200,0));
    opacity:.85; filter: blur(.3px);
    animation: puffMove .6s ease-out forwards;
  }
  @keyframes puffMove{
    0%{ transform: translateX(0) translateY(0) scale(.8); opacity:.8; }
    100%{ transform: translateX(-42px) translateY(-6px) scale(1.6); opacity:0; }
  }
  
  /* Wheels - positioned to match your car image wheels */
  .wheel{
    position:absolute; bottom:-23.5px; width:28px; height:28px; border-radius:50%;
    background:#0f0f0f; z-index:20; /* Higher z-index to appear above car */
    animation:wheelSpin .5s linear infinite;
    box-shadow: inset 0 0 6px rgba(255,255,255,.06), inset 0 -1px 4px rgba(0,0,0,.65);
  }
  /* Position wheels to match the car image - ADJUSTED VALUES */
  .wheel.front{ left:-10px; } /* Front wheel position - adjusted to match car */
  .wheel.rear { right:-5px; } /* Rear wheel position - adjusted to match car */
  
  .wheel .rim{
    position:absolute; inset:3px; border-radius:50%;
    background:
      radial-gradient(circle at 50% 50%, #bbb 0 2px, transparent 2px),
      conic-gradient(from 0deg,
        #dedede 0 12%, #676767 12% 24%,
        #dedede 24% 36%, #676767 36% 48%,
        #dedede 48% 60%, #676767 60% 72%,
        #dedede 72% 84%, #676767 84% 100%);
    filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
  }
  @keyframes wheelSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
  
  /* Car flash on hit */
  @keyframes carHit{
    0%,100%{ opacity:1; }
    25%, 75%{ opacity:0.3; }
    50%{ opacity:1; }
  }
  
  /* Invincibility flash - slower, more visible */
  @keyframes invincibleFlash{
    0%, 100%{ opacity:1; filter: brightness(1); }
    50%{ opacity:0.7; filter: brightness(1.5) drop-shadow(0 0 10px rgba(58,160,255,0.8)); }
  }
  
  /* Speech Bubble */
  .speech-bubble{
    position: absolute;
    bottom: 100%; /* Position at the top of the car */
    left: 50%;
    transform: translateX(-50%) translateY(-10px) scale(0); /* 10px gap above car */
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    max-width: 220px;
    text-align: center;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                opacity 0.3s ease;
    opacity: 0;
  }
  .speech-bubble.show{
    transform: translateX(-50%) translateY(-10px) scale(1);
    opacity: 1;
  }
  /* Speech bubble tail */
  .speech-bubble::after{
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid rgba(255, 255, 255, 0.95);
  }
  /* Pop-in animation */
  @keyframes bubblePop{
    0%{ transform: translateX(-50%) translateY(-10px) scale(0) rotate(-5deg); }
    50%{ transform: translateX(-50%) translateY(-10px) scale(1.1) rotate(2deg); }
    100%{ transform: translateX(-50%) translateY(-10px) scale(1) rotate(0deg); }
  }
  
  /* ---------- Obstacles (Destroyed Car Images) ---------- */
  .obstacle{
    position:absolute; bottom:50px; left:100%;
    width:100px; height:40px; z-index:5;
    animation: obstacleMove linear forwards;
  }
  .obstacle-image{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;     /* ← CHANGE THIS: Visual car width (can be bigger than container) */
    height: 90px;     /* ← CHANGE THIS: Visual car height (can be bigger than container) */
    object-fit: cover;
    z-index: 1;
  }
  @keyframes obstacleMove{
    0%{ left: 100%; }
    100%{ left: -180px; }
  }
  
  /* ---------- Collectible Papers ---------- */
  .paper-collectible{
    position:absolute; bottom:50px; left:100%;
    width:30px; height:30px; z-index:5;
    animation: obstacleMove linear forwards;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .paper-box{
    width: 30px;
    height: 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border: 2px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.6);
    position: relative;
    animation: paperFloat 2s ease-in-out infinite, paperGlow 1.5s ease-in-out infinite;
  }
  /* Paper lines decoration */
  .paper-box::before{
    content: "";
    position: absolute;
    top: 8px;
    left: 6px;
    right: 6px;
    height: 2px;
    background: #999;
    box-shadow: 0 6px 0 #999, 0 12px 0 #999, 0 18px 0 #999;
  }
  @keyframes paperFloat{
    0%, 100%{ transform: translateY(0) rotate(-2deg); }
    50%{ transform: translateY(-8px) rotate(2deg); }
  }
  @keyframes paperGlow{
    0%, 100%{ box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.6); }
    50%{ box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 30px rgba(255,255,255,0.9); }
  }
  
  /* ---------- Story Modal ---------- */
  .story-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease;
  }
  .story-modal.active{
    display: flex;
  }
  @keyframes fadeIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
  }
  .story-content{
    background: #fff;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: slideUp 0.4s ease;
    display: flex;
    flex-direction: column;
  }
  @keyframes slideUp{
    from{ transform: translateY(50px); opacity: 0; }
    to{ transform: translateY(0); opacity: 1; }
  }
  .story-header{
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 20px;
    text-align: center;
    border-bottom: 3px solid #ddd;
  }
  .story-title{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  .story-subtitle{
    font-size: 14px;
    opacity: 0.9;
  }
  .story-body{
    padding: 30px;
    overflow-y: auto;
    flex: 1;
    line-height: 1.8;
    color: #333;
  }
  .story-text{
    font-size: 16px;
    margin-bottom: 20px;
  }
  .story-footer{
    padding: 20px;
    text-align: center;
    border-top: 2px solid #eee;
    background: #f9f9f9;
  }
  .continue-btn{
    padding: 12px 40px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102,126,234,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .continue-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.6);
  }
  .continue-btn:active{
    transform: translateY(0);
  }
  .papers-collected{
    position: absolute;
    top: 150px;
    left: 20px;
    background: rgba(0,0,0,.7);
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .paper-icon{
    font-size: 24px;
  }
  .paper-count{
    font-size: 20px;
    font-weight: 700;
    color: #3aa0ff;
  }
  
  /* ---------- UI ---------- */
  .control-panel{
    background: rgba(0,0,0,.92);
    padding:18px;
    display:flex; gap:20px; justify-content:space-around; align-items:center;
    box-shadow:0 -6px 22px rgba(0,0,0,.4);
    touch-action: pan-y; /* Allow vertical scrolling but prevent horizontal bounce */
  }
  .heart-monitor{display:flex; flex-direction:column; align-items:center; color:#fff;}
  .heart-icon{font-size:40px; color:#e74c3c; animation:heartbeat 1s ease-in-out infinite;}
  @keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
  .heart-rate-display{font-size:36px; font-weight:700; color:#e74c3c; margin:10px 0; text-shadow:0 0 10px rgba(231,76,60,.5);}
  .heart-rate-label{font-size:14px; color:#95a5a6;}
  
  .slider-container{display:flex; flex-direction:column; align-items:center; gap:10px;}
  .slider-label{color:#fff; font-size:14px;}
  .heart-slider{width:220px; height:8px; appearance:none; background:linear-gradient(90deg,#3498db 0%,#e74c3c 100%); border-radius:6px;}
  .heart-slider::-webkit-slider-thumb{
    appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid #e74c3c;
    box-shadow:0 2px 5px rgba(0,0,0,.3); cursor:pointer;
  }
  
  .controls{display:flex; gap:14px; align-items:center;}
  .control-btn{
    width:54px; height:54px; border:0; border-radius:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; background:#3b4a63;
    box-shadow:0 4px 6px rgba(0,0,0,.3); transition:transform .15s, background .15s;
    flex-direction: column;
    gap: 4px;
  }
  .control-btn:hover{transform:translateY(-2px); background:#2f3e56;}
  .control-btn:active{transform:translateY(0);}
  
  /* Hide control labels on desktop */
  .control-label{
    display: none;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 1;
  }
  
  .toggle{
    padding:10px 14px; border-radius:10px; border:0; cursor:pointer; color:#fff; background:#e74c3c; font-weight:700;
    transition: transform .15s, background .15s;
  }
  .toggle:hover{
    transform: translateY(-2px);
    background: #c0392b;
  }
  .toggle:active{
    transform: translateY(0);
  }
  
  .speed-display{color:#fff; text-align:center;}
  .speed-value{font-size:28px; font-weight:700; color:#3aa0ff;}
  .speed-label{font-size:14px; color:#95a5a6;}
  
  /* Stats row - will be styled differently on mobile */
  .stats-row{
    display: contents; /* On desktop, acts as if it doesn't exist */
  }
  
  .instructions{
    position:absolute; top:16px; left:50%; transform:translateX(-50%);
    background: rgba(0,0,0,.72); color:#fff; padding:10px 18px;
    border-radius:10px; text-align:center; z-index:100;
  }
  .mobile-instructions{
    display: none;
  }
  
  /* Top reset button - hidden on desktop, shown on mobile */
  .top-reset-btn{
    display: none;
  }
  
  /* High-speed shake preserved */
  @keyframes carShake{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-2px)}
  }
  
  /* ========== MOBILE RESPONSIVE STYLES ========== */
  @media (max-width: 768px) {
    /* Show mobile instructions, hide desktop */
    .desktop-instructions{
      display: none;
    }
    .mobile-instructions{
      display: inline;
    }
  
    /* Make game area take up more vertical space on mobile */
    .game-area{
      flex: 1;
      min-height: 50vh;
    }
  
    /* Make road fill full width on mobile for easier gameplay */
    .road{
      height: 150px; /* Reduced from 200px */
      left: 0;
      right: 0;
      width: 100%; /* Full width on mobile */
    }
  
    /* Adjust car size for mobile */
    .car{
      width: 80px; /* Smaller collision box */
      height: 12px;
      bottom: 40px;
    }
    .car-image{
      width: 120px; /* Smaller visual car */
      height: 60px;
    }
  
    /* Adjust wheels for smaller car */
    .wheel{
      width: 20px;
      height: 20px;
      bottom: -18px;
    }
    .wheel.front{ left: -8px; }
    .wheel.rear { right: -4px; }
  
    /* Make obstacles smaller and lower on road */
    .obstacle{
      width: 70px;
      height: 30px;
      bottom: 40px; /* Match car height */
    }
    .obstacle-image{
      width: 70px;
      height: 60px;
    }
  
    /* Adjust clouds to be less prominent */
    .clouds{
      opacity: 0.7;
    }
    .cloud{
      transform: scale(0.8);
    }
  
    /* Adjust trees for mobile - position them on the road edge */
    .tree{
      bottom: 150px; /* Move to top of road */
    }
  
    /* Hide the bottom reset button on mobile */
    .control-panel .toggle{
      display: none;
    }
  
    /* Show top reset button on mobile - positioned under lives */
    .top-reset-btn{
      display: block;
      position: absolute;
      top: 50px; /* Moved down from 38px to align with smaller lives box */
      right: 8px;
      padding: 3px 6px; /* Made slightly smaller */
      font-size: 9px; /* Reduced from 10px */
      border-radius: 5px; /* Slightly smaller radius */
      border: 0;
      cursor: pointer;
      color: #fff;
      background: #e74c3c;
      font-weight: 700;
      z-index: 100;
      box-shadow: 0 2px 4px rgba(0,0,0,.3);
    }
    .top-reset-btn:active{
      transform: scale(0.95);
    }
  
    /* Stack control panel vertically on mobile */
    .control-panel{
      flex-direction: column;
      gap: 8px;
      padding: 10px;
      max-height: 50vh;
      overflow-y: auto;
      overscroll-behavior: contain; /* Prevent scroll chaining to body */
    }
  
    /* Make stats row flex on mobile to put heart rate and speed side-by-side */
    .stats-row{
      display: flex;
      gap: 6px;
      width: 100%;
      order: 1; /* First item */
    }
  
    /* Create a row for heart rate and speed on mobile */
    .heart-monitor{
      flex-direction: row;
      gap: 6px;
      align-items: center;
      background: rgba(0,0,0,.7);
      padding: 5px 10px;
      border-radius: 8px;
      flex: 1;
    }
    .heart-icon{
      font-size: 16px;
    }
    .heart-rate-display{
      font-size: 18px;
      margin: 0;
    }
    .heart-rate-label{
      font-size: 9px;
    }
  
    /* Make speed display match heart monitor and sit next to it */
    .speed-display{
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      background: rgba(0,0,0,.7);
      padding: 5px 10px;
      border-radius: 8px;
      flex: 1;
    }
    .speed-value{
      font-size: 18px;
      margin: 0;
    }
    .speed-label{
      font-size: 9px;
      margin: 0;
    }
  
    /* Make slider sit right after stats row */
    .slider-container{
      width: 100%;
      gap: 5px;
      padding: 8px 15px;
      background: rgba(0,0,0,.7);
      order: 2; /* Second item, right after stats-row */
      border-radius: 8px;
    }
    .slider-label{
      font-size: 11px;
      text-align: center;
      color: #fff;
    }
    .heart-slider{
      width: 100%;
    }
  
    /* Make arrow controls come after slider */
    .controls{
      gap: 8px;
      transform: scale(0.7);
      order: 3; /* Third item, after slider */
    }
    .control-btn{
      width: 42px;
      height: 44px;
      font-size: 20px;
      background: transparent; /* Remove box background */
      box-shadow: none; /* Remove shadow */
      border-radius: 0; /* Remove rounded corners */
      padding: 2px;
    }
    .control-btn:hover{
      background: transparent;
      transform: translateY(0);
    }
    .control-btn:active{
      transform: scale(0.95);
    }
    
    /* Show control labels on mobile */
    .control-label{
      display: block;
      font-size: 7px;
      margin-top: 0px;
      white-space: nowrap;
    }
  
    /* Make instructions smaller on mobile */
    .instructions{
      font-size: 12px;
      padding: 8px 12px;
      max-width: 90%;
    }
  
    /* Make lives and score displays smaller and more compact */
    .lives-display, .score-display{
      top: 8px;
      padding: 4px 8px;
      font-size: 10px;
    }
    .lives-display{
      right: 8px;
      gap: 3px;
    }
    .lives-display span:first-child{
      font-size: 9px; /* Smaller "Lives:" text */
    }
    .score-display{
      left: 8px;
    }
    .score-value{
      font-size: 18px;
    }
    .score-label{
      font-size: 8px;
    }
    .heart-life{
      font-size: 14px;
    }
  
    /* Make papers counter smaller and fit better on mobile */
    .papers-collected{
      top: 50px; /* Align with smaller score/lives displays */
      left: 8px;
      padding: 4px 8px;
      font-size: 10px;
    }
    .paper-icon{
      font-size: 14px;
    }
    .paper-count{
      font-size: 14px;
    }
  
    /* Adjust speech bubble for mobile */
    .speech-bubble{
      max-width: 180px;
      font-size: 14px;
      padding: 10px 14px;
    }
  
    /* Make start screen text smaller */
    .start-title{
      font-size: 36px;
    }
    .start-subtitle{
      font-size: 16px;
      padding: 0 20px;
    }
    .start-btn{
      padding: 15px 40px;
      font-size: 20px;
    }
  
    /* Adjust color picker for mobile */
    .color-picker-section{
      padding: 15px;
      margin-bottom: 20px;
    }
    .color-picker-title{
      font-size: 16px;
      margin-bottom: 12px;
    }
    .color-options{
      gap: 10px;
    }
    .color-option{
      width: 50px;
      height: 50px;
    }
  }
  
  /* Extra small phones */
  @media (max-width: 480px) {
    /* Make road full width for tiny phones too */
    .road{
      height: 130px;
      left: 0;
      right: 0;
      width: 100%;
    }
  
    /* Even smaller car for tiny screens */
    .car{
      width: 70px;
      height: 10px;
      bottom: 35px;
    }
    .car-image{
      width: 100px;
      height: 50px;
    }
  
    /* Smaller obstacles */
    .obstacle{
      width: 60px;
      height: 25px;
      bottom: 35px;
    }
    .obstacle-image{
      width: 60px;
      height: 50px;
    }
  
    /* Adjust trees position */
    .tree{
      bottom: 130px;
      transform: scale(0.8);
    }
  
    .control-panel{
      padding: 10px;
      gap: 10px;
    }
    
    .controls{
      transform: scale(1);
      gap: 15px;
    }
    
    .control-btn{
      width: 50px;
      height: 60px;
      font-size: 24px;
    }
    
    .control-label{
      font-size: 8px;
    }
  
    .start-title{
      font-size: 28px;
    }
    .start-subtitle{
      font-size: 14px;
    }
  
    /* Smaller color options on tiny screens */
    .color-option{
      width: 45px;
      height: 45px;
    }
  }