:root{--y-primary:#6d3df2;--y-secondary:#0ea5e9;--y-pink:#ef4ca8;--y-green:#16a34a;--y-red:#dc2626;--y-text:#172033;--y-muted:#667085;--y-card:rgba(255,255,255,.94);--y-border:rgba(108,70,193,.14);}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--y-text)}body{background:radial-gradient(circle at 8% 8%,rgba(74,222,214,.22),transparent 30%),radial-gradient(circle at 92% 10%,rgba(168,85,247,.22),transparent 32%),linear-gradient(135deg,#eefcff,#f7f2ff 45%,#fff7fb 75%,#fff9ed);background-attachment:fixed}.yaris-page{width:min(100%,1050px);margin:0 auto;padding:18px 16px 40px}.yaris-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}.yaris-back{color:var(--y-primary);text-decoration:none;font-weight:800}.yaris-brand{margin:auto;display:flex;align-items:center;gap:8px;font-weight:900;font-size:20px}.yaris-brand-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#6539ef,#ec4da8);box-shadow:0 7px 18px rgba(100,58,230,.28)}.yaris-user-pill{font-size:12px;font-weight:800;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--y-border);white-space:nowrap}.yaris-card{background:var(--y-card);border:1px solid rgba(255,255,255,.85);border-radius:25px;box-shadow:0 16px 50px rgba(49,34,100,.10);padding:22px;margin-bottom:18px;backdrop-filter:blur(10px)}.yaris-hero{display:flex;gap:15px;align-items:center;margin-bottom:20px}.yaris-hero-icon,.result-trophy{width:68px;height:68px;display:grid;place-items:center;border-radius:21px;font-size:34px;background:linear-gradient(145deg,#633cf1,#e84da8);box-shadow:inset 0 2px 2px rgba(255,255,255,.45),0 12px 28px rgba(94,57,223,.25)}h1,h2,p{margin-top:0}.yaris-hero h1{margin-bottom:5px;font-size:clamp(25px,4vw,36px)}.yaris-hero p{margin:0;color:var(--y-muted)}.yaris-lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.yaris-panel{border:1px solid var(--y-border);border-radius:20px;padding:20px;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(246,243,255,.9))}.panel-icon{font-size:30px;margin-bottom:8px}.yaris-panel h2{font-size:21px;margin-bottom:6px}.yaris-panel p{color:var(--y-muted);font-size:14px;line-height:1.5;min-height:43px}.yaris-panel label{display:block;font-size:12px;font-weight:800;margin:12px 0 6px}.yaris-input{width:100%;height:46px;border:1px solid #d9d8e8;border-radius:13px;background:#fff;padding:0 13px;font-size:16px;outline:none}.yaris-input:focus{border-color:#8b6cf5;box-shadow:0 0 0 4px rgba(109,61,242,.10)}.code-input{text-align:center;text-transform:uppercase;font-size:22px;font-weight:900;letter-spacing:5px}.yaris-primary,.yaris-secondary,.yaris-danger{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border-radius:14px;border:0;padding:10px 15px;margin-top:12px;font-size:15px;font-weight:900;text-decoration:none;cursor:pointer}.yaris-primary{color:#fff;background:linear-gradient(145deg,#683cf0,#c83bd5,#f24b8f);box-shadow:inset 0 2px 1px rgba(255,255,255,.35),0 8px 20px rgba(104,60,240,.20)}.yaris-secondary{color:#fff;background:linear-gradient(145deg,#078fca,#2764ef);box-shadow:0 8px 18px rgba(30,120,220,.18)}.yaris-danger{color:#b91c1c;background:#fff1f2;border:1px solid #fecdd3}.yaris-message{margin-top:14px;border-radius:14px;padding:12px 14px;background:#f4f5ff;border:1px solid #e1ddff;font-weight:700;font-size:14px}.yaris-message.error{background:#fff1f2;border-color:#fecdd3;color:#9f1239}.yaris-message.success{background:#ecfdf3;border-color:#bbf7d0;color:#166534}.room-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{display:block;color:#7c5cff;font-size:11px;font-weight:900;letter-spacing:1.3px;margin-bottom:5px}.room-top h2{margin:0}.room-code-box{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:16px;background:#f7f5ff;border:1px solid #e5ddff}.room-code-box span{font-size:9px;font-weight:900;color:#8b7bb7}.room-code-box strong{font-size:20px;letter-spacing:3px}.room-code-box button{border:0;background:#fff;border-radius:9px;width:32px;height:32px;cursor:pointer}.players-grid{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:14px;margin:22px 0}.player-card{padding:17px;border-radius:19px;background:linear-gradient(145deg,#fff,#f7f4ff);border:1px solid var(--y-border);text-align:center}.player-avatar{font-size:38px;margin-bottom:5px}.player-name{font-size:18px;font-weight:900}.player-status{font-size:12px;color:var(--y-muted);margin-top:4px}.player-progress{height:7px;background:#e9e8f3;border-radius:10px;margin-top:12px;overflow:hidden;position:relative}.player-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6b3ff2,#eb4da9);border-radius:10px}.player-progress span{display:block;margin-top:6px;font-size:10px;color:#7a8090}.versus{font-size:20px;font-weight:1000;text-align:center;color:#f04a93}.room-actions{display:flex;gap:10px}.room-actions .yaris-primary,.room-actions .yaris-danger{flex:1}.game-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:16px}.game-head strong{font-size:18px}.game-timer{font-variant-numeric:tabular-nums;font-size:20px;font-weight:950;padding:7px 13px;border-radius:12px;background:#151a2a;color:#fff}.opponent-live{text-align:right;font-size:12px;font-weight:800;color:#64748b}.question-category{display:inline-flex;padding:5px 9px;border-radius:999px;background:#f0ebff;color:#6840df;font-weight:900;font-size:11px}.race-question{font-size:clamp(20px,3vw,28px);line-height:1.35;margin:13px 0 18px}.race-options{display:grid;gap:10px}.race-option{width:100%;text-align:left;border:1px solid #dddbea;background:#fff;border-radius:15px;padding:14px 15px;display:flex;gap:10px;align-items:flex-start;font-size:16px;cursor:pointer;transition:.15s}.race-option:hover{border-color:#967bf1;transform:translateY(-1px)}.race-option .letter{width:30px;height:30px;min-width:30px;border-radius:9px;display:grid;place-items:center;background:#f1edff;color:#6942dc;font-weight:950}.race-option.selected-wrong{background:#fff0f0!important;border-color:#ef4444!important;color:#991b1b}.race-option.selected-correct,.race-option.correct-answer{background:#ecfdf3!important;border-color:#22c55e!important;color:#166534}.race-option.disabled{cursor:default;transform:none}.answer-feedback{margin-top:15px;border-radius:15px;padding:12px 14px;font-weight:900}.answer-feedback.correct{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0}.answer-feedback.wrong{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}.race-explanation{margin-top:10px;border-left:4px solid #7c5cff;background:#f7f5ff;border-radius:0 14px 14px 0;padding:12px 14px;color:#4b5563;line-height:1.55}.race-explanation strong{color:#6d3df2}.next-btn{max-width:260px;margin-left:auto}.live-strip{display:flex;gap:8px;align-items:center;margin-top:16px;padding:10px 12px;border-radius:12px;background:#f7f8fc;color:#687083;font-size:12px}.result-card{text-align:center}.result-trophy{margin:0 auto 10px}.result-card h2{font-size:32px;margin:0 0 5px}.result-card p{color:var(--y-muted)}.result-players{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin-top:20px}.result-player{padding:18px;border-radius:19px;background:linear-gradient(145deg,#fff,#f8f6ff);border:1px solid var(--y-border)}.result-player.me{border:2px solid #8b6cf5}.result-player h3{margin:0 0 12px;font-size:18px}.result-score{font-size:34px;font-weight:1000;color:#6d3df2}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.result-stat{padding:9px;border-radius:11px;background:#f5f6fa;text-align:center}.result-stat b{display:block;font-size:18px}.result-stat span{font-size:10px;color:#778094}.result-actions{display:flex;gap:10px;margin-top:18px}.result-actions>*{flex:1}.yaris-login-card{text-align:center;max-width:520px;margin:80px auto}.yaris-login-card .yaris-primary,.yaris-login-card .yaris-secondary{max-width:330px;margin-left:auto;margin-right:auto}.yaris-login-card p{color:var(--y-muted)}
@media(max-width:700px){body{background-attachment:scroll}.yaris-page{padding:10px 10px 28px}.yaris-header{gap:7px}.yaris-brand{font-size:16px}.yaris-brand-icon{width:34px;height:34px}.yaris-user-pill{max-width:105px;overflow:hidden;text-overflow:ellipsis}.yaris-card{padding:15px;border-radius:20px}.yaris-lobby-grid,.result-players{grid-template-columns:1fr}.players-grid{grid-template-columns:1fr;gap:9px}.versus{font-size:16px}.room-top{align-items:flex-start;flex-direction:column}.room-code-box{width:100%;justify-content:center}.room-actions,.result-actions{flex-direction:column}.game-head{grid-template-columns:1fr auto;}.opponent-live{grid-column:1/-1;text-align:left}.race-question{font-size:20px}.race-option{font-size:15px}.result-score{font-size:29px}.result-stats{grid-template-columns:repeat(3,1fr)}}

.race-category-info{margin:-6px 0 14px;padding:9px 12px;border-radius:12px;background:rgba(110,70,240,.08);font-size:.9rem;font-weight:700;color:#5b3bd3}
.yaris-input option:disabled{color:#999}
#race-count option:disabled{color:#aaa}
#create-race-btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.2)}