:root {
  --ss-bg: #0d1117;
  --ss-bg-alt: #161b22;
  --ss-border: #30363d;
  --ss-text: #c9d1d9;
  --ss-text-secondary: #8b949e;
  --ss-accent: #58a6ff;
  --ss-accent-2: #a371f7;
  --ss-green: #3fb950;
  --ss-red: #f85149;
}

body {
  background-color: var(--ss-bg);
  color: var(--ss-text);
}

a {
  color: var(--ss-accent);
}

.ss-navbar {
  background-color: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ss-border);
}

.ss-breadcrumb {
  background: transparent;
  padding: 0;
}

.ss-hero {
  background: radial-gradient(circle at top, rgba(88, 166, 255, 0.15), transparent 60%);
  border-bottom: 1px solid var(--ss-border);
}

.ss-filters,
.card {
  background-color: var(--ss-bg-alt);
  border: 1px solid var(--ss-border);
}

.form-control,
.form-select {
  background-color: #0d1117;
  border-color: var(--ss-border);
  color: var(--ss-text);
}
.form-control:focus,
.form-select:focus {
  background-color: #0d1117;
  color: var(--ss-text);
  border-color: var(--ss-accent);
  box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

.ss-card {
  background-color: var(--ss-bg-alt);
  border: 1px solid var(--ss-border);
  transition: transform 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.ss-card:hover {
  transform: translateY(-4px);
  border-color: var(--ss-accent);
}

.ss-cover {
  aspect-ratio: 3 / 4;
  /* "contain", no "cover": Nintendo y Steam usan relaciones de aspecto
     distintas (y las plataformas futuras seguramente otra más), así que
     recortar para rellenar el hueco corta partes de la portada según la
     fuente. Con "contain" nunca se recorta nada, a costa de un pequeño
     margen cuando la proporción no coincide exacta. */
  object-fit: contain;
  width: 100%;
  background-color: #0d1117;
}

.ss-title {
  color: var(--ss-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-score {
  color: var(--ss-accent-2);
  font-weight: 600;
}

.ss-badge {
  background-color: rgba(88, 166, 255, 0.15);
  color: var(--ss-accent);
  border: 1px solid rgba(88, 166, 255, 0.35);
  font-weight: 500;
  white-space: normal;
}

/* Storage Score™: la métrica propia de la web, visible en cada portada. */
.ss-storage-score {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: rgba(13, 17, 23, 0.85);
  border: 1px solid var(--ss-accent-2);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.ss-storage-score small {
  font-weight: 600;
  opacity: 0.75;
  font-size: 0.65em;
}
.ss-storage-score--high { border-color: var(--ss-green); }
.ss-storage-score--mid { border-color: var(--ss-accent); }
.ss-storage-score--low { border-color: var(--ss-red); }

/* Plataforma (Switch/Switch 2/PS5/PS4/Xbox.../PC), esquina opuesta al Storage
   Score. Texto corto en vez de emoji: no hay iconos oficiales de consola en
   Unicode, y "🎮" para todas por igual no las distinguía entre sí. */
.ss-platform-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: rgba(13, 17, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  line-height: 1;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.ss-banner {
  height: 260px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.ss-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.2) 0%, var(--ss-bg) 100%);
}

.ss-cover-detail {
  border: 1px solid var(--ss-border);
}

.ss-storage-score-hero {
  background: linear-gradient(160deg, rgba(163, 113, 247, 0.18), rgba(88, 166, 255, 0.08));
  border: 1px solid var(--ss-accent-2);
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}
.ss-storage-score-hero-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.ss-storage-score-hero-label {
  display: block;
  margin-top: 0.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ss-accent-2);
}
.ss-storage-score-hero-help {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--ss-text-secondary);
  line-height: 1.4;
}

.ss-recommendation {
  background-color: rgba(163, 113, 247, 0.12);
  border: 1px solid rgba(163, 113, 247, 0.4);
  color: var(--ss-text);
}

.ss-stats {
  margin-top: 1rem;
}
.ss-stat {
  background: var(--ss-bg-alt);
  border: 1px solid var(--ss-border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ss-stat-label {
  font-size: 0.72rem;
  color: var(--ss-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ss-stat-value {
  font-size: 1.15rem;
  font-weight: 600;
}

.ss-storage-bar {
  background-color: #0d1117;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  height: 0.9rem;
  overflow: hidden;
}
.ss-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ss-accent), var(--ss-accent-2));
}

.ss-footer {
  border-top: 1px solid var(--ss-border);
  color: var(--ss-text-secondary);
}

#calcSearchResults .list-group-item,
#calcSelectedList .list-group-item {
  background-color: var(--ss-bg-alt);
  border-color: var(--ss-border);
  color: var(--ss-text);
}

@media (max-width: 576px) {
  .ss-hero { padding-top: 2rem; padding-bottom: 2rem; }
}