:root{--nf-bg:#070712;--nf-primary:#7c3aed;--nf-primary2:#9333ea;--nf-pink:#f43f5e;--nf-green:#10b981;--nf-gold:#f59e0b;--nf-text:#f0f4ff;--nf-muted:#64748b;--nf-glass:#ffffff0a;--nf-ease:cubic-bezier(.16, 1, .3, 1)}.nf-root{z-index:9999;isolation:isolate;-webkit-user-select:none;user-select:none;background:radial-gradient(80% 60% at 50% 90%,#7c3aed38 0%,#0000 70%),radial-gradient(50% 40% at 15% 40%,#f43f5e24 0%,#0000 60%),radial-gradient(50% 40% at 85% 40%,#7c3aed1f 0%,#0000 60%),linear-gradient(#070712 0%,#0c0820 50%,#100d26 100%);flex-direction:column;font-family:Russo One,Chakra Petch,system-ui,sans-serif;display:flex;position:fixed;inset:0;overflow:hidden}.nf-bg-layer{z-index:0;pointer-events:none;perspective:1200px;position:absolute;inset:0;overflow:hidden}.nf-bg-char{width:clamp(340px,42vw,620px);position:absolute;bottom:8%}.nf-bg-char img{object-fit:contain;width:100%;height:auto}.nf-bg-left{transform-origin:0 100%;opacity:.13;filter:blur(7px)saturate(.6)brightness(.7);animation:9s ease-in-out infinite nf-bg-drift-l;left:-6%;transform:perspective(900px)rotateY(28deg)rotateX(4deg)scale(1.45)translateZ(-120px)}.nf-bg-right{transform-origin:100% 100%;opacity:.13;filter:blur(7px) saturate(.6) brightness(.7) scaleX(-1);animation:11s ease-in-out infinite nf-bg-drift-r;right:-6%;transform:perspective(900px)rotateY(-28deg)rotateX(4deg)scale(1.45)translateZ(-120px)}@keyframes nf-bg-drift-l{0%,to{opacity:.13;filter:blur(7px)saturate(.6)brightness(.7)}50%{opacity:.18;filter:blur(5px)saturate(.8)brightness(.9)}}@keyframes nf-bg-drift-r{0%,to{opacity:.13;filter:blur(7px) saturate(.6) brightness(.7) scaleX(-1)}50%{opacity:.18;filter:blur(5px) saturate(.8) brightness(.9) scaleX(-1)}}.nf-scanlines{z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 3px,#0000000f 3px 4px);position:absolute;inset:0}.nf-vignette{z-index:1;pointer-events:none;background:radial-gradient(100% 100%,#0000 50%,#000000a6 100%);position:absolute;inset:0}.nf-floor-glow{z-index:1;pointer-events:none;filter:blur(12px);background:radial-gradient(70% 100% at 50% 100%,#7c3aed47 0%,#0000 80%);height:120px;position:absolute;bottom:22%;left:0;right:0}.nf-hud{z-index:10;-webkit-backdrop-filter:blur(12px);background:#000000b8;border-bottom:1px solid #7c3aed4d;flex-shrink:0;align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex;position:relative}.nf-player{flex-direction:column;flex:1;gap:3px;display:flex}.nf-p2{align-items:flex-end}.nf-name{letter-spacing:.18em;color:#a78bfacc;text-transform:uppercase;font-size:clamp(.5rem,1.2vw,.65rem)}.nf-bar-track{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:3px;width:100%;height:16px;position:relative;overflow:hidden}.nf-bar-track-r{direction:rtl}.nf-bar{border-radius:2px;height:100%;transition:width .25s ease-out;position:relative}.nf-bar-green{background:linear-gradient(90deg,#059669,#10b981,#34d399);box-shadow:0 0 12px #10b981b3,inset 0 1px #fff3}.nf-bar-red{background:linear-gradient(90deg,#9f1239,#f43f5e,#fb7185);box-shadow:0 0 12px #f43f5eb3,inset 0 1px #fff3}.nf-bar-danger{mix-blend-mode:overlay;background:linear-gradient(90deg,#ef4444,#fca5a5);border-radius:2px;height:100%;animation:.4s ease-in-out infinite alternate nf-danger-pulse;position:absolute;inset:0}@keyframes nf-danger-pulse{0%{opacity:.4}to{opacity:1}}.nf-hud-center{flex-direction:column;align-items:center;gap:1px;min-width:80px;display:flex}.nf-timer-label{letter-spacing:.2em;color:var(--nf-muted);text-transform:uppercase;font-size:.45rem}.nf-timer{color:var(--nf-text);text-shadow:0 0 24px #7c3aede6,0 0 48px #f43f5e80;letter-spacing:.05em;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1}.nf-announce{z-index:20;pointer-events:none;animation:nf-announce-in .35s var(--nf-ease) both;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@keyframes nf-announce-in{0%{opacity:0;transform:scale(1.8)}to{opacity:1;transform:scale(1)}}.nf-announce-main{color:var(--nf-text);text-shadow:0 0 40px #7c3aed,0 0 80px #7c3aed99,0 6px #000000e6;font-size:clamp(3.5rem,12vw,8rem);line-height:1}.nf-announce-sub{color:var(--nf-pink);text-shadow:0 0 30px #f43f5ee6,0 4px #000c;letter-spacing:.25em;margin-top:.25rem;font-size:clamp(1.2rem,4vw,3rem)}.nf-announce-ko .nf-announce-main{color:var(--nf-pink);text-shadow:0 0 40px #f43f5e,0 0 80px #f43f5e99,0 6px #000000e6}.nf-stage{z-index:5;flex:1;justify-content:space-between;align-items:flex-end;width:100%;max-width:1000px;min-height:0;margin:0 auto;padding:0 3vw;display:flex;position:relative}.nf-center-zone{flex:0 0 60px;justify-content:center;align-items:center;display:flex;position:relative}.nf-ko-burst{color:var(--nf-pink);text-shadow:0 0 40px #f43f5e,0 0 80px #f43f5eb3;animation:nf-ko-burst .5s var(--nf-ease) both;font-size:clamp(2rem,5vw,3.5rem)}@keyframes nf-ko-burst{0%{opacity:0;transform:scale(0)rotate(-15deg)}65%{transform:scale(1.3)rotate(5deg)}to{opacity:1;transform:scale(1)rotate(0)}}.nf-fighter{flex-direction:column;flex:none;align-items:center;display:flex;position:relative}.nf-fighter img{object-fit:contain;filter:drop-shadow(0 0 20px #7c3aed73)drop-shadow(0 12px 30px #000c);width:clamp(110px,20vw,280px);height:auto;transition:filter .1s,transform .1s;display:block}.nf-fighter-name{letter-spacing:.18em;color:#f0f4ff73;text-transform:uppercase;margin-top:4px;font-size:clamp(.45rem,1.1vw,.6rem)}.nf-fighter-shadow{filter:blur(8px);z-index:-1;background:#00000080;border-radius:50%;width:70%;height:12px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.nf-fighter-r img{transform:scaleX(-1)}.nf-fighter.nf-hit img{filter:brightness(8)drop-shadow(0 0 30px #fff)drop-shadow(0 0 60px #f43f5ee6);animation:.28s ease-in-out nf-hit-shake}.nf-fighter-l.nf-hit img{animation:.28s ease-in-out nf-hit-shake-l}.nf-fighter-r.nf-hit img{animation:.28s ease-in-out nf-hit-shake-r}@keyframes nf-hit-shake-l{0%{transform:translate(0)}25%{transform:translate(-14px)rotate(-4deg)}75%{transform:translate(6px)rotate(2deg)}to{transform:translate(0)}}@keyframes nf-hit-shake-r{0%{transform:scaleX(-1)translate(0)}25%{transform:scaleX(-1)translate(-14px)rotate(4deg)}75%{transform:scaleX(-1)translate(6px)rotate(-2deg)}to{transform:scaleX(-1)translate(0)}}.nf-fighter-l.nf-fighting img{animation:.6s ease-in-out infinite nf-idle-l}@keyframes nf-idle-l{0%,to{transform:translateY(0)rotate(-1deg)scale(1)}50%{transform:translateY(-10px)rotate(1.5deg)scale(1.02)}}.nf-fighter-l.nf-jumping img{animation:nf-jump .52s var(--nf-ease) both!important}@keyframes nf-jump{0%{transform:translateY(0)scale(1)}35%{transform:translateY(-64px)scale(1.08)rotate(-4deg)}65%{transform:translateY(-52px)scale(1.05)rotate(2deg)}to{transform:translateY(0)scale(1)rotate(0)}}.nf-fighter-l.nf-crouching img{transform-origin:bottom;transition:transform .1s;animation:none!important;transform:translateY(14px)scaleY(.75)!important}.nf-winner img{animation:nf-winner-pose .7s var(--nf-ease) forwards!important;filter:drop-shadow(0 0 60px #10b981cc)drop-shadow(0 0 30px #7c3aede6)!important}@keyframes nf-winner-pose{0%{transform:translateY(0)rotate(0)scale(1)}35%{transform:translateY(-50px)rotate(-8deg)scale(1.15)}65%{transform:translateY(-35px)rotate(5deg)scale(1.1)}to{transform:translateY(-28px)rotate(-3deg)scale(1.08)}}.nf-defeated img{animation:.6s ease-in forwards nf-defeated!important}@keyframes nf-defeated{0%{opacity:1;transform:scaleX(-1)rotate(0)}60%{opacity:.5;transform:scaleX(-1)rotate(-45deg)translate(20px)}to{opacity:.15;transform:scaleX(-1)rotate(-80deg)translate(40px)translateY(20px)}}.nf-particles{z-index:8;pointer-events:none;position:absolute;bottom:35%}.nf-particles-right{right:28%}.nf-particles-left{left:28%}.nf-spark{background:var(--nf-gold);width:6px;height:6px;box-shadow:0 0 8px var(--nf-gold);animation:.65s ease-out forwards nf-spark;animation-delay:calc(var(--i) * 25ms);border-radius:50%;position:absolute}@keyframes nf-spark{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translateX(calc(cos(calc(var(--i) * 60deg)) * 40px)) translateY(calc(-30px - var(--i) * 8px)) scale(.2);opacity:0}}.nf-stage-floor{z-index:4;flex-shrink:0;width:100%;padding:0;position:relative}.nf-floor-line{background:linear-gradient(90deg,#0000 0%,#7c3aed80 15%,#f43f5e99 35%,#7c3aedcc 50%,#f43f5e99 65%,#7c3aed80 85%,#0000 100%);height:2px;animation:3s ease-in-out infinite nf-floor-pulse;box-shadow:0 0 20px #7c3aed80,0 0 40px #7c3aed4d}@keyframes nf-floor-pulse{0%,to{box-shadow:0 0 20px #7c3aed80,0 0 40px #7c3aed4d}50%{box-shadow:0 0 30px #f43f5e99,0 0 60px #f43f5e4d}}.nf-panel{z-index:10;text-align:center;-webkit-backdrop-filter:blur(16px);background:#000000a6;border-top:1px solid #ffffff0f;flex-shrink:0;padding:.9rem 1rem 1.1rem;position:relative}.nf-headline{color:var(--nf-text);text-shadow:0 0 24px #7c3aedb3;letter-spacing:.15em;margin-bottom:.25rem;font-size:clamp(1rem,3vw,1.5rem)}.nf-sub{color:#94a3b8cc;letter-spacing:.05em;margin-bottom:.85rem;font-family:Chakra Petch,system-ui,sans-serif;font-size:clamp(.75rem,1.5vw,.9rem)}.nf-btns{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.nf-btn{letter-spacing:.12em;cursor:pointer;transition:transform .15s var(--nf-ease), box-shadow .15s ease, background .15s ease;touch-action:manipulation;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.4rem;min-width:120px;min-height:44px;padding:.55rem 1.5rem;font-family:Russo One,sans-serif;font-size:clamp(.7rem,1.5vw,.85rem);display:inline-flex}.nf-btn:hover{transform:translateY(-3px)}.nf-btn:active{transform:translateY(0)scale(.97)}.nf-btn:focus-visible{outline-offset:3px;outline:2px solid #7c3aedcc}.nf-btn-primary{color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#9333ea 100%);box-shadow:0 4px 20px #7c3aed80,inset 0 1px #ffffff26}.nf-btn-primary:hover{box-shadow:0 8px 30px #7c3aedb3,inset 0 1px #fff3}.nf-btn-ghost{color:var(--nf-text);background:#ffffff0f;border:1px solid #ffffff1f}.nf-btn-ghost:hover{background:#ffffff1a;border-color:#7c3aed66}.nf-attack-flash{z-index:15;pointer-events:none;letter-spacing:.18em;text-transform:uppercase;animation:nf-flash-up .85s var(--nf-ease) both;white-space:nowrap;font-size:clamp(1rem,3.5vw,1.8rem);position:absolute;top:30%;left:50%;transform:translate(-50%)}.nf-attack-punch{color:#34d399;text-shadow:0 0 20px #34d399e6}.nf-attack-kick{color:#fb923c;text-shadow:0 0 20px #fb923ce6}@keyframes nf-flash-up{0%{opacity:0;transform:translate(-50%)translateY(0)scale(.7)}25%{opacity:1;transform:translate(-50%)translateY(-10px)scale(1.15)}to{opacity:0;transform:translate(-50%)translateY(-40px)scale(.9)}}.nf-particles-kick .nf-spark{background:#fb923c;box-shadow:0 0 8px #fb923c}.nf-particles-punch .nf-spark{background:var(--nf-gold);box-shadow:0 0 8px var(--nf-gold)}.nf-particles-cpu .nf-spark{background:#60a5fa;box-shadow:0 0 8px #60a5fa}.nf-range-hint{z-index:9;pointer-events:none;letter-spacing:.2em;color:#f59e0bb3;text-transform:uppercase;font-size:clamp(.5rem,1.2vw,.65rem);animation:1.6s ease-in-out infinite nf-pulse-opacity;position:absolute;bottom:42%;left:50%;transform:translate(-50%)}.nf-range-close{z-index:9;pointer-events:none;letter-spacing:.2em;color:#f43f5ee6;text-transform:uppercase;text-shadow:0 0 14px #f43f5eb3;font-size:clamp(.55rem,1.3vw,.7rem);animation:.8s ease-in-out infinite nf-pulse-opacity;position:absolute;bottom:42%;left:50%;transform:translate(-50%)}@keyframes nf-pulse-opacity{0%,to{opacity:.7}50%{opacity:1}}.nf-controls{z-index:10;-webkit-backdrop-filter:blur(10px);background:#0000008c;border-top:1px solid #7c3aed2e;flex-direction:column;flex-shrink:0;align-items:center;gap:.3rem;padding:.45rem 1rem .35rem;display:flex;position:relative}.nf-ctrl-grid{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;display:flex}.nf-ctrl-group{flex-direction:column;align-items:center;gap:3px;display:flex}.nf-ctrl-label{letter-spacing:.2em;color:var(--nf-muted);text-transform:uppercase;font-size:.42rem}.nf-ctrl-keys{flex-direction:column;align-items:center;gap:2px;display:flex}.nf-ctrl-row{gap:2px;display:flex}.nf-ctrl-attacks{grid-template-columns:auto auto auto auto;align-items:center;gap:3px;display:grid}kbd{width:22px;height:22px;color:var(--nf-text);letter-spacing:0;background:#ffffff14;border:1px solid #fff3;border-bottom:2px solid #ffffff1a;border-radius:4px;justify-content:center;align-items:center;font-family:Russo One,sans-serif;font-size:.55rem;display:inline-flex;box-shadow:0 2px 4px #0006}.nf-key-punch{color:#34d399;background:#10b9812e;border-color:#10b98166;box-shadow:0 0 8px #10b98133,0 2px 4px #0006}.nf-key-kick{color:#fb923c;background:#f973162e;border-color:#f9731666;box-shadow:0 0 8px #f9731633,0 2px 4px #0006}.nf-key-desc{letter-spacing:.1em;color:#94a3b899;text-transform:uppercase;font-size:.38rem}.nf-ctrl-hint{letter-spacing:.15em;color:var(--nf-gold);text-transform:uppercase;margin:0;font-size:.55rem;animation:1.4s ease-in-out infinite nf-pulse-opacity}.nf-btn-rematch{color:#fff;letter-spacing:.12em;cursor:pointer;min-width:120px;min-height:44px;transition:transform .15s var(--nf-ease), box-shadow .15s ease;background:linear-gradient(135deg,#f43f5e 0%,#7c3aed 100%);border:none;border-radius:8px;justify-content:center;align-items:center;gap:.4rem;padding:.55rem 1.5rem;font-family:Russo One,sans-serif;font-size:clamp(.7rem,1.5vw,.85rem);display:inline-flex;box-shadow:0 4px 20px #f43f5e80,inset 0 1px #ffffff26}.nf-btn-rematch:hover{transform:translateY(-3px);box-shadow:0 8px 30px #f43f5eb3}.nf-btn-rematch:active{transform:scale(.97)}.nf-winner-r img{animation:nf-winner-pose-r .7s var(--nf-ease) forwards!important;filter:drop-shadow(0 0 60px #f43f5ecc)drop-shadow(0 0 30px #7c3aede6)!important}@keyframes nf-winner-pose-r{0%{transform:scaleX(-1)translateY(0)scale(1)}35%{transform:scaleX(-1)translateY(-50px)rotate(8deg)scale(1.15)}65%{transform:scaleX(-1)translateY(-35px)rotate(-5deg)scale(1.1)}to{transform:scaleX(-1)translateY(-28px)rotate(3deg)scale(1.08)}}@media (prefers-reduced-motion:reduce){.nf-bg-left,.nf-bg-right,.nf-fighter img,.nf-floor-line,.nf-spark,.nf-announce,.nf-ko-burst{transition:none!important;animation:none!important}.nf-fighter-l.nf-fighting img{animation:none!important}}@media (width<=600px){.nf-hud{gap:.4rem;padding:.4rem .5rem}.nf-hud-center{min-width:60px}.nf-timer{font-size:1.4rem}.nf-stage{padding:0 1vw}.nf-panel{padding:.7rem .75rem 1rem}.nf-bg-left{left:-15%}.nf-bg-right{right:-15%}}@media (height<=600px){.nf-fighter img{width:clamp(80px,15vw,180px)}.nf-announce-main{font-size:clamp(2rem,8vw,4rem)}}