/* URFRNDSHUB v95: the wall monitor + Hub OS on the Back Room wall.
   Ported from the approved mockup (mockups/hub-menu-v4.css). Everything here is
   scoped to the Hub (.hub, .hub-mon, .floor-rip); no global resets.
   VT323 is self-hosted (assets/fonts, Latin subset). */
@font-face {
  font-family: "VT323";
  src: url("../assets/fonts/VT323-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --hub-font: "VT323", ui-monospace, monospace;
  --hub-cyan: #5ef2ff;
  --hub-magenta: #ff4fd8;
  --hub-acid: #9dff6a;
  --hub-void: #030308;
  --hub-ink: #d8f7fb;
  --hub-dim: rgba(94, 242, 255, .45);
  --hub-planet-stroke: var(--hub-cyan);
  --hub-planet-stroke-2: var(--hub-magenta);
  --hub-line: rgba(94, 242, 255, .35);
  --hub-win-top: rgba(12,16,24,.94);
  --hub-win-bot: rgba(3,3,8,.96);
}
.hub, .hub * { box-sizing: border-box; }
.hub { font: 400 20px/1.2 var(--hub-font); -webkit-font-smoothing: none; }
.hub button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.hub :focus { outline: none; }
html.kbd .hub :focus-visible { outline: 1px solid var(--hub-acid); outline-offset: 3px; }

/* ---- wall monitor: placed in .kb by scene.js (data-rect); the .zone above it takes the tap ---- */
.scene[data-name="back-room"] .hub-mon { position: absolute; z-index: 4; pointer-events: none; overflow: visible; }
.scene[data-name="back-room"] .zone.hub-zone { z-index: 6; -webkit-tap-highlight-color: transparent; }
.hub-mon.is-blink .hub-led,
.hub-mon.is-blink .hub-led-glow { animation: led-blink .18s steps(1) 4; }
.scene.is-open .hub-mon { visibility: hidden; }

/* Light mode: pale glass, deep ink, soft accents. Contrast >= 4.5:1
   (ink 15.6:1, cyan 8.2:1, magenta 10.0:1 on #f3eef8). Room plate unchanged. */
html.hub-light {
  --hub-cyan: #1e4d54;
  --hub-magenta: #5a284c;
  --hub-acid: #2a4a18;
  --hub-void: #f3eef8;
  --hub-ink: #1a1524;
  --hub-dim: rgba(26, 21, 36, .62);
  --hub-planet-stroke: #1e4d54;
  --hub-planet-stroke-2: #5a284c;
  --hub-line: rgba(30, 77, 84, .45);
  --hub-win-top: #f7f4fb;
  --hub-win-bot: #efeaf6;
}
.hub-monitor, .hub-crt {
  position: absolute; left: 3.72%; top: 2.48%; width: 92.61%; height: 94.97%;
  display: block; overflow: visible; pointer-events: none;
}
.hub-word text {
  font-family: var(--hub-font);
  text-anchor: middle;
  dominant-baseline: alphabetic;
}
.hub-halo { opacity: .8; filter: url(#hub2-blur); stroke-width: 2.4; stroke-linejoin: round; }
.hub-core { paint-order: fill; }
.hub-cursor { animation: hub-cursor-blink 1.8s step-end infinite; }
@keyframes hub-cursor-blink {
  0%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.hub-led { filter: none; }
@keyframes led-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .15; }
}

/* CRT power-on, clipped to the glass trapezoid */
.hub-crt {
  clip-path: polygon(3.90% 5.67%, 96.10% 21.20%, 96.10% 88.80%, 3.90% 92.60%);
  -webkit-clip-path: polygon(3.90% 5.67%, 96.10% 21.20%, 96.10% 88.80%, 3.90% 92.60%);
}
.hub-crt-line {
  position: absolute; left: 0; right: 0;
  top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent 2%, var(--hub-cyan) 20%, #fff 50%, var(--hub-magenta) 80%, transparent 98%);
  opacity: 0;
  pointer-events: none;
}
.hub-crt.is-line .hub-crt-line { opacity: 1; }
.hub-crt.is-midline .hub-crt-line {
  opacity: 1;
  top: 48%; height: 7%; margin-top: 0;
  background: linear-gradient(90deg, transparent 2%, var(--hub-cyan) 18%, #fff 50%, var(--hub-magenta) 82%, transparent 98%);
  box-shadow: 0 0 10px rgba(94, 242, 255, .35);
}
.hub-crt.is-expand .hub-crt-line {
  opacity: 1;
  top: 0; height: 100%; margin-top: 0;
  background:
    linear-gradient(180deg, rgba(94,242,255,.18), rgba(7,6,14,.92) 30%, rgba(3,3,8,.96)),
    linear-gradient(90deg, rgba(255,79,216,.08), transparent 40%, rgba(94,242,255,.08));
  box-shadow: inset 0 0 18px rgba(94, 242, 255, .18);
  transition: top .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), margin-top 0s;
}

/* ---- OS overlay ---- */
.hub {
  position: fixed; inset: 0; z-index: 40; color: var(--hub-ink);
  font-family: var(--hub-font); pointer-events: none;
}
.hub:not([hidden]) { pointer-events: auto; }
.hub-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(94,242,255,.10) 0 1px,
      rgba(0,0,0,0) 1px 3px,
      rgba(0,0,0,.32) 3px 4px),
    radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,.45), transparent 2px),
    radial-gradient(1px 1px at 22% 38%, rgba(94,242,255,.35), transparent 2px),
    radial-gradient(1px 1px at 41% 8%, rgba(255,255,255,.28), transparent 2px),
    radial-gradient(1.2px 1.2px at 63% 22%, rgba(255,79,216,.28), transparent 2px),
    radial-gradient(1px 1px at 78% 48%, rgba(255,255,255,.32), transparent 2px),
    radial-gradient(1px 1px at 91% 16%, rgba(94,242,255,.28), transparent 2px),
    radial-gradient(1px 1px at 14% 72%, rgba(255,255,255,.22), transparent 2px),
    radial-gradient(1px 1px at 34% 88%, rgba(94,242,255,.22), transparent 2px),
    radial-gradient(1px 1px at 58% 69%, rgba(255,255,255,.2), transparent 2px),
    radial-gradient(1.2px 1.2px at 86% 82%, rgba(255,79,216,.2), transparent 2px),
    radial-gradient(120% 80% at 50% 0%, rgba(94,242,255,.07), transparent 55%),
    var(--hub-void);
  transition: opacity .4s ease;
}
.hub.is-on .hub-scan { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hub.is-on .hub-scan { animation: phosphor 3.6s ease-in-out infinite; }
  @keyframes phosphor {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.06); }
  }
}
.hub-panel {
  position: absolute; overflow: hidden; color: var(--hub-ink);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(94,242,255,.08), transparent 55%),
    var(--hub-void);
  border: 1px solid rgba(94, 242, 255, .35);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,79,216,.08);
  transition: top .7s cubic-bezier(.22,.8,.28,1), left .7s cubic-bezier(.22,.8,.28,1),
              right .7s cubic-bezier(.22,.8,.28,1), bottom .7s cubic-bezier(.22,.8,.28,1),
              border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.hub.is-on .hub-panel {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: transparent; border-color: transparent; box-shadow: none;
}
.hub-in {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 18px) calc(22px + env(safe-area-inset-right))
           calc(22px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
}
.hub button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* header */
.os-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 12px; }
.os-top .os-close, .os-top .os-back {
  flex: none; position: relative; z-index: 2;
  min-width: 64px; min-height: 44px; padding: 10px 8px;
  letter-spacing: .1em; font-size: 18px; color: var(--hub-ink); text-align: right;
}
.os-top .os-close:hover, .os-top .os-close:active,
.os-top .os-back:hover, .os-top .os-back:active { color: var(--hub-cyan); text-decoration: underline; text-underline-offset: 4px; }
.os-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.os-planet { width: 44px; height: 44px; flex: none; display: block; }
.os-h {
  margin: 0; font: 400 clamp(28px, 9.5vw, 42px)/1 var(--hub-font); letter-spacing: .06em; color: var(--hub-cyan);
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(94,242,255,.45), 1px 0 0 rgba(255,79,216,.35);
}
.os-sub { margin: 6px 0 0; font-size: min(16px, 4.6vw); letter-spacing: .08em; color: var(--hub-dim); }
.os-rule { height: 1px; margin: 16px 0 8px; flex: none; background: linear-gradient(90deg, var(--hub-cyan), var(--hub-magenta) 55%, transparent); opacity: .7; }

/* boot log */
.boot-log { margin: 18px 0 0; font-size: 18px; line-height: 1.7; letter-spacing: .04em; color: var(--hub-dim); }
.boot-log p { margin: 0; min-height: 1.7em; }
.boot-log .ok { color: var(--hub-cyan); }

/* program rows — typed command lines */
.os-prompt { margin: 4px 0 6px; font-size: 16px; color: var(--hub-magenta); letter-spacing: .08em; }
.prog-list { list-style: none; margin: 0; padding: 0; position: relative; }
.sel-bar {
  position: absolute; left: -8px; right: -8px; top: 0;
  height: 48px;
  background: rgba(94, 242, 255, .10);
  box-shadow: inset 2px 0 0 var(--hub-cyan);
  pointer-events: none; z-index: 0;
  opacity: 0;
  transform: translateY(0);
  transition: transform .22s ease, opacity .18s ease, height .18s ease;
}
.prog-list.has-sel .sel-bar { opacity: 1; }
.prog {
  position: relative; z-index: 1; overflow: visible;
  width: 100%; display: grid;
  grid-template-columns: 1.1em 2.2em 1fr 1.1em;
  column-gap: 8px; align-items: center;
  min-height: 44px; padding: 6px 0;
  color: var(--hub-ink); letter-spacing: .06em;
  white-space: nowrap;
}
.prog-prompt { font-size: 22px; line-height: 1; color: var(--hub-magenta); }
.prog-n { font-size: 22px; line-height: 1; color: var(--hub-dim); }
.prog-name { font-size: 22px; line-height: 1; color: var(--hub-ink); }
.prog-caret {
  font-size: 22px; line-height: 1; color: var(--hub-acid);
  opacity: 0; text-align: right;
}
.prog.is-hot .prog-caret, .prog:hover .prog-caret, html.kbd .prog:focus-visible .prog-caret { opacity: 1; }
.prog.is-hot .prog-prompt, .prog:hover .prog-prompt, html.kbd .prog:focus-visible .prog-prompt { color: var(--hub-acid); }
.prog.is-hot .prog-n, .prog:hover .prog-n, html.kbd .prog:focus-visible .prog-n { color: var(--hub-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .prog.is-hot .prog-caret, .prog:hover .prog-caret, html.kbd .prog:focus-visible .prog-caret {
    animation: caret-blink 1.1s steps(1) infinite;
  }
  @keyframes caret-blink { 50% { opacity: 0; } }
}
@media (hover: hover) {
  .prog:hover .prog-name { color: var(--hub-cyan); }
}
html.kbd .prog:focus-visible .prog-name,
.prog.is-hot .prog-name { color: var(--hub-cyan); }
.prog:active .prog-name { color: #fff; animation: px-flash .14s steps(1); }
@keyframes px-flash {
  0% { color: var(--hub-acid); }
  100% { color: #fff; }
}
/* short scan sweep across the selected row — once, no strobe */
.prog.is-sweep::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(94,242,255,.18), transparent);
  pointer-events: none;
  animation: row-sweep .32s ease-out 1;
}
@keyframes row-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(360%); }
}
.prog.is-sweep .prog-name, .prog.is-glitch .prog-name {
  animation: row-glitch .18s steps(2);
}
@keyframes row-glitch {
  0% { transform: translate(0, 0); }
  35% { transform: translate(2px, -1px); }
  70% { transform: translate(-2px, 0); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sel-bar { transition: none !important; }
  .prog.is-sweep::after { animation: none !important; display: none; }
  .prog.is-sweep .prog-name, .prog.is-glitch .prog-name { animation: none !important; }
}
.os-echo {
  margin: 10px 0 0; min-height: 1.3em; font-size: 18px; color: var(--hub-acid);
  letter-spacing: .06em;
}

/* mid-boot opening panel */
.hub[data-shot="opening"] .hub-panel,
.hub.is-midboot .hub-panel {
  background:
    repeating-linear-gradient(to bottom,
      rgba(94,242,255,.08) 0 1px,
      rgba(0,0,0,0) 1px 3px,
      rgba(0,0,0,.28) 3px 4px),
    radial-gradient(120% 80% at 50% 0%, rgba(94,242,255,.10), transparent 55%),
    var(--hub-void);
}
.boot-crt-line {
  height: 3px; margin: 10px 0 14px; flex: none;
  background: linear-gradient(90deg, transparent 2%, var(--hub-cyan) 16%, #fff 50%, var(--hub-magenta) 84%, transparent 98%);
  box-shadow: 0 0 8px rgba(94, 242, 255, .35);
}
.hub.is-midboot .prog { opacity: 0; }
.hub.is-midboot .prog.is-typed { opacity: 1; }
.hub.is-midboot .prog.is-typing .prog-name { color: var(--hub-cyan); }

/* live lower half */
.os-deck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  flex: 1 1 auto;   /* v95 QA: no min-height:0, so the deck never shrinks below the console */
}
.os-console {
  min-width: 0;
  border-top: 1px solid rgba(94, 242, 255, .18);
  padding-top: 8px;
  font-size: 15px; line-height: 1.35; letter-spacing: .05em; color: var(--hub-dim);
  white-space: nowrap;
}
/* v95 QA: short phones (SE/8, 320x693) drop the decorative console so the planet and keys fit without scrolling */
@media (max-height: 720px) { .os-console { display: none; } }
.os-console .con-h { margin: 0 0 4px; color: var(--hub-magenta); letter-spacing: .12em; }
.os-console p { margin: 0; }
.os-console .con-ok { color: var(--hub-cyan); }
.os-radar {
  /* v95 QA: the planet takes only the space left over and clips; it never pushes onto status/keys. */
  display: block; position: relative;
  flex: 1 1 0; min-height: 0; overflow: hidden;
  pointer-events: none;
}
.os-planet-lg {
  position: absolute; left: 0; top: 50%; width: 100%; height: min(100%, 150px);
  transform: translateY(-50%); display: block; overflow: visible; pointer-events: none;
}
.os-radar .orbit { fill: none; stroke: var(--hub-magenta); stroke-width: 0.6; opacity: .35; }
.os-radar .orbit-2 { stroke: var(--hub-cyan); opacity: .22; }
.os-radar .radar-arm { stroke: var(--hub-acid); stroke-width: 0.7; opacity: .55; transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .os-radar .orbits { animation: orbit-spin 36s linear infinite; }
  .os-radar .radar-arm { animation: radar-sweep 14s linear infinite; }
  @keyframes orbit-spin { to { transform: rotate(360deg); } }
  @keyframes radar-sweep { to { transform: rotate(360deg); } }
}

.os-status {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 6px 0 2px;
  border-top: 1px solid rgba(94, 242, 255, .18);
  font-size: 14px; letter-spacing: .08em; color: var(--hub-dim);
}
.os-sig { display: inline-flex; align-items: flex-end; gap: 3px; }
.os-sig b { font-weight: 400; margin-right: 6px; color: var(--hub-dim); }
.os-sig i {
  display: block; width: 4px; background: var(--hub-cyan); opacity: .85;
  font-style: normal;
}
.os-sig i:nth-child(2) { height: 6px; }
.os-sig i:nth-child(3) { height: 9px; }
.os-sig i:nth-child(4) { height: 12px; }
.os-sig i:nth-child(5) { height: 15px; opacity: .25; }
.os-up { color: var(--hub-cyan); letter-spacing: .1em; }
.os-wave { height: 18px; width: 100%; display: block; overflow: hidden; }
.os-wave path { fill: none; stroke: var(--hub-cyan); stroke-width: 1.2; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .os-wave .wave-g { animation: wave-shift 6.5s linear infinite; }
  @keyframes wave-shift { from { transform: translateX(0); } to { transform: translateX(-40px); } }
}

.os-keys {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-top: 10px;
  flex: none;
}
.os-keys button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 6px; width: 100%;
  border: 1px solid var(--hub-line);
  background: transparent;
  color: var(--hub-ink); letter-spacing: .08em; font-size: min(16px, 4.2vw);
  white-space: nowrap;   /* v95 QA: "lights down" stays on one line at 320 */
  cursor: pointer;
}
.os-keys button:hover {
  color: var(--hub-cyan);
  border-color: var(--hub-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.os-keys button:active {
  transform: translateY(1px);
  color: var(--hub-cyan);
  border-color: var(--hub-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.os-keys button[aria-pressed="true"] {
  color: var(--hub-cyan);
  border-color: var(--hub-cyan);
}

/* program window */
.os-win {
  position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1;
  border: 1px solid var(--hub-line);
  box-shadow: 0 0 0 1px rgba(255, 79, 216, .12), 0 12px 40px rgba(0,0,0,.55);
  background: linear-gradient(180deg, var(--hub-win-top), var(--hub-win-bot));
  margin-top: 12px;
}
.os-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid rgba(94, 242, 255, .28);
}
.os-title {
  grid-column: 1 / -1;
  margin: 0; padding: 8px 14px 6px; font: 400 18px/1.2 var(--hub-font);
  color: var(--hub-cyan); letter-spacing: .04em;
  white-space: nowrap; overflow: visible;
  border-bottom: 1px solid rgba(94, 242, 255, .18);
}
.os-bar button {
  min-width: 72px; min-height: 44px; padding: 0 14px;
  color: var(--hub-ink); letter-spacing: .1em; font-size: 18px;
}
.os-bar .os-back { color: var(--hub-cyan); grid-column: 1; justify-self: start; }
.os-bar .os-close { grid-column: 2; border-left: 1px solid rgba(94, 242, 255, .2); }
.os-bar button:hover, .os-bar button:active { color: var(--hub-cyan); text-decoration: underline; text-underline-offset: 4px; }
.os-bar .os-close:hover, .os-bar .os-close:active { color: var(--hub-magenta); }
.os-body { padding: 0; font-size: 17px; line-height: 1.45; color: var(--hub-ink); flex: 1; min-height: 0; }
.os-code { display: flex; flex-direction: column; padding: 10px 0 18px; }
.code-row {
  display: grid; grid-template-columns: 2.6em 1fr;
  min-height: 1.45em; line-height: 1.45; align-items: baseline;
}
.code-row .ln {
  text-align: right; padding: 0 8px 0 6px;
  border-right: 1px solid rgba(94, 242, 255, .18);
  color: var(--hub-dim); font-size: 14px; letter-spacing: .04em; user-select: none;
}
.code-row .tx { padding: 0 12px; white-space: nowrap; }
.code-row.is-tag .tx, .code-row .sample-tag { color: var(--hub-magenta); letter-spacing: .16em; }
.code-row.is-end .tx, .os-end { color: var(--hub-acid); }
.os-end .blink { color: var(--hub-acid); }
@media (prefers-reduced-motion: no-preference) {
  .os-end .blink { animation: caret-blink 1.1s steps(1) infinite; }
}

/* row type-in — lis follow the absolute sel-bar, so count from 2 */
.prog { opacity: 0; }
.hub.rows-on .prog { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hub.rows-on .prog { animation: type-in .2s steps(2) both; }
  .hub.rows-on .prog-list li:nth-of-type(1) .prog { animation-delay: .00s; }
  .hub.rows-on .prog-list li:nth-of-type(2) .prog { animation-delay: .09s; }
  .hub.rows-on .prog-list li:nth-of-type(3) .prog { animation-delay: .18s; }
  .hub.rows-on .prog-list li:nth-of-type(4) .prog { animation-delay: .27s; }
  .hub.rows-on .prog-list li:nth-of-type(5) .prog { animation-delay: .36s; }
  .hub.rows-on .prog-list li:nth-of-type(6) .prog { animation-delay: .45s; }
  @keyframes type-in { from { opacity: 0; letter-spacing: .2em; } to { opacity: 1; } }
}
.hub.rows-on.is-page .prog { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hub-mon.is-blink .hub-led, .hub-mon.is-blink .hub-led-glow,
  .hub-scan, .hub-panel, .hub.rows-on .prog, .prog-caret, .os-end .blink, .hub-cursor { animation: none !important; transition: none !important; }
  .hub-cursor { opacity: 1; }
  .hub-crt-line { transition: none !important; }
  .prog { opacity: 1; }
  .os-radar .orbits, .os-radar .radar-arm, .os-wave .wave-g,
  .rip-drift, .rip-nebula { animation: none !important; transform: none !important; }
}


/* ---- light mode: menu chrome + monitor face (plate stays as-is) ---- */
html.hub-light .os-h { text-shadow: none; }
html.hub-light .hub-scan {
  background:
    repeating-linear-gradient(to bottom,
      rgba(26,21,36,.10) 0 1px,
      rgba(243,238,248,0) 1px 3px,
      rgba(26,21,36,.06) 3px 4px),
    radial-gradient(120% 80% at 50% 0%, rgba(30,77,84,.06), transparent 55%),
    var(--hub-void);
}
html.hub-light .sel-bar {
  background: rgba(30, 77, 84, .10);
  box-shadow: inset 2px 0 0 var(--hub-cyan);
}
html.hub-light .hub-bezel { fill: #c8c4d2; }
html.hub-light .hub-side { fill: #b4b0bc; }
html.hub-light .hub-glass { fill: #e8e4f2; }
html.hub-light .hub-core { fill: #1a1524; }
html.hub-light .hub-halo { fill: #3a6a78; stroke: #3a6a78; opacity: .4; }
html.hub-light .hub-cursor-core { fill: #1e4d54; }
html.hub-light .hub-cursor-halo { fill: #3a6a78; }
html.hub-light .hub-spill { opacity: .1; }
html.hub-light .hub-led { fill: #1e4d54; }
html.hub-light .hub-led-glow { fill: #3a6a78; opacity: .5; }
html.hub-light .hub-planet { filter: brightness(1.45) saturate(.4) contrast(.92); }
html.hub-light .os-win { box-shadow: 0 0 0 1px rgba(90, 40, 76, .12), 0 12px 28px rgba(26,21,36,.12); }

/* ---- spark (v95 r3): one full-monitor cosmic burst, ~1.6s, soft, no strobe ----
   Layer opacity: 0 -> .55 -> .32 -> .45 -> 0 (one flash; the second swell is under .15, so it reads as a glow, not a flash).
   Colours stay the house neon (cyan, magenta, acid) at low alpha; never a white full-screen flash.
   pointer-events:none, and hub.js ignores spark taps while it runs, so nothing can stack or block a tap. */
.hub-spark {
  position: absolute; inset: 0; z-index: 5; overflow: hidden;
  pointer-events: none; opacity: 0; visibility: hidden;
  mix-blend-mode: screen;
}
.hub-spark i { position: absolute; display: block; pointer-events: none; }
.hub-spark .hs-wash {
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 46%, rgba(94,242,255,.50) 0%, rgba(94,242,255,.18) 38%, transparent 70%),
    radial-gradient(55% 40% at 12% 8%, rgba(255,79,216,.42), transparent 70%),
    radial-gradient(55% 40% at 90% 96%, rgba(157,255,106,.30), transparent 70%),
    radial-gradient(70% 50% at 92% 18%, rgba(255,79,216,.22), transparent 72%),
    radial-gradient(70% 50% at 8% 88%, rgba(94,242,255,.24), transparent 72%);
}
.hub-spark .hs-stars {
  inset: -10%;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(216,247,251,.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 12%, rgba(255,79,216,.9), transparent 60%),
    radial-gradient(1.8px 1.8px at 64% 72%, rgba(157,255,106,.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 28% 82%, rgba(94,242,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 52%, rgba(216,247,251,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 40% 36%, rgba(255,79,216,.8), transparent 60%);
  background-size: 180px 180px;
}
.hub-spark .hs-rays {
  left: 50%; top: 46%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 8deg, rgba(94,242,255,.45) 10deg 12deg, transparent 14deg 40deg,
    rgba(255,79,216,.40) 42deg 44deg, transparent 46deg 80deg,
    rgba(157,255,106,.34) 82deg 84deg, transparent 86deg 128deg,
    rgba(94,242,255,.40) 130deg 132deg, transparent 134deg 172deg,
    rgba(255,79,216,.36) 174deg 176deg, transparent 178deg 220deg,
    rgba(157,255,106,.30) 222deg 224deg, transparent 226deg 268deg,
    rgba(94,242,255,.36) 270deg 272deg, transparent 274deg 316deg,
    rgba(255,79,216,.34) 318deg 320deg, transparent 322deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.8) 12%, transparent 34%);
  mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.8) 12%, transparent 34%);
}
.hub-spark .hs-ring {
  left: 50%; top: 46%; width: 70vmin; height: 24vmin; margin: -12vmin 0 0 -35vmin; border-radius: 50%;
  border: 2px solid rgba(94,242,255,.75); box-shadow: 0 0 18px rgba(94,242,255,.35), inset 0 0 14px rgba(255,79,216,.25);
  transform: rotate(-18deg) scale(.4);
}
.hub-spark .hs-ring-2 { border-color: rgba(255,79,216,.65); transform: rotate(-18deg) scale(.3); }
.hub-spark .hs-planet {
  left: 50%; top: 46%; width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(216,247,251,.85) 0, rgba(94,242,255,.55) 30%, rgba(255,79,216,.35) 62%, transparent 72%);
}
.hub-spark.is-on { visibility: visible; animation: hub-spark-burst 1.6s ease-out 1 both; }
.hub-spark.is-on .hs-rays { animation: hub-spark-rays 1.6s cubic-bezier(.2,.7,.3,1) 1 both; }
.hub-spark.is-on .hs-ring { animation: hub-spark-ring 1.6s cubic-bezier(.2,.7,.3,1) 1 both; }
.hub-spark.is-on .hs-ring-2 { animation: hub-spark-ring2 1.6s cubic-bezier(.2,.7,.3,1) 1 both; }
.hub-spark.is-on .hs-planet { animation: hub-spark-planet 1.6s ease-out 1 both; }
.hub-spark.is-on .hs-stars { animation: hub-spark-stars 1.6s ease-out 1 both; }
@keyframes hub-spark-burst { 0% { opacity: 0; } 18% { opacity: .55; } 45% { opacity: .32; } 62% { opacity: .45; } 100% { opacity: 0; } }
@keyframes hub-spark-rays { 0% { transform: rotate(0deg) scale(.35); } 100% { transform: rotate(28deg) scale(1.05); } }
@keyframes hub-spark-ring { 0% { transform: rotate(-18deg) scale(.4); opacity: 1; } 100% { transform: rotate(-18deg) scale(2.6); opacity: 0; } }
@keyframes hub-spark-ring2 { 0% { transform: rotate(-18deg) scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(-18deg) scale(2.1); opacity: 0; } }
@keyframes hub-spark-planet { 0% { transform: scale(.5); } 30% { transform: scale(1.05); } 100% { transform: scale(.9); } }
@keyframes hub-spark-stars { 0% { transform: scale(.92); } 100% { transform: scale(1.18); } }
/* light mode: same burst, tinted onto the pale screen instead of added to it */
html.hub-light .hub-spark { mix-blend-mode: multiply; }
html.hub-light .hub-spark .hs-planet { background: radial-gradient(circle at 36% 32%, rgba(94,242,255,.7) 0, rgba(255,79,216,.45) 55%, transparent 72%); }
html.hub-light .hub-spark .hs-stars { opacity: .7; }
/* reduced motion: one soft static glow that fades in and out once; nothing moves */
@media (prefers-reduced-motion: reduce) {
  .hub-spark.is-on { animation: hub-spark-soft 1.2s ease-in-out 1 both; }
  .hub-spark.is-on i { animation: none !important; }
  .hub-spark .hs-ring, .hub-spark .hs-ring-2 { display: none; }
  .hub-spark .hs-rays { transform: scale(.8); }
  @keyframes hub-spark-soft { 0%, 100% { opacity: 0; } 45% { opacity: .38; } }
}
html.hub-paused .hub-spark, html.hub-paused .hub-spark i { animation-play-state: paused !important; }

/* ---- floor rip (Espen v4). Void-alpha (hole minus slab) stays fixed to the plate; nebula drifts inside it. ---- */
.floor-rip {
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none; overflow: hidden;
}
.rip-mask {
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask-image: url("../assets/back-room-v4-void-alpha-web.png");
  mask-image: url("../assets/back-room-v4-void-alpha-web.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  mask-mode: alpha;
  -webkit-mask-source-type: alpha;
}
.rip-drift {
  position: absolute; inset: 0;
  transform-origin: 28.78% 82.35%;
}
.rip-nebula {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: fill; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .rip-drift { animation: rip-nebula-drift 80s ease-in-out infinite; }
  @keyframes rip-nebula-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(1.8%, -0.8%) scale(1.03); }
  }
}
.rip-drift.is-mid {
  animation: none;
  transform: translate(1.8%, -0.8%) scale(1.03);
  transform-origin: 28.78% 82.35%;
}
.rip-drift.is-rest {
  animation: none;
  transform: none;
  transform-origin: 28.78% 82.35%;
}
html.hub-paused .rip-drift,
html.hub-paused .hub-planet-spin {
  animation-play-state: paused !important;
}

/* ---- v95 additions: real page content ---- */
.scene[data-name="back-room"] .floor-rip { z-index: 2; }
.scene.is-paused .rip-drift { animation-play-state: paused; }
.hub .code-row .tx { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.hub .code-row.is-empty .tx, .hub .code-row.is-wait .tx { color: var(--hub-dim); }
/* v95 QA nit: no lone "back." on the owner empty state (Ayla's words unchanged) */
.hub .code-row.is-empty .tx { white-space: normal; text-wrap: balance; }
.hub .code-row.is-err .tx { color: var(--hub-magenta); }
.hub .code-row .tx a { color: var(--hub-cyan); text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; }
.hub .code-row .tx a:active { color: var(--hub-acid); }
.hub .os-bar { grid-template-columns: 1fr auto; }
.hub .os-bar .os-title { grid-column: 1; border-bottom: 0; align-self: center; overflow: hidden; text-overflow: ellipsis; }
.hub .os-bar .os-close { grid-column: 2; }

/* ---- v95 r3: Note To The Owner inside the monitor (terminal look; copy unchanged) ---- */
.hub .os-code .tx p { margin: 0; }
.hub .hub-note { display: flex; flex-direction: column; margin: 0; }
.hub .hub-note[hidden] { display: none; }
.hub .hub-note-field .tx, .hub .hub-note-out .tx { padding-top: 6px; padding-bottom: 6px; }
.hub .hub-note-prompt .tx, .hub .hub-note-quiet .tx { white-space: normal; text-wrap: pretty; }
.hub .hub-note-quiet .tx { color: var(--hub-dim); font-size: 16px; }
.hub .hub-note-text {
  display: block; width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; margin: 0;
  padding: 10px 12px; border: 1px solid var(--hub-line); border-radius: 0;
  background: rgba(3, 3, 8, .55); color: var(--hub-ink); caret-color: var(--hub-acid);
  font: 400 19px/1.35 var(--hub-font); letter-spacing: .03em; -webkit-appearance: none; appearance: none;
}
.hub .hub-note-text::placeholder { color: var(--hub-dim); opacity: 1; }
.hub .hub-note-text:focus { outline: none; border-color: var(--hub-cyan); }
.hub .hub-note-text:disabled { opacity: .6; }
.hub .hub-note-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.hub .hub-note-photo, .hub .hub-note-send, .hub .hub-note-done {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--hub-line); background: transparent; color: var(--hub-ink);
  font: 400 18px/1 var(--hub-font); letter-spacing: .08em; cursor: pointer; border-radius: 0;
}
.hub .hub-note-photo::before { content: "+ "; color: var(--hub-acid); white-space: pre; }
.hub .hub-note-send { color: var(--hub-cyan); border-color: var(--hub-cyan); }
.hub .hub-note-send::before { content: "> "; color: var(--hub-magenta); white-space: pre; }
.hub .hub-note-send:disabled { opacity: .45; cursor: default; }
.hub .hub-note-photo:hover, .hub .hub-note-photo:active, .hub .hub-note-send:not(:disabled):hover, .hub .hub-note-send:not(:disabled):active,
.hub .hub-note-done:hover, .hub .hub-note-done:active { color: var(--hub-acid); border-color: var(--hub-acid); text-decoration: underline; text-underline-offset: 3px; }
.hub .hub-note-photo:focus-within { outline: 1px solid var(--hub-acid); outline-offset: 3px; }
.hub .hub-note-image { display: block; max-width: 100%; max-height: 180px; object-fit: contain; margin: 10px 0 0; border: 1px solid var(--hub-line); }
.hub .hub-note-image[hidden] { display: none; }
.hub .hub-note-status { color: var(--hub-acid); white-space: normal; text-wrap: pretty; }
.hub .hub-note-status:empty { display: none; }
.hub .hub-note-status:focus { outline: none; }
.hub .hub-note-done { margin-top: 8px; }
.hub .hub-note-done[hidden] { display: none; }

/* ---- v95 r3: the room Map inside the monitor ---- */
.hub .hub-map { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hub .hub-map-item {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none;
  color: var(--hub-cyan); font: inherit; letter-spacing: .04em; text-align: left; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; line-height: 1.2;
}
.hub .hub-map-item:hover, .hub .hub-map-item:active { color: var(--hub-acid); }
.hub .hub-map-sep .tx { color: var(--hub-magenta); letter-spacing: .16em; padding-top: 10px; }