* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%; height: 100%; overflow: hidden;
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    touch-action: manipulation;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
body { display: flex; justify-content: center; align-items: center; background: #4EC0CA; }
.game-container {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; height: 100dvh;
    background: linear-gradient(to bottom, #4EC0CA 0%, #87CEEB 100%);
    overflow: hidden; cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.clouds { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 100px); pointer-events: none; z-index: 0; overflow: hidden; }
.cloud { position: absolute; background: rgba(255,255,255,0.95); border-radius: 50%; will-change: transform; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: rgba(255,255,255,0.95); border-radius: 50%; }
.cloud-1 { width: 100px; height: 50px; top: 8%; animation: cloudFloat 35s linear infinite; }
.cloud-1::before { width: 60px; height: 60px; top: -30px; left: 20px; }
.cloud-1::after { width: 50px; height: 50px; top: -20px; left: 55px; }
.cloud-2 { width: 120px; height: 60px; top: 20%; animation: cloudFloat 45s linear infinite; animation-delay: -15s; }
.cloud-2::before { width: 70px; height: 70px; top: -35px; left: 25px; }
.cloud-2::after { width: 55px; height: 55px; top: -25px; left: 65px; }
.cloud-3 { width: 80px; height: 40px; top: 35%; animation: cloudFloat 30s linear infinite; animation-delay: -8s; }
.cloud-3::before { width: 50px; height: 50px; top: -25px; left: 15px; }
.cloud-3::after { width: 40px; height: 40px; top: -15px; left: 45px; }
.cloud-4 { width: 110px; height: 55px; top: 12%; animation: cloudFloat 40s linear infinite; animation-delay: -25s; }
.cloud-4::before { width: 65px; height: 65px; top: -32px; left: 22px; }
.cloud-4::after { width: 50px; height: 50px; top: -22px; left: 58px; }
.cloud-5 { width: 90px; height: 45px; top: 28%; animation: cloudFloat 38s linear infinite; animation-delay: -32s; }
.cloud-5::before { width: 55px; height: 55px; top: -27px; left: 18px; }
.cloud-5::after { width: 45px; height: 45px; top: -18px; left: 50px; }
@keyframes cloudFloat { 0% { transform: translateX(100vw); } 100% { transform: translateX(-200px); } }
.ground-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; z-index: 10; overflow: hidden; }
.ground { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: groundScroll 2.5s linear infinite; will-change: transform; }
.grass { position: absolute; top: 0; left: 0; width: 100%; height: 22px; background: repeating-linear-gradient(90deg, #5DBE4A 0px, #5DBE4A 12px, #4CAF38 12px, #4CAF38 24px, #6ECF5A 24px, #6ECF5A 36px, #4CAF38 36px, #4CAF38 48px); }
.grass::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: repeating-linear-gradient(90deg, #7ED968 0px, #7ED968 6px, #6ECF5A 6px, #6ECF5A 12px, #8EE978 12px, #8EE978 18px, #6ECF5A 18px, #6ECF5A 24px); }
.dirt { position: absolute; top: 22px; left: 0; width: 100%; height: 78px; background: repeating-linear-gradient(90deg, #DED895 0px, #DED895 24px, #D4C882 24px, #D4C882 48px); }
.dirt::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to bottom, #C4B872, #D4C882); }
@keyframes groundScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ground.stopped { animation-play-state: paused; }
.bird { position: absolute; left: 20%; top: 50%; width: 51px; height: 36px; transform-origin: center; z-index: 5; image-rendering: pixelated; transition: transform 0.08s ease-out; }
@media (min-width: 500px) { .bird { width: 51px; height: 36px; } }
@media (min-width: 900px) { .bird { width: 68px; height: 48px; } }
.bird-inner { width: 100%; height: 100%; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 12"><rect x="6" y="0" width="6" height="1" fill="%23000"/><rect x="4" y="1" width="2" height="1" fill="%23000"/><rect x="6" y="1" width="3" height="1" fill="%23FFF"/><rect x="9" y="1" width="1" height="1" fill="%23000"/><rect x="10" y="1" width="2" height="1" fill="%23FFF"/><rect x="12" y="1" width="1" height="1" fill="%23000"/><rect x="3" y="2" width="1" height="1" fill="%23000"/><rect x="4" y="2" width="2" height="1" fill="%23FFF"/><rect x="6" y="2" width="2" height="1" fill="%23FFFF00"/><rect x="8" y="2" width="1" height="1" fill="%23000"/><rect x="9" y="2" width="4" height="1" fill="%23FFF"/><rect x="13" y="2" width="1" height="1" fill="%23000"/><rect x="1" y="3" width="3" height="1" fill="%23000"/><rect x="4" y="3" width="1" height="1" fill="%23000"/><rect x="5" y="3" width="3" height="1" fill="%23FFFF00"/><rect x="8" y="3" width="1" height="1" fill="%23000"/><rect x="9" y="3" width="3" height="1" fill="%23FFF"/><rect x="12" y="3" width="1" height="1" fill="%23000"/><rect x="13" y="3" width="1" height="1" fill="%23FFF"/><rect x="14" y="3" width="1" height="1" fill="%23000"/><rect x="0" y="4" width="1" height="1" fill="%23000"/><rect x="1" y="4" width="3" height="1" fill="%23FFF"/><rect x="4" y="4" width="2" height="1" fill="%23000"/><rect x="6" y="4" width="2" height="1" fill="%23FFFF00"/><rect x="8" y="4" width="1" height="1" fill="%23000"/><rect x="9" y="4" width="3" height="1" fill="%23FFF"/><rect x="12" y="4" width="1" height="1" fill="%23000"/><rect x="13" y="4" width="1" height="1" fill="%23FFF"/><rect x="14" y="4" width="1" height="1" fill="%23000"/><rect x="0" y="5" width="1" height="1" fill="%23000"/><rect x="1" y="5" width="5" height="1" fill="%23FFF"/><rect x="6" y="5" width="1" height="1" fill="%23000"/><rect x="7" y="5" width="2" height="1" fill="%23FFFF00"/><rect x="9" y="5" width="1" height="1" fill="%23000"/><rect x="10" y="5" width="4" height="1" fill="%23FFF"/><rect x="14" y="5" width="1" height="1" fill="%23000"/><rect x="0" y="6" width="1" height="1" fill="%23000"/><rect x="1" y="6" width="1" height="1" fill="%23FFFF00"/><rect x="2" y="6" width="3" height="1" fill="%23FFF"/><rect x="5" y="6" width="1" height="1" fill="%23FFFF00"/><rect x="6" y="6" width="1" height="1" fill="%23000"/><rect x="7" y="6" width="3" height="1" fill="%23FFFF00"/><rect x="10" y="6" width="6" height="1" fill="%23000"/><rect x="1" y="7" width="1" height="1" fill="%23000"/><rect x="2" y="7" width="3" height="1" fill="%23FFFF00"/><rect x="5" y="7" width="1" height="1" fill="%23000"/><rect x="6" y="7" width="3" height="1" fill="%23FFFF00"/><rect x="9" y="7" width="1" height="1" fill="%23000"/><rect x="10" y="7" width="6" height="1" fill="%23DD0000"/><rect x="16" y="7" width="1" height="1" fill="%23000"/><rect x="2" y="8" width="3" height="1" fill="%23000"/><rect x="5" y="8" width="3" height="1" fill="%23FFCC00"/><rect x="8" y="8" width="1" height="1" fill="%23000"/><rect x="9" y="8" width="1" height="1" fill="%23DD0000"/><rect x="10" y="8" width="6" height="1" fill="%23000"/><rect x="2" y="9" width="1" height="1" fill="%23000"/><rect x="3" y="9" width="6" height="1" fill="%23FFCC00"/><rect x="9" y="9" width="1" height="1" fill="%23000"/><rect x="10" y="9" width="5" height="1" fill="%23DD0000"/><rect x="15" y="9" width="1" height="1" fill="%23000"/><rect x="3" y="10" width="2" height="1" fill="%23000"/><rect x="5" y="10" width="5" height="1" fill="%23FFCC00"/><rect x="10" y="10" width="5" height="1" fill="%23000"/><rect x="5" y="11" width="5" height="1" fill="%23000"/></svg>'); background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.pipe { position: absolute; width: 52px; z-index: 8; }
@media (min-width: 500px) { .pipe { width: 65px; } .pipe-cap { width: 78px !important; margin-left: -6.5px !important; height: 28px !important; } }
@media (min-width: 900px) { .pipe { width: 78px; } .pipe-cap { width: 94px !important; margin-left: -8px !important; height: 32px !important; } }
.pipe-body { width: 100%; background: linear-gradient(90deg, #73BF2E 0%, #5DAA1D 8%, #8ED138 16%, #A0E648 30%, #8ED138 50%, #73BF2E 70%, #5DAA1D 85%, #4A9518 100%); border-left: 3px solid #2D5016; border-right: 3px solid #2D5016; }
.pipe-cap { width: 62px; height: 24px; margin-left: -5px; background: linear-gradient(90deg, #73BF2E 0%, #5DAA1D 6%, #8ED138 12%, #A0E648 28%, #8ED138 50%, #73BF2E 72%, #5DAA1D 88%, #4A9518 100%); border: 3px solid #2D5016; border-radius: 3px; }
.pipe-top { top: 0; }
.pipe-bottom { bottom: auto; }
.pipe-top .pipe-body { border-bottom: none; } .pipe-top .pipe-cap { position: absolute; bottom: 0; }
.pipe-bottom .pipe-body { border-top: none; } .pipe-bottom .pipe-cap { position: absolute; top: 0; }
.score { position: absolute; top: max(4%, 20px); left: 50%; transform: translateX(-50%); font-size: clamp(36px, 12vw, 80px); color: #FFF; text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 0 5px 0 #543847; z-index: 20; font-weight: bold; letter-spacing: 3px; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 30; background: rgba(0,0,0,0.35); opacity: 1; transition: opacity 0.35s ease; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.title { font-size: clamp(28px, 12vw, 72px); color: #FFF; text-shadow: 4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000, 0 6px 0 #543847; margin-bottom: 50px; font-weight: bold; letter-spacing: 4px; text-align: center; padding: 0 20px; }
.instruction { font-size: clamp(14px, 4vw, 26px); color: #FFF; text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000; animation: pulse 1.2s ease-in-out infinite; letter-spacing: 1px; text-align: center; padding: 0 20px; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.97); } }
.game-over-title { font-size: clamp(26px, 10vw, 64px); color: #FFF; text-shadow: 4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000, 0 6px 0 #8B0000; margin-bottom: 20px; font-weight: bold; text-align: center; }
.final-score { font-size: clamp(32px, 8vw, 64px); color: #FFD700; text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000; margin-bottom: 40px; font-weight: bold; }
.flash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; z-index: 25; opacity: 0; pointer-events: none; }
.flash.active { animation: flashAnim 0.1s ease-out; }
@keyframes flashAnim { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.get-ready { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 28; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.get-ready.visible { opacity: 1; pointer-events: auto; }
.get-ready-title { font-size: clamp(26px, 9vw, 60px); color: #FFF; text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 0 5px 0 #543847; margin-bottom: 30px; font-weight: bold; text-align: center; }
.tap-icon { width: clamp(60px, 15vw, 90px); height: clamp(60px, 15vw, 90px); animation: tapBounce 0.5s ease-in-out infinite alternate; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
@keyframes tapBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }
.best-score { font-size: clamp(14px, 4vw, 20px); color: #FFD700; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; margin-bottom: 20px; font-weight: bold; letter-spacing: 1px; }
.medal { display: none; margin-bottom: 8px; }
@keyframes scorePop { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.35); } 100% { transform: translateX(-50%) scale(1); } }
.score.score-pop { animation: scorePop 0.3s ease-out forwards; }