/* THE BLACK HOLE tab (static/js/blackhole.js). The hub.css tokens (--amber, --holo, --mono) and theme.css
   primitives; the canvas is the only moving surface (no backdrop-filter, no looping CSS on big panels). */
.bh-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bh-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; flex: 1 1 520px; max-width: 760px; }
.bh-stat { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-left: 2px solid var(--holo-dim); min-width: 0; }
.bh-stat em { font: 700 9px var(--mono); letter-spacing: .22em; color: var(--holo); font-style: normal; }
.bh-stat b { font: 700 20px var(--mono); color: var(--amber); font-variant-numeric: tabular-nums; }
.bh-stat span { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the deck: the hole, its instruments, and the drop target */
.bh-deck { position: relative; margin-top: 10px; border: 1px solid var(--holo-dim); border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #0b1422 0%, #03050a 70%); }
.bh-deck::before, .bh-deck::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--amber); pointer-events: none; z-index: 2; }
.bh-deck::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.bh-deck::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.bh-deck.dropping { border-color: var(--amber); box-shadow: inset 0 0 60px rgba(255, 138, 48, .25); }
#bh-canvas { display: block; width: 100%; height: clamp(380px, 54vw, 640px); cursor: crosshair; }
.bh-hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 26px; }
.bh-hud .kicker { font: 600 11px var(--mono); letter-spacing: .26em; color: var(--holo); }
.bh-hud .kicker b { color: var(--amber); font-weight: 600; }
.bh-hud-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bh-read { display: flex; flex-direction: column; align-items: flex-end; font: 500 10px/1.6 var(--mono); letter-spacing: .14em; color: var(--mute); text-align: right; max-width: 46%; }
.bh-read .m { font: 700 30px var(--mono); color: var(--amber); letter-spacing: .02em; text-shadow: 0 0 18px rgba(255, 176, 32, .35); }
.bh-hud-bot { display: flex; justify-content: space-between; gap: 12px; font: 500 10px var(--mono); letter-spacing: .16em; color: var(--mute); flex-wrap: wrap; }
.bh-tip { position: absolute; z-index: 3; min-width: 200px; max-width: 260px; padding: 12px 14px 12px 16px; border: 1px solid rgba(79, 227, 255, .3); border-left: 2px solid var(--holo); border-radius: 2px;
  background: linear-gradient(90deg, rgba(6, 12, 22, .96), rgba(6, 12, 22, .86)); box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(79, 227, 255, .12);
  display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.bh-tip::before { content: ""; position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); pointer-events: none; }
.bh-tip b { font: 700 12px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #e9f6ff; padding-right: 18px; text-shadow: 0 0 8px rgba(79, 227, 255, .3); }
.bh-tip em { order: -1; font-style: normal; font: 700 9px var(--mono); letter-spacing: .24em; color: var(--holo); text-transform: uppercase; }
.bh-tip button:not(.bh-tip-x) { align-self: flex-start; font: 700 10px var(--mono) !important; letter-spacing: .18em !important; padding: 6px 12px !important; }

.bh-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-top: 12px; }
.bh-grid > .card { min-width: 0; }
.bh-disk { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.bh-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(79, 227, 255, .12); border-radius: 6px;
  background: rgba(6, 12, 20, .55); }
.bh-item[draggable="true"] { cursor: grab; }
.bh-item[draggable="true"]:active { cursor: grabbing; }
.bh-item.due { border-color: rgba(255, 224, 138, .45); }
.bh-item > i { position: relative; height: 4px; border-radius: 2px; background: rgba(79, 227, 255, .12); }
.bh-item > i::after { content: ""; position: absolute; top: -3px; left: calc(var(--r) * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--holo); box-shadow: 0 0 8px var(--holo); }
.bh-item.due > i::after { background: #ffe08a; box-shadow: 0 0 8px #ffe08a; }
.bh-item.k-quest > i::after { background: #7dff9a; box-shadow: 0 0 8px #7dff9a; }
.bh-item.k-branch > i::after { background: #b06bff; box-shadow: 0 0 8px #b06bff; }
.bh-item > div { min-width: 0; display: flex; flex-direction: column; }
.bh-item b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-item em { font-style: normal; font: 600 9px var(--mono); letter-spacing: .14em; color: var(--mute); }
.bh-item button { padding: 4px 10px; }
.bh-log { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }
.bh-log > div { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; font-size: 12px; padding: 4px 2px; border-bottom: 1px solid rgba(79, 227, 255, .06); }
.bh-log span { font: 500 10px var(--mono); color: var(--mute); }
.bh-log b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-log em { font-style: normal; font: 600 10px var(--mono); color: var(--amber); }
.bh-parts { display: flex; flex-direction: column; gap: 4px; }
.bh-parts > div { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 52px; gap: 8px; align-items: center; font-size: 12px; }
.bh-parts span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-parts i { height: 5px; border-radius: 3px; background: rgba(255, 176, 32, .1); overflow: hidden; }
.bh-parts u { display: block; height: 100%; background: linear-gradient(90deg, #ff5a1f, var(--amber), #fff3d6); }
.bh-parts b { font: 600 11px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* the owner's sealed door */
.bh-door { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; margin-top: 12px; padding: 14px 16px; border: 1px solid #ff4fd8;
  border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(255, 79, 216, .05) 0 8px, transparent 8px 16px), rgba(8, 4, 12, .9); }
.bh-door .label { color: #ff4fd8; }
.bh-door p { margin: 4px 0 0; font-size: 13px; }
.bh-door-ring { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #000 52%, #ff4fd8 56%, transparent 66%); box-shadow: 0 0 22px rgba(255, 79, 216, .45); }

/* CROSS THE HORIZON */
.bh-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bh-tier { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid rgba(79, 227, 255, .12); border-radius: 8px; background: rgba(6, 12, 20, .55); opacity: .6; min-width: 0; }
.bh-tier.got { opacity: 1; border-color: color-mix(in srgb, var(--tc) 50%, transparent); }
.bh-tier.now { box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 30%, transparent); border-color: var(--tc); }
.bh-tier em { font-style: normal; font: 700 9px var(--mono); letter-spacing: .2em; color: var(--mute); }
.bh-tier b { font: 700 16px var(--mono); letter-spacing: .1em; color: var(--tc); }
.bh-rw { display: flex; gap: 8px; align-items: center; min-height: 64px; flex-wrap: wrap; }
.bh-rw svg { width: 60px; height: 60px; }
.ring.lensing { display: inline-block; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, transparent 54%, #fff3d6 57%, #ff8a30 62%, transparent 70%);
  box-shadow: 0 0 14px rgba(255, 138, 48, .6); }
.bh-track { position: relative; height: 40px; margin: 10px 6px 4px; }
.bh-track > i { position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: rgba(79, 227, 255, .1); overflow: hidden; }
.bh-track > i u { display: block; height: 100%; background: linear-gradient(90deg, #ff5a1f, var(--amber), #fff3d6); }
.bh-track > span { position: absolute; top: 2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.bh-track > span::before { content: ""; width: 3px; height: 18px; background: rgba(79, 227, 255, .4); }
.bh-track > span.paid::before { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.bh-track b { font: 600 9px var(--mono); color: var(--mute); margin-top: 2px; }
.bh-track span.paid b { color: var(--amber); }
.bh-feed { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bh-feed label { display: flex; flex-direction: column; gap: 3px; font: 700 9px var(--mono); letter-spacing: .2em; color: var(--holo); }
.bh-feed input { width: 120px; }
.bh-feed small { font: 500 10px var(--mono); color: var(--mute); letter-spacing: 0; }
.bh-feed output { font: 700 18px var(--mono); color: var(--amber); min-width: 110px; }
.bh-board { display: flex; flex-direction: column; gap: 3px; }
.bh-board > div { display: grid; grid-template-columns: 28px 1fr auto 80px; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(79, 227, 255, .06); align-items: center; }
.bh-board > div.bh-me { background: rgba(255, 176, 32, .06); }
.bh-board span { font: 600 11px var(--mono); color: var(--mute); }
.bh-board em { font-style: normal; font: 700 9px var(--mono); letter-spacing: .16em; }
.bh-board strong { font: 700 13px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* TIME DILATION */
.bh-dil p { max-width: 72ch; }
.bh-dil-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 12px 0 8px; }
.bh-dil-row label { display: flex; align-items: center; gap: 8px; font: 700 9px var(--mono); letter-spacing: .2em; color: var(--holo); }
.bh-dil-row select { max-width: 260px; }
.bh-go { font-size: 13px !important; letter-spacing: .16em !important; }
.bh-focus { position: fixed; inset: 0; z-index: 90; background: #000; }
.bh-focus.hidden { display: none; }
.bh-focus canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh-focus-hud { position: absolute; left: 0; right: 0; bottom: max(8vh, 40px); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-inline: 16px; }
.bh-focus-hud .kicker { font: 600 12px var(--mono); letter-spacing: .3em; color: var(--holo); }
.bh-clock { font: 700 clamp(48px, 10vw, 96px) var(--mono); color: var(--amber); letter-spacing: .04em; text-shadow: 0 0 30px rgba(255, 176, 32, .4); font-variant-numeric: tabular-nums; }
.bh-focus-hud p { font-size: 15px; color: var(--text); max-width: 60ch; }

/* REAL BLACK HOLES */
.bh-gw { display: flex; flex-direction: column; gap: 4px; }
.bh-gw a { display: grid; grid-template-columns: 110px 150px 70px 1fr; gap: 10px; padding: 7px 10px; border: 1px solid rgba(79, 227, 255, .1); border-radius: 6px;
  text-decoration: none; color: var(--text); font-size: 12px; align-items: center; }
.bh-gw a:hover { border-color: var(--holo); }
.bh-gw a.retracted { opacity: .5; text-decoration: line-through; }
.bh-gw b { font: 700 12px var(--mono); color: var(--amber); }
.bh-gw span { font: 500 11px var(--mono); color: var(--mute); }
.bh-gw em { font-style: normal; font-size: 12px; color: var(--holo); }
.bh-famous { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bh-famous > div { padding: 10px 12px; border: 1px solid rgba(79, 227, 255, .1); border-radius: 6px; background: rgba(6, 12, 20, .5); }
.bh-famous b { font: 700 13px var(--mono); color: var(--amber); }
.bh-famous em { display: block; font-style: normal; font: 600 9px var(--mono); letter-spacing: .14em; color: var(--holo); margin: 2px 0 4px; }
.bh-famous p { font-size: 12px; margin: 0; color: var(--text); }

/* the horizon-only cosmetics, worn elsewhere */
.np-horizon { color: #fff3d6; text-shadow: 0 0 2px #000, 0 0 7px #ff8a30, 0 0 16px rgba(255, 90, 31, .7); letter-spacing: .04em; }

@media (max-width: 860px) {
  .bh-grid { grid-template-columns: 1fr; }
  .bh-tiers { grid-template-columns: repeat(2, 1fr); }
  .bh-stats { grid-template-columns: repeat(2, 1fr); }
  .bh-gw a { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .bh-hud { padding: 14px; }
  .bh-hud-bot span:first-child { display: none; }
  .bh-read { max-width: 60%; }
  .bh-door { grid-template-columns: 48px 1fr; }
  .bh-door button { grid-column: 1 / -1; }
}
.bh-head .hud-brand { white-space: normal; min-width: 0; flex: 1 1 260px; }
.bh-head .hud-brand .it-sub { display: inline-block; }

/* the hand on the canvas: the popup's close, the growth hint, REPLAY */
.bh-tip { pointer-events: auto; }
.bh-tip .bh-tip-x { position: absolute; top: 4px; right: 4px; padding: 0 6px !important; min-width: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--mute) !important; }
.bh-grows { color: #ffb36a; letter-spacing: .12em; margin-top: 4px; }
.bh-hud-bot .bh-replay { pointer-events: auto; padding: 3px 10px !important; font: 600 10px var(--mono) !important; letter-spacing: .14em !important; margin-right: 8px; }
/* the warp into THE SINGULARITY */
.bh-warp { position: fixed; inset: 0; z-index: 200; background: #000; }
.bh-warp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh-warp-t { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(calc(.9 + var(--k, 0) * .3)); text-align: center; font: 800 clamp(22px, 5vw, 54px) var(--mono);
  letter-spacing: calc(.2em + var(--k, 0) * .6em); color: #fff; opacity: calc(var(--k, 0) * 1.4 - .2);
  text-shadow: -3px 0 rgba(255, 40, 60, .9), 3px 0 rgba(79, 227, 255, .8), 0 0 30px rgba(255, 176, 32, .8); }

.bh-tip.hidden { display: none; }