/* Netrun — the solo Network run (netrun.php) + the run page (netrun_run.php).
   Screens: room · deck · city · inside · result. Effects follow html[data-motion]. */
.netrun-body { overflow: hidden; }
.nr { /* aliases of the kit tokens (nr_kit.css) — change colors there, never here */ --nr-bg: var(--k-bg); --nr-panel: var(--k-panel); --nr-line: var(--k-line); --nr-cyan: var(--k-cyan); --nr-mag: var(--k-mag); --nr-yel: var(--k-yel); --nr-pur: var(--k-pur); --nr-red: var(--k-red); --nr-grn: var(--k-grn); --nr-text: var(--k-text); --nr-muted: var(--k-muted);
  position: fixed; inset: var(--header-h, 56px) 0 0 0; background: var(--nr-bg); color: var(--nr-text); font-family: "Segoe UI", Rajdhani, system-ui, sans-serif; z-index: 5; }
.nr * { box-sizing: border-box; }
.nr .btn { min-height: 32px; }
.nr-screen { position: absolute; inset: 0; display: none; }
.nr-screen.on { display: block; }
/* M5c: the user's pictures replace the canvas scene when they exist (includes/netrun_art.php) */
.nr-art { position: absolute; inset: 0; background: center / cover no-repeat; }
.nr-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--k-bg) 78%, transparent), transparent 34%, transparent 58%, color-mix(in srgb, var(--k-bg) 82%, transparent)); } /* the title on top and the cards below stay readable on any picture */
.nr-screen.has-art { overflow: hidden; } .nr-screen.has-art > canvas.nr-full { display: none; }
html[data-motion="full"] .nr-art { animation: nr-art-drift 40s ease-in-out infinite alternate; }
@keyframes nr-art-drift { from { transform: scale(1.02) translate(-0.6%, 0); } to { transform: scale(1.08) translate(0.6%, -0.8%); } }
.nr-full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#nr-c-city { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* the map takes drags and pinches itself (ui.js), not the page */
.nr-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 80% at 50% 50%, transparent 55%, color-mix(in srgb, var(--k-black) 80%, transparent)); }
.nr-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--k-black) 16%, transparent) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
html[data-motion="off"] .nr-scan { display: none; }
.nr-card { background: var(--nr-panel); border: 1px solid var(--nr-line); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(4px); }
.nr-card h3 { margin: 8px 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--nr-mag); text-transform: uppercase; }
.nr-card h3:first-child { margin-top: 0; }
.nr-kicker { font-family: var(--mono); letter-spacing: 0.3em; font-size: 11px; color: var(--nr-cyan); }
.nr-title { font-size: 30px; font-weight: 800; letter-spacing: 0.04em; text-shadow: 0 0 18px color-mix(in srgb, var(--k-mag) 60%, transparent), 2px 0 var(--nr-cyan), -2px 0 var(--nr-mag); margin: 2px 0 4px; }
.nr-title.sm { font-size: 22px; }
.nr-hint { font-size: 12px; color: var(--nr-muted); }
.nr-head { position: absolute; left: 18px; top: 46px; z-index: 3; max-width: 60%; }
.nr-next { position: absolute; right: 18px; bottom: 18px; z-index: 5; padding: 12px 22px; font-size: 15px; font-family: var(--mono); letter-spacing: 0.2em; font-weight: 800; background: linear-gradient(90deg, var(--nr-mag), var(--nr-cyan)); color: var(--k-ink); border: 0; border-radius: 8px; box-shadow: 0 0 26px color-mix(in srgb, var(--k-mag) 45%, transparent); cursor: pointer; }
.nr-next:disabled { filter: grayscale(1); opacity: 0.4; box-shadow: none; cursor: default; }
.nr-back { position: absolute; left: 18px; bottom: 18px; z-index: 5; background: transparent; color: var(--nr-muted); border: 1px solid var(--nr-line); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.nr-top { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 4px 12px; font-size: 12px; background: color-mix(in srgb, var(--k-bg) 75%, transparent); border-bottom: 1px solid var(--nr-line); pointer-events: none; }
.nr-top > * { pointer-events: auto; }
.nr-top b { color: var(--nr-mag); letter-spacing: 0.2em; font-family: var(--mono); }
.nr-crumbs { display: flex; gap: 4px; }
.nr-crumbs i { font-style: normal; padding: 2px 8px; border-radius: 4px; color: var(--nr-muted); border: 1px solid transparent; }
.nr-crumbs i.on { color: var(--nr-cyan); border-color: var(--nr-line); }
.nr-top-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
#nr-music-label { cursor: pointer; } #nr-music-label:hover { color: var(--nr-cyan); }
.nr-jukebox { position: absolute; top: 44px; right: 8px; z-index: 13; width: min(340px, calc(100% - 16px)); max-height: calc(100% - 60px); overflow: auto; padding: 10px; font-size: 12px; }
.nr-jukebox .jk-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .nr-jukebox .jk-head b { flex: 1; letter-spacing: 0.25em; color: var(--nr-cyan); }
.nr-jukebox .jk-g { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; } .nr-jukebox .jk-g small { flex: 1 1 100%; color: var(--nr-muted); letter-spacing: 0.15em; text-transform: uppercase; font-size: 10px; }
.nr-jukebox .btn { font-size: 11px; padding: 3px 8px; } .nr-jukebox .btn.on { background: var(--nr-cyan); color: var(--k-ink); }
.nr-tap { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 8px; background: color-mix(in srgb, var(--k-bg) 72%, transparent); cursor: pointer; font: 14px var(--mono); letter-spacing: 0.3em; color: var(--nr-cyan); text-align: center; }
.nr-tap small { font-family: inherit; font-size: 12px; letter-spacing: 0; color: var(--nr-muted); }

/* ── Room ── */
.nr-cards { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; gap: 14px; overflow-x: auto; padding: 30px 18px 10px; scroll-snap-type: x mandatory; }
.nr-pcard { flex: 0 0 170px; scroll-snap-align: center; height: 236px; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid var(--nr-line); background: var(--k-card-bot); cursor: pointer; transition: transform 0.25s, box-shadow 0.25s; text-align: left; padding: 0; color: inherit; font: inherit; }
.nr-pcard img { width: 100%; height: 146px; object-fit: cover; object-position: top; display: block; }
.nr-pcard .n { padding: 6px 10px 0; font-weight: 700; font-size: 15px; }
.nr-pcard .d { padding: 0 10px; font-size: 11px; color: var(--nr-muted); }
.nr-pcard .holo { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--k-cyan) 18%, transparent) 45%, transparent 60%); pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.nr-pcard:hover { transform: translateY(-6px); }
.nr-pcard:hover .holo { opacity: 1; }
.nr-pcard.sel { transform: translateY(-16px) scale(1.06); border-color: var(--nr-cyan); box-shadow: 0 0 30px color-mix(in srgb, var(--k-cyan) 45%, transparent), 0 20px 40px color-mix(in srgb, var(--k-black) 60%, transparent); }
.nr-pcard.sel::after { content: "SELECTED"; position: absolute; top: 8px; left: 8px; font: 10px var(--mono); letter-spacing: 0.2em; padding: 2px 6px; border-radius: 4px; background: var(--nr-cyan); color: var(--k-ink); }
.nr-pcard.no { opacity: 0.55; }
.nr-pcard.no::after { content: "NO DECK"; position: absolute; top: 8px; left: 8px; font: 10px var(--mono); letter-spacing: 0.2em; padding: 2px 6px; border-radius: 4px; background: var(--nr-red); color: var(--k-white); }
.nr-dice-mini span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 1px; vertical-align: middle; }
.nr-dice-mini .y { background: var(--k-yel); } .nr-dice-mini .g { background: var(--k-grn); }
html[data-motion="off"] .nr-pcard, html[data-motion="off"] .nr-pcard.sel { transition: none; transform: none; }

/* ── Deck ── */
#nr-deck { background: radial-gradient(70% 70% at 50% 100%, var(--k-card-top), var(--k-bg) 70%); }
.nr-rigtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.nr-rigtabs .btn.on { background: var(--nr-cyan); color: var(--k-ink); font-weight: 700; }
.nr-rigtabs .btn.dim { opacity: 0.35; }
.nr-cart { width: 118px; height: 58px; border-radius: 8px; background: linear-gradient(180deg, var(--k-card-top), var(--k-field)); border: 1px solid color-mix(in srgb, var(--k-white) 15%, transparent); box-shadow: 0 8px 18px color-mix(in srgb, var(--k-black) 60%, transparent); position: relative; cursor: pointer; padding: 8px 8px 6px 14px; font-size: 12px; transition: transform 0.18s; user-select: none; color: inherit; text-align: left; }
.nr-cart::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 8px 0 0 8px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.nr-cart b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-cart small { color: var(--nr-muted); font-family: var(--mono); font-size: 10px; }
.nr-cart .s { position: absolute; right: 8px; bottom: 6px; font: 800 14px var(--mono); color: var(--c); }
.nr-cart:hover { transform: translateY(-3px); }
.nr-cart.flying { transition: transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); z-index: 9; }
.nr-cart.dim { opacity: 0.4; cursor: default; }
html[data-motion="off"] .nr-cart, html[data-motion="off"] .nr-cart.flying { transition: none; }
.nr-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.nr-toggle i { width: 36px; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--k-muted) 25%, var(--k-bg)); position: relative; transition: background 0.2s; flex: 0 0 auto; }
.nr-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--k-muted); transition: left 0.2s; }
.nr-toggle.on i { background: var(--nr-grn); } .nr-toggle.on i::after { left: 20px; background: var(--k-ink); }
.nr-toggle.off { opacity: 0.45; cursor: default; }
.nr-story { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.nr-story input { width: 56px; }
.nr-target-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--k-white) 8%, transparent); border-radius: 6px; margin-bottom: 4px; font-size: 13px; cursor: pointer; }
.nr-target-row.sel { border-color: var(--nr-cyan); background: color-mix(in srgb, var(--k-cyan) 7%, transparent); }
.nr-target-row small { margin-left: auto; color: var(--nr-muted); font-family: var(--mono); }

/* ── City ── */
.nr-city-ui { position: absolute; right: 44px; top: 50px; width: 300px; z-index: 3; } /* clear of the tab column on the right edge */
.nr-city-ui .row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed color-mix(in srgb, var(--k-white) 8%, transparent); }
.nr-city-ui .row b { color: var(--nr-cyan); }
/* the grid's moves as cards (ui.js cityHand), bottom centre like every hand */
.nr-city-zone { position: absolute; z-index: 4; left: 0; right: 0; bottom: 10px; margin: 0 auto; width: fit-content; max-width: calc(100% - 16px); padding: 4px 10px; overflow: visible; }
.nr-city-zone[hidden], .nr.bbs-open .nr-city-zone { display: none; }
#nr-city .nr-head .nr-hint.aim { color: var(--k-cyan); font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--k-cyan) 50%, transparent); } /* a card waits for a tap on a lit tower */
.nr-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.25s; z-index: 8; max-width: 90%; }
.nr-banner.show { opacity: 1; }
.nr-banner .t { font-size: 34px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 20px color-mix(in srgb, var(--k-mag) 70%, transparent), 2px 0 var(--nr-cyan), -2px 0 var(--nr-mag); }
.nr-banner .t.bad { text-shadow: 0 0 20px color-mix(in srgb, var(--k-red) 80%, transparent), 2px 0 var(--nr-red), -2px 0 var(--nr-yel); }
.nr-banner .m { font-size: 13px; color: var(--nr-muted); margin-top: 4px; }

/* ── Inside ── */
.nr-hud { position: absolute; z-index: 3; font-size: 12px; }
.nr-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--k-white) 10%, transparent); overflow: hidden; margin: 3px 0 6px; }
.nr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--k-cyan), var(--nr-pur)); }
.nr-bar.wounds i { background: linear-gradient(90deg, var(--k-fire), var(--nr-red)); }
.nr-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--k-white) 15%, transparent); margin: 2px 2px 0 0; color: var(--nr-muted); }
.nr-pill.on { border-color: var(--nr-grn); color: var(--nr-grn); box-shadow: 0 0 8px color-mix(in srgb, var(--k-grn) 35%, transparent); }
.nr-pill.dmg { border-color: var(--nr-yel); color: var(--nr-yel); }
.nr-pill.dead { text-decoration: line-through; opacity: 0.5; }
.nr-alert { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--nr-cyan); color: var(--nr-cyan); }
.nr-alert.a1 { border-color: var(--nr-yel); color: var(--nr-yel); }
.nr-alert.a2 { border-color: var(--nr-red); color: var(--k-white); background: color-mix(in srgb, var(--k-red) 40%, transparent); animation: nr-blink 0.8s steps(2) infinite; }
@keyframes nr-blink { 50% { background: transparent; } }
html[data-motion="off"] .nr-alert.a2 { animation: none; }
.nr-rings { display: inline-flex; gap: 3px; vertical-align: middle; }
.nr-rings i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--nr-red); opacity: 0.3; }
.nr-rings i.on { opacity: 1; background: var(--nr-red); box-shadow: 0 0 8px var(--nr-red); }
.nr-hud-act { left: 50%; bottom: 14px; transform: translateX(-50%); width: min(900px, calc(100% - 24px)); }
.nr-turn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--nr-muted); margin-bottom: 6px; }
.nr-turn b { color: var(--nr-text); }
.nr-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--nr-red); transition: opacity 0.4s; z-index: 2; }
.nr-shake { animation: nr-shake 0.35s; }
@keyframes nr-shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 2px); } }
html[data-motion="off"] .nr-shake, html[data-motion="reduced"] .nr-shake { animation: none; }
.nr-detail { position: absolute; left: 50%; bottom: 170px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); z-index: 7; font-size: 13px; max-height: 48vh; overflow: auto; }
.nr-detail .row.off em { font-style: normal; color: var(--nr-text); }
.nr-detail .row.off.bad em { color: var(--nr-red); } .nr-detail .row.off.ok em { color: var(--nr-grn); }
.nr-detail .row.off > span { color: var(--nr-muted); font: 11px var(--mono); letter-spacing: 0.08em; min-width: 7em; }
.nr-rolltog { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.nr-detail h4 { margin: 0 0 4px; font-size: 15px; }
.nr-detail .rows { display: grid; gap: 4px; margin-top: 6px; }
.nr-detail .row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--k-white) 8%, transparent); cursor: pointer; background: transparent; color: inherit; font: inherit; text-align: left; }
.nr-detail .row:hover { border-color: var(--nr-cyan); }
.nr-detail .row small { margin-left: auto; font-family: var(--mono); color: var(--nr-muted); }
.nr-detail .close { position: absolute; right: 8px; top: 8px; }
.nr-spend { position: absolute; right: 12px; bottom: 170px; width: 340px; z-index: 7; max-height: calc(100% - 230px); overflow: auto; }
.nr-spend .budget { font-family: var(--mono); font-size: 12px; color: var(--nr-yel); margin-bottom: 6px; }
.nr-spend .btn { display: block; width: 100%; text-align: left; margin-top: 5px; font-size: 12px; }
.nr-spend .btn.picked { border-color: var(--nr-grn); color: var(--nr-grn); }
.nr-spend img, .nr-banner img, .nr-hud img, .nr-detail img { height: 14px; width: auto; vertical-align: middle; margin: 0 1px; }
.nr-sym { display: inline-block; font-size: 18px; letter-spacing: 3px; }
.s-ok { color: var(--nr-grn); } .s-adv { color: var(--nr-cyan); } .s-tri { color: var(--nr-yel); } .s-fail { color: var(--nr-pur); } .s-thr { color: var(--nr-red); } .s-des { color: var(--nr-mag); }

/* ── Result ── */
#nr-result { overflow: auto; }
.nr-dim { position: absolute; inset: 0; background: color-mix(in srgb, var(--k-bg) 72%, transparent); }
.nr-res { position: relative; z-index: 2; max-width: 900px; margin: 46px auto 20px; padding: 0 16px 20px; }
.nr-res h1 { font-family: var(--mono); font-size: 34px; letter-spacing: 0.2em; margin: 6px 0 2px; text-shadow: 2px 0 var(--nr-cyan), -2px 0 var(--nr-mag); }
.nr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.nr-big { font-size: 26px; font-weight: 800; }
.nr-code { font: 800 22px var(--mono); letter-spacing: 0.25em; color: var(--nr-yel); text-shadow: 0 0 14px color-mix(in srgb, var(--k-yel) 60%, transparent); margin: 4px 0; }
.ok { color: var(--nr-grn); } .bad { color: var(--nr-red); } .warn { color: var(--nr-yel); }
.nr-res ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.nr-res .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nr-log-full { font-family: var(--mono); font-size: 11px; color: var(--nr-muted); max-height: 200px; overflow: auto; }

/* ── Run page ── */
.nr-runpage .nr-code { font-size: 28px; }
.nr-rungrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.nr-runlog { font-family: var(--mono); font-size: 12px; line-height: 1.5; padding-left: 28px; }
.nr-runpage .nr-pill { font-size: 12px; }

@media (max-width: 860px) {
  .nr-title { font-size: 22px; } .nr-head { max-width: calc(100% - 36px); top: 40px; }
  #nr-music-label { display: none; } .nr-crumbs i { padding: 2px 5px; } .nr-top { gap: 6px; padding: 4px 8px; }
  .nr-next { right: 12px; bottom: 12px; padding: 10px 16px; font-size: 13px; }
  .nr-pcard { flex-basis: 140px; height: 206px; } .nr-pcard img { height: 118px; }
  .nr-city-ui { width: calc(100% - 24px); right: 12px; top: 96px; max-height: 40vh; overflow: auto; } /* the hand owns the bottom */
  .nr-turn { font-size: 10.5px; gap: 6px; }
  .nr-banner .t { font-size: 24px; }
  .nr-spend { width: calc(100% - 24px); right: 12px; bottom: 210px; max-height: 50vh; overflow: auto; }
  .nr-detail { bottom: 210px; }
  .nr-grid2, .nr-rungrid { grid-template-columns: 1fr; }
}

/* ── Inside HUD (M3b): a slim status strip, drawers from the sides, cards ── */
.nr-status { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; max-width: calc(100% - 140px); padding: 5px 14px; font: 11px var(--mono); letter-spacing: 0.08em; color: var(--nr-muted); background: color-mix(in srgb, var(--k-bg) 72%, transparent); border: 1px solid var(--nr-line); border-radius: 999px; backdrop-filter: blur(4px); }
.nr-status b { color: var(--nr-text); }
.nr-status .bad { color: var(--nr-red); font-weight: 700; }
.nr-status .st-bar { display: inline-flex; align-items: center; gap: 6px; }
.nr-status .st-bar .nr-bar { display: inline-block; width: 60px; height: 6px; margin: 0; }
.nr-status .chip { padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; font-weight: 700; }
.nr-status .chip.adv { color: var(--nr-cyan); } .nr-status .chip.thr { color: var(--nr-red); }
.nr-tab { position: absolute; top: 50%; z-index: 6; transform: translateY(-50%); writing-mode: vertical-rl; padding: 14px 6px; font: 700 11px var(--mono); letter-spacing: 0.3em; color: var(--nr-cyan); background: color-mix(in srgb, var(--k-bg) 85%, transparent); border: 1px solid var(--nr-line); cursor: pointer; transition: left 0.3s, right 0.3s, background 0.2s; }
.nr-tab { right: 0; left: auto; border-right: 0; border-radius: 8px 0 0 8px; z-index: 3; } /* every tab on the right; popups and sheets sit above them */
.nr-tab-deck { top: 42%; }
.nr-tab-map { top: 54%; display: block; }
.nr-tab-log { top: 66%; }
.nr-tab-jobs { top: 30%; z-index: 4; color: var(--nr-yel); }
.nr-tab-jobs.on { background: var(--nr-yel); color: var(--k-gold-dk); }
.nr-tab[hidden], .nr-drawer[hidden] { display: none; }
.nr-tab.on { background: var(--nr-cyan); color: var(--k-ink); }
.nr-tab[data-n]::after { content: attr(data-n); position: absolute; top: -8px; left: 50%; transform: translateX(-50%); writing-mode: horizontal-tb; min-width: 18px; padding: 1px 4px; border-radius: 9px; background: var(--nr-mag); color: var(--k-white); font-size: 10px; letter-spacing: 0; text-align: center; }
.nr-drawer { position: absolute; top: 40px; bottom: 150px; z-index: 5; width: min(300px, calc(100% - 50px)); overflow: auto; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); font-size: 12px; }
.nr-drawer-deck { right: 0; border-radius: 10px 0 0 10px; transform: translateX(105%); }
.nr-drawer-log { right: 0; border-radius: 10px 0 0 10px; transform: translateX(105%); font-family: var(--mono); font-size: 11px; }
.nr-drawer.open { transform: none; }
.nr-drawer-jobs { right: 0; z-index: 6; border-radius: 10px 0 0 10px; transform: translateX(105%); border-color: color-mix(in srgb, var(--k-yel) 45%, transparent); }
/* on the city the right side is the host panel: the jobs hang on the left there */
/* JOBS hangs on the right edge on every screen, like DECK / MAP / LOG (layout rules: docs/agents/netrun.md → Screen layout) */
.nr-job { margin: 6px 0; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--k-white) 8%, transparent); border-radius: 6px; }
.nr-job b { display: block; font-size: 13px; }
.nr-job small { display: block; font: 10px var(--mono); color: var(--nr-muted); letter-spacing: 0.05em; }
.nr-job em { display: block; margin-top: 3px; font: 700 10px var(--mono); letter-spacing: 0.15em; font-style: normal; color: var(--nr-yel); }
.nr-job.here { border-color: var(--nr-yel); }
.nr-job.hit { border-color: var(--nr-grn); } .nr-job.hit em { color: var(--nr-grn); }
.nr-tab.on { right: min(300px, calc(100% - 50px)); }
html[data-motion="off"] .nr-drawer, html[data-motion="off"] .nr-tab { transition: none; }
.nr-drawer-log div { padding: 2px 0; color: var(--nr-muted); border-bottom: 1px dashed color-mix(in srgb, var(--k-white) 6%, transparent); }
.nr-drawer-log .hi { color: var(--nr-text); } .nr-drawer-log .bad { color: var(--nr-red); } .nr-drawer-log .good { color: var(--nr-grn); }
.dr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dr-head b { font-size: 15px; } .dr-head small { color: var(--nr-muted); }
.nr-drawer .code { color: var(--nr-yel); letter-spacing: 0.15em; }
.dr-progs { display: grid; gap: 6px; margin-top: 6px; }

/* program cards */
.nr-prog { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; width: 100%; text-align: left; padding: 7px 10px 7px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--k-white) 12%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--k-card-top) 95%, transparent), color-mix(in srgb, var(--k-card-bot) 95%, transparent)); color: var(--nr-text); font: inherit; cursor: pointer; overflow: hidden; }
.nr-prog::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.nr-prog .g { color: var(--c); font-size: 15px; } .nr-prog b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-prog .s { font: 800 16px var(--mono); color: var(--c); }
.nr-prog small { grid-column: 1 / -1; color: var(--nr-muted); font-family: var(--mono); font-size: 10px; }
.nr-prog.on { border-color: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.nr-prog.dead { opacity: 0.45; filter: grayscale(0.8); }
.nr-prog.match { animation: nr-glowpulse 1.2s ease-in-out infinite; }
@keyframes nr-glowpulse { 50% { box-shadow: 0 0 22px var(--c); } }
.nr-prog.mini { width: auto; padding: 4px 8px 4px 10px; grid-template-columns: auto auto auto; }
.nr-prog.mini small { display: none; }
.nr-prog:hover { border-color: var(--c); }
html[data-motion="off"] .nr-prog.match { animation: none; }
.nr-pop { position: absolute; z-index: 12; width: min(340px, calc(100% - 16px)); font-size: 13px; }
.nr-pop h4 { margin: 0 0 4px; font-size: 16px; } .nr-pop h4 .s { color: var(--nr-cyan); font-family: var(--mono); }
.nr-pop p { margin: 8px 0; line-height: 1.4; }

/* encounter matchup: the ice against your breaker */
.nr-matchup { position: absolute; left: 50%; bottom: 170px; transform: translateX(-50%); z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: min(640px, calc(100% - 24px)); }
.nr-matchup[hidden], .nr-skip[hidden], .nr-pop[hidden] { display: none; }
.mu-vs { font: 900 22px var(--mono); color: var(--nr-mag); text-shadow: 0 0 12px var(--nr-mag); }
.mu-note { margin-top: 4px; font: 11px var(--mono); color: var(--nr-grn); text-align: center; }
.mu-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font: 10px var(--mono); color: var(--nr-muted); }
.mu-pick .btn { padding: 3px 8px; font: 11px var(--mono); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.mu-pick .btn.on { border-color: var(--c); color: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 45%, transparent); }
.nr-icecard { position: relative; padding: 9px 12px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--k-field) 95%, transparent), color-mix(in srgb, var(--k-bg) 95%, transparent)); border: 1px solid var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.nr-icecard small { display: block; font: 10px var(--mono); letter-spacing: 0.15em; color: var(--c); text-transform: uppercase; }
.nr-icecard b { font-size: 15px; } .nr-icecard .s { position: absolute; right: 10px; top: 6px; font: 900 26px var(--mono); color: var(--c); }
.nr-icecard p { margin: 5px 0 0; font-size: 11px; color: var(--nr-text); max-height: 4.4em; overflow: auto; }
.nr-icecard p.r { color: var(--nr-muted); }
.nr-nobreaker { display: grid; gap: 6px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--nr-red); background: color-mix(in srgb, var(--k-gold-dk) 85%, transparent); font-size: 12px; }
.nr-nobreaker b { color: var(--nr-red); } .nr-nobreaker span { color: var(--nr-muted); }

/* toasts */
.nr-toasts { position: absolute; left: 50px; top: 90px; z-index: 9; display: grid; gap: 6px; pointer-events: none; width: min(300px, calc(100% - 100px)); }
.nr-toast { padding: 7px 12px; border-radius: 8px; background: color-mix(in srgb, var(--k-card-bot) 92%, transparent); border-left: 4px solid var(--nr-cyan); box-shadow: 0 6px 18px color-mix(in srgb, var(--k-black) 50%, transparent); animation: nr-toast-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); transition: opacity 0.4s, transform 0.4s; }
.nr-toast b { display: block; font: 800 13px var(--mono); letter-spacing: 0.06em; }
.nr-toast span { display: block; font-size: 11px; color: var(--nr-muted); }
.nr-toast.good { border-color: var(--nr-grn); } .nr-toast.good b { color: var(--nr-grn); }
.nr-toast.bad { border-color: var(--nr-red); } .nr-toast.bad b { color: var(--nr-red); }
.nr-toast.hi b { color: var(--nr-cyan); }
.nr-toast.out { opacity: 0; transform: translateX(-20px); }
@keyframes nr-toast-in { from { opacity: 0; transform: translateX(-30px) scale(0.9); } }
html[data-motion="off"] .nr-toast { animation: none; transition: none; }

/* dice: neon Genesys shapes */
.nr-dice { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 8; width: min(94vw, 760px); display: grid; justify-items: center; gap: 8px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--k-bg) 82%, transparent); border: 1px solid var(--nr-line); box-shadow: 0 0 40px color-mix(in srgb, var(--k-cyan) 15%, transparent); pointer-events: none; }
.nr-dice[hidden] { display: none; }
.nr.bbs-open .nr-dice { z-index: 8; } .nr.bbs-open .nd-notes { color: var(--nr-yel); }
.nr-dice.sysop { border-color: color-mix(in srgb, var(--k-red) 60%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--k-red) 25%, transparent); }
.nd-head { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 14px var(--mono); letter-spacing: 0.25em; color: var(--nr-cyan); }
.nr-dice.sysop .nd-head { color: var(--nr-red); }
.nd-head small { font-size: 10px; letter-spacing: 0.08em; color: var(--nr-muted); font-weight: 400; }
.nd-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nd { position: relative; width: 74px; height: 86px; display: grid; place-items: center; animation: nd-in 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(var(--i) * 60ms); }
.nd svg { position: absolute; left: 0; top: 0; width: 74px; height: 74px; overflow: visible; }
.nd svg polygon, .nd svg circle { fill: color-mix(in srgb, var(--c) 16%, var(--k-bg)); stroke: var(--c); stroke-width: 3; filter: drop-shadow(0 0 6px var(--c)); }
.nd svg .in, .nd svg polyline { fill: none; stroke: color-mix(in srgb, var(--c) 40%, transparent); stroke-width: 1.5; filter: none; }
.nd:not(.landed) svg { animation: nd-spin 0.35s linear infinite; }
.nd.landed svg { animation: nd-pop 0.3s ease-out; }
.nd-face { position: absolute; top: 0; left: 0; width: 74px; height: 74px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 1px; padding: 18px; }
.nd-face img { width: 20px; height: 20px; filter: drop-shadow(0 0 3px var(--k-black)); transition: opacity 0.3s, transform 0.3s; }
.nd-face .nr-sym { font-size: 16px; }
.nd-face .blank { color: var(--nr-muted); }
.nd-face .cx { opacity: 0.2; transform: scale(0.6) rotate(-20deg); }
.nd > i { position: absolute; bottom: 0; font: 9px var(--mono); letter-spacing: 0.1em; color: var(--c); font-style: normal; }
@keyframes nd-in { from { opacity: 0; transform: translateY(40px) rotate(-90deg) scale(0.4); } }
@keyframes nd-spin { to { transform: rotate(360deg); } }
@keyframes nd-pop { 0% { transform: scale(1.25); } 100% { transform: none; } }
html[data-motion="off"] .nd, html[data-motion="off"] .nd svg { animation: none !important; }
.nd-net { display: grid; justify-items: center; gap: 2px; min-height: 30px; }
.nd-verdict { font: 900 26px var(--mono); letter-spacing: 0.15em; animation: nd-pop 0.3s ease-out; }
.nd-verdict.good { color: var(--nr-grn); text-shadow: 0 0 16px var(--nr-grn); } .nd-verdict.bad { color: var(--nr-red); text-shadow: 0 0 16px var(--nr-red); }
.nd-sum img { height: 18px; vertical-align: middle; }
.nd-notes { font-size: 11px; color: var(--nr-muted); text-align: center; max-width: 640px; }
.nd-notes:empty { display: none; }

/* the clash: break total against ice strength */
.nr-clash { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 9; width: min(94vw, 640px); padding: 16px 18px 20px; border-radius: 14px; background: color-mix(in srgb, var(--k-bg) 92%, transparent); border: 1px solid var(--nr-line); box-shadow: 0 0 60px color-mix(in srgb, var(--k-mag) 25%, transparent); text-align: center; pointer-events: none; }
.nr-clash[hidden] { display: none; }
/* twists: the host's scripted beat, read it and tap on */
.nr-twist { position: absolute; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--k-bg) 72%, transparent); }
.nr-twist[hidden] { display: none; }
/* the result card of a roll that tells you something (showOutcome) */
.nr-twist .tw.outcome .oc-verdict { margin: 6px 0 4px; font: 900 28px var(--mono); letter-spacing: 0.18em; }
.nr-twist .tw.outcome.good { border-color: var(--nr-grn); } .nr-twist .tw.outcome.good .oc-verdict, .nr-twist .tw.outcome.good .k { color: var(--nr-grn); }
.nr-twist .tw.outcome.bad { border-color: var(--nr-red); } .nr-twist .tw.outcome.bad .oc-verdict, .nr-twist .tw.outcome.bad .k { color: var(--nr-red); }
.nr-twist .tw.outcome .oc-net { margin-bottom: 8px; font-size: 18px; } .nr-twist .tw.outcome .oc-net img { height: 26px; width: auto; vertical-align: middle; margin-right: 3px; }
.nr-twist .tw.outcome h3 { font-size: 17px; line-height: 1.4; }
.nr-twist .tw.outcome .oc-list { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.nr-twist .tw.crit { border-color: var(--nr-red); box-shadow: 0 0 70px color-mix(in srgb, var(--k-red) 30%, transparent); }
.nr-twist .tw.crit .k { color: var(--nr-red); }
.nr-twist .tw.crit small { color: var(--nr-yel); font-size: 12px; }
/* from the table (room) and the house-rules card (deck): everything here is logged with the run */
.nr-cond { position: absolute; right: 18px; top: 46px; z-index: 4; width: min(430px, 42%); padding: 10px 14px; font-size: 13px; }
.nr-cond .row { gap: 6px 14px; }
@media (max-width: 720px) { .nr-cond { left: 12px; right: 12px; top: 118px; width: auto; max-height: 38%; overflow: auto; } }
.nr-cond .row, .nr-house .row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 6px; }
.nr-cond label, .nr-house label { font-size: 12px; color: var(--nr-muted); display: inline-flex; align-items: center; gap: 6px; }
.nr-cond label.why, .nr-house label.why { flex: 1; min-width: 200px; }
.nr-cond label.why input, .nr-house label.why input { flex: 1; }
.nr-cond select, .nr-house select, .nr-house input[type="number"] { min-height: 28px; }
.nr-house { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--nr-line); }
.nr-house .nr-tal { margin: 4px 0 6px; padding-left: 18px; font-size: 12px; color: var(--nr-muted); }
.nr-house .nr-tal b { color: var(--nr-text); }
.nr-house label.pick { display: block; margin: 6px 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--nr-line); }
.nr-house label.pick.missing { border-color: var(--nr-yel); box-shadow: 0 0 10px color-mix(in srgb, var(--k-yel) 25%, transparent); }
.nr-house .nr-check { display: inline-flex; gap: 6px; margin-top: 6px; color: var(--nr-text); }
.nr-house .nr-house-rig { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 0 20px; }
.nr-house .nr-house-rig input[type="text"] { width: 14em; }
.nr-house .nr-custom-add { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--nr-line); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.nr-cart.house small { color: var(--nr-yel); }
.nr-twist .tw { width: min(92vw, 520px); padding: 18px 20px 16px; border-radius: 14px; background: color-mix(in srgb, var(--k-card-bot) 96%, transparent); border: 1px solid var(--nr-yel); box-shadow: 0 0 60px color-mix(in srgb, var(--k-yel) 22%, transparent); text-align: center; animation: nr-toast-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
.nr-twist .tw .k { font: 800 12px var(--mono); letter-spacing: 0.22em; color: var(--nr-yel); }
.nr-twist .tw h3 { margin: 6px 0 8px; font-size: 22px; color: var(--nr-text); }
.nr-twist .tw p { margin: 0 0 12px; color: var(--nr-text); font-size: 14px; line-height: 1.45; }
.nr-twist .tw small { display: block; margin-bottom: 10px; color: var(--nr-muted); font-size: 11px; }
html[data-motion="off"] .nr-twist .tw { animation: none; }
/* a long card (a romance with many moves, a long journal) scrolls inside the overlay instead of running off screen */
.nr-twist .tw { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
/* spend menu: the other side's half of the roll, and "which ice?" pickers */
/* result: what was secured, the twists, a host found */
.nr-found li { list-style: none; padding: 3px 0; }
.nr-found li small { color: var(--nr-muted); margin-left: 6px; }
.nr-found li.credits { color: var(--nr-yel); } .nr-found li.program { color: var(--nr-cyan); } .nr-found li.gear { color: var(--nr-grn); } .nr-found li.host { color: var(--nr-mag); }
.nr-target-row .new { color: var(--nr-yel); font: 800 10px var(--mono); letter-spacing: 0.12em; margin-left: 6px; }
.nr-status .sy-out { color: var(--nr-grn); } .nr-status .sy-sweep { color: var(--nr-yel); }
.cl-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.cl-side small { display: block; font: 11px var(--mono); letter-spacing: 0.2em; color: var(--c); text-transform: uppercase; }
.cl-side .num { display: block; font: 900 54px var(--mono); line-height: 1; color: var(--c); text-shadow: 0 0 20px var(--c); }
.cl-parts { display: grid; gap: 1px; font-size: 12px; color: var(--nr-text); min-height: 2.6em; }
.cl-parts .bad { color: var(--nr-red); }
.cl-bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--k-white) 8%, transparent); overflow: hidden; margin-top: 6px; }
.cl-bar i { display: block; height: 100%; width: 0; background: var(--c); box-shadow: 0 0 12px var(--c); }
.cl-vs { font: 900 26px var(--mono); color: var(--nr-mag); padding-bottom: 30px; }
.cl-rule { margin-top: 8px; font-size: 12px; color: var(--nr-muted); }
.cl-stamp { margin-top: 10px; font: 900 40px var(--mono); letter-spacing: 0.2em; opacity: 0; transform: scale(2.2) rotate(-6deg); transition: opacity 0.18s, transform 0.25s cubic-bezier(0.2, 1.6, 0.4, 1); }
.cl-stamp small { display: block; font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--nr-text); margin-top: 4px; }
.nr-clash.done .cl-stamp { opacity: 1; transform: rotate(-4deg); }
.nr-clash.good .cl-stamp { color: var(--nr-grn); text-shadow: 0 0 24px var(--nr-grn); } .nr-clash.bad .cl-stamp { color: var(--nr-red); text-shadow: 0 0 24px var(--nr-red); }
.nr-clash.good { border-color: var(--nr-grn); } .nr-clash.bad { border-color: var(--nr-red); }

/* action bar */
.nr-turn .hint { margin-left: auto; color: var(--nr-text); font-family: var(--sans, inherit); }
.nr-turn .hint.idle { color: var(--nr-yel); font-weight: 700; }
.nr-detail .row.off { opacity: 0.5; cursor: default; }
.nr-detail .row.off small { color: var(--nr-yel); }
.nr-spend.vs { border-color: color-mix(in srgb, var(--k-red) 60%, transparent); }
.nr-spend.vs h3 { color: var(--nr-red); }
.nr-skip { position: absolute; right: 16px; top: 50%; z-index: 4; font: 700 11px var(--mono); letter-spacing: 0.2em; color: var(--nr-muted); background: color-mix(in srgb, var(--k-bg) 70%, transparent); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--nr-line); pointer-events: none; }
.nr-banner.eye .t { color: var(--k-white); font-size: 44px; text-shadow: 0 0 30px var(--k-red), 3px 0 var(--k-red), -3px 0 var(--k-fire); }
.nr-banner.eye .nr-kicker { color: var(--k-red); }

@media (max-width: 860px) {
  .nr-status { top: 38px; max-width: calc(100% - 16px); gap: 3px 9px; padding: 4px 10px; font-size: 10px; border-radius: 10px; }
  .nr-status .st-bar .nr-bar { width: 40px; }
  .nr-turn .hint { font-size: 12px; flex-basis: 100%; }
  .nr-drawer { bottom: 200px; top: 96px; }
  .nr-toasts { left: 8px; top: 100px; width: min(260px, calc(100% - 60px)); }
  .nr-matchup { bottom: 200px; gap: 6px; }
  .nr-icecard p { display: none; }
  .mu-vs { font-size: 16px; }
  .nd { width: 54px; height: 66px; } .nd svg, .nd-face { width: 54px; height: 54px; } .nd-face { padding: 13px; } .nd-face img { width: 15px; height: 15px; }
  .cl-side .num { font-size: 40px; } .cl-stamp { font-size: 30px; }
  .nr-banner.eye .t { font-size: 30px; }
}
.nr-city-pick { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 6px; color: var(--nr-muted); }
.nr-city-pick select { flex: 1; }
/* Enact Command panel: per sub-system — commands, then contents (Search first) */
.nr-enact { border: 1px solid color-mix(in srgb, var(--k-white) 8%, transparent); border-radius: 8px; padding: 8px; margin-top: 8px; }
.nr-enact-head b { font-size: 14px; } .nr-enact-head small { display: block; color: var(--nr-muted); font-size: 11px; }
.nr-detail .row.done { opacity: 0.6; cursor: default; } .nr-detail .row.done small { color: var(--nr-grn); }
.nr-files { display: grid; gap: 4px; margin-top: 6px; }
.nr-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--k-white) 3%, transparent); }
.nr-file .fn { flex: 1 1 160px; font-size: 13px; } .nr-file .fn em { font-style: normal; font-size: 10px; font-family: var(--mono); margin-left: 6px; }
.nr-file .fo { display: flex; gap: 4px; }
.nr-file .btn.sm { min-height: 26px; padding: 2px 8px; font-size: 11px; }
.nr-file.wiped .fn { text-decoration: line-through; color: var(--nr-muted); }
.nr-did { margin-top: 6px; } .nr-did b { font-size: 13px; }
.nr-did li.download { color: var(--nr-grn); } .nr-did li.wipe { color: var(--nr-red); } .nr-did li.alter { color: var(--nr-yel); } .nr-did li.search { color: var(--nr-muted); }
/* Action box: the turn's action / maneuver / 2nd maneuver as light bars on the left — lit = yours, dark = spent */
#nr-act { display: flex; gap: 12px; align-items: stretch; }
@media (max-width: 860px) { #nr-act { gap: 8px; } }

/* ── replay: a logged run played back (netrun.php?replay=CODE) ── */
.nr-replay { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 12; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; font: 12px var(--mono); letter-spacing: 0.08em; max-width: calc(100% - 24px); }
.nr-replay[hidden] { display: none; }
.nr-replay > b { color: var(--nr-yel); letter-spacing: 0.25em; }
.nr-replay > span { color: var(--nr-muted); }
.nr-replay .btn { padding: 4px 10px; font-size: 12px; }
.nr.replay #nr-act, .nr.replay #nr-detail, .nr.replay #nr-pop { display: none !important; }
.nr.replay #nr-spend, .nr.replay #nr-city-zone { pointer-events: none; }
.nr.replay #nr-spend { bottom: 70px; }
.nr-rp-intro { margin: 0 18px; display: grid; gap: 10px; justify-items: start; }
.nr-rp-intro .nr-rp-go { position: static; }
@media (max-width: 720px) { .nr-replay { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; gap: 6px; padding: 6px 8px; } .nr-replay > span { width: 100%; text-align: center; order: 9; } }

/* ── pictures on contents (builder "… | pic: URL"), share section ── */
.nr-twist .tw.pic { border-color: var(--nr-cyan); box-shadow: 0 0 70px color-mix(in srgb, var(--k-cyan) 22%, transparent); width: min(94vw, 720px); }
.nr-twist .tw.pic .k { color: var(--nr-cyan); }
.nr-twist .tw.pic img { display: block; max-width: 100%; max-height: 58vh; margin: 0 auto 12px; border-radius: 8px; border: 1px solid var(--nr-line); background: var(--k-black); object-fit: contain; }
.nr-file .btn.pic { padding: 0 6px; line-height: 1.5; margin-left: 4px; }
.nr-pic-thumb { height: 42px; width: 64px; object-fit: cover; vertical-align: middle; border-radius: 4px; border: 1px solid var(--nr-line); margin-left: 6px; background: var(--k-black); }
.nr-share-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.nr-share-card { flex: 0 0 auto; width: min(240px, 100%); border-radius: 8px; overflow: hidden; border: 1px solid var(--nr-line); background: var(--k-black); }
.nr-share-card img { display: block; width: 100%; height: auto; }
.nr-share-acts { flex: 1 1 220px; display: grid; gap: 8px; justify-items: start; }

/* ── network map (inside): the host as a diagram ── */
.nr-map { position: absolute; right: 44px; top: 100px; z-index: 4; width: 256px; padding: 6px 8px 5px; font: 10px var(--mono); letter-spacing: 0.06em; color: var(--nr-muted); } /* right side: the toasts live top-left */
.nr-map h5 { margin: 0 0 2px; font: 700 10px var(--mono); letter-spacing: 0.25em; color: var(--nr-cyan); cursor: pointer; user-select: none; }
.nr-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.nr-map .lnk { stroke: color-mix(in srgb, var(--k-cyan) 35%, transparent); stroke-width: 1.2; }
.nr-map .lnk.held { stroke: color-mix(in srgb, var(--k-cyan) 85%, transparent); }
.nr-map .node { fill: color-mix(in srgb, var(--k-card-bot) 95%, transparent); stroke: var(--nr-cyan); stroke-width: 1.3; }
.nr-map .node.held { fill: var(--nr-cyan); }
.nr-map .node.masked { stroke: var(--k-muted); stroke-dasharray: 2 2; }
.nr-map .node.gate { stroke: var(--nr-pur); }
.nr-map .objring { fill: none; stroke: var(--nr-yel); stroke-width: 1; stroke-dasharray: 2 2; }
.nr-map .entry { fill: var(--nr-mag); }
.nr-map .ice { fill: var(--c); stroke: var(--c); stroke-width: 1; }
.nr-map .ice.down { fill: none; opacity: 0.7; }
.nr-map .ice.gone { fill: none; stroke-dasharray: 1.5 1.5; opacity: 0.4; }
.nr-map .ice.enc { stroke: var(--nr-red); stroke-width: 2; animation: nr-map-pulse 0.8s infinite alternate; }
.nr-map text { font: 7.5px var(--mono); fill: var(--nr-text); letter-spacing: 0; paint-order: stroke; stroke: color-mix(in srgb, var(--k-bg) 90%, transparent); stroke-width: 2px; }
.nr-map #nr-map-runner { fill: var(--nr-mag); stroke: var(--k-white); stroke-width: 0.8; }
.nr-map .legend { margin-top: 2px; font-size: 8.5px; letter-spacing: 0.04em; color: var(--nr-muted); }
@keyframes nr-map-pulse { from { opacity: 0.45; } to { opacity: 1; } }
html[data-motion="off"] .nr-map .ice.enc { animation: none; }
.nr.replay .nr-map { top: 100px; }
.nr-map h5 .x { float: right; font-style: normal; color: var(--nr-muted); padding: 0 2px; }
.nr-map h5 .x:hover { color: var(--nr-text); }
.nr-map.folded svg, .nr-map.folded .legend { display: none; }
.nr-map.folded h5 .x { transform: rotate(45deg); display: inline-block; } /* ✕ becomes a + */
/* ── phones: the inside screen is tabs and sheets, nothing parks in the middle (2026-10-14 mobile pass) ──
   left tabs DECK / MAP (one open at a time), right tab LOG; spend menu, ice matchup and the node detail are
   bottom sheets with a fold handle; toasts are two compact lines you can tap away; the action hint folds. */
@media (max-width: 860px) {
  .nr-map { top: 96px; bottom: 200px; right: 0; left: auto; width: min(300px, calc(100% - 50px)); padding: 8px 10px; z-index: 5; overflow: auto; border-radius: 10px 0 0 10px; transform: translateX(105%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .nr-map.open { transform: none; }
  .nr-map.folded svg, .nr-map.folded .legend { display: block; } /* folding is a desktop thing */
  .nr-map h5 { font-size: 12px; }
  .nr-toasts { left: 8px; top: 96px; width: calc(100% - 70px); gap: 4px; pointer-events: auto; }
  .nr-toast { padding: 4px 8px; border-left-width: 3px; cursor: pointer; }
  .nr-toast b { display: inline; font-size: 11px; }
  .nr-toast span { display: inline; font-size: 10px; margin-left: 6px; }
  .nr-toast:nth-last-child(n+3) { display: none; }
  .nr-banner { top: 32%; }
  .nr-spend { left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-radius: 12px 12px 0 0; }
  .nr-matchup { left: 0; right: 0; bottom: 196px; width: auto; transform: none; display: block; gap: 0; }
  .mu-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font: 11px var(--mono); letter-spacing: 0.05em; color: var(--nr-muted); background: color-mix(in srgb, var(--k-card-bot) 92%, transparent); border: 1px solid var(--nr-line); border-radius: 10px; cursor: pointer; }
  .mu-head b { color: var(--nr-text); }
  .mu-head span { margin-left: auto; color: var(--nr-cyan); }
  .mu-head .caret::after { content: "▸"; color: var(--nr-cyan); }
  .nr-matchup.open .mu-head { border-radius: 10px 10px 0 0; }
  .nr-matchup.open .mu-head .caret::after { content: "▾"; }
  .mu-body { display: none; }
  .nr-matchup.open .mu-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; max-height: 40vh; overflow: auto; }
  .nr-detail { left: 0; right: 0; width: auto; transform: none; bottom: 196px; max-height: 52vh; border-radius: 12px 12px 0 0; }
  .nr-detail .close { top: 6px; right: 6px; }
  .nr-turn { line-height: 1.45; font-size: 11px; cursor: pointer; }
  .nr-turn .hint { display: block; flex-basis: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nr-turn.full .hint { white-space: normal; }
  .nr-status { font-size: 10px; letter-spacing: 0.05em; gap: 4px 10px; padding: 4px 10px; line-height: 1.5; }
}
/* desktop: the matchup keeps its grid, the strip header stays hidden */
@media (min-width: 861px) { .mu-head { display: none; } .mu-body { display: contents; } }
/* roll notes on the clash (Custom Code, Distinctive Style, damage, Syn 2.2 …) */
.cl-parts .note { color: var(--nr-yel); font-size: 11px; }
.nr-twist .tw p.rule { font-size: 12px; color: var(--nr-muted); border-top: 1px solid var(--nr-line); padding-top: 8px; }

/* ── quiet by default (2026-10-14): advanced options behind a round ⚙, info on tap ── */
.nr-gear { position: absolute; right: 18px; top: 46px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--nr-line); background: color-mix(in srgb, var(--k-bg) 85%, transparent); color: var(--nr-cyan); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 0 12px color-mix(in srgb, var(--k-cyan) 20%, transparent); }
.nr-gear:hover { background: color-mix(in srgb, var(--k-cyan) 15%, transparent); }
.nr-gear.set::after { content: ""; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--nr-yel); box-shadow: 0 0 6px var(--nr-yel); }
.nr-popcard { position: absolute; right: 18px; top: 92px; z-index: 9; width: min(460px, calc(100% - 36px)); max-height: calc(100% - 120px); overflow: auto; padding: 10px 14px; font-size: 13px; }
.nr-popcard[hidden] { display: none; }
.nr-popcard > h3 { margin: 0 0 6px; font-size: 14px; }
.nr-popcard .btn.close, .nr-cond .btn.close { position: absolute; right: 8px; top: 8px; padding: 2px 8px; }
.nr-cond { width: min(460px, calc(100% - 36px)); }
.nr-cond[hidden] { display: none; }
.nr-popcard .nr-house { margin-top: 10px; }
.nr-cart .info { position: absolute; right: 6px; top: 4px; font-style: normal; font-size: 13px; color: var(--nr-muted); cursor: help; padding: 0 2px; }
.nr-cart .info:hover { color: var(--nr-cyan); }
#nr-rigs[hidden] { display: none; }
#nr-deck-hint:empty { display: none; }
/* city: a strip until you tap the name */
.nr-city-ui h3 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.nr-city-ui h3 small { font: 11px var(--mono); color: var(--nr-cyan); letter-spacing: 0.1em; }
.nr-city-ui h3 .caret { margin-left: auto; font-style: normal; color: var(--nr-cyan); }
.nr-city-ui h3 .caret::after { content: "▸"; } .nr-city-ui.open h3 .caret::after { content: "▾"; }
.nr-city-ui .city-body { display: none; } .nr-city-ui.open .city-body { display: block; }
/* status strip: compact, icons, tap for the full picture */
.nr-status { cursor: pointer; }
.nr-status .ic { font-style: normal; font-size: 12px; padding: 0 4px; border-radius: 4px; }
.nr-status .ic.adv { color: var(--nr-grn); background: color-mix(in srgb, var(--k-grn) 12%, transparent); } .nr-status .ic.thr { color: var(--nr-red); background: color-mix(in srgb, var(--k-red) 12%, transparent); }
.nr-status .ic.more { color: var(--nr-cyan); }
/* the action bar: ACTION · MANEUVER · FREE · END TURN */
#nr-act { display: block; }
.nr-turn { margin: 6px 0 0; }
@media (max-width: 860px) {
  .nr-gear { right: 12px; top: 42px; width: 34px; height: 34px; font-size: 16px; }
  .nr-popcard, .nr-cond { right: 8px; left: 8px; width: auto; top: 84px; }
}

/* ── campaign (M4 phase 1): the room card, the dead screen ── */
.nr-camp { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 4; max-height: calc(100% - 150px); overflow: auto; padding: 12px 16px; font-size: 13px; }
.nr-camp[hidden] { display: none; }
.nr-camp-list { display: grid; gap: 6px; margin: 8px 0; }
.nr-camp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px solid var(--nr-line); border-radius: 8px; }
.nr-camp-row small { flex: 1; color: var(--nr-muted); font-family: var(--mono); font-size: 11px; }
.nr-camp-row.over { opacity: 0.6; }
.nr-camp-new { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.nr-camp-new .nr-hint { flex-basis: 100%; }
.nr-camp-head { display: flex; gap: 14px; align-items: flex-start; }
.nr-camp-head img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--nr-cyan); }
.nr-camp-stats { flex: 1; min-width: 0; display: grid; gap: 5px; }
.nr-camp-bar { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); letter-spacing: 0.1em; color: var(--nr-muted); }
.nr-camp-bar .nr-bar { flex: 1; height: 8px; }
.nr-camp-bar b { color: var(--nr-text); }
.nr-camp-row2 { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 11px var(--mono); letter-spacing: 0.1em; color: var(--nr-muted); }
.nr-camp-row2 b { color: var(--nr-cyan); }
.nr-camp-row2 b.heat-warm { color: var(--nr-yel); } .nr-camp-row2 b.heat-hot { color: var(--k-fire); } .nr-camp-row2 b.heat-burned { color: var(--nr-red); }
.nr-pcard.pregen:not(.sel)::after { content: "PREGEN"; position: absolute; top: 8px; left: 8px; font: 10px var(--mono); letter-spacing: 0.2em; padding: 2px 6px; border-radius: 4px; background: var(--nr-yel); color: var(--k-gold-dk); }
.nr-pcard.pregen img { object-position: top; }
.nr-camp-crits { color: var(--nr-red); font: 11px var(--mono); }
.nr-camp-log { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--nr-line); font: 11px var(--mono); color: var(--nr-muted); display: grid; gap: 2px; }
.nr-camp-log em { font-style: normal; color: var(--nr-cyan); margin-right: 6px; }
.nr-dead { background: var(--k-black); }
.nr-dead-in { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 20px; }
.nr-dead-k { font: 700 12px var(--mono); letter-spacing: 0.4em; color: var(--k-blood); }
.nr-dead h1 { margin: 0; font: 900 clamp(48px, 12vw, 120px) var(--mono); letter-spacing: 0.12em; color: var(--k-dead); text-shadow: 0 0 30px color-mix(in srgb, var(--k-dead) 60%, transparent), 0 0 2px var(--k-red); animation: nr-dead-in 2.4s ease-out both; }
.nr-dead p { max-width: 520px; color: var(--k-dead-dim); font-size: 15px; line-height: 1.5; animation: nr-dead-in 3s ease-out both; }
.nr-dead .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; animation: nr-dead-in 4s ease-out both; }
.nr-dead .btn { color: var(--k-dead-text); border-color: var(--k-blood); }
@keyframes nr-dead-in { from { opacity: 0; transform: scale(1.08); } 40% { opacity: 0; } to { opacity: 1; transform: none; } }
html[data-motion="off"] .nr-dead h1, html[data-motion="off"] .nr-dead p, html[data-motion="off"] .nr-dead .actions { animation: none; }
.nr-camp.pick { bottom: auto; top: 96px; max-height: 46%; } /* runner mode, no campaign yet: the card row at the bottom stays visible */
@media (max-width: 860px) { .nr-camp { left: 8px; right: 8px; bottom: 8px; max-height: calc(100% - 120px); padding: 10px 12px; } .nr-camp.pick { top: 128px; max-height: 40%; } .nr-camp-head img { width: 64px; height: 64px; } }

/* ── jobs in the room ── */
.nr-camp-quests { margin: 10px 0 0; border-top: 1px dashed var(--nr-line); padding-top: 6px; }
.nr-camp-quests summary { cursor: pointer; font: 700 11px var(--mono); letter-spacing: 0.2em; color: var(--nr-yel); }
.nr-quest { margin: 6px 0; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--k-white) 8%, transparent); border-radius: 6px; }
.nr-quest b { display: block; font-size: 13px; }
.nr-quest small { display: block; font: 10px var(--mono); color: var(--nr-muted); letter-spacing: 0.05em; }
.nr-quest p { margin: 4px 0 0; font-size: 12px; color: var(--nr-text); }
.nr-quest.done { border-color: var(--nr-grn); } .nr-quest.done b::before { content: "✔ "; color: var(--nr-grn); }
/* the hub boards: a phosphor terminal over the city map (campaign phase 3) */
.nr-bbs { position: absolute; left: 18px; right: 18px; top: 92px; bottom: 18px; z-index: 6; overflow: auto; padding: 14px 16px 18px; border: 1px solid color-mix(in srgb, var(--k-grn) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--k-black) 95%, transparent); color: var(--k-term); font-family: var(--mono); font-size: 13px; line-height: 1.45; box-shadow: 0 0 40px color-mix(in srgb, var(--k-grn) 18%, transparent), inset 0 0 90px color-mix(in srgb, var(--k-black) 65%, transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--k-grn) 35%, transparent); }
.nr-bbs[hidden] { display: none; }
.nr-bbs::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--k-black) 18%, transparent) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.nr-bbs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px dashed color-mix(in srgb, var(--k-grn) 45%, transparent); }
.nr-bbs-head b { font-size: 15px; letter-spacing: 0.25em; color: var(--nr-grn); }
.nr-bbs-you { text-align: right; font-size: 12px; letter-spacing: 0.1em; color: var(--nr-grn); }
.nr-bbs-you .btn { margin-top: 4px; }
.nr-bbs h4 { margin: 14px 0 6px; font: 700 11px var(--mono); letter-spacing: 0.25em; color: var(--nr-yel); }
.nr-bbs .muted { color: var(--k-term-dim); }
.nr-bbs .bad { color: var(--nr-red); }
.nr-bbs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; margin: 4px 0; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--k-grn) 20%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--k-grn) 3%, transparent); }
.nr-bbs-row small { display: block; font-size: 11px; color: var(--k-term-dim); text-shadow: none; }
.nr-bbs .btn { font: 700 11px var(--mono); letter-spacing: 0.12em; color: var(--nr-grn); border: 1px solid color-mix(in srgb, var(--k-grn) 55%, transparent); background: color-mix(in srgb, var(--k-grn) 8%, transparent); text-shadow: none; white-space: nowrap; }
.nr-bbs .btn:disabled { opacity: 0.4; cursor: default; }
.nr-bbs-row > div:last-child { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* M5a: reputation, protection, set-up sniffing */
.nr-rep { display: inline-block; padding: 1px 7px; border-radius: 4px; font: 700 10px var(--mono); letter-spacing: 0.15em; border: 1px solid currentColor; color: var(--nr-muted); }
.nr-rep.rep-known { color: var(--nr-grn); } .nr-rep.rep-reliable { color: var(--nr-cyan); } .nr-rep.rep-pro { color: var(--nr-yel); } .nr-rep.rep-legend { color: var(--nr-red); }
.bbs-rep { margin: 8px 0 2px; font-size: 11px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* M5b: THE WIRE */
.bbs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.nr-bbs h4 .btn { margin-right: 8px; vertical-align: middle; }
.nr-job.note { font-size: 12px; line-height: 1.4; } .nr-job.note .btn { display: block; margin-top: 4px; font-size: 10px; padding: 2px 8px; }

.nr-side { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 3px; font: 700 9px var(--mono); letter-spacing: 0.12em; vertical-align: middle; border: 1px solid currentColor; }
.nr-side.s-street { color: var(--nr-grn); } .nr-side.s-corp { color: var(--nr-red); }
.nr-bbs-cursor { margin-top: 10px; color: var(--nr-grn); animation: nr-bbs-blink 1s steps(1) infinite; }
@keyframes nr-bbs-blink { 50% { opacity: 0; } }
html[data-motion="off"] .nr-bbs-cursor { animation: none; }
@media (max-width: 860px) { .nr.bbs-open .nr-toasts { top: 168px; } .nr-bbs { left: 8px; right: 8px; top: 78px; bottom: 8px; padding: 10px 10px 14px; font-size: 12px; } .nr-bbs-row { grid-template-columns: minmax(0, 1fr); } .nr-bbs-row > div:last-child { justify-self: end; } }

/* ═══ M5d: outside — the rooftop, the leads, the nightlife, a scene ═══ */
.nr-street { background: var(--k-bg); }
.nr-street .nr-art.empty { background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--k-cyan) 18%, transparent), transparent 60%), linear-gradient(var(--k-card-bot), var(--k-bg)); }
.nr-street-ui { position: absolute; left: 18px; right: 18px; bottom: 62px; z-index: 4; max-height: calc(100% - 190px); overflow: auto; padding: 12px 16px; font-size: 13px; }
.out-chips { margin-bottom: 6px; line-height: 1.9; }
.nr-side.s-contact { color: var(--nr-yel); }
/* ═══ M5e: the story ═══ */
.nr-side.s-story { color: var(--nr-mag); }
.nr-camp-story { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--nr-mag); border-radius: 8px; background: color-mix(in srgb, var(--k-field) 35%, transparent); }
.nr-camp-story summary { cursor: pointer; font: 700 11px var(--mono); letter-spacing: 0.2em; color: var(--nr-mag); }
.st-pitch { margin: 6px 0; font-size: 12px; color: var(--nr-muted); }
.st-now { display: flex; gap: 10px; align-items: center; margin: 8px 0; } .st-now > div { flex: 1; } .st-now small { display: block; color: var(--nr-muted); font: 11px var(--mono); margin-top: 2px; }
.st-face { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid var(--nr-line); flex: none; }
.st-face.sm { width: 34px; height: 34px; }
.st-mono { display: inline-block; background: radial-gradient(circle at 50% 38%, var(--k-card-top) 30%, var(--k-card-bot) 31%); }
.st-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .st-person { display: flex; gap: 6px; align-items: center; font-size: 12px; } .st-person small { display: block; color: var(--nr-muted); font-size: 10px; }
.nr-twist .tw.ending { width: min(94vw, 640px); } .nr-twist .tw.ending h3 { font-weight: 400; font-size: 16px; line-height: 1.55; }

.out-spot-head { display: flex; gap: 8px; align-items: center; } .out-spot-head b { letter-spacing: 0.12em; color: var(--nr-cyan); }
.out-spot-text { margin: 6px 0; font-size: 12px; color: var(--nr-muted); }
.out-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin: 6px 0; padding: 8px 10px; border: 1px solid var(--nr-line); border-radius: 8px; background: color-mix(in srgb, var(--k-bg) 50%, transparent); }
.out-lead b { font-size: 14px; } .out-lead small { display: block; color: var(--nr-muted); font: 11px var(--mono); margin-top: 2px; } .out-lead p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--nr-text); }
.out-lead.locked { opacity: 0.55; }
.out-scene-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .out-scene-head small { color: var(--nr-muted); font: 11px var(--mono); }
.out-alarm { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; } .out-alarm::before { content: "ALARM"; font: 700 10px var(--mono); letter-spacing: 0.15em; color: var(--nr-muted); margin-right: 4px; }
.out-alarm i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--nr-red); } .out-alarm i.on { background: var(--nr-red); box-shadow: 0 0 8px var(--nr-red); }
/* the scene's line as a film caption over the picture (ui.js cineText): big, shadowed, letters fading in */
@font-face { font-family: "Creato Display"; src: url("../fonts/CreatoDisplay-Regular.otf") format("opentype"); font-display: swap; }
.out-cine { position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); z-index: 4; width: min(880px, calc(100% - 48px)); text-align: center; pointer-events: auto; cursor: default; }
.out-cine[hidden] { display: none; }
.out-cine::before { content: ""; position: absolute; inset: -28px -60px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--k-black) 55%, transparent), transparent); pointer-events: none; }
.cine-line { margin: 0; font-family: "Creato Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(22px, 2.6vw + 8px, 42px); line-height: 1.32; letter-spacing: 0.015em; color: var(--k-text); text-shadow: 0 2px 3px color-mix(in srgb, var(--k-black) 95%, transparent), 0 0 18px color-mix(in srgb, var(--k-black) 85%, transparent), 0 0 46px color-mix(in srgb, var(--k-black) 60%, transparent); text-wrap: balance; }
.cine-line .cw { white-space: nowrap; display: inline-block; }
.out-cine.typing .cc { opacity: 0; filter: blur(3px); animation: cine-in 0.6s ease-out var(--d) forwards; display: inline-block; }
.out-cine.fading .cine-line { animation: cine-fade 0.45s ease-out both; }
@keyframes cine-in { from { opacity: 0; filter: blur(3px); transform: translateY(5px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes cine-fade { from { opacity: 0; } to { opacity: 1; } }
.nr-street-ui { transition: opacity 0.35s ease, transform 0.35s ease; }
.nr-street-ui.cine-wait { opacity: 0; transform: translateY(10px); pointer-events: none; }
html[data-motion="off"] .nr-street-ui { transition: none; }
.out-foe { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--nr-red); border-radius: 8px; background: color-mix(in srgb, var(--k-blood) 45%, transparent); }
.out-foe b { color: var(--nr-red); letter-spacing: 0.06em; } .out-foe small { display: block; color: var(--nr-muted); font: 11px var(--mono); margin: 2px 0 6px; }
.out-foe .nr-bar { display: block; height: 6px; } .out-foe .nr-bar > i { background: var(--nr-red); }
.out-you { margin-top: 8px; color: var(--nr-muted); font: 11px var(--mono); }
.nr-twist .tw .oc-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (max-width: 860px) {
  .nr-street-ui { left: 8px; right: 8px; bottom: 56px; max-height: calc(100% - 236px); padding: 10px; }
  .out-lead { grid-template-columns: minmax(0, 1fr); } .out-lead > .btn { justify-self: end; }
}

/* THE JOURNAL (story engine SE1) */
.nr-twist .tw.jr { background: var(--k-card-bot); width: min(720px, 100%); max-height: calc(100% - 8px); display: flex; flex-direction: column; text-align: left; }
.jr-mood { font: 11px var(--mono); color: var(--nr-muted); margin: 2px 0 8px; }
.jr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.jr-tabs .btn { font: 12px var(--mono); padding: 4px 10px; } .nr-twist .tw.jr .jr-tabs small { display: inline; margin: 0; font-size: 10px; opacity: 0.7; color: inherit; }
.jr-list { overflow-y: auto; min-height: 0; flex: 1; display: grid; gap: 8px; padding-right: 2px; }
.jr-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--nr-line); border-radius: 8px; padding: 8px; background: color-mix(in srgb, var(--k-white) 2%, transparent); }
.jr-body { flex: 1; min-width: 0; } .nr-twist .tw.jr .jr-body > small { display: block; color: var(--nr-muted); font: 11px var(--mono); margin: 2px 0 4px; overflow-wrap: anywhere; }
.nr-twist .tw.jr p { font-size: 13px; margin: 0; }
.jr-line { font-size: 13px; line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; } .jr-line em { font: 10px var(--mono); color: var(--nr-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; font-style: normal; }
.jr-voice { font-style: italic; color: var(--nr-muted); } .jr-secret { color: var(--nr-mag); }
.jr-chip { display: inline-block; font: 10px var(--mono); padding: 1px 6px; border: 1px solid var(--nr-line); border-radius: 999px; margin: 0 4px 2px 0; text-transform: lowercase; }
.jr-chip.att { border-color: var(--nr-mag); }
.jr-chip.st-ally, .jr-chip.st-crew, .jr-chip.st-partner { border-color: var(--nr-grn); color: var(--nr-grn); }
.jr-chip.st-rival, .jr-chip.st-enemy, .jr-chip.st-captor { border-color: var(--nr-red); color: var(--nr-red); }
.jr-chip.st-dead, .jr-chip.st-missing { opacity: 0.6; }
.jr-pips { font-size: 9px; letter-spacing: 1px; color: var(--nr-mag); margin-left: 4px; } .jr-pips i { font-style: normal; opacity: 0.2; }
.jr-more { font-size: 12px; margin: 4px 0 0; }

/* THE STORY card: what is moving (story engine SE2) */
.st-beats { display: grid; gap: 6px; margin: 8px 0 4px; }
.st-beat { display: flex; gap: 10px; align-items: center; border: 1px solid var(--nr-line); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.st-beat.main { border-color: var(--nr-mag); } .st-beat.assist { border-style: dashed; }
.st-beat > div { flex: 1; min-width: 0; } .st-beat small { display: block; color: var(--nr-muted); font: 11px var(--mono); overflow-wrap: anywhere; }
.st-where { font: 700 10px var(--mono); letter-spacing: 0.1em; color: var(--nr-cyan); flex: none; width: 70px; }
.st-clock { font: 11px var(--mono); color: var(--nr-muted); flex: none; } .st-clock.hot { color: var(--nr-red); font-weight: 700; }
.st-note { font-size: 11px; color: var(--nr-muted); margin: 2px 0 6px; }
@media (max-width: 520px) { .st-beat { flex-wrap: wrap; gap: 4px 8px; } .st-where { width: auto; } }
/* the journal's Schemes tab */
.jr-steps { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; display: grid; gap: 3px; }
.jr-steps li i { display: inline-block; width: 16px; font-style: normal; color: var(--nr-muted); }
.jr-steps li.cut i { color: var(--nr-grn); } .jr-steps li.done i { color: var(--nr-red); } .jr-steps li.active i { color: var(--nr-cyan); }
.jr-steps li em { font: 10px var(--mono); color: var(--nr-muted); font-style: normal; margin-left: 4px; }
.jr-steps li.cut { text-decoration: line-through; text-decoration-color: var(--nr-grn); }
.jr-scheme.foiled { border-color: var(--nr-grn); } .jr-scheme.succeeded { border-color: var(--nr-red); }

/* ═══ Quiet screens (2026-10-15): the room shows itself plus one big button; the street is a picture with places on it ═══ */
#nr-room.camp .nr-head { max-width: min(560px, calc(100% - 36px)); }
.nr-roomstat { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--k-bg) 70%, transparent); font: 11px var(--mono); letter-spacing: 0.12em; color: var(--nr-muted); }
.nr-roomstat b { color: var(--nr-text); } .nr-roomstat .bad b { color: var(--nr-red); } .nr-roomstat .xp b { color: var(--nr-yel); }
@keyframes nr-notice-pulse { 50% { box-shadow: 0 0 34px color-mix(in srgb, var(--k-mag) 60%, transparent); } }
.nr-menu-btn { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 12px; padding: 14px 30px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 16px var(--mono); letter-spacing: 0.24em; color: var(--k-ink); background: linear-gradient(90deg, var(--nr-mag), var(--nr-cyan)); box-shadow: 0 0 30px color-mix(in srgb, var(--k-mag) 50%, transparent), 0 0 60px color-mix(in srgb, var(--k-cyan) 20%, transparent); white-space: nowrap; }
.nr-menu-btn[hidden] { display: none; }
.nr-menu-btn .ic { font-size: 20px; letter-spacing: 0; }
.nr-menu-btn .badge { font-style: normal; font: 800 11px var(--mono); letter-spacing: 0.05em; }
.nr-menu-btn .badge:empty { display: none; }
.nr-menu-btn.alert .badge, .nr-menu-btn.xp .badge { padding: 2px 7px; border-radius: 999px; background: var(--k-ink); color: var(--nr-yel); }
.nr-menu-btn.alert .badge { color: var(--nr-red); }
html[data-motion="full"] .nr-menu-btn { animation: nr-menu-glow 3s ease-in-out infinite; }
@keyframes nr-menu-glow { 50% { box-shadow: 0 0 44px color-mix(in srgb, var(--k-mag) 70%, transparent), 0 0 80px color-mix(in srgb, var(--k-cyan) 35%, transparent); } }
.nr-menu { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--k-bg) 55%, transparent); }
.nr-menu[hidden] { display: none; }
.mn-card { width: min(720px, 100%); max-height: calc(100% - 40px); display: flex; flex-direction: column; padding: 14px 16px 16px; border-color: var(--nr-mag); box-shadow: 0 0 50px color-mix(in srgb, var(--k-mag) 20%, transparent); animation: nr-toast-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); }
html[data-motion="off"] .mn-card { animation: none; }
.mn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mn-head > b, .mn-head > div { flex: 1; min-width: 0; } .mn-head > div b { font-size: 20px; letter-spacing: 0.04em; } .mn-head > b { font: 700 13px var(--mono); letter-spacing: 0.2em; color: var(--nr-cyan); text-transform: uppercase; }
.mn-alerts { display: grid; gap: 3px; margin-bottom: 10px; font-size: 12px; color: var(--nr-yel); } .mn-alerts .bad { color: var(--nr-red); font-weight: 700; }
.mn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; overflow-y: auto; }
.mn-tile { display: grid; justify-items: start; align-content: start; gap: 2px; padding: 12px; text-align: left; border: 1px solid var(--nr-line); border-radius: 10px; background: color-mix(in srgb, var(--k-white) 3%, transparent); color: var(--nr-text); cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.mn-tile i { font-style: normal; font-size: 22px; color: var(--nr-cyan); line-height: 1; margin-bottom: 4px; }
.mn-tile b { font-size: 15px; letter-spacing: 0.04em; } .mn-tile small { color: var(--nr-muted); font: 11px var(--mono); overflow-wrap: anywhere; }
.mn-tile:hover:not(:disabled) { border-color: var(--nr-cyan); background: color-mix(in srgb, var(--k-cyan) 8%, transparent); transform: translateY(-2px); }
.mn-tile.hot { border-color: var(--nr-yel); } .mn-tile.hot small { color: var(--nr-yel); }
.mn-tile.bad { border-color: var(--nr-red); } .mn-tile.bad small { color: var(--nr-red); }
.mn-body { overflow-y: auto; min-height: 0; font-size: 13px; }
.mn-h { margin: 12px 0 4px; font: 700 11px var(--mono); letter-spacing: 0.2em; color: var(--nr-mag); text-transform: uppercase; }
.mn-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; } .mn-list small { color: var(--nr-muted); font: 11px var(--mono); } .mn-list em.bad { color: var(--nr-red); font: 11px var(--mono); font-style: normal; }
.mn-sum { font: 700 11px var(--mono); letter-spacing: 0.18em; color: var(--nr-yel); margin-bottom: 6px; }
.mn-xp { display: flex; gap: 14px; align-items: center; margin: 14px 0 8px; padding: 10px 12px; border: 1px solid var(--nr-line); border-radius: 10px; }
.mn-xp.has { border-color: var(--nr-yel); background: color-mix(in srgb, var(--k-yel) 6%, transparent); }
.mn-xp-n { display: grid; justify-items: center; min-width: 64px; } .mn-xp-n b { font: 900 34px var(--mono); color: var(--nr-yel); line-height: 1; } .mn-xp-n small { font: 700 10px var(--mono); letter-spacing: 0.3em; color: var(--nr-muted); }
/* You → Street fight body (2026-10-17): a turning 3D preview beside the list */
.mn-body-pick { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.mn-body-view { width: 150px; height: 210px; border: 1px solid var(--nr-line); border-radius: 10px; background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--k-cyan) 14%, transparent), transparent 60%), color-mix(in srgb, var(--k-bg) 60%, transparent); }
.mn-body-list { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.mn-body-b { padding: 5px 10px; border: 1px solid var(--nr-line); border-radius: 999px; background: transparent; color: var(--nr-text); font: 600 12px var(--mono); cursor: pointer; }
.mn-body-b:hover { border-color: var(--nr-cyan); }
.mn-body-b.on { border-color: var(--nr-cyan); background: color-mix(in srgb, var(--k-cyan) 14%, transparent); color: var(--nr-cyan); }
.mn-body-list .nr-hint { flex-basis: 100%; margin: 4px 0 0; }
@media (max-width: 520px) { .mn-body-pick { grid-template-columns: 110px minmax(0, 1fr); } .mn-body-view { width: 110px; height: 160px; } }
.mn-xp > div:last-child b { display: block; margin-bottom: 3px; } .mn-xp > div:last-child small { color: var(--nr-muted); font-size: 12px; line-height: 1.45; }
.mn-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-card .nr-camp-log { margin: 0; padding: 0; border: 0; }
@media (max-width: 720px) {
  .nr-menu { padding: 8px; }
  .mn-card { max-height: calc(100% - 16px); padding: 12px; }
  .mn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mn-tile { padding: 10px; } .mn-tile i { font-size: 19px; }
  .nr-menu-btn { bottom: 18px; padding: 13px 24px; font-size: 15px; }
}

/* the street: places pinned on the picture */
.out-hots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.out-hots[hidden] { display: none; }
.out-hot { position: absolute; left: clamp(8px, calc(var(--x) - 115px), calc(100% - 238px)); top: var(--y); transform: translateY(-50%); pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 230px; padding: 7px 12px 7px 7px; text-align: left; cursor: pointer;
  color: var(--nr-text); background: color-mix(in srgb, var(--k-card-bot) 72%, transparent); border: 1px solid var(--nr-cyan); border-radius: 999px; box-shadow: 0 0 18px color-mix(in srgb, var(--k-cyan) 25%, transparent); backdrop-filter: blur(3px); transition: transform 0.15s, box-shadow 0.15s; }
.out-hot i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-size: 16px; color: var(--k-ink); background: var(--nr-cyan); box-shadow: 0 0 14px var(--nr-cyan); }
.out-hot span { min-width: 0; } .out-hot b { display: block; font-size: 13px; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .out-hot small { display: block; color: var(--nr-muted); font: 10px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out-hot::after { content: ""; position: absolute; left: 22px; top: 100%; width: 1px; height: 22px; background: linear-gradient(var(--nr-cyan), transparent); }
.out-hot:hover { scale: 1.06; box-shadow: 0 0 30px color-mix(in srgb, var(--k-cyan) 50%, transparent); }
/* the street's places: cards dealt on the table (the middle of the picture), one tap goes in */
.out-table { position: absolute; left: 50%; top: 150px; bottom: 30px; transform: translateX(-50%); width: min(860px, calc(100% - 24px)); pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 18px 16px; padding: 10px 6px; overflow-y: auto; scrollbar-width: thin; }
.out-table.spent { bottom: calc(var(--k-card-h) + 60px); }
.out-table .out-place { --k-card-w: 128px; touch-action: manipulation; transform: rotate(var(--r, 0deg)); grid-template-rows: auto 64px auto auto; }
.out-table .out-place .k-art img { height: 60px; }
.out-table .out-place:hover, .out-table .out-place:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.05); box-shadow: 0 12px 26px var(--k-shade), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); z-index: 1; }
html[data-motion="full"] .out-table .out-place { animation: out-deal 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: var(--d, 0ms); }
@keyframes out-deal { from { opacity: 0; translate: 0 40px; rotate: 8deg; } }
.out-unknown { position: absolute; left: 0; right: 0; bottom: 8px; padding: 0 16px; text-align: center; font: 11px var(--k-mono); letter-spacing: 0.06em; color: var(--k-muted); text-shadow: 0 1px 4px var(--k-shade); pointer-events: none; }
@media (max-width: 720px) {
  .out-table { top: 170px; gap: 12px 10px; }
  .out-table .out-place { --k-card-w: calc((100vw - 64px) / 3); grid-template-rows: auto 48px auto auto; } .out-table .out-place .k-art img { height: 44px; }
}
html[data-motion="full"] .out-hot { animation: out-hot-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; animation-delay: var(--d, 0ms); }
html[data-motion="full"] .out-hot i { animation: out-hot-beat 2.6s ease-in-out infinite; animation-delay: var(--d, 0ms); }
@keyframes out-hot-in { from { opacity: 0; scale: 0.7; translate: 0 14px; } }
@keyframes out-hot-beat { 50% { transform: scale(1.12); } }
.nr-street-ui[hidden] { display: none; }
.nr-street-ui { left: auto; right: 18px; width: min(620px, calc(100% - 36px)); max-height: min(58%, calc(100% - 190px)); }
.out-info { margin-top: 8px; font-size: 12px; color: var(--nr-muted); } .out-info summary { cursor: pointer; font: 11px var(--mono); letter-spacing: 0.1em; } .out-info p { margin: 6px 0 0; line-height: 1.45; }
@media (max-width: 720px) {
  .nr-street-ui { left: 8px; right: 8px; width: auto; bottom: 58px; max-height: min(62%, calc(100% - 170px)); }
  .out-hot { max-width: 44vw; left: clamp(8px, calc(var(--x) - 22vw), calc(56vw - 8px)); padding: 6px 10px 6px 6px; } .out-hot i { width: 28px; height: 28px; font-size: 14px; } .out-hot b { font-size: 12px; }
}

/* the action card: a square picture of what you are doing, before the dice (assets/js/netrun/vignette.js) */
.nr-vigcard { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; pointer-events: none; background: transparent; transition: background 0.18s; }
.nr-vigcard[hidden] { display: none; }
.nr-vigcard.on { background: color-mix(in srgb, var(--k-black) 45%, transparent); }
.vc-box { pointer-events: auto; width: min(76vw, 360px); display: grid; gap: 8px; cursor: pointer; opacity: 0; transform: scale(0.86) rotate(-1.5deg); transition: opacity 0.18s, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1); }
.nr-vigcard.on .vc-box { opacity: 1; transform: none; }
.vc-frame { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--nr-cyan); box-shadow: 0 0 40px color-mix(in srgb, var(--k-cyan) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--k-black) 60%, transparent); background: var(--k-black); }
.nr-vigcard.foe .vc-frame { border-color: var(--nr-red); box-shadow: 0 0 44px color-mix(in srgb, var(--k-red) 40%, transparent); }
.vc-frame canvas { display: block; width: 100%; height: 100%; }
.vc-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--k-black) 18%, transparent) 0 1px, transparent 1px 3px), radial-gradient(75% 75% at 50% 50%, transparent 60%, color-mix(in srgb, var(--k-black) 65%, transparent)); }
.vc-art { position: absolute; inset: 0; background: center / cover no-repeat; display: none; }
.nr-vigcard.has-art .vc-art { display: block; } .nr-vigcard.has-art canvas { visibility: hidden; }
html[data-motion="full"] .nr-vigcard.on.has-art .vc-art { animation: vc-zoom 6s ease-out both; } /* slow: a held card stays up through the roll */
@keyframes vc-zoom { from { transform: scale(1.18) translate(2%, 2%); } to { transform: scale(1.02); } }
.vc-cap { text-align: center; } .vc-cap b { display: block; font: 900 20px var(--mono); letter-spacing: 0.22em; color: var(--nr-cyan); text-shadow: 0 0 14px color-mix(in srgb, var(--k-cyan) 60%, transparent); }
.vc-cap small { display: block; margin-top: 2px; font-size: 14px; color: var(--nr-text); font-style: italic; }
.nr-vigcard.foe .vc-cap b { color: var(--nr-red); text-shadow: 0 0 14px color-mix(in srgb, var(--k-red) 60%, transparent); }
.vc-skip { text-align: center; font: 10px var(--mono); letter-spacing: 0.2em; color: var(--nr-muted); opacity: 0.6; }
html[data-motion="off"] .vc-box, html[data-motion="off"] .nr-vigcard { transition: none; }
/* held: the card stays up as the backdrop of the roll — bigger, a little dimmer, under the dice panel (z 8) */
.nr-vigcard.held { z-index: 7; background: color-mix(in srgb, var(--k-black) 60%, transparent); }
.vc-box { transition: opacity 0.18s, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), width 0.35s ease; }
.nr-vigcard.held .vc-box { width: min(92vw, 62vh, 560px); cursor: default; }
.nr-vigcard.held .vc-frame { filter: brightness(0.82) saturate(1.05); transition: filter 0.4s; }
.nr-vigcard.held .vc-skip { visibility: hidden; }
.nr-vigcard.held .vc-cap { order: -1; } /* caption above the picture, the dice sit over its lower half */
.nr.vig-held .nr-dice { top: 62%; background: color-mix(in srgb, var(--k-bg) 70%, transparent); }
html[data-motion="off"] .vc-box { transition: none; }

/* SE3: the world reacts */
.st-warn { margin: 6px 0; padding: 6px 8px; border: 1px solid var(--nr-red); border-radius: 8px; font-size: 13px; color: var(--nr-red); background: color-mix(in srgb, var(--k-red) 6%, transparent); }
.jr-memory { color: var(--nr-red); }

/* ═══ The deck on the table (2026-10-15): the canvas is the screen; slots and loose cartridges are tapped there (ui.js) ═══ */
.nr-deck-top { position: absolute; left: 18px; right: 70px; top: 46px; z-index: 4; display: grid; gap: 8px; pointer-events: none; }
.nr-deck-top > * { pointer-events: auto; justify-self: start; }
.nr-deck-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--k-bg) 60%, transparent); border: 1px solid color-mix(in srgb, var(--k-cyan) 15%, transparent); backdrop-filter: blur(3px); }
.nr-deck-bar .nr-rigtabs:empty, .nr-deck-bar [hidden] { display: none; }
.nr-talents { display: contents; }
.nr-tal-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--nr-line); background: color-mix(in srgb, var(--k-cyan) 7%, transparent); color: var(--nr-text); font: 11px var(--mono); letter-spacing: 0.06em; cursor: pointer; }
.nr-tal-chip:hover { border-color: var(--nr-cyan); }
.nr-tal-chip.warn { border-color: var(--nr-yel); color: var(--nr-yel); background: color-mix(in srgb, var(--k-yel) 8%, transparent); }
html[data-motion="full"] .nr-tal-chip.warn { animation: nr-notice-pulse 2.4s ease-in-out infinite; }
.nr-target-btn { font-size: 12px; }
.nr-target-card { top: 150px; left: 18px; right: auto; }
.dk-pop .dk-k { font: 700 10px var(--mono); letter-spacing: 0.2em; color: var(--nr-muted); margin-bottom: 4px; } .dk-pop .dk-k b.on { color: var(--nr-grn); }
.dk-pop h4 { border-left: 4px solid var(--c, var(--nr-cyan)); padding-left: 8px; }
.dk-pop .dk-cc { margin: 4px 0; color: var(--nr-yel); font-size: 12px; }
.dk-pop .nr-hint.bad { color: var(--nr-red); }
.dk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dk-acts .btn[style*="--c"] { border-color: var(--c); }
.dk-acts .btn.on { background: var(--nr-cyan); color: var(--k-ink); }
@media (max-width: 720px) {
  .nr-deck-top { left: 8px; right: 54px; }
  .nr-deck-head .nr-title.sm { font-size: 18px; }
  .nr-deck-top > .nr-deck-bar { justify-self: stretch; }
  .nr-deck-bar { padding: 5px 8px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nr-deck-bar > * { flex: none; } .nr-tal-chip, .nr-target-btn { white-space: nowrap; }
  .nr-target-card { left: 8px; right: 8px; width: auto; top: 140px; }
}

/* SE4: the director */
.st-tension { float: right; font: 700 10px var(--mono); letter-spacing: 0.12em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--nr-line); color: var(--nr-muted); }
.st-tension.t1 { color: var(--nr-yel); border-color: var(--nr-yel); } .st-tension.t2, .st-tension.t3 { color: var(--nr-red); border-color: var(--nr-red); }
.nr-twist .tw.recap .rc-line { font-size: 13px; line-height: 1.45; padding: 3px 0; border-bottom: 1px solid var(--nr-line); }
.nr-twist .tw.recap .rc-line.now { color: var(--nr-cyan); border-bottom: 0; }
.nr-twist .tw.recap .rc-now { margin-top: 10px; }
.nr-twist .tw.ending .oc-epi { text-align: left; margin: 10px 0 12px; max-height: 38vh; overflow-y: auto; }
.nr-twist .tw.ending .oc-epi .k { margin-bottom: 6px; }
.oc-epi-row { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 1.4; padding: 4px 0; }
.oc-epi-row span { flex: 1; min-width: 0; }

/* SE5: life — home, crew, partners, cells, rivals */
.jr-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jr-acts .k-btn { font-size: 12px; padding: 3px 10px; } .jr-acts .k-btn small { font: 10px var(--k-mono); color: var(--k-muted); margin-left: 4px; }
.nr-twist .tw.jr .jr-sec { margin: 10px 0 2px; }
.jr-empty { font-size: 12px; margin: 2px 0 4px; }

/* SE5: you, in their cell */

/* SE5b: the love sim — hearts, silhouettes, the relationship screen */
.hearts { display: inline-flex; gap: 1px; vertical-align: middle; font-style: normal; }
.hearts .h { font-style: normal; font-size: 15px; line-height: 1; color: color-mix(in srgb, var(--k-white) 16%, transparent); }
.hearts .h.full { color: var(--k-heart); text-shadow: 0 0 6px color-mix(in srgb, var(--k-heart) 55%, transparent); }
.hearts .h.half { background: linear-gradient(90deg, var(--k-heart) 50%, color-mix(in srgb, var(--k-white) 16%, transparent) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sil { flex: none; color: color-mix(in srgb, var(--k-pink) 85%, transparent); }
.sil .sil-body { fill: currentColor; } .sil .sil-ref { stroke: color-mix(in srgb, var(--k-white) 18%, transparent); stroke-width: 0.4; stroke-dasharray: 1.5 1.5; }
.nr-twist .tw.jr.love { text-align: left; }
.lv-top { display: flex; gap: 12px; align-items: flex-end; margin: 8px 0; }
.lv-top .st-face.lg { width: min(28vw, 132px); height: min(28vw, 132px); }
.lv-id { flex: 1; min-width: 0; } .nr-twist .tw.jr .lv-id > small { display: block; color: var(--nr-muted); font: 11px var(--mono); margin: 2px 0 6px; }
.lv-hearts { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--k-pink); }
.lv-hearts .h { font-size: 20px; }
.lv-prof { font-size: 12px; line-height: 1.45; margin-top: 6px; color: var(--nr-text); overflow-wrap: anywhere; }
.lv-body { color: var(--k-rose); }
.lv-know { border: 1px solid var(--nr-line); border-radius: 8px; padding: 8px; margin: 6px 0; }
.lv-facet { font-size: 13px; padding: 2px 0; } .lv-facet em { display: inline-block; width: 70px; font: 10px var(--mono); color: var(--nr-muted); text-transform: uppercase; letter-spacing: 0.08em; font-style: normal; }
.lv-tip { font-size: 11px; color: var(--nr-muted); margin-top: 6px; line-height: 1.4; }
.jr-love { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .jr-love small { font: 11px var(--mono); color: var(--k-pink); }
.jr-love .btn { font-size: 12px; padding: 3px 9px; border-color: var(--k-heart); color: var(--k-pink); }
/* the Deviance ladder as a tree (ui.js kinkTree): one row per step, indented by depth */
.lv-tree { display: grid; gap: 4px; width: 100%; text-align: left; }
.lv-node { padding-left: calc(var(--d, 0) * 18px); position: relative; font-size: 12px; }
.lv-node:not([style*="--d:0"])::before { content: "└"; position: absolute; left: calc(var(--d) * 18px - 14px); top: 4px; color: color-mix(in srgb, var(--k-heart) 45%, transparent); }
.lv-node .btn { width: 100%; }
.lv-node.done { color: var(--k-pink); padding-top: 2px; padding-bottom: 2px; }
.lv-node.locked { color: var(--nr-muted); opacity: 0.75; }
.nr-twist .tw.jr .lv-node.locked small { display: inline; margin-left: 6px; font: 10px var(--mono); }
.nr-twist .tw.lv-scene { width: min(94vw, 640px); max-height: calc(100vh - 32px); overflow: auto; text-align: left; }
.lv-scene-art { display: block; width: 100%; max-height: 38vh; object-fit: cover; border-radius: 8px; margin: 8px 0; background: var(--k-card-bot); }
.lv-scene-prose { font-size: 15px; line-height: 1.55; max-height: 46vh; overflow: auto; padding-right: 4px; }
.lv-scene-prose p { margin: 0 0 0.85em; }
.lv-scene-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.lv-scene-acts .btn { font-size: 12px; padding: 6px 10px; text-align: left; }
.nr-twist .tw.lv-scene .lv-scene-acts small { display: block; margin: 1px 0 0; font: 10px var(--mono); color: var(--nr-muted); }
@media (max-width: 520px) { .lv-top { flex-wrap: wrap; } }

/* ═══ the quest engine (includes/netrun_quest.php, 2026-10-17): hub meters, zone pins, gear chips, captions ═══ */
.nr-street-ui.cine-hold { opacity: 0; transform: translateY(10px); pointer-events: none; }
.q-meters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 2px 0 8px; font: 700 10px var(--mono); letter-spacing: 0.15em; color: var(--nr-muted); }
.q-meters small { font: 11px var(--mono); letter-spacing: 0; }
.q-clues, .q-clock, .q-gap { display: inline-flex; gap: 4px; align-items: center; }
.q-clues i { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--nr-yel); margin: 0 1px; }
.q-clues i.on { background: var(--nr-yel); box-shadow: 0 0 8px var(--nr-yel); }
.q-clues i.extra { border-style: dashed; }
.q-clock i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--nr-cyan); }
.q-clock i.on { background: var(--nr-cyan); box-shadow: 0 0 6px var(--nr-cyan); }
.q-clock.low i.on { background: var(--nr-red); border-color: var(--nr-red); box-shadow: 0 0 8px var(--nr-red); }
.q-gap i { width: 18px; height: 6px; border-radius: 3px; border: 1px solid var(--nr-mag); }
.q-gap i.on { background: var(--nr-mag); box-shadow: 0 0 8px var(--nr-mag); }
.q-boost { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--nr-grn); color: var(--nr-grn); }
.q-next { display: grid; gap: 2px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--nr-yel); border-radius: 8px; background: color-mix(in srgb, var(--k-yel) 6%, transparent); }
.q-next b { color: var(--nr-yel); font-size: 13px; } .q-next small { color: var(--nr-muted); font: 11px var(--mono); }
.q-tip { margin: 0 0 6px; }
/* cases: the question, the CASE FILE chip, the table of places / people, the file itself */
.q-ask { margin: 0 0 8px; font: 700 14px var(--k-ui); color: var(--k-yel); } .q-ask small { font: 11px var(--k-mono); color: var(--k-muted); margin-left: 6px; }
.q-file { border: 1px solid var(--k-yel); border-radius: var(--k-pill); background: color-mix(in srgb, var(--k-yel) 10%, transparent); color: var(--k-yel); font: 700 10px var(--k-mono); letter-spacing: 0.12em; padding: 4px 10px; cursor: pointer; }
.q-file b { color: var(--k-ink); background: var(--k-yel); border-radius: var(--k-pill); padding: 0 6px; margin-left: 4px; }
.out-table.case { top: 140px; bottom: auto; align-content: flex-start; }
.out-table.case .out-place { --k-card-w: 112px; grid-template-rows: auto 48px auto auto; } .out-table.case .out-place .k-art img { height: 44px; }
.out-table.case .out-place.spent { opacity: 0.55; }
.out-table.case.people { justify-content: flex-start; padding-left: 16px; }
@media (max-width: 720px) { .out-table.case { top: 160px; } .out-table.case .out-place { --k-card-w: calc((100vw - 64px) / 3); } }
.tw.case-file { text-align: left; max-width: 620px; }
.cf-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.cf-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--k-line); border-radius: 8px; background: color-mix(in srgb, var(--k-cyan) 5%, transparent); }
.cf-list li i { font-style: normal; color: var(--k-cyan); font-size: 15px; line-height: 1.2; text-align: center; }
.cf-list li span { font-size: 13px; line-height: 1.35; } .cf-list li small { display: block; font: 10px var(--k-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); margin-top: 2px; }
.cf-list li.rumor { border-style: dashed; background: transparent; } .cf-list li.rumor i { color: var(--k-muted); } .cf-list li.rumor span { color: var(--k-muted); }
.cf-cands { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; }
.cf-cands li b { color: var(--k-yel); } .cf-cands li small { color: var(--k-muted); margin-left: 6px; font-size: 11px; }
.cf-cands li.crossed b { color: var(--k-muted); text-decoration: line-through; }
.out-hot.q-zone { border-color: var(--nr-yel); } .out-hot.q-zone i { background: var(--nr-yel); box-shadow: 0 0 14px var(--nr-yel); } .out-hot.q-zone::after { background: linear-gradient(var(--nr-yel), transparent); }
.out-hot.q-zone.spent { opacity: 0.6; border-color: var(--nr-line); } .out-hot.q-zone.spent i { background: var(--nr-grn); box-shadow: none; }

/* ═══ the courtship encounter (includes/netrun_love_talk.php, 2026-10-17): their face, what they say, your cards ═══ */
.nr-twist .tw.talk { width: min(96vw, 860px); max-height: 92vh; overflow-y: auto; background: var(--k-card-bot); text-align: left; border-color: var(--nr-mag); box-shadow: 0 0 60px color-mix(in srgb, var(--k-mag) 25%, transparent); }
.nr-twist .tw.talk .k { color: var(--nr-mag); text-align: center; }
.tk-meter { display: grid; grid-template-columns: 130px minmax(0, 1fr) 52px; gap: 8px; align-items: center; font: 700 10px var(--mono); letter-spacing: 0.12em; color: var(--nr-muted); }
.tk-meter b { color: var(--nr-text); text-align: right; letter-spacing: 0; }
.tk-bar { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--k-white) 6%, transparent); overflow: hidden; }
.tk-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; transition: width 0.5s ease; }
.tk-meter.guard .tk-bar > i { background: linear-gradient(90deg, var(--nr-mag), var(--k-pink)); box-shadow: 0 0 10px var(--nr-mag); }
.tk-meter.calm .tk-bar > i { background: linear-gradient(90deg, var(--nr-cyan), color-mix(in srgb, var(--k-cyan) 45%, var(--k-white))); box-shadow: 0 0 10px var(--nr-cyan); }
html[data-motion="off"] .tk-bar > i { transition: none; }
.tk-boost { justify-self: start; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--nr-grn); color: var(--nr-grn); font: 700 10px var(--mono); }
.tk-last { font: 11px var(--mono); color: var(--nr-muted); display: grid; gap: 1px; }
.tk-hint { margin: 10px 0 6px; font-size: 12px; color: var(--nr-muted); text-align: center; }
@media (max-width: 620px) {
  .tk-meter { grid-template-columns: 104px minmax(0, 1fr) 44px; }
}

/* ═══ the run's play zone (2026-10-17, user: like the street fight — dots on the left, colored cards, END TURN up top) ═══ */
@keyframes nr-pulse { 50% { box-shadow: 0 0 18px var(--nr-yel); } }

/* the run's hand as real cards (2026-10-17, second pass): tap = read, drag up = play, CONFIRM — as on the fight board */

/* the one place for leaving a screen and for the turn: the right end of the NETRUN bar on top (renderNav) */
.nr-nav { display: flex; gap: 6px; align-items: center; }
.nr-nav:empty { display: none; }
.nr-nav .btn { padding: 4px 10px; font: 700 11px var(--mono); letter-spacing: 0.06em; background: color-mix(in srgb, var(--k-card-bot) 85%, transparent); white-space: nowrap; }
.nr-nav .btn.end { border-color: var(--nr-yel); color: var(--nr-yel); }
.nr-nav .btn.warn { border-color: var(--nr-red); color: var(--nr-red); }
.nr-nav .btn.pulse { animation: nr-pulse 1.4s ease-in-out infinite; }
html[data-motion="off"] .nr-nav .btn.pulse { animation: none; box-shadow: 0 0 12px var(--nr-yel); }
.nr-back, #nr-turnbar { display: none !important; } /* old per-screen exits: the bar on top has them */
@media (max-width: 620px) { .nr-crumbs { display: none; } .nr-nav .btn { padding: 4px 7px; font-size: 10px; } }

/* ═══ the stage (UI kit, docs/agents/netrun-ui.md): a picture, the dialog box on top (.k-say, nr_kit.css), an info strip,
   the hand at the bottom. Above the screens, under the dice (z 8), the result cards (z 11) and the toasts. ═══ */
.nr-stage { position: absolute; inset: 0; z-index: 7; background: var(--k-bg); overflow: hidden; }
.nr-stage[hidden] { display: none; }
.nr-stage .k-say { top: 112px; }
.nr-stage-x { position: absolute; top: 46px; right: 12px; left: auto; z-index: 9; } /* under the NETRUN bar (its ♪ sat on top of it) */
.nr-stage-info { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(var(--k-card-h) + 54px); width: min(760px, calc(100% - 24px)); max-height: 34%; overflow-y: auto; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
.nr-stage-info .k-meter { display: grid; grid-template-columns: 130px minmax(0, 1fr) 52px; gap: 8px; align-items: center; font: 700 10px var(--k-mono); letter-spacing: 0.12em; color: var(--k-muted); margin: 2px 0; }
.nr-stage-info .k-meter b { color: var(--k-text); text-align: right; letter-spacing: 0; }
.nr-stage-zone { position: absolute; z-index: 6; left: 0; right: 0; bottom: 10px; margin: 0 auto; width: fit-content; max-width: calc(100% - 16px); padding: 4px 10px; overflow: visible; }
@media (max-width: 720px) { .nr-stage-info { bottom: calc(var(--k-card-h) + 46px); max-height: 30%; font-size: 12px; } .nr-stage .k-say { top: 104px; } }
/* the street's choices card holds a hand now (scenes, leads, nights out): centred, the cards may lift above it */
.nr-street-ui.has-hand { left: 0; right: 0; margin: 0 auto; width: min(780px, calc(100% - 16px)); bottom: 10px; max-height: none; overflow: visible; padding: 8px 12px 4px; }
.out-hand { margin-top: 4px; }
/* the room's doors as cards; the ☰ for the panels sits where the turn dots sit on the other hands */
.nr-room-zone { position: absolute; z-index: 5; left: 0; right: 0; bottom: 10px; margin: 0 auto; width: fit-content; max-width: calc(100% - 16px); padding: 4px 10px; overflow: visible; }
.nr-room-zone[hidden] { display: none; }
.nr-info-btn { position: relative; min-height: 44px; min-width: 44px; padding: 4px 10px; font-size: 20px; }
.nr-info-btn .badge { position: absolute; top: -6px; right: -6px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--k-pill); font: 800 10px/1 var(--k-mono); font-style: normal; letter-spacing: 0; text-indent: 0; } /* centered: no inherited letter-spacing (it pushed XP off centre) */
.nr-info-btn .badge:empty { display: none; }
.nr-info-btn.alert .badge { background: var(--k-red); color: var(--k-ink); } .nr-info-btn.xp .badge { background: var(--k-yel); color: var(--k-ink); }
.nr-info-btn.alert { border-color: var(--k-red); }
/* the relationship screen's strip (it used to be scoped to the old overlay) */
.nr-stage-info .lv-top { display: flex; gap: 10px; align-items: flex-start; } .nr-stage-info .lv-id { min-width: 0; }
.nr-stage-info .lv-prof { font-size: 12px; color: var(--k-text); margin-top: 2px; } .nr-stage-info .lv-prof.muted, .nr-stage-info .muted { color: var(--k-muted); }
.nr-stage-info .lv-know { margin-top: 6px; } .nr-stage-info .lv-know summary { cursor: pointer; font: 700 11px var(--k-mono); letter-spacing: 0.2em; color: var(--k-pink); }
.nr-stage-info .lv-facet { font-size: 12px; margin: 2px 0; } .nr-stage-info .lv-facet em { color: var(--k-muted); font-style: normal; font: 11px var(--k-mono); margin-right: 4px; }
.nr-stage-info .lv-tip { font-size: 11px; color: var(--k-muted); margin: 4px 0; }
.nr-stage-info .lv-node { padding-left: calc(var(--d, 0) * 14px); font-size: 12px; margin: 2px 0; } .nr-stage-info .lv-node small { color: var(--k-muted); margin-left: 6px; font: 10px var(--k-mono); }
.nr-stage-info .lv-node.done { color: var(--k-grn); } .nr-stage-info .lv-node.locked { color: var(--k-muted); opacity: 0.7; }
.nr-stage-info .tk-last { margin-top: 6px; font: 11px var(--k-mono); color: var(--k-muted); } .nr-stage-info .tk-hint { margin-top: 6px; font-size: 11px; color: var(--k-muted); }
.nr-stage-info .tk-boost { display: inline-block; margin-top: 4px; }
/* the courtship card duel (2026-10-18): their mood face up, the next one if you watched them, your warmth */
.nr-stage-info .tk-duel { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 6px 0 2px; }
.tk-mood { display: grid; gap: 1px; min-width: 0; flex: 1 1 150px; padding: 4px 8px 5px; border-radius: 6px; border: 1px solid var(--k-pink); background: color-mix(in srgb, var(--k-pink) 10%, transparent); font-size: 11px; line-height: 1.3; }
.tk-mood.next { flex-basis: 110px; border-style: dashed; opacity: 0.85; }
.tk-mood-k { font: 700 9px var(--k-mono); letter-spacing: 0.14em; color: var(--k-pink); }
.tk-mood b { font-size: 13px; color: var(--k-text); } .tk-mood b i { font-style: normal; }
.tk-open { color: var(--k-grn); } .tk-closed { color: var(--k-red); } .tk-mood small { color: var(--k-muted); font: 10px var(--k-mono); }
.tk-side { display: grid; align-content: center; gap: 4px; flex: 0 0 auto; }
.tk-warm { display: flex; align-items: center; gap: 4px; font: 700 9px var(--k-mono); letter-spacing: 0.12em; color: var(--k-muted); }
.tk-warm i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--k-fire); }
.tk-warm i.on { background: var(--k-fire); box-shadow: 0 0 8px var(--k-fire); }
.tk-decks { font: 10px var(--k-mono); color: var(--k-muted); }
@media (max-width: 720px) { .tk-mood { flex-basis: 120px; font-size: 10px; } .tk-mood b { font-size: 12px; } .tk-mood.next { flex-basis: 90px; } .tk-side { flex-basis: 100%; display: flex; gap: 10px; align-items: center; } }
.nr-stage .sil { color: var(--k-pink); flex: 0 0 auto; }
/* a street counter with a market (UI kit §5) gets the room for the shelf and the preview side by side */
.nr-street-ui:has(.k-mk), .nr-street-ui:has(.k-irc) { width: min(940px, calc(100% - 36px)); max-height: min(80%, calc(100% - 110px)); }
.k-mk-pv .k-preview-pic { aspect-ratio: auto; height: clamp(110px, 18vh, 170px); }
@media (max-width: 720px) { .nr-street-ui:has(.k-mk), .nr-street-ui:has(.k-irc) { width: auto; } }

/* the scene's name over the subtitles (cineText head): big, a white line under it (user, 2026-10-17: a chase began and
   only a small line top-left said so) */
.cine-head { font: 800 clamp(24px, 2.4vw + 12px, 46px) var(--k-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-text); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 0, 0, 0.8); }
.cine-sep { width: min(420px, 60%); height: 2px; margin: 10px auto 14px; background: var(--k-text); box-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.9); }
html[data-motion="full"] .cine-head.new { animation: cine-head-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html[data-motion="full"] .cine-head.new + .cine-sep { animation: cine-sep-in 0.7s ease-out 0.15s both; }
html[data-motion="reduced"] .cine-head.new { animation: cine-fade 0.45s ease-out both; }
@keyframes cine-head-in { from { opacity: 0; letter-spacing: 0.5em; filter: blur(4px); } }
@keyframes cine-sep-in { from { transform: scaleX(0); } }
.nr-street-ui.has-hand.solo { width: fit-content; } /* the street once the evening is spent: just the Sleep card */
/* the loadout (visibility, house; docs/netrun/VISIBILITY.md): the room's ☰ → Loadout */
.nr-roomstat .vis { cursor: pointer; } .nr-roomstat .vis:hover b { color: var(--k-cyan); }
.lo-head { display: grid; gap: 4px; margin-bottom: 8px; } .lo-head small { color: var(--k-muted); font-size: 11.5px; line-height: 1.45; }
.lo-level { font: 700 12px var(--k-mono); letter-spacing: 0.2em; color: var(--k-muted); } .lo-level b { font-size: 22px; color: var(--k-yel); letter-spacing: 0; margin-left: 6px; }
.lo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 8px; margin: 4px 0; border-radius: var(--k-r-s); border: 1px solid var(--k-line-soft); opacity: 0.6; }
.lo-row.on { opacity: 1; border-color: var(--k-line); }
.lo-name b { display: block; font-size: 13px; } .lo-name small { color: var(--k-muted); font: 11px var(--k-mono); }
.lo-pips { font-size: 11px; letter-spacing: 2px; color: var(--k-yel); } .lo-pips i { font-style: normal; color: var(--k-muted); opacity: 0.5; }
.lo-places { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lo-place { padding: 5px 8px; border-radius: var(--k-r-s); border: 1px solid var(--k-line-soft); font-size: 12px; } .lo-place small { display: block; color: var(--k-muted); font: 11px var(--k-mono); }
.lo-place.warn { border-color: var(--k-yel); } .lo-place.warn small { color: var(--k-yel); } .lo-place.bad { border-color: var(--k-red); } .lo-place.bad small { color: var(--k-red); }
/* the city grid: a card waiting for its host says so, big, on top (cityBanner) */
.nr-city-aim { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 9; display: grid; gap: 2px; justify-items: center; padding: 10px 22px; border-radius: var(--k-r-l); border: 2px solid var(--k-yel); background: var(--k-panel-hi); box-shadow: 0 0 30px color-mix(in srgb, var(--k-yel) 35%, transparent); pointer-events: none; text-align: center; max-width: calc(100% - 24px); }
.nr-city-aim[hidden] { display: none; }
.nr-city-aim b { font: 800 clamp(16px, 1.4vw + 10px, 24px) var(--k-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-yel); }
.nr-city-aim small { font: 11px var(--k-mono); color: var(--k-muted); }
html[data-motion="full"] .nr-city-aim:not([hidden]) { animation: nr-aim-pulse 1.6s ease-in-out infinite; }
@keyframes nr-aim-pulse { 50% { box-shadow: 0 0 46px color-mix(in srgb, var(--k-yel) 60%, transparent); } }