:root {
  --accent: #8b5cf6;
  --accent2: #22d3ee;
  --bg: #0b0b14;
  --panel: rgba(18, 18, 32, 0.72);
  --panel-solid: #15152a;
  --panel2: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.10);
  --text: #eef0ff;
  --muted: #9aa0c3;
  --ok: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --radius: 14px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Rajdhani', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent2); }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; letter-spacing: .3px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Hintergrund (Discord-Banner) */
#bg { position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%), radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 55%), var(--bg); }
#bg .img { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(var(--bg-blur, 6px)) saturate(1.1); transform: scale(1.04); }
#bg video.img { width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; }
#bg .slide { opacity: 0; transition: opacity 1.6s ease; }
#bg .slide.on { opacity: 1; }
.tlogo { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; border-radius: 6px; }
/* Breites Logo statt Titel: so hoch wie etwa zweieinhalb Titelzeilen, nie breiter als der Platz */
.tlogo-wide { display: block; width: auto; height: auto; max-width: 100%; max-height: 3.4em; object-fit: contain; }
nav.chips a .tlogo-wide, .games .tlogo-wide { display: inline-block; max-height: 24px; max-width: 140px; vertical-align: middle; }
.temoji { line-height: 1; }
.prizeimg { max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: contain; display: block; }
#bg .dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 16, var(--bg-dim, .7)) 0%, rgba(8, 8, 16, calc(var(--bg-dim, .7) + .12)) 100%); }

/* ---------- Bausteine */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); white-space: nowrap; }
.badge.open { background: rgba(34, 197, 94, .15); border-color: rgba(34, 197, 94, .4); color: #86efac; }
.badge.running { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); color: #fff; }
.badge.running::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff4d6d; animation: pulse 1.4s infinite; }
.badge.finished { color: var(--muted); }
.badge.call { background: rgba(239, 68, 68, .2); border-color: #ef4444; color: #fecaca; }
.badge.prepare { background: rgba(245, 158, 11, .18); border-color: #f59e0b; color: #fde68a; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--panel2); padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--text); transition: background .15s, transform .05s; }
.btn:hover { background: rgba(255, 255, 255, .1); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent2))); border-color: transparent; color: #fff; }
.btn.danger { background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .5); color: #fecaca; }
.btn.warn { background: rgba(245, 158, 11, .15); border-color: rgba(245, 158, 11, .5); color: #fde68a; }
.btn.ok { background: rgba(34, 197, 94, .15); border-color: rgba(34, 197, 94, .5); color: #bbf7d0; }
.btn.sm { padding: 4px 9px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

input[type=text], input[type=password], input[type=number], input[type=time], input[type=url], select, textarea {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; width: 100%; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
select option { background: var(--panel-solid); }
label.f { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- Avatare */
.av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; background: #444; overflow: hidden; }
.av.lg { width: 44px; height: 44px; font-size: 17px; }
.av.xl { width: 72px; height: 72px; font-size: 26px; }
.av.cpu { background: #333 !important; }

/* ---------- Markdown */
.md p { margin: 0 0 6px; }
.md ul { margin: 2px 0 8px; padding-left: 20px; }

/* ---------- Brackets */
.bracket-wrap { overflow-x: auto; padding-bottom: 6px; }
.bsec { margin-bottom: 18px; }
.bsec > h3 { font-size: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; margin: 4px 0 8px; }
.bracket { display: flex; gap: 22px; align-items: stretch; min-width: min-content; }
.bround { display: flex; flex-direction: column; min-width: 210px; max-width: 240px; }
.bround > h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; white-space: nowrap; }
.bround .mlist { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.match { background: rgba(10, 10, 22, .82); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: relative; }
.match .mh { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); padding: 3px 8px; background: rgba(255, 255, 255, .03); gap: 6px; }
.match .sl { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, .05); min-height: 36px; }
.match .sl .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.match .sl .sc { font-weight: 800; min-width: 18px; text-align: right; font-family: var(--font-head); font-size: 17px; }
.match .sl.win .nm { font-weight: 800; }
.match .sl.win .sc { color: var(--accent2); }
.match .sl.lose { opacity: .55; }
.match .sl.tbd .nm { color: var(--muted); font-style: italic; }
.match.bye { opacity: .28; }
.match.bye.hide { visibility: hidden; }
.match.called { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444, 0 0 18px rgba(239, 68, 68, .35); }
.match.prepare { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b; }
.match.ready { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.match.mine, .heat.mine, tr.mine td { box-shadow: 0 0 0 2px var(--accent2) !important; }
.match.clickable { cursor: pointer; }
.match.clickable:hover { background: rgba(30, 30, 55, .95); }
.sl.me .nm { color: var(--accent2); }

/* ---------- Tabellen */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.tbl td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pcell { display: flex; align-items: center; gap: 8px; }
.pcell .dn { font-size: 12px; color: var(--muted); }
.rank { font-family: var(--font-head); font-weight: 800; font-size: 18px; width: 28px; }

/* ---------- Heats */
.heats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.heat { background: rgba(10, 10, 22, .82); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.heat.called { border-color: #ef4444; box-shadow: 0 0 18px rgba(239, 68, 68, .3); }
.heat.prepare { border-color: #f59e0b; }
.heat h4 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 17px; }
.heat .hp { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.heat .hp .nm { flex: 1; }
.heat .hp .pts { font-family: var(--font-head); font-weight: 800; font-size: 18px; }
.heat .hp.adv .nm { font-weight: 700; color: #bbf7d0; }
.heat .hp.adv .pts::after { content: ' ➜'; color: var(--ok); }

/* ---------- Podium */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 8px 0 18px; }
.podium .pl { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.podium .step { width: 110px; border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 30px; font-weight: 800; }
.podium .p1 .step { height: 90px; background: linear-gradient(180deg, #facc15, #a16207); }
.podium .p2 .step { height: 64px; background: linear-gradient(180deg, #cbd5e1, #64748b); }
.podium .p3 .step { height: 46px; background: linear-gradient(180deg, #fb923c, #9a3412); }
.podium .nm { font-weight: 700; max-width: 140px; }

/* ---------- Toasts */
#toasts { position: fixed; z-index: 100; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--panel-solid); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: tin .25s ease-out; }
.toast.call { border-left-color: #ef4444; }
.toast.prepare { border-left-color: #f59e0b; }
.toast.err { border-left-color: #ef4444; }
.toast b { display: block; }
@keyframes tin { from { transform: translateY(12px); opacity: 0; } }

.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); display: inline-block; }
.conn.on { background: var(--ok); }
.empty { text-align: center; color: var(--muted); padding: 26px 10px; }