/* style.css – Phase 3 Update: Joker-Styles + Chart-Fixes */

/* ── Alle Phase 1/2 Styles bleiben erhalten ─────────────── */
:root {
  --ts-green: #1a7a1a; --ts-green-light: #22a822;
  --ts-green-dark: #0d4d0d; --ts-gold: #ffd700;
  --ts-bg: #0d1117; --ts-card-bg: #161b22; --ts-border: #30363d;
}
body { background-color:var(--ts-bg); color:#e6edf3; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; }
.ts-navbar { background:linear-gradient(135deg,var(--ts-green-dark) 0%,#0a2d0a 100%); border-bottom:2px solid var(--ts-green); box-shadow:0 2px 12px rgba(0,0,0,.4); }
.ts-navbar .navbar-brand { color:var(--ts-gold)!important; font-size:1.2rem; }
.ts-footer { background:var(--ts-green-dark); border-top:1px solid var(--ts-green); }
.ts-hero { background:linear-gradient(135deg,#0a2d0a 0%,#112211 100%); border:1px solid var(--ts-green); border-radius:12px; padding:1.5rem; }
.card { background:var(--ts-card-bg); border-color:var(--ts-border); border-radius:10px; }
.card-header { background:rgba(255,255,255,.04); border-bottom-color:var(--ts-border); }
.ts-auth-card { border:1px solid var(--ts-green); box-shadow:0 4px 24px rgba(26,122,26,.15); }
.ts-match-card { transition:border-color .15s; }
.ts-match-card:hover { border-color:var(--ts-green-light); }
.ts-result-card { background:var(--ts-card-bg); border-color:var(--ts-border); font-size:.85rem; }
.ts-live-badge { animation:pulse-live 1.5s ease-in-out infinite; }
@keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:.5} }
.ts-score { font-size:1.25rem; font-weight:800; color:var(--ts-gold); letter-spacing:1px; font-variant-numeric:tabular-nums; }
.ts-phase-header { background:linear-gradient(90deg,var(--ts-green-dark),transparent); color:#90d090; font-size:.95rem; }
.ts-tip-row { border-bottom:1px solid var(--ts-border); transition:background .1s; }
.ts-tip-row:last-child { border-bottom:none; }
.ts-tip-row:hover { background:rgba(255,255,255,.03); }
.ts-tip-row.ts-live { background:rgba(26,122,26,.08); border-left:3px solid var(--ts-green-light); }
.ts-tip-row.ts-done { opacity:.85; }
.ts-tip-input { width:55px!important; text-align:center; font-weight:700; font-size:1rem; background:#0d1117; border-color:#444; color:#e6edf3; border-radius:6px; }
.ts-tip-input:focus { border-color:var(--ts-green-light); box-shadow:0 0 0 2px rgba(34,168,34,.25); background:#0d1117; color:#e6edf3; }
.ts-save-bar { position:fixed; bottom:0; left:0; right:0; background:rgba(13,17,23,.92); backdrop-filter:blur(8px); border-top:1px solid var(--ts-green); padding:.75rem 1rem; text-align:center; z-index:1000; }
.ts-leaderboard thead th { background:var(--ts-green-dark); color:#90d090; border-color:var(--ts-border); font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; }
.ts-me-row { background:rgba(26,122,26,.1)!important; border-left:3px solid var(--ts-green-light); }
.ts-my-stats { background:linear-gradient(135deg,var(--ts-green-dark),#0d1117); border:1px solid var(--ts-green); }
.ts-stat-num { font-size:2rem; font-weight:800; line-height:1; }
.ts-stat-lbl { font-size:.78rem; color:#8b949e; text-transform:uppercase; letter-spacing:.5px; }
.ts-progress-bar { height:6px; background:#30363d; border-radius:3px; width:80px; display:inline-flex; }
.ts-progress-bar .progress-bar { border-radius:3px; }
.btn-xs { padding:.125rem .375rem; font-size:.75rem; border-radius:4px; }
.table { color:#e6edf3; --bs-table-bg:transparent; --bs-table-hover-bg:rgba(255,255,255,.04); --bs-table-border-color:var(--ts-border); }
.form-control,.form-select { background-color:#0d1117; border-color:#444; color:#e6edf3; }
.form-control:focus,.form-select:focus { background-color:#0d1117; border-color:var(--ts-green-light); color:#e6edf3; box-shadow:0 0 0 2px rgba(34,168,34,.2); }
.form-control::placeholder { color:#555; }
::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:#0d1117; }
::-webkit-scrollbar-thumb { background:#30363d; border-radius:4px; }

/* ── Phase 3: Joker-Styles ──────────────────────────────── */

/* Joker-Button */
.ts-joker-btn {
  font-size: 1rem;
  background: transparent;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1.4;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  cursor: pointer;
}
.ts-joker-btn:hover {
  opacity: 0.8;
  transform: scale(1.1);
}
.ts-joker-btn.ts-joker-on {
  opacity: 1;
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--ts-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  transform: scale(1.15);
}

/* Shake-Animation wenn max. Joker erreicht */
.ts-joker-btn.ts-joker-shake {
  animation: joker-shake 0.4s ease;
}
@keyframes joker-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px) scale(1.05); }
  75%       { transform: translateX(4px) scale(1.05); }
}

/* Joker-aktivierte Match-Zeile */
.ts-tip-row.ts-joker-active {
  background: rgba(255, 215, 0, 0.05);
  border-left: 3px solid var(--ts-gold);
}

/* Joker-Zähler in der Navbar-Area */
.ts-joker-counter {
  font-size: 0.88rem;
  color: #8b949e;
  white-space: nowrap;
}

/* ── Phase 3: Chart-Container ───────────────────────────── */
canvas {
  max-width: 100%;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 576px) {
  .ts-score { font-size:1rem; }
  .ts-tip-input { width:42px!important; font-size:.88rem; }
  .ts-hero h1 { font-size:1.5rem; }
  .ts-stat-num { font-size:1.4rem; }
  .ts-joker-btn { font-size:.88rem; padding:1px 5px; }
}