:root{
  --bg: #0A1613; --bg-elev: #10201B; --bg-elev-2: #173029; --line: #274C41;
  --text: #EAF7F1; --text-dim: #86AFA0; --accent: #00B389; --accent-text: #052A20;
  --radius: 14px;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:inherit;}

.site-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);}
.site-header .brand{font-weight:800; font-size:18px; text-decoration:none;}
.site-header nav{display:flex; gap:16px; flex-wrap:wrap;}
.site-header nav a{text-decoration:none; color:var(--text-dim); font-size:14px; font-weight:600;}
.site-header nav a:hover{color:var(--text);}

main{max-width:960px; margin:0 auto; padding:20px; padding-bottom:60px;}

h1{margin:0 0 6px;}
h2{font-size:18px; margin:24px 0 10px;}
.sub{color:var(--text-dim); font-size:14px; margin:0 0 20px;}

.empty-hint{color:var(--text-dim); font-size:14px; padding:8px 0;}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; margin-bottom:20px;}
.card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.card.highlight{border-color:var(--accent);}
.card h2{margin-top:0;}
.card .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}

.btn{display:inline-block; background:var(--bg-elev-2); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:9px 16px; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer;}
.btn.primary{background:var(--accent); color:var(--accent-text); border-color:var(--accent);}
.btn.ghost{background:transparent;}
.btn.danger{background:#3A1A0C; border-color:#EA580C; color:#FFD9C2;}
.btn.small{padding:6px 12px; font-size:13px;}
.btn.wide{display:block; width:100%; text-align:center;}
.btn:disabled{opacity:0.5; cursor:default;}

.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
th{color:var(--text-dim); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; font-weight:700;}
td.num, th.num{text-align:right;}

.list{display:flex; flex-direction:column; gap:8px;}
.list-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg-elev);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; text-decoration:none;}
.list-row .name{font-weight:700;}
.list-row .tag{color:var(--text-dim); font-size:13px;}

/* ---------- Spieler-Kacheln (Liste) ---------- */
.player-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:14px; margin-bottom:20px;}
.player-tile{position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-elev); border:1px solid var(--line); text-decoration:none; display:block;}
.player-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 15%;}
.player-tile .placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:38px; font-weight:800; color:var(--text-dim); background:var(--bg-elev-2);}
.player-tile .scrim{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0) 72%);}
.player-tile .tile-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:10px 12px;}
.player-tile .tile-info .name{color:#fff; font-weight:800; font-size:14px; line-height:1.2;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);}
.player-tile .tile-info .tag{color:rgba(255,255,255,0.85); font-size:12px; text-shadow:0 1px 4px rgba(0,0,0,0.8);}

/* ---------- Spielerprofil (Hero-Header) ---------- */
.profile-hero{display:flex; gap:20px; align-items:flex-start; margin-bottom:24px;}
.profile-hero .photo{width:120px; height:120px; border-radius:var(--radius); overflow:hidden; flex:none;
  background:var(--bg-elev-2);}
.profile-hero .photo img{width:100%; height:100%; object-fit:cover; object-position:50% 15%; display:block;}
.profile-hero .photo .placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:44px; font-weight:800; color:var(--text-dim);}
.profile-hero .info{padding-top:4px;}
.profile-hero .info h1{margin:0 0 4px;}
.profile-hero .info .sub{margin:0;}
@media (max-width:480px){
  .profile-hero{flex-direction:column; align-items:center; text-align:center;}
  .profile-hero .photo{width:150px; height:150px;}
}

.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px;}
.stat-tile{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:center;}
.stat-value{font-size:26px; font-weight:800;}
.stat-label{color:var(--text-dim); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px;}

/* Nutzt die Breite, die die Tracking-App selbst auch nutzt (dort intern
   max-width:960px je Screen) - kein künstliches "Handy"-Format mehr, das
   auf großen Screens Platz verschenkt. Höhe viewport-relativ mit
   Ober-/Untergrenze, damit es auf sehr kleinen wie sehr großen Bildschirmen
   nicht extrem wird. */
.phone-frame{width:100%; max-width:960px; margin:0 auto; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; background:var(--bg-elev); height:85vh; min-height:560px; max-height:900px;}
.phone-frame iframe{display:block; width:100%; height:100%; border:none;}

.site-footer{text-align:center; color:var(--text-dim); font-size:12px; padding:20px; border-top:1px solid var(--line);}