@charset "UTF-8";.color-red{color:#ff8787!important}.color-red.card-color,.color-red#color-dot{background-color:#ff8787!important;box-shadow:0 0 10px #ff878780}.color-red.space.occupied{border-color:#ff8787cc;box-shadow:0 0 15px #ff87874d}.color-red.space.occupied .car-icon{color:#ff8787}.mini-dot.color-red,.color-preview.color-red{background-color:#ff8787!important}.color-green{color:#81e6d9!important}.color-green.card-color,.color-green#color-dot{background-color:#81e6d9!important;box-shadow:0 0 10px #81e6d980}.color-green.space.occupied{border-color:#81e6d9cc;box-shadow:0 0 15px #81e6d94d}.color-green.space.occupied .car-icon{color:#81e6d9}.mini-dot.color-green,.color-preview.color-green{background-color:#81e6d9!important}.color-blue{color:#74c0fc!important}.color-blue.card-color,.color-blue#color-dot{background-color:#74c0fc!important;box-shadow:0 0 10px #74c0fc80}.color-blue.space.occupied{border-color:#74c0fccc;box-shadow:0 0 15px #74c0fc4d}.color-blue.space.occupied .car-icon{color:#74c0fc}.mini-dot.color-blue,.color-preview.color-blue{background-color:#74c0fc!important}.color-yellow{color:#ffd43b!important}.color-yellow.card-color,.color-yellow#color-dot{background-color:#ffd43b!important;box-shadow:0 0 10px #ffd43b80}.color-yellow.space.occupied{border-color:#ffd43bcc;box-shadow:0 0 15px #ffd43b4d}.color-yellow.space.occupied .car-icon{color:#ffd43b}.mini-dot.color-yellow,.color-preview.color-yellow{background-color:#ffd43b!important}.color-black{color:#495057!important}.color-black.card-color,.color-black#color-dot{background-color:#495057!important;box-shadow:0 0 10px #49505780}.color-black.space.occupied{border-color:#495057cc;box-shadow:0 0 15px #4950574d}.color-black.space.occupied .car-icon{color:#495057}.mini-dot.color-black,.color-preview.color-black{background-color:#495057!important}.color-white{color:#f8f9fa!important}.color-white.card-color,.color-white#color-dot{background-color:#f8f9fa!important;box-shadow:0 0 10px #f8f9fa80}.color-white.space.occupied{border-color:#f8f9facc;box-shadow:0 0 15px #f8f9fa4d}.color-white.space.occupied .car-icon{color:#f8f9fa}.mini-dot.color-white,.color-preview.color-white{background-color:#f8f9fa!important}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,Inter,sans-serif;-webkit-tap-highlight-color:transparent}body{min-height:100vh;background:linear-gradient(135deg,#b5e8f7 0%,#d6d1f5 50%,#f5d1e8 100%);background-attachment:fixed;overflow-x:hidden;position:relative}body:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.4) 0%,transparent 40%);pointer-events:none}#app{min-height:100vh;display:flex;flex-direction:column}.game-header{display:flex;justify-content:center;padding:1rem}@media (max-width: 768px){.game-header{padding:.5rem}}.game-header .turn-pill{display:flex;gap:1rem;padding:.6rem 2rem;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.8);border-radius:100px;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;letter-spacing:1px}@media (max-width: 768px){.game-header .turn-pill{font-size:.8rem;padding:.5rem 1.5rem}}.game-header .turn-pill .room-id{opacity:.6}.game-header .turn-pill .color-indicator{display:flex;align-items:center;gap:.5rem;margin-left:1rem;padding-left:1rem;border-left:1px solid rgba(255,255,255,.3);font-size:.8rem;opacity:.8}.game-header .turn-pill .color-indicator #color-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 5px currentColor}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-bottom:2rem;width:100%}#track-container{width:95%;max-width:1000px;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;padding:1rem}@media (min-width: 768px){#track-container{grid-template-columns:repeat(6,1fr);gap:1.2rem}}@media (min-width: 1024px){#track-container{grid-template-columns:repeat(8,1fr)}}.discard-pile{width:100px;height:156px;position:relative;margin:-20px 0;z-index:5;pointer-events:none}@media (min-width: 768px){.discard-pile{width:160px;height:250px;margin:-50px 0}}.discard-pile .card{position:absolute;top:0;left:0;margin:0;transition:all .6s cubic-bezier(.23,1,.32,1)}.discard-pile .card.entering{transform:scale(1.5) translateY(-100px) rotate(var(--target-rot));opacity:0}.discard-pile .card .card-inner{box-shadow:0 4px 15px #0003}.discard-pile:before{content:"DISCARD";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:900;font-size:1.5rem;color:#ffffff1a;letter-spacing:5px;pointer-events:none}@media (min-width: 768px){.discard-pile:before{font-size:2.3rem}}.space{aspect-ratio:1/1;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.6);border-radius:12px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease}@keyframes pulse-glow{0%{box-shadow:0 0 5px #ffffff4d}50%{box-shadow:0 0 20px #ffffffb3}to{box-shadow:0 0 5px #ffffff4d}}#hand-container{width:100%;height:220px;display:flex;gap:.8rem;padding:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;align-items:center}@media (min-width: 768px){#hand-container{height:350px;justify-content:center;align-items:flex-end;perspective:1000px;overflow:visible;padding-bottom:4rem;position:relative}}.card{width:100px;height:156px;flex-shrink:0;cursor:pointer;scroll-snap-align:center;position:relative}@media (min-width: 768px){.card{width:160px;height:250px;position:absolute;bottom:0;transition:z-index 0s}}.card .card-inner{width:100%;height:100%;background:linear-gradient(135deg,rgb(255,255,255),rgb(255,255,255));-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1.5px solid rgba(255,255,255,.8);border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 5px 15px #0000001a;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}@media (min-width: 768px){.card .card-inner{border-radius:20px;box-shadow:0 10px 30px #0000001a}}.card.selected-card .card-inner{transform:translateY(-40px) scale(1.1)!important;border-color:#fff!important;box-shadow:0 0 25px #fffc!important;background:rgb(255,255,255)}.card .card-type{font-size:.6rem;text-transform:uppercase;letter-spacing:1px;color:#000;font-weight:700;margin-bottom:.2rem;pointer-events:none}@media (min-width: 768px){.card .card-type{font-size:.9rem;letter-spacing:2px;margin-bottom:.5rem}}.card .card-value{font-size:1.8rem;font-weight:800;color:#000;text-shadow:0 2px 5px rgba(0,0,0,.1);pointer-events:none}@media (min-width: 768px){.card .card-value{font-size:3rem;text-shadow:0 4px 10px rgba(0,0,0,.1)}}.card .card-color{width:12px;height:12px;border-radius:50%;border:1px solid rgb(180,180,180);position:absolute;left:10px;top:10px}.card:hover:not(.selected-card){z-index:100!important}.card:hover:not(.selected-card) .card-inner{transform:translateY(-30px) scale(1.05);background:rgb(255,255,255)}@media (min-width: 768px){.card:hover:not(.selected-card) .card-inner{transform:translateY(-60px) scale(1.1)}}.card:active .card-inner{transform:scale(.95)}.hidden{display:none!important}.btn-primary,.btn-secondary{padding:1rem 2.5rem;background:rgba(255,255,255,.3);border:2px solid white;border-radius:50px;color:#fff;font-weight:800;font-size:1.2rem;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.3s}.btn-primary:hover,.btn-secondary:hover{background:white;color:#b5e8f7}@media (min-width: 768px){.btn-primary,.btn-secondary{padding:1.5rem 4rem;font-size:1.5rem}}#start-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}#start-screen h1{font-size:2.5rem;color:#fff;text-shadow:0 5px 15px rgba(0,0,0,.1);line-height:1.1;margin-bottom:1rem}@media (min-width: 768px){#start-screen h1{font-size:5rem;text-shadow:0 10px 30px rgba(0,0,0,.1)}}#start-screen p{color:#fff;opacity:.8;margin-bottom:2rem;font-size:1rem}@media (min-width: 768px){#start-screen p{margin-bottom:3rem;font-size:1.5rem}}#start-screen .input-group{width:100%;max-width:300px;margin:0 auto 2rem}#start-screen .actions{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:300px;margin:0 auto}#start-screen .divider{color:#fff;font-size:.8rem;font-weight:800;opacity:.5;letter-spacing:2px}#start-screen .join-group{display:flex;width:100%;gap:.5rem}.glass-input{flex:1;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.5);border-radius:50px;padding:.8rem 1.5rem;color:#fff;font-size:1rem;outline:none;transition:.3s;width:100%}.glass-input::placeholder{color:#fff9}.glass-input:focus{border-color:#fff;background:rgba(255,255,255,.2)}.btn-secondary{padding:.8rem 1.5rem;font-size:1rem;border-width:2px}#lobby-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}#lobby-screen h1{font-size:2.5rem;color:#fff;margin-bottom:2rem;text-transform:uppercase}#lobby-screen h1 span{opacity:.4;font-size:.6em;margin-left:.5rem}#lobby-screen #player-list{width:100%;max-width:400px;min-height:200px;margin-bottom:2rem;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}#lobby-screen .player-item{color:#fff;font-size:1.2rem;font-weight:500;letter-spacing:1px;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1);text-transform:capitalize}#lobby-screen .player-item:before{content:"•";margin-right:.5rem;color:#ffffff80}#results-screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem;overflow-y:auto}#results-screen h1{font-size:3rem;color:#fff;margin-bottom:2rem;text-shadow:0 5px 15px rgba(0,0,0,.2)}#results-screen #results-container,#results-screen #reveal-container{width:100%;max-width:600px;margin-bottom:1.5rem;padding:2rem}#results-screen #results-container h3,#results-screen #reveal-container h3{color:#fff;margin-bottom:1rem;text-transform:uppercase;letter-spacing:2px;font-size:1rem;opacity:.8}#results-screen .score-item,#results-screen .reveal-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font-size:1.2rem}#results-screen .score-item:last-child,#results-screen .reveal-item:last-child{border-bottom:none}#results-screen .reveal-item{flex-direction:column;align-items:flex-start;gap:.5rem}#results-screen .reveal-item .reveal-cars{display:flex;gap:.5rem}#results-screen .reveal-item .mini-dot{width:15px;height:15px;border-radius:50%;border:1px solid white}#results-screen .color-name{display:flex;align-items:center;gap:1rem;text-transform:capitalize}#results-screen .color-name .color-preview{width:20px;height:20px;border-radius:50%;border:1px solid white}#results-screen .points{font-weight:800;font-size:1.5rem}.glass-panel{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:20px}.car-container{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:10}.car-node{position:absolute;width:60px;height:60px;display:flex;align-items:center;justify-content:center;transition:all .6s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;cursor:pointer}.car-node .car-icon{width:80%;height:80%;filter:drop-shadow(0 0 5px rgba(0,0,0,.2));rotate:180deg}.car-node .car-icon svg{width:100%;height:100%;fill:currentColor}.car-node.moving{z-index:20}.car-node.selectable-glow{cursor:pointer}.car-node.selectable-glow .car-icon{filter:drop-shadow(0 0 8px currentColor)}@keyframes pulse-glow{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.1);filter:brightness(1.3)}to{transform:scale(1);filter:brightness(1)}}#track-container,.space{position:relative}
