*{margin:0;padding:0;box-sizing:border-box}:root{--green: #22c55e;--green-deep: #16a34a;--amber: #f59e0b;--red: #ef4444;--bg: #050b14;--panel: rgba(15, 23, 42, .65);--panel-strong: rgba(15, 23, 42, .92);--text: #f1f5f9;--text-dim: rgba(241, 245, 249, .7);--border: rgba(148, 163, 184, .18);--border-strong: rgba(148, 163, 184, .35)}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:var(--text);user-select:none;-webkit-user-select:none}#app{width:100vw;height:100vh;position:relative}#game-root{position:absolute;top:0;right:0;bottom:0;left:0}#game-aim-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}canvas{display:block}.hidden{display:none!important}.dim{color:var(--text-dim)}#webcam-preview{position:absolute;top:78px;right:16px;width:200px;height:150px;border-radius:12px;overflow:hidden;border:2px solid var(--border-strong);background:#000;z-index:10;box-shadow:0 8px 24px #0009}#webcam-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#webcam-overlay{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}.pose-badge{position:absolute;bottom:6px;left:6px;font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:4px;background:#000000b3;color:#fff;border:1px solid rgba(255,255,255,.18);pointer-events:none}.pose-badge.locked{background:#22c55ed9;border-color:#22c55e;box-shadow:0 0 12px #22c55e80}.pose-badge.waiting{background:#f59e0bb3;border-color:#f59e0be6}#match-topbar{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:11;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}#match-scoreboard{display:inline-flex;align-items:center;gap:10px;background:#0f172ad9;border:1px solid var(--border-strong);padding:8px 18px;border-radius:999px;font-size:18px;font-weight:800;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:auto;box-shadow:0 4px 20px #0006}.sb-side{display:inline-flex;align-items:center;gap:8px}.sb-side .sb-score{font-size:22px;font-weight:900;letter-spacing:-.02em;min-width:22px;text-align:center}.sb-divider{opacity:.5;font-weight:400}#match-roundlabel{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--text-dim);text-shadow:0 2px 4px rgba(0,0,0,.7);pointer-events:auto}#match-menu-btn{position:fixed;top:16px;left:16px;background:#0f172acc;border:1px solid var(--border-strong);color:var(--text);font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.1em;padding:8px 16px;border-radius:999px;cursor:pointer;pointer-events:auto;z-index:20;transition:background .15s,transform .15s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#match-menu-btn:hover{background:#1e293bf2;transform:translateY(-1px)}.topbar-btn{pointer-events:auto}#power-bar{position:absolute;bottom:32px;left:50%;transform:translate(-50%);width:340px;height:10px;background:#ffffff26;border-radius:5px;overflow:hidden;z-index:10;box-shadow:inset 0 1px 2px #00000080}#power-bar-fill{height:100%;background:linear-gradient(90deg,var(--green) 0%,var(--amber) 55%,var(--red) 100%);width:0%;transition:width .08s ease-out}#status-prompt{position:absolute;bottom:78px;left:50%;transform:translate(-50%);z-index:10;font-size:22px;font-weight:700;padding:14px 28px;background:#0000008c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;text-shadow:0 2px 4px rgba(0,0,0,.5);text-align:center;white-space:nowrap;border:1px solid var(--border)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:100;background:radial-gradient(ellipse at center,#080d1cd9,#020617f5);padding:24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow-y:auto}.overlay.compact-overlay{background:#020617bf}.overlay-content{text-align:center;max-width:560px}.overlay-content h1{font-size:52px;font-weight:900;margin-bottom:16px;letter-spacing:-.02em;background:linear-gradient(135deg,var(--green) 0%,#34d399 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.overlay-content p{font-size:17px;line-height:1.6;margin-bottom:24px;color:var(--text-dim)}.overlay-card{text-align:center;max-width:560px;width:100%;background:var(--panel-strong);border:1px solid var(--border-strong);border-radius:24px;padding:36px 32px;box-shadow:0 24px 60px #00000080}.overlay-card.wide{max-width:760px}.overlay-card.narrow{max-width:420px}.card-eyebrow{font-size:11px;font-weight:800;letter-spacing:.3em;color:var(--green);margin-bottom:6px}.overlay-card-title{font-size:32px;font-weight:900;margin-bottom:20px;letter-spacing:-.02em}.overlay-card-sub{font-size:15px;color:var(--text-dim);margin-top:-10px;margin-bottom:22px}.overlay-card-actions{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:24px}.link-btn{background:transparent;border:none;color:var(--text-dim);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:8px;transition:color .15s,background .15s}.link-btn:hover{color:var(--text);background:#ffffff0d}.title-screen{text-align:center;max-width:760px;width:100%;display:flex;flex-direction:column;align-items:center;gap:30px}.title-block{display:flex;flex-direction:column;align-items:center;gap:6px}.title-tag{font-size:12px;font-weight:800;letter-spacing:.3em;color:var(--green);background:#22c55e1f;padding:6px 14px;border-radius:999px;border:1px solid rgba(34,197,94,.35)}.game-title{font-size:clamp(54px,10vw,120px);font-weight:900;letter-spacing:-.04em;line-height:.95;background:linear-gradient(135deg,#f1f5f9,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-accent{background:linear-gradient(135deg,var(--green) 0%,#34d399 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-left:.15em;text-shadow:0 0 80px rgba(34,197,94,.6)}.game-tagline{font-size:16px;font-weight:500;color:var(--text-dim);letter-spacing:.04em}.main-menu-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:460px}.menu-btn{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 16px;background:var(--panel);border:1.5px solid var(--border);border-radius:14px;padding:18px 24px;cursor:pointer;color:var(--text);font-family:inherit;text-align:left;transition:transform .15s,border-color .15s,background .15s}.menu-btn:hover{border-color:var(--border-strong);background:#0f172ad9;transform:translateY(-2px)}.menu-btn.primary{border-color:var(--green);background:linear-gradient(135deg,#22c55e2e,#16a34a1f);box-shadow:0 0 30px #22c55e33}.menu-btn.primary:hover{background:linear-gradient(135deg,#22c55e47,#16a34a33);box-shadow:0 8px 40px #22c55e59}.menu-btn-icon{grid-row:1 / 3;font-size:26px;display:flex;align-items:center;justify-content:center}.menu-btn-label{font-size:18px;font-weight:800;letter-spacing:.04em}.menu-btn-desc{font-size:13px;color:var(--text-dim)}.footnote{font-size:12px!important;color:var(--text-dim)!important;margin:0!important;letter-spacing:.05em}.big-card-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}.big-card{flex:1 1 220px;max-width:280px;background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:24px 20px;cursor:pointer;color:var(--text);font-family:inherit;text-align:center;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}.big-card:hover{border-color:var(--green);background:#22c55e1a;transform:translateY(-3px);box-shadow:0 12px 40px #22c55e33}.big-card-icon{font-size:44px;margin-bottom:8px}.big-card-name{font-size:20px;font-weight:900;letter-spacing:.05em;margin-bottom:4px}.big-card-desc{font-size:13px;color:var(--text-dim);line-height:1.4}.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:50vh;overflow-y:auto;padding:14px 8px;background:#0000004d;border-radius:12px;border:1px solid var(--border);margin-bottom:20px}.country-card{display:flex;flex-direction:column;align-items:center;padding:12px 8px;background:#0f172a99;border:1.5px solid transparent;border-radius:10px;cursor:pointer;font-family:inherit;color:var(--text);gap:6px;transition:transform .1s,background .1s,border-color .1s}.country-card:hover{background:#0f172ae6;border-color:var(--border-strong);transform:translateY(-1px)}.country-card.selected{border-color:var(--green);background:#22c55e26;box-shadow:0 0 0 1px var(--green)}.country-flag{font-size:32px;line-height:1}.country-name{font-size:12px;font-weight:700;text-align:center}.country-strength{font-size:10px;color:var(--text-dim);letter-spacing:.06em}#bracket-display{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.bracket-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0f172a80;border:1px solid var(--border);border-radius:10px;font-size:14px}.bracket-row.current{border-color:var(--green);background:#22c55e1f;box-shadow:0 0 0 1px var(--green)}.bracket-row.done{opacity:.7}.bracket-round-label{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--text-dim);min-width:90px}.bracket-result{font-weight:800;font-size:15px}.bracket-result.win{color:var(--green)}.bracket-result.loss{color:var(--red)}.next-match-card{background:linear-gradient(135deg,#22c55e26,#16a34a14);border:1.5px solid var(--green);border-radius:14px;padding:20px;margin-top:8px}.next-match-label{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--green);margin-bottom:12px}.next-match-versus{display:flex;align-items:center;justify-content:center;gap:18px}.versus-side{display:flex;flex-direction:column;align-items:center;gap:4px}.versus-flag{font-size:44px;line-height:1}.versus-name{font-size:14px;font-weight:800;letter-spacing:.05em}.versus-vs{font-size:18px;font-weight:900;color:var(--text-dim)}.setting-section{margin-bottom:22px;display:flex;flex-direction:column;align-items:center;gap:10px}.setup-label{font-size:11px;font-weight:800;letter-spacing:.25em;color:var(--text-dim)}.card-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}.card{background:var(--panel);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;color:var(--text);font-family:inherit;text-align:left;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:flex;flex-direction:column;gap:4px;min-width:140px}.card:hover{border-color:var(--border-strong);background:#0f172ad9;transform:translateY(-2px)}.card.selected{border-color:var(--green);background:#22c55e1f;box-shadow:0 0 0 1px var(--green),0 0 20px #22c55e33}.mode-card{flex:1 1 220px;max-width:240px}.card-icon{font-size:26px;margin-bottom:2px}.card-title{font-size:15px;font-weight:700}.card-desc{font-size:12px;color:var(--text-dim);line-height:1.4}.diff-card{text-align:center;align-items:center;flex:1 1 100px;max-width:140px;padding:12px 18px}.diff-name{font-size:15px;font-weight:800;letter-spacing:.06em}.toggle-row{display:flex;justify-content:center;width:100%}.toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:600}.toggle input{display:none}.toggle-slider{position:relative;display:inline-block;width:44px;height:24px;background:#ffffff26;border-radius:999px;transition:background .2s}.toggle-slider:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}.toggle input:checked+.toggle-slider{background:var(--green)}.toggle input:checked+.toggle-slider:before{transform:translate(20px)}.toggle-helper{font-size:12px!important;color:var(--text-dim)!important;text-align:center;margin:4px 0 0!important}.toggle-helper code{background:#ffffff0f;padding:1px 6px;border-radius:4px;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#e2e8f0}#tutorial-overlay h2{font-size:32px;font-weight:900;margin-bottom:16px;letter-spacing:-.02em}#tutorial-visual{margin:0 auto 20px;width:220px;height:220px;display:flex;align-items:center;justify-content:center}#tutorial-visual svg{width:100%;height:100%}.tutorial-steps{text-align:left;list-style:none;padding:0;margin:0 0 8px;counter-reset:step}.tutorial-steps li{position:relative;padding:8px 0 8px 38px;font-size:14px;line-height:1.5;color:var(--text-dim);counter-increment:step}.tutorial-steps li:before{content:counter(step);position:absolute;left:0;top:7px;width:26px;height:26px;background:#22c55e26;color:var(--green);border:1px solid rgba(34,197,94,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.tutorial-steps strong{color:var(--text);font-weight:700}.green-pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;background:#22c55e2e;color:#34d399;border:1px solid rgba(34,197,94,.4);border-radius:999px;letter-spacing:.08em}@keyframes kick-swing{0%,18%{transform:rotate(0)}44%{transform:rotate(82deg)}60%{transform:rotate(68deg)}to{transform:rotate(0)}}@keyframes flick-swing{0%,15%{transform:rotate(0)}48%{transform:rotate(88deg)}to{transform:rotate(0)}}.demo-finger-kick,.demo-finger-flick{transform-box:fill-box;transform-origin:50% 0%}.demo-finger-kick{animation:kick-swing 2.4s ease-in-out infinite}.demo-finger-flick{animation:flick-swing 2s ease-in-out infinite}#result-banner{position:absolute;top:28%;left:50%;transform:translate(-50%);z-index:50;font-size:clamp(80px,12vw,130px);font-weight:900;padding:16px 60px;border-radius:24px;text-shadow:0 6px 24px rgba(0,0,0,.8);animation:pop .5s cubic-bezier(.34,1.56,.64,1);letter-spacing:-.03em;pointer-events:none}@keyframes pop{0%{transform:translate(-50%) scale(0);opacity:0}80%{transform:translate(-50%) scale(1.1);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}.goal{color:var(--green);text-shadow:0 0 50px rgba(34,197,94,.8),0 6px 24px rgba(0,0,0,.8)}.save{color:var(--red);text-shadow:0 0 50px rgba(239,68,68,.8),0 6px 24px rgba(0,0,0,.8)}.miss{color:var(--amber);text-shadow:0 0 50px rgba(245,158,11,.8),0 6px 24px rgba(0,0,0,.8)}.opp-shot-content{text-align:center;background:var(--panel-strong);border:1px solid var(--border-strong);border-radius:20px;padding:28px 36px;box-shadow:0 20px 50px #0009;min-width:320px;animation:pop-in .3s ease-out}@keyframes pop-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.opp-shot-flag{font-size:60px;margin-bottom:8px}.opp-shot-name{font-size:22px;font-weight:900;letter-spacing:.04em;margin-bottom:4px}.opp-shot-type{font-size:11px;font-weight:700;letter-spacing:.25em;color:var(--text-dim);margin-bottom:16px}.opp-shot-result{font-size:38px;font-weight:900;letter-spacing:.04em}.opp-shot-result.goal{color:var(--green)}.opp-shot-result.miss{color:var(--amber)}.opp-shot-result.save{color:var(--red)}.match-result-banner{font-size:12px;font-weight:800;letter-spacing:.3em;color:var(--green);margin-bottom:6px}#match-result-title{font-size:36px;font-weight:900;margin-bottom:16px;letter-spacing:-.02em}.match-result-score{display:flex;align-items:center;justify-content:center;gap:14px;font-size:22px;font-weight:800;margin:20px 0}.mr-side{display:inline-flex;align-items:center;gap:8px}.mr-score{font-size:38px;font-weight:900;letter-spacing:-.02em;min-width:32px;text-align:center}.mr-vs{font-size:22px;opacity:.6}#match-result-summary{font-size:15px;color:var(--text-dim);margin-bottom:8px}.tournament-end-emoji{font-size:100px;margin-bottom:12px;animation:bounce 1.5s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}#tournament-end-title{font-size:40px;font-weight:900;letter-spacing:-.02em;margin-bottom:12px;background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#tournament-end-summary{font-size:15px;color:var(--text-dim);margin-bottom:8px}#calibration-progress{width:240px;height:6px;background:#ffffff26;border-radius:3px;margin:28px auto 16px;overflow:hidden}#calibration-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),#34d399);width:0%;transition:width .1s linear}.btn{background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);color:#fff;border:none;padding:16px 40px;font-family:inherit;font-size:17px;font-weight:800;letter-spacing:.04em;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;box-shadow:0 8px 24px #22c55e66}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #22c55e8c}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--green);border-radius:50%;animation:spin .9s linear infinite;margin:12px auto 0}@keyframes spin{to{transform:rotate(360deg)}}