@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap');

:root {
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;
    --amor-pink: #F09BD7;
    --amor-pink-hover: #D889BF;
    --amor-danger: #ef4444;
    --amor-danger-hover: #dc2626;
    --amor-success: #28b62c;
    --amor-success-hover: #229b25;
}

.preload-hidden {
    visibility: hidden;
    opacity: 0;
    transition: none;
}
body:not(.preload-hidden) {
    visibility: visible;
    opacity: 1;
}

.site-alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    border: 1px solid transparent;
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    width: 100%;
}

.site-alert.alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; }
.site-alert.alert-secondary { color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8; }
.site-alert.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.site-alert.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.site-alert.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.site-alert.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; }
.site-alert.alert-light { color: #636464; background-color: #fcfcfd; border-color: #f9fafb; }
.site-alert.alert-dark { color: #141619; background-color: #d3d3d4; border-color: #bcbebf; }

[data-bs-theme="dark"] .site-alert.alert-primary { background-color: #084298; border-color: #0a58ca; color: #cce5ff; }
[data-bs-theme="dark"] .site-alert.alert-secondary { background-color: #41464b; border-color: #565e64; color: #e2e3e5; }
[data-bs-theme="dark"] .site-alert.alert-success { background-color: #0f5132; border-color: #146c43; color: #d1e7dd; }
[data-bs-theme="dark"] .site-alert.alert-danger { background-color: #842029; border-color: #a9323d; color: #f8d7da; }
[data-bs-theme="dark"] .site-alert.alert-warning { background-color: #664d03; border-color: #806004; color: #fff3cd; }
[data-bs-theme="dark"] .site-alert.alert-info { background-color: #055160; border-color: #066578; color: #cff4fc; }
[data-bs-theme="dark"] .site-alert.alert-light { background-color: #636464; border-color: #7c7d7d; color: #f0f0f0; }
[data-bs-theme="dark"] .site-alert.alert-dark { background-color: #141619; border-color: #2c3034; color: #d3d3d4; }
[data-bs-theme="light"] {
    --bs-body-bg: #f0f2f5;
    --bs-body-color: #333;
    --bs-border-color: #dee2e6;
    --surface-color: #ffffff;
    --bs-secondary-color: #555;
    --bs-link-color: #333;
    --bs-card-cap-bg: #f8f9fa;
    --bs-body-tertiary-bg: #f8f9fa;
    --bs-body-secondary-bg: #e9ecef;
    --bs-body-tertiary-color: #6c757d; 
}

[data-bs-theme="dark"] {
    --bs-body-bg: #18191a;
    --bs-body-color: #e4e6eb;
    --bs-border-color: #495057;
    --surface-color: #242526;
    --bs-secondary-color: #b0b3b8;
    --bs-link-color: #e4e6eb;
    --bs-card-cap-bg: #2d2e2f;
    --bs-body-tertiary-bg: #343a40;
    --bs-body-secondary-bg: #495057;
    --bs-body-tertiary-color: #adb5bd;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

.card, .navbar, .dropdown-menu {
    background-color: var(--surface-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.navbar {
    border-radius: 0;
}
#feedInput { resize: none; text-align: center; }
#feedInput::placeholder { text-align: center; }
#feedInput:focus::placeholder { color: transparent; }
.btn-primary { --bs-btn-bg: var(--amor-pink); --bs-btn-border-color: var(--amor-pink); --bs-btn-hover-bg: var(--amor-pink-hover); --bs-btn-hover-border-color: var(--amor-pink-hover); --bs-btn-active-bg: var(--amor-pink-hover); --bs-btn-active-border-color: var(--amor-pink-hover); --bs-btn-focus-shadow-rgb: 216, 137, 191; }
.auth-link { color: var(--amor-pink); text-decoration: none; font-weight: 600; transition: color 0.2s ease-in-out; }
.auth-link:hover { color: var(--amor-pink-hover); text-decoration: none; }
.btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus { background-color: var(--amor-pink-hover) !important; border-color: var(--amor-pink-hover) !important; box-shadow: 0 0 0 0.25rem rgba(216, 137, 191, 0.5) !important; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--amor-pink) !important; border-color: var(--amor-pink) !important; opacity: 0.65; }
.btn-danger { --bs-btn-bg: var(--amor-danger); --bs-btn-border-color: var(--amor-danger); --bs-btn-hover-bg: var(--amor-danger-hover); --bs-btn-hover-border-color: var(--amor-danger-hover); }
.btn-success.btn-play { --bs-btn-bg: var(--amor-success); --bs-btn-border-color: var(--amor-success); --bs-btn-hover-bg: var(--amor-success-hover); --bs-btn-hover-border-color: var(--amor-success-hover); --bs-btn-active-bg: var(--amor-success-hover); --bs-btn-active-border-color: var(--amor-success-hover); padding: 0.75rem 4rem; font-size: 1.25rem; }
.navbar .nav-link:hover, .card-title a:hover { color: var(--amor-pink-hover); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--amor-pink-hover) !important; background-color: transparent !important; }
.navbar .nav-link { font-weight: 600; }
.amor-currency { color: var(--amor-pink); text-shadow: 0 0 8px rgba(240, 155, 215, 0.7); }
.special-user-name { color: var(--amor-pink); }
.special-user-heart { margin-left: 8px; }
.forum-post-user-info .special-user-heart { margin-left: 4px; }
.special-user-heart svg { fill: var(--amor-pink); filter: drop-shadow(0 0 5px rgba(240, 155, 215, 0.7)); transform: translateY(-2px); width: 1em; height: 1em; }
.user-avatar-lg { width: 500px; height: 500px; max-width: 100%; object-fit: contain; border: none; }
.user-avatar-md { width: 150px; height: 150px; object-fit: contain; border: 1px solid var(--bs-border-color); }
.user-avatar-profile { width: 180px; height: 180px; object-fit: contain; border: none; }
.friend-avatar { width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--bs-border-color); object-fit: contain; margin-bottom: 0.5rem; }
.game-card-thumbnail { width: 100%; padding-bottom: 56.25%; background-size: cover; background-position: center; background-color: var(--surface-color); }
.card.game-card .game-card-thumbnail, .profile-games-grid .game-card-thumbnail { border-radius: 0; }
.card-title a { color: var(--bs-body-color); text-decoration: none; transition: color 0.2s ease; }
.theme-switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4d5256; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--amor-pink); }
input:checked + .slider:before { transform: translateX(26px); }
.game-main-thumbnail { border: 1px solid var(--bs-border-color); } .card-header { background-color: var(--bs-card-cap-bg); } .creator-plaque-avatar { width: 100%; height: auto; object-fit: contain; border: none; margin-bottom: 1rem; } .creator-name { color: var(--amor-pink); transition: color 0.2s ease-in-out; } .creator-name:hover { color: var(--amor-pink-hover); } #gameTab .nav-tabs { border-bottom: 1px solid var(--bs-border-color); } #gameTab .nav-link { background-color: transparent; border: 1px solid transparent; border-bottom: none; color: var(--bs-secondary-color); } #gameTab .nav-link.active { background-color: var(--surface-color); color: var(--bs-body-color); border-color: var(--bs-border-color); border-bottom: 1px solid var(--surface-color); } #gameTab .nav-link:hover { border-color: var(--bs-border-color); border-bottom: 1px solid var(--surface-color); color: var(--bs-body-color); } #gameTabContent { border: 1px solid var(--bs-border-color); border-top: none; } #gameTabContent > .tab-pane.card { border: none; }
.genre-list-group .list-group-item { background-color: transparent; border-color: var(--bs-border-color); padding: 0; } .genre-list-group .list-group-item-action { color: var(--bs-body-color); text-decoration: none; display: block; padding: 0.75rem 1.25rem; font-weight: 600; transition: all 0.2s ease-in-out; } .genre-list-group .list-group-item-action:hover { background-color: rgba(var(--bs-body-color-rgb), 0.05); color: var(--amor-pink-hover); } .genre-list-group .list-group-item-action.active { background-color: var(--amor-pink); color: #fff; border-color: var(--amor-pink); } .genre-list-group .list-group-item-action.active:hover { background-color: var(--amor-pink-hover); } .card .list-group-flush:first-child .list-group-item:first-child { border-top: 0; } .card .list-group-flush:last-child .list-group-item:last-child { border-bottom: 0; }
.admin-nav .list-group-item { font-weight: 600; border-bottom: none; } .admin-nav .list-group-item.active { background-color: var(--amor-pink); color: #fff; border-color: var(--amor-pink); } .admin-nav .list-group-item.active:hover { background-color: var(--amor-pink-hover); } .admin-nav .list-group-item:not(.active):hover { background-color: rgba(var(--bs-body-color-rgb), 0.05); } #alertType option { background-color: var(--surface-color); color: var(--bs-body-color); }
.badge-icon { width: 80px; height: 80px; object-fit: contain; margin-right: -30px; } .badge-name { color: var(--amor-pink); text-shadow: 0 0 8px rgba(240, 155, 215, 0.7); } #profile-badges-container .card { width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; } #profile-badges-container .card-body { padding: 0.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#about-me-textarea { resize: none; }
.ql-toolbar.ql-snow { border: 1px solid var(--bs-border-color); border-bottom: 0; border-radius: 0; background-color: var(--bs-body-tertiary-bg); padding: 8px; }
.ql-snow .ql-picker-label, .ql-snow .ql-picker.ql-color-picker .ql-picker-label svg path, .ql-snow .ql-stroke { stroke: var(--bs-body-color) !important; color: var(--bs-body-color) !important; }
.ql-snow .ql-fill { fill: var(--bs-body-color) !important; }
.ql-snow .ql-picker-options { background-color: var(--surface-color); border: 1px solid var(--bs-border-color) !important; }
.ql-snow .ql-picker-item { color: var(--bs-body-color) !important; }
.ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-item.ql-selected { color: var(--amor-pink-hover) !important; background-color: rgba(var(--bs-body-color-rgb), 0.1); }
.ql-container.ql-snow { border: 1px solid var(--bs-border-color); border-radius: 0; background-color: var(--surface-color); color: var(--bs-body-color); }
.ql-editor { min-height: 150px; font-family: 'Source Sans Pro', sans-serif; font-size: 1rem; color: var(--bs-body-color); line-height: 1.6; }
.ql-editor.ql-blank::before{ color: var(--bs-secondary-color); font-style: normal; left: 15px; right: 15px; }
.ql-editor p { margin-bottom: 0.75rem; }
.pagination { margin-bottom: 0; }
.pagination .page-link {
    border-radius: 0 !important;
    background-color: var(--surface-color);
    border-color: var(--bs-border-color);
    color: var(--bs-link-color);
    padding: 0.5rem 1rem;
    font-weight: 700;
    margin: 0 2px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.pagination .page-item.active .page-link { background-color: var(--amor-pink); border-color: var(--amor-pink); color: #fff; z-index: 3; font-weight: 700; }
.pagination .page-item.disabled .page-link {
    color: var(--bs-link-color);
    background-color: var(--surface-color);
    border-color: var(--bs-border-color);
    opacity: 0.5;
}
.pagination .page-link:not(.disabled):hover { z-index: 2; color: var(--amor-pink); background-color: var(--bs-body-tertiary-bg); border-color: var(--bs-border-color); }
.pagination .page-item.active .page-link:hover { background-color: var(--amor-pink); border-color: var(--amor-pink); color: #fff; }
.breadcrumb { padding: 0.5rem 1rem; margin-bottom: 1rem; background-color: var(--bs-body-secondary-bg); border-radius: 0; }
.breadcrumb-item a { text-decoration: none; color: var(--amor-pink); }
.breadcrumb-item a:hover { color: var(--amor-pink-hover); }
.breadcrumb-item.active { color: var(--bs-secondary-color); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bs-secondary-color); }

@media (max-width: 767.98px) {
    .forum-post-user-info { border-right: none; border-bottom: 1px solid var(--bs-border-color); }
    .forum-post-user-info .small div { display: inline-block; margin-right: 0.5rem;}
    .user-avatar-forum { width: 60px; height: 60px; }
}

.row > .col > .card {
    border-radius: 0 !important;
}

.catalog-item-image-bg {
    background-color: #242526; /* Default/Dark mode */
}

[data-bs-theme="light"] .catalog-item-image-bg {
    background-color: var(--bs-body-tertiary-bg);
}

.item-render-bg {
    background-color: #242526; /* Default/Dark mode */
}

[data-bs-theme="light"] .item-render-bg {
    background-color: var(--bs-body-tertiary-bg);
}

.catalog-item-card {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
}
.catalog-item-card .card-img-top {
    flex-grow: 1;
    min-height: 0;
}
.catalog-item-card .card-body {
    padding: 0.75rem;
    flex-shrink: 0;
}

.catalog-item-card .card-title {
    text-decoration: none;
    color: var(--bs-body-color);
    transition: color 0.2s ease;
}
.catalog-item-card .card-title:hover {
     color: var(--amor-pink-hover);
}

.catalog-item-card .card-price {
    font-size: 0.9rem;
}