:root {
    --primary-color: rgba(0, 0, 0, 0.75);
    --game-title: #483D8B;
    --secondary-color: #166088;
    --background-color: #f5f5f5;
    --text-color: #333;
    --card-bg: #fff;
    --border-color: #ddd;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --hours-color: #4a90e2;
    --deaths-color: #e74c3c;
    --completed-color: #23B052;

}

[data-theme="dark"] {
    --primary-color: rgba(255,255,255,0.8);
    --game-title: #f99fab;
    --secondary-color: #4a708b;
    --background-color: #18181b;
    --text-color: #f0f0f0;
    --card-bg: #2d2d2d;
    --border-color: #444;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] header {
    background-color: rgba(24, 24, 27, 0.8);
}

[data-theme="dark"] header.scrolled {
    background-color: rgba(24, 24, 27, 0.9);
}

[data-theme="dark"] .footer-social a[aria-label="X (Twitter)"]:hover {
    color: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
}

body {
    font-family: "Google Sans Code", monospace;
    font-optical-sizing: auto;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    padding: 0 1rem;
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 1rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    margin: 0 -1rem;
    background-color: rgba(245, 245, 245, 0.8);
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

header.scrolled {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 1rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(245, 245, 245, 0.9);
    border-bottom-color: var(--border-color);
    box-shadow: 0 2px 10px var(--shadow-color);
}

header.scrolled .logo-container {
    order: 1;
    margin: 0;
    width: 130px;
    height: 45px;
    scale: 1;
}

header.scrolled h1 {
    order: 2;
    margin: 0;
    font-size: 1.2rem;
    flex-grow: 1;
    text-align: left;
    margin-left: 20px;
}

header.scrolled .theme-toggle {
    order: 3;
    position: static;
    margin: 0;
}

.logo-container {
    margin: 15px;
    width: 260px;
    height: 90px;
    scale: 1.5;
    transition: all 0.3s ease;
}

.logo-container svg {
    width: 100%;
    height: 100%;
}

.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

h1 {
    margin: 0;
    transition: all 0.3s ease;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--game-title);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--game-title);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px var(--shadow-color);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: -40px;
    width: 130px;
    height: 100%;
    opacity: 0.07;
    overflow: hidden;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.stat-card[data-type="games"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d=''/%3E%3C/svg%3E");
}

.stat-card[data-type="completed"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23000'%3E%3Cpath d='M448 128C554 128 640 214 640 320C640 426 554 512 448 512L192 512C86 512 0 426 0 320C0 214 86 128 192 128L448 128zM192 240C178.7 240 168 250.7 168 264L168 296L136 296C122.7 296 112 306.7 112 320C112 333.3 122.7 344 136 344L168 344L168 376C168 389.3 178.7 400 192 400C205.3 400 216 389.3 216 376L216 344L248 344C261.3 344 272 333.3 272 320C272 306.7 261.3 296 248 296L216 296L216 264C216 250.7 205.3 240 192 240zM432 336C414.3 336 400 350.3 400 368C400 385.7 414.3 400 432 400C449.7 400 464 385.7 464 368C464 350.3 449.7 336 432 336zM496 240C478.3 240 464 254.3 464 272C464 289.7 478.3 304 496 304C513.7 304 528 289.7 528 272C528 254.3 513.7 240 496 240z'/%3E%3C/svg%3E");
}

.stat-card[data-type="completed"] {
    background: linear-gradient(90deg, rgba(35, 176, 82, 1) 0%, rgba(81, 185, 52, 1) 100%);
}

.stat-card[data-type="hours"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z'/%3E%3C/svg%3E");
}

.stat-card[data-type="hours"] {
    background: linear-gradient(90deg, rgba(74, 144, 226, 1) 0%, rgba(28, 162, 192, 1) 100%);
}

.stat-card[data-type="deaths"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23000'%3E%3Cpath d='M480 491.4C538.5 447.4 576 379.8 576 304C576 171.5 461.4 64 320 64C178.6 64 64 171.5 64 304C64 379.8 101.5 447.4 160 491.4L160 528C160 554.5 181.5 576 208 576L240 576L240 536C240 522.7 250.7 512 264 512C277.3 512 288 522.7 288 536L288 576L352 576L352 536C352 522.7 362.7 512 376 512C389.3 512 400 522.7 400 536L400 576L432 576C458.5 576 480 554.5 480 528L480 491.4zM160 320C160 284.7 188.7 256 224 256C259.3 256 288 284.7 288 320C288 355.3 259.3 384 224 384C188.7 384 160 355.3 160 320zM416 256C451.3 256 480 284.7 480 320C480 355.3 451.3 384 416 384C380.7 384 352 355.3 352 320C352 284.7 380.7 256 416 256z'/%3E%3C/svg%3E");
}

.stat-card[data-type="deaths"] {
    background: linear-gradient(90deg, rgba(231, 76, 60, 1) 0%, rgba(214, 109, 36, 1) 100%);
}

.stat-card h3 {
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.stat-card p {
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    z-index: 1;
    color: var(--text-color);
}

.game-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-filter {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-filter select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg);
    color: var(--text-color);
    min-width: 150px;
}

#game-search {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg);
    color: var(--text-color);
    min-width: 200px;
}

#status-filter {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg);
    color: var(--text-color);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 0.5rem;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

.games-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.game-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px var(--shadow-color);
    display: flex;
    flex-direction: column;
    transition: all .2s ease;
}

.game-card:hover {
    transform: scale(1.03);
}

.game-cover-container {
    position: relative;
    padding-top: 133.33%;
    /* 352/264 = 1.333 ratio */
    overflow: hidden;
}

.game-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}

.game-details {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.game-title {
    font-family: "Faustina", serif;
    font-optical-sizing: auto;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--game-title);
}

.game-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    align-items: center;
}

.game-status {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-playing {
    background-color: #ffc107;
    color: #333;
}

.status-completed {
    background-color: var(--completed-color);
    color: white;
}

#completed-games {
    color: white;
}

.status-backlog {
    background-color: #6c757d;
    color: white;
}

.game-stats {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.game-stat {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    white-space: nowrap;
}

.game-stat i {
    margin-right: 0.3rem;
    width: 16px;
    text-align: center;
}

.stat-deaths {
    color: var(--deaths-color);
}

.stat-hours {
    color: var(--hours-color);
}

#total-hours {
    color: white;
}

#total-deaths {
    color: white;
}

.stat-hours {
    color: var(--hours-color);
}

#total-games {
    color: var(--games-color);
}

.stat-rating {
    color: var(--rating-color);
}

.game-stats div {
    margin-bottom: 0.3rem;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: var(--card-bg);
    margin: 5% auto;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    position: relative;
}

.close-modal {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg);
    color: var(--text-color);
}

#igdb-results-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.igdb-game {
    cursor: pointer;
    text-align: center;
}

.igdb-cover {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}

.igdb-title {
    font-size: 0.8rem;
    margin-top: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

footer {
    margin: 5rem -1rem 0 -1rem;
    padding: 1.5rem 1rem 1rem 1rem;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background-color: var(--border-color);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 1rem;
}

.footer-attribution {
    text-align: center;
}

.footer-attribution p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.8;
}

.footer-social {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.footer-social a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.footer-social a[aria-label="Twitch"]:hover {
    color: #9146ff;
}

.footer-social a[aria-label="YouTube"]:hover {
    color: #ff0000;
}

.footer-social a[aria-label="X (Twitter)"]:hover {
    color: #000000;
}

.footer-social a[aria-label="TikTok"]:hover {
    color: #fe2c55;
}

.footer-social a[aria-label="Instagram"]:hover {
    color: #e4405f;
}

.footer-content .igdb {
    color: #9147ff;
}

.footer-content .twitchtracker {
    color: #18bc9c;
}

footer a:not(.footer-social a) {
    color: var(--primary-color);
    text-decoration: none;
}

footer a:not(.footer-social a):hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .stats-summary {
        grid-template-columns: 1fr 1fr;
    }

    .game-controls {
        flex-direction: column;
    }

    .search-filter {
        width: 100%;
    }

    #game-search {
        flex-grow: 1;
    }

    header.scrolled {
        padding: 8px 1rem;
    }

    header.scrolled .logo-container {
        width: 100px;
        height: 35px;
    }

    header.scrolled h1 {
        font-size: 1rem;
        margin-left: 15px;
    }

    .footer-content {
        gap: 1rem;
    }

    .footer-social {
        justify-content: center;
    }
}

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

    .games-list {
        grid-template-columns: 1fr;
    }

    header.scrolled .logo-container {
        width: 80px;
        height: 28px;
    }

    header.scrolled h1 {
        font-size: 0.9rem;
        margin-left: 10px;
    }

    header.scrolled {
        padding: 8px 1rem;
    }

    .footer-social a {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .footer-social {
        gap: 0.8rem;
    }
}

.no-games {
    text-align: center;
    grid-column: 1 / -1;
    padding: 2rem;
    color: var(--text-color);
    opacity: 0.7;
}

.game-notes {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
    font-size: 0.85rem;
    color: #ffc107;
    flex-grow: 1;
}