@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --dark-blue-bg: #0d1b2a;
  --medium-blue-bg: #1b263b;
  --light-blue-bg: #415a77;
  --accent-color: #52babd; 
  --text-color: #e0e1dd;
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--dark-blue-bg);
  --bs-body-color: var(--text-color);
  --bs-emphasis-color: #fff;
  --bs-secondary-bg: var(--medium-blue-bg);
  --bs-tertiary-bg: var(--medium-blue-bg);
  --bs-primary: var(--accent-color);
  --bs-primary-rgb: 82, 186, 189;
  --bs-border-color: #304158;
  --bs-link-color: #9cb3d0;
  --bs-link-hover-color: #ffffff;
}

body {
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(rgba(13, 27, 42, 0.88), rgba(13, 27, 42, 0.88)), url("/images/background.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.navbar {
  background-color: var(--medium-blue-bg) !important;
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.navbar .navbar-brand {
  font-weight: bold;
  color: var(--text-color);
}

.navbar-brand img {
  height: 50px;
  margin-right: 0;
}

.navbar .nav-link {
  color: var(--accent-color);
  font-size: 1.2rem;
  padding: 0 0.75rem;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
  color: var(--text-color);
}

.navbar .navbar-text {
  font-size: 1.2rem;
}

.btn-primary {
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-bg: #3a8c8f; 
  --bs-btn-hover-border-color: #3a8c8f;
  --bs-btn-active-bg: #3a8c8f;
  --bs-btn-active-border-color: #3a8c8f;
  --bs-btn-focus-shadow-rgb: 82, 186, 189, .5;
  --bs-btn-color: var(--dark-blue-bg);
  --bs-btn-hover-color: var(--dark-blue-bg);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-hover-color: var(--dark-blue-bg);
}

.btn-secondary {
  --bs-btn-color: var(--text-color);
  --bs-btn-bg: var(--light-blue-bg);
  --bs-btn-border-color: var(--light-blue-bg);
  --bs-btn-hover-bg: #527194; 
  --bs-btn-hover-border-color: #527194;
  --bs-btn-active-bg: #527194;
  --bs-btn-active-border-color: #527194;
}

.welcome-jumbotron {
  background-color: rgba(27, 38, 59, 0.7); 
  border: 1px solid var(--bs-border-color);
}

.text-muted {
  color: var(--accent-color) !important;
  opacity: 0.85;
}

.card {
  background-color: var(--medium-blue-bg);
  border-color: var(--bs-border-color);
}

.form-control,
.form-select {
  background-color: var(--bs-tertiary-bg);
  color: var(--text-color);
  border-color: var(--bs-border-color);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--text-color);
  border-color: var(--accent-color);
}

.status-badge {
  background-color: var(--light-blue-bg);
  color: var(--text-color);
  font-weight: 500;
}

.list-group-item {
  background-color: var(--medium-blue-bg);
  border-color: var(--bs-border-color);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--light-blue-bg);
}

.game-list-art {
  width: 120px;
  height: 90px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: .25rem;
}

.game-list-art-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--dark-blue-bg);
  color: var(--accent-color);
  width: 120px;
  height: 90px;
  margin-right: 20px;
  text-align: center;
  font-size: 0.8rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.community-game-art {
  width: 45px;
  height: 60px;
  object-fit: cover;
  border-radius: .25rem;
}

.game-show-art-placeholder {
  border: 2px dashed var(--bs-border-color);
  min-height: 200px;
}

.rating-star-filled {
  color: #ffc107;
}

.rating-star-empty {
  color: #343a40;
}

.site-footer {
  background-color: var(--medium-blue-bg);
  color: var(--accent-color);
  padding: 20px 0;
  /* Pushes footer to the bottom */
  margin-top: auto;
  border-top: 1px solid var(--bs-border-color);
  text-align: center;
  font-size: 0.9rem;
}

.game-portrait-card {
  position: relative;
  display: block;
  border-radius: .375rem;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  color: var(--text-color);
  text-decoration: none;
}

.game-portrait-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

.game-portrait-img {
  width: 100%;
  aspect-ratio: 2 / 3; 
  object-fit: cover;
  display: block;
}

.game-portrait-img-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background-color: var(--bs-tertiary-bg);
  color: var(--accent-color);
  font-weight: bold;
}

.game-portrait-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(13, 27, 42, 0.95), transparent);
  padding: 2rem 0.75rem 0.75rem;
}

.game-portrait-title {
  font-size: 1.125rem;
  font-weight: bold;
  white-space: normal;
  margin-bottom: 0.25rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.game-portrait-rating {
  font-size: 1rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.auth-form-container {
  background-color: rgba(33, 37, 41, 0.8) !important; 
  border: none; 
}