/* Escape Verse - story house engine (premium rooms). Dark, quiet, blood red accents. Everything scoped to #nx-story. */
#nx-story { --ns-red: #D3122F; --ns-ink: #E9E2D6; --ns-dim: rgba(233,226,214,.7); --ns-panel: #0E0D11;
  position: fixed; inset: 0; z-index: 99995; display: none; overflow: clip; background: #050506; color: var(--ns-ink); font-family: 'Manrope', system-ui, sans-serif; }
#nx-story.is-open { display: block; }
#nx-story *, #nx-story *::before, #nx-story *::after { box-sizing: border-box; letter-spacing: 0; }
#nx-story button { appearance: none; border: 0; margin: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-transform: none; box-shadow: none; border-radius: 0; transition: none; }
#nx-story img { max-width: none; }

/* start screen */
.ns-start { position: absolute; inset: 0; display: grid; align-items: center; padding: 6vh clamp(20px, 6vw, 90px); }
#nx-story.playing .ns-start { display: none; }
.ns-start-bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; filter: brightness(.45) saturate(.8); }
.ns-start::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,6,.92) 0, rgba(5,5,6,.6) 45%, rgba(5,5,6,.1) 100%); }
.ns-start-in { position: relative; z-index: 1; max-width: 560px; }
.ns-kick { margin: 0 0 12px; color: var(--ns-red); font: 600 14px/1 'Oswald', sans-serif; text-transform: uppercase; }
.ns-start h2 { margin: 0 0 18px; color: #fff !important; font: 700 clamp(44px, 6vw, 84px)/.95 'Oswald', sans-serif !important; text-transform: uppercase; }
.ns-lede { margin: 0 0 28px; font: 500 17px/1.65 'Manrope', sans-serif; color: var(--ns-dim); }
.ns-start-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ns-warn { margin: 22px 0 0; font: 500 13px/1.5 'Manrope', sans-serif; color: rgba(233,226,214,.5); }
#nx-story .ns-big { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--ns-red); color: #fff; font: 600 16px/1 'Oswald', sans-serif; text-transform: uppercase; }
#nx-story .ns-big small { font: 500 13px/1 'Manrope', sans-serif; opacity: .8; text-transform: none; }
#nx-story .ns-big.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(233,226,214,.4); }
@media (hover: hover) { #nx-story .ns-big:hover { filter: brightness(1.12); } #nx-story .ns-big.ghost:hover { box-shadow: inset 0 0 0 1px #fff; } }

/* the room */
.ns-room { position: absolute; inset: 0; display: none; }
#nx-story.playing .ns-room { display: block; }
.ns-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; touch-action: none; }
.ns-scene { position: absolute; inset: 0; transition: opacity .42s; }
.ns-scene.fade { opacity: 0; }
.ns-bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ns-layer { position: absolute; opacity: 0; transition: opacity 1s ease; pointer-events: none; background-repeat: no-repeat; }
.ns-layer.on { opacity: 1; }
.ns-spots { position: absolute; inset: 0; z-index: 5; }
#nx-story .ns-spot { position: absolute; -webkit-tap-highlight-color: transparent; }
#nx-story .ns-spot.shake { animation: nsNudge .45s ease; }
@keyframes nsNudge { 30% { box-shadow: inset 0 0 0 999px rgba(255,255,255,.04); } }
.ns-item { position: absolute; z-index: 6; height: auto !important; opacity: 0; transform: scale(.5); pointer-events: none; cursor: pointer; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); transition: opacity .5s, transform .6s cubic-bezier(.3,1.6,.5,1); }
.ns-item.on { opacity: 1; transform: none; pointer-events: auto; }
#nx-story .ns-way { position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; transform: translate(-50%, -50%); background: rgba(5,5,6,.55); color: var(--ns-ink); font: 500 13px/1 'Oswald', sans-serif; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(233,226,214,.25); }
#nx-story .ns-way svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) { #nx-story .ns-way:hover { background: rgba(211,18,47,.8); } }
.ns-mark { position: absolute; z-index: 4; pointer-events: none; font-family: 'IM Fell English', Georgia, serif; line-height: 1; opacity: .8; mix-blend-mode: multiply; }
.ns-mark.glow { mix-blend-mode: screen; text-shadow: 0 0 10px currentColor; }
.ns-mark.new { animation: nsMark 1.4s ease both; }
@keyframes nsMark { from { opacity: 0; filter: blur(4px); } }

/* darkness and the torch */
.ns-dark { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .8s; --x: 50%; --y: 50%; }
.ns-dark.black { opacity: 1; background: rgba(2,2,3,.965); }
.ns-dark.torch { opacity: 1; background: radial-gradient(circle calc(var(--rh) * .3) at var(--x) var(--y), rgba(0,0,0,0) 0, rgba(0,0,0,.1) 45%, rgba(2,2,3,.93) 100%); }
.ns-glow { position: absolute; z-index: 9; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.3); border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,230,180,.85) 0, rgba(255,190,120,.35) 32%, transparent 65%); }
.ns-glow.red { background: radial-gradient(circle, rgba(255,60,70,.85) 0, rgba(211,18,47,.35) 32%, transparent 65%); }
.ns-glow.go { animation: nsGlow 1.8s ease-out; }
@keyframes nsGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
.ns-room.leaving .ns-stage { transition: filter 1.5s, transform 1.5s; filter: brightness(3) blur(2px); transform: translate(-50%, -50%) scale(1.15); }

/* bars */
.ns-top, .ns-bottom { position: absolute; z-index: 20; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 14px clamp(12px, 2.4vw, 30px); pointer-events: none; }
.ns-top > *, .ns-bottom > button, .ns-bag { pointer-events: auto; }
.ns-top { top: 0; justify-content: space-between; background: linear-gradient(to bottom, rgba(5,5,6,.8), transparent); }
.ns-bottom { bottom: 0; align-items: flex-end; background: linear-gradient(to top, rgba(5,5,6,.85), transparent); }
#nx-story .ns-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; color: var(--ns-ink); background: rgba(5,5,6,.5); box-shadow: inset 0 0 0 1px rgba(233,226,214,.3); font: 500 14px/1 'Oswald', sans-serif; text-transform: uppercase; }
#nx-story .ns-btn.round { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
#nx-story .ns-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nx-story .ns-snd svg .b { fill: currentColor; stroke: none; }
#nx-story .ns-snd svg .w1, #nx-story .ns-snd svg .w2 { opacity: 0; }
#nx-story .ns-snd.is-on svg .w1, #nx-story .ns-snd.is-on svg .w2 { opacity: 1; }
#nx-story .ns-snd.is-on svg .x { opacity: 0; }
.ns-title { text-align: center; }
.ns-title span { display: block; color: var(--ns-red); font: 600 12px/1 'Oswald', sans-serif; text-transform: uppercase; }
.ns-title b { font: 600 clamp(17px, 2vw, 24px)/1.15 'Oswald', sans-serif; text-transform: uppercase; color: #fff; }
.ns-tools { display: flex; align-items: center; gap: 8px; }
.ns-time { font: 500 15px/1 'JetBrains Mono', monospace; color: var(--ns-dim); margin-right: 4px; }
.ns-say { flex: 1; min-width: 0; text-shadow: 0 2px 10px rgba(0,0,0,.9); transition: opacity .8s, transform .8s; pointer-events: none; }
.ns-say h4 { margin: 0 0 4px; color: #F2B8B8 !important; font: 500 clamp(14px, 1.4vw, 19px)/1.2 'Oswald', sans-serif !important; text-transform: uppercase; }
.ns-say p { margin: 0; font: 500 clamp(13px, 1.2vw, 16px)/1.55 'Manrope', sans-serif; color: var(--ns-ink); }
.ns-say.in { animation: nsIn .45s ease; }
.ns-say.out { opacity: 0; transform: translateY(6px); }
@keyframes nsIn { from { opacity: 0; transform: translateY(6px); } }
.ns-bag { display: flex; gap: 6px; }
#nx-story .ns-slot { position: relative; width: clamp(44px, 4.6vw, 60px); aspect-ratio: 1; background: rgba(20,18,22,.85); box-shadow: inset 0 0 0 1px rgba(233,226,214,.35); touch-action: none; overflow: hidden; }
#nx-story .ns-slot[aria-hidden] { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(233,226,214,.14); }
#nx-story .ns-slot img { position: absolute; left: 12%; top: 12%; width: 76% !important; height: 76% !important; object-fit: contain; pointer-events: none; }
#nx-story .ns-slot.new { animation: nsPop .6s ease; box-shadow: inset 0 0 0 2px var(--ns-red); }
#nx-story .ns-slot.lifted img { opacity: .3; }
@keyframes nsPop { 40% { transform: scale(1.15); } }
.ns-ghost { position: fixed; z-index: 100000; width: 70px; height: auto !important; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); }
.ns-log { position: absolute; z-index: 25; left: clamp(12px, 2.4vw, 30px); bottom: 74px; width: min(460px, 88vw); max-height: 50vh; overflow: auto; padding: 16px 20px; background: #141217; box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(233,226,214,.15); }
.ns-log[hidden] { display: none; }
.ns-log > div { padding: 10px 0; border-bottom: 1px solid rgba(233,226,214,.1); }
.ns-log h4 { margin: 0 0 4px; color: #F2B8B8; font: 500 14px/1.2 'Oswald', sans-serif; text-transform: uppercase; }
.ns-log p { margin: 0; font: 500 14px/1.5 'Manrope', sans-serif; color: var(--ns-dim); }

/* cards */
.ns-modal { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2,2,3,.7); }
.ns-modal.is-on { display: flex; }
.ns-card { position: relative; width: min(560px, 100%); max-height: 94vh; overflow: auto; padding: clamp(22px, 4vw, 36px); background: #121015; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(233,226,214,.14); text-align: center; animation: nsIn .35s ease; }
.ns-card.wide { width: min(780px, 100%); }
.ns-card.wobble { animation: nsWob .4s; }
@keyframes nsWob { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#nx-story .ns-x { position: absolute; right: 12px; top: 10px; width: 38px; height: 38px; font-size: 24px; line-height: 38px; color: var(--ns-dim); }
.ns-day { margin: 0 0 10px; color: var(--ns-red); font: 600 13px/1 'Oswald', sans-serif; text-transform: uppercase; }
.ns-card h3 { margin: 0 0 20px; color: #fff !important; font: 600 clamp(20px, 2.4vw, 28px)/1.15 'Oswald', sans-serif !important; text-transform: uppercase; }
.ns-final-l { margin: 0 0 16px; color: var(--ns-dim); font: 500 15px/1.6 'Manrope', sans-serif; }
.ns-row { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.ns-clues { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; text-align: left; }
.ns-clues li { padding: 10px 14px; background: rgba(255,255,255,.04); box-shadow: inset 2px 0 0 var(--ns-red); font: 500 15px/1.5 'Manrope', sans-serif; color: var(--ns-ink); }
.ns-lock { display: flex; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.ns-dial { display: grid; justify-items: center; gap: 6px; }
#nx-story .ns-dial button { width: 44px; height: 28px; color: var(--ns-dim); font-size: 14px; }
.ns-dial .num { width: 54px; height: 70px; display: grid; place-items: center; background: linear-gradient(#1d1a20, #0b0a0d); box-shadow: inset 0 0 0 1px rgba(233,226,214,.2), inset 0 8px 14px rgba(0,0,0,.6); font: 600 36px/1 'Oswald', sans-serif; color: #fff; }
.ns-lock.yes .num, .ns-lock.yes .ns-face { box-shadow: inset 0 0 0 2px #3FAE6A; }
#nx-story .ns-face { position: relative; width: 66px; height: 82px; background: linear-gradient(#1d1a20, #0b0a0d); box-shadow: inset 0 0 0 1px rgba(233,226,214,.2); display: grid; place-items: center; font: 600 34px/1 'IM Fell English', serif; color: #E9D9B6; }
#nx-story .ns-face img { position: absolute; left: 12%; top: 12%; width: 76% !important; height: 76% !important; object-fit: contain; }
#nx-story .ns-face.spin { animation: nsSpin .3s ease; }
@keyframes nsSpin { 50% { transform: rotateX(90deg); } }
.ns-show { margin: 0 0 16px; padding: 14px; background: rgba(255,255,255,.04); font: 400 26px/1.3 'IM Fell English', Georgia, serif; color: #E9D9B6; }
.ns-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#nx-story .ns-in { width: min(280px, 100%); padding: 13px 14px; background: #0A090C; color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(233,226,214,.3); font: 600 18px/1 'Oswald', sans-serif; text-transform: uppercase; text-align: center; }
.ns-form.yes .ns-in { box-shadow: inset 0 0 0 2px #3FAE6A; }
.ns-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#nx-story .ns-opt { padding: 12px 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(233,226,214,.25); color: var(--ns-ink); font: 500 15px/1.2 'Manrope', sans-serif; }
#nx-story .ns-opt.used { opacity: .3; }
#nx-story .ns-opt.yes { box-shadow: inset 0 0 0 2px #3FAE6A; }
#nx-story .ns-opt.no { opacity: .35; }
.ns-ordered { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: o; }
.ns-ordered li { counter-increment: o; min-width: 70px; height: 42px; padding: 0 10px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(233,226,214,.25); font: 500 14px/1 'Manrope', sans-serif; }
.ns-ordered li:empty::before { content: counter(o); color: rgba(233,226,214,.3); }
.ns-paper { padding: 22px 26px; text-align: left; background: linear-gradient(160deg, #e8dcc2, #cdbb96); color: #2a2018; font: 400 18px/1.55 'IM Fell English', Georgia, serif; box-shadow: inset 0 0 50px rgba(90,60,20,.45), 0 10px 30px rgba(0,0,0,.6); transform: rotate(-.5deg); }
.ns-paper p { margin: 0 0 10px; }
.ns-paper .sig { text-align: right; font-style: italic; margin: 8px 0 0; }
.ns-pic { width: 100%; background: #000 center / contain no-repeat; }
.ns-win h3 { font-size: clamp(32px, 5vw, 52px) !important; }
.ns-took { margin: -6px 0 16px; font: 600 46px/1 'Oswald', sans-serif; font-variant-numeric: tabular-nums; color: var(--ns-red); }

/* jump scare */
.ns-scare { position: absolute; inset: 0; z-index: 60; display: none; pointer-events: none; background: #000; }
.ns-scare img { width: 100% !important; height: 100% !important; object-fit: cover; }
.ns-scare.go { display: block; animation: nsScare 1.9s linear forwards; }
.ns-scare.go img { animation: nsLunge 1.9s cubic-bezier(.15,1.2,.35,1) forwards; }
/* a red flash on the first frames, then gone */
.ns-scare::after { content: ''; position: absolute; inset: 0; background: #b0001a; mix-blend-mode: multiply; opacity: 0; }
.ns-scare.go::after { animation: nsRed 1.9s steps(1) forwards; }
/* on, flicker, on, hold, then a hard cut to a faint afterimage that fades */
@keyframes nsScare { 0% { opacity: 1; } 5% { opacity: .12; } 8% { opacity: 1; } 11% { opacity: .35; } 13% { opacity: 1; } 62% { opacity: 1; } 63% { opacity: .16; } 100% { opacity: 0; } }
@keyframes nsRed { 0% { opacity: .85; } 4% { opacity: 0; } 9% { opacity: .55; } 12% { opacity: 0; } }
/* it starts in your face and keeps coming, shaking */
@keyframes nsLunge { 0% { transform: scale(1.45); filter: brightness(2.4) contrast(1.5); } 6% { transform: scale(1.16) translate(-1.6%, 1%); filter: brightness(1.1) contrast(1.25); } 10% { transform: scale(1.18) translate(1.6%, -1.2%); } 14% { transform: scale(1.2) translate(-1%, .6%); } 18% { transform: scale(1.22) translate(.6%, 0); } 62% { transform: scale(1.34); filter: brightness(1) contrast(1.2); } 100% { transform: scale(1.36); } }
/* upright phones: a wide scare would be cropped to a sliver, so show it whole and let it lunge bigger */
@media (orientation: portrait) {
  .ns-scare img { object-fit: contain; }
  .ns-scare.go img { animation-name: nsLungeP; }
}
/* the beat before: the room darkens in from the edges */
.ns-room::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.92) 100%); transition: opacity 1.2s ease-in; }
.ns-room.ns-dread::after { opacity: 1; }
.ns-room.ns-shake .ns-pan { animation: nsShake .5s linear; }
@keyframes nsShake { 0%, 100% { transform: none; } 15% { transform: translate(-8px, 4px); } 30% { transform: translate(7px, -5px); } 45% { transform: translate(-5px, 3px); } 60% { transform: translate(4px, -2px); } 80% { transform: translate(-2px, 1px); } }
@keyframes nsLungeP { 0% { transform: scale(2.1); filter: brightness(2.4) contrast(1.5); } 6% { transform: scale(1.8) translate(-2%, 1%); filter: brightness(1.1) contrast(1.25); } 10% { transform: scale(1.82) translate(2%, -1%); } 18% { transform: scale(1.85); } 62% { transform: scale(1.95); filter: brightness(1) contrast(1.2); } 100% { transform: scale(1.97); } }

/* upright phones: a tall picture at the top that swipes sideways, story and bag underneath */
.ns-pan { position: absolute; inset: 0; }
.ns-peek { display: none; }
.ns-room.port .ns-pan { inset: auto; left: 0; right: 0; top: 70px; height: var(--rh); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ns-room.port .ns-pan::-webkit-scrollbar { display: none; }
.ns-room.port .ns-stage { position: relative; left: 0; top: 0; transform: none; touch-action: pan-x; }
.ns-room.port.leaving .ns-stage { transform: scale(1.15); }
#nx-story .ns-room.port .ns-peek { display: flex; position: absolute; z-index: 15; top: calc(70px + var(--rh) / 2); width: 34px; height: 34px; margin-top: -17px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(5,5,6,.6); color: var(--ns-ink); box-shadow: inset 0 0 0 1px rgba(233,226,214,.25); opacity: 0; pointer-events: none; transition: opacity .3s; }
#nx-story .ns-room.port .ns-peek.on { opacity: 1; pointer-events: auto; }
.ns-peek.l { left: 8px; } .ns-peek.r { right: 8px; }
.ns-peek svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ns-room.port .ns-bottom { top: calc(70px + var(--rh) + 14px); bottom: auto; flex-wrap: wrap; background: none; }
.ns-room.port .ns-say { order: -1; flex-basis: 100%; }
.ns-room.port .ns-say.out { opacity: .6; transform: none; }
.ns-room.port .ns-bag { margin-left: auto; }
.ns-room.port .ns-btn span { display: none; }
.ns-room.port .ns-btn:not(.round) { width: 40px; padding: 0; justify-content: center; }
.ns-room.port .ns-time { font-size: 12px; }
@media (max-height: 520px) and (orientation: landscape) {
  .ns-top { padding: 6px 12px; } .ns-bottom { padding: 6px 12px 8px; }
  #nx-story .ns-btn { height: 32px; font-size: 12px; } #nx-story .ns-btn.round { width: 32px; }
  .ns-title span { font-size: 10px; } .ns-title b { font-size: 15px; }
  .ns-say h4 { font-size: 12px !important; } .ns-say p { font-size: 11px; }
  #nx-story .ns-slot { width: 38px; }
  .ns-card { max-height: calc(100vh - 16px); padding: 14px 20px; }
  .ns-card h3 { font-size: 18px !important; margin-bottom: 10px !important; }
  .ns-start h2 { font-size: 40px !important; } .ns-lede { font-size: 13px; margin-bottom: 14px; }
}
@media (max-width: 600px) { .ns-start { align-items: end; } .ns-lede { font-size: 15px; } }
/* the piano */
.ns-score { max-width: 340px; margin: 0 auto 14px; padding: 8px 14px 4px; background: linear-gradient(160deg, #e8dcc2, #cdbb96); box-shadow: inset 0 0 30px rgba(90,60,20,.45), 0 8px 20px rgba(0,0,0,.5); transform: rotate(-.8deg); }
.ns-score svg { display: block; width: 100%; height: auto; }
.ns-score .st { stroke: #4a3a2a; stroke-width: .9; } .ns-score .hd { fill: #2a2018; } .ns-score .sm { stroke: #2a2018; stroke-width: 1.5; }
.ns-score .hd.o { fill: none; stroke: #2a2018; stroke-width: 1.7; }
.ns-score text { font: 400 14px 'IM Fell English', Georgia, serif; fill: #2a2018; }
.ns-played { min-height: 24px; margin: 2px 0 8px; font: 400 22px/1 'IM Fell English', Georgia, serif; color: #E9D9B6; text-align: center; }
.ns-keys { position: relative; display: flex; gap: 2px; height: 150px; max-width: 420px; margin: 0 auto; padding: 0 3px 3px; background: #140e0a; box-shadow: 0 10px 24px rgba(0,0,0,.6), inset 0 6px 8px rgba(0,0,0,.7); }
#nx-story .ns-keys .w { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 12px; background: linear-gradient(#e9dfc8, #cfc1a2); border-radius: 0 0 4px 4px; box-shadow: inset 0 -7px 0 rgba(0,0,0,.14); cursor: pointer; }
#nx-story .ns-keys .w i { font: 400 15px/1 'IM Fell English', Georgia, serif; font-style: normal; color: #5a1616; background: #f4ecdc; padding: 3px 5px 2px; transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#nx-story .ns-keys .w:nth-child(even) i { transform: rotate(4deg); }
#nx-story .ns-keys .b { position: absolute; top: 0; z-index: 2; width: 7.6%; height: 60%; margin-left: -3.8%; background: linear-gradient(#2c2622, #0b0907); border-radius: 0 0 3px 3px; box-shadow: 0 3px 5px rgba(0,0,0,.6); cursor: pointer; }
#nx-story .ns-keys .down { animation: nsKey .28s ease; }
@keyframes nsKey { 35% { transform: translateY(2px); filter: brightness(.85); } }
#nx-story .ns-keys.yes .w { box-shadow: inset 0 -7px 0 rgba(63,174,106,.55); }
@media (orientation: landscape) and (max-height: 520px) { .ns-score { max-width: 240px; margin-bottom: 6px; } .ns-keys { height: 92px; max-width: 360px; } .ns-played { min-height: 18px; font-size: 17px; margin: 0 0 4px; } #nx-story .ns-keys .w { padding-bottom: 6px; } #nx-story .ns-keys .w i { font-size: 12px; } }
/* clock */
.ns-clock { width: min(230px, 60vw); margin: 0 auto 4px; }
.ns-clock svg { display: block; width: 100%; height: auto; }
.ns-clock .rim { fill: #3a2a1a; } .ns-clock .face { fill: #E8DCC2; }
.ns-clock .ticks line { stroke: #4a3a2a; stroke-width: 1.3; }
.ns-clock .nums text { font: 400 14px 'IM Fell English', serif; fill: #2a2018; text-anchor: middle; }
.ns-clock .hh, .ns-clock .mh { stroke: #1a1410; stroke-linecap: round; transform-origin: 100px 100px; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.ns-clock .hh { stroke-width: 6; } .ns-clock .mh { stroke-width: 3.5; }
.ns-clock .pin { fill: #1a1410; }
.ns-clock.yes .face { fill: #F2E9D2; }
@media (orientation: landscape) and (max-height: 520px) { .ns-clock { width: min(170px, calc(100vh - 250px)); } }
/* ways stay visible in the dark; the candle adds a little warm light where it shines */
#nx-story .ns-way { z-index: 12; }
.ns-dark.torch { background: radial-gradient(circle calc(var(--rh) * .34) at var(--x) var(--y), rgba(0,0,0,0) 0, rgba(0,0,0,.08) 40%, rgba(2,2,3,.94) 100%); }
.ns-dark.torch::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(circle calc(var(--rh) * .26) at var(--x) var(--y), rgba(255,170,90,.22) 0, rgba(255,140,60,.08) 45%, transparent 100%); animation: nsFlicker 3.2s infinite; }
@keyframes nsFlicker { 0%, 100% { opacity: 1; } 20% { opacity: .82; } 22% { opacity: .95; } 60% { opacity: .88; } 62% { opacity: 1; } }
/* chalk: a child's handwriting, broken up by a grain mask so it reads as chalk dust on the wall */
.ns-mark.chalk { font-family: 'Schoolbell', 'Rubik Dirt', cursive; mix-blend-mode: screen; opacity: .7; text-align: center; line-height: 1.02; filter: blur(.3px); text-shadow: 0 0 3px rgba(213,221,230,.3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -.55'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -.55'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ns-mark.paint { font-family: 'Schoolbell', cursive; opacity: .78; mix-blend-mode: normal; filter: blur(.2px); }
.ns-mark.stitch { font-family: 'IM Fell English', serif; font-weight: 700; mix-blend-mode: multiply; opacity: .85; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.ns-mark.etch { font-family: "IM Fell English", serif; mix-blend-mode: screen; opacity: .75; text-shadow: 0 -1px 0 rgba(0,0,0,.6); }
/* the dread you can actually see: the whole room dims and drains of colour before the scare */
.ns-room .ns-pan { transition: filter 1.4s ease-in; }
.ns-room.ns-dread .ns-pan { filter: brightness(.38) saturate(.5); }

/* the family portrait card: the painting, then its brass plaque */
.ns-paper img.ns-pic { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 14px; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.ns-paper .ns-plaque { max-width: 360px; margin: 0 auto 14px; padding: 9px 12px; text-align: center; font: 600 17px/1.4 'Oswald', sans-serif; color: #3b2a0e; background: linear-gradient(180deg, #e2c27a, #a9843e); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.35); }
.ns-paper .ns-plaque small { font: 500 12px/1 'Oswald', sans-serif; text-transform: uppercase; opacity: .8; }
.ns-paper img.ns-pic { width: auto; max-width: 100%; max-height: 38vh; }

/* the grandfather clock: a photographed antique dial, period numerals drawn on it, blued iron hands */
.ns-clock { position: relative; width: min(290px, 66vw); aspect-ratio: 1; margin: 0 auto 8px; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.ns-clock img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.ns-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ns-clock .rim, .ns-clock .face { display: none; }
.ns-clock .ring { fill: none; stroke: rgba(30,20,12,.75); stroke-width: .7; }
.ns-clock .ticks line { stroke: rgba(30,20,12,.8); stroke-width: .8; }
.ns-clock .nums text { font: 400 13px 'IM Fell English', Georgia, serif; fill: #1e1610; text-anchor: middle; opacity: .88; }
.ns-clock .hh, .ns-clock .mh { transform-origin: 100px 100px; transition: transform .45s cubic-bezier(.3,1.4,.5,1); filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.55)); }
.ns-clock .hh path, .ns-clock .mh path { fill: #1d2230; stroke: #0d0f16; stroke-width: .4; }
.ns-clock .cut { fill: #d9c9a6; }
.ns-clock .pin { fill: #9a7a3a; } .ns-clock .pin2 { fill: #e8cf8a; }
.ns-clock.yes { box-shadow: 0 0 0 2px #c9a46a, 0 14px 40px rgba(0,0,0,.6); }
@media (orientation: landscape) and (max-height: 520px) { .ns-clock { width: min(190px, calc(100vh - 240px)); } }

/* ---------- hands-on bits: digging, scraping, the telephone dial, throwing, act cards ---------- */
.ns-rub { position: relative; width: 100%; max-height: 52vh; margin: 0 auto 12px; background-repeat: no-repeat; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(233,226,214,.14); }
.ns-rub canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ns-rub canvas:active { cursor: grabbing; }
.ns-rubbar { height: 4px; margin: 0 auto 4px; width: min(260px, 70%); background: rgba(233,226,214,.12); border-radius: 2px; overflow: hidden; }
.ns-rubbar i { display: block; height: 100%; width: 0; background: #D3122F; transition: width .25s; }
@media (orientation: landscape) and (max-height: 520px) { .ns-rub { max-height: calc(100vh - 150px); width: auto; } }

.ns-rotary { position: relative; width: min(330px, 74vw); aspect-ratio: 1; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.ns-rotary img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; user-select: none; }
.ns-rotary .wheel { position: absolute; inset: 0; transform-origin: 49.5% 49.5%; }
.ns-rotary .wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ns-rotary .hole { fill: transparent; cursor: pointer; }
.ns-rotary .hole:hover { fill: rgba(255,255,255,.06); }
.ns-rotary .stop { pointer-events: none; }
.ns-dialled { min-height: 1.4em; margin: 10px 0 0; color: var(--ns-dim); font: italic 400 15px/1.4 'IM Fell English', serif; }
@media (orientation: landscape) and (max-height: 520px) { .ns-rotary { width: min(240px, calc(100vh - 150px)); } }

.ns-aim { position: absolute; inset: 0; z-index: 12; touch-action: none; cursor: crosshair; }
.ns-rock { position: absolute; width: clamp(48px, 6%, 96px); height: auto; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.8)); }
.ns-putdown { position: absolute; z-index: 30; left: 50%; top: 74px; transform: translateX(-50%); white-space: nowrap; }

.ns-act { padding: 10px 0; }
.ns-act .ns-actn { margin: 0 0 4px; color: #D3122F; font: 600 18px/1 'Oswald', sans-serif; text-transform: uppercase; }
.ns-act h3 { font-size: clamp(28px, 4vw, 44px) !important; }
.ns-act p { color: var(--ns-dim); font: 500 16px/1.6 'Manrope', sans-serif; }

.ns-blue { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.ns-blue.on { animation: nsBlue 1.1s steps(1) infinite; }
@keyframes nsBlue { 0% { opacity: .55; background: radial-gradient(ellipse at 15% 30%, rgba(40,90,255,.75), transparent 60%); } 50% { opacity: .5; background: radial-gradient(ellipse at 85% 30%, rgba(40,90,255,.7), transparent 60%); } }

/* a torch beam: whiter and tighter than a candle, and it does not flicker */
.ns-dark.torch.beam { background: radial-gradient(circle calc(var(--rh) * .24) at var(--x) var(--y), rgba(0,0,0,0) 0, rgba(0,0,0,.05) 55%, rgba(1,1,2,.97) 100%); }
.ns-dark.torch.beam::after { animation: none; background: radial-gradient(circle calc(var(--rh) * .2) at var(--x) var(--y), rgba(220,235,255,.16) 0, transparent 100%); }
#nx-story .ns-room .ns-btn.ns-putdown { width: auto; padding: 0 14px; }

/* car headlights sweeping across the room through the windows */
.ns-blue.car.on { animation: nsCar 3.4s ease-in-out 2 forwards; }
@keyframes nsCar { 0% { opacity: 0; background: linear-gradient(100deg, transparent 0%, rgba(255,250,230,.0) 30%, rgba(255,248,225,.55) 45%, transparent 60%) -100% 0 / 300% 100% no-repeat; } 30% { opacity: 1; } 100% { opacity: .2; background-position: 100% 0; } }

/* peel: drag the corner of a rug back */
.ns-peel { position: relative; width: 100%; max-height: 52vh; margin: 0 auto 12px; background-repeat: no-repeat; border-radius: 4px; overflow: hidden; touch-action: none; cursor: grab; box-shadow: inset 0 0 0 1px rgba(233,226,214,.14); }
.ns-peel:active { cursor: grabbing; }
.ns-peel-top { position: absolute; max-width: none !important; pointer-events: none; transform-origin: 50% 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.75)); }
.ns-peel-mark { position: absolute; transform: translate(-50%, -50%) rotate(-4deg); font: 400 clamp(26px, 6vw, 48px)/1 'IM Fell English', serif; color: #CBB894; mix-blend-mode: screen; opacity: .8; text-shadow: 0 -1px 0 rgba(0,0,0,.6); }
/* jigsaw: swap pieces */
.ns-jig { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; width: min(100%, calc(52vh * 4 / 3)); aspect-ratio: 4 / 3; margin: 0 auto 6px; background: #050506; }
#nx-story .ns-jp { background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); transition: transform .15s; }
#nx-story .ns-jp.on { box-shadow: inset 0 0 0 3px var(--ns-red); transform: scale(.96); }
#nx-story .ns-jp.hole { background: repeating-linear-gradient(45deg, #121015 0 8px, #17141b 8px 16px); }
.ns-jig.yes { gap: 0; transition: gap .5s; }
/* route: follow the map */
.ns-route .ns-pic { margin: 0 auto 10px; max-height: 40vh; border-radius: 4px; transition: background-image .2s; }
.ns-route .ns-final-l { margin: 0 0 10px; }
.ns-route-n { margin: 10px 0 0; font-size: 13px; color: var(--ns-dim); }
.ns-route-ref { margin: 10px 0 0; }
/* pipes: beat the water */
.ns-pipes-wrap { position: relative; margin: 0 auto; padding: 12px 22px; background: #0b0f12; border-radius: 4px; overflow: hidden; }
.ns-water { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(rgba(70,110,130,.55), rgba(20,40,55,.8)); transition: height 1s linear; pointer-events: none; z-index: 2; }
.ns-water::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(ellipse at 50% 100%, rgba(160,200,220,.35), transparent 70%); animation: nsWave 1.8s ease-in-out infinite; }
@keyframes nsWave { 50% { transform: translateX(12px); } }
.ns-clock60 { position: relative; z-index: 3; margin: 0 0 10px; font: 400 15px/1 'Oswald', sans-serif; color: var(--ns-dim); }
.ns-clock60 b { font-size: 26px; color: var(--ns-ink); }
.ns-clock60.hot b { color: var(--ns-red); animation: nsGrip .5s infinite; }
.ns-pipes { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(var(--w), 1fr); width: min(100%, calc(var(--w) * 13vh)); margin: 0 auto; gap: 3px; }
#nx-story .ns-pp { position: relative; aspect-ratio: 1; background: rgba(233,226,214,.06); box-shadow: inset 0 0 0 1px rgba(233,226,214,.12); }
.ns-pp svg { width: 100%; height: 100%; display: block; transition: transform .15s; }
.ns-pp path.o { stroke: #3b3430; stroke-width: 26; fill: none; }
.ns-pp path.i { stroke: #8a6d4a; stroke-width: 16; fill: none; }
.ns-pp circle { fill: #8a6d4a; }
.ns-pp.wet path.i, .ns-pp.wet circle { stroke: #5FA8C8; fill: #5FA8C8; }
.ns-pp.wet circle { stroke: none; }
.ns-pp.in::before, .ns-pp.out::after { content: ''; position: absolute; top: 37%; height: 26%; width: 22px; background: #3b3430; }
.ns-pp.in::before { right: 100%; background: #5FA8C8; }
.ns-pp.out::after { left: 100%; }
.ns-pipes-wrap.yes .ns-water { height: 0 !important; transition: height 1s ease; }
@media (orientation: landscape) and (max-height: 520px) {
  .ns-jig { width: min(100%, calc((100vh - 150px) * 4 / 3)); }
  .ns-route .ns-pic { max-height: calc(100vh - 250px); width: auto; }
  .ns-pipes-wrap { padding: 6px 22px; }
  .ns-clock60 { margin-bottom: 4px; }
  .ns-pipes { width: min(100%, calc(var(--w) * (100vh - 260px) / var(--h))); }
}
/* a creature crossing the picture */
.ns-crawl { position: absolute; z-index: 5; pointer-events: none; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) brightness(.8); }
/* a call light blinking on the wall */
.ns-calllight { position: absolute; z-index: 4; width: 2.6%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, #fff2ee 0, #ff3b30 18%, rgba(255,30,20,.55) 34%, rgba(255,0,0,0) 70%); animation: nsBlink 1.1s ease-in-out infinite; }
@keyframes nsBlink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .1; } }
/* fire that moves */
.ns-layer.flame { animation: nsFlick .14s ease-in-out infinite alternate; }
@keyframes nsFlick { from { filter: brightness(1) saturate(1); } to { filter: brightness(1.22) saturate(1.25); } }
.ns-fireglow { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 45% 60% at 74% 70%, rgba(255,120,30,.38), rgba(255,60,0,.12) 55%, transparent 80%); animation: nsGlowF 1.3s ease-in-out infinite; }
@keyframes nsGlowF { 0%, 100% { opacity: .65; } 30% { opacity: 1; } 55% { opacity: .5; } 80% { opacity: .9; } }
.ns-embers { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ns-embers i { position: absolute; bottom: 30%; width: 4px; height: 4px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255,120,30,.8); opacity: 0; animation: nsEmber 3s linear infinite; }
@keyframes nsEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(-30px, -55vh); opacity: 0; } }
.ns-firecount { position: absolute; z-index: 45; top: 58px; left: 50%; transform: translateX(-50%); margin: 0; pointer-events: none; font: 400 14px/1 'Oswald', sans-serif; color: var(--ns-ink); text-shadow: 0 2px 8px #000; white-space: nowrap; }
.ns-firecount b { font-size: 26px; margin-right: 4px; }
.ns-firecount.hot b { color: var(--ns-red); animation: nsGrip .5s infinite; }
@media (orientation: landscape) and (max-height: 520px) { .ns-firecount { top: 2px; } .ns-firecount b { font-size: 20px; } }
/* a rub or peel box keeps the shape of the bit of picture it shows: never wider than the card, never taller than the screen allows */
.ns-rub, .ns-peel { width: min(100%, calc(52vh * var(--ar, 1.78))); max-height: none; }
@media (orientation: landscape) and (max-height: 520px) { .ns-rub, .ns-peel { width: min(100%, calc((100vh - 150px) * var(--ar, 1.78))); max-height: none; } }
.ns-layer[data-layer="inferno"] { transition: opacity 1s ease, -webkit-mask-image 1s linear, mask-image 1s linear; }
.ns-fire-in { display: block; margin-top: 4px; font: 400 14px/1 'Oswald', sans-serif; }
.ns-fire-in b { font-size: 22px; }
.ns-fire-in.hot b { color: var(--ns-red); }
/* wires: a tangle on the bomb */
.ns-wires { width: min(100%, calc(46vh * 4 / 3)); margin: 0 auto; background: radial-gradient(ellipse at 50% 40%, #2a2420, #120f0d); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(233,226,214,.12); }
.ns-wires svg { display: block; width: 100%; height: auto; }
.ns-wires .box { fill: #6b5532; stroke: #2b2116; stroke-width: 2; }
.ns-wires .post { fill: #9b8155; stroke: #2b2116; stroke-width: 1.5; }
.ns-wires .post.det { fill: #8c2a1e; }
.ns-wires .lbl { fill: rgba(233,226,214,.7); font: 400 11px 'Oswald', sans-serif; }
.ns-wires .w { cursor: pointer; }
.ns-wires .w .hit { stroke: transparent; stroke-width: 14; fill: none; }
.ns-wires .w .c { stroke-width: 3.2; fill: none; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.ns-wires .w.cut .c { stroke-dasharray: 6 5; opacity: .45; }
.ns-wires .snip { fill: #E9E2D6; }
.ns-wires.yes { box-shadow: inset 0 0 0 2px #3FAE6A; }
/* the clock turner */
.ns-turner { width: min(56vw, 230px); margin: 0 auto 12px; }
.ns-turner svg { display: block; width: 100%; height: auto; }
.ns-turner .rim { fill: #3b2d1d; } .ns-turner .face { fill: #e7dcc4; }
.ns-turner text { font: 400 13px 'IM Fell English', serif; fill: #2a2016; }
.ns-turner .hh, .ns-turner .mh { stroke: #1b140e; stroke-linecap: round; transform-origin: 100px 100px; }
.ns-turner .hh { stroke-width: 5; } .ns-turner .mh { stroke-width: 3; }
.ns-turner .pin { fill: #1b140e; }
.ns-turner .win { fill: #87a6c6; transition: fill .8s; }
.ns-turner .sun { fill: #f2c14e; transition: opacity .8s; } .ns-turner .moon { fill: #e9e2d6; opacity: 0; transition: opacity .8s; }
.ns-turner.night .win { fill: #172338; } .ns-turner.night .sun { opacity: 0; } .ns-turner.night .moon { opacity: 1; }
/* the fight */
.ns-fight { position: relative; width: min(100%, calc(48vh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto 10px; background: center / cover no-repeat; border-radius: 4px; touch-action: manipulation; cursor: pointer; overflow: hidden; }
.ns-fight.hit { animation: nsShakeF .12s; }
.ns-fight.cut { box-shadow: inset 0 0 0 999px rgba(211,18,47,.35); }
@keyframes nsShakeF { 50% { transform: translate(4px, -3px); } }
.ns-dodge { position: absolute; inset: auto 0 8% 0; display: none; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.ns-dodge.on { display: flex; }
.ns-dodge p { width: 100%; margin: 0; font: 400 28px/1 'Oswald', sans-serif; color: #fff; text-shadow: 0 2px 10px #000; }
.ns-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ns-meters p { margin: 0; font: 400 13px/1.4 'Oswald', sans-serif; color: var(--ns-dim); }
.ns-meters i { display: block; height: 6px; background: rgba(233,226,214,.12); border-radius: 3px; overflow: hidden; }
.ns-meters b { display: block; height: 100%; width: 0; background: #3FAE6A; transition: width .1s linear; }
.ns-meters .him b { background: var(--ns-red); }
/* the operation */
.ns-op { position: relative; width: min(100%, calc(44vh * 4 / 3)); margin: 0 auto 8px; background: center / cover no-repeat; border-radius: 4px; touch-action: none; cursor: crosshair; }
.ns-op svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ns-op .chan { stroke: rgba(233,226,214,.25); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ns-op .line { stroke: rgba(211,18,47,.7); stroke-width: .4; stroke-dasharray: 1 1; fill: none; }
.ns-op .go { fill: #8a6d4a; } .ns-op .end { fill: none; stroke: #3FAE6A; stroke-width: .5; }
.ns-op .shard { fill: #8a6d4a; stroke: #2b2116; stroke-width: .3; }
.ns-tray { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
#nx-story .ns-tool { display: grid; justify-items: center; gap: 2px; width: 72px; padding: 6px 4px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(233,226,214,.16); }
#nx-story .ns-tool img { width: 40px; height: 40px; object-fit: contain; }
#nx-story .ns-tool span { font: 500 11px/1.2 'Manrope', sans-serif; color: var(--ns-dim); }
#nx-story .ns-tool.on { box-shadow: inset 0 0 0 2px var(--ns-red); }
@media (orientation: landscape) and (max-height: 520px) {
  .ns-wires { width: min(100%, calc((100vh - 170px) * 4 / 3)); }
  .ns-turner { width: min(36vh, 160px); }
  .ns-fight { width: min(100%, calc((100vh - 180px) * 16 / 9)); }
  .ns-op { width: min(100%, calc((100vh - 220px) * 4 / 3)); }
  #nx-story .ns-tool { width: 58px; padding: 3px; } #nx-story .ns-tool img { width: 28px; height: 28px; }
}
/* a cut scene */
.ns-cut { position: absolute; inset: 0; z-index: 60; background: #000; transition: opacity .9s; }
.ns-cut.out { opacity: 0; }
.ns-cut-i { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 6s ease-out; display: flex; align-items: flex-end; justify-content: center; }
.ns-cut-i.on { opacity: 1; transform: scale(1.12); }
.ns-cut-i p { margin: 0 0 7vh; padding: 0 20px; max-width: 760px; text-align: center; font: 400 clamp(16px, 2.2vw, 22px)/1.4 'IM Fell English', serif; color: #E9E2D6; text-shadow: 0 2px 12px #000; }
.ns-audio { margin: 6px 0 12px; }
.ns-crawl.ghost { filter: blur(2px) brightness(0); mix-blend-mode: multiply; }
/* the bar over the top of the picture only takes taps on its buttons: the picture under the title stays tappable */
#nx-story .ns-top, #nx-story .ns-top .ns-title, #nx-story .ns-where { pointer-events: none; }
#nx-story .ns-top button, #nx-story .ns-top a { pointer-events: auto; }
/* simon: animals to call back */
.ns-simon { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 0 auto 10px; max-width: 520px; }
#nx-story .ns-sim { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(233,226,214,.16); border-radius: 10px; transition: transform .15s; }
#nx-story .ns-sim img { width: 60px; height: 60px; object-fit: contain; }
#nx-story .ns-sim span { font: 500 13px/1.2 'Manrope', sans-serif; color: var(--ns-ink); }
#nx-story .ns-sim.lit { animation: nsSim .6s ease; }
@keyframes nsSim { 30% { transform: scale(1.15); box-shadow: inset 0 0 0 3px #E8B84A; background: rgba(232,184,74,.2); } }
.ns-simdots li.on { background: #3FAE6A; }
@media (orientation: landscape) and (max-height: 520px) { #nx-story .ns-sim img { width: 40px; height: 40px; } #nx-story .ns-sim { padding: 6px 4px; } }
.ns-ordered.ns-simdots { gap: 8px; }
.ns-ordered.ns-simdots li { min-width: 14px; width: 14px; height: 14px; padding: 0; border-radius: 50%; }
.ns-ordered.ns-simdots li:empty::before { content: none; }
/* logged in, WordPress puts its admin bar over the top of the page: hide it while a game is open */
body:has(#nx-story.is-open) #wpadminbar { display: none !important; }
/* the fruit machine */
.ns-slots { position: relative; margin: 0 auto 10px; padding: 16px; max-width: 460px; border-radius: 18px; background: linear-gradient(#c8102e, #8f0b20); box-shadow: inset 0 0 0 4px #E8B84A, 0 10px 30px rgba(0,0,0,.5); }
.ns-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 10px; background: #fff8ec; box-shadow: inset 0 4px 10px rgba(0,0,0,.35); }
.ns-reel { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); overflow: hidden; }
.ns-strip img { width: 74%; height: auto; display: block; margin: 0 auto; transition: transform .07s; }
.ns-strip.roll img { filter: blur(1.5px); transform: translateY(6%); }
.ns-spins { margin: 10px 0 0; font: 400 15px/1 'Oswald', sans-serif; color: #fff8ec; }
.ns-spins b { font-size: 22px; color: #E8B84A; }
.ns-jam { display: none; position: absolute; inset: 0; margin: 0; place-items: center; font: 600 40px/1 'Oswald', sans-serif; color: #fff; text-shadow: 0 3px 12px #000; transform: rotate(-8deg); pointer-events: none; }
.ns-slots.jam .ns-jam { display: grid; }
.ns-slots.jam .ns-reels { filter: grayscale(.6) brightness(.8); }
.ns-slots.shake { animation: nsShakeF .15s 3; }
.ns-slots.win { animation: nsWin .4s 4; }
@keyframes nsWin { 50% { box-shadow: inset 0 0 0 4px #fff, 0 0 40px #E8B84A; } }
/* the claw grabber */
.ns-claw { position: relative; height: min(46vh, 300px); margin: 0 auto 10px; max-width: 520px; border-radius: 12px; overflow: hidden; background: linear-gradient(rgba(150,210,255,.25), rgba(150,210,255,.08)), linear-gradient(transparent 70%, #d9b36a 70%); box-shadow: inset 0 0 0 3px rgba(233,226,214,.4); }
.ns-clawarm { position: absolute; top: 0; left: 10%; width: 12%; transform: translateX(-50%); height: 30%; transition: height .8s ease; z-index: 2; }
.ns-clawarm .rope { position: absolute; left: 50%; top: 0; bottom: 30%; width: 3px; background: #ccc; transform: translateX(-50%); }
.ns-clawarm svg { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; fill: none; stroke: #ddd; stroke-width: 2.5; stroke-linecap: round; }
.ns-clawarm.down { height: 78%; }
.ns-clawarm.got { height: 30%; transition-delay: .2s; }
.ns-prize { position: absolute; bottom: 6%; height: auto; transform: translateX(-50%); transition: bottom .8s ease .2s; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.ns-prize.up { bottom: 72%; }
@media (orientation: landscape) and (max-height: 520px) { .ns-slots { max-width: 300px; padding: 10px; } .ns-claw { height: calc(100vh - 210px); } }
/* pipes take the tap on the square itself, at once, with no double-tap zoom wait */
#nx-story .ns-pp { touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ns-pp svg { pointer-events: none; }

/* no double-tap zoom inside the game */
:where(#nx-story, #nx-story *) { touch-action: manipulation; }
.ns-peel-mark, .ns-peel-mark img { pointer-events: none; }
@media (max-width: 600px) { #nx-story .ns-tool { width: 60px; padding: 4px 2px; } #nx-story .ns-tool img { width: 32px; height: 32px; } #nx-story .ns-tool span { font-size: 10px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .ns-card:has(.ns-pipes-wrap) > .ns-final-l, .ns-card:has(.ns-pipes-wrap) > .ns-day { display: none; }
  .ns-card:has(.ns-pipes-wrap) h3 { margin-bottom: 4px; }
  .ns-pipes { width: min(100%, calc(var(--w) * (100vh - 150px) / var(--h))); }
  .ns-turner { width: min(30vh, 130px); margin-bottom: 6px; }
  .ns-card:has(.ns-turner) > .ns-final-l { font-size: 13px; margin-bottom: 6px; }
}