
/* Shadow Ninja — experimental title/menu overhaul. Isolated from production and gameplay. */
#menu{isolation:isolate;background:#080b1a;--sn-shift-x:0px;--sn-shift-y:0px}
#menu .menuArt{overflow:hidden;transform:translate(calc(-50% + var(--sn-shift-x)),calc(-50% + var(--sn-shift-y))) scale(1.002);animation:snCinematicDrift 16s ease-in-out infinite;box-shadow:0 0 70px #060613b3}
#menu .menuArt::before{z-index:1;background:radial-gradient(circle at 63% 13%,rgba(198,228,255,.22),transparent 22%),radial-gradient(ellipse at 92% 26%,rgba(255,162,92,.12),transparent 27%);mix-blend-mode:screen;animation:snLightBreath 6s ease-in-out infinite}
#menu .menuHotspot,#menu .menuHotspot:active,#menu .menuHotspot:focus-visible{outline:none;box-shadow:none!important;border:0!important;background:transparent!important}
#menu #play{animation:none!important;border-radius:0!important;overflow:visible}
#menu #play::before{content:"";position:absolute;inset:0;pointer-events:none;clip-path:polygon(2% 25%,9% 6%,73% 8%,92% 0%,100% 26%,96% 43%,98% 69%,86% 88%,12% 97%,5% 84%,0% 64%);background:linear-gradient(100deg,transparent 0%,rgba(250,80,118,.09) 30%,rgba(255,150,161,.19) 58%,rgba(248,49,84,.10) 82%,transparent);opacity:.55;animation:snBrushPulse 3.6s ease-in-out infinite}
#menu #play::after{content:"";position:absolute;inset:5% 0;pointer-events:none;clip-path:polygon(2% 25%,10% 3%,75% 10%,94% 0%,100% 30%,94% 75%,80% 94%,10% 96%,0% 63%);background:linear-gradient(105deg,transparent 27%,rgba(255,230,242,.0) 39%,rgba(255,217,220,.22) 46%,transparent 52%);background-size:260% 100%;animation:snBrushSweep 6.4s ease-in-out infinite}
#menu #play:hover::before,#menu #play:focus-visible::before{opacity:.95}
#menu .menuHotspot:not(#play)::before{content:"";position:absolute;inset:0;clip-path:polygon(8% 0,95% 2%,100% 28%,91% 93%,4% 99%,0% 64%);background:linear-gradient(90deg,transparent,rgba(255,138,165,.18));opacity:0;transition:opacity .2s;pointer-events:none}
#menu .menuHotspot:not(#play):hover::before,#menu .menuHotspot:not(#play):focus-visible::before{opacity:1}
#menu .sn-fx{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;contain:layout paint}
#menu .sn-fx span{position:absolute;display:block;pointer-events:none}
#menu .sn-moon-glow{left:46%;top:-9%;width:41%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(195,222,255,.19) 10%,rgba(140,198,255,.09) 33%,transparent 66%);mix-blend-mode:screen;animation:snMoonAlive 9s ease-in-out infinite}
#menu .sn-lantern-glow{right:-5%;top:-5%;width:29%;height:55%;background:radial-gradient(ellipse at 72% 25%,rgba(255,190,103,.27),rgba(255,105,37,.07) 30%,transparent 63%);mix-blend-mode:screen;animation:snLanternAlive 3.4s ease-in-out infinite}
#menu .sn-mist{left:-30%;width:160%;height:27%;bottom:var(--sn-bottom);opacity:var(--sn-opacity);background:radial-gradient(ellipse at 30% 70%,rgba(157,168,222,.13),transparent 50%),radial-gradient(ellipse at 70% 65%,rgba(244,170,213,.10),transparent 48%);filter:blur(15px);animation:snMistFloat var(--sn-time) ease-in-out infinite alternate}
#menu .sn-wind-ribbon{width:var(--sn-width);height:1px;top:var(--sn-top);left:-20%;opacity:0;background:linear-gradient(90deg,transparent,rgba(245,220,241,.23),transparent);transform:rotate(-9deg);animation:snWindPass var(--sn-time) ease-in-out var(--sn-delay) infinite}
#menu .sn-petal{left:var(--sn-left);top:-10%;width:var(--sn-size);height:calc(var(--sn-size)*.65);border-radius:85% 8% 78% 12%;background:linear-gradient(150deg,#fff6ff,#ff8fc1 59%,#d74489);box-shadow:0 0 4px #fdd0e044;opacity:0;animation:snSakuraFall var(--sn-time) linear var(--sn-delay) infinite}
#menu .sn-petal.fore{filter:blur(.55px);box-shadow:0 0 5px #ffc0d044}
#menu .sn-spark{left:var(--sn-left);top:var(--sn-top);width:var(--sn-size);height:var(--sn-size);border-radius:50%;background:rgba(255,205,150,.92);box-shadow:0 0 7px 1px rgba(255,128,76,.6);opacity:0;animation:snSparkFloat var(--sn-time) ease-in-out var(--sn-delay) infinite}
#menu .sn-nightstar{left:var(--sn-left);top:var(--sn-top);width:2px;height:2px;border-radius:50%;background:#e8d9ff;box-shadow:0 0 4px rgba(194,211,255,.9);opacity:.2;animation:snStarTwinkle var(--sn-time) ease-in-out var(--sn-delay) infinite}
#menu .sn-blade-flash{left:70%;top:23%;width:13%;height:18%;transform:rotate(-35deg);background:linear-gradient(90deg,transparent 32%,rgba(255,225,227,.12) 49%,transparent 62%);mix-blend-mode:screen;opacity:0;animation:snBladeFlash 11s linear infinite}
#menu .sn-logo-shimmer{left:8%;top:5%;width:34%;height:31%;background:radial-gradient(ellipse at 35% 45%,rgba(255,195,204,.16),transparent 65%);mix-blend-mode:screen;animation:snLogoPulse 7s ease-in-out infinite}
#menu .sn-fx-vignette{inset:0;background:linear-gradient(180deg,rgba(5,7,21,.17),transparent 18%,transparent 72%,rgba(4,5,17,.19));z-index:2}
#menu[data-sn-fx="low"] .sn-petal:nth-of-type(2n),#menu[data-sn-fx="low"] .sn-nightstar,#menu[data-sn-fx="low"] .sn-wind-ribbon{display:none}
#menu[data-sn-fx="off"] .sn-fx,#menu[data-sn-fx="off"] .menuArt::before{display:none}
#menu[data-sn-fx="off"] .menuArt{animation:none}
#menu .sn-music-dock{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:9;background:#100b22db;border:1px solid #fdc9bc66;border-radius:50px;color:#ffdad2;display:flex;align-items:center;gap:7px;padding:9px 12px;font-size:11px;font-weight:800;letter-spacing:.5px;box-shadow:0 3px 18px #0007;backdrop-filter:blur(10px);min-height:37px;touch-action:manipulation}
#menu .sn-music-dock[aria-pressed="true"]{border-color:#ffc1ba9c;background:#441b37db}
#menu .sn-music-dock .sn-eq{height:13px;display:flex;align-items:end;gap:2px}
#menu .sn-music-dock .sn-eq i{display:block;width:2px;height:5px;border-radius:2px;background:#ffd9c5;animation:snEqBars .65s ease-in-out infinite alternate}
#menu .sn-music-dock .sn-eq i:nth-child(2){animation-delay:.18s;height:11px}#menu .sn-music-dock .sn-eq i:nth-child(3){animation-delay:.35s;height:7px}
#menu .sn-music-dock[aria-pressed="false"] .sn-eq i{animation:none;height:3px;opacity:.6}
#snMenuPanel{position:absolute;inset:0;z-index:45;display:none;align-items:center;justify-content:center;background:rgba(4,7,17,.68);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);padding:max(7px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#snMenuPanel.open{display:flex}
#snMenuPanel .sn-panel-card{display:flex;flex-direction:column;width:min(710px,95vw);max-height:95%;color:#f9edf2;background:linear-gradient(132deg,#111728f8,#1a1027fb 60%,#2d132af8);border:1px solid #e38492b5;border-radius:19px;box-shadow:0 0 0 1px #ffd2bf20,0 16px 70px #000d,0 0 45px #8d244322;overflow:hidden;animation:snPanelEnter .25s ease-out}
#snMenuPanel .sn-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px 10px;border-bottom:1px solid #ffffff25;background:linear-gradient(90deg,#82284445,transparent)}
#snMenuPanel .sn-panel-heading{display:flex;align-items:center;gap:10px}
#snMenuPanel .sn-panel-mark{font-size:19px;color:#f9abb9}
#snMenuPanel .sn-panel-title{margin:0;font-size:clamp(17px,2.7vw,23px);letter-spacing:2px;font-weight:950;line-height:1.1}
#snMenuPanel .sn-panel-sub{font-size:10px;letter-spacing:1px;color:#e4b7bd;margin-top:4px;text-transform:uppercase}
#snMenuPanel .sn-close{width:36px;height:36px;min-height:36px;border-radius:10px;border:1px solid #ffbcc469;background:#2c1831;color:#fff;font-size:22px;font-weight:500;flex-shrink:0}
#snMenuPanel .sn-tabs{display:flex;gap:7px;padding:10px 16px 0;overflow-x:auto;flex-shrink:0}
#snMenuPanel .sn-tab{flex:1;white-space:nowrap;min-height:36px;padding:8px 12px;border:1px solid #ffc0ca2f;background:#080e20a0;color:#f2d6df;border-radius:10px 10px 2px 2px;font-size:11px;letter-spacing:1px;font-weight:900}
#snMenuPanel .sn-tab.active{background:linear-gradient(130deg,#a92e4d,#5f2446);border-color:#ffaab0;color:white;box-shadow:0 -2px 12px #e93d6130}
#snMenuPanel .sn-body{flex:1;min-height:0;overflow:auto;padding:15px 18px 17px;overscroll-behavior:contain;touch-action:pan-y}
#snMenuPanel .sn-subtitle{margin:0 0 12px;font-size:12px;color:#e7c4d2;line-height:1.5}
#snMenuPanel .sn-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#snMenuPanel .sn-setting-card{padding:12px 13px;border:1px solid #ffd1dc24;border-radius:12px;background:linear-gradient(160deg,#2d1a35be,#0f1727bd)}
#snMenuPanel .sn-setting-label{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:12px;font-weight:850;margin-bottom:7px}
#snMenuPanel .sn-value{color:#ffbecb;font-variant-numeric:tabular-nums;font-size:11px}
#snMenuPanel .sn-help{font-size:10px;line-height:1.35;color:#aeb7cb;margin-top:6px}
#snMenuPanel input[type="range"]{display:block;width:100%;height:18px;margin:4px 0;appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer;touch-action:pan-x}
#snMenuPanel input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:8px;background:linear-gradient(90deg,#ff5079 var(--fill,50%),#3f3650 var(--fill,50%))}
#snMenuPanel input[type="range"]::-moz-range-track{height:5px;border-radius:8px;background:#3f3650}
#snMenuPanel input[type="range"]::-moz-range-progress{height:5px;background:#ff5079}
#snMenuPanel input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff5ef;border:3px solid #d43767;box-shadow:0 0 0 3px #ec537039;margin-top:-6.5px}
#snMenuPanel input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff5ef;border:3px solid #d43767}
#snMenuPanel select,#snMenuPanel .sn-choice{width:100%;padding:9px;border-radius:8px;background:#160f26;color:#ffeef3;border:1px solid #c4849b69;font-size:12px}
#snMenuPanel .sn-toggles{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#snMenuPanel .sn-chip{border:1px solid #ffa3ae65;background:#46213b;border-radius:9px;padding:9px 12px;font-size:11px;font-weight:850;min-height:36px}
#snMenuPanel .sn-chip[aria-pressed="true"]{background:#b32c50;color:white;border-color:#ffc6cf}
#snMenuPanel .sn-divider{border:0;border-top:1px solid #ffffff24;margin:14px 0}
#snMenuPanel .sn-footer{border-top:1px solid #ffffff1d;background:#0b0e1cb5;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#b8a8c0}
#snMenuPanel .sn-button{border:1px solid #ffacb87a;background:linear-gradient(120deg,#92344e,#51223c);border-radius:10px;padding:9px 14px;font-size:11px;font-weight:900;min-height:36px}
#snMenuPanel .sn-button.secondary{background:#232038}
#snMenuPanel .sn-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#snMenuPanel .sn-stat{border-radius:11px;background:#301b37;border:1px solid #ffc2cf38;padding:12px;text-align:center}
#snMenuPanel .sn-stat strong{display:block;color:#ffd2dc;font-size:20px;margin-bottom:2px}
#snMenuPanel .sn-stat span{color:#cbb5c7;font-size:10px}
#snMenuPanel .sn-controls-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#snMenuPanel .sn-control{background:#20172d;border:1px solid #ffc4ce27;border-radius:9px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}
#snMenuPanel .sn-control b{color:#ffccd2}
#pauseMenu .panel{background:linear-gradient(135deg,#0d1626f5,#291328ef);border:1px solid #d8728da8;box-shadow:0 14px 60px #000a}
#pauseMenu .panel h2{letter-spacing:2px;color:#ffd5c4}
#pauseMenu .panel button{border-radius:10px;min-height:42px}
@keyframes snCinematicDrift{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.027) saturate(1.045)}}
@keyframes snLightBreath{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes snMoonAlive{0%,100%{opacity:.4;transform:scale(.97)}50%{opacity:.93;transform:scale(1.06)}}
@keyframes snLanternAlive{0%,100%{opacity:.55}25%{opacity:.8}29%{opacity:.65}70%{opacity:1}}
@keyframes snMistFloat{0%{transform:translateX(-9%) scaleX(1)}100%{transform:translateX(12%) scaleX(1.06)}}
@keyframes snWindPass{0%,42%{opacity:0;transform:translateX(0) rotate(-10deg)}53%{opacity:.8}70%,100%{opacity:0;transform:translateX(145vw) rotate(-10deg)}}
@keyframes snSakuraFall{0%{transform:translate3d(0,-4vh,0) rotate(0);opacity:0}7%{opacity:.93}48%{transform:translate3d(var(--sn-drift),50vh,0) rotate(175deg);opacity:.87}90%{opacity:.8}100%{transform:translate3d(var(--sn-end),113vh,0) rotate(385deg);opacity:0}}
@keyframes snSparkFloat{0%,100%{transform:translate3d(0,9px,0) scale(.55);opacity:0}40%{transform:translate3d(9px,-12px,0) scale(1);opacity:.8}70%{opacity:.45}}
@keyframes snStarTwinkle{0%,100%{opacity:.12}50%{opacity:.83}}
@keyframes snLogoPulse{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes snBladeFlash{0%,79%,87%,100%{opacity:0}83%{opacity:.68}}
@keyframes snBrushPulse{0%,100%{opacity:.21}50%{opacity:.79}}
@keyframes snBrushSweep{0%,48%{background-position:100% center}70%,100%{background-position:-100% center}}
@keyframes snWindPass{0%,42%{opacity:0;transform:translateX(0) rotate(-10deg)}52%{opacity:.65}72%,100%{opacity:0;transform:translateX(150vw) rotate(-10deg)}}
@keyframes snEqBars{from{height:4px}to{height:12px}}
@keyframes snPanelEnter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-height:430px){#snMenuPanel .sn-panel-head{padding:8px 13px 7px}#snMenuPanel .sn-tabs{padding:6px 12px 0}#snMenuPanel .sn-body{padding:9px 12px}#snMenuPanel .sn-setting-card{padding:8px 10px}#snMenuPanel .sn-footer{padding:5px 12px}#snMenuPanel .sn-tab{min-height:31px}#menu .sn-music-dock{padding:6px 9px;min-height:31px;font-size:10px}}
@media(max-width:540px) and (orientation:portrait){#snMenuPanel .sn-settings-grid{grid-template-columns:1fr}#snMenuPanel .sn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){#menu .menuArt,#menu .menuArt::before,#menu .sn-fx *,#menu #play::before,#menu #play::after,#menu .sn-music-dock .sn-eq i,#snMenuPanel .sn-panel-card{animation:none!important}#menu .sn-petal,#menu .sn-spark,#menu .sn-wind-ribbon{display:none!important}}
