@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Orbitron:wght@500;700&display=swap";:root{--bg-main:#040813;--bg-card:#0a101edb;--border:#a2c7ee47;--text-main:#eef6ff;--text-muted:#9eb5d4;--accent:#59ddff;--accent-soft:#59ddff2e;--danger:#ff8da7}*{box-sizing:border-box}html,body,#root{min-height:100%;color:var(--text-main);background:radial-gradient(circle at 20% 20%,#0d1832 0%,#050a17 55%,#03050b 100%);margin:0;font-family:Manrope,Segoe UI,sans-serif}a{color:inherit}h1,h2,h3,.eyebrow,.room-chip{letter-spacing:.04em;font-family:Orbitron,Segoe UI,sans-serif}input,button{font-family:Manrope,Segoe UI,sans-serif}.eyebrow{color:#9fdcff;text-transform:uppercase;margin:0;font-size:.78rem}.subtle,.muted{color:var(--text-muted);margin:0}.primary-btn,.ghost-btn,.ready-btn{border:1px solid #0000;border-radius:14px;padding:.85rem 1.1rem;font-weight:700;transition:transform .12s,background .18s,border-color .18s}.primary-btn{color:#04203a;background:linear-gradient(120deg,#38bfe9,#7de1ff)}.primary-btn:hover:enabled,.ghost-btn:hover:enabled,.ready-btn:hover:enabled{transform:translateY(-1px)}.primary-btn:disabled,.ghost-btn:disabled,.ready-btn:disabled{opacity:.5;cursor:not-allowed}.ghost-btn{color:#d8eeff;background:#4db5e71f;border-color:#86caec66}.text-link{color:#a8d9ff;text-decoration:none}.error-banner,.error-floating,.warning-text{border-radius:12px;padding:.7rem .9rem;font-size:.9rem}.error-banner,.error-floating{color:#ffd2dd;background:#ff6c8c26;border:1px solid #ff839f61}.warning-text{color:#ffe8c2;background:#ffc35f1f;border:1px solid #ffca7247}.landing-shell,.host-shell,.player-shell{place-items:center;min-height:100dvh;padding:1.25rem;display:grid;position:relative}.top-toolbar{z-index:8;pointer-events:auto;position:absolute;top:.75rem;right:.85rem}.lang-switcher{background:#070d18c2;border:1px solid #88bce870;border-radius:999px;gap:.24rem;padding:.24rem;display:inline-flex;box-shadow:0 10px 24px #02071061}.lang-switcher-btn{color:#b8d8f7;letter-spacing:.05em;cursor:pointer;background:0 0;border:1px solid #82b7e433;border-radius:999px;padding:.24rem .52rem;font-family:Orbitron,Segoe UI,sans-serif;font-size:.68rem;transition:background .14s,border-color .14s,color .14s}.lang-switcher-btn:hover{color:#def1ff;border-color:#99d1ff75}.lang-switcher-btn.active{color:#062138;background:linear-gradient(120deg,#38bfe9,#7de1ff);border-color:#67d2ffbf}.bg-stars,.bg-glow{pointer-events:none;position:absolute;inset:0}.bg-stars{background-image:radial-gradient(circle at 18% 25%,#8cceff59 0,#0000 23%),radial-gradient(circle at 82% 18%,#a0ffeb38 0,#0000 26%),radial-gradient(circle at 44% 80%,#6695ff33 0,#0000 28%)}.bg-glow{background:linear-gradient(140deg,#3d9eff14,#0000 42%),linear-gradient(-140deg,#2875d126,#0000 52%)}.landing-card,.host-lobby-card,.player-card,.controller-card{border:1px solid var(--border);background:var(--bg-card);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:1;border-radius:26px;width:min(960px,100%);position:relative;box-shadow:0 22px 70px #01050da6}.landing-card{max-width:760px;padding:2.2rem}.landing-card h1{margin:.35rem 0 0;font-size:clamp(2rem,6.5vw,3.7rem)}.lead{color:#c7def7;max-width:40rem;margin-top:.8rem}.landing-actions{gap:.9rem;margin-top:1.4rem;display:grid}.join-block{align-items:center;gap:.7rem;display:flex}.join-block input,.player-card input{color:#e2f0ff;text-transform:uppercase;background:#040b16bd;border:1px solid #98c3ea59;border-radius:12px;flex:1;min-width:0;padding:.8rem .92rem;font-size:1rem}.join-block input::placeholder,.player-card input::placeholder{color:#89a7cc}.host-lobby-card{padding:1.35rem}.host-grid{grid-template-columns:1fr 1.25fr;gap:1rem;margin-top:1.2rem;display:grid}.qr-panel,.players-panel{background:#070d1aa6;border:1px solid #97c0e63d;border-radius:16px;padding:1rem}.qr-panel{justify-items:center;gap:.75rem;display:grid}.qr-panel code{color:#9bc5ea;text-align:center;word-break:break-all;font-size:.75rem}.qr-placeholder{color:#9db9d8;border:1px dashed #9ccbf066;border-radius:12px;place-items:center;width:180px;height:180px;font-size:.85rem;display:grid}.players-panel{gap:.65rem;display:grid}.player-row{background:#060d1894;border:1px solid #99bcdf38;border-radius:12px;justify-content:space-between;align-items:center;padding:.6rem .72rem;display:flex}.player-row.connected{border-color:#70d9ff61}.player-row-clickable{cursor:pointer;transition:border-color .15s,transform .12s,background .15s}.player-row-clickable:hover{background:#091120bf;border-color:#abd5f773;transform:translateY(-1px)}.player-row img{object-fit:contain;width:34px;height:34px}.player-id{align-items:center;gap:.7rem;display:flex}.player-id p{color:#9db2ce;margin:.1rem 0 0;font-size:.88rem}.ready-pill{border-radius:999px;padding:.2rem .65rem;font-size:.78rem;font-weight:700}.ready-pill.on{color:#ccf9e9;background:#4ecea440}.ready-pill.off{color:#f2d7de;background:#d3769438}.race-shell{background:#02040d;width:100%;height:100dvh;position:relative;overflow:hidden}.race-canvas{width:100%;height:100%;display:block}.race-overlay-right{pointer-events:none;flex-direction:column;justify-content:space-between;align-items:flex-end;display:flex;position:absolute;top:.95rem;bottom:.95rem;right:.95rem}.end-game-btn{pointer-events:auto;color:#ffd5df;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:#1a0910c7;border:1px solid #ff859dad;border-radius:999px;padding:.5rem .9rem;font-family:Orbitron,Segoe UI,sans-serif;font-size:.72rem;transition:background .18s,transform .12s,border-color .18s}.end-game-btn:hover{background:#2c0c18e0;border-color:#ff98b2d6;transform:translateY(-1px)}.race-nav{justify-items:center;gap:.5rem;width:96px;display:grid}.race-nav-label{letter-spacing:.08em;color:#cde5ff;text-shadow:0 0 16px #73c9ff59;font-family:Orbitron,Segoe UI,sans-serif;font-size:.63rem}.race-nav-track{background:linear-gradient(#7fdbff57 0%,#69aaec42 55%,#5785c666 100%);border:1px solid #a1d4ff80;border-radius:999px;width:14px;height:min(78vh,680px);position:relative;box-shadow:inset 0 0 10px #83c9ff3d,0 0 20px #4a96e429}.race-nav-marker{border-radius:999px;width:44px;height:7px;position:absolute;left:50%}.race-nav-marker-blue{z-index:2;background:linear-gradient(90deg,#5ac4ff,#9fe9ff);transform:translate(-50%,50%);box-shadow:0 0 14px #68d2ffcc}.race-nav-marker-red{z-index:1;background:linear-gradient(90deg,#ff758d,#ffadbe);transform:translate(-50%,50%);box-shadow:0 0 14px #ff8099c7}.host-modal-backdrop{z-index:20;background:#02071099;place-items:center;display:grid;position:fixed;inset:0}.host-player-modal{background:#080e1cf0;border:1px solid #91c0e773;border-radius:18px;width:min(92vw,380px);padding:1rem;box-shadow:0 20px 48px #020710ad}.host-player-modal h3{margin:0 0 .7rem;font-family:Orbitron,Segoe UI,sans-serif;font-size:1.03rem}.host-player-modal-grid{gap:.35rem;margin-bottom:.9rem;display:grid}.host-player-modal-grid p{color:#c8dff7;margin:0}.host-player-modal-grid strong{color:#f0f8ff}.host-player-modal-actions{justify-content:flex-end;gap:.55rem;display:flex}.kick-btn{color:#ffd4de;cursor:pointer;background:#3a121ecc;border:1px solid #ff859d8a;border-radius:12px;padding:.6rem .95rem;font-weight:700}.kick-btn:disabled{opacity:.5;cursor:not-allowed}.countdown-overlay{color:#dff7ff;text-shadow:0 0 26px #76f3ffeb;pointer-events:none;place-items:center;font-family:Orbitron,Segoe UI,sans-serif;font-size:clamp(5rem,20vw,13rem);display:grid;position:absolute;inset:0}.winner-overlay{text-align:center;background:#070c15ed;border:1px solid #96c9f475;border-radius:34px;width:min(96vw,860px);padding:2.35rem 1.8rem;animation:.56s cubic-bezier(.2,.9,.24,1) winnerPopIn;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 24px 56px #02060cb8}.winner-overlay:before{content:"";pointer-events:none;background:linear-gradient(115deg,#fff0 0%,#c8e6ff29 45%,#fff0 75%);height:140%;animation:1.6s ease-out .12s both winnerSweep;position:absolute;inset:-35% -10% auto;transform:translate(-120%)rotate(8deg)}.winner-overlay .eyebrow{text-align:center}.winner-name{text-align:center;margin:.8rem 0 1.35rem;font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.05}.winner-overlay-blue .winner-name{color:#86dcff;text-shadow:0 0 34px #7de2ffb3}.winner-overlay-red .winner-name{color:#ff9db0;text-shadow:0 0 34px #ff92aab8}.winner-celebration{pointer-events:none;position:absolute;inset:0}.winner-celebration span{--offset:calc((var(--i) * 6.2%) + 2%);left:var(--offset);opacity:0;width:8px;height:16px;transform:rotate(calc((var(--i) - 8) * 6deg));animation:1.8s ease-out forwards confettiFall;animation-delay:calc(var(--i) * 40ms);background:linear-gradient(#8de7ff,#ffd6a6);border-radius:3px;position:absolute;top:-16%}.winner-overlay-red .winner-celebration span:nth-child(odd){background:linear-gradient(#ff9bb0,#ffe1a8)}.winner-overlay-blue .winner-celebration span:nth-child(odd){background:linear-gradient(#8ce8ff,#e5f5ff)}@keyframes winnerPopIn{0%{opacity:0;transform:translate(-50%,-46%)scale(.88)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes winnerSweep{0%{transform:translate(-120%)rotate(8deg)}to{transform:translate(150%)rotate(8deg)}}@keyframes confettiFall{0%{opacity:0;transform:translateY(-30px) rotate(calc((var(--i) - 8) * 6deg))}15%{opacity:.95}to{opacity:0;transform:translateY(190px) rotate(calc((var(--i) - 8) * 16deg))}}.error-floating{width:min(92vw,560px);position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.player-card,.controller-card{gap:.72rem;max-width:440px;padding:1.2rem;display:grid}.controller-identity{background:#060d189e;border:1px solid #91bddf3d;border-radius:14px;align-items:center;gap:.72rem;padding:.7rem;display:flex}.controller-identity img{object-fit:contain;width:50px;height:50px}.energy-meter{background:radial-gradient(circle at center, #0a111ef2 48%, transparent 49%), conic-gradient(from -90deg, #54d7fb var(--energy), #537caa38 0);border-radius:50%;place-items:center;width:210px;height:210px;margin:.4rem auto;display:grid;box-shadow:0 0 36px #5dccf633}.energy-inner{text-align:center;background:#060b14e6;border:1px solid #88b7e257;border-radius:50%;place-items:center;width:152px;height:152px;display:grid}.energy-inner span{font-size:2rem;font-weight:800}.energy-inner small{color:#95b6d7}.ready-btn{color:#d5ffe8;background:#6fd1a638;border-color:#6fd1a661}.ready-btn.on{background:#69edb559}.result-line{color:#b5d4f4;text-align:center;margin:0}@media (width<=840px){.host-grid{grid-template-columns:1fr}.join-block{flex-direction:column}.join-block button,.join-block input{width:100%}.race-overlay-right{top:.6rem;bottom:.6rem;right:.55rem}.top-toolbar{top:.55rem;right:.55rem}.race-nav{width:74px}.race-nav-track{width:11px;height:min(66vh,540px)}.race-nav-marker{width:34px;height:6px}}
