/* =========================================================================
   HUB – Archive Core (CRT / Legacy) – CSS — Patched
   - Calm CRT overlays (scanlines + vignette + faint noise)
   - Absolute preview plaques (cards)
   - Bottom HUD + controls bar
   - Subtle card scanlines + hover states, a11y focus
   - Cleaned duplicate rules; tuned performance hints
   ========================================================================= */

/* ---------- Theme ---------- */
:root{
  --bg: #050b07;
  --fg: #00ff7b;               /* phosphor green */
  --fg-dim: #063416;
  --fg-weak: rgba(0,255,123,.65);

  --ink: #e6ffe6;              /* light mono text (for hints/bars) */
  --border: rgba(0,255,123,.28);
  --border-strong: rgba(0,255,123,.45);
  --panel: rgba(0,255,123,.06);
  --panel-strong: rgba(0,255,123,.10);

  --shadow-inset: 0 0 12px rgba(0,255,123,.10) inset;
  --shadow-out: 0 0 18px rgba(0,255,123,.10);

  --radius: 2px;

  --hud-bg: rgba(0,0,0,.55);
  --hud-border: rgba(0,255,123,.28);

  --scanlines-opacity: .50;    /* body .crt::before */
  --vignette-opacity: .75;     /* body .crt::after */
  --noise-opacity: .06;        /* #gridFX */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
}

/* Optional: web font (safe to remove if self-hosting) */
@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Share Tech Mono"), local("ShareTechMono");
}

/* ---------- CRT overlays on the whole page ---------- */
body.crt::before{
  content:"";
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px
  );
  mix-blend-mode: multiply;
  opacity: var(--scanlines-opacity);
}
body.crt::after{
  content:"";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(0,255,123,.05), rgba(0,0,0,.65) 66%, rgba(0,0,0,.88) 100%),
    radial-gradient(40% 25% at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
  opacity: var(--vignette-opacity);
}

/* Faint animated noise grid (binds the scene together) */
#gridFX{
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: var(--noise-opacity);
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,255,123,.03) 0 1px, transparent 1px 3px);
  animation: gridSweep 9s linear infinite;
}
@keyframes gridSweep {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 240px, 260px 0; }
}

/* ---------- Hub layout ---------- */
#hub{
  position: relative;
  height: 100vh;
  width: 100vw;
}

/* Central stage: canvas (grid + orb) + preview layer (cards) */
#center{
  position: relative;
  width: 100%;
  height: 100%;
}
#stage{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4; /* grid drawn on canvas; this sits under preview */
  display: block;
  cursor: default;
}
#preview{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* re-enable on .card so only plaques get events */
}

/* ---------- Preview cards ---------- */
.shard{
  position: absolute;
  inset: 0;
  pointer-events: none;
  content-visibility: auto;
  contain: layout paint;
  z-index: 3;
}
.ghost-shard{
  position: absolute;
  pointer-events: none;
  z-index: 1;
  contain: layout paint;
  content-visibility: auto;
}
.ghost-panel{
  position: absolute;
  inset: 0;
  padding: 8px 10px;
  border: 1px solid rgba(0,255,123,.18);
  background: rgba(0,12,7,.45);
  color: var(--fg-weak);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 9px;
  transform-origin: center;
  transform: translate3d(0,0,0) scale(var(--ghost-scale,.55));
  opacity: var(--ghost-alpha,.32);
  filter: blur(.35px);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  mix-blend-mode: screen;
}
.ghost-title{
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghost-note{
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.35;
  white-space: pre-line;
  max-height: calc(1.35em * 2.2);
  overflow: hidden;
  opacity: .8;
}
.ghost-note.empty{ opacity: .45; }
.ghost-shard::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(0,255,123,.08);
  mix-blend-mode: soft-light;
}
.ghost-line{
  position:absolute;
  pointer-events:none;
  overflow:visible;
  filter: blur(.15px);
  opacity:.38;
}
.ghost-line path{
  stroke: rgba(0,255,123,.35);
  stroke-width: .8px;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
  mix-blend-mode: screen;
}
.shard-panel{
  position: absolute;
  pointer-events: auto;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: rgba(0,15,9,.88);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  color: var(--fg);
  min-width: 180px;
  transform-origin: center;
  transform: translate3d(0,0,0) scale(var(--card-scale,1));
  filter: blur(var(--card-blur,0));
  opacity: var(--card-alpha,1);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease, border-color .2s ease, box-shadow .2s ease;
  contain: paint; will-change: transform;
}
.shard-panel::before{
  /* subtle scanlines inside cards */
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.25;
  background: repeating-linear-gradient(to bottom, rgba(0,255,123,.03) 0 1px, transparent 1px 2px);
  mix-blend-mode: overlay;
}
.shard.loading .shard-panel,
.shard.seeking-soft .shard-panel{
  opacity: .85;
  filter: blur(var(--card-blur,0)) saturate(.75);
}
body.fast .shard-panel{ transition: none; }
.shard-panel[data-href]{ cursor: pointer; }
.shard-panel:focus-visible{
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}
.shard-panel:hover{
  border-color: var(--border-strong);
  box-shadow: 0 14px 34px rgba(0,0,0,.65), 0 0 0 1px rgba(0,255,123,.06) inset;
}
.shard-panel[data-size="l"]{ font-size: 12px; letter-spacing: .08em; }
.shard-panel[data-size="m"]{ font-size: 11px; letter-spacing: .05em; }
.shard-panel[data-size="s"]{
  font-size: 10px;
  letter-spacing: .03em;
  padding: 10px 12px;
  gap: 4px;
}
.shard-panel[data-size="s"] .shard-thumb{ display: none; }
.shard-panel[data-size="s"] .shard-title{ font-size: 10px; letter-spacing: .18em; }
.shard-panel[data-size="s"] .shard-note{
  font-size: 10px;
  -webkit-line-clamp: 2;
}
.shard-panel[data-layout="land"]{
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  grid-template-areas: "media body";
}
.shard-panel[data-layout="port"]{
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  grid-template-areas: "media body";
}
.shard-panel.text-only{
  grid-template-columns: 1fr;
  grid-template-areas: "body";
  padding: 16px 18px;
}
.shard-thumb{
  grid-area: media;
  border: 1px solid rgba(0,255,123,.22);
  background:
    linear-gradient(135deg, rgba(0,255,123,.08), rgba(0,20,10,.35));
  min-height: 110px;
  overflow: hidden;
  position: relative;
}
.shard-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  filter: grayscale(100%) contrast(130%) brightness(90%);
}
/* Make hero media more impactful: cover for size-l */
.shard-panel[data-size="l"] .shard-thumb img{ object-fit: contain; }
/* For portrait heroes, give media a narrower column */
.shard-panel[data-size="l"][data-layout="port"]{
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
}
.shard-panel.text-only .shard-thumb{ display: none; }
.shard-body{
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.shard-title{
  font-size: 11px;
  color: var(--ink);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.shard-note{
  font-size: 11px;
  color: var(--fg-weak);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: pre-line;
}
.shard-note.empty{ opacity: .5; }
.shard-line{
  position: absolute;
  pointer-events: none;
  overflow: visible;
  contain: paint;
}
.shard-line path{
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
  stroke: var(--border-strong);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.shard.loading .shard-line path.main,
.shard.seeking-soft .shard-line path.main{
  stroke-dasharray: 8 18;
  animation: shardSeek 1.4s linear infinite;
  opacity: .55;
}
.shard-line.charge { filter: drop-shadow(0 0 6px rgba(0,255,160,.18)); }
.shard-line.charge path.main{ stroke-dasharray: 14 18; animation: shardCharge 1.15s linear 1; }

/* Comet carrier: tiny bright dot riding the connector */
.shard-line .comet{
  stroke: rgba(0,255,200,.95);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 0 var(--plen, 240px);
  filter: drop-shadow(0 0 6px rgba(0,255,200,.35)) drop-shadow(0 0 10px rgba(0,255,200,.2));
}
.shard-line .comet.comet-run{ animation: shardComet .95s linear 1; }

@keyframes shardCharge{
  from{ stroke-dashoffset: 0; }
  to{   stroke-dashoffset: -240px; }
}

@keyframes shardSeek{
  from{ stroke-dashoffset: 0; }
  to{   stroke-dashoffset: 120px; }
}

@keyframes shardComet{
  from{ stroke-dashoffset: 0; }
  to{   stroke-dashoffset: calc(-1 * var(--plen, 240px)); }
}
.shard-pin{
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,255,180,.95);
  box-shadow: 0 0 8px rgba(0,255,180,.7), 0 0 18px rgba(0,255,180,.4);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.shard-pin.pulse { animation: shardPin 0.65s ease-out 1; }

@keyframes shardPin{
  0%{ transform: translate(-50%, -50%) scale(0.7); box-shadow: 0 0 2px rgba(0,255,180,.6), 0 0 6px rgba(0,255,180,.3); opacity: .85; }
  60%{ transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 12px rgba(0,255,180,.9), 0 0 24px rgba(0,255,180,.6); opacity: 1; }
  100%{ transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(0,255,180,.7), 0 0 18px rgba(0,255,180,.4); opacity: 1; }
}

/* Corner nibs: subtle retro ticks at panel corners */
.shard-panel::after{
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  opacity: .35;
  background:
    linear-gradient(var(--border-strong),var(--border-strong)) top    left  / 12px 1px no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) top    left  / 1px  10px no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) top    right / 12px 1px no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) top    right / 1px  10px no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) bottom left  / 12px 1px no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) bottom left  / 1px  10px no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) bottom right / 1px  10px no-repeat;
}

/* ---------- Controls (toolbar) ---------- */
#controls{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  contain: layout paint;
  will-change: transform;
}
#controls .bar{
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: var(--hud-bg);
  border: 1px solid var(--hud-border);
  border-radius: var(--radius);
  pointer-events: auto;
}
#controls .bar button{
  appearance: none;
  border: 1px solid var(--hud-border);
  background: transparent;
  color: var(--ink);
  font: inherit;
  letter-spacing: .04em;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color .15s ease, color .15s ease;
}
#controls .bar button:hover{
  color: var(--fg);
  border-color: var(--border-strong);
}
#controls .bar button.active{
  border-color: var(--border-strong);
  color: var(--fg);
}
#controls .bar button:focus-visible{
  outline: 2px solid var(--border-strong);
  outline-offset: 1px;
}
#controls .hint{
  font-size: 12px;
  color: var(--fg-weak);
  letter-spacing: .08em;
  pointer-events: none;
}

/* ---------- Accessibility / motion ---------- */
@media (prefers-reduced-motion: reduce){
  #gridFX { animation: none !important; }
  body.crt::before, body.crt::after { animation: none !important; }
  * { transition: none !important; }
  .shard-line.charge path.main,
  .shard-pin.pulse,
  .shard-line .comet.comet-run,
  .shard.loading .shard-line path.main,
  .shard.seeking-soft .shard-line path.main{ animation: none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 880px){
  #controls{ bottom: 14px; }
  .shard-panel{ padding: 12px 12px; }
  .shard-thumb{ min-height: 96px; }
}

/* ---------- Performance aids ---------- */
#preview { contain: layout paint size; will-change: transform; }
.shard-line path{ vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; }

/* Hide the screen-blended grid during interactions for faster paints */
body.fast #gridFX { display: none; }

/* Pause noise sweep while interacting */
body.interacting #gridFX{ animation-play-state: paused; }