/* Partyspiele (party.js): Rahmen wie beim Kritzeln, Bühne in der Mitte, Chat rechts. */

.ansicht-party { width: min(1240px, calc(100% - 24px)); margin: 14px auto 30px; display: grid; gap: 10px; position: relative; }
.party-titel b { font-weight: 400; color: var(--gold); }
.party-titel b.rot, .party-karte .rot { color: var(--rot); }
.party-titel b.gruen, .party-karte .gruen { color: var(--stufe-selten); }
.party-raster { display: grid; grid-template-columns: 200px 1fr 280px; gap: 10px; align-items: start; }
.party-mitte { display: grid; gap: 10px; min-width: 0; }

.party-spieler { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.party-spieler li { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(10, 22, 40, 0.92); box-shadow: 0 0 0 2px var(--linie); font-size: 12px; }
.party-spieler li img { width: 28px; height: 28px; image-rendering: pixelated; }
.party-spieler li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-spieler li.ich { box-shadow: 0 0 0 2px var(--cyan); }
.party-spieler li.dran { background: #16304f; box-shadow: 0 0 0 2px var(--gold); }
.party-spieler li.weg { opacity: 0.45; }
.party-spieler li.raus { opacity: 0.55; text-decoration: line-through; }
.party-spieler .pkt { color: var(--gold); font-family: var(--pixel); font-size: 18px; }
.party-marke { font-size: 13px; min-width: 16px; text-align: center; }

.party-buehne { display: grid; gap: 12px; justify-items: center; padding: 16px; min-height: 260px; background: rgba(10, 22, 40, 0.92); box-shadow: var(--kante); align-content: start; }
.party-aktion:empty { display: none; }
.party-aktion { display: grid; gap: 8px; }
.party-form input { font-size: 18px; }
.party-leise { margin: 0; color: var(--leise); text-align: center; font-size: 13px; }
.party-weiter { justify-self: center; }
.party-hinweis { margin: 0; justify-self: center; padding: 6px 12px; background: var(--rot); color: #fff; font-size: 13px; }
.party-chat-spalte { min-height: 420px; }

.party-karte { display: grid; justify-items: center; gap: 6px; padding: 18px 24px; min-width: min(420px, 100%); text-align: center; background: var(--tafel-hell); box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--linie-hell); }
.party-karte small { font: 11px var(--mono); color: var(--leise); letter-spacing: 0.14em; }
.party-karte b { font: 40px var(--pixel); color: var(--gold); line-height: 1; overflow-wrap: anywhere; }
.party-karte span { color: var(--cyan); font-size: 14px; }
.party-karte p { margin: 4px 0 0; color: var(--text); font-size: 14px; max-width: 46ch; }
.party-karte.klein { padding: 8px 14px; min-width: 0; gap: 2px; }
.party-karte.klein b { font-size: 26px; }
.party-karte.imposter { box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--rot); }
.party-karte.imposter b { color: var(--rot); }
.party-regeln p { font-size: 15px; line-height: 1.5; }

.party-hinweise { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; }
.party-hinweise li { display: grid; grid-template-columns: 28px 120px 1fr; align-items: center; gap: 8px; padding: 6px 10px; background: var(--tafel); box-shadow: 0 0 0 1px var(--linie); }
.party-hinweise li.dran { box-shadow: 0 0 0 2px var(--gold); }
.party-hinweise img { width: 28px; height: 28px; image-rendering: pixelated; }
.party-hinweise span { color: var(--text); overflow-wrap: anywhere; }
.party-hinweise em { color: var(--leise); }
.tippt { color: var(--gold); animation: pulsieren 1s infinite; font-style: normal; }

.party-wahl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.party-wahlkarte { display: grid; justify-items: center; gap: 4px; width: 140px; padding: 10px 8px; background: var(--tafel); color: var(--text); border: 0; box-shadow: 0 0 0 2px var(--linie); font: inherit; cursor: pointer; }
.party-wahlkarte:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--cyan); }
.party-wahlkarte.gewaehlt { box-shadow: 0 0 0 3px var(--gold); background: #1d2a18; }
.party-wahlkarte:disabled { opacity: 0.4; cursor: default; }
.party-wahlkarte img { width: 48px; height: 48px; image-rendering: pixelated; }
.party-wahlkarte small { color: var(--leise); font-size: 11px; overflow-wrap: anywhere; }
.party-wahlkarte .falsch { color: var(--rot); }

.party-stimmen, .party-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 13px; }
.party-stimmen i { color: var(--leise); font-style: normal; }
.party-stimmen em { color: var(--leise); }
.party-punkte li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--tafel); box-shadow: 0 0 0 1px var(--linie); }
.party-punkte img { width: 22px; height: 22px; image-rendering: pixelated; }
.party-punkte b { color: var(--gold); }

.party-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.party-knoepfe .gewaehlt { box-shadow: 0 0 0 3px var(--gold); }
.party-herzen { color: var(--rot); letter-spacing: 1px; }

/* Hai an Bord und Im Schwarm: Die Karte braucht die volle Breite, Spielerliste oben, Chat darunter. */
#ansichtParty[data-phase="hai-spiel"] .party-raster, #ansichtParty[data-phase="sw-tarnen"] .party-raster, #ansichtParty[data-phase="sw-jagd"] .party-raster { grid-template-columns: 1fr; }
#ansichtParty[data-phase="hai-spiel"] .party-spieler, #ansichtParty[data-phase="sw-tarnen"] .party-spieler, #ansichtParty[data-phase="sw-jagd"] .party-spieler { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#ansichtParty[data-phase="hai-spiel"] .party-chat-spalte, #ansichtParty[data-phase="sw-tarnen"] .party-chat-spalte, #ansichtParty[data-phase="sw-jagd"] .party-chat-spalte { order: 3; min-height: 0; }
#ansichtParty[data-phase="hai-spiel"] .party-chat, #ansichtParty[data-phase="sw-tarnen"] .party-chat, #ansichtParty[data-phase="sw-jagd"] .party-chat { max-height: 160px; }

@media (max-width: 980px) {
  .party-raster { grid-template-columns: 1fr; }
  .party-spieler { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .party-chat-spalte { min-height: 0; order: 3; }
  .party-chat { max-height: 220px; }
  .party-karte b { font-size: 32px; }
  .party-hinweise li { grid-template-columns: 28px 90px 1fr; }
}

/* Blackout */
.party-frage { font-size: 22px !important; line-height: 1.35; color: var(--text); max-width: 34ch !important; }
.party-live { display: flex; align-items: center; gap: 10px; min-width: min(420px, 100%); padding: 10px 14px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie-hell); font: 28px var(--pixel); }
.party-live img { width: 32px; height: 32px; image-rendering: pixelated; }
.party-live span { flex: 1; overflow-wrap: anywhere; }
.party-live.richtig { box-shadow: 0 0 0 2px var(--stufe-selten); }
.party-live.falsch { box-shadow: 0 0 0 2px var(--rot); }
.party-live.richtig b { color: var(--stufe-selten); }
.party-live.falsch b { color: var(--rot); }
.party-loesung { margin: 0; font-size: 15px; }
.party-loesung b { color: var(--stufe-selten); }
.party-herzen i { color: var(--linie-hell); font-style: normal; }
.party-runde { width: 100%; font-size: 13px; }
.party-runde summary { cursor: pointer; color: var(--leise); }
.party-runde ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; }
.party-runde li.falsch span { color: var(--rot); }
.party-runde li.richtig span { color: var(--stufe-selten); }

/* Skala */
.sk-skala { width: 100%; display: grid; gap: 8px; padding: 24px 10px 8px; }
.sk-enden { display: flex; justify-content: space-between; gap: 12px; font: 24px var(--pixel); }
.sk-enden b { font-weight: 400; color: var(--cyan); }
.sk-enden b:last-child { color: var(--pink); text-align: right; }
.sk-balken { position: relative; height: 54px; margin: 30px 0 10px; background: linear-gradient(90deg, rgba(77, 227, 255, 0.35), rgba(255, 93, 143, 0.35)); box-shadow: 0 0 0 2px var(--linie-hell); }
.sk-zone { position: absolute; top: 0; bottom: 0; font-style: normal; display: grid; place-items: end center; }
.sk-zone em { font: 16px var(--pixel); font-style: normal; color: var(--tief); padding-bottom: 2px; }
.sk-zone.p2 { background: rgba(255, 209, 102, 0.45); }
.sk-zone.p3 { background: rgba(255, 180, 84, 0.75); }
.sk-zone.p4 { background: var(--gold); }
.sk-zeiger { position: absolute; top: -34px; transform: translateX(-50%); display: grid; justify-items: center; transition: left 120ms linear; pointer-events: none; }
.sk-zeiger::after { content: ''; width: 2px; height: 56px; background: var(--text); }
.sk-zeiger img { width: 28px; height: 28px; image-rendering: pixelated; }
.sk-zeiger.ich::after { background: var(--gold); width: 3px; }
.sk-zeiger.fest img { outline: 2px solid var(--stufe-selten); }
.sk-mittel { position: absolute; top: -6px; bottom: -6px; width: 4px; transform: translateX(-50%); background: var(--rot); }
.sk-regler { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.sk-regler input { width: 100%; accent-color: var(--gold); height: 32px; }

/* Wer bin ich? */
.wb-figuren { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.wb-figur { display: grid; justify-items: center; gap: 2px; width: 150px; padding: 10px 6px; text-align: center; background: var(--tafel); box-shadow: 0 0 0 2px var(--linie); }
.wb-figur img { width: 40px; height: 40px; image-rendering: pixelated; }
.wb-figur small { color: var(--leise); font-size: 11px; }
.wb-figur b { font: 22px var(--pixel); font-weight: 400; color: var(--gold); line-height: 1.05; overflow-wrap: anywhere; }
.wb-figur span { color: var(--cyan); font-size: 11px; }
.wb-figur.ich b { color: var(--leise); }
.wb-figur.dran { box-shadow: 0 0 0 3px var(--gold); }
.wb-figur.erraten { opacity: 0.6; }
.wb-verlauf-kopf { width: 100%; display: grid; gap: 4px; }
.wb-verlauf-kopf small { color: var(--leise); font: 11px var(--mono); letter-spacing: 0.12em; }
.wb-verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.wb-verlauf li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; background: var(--tafel); }
.wb-ja, .wb-richtig { color: var(--stufe-selten); }
.wb-nein, .wb-falsch { color: var(--rot); }
.wb-vielleicht, .wb-unklar { color: var(--gold); }
.wb-raten input { font-size: 16px; }

/* Kritzelpost */
.kp-bild { display: block; width: 100%; max-width: 640px; aspect-ratio: 4 / 3; height: auto; background: #fff; box-shadow: 0 0 0 2px var(--linie-hell); image-rendering: auto; }
.kp-brett { display: grid; gap: 8px; width: 100%; justify-items: center; }
.kp-flaeche { touch-action: none; cursor: crosshair; }
.kp-werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.kp-werkzeuge .kritzel-farben { display: grid; grid-template-columns: repeat(8, 22px); gap: 3px; }
.kp-farbe { width: 22px; height: 22px; border: 0; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--linie); }
.kp-farbe.an { box-shadow: 0 0 0 2px var(--gold); }
.kp-gruppe { display: flex; gap: 4px; }
.kp-gruppe .knopf.an { background: #16304f; color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.kp-dicke i { display: block; border-radius: 50%; background: currentColor; }
.kp-vorlage { width: 100%; display: grid; justify-items: center; }
.kp-kette { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; justify-items: center; }
.kp-kette li { display: grid; gap: 4px; justify-items: center; width: 100%; }
.kp-kette li small { display: flex; align-items: center; gap: 6px; color: var(--leise); font-size: 12px; }
.kp-kette li small img { width: 20px; height: 20px; image-rendering: pixelated; }
.kp-kette li b { font: 28px var(--pixel); font-weight: 400; color: var(--gold); text-align: center; }
.kp-kette li .kp-bild { max-width: 420px; }
.kp-kette li.neu { animation: frage-rein 500ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.kp-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; width: 100%; }
.kp-wahl { display: grid; gap: 4px; padding: 6px; background: var(--tafel); color: var(--text); border: 0; box-shadow: 0 0 0 2px var(--linie); cursor: pointer; font: inherit; }
.kp-wahl:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--cyan); }
.kp-wahl.gewaehlt { box-shadow: 0 0 0 3px var(--gold); }
.kp-wahl:disabled { opacity: 0.45; cursor: default; }
.kp-wahl small { font-size: 11px; color: var(--leise); }

/* Stadt Land Fluss */
.slf-buchstabe { font-size: 44px; }
.slf-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.slf-form label { display: grid; gap: 3px; }
.slf-form label span { font: 11px var(--mono); color: var(--leise); letter-spacing: 0.1em; text-transform: uppercase; }
.slf-form label i { color: var(--gold); font-style: normal; }
.slf-form input { padding: 8px 10px; font: 18px var(--mono); background: var(--tief); color: var(--text); border: 0; box-shadow: 0 0 0 2px var(--linie-hell); }
.slf-form input:focus { outline: none; box-shadow: 0 0 0 2px var(--cyan); }
.slf-form .knopf-gross { grid-column: 1 / -1; justify-self: center; }
.slf-strittig { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.slf-strittig li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 10px; background: var(--tafel); box-shadow: 0 0 0 1px var(--linie); }
.slf-strittig small { grid-column: 1; color: var(--leise); font-size: 11px; }
.slf-strittig b { grid-column: 1; font: 22px var(--pixel); font-weight: 400; color: var(--gold); }
.slf-strittig button, .slf-strittig em { grid-column: 2; grid-row: 1 / 3; color: var(--leise); }
.slf-tabelle-rahmen { width: 100%; overflow-x: auto; }
.slf-tabelle { border-collapse: collapse; width: 100%; font-size: 13px; }
.slf-tabelle th, .slf-tabelle td { padding: 5px 8px; border: 1px solid var(--linie); text-align: left; vertical-align: top; }
.slf-tabelle thead th { text-align: center; font-size: 11px; }
.slf-tabelle thead img { width: 22px; height: 22px; image-rendering: pixelated; }
.slf-tabelle td b { display: block; color: var(--gold); font-weight: 600; }
.slf-tabelle .slf-abgelehnt, .slf-tabelle .slf-falsch { color: var(--rot); text-decoration: line-through; }
.slf-tabelle .slf-leer { color: var(--leise); }

/* Hai an Bord */
.hai-fortschritt { position: relative; width: 100%; height: 20px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie-hell); }
.hai-fortschritt i { position: absolute; inset: 0 auto 0 0; background: var(--stufe-selten); }
.hai-fortschritt span { position: relative; display: block; text-align: center; font: 11px/20px var(--mono); letter-spacing: 0.12em; color: var(--text); }
.hai-karte { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: 100%; }
.hai-raum { min-height: 80px; padding: 10px; background: linear-gradient(160deg, #0f2a4a, #071423); color: var(--text); border: 0; box-shadow: 0 0 0 2px var(--linie-hell); cursor: pointer; font: 22px var(--pixel); }
.hai-raum:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--cyan); }
.hai-raum.gewaehlt { box-shadow: 0 0 0 3px var(--gold); color: var(--gold); }
.hai-raum b { font-weight: 400; }
.hai-fressen { color: var(--rot); }
.hai-opfer { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hai-opfer li { display: flex; align-items: center; gap: 6px; }
.hai-opfer img { width: 28px; height: 28px; image-rendering: pixelated; filter: grayscale(1); }
.hai-zeuge { margin: 0; padding: 8px 12px; background: rgba(255, 77, 94, 0.15); box-shadow: 0 0 0 2px var(--rot); }
.hai-zeuge b { color: var(--rot); }

/* ABC */
.abc-leiste { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; font: 20px var(--pixel); }
.abc-leiste span { width: 24px; text-align: center; color: var(--leise); }
.abc-leiste span.vorbei { color: var(--linie-hell); }
.abc-leiste span.jetzt { color: var(--tief); background: var(--gold); }
.abc-verlauf { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 3px; font-size: 14px; max-height: 260px; overflow-y: auto; }
.abc-verlauf li { padding: 4px 10px; background: var(--tafel); }
.abc-verlauf i { font-style: normal; color: var(--gold); margin-right: 6px; }
.abc-verlauf small { color: var(--leise); margin-left: 6px; }
.wahl-auswahl { width: 100%; padding: 8px; background: var(--tief); color: var(--text); border: 0; box-shadow: 0 0 0 2px var(--linie); font: 14px var(--mono); }

/* Quiztafel */
.qt-tafel { display: grid; gap: 6px; width: 100%; }
.qt-kopf { display: grid; place-items: center; min-height: 52px; padding: 6px; text-align: center; background: #12306a; color: var(--text); font: 13px var(--mono); font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; box-shadow: 0 0 0 2px var(--tief); }
.qt-feld { display: grid; place-items: center; min-height: 54px; background: #1a3f8a; color: var(--gold); border: 0; font: 30px var(--pixel); cursor: pointer; box-shadow: 0 0 0 2px var(--tief); }
.qt-feld:hover:not(:disabled) { background: #2554b3; }
.qt-feld:disabled { cursor: default; }
.qt-feld.leer { background: rgba(26, 63, 138, 0.25); }
.qt-feld.leer img { width: 26px; height: 26px; image-rendering: pixelated; }
.qt-feld.doppelt { box-shadow: inset 0 0 0 2px var(--pink), 0 0 0 2px var(--tief); }
.qt-frage.doppelt { box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--pink); }
.qt-buzzer { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #ff8a96, var(--rot) 60%, #9e1b29); color: #fff; font: 32px var(--pixel); cursor: pointer; box-shadow: 0 8px 0 #6b1220; }
.qt-buzzer small { font: 11px var(--mono); opacity: 0.8; }
.qt-buzzer:active { transform: translateY(6px); box-shadow: 0 2px 0 #6b1220; }
@media (max-width: 640px) { .qt-kopf { font-size: 10px; min-height: 44px; } .qt-feld { font-size: 22px; min-height: 44px; } }

/* Bluffbecken */
.bl-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bl-karte { display: grid; justify-items: center; gap: 2px; width: 72px; padding: 10px 4px; background: #f4ecd8; color: #1b2433; box-shadow: 0 0 0 2px var(--tief), 0 4px 0 rgba(0, 0, 0, 0.35); }
.bl-karte i { font-style: normal; font-size: 30px; }
.bl-karte small { font: 11px var(--mono); font-weight: 600; text-transform: uppercase; }
.bl-karte i { font-family: var(--pixel); }
.bl-karte.rot { color: #c0283a; }
.bl-joker { background: #fff7e0; box-shadow: 0 0 0 2px var(--gold), 0 4px 0 rgba(0, 0, 0, 0.35); }
.bl-wahl { padding: 0; border: 0; background: none; cursor: pointer; transition: transform 120ms; }
.bl-wahl:disabled { cursor: default; opacity: 0.85; }
.bl-wahl.gewaehlt { transform: translateY(-12px); }
.bl-wahl.gewaehlt .bl-karte { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 rgba(0, 0, 0, 0.35); }
.bl-stapel { position: relative; display: flex; justify-content: center; align-items: end; min-height: 70px; padding-top: 10px; }
.bl-rueck { width: 44px; height: 62px; margin-left: -30px; background: repeating-linear-gradient(45deg, #1a3f8a, #1a3f8a 6px, #12306a 6px, #12306a 12px); box-shadow: 0 0 0 2px var(--tief); }
.bl-rueck:first-child { margin-left: 0; }
.bl-stapel small { position: absolute; bottom: -18px; color: var(--leise); font-size: 11px; white-space: nowrap; }
.bl-ansage { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 15px; }
.bl-ansage img { width: 28px; height: 28px; image-rendering: pixelated; }
.bl-luege { background: var(--rot); }

/* Im Schwarm */
.sw-meer { width: 100%; }
.sw-meer canvas { display: block; width: 100%; max-width: max(320px, calc((100vh - 240px) * 5 / 3)); margin: 0 auto; height: auto; aspect-ratio: 5 / 3; box-shadow: 0 0 0 2px var(--linie-hell); cursor: crosshair; touch-action: none; }
.sw-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 13px; }
.sw-liste li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--tafel); box-shadow: 0 0 0 1px var(--linie); }
.sw-liste img { width: 22px; height: 22px; image-rendering: pixelated; }
.sw-liste small { color: var(--leise); }

/* Lügen-Antwort */
.la-luecke { color: var(--gold); letter-spacing: 0.05em; }
.la-optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; width: 100%; }
.la-option { display: grid; gap: 2px; padding: 14px 10px; background: var(--tafel); color: var(--text); border: 0; box-shadow: 0 0 0 2px var(--linie); font: 22px var(--pixel); cursor: pointer; overflow-wrap: anywhere; }
.la-option:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--cyan); }
.la-option.gewaehlt { box-shadow: 0 0 0 3px var(--gold); background: #1d2a18; }
.la-option:disabled { opacity: 0.45; cursor: default; }
.la-option small { font: 11px var(--mono); color: var(--leise); }
.la-aufloesung { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.la-aufloesung li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 12px; background: var(--tafel); box-shadow: 0 0 0 1px var(--linie); }
.la-aufloesung li.wahr { box-shadow: 0 0 0 2px var(--stufe-selten); }
.la-aufloesung b { font: 22px var(--pixel); font-weight: 400; color: var(--gold); overflow-wrap: anywhere; }
.la-aufloesung small { grid-column: 1; font-size: 12px; color: var(--leise); }
.la-aufloesung span { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 2px; }
.la-aufloesung span img { width: 24px; height: 24px; image-rendering: pixelated; }
.la-aufloesung em { color: var(--leise); font-size: 12px; }
.la-aufloesung .gruen { color: var(--stufe-selten); font-style: normal; }

/* Höher oder tiefer */
.hh-paar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; width: 100%; }
.hh-karte { min-width: 0; }
.hh-karte small { font-size: 14px; color: var(--text); letter-spacing: 0.04em; }
.hh-pfeil { font: 30px var(--pixel); font-style: normal; color: var(--leise); }
.hh-pfeil.hoeher { color: var(--stufe-selten); }
.hh-pfeil.tiefer { color: var(--rot); }
.party-knoepfe .hh-knopf { flex: 1 1 200px; width: auto; min-width: 0; }
@media (max-width: 640px) { .hh-paar { grid-template-columns: 1fr; } }

/* Schätzduell */
.sd-strahl { position: relative; width: 100%; height: 46px; margin: 8px 0; background: linear-gradient(transparent 21px, var(--linie-hell) 21px, var(--linie-hell) 25px, transparent 25px); }
.sd-strahl span { position: absolute; top: 4px; transform: translateX(-50%); }
.sd-strahl img { width: 30px; height: 30px; image-rendering: pixelated; }
.sd-wahr { position: absolute; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: var(--stufe-selten); }
.sd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.sd-liste li { display: grid; grid-template-columns: 28px 1fr auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 10px; background: var(--tafel); box-shadow: 0 0 0 1px var(--linie); }
.sd-liste li.volltreffer { box-shadow: 0 0 0 2px var(--gold); }
.sd-liste img { width: 28px; height: 28px; image-rendering: pixelated; grid-row: 1 / 3; }
.sd-liste span { font-weight: 600; }
.sd-liste b { font: 22px var(--pixel); font-weight: 400; color: var(--gold); text-align: right; }
.sd-liste small { grid-column: 2 / 4; color: var(--leise); font-size: 12px; }
.sd-liste em { grid-column: 4; grid-row: 1 / 3; color: var(--stufe-selten); font: 22px var(--pixel); font-style: normal; }

/* Song-Schnipsel */
.sg-karte .gruen { color: var(--stufe-selten); }
.sg-wellen { display: flex; gap: 4px; align-items: center; height: 60px; }
.sg-wellen i { width: 8px; height: 100%; background: var(--pink); animation: sg-welle 900ms ease-in-out infinite; transform-origin: center; }
.sg-wellen i:nth-child(3n) { animation-delay: -300ms; background: var(--cyan); }
.sg-wellen i:nth-child(3n + 1) { animation-delay: -600ms; }
.sg-wellen i:nth-child(4n) { animation-duration: 700ms; background: var(--gold); }
@keyframes sg-welle { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .sg-wellen i { animation: none; transform: scaleY(0.6); } }
.sg-regler { display: flex; gap: 10px; align-items: center; justify-content: center; }
.sg-regler .knopf { width: auto; padding: 6px 10px; font-family: inherit; font-size: 18px; letter-spacing: 0; }
.sg-regler input { width: min(200px, 50vw); accent-color: var(--pink); }

/* Hai an Bord in Echtzeit */
.hai-welt { width: 100%; }
.hai-welt canvas { display: block; width: 100%; max-width: max(320px, calc((100vh - 240px) * 1.6)); margin: 0 auto; height: auto; aspect-ratio: 8 / 5; box-shadow: 0 0 0 2px var(--linie-hell); outline: none; touch-action: none; }
.hai-knoepfe .knopf small { opacity: 0.6; font-size: 10px; }
.hai-minispiel { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(2, 8, 16, 0.6); }
.hai-minispiel-box { display: grid; gap: 12px; width: min(420px, calc(100% - 32px)); padding: 16px; background: var(--tafel-hell); box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--gold); }
.hai-minispiel-box header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hai-minispiel-box header b { color: var(--gold); font: 22px var(--pixel); font-weight: 400; }
.hai-minispiel-inhalt { display: grid; gap: 10px; justify-items: center; }
.hai-halten { width: 100%; height: 22px; background: var(--tief); box-shadow: 0 0 0 2px var(--linie); }
.hai-halten i { display: block; height: 100%; width: 0; background: var(--stufe-selten); }
.hai-zahlen { display: grid; grid-template-columns: repeat(4, 64px); gap: 8px; }
.hai-zahlen button { height: 64px; font: 28px var(--pixel); background: #1a3f8a; color: var(--gold); border: 0; cursor: pointer; }
.hai-zahlen button:disabled { background: #1d4a2a; color: var(--stufe-selten); cursor: default; }
.hai-kabel { display: flex; justify-content: space-between; width: 100%; max-width: 280px; }
.hai-kabel div { display: grid; gap: 10px; }
.hai-kabel button { width: 70px; height: 34px; border: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--tief); }
.hai-kabel button.gewaehlt { box-shadow: 0 0 0 3px #fff; }
.hai-kabel button:disabled { opacity: 0.3; cursor: default; }
.party-df-falsche { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 14px; }
.party-df-falsche .falsch { color: var(--rot); }