/* --- PROFILE PAGE --- */

/* Page shell follows the same centering model used by Player List */
main.profile-page,
.main-content.profile-page {
  width: min(94vw, 1300px);
  max-width: 1300px;
  margin: 140px auto 40px auto;
  padding: 0 24px;
  box-sizing: border-box;
  align-items: center;
}

.profile-card {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 16px;
  padding: 34px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.profile-header {
  margin-bottom: 26px;
}

.profile-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.8rem;
}

.profile-header p {
  margin: 8px 0 0 0;
  color: #8b949e;
  line-height: 1.5;
}

.profile-card h3 {
  margin: 30px 0 18px 0;
  color: var(--primary);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- FORMS --- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.input-group.full-width {
  grid-column: 1 / -1;
}

.input-group label {
  color: #8b949e;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  background: #0d1117;
  color: #ffffff;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px 13px;
  font-size: 0.98rem;
  box-sizing: border-box;
}

.input-group textarea {
  min-height: 100px;
  resize: vertical;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.input-group input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.organizer-section {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #30363d;
}

.form-actions {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

.btn-main {
  background: var(--primary);
  color: #000000;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 900;
  cursor: pointer;
}

.btn-main:hover {
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.35);
}

.status-msg {
  color: #8b949e;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 14px;
}

/* --- ERSI PROFILE DASHBOARD --- */

.ersi-profile-card {
  width: 100%;
  max-width: none;
  margin: 20px auto 28px auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-sizing: border-box;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.profile-header-row {
  display: flex;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.profile-image-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.profile-avatar-shell {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #0d1117;
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.profile-avatar-placeholder {
  display: none;
  font-size: 2.8rem;
  line-height: 1;
}

.profile-avatar-shell.avatar-missing .profile-avatar-placeholder {
  display: block;
}

/* --- PROFILE IMAGE UPLOAD --- */

.profile-image-upload-panel {
  width: 100%;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.profile-image-upload-label {
  color: #8b949e;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.profile-image-file-input {
  width: 100%;
  color: #8b949e;
  font-size: 0.76rem;
}

.profile-image-file-input::file-selector-button {
  margin-right: 8px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #ffffff;
  padding: 7px 9px;
  cursor: pointer;
  font-weight: 700;
}

.profile-image-upload-btn {
  width: 100%;
  padding: 9px 10px;
  font-size: 0.78rem;
}

.profile-image-upload-btn:disabled,
.profile-image-file-input:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.profile-image-help {
  color: #8b949e;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
}

.profile-image-help[data-type="error"] {
  color: #ff7b72;
}

/* --- PLAYER MAIN INFO --- */

.profile-main-info {
  flex: 1;
  min-width: 0;
}

.profile-main-info h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1.8rem;
}

.profile-player-public-id {
  margin: -4px 0 12px;
  color: #9da7b3;
  font-size: 0.86rem;
  font-weight: 800;
}

.profile-player-public-id strong {
  color: var(--primary);
  letter-spacing: 0.08em;
}

.rank-badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rank-C {
  background: rgba(0, 212, 255, 0.12);
  color: var(--primary);
  border: 1px solid rgba(0, 212, 255, 0.5);
}

.rank-B {
  background: rgba(46, 160, 67, 0.12);
  color: #3fb950;
  border: 1px solid rgba(46, 160, 67, 0.5);
}

.rank-A {
  background: rgba(255, 196, 0, 0.12);
  color: #ffc400;
  border: 1px solid rgba(255, 196, 0, 0.5);
}

.rank-Pro {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.5);
}

.rank-Cminus,
.rank-Cplus {
  background: rgba(0, 212, 255, 0.12);
  color: var(--primary);
  border: 1px solid rgba(0, 212, 255, 0.5);
}

.rank-Bminus,
.rank-Bplus {
  background: rgba(46, 160, 67, 0.12);
  color: #3fb950;
  border: 1px solid rgba(46, 160, 67, 0.5);
}

.rank-Aminus,
.rank-Aplus {
  background: rgba(255, 196, 0, 0.12);
  color: #ffc400;
  border: 1px solid rgba(255, 196, 0, 0.5);
}

.rank-unconfirmed {
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
}

.ranking-status-text {
  color: #8b949e;
  font-size: 0.85rem;
}

/* --- ELO DISPLAY --- */

.elo-display {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.elo-label {
  color: #8b949e;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.elo-display strong {
  color: var(--primary);
  font-size: 2.2rem;
  line-height: 1;
}

.elo-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
}

.elo-plus {
  color: #3fb950 !important;
}

.elo-minus {
  color: #f85149 !important;
}

.elo-neutral {
  color: #8b949e !important;
}

.elo-delta.elo-plus {
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.35);
}

.elo-delta.elo-minus {
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.35);
}

.elo-delta.elo-neutral {
  background: #21262d;
  border: 1px solid #30363d;
}

/* --- ERSI STATS --- */

.ersi-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 14px;
}

.ersi-stat-box {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
}

.ersi-stat-label {
  display: block;
  color: #8b949e;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.ersi-stat-box strong {
  color: #ffffff;
  font-size: 1.4rem;
}

.last-tournament-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: #8b949e;
}

.last-tournament-row strong {
  color: #ffffff;
}

/* --- PLAYER PROFILE PAGE ACTIONS --- */

.profile-page-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* --- LOGIN PROMPT MODAL --- */

.ersi-profile-login-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.ersi-profile-login-card {
  width: min(92vw, 520px);
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.ersi-profile-login-card h3 {
  margin: 0 0 12px 0;
  color: #ffffff;
  font-size: 1.25rem;
}

.ersi-profile-login-card p {
  margin: 0 0 20px 0;
  color: #8b949e;
  line-height: 1.5;
}

.ersi-profile-login-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.ersi-profile-login-actions .btn-main,
.ersi-profile-login-actions .btn-secondary {
  width: auto;
  padding: 10px 16px;
}

.btn-secondary {
  background: #21262d;
  color: #ffffff;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

/* --- RESPONSIVE --- */

@media (max-width: 1050px) {
  .profile-card {
    padding: 28px;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  main.profile-page,
  .main-content.profile-page {
    width: 100%;
    margin: 120px auto 30px auto;
    padding: 0 14px;
  }

  .profile-card {
    width: 100%;
    max-width: none;
    padding: 20px;
    border-radius: 18px;
  }

  .profile-header {
    margin-bottom: 20px;
  }

  .profile-header h2 {
    font-size: 1.65rem;
  }

  .profile-header p {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-actions,
  .profile-page-actions,
  .profile-page-actions .btn-main {
    width: 100%;
    justify-content: stretch;
  }

  .btn-main {
    width: 100%;
  }

  .ersi-profile-card {
    width: 100%;
    max-width: none;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .profile-header-row {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    text-align: center;
  }

  .profile-avatar-shell {
    width: 104px;
    height: 104px;
  }

  .profile-image-area,
  .profile-main-info,
  .rank-badge-row,
  .elo-display {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .profile-image-upload-panel {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  #profileImageInput {
    width: 100%;
    font-size: 0.78rem;
  }

  #uploadProfileImageBtn {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
  }

  .profile-image-help {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .profile-main-info h2 {
    font-size: 1.55rem;
  }

  .rank-badge-row {
    gap: 10px;
  }

  .elo-display {
    gap: 10px;
  }

  .elo-display strong {
    font-size: 2rem;
  }

  .ersi-stats-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ersi-stat-box {
    padding: 16px 18px;
    min-height: auto;
  }

  .ersi-stat-box strong {
    font-size: 1.55rem;
  }

  .last-tournament-row {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .profile-card {
    padding: 20px;
  }

  .ersi-profile-card {
    padding: 20px 16px;
  }
}

/* --- DESKTOP ADAPTIVE WIDTH UPGRADE --- */
:root { --profile-content-max: 1300px; }
.main-content.profile-page,
.profile-page,
.profile-shell,
.profile-card {
  width: min(94vw, var(--profile-content-max)) !important;
  max-width: var(--profile-content-max) !important;
}
@media (min-width: 1500px) { :root { --profile-content-max: 1540px; } .main-content.profile-page, .profile-page, .profile-shell, .profile-card { width: min(92vw, var(--profile-content-max)) !important; } }
@media (min-width: 1900px) { :root { --profile-content-max: 1740px; } .main-content.profile-page, .profile-page, .profile-shell, .profile-card { width: min(90vw, var(--profile-content-max)) !important; } }
@media (min-width: 2300px) { :root { --profile-content-max: 1940px; } }
@media (max-width: 760px) { :root { --profile-content-max: 1300px; } }


/* --- MY PROFILE BILINGUAL / RTL SUPPORT --- */
html[dir="rtl"] .profile-header,
html[dir="rtl"] .profile-form-section,
html[dir="rtl"] .organizer-section,
html[dir="rtl"] .last-tournament-row {
  text-align: right;
}
html[dir="rtl"] .profile-header-row {
  direction: rtl;
}
html[dir="rtl"] .rank-badge-row,
html[dir="rtl"] .elo-display {
  justify-content: flex-start;
}
html[dir="rtl"] .input-group label {
  text-align: right;
}
html[dir="rtl"] .input-group input,
html[dir="rtl"] .input-group select,
html[dir="rtl"] .input-group textarea {
  text-align: right;
}
html[dir="rtl"] .input-group input[type="email"],
html[dir="rtl"] .input-group input[type="url"],
html[dir="rtl"] .input-group input[type="tel"],
html[dir="rtl"] #profileEloScore,
html[dir="rtl"] .elo-delta,
html[dir="rtl"] .ersi-stat-box strong {
  direction: ltr;
  text-align: right;
}
html[dir="rtl"] .form-actions {
  justify-content: flex-start;
}
html[dir="rtl"] .profile-image-file-input::file-selector-button {
  margin-right: 0;
  margin-left: 8px;
}
@media (max-width: 720px) {
  html[dir="rtl"] .profile-header-row {
    text-align: center;
  }
  html[dir="rtl"] .rank-badge-row,
  html[dir="rtl"] .elo-display {
    justify-content: center;
  }
}