/* ============================================
NIGHTPULSE WAR
PROFILE PAGE
============================================ */

/* ============================================
PROFILE SECTION
============================================ */

.profile-section {

padding:
    120px
    0
    100px;

min-height:
    calc(100vh - 80px);

}

/* ============================================
PROFILE HEADING
============================================ */

.profile-section
.section-heading {

margin-bottom:
    55px;

}

.profile-section
.section-heading h1 {

margin: 10px 0 0;

font-size:
    clamp(42px, 6vw, 76px);

line-height:
    0.95;

}

.profile-section
.section-heading h1 span {

display:
    block;

}

/* ============================================
PROFILE CARD
============================================ */

.profile-card {

display:
    grid;

grid-template-columns:
    260px
    1fr;

gap:
    45px;

padding:
    40px;

margin-bottom:
    30px;

border:
    1px solid
    rgba(255,255,255,0.08);

background:
    rgba(255,255,255,0.025);

position:
    relative;

}

.profile-card::before {

content:
    "";

position:
    absolute;

left:
    0;

top:
    0;

width:
    3px;

height:
    100%;

background:
    #9baa75;

}

/* ============================================
AVATAR
============================================ */

.profile-avatar-area {

display:
    flex;

flex-direction:
    column;

align-items:
    center;

justify-content:
    center;

gap:
    20px;

}

.profile-avatar {

width:
    170px;

height:
    170px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

border:
    1px solid
    rgba(155,170,117,0.45);

background:
    rgba(155,170,117,0.06);

color:
    #9baa75;

font-size:
    72px;

font-weight:
    700;

font-family:
    monospace;

box-shadow:
    inset 0 0 40px
    rgba(155,170,117,0.04);

}

.profile-avatar-button {

border:
    1px solid
    rgba(255,255,255,0.12);

background:
    transparent;

color:
    rgba(255,255,255,0.65);

padding:
    10px 15px;

font-size:
    11px;

letter-spacing:
    0.08em;

cursor:
    pointer;

transition:
    0.2s ease;

}

.profile-avatar-button:hover {

border-color:
    #9baa75;

color:
    #9baa75;

}

/* ============================================
PROFILE INFORMATION
============================================ */

.profile-information {
  
display:
    flex;

flex-direction:
    column;

justify-content:
    center;

}

.profile-label {

font-size:
    11px;

letter-spacing:
    0.12em;

color:
    rgba(255,255,255,0.45);

}

.profile-information h2 {

margin:
    8px 0 10px;

font-size:
    clamp(28px, 4vw, 46px);

letter-spacing:
    0.03em;

}

.profile-status {

display:
    flex;

align-items:
    center;

gap:
    8px;

color:
    #b94a43;

font-size:
    12px;

letter-spacing:
    0.08em;

}

.profile-status span {

width:
    7px;

height:
    7px;

border-radius:
    50%;

background:
    currentColor;

}

.profile-divider {

height:
    1px;

background:
    rgba(255,255,255,0.08);

margin:
    25px 0;

}

.profile-info-row {

display:
    grid;

grid-template-columns:
    180px
    1fr;

gap:
    20px;

padding:
    10px 0;

}

.profile-info-row span {

color:
    rgba(255,255,255,0.4);

font-size:
    11px;

letter-spacing:
    0.1em;

}

.profile-info-row strong {

color:
    rgba(255,255,255,0.85);

font-size:
    13px;

font-weight:
    500;

}

.profile-mono {

font-family:
    monospace;

word-break:
    break-all;

}

/* ============================================
PANELS
============================================ */

.profile-panel {

margin-top:
    30px;

padding:
    35px 40px;

border:
    1px solid
    rgba(255,255,255,0.08);

background:
    rgba(255,255,255,0.018);

}

.profile-panel-header {

margin-bottom:
    30px;

}

.profile-panel-header h2 {

margin:
    8px 0 0;

font-size:
    clamp(25px, 4vw, 40px);

}

.profile-panel-header h2 span {

color:
    #9baa75;

}

/* ============================================
VERIFICATION
============================================ */

.verification-content {

max-width:
    720px;

}

.profile-large-text {

font-size:
    20px;

line-height:
    1.5;

margin-bottom:
    15px;

}

.verification-content p {

color:
    rgba(255,255,255,0.6);

line-height:
    1.7;

}

.command-box {

margin:
    25px 0;

padding:
    18px 20px;

border:
    1px solid
    rgba(155,170,117,0.2);

background:
    rgba(0,0,0,0.25);

}

.command-box code {

color:
    #9baa75;

font-family:
    monospace;

font-size:
    15px;

}

.verification-code {

margin-top:
    25px;

min-height:
    72px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

border:
    1px dashed
    rgba(155,170,117,0.35);

background:
    rgba(155,170,117,0.025);

}

.verification-code span {

color:
    rgba(255,255,255,0.35);

font-family:
    monospace;

letter-spacing:
    0.15em;

}

.verification-code.active span {

color:
    #9baa75;

font-size:
    28px;

font-weight:
    700;

}

.verification-timer {

margin:
    12px 0 20px;

color:
    rgba(255,255,255,0.4);

font-size:
    12px;

}

.verification-message {

margin-top:
    15px;

min-height:
    20px;

font-size:
    13px;

}

/* ============================================
ACHIEVEMENTS
============================================ */

.achievements-grid,
.rewards-grid {

display:
    grid;

grid-template-columns:
    repeat(3, 1fr);

gap:
    15px;

}

.achievement-empty {

grid-column:
    1 / -1;

padding:
    45px 25px;

text-align:
    center;

border:
    1px dashed
    rgba(255,255,255,0.1);

}

.achievement-empty span {

display:
    block;

margin-bottom:
    15px;

font-size:
    32px;

color:
    #9baa75;

}

.achievement-empty strong {

display:
    block;

color:
    rgba(255,255,255,0.7);

font-size:
    13px;

letter-spacing:
    0.08em;

}

.achievement-empty p {

max-width:
    500px;

margin:
    12px auto 0;

color:
    rgba(255,255,255,0.4);

line-height:
    1.6;

font-size:
    13px;

}

/* ============================================
ACHIEVEMENT CARD
============================================ */

.achievement-card {

padding:
    22px;

border:
    1px solid
    rgba(255,255,255,0.08);

background:
    rgba(255,255,255,0.02);

}

.achievement-icon {

width:
    48px;

height:
    48px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

margin-bottom:
    15px;

border:
    1px solid
    rgba(155,170,117,0.3);

color:
    #9baa75;

font-size:
    22px;

}

.achievement-card h3 {

margin:
    0 0 8px;

font-size:
    16px;

}

.achievement-card p {

margin:
    0;

color:
    rgba(255,255,255,0.45);

font-size:
    12px;

line-height:
    1.6;

}

/* ============================================
REWARD CARD
============================================ */

.reward-card {

padding:
    22px;

border:
    1px solid
    rgba(155,170,117,0.15);

background:
    rgba(155,170,117,0.025);

}

.reward-card h3 {

margin:
    0 0 8px;

font-size:
    16px;

}

.reward-card p {

margin:
    0;

color:
    rgba(255,255,255,0.45);

font-size:
    12px;

line-height:
    1.6;

}

/* ============================================
NOTIFICATIONS
============================================ */

.notifications {

display:
    flex;

flex-direction:
    column;

gap:
    10px;

}

.notification-empty {

padding:
    25px;

border:
    1px dashed
    rgba(255,255,255,0.1);

text-align:
    center;

color:
    rgba(255,255,255,0.35);

font-size:
    12px;

letter-spacing:
    0.08em;

}

.notification {

display:
    grid;

grid-template-columns:
    45px
    1fr;

gap:
    15px;

padding:
    18px;

border:
    1px solid
    rgba(255,255,255,0.08);

}

.notification-icon {

width:
    40px;

height:
    40px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

border:
    1px solid
    rgba(155,170,117,0.25);

color:
    #9baa75;

}

.notification h3 {

margin:
    0 0 5px;

font-size:
    14px;

}

.notification p {

margin:
    0;

color:
    rgba(255,255,255,0.5);

font-size:
    12px;

line-height:
    1.5;

}

/* ============================================
AVATAR MODAL
============================================ */

.avatar-modal {

position:
    fixed;

inset:
    0;

z-index:
    1000;

display:
    none;

align-items:
    center;

justify-content:
    center;

}

.avatar-modal.active {

display:
    flex;

}

.avatar-modal-background {

position:
    absolute;

inset:
    0;

background:
    rgba(0,0,0,0.82);

backdrop-filter:
    blur(5px);

}

.avatar-modal-content {

position:
    relative;

width:
    min(520px, calc(100% - 30px));

padding:
    35px;

border:
    1px solid
    rgba(255,255,255,0.1);

background:
    #0b0d0c;

}

.avatar-modal-header {

margin-bottom:
    25px;

}

.avatar-modal-header h2 {

margin:
    8px 0 0;

font-size:
    30px;

}

.avatar-modal-header h2 span {

color:
    #9baa75;

}

.avatar-options {

display:
    grid;

grid-template-columns:
    repeat(3, 1fr);

gap:
    12px;

margin-bottom:
    25px;

}

.avatar-option {

aspect-ratio:
    1;

border:
    1px solid
    rgba(255,255,255,0.1);

background:
    rgba(255,255,255,0.02);

color:
    rgba(255,255,255,0.65);

font-size:
    35px;

cursor:
    pointer;

transition:
    0.2s ease;

}

.avatar-option:hover {

border-color:
    #9baa75;

color:
    #9baa75;

background:
    rgba(155,170,117,0.05);

}

.avatar-option.selected {

border-color:
    #9baa75;

color:
    #9baa75;

box-shadow:
    inset 0 0 20px
    rgba(155,170,117,0.05);

}

/* ============================================
RESPONSIVE
============================================ */

@media (max-width: 800px) {

.profile-section {

    padding-top:
        90px;

}


.profile-card {

    grid-template-columns:
        1fr;

    text-align:
        center;

    padding:
        25px;

}


.profile-information {

    align-items:
        center;

}


.profile-status {

    justify-content:
        center;

}


.profile-info-row {

    grid-template-columns:
        1fr;

    gap:
        4px;

    text-align:
        center;

}


.profile-panel {

    padding:
        25px;

}


.achievements-grid,
.rewards-grid {

    grid-template-columns:
        1fr;

}

}

@media (max-width: 500px) {

.profile-avatar {

    width:
        135px;

    height:
        135px;

    font-size:
        55px;

}


.avatar-modal-content {

    padding:
        25px;

}


.avatar-options {

    grid-template-columns:
        repeat(2, 1fr);

}

}