/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
.spacer {
    height: 1.5rem;
}
.battle-entry-single .battle-entry-video {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.battle-entry-single .battle-entry-video iframe,
.battle-entry-single .battle-entry-video video,
.battle-entry-single .battle-entry-video .wp-video-shortcode {
    width: 100%;
    max-width: 100%;
    /* height: auto;
    min-height: 500px; */
}
.battle-entry-video .wp-video {
    /* max-width: 100%;
    height: auto; */
    width: 100% !important;
}

.battle-entry-single .battle-entry-header {
    margin-bottom: 1rem;
}

.battle-entry-single .battle-entry-title {
    font-size: 2rem;
    margin: 0;
}

.battle-entry-single .battle-entry-week {
    color: #666;
    margin-top: 0.4rem;
    font-size: 0.95rem;
}

.battle-entry-single .battle-entry-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #9A9A9A;
    font-size: 0.95rem;
}

.battle-entry-single .battle-entry-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.battle-entry-single .battle-entry-like {
    margin-bottom: 1.5rem;
}

.battle-entry-single .battle-entry-like-button {
    background: #24292f;
    border: none;
    color: #fff;
    padding: 0.75rem 1.2rem;
    border-radius: 0.35rem;
    cursor: pointer;
}

.battle-entry-single .battle-entry-like-button.liked {
    background: #1e73be;
}

.battle-entry-single .battle-entry-like-button:hover {
    background: #444;
}

.battle-entry-single .battle-entry-like-button.liked:hover {
    background: #1665a1;
}

.battle-entry-single .battle-entry-content {
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .battle-entry-single .battle-entry-stats {
        flex-direction: column;
    }

    .battle-entry-single .battle-entry-like-button {
        width: 100%;
    }
}

.battle-entry-archive {
    margin: 2rem 0;
}

.battle-entry-archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: -0.75rem;
}

.battle-entry-archive-item {
    flex: 1 1 calc(33.333% - 1.5rem);
    max-width: calc(33.333% - 1.5rem);
    box-sizing: border-box;
    background: #1c1c1c;
    border: 1px solid #2A2A2A;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.battle-entry-archive-item:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.battle-entry-archive-link {
    color: inherit;
    text-decoration: none;
    display: block;
    height: 100%;
}

.battle-entry-archive-thumbnail {
    overflow: hidden;
    background: #f7f7f7;
    height: 250px;
}

.battle-entry-archive-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.battle-entry-thumbnail-placeholder {
    padding: 7rem 1rem;
    text-align: center;
    color: #777;
    font-size: 0.95rem;
    font-weight: 600;
}

.battle-entry-archive-meta {
    padding: 1rem;
}

.battle-entry-archive-rank,
.battle-entry-archive-artist,
.battle-entry-archive-score {
    display: block;
    margin-bottom: 0.6rem;
    color:#D4D4D4;
    font-size: 0.95rem;
}

.battle-entry-archive-title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    line-height: 1.35;
    color: #222;
}

.battle-entry-archive-pagination {
    margin-top: 1.5rem;
    text-align: center;
}

.battle-entry-archive-pagination ul.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1.2rem 0.2rem;   
    text-decoration: none;
    /* transition: background-color 0.2s ease, border-color 0.2s ease; */
}
.battle-entry-archive-pagination ul.page-numbers li{
    list-style: none;
}

.battle-entry-archive-pagination li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.2rem;
    padding: 0 0.75rem;
    border: 1px solid #3f3f3f;
    border-radius: 0.35rem;
    color: #EAEAEA;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.battle-entry-archive-pagination li .page-numbers.current,
.battle-entry-archive-pagination li .page-numbers:hover {
    background-color: #24292f;
    border-color: #24292f;
    color: #fff;
}

@media (max-width: 960px) {
    .battle-entry-archive-item {
        flex: 1 1 calc(50% - 1.5rem);
        max-width: calc(50% - 1.5rem);
    }
}

.battle-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    min-width: 550px;
}
.battle-table-wrapper {
    width: 100%;
    overflow: auto;
}

.battle-table th,
.battle-table td {
    border: 1px solid #2A2A2A;
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: middle;
}

.battle-table th {
    background: #1C1C1C;
    font-weight: 600;
}

.battle-my-account-actions {
    min-width: 220px;
}

.battle-my-account-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    justify-content: center;
}

.battle-my-account-action-buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border-radius: 0.4rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.battle-my-account-action-buttons .button.edit {
    background: #0d6efd;
    color: #fff;
}

.battle-my-account-action-buttons .button.delete {
    background: #dc3545;
    color: #fff;
}

.battle-pagination {
    margin-top: 1.5rem;
    text-align: center;
}

.battle-pagination ul.page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
}

.battle-pagination li {
    list-style: none;
}

.battle-pagination li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid #3f3f3f;
    border-radius: 0.35rem;
    color:#EAEAEA;
    text-decoration: none;
}

.battle-pagination li .page-numbers.current,
.battle-pagination li .page-numbers:hover {
    background: #24292f;
    border-color: #24292f;
    color: #fff;
}
form.battle-my-account-delete-form {
    margin-bottom: 0;
}
.battle-form-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.battle-form-left-column {
    flex: 0 0 60%;
    max-width: 500px;
    margin-top: 30px;
}

.battle-form-left-column input, .battle-form-left-column select {
    width: 100%;
}

div#thumbnail_preview_container {
    max-width: 350px;
}
table tr th:last-child {
    text-align: center;
}

@media (max-width: 680px) {
    .battle-entry-archive-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}