/* Escape Verse - in-game styles (The Skeleton's Curse). Everything lives under #nx-game. */
#nx-game { position: fixed; inset: 0; z-index: 99995; display: none; background: #000; color: var(--nx-text); font-family: var(--nx-body); user-select: none; -webkit-user-select: none; overflow: hidden; touch-action: none; }
#nx-game.is-open { display: block; }
html.nx-game-open, html.nx-game-open body { overflow: hidden !important; }
#nx-game img { max-width: none; height: auto; }

/* ---------- stage: a 16:9 box that fits the screen ---------- */
.ng-stage { position: absolute; left: 50%; top: 50%; width: var(--sw, 100vw); height: var(--sh, 56.25vw); transform: translate(-50%, -50%); overflow: hidden; background: #000; }
.ng-walls { position: absolute; inset: 0; display: flex; width: 200%; transition: transform 1.1s cubic-bezier(.65,0,.25,1); will-change: transform; }
.ng-stage.on-door .ng-walls { transform: translateX(-50%); }
.ng-wall { position: relative; width: 50%; height: 100%; flex: none; overflow: hidden; }
.ng-wall > .ng-bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.ng-hit { position: absolute; z-index: 6; cursor: pointer; border-radius: 10px; outline: none; -webkit-tap-highlight-color: transparent; }
.ng-hit:focus-visible { box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.ng-hit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse, rgba(255,230,200,.08), transparent 70%); opacity: 0; transition: opacity .3s; }
@media (hover: hover) { .ng-hit:hover::after { opacity: 1; } }
.ng-hit.is-gone { display: none; }

/* darkness: one big layer with a hole, moved by transform so dragging the lantern never repaints */
.ng-dark { position: absolute; z-index: 10; inset: 0; pointer-events: none; background: rgba(2,1,4,.86); transition: opacity 1s; }
.ng-hole { position: absolute; z-index: 10; left: 0; top: 0; width: var(--hd, 1200px); height: var(--hd, 1200px); margin: calc(var(--hd, 1200px) / -2) 0 0 calc(var(--hd, 1200px) / -2); pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(circle closest-side, rgba(2,1,4,0) 0, rgba(2,1,4,0) calc(var(--lr) * .45), rgba(2,1,4,.35) calc(var(--lr) * .75), rgba(2,1,4,.74) var(--lr), rgba(2,1,4,.74) 100%); transition: opacity .5s; }
.ng-stage.is-lit .ng-dark { opacity: 0; }
.ng-stage.is-lit .ng-hole { opacity: 1; }
.ng-stage.is-lit.lamp-off .ng-hole { opacity: 0; }
.ng-stage.is-lit.lamp-off .ng-dark { opacity: 1; }
.ng-stage .nx-lamp { z-index: 30; }
/* candles keep glowing through the dark */
.ng-glow { position: absolute; z-index: 11; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,170,100,.55) 0, rgba(255,90,60,.18) 30%, transparent 65%); animation: ngFlick 3s infinite; }
.ng-glow.big { width: 22%; background: radial-gradient(circle, rgba(255,190,120,.6) 0, rgba(255,110,60,.22) 30%, transparent 65%); }
@keyframes ngFlick { 0%, 100% { opacity: 1; } 12% { opacity: .82; } 14% { opacity: 1; } 47% { opacity: .9; } 70% { opacity: .78; } 72% { opacity: 1; } }

/* ink that only shows inside the lantern light: a round window moved by transform */
.ng-win { position: absolute; z-index: 12; left: 0; top: 0; border-radius: 50%; overflow: hidden; pointer-events: none; visibility: hidden; will-change: transform;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0, #000 40%, rgba(0,0,0,.5) 70%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 0, #000 40%, rgba(0,0,0,.5) 70%, transparent 100%); }
.ng-stage.is-lit:not(.lamp-off) .ng-win { visibility: visible; }
.ng-ink { position: absolute; left: 0; top: 0; will-change: transform; }
.ng-inkwall { position: absolute; top: 0; height: 100%; }
.ng-scrawl { position: absolute; color: #d3122f; font: 400 clamp(14px, 2.6vw, 44px)/1.05 'Rubik Dirt', 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0; text-shadow: 0 0 12px rgba(211,18,47,.6); white-space: nowrap; opacity: .92; }
.ng-mark { position: absolute; display: flex; align-items: center; gap: .3em; transform: translate(-50%, -50%) rotate(var(--r, -5deg)); color: #e8203f; font: 400 clamp(18px, 3.4vw, 58px)/1 'Rubik Dirt', 'Oswald', sans-serif; text-shadow: 0 0 14px rgba(211,18,47,.7); }
.ng-mark svg { width: .85em; height: .85em; fill: none; stroke: currentColor; stroke-width: 3.2; }
/* the cross mark is lit by the candelabra, not the lantern */
.ng-candlemark { position: absolute; z-index: 12; opacity: 0; transition: opacity 1.4s .6s; pointer-events: none; }
.ng-stage.candles-lit .ng-candlemark { opacity: 1; }

/* ---------- fx canvas + mirror ---------- */
.ng-fx { position: absolute; inset: 0; z-index: 25; width: 100%; height: 100%; pointer-events: none; }
.ng-glass { position: absolute; left: 41.9%; top: 22.2%; width: 15.4%; height: 48.6%; z-index: 5; border-radius: 46% 46% 2% 2% / 12% 12% 1% 1%; overflow: hidden; pointer-events: none; }
.ng-glass canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ng-recess { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, #1b0a0c 0, #070304 60%, #000 100%); opacity: 0; transition: opacity .4s; box-shadow: inset 0 0 40px #000; }
.ng-stage.mirror-broken .ng-recess { opacity: 1; }
.ng-face { position: absolute; left: 50%; top: 46%; width: 92%; transform: translate(-50%, -50%) scale(.9); opacity: 0; filter: blur(4px) contrast(1.3); transition: opacity .25s, transform 1.2s, filter .5s; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 48% 46% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 48% 46% at 50% 45%, #000 40%, transparent 100%); }
.ng-stage.face-in .ng-face { opacity: .85; transform: translate(-50%, -50%) scale(1); filter: blur(0) contrast(1.3); }
.ng-ring-spot { position: absolute; left: 50%; top: 55%; width: 34%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; transition: opacity .8s .3s; filter: drop-shadow(0 0 10px rgba(255,180,90,.7)); }
.ng-stage.mirror-broken .ng-ring-spot { opacity: 1; }
.ng-rock { position: absolute; z-index: 15; left: 62%; top: 84%; width: 4.6%; aspect-ratio: 1.3; transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.ng-rock svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.8)); }
.ng-rock.is-flying { visibility: hidden; }
.ng-stage.shake { animation: ngShake .35s; }
@keyframes ngShake { 20% { transform: translate(calc(-50% - 6px), calc(-50% + 3px)); } 40% { transform: translate(calc(-50% + 5px), calc(-50% - 4px)); } 60% { transform: translate(calc(-50% - 3px), calc(-50% + 2px)); } 80% { transform: translate(calc(-50% + 2px), -50%); } }

/* door wall details */
.ng-eyes { position: absolute; z-index: 13; left: 79.6%; top: 36%; width: 3.6%; height: 2%; display: flex; justify-content: space-between; opacity: 0; pointer-events: none; transition: opacity .8s; }
.ng-eyes i { width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0, #ff2a3a 32%, transparent 70%); filter: blur(1px); }
.ng-stage.vane-awake .ng-eyes { opacity: 1; animation: ngFlick 2s infinite; }
.ng-ringon { position: absolute; z-index: 13; left: 89.6%; top: 59.4%; width: 2.2%; opacity: 0; transform: rotate(20deg); transition: opacity .8s; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255,180,90,.9)); }
.ng-stage.ring-given .ng-ringon { opacity: 1; }
.ng-underdoor { position: absolute; z-index: 13; left: 36%; top: 84%; width: 28%; height: 6%; pointer-events: none; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,40,70,.75), transparent 70%); opacity: .4; transition: opacity 1.4s, transform 1.4s; }
.ng-stage.curse-broken .ng-underdoor { opacity: 1; transform: scaleY(1.8); }
.ng-stage.door-open .ng-underdoor { opacity: 1; transform: scale(2.4, 9); }
.ng-keyin { position: absolute; z-index: 13; left: 48.6%; top: 50%; width: 3.2%; opacity: 0; transform: rotate(-90deg); pointer-events: none; transition: opacity .5s; filter: drop-shadow(0 0 6px rgba(255,170,80,.9)); }
.ng-stage.key-used .ng-keyin { opacity: 1; animation: ngTurn .8s ease .2s forwards; }
@keyframes ngTurn { to { transform: rotate(0deg); } }

/* turn arrows */
.ng-turn { position: absolute; z-index: 40; top: 50%; width: clamp(40px, 4.4vw, 64px); height: clamp(70px, 9vw, 120px); transform: translateY(-50%); display: grid; place-items: center; cursor: pointer; color: rgba(255,255,255,.7); background: linear-gradient(90deg, rgba(0,0,0,.55), transparent); transition: color .3s, opacity .3s; }
.ng-turn.r { right: 0; background: linear-gradient(-90deg, rgba(0,0,0,.55), transparent); }
.ng-turn.l { left: 0; }
.ng-turn:hover { color: #fff; }
.ng-turn svg { width: 46%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ng-stage:not(.on-door) .ng-turn.l, .ng-stage.on-door .ng-turn.r { opacity: .0; pointer-events: none; }

/* ---------- HUD ---------- */
.ng-hud { position: absolute; z-index: 60; left: 0; right: 0; pointer-events: none; padding: clamp(10px, 2vw, 26px) clamp(12px, 2.4vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ng-hud > * { pointer-events: auto; }
.ng-top { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent); }
.ng-bottom { bottom: 0; align-items: flex-end; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); }
.ng-title { font: 500 clamp(12px, 1.1vw, 15px)/1.2 'Oswald', sans-serif; letter-spacing: 0; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ng-title b { display: block; color: #fff; font-weight: 600; font-size: 1.2em; }
.ng-clock { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: min(360px, 34vw); }
.ng-time { font: 500 clamp(20px, 2.2vw, 30px)/1 'Oswald', sans-serif; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }
.ng-bar { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); }
.ng-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 3px; background: #d3122f; box-shadow: 0 0 14px #d3122f, 0 0 4px #ff5a6e; transition: width 1s linear; }
#nx-game.urgent .ng-time { color: #ff3b52; animation: ngPulse 1s infinite; }
@keyframes ngPulse { 50% { opacity: .55; } }
.ng-tools { display: flex; gap: 10px; align-items: center; }
#nx-game .ng-tool { width: clamp(34px, 3.2vw, 44px); height: clamp(34px, 3.2vw, 44px); border-radius: 50%; border: 1px solid rgba(255,255,255,.28); display: grid; place-items: center; color: rgba(255,255,255,.8); cursor: pointer; transition: .25s; background: rgba(0,0,0,.35); }
#nx-game .ng-tool:hover { border-color: #fff; color: #fff; }
#nx-game .ng-tool.is-on { border-color: #d3122f; box-shadow: 0 0 14px rgba(211,18,47,.5); }
#nx-game .ng-tool svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#nx-game .ng-tool .b { fill: currentColor; stroke: none; }
#nx-game .ng-tool .w1, #nx-game .ng-tool .w2 { opacity: 0; }
#nx-game .ng-tool.is-on .w1, #nx-game .ng-tool.is-on .w2 { opacity: 1; }
#nx-game .ng-tool.is-on .x { opacity: 0; }
.ng-say { flex: 1; max-width: 640px; min-height: 2.8em; }
.ng-say h4 { margin: 0 0 4px; color: #fff; font: 500 clamp(14px, 1.4vw, 19px)/1.2 'Oswald', sans-serif; letter-spacing: 0; text-transform: uppercase; }
.ng-say p { margin: 0; color: rgba(236,232,238,.85); font: 400 clamp(12px, 1.1vw, 15px)/1.5 var(--nx-body); }
.ng-say.in { animation: ngIn .5s ease; }
@keyframes ngIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ng-inv { display: flex; gap: 8px; }
.ng-slot { width: clamp(44px, 4.6vw, 64px); aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,9,12,.65); display: grid; place-items: center; transition: .3s; }
.ng-slot img { width: 76%; height: 76% !important; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,170,80,.6)); }
.ng-slot.new { border-color: #d3122f; box-shadow: 0 0 16px rgba(211,18,47,.55); animation: ngPop .6s ease; }
@keyframes ngPop { 50% { transform: scale(1.18); } }

/* ---------- overlays: menu, modals, endings ---------- */
.ng-layer { position: absolute; inset: 0; z-index: 80; display: none; }
.ng-layer.is-on { display: flex; }
.ng-menu { align-items: center; background: #000 var(--bg) center / cover no-repeat; }
.ng-menu::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92) 0, rgba(0,0,0,.6) 50%, rgba(0,0,0,.15) 100%); }
.ng-menu-in { position: relative; max-width: 560px; padding: 0 clamp(20px, 7vw, 120px); }
.ng-kick { margin: 0 0 18px; color: #d3122f; font: 500 13px/1 'Oswald', sans-serif; letter-spacing: 0; text-transform: uppercase; }
.ng-menu h2, .ng-modal h2, .ng-end h2 { margin: 0 0 16px; color: #fff; font: 600 clamp(36px, 5.4vw, 80px)/.95 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0; }
.ng-menu p.lede { margin: 0 0 30px; color: rgba(236,232,238,.85); font: 400 clamp(14px, 1.3vw, 17px)/1.6 var(--nx-body); }
.ng-list { display: flex; flex-direction: column; gap: 4px; }
#nx-game .ng-item { display: flex; align-items: center; gap: 16px; padding: 12px 0; color: rgba(255,255,255,.7); font: 500 clamp(16px, 1.6vw, 22px)/1 'Oswald', sans-serif; letter-spacing: 0; text-transform: uppercase; cursor: pointer; transition: color .25s, padding .25s; text-align: left; }
#nx-game .ng-item::before { content: ''; width: 0; height: 2px; background: #d3122f; box-shadow: 0 0 10px #d3122f; transition: width .3s; }
#nx-game .ng-item:hover, #nx-game .ng-item:focus-visible { color: #fff; outline: none; }
#nx-game .ng-item:hover::before, #nx-game .ng-item:focus-visible::before { width: 34px; }
#nx-game .ng-item small { margin-left: auto; color: rgba(255,255,255,.4); font: 400 12px/1 var(--nx-body); letter-spacing: 0; text-transform: none; }
.ng-best { margin-top: 26px; color: rgba(255,255,255,.5); font: 400 13px/1 var(--nx-body); }
.ng-modal, .ng-end { align-items: center; justify-content: center; background: rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.ng-box { position: relative; width: min(860px, 92%); max-height: 92%; overflow: auto; padding: clamp(20px, 3vw, 40px); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(12,11,14,.94); box-shadow: 0 40px 100px rgba(0,0,0,.8); }
.ng-box h2 { font-size: clamp(26px, 3.4vw, 46px) !important; }
.ng-box p { color: rgba(236,232,238,.85); font: 400 clamp(13px, 1.2vw, 16px)/1.6 var(--nx-body); margin: 0 0 14px; }
#nx-game .ng-x { position: absolute; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
#nx-game .ng-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; background: #d3122f; color: #fff; font: 500 15px/1 'Oswald', sans-serif; letter-spacing: 0; text-transform: uppercase; cursor: pointer; transition: background .25s, transform .25s; }
#nx-game .ng-btn:hover { background: #9e0c22; }
#nx-game .ng-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.3); }
#nx-game .ng-btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.05); }
.ng-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* chest lock */
.ng-lock { display: flex; justify-content: center; gap: clamp(8px, 1.6vw, 20px); margin: 26px 0 10px; }
.ng-dialc { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ng-dialc .sym { width: clamp(26px, 3vw, 40px); height: clamp(26px, 3vw, 40px); color: #c9a46a; }
.ng-dialc .sym svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; }
#nx-game .ng-dialc button { width: clamp(52px, 6vw, 76px); height: 34px; color: rgba(255,255,255,.7); font-size: 18px; cursor: pointer; border-radius: 6px; }
#nx-game .ng-dialc button:hover { color: #fff; background: rgba(255,255,255,.06); }
.ng-dialc .num { width: clamp(52px, 6vw, 76px); height: clamp(64px, 7.6vw, 96px); display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(#141217, #0a090c); color: #fff; font: 600 clamp(32px, 4vw, 52px)/1 'Oswald', sans-serif; box-shadow: inset 0 8px 14px rgba(0,0,0,.7); cursor: pointer; }
.ng-dialc.sel .num { border-color: #d3122f; box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 16px rgba(211,18,47,.45); }
.ng-lock.wrong { animation: nxShake .35s; }
.ng-lock.right .num { border-color: #4caf50; }

/* chest close-up */
.ng-closeup { background: #000; }
.ng-cu-stage { position: absolute; left: 50%; top: 50%; width: var(--sw); height: var(--sh); transform: translate(-50%, -50%); overflow: hidden; }
.ng-cu-stage > img.bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.ng-cu-hit { position: absolute; cursor: pointer; border-radius: 12px; }
.ng-cu-key { position: absolute; left: 39.4%; top: 33.5%; width: 27.1% !important; cursor: pointer; transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .3s, opacity .5s .6s; }
@media (hover: hover) { .ng-cu-key:hover { filter: drop-shadow(0 0 16px rgba(255,170,80,.9)) brightness(1.15); } }
.ng-cu-key.lift { transform: translateY(-14%) scale(1.3) rotate(-10deg); filter: drop-shadow(0 30px 30px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,170,80,.8)); opacity: 0; }
.ng-cu-hole { position: absolute; left: 34%; top: 47%; width: 38%; height: 14%; border-radius: 50%; transform: rotate(-37deg); opacity: 0; transition: opacity .6s .5s; background: radial-gradient(ellipse, rgba(58,6,10,1) 0, rgba(70,8,12,.92) 50%, transparent 74%); filter: blur(9px); }
.ng-closeup.key-gone .ng-cu-hole { opacity: 1; }
.ng-letter { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(520px, 70%); padding: clamp(18px, 3vw, 40px); transform: translate(-50%, -46%) rotate(-2deg); opacity: 0; visibility: hidden;
  background: linear-gradient(160deg, #e9dcc0, #cdb88f); color: #2a1d12; box-shadow: 0 30px 70px rgba(0,0,0,.75), inset 0 0 60px rgba(120,80,30,.35); font: italic 400 clamp(13px, 1.6vw, 21px)/1.5 'IM Fell English', Georgia, serif; transition: .5s; cursor: pointer; }
.ng-letter p { margin: 0 0 10px; color: #2a1d12 !important; font: inherit !important; }
.ng-closeup.letter-open .ng-letter { opacity: 1; visibility: visible; transform: translate(-50%, -50%) rotate(-2deg); }

/* riddle + force door */
.ng-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
#nx-game .ng-opt { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff; font: 400 clamp(14px, 1.4vw, 18px)/1.3 var(--nx-body); cursor: pointer; text-align: left; transition: .2s; }
#nx-game .ng-opt span { color: #d3122f; font: 600 16px/1 'Oswald', sans-serif; }
#nx-game .ng-opt:hover { border-color: #fff; background: rgba(255,255,255,.04); }
#nx-game .ng-opt.no { border-color: #d3122f; opacity: .45; text-decoration: line-through; }
.ng-force { margin-top: 26px; }
.ng-force .meter { position: relative; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); }
.ng-force .meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: #d3122f; box-shadow: 0 0 22px #d3122f, 0 0 6px #ff6b7c; }
.ng-force .pct { margin-top: 10px; text-align: right; color: #fff; font: 500 18px/1 'Oswald', sans-serif; letter-spacing: 0; }
#nx-game .ng-push { margin-top: 20px; width: 100%; padding: 22px; background: rgba(211,18,47,.14); border: 1px solid #d3122f; color: #fff; font: 500 18px/1 'Oswald', sans-serif; letter-spacing: 0; text-transform: uppercase; cursor: pointer; }
#nx-game .ng-push:active { background: rgba(211,18,47,.35); }

/* scare + endings */
.ng-scare { position: absolute; inset: 0; z-index: 90; pointer-events: none; opacity: 0; background: #000 var(--face) center / contain no-repeat; }
.ng-scare.go { animation: ngScare .7s ease; }
@keyframes ngScare { 0% { opacity: 0; transform: scale(1.4); } 8% { opacity: 1; transform: scale(1); } 60% { opacity: .9; } 100% { opacity: 0; } }
.ng-flash { position: absolute; inset: 0; z-index: 85; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,60,80,.6), rgba(60,0,0,.9)); }
.ng-flash.go { animation: nxFlash .8s ease-out; }
.ng-white { position: absolute; inset: 0; z-index: 86; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 60%, #fff, #ffd6dc 30%, #d3122f 80%); transition: opacity 1.6s; }
.ng-white.go { opacity: 1; }
.ng-end { background: rgba(0,0,0,.86); }
.ng-end .ng-box { text-align: center; }
.ng-stats { display: flex; justify-content: center; gap: clamp(20px, 4vw, 60px); margin: 24px 0 8px; }
.ng-stats div { display: flex; flex-direction: column; gap: 6px; }
.ng-stats b { color: #fff; font: 600 clamp(26px, 3vw, 40px)/1 'Oswald', sans-serif; }
.ng-stats span { color: rgba(255,255,255,.5); font: 400 12px/1 var(--nx-body); letter-spacing: 0; text-transform: uppercase; }
.ng-end .ng-row { justify-content: center; }

/* intro film */
.ng-film { background: #000; align-items: center; justify-content: center; }
.ng-film video { width: 100%; height: 100%; object-fit: contain; }
#nx-game .ng-skip { position: absolute; right: 24px; bottom: 22px; color: rgba(255,255,255,.75); font: 500 14px/1 'Oswald', sans-serif; letter-spacing: 0; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 4px; }

/* phones held upright: stage on top, HUD stacks below */
.ng-rotate { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  .ng-stage { top: 44%; }
  .ng-bottom { flex-direction: column; align-items: stretch; gap: 12px; background: none; }
  .ng-say { max-width: none; min-height: 4.4em; }
  .ng-inv { justify-content: center; }
  .ng-clock { min-width: 38vw; }
  .ng-title { display: none; }
  .ng-rotate { display: block; position: absolute; z-index: 61; left: 0; right: 0; top: calc(44% + var(--sh) / 2 + 10px); text-align: center; color: rgba(255,255,255,.45); font: 400 12px/1 var(--nx-body); letter-spacing: 0; }
  .ng-turn { width: 34px; height: 64px; }
}

/* ---------- game pieces added by nx-game.js ---------- */
.ng-dark { background: rgba(2,1,4,.82); }
.ng-glowwalls { position: absolute; z-index: 11; top: 0; left: 0; width: 200%; height: 100%; display: flex; pointer-events: none; will-change: transform; }
.ng-gw { position: relative; width: 50%; height: 100%; }
.ng-stage.is-lit:not(.lamp-off) .ng-glow:not(.ng-underglow) { opacity: .55; }
.ng-glow.gust { animation: ngGust .9s ease; }
@keyframes ngGust { 30% { opacity: .2; transform: translate(-50%, -50%) scale(.6); } }
.ng-underglow { opacity: .55; transition: opacity 1.6s, transform 1.6s; }
.ng-stage.curse-broken .ng-underglow { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
.ng-stage.door-open .ng-underglow { transform: translate(-50%, -50%) scale(4, 7); opacity: 1; }
.ng-lantern-gone { position: absolute; z-index: 4; left: 78.6%; top: 40%; width: 8.6%; height: 26%; border-radius: 40%; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(12,8,6,.97) 0, rgba(12,8,6,.9) 45%, rgba(12,8,6,0) 75%); }
.ng-stage.lamp-taken .ng-lantern-gone { opacity: 1; }
#nx-game .ng-stone { position: absolute; z-index: 4; left: 27.2%; top: 88.6%; width: 4.6% !important; height: auto; filter: brightness(.75) saturate(.8) drop-shadow(0 4px 6px rgba(0,0,0,.8)); pointer-events: none; }
#nx-game .ng-rock { position: absolute; z-index: 26; width: 7%; height: auto; transform: translate(-50%, -50%); cursor: grab; touch-action: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.8)); animation: ngBob 1.6s ease-in-out infinite; }
#nx-game .ng-rock.held { cursor: grabbing; animation: none; transform: translate(-50%, -50%) scale(1.1); }
#nx-game .ng-rock.flying { animation: none; pointer-events: none; }
@keyframes ngBob { 50% { margin-top: -6px; } }
#nx-game .ng-slot { cursor: pointer; padding: 0; }
#nx-game .ng-slot.sel { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
#nx-game .ng-slot[aria-hidden] { cursor: default; }
#nx-game .ng-ringon { position: absolute; left: 88.6%; top: 58.6%; width: 2.6% !important; }
#nx-game .ng-keyin { position: absolute; left: 47.9%; top: 51%; width: 4% !important; transform-origin: 20% 50%; }
.ng-stage.ring-taken .ng-ring-spot { opacity: 0 !important; }
.ng-stage.door-open .ng-walls { transform: translateX(-50%) scale(1.25); transform-origin: 74% 50%; transition: transform 2.4s cubic-bezier(.6,0,.2,1); }
.ng-mark b { font-weight: 400; }
#nx-game .ng-closeup .ng-x { right: 2%; top: 3%; background: rgba(0,0,0,.5); }
#nx-game .ng-cu-key { height: auto !important; }
#nx-game .ng-box .ng-kick { margin-bottom: 10px; }
.ng-modal.is-lock .ng-box, .ng-modal.is-force .ng-box { width: min(620px, 92%); }


/* photographic lantern, mirror hand, jump scare */
:is(#nx-gate, #nx-game) .nx-lamp.is-photo img { position: relative; display: block; width: 100% !important; height: 100% !important; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)) brightness(.35) saturate(.5); transition: filter .4s; }
:is(#nx-gate, #nx-game) .nx-lamp.is-photo.is-on img { filter: drop-shadow(0 0 22px rgba(255,170,80,.75)) drop-shadow(0 8px 10px rgba(0,0,0,.6)) brightness(1.08); }
#nx-gate .nx-lamp.is-photo:not(.is-on) img { filter: brightness(.12) saturate(0); }
:is(#nx-gate, #nx-game) .nx-lamp.is-photo .nx-lamp-halo { top: 66%; }
#nx-game .ng-face { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; width: 86% !important; filter: blur(8px) brightness(.85); top: 50%; }
#nx-game .ng-stage.face-in .ng-face { opacity: .92; filter: blur(.3px) brightness(1); }
.ng-scare { background: #000; }
.ng-scare img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.ng-scare.go { animation: ngJump 1.1s steps(1, end) forwards, none; }
.ng-scare.go img { animation: ngJumpImg 1.1s ease-out forwards; }
@keyframes ngJump { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ngJumpImg { 0% { transform: scale(1.5) rotate(-3deg); filter: contrast(1.5) brightness(1.4); } 6% { transform: scale(1.12) rotate(2deg); } 10% { transform: scale(1.2) rotate(-1deg); filter: contrast(1.3) brightness(1); } 14% { transform: scale(1.1) translate(6px, -4px); } 18% { transform: scale(1.14) translate(-5px, 3px); } 60% { transform: scale(1.05); filter: none; } 100% { transform: scale(1.02); } }
#nx-game.quake .ng-stage { animation: ngShake .12s 6; }
.ng-warn { margin: -14px 0 26px; color: #d3122f; font: 500 14px/1.4 var(--nx-body); }
/* the lantern lights where it stands: no swell, a soft glow */
#nx-game .nx-lamp .nx-lamp-halo { transition: opacity .6s; width: 150px; height: 150px; }
#nx-game .nx-lamp.is-on .nx-lamp-halo { width: 150px; height: 150px; opacity: .55; }
#nx-game .nx-lamp.is-photo img { transition: filter .6s; }
/* once the lantern is lifted, the table behind it is patched with the wall just to its right */
.ng-lantern-gone { left: 77% !important; top: 33% !important; width: 11.5% !important; height: 35.5% !important; border-radius: 0 !important;
  background: none; background-size: 869.6% 281.7% !important; background-position: 99.4% 51.2% !important; background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
/* dragging items */
.ng-ghost { position: fixed; z-index: 100000; width: clamp(50px, 6vw, 84px); height: auto !important; transform: translate(-50%, -50%) rotate(-10deg); pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,170,80,.5)); }
#nx-game .ng-slot.lifted img { opacity: .25; }
#nx-game .ng-slot { touch-action: none; }
.ng-hit.drop::after { opacity: 1 !important; background: radial-gradient(ellipse, rgba(255,210,150,.22), transparent 70%); }
.ng-hit.drop { box-shadow: 0 0 0 1px rgba(255,220,170,.5); }
#nx-game .ng-cu-key { touch-action: none; cursor: grab; }
#nx-game .ng-cu-key.dragging { cursor: grabbing; transition: none; filter: drop-shadow(0 30px 30px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,170,80,.8)); }
/* key gone: the photo without it fades in, no patch */
.ng-cu-stage > img.bg-empty { opacity: 0; transition: opacity .8s .2s; }
.ng-closeup.key-gone .ng-cu-stage > img.bg-empty { opacity: 1; }
.ng-cu-hole { display: none !important; }
/* jump scare as a ghost: see-through, rushing out of the dark, flickering */
.ng-scare { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.75)) !important; }
.ng-scare img { mix-blend-mode: screen; opacity: 0; filter: grayscale(.4) contrast(1.4) brightness(1.1) blur(0); }
.ng-scare.go { animation: ngJumpWrap 1.4s linear forwards !important; }
.ng-scare.go img { animation: ngGhost 1.4s cubic-bezier(.2,.9,.3,1) forwards !important; }
@keyframes ngJumpWrap { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ngGhost {
  0% { opacity: 0; transform: scale(.45); filter: grayscale(.4) contrast(1.4) brightness(1.1) blur(14px); }
  12% { opacity: .85; transform: scale(1.18); filter: grayscale(.3) contrast(1.5) brightness(1.3) blur(0); }
  18% { opacity: .35; transform: scale(1.14) translate(6px, -3px); }
  24% { opacity: .8; transform: scale(1.16) translate(-5px, 2px); }
  32% { opacity: .5; }
  40% { opacity: .78; transform: scale(1.12); }
  70% { opacity: .5; transform: scale(1.08); filter: grayscale(.5) contrast(1.3) blur(1px); }
  100% { opacity: 0; transform: scale(1.3); filter: grayscale(.6) blur(10px); }
}
/* pause */
.ng-pause { z-index: 82; align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,.78); backdrop-filter: blur(6px) grayscale(.6); }
.ng-pause-in { max-width: 520px; padding: 20px; }
.ng-pause .ng-list { align-items: center; margin-top: 10px; }
.ng-pause .lede { margin: 0 0 22px; color: rgba(236,232,238,.8); font: 400 16px/1.6 var(--nx-body); }
#nx-game .ng-pause .ng-item::before { display: none; }
#nx-game .ng-pause .ng-item small { display: none; }
#nx-game .ng-pause .ng-item:hover { color: #d3122f; }
/* hotspots give nothing away on hover; they only light up while you drag an item over them */
@media (hover: hover) { .ng-hit:hover::after { opacity: 0; } }
.ng-hit:focus-visible { box-shadow: none; }
.ng-hit.drop::after { opacity: 1 !important; }
/* no glow under the door until the curse lifts, and never a flicker */
#nx-game .ng-underglow { animation: none !important; opacity: 0 !important; transition: opacity 2.4s ease; }
#nx-game .ng-stage.curse-broken .ng-underglow, #nx-game .ng-stage.door-open .ng-underglow { opacity: .9 !important; }
#nx-game .ng-underdoor { opacity: 0 !important; }
#nx-game .ng-stage.curse-broken .ng-underdoor { opacity: .7 !important; }
/* calm ending: no red wash, the room fades to black */
#nx-game .ng-stage.door-open .ng-underglow { transform: translate(-50%, -50%) scale(1.6) !important; }
#nx-game .ng-white { display: none; }
#nx-game .ng-stage.fade-out { filter: brightness(0); transition: filter 2s ease; }
#nx-game .ng-end { background: rgba(0,0,0,.92); backdrop-filter: none; }
#nx-game .ng-end .ng-box { background: #0c0b0e; border-color: rgba(255,255,255,.08); }
/* no glow under the door at any point; the photo's own light is enough */
#nx-game .ng-underglow, #nx-game .ng-stage.curse-broken .ng-underglow, #nx-game .ng-stage.door-open .ng-underglow,
#nx-game .ng-underdoor, #nx-game .ng-stage.curse-broken .ng-underdoor { opacity: 0 !important; }
/* Lord Vane's eyes: pinpoints sitting inside the sockets of the photo (skull is turned three quarters) */
#nx-game .ng-eyes { display: block; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#nx-game .ng-eyes i { position: absolute; width: .75%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); filter: blur(.6px);
  background: radial-gradient(circle, #ffd7cc 0, #ff2a2a 28%, rgba(200,0,0,.45) 55%, transparent 72%); box-shadow: 0 0 10px 3px rgba(255,20,20,.35); }
#nx-game .ng-eyes i:first-child { left: 81.3%; top: 36.4%; }
#nx-game .ng-eyes i:last-child { left: 79.7%; top: 38.2%; width: .5%; opacity: .7; }
#nx-game .ng-stage.vane-awake .ng-eyes { opacity: 1; animation: ngEyes 2.4s ease-in-out infinite; }
@keyframes ngEyes { 0%, 100% { opacity: .95; } 50% { opacity: .55; } }
/* the ghost reads a little stronger now it is a full figure */
@keyframes ngGhost {
  0% { opacity: 0; transform: scale(.4); filter: contrast(1.4) brightness(1.2) blur(14px); }
  10% { opacity: .92; transform: scale(1.12); filter: contrast(1.5) brightness(1.35) blur(0); }
  16% { opacity: .45; transform: scale(1.1) translate(8px, -4px); }
  22% { opacity: .9; transform: scale(1.13) translate(-6px, 3px); }
  30% { opacity: .6; }
  40% { opacity: .85; transform: scale(1.08); }
  72% { opacity: .55; transform: scale(1.05); filter: contrast(1.3) blur(1px); }
  100% { opacity: 0; transform: scale(1.25); filter: blur(10px); }
}
/* nothing lights up while dragging either: you have to work out where things go */
#nx-game .ng-hit.drop::after { opacity: 0 !important; }
#nx-game .ng-hit.drop { box-shadow: none !important; }
/* phones held upright: stage right under the top bar, story and bag directly beneath it */
@media (orientation: portrait) and (max-width: 820px) {
  .ng-stage { top: calc(86px + var(--sh) / 2); }
  .ng-rotate { top: calc(86px + var(--sh) + 12px); }
  .ng-bottom { top: calc(86px + var(--sh) + 46px); bottom: auto; background: none; }
  .ng-say { min-height: 0; }
}
/* the stone can be tapped even when the lantern is standing on top of it */
#nx-game .ng-hit[data-hit="stone"] { z-index: 32; border-radius: 50%; }
#nx-game .ng-stone { width: 5.4% !important; filter: brightness(.9) saturate(.85) drop-shadow(0 4px 6px rgba(0,0,0,.8)); }
/* scratched writing stays on its own wall */
#nx-game .ng-scrawl { max-width: 17%; white-space: normal; }
/* stone sits higher on the floor, clear of the story text; the text never blocks taps */
#nx-game .ng-stone { left: 29%; top: 70%; }
#nx-game .ng-say, #nx-game .ng-say * { pointer-events: none; }
@media (max-height: 500px) { #nx-game .ng-bottom { padding-bottom: 8px; } #nx-game .ng-say h4 { font-size: 13px; } #nx-game .ng-say p { font-size: 12px; } }
/* narration: fades out after a few seconds; Notes to read it again */
.ng-sayw { flex: 1; display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
#nx-game .ng-notes { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); font: 500 14px/1 'Oswald', sans-serif; text-transform: uppercase; cursor: pointer; pointer-events: auto; }
#nx-game .ng-notes:hover { border-color: #fff; color: #fff; }
#nx-game .ng-notes svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ng-say { transition: opacity .8s ease, transform .8s ease; }
.ng-say.out { opacity: 0; transform: translateY(6px); }
.ng-bottom { background: none !important; }
.ng-say.in:not(.out) { text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.ng-log { position: absolute; z-index: 70; left: clamp(12px, 2.4vw, 34px); bottom: 74px; width: min(460px, 86vw); max-height: 50vh; overflow: auto; padding: 18px 20px; border-radius: 10px; background: rgba(10,9,12,.94); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.ng-log[hidden] { display: none; }
.ng-log-in > div { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ng-log-in > div:first-child h4 { color: #fff; }
.ng-log h4 { margin: 0 0 4px; color: rgba(255,255,255,.75); font: 500 15px/1.2 'Oswald', sans-serif; text-transform: uppercase; }
.ng-log p { margin: 0; color: rgba(236,232,238,.8); font: 400 14px/1.5 var(--nx-body); }
@media (max-width: 820px) { #nx-game .ng-notes span { display: none; } #nx-game .ng-notes { width: 40px; padding: 0; justify-content: center; } }
/* ===== stage view: centred on wide screens, full-height swipeable on upright phones ===== */
.ng-view { position: absolute; inset: 0; overflow: hidden; }
#nx-game .ng-turn { position: absolute; z-index: 45; }
.ng-swipe { display: none; }
#nx-game.pan .ng-view { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; }
#nx-game.pan .ng-view::-webkit-scrollbar { display: none; }
#nx-game.pan .ng-stage { position: relative; left: 0 !important; top: 0 !important; transform: none !important; }
#nx-game.pan .ng-rotate { display: none !important; }
#nx-game.pan .ng-bottom { top: auto !important; bottom: 0 !important; flex-direction: row !important; align-items: flex-end !important; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0,0,0,.7), transparent) !important; }
#nx-game.pan .ng-top { padding-top: max(12px, env(safe-area-inset-top)); }
#nx-game.pan .ng-say { max-width: none; }
#nx-game.pan .ng-inv { flex-direction: column-reverse; }
#nx-game.pan .ng-turn { top: 50%; }
#nx-game.pan .ng-turn.l { left: 0; } #nx-game.pan .ng-turn.r { right: 0; }
#nx-game.pan .ng-swipe { display: block; position: absolute; z-index: 46; left: 50%; top: 22%; transform: translateX(-50%); padding: 10px 16px; border-radius: 20px; background: rgba(0,0,0,.6); color: #fff; font: 500 14px/1 'Oswald', sans-serif; text-transform: uppercase; opacity: 0; pointer-events: none; }
#nx-game.pan .ng-swipe.show { animation: ngSwipe 3.6s ease forwards; }
@keyframes ngSwipe { 0% { opacity: 0; } 12% { opacity: 1; } 30% { transform: translateX(-60%); } 50% { transform: translateX(-40%); } 70% { transform: translateX(-50%); opacity: 1; } 100% { opacity: 0; } }
#nx-game.pan .ng-stage.on-door .ng-walls { transform: translateX(-50%); }
/* the stone you are holding never lets the page scroll underneath it */
#nx-game .ng-rock { touch-action: none !important; z-index: 40; width: clamp(56px, 7%, 110px) !important; }
/* phones */
#nx-game .ng-item[hidden] { display: none !important; }
@media (hover: none) { #nx-game .ng-item small { display: none; } }
#nx-game.pan .ng-dark { background: rgba(2,1,4,.62); }
#nx-game.pan .ng-stage.is-lit.lamp-off .ng-dark { background: rgba(2,1,4,.62); }
#nx-game.pan .ng-glow { width: 14%; }
#nx-game.pan .ng-menu::before { background: linear-gradient(180deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.85) 55%, #000 100%); }
#nx-game.pan .ng-menu { align-items: flex-end; padding-bottom: 40px; background-position: 70% center; }
#nx-game:has(.ng-menu.is-on) .ng-hud, #nx-game:has(.ng-menu.is-on) .ng-turn, #nx-game:has(.ng-menu.is-on) .ng-swipe { opacity: 0; pointer-events: none; }
/* upright phones: whole room across the screen under the clock, story and bag below */
@media (orientation: portrait) and (max-width: 820px) {
  #nx-game .ng-stage { top: calc(96px + var(--sh) / 2); }
  #nx-game .ng-rotate { display: block; top: calc(96px + var(--sh) + 12px); }
  #nx-game .ng-bottom { top: calc(96px + var(--sh) + 44px); bottom: auto; flex-direction: column; align-items: stretch; gap: 16px; background: none !important; }
  #nx-game .ng-inv { justify-content: center; }
  #nx-game .ng-sayw { align-items: flex-start; }
  #nx-game .ng-say.out { opacity: .55; transform: none; }
}
@media (orientation: portrait) and (max-width: 820px) {
  #nx-game .ng-turn { top: calc(96px + var(--sh) / 2); height: calc(var(--sh) * .6); width: 30px; }
  #nx-game .ng-dark { background: rgba(2,1,4,.66); }
}
/* the story area never blocks a tap or a throw; only the Notes button and the bag take taps */
#nx-game .ng-bottom, #nx-game .ng-sayw, #nx-game .ng-say { pointer-events: none !important; }
#nx-game .ng-notes, #nx-game .ng-inv, #nx-game .ng-slot { pointer-events: auto !important; }
#nx-game .ng-rock { z-index: 65 !important; }
/* phones on their side: a slim strip of controls so the room gets the screen */
@media (max-height: 520px) and (orientation: landscape) {
  #nx-game .ng-top { padding: 6px 12px; background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent); }
  #nx-game .ng-title { display: none; }
  #nx-game .ng-clock { min-width: 120px; gap: 4px; align-items: flex-start; }
  #nx-game .ng-time { font-size: 17px; }
  #nx-game .ng-bar { height: 2px; }
  #nx-game .ng-tools { gap: 6px; }
  #nx-game .ng-tool { width: 30px !important; height: 30px !important; }
  #nx-game .ng-bottom { padding: 6px 12px 8px; }
  #nx-game .ng-notes { width: 32px !important; height: 32px !important; padding: 0 !important; justify-content: center; }
  #nx-game .ng-notes span { display: none; }
  #nx-game .ng-say h4 { font-size: 12px; margin-bottom: 2px; }
  #nx-game .ng-say p { font-size: 11px; line-height: 1.35; }
  #nx-game .ng-slot { width: 40px !important; }
  #nx-game .ng-turn { width: 30px; height: 60px; }
}
/* wall numbers scale with the room, so they stay readable on a phone */
#nx-game .ng-mark { font-size: max(30px, calc(var(--sw, 1000px) * .052)); text-shadow: 0 0 10px rgba(211,18,47,.9), 0 0 2px #fff; color: #ff3550; }
#nx-game .ng-mark b { font-size: 1.15em; }
#nx-game .ng-scrawl { font-size: max(13px, calc(var(--sw, 1000px) * .024)) !important; }
/* logged in, WordPress puts its admin bar over the top of the page: hide it while a game is open */
body:has(#nx-game.is-open) #wpadminbar { display: none !important; }

/* no double-tap zoom inside the game */
:where(#nx-game, #nx-game *) { touch-action: manipulation; }