* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #1b1d2a;
  color: #f2f2f2;
  -webkit-user-select: none;
  user-select: none;
  /* kein Doppeltipp-Zoom (stört beim schnellen Drücken), Zoomen mit zwei Fingern bleibt möglich;
     die Spiel-Buttons selbst haben touch-action: none */
  touch-action: manipulation;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 16px;
}

h1 { font-size: 1.2rem; margin: 0; }
#version { font-size: 0.75rem; font-weight: normal; opacity: 0.6; color: inherit; text-decoration: none; }
#version:hover, #version:focus-visible { opacity: 1; text-decoration: underline; }  /* führt zu „Was ist neu?“ */
#status { font-size: 0.9rem; opacity: 0.8; }

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 16px;
}

#game canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 6px;
}

/* nach einem Tod gesperrt: erst loslassen, dann zählt der Button wieder */
#my-button.locked, #pad button.locked {
  background: repeating-linear-gradient(45deg, #8e1b1b 0 8px, #5d1010 8px 16px);
}
/* der eigene Button war schuld: kurz gelb umrandet blinken */
#my-button.blamed, #pad button.blamed { animation: blamed 0.5s ease-in-out 6 alternate; }
@keyframes blamed {
  to { box-shadow: 0 0 0 5px #ffd54f; }
}

#my-button {
  width: 100%;
  min-height: 120px;
  font-size: 2rem;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  background: #e53935;
  color: #fff;
  touch-action: none;
  cursor: pointer;
}
#my-button.down { background: #43a047; transform: scale(0.98); }

/* Mehrere eigene Buttons (Solo oder z. B. 2 Spieler × 2): zum Antippen nebeneinander –
   laufen links, ducken und springen rechts (Daumen). Spalten setzt main.js. */
#pad {
  display: grid;
  gap: 10px;
}
#pad[hidden] { display: none; }
#pad button {
  min-height: 110px;
  font-size: 2.6rem;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  background: #e53935;
  color: #fff;
  cursor: pointer;
  touch-action: none;           /* kein Scrollen/Zoomen beim Drücken */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  /* iOS: kein Menü bei langem Drücken */
  -webkit-tap-highlight-color: transparent;
}
#pad button[data-pad="jump"] { background: #1e88e5; }
#pad button[data-pad="duck"] { background: #8e24aa; }
#pad button[data-pad="boost"] { background: #ef6c00; }
#pad button[data-pad="dash"] { background: #00897b; }
#pad button[data-pad="switch"] { background: #f9a825; }
#pad.many button { font-size: 2rem; }
#my-button, #pad button { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#my-button[hidden] { display: none; }  /* mehrere eigene Buttons: nur das Pad */
/* Tastenkappen auf den Buttons – nur am PC (Klasse .keyboard setzt main.js) */
.key-hint { display: none; }
.keyboard .key-hint { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 8px; }
.key-hint kbd {
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
#pad.many .key-hint kbd { padding: 0 4px; font-size: 0.7rem; }
/* Koop: wer den Button hält (und wie oft schuld), klein im Button; in Solo leer */
.button-name { font-size: 0.85rem; font-weight: normal; opacity: 0.9; }
.button-name:empty { display: none; }
#pad.many .button-name { font-size: 0.7rem; }
#pad button.down { background: #43a047; transform: scale(0.97); }

.ranking-variant-row { font-size: 0.95rem; }
.ranking-variant-row label { margin-right: 8px; }
#ranking-day {
  padding: 4px 8px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
}
.ranking-variant-row { text-align: center; margin: 0 0 12px; }
#my-button:disabled { background: #444; cursor: default; }

#hint { text-align: center; opacity: 0.7; font-size: 0.9rem; }
#hint:empty { display: none; }

h1 a { color: inherit; text-decoration: none; }

#lobby { text-align: center; padding: 48px 0; }
/* Hinweis im Kopf des Dashboards: mittig in der Titelzeile, Schrift so groß wie der Titel; nur im Dashboard
   (nicht im Spiel und nicht auf den anderen Seiten). Schmale Fenster: eigene Zeile unter Titel und Knöpfen. */
.vibe-badge { display: none; margin: 0; font-size: 1.2rem; line-height: 1.4; text-align: center; white-space: nowrap; }
.vibe-pill {
  display: inline-block; padding: 2px 14px; border-radius: 999px;
  border: 1px solid #6c5ce7; background: #2a2550; color: #f2f2f2;
}
.vibe-pill strong { color: #c9b8ff; }
body:has(#lobby:not([hidden])) .vibe-badge { display: block; }
@media (min-width: 1100px) {
  header { position: relative; }
  .vibe-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 1099px) {
  header { flex-wrap: wrap; row-gap: 8px; }
  .vibe-badge { order: 3; flex-basis: 100%; white-space: normal; }
}
#lobby-error { color: #ff8a80; min-height: 1.2em; }
.lobby-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lobby-note { opacity: 0.7; font-size: 0.9rem; }

#dev { margin: 24px auto 0; max-width: 320px; }
#dev summary { cursor: pointer; opacity: 0.7; font-size: 0.9rem; }
#dev[open] summary { margin-bottom: 8px; }
#dev label { margin-right: 8px; }
#start-level {
  width: 6em;
  padding: 6px 8px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  -webkit-user-select: text;
  user-select: text;
}
#create, #create-solo {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 16px 32px;
  border: none;
  border-radius: 12px;
  background: #43a047;
  color: #fff;
  cursor: pointer;
}
#create, #create-solo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 300px;      /* beide gleich breit; der Hinweis bricht um */
  max-width: 100%;
}
#create .start-hint, #create-solo .start-hint { font-size: 0.8rem; font-weight: normal; opacity: 0.9; }
#create-solo { background: #5e35b1; }
#create:disabled, #create-solo:disabled { background: #444; cursor: default; }

/* oben: Menü und Links links, Pause (bzw. Applaus für Zuschauer) in der Mitte */
.play-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.play-top-left { display: flex; flex-wrap: wrap; gap: 8px; }
.play-top #back { margin-bottom: 0; }
.play-top #pause, .play-top #applause { font-size: 0.9rem; padding: 6px 14px; }
@media (max-width: 560px) {  /* Handy: alles in einer Zeile, „Links“ kurz, Pause rechts auf gleicher Höhe */
  .play-top { display: flex; align-items: center; }
  .play-top-left { flex-wrap: nowrap; }
  .play-top-center { margin-left: auto; }
  #share-toggle .long { display: none; }
}
/* Links zum Einladen: eingeklappt, damit Spiel und Buttons mehr Platz haben */
#share-toggle {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
#share-toggle:hover { background: #444a68; }
#share-toggle .share-arrow { display: inline-block; transition: transform 0.15s; }
#share-toggle[aria-expanded="true"] .share-arrow { transform: rotate(180deg); }
#share { margin-bottom: 12px; font-size: 0.9rem; }
#share[hidden] { display: none; }
#share label { display: block; opacity: 0.8; margin-bottom: 4px; }
.share-row { display: flex; gap: 8px; }
#share-link {
  flex: 1;
  min-width: 0;
  padding: 8px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  -webkit-user-select: text;
  user-select: text;
}
#share [data-copy], #share .qr-button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #1e88e5;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
#share .qr-button { background: #5e35b1; }
#share .qr-button[aria-expanded="true"] { background: #43a047; }
.share-item + .share-item { margin-top: 8px; }
.share-item[hidden] { display: none; }

#qr { margin: 12px auto 0; text-align: center; }
#qr-code {
  width: min(260px, 70vw);
  margin: 0 auto;
  padding: 12px;
  border-radius: 8px;
  background: #fff;   /* Scanner brauchen dunkle Punkte auf hellem Grund */
}
#qr-code svg { display: block; width: 100%; height: auto; }
#qr figcaption { margin-top: 6px; opacity: 0.8; }

#back {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font-size: 0.9rem;
  text-decoration: none;
}
#back:hover { background: #444a68; }

.name-row { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.name-input {
  width: 12em;
  padding: 8px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  -webkit-user-select: text;
  user-select: text;
}
#name-form { text-align: center; padding: 48px 0; }
#name-form button {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  background: #43a047;
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
#name-form button.secondary { background: #2c3047; border: 1px solid #444a68; font-weight: normal; }

/* Lobby: Einstellungen für die neue Session – Zeilen mit Schiebeschalter */
.options-title {
  max-width: 420px;
  margin: 14px auto 6px;
  padding-left: 4px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.options-title[hidden], .options[hidden] { display: none; }
.options {
  max-width: 420px;
  margin: 0 auto 4px;
  border: 1px solid #2c3047;
  border-radius: 12px;
  background: #1f2233;
  text-align: left;
  overflow: hidden;
}
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid #2c3047;
  cursor: pointer;
}
.options > .option:first-child { border-top: none; }  /* die Zusatz-Buttons folgen auf „Level des Tages“: mit Linie */
.option[hidden] { display: none; }
label.option:hover { background: #252a40; }
/* Level des Tages: Schwierigkeit und Zusatz-Buttons sind fest – ausgegraut, nicht klickbar */
.option.locked { opacity: 0.55; cursor: default; }
label.option.locked:hover { background: none; }
.option.locked .segmented label { cursor: default; }
.option-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2c3047;
  font-size: 1.15rem;
}
.option-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.option-text strong { font-size: 1rem; }
.option-text small { font-size: 0.8rem; opacity: 0.7; }

/* Schiebeschalter (echte Checkbox, nur anders gezeichnet) */
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background: #444a68;
  cursor: pointer;
  transition: background 0.2s;
}
.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f2f2f2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
}
.switch:checked { background: #43a047; }
.switch:checked::before { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid #64b5f6; outline-offset: 2px; }

/* Segment-Knöpfe für die Spielerzahl (echte Radio-Buttons, nur anders gezeichnet) */
.option-players { cursor: default; flex-wrap: wrap; row-gap: 10px; }
.option-players .option-text { min-width: 150px; }  /* sonst rutschen die Knöpfe in eine eigene Zeile */
.option-players .segmented { margin-left: auto; }
.lobby-actions { margin-top: 18px; }
.segmented { display: flex; gap: 6px; flex: none; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px;
  line-height: 1.2;
  border: 1px solid #444a68;
  border-radius: 8px;
  background: #2c3047;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.segmented span small { font-size: 0.7rem; opacity: 0.8; }
.segmented input:checked + span { background: #1e88e5; border-color: #1e88e5; }
.segmented input:focus-visible + span { outline: 2px solid #64b5f6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::before, .segmented span { transition: none; }
}
/* Lobby: Karte zur Übersicht der laufenden Sessions */
.live-link {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 20px auto 0;
  padding: 12px 16px;
  border: 1px solid #444a68;
  border-radius: 12px;
  background: linear-gradient(135deg, #252a40, #1f2233);
  color: #f2f2f2;
  text-align: left;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.live-link:hover, .live-link:focus-visible {
  border-color: #1e88e5;
  box-shadow: 0 4px 16px rgba(30, 136, 229, 0.25);
  transform: translateY(-2px);
  outline: none;
}
.live-link-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2c3047;
  font-size: 1.4rem;
}
.live-link-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-link-text strong { font-size: 1.05rem; }
#live-link-note { font-size: 0.85rem; opacity: 0.75; }
#live-link-note.on { opacity: 1; color: #ef9a9a; }
#live-link-note.on::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #e53935;
  vertical-align: 1px;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6); }
  50% { box-shadow: 0 0 0 5px rgba(229, 57, 53, 0); }
}
.live-link-arrow { flex: none; font-size: 1.3rem; opacity: 0.6; transition: transform 0.15s, opacity 0.15s; }
.live-link:hover .live-link-arrow, .live-link:focus-visible .live-link-arrow { opacity: 1; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .live-link, .live-link-arrow { transition: none; }
  .live-link:hover, .live-link:hover .live-link-arrow { transform: none; }
  #live-link-note.on::before { animation: none; }
}

#howto-link, #releases-link { margin-top: 10px; }

/* Neuigkeiten (?view=releases): eine Karte pro Version, die neueste hervorgehoben */
#releases { max-width: 680px; margin: 0 auto; text-align: left; -webkit-user-select: text; user-select: text; }
/* Datenschutz: Blöcke wie die Neuigkeiten, Text markierbar */
#privacy { max-width: 760px; margin: 0 auto; text-align: left; -webkit-user-select: text; user-select: text; }
#privacy h2 { font-size: 1.4rem; text-align: center; margin: 4px 0 4px; }
#privacy > .lobby-note { text-align: center; margin-top: 0; }
.privacy-block { margin-top: 12px; padding: 14px 18px; border: 1px solid #333852; border-radius: 14px; background: #22263a; line-height: 1.5; }
.privacy-block h3 { margin: 0 0 6px; font-size: 1.1rem; }
.privacy-block p, .privacy-block ul { margin: 6px 0; }
.privacy-block ul { padding-left: 20px; }
.privacy-operator { white-space: pre-line; }  /* Zeilen aus [server] operator */
.privacy-operator.missing { color: #ffb74d; }
/* Impressum: wie die Datenschutzseite; Angaben aus [imprint] */
#imprint { max-width: 760px; margin: 0 auto; text-align: left; -webkit-user-select: text; user-select: text; }
#imprint h2 { font-size: 1.4rem; text-align: center; margin: 4px 0 4px; }
#imprint > .lobby-note { text-align: center; margin-top: 0; }
#imprint .privacy-block p { white-space: pre-line; overflow-wrap: anywhere; }  /* Zeilen aus config.toml */
#imprint .privacy-block a, #privacy .privacy-block a { color: #9ad0ff; }
.imprint-label { display: block; font-size: 0.85rem; opacity: 0.7; }
.imprint-missing { color: #ffb74d; }
/* Statistik: Kacheln „Gerade jetzt“ und Tabelle nach Zeitraum */
#stats { max-width: 900px; margin: 0 auto; text-align: left; }
#stats h2 { font-size: 1.4rem; text-align: center; margin: 4px 0 4px; }
#stats > .lobby-note { text-align: center; }
.stats-heading { margin: 20px 0 8px; font-size: 0.8rem; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.stats-now { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stats-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px;
  border: 1px solid #333852; border-radius: 14px; background: #22263a;
}
.stats-value { font-size: 2rem; font-weight: bold; font-variant-numeric: tabular-nums; }
.stats-label { font-size: 0.85rem; opacity: 0.75; text-align: center; }
.stats-scroll { overflow-x: auto; padding: 6px 12px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.stats-table th, .stats-table td { padding: 8px 10px; border-bottom: 1px solid #333852; }
.stats-table thead th { opacity: 0.7; font-weight: normal; text-align: right; white-space: nowrap; }
.stats-table tbody th { text-align: left; font-weight: normal; white-space: nowrap; }
.stats-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-table tr:last-child th, .stats-table tr:last-child td { border-bottom: none; }
#stats-note { text-align: left; }
@media (max-width: 600px) {
  .stats-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-value { font-size: 1.6rem; }
  .stats-table { font-size: 0.85rem; }
  .stats-table th, .stats-table td { padding: 6px 5px; }
  .stats-table tbody th { white-space: normal; min-width: 8em; }  /* lange Bezeichnungen dürfen umbrechen */
}

/* Lizenzen: Tabelle der Fremdkomponenten (wie die Datenschutz-Blöcke) */
#licenses { max-width: 900px; margin: 0 auto; text-align: left; -webkit-user-select: text; user-select: text; }
#licenses h2 { font-size: 1.4rem; text-align: center; margin: 4px 0 4px; }
#licenses > .lobby-note { text-align: center; }
.licenses-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.licenses-table th, .licenses-table td { padding: 8px 10px; border-bottom: 1px solid #333852; vertical-align: top; text-align: left; }
.licenses-table th { opacity: 0.7; font-weight: normal; }
.licenses-table small { opacity: 0.7; }
.licenses-table a { color: #90caf9; overflow-wrap: anywhere; }
@media (max-width: 600px) { .licenses-table { font-size: 0.8rem; } .licenses-table th, .licenses-table td { padding: 6px 4px; } }
/* Fußbereich: abgesetzt durch eine feine Linie über die Seitenbreite */
.site-footer {
  max-width: 1856px;
  margin: 32px auto 0;
  padding: 14px 16px 24px;
  border-top: 1px solid #333852;
  text-align: center;
  font-size: 0.85rem;
}
.site-footer a { color: #9aa3c7; text-decoration: none; }
.site-footer a:hover { color: #f2f2f2; text-decoration: underline; }
@media (max-width: 1920px) { .site-footer { margin-left: 16px; margin-right: 16px; } }
@media (min-width: 960px) and (max-width: 1920px) { .site-footer { margin-left: 32px; margin-right: 32px; } }
main:has(> #play:not([hidden])) ~ .site-footer { display: none; }  /* im Spiel: Platz fürs Spielfeld */
#releases h2 { font-size: 1.4rem; text-align: center; margin: 4px 0 4px; }
#releases > .lobby-note { text-align: center; margin-top: 0; }
#releases-list { display: grid; gap: 12px; margin-top: 14px; }
.release { padding: 14px 16px; border: 1px solid #333852; border-radius: 14px; background: #22263a; }
.release-latest { border-color: #1e88e5; }
.release h3 { margin: 0; font-size: 1.1rem; }
.release-version {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px;
  background: #333852; color: #9fa8da; font-size: 0.85rem; font-weight: 600; vertical-align: 1px;
}
.release-latest .release-version { background: #1e88e5; color: #fff; }
.release-date { margin: 4px 0 8px; font-size: 0.85rem; opacity: 0.7; }
.release ul { margin: 0; padding-left: 20px; }
.release li { line-height: 1.5; margin-bottom: 4px; }
.live-link-sub { font-size: 0.85rem; opacity: 0.75; }

/* Anleitung (/?view=howto) */
#howto { max-width: 820px; margin: 0 auto; text-align: left; -webkit-user-select: text; user-select: text; }
#howto h2 { font-size: 1.4rem; text-align: center; margin: 4px 0 4px; }
#howto > .lobby-note { text-align: center; margin-top: 0; }
.howto-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 18px; }
.howto-toc a {
  padding: 4px 10px;
  border: 1px solid #444a68;
  border-radius: 999px;
  color: #c5cae9;
  font-size: 0.85rem;
  text-decoration: none;
}
.howto-toc a:hover, .howto-toc a:focus-visible { border-color: #1e88e5; color: #fff; outline: none; }
.howto-step {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid #333852;
  border-radius: 14px;
  background: #22263a;
  scroll-margin-top: 12px;
}
.howto-step.howto-wide { grid-template-columns: 1fr; }
.howto-art { width: 100%; height: auto; display: block; border-radius: 10px; }
.howto-step h3 { margin: 0 0 8px; font-size: 1.1rem; }
.howto-step p, .howto-step li { line-height: 1.5; }
.howto-step p { margin: 0 0 8px; }
.howto-step ul, .howto-step ol { margin: 0 0 8px; padding-left: 20px; }
.howto-step li { margin-bottom: 4px; }
.howto-keys { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 0.92rem; }
.howto-keys th, .howto-keys td { padding: 6px 8px; border-bottom: 1px solid #333852; text-align: left; vertical-align: top; }
.howto-keys th { color: #9fa8da; font-weight: 600; }
.howto-keys td:first-child { white-space: nowrap; font-weight: 600; }
.howto-extra td { color: #c5cae9; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border: 1px solid #555b7a;
  border-bottom-width: 3px;
  border-radius: 5px;
  background: #2c3047;
  font: 600 0.82rem system-ui, sans-serif;
  text-align: center;
}
.howto-go { text-align: center; margin-top: 12px; }
.howto-button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 10px;
  background: #1e88e5;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.howto-button:hover, .howto-button:focus-visible { background: #1976d2; outline: none; }
@media (max-width: 600px) {
  .howto-step { grid-template-columns: 1fr; padding: 12px; }
  .howto-art { max-width: 360px; margin: 0 auto; }
  .howto-keys { font-size: 0.85rem; }
  .howto-keys td:first-child { white-space: normal; }
}

/* Übersicht der öffentlichen Sessions */
#live { max-width: 640px; margin: 0 auto; text-align: left; }
#live h2 { font-size: 1.2rem; text-align: center; margin: 4px 0 4px; }
#live > .lobby-note { text-align: center; margin-top: 0; }
.live-back { margin: 0; }
.live-back a { color: #64b5f6; }
.tabs button[aria-pressed="true"] { background: #1e88e5; border-color: #1e88e5; }
#live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.live-card {
  padding: 12px 14px;
  border: 1px solid #2c3047;
  border-radius: 8px;
  background: #1f2233;
}
.live-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.live-players { font-weight: bold; overflow-wrap: anywhere; }
.live-mode {
  padding: 1px 8px;
  border-radius: 10px;
  background: #2c3047;
  font-size: 0.8rem;
}
.live-stats { margin: 6px 0; font-size: 0.9rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.live-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.85rem; background: #1b5e20; }
.live-status.waiting { background: #6b5a2a; color: #ffd54f; }
.live-status.paused { background: #37474f; }
.live-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.live-actions a.watch-button {
  padding: 6px 14px;
  border-radius: 6px;
  background: #1e88e5;
  color: #fff;
  text-decoration: none;
}
.live-actions button {
  padding: 5px 12px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.live-url { flex-basis: 100%; font-size: 0.8rem; opacity: 0.7; overflow-wrap: anywhere; }

#ranking { margin: 40px auto 0; max-width: 640px; text-align: left; }

/* Lobby auf breiten Bildschirmen: nutzt die ganze Breite – oben die Einstellungen in Spalten und rechts
   Name, Start und Links, darunter das Ranking in einer eigenen Zeile (schmal: eine Spalte wie bisher) */
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.lobby-links .options-title + .live-link { margin-top: 0; }  /* direkt unter „Zuschauen & Infos“ */
/* Handy (eine Spalte): alle Karten so hoch wie die höchste – Überschrift in eigener, normaler Zeile */
@media (max-width: 959px) {
  .lobby-links { display: grid; grid-template-rows: auto; grid-auto-rows: 1fr; justify-items: center; row-gap: 10px; margin-top: 20px; }
  .lobby-links .options-title { margin: 0; width: 100%; justify-self: center; }
  .lobby-links .live-link, .lobby-links #howto-link, .lobby-links #releases-link { width: 100%; margin: 0; }
}
@media (min-width: 960px) {
  main:has(> #lobby:not([hidden])) { max-width: 1920px; padding: 0 32px 32px; }
  #lobby { padding-top: 32px; }
  .lobby-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "name name" "a b" "start start" "links links" "ranking ranking";
    column-gap: 32px;
    align-items: stretch;  /* Spalten oben und unten bündig */
  }
  /* Kästen füllen die Spaltenhöhe; der zusätzliche Platz verteilt sich gleichmäßig auf ihre Zeilen */
  .lobby-group { display: flex; flex-direction: column; }
  .lobby-group > .options-title, .lobby-group > .options { margin-left: 0; margin-right: 0; align-self: stretch; }
  .lobby-group > .options:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; }
  .lobby-group > .options > .option:not([hidden]), .lobby-group #extras { flex: 1 1 auto; }
  .lobby-group #extras { display: flex; flex-direction: column; }
  .lobby-group #extras > .option { flex: 1 1 auto; }
  .lobby-group-a { grid-area: a; }
  .lobby-group-b { grid-area: b; }
  .lobby-name { grid-area: name; align-self: start; }  /* bleibt oben, auch wenn das Dev-Feld daneben aufgeklappt ist */
  .lobby-start { grid-area: start; }
  /* Dev-Modus: in der Zeile des Namens, linksbündig (der Name bleibt mittig) */
  .lobby-grid > #dev { grid-area: name; justify-self: start; align-self: start; z-index: 1; max-width: 300px; margin: 8px 0 0; text-align: left; }
  .lobby-links { grid-area: links; }
  .lobby-grid .options-title, .lobby-grid .options, .lobby-grid .live-link { max-width: none; }
  .lobby-group .options-title:first-child { margin-top: 0; }
  .lobby-grid .name-row { margin: 0 0 20px; }  /* eigene Zeile oben, mittig */
  /* Start-Buttons unter den Einstellungen nebeneinander: Koop unter der linken, Solo unter der rechten Spalte */
  .lobby-start .lobby-actions { flex-wrap: nowrap; gap: 32px; margin-top: 20px; }
  .lobby-start #create, .lobby-start #create-solo { flex: 1 1 0; width: auto; min-width: 0; }
  /* Links: mittlere Breite eine Reihe unter den Start-Buttons */
  .lobby-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin-top: 20px; }
  .lobby-links .options-title { grid-column: 1 / -1; margin: 0 0 6px; justify-self: stretch; }  /* links wie die anderen */
  /* gleich große Karten: Abstände nur über das Raster (der Abstand oben aus der Handy-Ansicht entfällt) */
  .lobby-links .live-link, .lobby-links #howto-link, .lobby-links #releases-link { margin: 0 0 16px; }
  .lobby-grid #ranking {
    grid-area: ranking;
    margin: 36px 0 0;
    max-width: none;
    padding: 4px 24px 24px;
    border: 1px solid #2c3047;
    border-radius: 12px;
    background: #1f2233;
  }
}
@media (min-width: 1280px) {
  .lobby-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(300px, 380px);
    grid-template-areas: "name name name" "a b links" "start start links" "ranking ranking ranking";
  }
  /* breit: Links rechts neben den Einstellungen, untereinander und über die ganze Spaltenhöhe verteilt
     (die Überschrift hält sie oben bündig mit den Kästen) */
  .lobby-links { display: flex; flex-direction: column; margin-top: 0; }
  .lobby-links .live-link { flex: 1 1 0; margin-left: 0; margin-right: 0; }  /* alle gleich hoch */
  .lobby-links .live-link:last-child, .lobby-links #releases-link:last-child { margin-bottom: 0; }  /* unten bündig */
}
#ranking h2 { font-size: 1.1rem; text-align: center; margin: 0 0 4px; }
#ranking-lives { text-align: center; margin: 0 0 12px; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; }
.tabs button {
  padding: 6px 18px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  cursor: pointer;
}
.phaser-missing { padding: 24px 16px; text-align: center; }
.tabs-small { margin-top: -4px; }
.tabs-small button { font-size: 0.85rem; padding: 4px 12px; }
/* Ranking: Kopf mit Reitern (welche Liste), darunter die Filter mit kleiner Beschriftung */
.ranking-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  border-bottom: 1px solid #2c3047;
  margin-bottom: 16px;
}
.ranking-head h2 { margin: 12px 0 10px; }
.ranking-tabs { display: flex; gap: 4px; }
.ranking-tabs button {
  padding: 10px 16px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: #b8bdd6;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ranking-tabs button:hover { color: #f2f2f2; }
.ranking-tabs button[aria-pressed="true"] { color: #f2f2f2; border-bottom-color: #1e88e5; }
.ranking-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; margin-bottom: 14px; }
.ranking-filter { display: flex; flex-direction: column; gap: 4px; }
.ranking-filter[hidden] { display: none; }
.ranking-filter-label {
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ranking-segmented {
  display: inline-flex;
  border: 1px solid #444a68;
  border-radius: 8px;
  overflow: hidden;
}
.ranking-segmented button {
  padding: 6px 16px;
  border: none;
  border-left: 1px solid #444a68;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.ranking-segmented button:first-child { border-left: none; }
.ranking-segmented button:hover { background: #363b57; }
.ranking-segmented button[aria-pressed="true"] { background: #1e88e5; }
.ranking-day-controls { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) {
  .ranking-head { justify-content: center; }
  .ranking-tabs { width: 100%; justify-content: center; }
  .ranking-tabs button { flex: 1 1 0; padding: 10px 6px; }
  .ranking-filters { justify-content: center; }
}

/* schmale Bildschirme: nur die Tabelle scrollt waagerecht, Überschrift und Knöpfe bleiben stehen */
.ranking-scroll { overflow-x: auto; }
.lobby-grid > #ranking { width: 100%; min-width: 0; justify-self: center; }  /* so breit wie der Platz, nicht wie die Tabelle */
#ranking-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
@media (max-width: 600px) {
  #ranking-table { font-size: 0.8rem; }
  #ranking-table th, #ranking-table td { padding: 5px 6px; }
  #ranking-table td:nth-child(2) { min-width: 7em; }  /* Namen nicht Wort für Wort umbrechen */
}
#ranking-table th, #ranking-table td { padding: 6px 8px; border-bottom: 1px solid #2c3047; }
#ranking-table td:nth-child(1), #ranking-table td:nth-child(4), #ranking-table td:nth-child(5),
#ranking-table td:nth-child(6) { text-align: right; font-variant-numeric: tabular-nums; }
#ranking-table td:nth-child(3) { white-space: nowrap; }  /* Variante: Symbole der Zusatz-Buttons, Spielerzahl */
#ranking-table th { text-align: left; opacity: 0.8; font-weight: normal; }
/* Tages-Rangliste: nur ein Level – die Spalte „Level“ sagt nichts */
#ranking-table.daily th:nth-child(4), #ranking-table.daily td:nth-child(4) { display: none; }
#ranking-day-row[hidden], #ranking-grades[hidden] { display: none; }
#ranking-day-row select { margin-right: 8px; }
#daily-picture, #picture-close, #picture-save {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: #5e35b1;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
#daily-picture[hidden] { display: none; }
#picture-close { background: #2c3047; }
/* Bild des ganzen Levels (Level des Tages, ab dem nächsten Tag) */
.picture-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 11, 18, 0.8);
}
.picture-overlay[hidden] { display: none; }
.picture-card {
  width: 100%;
  max-width: 1100px;
  padding: 16px;
  border: 1px solid #444a68;
  border-radius: 10px;
  background: #1b1d2a;
  text-align: center;
}
.picture-card h2 { margin: 0 0 4px; font-size: 1.2rem; }
.picture-scroll {
  overflow-x: scroll;  /* Scrollbalken immer sichtbar: die Level sind viel breiter als der Bildschirm */
  overflow-y: auto;
  max-height: 65vh;
  margin: 12px 0;
  border-radius: 6px;
  background: #000;
  cursor: grab;
  scrollbar-color: #7e57c2 #2c3047;  /* Firefox */
  scrollbar-width: auto;
}
.picture-scroll.dragging { cursor: grabbing; }
.picture-scroll[hidden], #picture-save[hidden] { display: none; }
.picture-scroll::-webkit-scrollbar { height: 16px; width: 16px; }
.picture-scroll::-webkit-scrollbar-track { background: #2c3047; border-radius: 8px; }
.picture-scroll::-webkit-scrollbar-thumb { background: #7e57c2; border: 3px solid #2c3047; border-radius: 8px; }
.picture-scroll::-webkit-scrollbar-thumb:hover { background: #9575cd; }
.picture-scroll canvas { display: block; width: auto; }  /* Höhe setzt showLevelPicture (ganze Höhe sichtbar) */
.picture-actions { display: flex; justify-content: center; gap: 10px; }
#ranking-table th button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
}
#ranking-table th button[aria-pressed="true"] { font-weight: bold; text-decoration: none; }
#ranking-table th button[aria-pressed="true"]::after { content: " ▾"; }

#pause {
  display: block;
  margin: 0;
  padding: 6px 18px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font: inherit;
  cursor: pointer;
}
#pause[hidden] { display: none; }

#applause {
  display: block;
  margin: 0;
  padding: 6px 18px;
  border: 1px solid #6b5a2a;
  border-radius: 6px;
  background: #3a3322;
  color: #ffd54f;
  font: inherit;
  cursor: pointer;
}
#applause:disabled { opacity: 0.5; cursor: default; }
#applause[hidden] { display: none; }

/* 👏 steigt kurz im Spielfeld auf, wenn jemand applaudiert */
.clap {
  position: absolute;
  bottom: 12%;
  font-size: 2.2rem;
  pointer-events: none;
  animation: clap-rise 1.6s ease-out forwards;
}
@keyframes clap-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { transform: translateY(-10px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}

.header-right { display: flex; align-items: center; gap: 12px; }
#mute, #music {
  padding: 2px 8px;
  border: 1px solid #444a68;
  border-radius: 6px;
  background: #2c3047;
  color: #f2f2f2;
  font-size: 1rem;
  cursor: pointer;
}
#music[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
#mute.blocked, #music.blocked { animation: sound-hint 1.2s ease-in-out infinite alternate; }
@keyframes sound-hint {
  to { border-color: #ffd54f; box-shadow: 0 0 6px #ffd54f; }
}

#game-wrap { position: relative; margin-bottom: 12px; }
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 28, 0.6);
  border-radius: 6px;
}
.overlay[hidden] { display: none; }
.overlay .card {
  max-width: 90%;
  padding: 16px 24px;
  border-radius: 10px;
  background: #1b1d2a;
  border: 1px solid #444a68;
  text-align: center;
}
.overlay h2 { margin: 0 0 8px; font-size: 1.2rem; }
#watch-players { list-style: none; padding: 0; margin: 8px 0; font-weight: bold; }
#game-over-stats { font-weight: bold; margin: 4px 0; }
#game-over-culprits:empty { display: none; }
.game-over-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin-top: 10px; }
#game-over-again, #game-over-ok {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: #43a047;
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
#game-over-again[hidden], #game-over-ok[hidden] { display: none; }
#game-over-menu { color: #64b5f6; }
#watch-ok {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: #43a047;
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
#ready {
  width: 100%;
  min-height: 70px;
  margin-bottom: 10px;
  border: none;
  border-radius: 12px;
  background: #43a047;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  animation: sound-hint 1.2s ease-in-out infinite alternate;
}
#ready[hidden] { display: none; }