.nm-station{--nm-purple:#b164ff;position:relative;width:min(1200px,94vw);margin:44px auto 64px;padding:30px;border:1px solid #c397ff38;border-radius:24px;background:radial-gradient(ellipse at 66% 48%,#49286630,transparent 65%),#101018;color:#eee;box-shadow:0 20px 50px #0004}
.nm-heading{display:flex;justify-content:space-between;align-items:start;gap:20px}.nm-heading h2{margin:0;color:#eee2ff;font:normal clamp(26px,4vw,36px)/1.2 Georgia,serif}.nm-heading p{max-width:560px;margin:10px 0 0;color:#c5bdcf;font:16px/1.6 system-ui}
.nm-reset,.nm-remove,.nm-retry{border:1px solid #c397ff55;border-radius:9px;background:#261b33;color:#eee2ff;padding:10px 14px;font:14px system-ui;min-height:44px}.nm-reset:disabled,.nm-remove:disabled{opacity:.4;cursor:default}
.nm-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:center;margin-top:24px}.nm-tray{align-self:center}.nm-tray h3{margin:0 0 8px;font:600 18px system-ui;color:#eee2ff}.nm-instructions{color:#bcb3c9;font:14px/1.5 system-ui;margin:0 0 18px}.nm-mods{display:grid;gap:12px}
.nm-mod{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:12px;min-height:102px;width:100%;padding:12px;border:1px solid #bb8cf035;border-radius:14px;background:#ffffff04;color:#e7dcf4;text-align:left;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.nm-mod:disabled{cursor:wait;opacity:.5}.nm-mod canvas{display:block;width:76px;height:76px;pointer-events:none}.nm-mod strong{display:block;font:600 14px/1.5 system-ui}.nm-mod small{display:block;color:#bfb0ce;font:13px/1.4 system-ui}.nm-mod[aria-pressed=true]{border-color:#c69aff;background:#b46aff15;box-shadow:0 0 20px #a950ff22}.nm-mod.is-dragging{cursor:grabbing;opacity:.55}
.nm-stage-wrap{min-width:0}.nm-stage{position:relative;width:100%;max-width:700px;aspect-ratio:1;margin:auto;isolation:isolate}.nm-scene{display:block;width:100%;height:100%;pointer-events:none}.nm-socket{position:absolute;left:var(--x);top:var(--y);width:22.25%;height:22.1%;padding:0;transform:translate(-50%,-50%);background:transparent;border:2px solid transparent;border-radius:50%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.nm-socket.is-target{border-color:#d8b0ff;box-shadow:0 0 24px #b968ff88,inset 0 0 14px #b968ff44}.nm-socket:disabled{cursor:default}.nm-station button:focus-visible{outline:2px solid #e7caff;outline-offset:5px}
.nm-slots{display:flex;justify-content:center;gap:16px;margin-top:12px}.nm-slot-info{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(230px,50%);border-top:1px solid #c397ff30;padding-top:12px;font:14px/1.5 system-ui}.nm-slot-info strong{display:block;color:#e4ccff}.nm-slot-info span{color:#bcb3c9}.nm-remove{padding:6px 10px;font-size:13px}.nm-status{margin:20px 0 0;color:#cbb5df;font:14px/1.5 system-ui;min-height:22px}.nm-drag-preview{position:fixed;z-index:2147483646;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px #ae62ff88)}
@media(max-width:700px){.nm-station{padding:20px 14px;margin-top:26px}.nm-heading{gap:12px}.nm-heading p{font-size:14px}.nm-reset{padding:8px 10px;white-space:nowrap}.nm-layout{display:flex;flex-direction:column;gap:20px;margin-top:20px}.nm-tray,.nm-stage-wrap{width:100%}.nm-mods{grid-template-columns:1fr 1fr;gap:10px}.nm-mod{grid-template-columns:60px 1fr;gap:6px;padding:8px;min-height:82px}.nm-mod canvas{width:60px;height:60px}.nm-mod strong{font-size:13px}.nm-mod small{font-size:12px}.nm-instructions{margin-bottom:12px}.nm-slots{gap:12px}.nm-slot-info{gap:5px;font-size:13px}.nm-remove{font-size:12px;padding:6px}.nm-stage{max-width:580px}}
@media(prefers-reduced-motion:reduce){.nm-drag-preview{filter:none}}
/* Keep the artwork vivid and let emitted light breathe beyond the skull. */
.nm-scene{filter:saturate(1.3) brightness(1.16) contrast(1.06)}
.nm-mod canvas{filter:saturate(1.25) brightness(1.12)}
.nm-stage{overflow:visible}
/* Mod details stay readable on hover, keyboard focus, and tap. */
.nm-mod-tip{position:absolute;z-index:60;box-sizing:border-box;max-width:calc(100% - 32px);padding:18px 38px 18px 16px;border:1px solid #b18ac5;border-radius:12px;background:#18131f;color:#eee2ff;box-shadow:0 12px 30px #0009;font:14px/1.5 system-ui}
.nm-mod-tip[hidden]{display:none}.nm-mod-tip strong{display:block;font-size:16px;overflow-wrap:anywhere}.nm-mod-tip p{margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.nm-tip-close{position:absolute;right:2px;top:2px;width:36px;height:36px;padding:0;border:0;background:transparent;color:#ddd;font:24px system-ui;cursor:pointer}
.nm-status:not(.is-error){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;min-height:0}
.nm-socket{touch-action:none}.nm-socket.is-filled{cursor:grab}.nm-socket.is-dragging{cursor:grabbing}
.nm-drag-preview{filter:drop-shadow(0 0 10px var(--nm-drag-color,#ae62ff))}
.nm-mod strong,.nm-slot-info span{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.nm-drag-preview{filter:none}}
/* The painted socket silhouette is highlighted on the scene canvas. */
.nm-socket.is-target{border-color:transparent;box-shadow:none}
.nm-station{overflow:visible}.nm-mod-tip{max-width:calc(100vw - 24px)}
.nm-match-bonus{margin:18px auto 0;max-width:600px;padding:16px 20px;border:1px solid #ba81ee66;border-radius:12px;background:#271833;color:#eedeff;font:14px/1.6 system-ui;box-shadow:0 0 24px #a855f71a}
.nm-match-bonus[hidden],.nm-tip-bonus[hidden]{display:none}.nm-match-bonus strong{font-size:16px}.nm-match-bonus p,.nm-tip-bonus p{margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.nm-tip-bonus{border-top:1px solid #b18ac544;margin-top:14px;padding-top:12px}.nm-tip-bonus strong{font-size:14px;color:#dcb7ff}
.nm-match-bonus{position:relative;isolation:isolate;border-color:#66beff80;box-shadow:0 0 13px #148cff33,inset 0 0 16px #198dff0d;padding:20px 24px}
.nm-match-bonus>strong,.nm-match-bonus>p{position:relative;z-index:1}
/* The discharge is rendered as evolving filaments, not a dashed stroke. */
.nm-match-bonus{border-color:var(--nm-charge-color,#459cff);box-shadow:0 0 15px color-mix(in srgb,var(--nm-charge-color,#459cff) 20%,transparent)}
.nm-charge-lightning{position:absolute;left:-28px;top:-28px;width:calc(100% + 56px);height:calc(100% + 56px);pointer-events:none;z-index:0;filter:none}
/* A chip collection, with each module at its fitted artwork scale. */
.nm-layout{grid-template-columns:330px minmax(0,1fr)}
.nm-mods{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;align-items:start}
.nm-mod{display:flex;flex-direction:column;justify-content:start;gap:7px;padding:8px 0 10px;min-height:0;text-align:center;background:transparent;border-color:transparent;transition:background .15s,border-color .15s}
.nm-mod canvas{width:var(--nm-mod-size,140px);height:var(--nm-mod-size,140px);max-width:none;filter:saturate(1.12) contrast(1.06)}
.nm-mod strong{font-size:14px;line-height:1.35}.nm-mod small{margin-top:3px;font-size:12px}
.nm-mod:hover,.nm-mod:focus-visible{border-color:color-mix(in srgb,var(--nm-mod-color) 45%,transparent);background:color-mix(in srgb,var(--nm-mod-color) 7%,transparent)}
.nm-mod[aria-pressed=true]{border-color:var(--nm-mod-color);box-shadow:0 0 18px color-mix(in srgb,var(--nm-mod-color) 18%,transparent)}
@media(max-width:900px){.nm-layout{display:flex;flex-direction:column;gap:24px}.nm-tray,.nm-stage-wrap{width:100%}.nm-mods{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}}
@media(max-width:520px){.nm-mods{grid-template-columns:repeat(2,minmax(0,1fr))}.nm-mod strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.nm-mod{transition:none}}
/* A broad shallow arch leaves the artwork and grab areas exposed. */
.nm-layout{display:flex;flex-direction:column;gap:20px;align-items:center}
.nm-tray,.nm-stage-wrap{width:100%}.nm-tray h3,.nm-instructions{text-align:center}
.nm-mods{display:block;position:relative;height:calc(var(--nm-mod-size,140px) + 74px);max-width:none;margin:20px auto 0;isolation:isolate}
.nm-mod-hand{position:absolute;left:50%;top:20px;width:var(--nm-mod-size,140px);height:var(--nm-mod-size,140px);transform:translateX(calc(-50% + var(--nm-chip-offset)*var(--nm-mod-size,140px)*.74)) translateY(calc(var(--nm-chip-offset)*var(--nm-chip-offset)*7px));z-index:var(--nm-chip-order)}
.nm-mod-hand:hover,.nm-mod-hand:has(.nm-mod:focus-visible){z-index:20}
.nm-mod-hand .nm-mod{box-sizing:border-box;width:100%;height:100%;padding:0;gap:0;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;box-shadow:none;transition:transform .18s ease}
.nm-mod-hand:hover .nm-mod,.nm-mod-hand:has(.nm-mod:focus-visible) .nm-mod{transform:translateY(-12px);border:0;background:transparent;box-shadow:none}
.nm-mod-hand .nm-mod>span{display:none}
.nm-mod-hand .nm-mod[aria-pressed=true]{border:0;background:transparent;box-shadow:none}
.nm-mod-hand:hover canvas,.nm-mod-hand:has(.nm-mod:focus-visible) canvas{filter:saturate(1.12) contrast(1.06) drop-shadow(0 0 9px var(--nm-mod-color))}
.nm-mod-hand:has(.is-dragging){z-index:21}
@media(prefers-reduced-motion:reduce){.nm-mod-hand .nm-mod{transition:none}}
/* Compact controls and a dedicated details column keep text off the artwork. */
.nm-station{padding:22px 26px}
.nm-heading{align-items:center}.nm-heading h2{font-size:clamp(24px,3vw,30px)}.nm-heading p{margin:4px 0 0;font-size:14px;line-height:1.4}
.nm-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:auto auto;gap:4px 24px;align-items:start;margin-top:14px}
.nm-tray{grid-column:1;grid-row:1}.nm-stage-wrap{grid-column:1;grid-row:2}
.nm-tray-heading{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px}
.nm-tray-heading h3{margin:0;font:600 13px/1.4 system-ui;color:#d2bbdf}
.nm-tray-heading .nm-instructions{margin:0;font:12px/1.4 system-ui;color:#a99bb7}
.nm-mods{margin-top:2px;height:calc(var(--nm-mod-size,140px) + 56px)}
.nm-stage{max-width:520px}.nm-slots{margin-top:0}
.nm-details{grid-column:2;grid-row:1 / 3;min-width:0;align-self:start;position:sticky;top:24px;padding-top:28px}
.nm-details .nm-mod-tip{position:relative;left:auto;top:auto;width:100%;max-width:none;max-height:calc(100svh - 120px);overflow-y:auto;z-index:1;padding:16px 36px 16px 16px}
.nm-details .nm-match-bonus{box-sizing:border-box;width:100%;margin:0;padding:18px;max-width:none}
.nm-details.is-showing-tip .nm-match-bonus{display:none}
@media(max-width:800px){.nm-station{padding:18px 14px}.nm-layout{grid-template-columns:minmax(0,1fr);gap:8px}.nm-tray{grid-row:1}.nm-details{grid-column:1;grid-row:2;position:static;padding-top:0}.nm-stage-wrap{grid-row:3}.nm-details .nm-mod-tip{max-height:none}.nm-details .nm-match-bonus{max-width:520px;margin:auto}}
/* Large artwork with a Culinaire-style sticky vertical module tray. */
.nm-station{box-sizing:border-box;width:min(1480px,96vw)}
.nm-layout{grid-template-columns:240px minmax(0,1fr) 260px;grid-template-rows:auto;gap:16px}
.nm-tray{box-sizing:border-box;grid-column:1;grid-row:1;position:sticky;top:18px;align-self:start;max-height:calc(100svh - 36px);overflow:auto;padding:16px 12px;border:1px solid #c397ff45;border-radius:18px;background:linear-gradient(155deg,#251d32f5,#11141cf5);box-shadow:0 18px 45px #0007;scrollbar-width:thin;scrollbar-color:#ad7bc855 transparent}
.nm-tray-heading{display:block;text-align:center}.nm-tray-heading h3{font-size:14px}.nm-tray-heading .nm-instructions{margin-top:5px}
.nm-mods{height:calc(var(--nm-mod-size,155px)*3.96 + 36px);margin:6px 0 0}
.nm-mod-hand{top:12px;transform:translateX(calc(-50% + (4 - var(--nm-chip-offset)*var(--nm-chip-offset))*6px)) translateY(calc((var(--nm-chip-offset) + 2)*var(--nm-mod-size,155px)*.74))}
.nm-mod-hand:hover .nm-mod,.nm-mod-hand:has(.nm-mod:focus-visible) .nm-mod{transform:translateX(6px)}
.nm-stage-wrap{grid-column:2;grid-row:1}.nm-stage{max-width:700px}
.nm-details{grid-column:3;grid-row:1;position:sticky;top:18px;padding-top:0}
@media(max-width:1100px){.nm-layout{grid-template-columns:220px minmax(0,1fr);gap:16px}.nm-tray{grid-row:1 / 3}.nm-details{grid-column:2;grid-row:2;position:static}.nm-stage-wrap{grid-column:2;grid-row:1}}
@media(max-width:700px){.nm-layout{grid-template-columns:minmax(0,1fr);gap:14px}.nm-tray{grid-column:1;grid-row:1;position:static;width:min(240px,100%);justify-self:center;max-height:60svh}.nm-details{grid-column:1;grid-row:2}.nm-stage-wrap{grid-column:1;grid-row:3}}
/* Keep the sticky inventory outside the station's framed working area. */
.nm-workshop-shell{box-sizing:border-box;display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start;width:min(1480px,96vw);margin:44px auto 64px}
.nm-workshop-shell>.nm-tray{grid-column:1;grid-row:1}
.nm-workshop-shell>.nm-station{grid-column:2;grid-row:1;min-width:0;width:100%;margin:0}
.nm-workshop-shell .nm-layout{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto}
.nm-workshop-shell .nm-stage-wrap{grid-column:1;grid-row:1}
.nm-workshop-shell .nm-details{grid-column:2;grid-row:1}
.nm-mod-hand{transform:translateX(-50%) translateY(calc((var(--nm-chip-offset) + 2)*var(--nm-mod-size,155px)*.74))}
.nm-workshop-shell .nm-mod:focus-visible{outline:2px solid #e7caff;outline-offset:5px}
@media(max-width:1100px){.nm-workshop-shell{grid-template-columns:220px minmax(0,1fr);gap:16px}.nm-workshop-shell .nm-layout{grid-template-columns:minmax(0,1fr)}.nm-workshop-shell .nm-details{grid-column:1;grid-row:2;position:static}}
@media(max-width:700px){.nm-workshop-shell{grid-template-columns:minmax(0,1fr);margin:26px auto 44px}.nm-workshop-shell>.nm-station{grid-column:1;grid-row:2}.nm-workshop-shell .nm-details{grid-row:1}.nm-workshop-shell .nm-stage-wrap{grid-row:2}}
/* Center the station on the page's existing section axis. The inventory
   occupies the outside gutter without contributing to that centering. */
.nm-workshop-shell{grid-template-columns:0 minmax(0,1fr);gap:0;width:min(100%,calc(100vw - 520px))}
.nm-workshop-shell>.nm-tray{width:240px;transform:translateX(-260px)}
@media(max-width:1300px){.nm-workshop-shell .nm-layout{grid-template-columns:minmax(0,1fr)}.nm-workshop-shell .nm-details{grid-column:1;grid-row:2;position:static}}
@media(max-width:1100px){.nm-workshop-shell{width:100%;grid-template-columns:minmax(0,1fr);gap:18px}.nm-workshop-shell>.nm-tray{grid-column:1;grid-row:1;position:static;transform:none;justify-self:start;max-height:340px}.nm-workshop-shell>.nm-station{grid-column:1;grid-row:2}}
.nm-details .nm-tip-artwork{display:block;width:min(100%,200px);height:auto;aspect-ratio:1;margin:0 auto 14px;filter:saturate(1.12) contrast(1.06);pointer-events:none}
.nm-details .nm-supercharged-artwork{position:relative;z-index:1;filter:saturate(1.12) contrast(1.06) drop-shadow(0 0 10px var(--nm-charge-color))}
.nm-supercharged-effect{position:relative;z-index:1}
.nm-supercharged-effect>strong{color:var(--nm-charge-color)}
.nm-tip-bonus.is-inactive{color:#96909f;opacity:.65;border-top-color:#77717e44}
.nm-tip-bonus.is-inactive>strong{color:inherit}
