:root{
  --panel:#111;
  --panel2:#0b0b10;
  --line:#222;
  --line2:#333;
  --muted:#888;
}

/* Layout + Hero */
.matches-wrap{ max-width: 1100px; margin: 0 auto; padding: 0 20px 50px 20px; }
.matches-hero{
  text-align:center;
  padding: 40px 20px 18px 20px;
  background: radial-gradient(circle at 50% 0%, rgba(48,159,106,0.18) 0%, transparent 62%);
}
.matches-hero h2{ margin:0; color:#fff; font-size:2.2rem; text-shadow:0 0 20px rgba(48,159,106,0.25); }
.matches-hero p{ margin:8px 0 0 0; color:#aaa; }

/* Tabs */
.matches-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 18px 0;
}
.matches-tab{
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #333;
  background:#111;
  color:#bbb;
  font-weight:900;
}
.matches-tab:hover{ border-color:#555; color:#fff; transform:translateY(-1px); transition:.15s; }
.matches-tab.active{
  border-color: var(--dart-green);
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(48,159,106,0.25);
}

/* Shared messages */
.msg{
  border:1px solid var(--line2);
  border-radius:14px;
  padding:12px 14px;
  margin:14px 0 18px 0;
  font-weight:1000;
}
.msg-green{ background:rgba(48,159,106,0.12); border-color:rgba(48,159,106,0.35); color:#fff; }
.msg-red{ background:rgba(227,41,46,0.12); border-color:rgba(227,41,46,0.35); color:#fff; }
.msg-empty{ background:#111; color:#ddd; }

/* HISTORY (alte letzte_spiele) */
.matches-col{ display:flex; flex-direction:column; margin-top:14px; }

.day-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: linear-gradient(145deg, rgba(48,159,106,0.10), rgba(17,17,17,1));
  border:1px solid rgba(48,159,106,0.30);
  border-radius:16px;
  padding:12px 14px;
  margin:18px 0 10px 0;
  box-shadow:0 10px 24px rgba(0,0,0,0.40);
}
.day-chip .left{ display:flex; flex-direction:column; gap:4px; }
.day-chip .st{ color:#fff; font-weight:1000; font-size:1.08rem; }
.day-chip .sub{ color:#777; font-size:.85rem; }
.day-chip .right{ color:var(--dart-green); font-weight:1000; }

.match-card{
  background:#0b0b10;
  border:1px solid #222;
  border-radius:16px;
  padding:50px 14px 14px 14px;
  margin-bottom:10px;
  box-shadow:0 10px 22px rgba(0,0,0,0.38);
  position:relative;
  overflow:hidden;
}
.match-card:hover{ border-color:#333; transform:translateY(-1px); transition:.15s; }

.mc-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.pname{ font-weight:1000; color:#fff; font-size:1.05rem; flex:1; min-width:210px; }
.pname.right{ text-align:right; }

.score{
  background:#111;
  border:1px solid #333;
  border-radius:999px;
  padding:6px 14px;
  font-weight:1000;
  font-size:1.08rem;
  min-width:90px;
  text-align:center;
  color:#fff;
}
.winner{ color:var(--dart-green); text-shadow:0 0 10px rgba(48,159,106,0.25); }
.loser{ color:#ddd; opacity:.75; }

.meta{
  margin-top:10px;
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  color:#aaa; font-size:.9rem;
}
.meta .pill{
  display:inline-flex; gap:8px; align-items:center;
  background:#000; border:1px solid #222; border-radius:999px;
  padding:6px 10px; font-weight:1000;
}

.delta{ font-weight:1000; }
.delta.up{ color:var(--dart-green); }
.delta.down{ color:var(--dart-red); }
.delta.neutral{ color:#aaa; }

.specials{
  margin-top:10px;
  font-size:.86rem;
  color:#f59e0b;
  background:rgba(245,158,11,0.10);
  display:inline-block;
  padding:5px 10px;
  border-radius:10px;
  border:1px solid rgba(245,158,11,0.25);
}
.match-foot{ margin-top:10px; color:#666; font-size:.85rem; }

.admin-actions{
  position:absolute; top:10px; right:10px; z-index:5;
  display:flex; gap:8px;
  background:rgba(0,0,0,0.35);
  border:1px solid #333;
  border-radius:10px;
  padding:4px;
}
.icon-btn{
  width:30px; height:30px;
  border-radius:8px;
  border:1px solid #333;
  background:rgba(0,0,0,0.35);
  color:#ddd; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:.95rem; line-height:1;
}
.icon-btn:hover{ border-color:#555; transform:translateY(-1px); transition:.15s; }
.inline-form{ margin:0; }

.edit-panel{
  position:relative; z-index:20;
  background: linear-gradient(145deg, rgba(227,41,46,0.10), rgba(17,17,17,1));
  border:1px solid rgba(227,41,46,0.35);
  border-radius:18px;
  padding:16px;
  margin:16px 0 22px 0;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.edit-panel h3{ margin:0 0 10px 0; color:#fff; }
.edit-form{ display:flex; flex-direction:column; gap:10px; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

label{
  color:#888;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:900;
  display:block;
  margin-bottom:6px;
}
.lab-red{ color:#E3292E; }
.lab-blue{ color:#0ea5e9; }

.form-input{ width:100%; }

.stat-block{
  background:#000;
  border:1px solid #222;
  padding:12px;
  border-radius:14px;
}
.btn-row{ display:flex; gap:10px; margin-top:10px; }
.btn-main{ flex:2; }
.btn-secondary{ flex:1; text-align:center; text-decoration:none; background:#444 !important; }

/* SPIELTAG (aus spieltage) */
.matchday-select{
  background: linear-gradient(135deg, rgba(48,159,106,0.10), rgba(17,17,17,0.95));
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(48,159,106,0.35);
  text-align:center;
  margin-bottom:22px;
  box-shadow:0 10px 28px rgba(0,0,0,0.5);
}
.matchday-select form{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; }
.matchday-select label{ color:#aaa; font-weight:900; text-transform:uppercase; letter-spacing:2px; }
.matchday-select select{ min-width:220px; font-size:1.05rem; text-align:center; }

.toggles{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.toggle-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid #333; background:#000; color:#ddd;
  text-decoration:none; font-weight:900; letter-spacing:.5px;
}
.toggle-btn:hover{ transform:translateY(-1px); border-color:#555; transition:.15s; }
.toggle-btn.active{ border-color:var(--dart-green); box-shadow:0 0 0 1px rgba(48,159,106,0.25) inset; color:#fff; }

.subline{ color:#777; font-size:.88rem; margin-top:8px; }

.awards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:16px; }
.award-card{
  background: linear-gradient(145deg, #1a1a2e, #111);
  border:1px solid #333;
  border-radius:14px;
  padding:16px;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.55);
}
.award-card.big{
  grid-column:span 2;
  text-align:left;
  padding:18px;
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(145deg, rgba(48,159,106,0.12), rgba(17,17,17,1));
}
.award-card.winner{ border-color:#FFD700; box-shadow:0 0 20px rgba(255,215,0,0.18); }

.award-icon{ font-size:2rem; margin-bottom:10px; }
.award-title{ color:#888; font-size:.72rem; text-transform:uppercase; letter-spacing:2px; font-weight:900; margin-bottom:6px; }
.award-name{ color:#fff; font-size:1.02rem; font-weight:950; margin-bottom:6px; }
.award-val{ color:var(--dart-green); font-weight:1000; font-size:1.18rem; }

.mvp-wrap{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mvp-name{ font-size:1.35rem; font-weight:1000; color:#fff; }

.day-table-container{ background:#111; border-radius:14px; border:1px solid #333; overflow:hidden; margin-bottom:22px; }
.day-table{ width:100%; border-collapse:collapse; text-align:center; }
.day-table th{ background:#1a1a2e; padding:12px 10px; color:var(--dart-green); text-transform:uppercase; font-size:.75rem; letter-spacing:2px; }
.day-table td{ padding:12px 10px; border-bottom:1px solid #222; color:#ccc; }
.day-table tr:last-child td{ border-bottom:none; }
.day-table tr:hover td{ background: rgba(255,255,255,0.02); }
.day-table tr:nth-child(1) td{ background: rgba(255,215,0,0.05); font-weight:bold; }

.block-title{
  color:#fff;
  margin:18px 0 12px 0;
  border-bottom:2px solid #333;
  padding-bottom:6px;
}

/* compact match cards with why modal */
.compact-match{
  background:#000; border:1px solid #222;
  padding:12px 14px; border-radius:14px;
  margin-bottom:10px;
}
.compact-match:hover{ transform:translateY(-1px); border-color:#333; transition:.15s; }

.cm-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.p-name{ width:40%; font-size:1.02rem; font-weight:950; }
.p-left{ text-align:right; }
.p-right{ text-align:left; }
.winner-text{ color:var(--dart-green); }

.cm-elo{
  margin-top:10px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:.85rem; color:#aaa;
}
.elo-chip{
  background:#111; border:1px solid #222; border-radius:999px;
  padding:6px 10px; font-weight:1000; display:inline-flex; align-items:center; gap:8px; min-width:0;
}
.elo-chip .d{ font-weight:1000; }

.why-btn{
  margin-left:auto;
  background:transparent; border:1px solid #333; color:#bbb;
  border-radius:12px; padding:8px 10px; font-weight:900; cursor:pointer;
}
.why-btn:hover{ border-color:#555; color:#fff; transform:translateY(-1px); transition:.15s; }

/* modal */
.modal-overlay{
  display:none; position:fixed; inset:0;
  background: rgba(0,0,0,0.78);
  z-index:12000; padding:12px;
  justify-content:center; align-items:center;
}
.modal{
  width:100%; max-width:860px;
  background:#111; border:1px solid #333; border-radius:18px;
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  max-height: calc(100vh - 24px);
  overflow:auto;
}
.modal h3{ margin:0 0 10px 0; color:#fff; }
.modal .sub{ color:#aaa; margin-bottom:10px; }

.mode-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 14px 0; }
.mode-tab{
  cursor:pointer; padding:8px 12px; border-radius:12px;
  border:1px solid #333; background:#000; color:#ccc; font-weight:900;
}
.mode-tab.active{ border-color:var(--dart-green); color:#fff; box-shadow: inset 0 0 0 1px rgba(48,159,106,0.25); }

.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.why-card{ background:#000; border:1px solid #222; border-radius:16px; padding:12px; }
.why-k{ color:#888; text-transform:uppercase; letter-spacing:2px; font-size:.72rem; font-weight:1000; }
.why-v{ margin-top:8px; font-size:1.02rem; font-weight:1000; color:#fff; }
.note{ margin-top:12px; color:#888; font-size:.92rem; line-height:1.5; }

/* Responsive */
@media (max-width: 780px){ .why-grid{ grid-template-columns:1fr; } }
@media (max-width: 720px){
  .grid2, .grid4{ grid-template-columns:1fr; }
  .pname{ min-width:0; flex-basis:100%; text-align:center !important; }
  .match-card{ padding-top:56px; }
}
@media (max-width: 680px){
  .matches-wrap{ padding:0 12px 30px 12px; }
  .day-table-container{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .day-table{ min-width:720px; }

  .cm-top{ flex-wrap:wrap; justify-content:center; }
  .p-name{ width:100%; text-align:center !important; }
  .score{ order:3; }
  .cm-elo{ flex-wrap:wrap; }
  .cm-elo > div{ width:100% !important; justify-content:center !important; }
  .why-btn{ width:100%; justify-content:center; }
}
@media (max-width: 720px){
  .award-card.big{ grid-column:span 1; }
}

/* Light mode */
html[data-theme="light"] .matches-hero{
  background: radial-gradient(circle at 50% 0%, rgba(48,159,106,0.12) 0%, transparent 62%), #f6f9ff;
}
html[data-theme="light"] .matches-hero h2{ color:#0f172a; text-shadow:none; }
html[data-theme="light"] .matches-hero p{ color:#64748b; }

html[data-theme="light"] .matches-tab{
  background:#fff; border-color:#d6e1ef; color:#334155;
}
html[data-theme="light"] .matches-tab.active{ color:#0f172a; border-color:#8ac6a6; }

html[data-theme="light"] .msg-green{ color:#14532d; background:#e8f7ef; border-color:#8ac6a6; }
html[data-theme="light"] .msg-red{ color:#7f1d1d; background:#fff1f2; border-color:#fca5a5; }
html[data-theme="light"] .msg-empty{ background:#f8fbff; color:#334155; border-color:#d6e1ef; }

html[data-theme="light"] .day-chip{
  background: linear-gradient(145deg, #e8f7ef, #ffffff);
  border-color:#8ac6a6;
  box-shadow:0 8px 20px rgba(15,23,42,0.10);
}
html[data-theme="light"] .day-chip .st{ color:#0f172a; }
html[data-theme="light"] .day-chip .sub{ color:#64748b; }
html[data-theme="light"] .day-chip .right{ color:#15803d; }

html[data-theme="light"] .match-card,
html[data-theme="light"] .matchday-select,
html[data-theme="light"] .award-card,
html[data-theme="light"] .day-table-container,
html[data-theme="light"] .compact-match,
html[data-theme="light"] .modal,
html[data-theme="light"] .why-card,
html[data-theme="light"] .edit-panel{
  background:#fff !important;
  border-color:#d6e1ef !important;
  box-shadow:0 8px 20px rgba(15,23,42,0.08);
}
html[data-theme="light"] .award-card.big{
  background: linear-gradient(145deg,#e8f7ef,#fff) !important;
}
html[data-theme="light"] .score,
html[data-theme="light"] .meta .pill,
html[data-theme="light"] .elo-chip,
html[data-theme="light"] .mode-tab,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .stat-block{
  background:#f8fbff !important;
  border-color:#d6e1ef !important;
  color:#334155 !important;
}
html[data-theme="light"] .pname,
html[data-theme="light"] .award-name,
html[data-theme="light"] .mvp-name,
html[data-theme="light"] .block-title,
html[data-theme="light"] .modal h3,
html[data-theme="light"] .why-v{
  color:#0f172a !important;
}
html[data-theme="light"] .loser,
html[data-theme="light"] .match-foot,
html[data-theme="light"] .meta,
html[data-theme="light"] .subline,
html[data-theme="light"] .award-title,
html[data-theme="light"] .modal .sub,
html[data-theme="light"] .why-k,
html[data-theme="light"] .note,
html[data-theme="light"] label{
  color:#64748b !important;
}
html[data-theme="light"] .day-table th{
  background:#eef3fb;
  color:#15803d;
}
html[data-theme="light"] .day-table td{
  color:#334155;
  border-bottom-color:#e6edf7;
}
html[data-theme="light"] .toggle-btn{
  background:#fff;
  border-color:#d6e1ef;
  color:#334155;
}
html[data-theme="light"] .toggle-btn.active{
  border-color:#8ac6a6;
  color:#0f172a;
}
html[data-theme="light"] .specials{
  color:#92400e;
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.35);
}
html[data-theme="light"] .why-btn{
  border-color:#cfdced;
  color:#334155;
}
html[data-theme="light"] .why-btn:hover{
  border-color:#b8cbe3;
  color:#0f172a;
}