.game-library-controls {
    margin: 0 0 22px;
    padding: 14px;
    border: 1px solid rgba(141, 107, 197, .72);
    background: linear-gradient(105deg, rgba(39, 24, 72, .9), rgba(17, 13, 34, .94));
    box-shadow: inset 0 0 17px rgba(119, 77, 186, .11);
}
.game-library-controls[hidden],
.quick-picks[hidden],
.game-shelf[hidden],
.game-choice[hidden] {
    display: none !important;
}
.game-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}
.game-search-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--cyan);
    font: 700 .7rem/1.4 var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
}
.game-search-field input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #665187;
    border-radius: 4px;
    color: #fff;
    background: #0c0917;
    font: 400 1rem/1.35 var(--font-ui);
}
.game-search-field input::placeholder { color: #a69bb9; opacity: 1; }
.game-search-field input:focus-visible {
    border-color: var(--cyan);
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    box-shadow: 0 0 13px rgba(76, 232, 255, .2);
}
.game-library-status {
    min-width: 140px;
    margin: 0 0 2px;
    color: #d8d1e4;
    font: 700 .8rem/1.4 var(--font-ui);
    text-align: right;
}
.game-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}
.game-filter {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #594473;
    border-radius: 3px;
    color: #e4dbef;
    background: #171226;
    font: 700 .82rem/1.2 var(--font-ui);
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease, transform .16s ease;
}
.game-filter span {
    color: var(--gold);
    font: 700 .72rem/1 var(--font-body);
}
.game-filter:hover { border-color: var(--violet); color: #fff; transform: translateY(-1px); }
.game-filter.is-active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(25, 68, 83, .32);
    box-shadow: inset 0 0 10px rgba(76, 232, 255, .1);
}
.game-filter:focus-visible,
.quick-pick:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}
.quick-picks { margin: 0 0 26px; }
.quick-picks-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.quick-picks-heading h3 {
    margin: 0;
    color: #fff2c4;
    font-size: .8rem;
    line-height: 1.5;
    text-shadow: 2px 2px 0 #7436a5;
}
.quick-picks-heading p {
    margin: 0;
    color: #c8bfd6;
    font: 400 .82rem/1.4 var(--font-ui);
}
.quick-pick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.quick-pick {
    display: grid;
    min-width: 0;
    min-height: 72px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #604583;
    border-bottom: 3px solid #412858;
    color: inherit;
    background: linear-gradient(110deg, rgba(111, 52, 154, .2), transparent 70%), #171226;
    text-decoration: none;
    transition: border-color .16s ease, transform .16s ease, background-color .16s ease;
}
.quick-pick:hover {
    border-color: var(--cyan);
    background-color: #211a43;
    transform: translateY(-2px);
}
.quick-pick-mark {
    display: grid;
    width: 42px;
    height: 46px;
    place-items: center;
    border: 2px solid #d6c8ff;
    border-radius: 4px 4px 7px 7px;
    color: #fff3d7;
    background: linear-gradient(145deg, #4261be, #291647);
    box-shadow: inset 0 0 0 2px rgba(17,13,35,.6), 0 3px 5px rgba(0,0,0,.35);
    font: 700 .6rem/1 var(--font-body);
}
.quick-pick-cyan { border-color: #8df4ff; background: linear-gradient(145deg, #267995, #1b183e); }
.quick-pick-pink { border-color: #ff9fce; background: linear-gradient(145deg, #a42d65, #391748); }
.quick-pick-violet { border-color: #d5a3ff; background: linear-gradient(145deg, #7145b6, #251648); }
.quick-pick-gold { border-color: #ffe17b; background: linear-gradient(145deg, #967328, #342044); }
.quick-pick-copy { display: block; min-width: 0; }
.quick-pick-copy strong {
    display: block;
    color: #fff2c4;
    font-size: .86rem;
    line-height: 1.3;
}
.quick-pick-copy small {
    display: block;
    margin-top: 4px;
    color: #c8bfd6;
    font: 600 .7rem/1.3 var(--font-ui);
}
.quick-pick-arrow { color: var(--cyan); font-size: 1rem; }
.game-shelves { gap: 21px; }
.game-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.game-choice {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 122px;
    padding: 9px;
    border-width: 1px;
    border-bottom-width: 3px;
    box-shadow: 0 4px 0 #0a0717, 0 0 14px rgba(108,65,190,.12), inset 0 0 0 2px rgba(17,11,38,.7);
}
.game-new-tag {
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 8px;
    display: inline-flex;
    min-height: 18px;
    align-items: center;
    padding: 3px 6px;
    border: 1px solid #ffe17b;
    border-radius: 3px;
    color: #fff4d1;
    background: linear-gradient(135deg, #f32663, #a30f4a);
    box-shadow: 0 2px 0 #5b0a35, 0 0 11px rgba(255, 69, 128, .5);
    font: 800 .58rem/1 var(--font-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    pointer-events: none;
}
.game-choice:focus-visible {
    z-index: 2;
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.cartridge {
    width: 56px;
    max-width: 56px;
    aspect-ratio: .79;
}
.game-index { margin-bottom: 4px; font-size: .57rem; line-height: 1.35; }
.game-title { font-size: .83rem; line-height: 1.35; letter-spacing: -.035em; }
.game-description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 4px;
    font-size: .78rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.play-link { gap: 6px; margin-top: 6px; font-size: .78rem; }
.game-shelf-heading { margin-bottom: 10px; }
.game-shelf-heading .shelf-kicker { font-size: .72rem; }
.game-shelf-heading h3 { font-size: .85rem; }
.game-no-results {
    margin: 18px 0;
    padding: 17px;
    border: 1px dashed #8c54ad;
    color: #e6d8ef;
    background: rgba(39, 24, 72, .5);
    font: 600 .95rem/1.5 var(--font-ui);
    text-align: center;
}
.game-no-results[hidden] { display: none; }

@media (max-width: 1050px) {
    .game-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quick-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-library-status { min-width: 112px; font-size: .75rem; }
}
@media (max-width: 520px) {
    .game-library-controls { margin-bottom: 18px; padding: 11px; }
    .game-search-row { grid-template-columns: 1fr; gap: 7px; }
    .game-library-status { min-width: 0; margin: 0; text-align: left; }
    .game-filter { min-height: 35px; padding: 7px 8px; font-size: .75rem; }
    .quick-picks { margin-bottom: 21px; }
    .quick-picks-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
    .quick-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .quick-pick {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 7px;
        min-height: 67px;
        padding: 7px;
    }
    .quick-pick-mark { width: 35px; height: 40px; font-size: .54rem; }
    .quick-pick-copy strong { font-size: .75rem; }
    .quick-pick-copy small { font-size: .64rem; }
    .quick-pick-arrow { display: none; }
    .game-shelf-heading { align-items: baseline; flex-direction: row; gap: 8px; }
    .game-shelf-heading .shelf-kicker { font-size: .65rem; }
    .game-shelf-heading h3 { font-size: .73rem; }
    .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .game-choice {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 7px;
        min-height: 112px;
        padding: 7px;
    }
    .cartridge { width: 42px; max-width: 42px; }
    .game-index { margin-bottom: 3px; font-size: .52rem; }
    .game-title { font-size: .74rem; line-height: 1.3; }
    .game-description { font-size: .72rem; line-height: 1.3; }
    .play-link { margin-top: 5px; font-size: .72rem; }
    .cart-label-name { font-size: .36rem; }
}
@media (max-width: 350px) {
    .quick-pick-grid { grid-template-columns: 1fr; }
    .game-list { grid-template-columns: 1fr; }
    .game-choice { grid-template-columns: 50px minmax(0, 1fr); min-height: 102px; }
    .cartridge { width: 48px; max-width: 48px; }
}