/*
 * Stylesheet for the Konect profile clone.
 * This file defines a dark gaming-themed aesthetic with a red gradient backdrop,
 * inspired by the original Konect design. It uses modern CSS features such as
 * flexbox and grid while remaining simple and responsive.
 */

/* Reset some basic styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  /* Use Poppins throughout the site for consistent typography */
  font-family: 'Poppins', sans-serif;
  background-color: #0d0d0d;
  color: #f5f5f5;
  line-height: 1.4;
  /* Enable smooth scrolling for anchor links */
  scroll-behavior: smooth;
}

/* Color variables for easy adjustments */
:root {
  --color-bg-primary: #0d0d0d;
  /* Adjusted gradient colours to more closely match the original Konect page. */
  /* The original uses a nearly black shade at the top and a vivid red at the bottom.
     These variables mirror that by defining the start colour as a very dark
     reddish-black and the end colour as a bright crimson. */
  /* Adjusted start and end colours for the page gradient. The top of the page
     should be a deep, almost black crimson, while the bottom fades to a rich
     blood-red similar to the original website's backdrop. */
  /* Invert the gradient so the brighter red is at the top and darkens toward the bottom */
  /* Swap the start and end colours so the gradient begins dark at the top and
     fades into a brighter red at the bottom. This mirrors the original
     profile page where the header area is darker and the background
     intensifies towards the bottom of the viewport. */
  /* Invert the gradient again so the brighter red starts at the top and
     transitions into a darker shade at the bottom. This change matches
     the user's latest request to flip the overall background gradient. */
  --color-bg-gradient-start: rgb(115, 0, 0);
  --color-bg-gradient-end: rgb(15, 0, 0);
  --color-card-bg: #161618;
  --color-section-bg: #1e1e21;
  --color-accent: #d61e42;
  --color-highlight: #fbd14b;
  --text-muted: #a3a3a3;
  --border-radius: 6px;
}

/* Utility classes */
.container {
  width: 100%;
  /* Reduce the maximum width to better match the tighter layout of the original */
  max-width: 960px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Navigation bar */
.site-header {
  background-color: #070707;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-highlight);
}

.logo-icon {
  background-color: var(--color-accent);
  color: #fff;
  padding: 4px 6px;
  border-radius: var(--border-radius);
  margin-right: 8px;
  font-size: 0.9rem;
}

.logo-text {
  color: #fff;
  font-weight: 600;
  text-transform: lowercase;
}

.main-nav {
  display: flex;
  gap: 24px;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-accent);
}

.new-tag::after {
  content: 'NEW';
  font-size: 0.65rem;
  font-weight: 600;
  color: #000;
  background-color: var(--color-highlight);
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 4px;
}

.auth-buttons {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 6px 16px;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-login {
  background-color: transparent;
  color: #fff;
  border: 1px solid #333;
}

.btn-login:hover {
  background-color: #222;
}

.btn-signup {
  background-color: var(--color-highlight);
  color: #000;
  font-weight: 600;
}

.btn-signup:hover {
  background-color: #f3c628;
}

/* Profile section with gradient background */
.profile-section {
  /* Compose two gradients to better match the original's background:
     1. A radial gradient emanating from the right side of the screen that
        introduces a bright red glow, creating the vertical band visible in the
        screenshot. The radial gradient fades to transparent toward the
        interior.
     2. A vertical linear gradient for the overall dark‑to‑red transition.
  */
  background-image:
    radial-gradient(circle at 95% 50%, rgba(150, 0, 0, 0.55) 0%, rgba(150, 0, 0, 0) 60%),
    linear-gradient(to bottom, var(--color-bg-gradient-start), var(--color-bg-gradient-end));
  padding-top: 50px;
  padding-bottom: 80px;
  /* Because the header has been removed, the full viewport height is used */
  min-height: 100vh;
  position: relative;
  z-index: 0;
}

/* Add a subtle dark overlay over the entire profile section so that the red
   gradient background appears deeper. This technique replicates the
   transparent black backdrop seen in the original screenshot. */
.profile-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: -1;
}

/* Profile banner combining cover and user information */
.profile-banner {
  width: 100%;
  /* Limit the maximum width to align with other sections */
  max-width: 960px;
  /* Reduce the bottom margin so the following sections sit closer to the banner */
  /* Reduce bottom margin for tighter layout */
  /* Pull the following section closer to the banner. A smaller bottom
     margin means the next card (e.g. Links) hugs the banner more tightly,
     similar to the spacing seen on the reference site. */
  /* Apply a small bottom margin so the banner and the first section align
     closely. This margin now matches the section spacing to create a
     consistent rhythm between stacked cards. */
  /* Reduce the space below the banner so the next section sits closer */
  /* Collapse the space beneath the banner completely so the following
     section aligns flush against it */
  margin: 0 auto 0 auto;
  border-radius: calc(var(--border-radius) * 2);
  overflow: hidden;
  /* Remove the explicit border so the banner blends seamlessly into the
     card, matching the reference design where the image sits flush
     against the container edges. */
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  background-color: transparent;
}

/* Top cover area */
.banner-cover {
  width: 100%;
  /* Increase the cover height to better match the proportions of the
     screenshot provided by the user. A taller cover exposes more of
     the banner artwork while still leaving room for the avatar and name. */
  /* Increase the banner height to more closely match the proportions in
     the provided screenshot. A taller cover exposes more of the artwork. */
  /* Reduce the height of the cover to better match the user's screenshot.
     A shorter cover prevents overlap and aligns the cropping more closely
     with the provided reference. */
  height: 260px;
  overflow: hidden;
  position: relative;
}

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

/* Content area under the cover */
.banner-content {
  position: relative;
  /* Use transparent background so the page gradient shows through,
     replicating the seamless transition from the banner to the rest
     of the profile. */
  padding: 60px 20px 6px;
  background-color: transparent;
  text-align: center;
}

/* Avatar that overlaps the cover and sits in the content area */
.banner-avatar {
  position: absolute;
  /* Position the avatar slightly lower so it sits neatly on the shorter banner */
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(0, 0, 0, 0.6);
  background-color: #2f2f34;
}

.banner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Name styling */
.banner-name {
  font-size: 2.4rem;
  font-weight: 700;
  /* Add space above the username so it sits further away from the
     overlapping avatar as requested */
  /* Increase the top margin to create more breathing room between the
     overlapping avatar and the username text. This spacing better
     matches the reference design where the name sits lower beneath
     the avatar. */
  /* Bring the username slightly closer to the avatar */
  /* Reduce vertical margins so the username sits closer to the avatar and
     doesn't push the navigation downward. */
  margin-top: 12px;
  margin-bottom: 4px;
  /* Use a heavier weight of Poppins for the username. This replicates
     the bold, blocky look seen in the reference screenshot while
     maintaining consistency with the rest of the typography. */
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
}

/* Location text (flag and country) */
/*
 * Location text (age, flag and country) styling
 *
 * The user requested that the age and location line (e.g. “23 | 🇩🇪 Germany”)
 * use a brighter colour and a distinct font to stand out more prominently
 * against the dark banner background. To accommodate this, the text colour
 * has been changed from the muted grey to pure white, and the typeface has
 * been switched to Poppins, matching the headings elsewhere on the page.
 */
.banner-location {
  font-size: 0.9rem;
  /* Make the age and country line white instead of muted grey */
  color: #ffffff;
  /* Centre the flag and separators neatly */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Add extra spacing below the age/location line for better separation from
     the hobby icons row. */
  /* Increase spacing below age/location line for more breathing room */
  /* Reduce the spacing below the age/flag line for a tighter layout. */
  margin-bottom: 8px;
  /* Apply Poppins to differentiate this line from the body text */
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/* Small decorative icons representing hobbies or interests */
.banner-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  color: var(--color-accent);
  font-size: 1.2rem;
  /* Slightly increase spacing beneath the icons row to separate it from the
     navigation links. */
  /* Increase spacing below the hobby icons row */
  /* Bring the navigation closer to the hobbies row by reducing the bottom
     margin. */
  margin-bottom: 14px;
  /* Increase horizontal spacing between emojis */
  gap: 16px;
}

/* Social media icons row inside the banner */
.banner-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* Navigation tabs beneath the social icons */
.banner-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* Increase horizontal gap between navigation tabs to space the links
     evenly and mirror the generous spacing in the reference image */
  gap: 24px;

  /* Add extra top margin to separate the navigation links from the
     icons row and create more breathing room in the profile banner */
  /* Reduce top margin so the tabs sit nearer to the icons row. */
  margin-top: 14px;
}

/* Reuse the existing tab styles for banner-tabs links */
.banner-tabs .tab-link {
  color: #fff;
  text-decoration: none;
  /* Increase the navigation font size slightly for improved readability */
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease;
  /* Use Poppins for nav tabs */
  /* Use the Russo One display font for the navigation links to emulate
     the sharp, condensed uppercase lettering shown in the reference
     screenshot. Fallback to Poppins if unavailable. */
  font-family: 'Russo One', sans-serif;
}

.banner-tabs .tab-link:hover {
  background-color: #2e2e33;
}

/* Layout wrapper for the username and its accompanying GIF. Using flex
   ensures the text and image align horizontally with consistent spacing. */
.banner-name-wrapper {
  display: flex;
  align-items: center;
  /* Centre the username and GIF together within the banner */
  justify-content: center;
  gap: 12px;
  /* Ensure the wrapper itself is centred horizontally */
  margin-left: auto;
  margin-right: auto;
  /* Prevent any extra width that could misalign the GIF */
  width: fit-content;
}

/* Size of the animated GIF next to the username. The height is kept
   proportional to the font size of the heading to maintain balance. */
.banner-name-gif {
  /* Increase the size of the animated GIF next to the username to
     better match the proportion shown in the user's screenshot. */
  /* When the GIF is placed inline next to the username text, size it
     relative to the surrounding font. Using em units ensures the
     image scales consistently with the heading size. */
  height: 1.4em;
  width: auto;
  margin-left: 8px;
  /* Align the bottom of the GIF slightly below the baseline so it
     sits more naturally with the text. A small negative offset
     compensates for the character descenders. */
  vertical-align: -0.15em;
  object-fit: contain;
  /* The GIF should behave like a standard image element. Avoid using
     flex display on the <img> itself so that the image renders
     correctly and the alt text is not shown. */
}

/* Styling for inline emojis in the banner icons row. Increasing the font
   size ensures the emojis are visible and legible, and a small horizontal
   margin separates them. */
.banner-icons .emoji {
  font-size: 1.4rem;
  /* Tighten horizontal spacing between emojis */
  /* Reduce spacing further between emojis for a tighter grouping */
  margin: 0 1px;
}

/* Badge preceding the username */
.name-badge {
  /* Use the accent colour for the badge so it blends with the site's red theme */
  color: var(--color-accent);
  font-size: 1.4rem;
  /* Display inline so the badge sits on the same line as the username */
  display: inline-block;
  margin-right: 8px;
}

/* Social icons row within the banner */
.banner-social a {
  /* Use the accent colour for social icons to match the badge */
  color: var(--color-accent);
  font-size: 1.2rem;
  transition: color 0.2s ease;
}
.banner-social a:hover {
  color: var(--color-highlight);
}

/* Override default colours for tabs in the banner */
.banner-tabs .tab-link {
  /* Provide a bright, lightly tinted colour for the navigation links in
     the banner. The original design uses a pale off‑white with a slight
     pink tint against the dark header. */
  color: #f3dede;
  text-decoration: none;
  /* Increase the font size and weight and add additional letter
     spacing to more closely match the bold uppercase nav seen in the
     screenshot provided by the user. */
  /* Increase the nav font size further to more closely match the large,
     prominent links seen in the reference image. */
  /* Harmonise the navigation text with the rest of the page: slightly smaller
     size, moderate weight and increased letter spacing produce a refined
     uppercase appearance reminiscent of the original site. */
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: var(--border-radius);
  transition: color 0.2s ease;
  font-family: 'Poppins', sans-serif;
  /* Add a subtle text shadow to give the letters a slightly embossed
     appearance similar to the original site. */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 -1px 1px rgba(255, 255, 255, 0.05);
}
.banner-tabs .tab-link:hover {
  /* On hover, brighten the link to the highlight colour and avoid
     applying a background fill. This subtle change echoes the
     original site's navigation hover effect. */
  color: var(--color-accent);
}

/* New tier list layout using rows instead of categories */
.tier-row {
  display: flex;
  align-items: stretch;
  margin-bottom: 16px;
  /* Use a lighter, semi‑opaque maroon to subtly differentiate tier rows
     without making them overly dark. This colour more closely matches
     the reddish tint visible behind the agents in the reference. */
  background-color: rgba(38, 0, 0, 0.35);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.tier-label {
  flex: 0 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.tier-agents {
  /* Display agent cards in a single row with equal widths so the
     columns align across tiers. Removing wrapping forces each agent
     to occupy the same proportion of the row, ensuring vertical
     alignment between rows. */
  /* Use a fixed three‑column grid for tier agents so that each row
     aligns vertically across tiers regardless of image loading. A grid
     ensures consistent column widths across all rows. */
  /* Switch from a grid to a flex layout. A flexbox allows each agent
     card to size itself to its content instead of stretching to fill a
     rigid column. This results in a tighter grouping of the agent
     portraits and more accurately reflects the spacing in the
     reference screenshot. */
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  /* Allow the tier‑agents container to expand across the full width of its parent.
     Removing the fit‑content width and zero flex‑grow ensures each tier row
     occupies the same width, aligning the S, A and B rows perfectly. */
  flex: 1 1 0;
}

/* Add a subtle separator line between tier rows to visually divide S, A and B
   tiers. This line echoes the horizontal separators seen in the reference
   images and helps distinguish each tier without adding bulky borders. */
.tier-row + .tier-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.agent-card {
  /* Arrange each agent's icon and name in a vertical column and
     centre them. Using flexbox here ensures that the name remains
     directly beneath the icon and that all cards share the same
     baseline alignment within the grid. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

/* Ensure each agent icon container has a fixed size and centres its
   contents. This guarantees that both images and fallback alt text
   appear centred within the coloured squares. */
.agent-img {
  /* Enlarge agent portraits to match the proportions in the
     inspiration screenshot. */
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Reduce the font size and allow wrapping so that alt text fits neatly
     within the small icon box when images are missing. */
  font-size: 0.6rem;
  line-height: 1.2;
  padding: 4px;
}
.agent-img img {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  border: 3px solid;
  object-fit: cover;
}
.agent-name {
  /* Bring the agent names closer to the portraits for a tighter layout */
  margin-top: 2px;
  /* Enlarge the agent names and apply a heavier weight for better
     legibility. This stylistic tweak lends the tier list a polished,
     premium feel similar to the original site. */
  font-size: 1.1rem;
  font-weight: 600;
  color: #fdfdfd;
  text-align: center;
}
.tier-s .tier-label,
.tier-s .agent-img img {
  border-color: #e64b4b;
}
.tier-a .tier-label,
.tier-a .agent-img img {
  border-color: #d6932a;
}
.tier-b .tier-label,
.tier-b .agent-img img {
  border-color: #3f7bdc;
}
.tier-s .tier-label {
  background-color: #e64b4b;
}
.tier-a .tier-label {
  background-color: #d6932a;
}
.tier-b .tier-label {
  background-color: #3f7bdc;
}

.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Remove the flex gap so that vertical spacing is controlled by margins
     on individual components. This makes the sections stack closely
     together, similar to the reference design. */
  gap: 0;
  /*
   * The container itself remains transparent. Individual section cards
   * within it provide their own semi‑transparent backgrounds, which
   * collectively form the vertical panel. This avoids applying a
   * background behind the banner and keeps the layout modular.
   */
}

/* Unified profile card that wraps the banner and all section cards. This
   card provides a translucent dark background behind the entire profile
   content, mimicking the central panel in the reference screenshot. */
.profile-card {
  width: 100%;
  /* Lighten the card's primary backdrop to a slightly more transparent black,
     ensuring the red gradient subtly shows through across the entire
     profile panel. */
  background-color: rgba(0, 0, 0, 0.32);
  border-radius: 12px;
  overflow: hidden;
  /* Add a subtle shadow to lift the card off the red backdrop */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.profile-card {
  /* Semi-transparent card background to allow the gradient to subtly show through */
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 600px;
  /* Reduce padding to bring the banner and first section closer together,
     matching the tighter vertical spacing of the reference layout. */
  padding: 20px 20px;
  border-radius: calc(var(--border-radius) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  /* Reset margin now that the avatar overlay is separate */
  margin-top: 0;
  /* Expand card width to fill the container */
  width: 100%;
  max-width: 100%;
}

/* Row for avatar and textual information below the cover */
.info-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.info-text {
  display: flex;
  flex-direction: column;
}

.profile-location {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.country-flag {
  font-size: 1rem;
}

.avatar-wrapper {
  width: 130px;
  height: 130px;
  margin-bottom: 20px;
}

/* Style for the actual profile avatar image */
.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #2f2f34;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 2rem;
}

.profile-name {
  /* Make the profile name larger to match the original hero header */
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Header banner above the profile card */
.profile-header-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: calc(var(--border-radius) * 2);
  margin-bottom: 60px;
  position: relative;
}
/* Remove default styling for the image (no longer used) */
.profile-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Dim the header artwork slightly to ensure overlaid content remains visible */
  filter: brightness(0.7);
}

/* Container for the clean header text */
.header-content {
  text-align: center;
}

.header-title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f5f5f5;
}

/* Avatar overlay placed between the header and profile card */
.header-avatar-wrapper {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin: -65px auto 20px;
  /* Create a subtle border around the avatar to help it stand out */
  border: 4px solid rgba(0, 0, 0, 0.6);
  background-color: #2f2f34;
}

.header-avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* The avatar is displayed within the info row, so ensure it is visible */
.profile-card .avatar-wrapper {
  display: block;
}

.social-icons {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.social-icon {
  color: #c0c0c0;
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #2e2e33;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.social-icon:hover {
  background-color: var(--color-accent);
  color: #fff;
}

.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.tab-link {
  color: #fff;
  text-decoration: none;
  /* Slightly increase tab text size for better readability */
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease;
}

.tab-link:hover {
  background-color: #2e2e33;
}

/* Section wrapper boxes */
.profile-section-box {
  /* Each major section (Links, Ranks, Gaming Setup, etc.) is presented
     as an independent card. Apply a deep, slightly translucent backdrop
     so the underlying gradient subtly peeks through. Rounded corners
     and a gentle shadow lift each card from the page, closely mirroring
     the original profile layout. */
  /* Use a translucent dark backdrop rather than an opaque one. The
     original Konect panels are semi‑transparent so the red gradient
     softly bleeds through. A lower alpha value keeps the cards
     readable while preventing them from appearing too dark. */
  /* Lighten the card background so that more of the page's red gradient
     shines through, emulating the semi‑transparent look of the
     reference page */
  background-color: rgba(0, 0, 0, 0.28);
  width: 100%;
  /* Provide generous padding inside the card so titles and content
     are comfortably spaced. */
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  /* Separate each section vertically to clearly delineate them. Use a
     slightly smaller margin to tighten the spacing, matching the
     reference design where cards sit closer to each other and to
     the banner above. */
  /* Use a smaller margin so consecutive section cards sit closer together,
     similar to the compact stacking seen on the reference site. */
  margin: 16px 0;
  /* Clip overflow to ensure internal shadows from child cards do not
     bleed outside the section container. */
  overflow: hidden;
}

/* Remove top padding on all cards except the first so sections join cleanly */
/* Removed collapsing padding rules; each section now defines its own spacing. */

.section-title {
  /* Increase section titles to better emulate the original's bold headings */
  /* Increase the heading size further to better match the reference design
     where section titles are large and prominent. */
  font-size: 1.7rem;
  font-weight: 800;
  /* Remove the default top margin on heading elements so section titles
     align flush with their containing card. Preserve a small bottom
     margin for separation from the subsequent content. */
  /* Add spacing above and below section titles for better separation */
  margin-top: 8px;
  margin-bottom: 20px;
  text-transform: uppercase;
  /* Expand letter spacing slightly for a bolder look similar to the
     original page. */
  letter-spacing: 1.2px;
  /* Use Poppins for section headings and force pure white colour to
     maximise contrast on the transparent backgrounds. */
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
}

.section-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Links section */
/* Social link card styling */
.link-card {
  width: 100%;
  background-color: rgba(38, 0, 0, 0.55);
  border-radius: calc(var(--border-radius) * 2);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  padding: 12px 16px;
  /* Increase the vertical spacing between social link cards to
     create a cleaner, more breathable layout. */
  margin-top: 12px;
  /* Smooth out background, border and position changes on hover */
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.link-card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #f5f5f5;
}

/*
 * Hover effects for link cards
 *
 * When the user hovers over any social link card, the card will rise
 * slightly and its background will darken. A gentle shadow reinforces
 * the sense of depth. These enhancements make the interactive nature
 * of the link obvious without overpowering the overall design.
 */
.link-card:hover {
  background-color: rgba(38, 0, 0, 0.75);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.link-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.link-icon {
  width: 28px;
  height: 28px;
  /* Keep a small corner radius on the general link icons. Specific
     overrides for image icons are defined separately below. */
  border-radius: 4px;
  object-fit: contain;
}

/* When raster images are used as link icons (e.g. Steam/Twitch),
   apply a fully rounded border radius so the white logos on black
   circles remain circular. */
img.link-icon {
  border-radius: 50%;
}

/* When an SVG is used as a link icon, size and color it similarly to
   other icons. The inner path inherits the current color. */
svg.link-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background-color: rgba(255, 255, 255, 0.05);
}
svg.link-icon path {
  fill: currentColor;
}

/* Special styling for Font Awesome icons used as link icons. When
   applied to <i> elements, ensure the icon sits centred within
   the same size box used for image icons. */
i.link-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  /* Match the accent colour used throughout the site for icons */
  color: var(--color-accent);
  /* Provide a subtle dark background behind the icon to improve
     contrast on the semi‑transparent cards */
  background-color: rgba(255, 255, 255, 0.05);
}

.link-text {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Styling for the arrow indicator on social link cards */
.link-arrow {
  font-size: 1rem;
  color: var(--color-accent);
  font-weight: 600;
}

/* Ranks section */
.ranks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.rank-card {
  /* Layer a subtle radial gradient over the base colour to mimic the soft vignette
     effect seen in the original cards. The gradient starts slightly lighter at
     the centre and darkens toward the edges. */
  background: radial-gradient(circle at center, rgba(45, 45, 50, 0.6) 0%, rgba(15, 15, 20, 0.85) 80%);
  /* Remove the default border so cards blend seamlessly into the dark
     background. Borders will appear only when hovering via the hover rule below. */
  border: none;
  border-radius: 0.5rem;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  /* Prepare smooth transitions for hover interactions */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.rank-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  border-radius: 0.5rem;
  /* Give each icon container a subtle dark base so the radial glow can stand out */
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Radial glow behind rank icons to mirror the original page's effect */
.rank-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* Create a soft radial gradient emanating from the center. The inner colour is a
     slightly lighter shade than the card's background and fades to transparent.
     This effect gives a clean spotlight look behind each icon. */
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}

/* Ensure all icons within rank cards scale uniformly */
.rank-icon img,
.rank-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Position icons above the radial glow */
  position: relative;
  z-index: 1;
}

.rank-game {
  /* Game name inside rank card is no longer used */
  display: none;
}

.rank-title {
  /* Increase rank title size for improved clarity */
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #f5f5f5;
}

/* Highlight special rank card (Faceit Level 10) */
/* Remove permanent highlight border so special cards behave like the rest */
.rank-card.highlight {
  border-color: #303030;
}

/*
 * Explicitly reset the border colour for the fourth rank card (Faceit level)
 * so it no longer appears permanently highlighted. This ensures that
 * the card only changes appearance when hovered like the others.
 */
.rank-card.icon4 {
  border-color: #303030;
}

/*
 * Hover effects for rank cards
 *
 * All rank cards lift gently off the page on hover, while their border
 * becomes highlighted with the accent colour. A deeper shadow adds
 * contrast against the dark background, drawing the eye to the
 * interactive element.
 */
.rank-card:hover {
  transform: translateY(-4px);
  /* Draw a coloured border on hover to indicate interactivity */
  border: 1px solid var(--color-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Game icons bar (for ranks section) */
/* Game icons bar: row of game icons and names above rank cards */
.game-icons-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 16px;
}

/* Container for each game icon and its label */
.game-icon-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #f5f5f5;
  /* Increase the font size for game labels */
  font-size: 0.9rem;
}

.game-icon-item img {
  /* Enlarge game icons to stand out more prominently above the rank cards */
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.game-icon-item .game-label {
  font-size: 0.95rem;
  color: #f5f5f5;
  font-weight: 600;
  text-transform: none;
}

/* Setup section */
.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.setup-item {
  /* Slightly more transparent background for each setup card */
  background-color: rgba(38, 0, 0, 0.35);
  padding: 16px;
  border-radius: calc(var(--border-radius) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  /* Prepare transitions for hover interactions */
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease;
}

/*
 * Hover effect for gaming setup items
 *
 * Each hardware card will lift slightly and darken on hover, mirroring
 * the interactions on the rank and link cards. A coloured border appears
 * to emphasise interactivity.
 */
.setup-item:hover {
  background-color: rgba(38, 0, 0, 0.75);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--color-accent);
}

.setup-image {
  width: 100%;
  height: 160px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  margin-bottom: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setup-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Do not apply grayscale or brightness filters to real product photos so their
     colours remain vibrant */
  filter: none;
}

.setup-label {
  /* Increase label size for hardware categories */
  font-size: 0.75rem;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 4px;
}

.setup-name {
  /* Increase product name size for emphasis */
  font-size: 1rem;
  font-weight: 600;
  color: #f5f5f5;
}

/* View all link styling */
.view-all {
  text-align: center;
  margin-top: 16px;
}

.view-all a {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.view-all a:hover {
  text-decoration: underline;
}

/* Tier list */
.tier-category {
  /* Reduce the top margin between tier categories for a more compact list */
  margin-top: 12px;
}

.tier-header {
  /* Increase the size of tier category headers */
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  border-left: 4px solid var(--color-accent);
  padding-left: 8px;
  /* Use Poppins for tier category labels */
  font-family: 'Poppins', sans-serif;
}

.tier-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tier-item {
  display: flex;
  align-items: center;
  background-color: rgba(38, 0, 0, 0.55);
  padding: 8px 12px;
  border-radius: calc(var(--border-radius) * 2);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  /* Enable smooth hover transitions */
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.tier-img {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.1);
  margin-right: 8px;
}

/* Make agent icons inside tier list scale appropriately */
.tier-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.tier-name {
  /* Increase the size of agent names and apply a distinct font */
  font-size: 1.1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/*
 * Hover effects for Valorant agents in the tier list
 *
 * On hover, each agent item subtly lifts and its background deepens,
 * mirroring the interactions found on the link and rank cards. This
 * feedback makes the agent selections feel interactive and dynamic.
 */
.tier-item:hover {
  background-color: rgba(38, 0, 0, 0.75);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

/* Settings section */
.settings-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  /* Dark background and border to mimic the black settings panel in the
     reference screenshot */
  background-color: #0e0e10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: 4px;
}

.settings-tab {
  padding: 6px 16px;
  border: none;
  border-radius: var(--border-radius);
  /* Increase font weight and apply the Poppins typeface to match the
     crisp tab labels shown in the reference. A slight letter spacing
     enhances readability. */
  /* Align the settings tab typography with the profile navigation links.
     Use a slightly smaller size and increased letter spacing for a
     sophisticated look similar to the reference. */
  font-size: 0.85rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* Default tab appearance: dark background with muted text */
  background-color: transparent;
  color: #bbbbbb;
}

.settings-tab.active, .settings-tab:hover {
  /* Active and hover tabs invert colours to stand out. Use a light
     background and dark text similar to the example screenshot. */
  background-color: #f5f5f5;
  color: #0d0d0d;
}

.settings-content {
  width: 100%;
}

.settings-pane {
  display: none;
}

.settings-pane.active {
  display: block;
}

.settings-box {
  /* Use a nearly black background and subtle border to match the dark
     panels in the reference screenshot */
  /* Slightly transparent dark background so the red gradient shows
     through, similar to the original Konect panels */
  /* Darken the panel slightly and increase transparency so that the red
     background gradient is visible beneath. This mirrors the deep grey
     boxes from the reference settings page. */
  /* Darken the panel to match the deep blue‑grey tone seen in the
     reference screenshot. Using an opaque colour rather than a
     semi‑transparent black ensures the contents stand out while
     maintaining a muted backdrop. */
  background-color: #0f141c;
  /* Use a very subtle border to separate the panel from the backdrop without
     drawing too much attention. */
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Tighter padding to reduce unused space around the content, matching the
     compact look of the reference. */
  padding: 16px 20px;
  border-radius: calc(var(--border-radius) * 2);
  margin-bottom: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.settings-heading {
  /* Reduce the heading size and use uppercase with extra weight to
     replicate the compact all‑caps titles shown in the reference. */
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
}

.settings-grid {
  display: grid;
  /* Define exactly four equal columns on desktop widths. This matches the
     consistent four‑column layout of the settings in the reference. */
  grid-template-columns: repeat(4, 1fr);
  /* Place a light divider at the top of the grid to separate the heading
     from the values. */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Provide generous horizontal spacing between columns and slightly
     increase the vertical spacing for breathing room. */
  gap: 12px 24px;
}

/* Use three columns for the graphics and monitor panes.  These sections
   contain fewer items per row, so a three‑column layout prevents the
   long labels and values from wrapping awkwardly. */
#graphics .settings-grid,
#monitor .settings-grid {
  grid-template-columns: repeat(3, 1fr);
}

.setting-item {
  background-color: transparent;
  /* Increase vertical padding so labels and values have breathing room */
  padding: 12px 0;
  /* Add a faint line underneath each item to delineate rows, similar to
     the subtle separators in the reference design. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: auto;
}

.setting-item.full-width {
  /* Allow items marked as full‑width (e.g., Raw Input Buffer) to occupy
     the entire row across all columns. */
  grid-column: 1 / -1;
}

.setting-label {
  font-size: 0.7rem;
  /* Use uppercase and a muted colour to distinguish labels from values
     and align with the example screenshot where labels appear in
     caps. */
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}

.setting-value {
  /* Enlarge values slightly for emphasis and set them in white to
     contrast against the dark panels. */
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  /* Allow long setting values to break onto multiple lines instead of
     overflowing into neighbouring columns. */
  white-space: normal;
  word-break: break-word;
}

/* Add Section placeholder */
.add-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 500px;
  margin: 30px auto;
  padding: 12px 20px;
  background-color: #ffffff;
  color: #000;
  font-weight: 600;
  font-size: 1rem;
  border-radius: calc(var(--border-radius) * 2);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.add-section:hover {
  background-color: #f5f5f5;
}

.add-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.add-text {
  font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .profile-card {
    padding: 30px 16px;
  }
  .settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* Colors for game icons in the ranks section */
.icon1 .rank-icon {
  color: #d61e42; /* red accent */
}
.icon2 .rank-icon {
  color: #fbbc05; /* yellow/gold accent */
}
.icon3 .rank-icon {
  color: #e74c3c; /* salmon/coral accent */
}
.icon4 .rank-icon {
  color: #8e44ad; /* purple accent */
}
.icon5 .rank-icon {
  color: #3498db; /* blue accent */
}

/*
 * Reapply rounded corners on the unified section panel. Since we removed
 * border radii and shadows from all section cards to create a continuous
 * panel, these rules ensure that only the very first and very last
 * section have rounded edges. This preserves the overall card look
 * while eliminating interior gaps.
 */
/* Reapply rounded corners on the unified section panel. Since we removed
   border radii and shadows from all section cards to create a continuous
   panel, these rules ensure that only the very first and very last
   section have rounded edges. This preserves the overall card look
   while eliminating interior gaps. */
/* Removed special corner rounding rules; each card has uniform border-radius
   defined directly on the .profile-section-box class. */