@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap";:root{--bg-dark:#090a10;--bg-card:#121624bf;--bg-glass:#ffffff0a;--border-glass:#ffffff1f;--accent-cyan:#00f0ff;--accent-pink:#ff007f;--accent-gold:#ffb703;--accent-green:#00ff87;--text-main:#f0f4f8;--text-muted:#94a3b8;--radius-lg:20px;--radius-md:12px;--font-main:"Outfit", sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:focus,:focus-visible,:active{outline:none!important}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-main);min-height:100vh;padding-top:max(env(safe-area-inset-top), var(--safe-top,14px));padding-bottom:max(env(safe-area-inset-bottom), var(--safe-bottom,14px));padding-left:max(env(safe-area-inset-left), var(--safe-left,36px));padding-right:max(env(safe-area-inset-right), var(--safe-right,36px));background-image:radial-gradient(at 10% 20%,#ff007f26 0,#0000 50%),radial-gradient(at 90% 80%,#00f0ff1f 0,#0000 50%),radial-gradient(#120924cc 0,#0000 100%);background-attachment:fixed;overflow-x:hidden}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0000005e}.glass-btn{border:1px solid var(--border-glass);color:var(--text-main);border-radius:var(--radius-md);font-family:var(--font-main);cursor:pointer;background:#ffffff0f;align-items:center;gap:8px;padding:10px 18px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.glass-btn:hover{background:#ffffff1f;border-color:#ffffff40;transform:translateY(-2px);box-shadow:0 4px 15px #00f0ff33}.glass-btn:active{transform:translateY(0)}.glass-btn-primary{background:linear-gradient(135deg, var(--accent-cyan), #0072ff);color:#000;border:none;font-weight:700;box-shadow:0 4px 20px #00f0ff66}.glass-btn-primary:hover{background:linear-gradient(135deg,#33f3ff,#1a82ff);box-shadow:0 6px 25px #00f0ff99}.game-viewport{gap:12px;width:100%;max-width:1300px;margin:0 auto;position:relative;grid-template-columns:1fr 1fr!important;display:grid!important}.game-viewport:after{content:"";pointer-events:none;z-index:2;background:linear-gradient(#00f0ff00 0%,#00f0ff73 6% 94%,#00f0ff00 100%);width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 6px #00f0ff4d}@media (width<=600px){.game-viewport{gap:6px}}.canvas-card{border-radius:var(--radius-md);border:2px solid var(--border-glass);cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;background:#000;width:100%;position:relative;overflow:visible;box-shadow:0 10px 30px #00000080;outline:none!important}@media (hover:hover) and (pointer:fine){.canvas-card:hover{border-color:var(--accent-cyan)}}.canvas-element{border-radius:var(--radius-md);pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;filter:brightness(1.18)contrast(1.03);outline:none;width:100%;height:100%;display:block}.hit-marker{border:3.5px solid var(--accent-green);width:58px;height:58px;box-shadow:0 0 16px var(--accent-green), 0 0 32px #00ff8766;pointer-events:none;z-index:20;background:0 0;border-radius:50%;justify-content:center;align-items:center;animation:.4s cubic-bezier(.175,.885,.32,1.275) hitPulse;display:flex;position:absolute;transform:translate(-50%,-50%)}.hit-marker-number{display:none}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}.page-fade-in{will-change:opacity;animation:.15s ease-out forwards pageFadeIn}@keyframes hitPulse{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)}60%{opacity:1;transform:translate(-50%,-50%)scale(1.3)}to{transform:translate(-50%,-50%)scale(1)}}.miss-marker{pointer-events:none;z-index:20;background:#ff00554d;border:4px solid #f05;border-radius:50%;justify-content:center;align-items:center;width:58px;height:58px;animation:.5s ease-out forwards missShake;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 25px #f05,0 0 50px #f05c,inset 0 0 20px #f05}@keyframes missShake{0%{opacity:1;transform:translate(-50%,-50%)scale(.3)}25%{transform:translate(-45%,-50%)scale(1.3)}50%{transform:translate(-55%,-50%)scale(1)}75%{transform:translate(-48%,-50%)scale(1.1)}to{opacity:.8;transform:translate(-50%,-50%)scale(1)}}.miss-heart-popup{font-family:var(--font-main);color:#f05;text-shadow:0 0 16px #f05,0 0 30px #8a004f,0 2px 6px #000;pointer-events:none;z-index:25;white-space:nowrap;font-size:1.8rem;font-weight:900;animation:1.8s cubic-bezier(.1,.8,.3,1) forwards floatUpMiss;position:absolute}@keyframes floatUpMiss{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)}15%{opacity:1;transform:translate(-50%,-65%)scale(1.4)}70%{opacity:1;transform:translate(-50%,-95%)scale(1.1)}to{opacity:0;transform:translate(-50%,-125%)scale(.9)}}.hint-radar{border:3px dashed var(--accent-gold);pointer-events:none;z-index:8;border-radius:50%;width:64px;height:64px;animation:1.5s linear infinite radarExpand;position:absolute;transform:translate(-50%,-50%)}@keyframes radarExpand{0%{opacity:1;box-shadow:0 0 10px var(--accent-gold);transform:translate(-50%,-50%)scale(.6)rotate(0)}to{opacity:0;box-shadow:0 0 30px var(--accent-gold);transform:translate(-50%,-50%)scale(1.6)rotate(180deg)}}.reveal-marker{border:3.5px solid var(--accent-gold);pointer-events:none;z-index:35;background:#ffb7032e;border-radius:50%;width:68px;height:68px;animation:.7s ease-in-out infinite alternate revealPulse;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 25px #ffb703e6,0 0 45px #ff007f99,inset 0 0 15px #ffb70380}@keyframes revealPulse{0%{transform:translate(-50%,-50%)scale(.92);box-shadow:0 0 20px #ffb703cc,0 0 35px #ff007f80}to{transform:translate(-50%,-50%)scale(1.22);box-shadow:0 0 40px #ffb703,0 0 70px #ff007fd9}}.magnifier-lens{border:3px solid var(--accent-cyan);pointer-events:none;z-index:40;filter:brightness(1.18)contrast(1.03);background-color:#000;background-repeat:no-repeat;border-radius:50%;width:154px;height:154px;position:absolute;overflow:hidden;box-shadow:0 0 24px #00f0ffa6,inset 0 0 14px #00000080}.timer-badge{font-family:var(--font-mono);color:var(--accent-cyan);text-shadow:0 0 10px #00f0ff80;letter-spacing:1px;font-size:2rem;font-weight:700}.timer-badge.warning{color:var(--accent-gold)}.timer-badge.danger{color:var(--accent-pink);animation:.6s infinite alternate pulseDanger}@keyframes pulseDanger{0%{opacity:1;transform:scale(1)}to{opacity:.8;transform:scale(1.08)}}.speed-popup{font-family:var(--font-main);color:var(--accent-gold);text-shadow:0 0 14px #ffb703e6,0 0 24px #ff007fcc,0 2px 6px #000;pointer-events:none;z-index:50;white-space:nowrap;font-size:1.52rem;font-weight:900;animation:2.2s cubic-bezier(.1,.8,.3,1) forwards floatUpLingering;position:absolute}@keyframes floatUpLingering{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}15%{opacity:1;transform:translate(-50%,-60%)scale(1.15)}70%{opacity:1;transform:translate(-50%,-90%)scale(1)}to{opacity:0;transform:translate(-50%,-120%)scale(.85)}}.star-icon{color:var(--accent-gold);filter:drop-shadow(0 0 4px var(--accent-gold))}.star-icon.empty{color:#fff3;filter:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner{border:3px solid #ffffff26;border-top-color:var(--accent-cyan);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}.menu-container{text-align:center;box-sizing:border-box;width:100%;max-width:750px;margin:0 auto 20px;padding:0 16px}.header-container{box-sizing:border-box;width:100%;max-width:850px;margin:0 auto 12px;padding:0 16px;transition:max-width .2s}.tutorial-card{aspect-ratio:16/10;background:#0a0d16;border-radius:12px;width:100%;max-width:260px;transition:all .35s;position:relative;overflow:hidden}@media (width>=900px){.menu-container,.header-container{max-width:1300px!important}.tutorial-banner{border-radius:20px!important;padding:20px 26px 24px!important}.tutorial-card{border-radius:16px!important;max-width:540px!important}.tutorial-header-title{letter-spacing:.8px!important;font-size:1.45rem!important}.tutorial-header-desc{margin-top:4px!important;font-size:.96rem!important}.mode-cards-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}.mode-card-item{border-radius:18px!important;padding:20px 24px!important}.start-game-btn{border-radius:16px!important;padding:18px 32px!important;font-size:1.45rem!important}.tutorial-hand-icon{width:32px!important;height:32px!important}}@media (width>=1200px){.tutorial-card{max-width:590px!important}}