/* ================== ROOT VARIABLES ================== */

:root{
  /* Farben */
  --m:#94a3b8;
  --t:#f1f5f9;
  --a:#d4af37;
  --g:#d4af37;
  --blue:#60a5fa;
  --blue-light:#93c5fd;
  --blue-dark:#3b82f6;
  --emerald:#34d399;
  --emerald-light:#6ee7b7;
  
  /* Hintergründe */
  --bg-primary:#0a0e1a;
  --bg-secondary:#12171f;
  --bg-card:#1a1f2e;
  --bg-elevated:rgba(26,31,46,.85);
  
  /* Borders */
  --border-subtle:rgba(212,175,55,.12);
  --border-medium:rgba(212,175,55,.25);
  --border-blue:rgba(96,165,250,.25);
  --border-emerald:rgba(52,211,153,.25);
  
  /* Glows & Effects */
  --gold-glow:rgba(212,175,55,.15);
  --blue-glow:rgba(96,165,250,.15);
  --emerald-glow:rgba(52,211,153,.15);
  
  /* Shadows */
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5);
  
  /* Sizes - Einheitliche Höhen */
  --input-height:44px;
  --button-height:44px;
  --small-height:36px;
  --large-height:52px;
  /* Keyboard-Höhe (Würfe erfassen) */
  --key-h:56px;
  
  /* Border Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:999px;
  
  /* Spacing */
  --gap-xs:6px;
  --gap-sm:10px;
  --gap-md:16px;
  --gap-lg:24px;
}

/* ================== GLOBAL BASE STYLES ================== */

*{
  box-sizing:border-box
}

body{
  margin:0;
  background:radial-gradient(ellipse at top,#12171f 0%,#0a0e1a 50%,#060811 100%);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Inter',sans-serif;
  color:var(--t);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  min-width:1400px;
  overflow-x:auto;
}

body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:300px;
  background:radial-gradient(ellipse at top,rgba(212,175,55,.05) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 80%,rgba(212,175,55,.03) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(212,175,55,.03) 0%,transparent 50%);
  pointer-events:none;
  z-index:0;
}
body, *{
  scrollbar-color:rgba(96,165,250,.3) rgba(10,14,26,.6);
}

/* Unified scrollbar styling - Modern gradient mix */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(10,14,26,.8),rgba(18,23,31,.6));
  border-radius:var(--radius-md);
  border:1px solid rgba(148,163,184,.08);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,rgba(96,165,250,.4) 0%,rgba(212,175,55,.3) 50%,rgba(52,211,153,.4) 100%);
  border-radius:var(--radius-md);
  border:2px solid rgba(10,14,26,.4);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:inset 0 0 8px rgba(96,165,250,.2);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg,rgba(96,165,250,.6) 0%,rgba(212,175,55,.5) 50%,rgba(52,211,153,.6) 100%);
  box-shadow:inset 0 0 12px rgba(96,165,250,.4),0 0 8px rgba(96,165,250,.3);
  transform:scale(1.05);
}

/* ================== LAYOUT STRUCTURE ================== */

main{
  max-width:1680px;
  margin:40px auto;
  padding:0 32px;
  position:relative;
  z-index:1;
}

.w{
  max-width:1800px;
  margin:0 auto;
  padding:0 32px
}

/* ================== TYPOGRAPHY ================== */

h2,h3{
  margin:0 0 12px 0;
  font-weight:800;
  letter-spacing:-.5px;
}

h2{
  font-size:36px;
  background:linear-gradient(135deg,#f1f5f9 0%,#d4af37 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:8px;
  text-shadow:0 2px 12px rgba(212,175,55,.2);
}

h3{
  font-size:20px;
  color:#f1f5f9;
}

/* ================== CORE COMPONENTS ================== */

.c{
  background:linear-gradient(135deg,rgba(26,31,46,.8),rgba(18,23,31,.75));
  backdrop-filter:blur(16px) saturate(120%);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm),0 0 1px rgba(96,165,250,.1) inset;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}

.c:hover{
  border-color:var(--border-blue);
  box-shadow:var(--shadow-md),0 0 24px rgba(96,165,250,.12),0 0 1px rgba(96,165,250,.2) inset;
  transform:translateY(-2px);
}

.h{
  /* Card-Header: feste Höhe, kein Wachsen */
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(135deg,rgba(10,14,26,.4),rgba(18,23,31,.3));
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  min-height:72px;
}

.h h3{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.3px;
}

.h h3::before{
  content:'';
  display:inline-block;
  width:4px;
  height:24px;
  background:linear-gradient(180deg,var(--blue) 0%,var(--a) 50%,var(--emerald) 100%);
  border-radius:var(--radius-sm);
  box-shadow:0 0 12px rgba(96,165,250,.4),0 0 8px rgba(212,175,55,.3);
  transition:all .3s;
}

.h:hover h3::before{
  box-shadow:0 0 16px rgba(96,165,250,.6),0 0 12px rgba(212,175,55,.5);
  transform:scaleY(1.1);
}

/* Spezifische Icons für verschiedene Sektionen */
.settings-card .h h3::before{
  width:5px;
  height:28px;
  background:linear-gradient(135deg,var(--a) 0%,var(--blue) 50%,var(--emerald) 100%);
  box-shadow:0 0 16px rgba(212,175,55,.5),0 0 12px rgba(96,165,250,.4);
}

.player-card .h h3::before{
  width:4px;
  height:22px;
  background:linear-gradient(180deg,var(--blue-light) 0%,var(--blue) 50%,var(--a) 100%);
  box-shadow:0 0 12px rgba(96,165,250,.5);
}

.matches-card .h h3::before{
  width:4px;
  height:24px;
  background:linear-gradient(180deg,var(--emerald-light) 0%,var(--emerald) 50%,var(--a) 100%);
  box-shadow:0 0 12px rgba(52,211,153,.5);
}

.table-card .h h3::before{
  width:4px;
  height:22px;
  background:linear-gradient(180deg,var(--emerald-light) 0%,var(--emerald) 50%,var(--a) 100%);
  box-shadow:0 0 12px rgba(52,211,153,.5);
}

.b{
  /* Card-Body: wächst und nimmt Raum ein */
  flex:1 1 auto;
  padding:16px 20px;
  min-height:0;
  overflow:auto;
}

.r{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center
}

.btn{
  appearance:none;
  border:1px solid rgba(148,163,184,.2);
  background:linear-gradient(135deg,rgba(26,31,46,.7),rgba(18,23,31,.6));
  color:var(--t);
  padding:0 18px;
  height:var(--button-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
  cursor:pointer;
  font-weight:600;
  text-align:center;
  font-size:14px;
  letter-spacing:.3px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  gap:8px;
  white-space:nowrap;
}

.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(212,175,55,.1),rgba(52,211,153,.1));
  opacity:0;
  transition:opacity .25s;
}

.btn:hover{
  border-color:var(--blue);
  background:linear-gradient(135deg,rgba(96,165,250,.25),rgba(26,31,46,.85));
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(96,165,250,.25),0 0 20px rgba(96,165,250,.1);
}

.btn:hover::before{
  opacity:1;
}

.btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.btn.g{
  background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(96,165,250,.15),rgba(212,175,55,.1));
  border-color:rgba(212,175,55,.45);
  text-align:center;
  box-shadow:0 0 0 1px rgba(212,175,55,.15) inset,0 4px 12px rgba(212,175,55,.2),0 0 16px rgba(96,165,250,.1);
  font-weight:700;
}

.btn.g:hover{
  background:linear-gradient(135deg,rgba(212,175,55,.35),rgba(96,165,250,.25),rgba(52,211,153,.15));
  border-color:var(--a);
  box-shadow:0 0 24px var(--gold-glow),0 0 20px var(--blue-glow),0 0 0 1px rgba(212,175,55,.3) inset;
  transform:translateY(-3px);
}

.btn.r{
  background:linear-gradient(135deg,rgba(248,113,113,.15),rgba(239,68,68,.1));
  border-color:rgba(248,113,113,.4);
}

.btn.r:hover{
  background:linear-gradient(135deg,rgba(248,113,113,.25),rgba(239,68,68,.15));
  border-color:rgba(248,113,113,.6);
  box-shadow:0 6px 16px rgba(248,113,113,.3),0 0 20px rgba(248,113,113,.15);
}

.brd{
  /* Scrollbarer Body-Bereich: unabhängiges Scrolling */
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  min-height:0;
}

.ban{
  display:none;
  margin:0 0 14px;
  padding:14px 18px;
  border:1.5px solid rgba(248,113,113,.5);
  background:linear-gradient(135deg,rgba(248,113,113,.15),rgba(239,68,68,.12));
  border-radius:var(--radius-md);
  font-weight:700;
  animation:shake .5s;
  box-shadow:0 4px 16px rgba(248,113,113,.2),inset 0 0 12px rgba(248,113,113,.08);
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

.ban.run{
  display:block
}

.btn.ic{
  color:#fff;
  
}


.btn.ic svg{
  width:20px;
  height:20px;
  display:block;
  
}

.btn.dartBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  min-width:180px;
  height:var(--button-height);
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(212,175,55,.15));
  border-color:var(--border-blue);
}

.btn.dartBtn:hover{
  background:linear-gradient(135deg,rgba(96,165,250,.35),rgba(212,175,55,.25));
  box-shadow:0 6px 20px rgba(96,165,250,.3),0 0 24px var(--gold-glow);
}

.btn.dartBtn svg{
  flex-shrink:0;
  filter:drop-shadow(0 0 4px rgba(96,165,250,.5));
}

.dartBtnText{
  font-weight:700;
  letter-spacing:.3px;
}

/* ================== FORM ELEMENTS ================== */

input,select{
  background:linear-gradient(135deg,rgba(26,31,46,.85),rgba(18,23,31,.8));
  color:var(--t);
  border:1px solid rgba(148,163,184,.2);
  padding:0 16px;
  height:var(--input-height);
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:500;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  outline:none;
  line-height:var(--input-height);
  color-scheme:dark;
}

input:focus,select:focus{
  border-color:var(--blue);
  background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(26,31,46,.95));
  box-shadow:0 0 0 3px var(--blue-glow),0 0 16px rgba(96,165,250,.2),0 0 0 1px rgba(212,175,55,.1) inset;
  transform:translateY(-1px);
}

input:hover,select:hover{
  border-color:rgba(96,165,250,.4);
  background:linear-gradient(135deg,rgba(96,165,250,.08),rgba(26,31,46,.9));
}

/* Dropdown-Optionen Styling */
select option{
  background:rgba(18,23,31,.98);
  color:var(--t);
  padding:8px 12px;
}

select option:checked,
select option:hover{
  background:rgba(26,31,46,.95);
  color:var(--t);
  font-weight:600;
}

/* Firefox-spezifische Option-Highlights */
@-moz-document url-prefix(){
  select option:checked{
    background:rgba(96,165,250,.2) !important;
    color:var(--t) !important;
  }
}

/* ================== CUSTOM DROPDOWN ================== */
.customSelect{
  position:relative;
  display:inline-block;
}

.customSelect select,
#ms .i .r .customSelect select{
  display:none !important;
}

.customSelect .customSelectTrigger{
  background:linear-gradient(135deg,rgba(26,31,46,.85),rgba(18,23,31,.8));
  color:var(--t);
  border:1px solid rgba(148,163,184,.2);
  padding:0 16px;
  height:var(--input-height);
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  user-select:none;
}

.customSelect .customSelectTrigger::after{
  content:'▼';
  font-size:10px;
  margin-left:8px;
  opacity:.6;
  transition:transform .2s;
}

.customSelect.open .customSelectTrigger::after{
  transform:rotate(180deg);
}

.customSelect .customSelectTrigger:hover{
  border-color:rgba(96,165,250,.4);
  background:linear-gradient(135deg,rgba(96,165,250,.08),rgba(26,31,46,.9));
}

.customSelect.open .customSelectTrigger,
.customSelect .customSelectTrigger:focus{
  border-color:var(--blue);
  background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(26,31,46,.95));
  box-shadow:0 0 0 3px var(--blue-glow),0 0 16px rgba(96,165,250,.2);
  outline:none;
}

.customSelectOptions{
  position:fixed;
  background:linear-gradient(135deg,rgba(26,31,46,.98),rgba(18,23,31,.95));
  border:1px solid var(--border-blue);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md),0 0 24px rgba(96,165,250,.2);
  max-height:280px;
  overflow-y:auto;
  z-index:999999;
  display:none;
  backdrop-filter:blur(16px);
  min-width:150px;
}

.customSelectOptions[style*="display: block"]{
  animation:dropdownFadeIn .2s ease;
}

@keyframes dropdownFadeIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

.customSelectOption{
  padding:10px 16px;
  cursor:pointer;
  transition:all .15s ease;
  color:var(--t);
  font-size:14px;
  position:relative;
}

.customSelectOption:hover{
  background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(96,165,250,.08));
  padding-left:20px;
}

.customSelectOption.selected{
  background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(26,31,46,.8));
  font-weight:600;
  border-left:3px solid var(--a);
  padding-left:17px;
}

.customSelectOption.selected::before{
  content:'✓';
  position:absolute;
  right:16px;
  color:var(--a);
  font-weight:700;
}

/* Spezifische Styles für Spieler-Dropdowns (a, b) */
#ms .i .r .customSelect:has(select.a),
#ms .i .r .customSelect:has(select.b){
  width:230px;
  min-width:230px;
  max-width:230px;
  flex:0 0 230px;
}

#ms .i .r .customSelect:has(select.a) .customSelectTrigger,
#ms .i .r .customSelect:has(select.b) .customSelectTrigger{
  width:100%;
  justify-content:center;
  font-weight:600;
  padding:0 16px;
}

/* Spezifische Styles für Score-Dropdowns (sa, sb) */
#ms .i .r .customSelect:has(select.sa),
#ms .i .r .customSelect:has(select.sb){
  width:60px;
  min-width:60px;
  max-width:60px;
  flex:0 0 60px;
}

#ms .i .r .customSelect:has(select.sa) .customSelectTrigger,
#ms .i .r .customSelect:has(select.sb) .customSelectTrigger{
  width:100%;
  justify-content:center;
  padding:0;
  font-weight:700;
  font-size:12px;
}

/* Disabled State für Custom Dropdowns */
.customSelect:has(select:disabled) .customSelectTrigger{
  opacity:0.5;
  cursor:not-allowed;
  background:linear-gradient(135deg,rgba(26,31,46,.5),rgba(18,23,31,.5));
}

.customSelect:has(select:disabled) .customSelectTrigger:hover{
  border-color:rgba(148,163,184,.2);
  background:linear-gradient(135deg,rgba(26,31,46,.5),rgba(18,23,31,.5));
}

.customSelect:has(select:disabled) .customSelectTrigger::after{
  opacity:0.3;
}

/* ================== TABLE STYLES ================== */

table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin-top:12px;
  font-size:14px
}

th,td{
  padding:12px 10px;
  border-bottom:1px solid var(--border-subtle);
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .15s;
}

tr:hover td{
  background:rgba(212,175,55,.05);
}

th{
  color:#cbd5e1;
  position:sticky;
  top:0;
  background:rgba(10,14,26,.95);
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:12px;
}

/* ================== ITEM / LIST COMPONENTS ================== */

.l{
  display:flex;
  flex-direction:column;
  gap:5px
}

.i{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(26,31,46,.5),rgba(18,23,31,.4));
  transition:all .3s cubic-bezier(.4,0,.2,1);
  height:60px;
  flex-shrink:0;
  gap:6px;
}

.i:hover{
  border-color:rgba(212,175,55,.6);
  background:linear-gradient(135deg,rgba(96,165,250,.12),rgba(26,31,46,.7));
  box-shadow:0 4px 16px rgba(96,165,250,.15),0 0 20px rgba(96,165,250,.08);
}

.i .n{
  width:200px;
}

.ic{
  width:var(--button-height);
  height:var(--button-height);
  display:grid;
  place-items:center;
  border-radius:50%;
  padding:0;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
}

.ic::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(212,175,55,.15));
  opacity:0;
  transition:opacity .3s;
}

.ic:hover{
  background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(212,175,55,.15));
  transform:scale(1.15) rotate(5deg);
  box-shadow:0 0 16px var(--blue-glow),0 0 12px var(--gold-glow);
}

.ic:hover::before{
  opacity:1;
}

/* ================== MISC ================== */

.t{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  background:linear-gradient(135deg,rgba(18,23,31,.98),rgba(10,14,26,.98));
  backdrop-filter:blur(20px) saturate(150%);
  border:1.5px solid var(--border-blue);
  padding:14px 20px;
  border-radius:var(--radius-xl);
  display:none;
  gap:14px;
  z-index:9;
  box-shadow:var(--shadow-lg),0 0 32px rgba(96,165,250,.2),0 0 1px rgba(96,165,250,.3) inset;
  animation:slideUp .3s cubic-bezier(.4,0,.2,1);
  min-height:60px;
  align-items:center;
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translate(-50%,20px);
  }
  to{
    opacity:1;
    transform:translate(-50%,0);
  }
}

.t.on{
  display:flex
}

.top{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(180deg,rgba(10,14,26,.98),rgba(18,23,31,.95));
  backdrop-filter:blur(24px) saturate(180%);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:16px 28px;
  border-bottom:2px solid var(--border-blue);
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 20px rgba(96,165,250,.15);
  min-height:72px;
}

.fr{
  position:fixed;
  right:32px;
  bottom:32px;
  z-index:4;
  animation:fadeIn .4s ease;
}

.fr .btn{
  box-shadow:var(--shadow-lg),0 0 24px rgba(248,113,113,.3);
  height:52px;
  padding:0 24px;
  font-size:15px;
}

.fr .btn:hover{
  box-shadow:var(--shadow-lg),0 0 32px rgba(248,113,113,.5),0 0 20px rgba(96,165,250,.2);
}

#ml{
  font-size:32px;
  font-weight:800;
  text-align:center;
  margin:0 0 16px;
  background:linear-gradient(135deg,#f1f5f9,#d4af37);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-.5px;
}

.footer-btn{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:30px
}

.footer-btn .btn{
  font-size:11px;
  padding:6px 12px;
  height:auto
}




#ms{
  display:flex;
  flex-direction:column;
  gap:5px;
}

#ms .i{
  /* Match-Item: feste Höhe 60px, keine Überlappung */
  flex:0 0 auto;
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  padding:6px 20px 6px 10px;
  align-items:center;
  height:60px;
}

#ms .i .r{
  min-width:0;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
  height:auto;
}

#ms .i .r:first-child,
#ms .i .match-players{
  flex:1 1 auto;
  min-width:450px;
}

#ms .i .r .mut{
  font-weight:700;
  font-size:12px;
  color:rgba(212,175,55,.8);
  text-shadow:0 0 8px rgba(212,175,55,.3);
  display:flex;
  align-items:center;
}

#ms .i > .r:last-child{
  /* Button-Spalte: feste Breite, kein Schrumpfen */
  flex:0 0 auto;
  gap:var(--gap-sm);
}

#ms .i > .r:last-child .btn{
  height:auto;
  padding:8px 12px;
}

.i .r .btn{
  height:auto;
  padding:8px 12px;
}

  

/* ================== MODALS ================== */

.m{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10;
  animation:fadeIn .2s ease;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes modalSlideUp{
  from{
    opacity:0;
    transform:translateY(20px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.m.on{
  display:flex
}

.m .bk{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.75),rgba(10,14,26,.7),rgba(0,0,0,.75));
  backdrop-filter:blur(12px) saturate(130%);
  transition:opacity .3s;
}

.m .dg{
  /* Modal-Dialog: Flex-Container mit Scrolling */
  position:relative;
  background:linear-gradient(135deg,rgba(26,31,46,.98),rgba(18,23,31,.95),rgba(10,14,26,.97));
  border:1.5px solid var(--border-blue);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg),0 0 48px rgba(96,165,250,.25),0 0 32px rgba(212,175,55,.15),0 0 2px rgba(96,165,250,.3) inset;
  padding:24px;
  min-width:300px;
  max-width:1100px;
  width:95vw;
  display:flex;
  flex-direction:column;
  max-height:90vh;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  animation:modalSlideUp .3s cubic-bezier(.4,0,.2,1);
}

#pm .dg{
  max-width:420px;
  width:90vw;
  scrollbar-gutter:auto;
  padding:32px;
}

#dM .dg{
  /* Match-Dialog: Flex-Container Scoreboard (fest) + Keyboard (flex) */
  display:flex;
  flex-direction:column;
  height:90vh;
  max-height:90vh;
  min-height:0;
  overflow:hidden;
  padding:24px 16px;
  scrollbar-gutter:auto;
}

.mut{
  color:var(--m);
  font-size:14px;
  line-height:1.6;
}

/* ================== MATCH DIALOG ================== */

#dM .sb{
  /* Scoreboard-Wrapper: feste Höhe, kein Wachsen */
  flex:0 0 auto;
  border:1px solid var(--border-medium);
  border-radius:16px;
  padding:14px;
  background:rgba(10,14,26,.7);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3);
}

/* Match-Titel im Dialog: Flex-Layout mit zentriertem 'vs' */
#dM #ml{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:0 0 12px 0;
  gap:0;
}

#dM #ml .mlName{
  flex:1 1 0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#dM #ml .mlName:first-child{
  text-align:right;
  padding-right:12px;
}

#dM #ml .mlName:last-child{
  text-align:left;
  padding-left:12px;
}

#dM #ml .mlVs{
  flex:0 0 auto;
  padding:0 8px;
}

#dM .sc{
  /* Scoreboard-Grid: 2 gleichmäßige Spalten */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:stretch;
}

#dM .sp{
  border:1.5px solid var(--border-blue);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:linear-gradient(135deg,rgba(18,23,31,.85),rgba(10,14,26,.8));
  transition:border-color .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow-sm),0 0 1px rgba(96,165,250,.15) inset;
  height:250px;
  min-height:250px;
  /* Flex-Container für klare Bereiche */
  display:flex;
  flex-direction:column;
}

#dM .sp.on{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-glow) inset,0 0 32px rgba(96,165,250,.35),0 0 20px var(--gold-glow);
  transform:none; /* keine Größenänderung beim Aktivieren */
  background:linear-gradient(135deg,rgba(18,23,31,.85),rgba(10,14,26,.8));
}

#dM .st{
  /* Header: Sets/Legs - feste Höhe */
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 9px;
  border-bottom:1px solid var(--border-subtle);
  background:rgba(10,14,26,.3);
}

#dM .mn{
  font-size:13px;
  color:#cbd5e1;
  text-align:center;
  letter-spacing:.3px;
}

#dM .mn .v{
  font-size:23px;
  font-weight:800;
  color:#f1f5f9;
  background:linear-gradient(135deg,#f1f5f9,#d4af37);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

#dM .ct{
  /* Center: Restwert - wächst und füllt Raum */
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px 7px;
  min-height:0;
}

#dM .nm{
  font-size:25px;
  font-weight:800;
  text-align:center;
  flex:1;
  letter-spacing:-.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}

#dM .rm{
  font-size:72px;
  font-weight:900;
  text-align:center;
  background:linear-gradient(135deg,#f1f5f9,#d4af37);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-2px;
  text-shadow:0 4px 12px rgba(212,175,55,.3);
}

#dM .rmWrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
#dM .skipTxt{position:absolute;top:100%;left:50%;transform:translate(-50%,0px);font-size:13px;color:#94a3b8;cursor:pointer;line-height:1;padding:4px 10px;white-space:nowrap;transition:all .2s;border-radius:8px}
#dM .skipTxt:hover{color:var(--a);background:rgba(212,175,55,.08);transform:translate(-50%,-2px)}

#dM .bt{
  /* Bottom: Chips - feste Höhe, kein Wachsen */
  flex:0 0 auto;
  border-top:1px solid var(--border-subtle);
  padding:15px 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  background:rgba(10,14,26,.3);
  min-height:70px;
}

#dM .dc{
  padding:0 18px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(148,163,184,.3);
  border-radius:var(--radius-full);
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(26,31,46,.7),rgba(212,175,55,.1));
  position:relative;
  overflow:hidden;
  min-width:60px;
}

#dM .dc::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(96,165,250,.25),rgba(212,175,55,.2),rgba(52,211,153,.15));
  opacity:0;
  transition:opacity .3s;
}

#dM .dc:hover{
  background:linear-gradient(135deg,rgba(96,165,250,.3),rgba(212,175,55,.2),rgba(52,211,153,.15));
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-glow) inset,0 6px 20px rgba(96,165,250,.3),0 0 24px var(--gold-glow);
  transform:translateY(-3px) scale(1.05);
}

#dM .dc:hover::before{
  opacity:1;
}

#dM .dc:active{
  transform:translateY(-1px) scale(1.02);
}

#dM h3#dt{
  display:none
}

#dM .padRow{
  /* Hauptbereich: 3 Spalten (Links | Keyboard | Rechts) */
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(340px,560px) minmax(150px,1fr);
  gap:12px;
  align-items:stretch;
  margin-top:12px; /* Abstand zum Scorebereich wiederhergestellt */
  min-height:0;
  max-height:100%;
  overflow:hidden;
}

#dM .padCenter{
  /* Keyboard-Container: 3 Zeilen (S/D/T | Zahlen | 25/50/0) */
  border:1.5px solid var(--border-blue);
  border-radius:var(--radius-xl);
  padding:12px;
  background:linear-gradient(135deg,rgba(18,23,31,.85),rgba(10,14,26,.8));
  backdrop-filter:blur(16px) saturate(120%);
  display:grid;
  grid-template-rows:var(--key-h) calc(var(--key-h) * 4 + 10px * 3) var(--key-h); /* exakt: Header, 4 Zahlenzeilen + 3 Gaps, Footer */
  row-gap:10px;
  min-height:0;
  align-content:center; /* verteilt evtl. Resthöhe oben/unten gleich */
  box-shadow:var(--shadow-md),0 0 24px rgba(96,165,250,.12),0 0 1px rgba(96,165,250,.2) inset;
}

#dM .padCenter > *{margin:0!important}
/* Entferne Einfluss des .r-Wrappers um #sg, damit #sg die Zeile voll ausfüllt */
#dM .padCenter > .r{display:contents}

#dM .padSide{
  /* Seitenspalten: Container für Wurflisten */
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  align-items:stretch;
}

#dM .sumCard{
  /* Wurflisten-Karte: feste Struktur */
  flex:1 1 auto;
  border:1.5px solid var(--border-emerald);
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(52,211,153,.08),rgba(18,23,31,.8),rgba(10,14,26,.75));
  backdrop-filter:blur(16px) saturate(120%);
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  box-shadow:var(--shadow-md),0 0 20px rgba(52,211,153,.1),0 0 1px rgba(52,211,153,.15) inset;
}

#dM .sumWrap{
  /* Wurflisten-Inhalt: Title (fest) + Liste (scrollbar) */
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  min-height:0;
  overflow:hidden;
}

#dM .sumList{
  /* Wurfliste: scrollbar, nimmt verfügbaren Raum */
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  min-height:0;
  scrollbar-color:rgba(52,211,153,.4) rgba(10,14,26,.6);
}

#dM .sumList::-webkit-scrollbar{
  width:10px;
}

#dM .sumList::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(10,14,26,.8),rgba(18,23,31,.6));
  border-radius:var(--radius-md);
  border:1px solid rgba(52,211,153,.1);
}

#dM .sumList::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,rgba(52,211,153,.5) 0%,rgba(212,175,55,.3) 50%,rgba(52,211,153,.4) 100%);
  border-radius:var(--radius-md);
  border:2px solid rgba(10,14,26,.4);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:inset 0 0 8px rgba(52,211,153,.3);
}

#dM .sumList::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg,rgba(52,211,153,.7) 0%,rgba(212,175,55,.5) 50%,rgba(52,211,153,.6) 100%);
  box-shadow:inset 0 0 12px rgba(52,211,153,.5),0 0 8px rgba(52,211,153,.4);
}

#dM .sumItem{
  display:flex;
  align-items:center;
  gap:14px
}

#dM .sumDot{
  width:38px; /* ~20% kleiner */
  height:38px; /* ~20% kleiner */
  border-radius:50%;
  border:2px solid var(--border-blue);
  display:grid;
  place-items:center;
  font-size:14px; /* ~20% kleiner */
  font-weight:900;
  background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(212,175,55,.15),rgba(52,211,153,.1));
  box-shadow:inset 0 2px 8px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3),0 0 8px rgba(96,165,250,.2);
  transition:none; /* keine Animationen für Wurfanzeigen */
}

#dM .sumDot:hover{
  border-color:var(--blue);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.4),0 0 8px rgba(96,165,250,.2);
  transform:none; /* Hover ohne Bewegung */
}

#dM .sumPts{
  font-size:19px; /* ~20% kleiner */
  font-weight:800;
  letter-spacing:-.5px;
  color:#f1f5f9;
}

#dM .sumTitle{
  /* Wurflisten-Titel: feste Höhe */
  flex:0 0 auto;
  text-align:center;
  font-weight:800;
  font-size:18px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:rgba(212,175,55,.9);
  text-shadow:0 2px 8px rgba(212,175,55,.3);
}



#dM #sg,#dM #dq,#dM #ex{
  /* Keyboard-Grids: einheitlicher Gap, Buttons füllen Bereich aus */
  display:grid;
  gap:10px;
  margin:0;
  align-content:stretch;
  grid-auto-rows:var(--key-h); /* einheitliche Tastenhöhe */
}


#dM #sg{
  /* S/D/T: 3 gleichmäßige Spalten, volle Breite wie #ex */
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
}


#dM #dq{
  /* Zahlen 1-20: 5 Spalten, Zeilen füllen Raum flexibel aus */
  flex:1 1 auto;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:var(--key-h); /* einheitliche Zeilenhöhe */
  align-content:start; /* keine zusätzliche Verteilung – genau so hoch wie Inhalt */
  min-height:0;
}


#dM #ex{
  /* 25/50/0: 3 gleichmäßige Spalten */
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Einheitliche Button-Füllung innerhalb der Grids */
#dM #sg .btn,
#dM #dq .btn,
#dM #ex .btn{
  width:100%;
  height:100%;
  padding:0;
  font-weight:800;
  font-size:20px;
  border-radius:12px;
}

/* ================== EDIT-DOCK: WURF BEARBEITEN ================== */

/* Container: Hauptbereich des Edit-Docks */
#dM .edDock {
  position: absolute;
  bottom: 0;
  left: -16px;
  right: -16px;
  top: 375px;
  background: linear-gradient(180deg, rgba(52,211,153,.015), rgba(10,14,26,.98), rgba(18,23,31,.98));
  backdrop-filter: blur(24px) saturate(140%);
  border-top: 2px solid var(--border-emerald);
  box-shadow: 0 -12px 40px rgba(0,0,0,.5), 0 0 40px rgba(52,211,153,.08), 0 -2px 0 rgba(52,211,153,.12);
  
  display: none;
  flex-direction: column;
  padding: 12px 32px 16px 32px;
  gap: 8px;
  
  z-index: 100;
  overflow: hidden;
  animation: slideUpDock .3s cubic-bezier(.4,0,.2,1);
}

@keyframes slideUpDock {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

#dM .edDock.on {
  display: flex;
}

#dM[aria-hidden='true'] .edDock {
  display: none !important;
}

/* Header: Titel-Bereich */
#dM .edHead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-emerald);
}

#dM .edTitle {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  background: linear-gradient(135deg, #ffffff 0%, var(--a) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(212,175,55,.25));
}

/* Content-Wrapper: Grid-Layout für Tastatur */
#dM .edWrap {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 48px auto 48px;
  gap: 10px;
  min-height: 0;
  padding: 10px 8px;
}

/* Tastatur-Grids: Obere Reihe (Single), Mittlere Reihe (Double/Quadruple), Untere Reihe (Extra) */
#dM #ed-sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
}

#dM #ed-dq {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 48px;
  gap: 10px;
  align-content: space-evenly;
}

#dM #ed-ex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
}

/* Buttons: Tastatur-Tasten */
#dM #ed-sg .btn,
#dM #ed-dq .btn,
#dM #ed-ex .btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
  border-radius: 12px;
  padding: 0;
  text-align: center;
}

#dM #ed-sg .btn:hover,
#dM #ed-dq .btn:hover,
#dM #ed-ex .btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 20px var(--gold-glow);
}

/* Footer: Aktionsbuttons (Abbrechen/Übernehmen) */
#dM .edFooter {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 0 0 0;
  border-top: 1.5px solid var(--border-emerald);
}

#dM .edFooter .btn {
  width: 120px;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ================== NEW HOMEPAGE LAYOUT ================== */

.hero{
  margin-bottom:36px;
  padding:56px 0;
  text-align:center;
  position:relative;
  background:linear-gradient(135deg,rgba(96,165,250,.03),transparent,rgba(212,175,55,.03));
  border-radius:var(--radius-xl);
}

.hero::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:200px;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--blue) 20%,var(--a) 50%,var(--emerald) 80%,transparent);
  box-shadow:0 0 16px rgba(96,165,250,.5),0 0 12px rgba(212,175,55,.4);
  border-radius:var(--radius-full);
}

.hero-content{
  max-width:900px;
  margin:0 auto;
  padding:0 24px;
}

.hero-title{
  font-size:64px;
  margin:0 0 16px 0;
  font-weight:900;
  letter-spacing:-2px;
  background:linear-gradient(135deg,var(--blue-light) 0%,var(--a) 50%,var(--emerald-light) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 40px rgba(96,165,250,.3);
  filter:drop-shadow(0 4px 12px rgba(212,175,55,.2));
}

.hero-subtitle{
  font-size:20px;
  color:var(--m);
  margin:0 0 20px 0;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.hero-welcome{
  font-size:15px;
  margin:0;
  color:rgba(96,165,250,.7);
  font-weight:500;
}

/* Settings Card */
.settings-card{
  margin-bottom:28px;
}

.settings-card .h{
  flex-wrap:wrap;
  gap:16px;
}

.settings-card .h h3{
  flex:1 1 auto;
  min-width:200px;
}

.settings-summary{
  font-size:13px;
  color:var(--t);
  padding:10px 20px;
  background:linear-gradient(135deg,rgba(96,165,250,.12),rgba(212,175,55,.1));
  border:1px solid var(--border-blue);
  border-radius:var(--radius-md);
  font-weight:700;
  white-space:nowrap;
  flex:0 1 auto;
  box-shadow:0 2px 8px rgba(96,165,250,.15),inset 0 0 8px rgba(96,165,250,.08);
}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  align-items:end;
}

.setting-item{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.setting-item.setting-checkbox{
  align-self:end;
  padding-bottom:4px;
}

.setting-item.setting-checkbox label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.setting-item.setting-checkbox input[type="checkbox"]{
  width:22px;
  height:22px;
  cursor:pointer;
  margin:0;
  accent-color:var(--blue);
  transition:all .2s;
}

.setting-item.setting-checkbox input[type="checkbox"]:hover{
  transform:scale(1.1);
}

.setting-label{
  font-size:13px;
  font-weight:600;
  color:var(--m);
  letter-spacing:.3px;
  text-transform:uppercase;
}

.setting-input{
  width:100%;
}

/* Main 2-Column Grid - Tabelle wird separat angezeigt */
.main-grid{
  display:grid;
  grid-template-columns:minmax(380px,0.8fr) minmax(600px,1.4fr);
  gap:28px;
  align-items:stretch;
}

/* Table Section - Full Width */
.table-card{
  grid-column:1 / -1;
  margin-top:8px;
}

/* Player Card */
.player-card .h{
  flex-wrap:wrap;
  gap:10px;
}

.player-card .h h3{
  flex:1 1 auto;
  min-width:0;
}

.player-card .player-actions{
  display:flex;
  gap:6px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-blue);
}

.player-card .player-actions .btn{
  flex:1;
  text-align:center;
  font-size:12px;
  white-space:nowrap;
  height:var(--small-height);
}

.player-card .l{
  margin-top:10px;
  max-height:calc(11 * (60px + 5px) + 10px);
  overflow-y:auto;
  overflow-x:hidden;
}

.player-card .l:not(:has(.i:nth-child(12))){
  overflow-y:hidden;
}

/* Matches Card */
.matches-card .matches-info{
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-emerald);
  min-height:36px;
}

.matches-card .matches-info span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:6px 12px;
  background:linear-gradient(135deg,rgba(52,211,153,.1),rgba(212,175,55,.08));
  border:1px solid var(--border-emerald);
  border-radius:10px;
  text-align:center;
  font-weight:700;
  font-size:12px;
  box-shadow:0 2px 8px rgba(52,211,153,.12),inset 0 0 8px rgba(52,211,153,.06);
  height:36px;
  display:flex;
  align-items:center;
}

.matches-list{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  margin-top:10px;
}

.matches-list #ms{
  max-height:calc(11 * (60px + 5px) + 10px);
  overflow-y:auto;
  overflow-x:hidden;
}

.matches-list #ms:not(:has(.i:nth-child(12))){
  overflow-y:hidden;
}

.matches-card .h{
  flex-wrap:wrap;
  gap:8px;
}

.matches-card .h h3{
  flex:1 1 auto;
  min-width:0;
}

.matches-card .h .r{
  flex-wrap:wrap;
  gap:6px;
}

.matches-card .h .r .btn{
  white-space:nowrap;
  font-size:12px;
  padding:8px 14px;
}

/* Table Card */
.table-card .table-wrapper{
  overflow-x:auto;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(10,14,26,.5),rgba(18,23,31,.4));
  border:1px solid var(--border-emerald);
  box-shadow:inset 0 0 12px rgba(52,211,153,.08);
}

.table-card table{
  margin-top:0;
  font-size:13px;
}

.table-card th{
  font-size:11px;
  padding:12px 10px;
  background:linear-gradient(135deg,rgba(52,211,153,.12),rgba(10,14,26,.7));
  border-bottom:2px solid var(--border-emerald);
  font-weight:800;
  letter-spacing:.5px;
}

.table-card td{
  padding:12px 10px;
  font-weight:500;
}

.table-card tbody tr{
  transition:all .25s cubic-bezier(.4,0,.2,1);
}

.table-card tbody tr:hover{
  background:linear-gradient(90deg,rgba(52,211,153,.08),rgba(96,165,250,.06),rgba(52,211,153,.08));
  box-shadow:0 0 12px rgba(52,211,153,.15);
}

.table-card tbody tr:last-child td{
  border-bottom:none;
}

.table-card td strong{
  color:var(--emerald);
  font-size:15px;
  font-weight:800;
  text-shadow:0 0 8px rgba(52,211,153,.3);
}

/* Card Heights */
.player-card,
.matches-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:450px;
}

.table-card{
  display:flex;
  flex-direction:column;
  height:fit-content;
  min-height:300px;
}

.player-card .b,
.matches-card .b,
.table-card .b{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Empty States */
#pl:empty::after,
#ms:empty::after{
  content:'Noch keine Einträge';
  display:block;
  padding:40px 20px;
  text-align:center;
  color:var(--m);
  font-style:italic;
}

#pl:empty::after{
  content:'Noch keine Spieler hinzugefügt';
}

#ms:empty::after{
  content:'Noch keine Spiele erstellt';
}