:root {
    --accent: #FF5900;
}

body {
    background: #232323;
    color: #F1F1F1
}

.clip {
    clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)
}

.soft-shadow {
    box-shadow: 0 18px 45px rgba(0,0,0,.28)
}

/* Make hero image always visible */
.hero-overlay {
    background: radial-gradient(1200px 600px at 20% 30%, rgba(255,89,0,.20), transparent 55%), linear-gradient(90deg, rgba(26,26,26,.70), rgba(26,26,26,.38) 55%, rgba(26,26,26,.62));
}

/* Slider fade */
.fade-enter-active, .fade-leave-active {
    transition: opacity .55s ease
}

.fade-enter-from, .fade-leave-to {
    opacity: 0
}

/* Refined level badge */
.badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 10px;
    border: 1px solid rgba(255,255,255,.18)
}

    .badge::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
        opacity: .95
    }

.badge-easy {
    color: #B8FFB8;
    background: rgba(0,255,120,.08)
}

.badge-med {
    color: #FFD39C;
    background: rgba(255,180,60,.10)
}

.badge-hard {
    color: #FFB0B0;
    background: rgba(255,90,90,.10)
}

/* Subtle grid lines */
.gridline {
    background-image: linear-gradient(to right,rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,0.04) 1px,transparent 1px);
    background-size: 72px 72px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 7px
}

::-webkit-scrollbar-track {
    background: #1A1A1A
}

::-webkit-scrollbar-thumb {
    background: rgba(255,89,0,.8)
}

/* Subtle focus */
.focus-ring:focus {
    outline: 2px solid rgba(255,89,0,.8);
    outline-offset: 2px
}