/* ========================================================================== */
/* MODALS / OVERLAY / TABLES                                                  */
/* ========================================================================== */

.cr-table,
.crystal-table,
.cr-table--rating {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cr-table th,
.cr-table td,
.crystal-table th,
.crystal-table td,
.cr-table--rating th,
.cr-table--rating td {
  border: 1px solid rgba(0,80,85,.6);
  padding: 10px 12px;
  font-size: .9rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crystal-table td:nth-child(3) {
  font-weight: 600;
}

.crystal-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 20px;
}

.crystal-box {
  background: rgba(0, 45, 52, 0.85);
  border: 1px solid rgba(0, 255, 255, 0.30);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.10), 0 0 8px rgba(0, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  transition: transform .18s ease, box-shadow .18s ease;
}

.crystal-box:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.20), 0 0 12px rgba(0, 255, 255, 0.30);
}

.cr-label {
  font-size: .78rem;
  opacity: .75;
  color: #88ddee;
  margin-bottom: 4px;
}

.cr-value {
  font-size: 1.26rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 6px #00ffff55, 0 0 14px rgba(0,255,255,0.30);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 1010;
}

.modal-overlay.show {
  display: flex;
  opacity: 1;
}

.modal-window {
  width: min(92vw, 820px);
  max-width: 100%;
  max-height: min(86vh, 980px);
  background: linear-gradient(180deg, rgba(0,55,60,.92), rgba(0,35,40,.92));
  border: 1px solid rgba(0,255,255,.25);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,255,255,.08);
  padding: 18px 18px 16px;
  color: #cceeff;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  overflow: hidden;
}

.modal-overlay.show .modal-window {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-window h3 {
  margin: 0 0 14px;
  text-align: center;
  font-size: 1.35rem;
  letter-spacing: .4px;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0,255,255,.35);
  overflow-wrap: anywhere;
}

.modal-content {
  max-height: 56vh;
  overflow: auto;
  padding-right: 6px;
  min-width: 0;
}

.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: transparent; }
.modal-content::-webkit-scrollbar-thumb {
  background: rgba(0,255,255,.25);
  border-radius: 6px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0,255,255,.38);
}

.modal-actions {
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

#crystalModal .modal-close,
#auditHelpModal .modal-close,
#accountRatingModal .modal-close {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(220px, 100%);
  height: 44px;
  cursor: pointer;
  user-select: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 210, 77, .55);
  background: linear-gradient(180deg, rgba(0,120,120,.35), rgba(0,60,60,.35));
  color: #dbefff;
  font-family: HeliosCond, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,255,255,.18);
  text-align: center;
  box-sizing: border-box;
}

#crystalModal .modal-close:hover,
#auditHelpModal .modal-close:hover,
#accountRatingModal .modal-close:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(0,255,255,.28),
    0 10px 20px rgba(0,0,0,.28);
}

#crystalModal .modal-close:active,
#auditHelpModal .modal-close:active,
#accountRatingModal .modal-close:active {
  transform: translateY(1px);
}

#crystalModal .crystal-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 16px;
}

#crystalModal .crystal-box {
  background: rgba(0, 25, 28, .45);
  border: 1px solid rgba(0,255,255,.28);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: inset 0 0 18px rgba(0,255,255,.08), 0 0 0 1px rgba(0,0,0,.15);
}

#crystalModal .cr-label {
  font-size: .95rem;
  color: rgba(204,238,255,.72);
  margin-bottom: 6px;
}

#crystalModal .cr-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: #eaf9ff;
  text-shadow: 0 0 14px rgba(0,255,255,.22);
}

#crystalModal .cr-value.earned { color: #00ff99; text-shadow: 0 0 14px rgba(0,255,153,.25); }
#crystalModal .cr-value.spent  { color: #ff5555; text-shadow: 0 0 14px rgba(255,85,85,.22); }
#crystalModal .cr-value.audit  { color: #00ffff; text-shadow: 0 0 14px rgba(0,255,255,.25); }

#crystalModal .modal-empty {
  margin: 10px 0 14px;
  color: rgba(204,238,255,.78);
  font-size: 1.05rem;
  font-weight: 600;
}

.modal-window--rating {
  width: min(96vw, 1100px);
  max-width: 1100px;
  max-height: 86vh;
  overflow: hidden;
}

.modal-content--rating {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid rgba(0,255,255,.22);
  border-radius: 12px;
}

.cr-table--rating thead th {
  position: sticky;
  top: 0;
  background: rgba(0,63,68,.95);
  z-index: 2;
  border-bottom: 1px solid rgba(0,255,255,.22);
}

/* ========================================================================== */
/* PROFILE HEADER TONE HELPERS                                                */
/* ========================================================================== */

.profile-header .username {
  color: #00ffff;
  text-shadow: 0 0 6px rgba(0,255,255,.35);
}

.profile-header .clan {
  color: #00c2c2;
  font-weight: 600;
}

.profile-header .clan.dokty {
  color: #ff5555;
  text-shadow: 0 0 6px rgba(255,85,85,.35);
}

.profile-header .clan.adornya {
  color: #55ff55;
  text-shadow: 0 0 6px rgba(85,255,85,.35);
}

@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
  }

  .modal-window {
    width: 100%;
    max-height: 88vh;
    padding: 14px 12px 12px;
    border-radius: 12px;
  }

  .modal-window h3 {
    font-size: 1.15rem;
    margin-bottom: 12px;
  }

  .modal-content {
    max-height: 62vh;
    padding-right: 2px;
  }

  .crystal-summary,
  #crystalModal .crystal-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cr-table,
  .crystal-table,
  .cr-table--rating {
    min-width: 640px;
  }

  .modal-content--rating,
  .modal-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #crystalModal .modal-close,
  #auditHelpModal .modal-close,
  #accountRatingModal .modal-close {
    width: 100%;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .cr-table th,
  .cr-table td,
  .crystal-table th,
  .crystal-table td,
  .cr-table--rating th,
  .cr-table--rating td {
    padding: 8px 10px;
    font-size: .82rem;
  }

  .cr-label {
    font-size: .74rem;
  }

  .cr-value,
  #crystalModal .cr-value {
    font-size: 1.2rem;
  }
}
/* =========================================
   HERO DETAIL TOP  COMPACT REALIGN FIX
   ========================================= */

.hero-detail-top {
    display: grid;
    grid-template-columns: 80px 1fr 420px;
    align-items: center;
    gap: 20px;

    max-width: 1100px;
    margin: 0 auto;
}

/*   () */
.hero-detail-top .hero-avatar {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.hero-detail-left {
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-template-areas:
    "portrait name"
    "stats stats";
  gap: 10px 14px;

  padding: 12px 14px;
  max-width: 360px;

  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,52,58,.6), rgba(0,28,32,.6));
  border: 1px solid rgba(0,55,255,.18);
}

.hero-detail-left .hero-portrait {
  grid-area: portrait;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;

  box-shadow:
    0 0 0 2px rgba(0,255,255,.2),
    0 0 12px rgba(0,255,255,.2);
}

/*  ( + ) */
.hero-detail-top .hero-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

/*   */
.hero-detail-top .hero-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

/*  ( /  / WR) */
.hero-detail-top .hero-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* - */
.hero-detail-top .hero-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;
    border-radius: 999px;

    background: rgba(0,255,200,0.08);
    border: 1px solid rgba(0,255,200,0.2);

    font-size: 13px;
    white-space: nowrap;
}

/*   () */
.hero-detail-top .hero-ratings {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;

    min-width: 380px;
}

/*    */
.hero-detail-top * {
    min-width: 0;
}
/* ========================================================================== */
/* HERO DETAIL HEADER + HISTORY TABLE  PACKED / ALIGNED                      */
/* ========================================================================== */

.hero-detail-top{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(360px, 1fr);
  align-items:start;
  justify-content:center;
  column-gap:24px;
  row-gap:12px;
  width:min(1080px, calc(100vw - 48px));
  margin:0 auto 14px;
  padding:14px 18px;
  box-sizing:border-box;
}

.hero-detail-left{
  display:grid;
  grid-template-columns:92px minmax(0, 1fr);
  grid-template-areas:
    "portrait title"
    "stats stats";
  align-items:start;
  column-gap:14px;
  row-gap:10px;
  min-width:0;
  max-width:320px;
}

.hero-portrait{
  grid-area:portrait;
  width:92px;
  height:92px;
  max-width:92px;
  max-height:92px;
  object-fit:cover;
  align-self:start;
}
.hero-detail-left .hero-name {
  grid-area: name;
  margin: 0;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.hero-detail-left .hero-name{
  grid-area:title;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:92px;
  margin:0;
  line-height:1.06;
  text-align:left;
}
.hero-detail-left .hero-substats {
  grid-area: stats;

  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.hero-detail-left .hero-substat {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  height: 32px;

  border-radius: 999px;
  white-space: nowrap;

  background: rgba(0,255,200,0.08);
  border: 1px solid rgba(0,255,200,0.2);
}
.hero-substat:nth-child(1)::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3cffb4;
}

.hero-substat:nth-child(2)::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #41baff;
}

.hero-substat:nth-child(3)::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffe08a;
}

.hero-detail-center{
  width:100%;
  margin-left: 80px;
  min-width:0;
  max-width:720px;
  align-self:start;
}

.hero-ratings-title{
  margin:0 0 10px;
  text-align:left;
}

.hero-ratings-list{
  width:100%;
  max-width:100%;
}

.hero-ratings-list li{
  display:grid;
  grid-template-columns:140px minmax(0, 1fr);
  column-gap:14px;
  align-items:center;
}

.hero-ratings-list .mode-name{
  text-align:left;
}

.hero-ratings-list .mode-rank{
  justify-content:start;
}
.hero-ratings-list::before {
  transform: translate(-60%, -50%) translateX(-40px);
}
.hero-history-panel{
  width:min(1080px, calc(100vw - 48px));
  margin:0 auto 14px;
  box-sizing:border-box;
}

.hero-history-head{
  padding:0 2px 10px;
}

.hero-history-title{
  margin:0 0 4px;
}

.hero-history-sub{
  line-height:1.25;
}

.hero-history-table{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hero-history-row{
  display:grid;
  grid-template-columns:minmax(110px, 1.02fr) minmax(180px, 1.3fr) minmax(130px, 1.05fr) minmax(130px, .95fr) minmax(110px, .85fr) minmax(140px, 1fr);
  align-items:center;
  column-gap:0;
  width:100%;
  box-sizing:border-box;
}

.hero-history-row > *{
  min-width:0;
  padding:0 14px;
  box-sizing:border-box;
}

.hero-history-row > * + *{
  border-left:1px solid rgba(0,255,255,.10);
}

.hero-history-row--head{
  min-height:44px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(0,54,58,.92), rgba(0,30,34,.94));
  border:1px solid rgba(0,255,255,.18);
  box-shadow:inset 0 0 12px rgba(0,255,255,.05), 0 6px 14px rgba(0,0,0,.18);
}

.hh-head{
  all:unset;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 14px;
  box-sizing:border-box;
  font:inherit;
  font-size:.92rem;
  font-weight:800;
  color:#dff8ff;
  text-align:center;
  cursor:pointer;
}

.hh-head:first-child{justify-content:flex-start;}
.hh-head:nth-child(2){justify-content:center;}
.hh-head:nth-child(3),
.hh-head:nth-child(4),
.hh-head:nth-child(5),
.hh-head:nth-child(6){justify-content:center;}

.hh-sort-ico{
  opacity:.55;
  font-size:.75em;
  line-height:1;
  flex:0 0 auto;
}

.hero-history-row:not(.hero-history-row--head){
  min-height:58px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,255,255,.12);
  box-shadow:inset 0 0 12px rgba(0,255,255,.04), 0 6px 14px rgba(0,0,0,.16);
}

.hero-history-row.is-win{
  background:linear-gradient(90deg, rgba(0,96,94,.82), rgba(0,74,72,.76));
}

.hero-history-row.is-loss{
  background:linear-gradient(90deg, rgba(86,18,44,.68), rgba(34,30,58,.62));
}

.col-match,
.col-date,
.col-mode,
.col-outcome,
.col-delta,
.col-kda{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:58px;
}

.col-match{justify-content:flex-start;}
.col-date{justify-content:center;}
.col-mode,.col-outcome,.col-delta,.col-kda{justify-content:center;}

.match-link{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  color:#7bf3ff;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.match-link:hover{ text-decoration:underline; }

.col-date,
.col-mode,
.col-delta,
.col-kda{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.outcome-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  font-weight:900;
  white-space:nowrap;
  box-sizing:border-box;
}

.outcome-badge.win{
  color:#dcfff3;
  background:rgba(0,130,92,.20);
  border:1px solid rgba(42,255,170,.24);
}

.outcome-badge.loss{
  color:#ffd9d9;
  background:rgba(165,36,58,.22);
  border:1px solid rgba(255,120,140,.24);
}

.delta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  font-weight:900;
  white-space:nowrap;
}

.delta.pos{ color:#9effc0; }
.delta.neg{ color:#ffdede; }
.delta.zero{ color:#d7eef7; }

.col-kda{
  gap:6px;
  font-weight:900;
  letter-spacing:.02em;
}

.col-kda .k,
.col-kda .d,
.col-kda .a,
.col-kda .sep{
  display:inline-block;
  min-width:auto;
  line-height:1;
}

.col-kda .k{ color:#7dff8a; }
.col-kda .d{ color:#ff6a6a; }
.col-kda .a{ color:#ffca59; }
.col-kda .sep{ color:rgba(230,245,255,.82); }

.hero-history-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:72px;
  text-align:center;
  border-radius:12px;
  border:1px sold rgba(0,255,255,.14);
  background:linear-gradient(180deg, rgba(0,52,58,.42), rgba(0,28,32,.42));
}

.history-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  margin:14px auto 0;
  text-align:center;
}

.history-pagination a,
.history-pagination .page-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:999px;
  color:#8fdfff;
  text-decoration:none;
  border:1px solid rgba(0,255,200,.18);
  background:rgba(0,255,200,.06);
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}


.history-pagination a:hove,
.history-pagination .page-arrow:hover{
  background:rgba(0,255,200,.14);
  border-color:rgba(0,255,200,.28);
  transform:translateY(-1px);
}

.history-pagination .page-info,
.history-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  color:#dff8ff;
  font-weight:800;
}

@media (max-width: 1100px){
  .hero-detail-top,
  .hero-history-panel{
    width:min(100%, calc(100vw - 28px));
  }

  .hero-history-row{
    grid-template-columns:minmax(100px, .95fr) minmax(160px, 1.2fr) minmax(116px, .95fr) minmax(118px, .92fr) minmax(94px, .78fr) minmax(120px, .92fr);
  }
}

@media (max-width: 900px){
  .hero-detail-top{
    grid-template-columns:1fr;
    width:min(100%, calc(100vw - 22px));
    row-gap:16px;
  }

  .hero-detail-left{
    max-width:none;
    grid-template-columns:84px minmax(0, 1fr);
  }

  .hero-detail-left .hero-name{
    min-height:84px;
  }

  .hero-detail-left .hero-substats{
    grid-template-columns:1fr;
  }

  .hero-ratings-title,
  .hero-ratings-list .mode-name,
  .hero-ratings-list .mode-rank{
    text-align:left;
    justify-content:start;
  }

  .hero-history-panel{
    width:min(100%, calc(100vw - 22px));
  }

  .hero-history-table{
    overflow-x:auto;
    padding-bottom:2px;
  }

  .hero-history-row{
    min-width:860px;
  }
}

@media (max-width: 560px){
  .hero-detail-left{
    grid-template-columns:76px minmax(0, 1fr);
    column-gap:12px;
  }

  .hero-portrait{
    width:76px;
    height:76px;
    max-width:76px;
    max-height:76px;
  }

  .hero-detail-left .hero-name{
    min-height:76px;
    font-size:.98rem;
  }

  .hero-history-row{
    min-width:820px;
  }
}