body { font-family: 'Press Start 2P', cursive; background-color: #cde7ec; color: #273f43; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
@media (max-width: 640px){ body { font-size: 12px; } }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.scores-table { width: 100%; border-collapse: collapse; font-family: 'Press Start 2P', cursive; font-size: 10px; }
.scores-table th, .scores-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #ddd; }
.scores-table th { background: linear-gradient(45deg, #4ECDC4, #7EDDD8); color: white; font-weight: 400; font-size: 9px; }
.scores-table td { font-size: 8px; font-weight: 400; }
.scores-table tr:nth-child(even) { background: rgba(255, 235, 59, 0.1); }
.scores-table .rank-1 { color: #FFD700; font-weight: 400; }
.scores-table .rank-2 { color: #C0C0C0; font-weight: 400; }
.scores-table .rank-3 { color: #CD7F32; font-weight: 400; }
.lane-line { background-image: linear-gradient(to right, #f8fafa 50%, transparent 50%); background-size: 30px 4px; background-repeat: repeat-x; }
.runner.running .emoji-body { animation: emojiRun 0.3s linear infinite; }
.runner.running .sprite-body { animation: spriteRun 0.3s linear infinite; }
.runner.running .sprite-body.no-flip { animation: spriteRunNoFlip 0.3s linear infinite; }
.runner.running .shadow { animation: shadowBounce 0.3s linear infinite; }
.runner.running .speed-lines { animation: speedLines 0.3s linear infinite; }
.runner.running .dust-cloud { animation: dustCloud 0.6s linear infinite; }
.runner.turbo-effect .speed-lines { opacity: 0.8 !important; animation: speedLinesTurbo 0.2s linear infinite; }
.runner.turbo-effect .dust-cloud { opacity: 0.6 !important; animation: dustCloudTurbo 0.4s linear infinite; }
.turbo-effect { filter: drop-shadow(0 0 8px #fef08a); transition: filter 0.2s ease-in-out; }
.slipped { animation: slip 0.5s ease-in-out infinite; filter: blur(1px); }
@keyframes slip { 0% { transform: rotate(0deg) translateY(0px);} 25% { transform: rotate(-5deg) translateY(2px);} 50% { transform: rotate(5deg) translateY(-1px);} 75% { transform: rotate(-3deg) translateY(1px);} 100% { transform: rotate(0deg) translateY(0px);} }
@keyframes spriteRun { 0% { transform: scaleX(-1) translateY(0px) rotate(-1deg);} 25% { transform: scaleX(-1) translateY(-2px) rotate(0deg);} 50% { transform: scaleX(-1) translateY(0px) rotate(1deg);} 75% { transform: scaleX(-1) translateY(-1px) rotate(0deg);} 100% { transform: scaleX(-1) translateY(0px) rotate(-1deg);} }
@keyframes spriteRunNoFlip { 0% { transform: translateY(0px) rotate(-1deg);} 25% { transform: translateY(-2px) rotate(0deg);} 50% { transform: translateY(0px) rotate(1deg);} 75% { transform: translateY(-1px) rotate(0deg);} 100% { transform: translateY(0px) rotate(-1deg);} }
@keyframes emojiRun { 0% { transform: scaleX(-1) translateY(0px) rotate(-1deg);} 25% { transform: scaleX(-1) translateY(-4px) rotate(0.5deg);} 50% { transform: scaleX(-1) translateY(-2px) rotate(-0.5deg);} 75% { transform: scaleX(-1) translateY(-5px) rotate(1deg);} 100% { transform: scaleX(-1) translateY(0px) rotate(-1deg);} }
@keyframes shadowBounce { 0% { transform: translateX(-50%) scaleX(1); opacity: 0.2;} 25% { transform: translateX(-50%) scaleX(0.7); opacity: 0.35;} 50% { transform: translateX(-50%) scaleX(1.2); opacity: 0.15;} 75% { transform: translateX(-50%) scaleX(0.8); opacity: 0.3;} 100% { transform: translateX(-50%) scaleX(1); opacity: 0.2;} }
@keyframes speedLines { 0% { opacity: 0; transform: translateX(0px);} 50% { opacity: 0.6; transform: translateX(-8px);} 100% { opacity: 0; transform: translateX(-16px);} }
@keyframes dustCloud { 0% { opacity: 0; transform: translateX(0px) scale(0.5);} 30% { opacity: 0.4; transform: translateX(-5px) scale(1);} 70% { opacity: 0.2; transform: translateX(-12px) scale(1.2);} 100% { opacity: 0; transform: translateX(-20px) scale(0.8);} }
@keyframes speedLinesTurbo { 0% { opacity: 0; transform: translateX(0px);} 50% { opacity: 0.9; transform: translateX(-12px);} 100% { opacity: 0; transform: translateX(-24px);} }
@keyframes dustCloudTurbo { 0% { opacity: 0; transform: translateX(0px) scale(0.8);} 25% { opacity: 0.7; transform: translateX(-8px) scale(1.3);} 60% { opacity: 0.4; transform: translateX(-18px) scale(1.5);} 100% { opacity: 0; transform: translateX(-30px) scale(1);} }
@media (max-width: 640px){ .runner .head { width: 1rem !important; height: 1rem !important; } .runner .torso, .runner .body { height: 1.5rem !important; } .runner .leg { width: 0.375rem !important; height: 1.25rem !important; bottom: -1rem !important; } .runner .arm { width: 0.25rem !important; height: 1rem !important; } .runner .wing { width: 0.75rem !important; height: 1.5rem !important; } .runner .tail { width: 0.25rem !important; height: 1.5rem !important; } }
#crowd-area { min-height: 20px; position: relative; }
.crowd-sprite { background-position: 0 0; background-repeat: no-repeat; display: block; position: relative; }
.crowd-sprite { width: 100%; height: 60px; background-image: url('../assets/images/backgrounds/bleachers.png'); background-size: cover; }
.crowd-frame-text { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; color: #111; font-family: 'Press Start 2P', cursive; font-size: 10px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 6px rgba(255,255,255,0.75); pointer-events: none; z-index: 2; white-space: nowrap; overflow: hidden; }
@media (min-width: 640px){ .crowd-frame-text { font-size: 12px; } }
@media (min-width: 1024px){ .crowd-frame-text { font-size: 14px; } }
.character-btn.selected { outline: 3px solid #fde047; outline-offset: 2px; transform: scale(1.03); }
#character-modal { backdrop-filter: blur(2px); }
#character-modal .modal-content { border: 3px solid #273f43; }
#character-grid .character-btn { transition: transform 0.1s ease, box-shadow 0.1s ease; }
#character-grid .character-btn:focus { outline: 3px solid #fde047; outline-offset: 2px; }
#player-preview, #computer-preview { background: transparent; }
#finish-line { background-image: repeating-linear-gradient(45deg, #fff, #fff 5px, #000 5px, #000 10px); }