.home-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: relative;
    padding: 0;
    /* Seasonal hero art — scrolls with content (background-attachment: local),
       fades from banner black into the art then dissolves back to the theme
       background color. Falls back gracefully if the image is unavailable.
       Adjust pixel stops here to tune the fade zone. */
    /* Banner height: 800px wide × (643/1224 aspect) ≈ 420px rendered.
       Art is positioned to start exactly at the banner bottom so the gradient
       fade and the image top edge are perfectly aligned. */
    /* Art layer uses a fixed height so the fade-out can be reliably completed
       before the image's bottom edge regardless of viewport width.
       Desktop: 420px start + 800px height = ends at 1220px → gradient done at 1180px. */
    background:
        linear-gradient(to bottom,
            #000                   0px,
            #000                   420px,  /* hold through banner */
            rgba(0, 0, 0, 0.96)    455px,
            rgba(0, 0, 0, 0.86)    510px,
            rgba(0, 0, 0, 0.72)    580px,
            rgba(0, 0, 0, 0.60)    660px,
            rgba(0, 0, 0, 0.55)    780px,  /* art visible window */
            rgba(0, 0, 0, 0.68)    920px,
            rgba(0, 0, 0, 0.88)   1060px,
            var(--bg-color)       1180px   /* complete before art ends at ~1220px */
        ),
        var(--hero-art-url, none) center 420px / 100% 800px no-repeat,
        var(--bg-color);
    background-attachment: local, local, local;
}

.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem;
    text-align: center;
    background: transparent;
    border-bottom: none;
}

.home-hero-banner-wrapper {
    /* Break out of the hero's 2rem horizontal and top padding to span edge-to-edge */
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: -2rem;
    margin-bottom: -2rem;
    background: #000;
    display: flex;
    justify-content: center;
    line-height: 0;
}

.home-hero-banner {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
}

.home-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 3rem;
    line-height: 1.6;
}

.home-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.action-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.action-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.action-card:active {
    transform: translateY(0);
    background: var(--bg-tertiary);
    transition: none;
}

.action-card .icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

.action-card:hover .icon-wrapper {
    background: var(--accent-primary);
    color: white;
}

.action-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.action-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 4rem 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.feature-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: 100%;
}

.feature-item:hover {
    background: var(--entry-hover-bg);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 1.5rem;
    color: var(--accent-secondary);
    margin-bottom: 0.75rem;
    background: var(--bg-tertiary);
    padding: 10px;
    border-radius: 8px;
    display: inline-flex;
}

.feature-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.feature-item p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 768px) {
    /* Mobile banner height ≈ 226px. Art fixed at 500px tall →
       ends at 226+500=726px. Gradient completes at 680px (before that edge). */
    .home-panel {
        background:
            linear-gradient(to bottom,
                #000                   0px,
                #000                   226px,  /* hold through mobile banner */
                rgba(0, 0, 0, 0.96)    256px,
                rgba(0, 0, 0, 0.86)    300px,
                rgba(0, 0, 0, 0.72)    360px,
                rgba(0, 0, 0, 0.58)    440px,  /* art visible window */
                rgba(0, 0, 0, 0.60)    530px,
                rgba(0, 0, 0, 0.82)    620px,
                var(--bg-color)        700px   /* complete before art ends at ~726px */
            ),
            var(--hero-art-url, none) center 226px / 100% 500px no-repeat,
            var(--bg-color);
        background-attachment: local, local, local;
    }

    .home-hero-banner-wrapper {
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        margin-top: -3rem;
    }

    .features-grid {
        padding: 2rem 1rem;
    }

    .home-hero {
        padding: 3rem 1rem;
    }
}

.usage-tips {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 2rem auto;
    max-width: 1200px;
    width: 90%;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.tip-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tip-content {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
    margin: 0;
}

.next-tip-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.next-tip-btn:hover {
    color: var(--text-color);
    background: var(--bg-tertiary);
}

/* Community Link */
.community-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin: 2rem auto 4rem;
    transition: color 0.2s;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.community-link:hover {
    color: var(--discord-color);
    background: rgba(88, 101, 242, 0.1);
}

/* Recent Decks */
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
    max-width: 1200px;
    padding: 2rem 2rem;
    display: flex;
    align-items: center;
}

.recent-decks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 2rem;
}

.recent-deck-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recent-deck-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    background: var(--entry-hover-bg);
}

.recent-deck-card:active {
    transform: translateY(0);
    background: var(--bg-secondary);
    transition: none;
}

.recent-deck-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.recent-deck-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.recent-deck-arrow {
    color: var(--accent-secondary);
    opacity: 0.5;
    transition: all 0.2s;
}

.recent-deck-card:hover .recent-deck-arrow {
    opacity: 1;
    color: var(--accent-primary);
    transform: translateX(4px);
}

/* Demo Link */
.demo-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s;
}

.demo-link strong {
    color: var(--accent-color);
}

.demo-link:hover strong {
    color: var(--accent-hover);
}

.deck-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.deck-card-widget:hover .deck-card-image {
    transform: scale(1.05);
    opacity: 1;
}

@media (max-width: 768px) {
    .usage-tips {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 0.75rem;
    }

    .tip-header {
        font-size: 0.85rem;
        opacity: 0.8;
        width: 100%;
    }

    .tip-content {
        width: 100%;
        text-align: left;
    }

    .next-tip-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
}