/* Rocket League Inspired Profile Styles */

/* CSS Variables */
:root {
    --color-background: hsl(220, 28%, 8%);
    --color-foreground: hsl(0, 0%, 98%);
    --color-card: hsl(220, 25%, 12%);
    --color-primary: hsl(195, 100%, 50%);
    --color-secondary: hsl(30, 100%, 55%);
    --color-muted: hsl(0, 0%, 70%);
    --color-border: hsl(220, 20%, 25%);
    
    --shadow-glow-cyan: 0 0 30px hsla(195, 100%, 50%, 0.5), 0 0 60px hsla(195, 100%, 50%, 0.3);
    --shadow-glow-orange: 0 0 30px hsla(30, 100%, 55%, 0.5), 0 0 60px hsla(30, 100%, 55%, 0.3);
    --shadow-glow-cyan-soft: 0 0 22px hsla(195, 100%, 50%, 0.12);
    --shadow-elev: 0 6px 20px rgba(0,0,0,0.35);
    --shadow-hover: 0 12px 36px rgba(0,0,0,0.45);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--color-background);
    color: var(--color-foreground);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animated Background */
.background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bg-element {
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    filter: blur(80px);
    animation: pulse-glow 2s ease-in-out infinite;
}

.bg-element-1 {
    top: 5rem;
    left: 5rem;
    background-color: hsla(195, 100%, 50%, 0.1);
}

.bg-element-2 {
    bottom: 5rem;
    right: 5rem;
    background-color: hsla(30, 100%, 55%, 0.1);
    animation-delay: 1s;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Container */
.container {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Banner Section */
.banner-section {
    margin-bottom: 2rem;
    animation: slide-in 0.5s ease-out;
}

.banner {
    height: 16rem;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-background), transparent 50%);
}

.clan-badge-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: hsla(220, 25%, 12%, 0.9);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 2px solid hsla(195, 100%, 50%, 0.5);
}
.clan-badge-img {
    width: 1.5rem;
    height: 1.5rem;
}

.clan-tag {
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Profile Grid */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch; /* ensure columns stretch to same height */
}

@media (min-width: 1024px) {
    .profile-grid {
        grid-template-columns: 1fr 2fr;
    }
    
    .banner {
        height: 20rem;
    }
}

/* Cards */
.card {
    background-color: var(--color-card);
    padding: 1.5rem;
    border-radius: 0.5rem;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    position: relative;
    overflow: hidden;
    animation: slide-in 0.5s ease-out;
}

.left-column .card {
    animation-delay: 0.1s;
}

.right-column .card {
    animation-delay: 0.2s;
}

.right-column .card:nth-child(2) {
    animation-delay: 0.3s;
}

.right-column .card:nth-child(3) {
    animation-delay: 0.4s;
}

.card-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(195, 100%, 50%, 0.05), transparent);
    pointer-events: none;
}

.secondary-glow {
    background: linear-gradient(135deg, hsla(30, 100%, 55%, 0.05), transparent);
}

/* Avatar Section */
.avatar-card {
    border: 2px solid hsla(195, 100%, 50%, 0.3);
}

.avatar-container {
    position: relative;
    width: 12rem;
    height: 12rem;
    margin: 0 auto 1.5rem;
}

.avatar-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

.avatar-img {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--color-background);
    object-fit: cover;
}

.verified-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background-color: var(--color-primary);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid var(--color-background);
    box-shadow: var(--shadow-glow-cyan);
}

.verified-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-background);
}

/* Username Section */
.username-section {
    text-align: center;
    margin-bottom: 1rem;
}

.display-name {
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

.username {
    color: var(--color-muted);
    font-size: 1rem;
}

/* Premium Badge */
.premium-badge-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.premium-badge {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-background);
    border: none;
    box-shadow: var(--shadow-glow-cyan);
}

.badge-icon {
    width: 1rem;
    height: 1rem;
}

.badge-active {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.badge-inactive {
    background-color: var(--color-secondary);
    color: var(--color-background);
}

.badge-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
}

/* Status Indicators */
.status-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: hsla(220, 28%, 8%, 0.5);
    border-radius: 0.25rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 1px solid hsla(195, 100%, 50%, 0.2);
}

.status-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.status-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
}

/* Card Title */
.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.title-accent {
    width: 0.25rem;
    height: 2rem;
    background: linear-gradient(to bottom, var(--color-secondary), var(--color-primary));
}

/* Details Card */
.details-card {
    border: 2px solid hsla(30, 100%, 55%, 0.3);
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.detail-item {
    padding: 1rem;
    background-color: hsla(220, 28%, 8%, 0.5);
    border-radius: 0.25rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 1px solid hsla(30, 100%, 55%, 0.2);
}

.detail-item-full {
    grid-column: 1 / -1;
}

.detail-label {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
}

.detail-value {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    word-break: break-all;
}

/* Clan Card */
.clan-card {
    border: 2px solid hsla(195, 100%, 50%, 0.3);
}

.clan-info-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background-color: hsla(220, 28%, 8%, 0.5);
    border-radius: 0.25rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 2px solid hsla(195, 100%, 50%, 0.3);
    box-shadow: var(--shadow-glow-cyan);
}

.clan-info-badge {
    width: 4rem;
    height: 4rem;
}

.clan-info-details {
    flex: 1;
}

.clan-info-tag {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.clan-info-guild {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
}

.clan-info-badges {
    display: flex;
    gap: 0.5rem;
}

/* Decoration Card */
.decoration-card {
    border: 2px solid hsla(30, 100%, 55%, 0.3);
}

/* Animations */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Column Spacing */
.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding: 1rem 0.5rem;
    }
    
    .avatar-container {
        width: 10rem;
        height: 10rem;
    }
    
    .display-name {
        font-size: 1.5rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .clan-info-box {
        flex-direction: column;
        text-align: center;
    }
}




/* === Rocket League Style Login Page === */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 4.5rem);
    padding: 2rem;
}

.login-card {
    position: relative;
    background-color: var(--color-card);
    border: 2px solid hsla(195, 100%, 50%, 0.3);
    border-radius: 0.75rem;
    padding: 2rem 3rem;
    max-width: 28rem;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-glow-cyan);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    animation: slide-in 0.6s ease-out;
}

.login-title {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    /* ensure compatibility: define standard property first */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    background-color: hsla(220, 28%, 8%, 0.7);
    color: var(--color-foreground);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 10px hsla(195, 100%, 50%, 0.3);
}

.login-button {
    margin-top: 1rem;
    padding: 0.75rem;
    border: none;
    border-radius: 0.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-background);
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    box-shadow: var(--shadow-glow-cyan);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-orange);
}

.login-footer {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.login-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.login-footer a:hover {
    color: var(--color-secondary);
}

/* Responsive */
@media (max-width: 640px) {
    .login-card {
        padding: 1.5rem;
    }

    .login-title {
        font-size: 1.5rem;
    }
}


.logout-button {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-foreground);
    background-color: var(--color-card);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    border: 1px solid hsla(195, 100%, 50%, 0.2);
    background-color: hsla(220, 28%, 8%, 0.5);
}

.logout-button:hover {
    background: linear-gradient(90deg, hsla(30, 100%, 55%, 0.2), hsla(195, 100%, 50%, 0.2));
    box-shadow: var(--shadow-glow-orange);
}

.status-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.logout-text {
    display: inline-block;
    transition: transform 0.25s ease, color 0.25s ease;
}

.logout-button:hover .status-icon {
    transform: translateX(-3px); /* leicht nach links */
}


.logout-button:hover .logout-text {
    transform: translateX(10px); /* leicht nach rechts */
    color: hsl(var(--primary));
}

.settings-button {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-foreground);
    background-color: var(--color-card);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    border: 1px solid hsla(195, 100%, 50%, 0.2);
    background-color: hsla(220, 28%, 8%, 0.5);
}

.settings-button:hover {
    background: linear-gradient(90deg, hsla(30, 100%, 55%, 0.2), hsla(195, 100%, 50%, 0.2));
    box-shadow: var(--shadow-glow-orange);
}

.settings-text {
    display: inline-block;
    transition: transform 0.25s ease, color 0.25s ease;
}

.settings-button:hover .status-icon {
    transform: translateX(-3px); /* leicht nach links */
}


.settings-button:hover .settings-text {
    transform: translateX(10px); /* leicht nach rechts */
    color: hsl(var(--secondary));
}

/* Add Friend Card */
.add-friend-card {
    border: 2px solid var(--color-border);
}

.add-friend-form {
    margin-top: 1.5rem;
}

.input-group {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.input-field {
    flex-grow: 1;
    background-color: hsla(220, 28%, 8%, 0.5);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    color: var(--color-foreground);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.input-field:focus {
    outline: none;
    border-color: var(--color-primary);
    /* harmonisiere Fokus-Effekt mit der Hauptfarbe der Seite */
    box-shadow: var(--shadow-glow-cyan);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.btn-primary {
    /* Einheitliches Color-Pattern: Primary -> Secondary (wie andere Buttons) */
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-background);
    box-shadow: var(--shadow-glow-cyan);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px hsla(30, 100%, 55%, 0.7);
}

.btn svg {
    transition: transform 0.3s ease;
}

.btn:hover svg {
    transform: rotate(90deg);
}

/* Small side-by-side cards (Add Friend + Friends List) */
.small-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    /* On larger screens place them side-by-side and each roughly half the width */
    .small-cards {
        /* Make the left card (Add Friend) a bit wider so the input gains ~100px of space.
           We use calc to shift 50px from the right card to the left card (net +100px on left). */
        grid-template-columns: minmax(0, calc(50% - 50px)) minmax(0, calc(50% + 50px));
        align-items: stretch; /* children inside small-cards should stretch; positioning handled by margin-top on container */
    }
}

.small-card {
    /* Use same card look but slightly smaller padding to match compact area */
    padding: 1rem;
    background-color: var(--color-card);
    /* Einheitlicher Border wie andere Detail-Karten */
    border: 2px solid hsla(30, 100%, 55%, 0.3);
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 10.5rem; /* base min-height for small screens */
    /* keep natural height on small screens; desktop height handled in media query */
}

@media (min-width: 768px) {
    /* Slightly extend the small cards downward on desktop so their bottom aligns with larger left card */
    .small-card {
        /* fixed height for small cards on desktop so they don't grow with content */
        height: calc(18rem - 60px);
        min-height: calc(18rem - 60px);
    }

    /* Increase friend list area accordingly, reduced by 30px as well */
    .friends-list-wrapper {
        max-height: calc(14rem - 30px);
    }

    /* Push the small-cards container to the bottom of the right column so its bottom aligns with the left column cards */
    .right-column .small-cards {
        margin-top: auto;
    }
}

/* subtle gradient overlay to match site glows */
.small-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsla(195, 100%, 50%, 0.03), hsla(30, 100%, 55%, 0.03));
    pointer-events: none;
}
.friends-list-wrapper {
    margin-top: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* keep list height consistent with card height */
    max-height: 10rem;
    padding-right: 0.25rem; /* space for scrollbar */
}

/* Make the add-friend form stack vertically: input above submit button */
.add-friend-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
}

.add-friend-form .input-field {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
}

.add-friend-form .btn {
    width: 100%;
    padding: 0.8rem 1rem;
    align-self: stretch;
}

/* Slightly lift the small card and keep glow consistent */
.small-card:hover {
    box-shadow: var(--shadow-elev), var(--shadow-glow-cyan-soft);
    transform: translateY(-3px);
}

.friends-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}

.friends-list-wrapper {
    margin-top: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 12rem; /* reasonable default so box stays compact */
    padding-right: 0.25rem; /* space for scrollbar */
}

@media (min-width: 768px) {
    /* On larger screens keep friend list compact and scrollable */
    .friends-list-wrapper {
        /* make the friends list fill remaining card space and be scrollable */
        max-height: none;
        height: auto;
        flex: 1 1 auto;
        overflow-y: auto;
    }
    /* Slightly reduce the small-card hover intensity on desktop */
    .small-card:hover {
        box-shadow: var(--shadow-hover), var(--shadow-glow-cyan-soft);
        transform: translateY(-4px);
    }
}

/* Tabs for friends card */
.friends-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Ensure tabs area fills the small-card and the panels can scroll inside the fixed card height */
.small-card .friends-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0; /* allow children to shrink for scrolling */
}

.small-card .tab-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* important for proper overflow handling */
    overflow: hidden;
}

.small-card .tab-panel {
    display: none;
}

.small-card .tab-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Ensure friends list wrapper always fills available vertical space and is scrollable */
.friends-list-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.tabs {
    display: flex;
    gap: 0.5rem;
}

.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-foreground);
    padding: 0.45rem 0.75rem;
    border-radius: 0.35rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.tab-btn.active {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-background);
    box-shadow: var(--shadow-glow-cyan);
}

.badge-count {
    display: inline-block;
    margin-left: 0.5rem;
    background: rgba(255,255,255,0.06);
    color: var(--color-foreground);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    /* vertical-align not needed for block-level SVG */
}

.tab-panels {
    display: block;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.requests-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /* make the request row compact to match the add-friend input */
    padding: 0;
}

.request-info {
    color: var(--color-foreground);
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* not bold */
    /* match input-field sizing */
    padding: 0.8rem 1rem;
    font-size: 1rem;
    background-color: hsla(220, 28%, 8%, 0.5);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* Make the request ID/info box 50px wider visually by adding extra right padding.
   This increases space available for long IDs without changing layout drastically. */
.request-info {
    padding-right: calc(1rem + 10px);
}

.request-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Icon button styles for accept/decline inside requests */
.request-actions .icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Accept: light glowing blue check */
.request-actions .icon-btn.btn-accept {
    background: linear-gradient(90deg, hsla(195, 100%, 50%, 0.15), hsla(195, 100%, 50%, 0.08));
    color: var(--color-primary); /* svg uses currentColor */
    border: 1px solid rgba(29, 161, 242, 0.18);
    box-shadow: 0 6px 20px rgba(29,161,242,0.12), 0 0 30px rgba(29,161,242,0.06);
}
.request-actions .icon-btn.btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(29,161,242,0.16), 0 0 50px rgba(29,161,242,0.08);
}

/* Decline: orange cross */
.request-actions .icon-btn.btn-decline {
    background: linear-gradient(90deg, hsla(30, 100%, 55%, 0.06), hsla(30, 100%, 55%, 0.03));
    color: var(--color-secondary);
    border: 1px solid rgba(255,140,0,0.12);
    box-shadow: 0 6px 20px rgba(255,140,0,0.06);
}
.request-actions .icon-btn.btn-decline:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255,140,0,0.12);
}

/* Ensure SVGs inherit the color correctly */
.request-actions .icon-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.btn-accept {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-background);
}

.btn-decline {
    background: transparent;
    border: 1px solid hsla(30,100%,55%,0.12);
    color: var(--color-foreground);
}

/* make accept/decline buttons more compact to match input size */
.request-actions .btn-accept,
.request-actions .btn-decline {
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
}

/* icon buttons */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.icon-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    /* ensure the SVG uses the button color and is visible (fixes icons not rendering correctly) */
    fill: currentColor;
    color: inherit;
    vertical-align: middle;
}

.icon-btn.btn-accept {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-background);
    box-shadow: var(--shadow-glow-cyan);
}

.icon-btn.btn-decline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.04);
    color: var(--color-foreground);
}

/* Friend-actions: reuse accept/decline visual language for invite/remove */
.friend-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.friend-actions .icon-btn {
    /* keep same base sizing as .icon-btn but ensure consistent spacing inside friend list */
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.friend-actions .icon-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}

/* Invite: visual match to accept (light blue glow) */
.friend-actions .icon-btn.btn-invite {
    background: linear-gradient(90deg, hsla(195, 100%, 50%, 0.15), hsla(195, 100%, 50%, 0.08));
    color: var(--color-primary);
    border: 1px solid rgba(29, 161, 242, 0.18);
    box-shadow: 0 6px 20px rgba(29,161,242,0.12), 0 0 30px rgba(29,161,242,0.06);
}
.friend-actions .icon-btn.btn-invite:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(29,161,242,0.16), 0 0 50px rgba(29,161,242,0.08);
}

.friend-actions .icon-btn.btn-testmatch {
    background: linear-gradient(90deg, hsla(195, 100%, 50%, 0.15), hsla(195, 100%, 50%, 0.08));
    color: var(--color-primary);
    border: 1px solid rgba(29, 161, 242, 0.18);
    box-shadow: 0 6px 20px rgba(29,161,242,0.12), 0 0 30px rgba(29,161,242,0.06);
}
.friend-actions .icon-btn.btn-testmatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(29,161,242,0.16), 0 0 50px rgba(29,161,242,0.08);
}

/* Remove: visual match to decline (warm/orange) */
.friend-actions .icon-btn.btn-remove {
    background: linear-gradient(90deg, hsla(30, 100%, 55%, 0.06), hsla(30, 100%, 55%, 0.03));
    color: var(--color-secondary);
    border: 1px solid rgba(255,140,0,0.12);
    box-shadow: 0 6px 20px rgba(255,140,0,0.06);
}
.friend-actions .icon-btn.btn-remove:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255,140,0,0.12);
}

.icon-btn:active { transform: translateY(1px); }

.friend-item {
    padding: 0.65rem;
    background-color: hsla(220, 28%, 8%, 0.5);
    border: 1px solid hsla(30, 100%, 55%, 0.12);
    border-radius: 0.35rem;
    color: var(--color-foreground);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

/* New friend row layout: avatar left, meta right. Keep padding/size identical. */
.friend-avatar {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    box-shadow: var(--shadow-glow-cyan);
    border: 3px solid var(--color-background);
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
}

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

.avatar-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.friend-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* allow truncation */
}

.friend-username {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-id {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-top: 0.12rem;
    font-family: 'Courier New', monospace;
}

/* Ensure hover effects still look good when row layout used */
.friend-item:hover {
    transform: translateY(-2px);
}

/* Visual feedback when copied */
.friend-row.copied {
    box-shadow: 0 8px 30px rgba(0,0,0,0.45), var(--shadow-glow-cyan);
}

.friend-row.copied .friend-id {
    color: var(--color-primary);
    font-weight: 700;
}

.friend-row:focus {
    outline: 2px solid rgba(255,255,255,0.06);
    outline-offset: 3px;
}

.friend-item:hover {
    border-color: hsla(195, 100%, 50%, 0.12);
    box-shadow: var(--shadow-elev), var(--shadow-glow-cyan-soft);
    transform: translateY(-2px);
}

/* Generic copyable elements (friends, profile ID) */
.copyable {
    cursor: pointer;
}

.copyable:focus {
    outline: 2px solid rgba(255,255,255,0.06);
    outline-offset: 3px;
}

.copyable.copied {
    box-shadow: 0 8px 30px rgba(0,0,0,0.45), var(--shadow-glow-cyan);
}

.copyable.copied .friend-id,
.copyable.copied.detail-value {
    color: var(--color-primary);
    font-weight: 700;
}

/* Fine-tune button sizing inside the compact card */
.small-card .input-group .input-field {
    padding: 0.8rem 1rem;
    font-size: 1rem;
}

.small-card .btn {
    padding: 0.7rem 1.1rem;
    font-size: 1rem;
}

.small-card .card-title {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

/* Validation styles for Add Friend form */
.form-error {
    color: var(--color-secondary);
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

.input-field.invalid {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 8px hsla(30, 100%, 55%, 0.12) !important;
}

.btn[disabled], button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Custom scrollbar styling for friends list */
.friends-list-wrapper::-webkit-scrollbar {
    width: 10px;
}

.friends-list-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.friends-list-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,0.25);
}

/* Firefox */
.friends-list-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}