html, body, #game, * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}

* {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

html {
    color-scheme: only light;
    forced-color-adjust: none;
}

body {
    touch-action: none;
    margin:0;
    overflow:hidden;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #4FC3F7;
}

#game {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* Hardware acceleration for the entire container */
    transform: translateZ(0);
}

/* Base bird styles */
.bird {
    position:absolute;
    left: 8vw;
    z-index:20;
    pointer-events: none;
    will-change: transform;
}

/* Bird effects */
.bird.gear-power {
    filter: drop-shadow(0 0 15px #A4C639) brightness(1.2);
}
.bird.virus-effect {
    filter: sepia(1) saturate(3) hue-rotate(300deg) brightness(0.8);
}

/* Portrait mode */
@media (orientation: portrait) {
    .bird { width: 12vh; height: 12vh; }
    .item.phone { width: 9vh; height: 9vh; }
    .item.key   { width: 6vh; height: 6vh; }
    .item.trap  { width: 10vh; height: 13vh; }
    .item.gear  { width: 10vh; height: 10vh; }
    .item.virus { width: 6vh; height: 6vh; }
}

/* Landscape mode */
@media (orientation: landscape) {
    .bird { width: 22vh; height: 22vh; }
    .item.phone { width: 15vh; height: 15vh; }
    .item.key   { width: 10vh; height: 10vh; }
    .item.trap  { width: 18vh; height: 22vh; }
    .item.gear  { width: 15vh; height: 15vh; }
    .item.virus { width: 9vh; height: 9vh; }
}

.wing {
    transform-origin: 70% 50%;
    animation: flap 0.2s infinite alternate ease-in-out;
}

@keyframes flap {
    from { transform: rotate(10deg); }
    to   { transform: rotate(-30deg); }
}

.item {
    position:absolute;
    z-index:15;
    will-change: transform;
}

/* Key animation on SVG to avoid conflict with container transform */
.item.key svg { animation: keyPulse 1.2s infinite ease-in-out; }
@keyframes keyPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px gold); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 5px gold); }
}

.item svg { width: 100%; height: 100%; display: block; }

.ui {
    position:absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    font-weight: 900;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    z-index: 30;
    pointer-events: none;
}

.ui-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    padding: 4px 10px;
    border-radius: 20px;
}

.ui span { color: #FFEB3B; }

.pause-trigger:active {
    background: rgba(255,255,255,0.2);
    transform: scale(0.9);
}

#city-bg {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}

/* Overlays */
.overlay {
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.9);
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    z-index:100;
    opacity:0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    text-align: center;
}

.overlay.show {
    opacity:1;
    visibility: visible;
}

.content {
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 95vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Optimization for Landscape */
@media (orientation: landscape) {
    .content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 800px;
        gap: 20px;
    }
    .logo-container { margin-bottom: 0 !important; margin-right: 20px; }
    .bird-logo { width: 80px !important; height: 80px !important; }
    .game-title { font-size: 36px !important; }
    .legend { grid-template-columns: repeat(4, 1fr) !important; width: 100%; margin-bottom: 15px !important; }
    .legend-item { font-size: 11px !important; padding: 4px !important; }
    .stats-preview { margin-bottom: 15px !important; padding: 5px 15px !important; font-size: 14px; }

    .final-stats { margin-bottom: 15px !important; }
    .stat-box { padding: 10px !important; min-width: 80px !important; }
    .stat-value { font-size: 24px !important; }
    .game-over-actions { flex-direction: row !important; gap: 10px !important; }
    .game-over-title { font-size: 32px !important; margin-bottom: 10px !important; }
}

.main-btn {
    padding: 15px 40px;
    font-size: 20px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, #ff9800, #f44336);
    color: white;
    font-weight: 900;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.1s;
}

.main-btn:active { transform: scale(0.95); }

.apk-btn {
    padding: 12px 25px;
    font-size: 14px;
    border-radius: 30px;
    border: 2px solid #A4C639;
    background: rgba(164, 198, 57, 0.1);
    color: #A4C639;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.apk-btn:active { transform: scale(0.95); background: rgba(164, 198, 57, 0.2); }

.icon-android {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23A4C639"><path d="M17.523 15.3414C17.0609 15.3414 16.6917 14.9622 16.6917 14.5C16.6917 14.0378 17.0609 13.6586 17.523 13.6586C17.9851 13.6586 18.3543 14.0378 18.3543 14.5C18.3543 14.9622 17.9851 15.3414 17.523 15.3414ZM6.47697 15.3414C6.01487 15.3414 5.64567 14.9622 5.64567 14.5C5.64567 14.0378 6.01487 13.6586 6.47697 13.6586C6.93908 13.6586 7.30828 14.0378 7.30828 14.5C7.30828 14.9622 6.93908 15.3414 6.47697 15.3414ZM17.8847 11.2332L19.7441 8.01314C19.8517 7.82862 19.7891 7.59258 19.6046 7.48491C19.4201 7.37725 19.184 7.43986 19.0764 7.62438L17.1895 10.8906C15.7533 10.2338 14.129 9.86311 12.3789 9.86311C10.6288 9.86311 9.00449 10.2338 7.56834 10.8906L5.68142 7.62438C5.57376 7.43986 5.33771 7.37725 5.15319 7.48491C4.96867 7.59258 4.90607 7.82862 5.01373 8.01314L6.87311 11.2332C3.88607 12.8364 1.83842 15.897 1.63738 19.4632H22.3626C22.1616 15.897 20.1139 12.8364 17.8847 11.2332Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.game-over-title {
    font-size: 48px;
    font-weight: 900;
    color: #FF5252;
    margin-bottom: 15px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.new-best-badge {
    background: #FFD700;
    color: #000;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 16px;
    display: none;
    margin: 0 auto 15px;
    animation: badgePulse 0.5s infinite alternate;
}

@keyframes badgePulse { from { transform: scale(1); } to { transform: scale(1.1); } }

.final-stats { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
.stat-box { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 15px; min-width: 90px; border: 1px solid rgba(255,255,255,0.2); }
.stat-value { font-size: 32px; font-weight: 900; color: #FFEB3B; margin: 5px 0; }
.stat-label { font-size: 10px; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; }

.game-over-actions { display: flex; flex-direction: column; gap: 12px; }
.sec-btn { background: transparent; border: 2px solid rgba(255,255,255,0.3); color: white; padding: 10px 25px; border-radius: 30px; font-weight: bold; cursor: pointer; }

/* Start screen styles */
.logo-container { margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; }
.bird-logo { width: 100px; height: 100px; margin-bottom: 5px; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.3)); animation: floatLogo 3s infinite ease-in-out; }
@keyframes floatLogo { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(5deg); } }

.game-title { font-size: 48px; margin: 5px 0; font-weight: 900; background: linear-gradient(#FFF, #FFEB3B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 8px 15px rgba(0,0,0,0.3); }

.stats-preview { background: rgba(255,255,255,0.1); padding: 8px 15px; border-radius: 15px; display: inline-block; margin-bottom: 25px; font-weight: bold; color: #FFEB3B; border: 1px solid rgba(255,255,255,0.2); }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; text-align: left; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; background: rgba(0,0,0,0.3); padding: 6px; border-radius: 10px; }
.legend-item span { flex: 1; }

/* Icons */
.icon-key, .icon-phone, .icon-gear, .icon-virus, .icon-heart, .icon-trophy, .icon-pause { width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.icon-key.large, .icon-phone.large { width: 32px; height: 32px; margin: 0 auto; }
.icon-key    { background-image: url('../svg/key.svg'); }
.icon-phone  { background-image: url('../svg/phone.svg'); }
.icon-gear   { background-image: url('../svg/gear.svg'); }
.icon-virus  { background-image: url('../svg/virus.svg'); }
.icon-heart  { background-image: url('../svg/heart.svg'); }
.icon-trophy { background-image: url('../svg/trophy.svg'); }
.icon-pause  { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'); }

.settings-row {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    justify-content: center;
}

.setting-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: bold;
    color: #FFEB3B;
}

.icon-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.4);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-btn:active { transform: scale(0.9); }

.music-btn { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>'); }
.sfx-btn   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>'); }

.off {
    background-color: rgba(255, 0, 0, 0.3);
    opacity: 0.6;
}

.off.music-btn { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73L19.73 21 21 19.73 4.27 3zM14 7h4V3h-6v5.18l2 2V7z"/></svg>'); }
.off.sfx-btn   { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73 4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'); }

.hint { margin-top: 15px; opacity: 0.6; font-size: 13px; font-style: italic; }