.na-root{--na-bg:var(--night);--na-ink:var(--bone);--na-ink-dim:var(--dim);--na-ink-faint:var(--edge);--na-gold:var(--gold);--na-border:var(--edge);--na-border-dim:var(--hair);--na-danger:var(--redHi);--na-font-body:var(--fText);--na-font-led:var(--fMono);position:relative;width:100%;max-width:100%;aspect-ratio:16 / 10;min-height:24rem;background:var(--na-bg);overflow:hidden}
.na-root *,.na-root *:before,.na-root *:after{box-sizing:border-box}
.na-root button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.na-panel:focus{outline:none}
.na-live{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:640px){.na-root{aspect-ratio:3 / 4;min-height:30rem}}
.na-stage{position:absolute;inset:0;overflow:hidden;font-family:var(--na-font-body);color:var(--na-ink)}
.na-scene{position:absolute;inset:0;display:block}
.na-panel{position:absolute;inset:0;z-index:5;pointer-events:none}
.na-panel>*{pointer-events:auto}
.np-strip{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;background:linear-gradient(180deg,#0d0a10eb,#0d0a1000)}
.np-pill{font:400 .68rem/1.2 var(--fMono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--hair);border-radius:2px;padding:.3rem .55rem;background:#0d0a10cc;white-space:nowrap}
.np-pill .v{color:var(--gold);font:700 .78rem/1 var(--fMono)}
.np-meter{flex:1;max-width:180px;height:6px;border:1px solid var(--hair);background:var(--night);overflow:hidden;border-radius:2px}
.np-meter i{display:block;height:100%;width:var(--fill,0%);background:var(--gold);transition:width .4s ease}
.np-lessons,.np-skip{margin-left:auto;font:700 .66rem/1 var(--fMono);letter-spacing:.06em;color:var(--bone);background:transparent;border:1px solid var(--bone);border-radius:999px;padding:.55rem .95rem;cursor:pointer;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.np-lessons:hover,.np-skip:hover{background:var(--gold);border-color:var(--gold);color:var(--night)}
.np-skip{position:absolute;bottom:.9rem;right:.8rem;top:auto;margin-left:0;z-index:6}
.np-speech{position:absolute;left:50%;bottom:26%;transform:translate(-50%);width:min(480px,88%);background:#16111af2;border:1px solid #f2b70566;border-radius:4px;padding:.85rem 1rem 1rem;font-size:.95rem;line-height:1.5;cursor:pointer;animation:np-speech-in .22s ease-out}
@keyframes np-speech-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}
.np-who{display:block;font:700 .66rem/1 var(--fMono);color:var(--gold);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem}
.np-tap{display:block;margin-top:.55rem;font:400 .66rem/1.2 var(--fMono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;background:none;border:0;padding:.2rem 0;cursor:pointer}
.np-tap:after{content:" \25b8";animation:np-tap-blink 1.3s steps(2) infinite}
@keyframes np-tap-blink{50%{opacity:.25}}
.np-dock{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:.7rem .8rem .9rem;background:linear-gradient(0deg,#0d0a10e6,#0d0a1000)}
.np-btn{font:700 .72rem/1 var(--fMono);text-transform:uppercase;letter-spacing:.06em;color:var(--bone);background:#0d0a10d9;border:1px solid var(--bone);border-radius:999px;padding:.8rem 1.15rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.np-btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--night)}
.np-btn:active:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--night)}
.np-btn:disabled{opacity:.35;cursor:default}
.np-btn.is-primary{border-color:var(--gold);color:var(--gold)}
.np-btn.is-primary:hover:not(:disabled){background:var(--gold);color:var(--night)}
.np-btn.is-glow{border-color:var(--gold);background:var(--gold);color:var(--night);animation:np-glow-cue 1.1s ease-in-out infinite}
@keyframes np-glow-cue{0%,to{opacity:1}50%{opacity:.7}}
.np-wide{display:block;width:100%;margin-top:.9rem}
.np-stake{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}
.np-chip{width:46px;height:46px;border-radius:50%;font:700 .72rem/1 var(--fMono);color:var(--gold);background:var(--night3);border:2px dashed var(--gold);cursor:pointer;transition:background .2s,color .2s,transform .1s ease}
.np-chip:hover:not(:disabled){background:var(--gold);color:var(--night);transform:translateY(-2px)}
.np-chip:disabled{opacity:.3;cursor:default}
.np-flash{position:absolute;top:3.1rem;left:50%;transform:translate(-50%);font:700 .72rem/1.2 var(--fMono);letter-spacing:.06em;padding:.45rem .8rem;border-radius:2px;background:#0d0a10eb;animation:np-flash-rise 1.45s ease-out forwards;pointer-events:none;white-space:nowrap;max-width:92%;text-overflow:ellipsis;overflow:hidden}
.np-flash.is-good{color:var(--gold);border:1px solid var(--gold)}
.np-flash.is-bad{color:var(--redHi);border:1px solid var(--redHi)}
@keyframes np-flash-rise{0%{opacity:0;transform:translate(-50%) translateY(8px)}12%,78%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}
.na-sheet{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0d0a10d9}
.na-sheet__panel{position:relative;width:min(560px,100%);max-height:calc(100% - 1rem);overflow-y:auto;background:var(--night2);border:1px solid #f2b70566;border-radius:4px;padding:1.3rem 1.4rem 1.5rem;animation:na-sheet-in .2s ease-out}
@keyframes na-sheet-in{0%{opacity:0;transform:scale(.98) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.na-sheet__panel h2{font:400 1.4rem/1.15 var(--fDisp);color:var(--bone);margin:0 2rem .6rem 0}
.na-sheet__panel h3{font:700 .7rem/1.3 var(--fMono);letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin:.6rem 0 .4rem}
.na-sub{color:var(--dim);font-size:.9rem;margin:0 0 1rem}
.na-sheet__close{position:absolute;top:.55rem;right:.6rem;width:34px;height:34px;font-size:1.3rem;line-height:1;color:var(--dim);background:transparent;border:1px solid var(--hair);border-radius:2px;cursor:pointer}
.na-sheet__close:hover{color:var(--night);background:var(--gold);border-color:var(--gold)}
.nm-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.nm-item{display:grid;grid-template-columns:2.2rem 1fr auto;grid-template-areas:"num title go" "num desc go";align-items:center;column-gap:.7rem;padding:.6rem .7rem;border:1px solid var(--hair);border-left:3px solid var(--edge);background:var(--night);transition:border-color .15s ease}
.nm-item:hover{border-color:var(--gold)}
.nm-item.is-done{border-left-color:var(--gold)}
.nm-num{grid-area:num;font:400 1.2rem/1 var(--fDisp);color:var(--bone);text-align:center}
.nm-item.is-done .nm-num{color:var(--gold)}
.nm-title{grid-area:title;font-weight:700;font-size:.95rem}
.nm-desc{grid-area:desc;color:var(--dim);font-size:.8rem}
.nm-go{grid-area:go;font:700 .64rem/1 var(--fMono);letter-spacing:.06em;text-transform:uppercase;color:var(--bone);background:transparent;border:1px solid var(--bone);border-radius:999px;padding:.55rem .85rem;cursor:pointer;transition:background .2s,color .2s}
.nm-go:hover{background:var(--gold);border-color:var(--gold);color:var(--night)}
.np-levelfx{text-align:center;padding:.6rem 0 .2rem}
.np-levelfx__big{display:block;font:400 1.6rem/1.1 var(--fDisp);color:var(--gold);margin-bottom:.7rem;animation:np-level-pop .5s ease-out}
@keyframes np-level-pop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.np-levelfx p{color:var(--dim);margin:0 0 1rem}
.na-gridscroll{overflow-x:auto}
.na-grid{border-collapse:collapse;font-family:var(--fMono);font-size:.74rem;min-width:340px;width:100%}
.na-grid th{font:700 .62rem/1.2 var(--fMono);color:var(--dim);padding:.25rem .3rem;border:1px solid var(--hair);background:var(--night)}
.na-grid td{text-align:center;font-weight:700;padding:.22rem .3rem;border:1px solid var(--night);color:var(--night)}
.gm-H{background:var(--dim)}
.gm-S{background:var(--bone)}
.gm-D{background:var(--gold)}
.gm-P{background:#a67c04}
.gm-R{background:var(--redHi)}
.na-legend{display:flex;flex-wrap:wrap;gap:.6rem 1rem;font-size:.74rem;color:var(--dim);margin-bottom:.4rem}
.na-legend span{display:inline-flex;align-items:center;gap:.35rem}
.na-legend i{width:11px;height:11px;display:inline-block;border-radius:2px}
@media(max-width:520px){.np-speech{bottom:30%;font-size:.86rem;padding:.7rem .8rem .85rem}.np-btn{padding:.65rem .8rem;font-size:.64rem}.np-chip{width:42px;height:42px}.np-strip{gap:.4rem;padding:.45rem .55rem}.np-meter{max-width:90px}.nm-item{grid-template-columns:1.6rem 1fr auto}.nm-desc{display:none}}
@media(prefers-reduced-motion:reduce){.np-speech,.na-sheet__panel,.np-levelfx__big{animation:none}.np-tap:after{animation:none}.np-btn.is-glow{animation:none}.np-flash{animation:np-flash-rise 1.45s step-end forwards}.np-meter i{transition:none}}
