@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:500; font-display:swap; src:url("../../assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("../../assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap; src:url("../../assets/fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family:"Orbitron"; font-style:normal; font-weight:700; font-display:swap; src:url("../../assets/fonts/orbitron-700.woff2") format("woff2"); }
@font-face { font-family:"Michroma"; font-style:normal; font-weight:400; font-display:swap; src:url("../../assets/fonts/michroma-regular.ttf") format("truetype"); }

:root {
  --pf-ui-font:"Michroma","Rajdhani",system-ui,sans-serif;
  --pf-card-font:"Barlow Condensed",Arial,sans-serif;
  --pf-void:#03080c;
  --pf-night-steel:#061017;
  --pf-panel:#08131d;
  --pf-panel-raised:#0d1b25;
  --pf-steel-edge:#243b4a;
  --pf-ink:#dce9ed;
  --pf-muted:#8fa8b5;
  --pf-blue:#1595ff;
  --pf-blue-bright:#5cc1ff;
  --pf-green:#48c76c;
  --pf-red:#ec4c44;
  --pf-purple:#bb55da;
  --pf-amber:#e5b14a;
  --pf-gold:#f0c66c;
  --pf-grey:#8b98a1;
}

* { box-sizing:border-box; }
html { min-height:100%; background:var(--pf-void); }
body {
  min-height:100vh;
  margin:0;
  color:var(--pf-ink);
  background:#010407;
  font:400 14px/1.48 var(--pf-ui-font);
}

button,
a,
input,
select { font:inherit; }

.archive-background {
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,#010407e6 0,#010407a8 34%,#01040744 70%,#010407b8 100%),
    linear-gradient(180deg,#01040740 0,transparent 38%,#010407d6 100%),
    url("../../assets/cards/art/blue/fusion-collector-v1.png") center center / cover no-repeat;
  filter:saturate(1.08) contrast(1.07) brightness(.92);
}

.archive-atmosphere {
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 26% 22%,#1595ff26 0,transparent 24rem),
    radial-gradient(circle at 74% 45%,#e5b14a1f 0,transparent 26rem),
    linear-gradient(180deg,#01040712,#01040780);
}

.archive-header,
.archive-shell {
  position:relative;
  z-index:2;
}

.metal-frame {
  border:1px solid #47606d;
  background:
    linear-gradient(90deg,#1595ff26 0 1px,transparent 1px calc(100% - 1px),#e5b14a1f calc(100% - 1px)),
    linear-gradient(135deg,#ffffff0d,#ffffff00 18%),
    linear-gradient(145deg,#0d1b25d9,#08131dcc 58%,#050d13bd);
  box-shadow:
    inset 0 1px #ffffff1f,
    inset 0 0 0 1px #02080c,
    inset 0 0 0 2px #243b4a66,
    0 0 0 1px #02070c,
    0 0 22px #1595ff18,
    0 15px 28px #000a;
}

.archive-header {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  min-height:76px;
  margin:18px;
  padding:12px 16px;
  border-radius:8px;
}

.archive-header .system-label {
  color:var(--pf-blue);
  font:400 .68rem/1.2 var(--pf-ui-font);
  letter-spacing:.08em;
}

.archive-header h1 {
  font-size:1.72rem;
  color:#f5f2e9;
  text-shadow:0 2px #000,0 0 10px #1595ff66;
}

.system-label {
  margin:0 0 4px;
  color:var(--pf-blue-bright);
  font:400 .7rem/1.2 var(--pf-ui-font);
  letter-spacing:.09em;
  text-transform:uppercase;
}

h1,
h2 {
  margin:0;
  color:#f1e4d6;
  font:400 2rem/1.12 var(--pf-ui-font);
  letter-spacing:.055em;
  text-transform:uppercase;
  text-shadow:0 2px #000,0 0 14px #1595ff4d;
}

h2 { font-size:1.75rem; }

.header-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.menu-exit,
.identity-tab {
  display:inline-grid;
  min-height:36px;
  place-items:center;
  padding:7px 12px;
  border:1px solid #315568;
  border-radius:5px;
  color:var(--pf-ink);
  background:linear-gradient(180deg,#102a38,#07131b);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
}

.menu-exit:hover,
.identity-tab:hover,
.identity-tab.active {
  border-color:var(--pf-blue-bright);
  background:linear-gradient(180deg,#14364a,#0b1d29);
  box-shadow:inset 0 1px #ffffff1c,0 0 10px #1595ff3d,0 2px 4px #0008;
}

.menu-exit:focus-visible,
.identity-tab:focus-visible,
.archive-card:focus-visible {
  outline:2px solid var(--pf-blue-bright);
  outline-offset:3px;
}

.archive-shell {
  display:grid;
  gap:18px;
  padding:0 18px 28px;
}

.archive-overview {
  display:grid;
  grid-template-columns:minmax(220px,auto) 1fr;
  gap:18px;
  align-items:center;
  padding:16px 18px;
  border-radius:8px;
}

.identity-tabs {
  display:grid;
  grid-template-columns:repeat(7,minmax(84px,1fr));
  gap:8px;
  justify-content:flex-end;
}

.identity-tab.active {
  color:#fff;
}

.card-groups {
  display:grid;
  gap:18px;
}

.card-group {
  display:grid;
  gap:12px;
}

.group-heading {
  display:flex;
  align-items:center;
  gap:10px;
}

.group-light {
  width:12px;
  height:36px;
  background:var(--identity-color);
  box-shadow:0 0 14px var(--identity-color);
}

.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}

.archive-card {
  position:relative;
  min-height:250px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--identity-color) 52%,#243b4a);
  border-radius:7px;
  background:
    linear-gradient(180deg,#0d1b25d9,#050d13f0),
    radial-gradient(circle at 50% 0,var(--identity-color),transparent 9rem);
  box-shadow:inset 0 0 0 1px #02080c,0 10px 18px #0008;
  cursor:zoom-in;
  transition:border-color 140ms ease,box-shadow 140ms ease,transform 120ms ease;
}

.archive-card:hover,
.archive-card:focus-visible {
  border-color:color-mix(in srgb,var(--identity-color) 82%,#f1e4d6);
  box-shadow:inset 0 0 0 1px #02080c,0 0 18px color-mix(in srgb,var(--identity-color) 48%,transparent),0 12px 20px #000a;
  transform:translateY(-2px);
}

.archive-card img {
  width:100%;
  height:122px;
  display:block;
  object-fit:cover;
  filter:saturate(.95) contrast(1.08) brightness(.8);
}

.card-empty-art {
  height:122px;
  background:
    radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--identity-color) 42%,transparent) 0,transparent 38%),
    linear-gradient(145deg,#102838,#050d13);
}

.card-body {
  display:grid;
  gap:8px;
  padding:12px;
}

.card-title-row {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:start;
}

.card-title-row h3 {
  margin:0;
  color:#f4f8fb;
  font:400 1.1rem/1.22 var(--pf-ui-font);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.card-cost {
  min-width:32px;
  padding:3px 7px;
  border:1px solid #9fb7c4;
  border-radius:4px;
  color:#061017;
  background:#e9dfcd;
  text-align:center;
  font-weight:800;
}

.card-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.card-meta span {
  padding:3px 7px;
  border:1px solid #294758;
  border-radius:4px;
  color:#bed2da;
  background:#061017;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.78rem;
}

.effect-text {
  margin:0;
  color:#d8e7ed;
  font-size:.95rem;
}

.card-inspector {
  width:min(1180px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  padding:18px;
  border-color:#5e7885;
  color:var(--pf-ink);
  background:
    radial-gradient(circle at 24% 0,#1595ff24 0,transparent 20rem),
    linear-gradient(145deg,#102a38,#081722 58%,#050d13);
  box-shadow:inset 0 1px #ffffff22,inset 0 0 0 1px #02080c,0 0 28px #1595ff4d,0 18px 28px #000d;
}

.card-inspector::backdrop {
  background:#010407cc;
}

.close-inspector {
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  width:36px;
  min-height:36px;
  padding:0;
  border:1px solid #315568;
  border-radius:5px;
  color:var(--pf-ink);
  background:linear-gradient(180deg,#102a38,#07131b);
  cursor:pointer;
}

.inspector-layout {
  display:grid;
  grid-template-columns:minmax(340px,520px) minmax(320px,1fr);
  gap:28px;
  align-items:center;
}

.inspector-card-frame {
  aspect-ratio:63/88;
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--identity-color) 72%,#e6dac4);
  background:#05090d;
  box-shadow:0 0 0 1px #02070c,0 0 34px color-mix(in srgb,var(--identity-color) 58%,transparent),0 26px 42px #000e;
}

.inspector-card-frame img,
.inspector-card-frame .card-empty-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.inspector-copy h2 {
  margin:6px 42px 10px 0;
  font-size:3rem;
}

.inspector-details {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:16px 0 0;
}

.inspector-details div {
  min-width:0;
  padding:9px 10px;
  border:1px solid #315568;
  background:#061017d9;
}

.inspector-details dt {
  color:var(--pf-blue-bright);
  font:400 .62rem/1.2 var(--pf-ui-font);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.inspector-details dd {
  margin:5px 0 0;
  color:#f2f7f8;
  overflow-wrap:anywhere;
  font-size:.95rem;
}

@media (max-width:760px) {
  .archive-header,
  .archive-overview {
    grid-template-columns:1fr;
    display:grid;
  }
  .header-actions,
  .identity-tabs {
    justify-content:start;
  }
  h1 { font-size:2rem; }
  .identity-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inspector-layout { grid-template-columns:1fr; }
  .inspector-card-frame { width:min(420px,100%); margin:auto; }
}