[hidden] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

:root,
[data-theme="midnight"] {
    color-scheme: dark;
    --bg: #111216;
    --panel: #1b1d24;
    --panel-2: #242734;
    --text: #f2f3f7;
    --muted: #a8adbd;
    --border: #343847;
    --accent: #7aa2ff;
    --danger: #ff7a8a;
    --card-art-soft: #39435f;
    --topbar-bg: rgba(17, 18, 22, .86);
    --glow: rgba(122, 162, 255, .15);
    --radius: 18px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #050506;
    --panel: #101114;
    --panel-2: #17191f;
    --text: #f5f5f6;
    --muted: #9c9da3;
    --border: #292b33;
    --accent: #9fbcff;
    --danger: #ff8a98;
    --card-art-soft: #242936;
    --topbar-bg: rgba(5, 5, 6, .9);
    --glow: rgba(159, 188, 255, .08);
    --radius: 18px;
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f6fb;
    --panel: #ffffff;
    --panel-2: #eef2fb;
    --text: #161821;
    --muted: #667085;
    --border: #d7deea;
    --accent: #315ecf;
    --danger: #b4233a;
    --card-art-soft: #d6def0;
    --topbar-bg: rgba(244, 246, 251, .88);
    --glow: rgba(49, 94, 207, .12);
    --radius: 18px;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, var(--glow), transparent 35rem),
        var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
}

h1 {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 2rem);
}

.subtitle {
    margin: .2rem 0 0;
    color: var(--muted);
}

.controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

input,
select,
button {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text);
    padding: .65rem .9rem;
    font: inherit;
}

input::placeholder {
    color: var(--muted);
}

button {
    cursor: pointer;
}

button:hover,
input:focus,
select:focus {
    border-color: var(--accent);
    outline: none;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    user-select: none;
}


body:not(.game-detail-active) #searchInput,
body:not(.game-detail-active) #typeFilter {
    display: none;
}

.back-button {
    white-space: nowrap;
}

.game-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.game-cover-card {
    display: grid;
    gap: .8rem;
    width: 100%;
    padding: .85rem;
    border-radius: var(--radius);
    background: var(--panel);
    text-align: left;
    transition: transform .15s ease, border-color .15s ease;
}

.game-cover-card:hover {
    transform: translateY(-2px);
}

.game-cover-image {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-art-soft);
}

.game-cover-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-cover-card.fallback-cover .game-cover-image img {
    object-fit: cover;
}

.game-cover-card.no-cover .game-cover-image::before {
    content: "No cover";
    color: var(--muted);
    font-weight: 700;
}

.game-cover-info {
    display: grid;
    gap: .2rem;
    line-height: 1.2;
}

.game-cover-info strong {
    font-size: 1.05rem;
}

.game-cover-meta {
    color: var(--muted);
    font-size: .9rem;
}

main {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 1.5rem;
}

.empty {
    padding: 1.25rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    background: var(--panel);
}

.games {
    display: grid;
    gap: 1.25rem;
}

.game {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: clip;
}

.game-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--panel-2);
}

.game-title {
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 800;
    font-size: 1.15rem;
    text-align: left;
}

.game-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body:not(.collection-mode-active) .game-actions button,
body:not(.collection-mode-active) .collection-button {
    display: none;
}

.game-count {
    color: var(--muted);
    white-space: nowrap;
}

.remove-game {
    color: var(--danger);
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    line-height: 0;
    transition: transform .18s ease, filter .15s ease, opacity .15s ease, border-color .18s ease, box-shadow .18s ease;
}

.card:hover {
    transform: translateY(-6px) scale(1.025);
    border-color: var(--accent);
    box-shadow: 0 18px 35px color-mix(in srgb, var(--bg) 55%, transparent);
}

.card.missing-in-collection {
    filter: grayscale(1);
    opacity: .42;
}

.image-wrap {
    position: relative;
    aspect-ratio: 325 / 499;
    background: var(--card-art-soft);
}

.image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
}

.collection-button {
    position: absolute;
    left: .55rem;
    top: .55rem;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(8px);
}

.card.in-collection .collection-button {
    border-color: var(--accent);
}

.quantity-badge {
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    min-width: 2.65rem;
    padding: .42rem .58rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    color: var(--text);
    font-weight: 800;
    font-size: .92rem;
    line-height: 1;
    text-align: center;
    backdrop-filter: blur(8px);
}

.card.partially-in-collection .collection-button {
    border-color: var(--accent);
}

.is-hidden {
    display: none !important;
}

body:not(.collection-mode-active) .game-actions {
    display: flex;
}

@media (max-width: 760px) {
    .topbar {
        position: static;
        align-items: stretch;
        flex-direction: column;
        padding: 1rem;
    }

    .controls {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    input,
    select,
    button,
    .switch {
        width: 100%;
    }

    
body:not(.game-detail-active) #searchInput,
body:not(.game-detail-active) #typeFilter {
    display: none;
}

.back-button {
    white-space: nowrap;
}

.game-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.game-cover-card {
    display: grid;
    gap: .8rem;
    width: 100%;
    padding: .85rem;
    border-radius: var(--radius);
    background: var(--panel);
    text-align: left;
    transition: transform .15s ease, border-color .15s ease;
}

.game-cover-card:hover {
    transform: translateY(-2px);
}

.game-cover-image {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-art-soft);
}

.game-cover-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-cover-card.fallback-cover .game-cover-image img {
    object-fit: cover;
}

.game-cover-card.no-cover .game-cover-image::before {
    content: "No cover";
    color: var(--muted);
    font-weight: 700;
}

.game-cover-info {
    display: grid;
    gap: .2rem;
    line-height: 1.2;
}

.game-cover-info strong {
    font-size: 1.05rem;
}

.game-cover-meta {
    color: var(--muted);
    font-size: .9rem;
}

main {
        padding: 1rem;
    }

    .game-header {
        align-items: stretch;
        flex-direction: column;
    }

    .game-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .selected-game-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .selected-game-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .game-count {
        grid-column: 1 / -1;
    }

    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        padding: .75rem;
    }
}

@media (max-width: 390px) {
    .cards {
        grid-template-columns: 1fr;
    }
}


/* v10: force game cover tiles to remain square, independent of card image styles. */
.game-list .game-cover-image {
    width: 100%;
    aspect-ratio: 1 / 1 !important;
}

.game-list .game-cover-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.selected-game-view {
    display: grid;
    gap: 1rem;
}

.selected-game-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
}

.selected-game-toolbar h2 {
    margin: 0;
    font-size: 1.25rem;
}

.selected-game-toolbar p {
    margin: .2rem 0 0;
    color: var(--muted);
}

.selected-game-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body:not(.collection-mode-active) .selected-game-actions {
    display: none;
}

.selected-cards {
    padding: 0;
}


/* v12 view transitions */
.game-list {
    transform-origin: center top;
}

.game-cover-card {
    will-change: transform, opacity;
}

body[data-transition="none"] .game-cover-card,
body:not([data-transition]) .game-cover-card {
    animation: gameCoverIn .52s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: var(--stagger, 0ms);
}

.game-cover-card.is-launching {
    animation: gameLaunch .34s cubic-bezier(.2, .8, .2, 1) both;
    z-index: 2;
}

body[data-transition="back"] .game-cover-card {
    animation: gameCoverReturn .52s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: var(--stagger, 0ms);
}

.selected-game-view {
    opacity: 1;
}

body[data-transition="enter"] .selected-game-view {
    animation: detailIn .58s cubic-bezier(.16, 1, .3, 1) both;
}

body[data-transition="back"] .selected-game-view {
    animation: none;
}

.selected-game-toolbar {
    opacity: 1;
}

body[data-transition="enter"] .selected-game-toolbar {
    animation: toolbarFloatIn .58s cubic-bezier(.16, 1, .3, 1) both;
}

.selected-cards .card {
    transform-origin: center bottom;
    will-change: transform, opacity, filter;
}

body[data-transition="enter"] .selected-cards .card {
    animation: cardCascadeIn .48s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(120ms + var(--stagger, 0ms));
}

.back-button {
    transition: transform .18s ease, border-color .18s ease;
}

.back-button:hover {
    transform: translateX(-3px);
}

@keyframes gameCoverIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.96);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes gameCoverReturn {
    from {
        opacity: 0;
        transform: translateY(-18px) scale(.98);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes gameLaunch {
    0% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    55% {
        transform: translateY(-8px) scale(1.045);
        filter: brightness(1.15);
    }
    100% {
        transform: translateY(10px) scale(.96);
        opacity: 0;
        filter: blur(10px);
    }
}

@keyframes detailIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.985);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes detailOut {
    from {
        opacity: .4;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toolbarFloatIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardCascadeIn {
    from {
        opacity: 0;
        transform: translateY(34px) rotateX(8deg) scale(.96);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}