/*
 * Tipp-Gewinnspiel: Anmeldekasten und Ranglisten (TS_Tipster_Contest).
 * Farben über --tip-*-Variablen – die Zuschauer-App setzt sie auf die Eventfarben.
 */
.ts-tipster, .ts-tiplb, .ts-tipme {
    --tip-card: var(--fa-card, #ffffff); --tip-card2: var(--fa-card2, #f8fafc); --tip-line: var(--fa-line, #e2e8f0);
    --tip-tx: var(--fa-tx, #0f172a); --tip-mu: var(--fa-mu, #64748b); --tip-ac: var(--fa-ac, #2563eb); --tip-on-ac: var(--fa-on-ac, #ffffff);
    color: var(--tip-tx);
}
.ts-tipster { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--tip-card); border: 1px solid var(--tip-line); }
.ts-tipster-h { margin: 0 0 4px; font-weight: 800; font-size: 15px; }
.ts-tipster-note { margin: 0 0 10px; font-size: 13px; color: var(--tip-mu); }
.ts-tipster-form { display: grid; gap: 6px; margin: 0; }
.ts-tipster-form label { font-size: 12.5px; font-weight: 600; color: var(--tip-mu); }
.ts-tipster-form input[type="text"], .ts-tipster-form input[type="email"] {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--tip-line);
    background: var(--tip-card2); color: var(--tip-tx); font-size: 15px; min-height: 44px;
}
.ts-tipster-form input[name="ts_tip_code"] { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.ts-tipster-form button[type="submit"] { margin-top: 4px; min-height: 46px; border: 0; border-radius: 12px; background: var(--tip-ac); color: var(--tip-on-ac); font-weight: 800; font-size: 15px; cursor: pointer; }
.ts-tipster-form button:disabled { opacity: .5; }
.ts-tipster-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ts-tipster-row button { margin-top: 0 !important; padding: 0 18px; }
.ts-tipster-circles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.ts-tipster-circles label { cursor: pointer; margin: 0; }
.ts-tipster-circles input { position: absolute; opacity: 0; pointer-events: none; }
.ts-tipster-circles span { display: block; padding: 10px; border-radius: 12px; border: 2px solid var(--tip-line); background: var(--tip-card2); text-align: center; font-size: 13px; font-weight: 700; color: var(--tip-tx); }
.ts-tipster-circles input:checked + span { border-color: var(--tip-ac); box-shadow: inset 0 0 0 1px var(--tip-ac); }
.ts-tipster-circles input:focus-visible + span { outline: 2px solid var(--tip-ac); outline-offset: 2px; }
.ts-tipster-hall { display: grid; gap: 4px; }
.ts-tipster-hall input { font-size: 20px !important; letter-spacing: .3em; text-align: center; }
.ts-tipster-consent { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 400 !important; font-size: 12px !important; line-height: 1.35; margin-top: 4px; }
.ts-tipster-consent input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--tip-ac); }
.ts-tipster-ok { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.ts-tipster-ic { font-size: 26px; }
.ts-tipster-ok b { display: block; font-size: 14.5px; }
.ts-tipster-ok small { color: var(--tip-mu); font-size: 12.5px; }
.ts-tipster-link { background: none !important; border: 0 !important; padding: 0 !important; color: var(--tip-ac) !important; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: underline; min-height: 0 !important; }
.ts-tipster-msg { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #15803d; }
.ts-tipster-msg.is-bad { color: #dc2626; }
.ts-tipster [hidden] { display: none !important; }

/* Ranglisten */
.ts-tiplb { padding: 12px; border-radius: 14px; background: var(--tip-card); border: 1px solid var(--tip-line); }
.ts-tiplb-r { position: absolute; opacity: 0; pointer-events: none; }
.ts-tiplb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--tip-card2); margin-bottom: 10px; }
.ts-tiplb-tabs label { text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 800; font-size: 13.5px; color: var(--tip-mu); cursor: pointer; }
.ts-tiplb-r.is-hall:checked ~ .ts-tiplb-tabs label:nth-child(1),
.ts-tiplb-r.is-remote:checked ~ .ts-tiplb-tabs label:nth-child(2) { background: var(--tip-ac); color: var(--tip-on-ac); }
.ts-tiplb-panel { display: none; }
.ts-tiplb-r.is-hall:checked ~ .ts-tiplb-panel.is-hall,
.ts-tiplb-r.is-remote:checked ~ .ts-tiplb-panel.is-remote { display: block; }
.ts-tiplb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ts-tiplb-list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--tip-card2); }
.ts-tiplb-list li.is-top { font-weight: 700; }
.ts-tiplb-list li.is-me { box-shadow: inset 0 0 0 2px var(--tip-ac); }
.ts-tiplb-place { font-size: 18px; text-align: center; font-weight: 800; }
.ts-tiplb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-tiplb-name small { color: var(--tip-mu); font-weight: 400; }
.ts-tiplb-pts { font-size: 13px; color: var(--tip-mu); white-space: nowrap; }
.ts-tiplb-pts b { font-size: 17px; color: var(--tip-tx); }
.ts-tiplb-empty, .ts-tiplb-foot { margin: 6px 2px 0; font-size: 12.5px; color: var(--tip-mu); }
.ts-tipster-lb-new { margin-top: 32px; }

/* Wahl: Gewinnspiel oder nur mittippen */
.ts-tipster-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ts-tipster-choices button { display: grid; gap: 4px; text-align: left; padding: 12px; border-radius: 12px; border: 2px solid var(--tip-line); background: var(--tip-card2); color: var(--tip-tx); cursor: pointer; }
.ts-tipster-choices button:first-child { border-color: var(--tip-ac); }
.ts-tipster-choices button b { font-size: 14px; }
.ts-tipster-choices button small { font-size: 12px; color: var(--tip-mu); line-height: 1.3; }
.ts-tipster-onlybar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.ts-tipster-form .ts-tipster-link { justify-self: center; margin-top: 4px; }
.ts-tipster-form input.is-code { font-size: 24px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.ts-tipster-form[hidden], .ts-tipster-choice[hidden], .ts-tipster-onlybar[hidden] { display: none !important; }
@media (max-width: 420px) { .ts-tipster-choices { grid-template-columns: 1fr; } }

/* Eigene Tipp-Bilanz (TS_Tipster_Contest::render_my_stats) */
.ts-tipme { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--tip-card); border: 1px solid var(--tip-line); border-left: 4px solid var(--tip-ac); }
.ts-tipme-h { font-weight: 900; font-size: 15px; margin-bottom: 8px; }
.ts-tipme-h small { font-weight: 600; color: var(--tip-mu); margin-left: 4px; }
.ts-tipme-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ts-tipme-kpis div { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--tip-card2); text-align: center; }
.ts-tipme-kpis b { font-size: 20px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ts-tipme-kpis b i { font-style: normal; font-size: 12px; color: var(--tip-mu); font-weight: 700; }
.ts-tipme-kpis div { line-height: 1.2; min-width: 0; }
.ts-tipme-kpis small { font-size: 11px; color: var(--tip-mu); line-height: 1.2; overflow-wrap: anywhere; }
.ts-tipme-note { margin: 8px 0 0; font-size: 13px; color: var(--tip-mu); }
.ts-tipme-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.ts-tipme-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--tip-card2); font-size: 13.5px; }
.ts-tipme-g { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-tipme-t { color: var(--tip-mu); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-tipme-list li.is-ok { box-shadow: inset 3px 0 0 #22c55e; }
.ts-tipme-list li.is-bad { box-shadow: inset 3px 0 0 #ef4444; }
@media (max-width: 380px) { .ts-tipme-kpis b { font-size: 17px; } }
.ts-tiplb-mine { margin: -4px 2px 10px; font-size: 12.5px; color: var(--tip-mu); }
.ts-tiplb-tabs label { line-height: 1.25; }