/*======================================
  CARD COMPONENT STYLES
======================================*/

/* Using a custom font for the card aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

/* --- Card Component Styles --- */
.card-container {
    width: 250px;
    height: 385px;
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}

.card-container.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card-face,
.card-default-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-front {
    background-color: #f1f5f9;
    /* slate-100 */
}

.card-back {
    background-color: #334155;
    /* slate-700 */
    color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.is-draggable {
    cursor: grab;
    box-shadow: 0 0 20px 5px rgba(66, 153, 225, 0.6);
}

.card-image-container {
    width: 225px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: auto;
    background-color: #e2e8f0;
    /* slate-200 */
}

.card-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.image-wrapper {
    min-height: 0;
}

/* --- STYLES FOR AP/HP/ABILITY FOOTER --- */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border-top: 1px solid #94a3b8;
    /* slate-400 */
}

.stat-box,
.ability-box {
    padding: 0.25rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-box {
    flex: 0 0 50px;
    font-weight: 900;
    font-size: 1.125rem;
    gap: 0.25rem;
}

.ability-box {
    flex-grow: 1;
    border-left: 1px solid #94a3b8;
    border-right: 1px solid #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    min-height: 3rem;
}

/* Tier-based default backs */
.card-default-back.tier-champion {
    background: radial-gradient(circle, #CD7F32, #915b26);
}

.card-default-back.tier-exalted {
    background: radial-gradient(circle, #C0C0C0, #7e7e7e);
}

.card-default-back.tier-celestial {
    background: radial-gradient(circle, #facc15, #d97706);
}

.card-default-back.tier-divine {
    background: radial-gradient(circle, #60a5fa, #2563eb);
}

.card-default-back.tier-ascendant {
    background: radial-gradient(circle, #aa60fa, #9f25eb);
}

.card-default-back.tier-genesis {
    background: radial-gradient(circle, #d4fff5, #e9fffd);
}

.card-default-back.tier-voidborn {
    background: radial-gradient(circle, #2a2828, #171616);
}

.card-default-back.tier-omega {
    background: radial-gradient(circle, #cc1a1a, #7f0404);
}