/* TTR-Rechner */

.ttr-grid { display: grid; gap: 1rem; align-items: start; }
.ttr-inputs, .ttr-side { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 52rem) {
  .ttr-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .ttr-side { position: sticky; top: 1rem; }
}

.card h2 { margin: 0 0 .75rem; font-size: 1.35rem; }
.ttr-hint { margin: -.35rem 0 .9rem; color: var(--muted); font-size: .95rem; }
.ttr-empty { margin: 0; color: var(--muted); }

/* Eigener Wert */
.ttr-own { display: grid; gap: .75rem; }
@media (min-width: 30rem) { .ttr-own { grid-template-columns: 1fr 1fr; } }
.ttr-big-input { font-size: 1.6rem; font-family: var(--mono); letter-spacing: .02em; }
.ttr-checks { display: grid; gap: .5rem; margin-top: .9rem; }
.ttr-check { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; line-height: 1.35; }
.ttr-check input { width: 1.35rem; height: 1.35rem; margin: .05rem 0 0; flex: none; accent-color: var(--ball); }
.ttr-check small { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.ttr-k { margin: .9rem 0 0; color: var(--muted); }
.ttr-k strong { color: var(--text); font-family: var(--mono); font-size: 1.1rem; }

.input[aria-invalid="true"] { border-color: var(--bad); }

/* Spiele */
.ttr-games { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.ttr-game {
  border: 2px solid var(--line); border-radius: 16px; padding: .7rem .8rem .6rem;
  background: var(--paper); border-left-width: 6px;
}
.ttr-game.is-win { border-left-color: var(--good); }
.ttr-game.is-loss { border-left-color: var(--bad); }
.ttr-game-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.ttr-game-head .btn-small { padding-inline: .6rem; }
.ttr-game-body { display: grid; gap: .6rem; }
@media (min-width: 30rem) { .ttr-game-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: end; } }
.ttr-game .input { background: var(--card); font-family: var(--mono); }
.ttr-game-info { margin: .45rem 0 0; min-height: 1.3em; font-size: .9rem; color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; }

/* Sieg/Niederlage-Umschalter */
.ttr-toggle { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ttr-opt { position: relative; display: block; cursor: pointer; }
.ttr-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ttr-opt span {
  display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .4rem .5rem;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card);
  font-weight: 700; text-align: center; line-height: 1.1;
}
.ttr-opt:hover span { border-color: var(--muted); }
.ttr-opt input:focus-visible + span { outline: 3px solid var(--ball); outline-offset: 2px; }
.ttr-opt-win input:checked + span { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.ttr-opt-loss input:checked + span { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.ttr-opt input:checked + span::before { content: "✓"; margin-right: .35rem; }

/* Ergebnis */
.ttr-result { border-color: var(--text); }
.ttr-big {
  margin: 0; font-family: var(--mono); font-size: clamp(1.7rem, 7.5vw, 2.4rem); line-height: 1.15;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .2em;
}
.ttr-big strong { font-size: 1.25em; }
.ttr-arrow { color: var(--muted); }
.ttr-delta { font-size: .75em; font-weight: 500; }
.ttr-up .ttr-delta, .ttr-up strong { color: var(--good); }
.ttr-down .ttr-delta, .ttr-down strong { color: var(--bad); }
.ttr-even .ttr-delta { color: var(--muted); }

.ttr-stats { margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ttr-stats[hidden] { display: none; }
.ttr-stats div { background: var(--paper); border-radius: 12px; padding: .5rem .65rem; min-width: 0; }
.ttr-stats dt { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ttr-stats dd { margin: 0; font-family: var(--mono); font-size: 1.1rem; }

/* Was wäre wenn */
.ttr-whatif { margin-top: .8rem; }
.ttr-whatif-chance { margin: 0 0 .6rem; font-weight: 600; }
.ttr-whatif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ttr-whatif-box { border-radius: 12px; padding: .55rem .7rem; display: grid; gap: .1rem; }
.ttr-whatif-box.ttr-up { background: var(--good-soft); }
.ttr-whatif-box.ttr-down { background: var(--bad-soft); }
.ttr-whatif-box strong { font-family: var(--mono); font-size: 1.6rem; line-height: 1.1; }
.ttr-whatif-box.ttr-up strong { color: var(--good); }
.ttr-whatif-box.ttr-down strong { color: var(--bad); }

/* Hinweis */
.ttr-note { margin-top: 1.5rem; }
.ttr-formula { font-family: var(--mono); font-size: .9em; color: var(--text); overflow-wrap: anywhere; }
.ttr-note a { color: var(--text); }