@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css');

html {
    font: 16px 'Arial', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('cs-background.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

body .main-container {
    margin: 5em auto;
    max-width: 1200px;
    width: 100%;
    min-height: 100dvh;
}

header {
    max-width: 1200px;
    width: 100%;
    margin-top: -1em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #030303 0%, #13131b 50%, #100d1d 100%);
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    border-bottom: 2px solid rgb(47, 0, 255);
}

header img {
    height: 100px;
}

.top-cards {
    height: auto;
}

.card::before {
    content: '';
    position: absolute;
    top:0;
    width:100%;
    height: 15px;
    background: linear-gradient(to right, #5c0000, rgb(255, 85, 85), #5c0000);
    z-index: 2;
}


.card {
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('1.jpg');
    background-position: left;
    background-size: 400%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6em 3em 3em 3em;
    border-radius: 1em;
    border: 2px solid rgb(255, 255, 105);
    box-shadow: 0 0 1em 0 rgb(255, 255, 80);
    height: 100%;
}
.card .card-gloss {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 10;
  transition: background 0.2s;
  mix-blend-mode: lighten;
}

.card[data-placement="gold"] {
  box-shadow: 0 0 2em 0 #ffe066, 0 0 1em 0 #fffbe0;
  border-color: #ffe066;
}
.card[data-placement="silver"] {
  box-shadow: 0 0 2em 0 #bfc9d1, 0 0 1em 0 #f0f0f0;
  border-color: #bfc9d1;
}
.card[data-placement="bronze"] {
  box-shadow: 0 0 2em 0 #d49a6a, 0 0 1em 0 #fff0e0;
  border-color: #d49a6a;
}
.card.effect-3d {
  transition: transform 0.25s cubic-bezier(.25,.46,.45,.94), box-shadow 0.3s;
}
.card .trophy {
    rotate: 180deg;
    position: absolute;
    top:0.8%;
    z-index: 1;
}

.card .trophy img {
    display: block;
    width: 60px;
}

.card .avatar {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card .avatar img {
    display: block;
    object-fit: cover;
    width: 150px;
    padding: 0.2em;
    border-radius: 50%;
    background: linear-gradient(135deg, #fffee0 0%, #f2ff66 50%, #fcffe0 100%);
}

.card .avatar .skill {
    position: absolute;
    bottom:-5px;
    color:white;
    background-color: rgb(149, 0, 0);
    padding: 0.1em 0.6em;
    font-weight: bold;
    border-radius: 0.5em;
    font-size: 1.5em;
    border: 2px solid rgb(255, 255, 255);    
}

.card .avatar .online, .card .avatar .offline {
    width: 15px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(135deg, #fffee0 0%, rgb(196, 0, 0) 70%);
    border: 2px solid rgb(0, 0, 0);
    bottom: 10%;
    right:11%;
}

.card .avatar .online {
    background: linear-gradient(135deg, #fffee0 0%, rgb(49, 196, 0) 70%);
}

.card .name {
    margin: 1em 0;
    background-color: rgba(255, 251, 0, 0.2);
    width: 100%;
    height: 35px;
    padding: 0 2em;
    clip-path: polygon(
        7% 0%,  /* top left angle */
        93% 0%,  /* top right angle */
        100% 50%,/* right middle point */
        93% 100%,/* bottom right angle */
        7% 100%,/* bottom left angle */
        0% 50%   /* left middle point */
    );

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    color: white;
}

.card .name h3 {
    opacity: 0.8;
}

.card .steam {
    margin-bottom: -0.5em;
}

.card .steam img {
    width: 10px;
}

.card .placement {
    margin: 1em 0;
    position: relative;
}

.card .placement h2 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 5%);
    color:white;
    font-size: 2.2em;
    opacity: 0.8;
}

.card .info {
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:110%;
}

.card .info .xp {
    position: relative;
}

.card .info .xp img {
    width: 90px;
}

.card .info .xp span {
    position: absolute;
    color: white;
    font-weight: bold;
    top: 47%;
    left: 53%;
    transform: translate(-50%, -50%);
    font-size: 1.3em;
}

.card .info .stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: white;
    opacity: 0.8;
}

.card .info .stats .row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 2em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card .info .stats .row + .row {
    margin-top: 0.3em;
}

.top-cards {
    display: flex;
    gap: 4em;
    align-items: end;
    flex-wrap: wrap;
    justify-content: center;
}

.top-cards .card:first-child {
    order: 1;
}

.card:nth-child(2)::before {
    background: linear-gradient(to right, #00445c, rgb(84, 155, 255), #00445c);
}

.top-cards .card:nth-child(2) {
    background-position: center;
    order: 0;
    border: 2px solid rgb(181, 181, 181);
    box-shadow: 0 0 1em 0 rgb(211, 211, 211);
}

.card:nth-child(2) .placement, .card:nth-child(3) .placement {
    margin: 0;
}

.card:nth-child(2) .avatar img {
    background: linear-gradient(135deg, #ffffff 0%, #818181 50%, #ffffff 100%);
}

.card:nth-child(2) .name {
    background-color: rgba(255, 255, 255, 0.2);
}

.card:nth-child(3)::before {
    background: linear-gradient(to right, #31005c, rgb(189, 119, 255), #31005c);
}

.top-cards .card:nth-child(3) {
    background-position: right;
    order: 2;
    border: 2px solid rgb(170, 82, 0);
    box-shadow: 0 0 1em 0 rgb(151, 68, 0);
}

.card:nth-child(3) .avatar img {
    background: linear-gradient(135deg, #d35400 0%, #582300 50%, #d35400 100%);
}

.card:nth-child(3) .name {
    background-color: rgba(255, 102, 0, 0.2);
}

table {
    
    border-collapse: separate !important;
    margin-top: 4em;
    width: 100%;
    color:white;
    border-spacing: 0;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 2em;
}

tr {
    border-radius: 2em;
}

tr.b {
    background-color: rgba(39, 39, 39, 0.3);
}

td {
    padding: 0.5em 0;
}

td:first-child {
    border-top-left-radius:1em;
    border-bottom-left-radius:1em;
}

td:last-child {
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
}

th {
    height: 35px;
    color: #d3b35a;
}

td:nth-child(n+4):nth-child(-n+8) {
    width: 10%;
}

td.player {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1.5em;
}

td.player .avatar {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

td.player .avatar img {
    display: block;
    object-fit: cover;
    width: 45px;
    padding: 0.2em;
    border-radius: 50%;
    background: linear-gradient(135deg, #fffee0 0%, #f2ff66 50%, #fcffe0 100%);
}

td.player .avatar img.online-yes {
    background: linear-gradient(135deg, #e0ffe0 0%, #66ff66 50%, #e0ffe0 100%);
}

td.player .avatar img.online-no {
    background: linear-gradient(135deg, #ffe0e0 0%, #ff6666 50%, #ffe0e0 100%);
}

td.player .avatar .skill {
    position: absolute;
    bottom: -5px;
    color: white;
    padding: 0.1em 0.6em;
    font-weight: bold;
    border-radius: 0.5em;
    font-size: 0.8em;
    border: 1px solid rgb(255, 255, 255);
    background-color: #b8a365; /* default_skill */
}

td.player .name {
    display: flex;
    gap: 0.4em;
    height: 25px;
    align-items: center;
}

td.player .steam {
    align-self:flex-end;
}

td.player .steam img {
    width: 10px;
}

td.player h3 {
    font-size: 1em;
}

td.xp {
    position: relative;
}

td.xp span {
    position: absolute;
    font-size: 1.2em;
    top: 49%;
    left: 52%;
    transform: translate(-50%, -50%);
}
/* XP color levels */
td.xp span        { color: #E1D9D1; }    /* default */
td.xp.xp-5000 span    { color: #8BBCE6; }
td.xp.xp-10000 span   { color: #6A80E4; }
td.xp.xp-15000 span   { color: #BD6DFA; }
td.xp.xp-20000 span   { color: #E315F1; }
td.xp.xp-25000 span   { color: #E94A46; }
td.xp.xp-30000 span   { color: #FBD701; }

.card .xp span { color: #E1D9D1; }
.card .xp.xp-5000 span { color: #8BBCE6; }
.card .xp.xp-10000 span { color: #6A80E4; }
.card .xp.xp-15000 span { color: #BD6DFA; }
.card .xp.xp-20000 span { color: #E315F1; }
.card .xp.xp-25000 span { color: #E94A46; }
.card .xp.xp-30000 span { color: #FBD701; }

.card .avatar .skill { background-color: #b8a365; } /* default_skill */
.card .avatar .skill.L,
.card .avatar .skill.L-,
.card .avatar .skill.L+ { background-color: #FCE590; }
.card .avatar .skill.M,
.card .avatar .skill.M-,
.card .avatar .skill.M+ { background-color: #FFC900; }
.card .avatar .skill.H,
.card .avatar .skill.H-,
.card .avatar .skill.H+ { background-color: #F2880F; }
.card .avatar .skill.P,
.card .avatar .skill.P-,
.card .avatar .skill.P+ { background-color: #FF3333; }
.card .avatar .skill.G { background-color: #000; color: #fff; }

td .hs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

td .hs .hs-progress {
    position: relative;
    font-size: 0.7em;
    display: flex;
    align-items: center;
    border: 3px solid rgb(61, 61, 61);
    padding: 0.3em;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

td .hs .hs-progress::before {
    content: "";
    position: absolute;
    inset: -3px; /* Matches border width */
    border-radius: 50%;
    /* Use a CSS variable for the fill percentage */
    background: conic-gradient(
        rgb(255, 81, 81) 0% var(--hs-fill, 0%),
        transparent var(--hs-fill, 0%) 100%
    );
    mask-image: radial-gradient(circle, transparent 60%, black 61%);
    -webkit-mask-image: radial-gradient(circle, transparent 60%, black 61%);
}

/* ...existing code... */

/* Fade-in and move up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Animate table rows */
table tr {
  opacity: 0;
  animation: fadeInUp 0.7s cubic-bezier(.25,.8,.25,1) forwards;
}

/* Staggered animation delays for cards and table rows */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.3s; }
.card:nth-child(3) { animation-delay: 0.5s; }

table tr:nth-child(2) { animation-delay: 0.7s; }
table tr:nth-child(3) { animation-delay: 0.8s; }
table tr:nth-child(4) { animation-delay: 0.9s; }
table tr:nth-child(5) { animation-delay: 1.0s; }
table tr:nth-child(6) { animation-delay: 1.1s; }
table tr:nth-child(7) { animation-delay: 1.2s; }
table tr:nth-child(8) { animation-delay: 1.3s; }
table tr:nth-child(9) { animation-delay: 1.4s; }
table tr:nth-child(10) { animation-delay: 1.5s; }
table tr:nth-child(11) { animation-delay: 1.6s; }
table tr:nth-child(12) { animation-delay: 1.7s; }
table tr:nth-child(13) { animation-delay: 1.8s; }
table tr:nth-child(14) { animation-delay: 1.9s; }

header, .main-container {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(.25,.8,.25,1) forwards;
  animation-delay: 0.05s;
}