/* Match-o-lizer — styled to match the Immortal Hall vibe.
   Space theme, cyan/gold accents, orbitron/jost/zombie fonts, glowing panels. */

@font-face {
    font-family: "jost";
    src: url("../../assets/fonts/jost.ttf") format("truetype");
}

@font-face {
    font-family: "zombie";
    src: url("../../assets/fonts/zombie.otf") format("opentype");
}

@font-face {
    font-family: "orbitron";
    src: url("../../assets/fonts/orbitron.ttf") format("truetype");
}

:root {
    --space: #000033;
    --cyan: #00ffcc;
    --gold: #ffd700;
    --ink: #02021a;
    --panel: rgba(0, 0, 51, 0.78);
    --panel-strong: rgba(0, 0, 28, 0.92);
    --line: rgba(0, 255, 204, 0.24);
    --text: #f5fffc;
    --muted: rgba(245, 255, 252, 0.66);
    --sale: #00ffcc;
    --immortal: #ffd700;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--space);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 24px 16px 60px;
    color: var(--text);
    font-family: "jost", system-ui, sans-serif;
    background:
        radial-gradient(circle at 72% 18%, rgba(0, 255, 204, 0.12), transparent 28rem),
        linear-gradient(90deg, rgba(0, 0, 22, 0.96), rgba(0, 0, 51, 0.62)),
        url("../../assets/images/starbg.png") center / auto fixed,
        var(--space);
}

button,
input,
select {
    font: inherit;
}

#app-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px;
    background:
        linear-gradient(180deg, rgba(0, 0, 51, 0.82), rgba(0, 0, 24, 0.9)),
        rgba(0, 0, 28, 0.6);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 0 60px rgba(0, 255, 204, 0.1);
}

h1 {
    margin: 0 0 6px;
    color: var(--cyan);
    font-family: "zombie", fantasy;
    font-size: 3.4rem;
    line-height: 0.9;
    font-weight: 400;
    text-align: center;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.8);
    text-shadow:
        0 0 14px rgba(0, 255, 204, 0.9),
        0 0 34px rgba(0, 255, 204, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.85);
}

p {
    text-align: center;
    color: var(--muted);
}

.input-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

input[type="text"],
input[type="number"],
select,
button {
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 20, 0.7);
    color: var(--text);
    font-size: 15px;
}

input[type="text"] {
    width: min(420px, 100%);
}

input::placeholder {
    color: rgba(245, 255, 252, 0.4);
}

input:focus,
button:focus-visible {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px rgba(0, 255, 204, 0.25);
}

button {
    font-family: "orbitron", monospace;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--space);
    background: linear-gradient(180deg, var(--cyan), #00c9a0);
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.5);
}

#loading-indicator {
    text-align: center;
    padding: 20px;
    font-family: "orbitron", monospace;
    color: var(--cyan);
}

#results-container {
    margin-top: 24px;
}

#results-container > p {
    font-family: "orbitron", monospace;
    color: var(--muted);
}

.combo-filters {
    margin-bottom: 18px;
    padding: 16px;
    background: rgba(0, 0, 24, 0.72);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.filter-header,
.filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-header {
    justify-content: space-between;
    margin-bottom: 12px;
}

.filter-header h2 {
    margin: 0;
    color: var(--cyan);
    font-family: "orbitron", monospace;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.filter-actions span {
    color: var(--muted);
    font-family: "orbitron", monospace;
    font-size: 0.72rem;
}

.clear-filters-btn {
    padding: 8px 10px;
    font-size: 0.68rem;
    color: var(--cyan);
    background: rgba(0, 0, 20, 0.78);
    border: 1px solid rgba(0, 255, 204, 0.34);
}

.filter-section {
    margin-top: 12px;
}

.filter-section > p {
    margin: 0 0 8px;
    text-align: left;
    color: var(--muted);
    font-family: "orbitron", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.filter-chip-row,
.filter-select-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.filter-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    color: var(--muted);
    background: rgba(0, 0, 20, 0.72);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: "orbitron", monospace;
    font-size: 0.7rem;
}

.filter-chip input:checked + span {
    color: var(--space);
    background: linear-gradient(180deg, var(--cyan), #00c9a0);
    border-color: var(--cyan);
}

.filter-chip input:focus-visible + span {
    box-shadow: 0 0 0 2px rgba(0, 255, 204, 0.25);
}

.filter-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.filter-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.filter-select-wrap span {
    color: var(--muted);
    font-family: "orbitron", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.filter-select-wrap select {
    width: 100%;
    padding: 9px 10px;
    font-size: 0.82rem;
}

.combo-empty-state {
    padding: 18px;
    text-align: left;
    color: var(--muted);
    background: rgba(0, 0, 20, 0.48);
    border: 1px dashed rgba(0, 255, 204, 0.28);
    border-radius: 8px;
    font-family: "orbitron", monospace;
    font-size: 0.78rem;
}

.filter-empty-state {
    margin-top: 12px;
}

/* ── Tabs ───────────────────────────────────────────────── */
.combo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.combo-tab {
    padding: 8px 14px;
    font-family: "orbitron", monospace;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(0, 0, 20, 0.7);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
}

.combo-tab:hover {
    color: var(--text);
    border-color: rgba(0, 255, 204, 0.5);
    box-shadow: none;
    transform: none;
}

.combo-tab.active {
    color: var(--space);
    background: linear-gradient(180deg, var(--cyan), #00c9a0);
    border-color: var(--cyan);
}

.combo-tab.empty {
    opacity: 0.4;
    cursor: default;
}

.combo-tab.empty:hover {
    color: var(--muted);
    border-color: var(--line);
}

.combo-tab.not-possible-tab {
    border-color: rgba(255, 120, 120, 0.45);
    color: rgba(255, 150, 150, 0.9);
}

.combo-tab.not-possible-tab.active {
    color: #1a0008;
    background: linear-gradient(180deg, #ff8a8a, #d65a5a);
    border-color: #ff8a8a;
}

.combo-tab .tab-count {
    font-size: 0.68rem;
    opacity: 0.85;
    margin-left: 4px;
}

.combo-summary {
    text-align: left;
    color: var(--muted);
    font-family: "orbitron", monospace;
    font-size: 0.78rem;
    margin: 0 0 14px;
}

.show-more-btn {
    display: block;
    margin: 18px auto 4px;
}

.more-owned {
    margin: 4px 0 0;
    text-align: center;
    font-size: 0.66rem;
    color: var(--muted);
    font-family: "orbitron", monospace;
}

/* ── Trait-set result cards ─────────────────────────────── */
.trait-set {
    background:
        linear-gradient(180deg, rgba(0, 255, 204, 0.05), rgba(0, 0, 24, 0.7));
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 8px;
}

.complete-set {
    border-left-color: var(--cyan);
    box-shadow: 0 0 24px rgba(0, 255, 204, 0.08);
}

.partial-set {
    border-left-color: var(--gold);
}

.impossible-set {
    border-left-color: rgba(255, 120, 120, 0.7);
    opacity: 0.85;
}

.impossible-set h3 {
    color: rgba(255, 150, 150, 0.95);
}

.trait-set h3 {
    margin: 0 0 12px;
    font-family: "orbitron", monospace;
    font-size: 1rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}

.complete-set h3 {
    color: var(--cyan);
}

.partial-set h3 {
    color: var(--gold);
}

.gecko-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.gecko-list > div > p:first-child {
    margin: 0 0 6px;
    text-align: center;
    font-family: "orbitron", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--muted);
}

/* Gecko cell — images 50% smaller than before via max-width cap. */
.gecko-item {
    background: #05051c;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: center;
}

.gecko-item.owned-immortal {
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.18);
}

.gecko-thumb {
    position: relative;
    width: 90px;          /* ~50% of the previous full-column image size */
    margin: 0 auto;
}

.gecko-item img {
    display: block;
    width: 100%;
    max-width: 90px;
    margin: 0 auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 4px;
    background: #05051c;
}

.owned-immortal-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: rgba(0, 0, 20, 0.95);
    border: 1px solid var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.gecko-item p {
    margin: 6px 0 0;
    font-size: 0.72rem;
    color: var(--text);
}

.gecko-item p strong {
    color: var(--cyan);
    font-family: "orbitron", monospace;
    font-weight: 700;
}

/* ── Missing slot ───────────────────────────────────────── */
.missing-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 120px;
    background: rgba(0, 0, 20, 0.55);
    border: 1px dashed rgba(0, 255, 204, 0.3);
    color: var(--muted);
}

.missing-slot.clickable {
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.missing-slot.clickable:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.25);
    transform: translateY(-2px);
}

.missing-slot .missing-label {
    margin: 0 0 6px;
    font-family: "orbitron", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(245, 255, 252, 0.45);
}

.missing-detail {
    margin: 0;
    font-size: 12px;
}

.missing-detail.none {
    color: rgba(255, 120, 120, 0.8);
}

.missing-detail.exists {
    color: var(--cyan);
}

.badges,
.candidate-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.badge,
.cand-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: "orbitron", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.combo-status-badges {
    justify-content: flex-start;
    margin: -4px 0 12px;
}

.badge-owned {
    background: rgba(245, 255, 252, 0.1);
    color: var(--text);
    border: 1px solid rgba(245, 255, 252, 0.28);
}

.badge-sale,
.tag-listed {
    background: rgba(0, 255, 204, 0.16);
    color: var(--cyan);
    border: 1px solid rgba(0, 255, 204, 0.4);
}

.badge-immortal,
.tag-immortal {
    background: rgba(255, 215, 0, 0.14);
    color: var(--gold);
    border: 1px solid rgba(255, 215, 0, 0.4);
}

/* ── Popups / modals ────────────────────────────────────── */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px;
    background: rgba(0, 0, 16, 0.82);
    backdrop-filter: blur(8px);
}

.popup-content {
    position: relative;
    width: min(980px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    background:
        linear-gradient(180deg, rgba(0, 0, 51, 0.96), rgba(0, 0, 24, 0.98)),
        url("../../assets/images/starbg.png") center / auto fixed;
    border: 1px solid rgba(0, 255, 204, 0.42);
    border-radius: 8px;
    box-shadow: 0 0 60px rgba(0, 255, 204, 0.16);
}

.popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--cyan);
    background: rgba(0, 0, 20, 0.86);
    border: 1px solid rgba(0, 255, 204, 0.34);
    border-radius: 4px;
    cursor: pointer;
    text-transform: none;
}

.popup-content h2 {
    margin: 0 46px 6px 0;
    color: var(--cyan);
    font-family: "orbitron", monospace;
    font-size: 1.3rem;
}

.available-subtitle {
    margin: 0 0 18px;
    text-align: left;
    color: var(--muted);
    font-family: "orbitron", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* ── Available-candidates grid ──────────────────────────── */
.available-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.candidate-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #05051c;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.candidate-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #05051c;
}

.candidate-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    background: rgba(0, 0, 20, 0.94);
    border-top: 1px solid rgba(0, 255, 204, 0.18);
}

.candidate-id {
    color: var(--cyan);
    font-family: "orbitron", monospace;
    font-size: 0.74rem;
    font-weight: 900;
}

/* Immortals: already claimed — dim them so listed/available ones stand out. */
.candidate-card.is-immortal {
    opacity: 0.55;
    border-color: rgba(255, 215, 0, 0.35);
}

.candidate-card.is-immortal:hover {
    opacity: 0.8;
}

/* Listed for sale: highlighted and clickable (links to Magic Eden). */
.candidate-card.is-listed {
    border-color: rgba(0, 255, 204, 0.55);
    cursor: pointer;
    opacity: 1;
}

.candidate-card.is-listed:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 22px rgba(0, 255, 204, 0.35);
}

/* ── Missing-traits analysis popup (existing feature) ───── */
#missing-traits-list h3 {
    text-align: center;
    color: var(--cyan);
    font-family: "orbitron", monospace;
}

.traits-summary {
    text-align: center;
    margin-bottom: 8px;
}

.missing-traits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.missing-category {
    background: rgba(0, 0, 24, 0.7);
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 6px;
}

.missing-category h4 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    color: var(--gold);
    font-family: "orbitron", monospace;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--line);
}

.missing-category ul {
    padding-left: 20px;
    margin: 0;
    list-style-type: square;
    color: var(--muted);
}

/* Scrollbars to match the dark theme */
.popup-content::-webkit-scrollbar {
    width: 10px;
}

.popup-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 20, 0.6);
}

.popup-content::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 204, 0.3);
    border-radius: 6px;
}

.popup-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 204, 0.5);
}

/* ── Swappable owned gecko slot ──────────────────────────── */
.gecko-item.swappable {
    cursor: pointer;
    border-color: rgba(0, 255, 204, 0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.gecko-item.swappable:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.3);
    transform: translateY(-2px);
}

.swap-count-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "orbitron", monospace;
    font-size: 10px;
    font-weight: 900;
    background: var(--cyan);
    color: var(--space);
    border-radius: 11px;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.6);
}

/* ── Swap picker cards ───────────────────────────────────── */
.swap-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #05051c;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.swap-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #05051c;
}

.swap-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 22px rgba(0, 255, 204, 0.35);
    border-color: rgba(0, 255, 204, 0.55);
}

.swap-card.selected {
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.4);
}

.tag-selected {
    background: rgba(0, 255, 204, 0.2);
    color: var(--cyan);
    border: 1px solid rgba(0, 255, 204, 0.5);
}

@media (max-width: 640px) {
    h1 { font-size: 2.4rem; }
    .gecko-list { gap: 8px; }
    .gecko-item img { max-width: 70px; }
}