@charset "UTF-8";:root{--text-color: #ffffffde;--color-car-name: #efd80c;--bg-color: #242424;--start-car-position-px: 60px;--bg-main: #10131a;--bg-card: #1e293b;--accent-blue: #38bdf8;--accent-purple: #818cf8;--text-primary: #f8fafc;--text-secondary: #94a3b8;--color-win: #4ade80;--color-danger: #a50a0a;--color-gold: #fbbf24;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--glass: rgba(255, 255, 255, .03)}*,*:after,*:before{margin:0;padding:0;box-sizing:inherit}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;font-size:62.5%}@media(max-width:43.75em){html{font-size:54.25%}}@media(max-width:34.37em){html{font-size:50%}}@media(max-width:28.125em){html{font-size:40%}}@media(max-width:20em){html{font-size:32%}}body{min-height:100dvh;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;background:var(--bg-color);background:var(--bg-main);min-height:100vh;font-size:1.8rem;line-height:1.6;color:var(--text-color)}a{text-decoration:none}main{margin:0 auto;max-width:144rem;padding:0 2rem}.btn-pagination{color:var(--text-primary);padding:.8rem 1.6rem;border:none;transition:var(--transition);background:transparent;border-radius:5rem}@media(hover:hover)and (pointer:fine){.btn-pagination:hover:not(:disabled){cursor:pointer;background:var(--accent-blue)}}.btn-pagination:disabled{opacity:.3;filter:grayscale(.8)}.header{max-width:144rem;padding:2rem 2rem 0;margin:0 auto}.nav{width:100%;display:flex;justify-content:center;gap:5rem}.nav__link{color:inherit;font-weight:500;padding:.8rem 2rem;border-radius:1rem;transition:all .3s ease;font-size:1.6rem;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);border:1px solid transparent;border-radius:.8rem;padding:1rem 2.5rem;background:var(--glass)}@media(hover:hover)and (pointer:fine){.nav__link:hover{color:var(--text-primary);background:#ffffff12;transform:translateY(-2px)}}.nav__link--active{color:var(--accent-blue);border-color:var(--accent-blue);background:#38bdf81a;box-shadow:0 0 15px #38bdf833}.garage-page{position:relative}.modal-winner{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);padding:3.8rem;min-width:30rem;border-radius:.8rem;-webkit-backdrop-filter:blur(4rem);backdrop-filter:blur(4rem);box-shadow:0 0 1rem #0006;text-align:center;font-size:2rem;animation:fade-in .8s}.modal-winner__name--accent{color:var(--color-gold);font-weight:600}.modal-winner__time{font-weight:500}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.cars{margin-top:3rem}.cars__info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.cars__info--quantity{font-size:1.8rem}.cars__pagination{-webkit-user-select:none;user-select:none;display:flex;align-items:center;border:1px solid rgba(255,255,255,.1);padding:.4rem;border-radius:5rem}.cars__pagination p{width:7rem;text-align:center}.cars__item{display:flex;flex-direction:column;gap:1rem;padding-bottom:.5rem;margin-bottom:2rem;border-bottom:2px dashed #fff}.cars__item--top{display:flex;gap:.5rem;align-items:center;height:2.9rem}.cars__item--bottom{position:relative;display:flex;gap:2rem;align-items:center;height:3.2rem}.cars__drive-contol{display:flex;gap:.8rem}.cars__name{margin-left:.6rem;color:var(--color-gold)}.cars__figure{width:10rem;height:3.2rem;position:absolute;top:0;left:var(--start-car-position-px)}.cars__figure svg{width:100%;height:100%}.cars__flag{position:absolute;right:11rem;top:-1.5rem;width:6rem;height:5rem}.cars__flag svg{width:100%;height:100%}.cars__btn{cursor:pointer}.cars__btn--go,.cars__btn--stop{font-size:1.8rem;padding:.2rem .35rem;background-color:transparent;border:none;border:1px solid var(--glass)}.cars__btn--go:disabled,.cars__btn--stop:disabled{opacity:.85;filter:grayscale(.5);box-shadow:none;cursor:default}.cars__btn--go{color:var(--color-win);box-shadow:0 0 4px var(--color-win)}.cars__btn--stop{color:var(--color-danger);box-shadow:0 0 4px var(--color-danger)}.cars__btn--select,.cars__btn--delete{font-family:inherit;padding:.4rem 1.2rem;font-size:1.25rem;text-transform:uppercase;letter-spacing:1px;border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text-secondary);transition:var(--transition)}@media(hover:hover)and (pointer:fine){.cars__btn--select:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:#38bdf80d}}.cars__btn--select:disabled{background:var(--accent-blue);color:var(--bg-main);border-color:var(--accent-blue);font-weight:700}@media(hover:hover)and (pointer:fine){.cars__btn--delete:hover{border-color:var(--color-danger);color:var(--color-danger);background:#f871710d;animation:shake .3s ease-in-out}}.car--broken{filter:grayscale(.6) sepia(.5) hue-rotate(-50deg) drop-shadow(0 0 5px rgb(255,0,0))!important}.car--broken:after{content:"💨";position:absolute;top:-20px;left:20px;font-size:2rem;animation:smoke-rise 1s ease-out infinite}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes smoke-rise{0%{transform:translateY(0) scale(1);opacity:.8}to{transform:translateY(-40px) scale(2);opacity:0}}.controls{margin-top:.9rem;display:flex;flex-direction:column;max-width:40rem;gap:1rem}.controls__btns{display:flex;margin-top:1rem;gap:1rem}.controls__btn{-webkit-user-select:none;user-select:none;font-family:inherit;letter-spacing:.6px;padding:1rem 1.5rem;border:none;border-radius:10px;font-size:1.25rem;font-weight:600;text-transform:uppercase;transition:all .3s;color:#fff;background:transparent;border:2px solid;box-shadow:0 0 .8rem currentColor}.controls__btn--generate{flex-basis:50%;color:var(--accent-purple);border-color:var(--accent-purple)}.controls__btn--start-race{flex-basis:25%;color:var(--color-win);border-color:var(--color-win)}.controls__btn--reset-race{flex-basis:25%;color:#f87171;border-color:#f87171}.controls__btn--reset-race:disabled,.controls__btn--start-race:disabled,.controls__btn--generate:disabled{box-shadow:none;opacity:.7;filter:grayscale(.4)}@media(hover:hover)and (pointer:fine){.controls__btn--reset-race:hover:not(:disabled),.controls__btn--start-race:hover:not(:disabled),.controls__btn--generate:hover:not(:disabled){cursor:pointer;box-shadow:0 0 2.5rem currentColor,inset 0 0 1.5rem currentColor;transform:translateY(-2px)}}.form{width:100%;display:flex;justify-content:space-around;gap:1rem;background:var(--bg-card);padding:1.5rem;border-radius:1.2rem;border:1px solid rgba(255,255,255,.05)}.form__name{font-size:1.6rem;border-radius:8px;padding:.5rem 1rem;border:none;background:var(--bg-main);color:var(--text-primary);border:1px solid rgba(255,255,255,.1);transition:var(--transition)}.form__name:focus{outline:none;border-color:var(--accent-blue);filter:drop-shadow(0 0 .6em rgba(49,120,198,.6666666667))}.form__name:disabled{opacity:.4;filter:grayscale(.7)}.form__color{border:none;width:4rem;height:3.2rem;padding:0;background:none;border-radius:4px;overflow:hidden;transition:var(--transition)}@media(hover:hover)and (pointer:fine){.form__color:hover:not(:disabled){cursor:pointer;filter:brightness(2) drop-shadow(0 0 .6em rgba(49,120,198,.6666666667))}}.form__color:disabled{opacity:.4;filter:grayscale(.7)}.form__btn{width:10rem;text-transform:capitalize;border:none;font-size:1.6rem;font-family:inherit;border-radius:.7rem;transition:all .2s;background:var(--accent-purple);color:#fffd;font-weight:500;border:1px solid var(--glass)}@media(hover:hover)and (pointer:fine){.form__btn:hover:not(:disabled){cursor:pointer;filter:brightness(1.2);box-shadow:0 0 15px #818cf866}}.form__btn:disabled{opacity:.4;filter:grayscale(.7)}.is-loading{pointer-events:none;position:relative;color:transparent!important}.is-loading:before{content:"";position:absolute;width:2rem;height:2rem;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;left:calc(50% - 10px);top:calc(50% - 10px)}@keyframes spin{to{transform:rotate(360deg)}}.winners-table__info{display:flex;justify-content:space-between;align-items:center;margin-top:3.5rem;margin-bottom:2rem}.winners-table__info--quantity{font-size:2rem}.winners-table__table{text-align:center;margin:0 auto;max-width:60rem;box-shadow:0 0 1.5rem #38bdf833;border-radius:8px;overflow:hidden;border:1px solid var(--glass)}.winners-table__head{display:flex;justify-content:space-around;background-color:#38bdf833;background:linear-gradient(135deg,var(--accent-blue) 0%,var(--accent-purple) 100%);border-bottom:2px solid rgba(255,255,255,.584)}.winners-table__head span{font-weight:600;-webkit-user-select:none;user-select:none;padding:.5rem 0;flex:1;text-transform:capitalize;text-align:center}.winners-table__head span:not(:first-child){border-left:1px solid rgba(255,255,255,.5)}.winners-table__row{display:flex;justify-content:space-around;align-items:center}.winners-table__row span{flex:1;padding:.3rem 0;text-transform:capitalize;text-align:center;display:flex;justify-content:center}.winners-table__row:nth-child(odd){background-color:#ffffff12}.winners-table__car-model{width:7rem;height:3rem}.winners-table__car-model svg{width:100%;height:100%}.sortable{cursor:pointer;transition:var(--transition)}@media(hover:hover)and (pointer:fine){.sortable:hover{-webkit-backdrop-filter:brightness(1.25);backdrop-filter:brightness(1.25)}}