/* Custom styles for Riftbound TCG Static Web App */

body {
    font-family: 'Inter', sans-serif;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    max-height: 500px;
}

@media (min-width: 768px) {
    .chart-container {
        height: 450px;
    }
}

.gradient-text {
    background: linear-gradient(to right, #00A0B0, #CC333F);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.flow-arrow {
    color: #EB6841;
}

.tier-card {
    border-left: 4px solid #00A0B0;
}

.hero-section {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Use the production hero image from Blob Storage */
    background-image: url('https://htudevstorage.blob.core.windows.net/static-web-apps/images/hero-background.jpg') !important;
}

/* Responsive background positioning */
@media (max-width: 768px) {
    .hero-section {
        /* Different positioning for mobile */
        background-position: center top;
        background-size: cover;
    }
}

@media (min-width: 1200px) {
    .hero-section {
        /* Different positioning for large screens */
        background-position: center center;
        background-size: cover;
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}