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

body {
    background-color: #000;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

/* Layout */
.pr-main-layout {
    display: grid;
    grid-template-columns: 20% 55% 25%;
    gap: 20px;
    width: 100vw;
    min-height: 100vh;
}

/* Sidebar Base */
.pr-left-sidebar,
.pr-right-sidebar {
    background: #111;
    border-radius: 16px;
    border: 1px solid #222;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Main Profile Area */
.pr-content-area {
    background: #000;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-height: 100vh;
    padding: 20px;
}

.pr-back-btn {
    background: none;
    border: none;
    color: #6c5ce7; /* Purple accent */
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.pr-back-btn i {
    margin-right: 8px;
}

/* Profile info */
.profile-info-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 70px;
  position: relative;
  background-color: #000;
  border-bottom: 1px solid #222;
}

.info-left, .info-right {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: #aaa;
}

.followers, .following {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

.count {
  font-weight: bold;
  font-size: 16px;
  color: #6c5ce7;
}

.label {
  font-size: 13px;
  color: #888;
}

.profile-picture {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #000;
  overflow: hidden;
  /* Add these for flexbox container if profile-avatar is not a direct child to be flexed */
  display: flex; /* Makes .profile-picture a flex container */
  justify-content: center; /* Horizontally centers content */
  align-items: center; /* Vertically centers content */
}

.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is more for images, but good to keep if an image can be rendered */
  display: flex; /* Make the avatar container a flex container */
  justify-content: center; /* Horizontally center the initial */
  align-items: center; /* Vertically center the initial */
  font-size: 2em; /* Adjust as needed for your initial's size */
  color: #fff; /* Example: color for the initial text */
  background-color: #555; /* Example: background for the initial if no image */
  border-radius: 50%; /* Ensure it stays circular */
  font-weight: bold;
  text-transform: uppercase;
}

/* If renderAvatar outputs an <img> tag directly within .profile-picture */
.profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-username {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 18px;
  color: #fff;
}

/* Edit Profile Button */
.pr-edit-profile {
    background-color: #6c5ce7; /* Purple accent */
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pr-edit-profile:hover {
    background-color: #5a4bb3; /* Darker purple on hover */
}

/* Specific style for when the follow button is in 'Following' state */


/* Profile Banner */
.profile-banner {
    background: #1a1a1a;
    padding: 5px;
    border-radius: 16px;
    margin-bottom: 20px;
    text-align: center;
    height: 200px;
}

/* Tabs */
.profile-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.profile-tab {
    background: #111;
    border: 1px solid #333;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
}

.profile-tab.active {
    background: #444;
    font-weight: bold;
}

/* Post Card */
.post-feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-card {
    background: #111;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #222;
}

/* Right Sidebar */


/* General card styling for right sidebar sections */
.pr-card {
    background-color: #111;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #222;
}

.pr-card h4 {
    color: #6c5ce7; /* Purple accent */
    margin-bottom: 10px;
    font-size: 16px;
}

/* Bio Card */
.pr-bio-card p {
    font-size: 14px;
    color: #bbb;
}

/* Points Card */
.pr-points {
    font-size: 24px;
    font-weight: bold;
    color: #ffad1f; /* Gold accent */
}

/* Achievements Card */
.pr-achievements-card ul {
    list-style-type: none;
}

.pr-achievements-card li {
    padding: 8px 0;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ddd;
}

.pr-achievements-card li:last-child {
    border-bottom: none;
}

.pr-achievements-card li i {
    margin-right: 10px;
    color: #6c5ce7; /* Purple accent */
}

/* Battle Card */
.pr-battle-card h3 {
    color: gold;
    text-align: center;
    font-family: 'Poetsen One', sans-serif; /* Ensure this font is imported or fallback is good */
    margin-bottom: 15px;
    font-size: 20px;
}

.pr-battle-card .pr-battle-details { /* Corrected class name */
    display: flex;
    gap: 15px;
    align-items: center;
}

.pr-battle-img {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #444;
}

.pr-battle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pr-battle-stats {
    flex-grow: 1;
}

.pr-battle-stats h4 {
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: #fff;
}

.pr-battle-stats ul {
    list-style-type: none;
}

.pr-battle-stats li {
    padding: 3px 0;
    font-size: 13px;
    color: #ddd;
}

/* Sidebar Buttons */
.pr-btn-sidebar {
    width: 100%;
    padding: 12px;
    background-color: #6c5ce7;
    color: #fff;
    border-radius: 25px;
    margin-bottom: 10px;
    border: none; /* Ensure no default border */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pr-btn-sidebar:hover {
    background-color: #5a4bb3;
}

.pr-btn-sidebar.pr-btn-logout {
    background-color: #e0245e; /* Red for logout */
}

.pr-btn-sidebar.pr-btn-logout:hover {
    background-color: #c81e4a;
}