/* Games Pages Styles */

/* Sidebar Layout */
.page-with-sidebar {
    display: flex;
    border-top: 1px solid rgba(var(--palette-neutral-rgb), .3);
}

.page-with-sidebar__content {
    flex: 1;
    background: var(--palette-white);
    padding: var(--sp-8)
}

/* Mobile: move sidebar to bottom */
@media screen and (max-width: 768px) {
    .page-with-sidebar {
        flex-direction: column;
    }
    
    .page-with-sidebar__content {
        padding: var(--sp-4);
    }
}

/* Sidebar */
.sidebar {
    padding: var(--sp-4);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    grid-gap: var(--sp-1);
    gap: var(--sp-1)
}

.sidebar__link {
    display: flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-radius: 8px;
    color: var(--palette-foreground);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .15s linear, color .15s linear
}

.sidebar__link:hover {
    background: rgba(var(--palette-primary-rgb), .1);
    color: var(--palette-primary);
    text-decoration: none
}

.sidebar__link--active {
    background: var(--palette-primary);
    color: var(--palette-white)
}

.sidebar__link--active:hover {
    background: var(--palette-primary-darken-1);
    color: var(--palette-white)
}

.sidebar__icon {
    margin-right: var(--sp-3);
    flex-shrink: 0
}

.sidebar__section {
    margin: var(--sp-4) 0
}

.sidebar__section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--palette-neutral);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-1)
}

.sidebar__submenu {
    display: flex;
    flex-direction: column;
    grid-gap: 2px;
    gap: 2px
}

.sidebar__sublink {
    padding-left: var(--sp-5);
    font-weight: 400;
    font-size: 14px
}

@media screen and (min-width: 1000px) {
    .page-with-sidebar__content {
        padding: var(--sp-10) var(--sp-12)
    }

    .sidebar {
        width: 290px;
    }
}

/* Content wrapper for dobble.html */
.game-description-content {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

/* Games List Page */
.page-games {
    padding: var(--sp-6) 0;
    padding-bottom: var(--sp-12)
}

.page-games__title {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: var(--sp-8);
    text-align: center
}

.page-games__container {
    display: flex;
    flex-direction: column;
    grid-gap: var(--sp-4);
    gap: var(--sp-4);
}

@media screen and (min-width: 768px) {
    .page-games__title {
        font-size: 40px;
        line-height: 55px
    }
}

@media screen and (min-width: 1000px) {
    .page-games {
        padding: var(--sp-10) 0;
        padding-bottom: 120px
    }

    .page-games__container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        grid-gap: var(--sp-8);
    }

    .page-games__item {
        width: calc(50% - var(--sp-2))
    }
}

@media screen and (min-width: 1280px) {
    .page-games__item {
        width: calc(33.333% - var(--sp-3))f
    }
}

/* Game Card */
.game-card {
    background: var(--palette-white);
    border-radius: 10px;
    padding: var(--sp-4);
    display: flex;
    transition: box-shadow .25s linear;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    max-width: 400px;
    flex-basis: auto;
    gap: var(--sp-3);
}

.game-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12)
}


.game-card__image {
    width: 100%;
    border-radius: 8px
}

.game-card__image .base-photo__image {
    width: 100%;
    height: 100%
}

.game-card__content {
    display: flex;
    flex-direction: column;
    flex: 1
}

.game-card__title {
    font-size: 20px;
    font-weight: 700;
    /*color: var(--palette-primary);*/
    margin-bottom: var(--sp-2)
}

.game-card__description {
    font-size: 14px;
    line-height: 22px;
    color: var(--palette-foreground);
    margin-bottom: var(--sp-4);
    flex: 1
}

.game-card__buttons {
    display: flex;
    grid-gap: var(--sp-3);
    gap: var(--sp-3)
}

.game-card__btn-description,
.game-card__btn-play {
    flex: 1;
    font-size: 14px
}

@media screen and (min-width: 768px) {
    .game-card {
        padding: var(--sp-4)
    }

    .game-card__title {
        font-size: 22px
    }
}

/* Game Description Page */
.page-game-description {
    padding: var(--sp-6) 0;
    padding-bottom: var(--sp-12)
}

@media screen and (min-width: 1000px) {
    .page-game-description {
        padding: var(--sp-10) 0;
    }
}

/* Game Description Header - reordered per request */
.game-description-header {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid rgba(var(--palette-neutral-rgb), .3)
}

.game-description-header__content {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-6)
}

.game-description-header__title {
    font-size: 32px;
    line-height: 110%;
    margin-bottom: var(--sp-3);
    color: var(--palette-foreground)
}

.game-description-header__brief {
    font-size: 15px;
    line-height: 25px;
    color: var(--palette-foreground);
    margin-bottom: var(--sp-6)
}

.game-description-header__buttons {
    display: flex;
    flex-direction: column;
    grid-gap: var(--sp-3);
    margin-top: var(--sp-6)
}

.game-description-header__new-image-container {
    width: 100%;
    border-radius: 10px;
    overflow: hidden
}

.game-description-header__new-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px
}

.game-description-header__btn-play {
    width: 100%;
    font-size: 15px;
    background: var(--palette-primary-second-darken-1);
}

.game-description-header__btn-play:hover {
    background: var(--palette-primary-second-darken-2);
}

.game-description-header__btn-settings {
    width: 100%;
    font-size: 15px;
}

@media screen and (min-width: 768px) {
    .game-description-header__buttons {
        flex-direction: row;
        justify-content: space-between;
    }

    .game-description-header__btn-settings,
    .game-description-header__btn-play {
        width: auto;
        min-width: 300px;
        height: 50px;
    }
}

@media screen and (min-width: 1000px) {
    .game-description-header__title {
        font-size: 48px
    }
}

/* Table of Contents */
.table-of-contents {
    background: var(--palette-input-bg);
    padding: var(--sp-6);
    border-radius: 10px;
    margin-bottom: var(--sp-8)
}

.table-of-contents__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--sp-4);
    color: var(--palette-foreground)
}

.table-of-contents__list {
    list-style: none;
    padding: 0;
    margin: 0
}

.table-of-contents__item {
    margin-bottom: var(--sp-2)
}

.table-of-contents__link {
    color: var(--palette-foreground);
    text-decoration: none;
    font-size: 16px;
    transition: color .15s linear
}

.table-of-contents__link:hover {
    color: var(--palette-primary)
}

/* Game Description Sections */
.game-description-sections {
    display: flex;
    flex-direction: column;
    grid-gap: var(--sp-8);
    gap: var(--sp-8);
    margin-bottom: var(--sp-10)
}

.game-description-section {
    background: var(--palette-white);
    border-radius: 10px;
    padding: var(--sp-6)
}

.game-description-section__title {
    font-size: 22px;
    font-weight: 700;
    color: #000; /* Black headings as requested */
    margin-bottom: var(--sp-4)
}

.game-description-section__content {
    font-size: 15px;
    line-height: 25px;
    color: var(--palette-foreground)
}

.game-description-section__content p {
    margin-bottom: var(--sp-4)
}

.game-description-section__content p:last-child {
    margin-bottom: 0
}

.game-description-section__content ol,
.game-description-section__content ul {
    margin-left: var(--sp-6);
    margin-bottom: var(--sp-4)
}

.game-description-section__content li {
    margin-bottom: var(--sp-2)
}

.game-description-sections ul li {
    list-style-type: disc;
}

@media screen and (min-width: 768px) {
    .game-description-section__title {
        font-size: 26px
    }

    .game-description-section__content {
        font-size: 16px;
        line-height: 28px
    }
}

/* Game Description Footer */
.game-description-footer {
    text-align: center
}

.game-description-footer__btn {
    font-size: 16px;
    min-width: 250px
}

@media screen and (min-width: 768px) {
    .game-description-footer__btn {
        font-size: 18px;
        min-width: 300px
    }
}