:root{--bg-0:#05081a;--bg-1:#070b1f;--bg-2:#0b1230;--bg-3:#101a3d;--blue-500:#2f7bff;--blue-400:#4aa3ff;--cyan-300:#4ff3ff;--purple-500:#8b3dff;--purple-400:#b06bff;--pink-400:#ff4fc3;--yellow-300:#ffe45c;--yellow-400:#ffc928;--orange-500:#ff8a00;--orange-600:#f05a00;--danger:#ff3d6e;--text:#eef3ff;--text-dim:#8b9bd0;--text-faint:#56679e;--navy-700:#0d1f63;--navy-900:#061039;--neon-blue:#3fb4ff;--scene-image:url(/assets/background.png);--navy-800:#0a1a55;--panel-bg:#0a1a55f0;--panel-border:var(--neon-blue);--panel-shadow:0 4px 10px #00145059;--font-ui:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--font-game:var(--font-ui);--font-num:var(--font-ui);--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}html,body{overscroll-behavior:none;overflow:hidden}body{background:var(--bg-1);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:focus-visible{outline:3px solid var(--cyan-300);outline-offset:3px}.scene-bg{background:#1a6cf0 var(--scene-image) center / cover no-repeat}.app-bg{background:var(--bg-1);position:fixed;inset:0}@keyframes bg-spin{to{transform:rotate(360deg)}}.app-shell{width:100%;max-width:520px;height:100%;margin:0 auto;position:relative}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}.btn{min-height:52px;font-family:var(--font-ui);letter-spacing:0;color:#fff;text-shadow:0 1px #00145073;cursor:pointer;border-radius:16px;padding:0 20px;font-size:19px;font-weight:900;transition:transform .1s ease-out,filter .15s,opacity .2s}.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #0000004d}.btn:disabled{opacity:.5;cursor:default}.btn--primary{background:#1279ff;border:2px solid #9fe3ff;box-shadow:0 4px #0a3aa8}.btn--ghost{background:#8a3dff;border:2px solid #d9bcff;box-shadow:0 4px #4a17b0}.btn--small{min-height:46px;font-size:17px}.screen{padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);background:linear-gradient(#06103980, #06103980), #1a6cf0 var(--scene-image) center / cover no-repeat;flex-direction:column;gap:14px;display:flex;position:absolute;inset:0;overflow:hidden auto}.panel{background:var(--panel-bg);border:2px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:18px}.panel--glow{border-color:#6fd0ff}.title-chip{background:var(--navy-800);border:2px solid var(--neon-blue);font-family:var(--font-ui);color:#fff;white-space:nowrap;border-radius:999px;align-items:center;gap:10px;margin:0;padding:4px 18px 4px 4px;font-size:17px;font-weight:900;display:inline-flex;box-shadow:0 4px 10px #00145059}.title-chip__icon{color:#fff;background:#1a86ff;border:2px solid #bfeaff;border-radius:50%;flex-shrink:0;place-items:center;width:34px;height:34px;display:grid}.title-chip__icon svg{width:18px;height:18px}.title-chip--image{padding-left:0}.title-chip__img{pointer-events:none;-webkit-user-select:none;user-select:none;width:50px;height:auto;margin:-8px -2px -8px -6px;display:block}.title-chip--purple{border-color:#b47aff}.title-chip--purple .title-chip__icon{background:#8a3dff;border-color:#e1c6ff}.screen-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.icon-btn{border:2px solid var(--neon-blue);background:var(--navy-800);color:#fff;cursor:pointer;border-radius:50%;flex-shrink:0;place-items:center;width:42px;height:42px;padding:0;transition:transform .1s ease-out,filter .15s;display:grid}.icon-btn svg{width:19px;height:19px}.icon-btn:hover{filter:brightness(1.15)}.icon-btn:active{transform:scale(.94)}.icon-circle{color:#fff;background:#1a86ff;border:2px solid #bfeaff;border-radius:50%;flex-shrink:0;place-items:center;width:48px;height:48px;display:grid}.icon-circle svg{width:24px;height:24px}.guide__list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.guide-card{align-items:center;gap:14px;padding:12px 14px;display:flex}.guide-card__icon--fire{background:var(--orange-500);border-color:#ffe7a8}.guide-card__icon--gold{background:#f5b400;border-color:#fff3b8}.guide-card__title{margin:0 0 3px;font-size:17px;font-weight:900}.guide-card__desc{color:#dbe6ff;margin:0;font-size:13px;font-weight:600;line-height:1.4}.guide__settings{flex-direction:column;gap:12px;padding:14px;display:flex}.guide__settings-title{margin:0;font-size:17px;font-weight:900}.guide__setting{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:15px;font-weight:800;display:flex}.difficulty{gap:6px;display:flex}.difficulty__opt{min-height:36px;font-family:var(--font-game);letter-spacing:.04em;color:#d9c6ff;cursor:pointer;background:#140a3cbf;border:2px solid #b06bffb3;border-radius:999px;padding:0 12px;font-size:13px;font-weight:900}.difficulty__opt--on{color:#fff;background:#8a3dff;border-color:#e1c6ff}.guide__keys{color:var(--text-dim);margin:0;font-size:12px;font-weight:700}.home{padding:calc(var(--safe-top) + 10px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 16px);flex-direction:column;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.home img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;display:block}.home__top{flex-shrink:0;justify-content:space-between;align-self:stretch;display:flex}.home__icon-btn{aspect-ratio:160/152;cursor:pointer;background:0 0;border:0;width:clamp(44px,13vw,56px);padding:0;transition:transform .1s ease-out,filter .15s}.home__icon-btn img{width:100%;height:100%}.home__icon-btn:hover,.home__icon-btn:focus-visible{filter:brightness(1.1)}.home__icon-btn:active{transform:scale(.92)}.home__logo{filter:drop-shadow(0 6px 10px #00145059);flex-shrink:0;margin:clamp(-24px,-2dvh,-8px) 0 0}.home__logo img{clip-path:inset(0 1.5% 0 0);width:clamp(170px,54vw,240px);height:auto}.home__tap{flex:1 1 0;justify-content:center;align-items:center;width:100%;min-height:110px;padding:2px 0;display:flex}.home__tap img{aspect-ratio:575/585;filter:drop-shadow(0 10px 14px #00145066);width:auto;height:100%;max-height:min(64vw,290px);animation:1.6s ease-in-out infinite home-tap-pulse}@keyframes home-tap-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (prefers-reduced-motion:reduce){.home__tap img{animation:none}}.home__best{background:var(--navy-800);border:2px solid var(--neon-blue);border-radius:999px;flex-shrink:0;align-items:center;gap:10px;margin:2px 0 8px;padding:5px 20px 5px 5px;display:flex;box-shadow:0 4px 10px #00145059}.home__best-icon{color:#fff;background:#f5b400;border:2px solid #0d2a8a;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.home__best-icon svg{filter:drop-shadow(0 1px #b34700);width:20px;height:20px}.home__best-label{font-family:var(--font-game);letter-spacing:.08em;color:#fff;font-size:13px;font-style:italic;font-weight:900}.home__best-value{font-family:var(--font-game);color:var(--yellow-300);text-shadow:2px 0 #0d2a8a,-2px 0 #0d2a8a,0 2px #0d2a8a,0 -2px #0d2a8a,1px 1px #0d2a8a,-1px 1px #0d2a8a,1px -1px #0d2a8a,-1px -1px #0d2a8a,0 3px #0d2a8a;font-size:27px;font-style:italic;font-weight:900;line-height:1}.home__best-value small{margin-left:2px;font-size:16px}.home__menu{flex-direction:column;flex-shrink:0;width:min(86%,320px);display:flex}.home__mode-btn{cursor:pointer;background:0 0;border:0;width:100%;padding:0;transition:transform .1s ease-out,filter .15s;display:block}.home__mode-btn+.home__mode-btn{margin-top:-4%}.home__mode-btn img{width:100%;height:auto}.home__mode-btn:hover,.home__mode-btn:focus-visible{filter:brightness(1.1)}.home__mode-btn:active{transform:scale(.97)}.home__slogan{flex-shrink:0;width:min(92%,360px);height:auto;margin-top:-2px}@media (height<=640px){.home__logo img{width:clamp(150px,46vw,210px)}}.avatar{--a1:#5ac8ff;--a2:#1d5ee8;--ring:#5ac8ffd9;background:var(--a2);color:#fff;border:2px solid #ffffffb3;flex-shrink:0;place-items:center;display:grid;position:relative;box-shadow:0 0 0 3px #050a28cc}.avatar--pink{--a1:#ff8ad8;--a2:#b42bd6;--ring:#ff5ac8d9}.avatar--circle{border-radius:50%}.avatar--square{border-radius:12px}.avatar svg{width:62%;height:62%}.avatar--sm{width:32px;height:32px}.avatar--md{width:48px;height:48px}.avatar--lg{width:clamp(76px,22vw,100px);height:clamp(76px,22vw,100px);box-shadow:0 0 0 5px #050a28cc, 0 0 0 7px var(--ring);border-width:3px}.avatar--pulsing:after{content:"";border-radius:inherit;border:2px solid var(--ring);animation:1.2s ease-out infinite avatar-pulse;position:absolute;inset:-10px}@keyframes avatar-pulse{0%{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.35)}}.matching{align-items:stretch;gap:24px}.matching__card{border-color:#b47aff;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:26px;max-height:460px;margin:auto 0 0;padding:28px 16px;display:flex;position:relative}.matching__status{margin:0;font-size:20px;font-weight:900}.matching__vs{align-items:center;gap:clamp(10px,4vw,20px);display:flex}.matching__vs-text{z-index:1;font-family:var(--font-game);color:#fff;text-shadow:3px 0 #0d2a8a,-3px 0 #0d2a8a,0 3px #0d2a8a,0 -3px #0d2a8a,2px 2px #0d2a8a,-2px 2px #0d2a8a,2px -2px #0d2a8a,-2px -2px #0d2a8a,5px 5px #5ff0ff;font-size:clamp(40px,12vw,54px);font-style:italic;font-weight:900;position:relative;transform:skew(-10deg)}.matching__vs-text--found{animation:.5s cubic-bezier(.2,.9,.3,1.4) vs-hit}.matching__hint{color:#dbe6ff;text-align:center;margin:0;font-size:16px;font-weight:700}.matching__cancel{width:min(100%,240px);font-family:var(--font-ui);letter-spacing:0;align-self:center;margin-bottom:auto;font-size:18px;font-weight:900}@keyframes vs-hit{0%{opacity:0;transform:skew(-10deg)scale(2)}}.net-pill{background:var(--navy-800);color:#dbe6ff;white-space:nowrap;border:2px solid #3fb4ff99;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:800;display:inline-flex}.net-pill:before{content:"";background:#8b9bd0;border-radius:50%;width:8px;height:8px}.net-pill--waiting:before,.net-pill--found:before,.net-pill--connected:before{background:#3ddc84}.net-pill--connecting:before,.net-pill--reconnecting:before{background:var(--yellow-400);animation:.9s ease-in-out infinite net-blink}.net-pill--error,.net-pill--offline{border-color:#ff3d6eb3}.net-pill--error:before,.net-pill--offline:before{background:var(--danger)}@keyframes net-blink{50%{opacity:.3}}.online-names{text-align:center;color:#dbe6ff;grid-template-columns:1fr 1fr;width:min(100%,300px);margin-top:-14px;font-size:14px;font-weight:800;display:grid}.matching__hint--error{color:#ffc2d1}.online-actions{flex-direction:column;align-self:center;align-items:center;gap:10px;width:min(100%,300px);margin-bottom:auto;display:flex}.online-actions .btn{width:100%}.online-actions .matching__cancel{margin-bottom:0}.online-bot-link{color:#dbe6ff;text-underline-offset:3px;cursor:pointer;text-shadow:0 1px 2px #000a28e6;background:0 0;border:0;padding:6px 10px;font-size:14px;font-weight:800;text-decoration:underline}@media (prefers-reduced-motion:reduce){.net-pill:before{animation:none}}.combo{--c:79, 243, 255;opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:2px;height:78px;transition:opacity .22s ease-out,transform .22s ease-out;display:flex;transform:scale(.85)}.combo--visible{opacity:1;transform:scale(1)}.combo__line{align-items:baseline;gap:8px;display:flex;transform:skew(-8deg)}.combo__count{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 12px rgba(var(--c), .9), 0 0 28px rgba(var(--c), .5);font-size:50px;font-weight:800;line-height:.9;animation:.18s ease-out combo-bump}.combo__word{font-family:var(--font-game);letter-spacing:.1em;color:rgb(var(--c));text-shadow:0 0 10px rgba(var(--c), .8);font-size:18px;font-weight:900}.combo__multiplier{font-family:var(--font-num);color:rgb(var(--c));border:1.5px solid rgba(var(--c), .8);background:rgba(var(--c), .1);box-shadow:0 0 10px rgba(var(--c), .45);border-radius:6px;padding:1px 10px 0;font-size:22px;font-weight:800;line-height:1.1}.combo--t1{--c:120, 220, 255}.combo--t2{--c:255, 228, 92}.combo--t3{--c:255, 150, 30}.combo--t3 .combo__count{font-size:56px}.combo--t4{--c:255, 79, 170}.combo--t4 .combo__count{font-size:62px;animation:.18s ease-out combo-bump,.6s ease-in-out .18s combo-flicker}@keyframes combo-bump{0%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes combo-flicker{50%{text-shadow:0 0 18px rgba(var(--c), 1), 0 0 44px rgba(var(--c), .8)}}.countdown{pointer-events:none;z-index:20;place-items:center;display:grid;position:absolute;inset:0}.countdown__value{font-family:var(--font-game);color:#fff;text-shadow:5px 0 #0d2a8a,-5px 0 #0d2a8a,0 5px #0d2a8a,0 -5px #0d2a8a,4px 4px #0d2a8a,-4px 4px #0d2a8a,4px -4px #0d2a8a,-4px -4px #0d2a8a,0 9px #0d2a8a,0 0 36px #3fb4fff2;font-size:clamp(110px,36vmin,200px);font-style:italic;font-weight:900;line-height:1;animation:1s cubic-bezier(.2,.9,.3,1.2) forwards countdown-pop}.countdown__value--go{color:var(--yellow-300);text-shadow:5px 0 #0d2a8a,-5px 0 #0d2a8a,0 5px #0d2a8a,0 -5px #0d2a8a,4px 4px #0d2a8a,-4px 4px #0d2a8a,4px -4px #0d2a8a,-4px -4px #0d2a8a,0 9px #0d2a8a,0 0 50px #ffb41e;animation:.7s cubic-bezier(.2,.9,.3,1.2) forwards go-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(2.2)}20%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(.95)}to{opacity:0;transform:scale(.6)}}@keyframes go-pop{0%{opacity:0;transform:scale(.3)rotate(-8deg)}30%{opacity:1;transform:scale(1.15)rotate(-4deg)}70%{opacity:1;transform:scale(1)rotate(-4deg)}to{opacity:0;transform:scale(1.6)rotate(-4deg)}}.finish{z-index:30;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;animation:.6s ease-out finish-flash;display:flex;position:absolute;inset:0;overflow:hidden}.finish__burst{background:repeating-conic-gradient(#ffe45c40 0deg 10deg,#0000 10deg 20deg);width:140vmax;height:140vmax;animation:12s linear infinite bg-spin;position:absolute;-webkit-mask:radial-gradient(circle,#000 10%,#0000 45%);mask:radial-gradient(circle,#000 10%,#0000 45%)}.finish--lose .finish__burst,.finish--draw .finish__burst{background:repeating-conic-gradient(#8ca0ff2e 0deg 10deg,#0000 10deg 20deg)}.finish__title{font-family:var(--font-game);color:var(--yellow-300);text-shadow:4px 0 #0d2a8a,-4px 0 #0d2a8a,0 4px #0d2a8a,0 -4px #0d2a8a,3px 3px #0d2a8a,-3px 3px #0d2a8a,3px -3px #0d2a8a,-3px -3px #0d2a8a,0 8px #0d2a8a,0 0 40px #ffb41ef2;white-space:nowrap;font-size:clamp(64px,20vw,120px);font-weight:900;line-height:1;animation:.65s cubic-bezier(.2,.9,.3,1.3) finish-pop;position:relative;transform:rotate(-5deg)}.finish--lose .finish__title{color:#c9d4ff;text-shadow:4px 0 #1a2466,-4px 0 #1a2466,0 4px #1a2466,0 -4px #1a2466,3px 3px #1a2466,-3px 3px #1a2466,3px -3px #1a2466,-3px -3px #1a2466,0 8px #1a2466,0 0 36px #788cffcc}.finish--draw .finish__title{color:#e7f0ff;text-shadow:4px 0 #2d3a8c,-4px 0 #2d3a8c,0 4px #2d3a8c,0 -4px #2d3a8c,3px 3px #2d3a8c,-3px 3px #2d3a8c,3px -3px #2d3a8c,-3px -3px #2d3a8c,0 8px #2d3a8c,0 0 36px #5ff0ffcc}.finish__subtitle{background:linear-gradient(180deg, var(--navy-700), var(--navy-900));border:2px solid var(--panel-border);border-radius:999px;padding:6px 18px;font-size:18px;font-weight:900;animation:.65s cubic-bezier(.2,.9,.3,1.3) .12s both finish-pop;position:relative;box-shadow:0 0 12px #3fb4ffbf}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti span{border-radius:2px;width:9px;height:14px;animation-name:confetti-fall;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-fill-mode:both;position:absolute;top:-20px}@keyframes confetti-fall{0%{transform:translateY(0) rotate(var(--r));opacity:1}to{transform:translateY(110vh) rotate(calc(var(--r) + 540deg));opacity:.8}}@keyframes finish-pop{0%{opacity:0;transform:scale(.2)rotate(-12deg)}to{opacity:1}}@keyframes finish-flash{0%{background:#ffffff8c}to{background:0 0}}.particles{pointer-events:none;z-index:5;position:absolute;inset:0;overflow:visible}.particle{width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);background:var(--color);box-shadow:0 0 8px var(--color);will-change:transform, opacity;border-radius:50%;animation:.52s cubic-bezier(.2,.8,.3,1) forwards particle-fly;position:absolute}@keyframes particle-fly{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--dx), var(--dy)) scale(.2);opacity:0}}.float-text{font-family:var(--font-num);color:#fff;text-shadow:2px 0 #0a1446e6,-2px 0 #0a1446e6,0 2px #0a1446e6,0 -2px #0a1446e6,1px 1px #0a1446e6,-1px 1px #0a1446e6,1px -1px #0a1446e6,-1px -1px #0a1446e6,0 0 12px #5ff0ffe6,0 3px #0a1446e6;white-space:nowrap;will-change:transform, opacity;font-size:36px;font-weight:800;line-height:1;animation:.7s cubic-bezier(.2,.8,.3,1) forwards float-up;position:absolute;transform:translate(-50%,-50%)}.float-text--t1{color:#e6fdff}.float-text--t2{text-shadow:0 0 12px #ffe45c,0 3px #0a1446e6;font-size:38px}.float-text--t3{text-shadow:0 0 14px #ff961e,0 3px #0a1446e6;font-size:41px}.float-text--t4{text-shadow:0 0 16px #ff4faa,0 3px #0a1446e6;font-size:46px}@keyframes float-up{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}15%{opacity:1;transform:translate(-50%,-80%)scale(1.15)}to{opacity:0;transform:translate(-50%,-260%)scale(.95)}}.tap-wrap{--tap-size:min(100%, 38dvh, 300px);width:var(--tap-size);aspect-ratio:1;flex-shrink:0;place-items:center;display:grid;position:relative}.tap-glow{opacity:0;pointer-events:none;background:radial-gradient(circle,#ffe678d9,#ff961466 50%,#0000 70%);border-radius:50%;position:absolute;inset:-6%}.tap-btn{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;will-change:transform;background:0 0;border:none;border-radius:50%;width:100%;height:100%;padding:0;position:relative}.tap-btn[aria-disabled=true]{cursor:default}.tap-btn:focus-visible{outline-offset:8px}.tap-art{--heat:0;pointer-events:none;display:block;position:absolute;inset:0}.tap-art__halo{inset:calc(-8% - var(--heat) * 3%);background:radial-gradient(circle, rgba(255, 210, 60, calc(.35 + var(--heat) * .1)) 0%, rgba(255, 140, 0, calc(.15 + var(--heat) * .06)) 45%, transparent 70%);border-radius:50%;transition:inset .3s ease-out;position:absolute}.tap-art__img{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 14px #00145073);width:100%;height:100%;transition:filter .2s;display:block;position:relative}.tap-art--dimmed .tap-art__img{filter:saturate(.75)brightness(.85)drop-shadow(0 10px 14px #00145073)}.tap-art--dimmed .tap-art__halo{opacity:.4}.gauge{--fill:0;--c1:#b8fbff;--c2:#4ff3ff;--c3:#2f7bff;--glow:79, 220, 255;flex-direction:column;align-items:center;gap:6px;height:100%;min-height:0;display:flex;position:relative}.gauge--opponent{--c1:#ffd0f0;--c2:#ff6fd0;--c3:#b03cff;--glow:255, 90, 200}.gauge__value{font-family:var(--font-num);color:#fff;text-shadow:0 0 10px rgba(var(--glow), .75);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:20px;font-weight:800;line-height:.9}.gauge__value small{opacity:.85;font-size:.62em}.gauge__value i{color:rgb(var(--glow));margin-left:1px;font-size:.62em;font-style:normal}.gauge__track{border:1.5px solid rgba(var(--glow), calc(.3 + var(--fill) * .5));width:100%;min-height:0;box-shadow:inset 0 0 14px #000000e6, 0 0 calc(4px + var(--fill) * 26px) rgba(var(--glow), calc(.12 + var(--fill) * .55));background:linear-gradient(90deg,#04071a,#0a1236 50%,#04071a);border-radius:999px;flex:1;transition:box-shadow .2s ease-out,border-color .2s ease-out;position:relative;overflow:hidden}.gauge__fill{height:calc((100% - 8px) * var(--fill));background:linear-gradient(90deg, #ffffff8c, transparent 35%, transparent 65%, #ffffff40), linear-gradient(0deg, var(--c3), var(--c2) 70%, var(--c1));box-shadow:0 0 calc(6px + var(--fill) * 18px) rgba(var(--glow), .95);border-radius:999px;transition:height .11s linear;position:absolute;bottom:4px;left:4px;right:4px;overflow:hidden}.gauge__sparks{opacity:calc(.25 + var(--fill) * .75);background-image:radial-gradient(2px 2px at 30% 20%,#fff,#0000),radial-gradient(1.5px 1.5px at 70% 45%,#fff,#0000),radial-gradient(2px 2px at 45% 75%,#fff,#0000),radial-gradient(1.5px 1.5px at 60% 95%,#fff,#0000);background-size:100% 60px;animation:.9s linear infinite gauge-rise;position:absolute;inset:0}.gauge__fill:after{content:"";height:4px;box-shadow:0 0 10px #fff, 0 0 18px rgba(var(--glow), 1);background:#fff;border-radius:4px;position:absolute;top:0;left:10%;right:10%}.gauge__ticks{pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 calc(10% - 1px),#ffffff12 calc(10% - 1px) 10%);position:absolute;inset:4px}.gauge--sm{gap:3px}.gauge--sm .gauge__value{font-size:18px}.gauge--sm .gauge__fill{height:calc((100% - 6px) * var(--fill));bottom:3px;left:3px;right:3px}.gauge--hot .gauge__track{animation:.42s ease-in-out infinite alternate gauge-hot}.gauge--hot .gauge__value{color:var(--yellow-300)}.gauge--complete .gauge__track{border-color:#fff6b0;animation:.6s ease-out infinite alternate gauge-complete}.gauge--complete .gauge__fill{background:linear-gradient(90deg, #fff9, transparent 40%), linear-gradient(0deg, var(--orange-500), var(--yellow-300))}.gauge--complete .gauge__value{color:var(--yellow-300);text-shadow:0 0 12px #ffc828e6}.gauge__done{font-family:var(--font-game);letter-spacing:.25em;color:#fff;text-shadow:0 0 10px #ffb020;pointer-events:none;font-size:16px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}@keyframes gauge-rise{0%{background-position:0 0}to{background-position:0 -60px}}@keyframes gauge-hot{to{box-shadow:inset 0 0 14px #000000e6, 0 0 40px rgba(var(--glow), 1)}}@keyframes gauge-complete{0%{box-shadow:0 0 20px #ffdc5ab3,inset 0 0 12px #0009}to{box-shadow:0 0 46px #ffdc5a,inset 0 0 12px #0009}}.timer{flex-direction:column;align-items:center;line-height:1;display:inline-flex}.timer__label{font-family:var(--font-game);letter-spacing:.3em;color:var(--text-dim);margin-right:-.3em;font-size:11px;font-weight:900}.timer__value{text-align:center;min-width:3.1ch;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 14px #4fc8ffbf,0 0 34px #2f7bff73;font-size:clamp(44px,12.5vw,58px);font-weight:800;line-height:.95;display:block}.timer--urgent .timer__label{color:#ff8aa6}.timer--urgent .timer__value{color:#ffe3ea;text-shadow:0 0 14px #ff3d6ef2,0 0 40px #ff1e5099;animation:1s ease-out timer-pulse}@keyframes timer-pulse{0%{transform:scale(1.18)}30%{transform:scale(1)}}.game{padding:calc(var(--safe-top) + 10px) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 14px) calc(var(--safe-left) + 14px);touch-action:manipulation;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.game.scene-bg{background-image:linear-gradient(180deg, #06103999 0%, #06103940 22%, transparent 40%, transparent 78%, #06103966 100%), var(--scene-image)}.game .timer__label,.game__hud-info,.game__gauge-label,.game .gauge__value,.game__hint{text-shadow:0 1px 2px #000a28e6,0 0 8px #000a2899}.game .timer__label,.game .game__hud-info,.game .game__hint{color:#ffffffd9}.game--cleared{animation:.42s ease-out screen-shake}.game__topbar{z-index:25;justify-content:space-between;align-items:center;display:flex;position:relative}.game__topbar-left{align-items:center;gap:10px;display:flex}.mode-tag{--c:79, 243, 255;font-family:var(--font-game);letter-spacing:.14em;color:rgb(var(--c));border:1px solid rgba(var(--c), .6);text-shadow:0 0 8px rgba(var(--c), .7);background:#060e2cb3;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:900}.mode-tag--versus{--c:196, 140, 255}.game__hud{z-index:25;flex-direction:column;align-items:center;gap:4px;margin-top:2px;display:flex;position:relative}.game__hud-info{font-family:var(--font-game);letter-spacing:.14em;color:var(--text-faint);font-size:11px;font-weight:900}.game__hud-info strong{font-family:var(--font-num);letter-spacing:.02em;color:var(--yellow-300);text-shadow:0 0 8px #ffc82880;margin-left:6px;font-size:18px;font-weight:800}.game__opponent{position:absolute;top:0;right:0}.game__main{flex:1;grid-template-columns:minmax(0,1fr) clamp(46px,13vw,58px);gap:12px;min-height:0;margin-top:6px;display:grid;position:relative}.game__stage{flex-direction:column;align-items:center;min-width:0;min-height:0;display:flex;position:relative}.game__button-area{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative}.game__hint{font-family:var(--font-game);letter-spacing:.16em;color:var(--text-faint);margin:8px 0 0;font-size:11px;font-weight:900;display:none}@media (hover:hover) and (pointer:fine){.game__hint{display:block}}.game__gauge{flex-direction:column;align-items:center;gap:4px;min-height:0;padding-bottom:4px;display:flex}.game__gauge>.gauge{flex:1;width:100%}.game--versus .game__gauge{padding-top:26px}.game__gauge-label{font-family:var(--font-game);letter-spacing:.14em;color:var(--cyan-300);text-shadow:0 0 8px #4ff3ffb3;font-size:11px;font-weight:900}@media (height<=560px){.game__hud{top:calc(var(--safe-top) + 6px);position:absolute;left:50%;transform:translate(-50%)}.game__hud .timer__label,.game__hud-info{display:none}.game__hud .timer__value{font-size:40px}.game__opponent{top:calc(var(--safe-top) + 56px);right:calc(var(--safe-right) + 84px);position:fixed}.game .combo{height:56px}.game__hint{display:none}}@keyframes screen-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}.opponent{background:#180828c7;border:1.5px solid #ff5ac899;border-radius:12px;align-items:stretch;gap:8px;width:92px;padding:7px 8px 7px 7px;display:flex;box-shadow:0 0 14px #ff4fc34d,inset 0 0 12px #ff4fc31a}.opponent__gauge{flex-shrink:0;width:14px;height:66px}.opponent__gauge .gauge__value{display:none}.opponent__gauge .gauge__fill{height:calc((100% - 4px) * var(--fill));bottom:2px;left:2px;right:2px}.opponent__gauge .gauge__fill:after{display:none}.opponent__info{flex-direction:column;justify-content:space-between;min-width:0;display:flex}.opponent__name{font-family:var(--font-game);letter-spacing:.06em;color:#ffc4ec;align-items:center;gap:3px;font-size:12px;font-weight:900;display:flex}.opponent__name svg{width:13px;height:13px}.opponent__level{font-family:var(--font-game);letter-spacing:.14em;color:#c98ab6;font-size:8px;font-weight:900}.opponent__value{font-family:var(--font-num);color:#fff;text-shadow:0 0 8px #ff5ac8cc;font-variant-numeric:tabular-nums;font-size:19px;font-weight:800;line-height:.9}.opponent__value small{font-size:14px}.opponent__combo{font-family:var(--font-game);letter-spacing:.06em;white-space:nowrap;color:#8f6a88;font-size:8px;font-weight:900}.opponent__combo--on{color:var(--yellow-300)}.opponent--offline{opacity:.55}.result{z-index:40;padding:calc(var(--safe-top) + 24px) calc(var(--safe-right) + 18px) calc(var(--safe-bottom) + 18px) calc(var(--safe-left) + 18px);background:#061039e6;justify-content:center;animation:.24s ease-out fade-in;display:flex;position:absolute;inset:0;overflow:hidden auto}.result__content{flex-direction:column;align-items:center;gap:16px;width:min(100%,380px);margin:auto 0;display:flex;position:relative}.result__heading{flex-direction:column;align-items:center;animation:.52s cubic-bezier(.2,.9,.3,1.3) result-pop;display:flex}.result__crown{z-index:1;width:72px;height:72px;color:var(--yellow-400);filter:drop-shadow(0 3px #0d2a8a);margin-bottom:-16px;position:relative;transform:rotate(4deg)}.result__title{font-family:var(--font-game);white-space:nowrap;color:var(--yellow-300);text-shadow:4px 0 #0d2a8a,-4px 0 #0d2a8a,0 4px #0d2a8a,0 -4px #0d2a8a,3px 3px #0d2a8a,-3px 3px #0d2a8a,3px -3px #0d2a8a,-3px -3px #0d2a8a,0 7px #0d2a8a;margin:0;font-size:clamp(56px,17vw,78px);font-weight:900;line-height:1}.result--lose .result__crown,.result--draw .result__crown{color:#8d9bd6;filter:drop-shadow(0 3px #1a2466)}.result--lose .result__title,.result--draw .result__title{color:#e7edff;text-shadow:4px 0 #1a2466,-4px 0 #1a2466,0 4px #1a2466,0 -4px #1a2466,3px 3px #1a2466,-3px 3px #1a2466,3px -3px #1a2466,-3px -3px #1a2466,0 7px #1a2466}.result__actions{gap:10px;width:100%;margin-top:4px;display:grid}.result__actions .btn--primary{min-height:58px;font-family:var(--font-ui);letter-spacing:0;font-size:20px;font-weight:900}.result__actions .btn--ghost{font-family:var(--font-ui);letter-spacing:0;font-weight:800}.clear-badge{border:2px solid var(--neon-blue);background:var(--navy-800);text-align:center;border-radius:18px;width:min(100%,300px);overflow:hidden}.clear-badge__top{color:#fff;border-bottom:2px solid var(--neon-blue);background:#1279ff;padding:7px 12px;font-size:15px;font-weight:800}.clear-badge__value{font-family:var(--font-num);color:#fff;padding:4px 12px 8px;font-size:clamp(48px,15vw,62px);font-weight:800;line-height:1}.result--lose .clear-badge,.result--draw .clear-badge{border-color:#8f9ad8}.result--lose .clear-badge__top,.result--draw .clear-badge__top{background:#4a56a8;border-bottom-color:#8f9ad8}.result-card{flex-direction:column;align-items:center;gap:10px;width:100%;padding:16px;display:flex}.result-card__row{align-items:center;gap:14px;display:flex}.result-card__text{flex-direction:column;display:flex}.result-card__label{color:#dbe6ff;font-size:15px;font-weight:800}.result-card__value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:38px;font-weight:800;line-height:.95}.result-card__value small{font-family:var(--font-ui);margin-left:2px;font-size:20px;font-weight:800}.result-note{color:var(--yellow-300);align-items:center;gap:6px;font-size:16px;font-weight:900;display:flex}.result-note svg{width:22px;height:22px;color:var(--yellow-400)}.result-note--dim{color:#b9c6ef;text-shadow:none}.result-meta{color:var(--text-dim);gap:18px;font-size:13px;font-weight:700;display:flex}.result-meta strong{color:#fff;font-family:var(--font-num);margin-left:4px;font-size:18px;font-weight:800}.result-meta strong small{font-family:var(--font-ui);margin-left:1px;font-size:13px;font-weight:800}@keyframes result-pop{0%{opacity:0;transform:scale(.3)rotate(-10deg)}}@keyframes fade-in{0%{opacity:0}}.vs-compare{flex-direction:column;gap:8px;width:100%;padding:14px 14px 12px;display:flex}.vs-compare__title{text-align:center;margin:0;font-size:22px;font-weight:900}.vs-compare__labels{color:#b9c6ef;grid-template-columns:1fr 1fr;font-size:14px;font-weight:900;display:grid}.vs-compare__labels span{justify-content:center;align-items:center;gap:4px;display:flex}.vs-compare__labels .is-winner{color:var(--yellow-300)}.vs-compare__labels svg{width:18px;height:18px;color:var(--yellow-400)}.vs-compare__row{border:2px solid #78aaff80;border-radius:14px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.vs-compare__side{justify-content:space-between;align-items:center;gap:8px;padding:10px;display:flex}.vs-compare__side--me{background:#123a9c}.vs-compare__side--opp{background:#6a1029}.vs-compare__side--opp .avatar{--a1:#ff7a8a;--a2:#c0203a;--ring:#ff506ed9}.vs-compare__side.is-winner{box-shadow:inset 0 0 0 2px var(--yellow-300)}.vs-compare__value{text-align:center;font-family:var(--font-num);font-variant-numeric:tabular-nums;flex:1;font-size:clamp(22px,6.6vw,28px);font-weight:800;line-height:1}.vs-compare__side.is-winner .vs-compare__value{color:var(--yellow-300)}.vs-compare__rule{text-align:center;color:#dbe6ff;margin:2px 0 0;font-size:14px;font-weight:800}.ready-overlay{z-index:22;background:#0610398c;place-items:center;padding:0 20px;display:grid;position:absolute;inset:0}.ready-card{flex-direction:column;align-items:center;gap:16px;width:min(100%,340px);padding:20px 16px;display:flex}.ready-card__title{margin:0;font-size:19px;font-weight:900}.ready-card__players{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;display:grid}.ready-card__player{flex-direction:column;align-items:center;gap:6px;min-width:0;display:flex}.ready-card__player strong{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:15px;overflow:hidden}.ready-card__state{color:#dbe6ff;background:#ffffff1a;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}.ready-card__state.is-ok{color:#06361c;background:#3ddc84}.ready-card__vs{color:var(--yellow-300);font-size:22px;font-style:italic;font-weight:900}.net-toast{left:50%;bottom:calc(var(--safe-bottom) + 34px);z-index:26;background:var(--navy-800);border:2px solid var(--yellow-400);color:#fff;text-align:center;pointer-events:none;border-radius:12px;max-width:calc(100% - 32px);padding:8px 14px;font-size:13px;font-weight:800;position:absolute;transform:translate(-50%)}.net-toast--warn{border-color:var(--danger)}.game__topbar .net-pill{padding:2px 8px;font-size:11px}.online-error{justify-content:center;align-items:center}.online-error__card{text-align:center;flex-direction:column;gap:12px;width:min(100%,340px);padding:22px 18px;display:flex}.online-error__title{margin:0;font-size:18px;font-weight:900}.online-error__text{color:#dbe6ff;margin:0 0 6px;font-size:14px;font-weight:700}.best-card{align-items:center;gap:14px;padding:10px 14px;display:flex}.best-card__icon{background:var(--navy-900);width:50px;height:50px;color:var(--yellow-400);border:2px solid #3fb4ff99;border-radius:12px;flex-shrink:0;place-items:center;display:grid}.best-card__icon svg{width:30px;height:30px}.best-card__text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.best-card__label{color:#dbe6ff;font-size:14px;font-weight:800}.best-card__value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:28px;font-weight:800;line-height:.95}.best-card__value small{font-family:var(--font-ui);margin-left:2px;font-size:16px;font-weight:800}.ranking__board{flex-direction:column;gap:12px;padding:12px;display:flex}.ranking__tabs{background:#040a28bf;border:2px solid #3fb4ff8c;border-radius:999px;grid-template-columns:1fr 1fr;padding:4px;display:grid}.ranking__tab{color:#b9c6ef;cursor:pointer;background:0 0;border:none;border-radius:999px;min-height:40px;font-size:17px;font-weight:900}.ranking__tab--on{color:#fff;background:#1279ff;box-shadow:0 0 0 2px #9fe3ff}.ranking__list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.rank-row{background:#122c82e6;border:2px solid #3fb4ff80;border-radius:14px;align-items:center;gap:12px;padding:8px 14px 8px 10px;display:flex}.rank-row--me{border-color:#9fe3ff}.rank-row__rank{width:32px;height:32px;font-family:var(--font-game);color:#dbe6ff;border-radius:50%;flex-shrink:0;place-items:center;font-size:18px;font-weight:900;display:grid}.rank-row__rank--1{color:#5c3a00;background:#f5b400}.rank-row__rank--2{color:#2a3550;background:#c3cfe8}.rank-row__rank--3{color:#3d1e08;background:#d27a3c}.rank-row__rank--4{border:1.5px dashed #8cb4ff80}.rank-row__name{white-space:nowrap;text-overflow:ellipsis;flex-direction:column;flex:1;min-width:0;font-size:15px;font-weight:800;display:flex;overflow:hidden}.rank-row__name small{color:var(--text-dim);font-size:11px;font-weight:700}.rank-row__time{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:22px;font-weight:800;line-height:1}.rank-row__time small{font-family:var(--font-ui);margin-left:2px;font-size:14px;font-weight:800}.ranking__empty{text-align:center;padding:30px 12px;font-size:15px;font-weight:800}.ranking__empty p{margin:0}.ranking__empty-sub{color:var(--text-dim);font-size:13px;font-weight:600;margin-top:8px!important}.ranking__challenge{min-height:48px;font-family:var(--font-ui);letter-spacing:0;flex-shrink:0;padding:0 22px;font-size:17px;font-weight:900}.ranking__stats{justify-content:center;gap:22px;margin:0 0 4px;display:flex}.ranking__stats div{flex-direction:column;align-items:center;display:flex}.ranking__stats dt{color:#dbe6ff;text-shadow:0 1px 2px #000a28e6;font-size:12px;font-weight:800}.ranking__stats dd{font-family:var(--font-num);text-shadow:0 1px 2px #000a28e6;margin:0;font-size:22px;font-weight:800}
