*{box-sizing:border-box;margin:0;padding:0}html,body,#root,.app{background:#0b0614;width:100%;height:100%;overflow:hidden}body{color:#ece6ff;-webkit-user-select:none;user-select:none;font-family:Avenir Next,Segoe UI,system-ui,sans-serif}.app{position:relative}canvas{display:block}.hud{pointer-events:none;position:absolute;inset:0}.hidden-video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.overlay{text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;background:radial-gradient(at 50% 40%,#140a288c,#080412eb);flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:24px;animation:.6s both fadeIn;display:flex;position:absolute;inset:0}@keyframes fadeIn{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.eyebrow{letter-spacing:.45em;color:#9d8fd4;font-size:12px}.overlay h1{letter-spacing:.06em;background:linear-gradient(120deg,#8ad8ff 0%,#b88bff 45%,#ff8bd8 100%);color:#0000;filter:drop-shadow(0 0 26px #8c64ff73);-webkit-background-clip:text;background-clip:text;font-size:clamp(48px,9vw,96px);font-weight:800;line-height:.95}.overlay h1 span{letter-spacing:.5em;font-size:.55em;display:block}.tagline{color:#b6abdf;max-width:520px;font-size:15px;line-height:1.6}.gesture-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;width:min(760px,92vw);display:grid}.gesture-card{text-align:left;background:#1e123a80;border:1px solid #9678ff38;border-radius:14px;align-items:center;gap:12px;padding:12px 14px;transition:border-color .25s,transform .25s;display:flex}.gesture-card:hover{border-color:#aa8cff99;transform:translateY(-2px)}.g-icon{font-size:26px}.gesture-card strong{letter-spacing:.06em;font-size:13px;display:block}.gesture-card small{color:#9d8fd4;font-size:12px}.cta{pointer-events:auto;cursor:pointer;font:inherit;letter-spacing:.3em;color:#0b0614;background:linear-gradient(120deg,#8ad8ff,#b88bff);border:none;border-radius:999px;padding:16px 44px;font-size:15px;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 0 34px #8c6eff8c}.cta:hover:not(:disabled){transform:translateY(-2px)scale(1.03);box-shadow:0 0 48px #9678ffcc}.cta:disabled{opacity:.6;cursor:wait}.error{color:#ff8f9e;max-width:420px;font-size:13px}.best{color:#8f83c9;letter-spacing:.15em;font-size:13px}.go-title{background:linear-gradient(120deg,#ff8b8b,#ff8bd8)!important;-webkit-background-clip:text!important;background-clip:text!important}.stats{gap:34px;display:flex}.stats small{letter-spacing:.25em;color:#9d8fd4;margin-bottom:6px;font-size:11px;display:block}.stats strong{font-size:30px;font-weight:800}.topbar{justify-content:space-between;align-items:flex-start;padding:20px 26px;display:flex;position:absolute;top:0;left:0;right:0}.bars{width:min(340px,38vw)}.bar-label{letter-spacing:.35em;color:#b6abdf;margin:6px 0 4px;font-size:10px}.bar{background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;height:12px;overflow:hidden}.bar>div{border-radius:inherit;height:100%;transition:width .25s}.bar.health>div{background:linear-gradient(90deg,#ff5f6d,#ffc371);box-shadow:0 0 12px #ff6e6eb3}.bar.energy>div{background:linear-gradient(90deg,#4dd8ff,#b26bff);box-shadow:0 0 12px #78a0ffb3}.bar.energy.full{border-color:#dcbeffd9;animation:1s ease-in-out infinite ultPulse}@keyframes ultPulse{50%{box-shadow:0 0 22px #be96ffe6}}.bar.energy.low{border-color:#ff6e82e6;animation:.3s manaShake}@keyframes manaShake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.legend{letter-spacing:.12em;color:#dcd2ff8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#10082273;border:1px solid #9678ff2e;border-radius:999px;gap:18px;padding:8px 18px;font-size:12px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.ult-ready{letter-spacing:.25em;color:#e3d2ff;text-shadow:0 0 14px #be96ff;margin-top:6px;font-size:11px;animation:1s ease-in-out infinite ultPulse}.score-block{text-align:right}.score{letter-spacing:.04em;text-shadow:0 0 22px #8cbeff99;font-variant-numeric:tabular-nums;font-size:40px;font-weight:800}.combo{letter-spacing:.2em;color:#ffd76b;text-shadow:0 0 16px #ffbe50cc;font-size:17px;font-weight:700;animation:.3s both comboPop}@keyframes comboPop{0%{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}.announce{letter-spacing:.3em;white-space:nowrap;color:#f2ecff;text-shadow:0 0 30px #9678ffe6;font-size:clamp(22px,4vw,40px);font-weight:800;animation:.35s cubic-bezier(.2,1.4,.4,1) both announceIn;position:absolute;top:22%;left:50%;transform:translate(-50%)}@keyframes announceIn{0%{opacity:0;transform:translate(-50%)scale(2)}to{opacity:1;transform:translate(-50%)scale(1)}}.ult-charge{background:#ffffff1a;border:1px solid #dcbeff80;border-radius:999px;width:260px;height:8px;position:absolute;bottom:14%;left:50%;overflow:hidden;transform:translate(-50%)}.ult-charge>div{background:linear-gradient(90deg,#fff,#d6a8ff);height:100%;box-shadow:0 0 18px #d6a8ff}.hit-flash{background:radial-gradient(#0000 40%,#ff1e328c);transition:opacity .1s;position:absolute;inset:0}.cam-preview{opacity:.9;border:1px solid #9678ff59;border-radius:14px;position:absolute;bottom:22px;right:22px;box-shadow:0 8px 30px #00000080}.hand-status{gap:10px;font-size:22px;display:flex;position:absolute;bottom:22px;left:26px}.hand-status span{opacity:.25;transition:opacity .2s}.hand-status span.on{opacity:1}@media (width<=700px){.cam-preview{width:140px;height:105px}.score{font-size:28px}}