/* Tonática nocturna: every treatment is scoped to the narrative section. */
.n-world{--n-bg:#0c1322;--n-ink:#f3f6ff;--n-muted:#b9c7df;--n-blue:#60b7ff;--n-orange:#ff9a48;background:var(--n-bg);color:var(--n-ink);padding:clamp(18px,3vw,38px);border-radius:12px;isolation:isolate;overflow:hidden;box-shadow:0 12px 35px #07102524}
.n-world h2,.n-world h3,.n-world p{color:inherit}.n-world p{line-height:1.6}.n-eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:800;color:var(--n-blue)}
.n-heading{max-width:740px;margin-bottom:28px}.n-heading h2{font-size:clamp(30px,5vw,50px);margin:8px 0 14px}.n-heading p{color:var(--n-muted);max-width:66ch;font-size:15px}
.n-phase{display:grid;grid-template-columns:1.1fr 1fr;background:#15243a;border:1px solid #3e587b;border-radius:6px;overflow:hidden;max-width:1050px}.n-cover{position:relative;min-width:0}.n-cover img{width:100%;height:100%;object-fit:cover;display:block}.n-chapter{position:absolute;left:14px;top:14px;color:#0c1322;background:#ff9a48;padding:8px 12px;font-size:12px;font-weight:900;transform:rotate(-2deg)}
.n-phase-copy{padding:clamp(20px,3vw,36px)}.n-phase-copy h3{font-size:clamp(27px,3vw,38px);line-height:1.15;margin:12px 0 18px}.n-phase-copy p{color:var(--n-muted)}.n-phase-copy .n-best{border-top:1px solid #3e587b;padding-top:18px;font-size:13px}.n-best strong{display:block;color:#fff;margin-top:5px}
.n-world .btn{min-height:48px;padding:12px 22px;border-radius:4px;font-size:14px;white-space:normal;line-height:1.4}.n-world .n-primary{background:#ff9a48;color:#101724;border:2px solid #ff9a48;font-weight:800;box-shadow:3px 3px 0 #020713}.n-world .n-primary:hover{background:#ffb474;border-color:#ffb474;transform:translateY(-1px)}.n-world .n-primary:disabled{opacity:.45;transform:none;cursor:default}.n-world .n-secondary{background:transparent;color:#f3f6ff;border:1px solid #8db1dc}
.n-world :is(button,input,summary):focus-visible,.n-medals :focus-visible{outline:3px solid #70c8ff;outline-offset:4px}.n-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:22px}.n-link{background:none;color:var(--n-muted);border:0;min-height:44px;text-align:left;font:inherit;font-size:12px;padding:6px 0;cursor:pointer}.n-link:hover{color:white}.n-story-heading h2{font-size:clamp(23px,3vw,34px);margin:8px 0 24px}.n-story-heading{max-width:850px;margin:auto}
.n-comic{max-width:850px;margin:auto;border:2px solid #52739a;box-shadow:6px 6px 0 #030915;background:#132137;position:relative}.n-illustration{position:relative;margin:0;overflow:hidden;background:#0a1120}.n-illustration img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;max-height:none}.n-panel-number{position:absolute;left:14px;bottom:12px;background:#0c1322;color:#b4dcff;font-size:26px;font-weight:900;border-left:4px solid #ff9a48;padding:2px 12px}
.n-dialogue{padding:clamp(18px,3vw,30px)}.n-sentence{font-size:clamp(22px,3vw,30px);font-weight:700;margin:0 0 20px;line-height:1.5!important}.n-blank{color:#ffae6c;border-bottom:2px solid #ff9a48;letter-spacing:.1em;padding:0 6px}#n-answer-form label{font-size:12px;color:#c7d5ea;display:block;margin-bottom:8px}.n-input-row{display:flex;gap:12px;align-items:stretch}.n-input-row input{min-width:0;flex:1;background:#080f1c;color:white;border:1px solid #6e8cad;border-radius:4px;padding:12px 14px;font-size:20px;min-height:52px}.n-input-row input:disabled{opacity:.6}
.n-feedback{min-height:24px;margin-top:16px;font-size:14px}.n-feedback p{margin:5px 0;font-size:13px;color:#c9d5e7}.n-right strong{color:#8fe3c3}.n-wrong>strong{color:#ffb481}.n-right,.n-wrong{animation:n-pop .18s ease-out}.n-continue{margin:8px 0 12px}.n-context{font-size:12px;color:var(--n-muted);margin-top:12px}.n-context summary{cursor:pointer;min-height:36px;display:list-item;line-height:36px}.n-context p{margin:0 0 10px}
.n-progress{max-width:850px;margin:24px auto 0;display:flex;align-items:center;gap:20px}.n-progress-cells{display:flex;gap:5px;flex:1}.n-progress-cells span{height:9px;background:#314665;flex:1;transform:skew(-18deg)}.n-progress-cells .complete{background:#60b7ff}.n-progress-cells .current{background:#ff9a48;box-shadow:0 0 12px #ff9a4844}.n-progress strong{font-size:20px;font-variant-numeric:tabular-nums}.n-progress strong span{color:var(--n-muted);font-size:14px}.n-world .n-save{font-size:11px;color:var(--n-muted);margin-top:16px}.n-play>.n-save{text-align:center}
.n-enter{animation:n-enter .26s cubic-bezier(.18,.68,.28,1)}.n-exit{animation:n-exit .16s ease-in forwards;pointer-events:none}@keyframes n-enter{from{opacity:.3;transform:translateX(22px);clip-path:inset(0 14% 0 0)}to{opacity:1;transform:translateX(0);clip-path:inset(0)}}@keyframes n-exit{to{opacity:.2;transform:translateX(-18px)}}@keyframes n-pop{50%{transform:translateX(3px)}}
.n-ending-title{text-align:center;max-width:850px;margin:auto}.n-ending-title h2{font-family:Arial,sans-serif;font-size:clamp(30px,5vw,62px);font-weight:950;line-height:1.1;margin:16px 0 10px;letter-spacing:-.04em;transform:rotate(-2deg)}.n-ending-title p{color:var(--n-muted)}.n-perfect .n-ending-title h2{color:#ffab55;text-shadow:3px 3px #174e91}.n-success .n-ending-title h2{color:#8dd2ff}.n-retry .n-ending-title h2{color:#f0e3d6}.n-result-comic{max-width:780px;margin:24px auto;position:relative;border:2px solid #52739a}.n-result-comic>img{display:block;width:100%;height:auto}.n-score{position:absolute;bottom:14px;right:14px;background:#0a1325eb;border:2px solid #ff9a48;padding:14px 22px;transform:rotate(-3deg);display:grid}.n-score strong{font-size:clamp(38px,7vw,64px);line-height:1}.n-score small{font-size:24px;color:var(--n-muted)}.n-score>span{text-transform:uppercase;font-size:10px;letter-spacing:.15em;margin-top:8px}.n-clean{text-align:center}.n-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.n-ending>.n-save{text-align:center}
.n-medals{margin-top:30px;padding:24px;border:1px solid #c4cedc;border-radius:8px;background:#f5f8fc}.n-medals h3{margin-top:0}.n-medals>p{font-size:13px;color:#526279}.n-medal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.n-medal{display:flex;align-items:center;gap:14px;padding:15px;background:white;border:1px solid #ccd5e1;border-radius:6px}.n-medal img{flex:none}.n-medal.locked img{filter:grayscale(1);opacity:.55}.n-medal h4{font-size:14px;margin:0 0 8px}.n-medal p{font-size:11px;line-height:1.6;margin:0;color:#526279}.n-medal small{display:block;margin-top:8px;font-size:11px;font-weight:700;color:#385579}
@media(min-width:1100px){.n-play .n-comic{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:1120px}.n-play .n-illustration{display:flex;align-items:center}.n-play .n-illustration img{height:auto;max-height:none;object-fit:contain}.n-dialogue{min-width:0}.n-play .n-input-row{flex-direction:column}.n-story-heading,.n-progress{max-width:1120px}}
@media(max-width:700px){.n-world{padding:18px 14px;border-radius:8px}.n-phase{grid-template-columns:1fr}.n-cover img{max-height:260px}.n-phase-copy{padding:22px}.n-world .n-heading{margin-bottom:22px}.n-world .n-heading h2{font-size:32px}.n-toolbar{gap:12px;margin-bottom:12px}.n-link{font-size:11px;max-width:70%}.n-input-row{flex-direction:column}.n-input-row .btn{width:100%}.n-sentence{font-size:23px}.n-dialogue{padding:18px}.n-medal-grid{grid-template-columns:1fr}.n-medals{padding:18px}.n-score{padding:10px 16px}.n-illustration img{max-height:none}}
@media(prefers-reduced-motion:reduce){.n-world *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.n-world .n-primary:hover{transform:none}}

.n-last-chance{display:block;width:fit-content;margin-bottom:12px;padding:7px 12px;border:2px solid #ff9a48;border-radius:4px;background:#ff9a48;color:#101724;font-size:17px;font-weight:900;letter-spacing:.08em}.n-feedback:focus{outline:none}

/* Printed-cover screen: only the hub cover receives this non-interactive overlay. */
.n-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#071025 0.7px,transparent 1px);background-size:4px 4px;opacity:.27}.n-cover .n-chapter{z-index:1}.n-task{font-size:14px;line-height:1.6;color:var(--n-muted);margin:-10px 0 22px}

.n-cover{background:#080f1c}.n-cover img{object-fit:contain}