@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;transition:all .25s}.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:640px;max-width:640px;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{flex-direction:column;align-items:center;padding-top:20px;display:flex}.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:#0a0a1ebf;border:1px solid #4cc9f059;border-radius:14px;width:640px;margin-bottom:10px;padding:12px 20px}.video-instruction-title{color:#fff;text-shadow:0 0 12px #00000059;font-size:34px;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:#0a0a2080;border:1px solid #4cc9f026;border-radius:10px;justify-content:space-between;align-items:center;padding:6px 14px;display:flex;position:absolute;bottom:8px;left:14px;right:14px}.video-score-name{color:#cfd8ff;font-size:13px;font-weight:600}.video-score-number{color:#4cc9f0;text-shadow:0 0 12px #4cc9f099;letter-spacing:1px;font-size:22px;font-weight:900}.animated-score{animation:.4s cubic-bezier(.175,.885,.32,1.275) scorePop}@keyframes scorePop{0%{opacity:.4;transform:scale(.7)}60%{opacity:1;transform:scale(1.25)}to{transform:scale(1)}}.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{will-change:height;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}}@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}.btn-ready-toggle.not-ready{color:#fff;box-shadow:0 0 15px #ff4d4d66;background:#ff4d4d!important}.btn-ready-toggle.is-ready{color:#12072b;font-weight:800;box-shadow:0 0 20px #00ff8880;background:#0f8!important}.btn-start-active{color:#12072b;font-weight:800;animation:1.5s infinite bluePulse;transform:scale(1.05);box-shadow:0 0 25px #4cc9f0cc;background:#4cc9f0!important}.streak-bar-fill{will-change:height, width}@keyframes bluePulse{0%,to{transform:scale(1.05);box-shadow:0 0 15px #4cc9f080}50%{transform:scale(1.08);box-shadow:0 0 35px #4cc9f0e6}}.streak-horizontal-panel{flex-direction:row;align-items:center;gap:12px;width:640px;margin:8px 0;display:flex}.streak-horizontal-panel .streak-title{color:#cfd8ff;white-space:nowrap;font-size:13px;font-weight:700}.streak-horizontal-panel .streak-level{color:#fff;white-space:nowrap;font-size:13px;font-weight:700}.streak-horizontal-panel .streak-bar-bg{background:#ffffff14;border-radius:20px;flex:1;align-items:flex-start;width:auto;height:10px;display:flex;overflow:hidden}.streak-horizontal-panel .streak-bar-fill{background:linear-gradient(90deg,#4cc9f0,#b5179e);height:100%;transition:width .3s;box-shadow:0 0 20px #4cc9f066}.btn-ready-active{color:#ffffff80!important;background:#4a4a6a!important;border:1.5px solid #ffffff26!important}.btn-subtle{color:#fff9;cursor:pointer;background:0 0;border:none;margin-top:16px;margin-left:auto;margin-right:auto;padding:6px 12px;font-size:.85rem;transition:color .2s;display:block}.btn-subtle:hover{color:#ffffffe6}@media (width<=768px),(pointer:coarse){html,body,#root{width:100%;max-width:100%;min-height:100dvh;overflow-x:hidden}body{background:#12072b}.landing,.camera-screen{min-height:100dvh;padding:14px 10px}.landing-logo{width:min(70vw,250px);height:min(70vw,250px);margin-bottom:34px}.buttons,.action-buttons{gap:12px;width:100%;max-width:96vw}.primary,.secondary,.btn-continue,.btn-back-outline,.copy-room-btn,.room-mode-btn{border-radius:14px;width:100%;min-height:48px;padding:13px 18px;font-size:17px}.btn-subtle{font-size:.9rem}.camera-title{margin-bottom:10px;font-size:clamp(30px,9vw,42px);line-height:1.05}.camera-subtitle{max-width:94vw;margin-bottom:22px;font-size:clamp(16px,4.8vw,20px);line-height:1.35}.setup-panel{border-radius:18px;max-width:96vw;padding:18px;width:100%!important}.setup-panel h3{font-size:22px}.setup-list li{font-size:16px}.nick-input{min-height:52px;font-size:18px}.room-setup-panel>div[style]{flex-direction:column!important}.back{margin-bottom:12px;padding:9px 16px;font-size:13px}.lobby-top-row{grid-template-columns:1fr;gap:14px;display:grid}.lobby-stats-row{grid-template-columns:1fr;display:grid}.lobby-room-code{word-break:break-word;font-size:24px}.player-card-real{flex-direction:column;align-items:flex-start;gap:6px}.step-card{padding:20px}.step-number{font-size:32px}.step-card h4{font-size:20px}.step-card p{font-size:15px}.camera-box{aspect-ratio:3/4;border-radius:22px;width:min(96vw,460px);max-width:96vw;margin-bottom:22px}.video-feed{object-fit:cover;transform:scaleX(-1)}.overlay-canvas{width:100%;height:100%}.calibration-overlay{padding:18px}.loader-ring{width:58px;height:58px}.progress-container{width:100%;max-width:82vw}.percentage{font-size:26px}.compact-game-screen{padding:10px 8px 16px}.video-instruction{border-radius:16px;width:min(96vw,460px);max-width:96vw;margin-bottom:8px;padding:10px 12px}.video-instruction-title{font-size:clamp(20px,6vw,28px);line-height:1.15}.video-instruction-sub{font-size:12px}.game-main-layout{justify-content:center;gap:10px;width:100%}.compact-game-screen .camera-box{aspect-ratio:3/4;width:min(96vw,430px);margin-bottom:10px}.video-score-bottom{padding:7px 10px;bottom:8px;left:10px;right:10px}.video-score-name{font-size:12px}.video-score-number{font-size:18px}.detected-badge{padding:8px 11px;font-size:11px;bottom:70px;right:12px}.streak-horizontal-panel{gap:8px;width:min(96vw,430px);max-width:96vw;margin:6px 0 10px}.streak-horizontal-panel .streak-title,.streak-horizontal-panel .streak-level{font-size:12px}.streak-horizontal-panel .streak-bar-bg{height:9px}.compact-panel{margin-top:10px;width:96vw!important}.game-status-panel h2{margin-top:0!important;font-size:20px!important}.game-status-panel>div:first-child{flex-direction:column;gap:8px;align-items:flex-start!important}.game-status-grid{grid-template-columns:1fr;gap:10px}.game-status-card{padding:12px}.game-status-label{font-size:12px}.game-status-value{font-size:16px}.game-player-status-item{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.game-player-name{font-size:15px}.game-player-presence{font-size:13px}.game-player-score-text{font-size:16px}.round-banner{font-size:15px}.final-card{border-radius:22px;width:92vw;padding:22px}.final-card h1{font-size:clamp(32px,9vw,46px)}.final-row{grid-template-columns:42px 1fr 64px;padding:10px 12px}.reconnect-banner{width:96vw;padding:10px 12px;font-size:14px}}@media (width<=768px) and (orientation:landscape){.camera-screen{padding:10px}.camera-title{font-size:28px}.camera-subtitle{margin-bottom:12px;font-size:15px}.camera-box,.compact-game-screen .camera-box{aspect-ratio:16/9;width:min(72vw,560px)}.video-instruction,.streak-horizontal-panel{width:min(72vw,560px)}.setup-panel,.compact-panel{width:96vw!important}}