.game-catalog-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 8px;
    border: 1px solid var(--stroke, rgba(120, 160, 200, .22));
    border-radius: 10px;
    background: radial-gradient(140% 160% at 30% 20%, var(--panelA, #2d4866), var(--panelB, #09101a));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.game-catalog-toolbar .filter-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: 16px;
    margin: 0;
    padding: 8px;
    border: 0;
    background: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.game-catalog-toolbar .filter-block::-webkit-scrollbar { display: none; }
.game-catalog-toolbar .filter-item { flex-shrink: 0; margin: 0; white-space: nowrap; }
.game-catalog-toolbar .filter-item:focus-visible { outline: 2px solid #7ebad3; outline-offset: 3px; }

.game-sort { position: relative; flex-shrink: 0; }
.game-sort__trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(126, 186, 211, .28);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(126, 186, 211, .13), rgba(126, 186, 211, .03));
    color: #e8eef6;
    font-family: Medium, sans-serif;
    font-size: 12px;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.game-sort__trigger::-webkit-details-marker { display: none; }
.game-sort__trigger::marker { content: ''; }
.game-sort__icon { color: #7ebad3; flex-shrink: 0; }
.game-sort__current { padding-left: 10px; border-left: 1px solid rgba(126, 186, 211, .22); color: #7ebad3; }
.game-sort__chevron { flex-shrink: 0; color: #7ebad3; transition: transform .2s; }
.game-sort[open] .game-sort__chevron { transform: rotate(180deg); }
.game-sort[open] .game-sort__trigger,
.game-sort--active .game-sort__trigger { border-color: rgba(126, 186, 211, .6); box-shadow: 0 0 18px rgba(126, 186, 211, .1); }
.game-sort__trigger:focus-visible { outline: 2px solid #7ebad3; outline-offset: 3px; }

.game-sort__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    right: 0;
    width: 310px;
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(126, 186, 211, .3);
    border-radius: 12px;
    background: linear-gradient(145deg, #24384d, #101b2a 75%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    animation: game-sort-reveal .16s ease-out;
}
.game-sort__choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.game-sort__heading { float: none; width: 100%; padding: 6px 10px 12px; color: #8ca5bd; font-family: Medium, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; }
.game-sort__option { position: relative; display: block; margin: 0 0 4px; cursor: pointer; }
.game-sort__option:last-child { margin-bottom: 0; }
.game-sort__radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.game-sort__option-body { display: flex; align-items: center; gap: 11px; min-height: 62px; padding: 10px; border: 1px solid transparent; border-radius: 8px; transition: background .15s, border-color .15s; }
.game-sort__option-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: rgba(126, 186, 211, .08); color: #8ca5bd; }
.game-sort svg path, .game-sort__option-icon svg { color: inherit; }
.game-sort__option-copy { flex: 1; min-width: 0; }
.game-sort__option-title { display: block; color: #e8eef6; font-family: Medium, sans-serif; font-size: 13px; line-height: 1.4; }
.game-sort__option-description { display: block; margin-top: 3px; color: #94a9be; font-family: Regular, sans-serif; font-size: 11px; line-height: 1.45; }
.game-sort__check { flex-shrink: 0; color: #7ebad3; opacity: 0; }
.game-sort__radio:checked + .game-sort__option-body { border-color: rgba(126, 186, 211, .3); background: rgba(126, 186, 211, .1); }
.game-sort__radio:checked + .game-sort__option-body .game-sort__option-icon { color: #a3dcf3; background: rgba(126, 186, 211, .16); }
.game-sort__radio:checked + .game-sort__option-body .game-sort__check { opacity: 1; }
.game-sort__radio:focus-visible + .game-sort__option-body { outline: 2px solid #7ebad3; outline-offset: -2px; }
.game-sort__apply { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid #7ebad3; border-radius: 8px; background: #24384d; color: #e8eef6; cursor: pointer; }

@media (hover: hover) {
    .game-sort__trigger:hover { border-color: #7ebad3; background: rgba(126, 186, 211, .16); box-shadow: 0 0 20px rgba(126, 186, 211, .12); }
    .game-sort__option:hover .game-sort__option-body { background: rgba(126, 186, 211, .08); }
}
@media (max-width: 768px) {
    .game-catalog-toolbar { gap: 6px; padding: 5px; margin-bottom: 16px; }
    .game-catalog-toolbar .filter-block { justify-content: flex-start; gap: 14px; padding: 12px 7px; }
    .game-catalog-toolbar .filter-item, .game-catalog-toolbar .filter-item span { font-size: 10px; }
    .game-sort__current { display: none; }
}
@media (max-width: 480px) {
    .game-sort { position: static; }
    .game-sort__trigger { justify-content: center; width: 44px; padding: 0; }
    .game-sort__caption, .game-sort__chevron { display: none; }
    .game-sort--active .game-sort__trigger::after { content: ''; position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #a3dcf3; box-shadow: 0 0 6px rgba(126, 186, 211, .6); }
    .game-sort__panel { top: calc(100% + 8px); right: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
}
@keyframes game-sort-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .game-sort__panel { animation: none; }
    .game-sort__trigger, .game-sort__chevron, .game-sort__option-body { transition: none; }
}