@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
}

body{
  background:
    radial-gradient(
      circle at top,
      #082848 0%,
      #041d34 28%,
      #021425 60%,
      #010d19 100%
    );

  color:#fff;
  font-family:'Roboto Condensed',sans-serif;

  display:flex;
  justify-content:center;
}

.app{
  width:100%;
  max-width:400px;
  min-height:100vh;
  margin:0 auto;
}

/* HEADER */

.header{
  padding:14px 18px 8px;
}

.league-info{
  display:flex;
  align-items:center;
  gap:10px;
}

.league-logo{
  width:72px;
  height:72px;

  object-fit:contain;
  flex-shrink:0;
}

#league-name{
  margin:0;

  font-size:31px;
  font-weight:700;

  line-height:.95;
  letter-spacing:-0.4px;

  color:#fff;
}

#season{
  margin-top:3px;

  color:#e8cd87;

  font-size:13px;
  font-weight:500;

  line-height:1.1;
}

/* TOP NAV */

.tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  width:100%;
  height:35px;

  border-bottom:
    1px solid rgba(
      255,255,255,.08
    );
}

.tab{
  border:none;
  background:none;

  position:relative;
  cursor:pointer;

  color:#8f98a4;

  font-family:
    'Roboto Condensed',
    sans-serif;

  font-size:11px;
  font-weight:400;
}

.tab-content{
  position:absolute;
  top:50%;
  left:50%;

  transform:
    translate(-50%,-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  gap:5px;

  width:96px;
}

.tab svg{
  width:13px;
  height:13px;
}

.tab i{
  font-size:14px;
}

.football-icon{
  font-size:15px;
}

.tab span{
  white-space:nowrap;
}

.tab.active{
  color:#efbb35;
}

.tab.active::after{
  content:'';

  position:absolute;
  left:50%;
  bottom:0;

  transform:
    translateX(-50%);

  width:100%;
  max-width:133px;
  height:2px;

  background:#efbb35;
}
/* SUB NAV */

.mode-switch{
  display:grid;
  grid-template-columns:
    1fr 1fr 1fr;

  align-items:center;

  height:25px;

  margin:14px 16px;

  border-radius:14px;

  background:
    rgba(15,43,71,.95);

  border:
    1px solid rgba(
      255,255,255,.08
    );

  overflow:hidden;
}

.mode{
  position:relative;

  height:100%;

  border:none;
  background:none;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#8f99a4;

  font-family:
    'Roboto Condensed',
    sans-serif;

  font-size:11px;
  font-weight:400;

  letter-spacing:.1px;

  cursor:pointer;

  border-radius:14px;

  z-index:2;
}

.mode.active{
  color:#efbb35;

  border:
    1px solid #efbb35;

  background:
    rgba(239,187,53,.03);

  border-radius:14px;

  height:100%;
  font-family:
  'Roboto Condensed',
  sans-serif;

  font-weight:400;
}
/* =========================
   TABLE
========================= */
.table-card{
  margin:0 14px 30px;

  border-radius:18px;
  overflow:hidden;

  background:rgba(
    11,35,58,.92
  );

  border:1px solid rgba(
    255,255,255,.06
  );
}

/* ROW */

.row{
  display:grid;
  align-items:center;

  min-height:35px;

  padding:0 14px;

  border-bottom:
    1px solid rgba(
      255,255,255,.05
    );
}

.row:last-child{
  border-bottom:none;
}

/* HEADER */

.header-row > div:nth-child(2){
  justify-content:flex-start;

  padding-left:34px;

  font-size:7px;
}

.header-row{
  min-height:30px;

  color:#7d8793;

  font-size:8px;
  font-weight:400;

  letter-spacing:.2px;
}

/* GRID */

.short-row{
  grid-template-columns:
    24px
    minmax(120px,1fr)
    42px
    42px
    42px;

  align-items:center;
}

/* ALL CELLS */

.short-row > div,
.header-row > div{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* TEAM COLUMN */

.team-box{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:8px;

  text-align:left;

  width:100%;
  padding-left:4px;

  font-size:10px;
  font-weight:400;
}

/* POSITION COLUMN */

.short-row > div:first-child,
.header-row > div:first-child{
  justify-content:center;
  text-align:center;
}

/* TEAM COLUMN */

.team-box{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:8px;

  text-align:left;

  width:100%;
  padding-left:4px;

  font-size:10px;
  font-weight:400;
}

/* TEAM HEADER */

.header-row{
  min-height:30px;

  color:#7d8793;

  font-size:10px !important;
  font-weight:400;

  letter-spacing:.2px;
}

/* FORCE HEADER FONT */

.header-row > div{
  font-size:10px !important;
}

/* TEAM COLUMN */

.team-box{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:8px;

  text-align:left;

  font-size:12px;
  font-weight:400;

  width:100%;

  padding-left:0;
  margin-left:-6px;
}

/* TEAM LOGO */

.team-logo{
  width:24px;
  height:24px;

  object-fit:contain;
  flex-shrink:0;
}

/* TABLE NUMBERS */

.short-row > div:not(.team-box){
  font-size:12px;
  font-weight:400;
}

/* POINTS */

.points{
  color:#efbb35;

  font-size:16px !important;
  font-weight:600;

  line-height:1;
}

/* GOAL DIFFERENCE */

.positive{
  color:#19c85b;
}

.negative{
  color:#cf1717;
}

/* POSITION NUMBERS */

.short-row > div:first-child{
  font-size:16px;
  font-weight:500;

  color:#b2bcc8;
}

/* TOP 3 */

.row:nth-child(2){
  border-left:
    2px solid #16d954;
}

.row:nth-child(3){
  border-left:
    2px solid #2a8dff;
}

.row:nth-child(4){
  border-left:
    2px solid #efbb35;
}
/* MOVE TEAM COLUMN LEFT */

.short-row > div:nth-child(2){
  justify-content:flex-start !important;
  padding-left:12px !important;
}

.team-box{
  margin-left:0px !important;
}
/* FIX TEAM HEADER */

.header-row > div:nth-child(2){
  justify-content:flex-start !important;

  padding-left:34px !important;
}
/* =========================
   FULL TABLE
========================= */

.full-row{
  grid-template-columns:
    24px
    minmax(92px,1fr)
    24px
    24px
    24px
    24px
    30px
    30px
    40px
    42px;

  align-items:center;
}

/* FULL HEADER */

.full-header{
  min-height:30px;

  color:#7d8793;

  font-size:8px;
  font-weight:400;

  letter-spacing:.15px;
}

.full-header > div{
  display:flex;
  align-items:center;
  justify-content:center;
}

.full-header > div:nth-child(2){
  justify-content:flex-start;
  padding-left:34px;
}

/* FULL CELLS */

.full-row > div{
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  font-weight:400;
}

/* TEAM COLUMN */

.full-row .team-box{
  justify-content:flex-start !important;

  padding-left:0;
  margin-left:-6px;

  gap:8px;

  font-size:10px;
}

/* TEAM LOGO */

.full-row .team-logo{
  width:22px;
  height:22px;
}

/* POINTS */

.full-row .points{
  color:#efbb35;

  font-size:16px;
  font-weight:700;
}

/* GOAL DIFF */

.full-row .positive{
  color:#19c85b;
}

.full-row .negative{
  color:#cf1717;
}

/* POSITION */

.full-row > div:first-child{
  font-size:16px;
  font-weight:500;

  color:#b2bcc8;
}

/* TOP 3 */

.full-row.rank-1{
  border-left:2px solid #16d954;
}

.full-row.rank-2{
  border-left:2px solid #2a8dff;
}

.full-row.rank-3{
  border-left:2px solid #efbb35;
}
/* SHORT TABLE TEAM SIZE */

.short-row .team-box{
  font-size:12px;
  font-weight:500;
}
/* =========================
   FULL TABLE
========================= */

.full-row{
  grid-template-columns:
    22px
    minmax(100px,1fr)
    22px
    22px
    22px
    22px
    28px
    28px
    34px
    34px;

  align-items:center;
}

.full-header{
  min-height:28px;

  color:#7d8793;

  font-size:7px;
  font-weight:400;

  letter-spacing:.15px;
}

.full-row > div,
.full-header > div{
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:10px;
  font-weight:400;
}

/* TEAM COLUMN */

.full-row .team-box{
  justify-content:flex-start !important;

  width:100%;

  gap:6px;

  padding-left:0;
  margin-left:-4px;

  font-size:12px;
}

/* HEADER TEAM */

.full-header > div:nth-child(2){
  justify-content:flex-start;
  padding-left:28px;
}

/* TEAM LOGO */

.full-row .team-logo{
  width:18px;
  height:18px;

  object-fit:contain;
  flex-shrink:0;
}

/* POSITION */

.full-row > div:first-child{
  font-size:10px;
  font-weight:400;

  color:#b2bcc8;
}

/* POINTS */

.full-row .points{
  color:#efbb35;

   font-size:12px !important;
  font-weight:600;
}

/* TOP 3 */

.full-row.rank-1{
  border-left:2px solid #16d954;
}

.full-row.rank-2{
  border-left:2px solid #2a8dff;
}

.full-row.rank-3{
  border-left:2px solid #efbb35;
}
/* FULL TABLE COLORS */

.wins{
  color:#2f8f4f;
  font-weight:500;
}

.draws{
  color:#b08a2f;
  font-weight:500;
}

.losses{
  color:#9a3434;
  font-weight:500;
}
/* =========================
   FORM TABLE
========================= */

.form-row{
  display:grid;

 grid-template-columns:
  12px
  150px
  minmax(150px,1fr);
  align-items:center;

  min-height:34px;

  padding:
  0 16px;
  margin:0 -23px;
  box-sizing:border-box;
  
}

.form-header{
  min-height:34px;

  color:#7d8793;

  font-size:10px;
  font-weight:400;

  letter-spacing:.2px;
}

/* HEADER */

.form-header > div{
  display:flex;
  align-items:center;
  justify-content:center;
}

.form-header > div:nth-child(2){
  justify-content:flex-start;
  padding-left:38px;
}

.form-header > div:nth-child(3){
  justify-content:center;

  font-size:10px;
}

/* ROWS */

.form-row > div{
  display:flex;
  align-items:center;
}
.form-row > div:first-child{
  display:flex;

  align-items:center;
  justify-content:center;

  font-size:16px;
  font-weight:300;

  text-align:center;
}
/* TEAM COLUMN */

.form-row .team-box{
  display:flex;

  align-items:center;

  justify-content:flex-start;

  gap:10px;

  min-width:0;
  padding-left:8px;
}

.form-row .team-box span{
  white-space:nowrap;
  font-size:12px;
font-weight:500;
}

/* FORM */

.form-box{
  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:10px;

  width:100%;

  padding-right:8px;
}

/* CIRCLES */

.form-circle{
  width:22px;
  height:22px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  font-weight:600;

  color:#fff;

  flex-shrink:0;
}

/* COLORS */

.win{
  background:#1ea446;
}

.draw{
  background:#d8a018;
}

.loss{
  background:#d73b32;
}

/* REMOVE TABLE RANK COLORS */

.form-row.rank-1{
  border-left:
    2px solid #00d26a;
}

.form-row.rank-2{
  border-left:
    2px solid #1185ff;
}

.form-row.rank-3{
  border-left:
    2px solid #f4b400;
}
/* =========================
   SCORERS
========================= */

.scorers-wrap{
  width:100%;

  padding-bottom:20px;

  position:relative;

  left:0px;
}
.scorers-title{
  font-size:25px;

  font-weight:800;

  text-align:right;
  padding-right:30px;

  margin:
    0 6px 8px 0;

  letter-spacing:-2px;

  background:
    linear-gradient(
      to bottom,
      #fff1a8 0%,
      #ffd65c 18%,
      #f2b82f 45%,
      #c98312 72%,
      #7d4b05 100%
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  background-clip:text;

  text-shadow:
    0 2px 10px
    rgba(
      255,
      185,
      0,
      .18
    );
}

/* CARD */

.scorer-card{
  display:grid;

  grid-template-columns:
    60px
    minmax(0,1fr)
    64px
    80px;

  align-items:center;

  min-height:42px;

  background:
  linear-gradient(
    180deg,
    #06213f 0%,
    #041a33 45%,
    #021428 100%
  );

  border:
  1px solid
  rgba(
    255,
    200,
    70,
    .22
  );

  border-radius:7px;

  overflow:hidden;

  margin:
  0 0 0px;;

  padding:
    0 18px;

  box-sizing:border-box;
}
.scorer-card:not(.gold) .scorer-name{
  white-space:nowrap;

  max-width:none;

  line-height:1;

  left:-12px;
}
/* GOLD FIRST */

.scorer-card.gold{
  min-height:70px;

  position:relative;

  overflow:visible;

  border-radius:8px;

  padding:0 12px;

  box-sizing:border-box;
  

  border:
    1px solid
    rgba(
      255,
      214,
      90,
      .18
    );

  background:
    linear-gradient(
      90deg,
      #9f6b0f 0%,
      #d69a18 8%,
      #f1bc35 22%,
      #d28f12 42%,
      #e8b337 62%,
      #f2c54a 78%,
      #8b5a09 100%
    );

  box-shadow:
    inset
    0 1px 0
    rgba(
      255,
      255,
      255,
      .25
    ),

    inset
    0 -10px 20px
    rgba(
      70,
      35,
      0,
      .18
    ),

    0 4px 14px
    rgba(
      255,
      187,
      0,
      .15
    );
}
.scorer-card.gold + .scorer-card.gold{
  margin-top:6px;
}
.scorer-card.gold .scorer-name{
  position:absolute;

  left:80px;
  top:-12px;

  font-size:16px;

  font-weight:700;

  color:#111;

  line-height:.95;

  max-width:150px;

  z-index:5;
}
/* RANK */

.scorer-rank{
  display:flex;

  align-items:center;
  justify-content:center;

  height:100%;

  font-size:30px;
  font-weight:600;

  text-align:center;

  color:#bfbfbf;

  line-height:1;

  position:relative;

  top:0px;
  left:-22px;
}

/* PLAYER */

.scorer-player{
  display:flex;

  align-items:center;

  gap:8px;

  font-size:16px;

  min-width:0;

  overflow:visible;

  position:relative;

  padding-left:95px;

  width:100%;
}

/* ONLY 2–5 */

.scorer-card:not(.gold) .scorer-player{
  padding-left:68px;
}
.scorer-card:not(.gold) .scorer-player{
  padding-left:68px;
}
.scorer-card:not(.gold) .scorer-avatar{
  position:relative;
  left:-100px;
}
.scorer-card:not(.gold) .scorer-name{
  position:relative;
  left:-90px;
}
/* FIRST PLACE */

.big-avatar{
  width:110px;
  height:110px;

  object-fit:contain;

  position:absolute;

  left:-36px;
  bottom:-34px;

  transform:none;

  z-index:3;

  pointer-events:none;
  filter:
  drop-shadow(
    0 8px 12px
    rgba(
      0,
      0,
      0,
      .28
    )
  );
}
.small-gold-avatar{
  width:94px;
  height:94px;

  bottom:-34px;
}
.scorer-card:not(.gold) img{
  width:46px;
  height:46px;

  object-fit:contain;

  flex-shrink:0;
}
/* NAME */

.scorer-name{
  font-size:14px;
  font-weight:400;

  color:white;
  .scorer-card:not(.gold) .scorer-name{
  color:#d6dde7;
}

  line-height:1.05;

  position:relative;

  top:-2px;
}
/* TEAM */

.scorer-team-logo{
  object-fit:contain;

  justify-self:center;
  position:relative;
}
.scorer-card.gold .scorer-team-logo{
  width:52px;
  height:52px;
}
.scorer-card:not(.gold) .scorer-team-logo{
  width:38px;
  height:38px;
}
.scorer-card.gold .scorer-team-logo{
  left:36px;
}
.scorer-card:not(.gold) .scorer-team-logo{
  position:relative;
  left:40px;
}
/* GOALS */

.scorer-goals{
  font-size:40px;
  font-weight:700;

  text-align:center;
  

  position:relative;
  
  background:
    linear-gradient(
      to top,
      #6c4207 0%,
      #9b6711 25%,
      #d79d28 55%,
      #ffd86a 100%
    );
  
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  
  background-clip:text;
}
/* GOALS 2–5 */

.scorer-card:not(.gold) .scorer-goals{
  position:relative;

  left:30px;

  font-size:30px;
}

.scorer-card.gold
.scorer-goals{
  color:#4a2800;
  font-size:40px;

  -webkit-text-fill-color:
    initial;

  background:none;
  position:relative;
left:24px;

  text-shadow:
    0 2px 6px
    rgba(
      255,
      210,
      90,
      .08
    );
}
.scorer-card.gold
.scorer-rank{
  font-size:40px !important;

  font-weight:700;

  color:#4a2800 !important;

  display:flex;

  align-items:center;
  justify-content:center;

  text-align:center;

  line-height:1;

  position:relative;

  top:0;

  text-shadow:none;
  left:-18px;
}
/* GOLD METAL TEXTURE */

.scorer-card.gold::before{
  content:"";

  position:absolute;

  inset:0;

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        .22
      ),
      transparent 28%,
      transparent 72%,
      rgba(
        70,
        35,
        0,
        .18
      )
    );

  pointer-events:none;
}

/* DARK LEFT AREA */

.scorer-card.gold::after{
  content:"";

  position:absolute;

  left:45px;
  right:0px;

  top:0px;
  bottom:0px;

  border-radius:8px;

  background:
    linear-gradient(
      90deg,
      rgba(
        90,
        45,
        0,
        .22
      ),
      rgba(
        90,
        45,
        0,
        .08
      )
    );

  pointer-events:none;
}
.scorer-goals::before{
  content:"";

  position:absolute;

  left:10px;

  top:50%;

  transform:
    translateY(-50%);

  width:1px;

  height:42px;

  background:
    linear-gradient(
      to bottom,
      rgba(
        255,
        214,
        90,
        .08
      ),
      rgba(
        255,
        214,
        90,
        .75
      ),
      rgba(
        255,
        214,
        90,
        .08
      )
    );

  box-shadow:
    0 0 6px
    rgba(
      255,
      200,
      50,
      .18
    );
}