/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }
body {
    background-color: #2c3e50;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    touch-action: none; /* Prevent zoom/scroll on touch */
}

/* Game Container - 16:9 Aspect Ratio */
#game-container {
    position: relative;
    width: 100vw;
    height: 56.25vw;
    max-height: 100vh;
    max-width: 177.78vh;
    background-color: #87CEEB;
    overflow: hidden;
    box-shadow: 0 0 2vw rgba(0,0,0,0.5);
}

/* Screens */
.screen {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.hidden { display: none !important; }

/* Start & End Screen Background */
#start-screen, #end-screen {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    text-shadow: 0.2vw 0.2vw 0.4vw rgba(0,0,0,0.3);
}
h1 { font-size: 5vw; margin-bottom: 2vw; text-align: center; }

/* Buttons */
.btn {
    padding: 1.5vw 3vw;
    font-size: 2.5vw;
    font-weight: bold;
    border: none;
    border-radius: 2vw;
    background: #ffaa00;
    color: white;
    cursor: pointer;
    box-shadow: 0 0.5vw 0 #cc8800, 0 1vw 1vw rgba(0,0,0,0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    font-family: inherit;
    text-transform: uppercase;
}
.btn:active {
    transform: translateY(0.5vw);
    box-shadow: 0 0 0 #cc8800, 0 0.5vw 0.5vw rgba(0,0,0,0.3);
}
.icon-btn {
    width: 4vw; height: 4vw;
    font-size: 2vw;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    box-shadow: 0 0.3vw 0 rgba(0,0,0,0.2);
    display: flex; justify-content: center; align-items: center;
    transition: transform 0.1s, box-shadow 0.1s;
}
.icon-btn:active { transform: translateY(0.3vw); box-shadow: 0 0 0 rgba(0,0,0,0); }

/* UI Layer */
#ui-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 20;
}
.top-bar {
    display: flex;
    justify-content: space-between;
    padding: 2vw;
    pointer-events: auto;
}
.stats {
    display: flex;
    gap: 2vw;
    font-size: 2vw;
    font-weight: bold;
    color: white;
    text-shadow: 0.2vw 0.2vw 0 #000;
}
.controls { display: flex; gap: 1vw; }
#combo { color: #ffeb3b; animation: pulse 0.5s infinite alternate; }

#question-box {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 2vw 4vw;
    border-radius: 2vw;
    font-size: 3.5vw;
    font-weight: bold;
    color: #333;
    border: 0.5vw solid #ffaa00;
    box-shadow: 0 1vw 2vw rgba(0,0,0,0.2);
    text-align: center;
    pointer-events: auto;
    min-width: 50%;
}

/* World Layer & Scenery */
#world-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
.background { position: absolute; width: 100%; height: 100%; z-index: -1; }
.sea { position: absolute; bottom: 0; width: 100%; height: 25%; background: linear-gradient(#0099ff, #0055ff); border-top: 0.5vw solid #e0f7fa; }
.mountain-back { position: absolute; bottom: 25%; width: 0; height: 0; border-left: 20vw solid transparent; border-right: 20vw solid transparent; border-bottom: 30vw solid #8db596; left: 10vw; }
.mountain-front { position: absolute; bottom: 25%; width: 0; height: 0; border-left: 25vw solid transparent; border-right: 25vw solid transparent; border-bottom: 35vw solid #5c946e; right: 5vw; }
.sun { position: absolute; top: 5vw; right: 10vw; width: 10vw; height: 10vw; background: #FFD700; border-radius: 50%; box-shadow: 0 0 5vw #FFD700; }
.cloud { position: absolute; background: white; border-radius: 5vw; opacity: 0.8; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: white; border-radius: 50%; }
.cloud-1 { width: 12vw; height: 4vw; top: 10vw; left: -15vw; animation: float 20s linear infinite; }
.cloud-1::before { width: 6vw; height: 6vw; top: -3vw; left: 2vw; }
.cloud-2 { width: 15vw; height: 5vw; top: 5vw; right: 20vw; animation: float 30s linear infinite; }
.cloud-2::before { width: 8vw; height: 8vw; top: -4vw; left: 3vw; }
.cloud-3 { width: 10vw; height: 3vw; top: 20vw; left: 40vw; animation: float 25s linear infinite; }
.cloud-3::before { width: 5vw; height: 5vw; top: -2vw; left: 2vw; }

/* Helicopter */
#helicopter {
    position: absolute;
    top: 25%;
    left: -15vw; /* Start offscreen */
    width: 12vw;
    height: 12vw;
    z-index: 10;
    transition: top 1s ease-in-out, left 1s ease-in-out;
}
.body {
    font-size: 8vw;
    line-height: 1;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1vw 1vw rgba(0,0,0,0.3));
}
.propeller {
    position: absolute;
    top: 0.5vw;
    left: 45%;
    transform: translateX(-50%);
    width: 12vw;
    height: 0.5vw;
    background: #444;
    border-radius: 0.2vw;
    z-index: 3;
    animation: spin 0.1s linear infinite;
    display: none; /* hidden when engine off */
}
.propeller.active { display: block; }
.rope {
    position: absolute;
    top: 7vw;
    left: 4.5vw;
    width: 0.4vw;
    height: 0;
    background: #444;
    z-index: 1;
    transition: height 1s ease-in-out;
}
.cargo {
    position: absolute;
    left: 3vw;
    top: 0; /* Updated via JS */
    font-size: 4vw;
    transition: top 1s ease-in-out;
    z-index: 2;
    filter: drop-shadow(0 0.5vw 0.5vw rgba(0,0,0,0.3));
}

/* Landing Zones */
#landing-zones {
    position: absolute;
    bottom: 5%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 0 2vw;
}
.lz {
    width: 20vw;
    height: 12vw;
    background: rgba(255, 255, 255, 0.95);
    border: 0.6vw solid #333;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1vw 0 #888, 0 1vw 1vw rgba(0,0,0,0.3);
    position: relative;
    transition: transform 0.1s, box-shadow 0.1s, background 0.3s;
    pointer-events: auto; /* Required for touch */
}
.lz:active { transform: translateY(1vw); box-shadow: 0 0 0 #888; }
.lz.disabled { pointer-events: none; opacity: 0.7; }
.lz.correct { background: #4caf50; color: white; border-color: #2e7d32; box-shadow: 0 1vw 0 #1b5e20; }
.lz.wrong { background: #f44336; color: white; border-color: #c62828; animation: shake 0.4s; box-shadow: 0 1vw 0 #b71c1c; }
.lz::before {
    content: 'H';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10vw;
    color: rgba(0,0,0,0.05);
    z-index: 0;
}
.lz span { position: relative; z-index: 1; text-align: center; padding: 0 1vw;}
.lz .target-character { 
    position: absolute; 
    top: -5vw; 
    font-size: 6vw; 
    transition: opacity 0.3s;
    filter: drop-shadow(0 0.5vw 0.5vw rgba(0,0,0,0.3));
}

/* Messages */
#feedback-message {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8vw;
    font-weight: bold;
    color: #ffeb3b;
    text-shadow: 0.4vw 0.4vw 0 #ff9800, -0.1vw -0.1vw 0 #000, 0.1vw -0.1vw 0 #000, -0.1vw 0.1vw 0 #000, 0.1vw 0.1vw 0 #000;
    z-index: 999;
    background: rgba(76, 175, 80, 0.9);
    padding: 2vw 6vw;
    border-radius: 4vw;
    border: 0.8vw solid white;
    box-shadow: 0 2vw 4vw rgba(0,0,0,0.5);
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.msg-wrong {
    color: #ffffff !important;
    text-shadow: 0.4vw 0.4vw 0 #c62828, -0.1vw -0.1vw 0 #000, 0.1vw -0.1vw 0 #000, -0.1vw 0.1vw 0 #000, 0.1vw 0.1vw 0 #000 !important;
    background: rgba(244, 67, 54, 0.9) !important;
}

/* Particles */
#particles-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }
.particle { position: absolute; font-size: 3vw; pointer-events: none; animation: fall 1.5s ease-in forwards; }
.heli-trail { position: absolute; width: 1vw; height: 1vw; background: white; border-radius: 50%; opacity: 0.5; pointer-events: none; animation: fadeOut 1s forwards; z-index: 4; }

/* Animations */
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes float { 0% { transform: translateX(0); } 100% { transform: translateX(115vw); } }
@keyframes spin { 100% { transform: translateX(-50%) rotate(360deg); } }
@keyframes fadeOut { to { opacity: 0; transform: scale(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1vw); } 50% { transform: translateX(1vw); } 75% { transform: translateX(-1vw); } }
@keyframes popIn { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 80% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes fall { to { transform: translateY(30vw) rotate(360deg); opacity: 0; } }
@keyframes heliShake { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-0.5vw); } 50% { transform: translateY(0.5vw); } 75% { transform: translateY(-0.5vw); } }
.shake-light { animation: heliShake 0.5s; }
.screen-shake { animation: shake 0.3s; }

/* Fix for inputs */
input, textarea {
    user-select: auto !important;
    -webkit-user-select: auto !important;
}