/* Seitenspezifische Gestaltung. */

/* ---------- Fehlerseiten ---------- */

.death-screen {
  display: grid;
  place-items: center;
  padding: var(--s-16) 0 var(--s-6);
  overflow: hidden;
}
.death-band {
  position: relative;
  width: 100%;
  padding: var(--s-10) var(--s-4);
  text-align: center;
  background: linear-gradient(180deg, transparent, var(--scrim) 24%, var(--scrim) 76%, transparent);
}
.death-band::before, .death-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}
.death-band::before { top: 0; }
.death-band::after { bottom: 0; }
.death-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 8vw, 5rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--danger);
  text-shadow: 0 0 32px var(--danger-soft);
  animation: death-in 2.4s var(--ease) both;
}
@keyframes death-in {
  0% { opacity: 0; letter-spacing: 0.02em; }
  35% { opacity: 0; }
  100% { opacity: 1; letter-spacing: 0.08em; }
}

.error-body {
  max-width: var(--prose-width);
  margin: 0 auto;
  text-align: center;
}
.error-body .actions { justify-content: center; margin-top: var(--s-6); }
.error-lead { font-size: var(--fs-md); }
.error-plain { padding-top: var(--s-12); }
.error-code { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--s-2); }

/* ---------- Event-Gruppen (Profil) ---------- */

.event-group { margin-bottom: var(--s-10); }
.event-group h2 { margin: 0 0 var(--s-4); }

/* Meta-Angaben als Liste statt Trennpunkten */
.meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-6); padding: 0; list-style: none; color: var(--text-muted); }
.meta li { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---------- Anmelden ---------- */

.auth { max-width: 27rem; margin: var(--s-8) auto 0; }
.auth .page-header { margin-bottom: var(--s-6); }
.auth .form { max-width: none; }
.auth .form > .btn { justify-self: stretch; }
.auth-alt { margin-top: var(--s-5); text-align: center; color: var(--text-muted); }

/* ---------- Mein Bereich ---------- */

/* Dashboard */
.dash-block { margin-top: var(--s-10); }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.dash-head .dash-title { margin: 0; }
.dash-title { margin: 0 0 var(--s-4); font-size: var(--fs-lg); }
.dash-subtitle { margin: var(--s-8) 0 var(--s-3); font-size: var(--fs-md); color: var(--text-muted); }
.dash-note { margin: 0; }
.empty-actions { justify-content: center; margin-top: var(--s-2); }
.empty-actions .btn { margin-top: 0; }

.run-cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.run-card { margin: 0; display: grid; gap: var(--s-5); align-content: start; }
.run-card.is-live { border-top: 2px solid var(--ember); }
.run-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.run-card-heading { min-width: 0; }
.run-card-game { margin: 0 0 var(--s-1); font-size: var(--fs-sm); color: var(--text-muted); }
.run-card-title { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.run-card-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.run-card-points {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.run-card-points strong { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); line-height: 1; }
.run-card-points span { font-family: var(--font-body); letter-spacing: 0; font-size: var(--fs-sm); }
.run-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.run-card-foot form { margin: 0; }

/* Einladung eines Organisators: wartet auf Zustimmung (Ruling R-G) */
.dash-invitations { margin-top: 0; margin-bottom: var(--s-10); }
.invitation-card { border-top: 2px solid var(--info); }
.invitation-text { margin: 0; color: var(--text-muted); }
.invitation-accept { display: grid; gap: var(--s-4); margin: 0; }
.invitation-rules { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; font-weight: 600; }
.invitation-rules svg { width: 18px; height: 18px; }
.run-card-foot > .btn:last-child { flex: 1 0 auto; max-width: 16rem; margin-left: auto; }
@media (max-width: 559.98px) {
  /* Mobil: Hauptaktion zuerst und über die volle Breite */
  .run-card-foot { flex-direction: column-reverse; align-items: stretch; }
  .run-card-foot > .btn:last-child { max-width: none; margin-left: 0; }
  .run-card-foot form .btn, .run-card-foot > .badge { width: 100%; }
  .run-card-foot > .badge { justify-content: center; }
}

.dash-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.dash-list li + li { border-top: 1px solid var(--line); }
.dash-row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-2) var(--s-4);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.dash-row:hover { background: var(--bg-hover); color: var(--text); }
.dash-row:focus-visible { outline-offset: -3px; }
.dash-row-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-meta { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-row-meta svg { width: 16px; height: 16px; }
.dash-row-action { color: var(--ember); font-size: var(--fs-sm); font-weight: 600; }
.dash-row-sub { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; }
.dash-row-meta strong { color: var(--text); }
@media (max-width: 559.98px) {
  .dash-row-meta + .badge { margin-left: auto; }
  .dash-row { flex-wrap: wrap; row-gap: var(--s-1); padding-block: var(--s-3); }
  .dash-row-name { flex-basis: 100%; }
  .dash-row-action { margin-left: auto; }
}

/* Einrichtungs-Checkliste */
.checklist { margin: 0; }
.checklist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.checklist-head h2 { margin: 0; font-size: var(--fs-lg); }
.checklist-head p { margin: var(--s-1) 0 0; }
.checklist-head form { margin: 0; }
.checklist-steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.checklist-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.checklist-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-muted);
}
.checklist-mark svg { width: 16px; height: 16px; }
.checklist-step.is-done .checklist-mark { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.checklist-step.is-done .checklist-label { color: var(--text-muted); }
.checklist-step.is-hint .checklist-mark { border-style: dashed; }
.checklist-label { margin: 0; font-weight: 600; }
.checklist-text { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 559.98px) {
  .checklist-step { grid-template-columns: auto minmax(0, 1fr); }
  .checklist-action { grid-column: 2; justify-self: start; }
}

/* Abhak-Ansicht (Teilnehmer, Mod, Organisator): eine ruhige Spalte statt Zeilen über 70 rem */
.run-page { max-width: 52rem; margin-inline: auto; }

/* Abhak-Ansicht: abgesetzter Bereich zum Beenden des Runs */
.run-end {
  margin: var(--s-10) 0 var(--s-6);
  padding: var(--s-5) var(--s-5) var(--s-6);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-top: 2px solid var(--danger);
  border-radius: var(--radius-card);
}
.run-end h2 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.run-end p { margin: 0 0 var(--s-4); max-width: var(--prose-width); color: var(--text-muted); }
.run-end p .badge { margin-right: var(--s-2); }
.run-end .actions .btn { flex: 1 1 12rem; max-width: 20rem; }


/* ---------- Admin ---------- */

.admin-tiles .card-link h2 { margin: 0 0 var(--s-2); font-size: var(--fs-md); }
.admin-tiles .card-link p { color: var(--text-muted); margin: 0; font-size: var(--fs-sm); }
.admin-tiles .card-link p + p { margin-top: var(--s-1); }
.admin-tiles .card-link p.admin-figure { color: var(--ember); font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.search-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.search-row input[type=search] { flex: 1 1 14rem; min-width: 0; }
.edit-user { margin-top: var(--s-2); }
.edit-user summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); }
.edit-user .form { margin-top: var(--s-3); max-width: 24rem; }
.table-stack td .row { flex-wrap: wrap; }
.table-stack td.cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-stack td.cell-actions .row { row-gap: 0; }
.table-stack td.cell-main a { font-weight: 600; }
@media (max-width: 719.98px) {
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; }
  .table-stack thead { display: none; }
  .table-stack tr { padding: var(--s-4); border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td { padding: 0; border: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); text-align: right; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: var(--fs-sm); text-align: left; }
  .table-stack td.cell-main { display: block; text-align: left; font-size: var(--fs-md); }
  .table-stack td.cell-main .muted { font-size: var(--fs-sm); margin-left: var(--s-2); }
  .table-stack td.cell-actions { display: block; text-align: left; padding-top: var(--s-2); border-top: 1px solid var(--line); }
  .table-stack tbody tr:hover td { background: none; }
}

/* ---------- Overlay-Einstellungen ---------- */

.overlay-layout {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 899.98px) { .overlay-layout { grid-template-columns: minmax(0, 1fr); } }
.overlay-form { max-width: none; }
.overlay-form fieldset { display: grid; gap: var(--s-4); }
.overlay-form fieldset.card { margin: 0; }
.overlay-side .card { overflow: hidden; }

/* ---------- Über ---------- */

.prose { max-width: var(--prose-width); }
.prose li + li { margin-top: var(--s-2); }

/* Registrierung, Profil */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.profile-edit .page-header { margin-bottom: var(--s-5); }
.profile-edit .alert { margin-bottom: var(--s-5); }
.profile-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.profile-grid .form { max-width: none; }
.profile-grid .form > .btn { justify-self: start; }
.profile-id { display: flex; align-items: center; gap: var(--s-3); }
.profile-head { display: flex; align-items: center; gap: var(--s-5); margin: var(--s-8) 0 var(--s-8); flex-wrap: wrap; }
.profile-head h1 { margin: 0; overflow-wrap: anywhere; }

/* Admin: Startseiten-Screenshots */
.landing-upload { max-width: 36rem; margin-bottom: var(--s-6); }
.shot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.shot { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm, 6px); }
.shot-meta { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; overflow-wrap: anywhere; }

/* ---------- Punktelisten-Bibliothek ---------- */

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--s-6); }
.filter-bar .field { flex: 1 1 14rem; max-width: 22rem; }
.list-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.list-card { display: flex; flex-direction: column; gap: var(--s-2); }
.list-card h2 { margin: 0; font-size: var(--fs-md); }
.list-game { margin: 0; color: var(--gold); font-size: var(--fs-sm); }
.list-desc { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.list-owner { margin: auto 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.list-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-2) 0; }
.list-stats > div { display: flex; flex-direction: column-reverse; }
.list-stats dt { font-size: var(--fs-sm); color: var(--text-muted); }
.list-stats dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.prose-line { max-width: var(--prose-width, 42rem); color: var(--text-muted); }

/* ---------- Events verwalten ---------- */

/* Meine Events */
.manage-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.manage-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.manage-cover { aspect-ratio: 16 / 7; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.manage-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.manage-cover-empty {
  display: grid; place-items: end start;
  padding: var(--s-4) var(--s-5);
  background: radial-gradient(ellipse 80% 120% at 15% 110%, var(--ember-soft), transparent 70%), var(--bg-sunken);
}
.manage-cover-empty span {
  font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--track-display);
  color: var(--text-muted); overflow-wrap: anywhere;
}
.manage-card-body { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }
.manage-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.manage-card-head h2 { margin: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.manage-card-body .list-game, .manage-card-meta { margin: 0; }
.manage-card-meta { font-size: var(--fs-sm); }

/* Kopf mit Cover und Tabs */
.manage-head .page-header { margin-bottom: var(--s-5); }
.manage-head .page-header h1 { overflow-wrap: anywhere; }
.manage-head-cover {
  display: block; width: 100%;
  height: clamp(88px, 16vw, 168px);
  margin-bottom: var(--s-5);
  object-fit: cover;
  border-radius: var(--radius-card);
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}

/* Neues Event: vier Schritte an einer Leiste */
.build .page-header { margin-bottom: var(--s-8); }
.build-form { --num: 40px; --rail: calc(var(--num) + var(--s-5)); }
.build-steps { list-style: none; margin: 0; padding: 0; }
.build-step { position: relative; padding: 0 0 var(--s-10) var(--rail); }
.build-step::before {
  content: "";
  position: absolute;
  left: calc(var(--num) / 2); top: calc(var(--num) + var(--s-2)); bottom: var(--s-2);
  width: 1px;
  background: linear-gradient(var(--line-strong), var(--line));
}
.build-title {
  display: flex; align-items: center; gap: var(--s-5);
  margin: 0 0 var(--s-5) calc(-1 * var(--rail));
  font-size: var(--fs-lg);
}
.build-num {
  display: grid; place-items: center; flex: none;
  width: var(--num); height: var(--num);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  color: var(--gold);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.build-step:focus-within .build-num { border-color: var(--ember); color: var(--ember); background: var(--ember-faint); }
.build-body { display: grid; gap: var(--s-5); max-width: 42rem; }
.build-lead { margin: 0; color: var(--text-muted); }
.build-note {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--bg-raised);
}
.build-submit {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  max-width: 42rem;
  margin-left: var(--rail);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.build-submit p { margin: 0; font-size: var(--fs-sm); max-width: 28rem; }
@media (max-width: 559.98px) {
  .build-form { --num: 32px; --rail: calc(var(--num) + var(--s-3)); }
  .build-title { gap: var(--s-3); }
  .build-num { font-size: var(--fs-base); }
  .build-step { padding-left: 0; }
  .build-step::before { display: none; }
  .build-title { margin-left: 0; }
  .build-submit { margin-left: 0; }
  .build-submit .btn { width: 100%; }
}

.field-pair { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* Listenauswahl */
.list-choices {
  display: grid; gap: var(--s-2);
  max-height: 27rem; overflow-y: auto;
  padding: 2px; margin: -2px;
  overscroll-behavior: contain;
}
.list-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; }
.list-choice-stats { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.list-choice-stats strong { color: var(--gold); font-variant-numeric: tabular-nums; margin-left: var(--s-2); }
.list-choice-stats strong:first-child { margin-left: 0; }
.list-choice-link { font-size: var(--fs-sm); padding: var(--s-2); margin: calc(-1 * var(--s-2)) 0; }
.list-choices-empty { margin: 0; padding: var(--s-4); }
@media (max-width: 559.98px) {
  .list-choice { grid-template-columns: auto minmax(0, 1fr) auto; }
  .list-choice-stats { grid-column: 2; grid-row: 2; }
  .list-choice-link { grid-column: 3; grid-row: 1 / span 2; }
}

/* Übersicht: Status-Stepper */
.status-card { padding-block: var(--s-8) var(--s-6); }
.stepper { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s-1); padding: 0 var(--s-2); text-align: center; }
.step + .step::before {
  content: "";
  position: absolute;
  top: 21px; right: 50%;
  width: 100%; height: 2px;
  background: var(--line-strong);
}
.step.is-done + .step::before { background: linear-gradient(90deg, var(--gold), var(--ember)); }
.step-mark {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--s-2);
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-muted);
}
.step-mark .icon { width: 20px; height: 20px; }
.step-mark .flame { width: 18px; height: 24px; }
.step.is-done .step-mark { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.step.is-current .step-mark {
  border-color: var(--ember);
  background: radial-gradient(circle at 50% 70%, var(--ember-soft), var(--bg-raised) 70%);
  box-shadow: 0 0 0 6px var(--ember-faint), 0 0 28px var(--ember-soft);
}
.step.is-current .flame { animation: flame-flicker 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.06, 0.97) rotate(-2deg); }
  60% { transform: scale(0.97, 1.04) rotate(1.5deg); }
}
.step-label { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); color: var(--text-muted); }
.step.is-current .step-label { color: var(--text); }
.step.is-done .step-label { color: var(--gold); }
.step-hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }

.next-step {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.next-text { flex: 1 1 22rem; }
.next-text h3 { margin: 0 0 var(--s-1); font-size: var(--fs-md); }
.next-text p { margin: 0; color: var(--text-muted); max-width: 36rem; }
.next-step form { margin: 0; }
.step-reset { margin-top: var(--s-2); display: flex; justify-content: flex-end; }
.step-reset .btn-link { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 559.98px) {
  .step-hint { display: none; }
  .next-step .btn-lg, .next-step form { width: 100%; }
  .step-reset { justify-content: flex-start; }
}

.overview-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.overview-grid > .card { margin: 0; }
.invite-card .copy-field { margin: var(--s-4) 0 var(--s-1); }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin: 0 0 var(--s-4); }
.figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding-left: var(--s-3); border-left: 2px solid var(--line); }
.figures dt { font-size: var(--fs-sm); color: var(--text-muted); }
.figures dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.figures-card > p { margin: 0; font-size: var(--fs-sm); }

/* Teilnehmer */
.add-participant { max-width: 36rem; }
.add-note { margin: 0 0 var(--s-4); font-size: var(--fs-sm); }
.person { display: grid; line-height: 1.3; }
.person a { color: var(--text); font-weight: 600; text-decoration: none; }
.person a:hover { color: var(--ember); }
.person .muted { font-size: var(--fs-sm); }
.row-end { justify-content: flex-end; }
@media (max-width: 639.98px) {
  .participants, .participants tbody, .participants tr, .participants td { display: block; }
  .participants thead { display: none; }
  .participants tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3);
    padding: var(--s-4); border-bottom: 1px solid var(--line);
  }
  .participants tbody tr:last-child { border-bottom: 0; }
  .participants td { padding: 0; border: 0; }
  .participants td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: center; }
  .participants td:nth-child(3) { grid-column: 1 / -1; }
  .participants td:nth-child(4) { grid-column: 1 / -1; }
  .participants td .row { flex-wrap: wrap; }
  .participants .row-end { justify-content: flex-start; }
  .table.participants tbody tr:hover td { background: none; }
}

/* Protokoll */
.log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg-raised); }
.log-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.log-row:last-child { border-bottom: 0; }
.log-time { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px; }
.log-time span { color: var(--text); margin-left: var(--s-1); }
.log-text { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 559.98px) { .log-row { grid-template-columns: minmax(0, 1fr); padding-inline: var(--s-4); } }

/* Einstellungen */
.settings { display: grid; gap: var(--s-4); max-width: 46rem; }
.settings > .card { margin: 0; }
.settings-form { max-width: none; }
.settings-form h2 { margin: var(--s-4) 0 0; }
.settings-form h2:first-of-type { margin-top: 0; }
.settings-form > .btn { justify-self: start; }
.cover-preview { display: block; width: 100%; max-width: 32rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-control); border: 1px solid var(--line); margin-bottom: var(--s-4); }
.cover-form { display: grid; gap: var(--s-4); }
.danger-zone { border-color: var(--danger-soft); border-top: 2px solid var(--danger); }
.danger-zone h2 { color: var(--danger); }
.danger-zone > p { color: var(--text-muted); max-width: 36rem; }
.danger-zone .form > .btn { justify-self: start; }

/* ---------- Events: Übersicht ---------- */

.browse-filters { margin-bottom: var(--s-6); }
.browse-filters .filter-bar { margin-bottom: 0; }
.browse-count { margin: 0 0 var(--s-3); font-size: var(--fs-sm); }

/* ---------- Event-Seite: Hero ---------- */

.event-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.event-hero-art { position: absolute; inset: 0; z-index: -1; }
.event-hero-art .cover { position: absolute; inset: 0; }
.event-hero-art::after { /* Lesbarkeit: links und unten in den Hintergrund auslaufen lassen */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 8%, var(--scrim) 45%, transparent 85%),
    linear-gradient(0deg, var(--bg) 0%, transparent 55%);
}
.event-hero .cover-game { /* Spielname als großes Wasserzeichen rechts */
  left: auto; right: -0.04em; bottom: -0.14em;
  max-width: none;
  -webkit-line-clamp: 1;
  font-size: clamp(4rem, 13vw, 10rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.09;
  text-shadow: none;
}
.event-hero-inner { padding-block: var(--s-5) var(--s-8); }
@media (min-width: 760px) { .event-hero-inner { padding-block: var(--s-8) var(--s-12); } }
.event-hero.has-cover .event-hero-inner { padding-top: var(--s-10); }
@media (min-width: 760px) { .event-hero.has-cover .event-hero-inner { padding-top: var(--s-16); } }
.event-hero-game {
  margin: var(--s-4) 0 var(--s-2);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
}
.event-hero-title {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2rem, 5.2vw, var(--fs-3xl));
  font-weight: 700;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 24px var(--bg);
}
.event-hero-game + .event-hero-title { margin-top: 0; }
.page-back + .event-hero-title { margin-top: var(--s-4); }
.event-hero-teaser { max-width: 40rem; margin: var(--s-4) 0 0; color: var(--text-muted); font-size: var(--fs-md); overflow-wrap: anywhere; }
.event-hero-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5) var(--s-8);
  margin-top: var(--s-6);
}
.event-hero-facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-5);
  margin: 0; padding: 0; list-style: none;
  color: var(--text-muted);
  min-width: 0;
}
.event-hero-facts li { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.event-hero-facts li > span { overflow-wrap: anywhere; }
.event-hero-facts a { color: var(--text); }
.event-hero-facts a:hover { color: var(--ember-bright); }
.event-hero-action:empty { display: none; }
@media (max-width: 559.98px) {
  .event-hero-action { width: 100%; }
  .event-hero-action > .btn { width: 100%; }
}

/* ---------- Event-Seite: Tabs ---------- */

.tab-head { margin-bottom: var(--s-4); }
.tab-note { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); color: var(--text-muted); font-size: var(--fs-sm); }
.live-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ember); animation: ember-pulse 1.8s var(--ease) infinite; }

/* Punkte */
.points-figures { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-bottom: var(--s-6); }
.points-sections { columns: 2 28rem; column-gap: var(--s-4); }
.points-section {
  break-inside: avoid;
  margin-bottom: var(--s-4);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden;
  container-type: inline-size;
}
.points-section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.points-section-head h3, .points-section-title { margin: 0; font-size: var(--fs-md); font-weight: 600; font-family: var(--font-display); letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.points-section-head .muted { font-size: var(--fs-sm); }
.points-bosses { list-style: none; margin: 0; padding: 0; }
.points-boss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name pts" "stat stat";
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-5);
}
.points-boss + .points-boss { border-top: 1px solid var(--line); }
.points-boss-name { grid-area: name; overflow-wrap: anywhere; font-weight: 500; }
.points-boss-points { grid-area: pts; font-family: var(--font-display); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.points-boss-stat { grid-area: stat; display: grid; grid-template-columns: minmax(0, 1fr) 6.75rem; align-items: center; gap: var(--s-3); }
.points-boss-stat progress { height: 4px; }
.points-boss-pct { color: var(--text-muted); font-size: var(--fs-sm); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.points-boss.all-killed .points-boss-pct { color: var(--gold); }
.points-boss.no-stat { grid-template-areas: "name pts"; }
@container (min-width: 30rem) { /* breite Karte: alles in einer Zeile */
  .points-boss { grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem) 2rem; grid-template-areas: "name stat pts"; align-items: center; padding-block: var(--s-2); min-height: 48px; }
  .points-boss-points { text-align: right; }
  .points-boss.no-stat { grid-template-columns: minmax(0, 1fr) 2rem; grid-template-areas: "name pts"; }
}

/* Teilnehmer */
.people { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.person-card {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-card);
  min-width: 0;
}
.person-card-main { flex: 1; min-width: 0; }
.person-card-name { display: flex; align-items: center; gap: var(--s-1); margin: 0; font-weight: 600; min-width: 0; }
.person-card-name > a, .person-card-name > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; color: var(--text); text-decoration: none; }
.person-card-name > a:hover { color: var(--ember-bright); }
.person-card-points { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ---------- Serien ---------- */

.series-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.card.series-card { display: flex; flex-direction: column; gap: var(--s-3); }
.series-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.series-card-title { margin: 0; font-size: var(--fs-md); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.series-card-desc { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.series-card-parts { counter-reset: part; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.series-card-parts li { counter-increment: part; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.series-card-parts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-card-parts li:not(.series-card-more)::before {
  content: counter(part);
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--text-muted); font-size: 0.6875rem; font-weight: 600;
}
.series-card-parts li.part-running::before { border-color: var(--ember); color: var(--ember); background: var(--ember-faint); }
.series-card-parts li.part-finished::before { border-color: var(--gold); color: var(--gold); }
.series-card-more { padding-left: 28px; color: var(--text-muted); }
.series-card-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: auto 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--fs-sm); }
.series-card-foot > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.series-card-foot .icon { width: 16px; height: 16px; }

.series-head .page-header { margin-bottom: var(--s-4); }
.series-head .page-header h1 { overflow-wrap: anywhere; }
.series-head .meta { margin-bottom: var(--s-8); }
/* Handy: nur Platz, Name und Summe – die Punkte je Event stehen auf den Eventseiten. */
@media (max-width: 639.98px) { .series-table .per-event { display: none; } }
.series-steps { counter-reset: step; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 0 0 var(--s-8); padding: 0; list-style: none; }
.series-step { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; }
.series-step-num {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; color: var(--text-muted);
}
.step-running .series-step-num { border-color: var(--ember); color: var(--ember); background: var(--ember-faint); box-shadow: 0 0 16px var(--ember-soft); }
.step-finished .series-step-num { border-color: var(--gold); color: var(--gold); }
.series-step-body { display: grid; gap: var(--s-1); min-width: 0; }
.series-step-name { color: var(--text); font-weight: 600; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.series-step-name:hover { color: var(--ember-bright); }
.series-step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }

.standings .rank { font-size: var(--fs-md); }
.standings tr.podium-1 td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.standings tr.podium-2 td:first-child { box-shadow: inset 3px 0 0 var(--silver); }
.standings tr.podium-3 td:first-child { box-shadow: inset 3px 0 0 var(--bronze); }
.standings th a { display: inline-block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--text-muted); }
.standings th a:hover { color: var(--text); }
.standings td.total strong { color: var(--gold); font-family: var(--font-display); font-size: var(--fs-md); }
.standing-who { display: flex; align-items: center; gap: var(--s-2); min-width: 10rem; }
.standing-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; text-decoration: none; }
a.standing-name:hover { color: var(--ember-bright); }

/* Serien verwalten */
.series-manage { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; }
@media (max-width: 859.98px) { .series-manage { grid-template-columns: minmax(0, 1fr); } }
.series-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.card.series-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin: 0; padding: var(--s-4) var(--s-5); }
.series-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.series-row-meta { display: flex; align-items: center; gap: var(--s-3); flex: none; font-size: var(--fs-sm); }
.card.series-create { margin: 0; max-width: none; }
.series-create > .btn { justify-self: start; }

.series-edit { display: grid; gap: var(--s-4); max-width: 46rem; }
.series-edit > .card { margin: 0; }
.series-edit .settings-form { max-width: none; }
.series-order { margin: var(--s-4) 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.series-order-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.series-order-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); flex: 1; min-width: 0; }
.series-order-name a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.series-order-name a:hover { color: var(--ember-bright); }
.series-order .row-actions { display: flex; gap: var(--s-1); flex: none; }
.series-order .row-actions form { display: flex; gap: var(--s-1); margin: 0; }
.series-order-empty { margin: var(--s-4) 0; padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-control); color: var(--text-muted); text-align: center; }
.series-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--s-2); }
.series-add .field { flex: 1 1 16rem; min-width: 0; }

/* ---------- Regeln ---------- */

.rules-layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
@media (max-width: 899.98px) { .rules-layout { grid-template-columns: minmax(0, 1fr); } }
.rules-main .rich { max-width: var(--prose-width); }
.rule-box {
  display: flex; align-items: center; gap: var(--s-4);
  max-width: var(--prose-width); margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5);
  background: linear-gradient(90deg, var(--ember-faint), transparent), var(--bg-raised);
  border: 1px solid var(--ember-soft); border-left: 3px solid var(--ember); border-radius: var(--radius-card);
}
.rule-box .flame { flex: none; width: 24px; height: 32px; }
.rule-box p { margin: 0; font-size: var(--fs-md); }
.rules-scoring { position: sticky; top: var(--s-4); margin: 0; }
@media (max-width: 899.98px) { .rules-scoring { position: static; } }
.rules-scoring h2 { margin: 0 0 var(--s-4); font-size: var(--fs-lg); }
.rules-scoring .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rules-scoring dd { font-size: var(--fs-lg); }

.rules-editor { display: grid; gap: var(--s-4); }
.rules-editor-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rules-textarea { min-height: 24rem; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--fs-sm); line-height: 1.6; }
.rules-editor .rules-pane-preview { display: none; padding: var(--s-5); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-card); min-height: 12rem; }
.rules-editor[data-mode="preview"] .rules-pane-edit { display: none; }
.rules-editor[data-mode="preview"] .rules-pane-preview { display: block; }
.rules-pane-preview .rich { max-width: var(--prose-width); }

/* Beitreten */
.join { max-width: 40rem; margin: var(--s-8) auto 0; display: grid; gap: var(--s-5); }
.join .page-header { margin-bottom: 0; }
.join .card, .join .alert { margin: 0; }
.join-title { margin: 0 0 var(--s-3); font-size: var(--fs-xl); }
.join-login h2 { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.join-form { max-width: none; }
.join-rules { border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-sunken); }
.join-rules summary { min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--s-4); font-weight: 600; cursor: pointer; }
.join-rules[open] summary { border-bottom: 1px solid var(--line); }
.join-rules .rich { padding: var(--s-4); max-height: 24rem; overflow-y: auto; }
.event-hero-hint { margin: 0; color: var(--text-muted); }
.event-hero-action { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Overlay-Seite: Voreinstellungen, OBS-Schritte, klebende Vorschau */
.overlay-main { display: grid; gap: var(--s-6); min-width: 0; }
.overlay-main > * { margin: 0; }
.overlay-side { min-width: 0; }
.overlay-preview .checker { display: block; width: fit-content; }
@media (min-width: 900px) and (min-height: 820px) {
  .overlay-side { position: sticky; top: calc(var(--s-6) + 56px); }
}
.section-title { font-size: var(--fs-md); margin: 0; }
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); }
.preset {
  display: grid; gap: var(--s-1); align-content: start; text-align: left; cursor: pointer;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-card);
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font: inherit;
  transition: border-color 150ms, background 150ms;
}
.preset:hover { border-color: var(--text-muted); }
.preset[aria-pressed="true"] { border-color: var(--ember); background: var(--ember-soft); }
.preset-title { font-weight: 600; }
.preset-text { font-size: var(--fs-sm); color: var(--text-muted); }
.steps { margin: var(--s-3) 0 0; padding-left: 1.5rem; display: grid; gap: var(--s-2); }
.steps li::marker { color: var(--ember); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .preset { transition: none; } }

/* Import-Vorschau */
.import-issues ul { margin: var(--s-2) 0; padding-left: var(--s-5); font-size: var(--fs-sm); }
.import-issues p { margin: 0; }
.import-issues-title { font-weight: 600; }
.import-issues .issue-error::marker { color: var(--danger); }
.import-issues .issue-warning::marker { color: var(--gold); }

/* Training: „Neuer Versuch“ direkt über dem Board, sobald ein Versuch vorbei ist. */
.training-next { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.training-next p { margin: 0; }
.attempts .is-best td { background: var(--gold-soft); }

/* Twitch-Login */
.auth-twitch { display: grid; gap: var(--s-4); }
.auth-twitch .btn { justify-content: center; width: 100%; }
.auth-twitch p { margin: 0; font-size: .9rem; }
.auth-admin { margin-top: var(--s-6); }
.auth-admin > summary { cursor: pointer; color: var(--text-muted); font-size: .9rem; width: max-content; }
.auth-admin > summary:hover { color: var(--text); }
.auth-admin[open] > summary { margin-bottom: var(--s-3); }
.profile-twitch { display: flex; align-items: center; gap: var(--s-2); margin: 0; }