/* Character Card Component */

/*
  This file is intentionally reusable.

  It should be safe to import anywhere a ghostline_ character/profile card
  needs to render:
  - Switchboard identity selection
  - Holo chat hover preview
  - Player profile windows
  - Corporation rosters
  - Contract/contact previews

  The card is driven by modular catalog classes:

  shape-*
  frame-*
  bg-*
  plate-*
  font-*
  accent-*
  effect-*
*/

.character-card {
    position: relative;
    width: 200px;
    height: 340px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 0;
    background: rgba(4, 10, 8, 0.84);
    color: var(--text-bright);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-align: left;
    box-shadow:
        inset 0 0 0 1px rgba(120, 255, 160, 0.03),
        0 0 18px rgba(100, 255, 150, 0.035);
}

.character-card:hover {
    box-shadow:
        inset 0 0 0 1px rgba(120, 255, 160, 0.06),
        0 0 26px rgba(100, 255, 150, 0.08);
}

.character-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            transparent 18%,
            transparent 78%,
            rgba(120, 255, 160, 0.05)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 7px,
            rgba(120, 255, 160, 0.018) 8px,
            transparent 9px
        );
    opacity: .52;
    pointer-events: none;
}

.character-card-background,
.character-card-art,
.character-card-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.character-card-background {
    z-index: 0;
}

.character-card-art {
    z-index: 1;
}

.character-card-effects {
    z-index: 4;
}

.character-card-nameplate {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 26px;
    z-index: 5;
    padding: 10px 8px;
    text-align: center;
}

.character-card-name {
    font-size: 20px;
    font-weight: 250;
    letter-spacing: 0.10em;
    line-height: 26px;
}

.character-card-company {
    margin-top: 4px;
    color: var(--text-warm);
    font-size: 11px;
    letter-spacing: 0.08em;
}

/* Shape Catalog */

.shape-beveled {
    clip-path: polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 8px
    );
}

.shape-chamfered {
    clip-path: polygon(
        14px 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        14px 100%,
        0 calc(100% - 14px),
        0 14px
    );
}

.shape-dossier {
    clip-path: polygon(
        0 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% 100%,
        0 100%
    );
}

/* Frame Catalog */

.frame-terminal {
    border: 1px solid rgba(170, 255, 195, 0.18);
}

.frame-terminal:hover {
    border-color: var(--border-hover);
}

.frame-terminal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(rgba(140, 255, 160, 0.92), rgba(140, 255, 160, 0.92)) left top / 32px 1px no-repeat,
        linear-gradient(rgba(140, 255, 160, 0.92), rgba(140, 255, 160, 0.92)) left top / 1px 32px no-repeat,
        linear-gradient(rgba(140, 255, 160, 0.48), rgba(140, 255, 160, 0.48)) right top / 32px 1px no-repeat,
        linear-gradient(rgba(140, 255, 160, 0.48), rgba(140, 255, 160, 0.48)) right top / 1px 32px no-repeat,
        linear-gradient(rgba(140, 255, 160, 0.48), rgba(140, 255, 160, 0.48)) left bottom / 32px 1px no-repeat,
        linear-gradient(rgba(140, 255, 160, 0.48), rgba(140, 255, 160, 0.48)) left bottom / 1px 32px no-repeat,
        linear-gradient(rgba(140, 255, 160, 0.92), rgba(140, 255, 160, 0.92)) right bottom / 32px 1px no-repeat,
        linear-gradient(rgba(140, 255, 160, 0.92), rgba(140, 255, 160, 0.92)) right bottom / 1px 32px no-repeat;
    opacity: .64;
}

.frame-industrial {
    border: 1px solid rgba(200, 220, 190, 0.20);
}

.frame-industrial:hover {
    border-color: rgba(220, 235, 205, 0.36);
}

.frame-corporate {
    border: 1px solid rgba(120, 190, 255, 0.22);
}

.frame-corporate:hover {
    border-color: rgba(140, 210, 255, 0.40);
}

/* Background Catalog */

.bg-terminal-dark .character-card-background {
    background:
        radial-gradient(circle at 35% 22%, rgba(130, 255, 205, .10), transparent 42%),
        radial-gradient(circle at 72% 78%, rgba(255, 190, 80, .08), transparent 50%),
        linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .68)),
        rgba(4, 10, 8, 0.84);
}

.bg-grid .character-card-background {
    background:
        linear-gradient(rgba(100, 255, 180, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 255, 180, .045) 1px, transparent 1px),
        radial-gradient(circle at 35% 22%, rgba(130, 255, 205, .08), transparent 42%),
        linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .72)),
        rgba(4, 10, 8, 0.84);
    background-size:
        22px 22px,
        22px 22px,
        auto,
        auto,
        auto;
}

.bg-datastream .character-card-background {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(120, 255, 170, .035) 0px,
            rgba(120, 255, 170, .035) 1px,
            transparent 1px,
            transparent 9px
        ),
        radial-gradient(circle at 38% 18%, rgba(130, 255, 205, .10), transparent 42%),
        linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .72)),
        rgba(4, 10, 8, 0.84);
}

.bg-carbon .character-card-background {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035) 25%, transparent 25%) 0 0 / 14px 14px,
        linear-gradient(315deg, rgba(255, 255, 255, .025) 25%, transparent 25%) 0 0 / 14px 14px,
        radial-gradient(circle at 35% 22%, rgba(130, 255, 205, .06), transparent 42%),
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .72)),
        rgba(5, 8, 7, 0.92);
}

/* Nameplate Catalog */

.plate-terminal .character-card-nameplate {
    background: rgba(0, 0, 0, 0.52);
    border-top: 1px solid rgba(170, 255, 195, 0.20);
    border-bottom: 1px solid rgba(170, 255, 195, 0.16);
}

.plate-minimal .character-card-nameplate {
    background: rgba(0, 0, 0, 0.34);
}

.plate-banner .character-card-nameplate {
    left: 0;
    right: 0;
    bottom: 34px;
    background: rgba(2, 8, 6, 0.74);
    border-top: 1px solid rgba(170, 255, 195, 0.18);
    border-bottom: 1px solid rgba(170, 255, 195, 0.18);
}

.plate-glass .character-card-nameplate {
    background: rgba(18, 32, 24, 0.44);
    border: 1px solid rgba(170, 255, 195, 0.16);
    backdrop-filter: blur(2px);
}

/* Typography Catalog */

.font-science .character-card-name {
    font-family: "Science Gothic Switchboard", sans-serif;
    font-weight: 250;
}

.font-terminal .character-card-name {
    font-family: "Relay Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 18px;
}

.font-corporate .character-card-name {
    font-family: "Relay Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Accent Catalog */

.accent-green {
    --card-accent: rgba(185, 255, 190, 0.92);
    --card-accent-soft: rgba(120, 255, 160, 0.16);
    --card-accent-shadow: rgba(45, 255, 45, 0.18);
}

.accent-amber {
    --card-accent: rgba(255, 214, 160, 0.94);
    --card-accent-soft: rgba(255, 190, 80, 0.16);
    --card-accent-shadow: rgba(255, 190, 80, 0.18);
}

.accent-blue {
    --card-accent: rgba(145, 215, 255, 0.94);
    --card-accent-soft: rgba(90, 180, 255, 0.16);
    --card-accent-shadow: rgba(90, 180, 255, 0.18);
}

.character-card-name {
    color: var(--card-accent, var(--text-logo));
    text-shadow:
        0 0 2px var(--card-accent-shadow, rgba(45, 255, 45, 0.45)),
        0 0 10px var(--card-accent-shadow, rgba(45, 255, 45, 0.18));
}

.character-card-company {
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.82),
        0 0 12px rgba(0, 0, 0, 0.58);
}

/* Effect Catalog */

.effect-none .character-card-effects {
    display: none;
}

.effect-scanline .character-card-effects {
    display: block;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 7px,
            var(--card-accent-soft, rgba(120, 255, 160, 0.16)) 8px,
            transparent 9px
        );
    opacity: .28;
}

.effect-glow .character-card-effects {
    display: block;
    box-shadow:
        inset 0 0 32px var(--card-accent-soft, rgba(120, 255, 160, 0.16)),
        0 0 18px var(--card-accent-shadow, rgba(45, 255, 45, 0.18));
}

.effect-pulse .character-card-effects {
    display: block;
    box-shadow:
        inset 0 0 34px var(--card-accent-soft, rgba(120, 255, 160, 0.16)),
        0 0 16px var(--card-accent-shadow, rgba(45, 255, 45, 0.18));
    animation: characterCardPulse 1800ms ease-in-out infinite;
}

@keyframes characterCardPulse {
    0% {
        opacity: .32;
    }

    50% {
        opacity: .68;
    }

    100% {
        opacity: .32;
    }
}