.horse-racing{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.container{background:white;border-radius:20px;padding:40px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative}.title{text-align:center;color:#667eea;margin-bottom:30px;font-size:2rem}.settings{background:#f8f9fa;border-radius:15px;padding:30px;margin-bottom:20px}.settings h2{text-align:center;color:#667eea;margin-bottom:25px;font-size:1.5rem}.name-inputs{display:flex;flex-direction:column;gap:15px;margin-bottom:25px}.name-input-row{display:flex;align-items:center;gap:10px}.horse-icon{font-size:2rem;width:40px}.name-input-row input{flex:1 1;padding:12px 15px;font-size:1.1rem;border:2px solid #dee2e6;border-radius:8px;outline:none;transition:border-color .3s}.name-input-row input:focus{border-color:#667eea}.color-picker{gap:6px;padding:4px}.color-button,.color-picker{display:flex;background:white;border-radius:8px;border:2px solid #dee2e6}.color-button{width:36px;height:36px;cursor:pointer;transition:all .2s ease;padding:0;align-items:center;justify-content:center;overflow:hidden}.color-button:hover{transform:scale(1.1);border-color:#495057}.color-button.selected{border-color:#667eea;border-width:3px;transform:scale(1.05);box-shadow:0 0 0 2px white,0 0 0 4px #667eea}.color-preview-sprite{width:30px;height:30px;background-image:url(/horse-sprite.png);background-size:180px 30px;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;transform:scaleX(-1)}.remove-button{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:white;border:2px solid rgba(255,255,255,.3);border-radius:50%;width:38px;height:38px;font-size:1.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0;box-shadow:0 2px 8px rgba(255,107,107,.3);line-height:1;padding-bottom:2px}.remove-button:hover{background:linear-gradient(135deg,#ff5252,#d63447);transform:scale(1.15) rotate(90deg);box-shadow:0 4px 12px rgba(255,107,107,.5)}.remove-button:active{transform:scale(1.05) rotate(90deg)}.button-group{display:flex;gap:10px;flex-direction:column}.add-button{width:100%;padding:12px;font-size:1.1rem;font-weight:700;color:white;background:linear-gradient(135deg,#28a745,#20c997);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(40,167,69,.4)}.add-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(40,167,69,.6)}.add-button:active{transform:translateY(0)}.countdown-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:1000}.countdown-text{font-size:8rem;font-weight:700;color:white;animation:pulse .5s ease-in-out}@keyframes pulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.game-area{margin-bottom:30px}.track-container{background:#f8f9fa;border-radius:15px;padding:30px 20px;margin-bottom:20px}.track-row{display:flex;align-items:center;margin-bottom:20px;gap:15px}.horse-name{font-weight:700;font-size:1.2rem;min-width:120px;text-align:right}.track{flex:1 1;height:50px;position:relative;display:flex;align-items:center;background:linear-gradient(180deg,#8ed98e 0,#6fb06f 50%,#8ed98e);border-radius:5px;overflow:visible}.track-line{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,255,255,.3);transform:translateY(-50%)}.finish-line{right:0;top:0;bottom:0;width:30px;font-size:24px;background:rgba(255,255,255,.3);border-left:2px dashed white}.finish-line,.horse{position:absolute;display:flex;align-items:center;justify-content:center}.horse{width:40px;height:40px;font-size:32px;transition:left .05s linear;z-index:10;transform:translateX(-50%);animation:gallop .4s ease-in-out infinite}@keyframes gallop{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}.horse-sprite{position:absolute;width:40px;height:40px;background-image:url(/horse-sprite.png);background-size:240px 40px;background-repeat:no-repeat;transition:left .05s linear;z-index:10;transform:translateX(-50%) scaleX(-1);image-rendering:pixelated}.horse-sprite.stunned{animation:stumble .2s infinite;filter:grayscale(50%) brightness(.8)}.horse-icon-sprite{width:28px;height:28px;background-image:url(/horse-sprite.png);background-size:168px 28px;background-repeat:no-repeat;image-rendering:pixelated;transform:scaleX(-1)}.horse.stunned{animation:stumble .2s infinite;filter:grayscale(50%) brightness(.8)}@keyframes stumble{0%{transform:translateX(-50%) scaleX(-1) translateY(0) rotate(0deg)}25%{transform:translateX(-50%) scaleX(-1) translateY(2px) rotate(-5deg)}75%{transform:translateX(-50%) scaleX(-1) translateY(2px) rotate(5deg)}to{transform:translateX(-50%) scaleX(-1) translateY(0) rotate(0deg)}}.obstacle{position:absolute;top:-35px;font-size:24px;transform:translateX(-50%);z-index:15;animation:obstacle-bounce .5s ease-in-out infinite}@keyframes obstacle-bounce{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}.finish-badge{position:absolute;right:-80px;top:50%;transform:translateY(-50%);background:#28a745;padding:5px 12px;font-weight:700;font-size:.9rem;white-space:nowrap}.finish-badge,.results{color:white;border-radius:15px}.results{background:linear-gradient(135deg,#667eea,#764ba2);padding:25px}.results h2{text-align:center;margin-bottom:20px;font-size:1.5rem}.results-list{display:flex;flex-direction:column;gap:12px}.result-item{background:rgba(255,255,255,.2);padding:15px;border-radius:10px;display:flex;align-items:center;gap:15px;font-size:1.2rem;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.medal{font-size:1.5rem;min-width:60px}.winner-badge{margin-left:auto;background:linear-gradient(135deg,#ff6b6b,#ff4757);color:white;padding:8px 18px;border-radius:20px;font-size:1.1rem;font-weight:700;box-shadow:0 4px 15px rgba(255,107,107,.6);animation:sparkle 1s ease-in-out infinite}@keyframes sparkle{0%,to{transform:scale(1);box-shadow:0 4px 15px rgba(255,107,107,.6)}50%{transform:scale(1.15);box-shadow:0 6px 25px rgba(255,107,107,.9)}}.start-button{width:100%;padding:18px;font-size:1.3rem;font-weight:700;color:white;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(102,126,234,.4)}.start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.6)}.start-button:active:not(:disabled){transform:translateY(0)}.start-button:disabled{opacity:.6;cursor:not-allowed}.reset-button{width:100%;padding:15px;font-size:1.1rem;font-weight:700;color:white;background:linear-gradient(135deg,#ff6b6b,#ee5a6f);border:none;border-radius:12px;cursor:pointer;margin-top:20px;transition:all .3s ease;box-shadow:0 4px 15px rgba(255,107,107,.4)}.reset-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,107,.6)}.reset-button:active{transform:translateY(0)}@media (max-width:768px){.container{padding:20px}.title{font-size:1.5rem}.horse-name{font-size:1rem;min-width:80px}.color-picker{flex-wrap:wrap;max-width:200px}.finish-badge{font-size:.8rem;padding:4px 8px;right:-60px}.countdown-text{font-size:5rem}}