.user-k--tip{
  position: relative;
  cursor: default;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.user-k--tip::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: max-content;
  max-width: 240px;
  background: #1a1f28;
  color: #b0b8c8;
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
  white-space: normal;
}
.user-k--tip:hover::after{
  opacity: 1;
}

.user-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 18px 70px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-top{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.user-top > .user-card:first-child{ flex: 3; }
.user-top > .user-card:last-child{ flex: 2; }
@media(max-width:680px){
  .user-top{ flex-direction: column; }
  .user-top > .user-card:first-child,
  .user-top > .user-card:last-child{ flex: unset; width: 100%; }
}

.user-card{
  width: 100%;
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(620px 220px at 50% 0%, rgba(255,90,61,.10), transparent 65%),
    linear-gradient(180deg, rgba(14,19,27,.85), rgba(10,12,16,.65));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}

.user-card-head{
  margin-bottom: 10px;
}

.user-title{
  margin: 0 0 4px;
  font-size: clamp(18px, 2vw, 24px);
}

.user-subtitle{
  margin: 0;
  color: rgba(231,225,216,.72);
  font-weight: 700;
  font-size: 13px;
  min-height: 16px;
}


.user-a{
  display: flex;
  justify-content: flex-end;
}


.predict-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.predict-head{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.predict-title{
  margin: 0;
  font-size: 20px;
}

.predict-subtitle{
  margin: 0;
  color: rgba(231,225,216,.72);
  font-size: 13px;
  font-weight: 700;
}


.matches-title{
  margin: 0 0 12px;
  font-size: 20px;
}

.matches-container{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.matches-table{
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.matches-table th,
.matches-table td{
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
}

.matches-table thead{
  background: rgba(255,255,255,.05);
}

.matches-table tbody tr{
  border-top: 1px solid rgba(255,255,255,.06);
}

.match-win,
.predict-hit{
  color: #00e0a4;
  font-weight: 800;
}

.match-loss,
.predict-miss{
  color: #ff6b6b;
  font-weight: 800;
}

.match-hero{
  font-weight: 700;
}

.predict-empty{
  color: rgba(231,225,216,.55);
}

.predict-note{
  color: rgba(231,225,216,.45);
  font-size: 12px;
  font-weight: 700;
}

.timeline-marker-row td{
  padding: 0;
}

.timeline-marker{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background:
    radial-gradient(500px 160px at 50% 0%, rgba(255,90,61,.08), transparent 65%),
    rgba(255,255,255,.025);
  border-left: 12px solid rgba(255,90,61,.45);
}
.timeline-marker--active{
  border-left-color: rgba(202,138,4,.75);
  background:
    radial-gradient(500px 160px at 50% 0%, rgba(202,138,4,.07), transparent 65%),
    rgba(255,255,255,.025);
}
.timeline-marker--hit{
  border-left-color: rgba(34,197,94,.55);
  background:
    radial-gradient(500px 160px at 50% 0%, rgba(34,197,94,.06), transparent 65%),
    rgba(255,255,255,.025);
}

.timeline-marker-label{
  color: rgba(231,225,216,.94);
  font-weight: 800;
  letter-spacing: .2px;
}

.timeline-marker-date{
  color: rgba(231,225,216,.62);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.predict-modal-text{
  color: rgba(231,225,216,.92);
  line-height: 1.55;
  margin-bottom: 14px;
}


@media (max-width: 820px){
  .user-page{
    padding: 24px 12px 56px;
  }

  .user-card{
    padding: 14px;
  }

  .user-a{
    justify-content: flex-start;
  }

  .user-a .btn{
    width: 100%;
  }

  .predict-card{
    flex-direction: column;
    align-items: stretch;
  }

  .predict-card .btn{
    width: 100%;
  }

  .timeline-marker{
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-marker-date{
    white-space: normal;
  }
}

@media (max-width: 640px){
  .user-page{
    padding: 18px 10px 48px;
    gap: 12px;
  }

  .user-card{
    padding: 12px;
    border-radius: 16px;
  }

  .user-title,
  .predict-title,
  .matches-title{
    line-height: 1.2;
  }

  .user-k,
  .user-v,
  .predict-subtitle,
  .predict-rules-title,
  .predict-rules-list,
  .matches-table{
    font-size: 12px;
  }

  .matches-table th,
  .matches-table td{
    padding: 8px;
  }

  .matches-container{
    border-radius: 12px;
  }

  .timeline-marker{
    padding: 10px;
  }

  .timeline-marker-label,
  .timeline-marker-date{
    font-size: 12px;
  }
}