body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1a252f; font-family: 'Press Start 2P', cursive; user-select: none; }
#game-container { position: relative; width: 400px; height: 600px; background: url('bg.png') repeat-x bottom; background-size: auto 100%; overflow: hidden; border: 6px solid #000; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); animation: scrollBg 15s linear infinite; }
@keyframes scrollBg { 0% { background-position: 0 bottom; } 100% { background-position: -800px bottom; } }

#player { position: absolute; width: 72px; height: 48px; left: 40px; top: 250px; z-index: 10; background: url('bird.png') no-repeat; background-size: 300% 300%; transition: transform 0.15s ease-out; animation: fly 0.25s step-end infinite; }
@keyframes fly { 0% { background-position: 0% 0%; } 33.33% { background-position: 50% 0%; } 66.66% { background-position: 100% 0%; } 100% { background-position: 0% 0%; } }

#pipes-container { position: absolute; width: 100%; height: 100%; z-index: 5; }
.pipe { position: absolute; width: 60px; background: linear-gradient(to right, #248122 0%, #58de4f 20%, #248122 80%, #12450f 100%); border: 2px solid #000; box-sizing: border-box; }
.pipe-top::after, .pipe-bottom::after { content: ''; position: absolute; left: -6px; width: 68px; height: 30px; background: linear-gradient(to right, #248122 0%, #58de4f 20%, #248122 80%, #12450f 100%); border: 2px solid #000; border-radius: 4px; box-sizing: border-box; }
.pipe-top::after { bottom: -2px; } .pipe-bottom::after { top: -2px; }

/* ИСПРАВЛЕННЫЕ МОНЕТКИ (Идеальный квадрат, 4 кадра, медленное вращение) */
.coin, .ui-coin { 
    width: 24px; 
    height: 24px; 
    background: url('coin.png') no-repeat left center; 
    background-size: 96px 24px; /* Ровно 4 кадра по 24px */
    animation: spinCoin 1s steps(4) infinite; /* Медленнее и четче */
    image-rendering: pixelated; /* Убирает размытие картинки */
    z-index: 6; 
}
.coin { position: absolute; }
.ui-coin { display: inline-block; vertical-align: middle; }
.ui-coin.small { width: 24px; height: 24px; transform: scale(0.8); margin: -5px -5px; }

@keyframes spinCoin { 
    0% { background-position: 0px 0; } 
    100% { background-position: -96px 0; } 
}

#score-display, #coin-display { position: absolute; top: 20px; font-size: 16px; color: #fff; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; z-index: 20; }
#score-display { left: 20px; } #coin-display { right: 20px; color: #f1c40f; display: flex; align-items: center; gap: 8px;}

.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 30; backdrop-filter: blur(2px); }
.game-title { font-size: 28px; color: #f1c40f; text-shadow: 4px 4px 0 #d35400, 0 0 10px #000; margin-bottom: 40px; text-align: center; line-height: 1.5;}
.screen h2 { font-size: 20px; color: #fff; text-shadow: 2px 2px 0 #000; margin-bottom: 20px;}

.menu-buttons { display: flex; flex-direction: column; gap: 16px; width: 70%; }
button { font-family: 'Press Start 2P', cursive; padding: 15px; font-size: 12px; color: #fff; background-color: #3498db; border: 4px solid #000; cursor: pointer; box-shadow: 4px 4px 0 #000; transition: 0.1s; text-align: center; }
button.btn-large { background-color: #2ecc71; font-size: 16px; padding: 20px; color: #000; }
button.btn-back { background-color: #e74c3c; width: 60%; margin-top: 20px;}
button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }
button:hover { filter: brightness(1.1); }
button:disabled { background-color: #7f8c8d; cursor: not-allowed; box-shadow: 0 0 0 #000; transform: translate(4px, 4px); filter: grayscale(100%);}
.hidden { display: none !important; }

input[type="text"] { font-family: 'Press Start 2P', cursive; width: calc(100% - 30px); padding: 15px; font-size: 10px; border: 4px solid #000; background: #fff; color: #000; margin-bottom: 15px; text-align: center; }

.scrollable-list { width: 85%; height: 320px; overflow-y: auto; background: #2c3e50; border: 4px solid #000; padding: 10px; box-shadow: inset 4px 4px 0 rgba(0,0,0,0.5); }
.scrollable-list::-webkit-scrollbar { width: 8px; } .scrollable-list::-webkit-scrollbar-track { background: #000; } .scrollable-list::-webkit-scrollbar-thumb { background: #f1c40f; border: 2px solid #000; }

.list-item { font-size: 10px; line-height: 1.6; margin: 8px 0; padding: 12px; background: #34495e; border: 2px solid #000; display: flex; justify-content: space-between; align-items: center; }
.user-info { display: flex; flex-direction: column; gap: 6px; } .user-info small { color: #bdc3c7; font-size: 8px; } .score-text { color: #f1c40f; font-size: 14px;}

.content-box, .stats-box, .upgrade-panel { width: 80%; background: #2c3e50; padding: 20px; border: 4px solid #000; text-align: center; font-size: 10px; line-height: 2;}
.upgrade-panel { background: #1f2a36; border-color: #f1c40f; }
.highlight-code { background: #000; color: #f1c40f; padding: 10px; border: 2px solid #555; margin: 15px 0; font-size: 14px;}
.coin-stat { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 10px 0; }