@font-face{font-family:Lexend;src:url("../fonts/card-collection/lexend.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/card-collection/jetbrains-mono.woff2") format("woff2");font-style:normal;font-weight:100 800;font-display:swap;}

/* Layout: filter bar over a responsive grid; overlay = card stage in the middle,
   keyword glossary + stats left, name + effect underneath (game UI reference). */
#hyve-cards, .hc-overlay[data-hc-owner] {
  --hc-bg: #0a111d;
  --hc-panel: #0f1928;
  --hc-line: #1e2b3e;
  --hc-fg: #e9eef6;
  --hc-muted: #8494aa;
  --hc-green: #28ff9c;
  --hc-blue: #2f8bff;
  --hc-purple: #6a3df2;
  --hc-red: #ff3d5e;
  --hc-display: "Lexend", "Segoe UI", system-ui, sans-serif;
  --hc-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
  font-family: var(--hc-display);
  color: var(--hc-fg);
  box-sizing: border-box;
}
#hyve-cards *, .hc-overlay[data-hc-owner] * { box-sizing: border-box; }

/* ---------- Collection ---------- */
#hyve-cards {
  background: var(--hc-bg);
  padding-block: clamp(40px, 7vw, 88px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 28px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-eyebrow { font: 600 11px/1 var(--hc-mono); letter-spacing: .28em; color: var(--hc-green); text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--hc-green); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-title { margin: 12px 0 0; font: 800 clamp(34px, 5vw, 56px)/.95 var(--hc-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-count { font: 400 13px/1.4 var(--hc-mono); color: var(--hc-muted); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-count b { color: var(--hc-fg); font-weight: 600; }

:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px; background: var(--hc-panel); border: 1px solid var(--hc-line); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-bar-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-bar-label { font: 600 10px/1 var(--hc-mono); letter-spacing: .2em; color: var(--hc-muted); text-transform: uppercase; margin-right: 4px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-chip {
  appearance: none; border: 1px solid var(--hc-line); background: transparent; color: var(--hc-fg);
  font: 600 13px/1 var(--hc-mono); min-width: 34px; height: 34px; padding: 0 10px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background .15s, color .15s, border-color .15s;
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-chip:hover { border-color: var(--hc-green); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-chip[aria-pressed="true"] { background: var(--hc-green); color: #04140c; border-color: var(--hc-green); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-chip.is-cost[aria-pressed="false"] { color: #9fc6ff; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-search { flex: 1 1 200px; min-width: 0; height: 34px; background: var(--hc-bg); border: 1px solid var(--hc-line); color: var(--hc-fg); font: 400 13px var(--hc-mono); padding: 0 12px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-search::placeholder { color: var(--hc-muted); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-select { height: 34px; background: var(--hc-bg); border: 1px solid var(--hc-line); color: var(--hc-fg); font: 400 13px var(--hc-mono); padding: 0 8px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-chip:focus-visible, :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-search:focus-visible, :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-select:focus-visible, :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile:focus-visible, :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-btn:focus-visible { outline: 2px solid var(--hc-green); outline-offset: 2px; }

:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr)); gap: clamp(14px, 2vw, 26px); perspective: 900px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile { appearance: none; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; display: grid; gap: 10px; font: inherit; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile-card {
  position: relative; aspect-ratio: 1475 / 2048; max-width: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile:hover .hc-tile-card, :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile:focus-visible .hc-tile-card { filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(40,255,156,.45)); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile.is-tracking .hc-tile-card { transition: transform .08s linear, filter .25s; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap:wrap; gap: 8px; padding: 0 4px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile-name { font: 600 14px/1.2 var(--hc-display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile-id { font: 400 11px/1 var(--hc-mono); color: var(--hc-green); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-empty { padding: 48px 16px; text-align: center; color: var(--hc-muted); font: 400 14px var(--hc-mono); border: 1px dashed var(--hc-line); }

/* ---------- Overlay ---------- */
.hc-overlay[data-hc-owner] {
  position: fixed; inset: 0; z-index: 99999; display: grid; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 80% at 50% 35%, rgba(26,22,58,.82), rgba(5,9,16,.94) 70%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: calc(64px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  opacity: 1;
}
.hc-overlay[data-hc-owner].is-open { opacity: 1; }
.hc-overlay[data-hc-owner]:not([open]), .hc-overlay[data-hc-owner] [hidden] { display: none !important; }
.hc-overlay[data-hc-owner]::before { /* faint data grid */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(34,242,154,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,242,154,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent);
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-layout {
  position: relative; margin: auto; width: 100%; max-width: 1280px;
  display: grid; align-items: start; gap: 24px 40px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left stage ." ". info .";
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-side { display: grid; gap: 18px; align-content: start; padding-top: 4vh; min-width: 0; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-side.left { grid-area: left; justify-items: end; }

:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-panel { position: relative; width: min(100%, 340px); padding: 16px 20px 18px; background: linear-gradient(180deg, rgba(15,25,40,.92), rgba(15,25,40,.7)); border-bottom: 1px solid rgba(34,242,154,.35); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-panel::before { content: "+"; position: absolute; top: -20px; left: -22px; font: 300 26px/1 var(--hc-display); color: var(--hc-muted); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-panel h4 { margin: 0 0 6px; font: 400 clamp(18px, 1.6vw, 24px)/1.1 var(--hc-display); color: var(--hc-green); text-transform: uppercase; letter-spacing: .01em; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-panel p { margin: 0; font: 300 15px/1.45 var(--hc-display); color: var(--hc-fg); }

:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stats { width: min(100%, 340px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hc-line); border: 1px solid var(--hc-line); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stat { background: var(--hc-panel); padding: 10px 14px; display: grid; gap: 4px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stat span { font: 600 10px/1 var(--hc-mono); letter-spacing: .2em; color: var(--hc-muted); text-transform: uppercase; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stat b { font: 600 22px/1 var(--hc-display); font-variant-numeric: tabular-nums; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stat b.cost { color: #7fb6ff; } .hc-stat b.power { color: #a98bff; }

:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stage { grid-area: stage; justify-self: center; width: fit-content; max-width: 100%; position: relative; perspective: 1400px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stage:active { cursor: grabbing; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-card3d {
  position: relative; height: min(62vh, 680px); aspect-ratio: 1475 / 2048; max-width: calc(100vw - 32px);
  transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-card3d > * { position: absolute; inset: 0; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-card-img { width: 100%; height: 100%; object-fit: contain; transform: translateZ(0); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-glare, :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-holo {
  pointer-events: none;
  -webkit-mask: var(--hc-mask) center / contain no-repeat; mask: var(--hc-mask) center / contain no-repeat;
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-glare { mix-blend-mode: overlay; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.7), rgba(255,255,255,0) 42%); transform: translateZ(1px); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-holo {
  mix-blend-mode: color-dodge; opacity: var(--holo, 0); transform: translateZ(2px);
  background: linear-gradient(115deg, transparent 20%, rgba(34,242,154,.6) calc(var(--mx, 50%) - 12%), rgba(106,61,242,.7) var(--mx, 50%), rgba(47,139,255,.6) calc(var(--mx, 50%) + 12%), transparent 80%);
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-shadow { position: absolute; left: 12%; right: 12%; bottom: -34px; height: 30px; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(6px); transform: translateX(var(--sx, 0px)); pointer-events: none; }

:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-info { grid-area: info; text-align: center; display: grid; gap: 8px; justify-items: center; transform: translateX(var(--px, 0px)); min-width: 0; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-name { margin: 6px 0 0; font: 800 clamp(34px, 5vw, 64px)/1 var(--hc-display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-id { font: 400 clamp(18px, 2vw, 28px)/1 var(--hc-display); color: #9aa5b5; letter-spacing: .02em; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-effect { margin: 10px 0 0; max-width: 34ch; font: 400 clamp(18px, 1.9vw, 26px)/1.35 var(--hc-display); text-wrap: balance; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-kw { color: var(--hc-green); font-weight: 600; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-effect .hc-todo { color: var(--hc-muted); font-style: italic; font-weight: 300; }

:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-btn {
  position: fixed; z-index: 2; appearance: none; border: 1px solid var(--hc-line); background: rgba(15,25,40,.8); color: var(--hc-fg);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-btn:hover { background: var(--hc-green); color: #04140c; border-color: var(--hc-green); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-btn svg { width: 20px; height: 20px; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-prev { left: max(16px, env(safe-area-inset-left, 0px)); top: 50%; translate: 0 -50%; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-next { right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-pos { position: fixed; z-index: 2; top: calc(30px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); font: 400 12px/1 var(--hc-mono); color: var(--hc-muted); letter-spacing: .15em; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-pos b { color: var(--hc-fg); font-weight: 600; }
:where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-hint { font: 400 11px/1 var(--hc-mono); color: var(--hc-muted); letter-spacing: .15em; text-transform: uppercase; margin-top: 10px; }

@media (max-width: 979px) {
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "info" "left"; justify-items: center; gap: 22px; }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-side { padding-top: 0; width: 100%; }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-side.left { justify-items: center; }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-panel { width: min(100%, 460px); }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-panel::before { display: none; }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stats { width: min(100%, 460px); grid-template-columns: repeat(4, 1fr); }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-card3d { height: min(56vh, 560px); }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-prev, :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-next { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: none; }
  .hc-overlay[data-hc-owner] { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-stats { grid-template-columns: repeat(2, 1fr); }
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-card3d { height: auto; width: min(78vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  :where(#hyve-cards, .hc-overlay[data-hc-owner]) .hc-tile-card, .hc-overlay[data-hc-owner] { transition: none; }
}

/* Native-dialog integration and local theme isolation. */
body.hyve-cards-page{background:#0a111d;}
.elementor .hyve-cards-shell.e-con{padding:0;gap:0;width:100%;max-width:none;}
.elementor .hyve-cards-shell .elementor-widget-hyve_card_collection{width:100%;margin:0;}
#hyve-cards :is(button,input,select),.hc-overlay[data-hc-owner] button{font-family:var(--hc-mono);text-transform:none;letter-spacing:normal;box-shadow:none;}
#hyve-cards .hc-title{color:var(--hc-fg);font-family:var(--hc-display);}
#hyve-cards .hc-tile{border-radius:0;outline-offset:4px;}
#hyve-cards .hc-tile:is(:hover,:focus){background-color:rgba(40,255,156,.08);}
#hyve-cards .hc-chip{min-height:44px;}
#hyve-cards .hc-bar :is(input,select){min-height:44px;}
#hyve-cards .hc-search::placeholder{color:#a0adc1;opacity:1;}
#hyve-cards .hc-load{color:var(--hc-muted);}
#hyve-cards .hc-retry{padding:12px;color:var(--hc-fg);background:var(--hc-panel);border:1px solid var(--hc-green);cursor:pointer;}
#hyve-cards [hidden],.hc-overlay[data-hc-owner] [hidden]{display:none!important;}
#hyve-cards :focus-visible,.hc-overlay[data-hc-owner] :focus-visible{outline:2px solid var(--hc-green);outline-offset:4px;}
#hyve-cards .hc-chip:focus-visible{clip-path:none;}
.hc-overlay[data-hc-owner]{margin:0;border:0;border-radius:0;width:100%;height:100%;max-width:none;max-height:none;color:var(--hc-fg);}
.hc-overlay[data-hc-owner]::backdrop{background:rgba(5,9,16,.85);backdrop-filter:blur(10px);}
.hc-overlay[data-hc-owner] .hc-name{color:var(--hc-fg);}
.hc-overlay[data-hc-owner] .hc-btn{padding:0;color:var(--hc-fg);border:1px solid var(--hc-line);background:var(--hc-panel);}
.hc-overlay[data-hc-owner] .hc-btn:hover{color:#080b12;background:var(--hc-green);}
.hc-overlay[data-hc-owner] .hc-status{position:absolute;top:20px;left:100px;color:var(--hc-muted);font:400 13px var(--hc-mono);}
.hc-overlay[data-hc-owner] .hc-stat span{overflow-wrap:anywhere;}
.hc-overlay[data-hc-owner] .hc-stat b{font-size:20px;}
@media(max-width:480px){#hyve-cards .hc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}#hyve-cards .hc-tile-name{font-size:12px;}#hyve-cards .hc-tile-id{font-size:10px;}#hyve-cards .hc-head{gap:12px;}#hyve-cards .hc-bar{padding:10px;}.hc-overlay[data-hc-owner] .hc-card3d{width:min(72vw,360px);}.hc-overlay[data-hc-owner] .hc-effect{font-size:18px;}}
@media(prefers-reduced-motion:reduce){#hyve-cards *, .hc-overlay[data-hc-owner] *{animation:none!important;transition:none!important;}.hc-overlay[data-hc-owner] .hc-card3d,#hyve-cards .hc-tile-card{transform:none!important;}.hc-overlay[data-hc-owner] :is(.hc-holo,.hc-glare){display:none;}}