/* ==========================================================================
   Base Styles
   ========================================================================== */
:root {
    --primary-bg: #272B30;
    --secondary-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-color: #fff;
    --input-bg: rgba(255, 255, 255, 0.055);
    --input-bg-focus: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.11);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --transition-base: 0.3s ease;
}

@property --map-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #272B30;
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-page-heading {
    min-width: 0;
}

.admin-page-title {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-page-subtitle {
    margin-top: 0.25rem;
}

.admin-page-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.admin-page-tools .btn {
    white-space: nowrap;
}

.admin-view-toggle .btn.active,
.admin-view-toggle .btn[aria-pressed="true"] {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
}

.btn-admin-frontend {
    --bs-btn-color: #9ecfff;
    --bs-btn-border-color: #7eb8f5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(126, 184, 245, 0.18);
    --bs-btn-hover-border-color: #a8d4ff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(126, 184, 245, 0.28);
    --bs-btn-active-border-color: #c2e0ff;
    color: #9ecfff;
    border-color: #7eb8f5;
}

main.container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Form controls (diskret lysere end sidebaggrund)
   ========================================================================== */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
}

.form-select {
    background-color: #3a4249;
    border-color: rgba(255, 255, 255, 0.28);
    color: #f5f7fa;
}

.form-select option {
    background-color: #272b30;
    color: #fff;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg-focus);
    border-color: rgba(55, 90, 127, 0.65);
    color: var(--text-color);
    box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.2);
}

.form-select:focus {
    background-color: #424b54;
    color: #fff;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.form-control:disabled,
.form-select:disabled {
    background-color: rgba(255, 255, 255, 0.03);
    opacity: 0.75;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar-sep {
    user-select: none;
}

.navbar {
    width: 100%;
}

.navbar-brand {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.navbar-lang-item {
    margin-left: 0.75rem;
}

.navbar-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.15rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

@media (max-width: 991.98px) {
    .navbar-lang-item {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .navbar-lang {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

.navbar-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.15);
}

.navbar-lang-btn:hover,
.navbar-lang-btn:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
}

.navbar-lang-btn.is-active {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.18);
}

/* Left: Home same size as Admin, no border (1:1 from stregkoden.com) */
.navbar-admin .navbar-admin-left .nav-link,
.navbar-admin .navbar-admin-left .nav-link:hover,
.navbar-admin .navbar-admin-left .nav-link:focus {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.page-title {
    font-size: 2rem;
    margin: 0;
}

/* Backend: sticky action bar (Back / Save) */
body.admin-has-sticky-actions {
    padding-bottom: 0;
}

.admin-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    margin-top: 1rem;
    padding: 0.25rem 0;
    background: transparent;
    border-top: none;
    box-shadow: none;
}

.map-action-btn {
    min-width: 100px;
}

body.admin-read-only .admin-sticky-actions .btn-success,
body.admin-read-only .admin-sticky-actions button[type="submit"] {
    opacity: 0.45;
    pointer-events: none;
}

body.admin-read-only .map-drag-handle {
    opacity: 0.35;
    cursor: not-allowed;
}

body.admin-read-only .operators-admin-item,
body.admin-read-only .operators-admin-item:active {
    cursor: default;
}

.admin-readonly-banner {
    border-color: rgba(13, 202, 240, 0.35);
}

.map-save-btn:hover,
.map-save-btn:focus {
    border-color: #28a745;
}

.maps-list-card {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.maps-category-card .maps-category-header {
    background: rgba(255, 255, 255, 0.03);
}

.maps-category-toggle {
    color: var(--text-color, #fff);
    font-weight: 600;
}

.maps-category-toggle:hover,
.maps-category-toggle:focus {
    color: #fff;
}

.maps-category-toggle .maps-category-chevron {
    font-size: 0.85rem;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.maps-category-toggle[aria-expanded="false"] .maps-category-chevron {
    transform: rotate(-90deg);
}

.maps-category-card[data-maps-category="rank"] .maps-category-title {
    color: #e8a85c;
}

.maps-category-card[data-maps-category="casual"] .maps-category-title {
    color: #6eb5f7;
}

.maps-category-card[data-maps-category="other"] .maps-category-title {
    color: #b0b8bf;
}

/* Admin: operators sort order */
.operators-admin-edit-table .form-control-sm,
.operators-admin-edit-table .form-select-sm {
    min-width: 5.5rem;
}

.operators-admin-edit-icon-cell {
    vertical-align: middle;
}

.operators-admin-edit-icon-preview {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    margin-bottom: 0.35rem;
}

.operators-admin-edit-icon-preview--empty {
    color: #ffc107;
    line-height: 32px;
    text-align: center;
}

.operators-admin-side + .operators-admin-side {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.operators-admin-side-header {
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.operators-admin-side-toggle {
    color: var(--text-color, #fff);
    font-weight: 600;
}

.operators-admin-side-toggle:hover,
.operators-admin-side-toggle:focus {
    color: #fff;
}

.operators-admin-side-title--attacker {
    color: #6eb5f7;
}

.operators-admin-side-title--defender {
    color: #e8a85c;
}

.operators-admin-chevron {
    font-size: 0.85rem;
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.operators-admin-side-toggle[aria-expanded="false"] .operators-admin-chevron {
    transform: rotate(-90deg);
}

.operators-admin-sortable {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0.75rem 1rem;
    max-width: calc(16 * 72px + 15 * 2px);
}

.operators-admin-item {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
    cursor: grab;
    user-select: none;
    flex: 0 0 72px;
    touch-action: none;
}

.operators-admin-list-head {
    display: none;
}

.operators-admin-list-id,
.operators-admin-list-body {
    display: none;
}

.operators-admin-icon--empty {
    display: block;
    width: 72px;
    height: 72px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.operators-admin-view--list .operators-admin-list-head {
    display: grid;
    grid-template-columns: 3rem 2.25rem minmax(0, 1fr) 5.5rem;
    gap: 0.65rem;
    align-items: center;
}

.operators-admin-view--list .operators-admin-sortable {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    max-width: none;
    padding: 0;
}

.operators-admin-view--list .operators-admin-item {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 3rem 2.25rem minmax(0, 1fr) 5.5rem;
    gap: 0.65rem;
    align-items: center;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.operators-admin-view--list .operators-admin-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.operators-admin-view--list .operators-admin-list-id {
    display: block;
    font-size: 0.85rem;
}

.operators-admin-view--list .operators-admin-list-body {
    display: contents;
}

.operators-admin-view--list .operators-admin-icon,
.operators-admin-view--list .operators-admin-icon--empty {
    width: 28px;
    height: 28px;
}

.operators-admin-view--list .operators-admin-list-title {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operators-admin-view--list .operators-admin-list-season {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.operators-admin-item:active {
    cursor: grabbing;
}

.operators-admin-page--readonly .operators-admin-item,
.operators-admin-sortable--static .operators-admin-item {
    cursor: default;
}

.operators-admin-page--readonly .operators-admin-item:active,
.operators-admin-sortable--static .operators-admin-item:active {
    cursor: default;
}

.operators-focus-list-static {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 3rem;
}

.operators-focus-row {
    display: grid;
    grid-template-columns: 1.5rem 40px minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.operators-focus-row-rank {
    font-size: 0.85rem;
    font-weight: 600;
}

.operators-focus-row-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
}

.operators-focus-row-icon--empty {
    display: block;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.operators-focus-row-name {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operators-focus-row-actions {
    display: inline-flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.operators-admin-item-dragging {
    opacity: 0.45;
}

.operators-admin-icon {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.operators-admin-remove-form {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.operators-admin-item:hover .operators-admin-remove-form,
.operators-admin-item:focus-within .operators-admin-remove-form {
    opacity: 1;
}

.operators-admin-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.operators-admin-remove-btn:hover {
    background: rgba(200, 50, 50, 0.9);
}

.operators-focus-sortable {
    min-height: 72px;
}

.map-filename-input,
.map-text-input {
    width: 24ch;
    max-width: 24ch;
}

.map-sort-input {
    width: 10ch;
    max-width: 10ch;
}

.weapons-editor-thumb-col,
.weapons-editor-thumb-cell {
    display: none;
}

body.weapons-editor-on .weapons-filter-search,
body.weapons-editor-on #weapons-show-uncategorized,
body.weapons-editor-on #weapons-add-row {
    display: none !important;
}

body.weapons-editor-on #weapons-filter-card .weapons-filter-cat {
    max-width: 18rem;
}

body.weapons-editor-on #weapons-list.card,
body.weapons-editor-on #weapons-list .card-body,
body.weapons-editor-on .weapons-admin-table-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-height: none;
    overflow: visible !important;
}

body.weapons-editor-on .weapons-admin-table,
body.weapons-editor-on .weapons-admin-table > :not(caption) > * > * {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.weapons-editor-on .weapons-admin-table {
    display: block;
    width: 100%;
    table-layout: auto !important;
}

body.weapons-editor-on .weapons-admin-table thead {
    display: none;
}

body.weapons-editor-on .weapons-admin-table tbody {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}

body.weapons-editor-on .weapons-admin-table tr[data-weapon-row="1"] {
    display: flex;
    width: auto !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: none !important;
    cursor: grab;
}

body.weapons-editor-on .weapons-admin-table tr[data-weapon-row="1"].is-admin-filtered-out {
    display: none !important;
}

body.weapons-editor-on .weapons-admin-table tr[data-weapon-row="1"]:active {
    cursor: grabbing;
}

body.weapons-editor-on .weapons-admin-table td {
    display: none;
    padding: 0;
    border: 0 !important;
    background: none !important;
}

body.weapons-editor-on .weapons-admin-table td.weapons-editor-thumb-cell {
    display: block;
}

body.weapons-editor-on .weapons-editor-thumb {
    display: block;
    height: 72px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

body.weapons-editor-on .weapons-editor-thumb--empty {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.08);
}

body.weapons-editor-on .weapons-admin-table tr.is-weapon-dragging {
    opacity: 0.4;
}

body.weapons-editor-on .weapons-admin-table tr.is-weapon-uncategorized td[data-categories-cell="1"] {
    background: none;
    box-shadow: none;
}

.weapons-editor-empty {
    display: none;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.75rem 0 0;
}

body.weapons-editor-on .weapons-editor-empty.is-visible {
    display: block;
}

.maps-list-table {
    font-size: 0.82rem;
    table-layout: fixed;
    width: 100%;
}

.maps-list-table > :not(caption) > * > * {
    padding: 0.2rem 0.4rem;
    vertical-align: middle;
}

.maps-list-table thead th {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    white-space: nowrap;
}

.maps-list-table .form-control-sm {
    min-height: 1.55rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

.maps-list-table .btn-sm {
    --bs-btn-padding-y: 0.1rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.72rem;
    line-height: 1.2;
}

.maps-list-cats {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
}

.maps-list-cats .form-check {
    margin-right: 0 !important;
    min-height: 0;
    padding-left: 1.15rem;
}

.maps-list-cats .form-check-input {
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.12rem;
}

.maps-list-cats .form-check-label {
    font-size: 0.72rem;
    line-height: 1.1;
    padding-left: 0.1rem;
}

.map-toggle-details-col {
    width: 9rem;
}

.map-toggle-details-cell {
    padding: 0 !important;
    vertical-align: stretch !important;
    cursor: pointer;
    user-select: none;
}

.map-toggle-details-hit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 2rem;
    height: 100%;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
}

.map-toggle-details-cell:hover,
.map-toggle-details-hit:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Empty space in the category column should also toggle details */
.maps-list-table tr[data-map-row="1"] > td[data-categories-cell="1"] {
    cursor: pointer;
}

.map-drag-handle {
    cursor: grab;
    user-select: none;
    color: #9aa4ad;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.25rem 0.35rem;
}

.map-row-dragging {
    opacity: 0.55;
}

.map-row-inactive {
    opacity: 0.55;
}

.map-row-inactive .map-toggle-active-btn {
    opacity: 1;
}

.map-row-details > td {
    background: rgba(0, 0, 0, 0.28);
    border-top: 0;
    padding: 0.75rem 0.85rem 0.9rem !important;
}

.map-row-details-inner {
    padding: 0.55rem 0.35rem 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.map-row-details.is-open {
    display: table-row;
}

.map-row-details-inner .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
}

.map-row-details .form-control-sm {
    min-height: 2.1rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
    line-height: 1.3;
}

.map-row-details .map-filename-input {
    width: 28ch;
    max-width: 28ch;
}

.map-row-details .map-sort-input {
    width: 12ch;
    max-width: 12ch;
}

.map-row-details .btn-sm {
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-font-size: 0.82rem;
}

.map-row-details-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 0.55rem;
}

.maps-fav-item-dragging,
.maps-focus-item-dragging {
    opacity: 0.55;
}

.maps-fav-sortable .maps-fav-item,
.maps-focus-sortable .maps-focus-item {
    user-select: none;
}

.maps-fav-sortable .map-drag-handle,
.maps-focus-sortable .map-drag-handle {
    flex-shrink: 0;
}

.maps-fav-select,
.maps-focus-select {
    font-size: 0.95rem;
    min-height: 2.1rem;
    background-color: #424b54;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.maps-fav-select option,
.maps-focus-select option {
    background-color: #272b30;
    color: #fff;
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
}

.maps-fav-select option:checked,
.maps-fav-select option:hover,
.maps-focus-select option:checked,
.maps-focus-select option:hover {
    background-color: #375a7f;
    color: #fff;
}

/* Frontend: maps-oversigt */
:root {
    --map-mode-all: #8a939b;
    --map-mode-all-text: #fff;
    --map-mode-rank: #e05252;
    --map-mode-rank-text: #fff;
    --map-mode-casual: #4a9eed;
    --map-mode-casual-text: #fff;
    --map-mode-other: #e6c229;
    --map-mode-other-text: #1a1a1a;
}

.frontend-maps-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.frontend-maps-filter-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: var(--secondary-bg);
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.frontend-maps-filter-btn--all {
    border-color: color-mix(in srgb, var(--map-mode-all) 55%, transparent);
}

.frontend-maps-filter-btn--rank {
    border-color: color-mix(in srgb, var(--map-mode-rank) 55%, transparent);
}

.frontend-maps-filter-btn--casual {
    border-color: color-mix(in srgb, var(--map-mode-casual) 55%, transparent);
}

.frontend-maps-filter-btn--other {
    border-color: color-mix(in srgb, var(--map-mode-other) 55%, transparent);
}

.frontend-maps-filter-btn--all.is-active {
    background: var(--map-mode-all);
    border-color: var(--map-mode-all);
    color: var(--map-mode-all-text);
}

.frontend-maps-filter-btn--rank.is-active {
    background: var(--map-mode-rank);
    border-color: var(--map-mode-rank);
    color: var(--map-mode-rank-text);
}

.frontend-maps-filter-btn--casual.is-active {
    background: var(--map-mode-casual);
    border-color: var(--map-mode-casual);
    color: var(--map-mode-casual-text);
}

.frontend-maps-filter-btn--other.is-active {
    background: var(--map-mode-other);
    border-color: var(--map-mode-other);
    color: var(--map-mode-other-text);
}

.frontend-maps-filter-btn:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.08);
}

.frontend-map-card.is-filtered-out {
    display: none;
}

/* Frontend: player cards */
.frontend-playercards-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.frontend-playercards-filter-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.frontend-playercards-filter-btn.is-active {
    background: rgba(126, 184, 245, 0.25);
    border-color: #7eb8f5;
    color: #cfe6ff;
}

.frontend-playercards-filter-btn:hover:not(.is-active) {
    border-color: rgba(255, 255, 255, 0.4);
}

.frontend-playercard.is-filtered-out {
    display: none;
}

.frontend-playercards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1200px) {
    .frontend-playercards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .frontend-playercards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .frontend-playercards-grid {
        grid-template-columns: 1fr;
    }
}

.frontend-playercard {
    margin: 0;
    min-width: 0;
}

.frontend-playercard.is-openable {
    cursor: pointer;
}

.frontend-playercard.is-openable:focus-visible {
    outline: 2px solid rgba(126, 184, 245, 0.9);
    outline-offset: 2px;
}

/* Red border + white spin marker (same technique as maps) */
.frontend-playercard-thumb {
    --map-border-angle: 0deg;
    --pc-border: 2px;
    position: relative;
    padding: var(--pc-border);
    border: none;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.15);
    overflow: visible;
    transition: box-shadow var(--transition-base);
}

.frontend-playercard:hover .frontend-playercard-thumb {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        #c0392b 14deg,
        #c0392b 360deg
    );
    box-shadow: var(--shadow-md);
    animation: frontend-map-border-spin 3.5s linear infinite;
    z-index: 2;
}

.frontend-playercard-media {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: calc(0.375rem - 2px);
    overflow: hidden;
    line-height: 0;
    background: #1e2126;
}

.frontend-playercard-img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.2s ease, transform 0.22s ease;
}

.frontend-playercard-img--static {
    position: relative;
    z-index: 1;
}

.frontend-playercard-img--hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.frontend-playercard.has-hover:hover .frontend-playercard-img--static {
    opacity: 0;
}

.frontend-playercard.has-hover:hover .frontend-playercard-img--hover {
    opacity: 1;
}

.frontend-playercard:hover .frontend-playercard-media .frontend-playercard-img {
    transform: scale(1.04);
}

.frontend-playercard-thumb--empty .frontend-playercard-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 364 / 200;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    line-height: 1.2;
}

.frontend-playercard-title {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

body.playercard-full-open {
    overflow: hidden;
}

.playercard-full-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.88);
}

.playercard-full-modal.is-open {
    display: flex;
}

.playercard-full-image {
    max-width: min(99vw, 1500px);
    max-height: 98vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.playercard-full-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
}

.playercard-full-close:hover {
    color: #fff;
}

.playercard-admin-preview-cell {
    width: 4.5rem;
    text-align: center;
}

.playercard-admin-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.2rem;
    background: #1e2126;
    overflow: hidden;
    cursor: pointer;
}

.playercard-admin-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    cursor: default;
    font-size: 0.8rem;
}

.playercard-admin-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playercard-admin-thumb:hover {
    border-color: rgba(255, 255, 255, 0.45);
}

/* Frontend: charms (same layout/effect as cards) */
.frontend-charms-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.frontend-charms-filter-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.frontend-charms-filter-btn.is-active {
    background: rgba(126, 184, 245, 0.25);
    border-color: #7eb8f5;
    color: #cfe6ff;
}

.frontend-charms-filter-btn:hover:not(.is-active) {
    border-color: rgba(255, 255, 255, 0.4);
}

.frontend-charm.is-filtered-out {
    display: none;
}

.frontend-charms-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1200px) {
    .frontend-charms-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .frontend-charms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .frontend-charms-grid {
        grid-template-columns: 1fr;
    }
}

.frontend-charm {
    margin: 0;
    min-width: 0;
}

.frontend-charm.is-openable {
    cursor: pointer;
}

.frontend-charm.is-openable:focus-visible {
    outline: 2px solid rgba(126, 184, 245, 0.9);
    outline-offset: 2px;
}

.frontend-charm-thumb {
    --map-border-angle: 0deg;
    --pc-border: 2px;
    position: relative;
    padding: var(--pc-border);
    border: none;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.15);
    overflow: visible;
    transition: box-shadow var(--transition-base);
}

.frontend-charm:hover .frontend-charm-thumb {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        #c0392b 14deg,
        #c0392b 360deg
    );
    box-shadow: var(--shadow-md);
    animation: frontend-map-border-spin 3.5s linear infinite;
    z-index: 2;
}

.frontend-charm-media {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: calc(0.375rem - 2px);
    overflow: hidden;
    line-height: 0;
    background: #1e2126;
}

.frontend-charm-img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.2s ease, transform 0.22s ease;
}

.frontend-charm-img--static {
    position: relative;
    z-index: 1;
}

.frontend-charm-img--hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.frontend-charm.has-hover:hover .frontend-charm-img--static {
    opacity: 0;
}

.frontend-charm.has-hover:hover .frontend-charm-img--hover {
    opacity: 1;
}

.frontend-charm:hover .frontend-charm-media .frontend-charm-img {
    transform: scale(1.04);
}

.frontend-charm-thumb--empty .frontend-charm-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 364 / 200;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    line-height: 1.2;
}

.frontend-charm-title {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

body.charm-full-open {
    overflow: hidden;
}

.charm-full-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.88);
}

.charm-full-modal.is-open {
    display: flex;
}

.charm-full-image {
    max-width: min(99vw, 1500px);
    max-height: 98vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.charm-full-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
}

.charm-full-close:hover {
    color: #fff;
}

/* Frontend: weapons */
.frontend-weapons-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.frontend-weapons-filter-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.frontend-weapons-filter-btn.is-active {
    background: rgba(126, 184, 245, 0.25);
    border-color: #7eb8f5;
    color: #cfe6ff;
}

.frontend-weapons-filter-btn:hover:not(.is-active) {
    border-color: rgba(255, 255, 255, 0.4);
}

.frontend-weapon.is-filtered-out {
    display: none;
}

.frontend-weapons-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1400px) {
    .frontend-weapons-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .frontend-weapons-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .frontend-weapons-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .frontend-weapons-grid {
        grid-template-columns: 1fr;
    }
}

.frontend-weapon {
    --pc-border: 2px;
    position: relative;
    margin: 0;
    min-width: 0;
}

.frontend-weapon.is-openable {
    cursor: pointer;
}

.frontend-weapon.is-openable:focus-visible {
    outline: 2px solid rgba(126, 184, 245, 0.9);
    outline-offset: 2px;
}

.frontend-weapon-thumb {
    --map-border-angle: 0deg;
    --pc-border: 2px;
    position: relative;
    padding: var(--pc-border);
    border: none;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.15);
    overflow: visible;
    transition: box-shadow var(--transition-base);
}

.frontend-weapon:hover .frontend-weapon-thumb {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        #c0392b 14deg,
        #c0392b 360deg
    );
    box-shadow: var(--shadow-md);
    animation: frontend-map-border-spin 3.5s linear infinite;
    z-index: 2;
}

.frontend-weapon-media {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: calc(0.375rem - 2px);
    overflow: hidden;
    line-height: 0;
    background: #1e2126;
}

.frontend-weapon-img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.2s ease, transform 0.22s ease;
}

.frontend-weapon-img--static {
    position: relative;
    z-index: 1;
}

.frontend-weapon-img--hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.frontend-weapon.has-hover:hover .frontend-weapon-img--static {
    opacity: 0;
}

.frontend-weapon.has-hover:hover .frontend-weapon-img--hover {
    opacity: 1;
}

.frontend-weapon:hover .frontend-weapon-media .frontend-weapon-img {
    transform: scale(1.04);
}

.frontend-weapon-thumb--empty .frontend-weapon-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 370 / 205;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    line-height: 1.2;
}

.frontend-weapon-title {
    position: absolute;
    top: calc(var(--pc-border, 2px) + 0.35rem);
    left: calc(var(--pc-border, 2px) + 0.45rem);
    z-index: 5;
    margin: 0;
    max-width: calc(100% - 1rem);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.2;
    color: #fff;
    pointer-events: none;
    -webkit-text-stroke: 2px #000;
    paint-order: stroke fill;
}

body.weapon-full-open {
    overflow: hidden;
}

.weapon-full-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.88);
}

.weapon-full-modal.is-open {
    display: flex;
}

.weapon-full-image {
    max-width: min(99vw, 1500px);
    max-height: 98vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.weapon-full-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
}

.weapon-full-close:hover {
    color: #fff;
}

/* Backend: weapons list (many rows) */
.weapons-admin-table-wrap {
    max-height: min(70vh, 900px);
    overflow: auto;
}

.weapons-admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1e2126;
}

.weapons-admin-table tr.is-admin-filtered-out {
    display: none;
}

.weapons-admin-table tr.is-weapon-uncategorized td[data-categories-cell="1"] {
    background: rgba(255, 193, 7, 0.12);
    box-shadow: inset 3px 0 0 rgba(255, 193, 7, 0.75);
}

.weapons-admin-table .weapons-category-select,
.charms-category-select {
    min-width: 9.5rem;
    max-width: 14rem;
}

/* Backend: collapsible sections (localStorage) */
.admin-collapse-group .card {
    margin-bottom: 0.65rem;
}

.admin-collapse-group .card:last-child {
    margin-bottom: 0;
}

.admin-collapse-toggle {
    color: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}

.admin-collapse-toggle:hover,
.admin-collapse-toggle:focus {
    color: inherit;
}

.admin-collapse-toggle:focus-visible {
    outline: 2px solid rgba(126, 184, 245, 0.75);
    outline-offset: 2px;
}

.admin-collapse-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    opacity: 0.75;
}

.admin-collapse-toggle[aria-expanded="false"] .admin-collapse-chevron {
    transform: rotate(-90deg);
}

.maps-list-cats--compact .form-check {
    margin-right: 0.35rem;
}

.maps-list-cats--compact .form-check-label {
    font-size: 0.78rem;
}

.frontend-maps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 992px) {
    .frontend-maps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .frontend-maps-grid {
        grid-template-columns: 1fr;
    }
}

.frontend-map-card {
    --map-border-angle: 0deg;
    position: relative;
    padding: 2px;
    border: none;
    border-radius: 0.375rem;
    overflow: visible;
    background: rgba(255, 255, 255, 0.15);
    transition: box-shadow var(--transition-base), transform 0.25s ease;
}

.maps-focus-grid .frontend-map-card:hover {
    transform: scale(1.28);
    z-index: 10;
}

.frontend-map-card:hover {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        #c0392b 14deg,
        #c0392b 360deg
    );
    box-shadow: var(--shadow-md);
    z-index: 2;
    animation: frontend-map-border-spin 3.5s linear infinite;
}

@keyframes frontend-map-border-spin {
    to {
        --map-border-angle: 360deg;
    }
}

.frontend-map-figure {
    margin: 0;
    position: relative;
    z-index: 1;
    border-radius: calc(0.375rem - 2px);
    overflow: hidden;
}

.frontend-map-card > .frontend-map-thumb-wrap {
    border-radius: calc(0.375rem - 2px);
}

.frontend-map-card .frontend-map-thumb-wrap {
    aspect-ratio: 16 / 9;
    background-color: rgba(0, 0, 0, 0.25);
    background-image: var(--map-static);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    border-radius: calc(0.375rem - 2px);
    transform-origin: center center;
    transition: transform 0.22s ease;
}

.frontend-map-card:hover .frontend-map-thumb-wrap {
    transform: scale(1.1);
}

.frontend-map-card.has-fun-hover:hover .frontend-map-thumb-wrap {
    background-image: var(--map-fun);
}

.frontend-map-thumb-inert {
    border-radius: calc(0.375rem - 2px);
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
}

.frontend-map-card .frontend-map-placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    padding: 1rem;
    text-align: center;
}

.frontend-map-thumb-inert .frontend-map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.frontend-map-card .frontend-map-body {
    padding: 0.75rem 1rem 1rem;
}

.frontend-map-card .frontend-map-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.frontend-map-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.frontend-map-mode-btn {
    border: none;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    line-height: 1.3;
    cursor: pointer;
    transition: opacity var(--transition-base), transform 0.15s ease;
}

.frontend-map-mode-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.frontend-map-mode-btn--all {
    background: var(--map-mode-all);
    color: var(--map-mode-all-text);
}

.frontend-map-mode-btn--rank {
    background: var(--map-mode-rank);
    color: var(--map-mode-rank-text);
}

.frontend-map-mode-btn--casual {
    background: var(--map-mode-casual);
    color: var(--map-mode-casual-text);
}

.frontend-map-mode-btn--other {
    background: var(--map-mode-other);
    color: var(--map-mode-other-text);
}

span.frontend-map-mode-btn {
    cursor: default;
}

.maps-page-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    margin: 0 0 1.5rem;
    padding: 0;
}

.maps-page-header-title {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.maps-page-header h1.maps-page-header-title {
    justify-self: start;
}

.maps-page-header-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
}

.maps-page-header-end .maps-page-header-title {
    display: block;
}

.maps-page-all-link {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-base);
}

.maps-page-all-link:hover {
    color: rgba(255, 255, 255, 0.7);
}

.maps-page-footer-link {
    margin: 2.5rem 0 0;
    padding: 0;
    text-align: center;
}

.maps-focus-section {
    padding-top: 0.25rem;
}

.maps-focus-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.maps-focus-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
}

.maps-focus-heading-icon--liked {
    background: rgba(72, 187, 120, 0.2);
    color: #48bb78;
}

.maps-focus-heading-icon--disliked {
    background: rgba(224, 82, 82, 0.2);
    color: #e05252;
}

.maps-focus-section--liked .frontend-map-card {
    padding: 3px;
    background: rgba(72, 187, 120, 0.55);
}

.maps-focus-section--liked .frontend-map-card:hover {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        rgba(72, 187, 120, 0.95) 14deg,
        rgba(72, 187, 120, 0.95) 360deg
    );
}

.maps-focus-section--disliked .frontend-map-card {
    padding: 3px;
    background: rgba(224, 82, 82, 0.55);
}

.maps-focus-section--disliked .frontend-map-card:hover {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        rgba(224, 82, 82, 0.95) 14deg,
        rgba(224, 82, 82, 0.95) 360deg
    );
}

.maps-focus-section--liked .frontend-map-figure,
.maps-focus-section--liked .frontend-map-card > .frontend-map-thumb-wrap,
.maps-focus-section--liked .frontend-map-card .frontend-map-thumb-wrap,
.maps-focus-section--disliked .frontend-map-figure,
.maps-focus-section--disliked .frontend-map-card > .frontend-map-thumb-wrap,
.maps-focus-section--disliked .frontend-map-card .frontend-map-thumb-wrap {
    border-radius: calc(0.375rem - 3px);
}

.maps-focus-section--liked .frontend-operator-card,
.maps-focus-section--disliked .frontend-operator-card {
    --map-border-angle: 0deg;
    --op-fav-border: 2px;
    position: relative;
    border: none;
    padding: var(--op-fav-border);
    overflow: hidden;
    box-shadow: none;
    isolation: isolate;
}

.maps-focus-section--liked .frontend-operator-card::before,
.maps-focus-section--disliked .frontend-operator-card::before {
    content: '';
    position: absolute;
    inset: var(--op-fav-border);
    z-index: 0;
    background: #1e2126;
    pointer-events: none;
}

.maps-focus-section--liked .frontend-operator-card {
    background: rgba(72, 187, 120, 0.55);
}

.maps-focus-section--liked .frontend-operator-card:hover {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        rgba(72, 187, 120, 0.95) 14deg,
        rgba(72, 187, 120, 0.95) 360deg
    );
    animation: frontend-map-border-spin 3.5s linear infinite;
    z-index: 2;
    box-shadow: var(--shadow-md);
}

.maps-focus-section--disliked .frontend-operator-card {
    background: rgba(224, 82, 82, 0.55);
}

.maps-focus-section--disliked .frontend-operator-card:hover {
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        rgba(224, 82, 82, 0.95) 14deg,
        rgba(224, 82, 82, 0.95) 360deg
    );
    animation: frontend-map-border-spin 3.5s linear infinite;
    z-index: 2;
    box-shadow: var(--shadow-md);
}

.maps-focus-section--liked .frontend-operator-card .frontend-operator-icon,
.maps-focus-section--disliked .frontend-operator-card .frontend-operator-icon {
    position: relative;
    z-index: 1;
    background: transparent;
}

.operators-focus-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
}

.operators-focus-grid .frontend-operator-card,
.operators-focus-grid .operators-focus-slot {
    min-width: 0;
}

@media (max-width: 992px) {
    .operators-focus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .operators-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Operators focus boxes + view toggles */
.operators-view--icons .operators-view-list,
.operators-view--list .operators-view-icons,
.operators-view--detail .operators-view-icons {
    display: none !important;
}

.operators-focus-box {
    padding: 0;
    border: none;
    background: transparent;
}

.operators-focus-box-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.55rem;
}

.operators-focus-slot--empty {
    aspect-ratio: 1;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: transparent;
}

/* Operators fav: same spin border as maps (green like / red dislike) — frame only */
.operators-focus-box--liked .frontend-operator-card,
.operators-focus-box--disliked .frontend-operator-card {
    --map-border-angle: 0deg;
    --op-fav-border: 2px;
    position: relative;
    border: none;
    padding: var(--op-fav-border);
    overflow: hidden;
    box-shadow: none;
    isolation: isolate;
    transition: box-shadow var(--transition-base), opacity var(--transition-base);
}

.operators-focus-box--liked .frontend-operator-card::before,
.operators-focus-box--disliked .frontend-operator-card::before {
    content: '';
    position: absolute;
    inset: var(--op-fav-border);
    z-index: 0;
    background: #1e2126;
    pointer-events: none;
}

.operators-focus-box--liked .frontend-operator-card .frontend-operator-icon,
.operators-focus-box--disliked .frontend-operator-card .frontend-operator-icon {
    position: relative;
    z-index: 1;
    background: transparent;
    transition: transform 0.22s ease;
}

.operators-focus-box--liked .frontend-operator-card:hover .frontend-operator-icon,
.operators-focus-box--disliked .frontend-operator-card:hover .frontend-operator-icon {
    transform: scale(1.08);
}

.operators-focus-box--liked .frontend-operator-card.is-rank-top {
    background: rgba(72, 187, 120, 0.55);
}

.operators-focus-box--liked .frontend-operator-card.is-rank-rest {
    background: rgba(72, 187, 120, 0.35);
    opacity: 0.78;
}

.operators-focus-box--liked .frontend-operator-card:hover {
    opacity: 1;
    z-index: 2;
    box-shadow: var(--shadow-md);
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        rgba(72, 187, 120, 0.95) 14deg,
        rgba(72, 187, 120, 0.95) 360deg
    );
    animation: frontend-map-border-spin 3.5s linear infinite;
}

.operators-focus-box--disliked .frontend-operator-card.is-rank-top {
    background: rgba(224, 82, 82, 0.55);
}

.operators-focus-box--disliked .frontend-operator-card.is-rank-rest {
    background: rgba(224, 82, 82, 0.35);
    opacity: 0.78;
}

.operators-focus-box--disliked .frontend-operator-card:hover {
    opacity: 1;
    z-index: 2;
    box-shadow: var(--shadow-md);
    background: conic-gradient(
        from var(--map-border-angle),
        #fff 0deg,
        #fff 9deg,
        rgba(255, 255, 255, 0.35) 14deg,
        rgba(224, 82, 82, 0.95) 14deg,
        rgba(224, 82, 82, 0.95) 360deg
    );
    animation: frontend-map-border-spin 3.5s linear infinite;
}

.operators-focus-box--liked .operators-list-row.is-rank-top,
.operators-focus-box--liked .operators-focus-slot.is-rank-top {
    border-width: 2px;
    border-color: rgba(72, 187, 120, 0.85);
    box-shadow: none;
}

.operators-focus-box--liked .operators-list-row.is-rank-rest,
.operators-focus-box--liked .operators-focus-slot.is-rank-rest {
    border-width: 2px;
    border-color: rgba(72, 187, 120, 0.35);
    opacity: 0.78;
    box-shadow: none;
}

.operators-focus-box--disliked .operators-list-row.is-rank-top,
.operators-focus-box--disliked .operators-focus-slot.is-rank-top {
    border-width: 1px;
    border-color: rgba(224, 82, 82, 0.85);
    box-shadow: none;
}

.operators-focus-box--disliked .operators-list-row.is-rank-rest,
.operators-focus-box--disliked .operators-focus-slot.is-rank-rest {
    border-width: 1px;
    border-color: rgba(224, 82, 82, 0.35);
    opacity: 0.78;
    box-shadow: none;
}

.operators-focus-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.operators-list-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.16);
}

.operators-list-row--empty {
    opacity: 0.55;
}

.operators-list-row-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
}

.operators-list-row-icon--empty {
    display: block;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.operators-list-row-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.operators-list-row-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.operators-list-row-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.operators-list-row-rank {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    min-width: 1.25rem;
    text-align: right;
}

.operators-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}

.operators-detail-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
    min-width: 0;
    overflow: hidden;
}

.operators-detail-card--attacker {
    border-top: 3px solid var(--op-side-attacker);
}

.operators-detail-card--defender {
    border-top: 3px solid var(--op-side-defender);
}

.operators-detail-card-media {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.25);
}

.operators-detail-card-media .frontend-operator-icon {
    width: 72px;
    height: 72px;
}

.operators-detail-card-body {
    min-width: 0;
    overflow: hidden;
}

.operators-detail-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operators-detail-card-side {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.operators-detail-card-meta {
    margin: 0;
    display: grid;
    gap: 0.2rem;
}

.operators-detail-card-meta > div {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.35rem;
    font-size: 0.75rem;
    min-width: 0;
}

.operators-detail-card-meta dt {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.operators-detail-card-meta dd {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operators-view-toggle .btn.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.maps-favorites-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.maps-favorites-divider {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 1;
}

.maps-focus-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
}

.maps-focus-grid .frontend-map-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.maps-focus-grid .frontend-map-thumb-wrap {
    aspect-ratio: 16 / 9;
}

.maps-focus-grid .frontend-map-modes {
    gap: 0.25rem;
}

.maps-focus-grid .frontend-map-mode-btn {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
}

@media (min-width: 992px) {
    .maps-favorites-stack {
        gap: 2.5rem;
    }

    .maps-favorites-divider {
        margin: 0.25rem 0;
    }

    .maps-focus-grid {
        flex-wrap: nowrap;
    }

    .maps-focus-grid .frontend-map-card {
        flex: 1 1 calc((100% - 3rem) / 5);
    }
}

@media (max-width: 991.98px) {
    .maps-focus-grid .frontend-map-card {
        flex: 0 1 calc((100% - 1.5rem) / 3);
    }
}

@media (max-width: 576px) {
    .maps-focus-grid .frontend-map-card {
        flex: 0 1 calc((100% - 0.75rem) / 2);
    }
}

/* Frontend: operators-oversigt */
:root {
    --op-side-attacker: #4a9eed;
    --op-side-attacker-text: #fff;
    --op-side-defender: #e67e22;
    --op-side-defender-text: #fff;
    --op-side-recruit: #8a939b;
    --op-side-recruit-text: #fff;
}

.operators-page-header {
    margin: 0 0 1.75rem;
}

.operators-page-title {
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.operators-view-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.85rem;
    background: rgba(0, 0, 0, 0.22);
}

.operators-view-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.operators-view-nav-link:hover {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.05);
}

.operators-view-nav-link.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(126, 184, 245, 0.28), rgba(126, 184, 245, 0.12));
    box-shadow: inset 0 0 0 1px rgba(168, 212, 255, 0.45), 0 0 18px rgba(126, 184, 245, 0.16);
}

.operators-view-nav-icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.operators-view-nav-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.operators-view-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operators-view-nav-link:focus-visible {
    outline: 2px solid rgba(126, 184, 245, 0.9);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .operators-view-nav-link {
        flex-direction: column;
        gap: 0.28rem;
        letter-spacing: 0.03em;
        font-size: 0.72rem;
        min-height: 3.15rem;
        padding: 0.45rem 0.35rem;
    }
}

.operators-side-heading {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.operators-side-section--attacker .operators-side-heading {
    color: var(--op-side-attacker);
}

.operators-side-section--defender .operators-side-heading {
    color: var(--op-side-defender);
}

.frontend-operators-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.5rem;
}

.frontend-operator-card {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #6c757d;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.15);
    line-height: 0;
}

.is-operator-openable {
    cursor: pointer;
}

.is-operator-openable:focus-visible {
    outline: 2px solid rgba(126, 184, 245, 0.9);
    outline-offset: 2px;
}

body.operator-facts-open {
    overflow: hidden;
}

.operator-facts-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.72);
}

.operator-facts-modal.is-open {
    display: flex;
}

.operator-facts-dialog {
    position: relative;
    width: min(28rem, 100%);
    max-height: min(85vh, 40rem);
    overflow: auto;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.5rem;
    background: #2b3036;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.operator-facts-close {
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.operator-facts-close:hover {
    color: #fff;
}

.operator-facts-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding-right: 1.5rem;
}

.operator-facts-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.operator-facts-title {
    font-size: 1.2rem;
    font-weight: 650;
    margin: 0 0 0.15rem;
    line-height: 1.25;
}

.operator-facts-side {
    font-size: 0.85rem;
    font-weight: 600;
}

.operator-facts-side.is-attacker {
    color: var(--op-side-attacker, #4a9eed);
}

.operator-facts-side.is-defender {
    color: var(--op-side-defender, #e67e22);
}

.operator-facts-body {
    display: grid;
    gap: 0.55rem;
}

.operator-facts-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.operator-facts-pair-item,
.operator-facts-single {
    display: grid;
    gap: 0.15rem;
    padding: 0.45rem 0.55rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.operator-facts-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.operator-facts-value {
    font-size: 0.92rem;
    word-break: break-word;
}

@media (max-width: 480px) {
    .operator-facts-pair {
        grid-template-columns: 1fr;
    }
}

.frontend-operator-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: top;
}

@media (max-width: 1200px) {
    .frontend-operators-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .frontend-operators-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .frontend-operators-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .frontend-operators-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Patch Notes page (1:1 from stregkoden.com) */
.patch-box {
    background-color: var(--secondary-bg);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--border-color);
}

.patch-notes-content {
    color: var(--text-color);
}

.patch-notes-content p {
    margin-bottom: 1rem;
}

.patch-notes-content ul,
.patch-notes-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.patch-post:last-child {
    border-bottom: none !important;
    padding-bottom: 0;
}

.home-hero {
    text-align: center;
    padding: 2rem 0 0.35rem;
}

.home-shell {
    max-width: 980px;
}

.home-page {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.home-hero .main-title {
    padding-top: 0;
    font-size: 2.15rem;
}

.home-hero .sub-title {
    margin-top: 0.2rem;
    margin-bottom: 0;
}

.home-section-title {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

.home-weapons-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.home-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 42rem;
    margin: 0 auto;
}

.home-item .frontend-weapon-title,
.home-item .frontend-playercard-title,
.home-item .frontend-charm-title {
    font-size: 0.78rem;
    margin-top: 0.35rem;
}

.home-section--stats {
    padding-top: 0.5rem;
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.home-stat {
    text-align: center;
    padding: 0.85rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
}

.home-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.92);
}

.home-stat-label {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.48);
}

@media (max-width: 767px) {
    .home-weapons-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-media-grid {
        grid-template-columns: 1fr;
        max-width: 16rem;
    }

    .home-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .home-weapons-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Typography
   ========================================================================== */
.main-title {
    text-align: center;
    padding: 20px 0 0 0;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0;
}

.sub-title {
    text-align: center;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 2rem;
    font-weight: 300;
    margin-top: 0.5rem;
}

.category-title {
    font-size: 2rem;
    color: white;
    margin: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
}

.category-page-title {
    font-size: 2rem;
    margin: 0;
}

.category-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: color 0.3s ease;
}

.category-link:hover {
    color: #375a7f !important;
}

.weapon-title {
    font-size: 14px;
    text-align: center;
    margin-bottom: -25px;
    color: white;
}

.category-name {
    display: none;
}

/* ==========================================================================
    Main Menu & Category Grid
    ========================================================================== */
 .main-menu {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.category-icon {
    background: transparent;
    border: none;
    border-radius: 15px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 190px;
    overflow: hidden;
}

.category-icon:hover {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
}


.icon-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 190px;
}

.category-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0.8) saturate(1.2);
    border-radius: 15px;
}

.weapons-category-image {
    width: 275px;
    height: 190px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0.8) saturate(1.2);
    border-radius: 15px;
}



/* ==========================================================================
   Category View & Weapons Grid
   ========================================================================== */
.category-view {
    padding: 2rem 0;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    cursor: pointer;
    user-select: none;
}
.category-header .back-btn {
    margin-left: auto !important;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weapons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 20px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.weapon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.weapon-card:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* ==========================================================================
   Image & Charm Styles
   ========================================================================== */
.image-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0.8) saturate(1.2);
    border-radius: 4px;
    border: 2px solid #000;
    cursor: pointer;
}

.image-container img:hover {
    opacity: 0.9;
}

.charm-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0.8) saturate(1.2);
    border-radius: 15px;
}

.weapon-card:hover .charm-image {
    transform: scale(1.1);
    filter: brightness(1.1) saturate(1.4);
}

.charm-info {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}
/* ==========================================================================
   Modal Styles
   ========================================================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
}

.close {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Discord Modal */
.modal-content-small {
    background-color: #272B30;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 8px;
    color: white;
}

.modal-content-small h3 {
    margin-top: 0;
    color: #375a7f;
}

.modal-content-small p {
    margin: 10px 0;
}

.modal-content-small a {
    color: #375a7f;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
    margin-top: auto;
    flex-shrink: 0;
}

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

.footer-text {
    text-align: center;
    color: #888;
    margin: 0;
    font-size: 0.9rem;
}

.footer-link,
.social-link {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

button.social-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.footer-link:hover,
.social-link:hover {
    color: #375a7f;
    text-decoration: underline;
}

.footer-link-admin,
.footer-link-admin:hover,
.footer-link-admin:focus {
    color: #e05252;
}

.social-links {
    display: flex;
    gap: 1rem;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1200px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
    }
    .weapons-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1000px;
    }
}

@media (max-width: 768px) {
    .main-title {
        font-size: 2rem;
    }
    .sub-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem 0;
        max-width: 400px;
    }
    .weapons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px 0;
        max-width: 500px;
    }
    .weapon-title {
        font-size: 12px;
        margin-bottom: -20px;
    }
    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.8rem;
        padding: 15px 0 0 0;
    }
    .sub-title {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.5rem 0;
        max-width: 280px;
    }
    .weapons-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 0;
        max-width: 300px;
    }
    .weapon-title {
        font-size: 11px;
        margin-bottom: -15px;
    }
    .weapons-category-image {
        height: 150px;
        width: 220px;
    }
    .icon-container {
        min-height: 150px;
    }
    .category-icon {
        height: 150px;
    }
}

/* ==========================================================================
   Unused/Combined Styles (for potential removal or refactoring)
   ========================================================================== */
/* The following styles were either duplicates or appear to be unused.
   They have been commented out for review and can be deleted if no longer needed. */

/*
.gallery-button-container {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

.gallery-button {
    background-color: #333;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.gallery-button:hover {
    background-color: #555;
}

.gallery-modal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.gallery-image {
    margin: 10px;
    max-width: 300px;
    max-height: 300px;
}

.gallery-btn {
    display: block;
    margin: 0 auto 20px auto;
    padding: 10px 20px;
    font-size: 18px;
}

.category-section {
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.category-section.collapsed .category-icon {
    transform: rotate(-90deg);
}

.category-content {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
}

.category-section.collapsed .category-content {
    max-height: 0;
    opacity: 0;
    padding: 0;
    border-top: none;
}
*/

/* ==========================================================================
    Patch Notes Styles
    ========================================================================== */
.patch-notes {
    width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Responsive design for patch notes */
@media (max-width: 850px) {
    .patch-notes {
        width: 95%;
        max-width: 800px;
    }
}

@media (max-width: 480px) {
    .patch-notes {
        width: 90%;
        padding: 1rem 0;
    }

    .patch-entry {
        padding: 1rem;
    }
}

.patch-entry {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid #375a7f;
    margin-bottom: 0.5rem;
}

.patch-version {
    color: #375a7f;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.patch-changes {
    list-style-type: none;
    padding: 0;
}

.patch-changes li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.patch-changes li:last-child {
    border-bottom: none;
}

.operations-admin-table .form-select-sm,
.operations-admin-table .operations-operator-select,
.operations-admin-table .operations-operator-combobox {
    width: 100%;
    min-width: 9.5rem;
    max-width: 14rem;
}

.operations-admin-table .operations-operator-combobox-input {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: none;
}

.operations-admin-table .operations-operator-combobox-input:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #4a6fa5;
    box-shadow: 0 0 0 0.25rem rgba(55, 90, 127, 0.25);
}

.operations-admin-table .operations-operator-combobox-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    font-style: italic;
}

.operations-admin-op3-col {
    font-size: inherit;
}

.operations-admin-op3-cell {
    vertical-align: middle;
}

.operations-operator-combobox-menu {
    background: #2b3035;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.25rem;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45);
}

.operations-operator-combobox-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0.28rem 0.55rem;
    font-size: 0.875rem;
}

.operations-operator-combobox-item:hover,
.operations-operator-combobox-item.is-active {
    background: rgba(255, 255, 255, 0.1);
}

.operations-operator-combobox-empty {
    padding: 0.35rem 0.55rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
}

.season-code {
    white-space: nowrap;
}

.season-code__y::after {
    content: '';
}

.season-code:hover .season-code__y::after {
    content: '-';
}

.operations-y0-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.operations-y0-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.operations-y0-ctu {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.operations-y0-icons img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Frontend: operations compact list (desktop) */
.operations-shell {
    max-width: 1680px;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 auto;
}

.operations-page {
    max-width: 36rem;
    margin: 0 auto;
}

.operations-page-header {
    margin: 0 0 1.25rem;
    text-align: center;
}

.operations-page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.operations-page-actions {
    margin: 0.45rem 0 0;
}

.operations-gallery-footer {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 1rem;
}

.operations-gallery-footer a {
    color: #e05252;
    text-decoration: none;
    font-weight: 600;
}

.operations-gallery-footer a:hover,
.operations-gallery-footer a:focus-visible {
    color: #f06a6a;
    text-decoration: underline;
}

.operations-season-index {
    margin-top: 1.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.operations-season-year-row {
    margin: 0;
    max-width: 42rem;
    line-height: 1.75;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.68);
}

.operations-season-year-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}

.operations-season-year-sep {
    color: rgba(255, 255, 255, 0.32);
    margin: 0 0.4rem;
}

.operations-season-year-prefix {
    margin-right: 0.3rem;
}

.operations-season-pick {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: inherit;
    color: rgba(255, 255, 255, 0.48);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.operations-season-pick:hover,
.operations-season-pick:focus-visible {
    color: #4a9eed;
}

.operations-season-pick.is-active {
    color: #4a9eed;
    font-weight: 700;
}

.operations-compact-table {
    --ops-col-code: 4.8rem;
}

.operations-compact-head,
.operations-compact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ops-col-code);
    align-items: center;
    gap: 0.55rem 0.85rem;
}

.operations-compact-head {
    padding: 0 0.65rem 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.operations-compact-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.operations-year-group {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.55rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.14);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.operations-year-group.is-hover {
    border-color: rgba(126, 184, 245, 0.45);
    box-shadow: 0 0 0 1px rgba(126, 184, 245, 0.12);
}

.operations-year-group-head {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.42rem 0.65rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    transition: background-color 0.15s ease;
}

.operations-year-group-left {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.operations-year-group-head::-webkit-details-marker {
    display: none;
}

.operations-year-group-head::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.42);
}

.operations-year-group-irl {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.42);
    text-align: right;
}

.operations-year-group[open] > .operations-year-group-head::after {
    content: '−';
}

.operations-year-group[open] > .operations-year-group-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.operations-year-group-head:hover,
.operations-year-group-head.is-hover {
    background: rgba(126, 184, 245, 0.1);
}

.operations-year-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.operations-year-group-num {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.88);
}

.operations-year-group-seasons .operations-compact-row {
    border-radius: 0;
    padding: 0.3rem 0.65rem;
}

.operations-year-group-seasons .operations-compact-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.operations-compact-row {
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: default;
}

.operations-compact-row:hover,
.operations-compact-row.is-hover,
.operations-compact-row:focus-visible {
    background: rgba(126, 184, 245, 0.1);
}

.operations-compact-row:focus-visible {
    outline: 2px solid rgba(126, 184, 245, 0.9);
    outline-offset: -2px;
}

.operations-compact-title-text {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operations-compact-code {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.48);
    text-align: right;
}

.operations-compact-code .season-code {
    font-variant-numeric: tabular-nums;
}

/* Operations hover box (follows pointer) */
.operations-panel-root {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

.operations-panel {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1210;
    pointer-events: auto;
    width: min(32rem, calc(100vw - 2rem));
    max-height: min(88vh, 52rem);
    overflow: auto;
    border: 1px solid rgba(126, 184, 245, 0.35);
    border-radius: 0.75rem;
    background: linear-gradient(165deg, #343a42 0%, #23282e 55%, #1e2228 100%);
}

.operations-panel-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.1rem 1.25rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(74, 158, 237, 0.12), rgba(74, 158, 237, 0.02));
}

.operations-panel-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(158, 207, 255, 0.85);
}

.operations-panel-label[hidden] {
    display: none;
}

.operations-panel-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(158, 207, 255, 0.45);
    border-radius: 999px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #d8ecff;
    background: rgba(74, 158, 237, 0.18);
}

.operations-panel-code[hidden] {
    display: none;
}

.operations-panel-hero-text {
    max-width: 26rem;
}

.operations-panel-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.operations-panel-subtitle {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    line-height: 1.4;
}

.operations-panel-subtitle[hidden] {
    display: none;
}

.operations-panel-body {
    padding: 1rem 1.25rem 1.25rem;
}

.operations-panel-section-title {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.48);
    text-align: center;
}

.operations-panel-root.is-year .operations-panel-code,
.operations-panel-root.is-year .operations-panel-hero-text {
    display: none;
}

.operations-panel-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    padding: 0.85rem;
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.operations-panel-extras {
    margin-top: 1.1rem;
}

.operations-panel-extras[hidden] {
    display: none;
}

.operations-panel-extras-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.operations-panel-extras-grid .operations-panel-section,
.operations-panel-year-extras .operations-panel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0.65rem;
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.operations-panel-year-extras {
    display: grid;
    gap: 1rem;
}

.operations-panel-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.operations-panel-media-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.45rem;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.operations-panel-media-slot--charm {
    width: 5.75rem;
    height: 5.75rem;
}

.operations-panel-media-slot--card {
    width: 11.5rem;
    height: 6.32rem;
}

.operations-panel-thumb {
    width: 100%;
    height: 100%;
    margin: 0;
}

.operations-panel-thumb.frontend-charm,
.operations-panel-thumb.frontend-playercard {
    width: 100%;
    height: 100%;
}

.operations-panel-thumb .frontend-charm-thumb,
.operations-panel-thumb .frontend-playercard-thumb {
    width: 100%;
    height: 100%;
    padding: 0.12rem;
    border-radius: 0.35rem;
}

.operations-panel-thumb .frontend-charm-media,
.operations-panel-thumb .frontend-playercard-media {
    width: 100%;
    height: 100%;
}

.operations-panel-thumb .frontend-charm-img,
.operations-panel-thumb .frontend-playercard-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.operations-panel-thumb .frontend-playercard-title,
.operations-panel-thumb .frontend-charm-title {
    display: none;
}

.operations-panel-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.28);
}

.operations-op-wrap {
    width: 3.65rem;
    flex: 0 0 3.65rem;
}

.operations-op.frontend-operator-card {
    width: 100%;
    border-color: transparent;
}

.operations-op.frontend-operator-card.operations-op--attacker:hover,
.operations-op.frontend-operator-card.operations-op--attacker:focus-visible {
    border-color: var(--op-side-attacker);
}

.operations-op.frontend-operator-card.operations-op--defender:hover,
.operations-op.frontend-operator-card.operations-op--defender:focus-visible {
    border-color: var(--op-side-defender);
}

.operations-op--rework {
    opacity: 0.88;
}

@media (min-width: 1920px) {
    .operations-shell {
        max-width: 1760px;
    }

    .operations-page {
        max-width: 38rem;
    }

    .operations-op-wrap {
        width: 3.85rem;
        flex-basis: 3.85rem;
    }

    .operations-panel-media-slot--charm {
        width: 6.25rem;
        height: 6.25rem;
    }

    .operations-panel-media-slot--card {
        width: 12.5rem;
        height: 6.87rem;
    }
}

/* Operations gallery page (gallery layout) */
.operations-gallery-shell {
    max-width: 1020px;
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0 auto;
}

.operations-gallery-header {
    margin: 0 0 0.55rem;
    text-align: center;
}

.operations-gallery-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
}

.operations-gallery {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.operations-gallery-nav-btn {
    flex: 0 0 auto;
    width: 3.15rem;
    height: 3.15rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.operations-gallery-nav-btn:hover:not(:disabled) {
    background: rgba(126, 184, 245, 0.2);
    border-color: rgba(126, 184, 245, 0.42);
}

.operations-gallery-nav-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

.operations-gallery-stage {
    display: flex;
    flex-direction: column;
    height: var(--operations-gallery-stage-height, 22rem);
    box-sizing: border-box;
    border: 1px solid rgba(126, 184, 245, 0.35);
    border-radius: 0.75rem;
    background: linear-gradient(165deg, #343a42 0%, #23282e 55%, #1e2228 100%);
    padding: 0.85rem 1.1rem 1rem;
}

.operations-gallery-season-head--main {
    flex: 0 0 auto;
    min-height: 4.35rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.operations-gallery-season-meta {
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.78rem;
    line-height: 1.3;
}

.operations-gallery-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.operations-gallery-season-card {
    display: grid;
    gap: 0;
    width: 100%;
    height: 100%;
    align-content: center;
}

.operations-gallery-section-title {
    margin: 0 0 0.1rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.48);
    text-align: center;
}

.operations-gallery-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.operations-gallery-ops .operations-op-wrap {
    width: 4.5rem;
    flex: 0 0 4.5rem;
}

.operations-gallery-halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    align-items: center;
    width: 100%;
    min-height: 100%;
}

.operations-gallery-halves--no-media {
    grid-template-columns: 1fr;
    justify-items: center;
}

.operations-gallery-halves--no-media .operations-gallery-half--ops {
    width: min(100%, 26rem);
}

.operations-gallery-halves--y0 {
    grid-template-columns: 1fr;
    justify-items: stretch;
}

.operations-gallery-halves--y0 .operations-gallery-half--ops {
    width: 100%;
    max-width: none;
}

.operations-gallery-ops--y0 {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.35rem;
    justify-items: center;
    align-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
}

.operations-gallery-ops--y0 .operations-op-wrap {
    width: 100%;
    max-width: 3.35rem;
    flex: unset;
}

.operations-gallery-stage--y0 {
    --operations-gallery-stage-height: 24rem;
    padding-top: 0.55rem;
    padding-bottom: 0.75rem;
}

.operations-gallery-stage--y0 .operations-gallery-season-head--main {
    min-height: 3.1rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
}

.operations-gallery-stage--y0 .operations-gallery-body {
    align-items: flex-start;
}

.operations-gallery-stage--y0 .operations-gallery-season-card {
    align-content: start;
}

.operations-gallery-stage--y0 .operations-gallery-half--ops {
    padding-top: 0.2rem;
    padding-bottom: 0.35rem;
}

.operations-gallery-stage--y0 .operations-gallery-section-title {
    margin-bottom: 0.15rem;
}

.operations-gallery-half {
    min-width: 0;
    padding: 0.65rem;
    border-radius: 0.5rem;
}

.operations-gallery-half--ops {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.operations-gallery-half--media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.operations-gallery-season-head {
    display: grid;
    gap: 0.15rem;
    text-align: center;
}

.operations-gallery-season-code {
    display: inline-flex;
    align-self: center;
    justify-self: center;
    min-width: 3.75rem;
    padding: 0.18rem 0.6rem;
    border: 1px solid rgba(158, 207, 255, 0.45);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #d8ecff;
    background: rgba(74, 158, 237, 0.18);
}

.operations-gallery-season-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.operations-gallery-ops--season {
    justify-content: center;
    align-content: center;
    gap: 0.35rem;
    width: 75%;
    margin: 0 auto;
}

.operations-gallery-ops--season .operations-op-wrap {
    width: calc(82.5% / 3 - 0.24rem);
    flex: 0 0 calc(82.5% / 3 - 0.24rem);
}

.operations-gallery-ops--season[data-op-count="1"] .operations-op-wrap {
    width: 56%;
    flex: 0 0 56%;
}

.operations-gallery-ops--season[data-op-count="2"] .operations-op-wrap {
    width: calc(75% / 2 - 0.18rem);
    flex: 0 0 calc(75% / 2 - 0.18rem);
}

.operations-gallery-season-extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
    max-width: none;
    margin: 0;
}

.operations-gallery-season-extras[data-media-count="1"] {
    grid-template-columns: 1fr;
}

.operations-gallery-season-extras[data-media-count="0"] {
    grid-template-columns: 1fr;
}

.operations-gallery-season-extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.operations-gallery-media-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.4rem;
    background: transparent;
    border: none;
}

.operations-gallery-media-slot--charm,
.operations-gallery-media-slot--card {
    width: 100%;
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    border: none;
}

.operations-gallery-season-extras[data-media-count="1"] .operations-gallery-media-slot--charm,
.operations-gallery-season-extras[data-media-count="1"] .operations-gallery-media-slot--card {
    max-width: 80%;
}

.operations-gallery-thumb {
    width: 100%;
    height: 100%;
}

.operations-gallery-thumb.frontend-charm,
.operations-gallery-thumb.frontend-playercard {
    width: 100%;
    height: 100%;
}

.operations-gallery-thumb .frontend-charm-thumb,
.operations-gallery-thumb .frontend-playercard-thumb {
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0.4rem;
    background: transparent;
    overflow: hidden;
}

.operations-gallery-thumb:hover .frontend-charm-thumb,
.operations-gallery-thumb:hover .frontend-playercard-thumb {
    background: transparent;
    box-shadow: none;
    animation: none;
}

.operations-gallery-thumb .frontend-charm-img--hover,
.operations-gallery-thumb .frontend-playercard-img--hover {
    display: none;
}

.operations-gallery-thumb .frontend-charm-media,
.operations-gallery-thumb .frontend-playercard-media {
    width: 100%;
    height: auto;
    border-radius: 0.4rem;
    background: transparent;
    aspect-ratio: auto;
    line-height: 0;
}

.operations-gallery-media-slot .operations-gallery-thumb .frontend-charm-img,
.operations-gallery-media-slot .operations-gallery-thumb .frontend-playercard-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.4rem;
}

.operations-gallery-thumb .frontend-playercard-title,
.operations-gallery-thumb .frontend-charm-title {
    display: none;
}

.operations-gallery-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.28);
}

@media (min-width: 768px) {
    .operations-gallery {
        gap: 1.35rem;
    }

    .operations-gallery-nav-btn {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.85rem;
    }

    .operations-gallery-ops .operations-op-wrap {
        width: 4.75rem;
        flex-basis: 4.75rem;
    }
}

@media (max-width: 575px) {
    .operations-gallery {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .operations-gallery-nav-btn--prev {
        order: 2;
        justify-self: start;
    }

    .operations-gallery-nav-btn--next {
        order: 3;
        justify-self: end;
    }

    .operations-gallery-stage {
        order: 1;
        --operations-gallery-stage-height: 27rem;
    }

    .operations-gallery-stage.operations-gallery-stage--y0 {
        --operations-gallery-stage-height: 27rem;
        padding-top: 0.5rem;
    }

    .operations-gallery-nav-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.45rem;
    }

    .operations-gallery-halves {
        grid-template-columns: 1fr;
    }

    .operations-gallery-ops--y0 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .operations-gallery-ops--y0 .operations-op-wrap {
        max-width: 3rem;
    }
}