:root{
  --bg:#1f1f1f;
  --panel:#2a2a2a;
  --panel2:#3a2d2a;
  --line:#1b1412;
  --gold:#d7b05a;
  --gold2:#b88b3a;
  --tab:#e9e4dd;
  --tabOff:#cfc6bb;
  --row:#5b3a35;
  --row2:#51332e;
  --rowHighlight:#3f5f86;
  --text:#f4f1ea;
  --muted:#d0c6ba;
  --chip:#121212;
  --chipText:#f8f8f8;
  --divider:#2a1d1a;
  --accent:#ffcf4a;
  --danger:#c93a3a;
  --ok:#2fbf6a;
  --badge:#2b2b2b;
}

*{box-sizing:border-box}
html, body{ height:100%; }

body{
  margin:0;
  background: radial-gradient(1200px 700px at 30% 10%, #3a3a3a 0%, #1c1c1c 55%, #101010 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  display:grid;
  place-items:center;
  padding:24px;
}

.back-button {
  position: absolute;
  top: 16px;
  left: 16px;

  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;

  background: linear-gradient(#555, #333);
  color: #fff;
  border: 1px solid #222;
  border-radius: 6px;

  cursor: pointer;
}

.back-button:hover {
  background: linear-gradient(#666, #444);
}


/* Rahmen wie Ingame-Popup */
.modal{
  width:min(1250px, 100%);
  border-radius:14px;
  background: linear-gradient(#6b625b, #4b4641);
  padding:10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.modal-inner{
  border-radius:10px;
  background: linear-gradient(#3a3a3a, #2b2b2b);
  padding:12px;
  position:relative;
  overflow:hidden;
}

/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  padding:4px 6px 10px;
}
.tab{
  padding:10px 18px;
  border-radius:10px 10px 6px 6px;
  font-weight:800;
  letter-spacing:.4px;
  color:#3b2f2b;
  background: linear-gradient(#f7f3ee, #d8d1c7);
  border:2px solid rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  user-select:none;
}
.tab.off{
  opacity:.8;
  background: linear-gradient(#e1dbd2, #bdb4a7);
}

/* Header-Banner */
.banner{
  background-image: url("/assets/cwl_background.png"); /* Pfad anpassen */
  background-size: cover;       /* Bild füllt den Bereich */
  background-position: center;  /* schön zentriert */
  background-repeat: no-repeat;
  border-radius:10px;
  overflow:hidden;
  border:2px solid rgba(0,0,0,.35);
  min-height:250px;
  position:relative;
}

/* Optional: dunkles Overlay für bessere Lesbarkeit */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.banner .meta{
  position: relative; /* damit Text über dem Overlay liegt */
  z-index: 1;
  left:16px;
  top:14px;
  font-weight:900;
  text-transform:uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
  letter-spacing:.6px;
}
.banner .meta small{
  display:block;
  font-weight:800;
  color: #ffdf7a;
  opacity:.95;
  letter-spacing:.2px;
  text-transform:none;
}
.banner .trophy{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  border-radius:26px;
  background: linear-gradient(#f3d07a, #b38336);
  border:4px solid rgba(0,0,0,.25);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  font-weight:1000;
  color:#2d1e12;
}
.banner .trophy span{
  font-size:44px;
  line-height:1;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.25));
}

.trophy.has-img{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* League-Leiste */
.league{
  margin-top:10px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid rgba(0,0,0,.35);
}
.league-title{
  padding:12px 14px;
  background: linear-gradient(#a35340, #7c2f22);
  font-weight:1000;
  text-align:center;
  letter-spacing:.6px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  border-bottom:2px solid rgba(0,0,0,.25);
}

/* Tabellenkopf */
.table-head{
  display:grid;
  grid-template-columns: 120px 1fr 140px 150px; /* Position | Clan | Stars | Destruction */
  gap:0;
  padding:10px 14px;
  background: linear-gradient(#7a3025, #67261c);
  color: #f3d9a9;
  font-weight:900;
  font-size:13px;
  border-bottom:2px solid rgba(0,0,0,.25);
}
.table-head div{opacity:.9}

/* Tabelle */
.table{
  background: linear-gradient(#3b2a27, #2f211f);
  padding:10px 10px 12px;
}

/* Row (INGAME) */
.row{
  display:grid;
  grid-template-columns: 120px 1fr 142px 155px; /* Position | Clan | Stars | Destruction */
  align-items:center;
  border-radius:10px;
  
  overflow:hidden;
  border:2px solid rgba(0,0,0,.35);
  background: linear-gradient(#6a3f38, #55342f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.row:nth-child(even){
  background: linear-gradient(#643b35, #4f312c);
}
.row.highlight{
  background: linear-gradient(#4b6e9a, #34516f);
}

/* Zellen */
.cell{
  padding:12px 12px;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:10px;
  border-right:1px solid rgba(0,0,0,.25);
}
.cell:last-child{border-right:none}
.end{ justify-content:flex-end; }
.right{ 
    text-align:right;
    margin-right: 130px; 
}

/* Position + Pfeil */
.pos{
  justify-content:flex-start;
  font-weight:1000;
  letter-spacing:.3px;
  font-size: 17px;
  margin-left: 25px;
}
.arrow{
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  margin-right:2px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
.arrow.up{ border-bottom:14px solid var(--ok); }
.arrow.down{ border-top:14px solid var(--danger); }
.spacer{ width:20px; height:1px; }

/* Clan-Zelle (Badge + Name wie Ingame) */
.clan{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0; /* wichtig für ellipsis */
}
.clan img{
  width:40px;
  height:40px;
  object-fit:contain;
  flex:0 0 auto;
}
.clan-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.clan-name{
  font-weight:1000;
  font-size:17px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clan-tag{
  font-weight:800;
  font-size:13px;
  color:var(--muted);
  opacity:.95;
}

/* Stars & Destruction als “Chips” */
.right{
  margin-left:auto;
  background: linear-gradient(#1b1b1b, #0f0f0f);
  border:2px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px 10px;
  min-width:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:1000;
  color:var(--chipText);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.star{
  width:18px;height:18px;
  background: radial-gradient(circle at 30% 30%, #ffeaa0 0%, #ffcf4a 45%, #c58a1e 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}

/* Status/Empty/Error */
.muted{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}

/* Footer */
.foot{
  margin-top:10px;
  opacity:.75;
  font-size:12px;
  text-align:right;
  padding:0 6px 2px;
}

/* =========================
   MOBILE – Smartphones
   ========================= */
@media (max-width: 480px){
  
  html, body{ height:100%;}

  body{
    padding:12px;
    background: var(--bg) !important;
  }

  .modal{
    padding:6px;
    border-radius:12px;
  }

  .modal-inner{
    padding:8px;
  }

  /* Tabs kompakter */
  .tab{
    padding:8px 12px;
    font-size:9px;
  }

  /* Banner */
  .banner{
    min-height:110px;
  }
  .banner .meta{
    font-size:9px;
  }
  .banner .meta small{
    font-size:9px;
  }
  .banner .trophy{
    width: 58px;
    height:58px;
    border-radius:20px;
    margin-top: 15px;
  }
  .banner .trophy span{
    font-size:9px;
  }

  /* Liga Titel */
  .league-title{
    font-size:9px;
    padding:10px;
  }

  /* Tabellenkopf */
  .table-head{
    grid-template-columns: 56px 1fr 48px 72px;
    font-size:9px;
    padding:8px 10px;
  }

  /* Rows */
  .row{
    grid-template-columns: 56px 1fr 30px 90px;
    border-radius:8px;
  }

  .cell{
    padding:8px;
    min-height:48px;
  }

  /* Position */
  .pos{
    font-size:9px;
    margin-left:8px;
  }

  .arrow{
    border-left:7px solid transparent;
    border-right:7px solid transparent;
  }
  .arrow.up{ border-bottom:10px solid var(--ok); }
  .arrow.down{ border-top:10px solid var(--danger); }

  /* Clan */
  .clan{
    gap:8px;
  }
  .clan img{
    width:32px;
    height:32px;
  }
  .clan-name{
    font-size:9px;
  }
  .clan-tag{
    font-size:9px;
  }

  /* Chips (Stars / Destruction) */
  .right{
    min-width:42px;
    padding:6px 6px;
    font-size:9px;
    margin-right:8px;
  }

  .star{
    width:12px;
    height:12px;
  }

  .foot{
    font-size:9px;
  }
}