@import "https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap";*{box-sizing:border-box}body{background:#12072b;margin:0;font-family:Nunito,sans-serif}button,input{font-family:inherit}.brand-header{justify-content:center;align-items:center;margin-bottom:16px;display:flex}.brand-logo{object-fit:contain;filter:drop-shadow(0 0 18px #4cc9f073);border-radius:50%;width:82px;height:82px;animation:3.5s ease-in-out infinite logoFloat}.brand-hero .brand-logo{width:180px;height:180px}.brand-small .brand-logo{width:86px;height:86px}.brand-game .brand-logo{width:58px;height:58px}.final-logo{object-fit:contain;filter:drop-shadow(0 0 18px #4cc9f073);border-radius:50%;width:96px;height:96px;margin-bottom:10px}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.landing{color:#dfd9d9;text-align:center;background:linear-gradient(135deg,#3a0ca3 0%,#31074d 50%,#1d3557 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.gradient-line{background:linear-gradient(90deg,#4cc9f0,#0674a7,#b11ef0);border-radius:10px;width:200px;height:8px;margin:5px 0 28px}.subtitle{opacity:.92;max-width:760px;margin:0 0 60px;font-size:26px;line-height:1.5}.buttons{gap:30px;margin-bottom:35px;display:flex}.primary,.secondary,.btn-continue,.btn-back-outline,.copy-room-btn,.room-mode-btn{transition:all .25s}.primary{cursor:pointer;color:#fff;background:linear-gradient(90deg,#4cc9f0,#b5179e);border:none;border-radius:50px;padding:16px 50px;font-size:26px}.primary:hover{opacity:.92;transform:scale(1.03)}.primary:disabled,.btn-continue:disabled{opacity:.55;cursor:not-allowed;transform:none}.secondary{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff6;border-radius:50px;padding:16px 44px;font-size:26px}.secondary:hover{background:#ffffff1a}.camera-screen{color:#fff;text-align:center;background:linear-gradient(135deg,#1a0b3a,#2a0f5a,#0f1a3a);flex-direction:column;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.camera-title{color:#0000;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#4cc9f0,#b5179e);-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-size:58px;font-weight:800}.camera-subtitle{opacity:.82;max-width:900px;margin:0 0 42px;font-size:24px;line-height:1.4}.setup-panel{text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:15px;width:950px;max-width:90%;margin-bottom:30px;padding:30px}.setup-panel h3{color:#4cc9f0;margin:0 0 20px;font-size:28px}.setup-list{margin:0;padding:0;list-style:none}.setup-list li{margin-bottom:12px;font-size:20px;line-height:1.4}.action-buttons{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.btn-continue{color:#fff;cursor:pointer;background:linear-gradient(90deg,#4cc9f0,#b5179e);border:none;border-radius:12px;padding:15px 48px;font-size:22px;font-weight:700}.btn-continue:hover{transform:translateY(-2px);box-shadow:0 0 18px #4cc9f047}.btn-back-outline{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff6;border-radius:12px;padding:15px 40px;font-size:22px}.btn-back-outline:hover{background:#ffffff14}.back{color:#ffffffc7;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50px;align-self:flex-start;align-items:center;gap:8px;margin:0 0 20px;padding:10px 20px;font-size:14px;font-weight:700;display:flex}.back:hover{color:#fff;background:#ffffff26;border-color:#4cc9f0;transform:translate(-5px);box-shadow:0 0 15px #4cc9f04d}.back:before{content:"←";font-size:18px}.step-card{text-align:center;background:#ffffff08;border:1px solid #4cc9f033;border-radius:20px;padding:30px;transition:transform .3s}.step-card:hover{background:#ffffff12;border-color:#4cc9f0;transform:translateY(-10px)}.step-number{color:#b5179e;margin-bottom:15px;font-family:Courier New,Courier,monospace;font-size:40px;font-weight:800}.step-card h4{color:#4cc9f0;margin:0 0 15px;font-size:24px}.step-card p{opacity:.86;margin:0;font-size:17px;line-height:1.6}.nick-input{color:#fff;text-align:center;background:#ffffff0d;border:2px solid #4cc9f0;border-radius:12px;outline:none;width:100%;padding:15px;font-size:20px;display:block}.nick-input:focus{box-shadow:0 0 15px #4cc9f066}.room-setup-panel{max-width:92%}.room-mode-switch{gap:12px;margin-bottom:18px;display:flex}.room-mode-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff2e;border-radius:12px;flex:1;padding:14px 18px;font-size:18px}.room-mode-btn:hover{background:#ffffff1f}.room-mode-btn-active{background:linear-gradient(90deg,#4cc9f0,#b5179e);border-color:#0000}.room-help-text{color:#ffffffb8;margin-top:10px;font-size:14px}.lobby-panel-real{text-align:left}.lobby-top-row{justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;display:flex}.lobby-room-label{letter-spacing:1px;color:#ffffffa6;font-size:13px}.lobby-room-code{color:#4cc9f0;margin-top:4px;font-size:30px;font-weight:800}.copy-room-btn{color:#fff;cursor:pointer;background:#4cc9f014;border:1px solid #4cc9f04d;border-radius:12px;padding:12px 20px}.copy-room-btn:hover{background:#4cc9f029}.lobby-stats-row{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;display:grid}.lobby-stat-card{text-align:center;background:#ffffff0d;border:1px solid #ffffff14;border-radius:14px;padding:18px}.lobby-stat-number{color:#4cc9f0;font-size:28px;font-weight:800;display:block}.lobby-stat-label{color:#ffffffb8;margin-top:6px;font-size:14px;display:block}.player-list{flex-direction:column;gap:15px;display:flex}.player-card-real{background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.player-card-you{background:#4cc9f01a;border-color:#4cc9f059}.player-card-ready{box-shadow:inset 0 0 0 1px #53ff9238}.player-card-offline{opacity:.55}.player-card-name{color:#fff;font-size:18px;font-weight:700}.player-card-status{color:#ffffffb8;font-size:15px}.start-match-btn-live{background:linear-gradient(90deg,#4cc9f0,#b5179e);box-shadow:0 0 18px #4cc9f040}.start-match-btn-wait{opacity:.92;background:linear-gradient(90deg,#4a4a6a,#6d527d)}.camera-box{aspect-ratio:16/9;background:#0a0a20;border:2px solid #4cc9f080;border-radius:15px;width:950px;max-width:90%;margin-bottom:40px;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000080}.video-feed{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.overlay-canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.calibration-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#0a0a20b3;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.progress-container{width:500px;max-width:80%;margin-top:30px}.progress-bar-bg{background:#ffffff1a;border-radius:20px;width:100%;height:12px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#4cc9f0,#b5179e);height:100%;transition:width .3s}.percentage{color:#4cc9f0;margin-top:15px;font-size:32px;font-weight:700}.loader-ring{border:5px solid #4cc9f033;border-top-color:#4cc9f0;border-radius:50%;width:80px;height:80px;animation:1s linear infinite spin}.compact-game-screen{padding-top:20px}.game-main-layout{align-items:center;gap:20px;display:flex}.video-instruction{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;background:#0a0a1e9e;border:1px solid #4cc9f059;border-radius:14px;padding:12px 16px;position:absolute;top:12px;left:12px;right:12px}.video-instruction-title{color:#fff;text-shadow:0 0 12px #00000059;font-size:24px;font-weight:800}.video-instruction-sub{opacity:.92;color:#dfe8ff;margin-top:4px;font-size:13px}.animated-instruction{animation:.6s instructionPulse}.video-score-bottom{z-index:30;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0a209e;border:1px solid #4cc9f038;border-radius:14px;padding:10px 12px;position:absolute;bottom:14px;left:14px;right:14px}.video-score-label{color:#eef3ff;margin-bottom:8px;font-size:14px;font-weight:700}.video-score-bar-bg{background:#ffffff14;border-radius:999px;height:12px;overflow:hidden}.video-score-bar-fill{background:linear-gradient(90deg,#4cc9f0,#b5179e);border-radius:999px;height:100%;transition:width .35s;box-shadow:0 0 18px #4cc9f059}.detected-badge{z-index:35;color:#fff;letter-spacing:1px;background:linear-gradient(90deg,#4cc9f0,#b5179e);border-radius:999px;padding:12px 18px;font-weight:800;animation:.45s popGlow;position:absolute;top:auto;bottom:92px;right:20px;box-shadow:0 0 25px #4cc9f099}.detect-flash:after{content:"";pointer-events:none;background:radial-gradient(circle,#4cc9f047 0%,#b5179e29 35%,#0000 70%);animation:.45s flashPulse;position:absolute;inset:0}.detect-wave:before{content:"";pointer-events:none;border:2px solid #4cc9f0bf;border-radius:18px;animation:.6s waveExpand;position:absolute;inset:20px}.side-streak-panel{flex-direction:column;justify-content:center;align-items:center;gap:14px;width:120px;height:480px;display:flex}.streak-title{color:#cfd8ff;font-size:16px;font-weight:700}.streak-bar-bg{background:#ffffff14;border-radius:20px;align-items:flex-end;width:30px;height:300px;display:flex;overflow:hidden}.streak-bar-fill{background:linear-gradient(#4cc9f0,#b5179e);width:100%;transition:height .3s;box-shadow:0 0 20px #4cc9f066}.streak-level{color:#fff;font-size:18px;font-weight:700}.compact-panel{margin-top:16px;margin-bottom:0}.game-status-panel{text-align:left}.game-status-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;display:grid}.game-status-card{background:#ffffff0d;border:1px solid #ffffff14;border-radius:14px;padding:16px}.game-status-label{color:#ffffffa6;margin-bottom:8px;font-size:13px;display:block}.game-status-value{color:#fff;font-size:20px;font-weight:800;display:block}.game-player-status-list{gap:10px;display:grid}.game-player-status-item{background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.game-player-status-you{background:#4cc9f01a;border-color:#4cc9f059}.game-player-status-away{opacity:.72;border-color:#ffd27f4d}.game-player-status-main{flex-direction:column;gap:4px;display:flex}.game-player-name{color:#fff;font-size:17px;font-weight:700}.game-player-presence{color:#ffffffb3;font-size:14px}.game-player-score-text{color:#4cc9f0;font-size:18px;font-weight:800}.round-banner{color:#ffd27f;margin-top:12px;font-size:18px;font-weight:700}.final-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#050512b8;place-items:center;display:grid;position:fixed;inset:0}.final-card{text-align:center;background:linear-gradient(135deg,#1a0b3af2,#2a0f5af2,#0f1a3af2);border:1px solid #4cc9f038;border-radius:24px;width:min(700px,90vw);padding:32px;box-shadow:0 25px 70px #00000073}.final-card h2{color:#d7dbff;margin:0}.final-card h1{color:#0000;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#4cc9f0,#b5179e);-webkit-background-clip:text;background-clip:text;margin:12px 0 6px;font-size:54px}.final-ranking{gap:10px;margin:24px 0;display:grid}.final-row{text-align:left;background:#ffffff0d;border-radius:14px;grid-template-columns:60px 1fr 90px;align-items:center;gap:12px;padding:12px 16px;display:grid}.reconnect-banner{color:#ffe7b5;text-align:center;background:#ffd27f24;border:1px solid #ffd27f59;border-radius:14px;width:min(900px,90vw);margin-bottom:18px;padding:12px 18px;font-weight:700;box-shadow:0 0 18px #ffd27f1f}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes instructionPulse{0%{opacity:0;transform:scale(.84)}60%{opacity:1;transform:scale(1.03)}to{transform:scale(1)}}@keyframes flashPulse{0%{opacity:0}25%{opacity:1}to{opacity:0}}@keyframes waveExpand{0%{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.08)}}@keyframes popGlow{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (width<=1000px){.game-main-layout{flex-direction:column}.side-streak-panel{flex-direction:row;justify-content:center;width:min(950px,90%);height:auto}.streak-bar-bg{align-items:stretch;width:220px;height:28px}.streak-bar-fill{height:100%!important}}@media (width<=900px){.lobby-top-row,.lobby-stats-row,.room-mode-switch,.game-status-grid{grid-template-columns:1fr;display:grid}.lobby-top-row{justify-content:stretch}.game-player-status-item{flex-direction:column;align-items:flex-start;gap:8px}.camera-title{font-size:42px}.camera-subtitle,.subtitle{font-size:20px}.buttons{flex-direction:column}.brand-hero .brand-logo{width:135px;height:135px}}@media (width<=600px){.primary,.secondary,.btn-continue,.btn-back-outline{width:100%;padding:14px 22px;font-size:18px}.camera-box,.setup-panel{max-width:96%}.video-instruction-title{font-size:18px}.detected-badge{padding:9px 13px;font-size:12px;bottom:84px;right:12px}}.landing-logo{object-fit:contain;filter:drop-shadow(0 0 30px #4cc9f099);border-radius:50%;width:310px;height:310px;margin-bottom:55px;animation:3.5s ease-in-out infinite logoFloat}.landing-buttons{margin-top:0}