/* Shadow Ninja Gameplay Feel Update 01. Playtest-only HUD/skills styles. */
:root{--snf-ink:#090d1a;--snf-panel:#12182af2;--snf-crimson:#d83f65;--snf-gold:#f4c881;--snf-mist:#d6d8e8}
#hud{z-index:8!important;align-items:start!important;top:max(8px,env(safe-area-inset-top))!important}
#hud>div{background:linear-gradient(145deg,rgba(10,12,27,.96),rgba(34,19,42,.91))!important;border:1px solid rgba(255,193,185,.46)!important;border-radius:13px!important;box-shadow:0 8px 25px #0009,inset 0 1px #ffffff17!important}
#hud>div:first-child{min-width:170px!important;padding:8px 10px!important}
#hud .right{background:linear-gradient(120deg,#180e28e8,#27182bdf)!important;border-color:#cf8e9a73!important}
#hud .right #stageName{color:var(--snf-gold)!important;font-size:clamp(10px,1.25vw,14px)!important;letter-spacing:1.25px!important}
#hud #hp{display:none!important}
#snf-health-title{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#ffbac3;font-weight:950}
#snf-health-title strong{color:#ffe7e7;font-variant-numeric:tabular-nums;font-size:11px}
#snf-health-track{height:9px;border:1px solid #ff92947c;border-radius:20px;background:#260f24;overflow:hidden;margin:5px 0 6px}
#snf-health-fill{height:100%;width:100%;border-radius:20px;background:linear-gradient(90deg,#aa1d42,#fc6580,#ffd0ac);box-shadow:0 0 9px #f85b7f7a;transition:width .2s}
#hud #xpTrack{height:6px;border:1px solid #e9b2f077;background:#150e24}
#hud #xpFill{background:linear-gradient(90deg,#8f3ed0,#df8bed,#f9d1f0)!important}
#hud #xpLabel{color:#e3c0ff!important;font-size:10px!important;margin-top:6px!important}
#hud .sub{color:#eed2a0!important;font-size:10px!important}
#snf-quick{position:fixed;right:calc(max(8px,env(safe-area-inset-right)) + 52px);top:max(8px,env(safe-area-inset-top));z-index:12;min-width:42px;height:42px;padding:0 7px;border-radius:12px;border:1px solid #f8c7ac9e;background:linear-gradient(145deg,#442041ed,#1c1a35eb);box-shadow:0 3px 14px #0008;color:#ffe3d6;font-size:20px;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
#snf-quick:active,#pause:active{transform:scale(.94);filter:brightness(1.2)}
#snf-quick .snf-point-badge{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;border-radius:12px;padding:1px 4px;display:none;background:#ffba68;border:1px solid #ffefe2;color:#2b1520;font-size:10px;font-weight:1000;box-shadow:0 0 10px #f3aa63ba}
#snf-quick.has-points .snf-point-badge{display:block}
#pause{z-index:12!important;top:max(8px,env(safe-area-inset-top))!important;right:max(8px,env(safe-area-inset-right))!important;width:42px!important;height:42px!important;padding:0!important;border-radius:12px!important;font-size:0!important;background:linear-gradient(145deg,#442041ed,#1c1a35eb)!important;border:1px solid #f8c7ac9e!important}
#pause::after{content:"⚙";font-size:24px;color:#ffe3d6;line-height:1}
#qualityBtn,#soundBtn{display:none!important}
#bossbar{background:linear-gradient(130deg,#160d22ec,#321a2cec)!important;border-color:#e9ad87ad!important}
#actions button{border-color:#ffcbb2b8!important}
#snf-target-hint{position:fixed;left:50%;bottom:clamp(12px,19vh,120px);transform:translateX(-50%);z-index:6;pointer-events:none;display:none;text-align:center;background:#0b1224b0;padding:5px 11px;border:1px solid #7ff2d2ab;border-radius:20px;color:#b7ffe5;font-size:10px;letter-spacing:1px;font-weight:900;text-shadow:0 1px #000}
#snf-hit-indicator{position:fixed;left:50%;top:37%;transform:translate(-50%,-50%);z-index:11;pointer-events:none;opacity:0;color:#fff0bc;font-weight:1000;font-size:24px;letter-spacing:2px;text-shadow:0 0 10px #f94,0 2px #000}
#snf-hit-indicator.show{animation:snf-hitpop .35s ease-out both}
@keyframes snf-hitpop{0%{opacity:0;transform:translate(-50%,-30%) scale(.65)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-100%) scale(1.18)}}
#pauseMenu.snf-covered{visibility:hidden!important;pointer-events:none!important}
#snf-overlay[hidden]{display:none!important}
#snf-overlay{position:fixed;inset:0;z-index:48;background:#040712c4;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;padding:max(9px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
#snf-shell{width:min(760px,96vw);max-height:96%;display:flex;flex-direction:column;overflow:hidden;color:#fff1ea;background:linear-gradient(145deg,#1b1528,#0c1325 62%,#251429);border:1px solid #dc8d99b3;box-shadow:0 22px 70px #000d,0 0 35px #78264d28;border-radius:18px}
#snf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;background:linear-gradient(90deg,#72254491,transparent);border-bottom:1px solid #f4c4c52d}
#snf-head h2{margin:0;font-size:clamp(16px,2.2vw,23px);letter-spacing:2px}
#snf-head p{font-size:10px;color:#d9b6ca;margin:3px 0 0;text-transform:uppercase;letter-spacing:1px}
#snf-close{border:1px solid #f7c0c585;border-radius:10px;background:#352239;color:#fff;width:38px;height:35px;flex-shrink:0;font-size:22px;touch-action:manipulation}
#snf-tabs{padding:9px 13px 0;display:flex;gap:7px;overflow-x:auto}
#snf-tabs button{min-height:37px;flex:1;border-radius:10px 10px 2px 2px;background:#101527;border:1px solid #dc9eaa55;color:#e0c9d5;padding:8px 12px;font-size:11px;letter-spacing:.7px}
#snf-tabs button.active{background:linear-gradient(135deg,#993351,#51223d);color:#fff;border-color:#ffc0b5}
#snf-body{min-height:0;overflow:auto;padding:13px 16px 15px;touch-action:pan-y;overscroll-behavior:contain}
#snf-body p{font-size:12px;line-height:1.5;color:#d8c3d2;margin:0 0 10px}
#snf-points{display:inline-flex;border:1px solid #f9cba77c;border-radius:8px;background:#33243a;padding:7px 11px;color:#ffe4a6;font-size:12px;font-weight:950;gap:7px;align-items:center}
.snf-branch-nav{display:flex;gap:7px;margin:10px 0}
.snf-branch-nav button{min-height:36px;flex:1;border:1px solid #a68cab77;border-radius:9px;background:#1c1b35;font-size:11px}
.snf-branch-nav button.active{background:#8e3052;border-color:#ffd1ca}
.snf-skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.snf-skill{border-radius:12px;border:1px solid #f5bdc64b;background:linear-gradient(145deg,#271b34,#121b2d);padding:12px;min-width:0}
.snf-skill.locked{opacity:.7}
.snf-skill-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.snf-skill h3{font-size:14px;color:#ffe4d7;margin:0 0 5px}
.snf-skill .snf-level{font-size:11px;font-weight:900;color:#f5b3ce;white-space:nowrap}
.snf-skill p{margin:5px 0 8px!important;font-size:11px!important}
.snf-skill .snf-meter{display:flex;gap:4px;margin:9px 0}
.snf-skill .snf-meter span{height:6px;flex:1;border-radius:6px;background:#403044}
.snf-skill .snf-meter span.on{background:linear-gradient(90deg,#bc3c6f,#ffc39b)}
.snf-skill button{border:1px solid #ffbfc8a9;background:linear-gradient(135deg,#a03758,#632546);border-radius:8px;padding:9px 11px;font-size:11px;min-height:36px;width:100%;touch-action:manipulation}
.snf-skill button:disabled{opacity:.45}
#snf-footer{border-top:1px solid #ffffff25;padding:9px 14px;display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:10px;color:#bcb0c5;background:#0b0f1c}
.snf-action{border:1px solid #f7babc86;background:linear-gradient(115deg,#963753,#51243e);border-radius:9px;padding:8px 12px;font-size:11px;min-height:36px;touch-action:manipulation}
.snf-action.secondary{background:#26213a}
.snf-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.snf-setting{border:1px solid #e7aec64d;background:#1d2035;border-radius:10px;padding:10px}
.snf-setting label{font-size:11px;display:flex;justify-content:space-between;gap:6px;font-weight:850}
.snf-setting input[type=range]{width:100%;margin:13px 0 7px;height:18px;accent-color:#e95b83;touch-action:pan-x}
.snf-setting .snf-value{color:#ffe0bc;font-variant-numeric:tabular-nums}
.snf-setting small{display:block;color:#b8b1ca;font-size:10px;line-height:1.4}
.snf-setting select{width:100%;margin-top:9px;background:#111526;border:1px solid #e7aec670;color:#fff;border-radius:8px;padding:9px;font-size:12px}
.snf-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.snf-controls>div{padding:9px;border-radius:9px;border:1px solid #c38eaa66;background:#1a1d30;font-size:11px;display:flex;justify-content:space-between;gap:7px}
.snf-controls strong{color:#ffd4b2}
@media(max-height:440px){#hud>div:first-child{min-width:145px!important;padding:5px 8px!important}#snf-health-title{font-size:9px}#snf-health-track{height:7px;margin:3px 0 4px}#snf-quick,#pause{width:36px!important;height:36px!important}#snf-quick{right:calc(max(8px,env(safe-area-inset-right)) + 44px);font-size:17px}#pause::after{font-size:20px}#snf-head{padding:7px 12px}#snf-tabs{padding:5px 11px 0}#snf-tabs button{min-height:31px;padding:5px 8px}#snf-body{padding:9px 12px}#snf-footer{padding:5px 10px}.snf-skill{padding:8px}.snf-skill h3{font-size:12px}.snf-skill p{font-size:10px!important}.snf-setting{padding:7px}}
@media(max-width:620px) and (orientation:portrait){.snf-skill-grid,.snf-settings-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#snf-hit-indicator.show{animation:none;opacity:1}}
body:has(#menu:not([style*="display: none"]):not([style*="display:none"])) #snf-quick{display:none}
body:has(#end[style*="display:flex"]) #snf-quick{display:none}