/* DNA Lab Catalogue (hub/catalogue.js) and its card in the DNA Lab.
   A sibling of the Memory Archive (styles/memory-archive.css), per the user: the same
   native <dialog> at body level, glass frame, type and opal-violet/amber light, so it
   keeps real viewport units outside the Hub room's fitted canvas. Its own addition is the
   specimen chamber: a lens per entry, tinted by kind — amber hazards, teal pathogens,
   crimson bosses — with the in-game clip playing inside. */
.catalogue { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:#e9e4f4; font-family:var(--font-stack,system-ui,sans-serif); }
.catalogue::backdrop { background:rgba(4,6,14,.66); backdrop-filter:blur(5px) saturate(.7); }
.catalogue [hidden] { display:none !important; }
.cg-k-hazard   { --cg-tint:#ffb36b; --cg-deep:#3a2412; }
.cg-k-pathogen { --cg-tint:#6fe0c0; --cg-deep:#0f3330; }
.cg-k-boss     { --cg-tint:#ff7d8c; --cg-deep:#3a1220; }

.cg-frame { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1380px,calc(100vw - 40px)); height:min(880px,calc(100dvh - 40px)); display:flex; flex-direction:column; border:1px solid #b9a6e84d; border-radius:14px; background:linear-gradient(160deg,#141225f2,#0a1220f2 60%,#0b1018f2); box-shadow:0 0 0 1px #00000080,0 30px 80px #000c,inset 0 1px #ffffff10; overflow:hidden; animation:cg-in .32s cubic-bezier(.2,.75,.25,1) both; }
.cg-frame:before { content:''; position:absolute; left:40px; right:40px; top:-1px; height:2px; background:linear-gradient(90deg,transparent,#d9c6ff,#ffd59a,transparent); opacity:.8; pointer-events:none; }
.cg-bar { display:flex; align-items:center; gap:16px; padding:20px 26px 18px; border-bottom:1px solid #b9a6e826; }
.cg-bar h1 { margin:0; font:600 26px/1.1 var(--font-stack,system-ui,sans-serif); letter-spacing:.02em; color:#f1ecfb; }
.cg-biome { padding:4px 12px; border:1px solid #b9a6e840; border-radius:999px; font:500 12px/1.5 var(--font-mono,ui-monospace,monospace); letter-spacing:.12em; text-transform:uppercase; color:#cfc5e6; background:#ffffff06; }
.cg-count { margin-left:auto; font:500 14px var(--font-mono,ui-monospace,monospace); letter-spacing:.08em; color:#cdb98d; text-transform:uppercase; }
.cg-close { width:40px; height:40px; flex:none; border:1px solid #b9a6e84d; border-radius:50%; background:#ffffff08; color:#d8d0ea; font-size:16px; cursor:pointer; }
.cg-close:hover,.cg-close:focus-visible { border-color:#e7d8ff; color:#fff; outline:none; background:#ffffff14; }
.cg-body { flex:1; min-height:0; display:grid; grid-template-columns:clamp(300px,33%,440px) 1fr; }

/* ── Index ── */
.cg-index { overflow-y:auto; padding:6px 18px 20px; border-right:1px solid #b9a6e81f; }
.cg-sub { display:flex; align-items:baseline; gap:10px; margin:22px 0 12px; font:600 13px var(--font-mono,ui-monospace,monospace); letter-spacing:.14em; text-transform:uppercase; color:#a799cf; }
.cg-sub span { color:#cdb98d; letter-spacing:.06em; }
.cg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.cg-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:12px 6px 10px; border:1px solid #b9a6e81a; border-radius:12px; background:linear-gradient(180deg,#ffffff07,#ffffff02); color:#cfc7e2; cursor:pointer; font:inherit; transition:border-color .15s,background .15s,transform .15s; }
.cg-tile:hover,.cg-tile:focus-visible { border-color:#b9a6e85c; background:#ffffff0c; outline:none; }
.cg-tile.selected { background:linear-gradient(160deg,#2a2347,#1a2236); border-color:#c9b6f599; color:#f4efff; box-shadow:0 0 0 1px #c9b6f533,0 8px 22px #0006; }
.cg-lens { position:relative; width:72px; height:72px; flex:none; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--cg-tint) 22%,#16182a) 0%,#0c1222 62%,#070b14 100%); box-shadow:inset 0 0 0 1px #ffffff12,inset 0 0 16px #000b,0 0 0 1px color-mix(in srgb,var(--cg-tint) 26%,transparent); }
.cg-lens img { width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cg-tint) 45%,transparent)); }
.cg-tile.is-unknown .cg-lens { background:radial-gradient(circle at 50% 42%,#1a1730 0%,#0b0f1c 64%,#06080f 100%); box-shadow:inset 0 0 0 1px #ffffff0c,inset 0 0 16px #000c,0 0 0 1px #b9a6e826; }
.cg-tile.is-unknown .cg-lens img { filter:brightness(0) drop-shadow(0 0 1px #c9b6f580) drop-shadow(0 0 7px #8f7cc244); opacity:.9; }
.cg-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; min-height:2.5em; font:500 12.5px/1.25 var(--font-stack,system-ui,sans-serif); text-align:center; }
.cg-tile.is-new:after { content:''; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:#ffd59a; box-shadow:0 0 0 3px #ffd59a26,0 0 10px #ffc66f; animation:cg-pulse 1.8s ease-in-out infinite; }
.cg-mark { position:absolute; top:9px; left:9px; width:8px; height:8px; transform:rotate(45deg); border-radius:2px; background:linear-gradient(135deg,#fff3d6,var(--cg-tint)); box-shadow:0 0 8px color-mix(in srgb,var(--cg-tint) 70%,transparent); }
.cg-redact { display:inline-block; height:.72em; max-width:100%; vertical-align:middle; border-radius:3px; background:repeating-linear-gradient(90deg,#9d8fbf38 0 6px,#9d8fbf22 6px 9px); }

/* ── Sheet ── */
.cg-sheet { overflow-y:auto; padding:30px 40px 36px; min-width:0; }
.cg-head { display:grid; grid-template-columns:240px minmax(0,1fr); gap:30px; align-items:center; }
.cg-chamber { position:relative; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--cg-tint) 30%,#181a2e) 0%,color-mix(in srgb,var(--cg-deep) 70%,#0b1120) 46%,#070b14 78%); box-shadow:inset 0 0 0 1px #ffffff14,inset 0 0 50px #000c,0 0 0 1px color-mix(in srgb,var(--cg-tint) 30%,transparent),0 0 0 7px #ffffff05,0 22px 60px #000a; overflow:hidden; }
.cg-chamber:after { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse 60% 38% at 32% 18%,#ffffff1f,transparent 70%); pointer-events:none; }
.cg-ring { position:absolute; inset:9px; border-radius:50%; background:repeating-conic-gradient(color-mix(in srgb,var(--cg-tint) 55%,transparent) 0deg 1.2deg,transparent 1.2deg 9deg); -webkit-mask:radial-gradient(circle,transparent 0 92%,#000 92.5% 97%,transparent 97.5%); mask:radial-gradient(circle,transparent 0 92%,#000 92.5% 97%,transparent 97.5%); opacity:.55; animation:cg-spin 90s linear infinite; pointer-events:none; }
.cg-still { position:absolute; left:50%; top:50%; width:66%; height:66%; object-fit:contain; transform:translate(-50%,-50%); filter:drop-shadow(0 0 14px color-mix(in srgb,var(--cg-tint) 40%,transparent)); animation:cg-float 6s ease-in-out infinite; transition:opacity .25s; }
.cg-clip { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 0 14px color-mix(in srgb,var(--cg-tint) 34%,transparent)); }
.cg-chamber.is-playing .cg-still { opacity:0; }
.cg-chamber.is-unknown { background:radial-gradient(circle at 50% 44%,#1b1832 0%,#0c1020 50%,#06080f 80%); box-shadow:inset 0 0 0 1px #ffffff0e,inset 0 0 50px #000d,0 0 0 1px #b9a6e826,0 0 0 7px #ffffff04,0 22px 60px #000a; }
.cg-chamber.is-unknown .cg-ring { background:repeating-conic-gradient(#9d8fbf66 0deg 1.2deg,transparent 1.2deg 9deg); opacity:.4; }
.cg-chamber.is-unknown .cg-still { filter:brightness(0) drop-shadow(0 0 1px #c9b6f599) drop-shadow(0 0 16px #8f7cc255); }
.cg-title { min-width:0; }
.cg-kicker { display:block; margin-bottom:8px; font:600 12px/1.4 var(--font-mono,ui-monospace,monospace); letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb,var(--cg-tint,#cdb98d) 82%,#ffffff); }
.cg-title h2 { margin:0; font:600 34px/1.12 var(--font-stack,system-ui,sans-serif); color:#f6f1ff; }
.cg-org { display:block; margin-top:8px; font:italic 400 18px/1.4 var(--font-stack,system-ui,sans-serif); color:#cfc5e6; }
.cg-src { display:block; margin-top:8px; font:500 12px/1.5 var(--font-mono,ui-monospace,monospace); letter-spacing:.14em; text-transform:uppercase; color:#9fa6c4; }
.cg-bio { margin:26px 0 6px; max-width:74ch; font:400 17px/1.62 var(--font-stack,system-ui,sans-serif); color:#ddd6ee; }
.cg-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.cg-stat { min-width:0; padding:12px 14px 13px; border:1px solid #b9a6e82e; border-radius:10px; background:linear-gradient(180deg,#ffffff09,#ffffff02); }
.cg-stat .cg-k { display:block; font:600 11px/1.4 var(--font-mono,ui-monospace,monospace); letter-spacing:.14em; text-transform:uppercase; color:#a799cf; }
.cg-stat b { display:block; margin-top:4px; font:600 27px/1.15 var(--font-stack,system-ui,sans-serif); font-variant-numeric:tabular-nums; color:#f6f1ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cg-stat b i, .cg-rows b i { font-style:normal; font-size:.62em; color:#cfc5e6; margin-left:1px; }
.cg-stat small { display:block; margin-top:3px; font:500 12px/1.35 var(--font-mono,ui-monospace,monospace); letter-spacing:.04em; color:#cdb98d; }
.cg-rows { list-style:none; margin:0; padding:0; }
.cg-rows li { display:grid; grid-template-columns:minmax(150px,210px) minmax(78px,auto) minmax(0,1fr); gap:18px; align-items:baseline; padding:8px 2px; border-bottom:1px solid #b9a6e814; }
.cg-rows li:last-child { border-bottom:0; }
.cg-rows .cg-k { font:500 12px/1.4 var(--font-mono,ui-monospace,monospace); letter-spacing:.12em; text-transform:uppercase; color:#a799cf; }
.cg-rows .cg-k.cg-n { font-size:13px; letter-spacing:.04em; text-transform:none; color:#bdb5d6; }
.cg-rows b { font:600 19px/1.3 var(--font-stack,system-ui,sans-serif); font-variant-numeric:tabular-nums; color:#f1ecfb; white-space:nowrap; }
.cg-rows small { font:400 14px/1.4 var(--font-stack,system-ui,sans-serif); color:#a9a3bf; }
.cg-ladder { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; }
.cg-ladder li { display:flex; justify-content:space-between; gap:12px; padding:6px 2px; border-bottom:1px solid #b9a6e814; font:500 13px/1.4 var(--font-mono,ui-monospace,monospace); color:#bdb5d6; }
.cg-ladder b { font-weight:600; color:#ffe3b3; font-variant-numeric:tabular-nums; }

/* The locked half: ghosts where the numbers will appear, and the price. */
.cg-ghosts .cg-stat { border-style:dashed; border-color:#9d8fbf33; background:transparent; }
.cg-ghosts .cg-stat .cg-redact:first-child { width:52%; }
.cg-ghosts .cg-stat b .cg-redact { width:70%; height:.8em; }
.cg-seq-row { display:flex; align-items:center; gap:18px; margin-top:18px; }
.cg-seq { display:inline-flex; align-items:center; gap:12px; min-height:50px; padding:10px 20px 10px 14px; border:1px solid #ffd59aa6; border-radius:10px; background:linear-gradient(118deg,#4a3a62,#2a2a48 70%); color:#fff4dc; font:600 17px var(--font-stack,system-ui,sans-serif); cursor:pointer; box-shadow:inset 0 1px #fff3,0 4px 14px #0007; }
.cg-seq b { padding-left:12px; border-left:1px solid #ffd59a55; font:600 17px var(--font-mono,ui-monospace,monospace); color:#ffe3b3; }
.cg-seq:hover:not(:disabled),.cg-seq:focus-visible { border-color:#ffe7bd; outline:none; box-shadow:inset 0 1px #fff3,0 0 22px #ffc66f33,0 4px 14px #0007; }
.cg-seq:disabled { cursor:default; opacity:.55; border-color:#9d8fbf66; background:linear-gradient(118deg,#2b2640,#1c2033 70%); color:#cfc7e2; }
.cg-seq-icon { display:grid; place-items:center; width:30px; height:30px; }
.cg-seq-icon img,.cg-atcg-img { width:30px; height:30px; object-fit:contain; }
.cg-held { font:500 13px var(--font-mono,ui-monospace,monospace); letter-spacing:.1em; text-transform:uppercase; color:#9fa6c4; }

/* Sequencing reveal: a scan line passes and the data settles in under it. */
.cg-data { position:relative; }
.cg-data.is-revealing > * { animation:cg-settle .6s cubic-bezier(.2,.75,.25,1) both; }
.cg-data.is-revealing > *:nth-child(2) { animation-delay:.08s; }
.cg-data.is-revealing > *:nth-child(3) { animation-delay:.14s; }
.cg-data.is-revealing > *:nth-child(n+4) { animation-delay:.2s; }
.cg-data.is-revealing:after { content:''; position:absolute; left:-8px; right:-8px; top:0; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,#ffd59a,#d9c6ff,transparent); box-shadow:0 0 18px #ffc66f88; animation:cg-scan .9s ease-out both; pointer-events:none; }

/* ── The card in the DNA Lab's left column ── */
#screen-dnalab .dna-cat-entry { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:14px; width:100%; min-height:72px; margin-top:2px; padding:10px 16px 10px 12px; border:1px solid #b9a6e8a6; border-radius:12px; background:linear-gradient(118deg,#352d52,#1f2a44 65%,#14222f); box-shadow:inset 0 1px #f0e6ff38,inset 0 -3px #020c1166,0 5px 14px #0005; color:#f2edfb; text-align:left; cursor:pointer; font:inherit; transition:border-color .16s,box-shadow .16s,background .16s; }
#screen-dnalab .dna-cat-entry:before { content:''; position:absolute; left:18px; right:18px; top:-1px; height:2px; background:linear-gradient(90deg,transparent,#d9c6ff,#ffd59a,transparent); opacity:.9; pointer-events:none; }
#screen-dnalab .dna-cat-entry:hover,#screen-dnalab .dna-cat-entry:focus-visible { background:linear-gradient(118deg,#40375f,#26324f 65%,#182a38); border-color:#e4d6ff; outline:none; box-shadow:inset 0 1px #f0e6ff45,inset 0 -3px #020c1166,0 0 22px #c9b6f526,0 5px 14px #0005; }
#screen-dnalab .dna-cat-seal { display:grid; place-items:center; width:48px; height:48px; border:1px solid #c9b6f580; border-radius:50%; background:radial-gradient(circle,#6a4f9a40,#0d1628 76%); }
#screen-dnalab .dna-cat-seal img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 0 6px #c9a8ff55); }
#screen-dnalab .dna-cat-copy strong { display:block; font:600 16px/1.2 var(--font-stack,system-ui,sans-serif); letter-spacing:.01em; }
#screen-dnalab .dna-cat-copy small { display:block; margin-top:4px; font:500 12px var(--font-mono,ui-monospace,monospace); letter-spacing:.1em; color:#ffe3b3; }
#screen-dnalab .dna-cat-new { position:absolute; top:9px; right:10px; width:9px; height:9px; border-radius:50%; background:#ffd59a; box-shadow:0 0 0 3px #ffd59a26,0 0 10px #ffc66f; animation:cg-pulse 1.8s ease-in-out infinite; }

@keyframes cg-in { from { opacity:0; transform:translate(-50%,-48%) scale(.985); } to { opacity:1; transform:translate(-50%,-50%); } }
@keyframes cg-spin { to { transform:rotate(360deg); } }
@keyframes cg-float { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,calc(-50% - 5px)); } }
@keyframes cg-pulse { 50% { box-shadow:0 0 0 6px #ffd59a12,0 0 16px #ffc66f; } }
@keyframes cg-settle { from { opacity:0; transform:translateY(6px); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
@keyframes cg-scan { from { top:0; opacity:1; } 85% { opacity:1; } to { top:100%; opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .cg-frame,.cg-ring,.cg-still,.cg-tile.is-new:after,#screen-dnalab .dna-cat-new,.cg-data.is-revealing > *,.cg-data.is-revealing:after { animation:none; }
}
@media (max-width: 1180px) {
  .cg-head { grid-template-columns:190px minmax(0,1fr); gap:22px; }
  .cg-chamber { width:190px; height:190px; }
  .cg-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cg-sheet { padding:24px 26px 30px; }
  .cg-rows li { grid-template-columns:minmax(120px,170px) minmax(70px,auto) minmax(0,1fr); gap:12px; }
}
@media (max-width: 860px) {
  .cg-body { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .cg-index { max-height:38%; border-right:0; border-bottom:1px solid #b9a6e81f; }
  .cg-count { display:none; }
  .cg-ladder { grid-template-columns:1fr; }
}