:root {
    --lexdex-success-color: #FFD700;
    --lexdex-correct-color: #FFFFFF;
    --lexdex-target-color: #444444;
}

.library-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 5 / 7;
    height: auto;
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
    padding: 1.2rem;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s, box-shadow 0.4s, border-radius 0.3s, filter 0.3s;
    background-color: #1a1a1a;
    background-size: 150% 150%;
    background-position: 50% 50%;
    position: relative;
    overflow: hidden;
    font-family: 'IBM Plex Mono', monospace; /* Fallback to portfolio mono font */
}

.library-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8);
}

/* Condition Tier Classes - Geometry & Ink Integrity */
.cond-0 {
    border-radius: 20px !important;
    filter: saturate(0.5) contrast(0.8) brightness(0.8);
}

.cond-1 {
    border-radius: 12px !important;
    filter: saturate(0.7) contrast(0.9) brightness(0.9);
}

.cond-2 {
    border-radius: 0px !important;
}

.cond-3 {
    border-radius: 0px !important;
    filter: saturate(1.1) brightness(1.1);
}

.cond-4 {
    border-radius: 0px !important;
    filter: saturate(1.2) contrast(1.1) brightness(1.25);
}

.cond-5 {
    border-radius: 0px !important;
    filter: saturate(1.3) contrast(1.15) brightness(1.5) drop-shadow(0 0 50px var(--glow-color, rgba(255,215,0,0.5)));
    animation: mint-aura 6s infinite alternate ease-in-out;
}

.cond-5:hover {
    filter: saturate(1.4) contrast(1.2) brightness(1.6) drop-shadow(0 0 25px var(--glow-color, rgba(255,215,0,0.5)));
}

@keyframes mint-aura {
    0% {
        filter: saturate(1.3) contrast(1.15) brightness(1.5) drop-shadow(0 0 32px var(--glow-color, rgba(255,215,0,0.5)));
    }
    100% {
        filter: saturate(1.3) contrast(1.15) brightness(1.5) drop-shadow(0 0 64px var(--glow-color, rgba(255,215,0,0.5)));
    }
}

/* Surface Finish Overlays */
.card-finish {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
    overflow: hidden;
}

.cond-0 .card-finish {
    background-image:
        radial-gradient(circle at 100% 100%, transparent 17px, rgba(255, 255, 255, 0.2) 18px, rgba(255, 255, 255, 0.5) 19px, transparent 21px),
        radial-gradient(circle at 0% 100%, transparent 17px, rgba(255, 255, 255, 0.2) 18px, rgba(255, 255, 255, 0.5) 19px, transparent 21px),
        radial-gradient(circle at 100% 0%, transparent 17px, rgba(255, 255, 255, 0.2) 18px, rgba(255, 255, 255, 0.5) 19px, transparent 21px),
        radial-gradient(circle at 0% 0%, transparent 17px, rgba(255, 255, 255, 0.2) 18px, rgba(255, 255, 255, 0.5) 19px, transparent 21px),
        repeating-linear-gradient(13deg, transparent, transparent 2px, rgba(255, 255, 255, 0.06) 2px, rgba(255, 255, 255, 0.06) 3px);
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 100%;
    background-position: 0 0, 100% 0, 0 100%, 100% 100%, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

.cond-1 .card-finish {
    background-image:
        radial-gradient(circle at 100% 100%, transparent 9px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.3) 11px, transparent 13px),
        radial-gradient(circle at 0% 100%, transparent 9px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.3) 11px, transparent 13px),
        radial-gradient(circle at 100% 0%, transparent 9px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.3) 11px, transparent 13px),
        radial-gradient(circle at 0% 0%, transparent 9px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.3) 11px, transparent 13px),
        repeating-linear-gradient(13deg, transparent, transparent 2px, rgba(255, 255, 255, 0.04) 2px, rgba(255, 255, 255, 0.04) 3px);
    background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% 100%;
    background-position: 0 0, 100% 0, 0 100%, 100% 100%, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

.cond-5 .card-finish::after {
    content: "";
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: linear-gradient(115deg,
            transparent 40%,
            rgba(255, 255, 255, 0.1) 45%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 55%,
            transparent 60%);
    will-change: transform;
    animation: glint-sweep 6s infinite ease-in-out;
    mix-blend-mode: soft-light;
}

@keyframes glint-sweep {
    0% { transform: translate(-20%, -20%); }
    15%, 100% { transform: translate(30%, 30%); }
}

/* Rarity Gradients */
.rarity-1 {
    --glow-color: rgba(255, 255, 255, 0.2);
    background-image: linear-gradient(145deg, #2a2a2a 0%, #111111 100%);
    border: 1px solid #555;
}

.rarity-2 {
    --glow-color: rgba(76, 175, 80, 0.35);
    background-image: linear-gradient(145deg, #1e3b20 0%, #0a140a 100%);
    border: 1px solid #3e8a42;
}

.rarity-3 {
    --glow-color: rgba(33, 150, 243, 0.4);
    background-image: linear-gradient(145deg, #1b2845 0%, #080d1a 100%);
    border: 1px solid #3b60b5;
}

.rarity-4 {
    --glow-color: rgba(156, 39, 176, 0.45);
    background-image: linear-gradient(145deg, #3d1c4a 0%, #15091a 100%);
    border: 1px solid #9240b5;
}

.rarity-5 {
    --glow-color: rgba(255, 215, 0, 0.5);
    background-image: linear-gradient(145deg, #4a3b10 0%, #1a1403 100%);
    border: 1px solid #b58d22;
}

.rarity-5 .card-rarity,
.rarity-5 .card-word {
    color: var(--lexdex-success-color);
}

/* Holographic Overlays */
.library-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    opacity: 0.3;
    transition: opacity 0.3s;
}

.library-card:hover::after {
    opacity: 0.5;
}

.library-card.rarity-3::after {
    background-image: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 55%, transparent 80%);
    mix-blend-mode: overlay;
    background-size: 200% 200%;
}

.library-card.rarity-4::after {
    background-image: repeating-linear-gradient(135deg, rgba(255, 0, 128, 0.1) 0%, rgba(0, 255, 128, 0.1) 10%, rgba(0, 128, 255, 0.1) 20%, rgba(255, 128, 0, 0.1) 30%, rgba(255, 0, 128, 0.1) 40%), linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
    mix-blend-mode: color-dodge;
    background-size: 400% 400%, 200% 200%;
}

.library-card.rarity-5::before {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.1) 1px, transparent 3px),
        radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.05) 1px, transparent 2px),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.9) 0, rgba(255, 215, 0, 0.2) 2px, transparent 5px),
        radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.15) 1.5px, transparent 4px),
        radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.1) 0, transparent 2px),
        radial-gradient(circle at 10% 80%, rgba(255, 215, 0, 0.95) 0, rgba(255, 215, 0, 0.25) 2px, transparent 6px),
        radial-gradient(circle at 90% 20%, rgba(255, 215, 0, 0.4) 0, rgba(255, 215, 0, 0.1) 1px, transparent 3px);
    background-size: 183px 183px, 237px 237px, 291px 291px, 153px 153px, 211px 211px, 273px 273px, 251px 251px;
    mix-blend-mode: color-dodge;
    animation: twinkle 4s ease-in-out infinite alternate;
}

.library-card.rarity-5::after {
    background-image: linear-gradient(115deg, transparent 30%, rgba(255, 215, 0, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 215, 0, 0.5) 52%, transparent 70%);
    mix-blend-mode: overlay;
    background-size: 200% 200%;
    opacity: 0.6;
}

@keyframes twinkle {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(1%, 1%); }
}

/* Card Internal Structure */
.card-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    margin-bottom: 0.8rem;
    text-align: center;
    position: relative;
    z-index: 3;
}

.card-word {
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: var(--lexdex-correct-color);
}

.card-def {
    flex-grow: 1;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.5rem 0;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #cccccc;
    position: relative;
    z-index: 3;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.85rem;
    opacity: 0.9;
    position: relative;
    z-index: 3;
}

.card-rarity {
    font-weight: bold;
    color: var(--lexdex-correct-color);
}

.card-rarity .stars {
    margin-left: 4px;
}

.card-stat {
    color: #a1a1a1;
}

.card-stat span {
    font-weight: bold;
    color: var(--lexdex-correct-color);
}