:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #dde1e8;
    --text: #1a1d26;
    --text-mid: #5a5f72;
    --text-dim: #9399aa;
    /* Category colors */
    --basis-dark: #6d28d9;
    --basis-mid: #8b5cf6;
    --basis-light: #ede9fe;
    --basis-border: #c4b5fd;
    --strat-dark: #1d4ed8;
    --strat-mid: #3b82f6;
    --strat-light: #dbeafe;
    --strat-border: #93c5fd;
    --ret-dark: #0f766e;
    --ret-mid: #14b8a6;
    --ret-light: #ccfbf1;
    --ret-border: #5eead4;
    --prob-dark: #b45309;
    --prob-mid: #f59e0b;
    --prob-light: #fef3c7;
    --prob-border: #fcd34d;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Heebo',sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    direction: rtl;
    overflow-x: hidden;
}

/* ─── TABS BAR ─── */
.tabs-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 2px solid var(--border);
    padding: 14px 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: 'Heebo',sans-serif;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: var(--bg);
    color: var(--text-mid);
}

.tab-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

    .tab-icon svg {
        width: 17px;
        height: 17px
    }

/* All tab */
.tab.ta {
    border-color: var(--border)
}

    .tab.ta:hover, .tab.ta.on {
        background: #1a1d26;
        color: #fff;
        border-color: #1a1d26
    }

    .tab.ta .tab-icon {
        background: rgba(0,0,0,0.08)
    }

    .tab.ta.on .tab-icon {
        background: rgba(255,255,255,0.15)
    }

/* Basis */
.tab.tb {
    border-color: var(--basis-border);
    color: var(--basis-dark)
}

    .tab.tb .tab-icon {
        background: var(--basis-light);
        color: var(--basis-dark)
    }

    .tab.tb:hover, .tab.tb.on {
        background: var(--basis-dark);
        color: #fff;
        border-color: var(--basis-dark)
    }

        .tab.tb.on .tab-icon, .tab.tb:hover .tab-icon {
            background: rgba(255,255,255,0.2);
            color: #fff
        }

/* Strategy */
.tab.ts {
    border-color: var(--strat-border);
    color: var(--strat-dark)
}

    .tab.ts .tab-icon {
        background: var(--strat-light);
        color: var(--strat-dark)
    }

    .tab.ts:hover, .tab.ts.on {
        background: var(--strat-dark);
        color: #fff;
        border-color: var(--strat-dark)
    }

        .tab.ts.on .tab-icon, .tab.ts:hover .tab-icon {
            background: rgba(255,255,255,0.2);
            color: #fff
        }

/* Retrieval */
.tab.tr {
    border-color: var(--ret-border);
    color: var(--ret-dark)
}

    .tab.tr .tab-icon {
        background: var(--ret-light);
        color: var(--ret-dark)
    }

    .tab.tr:hover, .tab.tr.on {
        background: var(--ret-dark);
        color: #fff;
        border-color: var(--ret-dark)
    }

        .tab.tr.on .tab-icon, .tab.tr:hover .tab-icon {
            background: rgba(255,255,255,0.2);
            color: #fff
        }

/* Problem */
.tab.tp {
    border-color: var(--prob-border);
    color: var(--prob-dark)
}

    .tab.tp .tab-icon {
        background: var(--prob-light);
        color: var(--prob-dark)
    }

    .tab.tp:hover, .tab.tp.on {
        background: var(--prob-dark);
        color: #fff;
        border-color: var(--prob-dark)
    }

        .tab.tp.on .tab-icon, .tab.tp:hover .tab-icon {
            background: rgba(255,255,255,0.2);
            color: #fff
        }

/* ─── CONTENT ─── */
.content {
    max-width: 1360px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

/* Category section */
.cat-section {
    margin-bottom: 52px
}

    .cat-section.hidden {
        display: none
    }

/* Category header */
.cat-hd {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
    border-radius: 16px;
    border: 2px solid transparent;
}

.cat-hd-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cat-hd-icon svg {
        width: 28px;
        height: 28px
    }

.cat-hd-info {
    flex: 1;
    text-align: right
}

.cat-hd-name {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.3px
}

.cat-hd-desc {
    font-size: 0.9rem;
    margin-top: 3px;
    font-weight: 500
}

.cat-hd-pill {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 7px 16px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Category header themes */
.hd-basis {
    background: var(--basis-light);
    border-color: var(--basis-border);
}

    .hd-basis .cat-hd-icon {
        background: var(--basis-dark)
    }

        .hd-basis .cat-hd-icon svg {
            color: #fff;
            stroke: #fff
        }

    .hd-basis .cat-hd-name {
        color: var(--basis-dark)
    }

    .hd-basis .cat-hd-desc {
        color: #6d28d9bb
    }

    .hd-basis .cat-hd-pill {
        background: var(--basis-dark);
        color: #fff
    }

.hd-strategy {
    background: var(--strat-light);
    border-color: var(--strat-border);
}

    .hd-strategy .cat-hd-icon {
        background: var(--strat-dark)
    }

        .hd-strategy .cat-hd-icon svg {
            color: #fff;
            stroke: #fff
        }

    .hd-strategy .cat-hd-name {
        color: var(--strat-dark)
    }

    .hd-strategy .cat-hd-desc {
        color: #1d4ed8bb
    }

    .hd-strategy .cat-hd-pill {
        background: var(--strat-dark);
        color: #fff
    }

.hd-retrieval {
    background: var(--ret-light);
    border-color: var(--ret-border);
}

    .hd-retrieval .cat-hd-icon {
        background: var(--ret-dark)
    }

        .hd-retrieval .cat-hd-icon svg {
            color: #fff;
            stroke: #fff
        }

    .hd-retrieval .cat-hd-name {
        color: var(--ret-dark)
    }

    .hd-retrieval .cat-hd-desc {
        color: #0f766ebb
    }

    .hd-retrieval .cat-hd-pill {
        background: var(--ret-dark);
        color: #fff
    }

.hd-problem {
    background: var(--prob-light);
    border-color: var(--prob-border);
}

    .hd-problem .cat-hd-icon {
        background: var(--prob-dark)
    }

        .hd-problem .cat-hd-icon svg {
            color: #fff;
            stroke: #fff
        }

    .hd-problem .cat-hd-name {
        color: var(--prob-dark)
    }

    .hd-problem .cat-hd-desc {
        color: #b45309bb
    }

    .hd-problem .cat-hd-pill {
        background: var(--prob-dark);
        color: #fff
    }

/* ─── GAME GRID ─── */
.grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

/* ─── GAME CARD ─── */
.card {
    background: var(--surface);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: all 0.22s ease;
    animation: cardIn 0.45s ease both;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 36px rgba(0,0,0,0.13);
        border-color: #b0b8cc;
    }

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Card icon area */
.card-top {
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}

.card:hover .card-bg {
    transform: scale(1.06)
}
/* Bottom fade */
.card-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.18));
}

.icon-stage {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}

.card:hover .icon-stage {
    transform: scale(1.12)
}

.icon-stage svg {
    width: 72px;
    height: 72px;
    overflow: visible
}

/* Play button */
.play-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: 2px solid rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.card:hover .play-btn {
    opacity: 1;
    transform: scale(1)
}

.play-btn svg {
    width: 13px;
    height: 13px;
    fill: #1a1d26;
    margin-right: -2px
}

/* Card body */
.card-body {
    padding: 14px 16px 16px
}

.card-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.3
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.card-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-mid);
    font-weight: 600
}

    .card-time svg {
        width: 14px;
        height: 14px;
        opacity: 0.7
    }

.badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 20px;
    letter-spacing: 0.3px
}

.be {
    background: #d1fae5;
    color: #065f46;
    border: 1.5px solid #6ee7b7
}

.bm {
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #fcd34d
}

.bh {
    background: #fee2e2;
    color: #991b1b;
    border: 1.5px solid #fca5a5
}

.bx {
    background: #ede9fe;
    color: #5b21b6;
    border: 1.5px solid #c4b5fd
}

/* Card backgrounds - vibrant but visible on light cards */
.bg-v1 {
    background: linear-gradient(140deg, #4c1d95 0%, #7c3aed 60%, #a78bfa 100%)
}

.bg-v2 {
    background: linear-gradient(140deg, #3b0764 0%, #6d28d9 55%, #c084fc 100%)
}

.bg-v3 {
    background: linear-gradient(140deg, #1e1b4b 0%, #4338ca 55%, #818cf8 100%)
}

.bg-v4 {
    background: linear-gradient(140deg, #2e1065 0%, #7c3aed 60%, #e879f9 100%)
}

.bg-b1 {
    background: linear-gradient(140deg, #1e3a8a 0%, #2563eb 55%, #60a5fa 100%)
}

.bg-b2 {
    background: linear-gradient(140deg, #1e40af 0%, #3b82f6 55%, #93c5fd 100%)
}

.bg-b3 {
    background: linear-gradient(140deg, #0c2a6e 0%, #1d4ed8 55%, #60a5fa 100%)
}

.bg-g1 {
    background: linear-gradient(140deg, #064e3b 0%, #059669 55%, #34d399 100%)
}

.bg-g2 {
    background: linear-gradient(140deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)
}

.bg-g3 {
    background: linear-gradient(140deg, #022c22 0%, #065f46 55%, #10b981 100%)
}

.bg-o1 {
    background: linear-gradient(140deg, #78350f 0%, #b45309 55%, #f59e0b 100%)
}

.bg-o2 {
    background: linear-gradient(140deg, #92400e 0%, #d97706 55%, #fbbf24 100%)
}

/* ─── TOAST ─── */
#toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    background: #1a1d26;
    color: white;
    padding: 13px 26px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

    #toast.on {
        opacity: 1;
        transform: translateX(-50%) translateY(0)
    }

/* ─── RESPONSIVE ─── */
@media(max-width:1100px) {
    .grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:768px) {
    .grid {
        grid-template-columns: repeat(2,1fr);
        gap: 14px
    }

    .tabs-bar {
        padding: 12px 16px
    }

    .tab {
        padding: 10px 16px;
        font-size: 0.9rem
    }

    .content {
        padding: 24px 16px 60px
    }

    .card-top {
        height: 130px
    }
}

@media(max-width:480px) {
    .grid {
        gap: 10px
    }

    .tab {
        padding: 9px 13px;
        font-size: 0.82rem
    }

    .tab-icon {
        width: 26px;
        height: 26px
    }

    .card-top {
        height: 115px
    }
}