/* ================================================================ Modus „Abgehakt!“: die Listen-Show
   Nachtblaues TV-Studio mit großer Fallblatt-Anzeigetafel (wie früher am Bahnhof), grünen Abhak-Häkchen
   und dicken roten Kreuzen. Auf dem Handy: Notizblock mit Karopapier und Handschrift.
   Gilt für Host (body.host) und Handy (body.play), sobald body[data-mode="abgehakt"] gesetzt ist. */

body[data-mode="abgehakt"] {
  --chip-bg: rgba(8, 14, 34, 0.6); --chip-bd: rgba(255, 255, 255, 0.18);
  --ink: #0d1530;
  --ink-soft: #33416b;
  --bg1: #0a1430;
  --bg2: #15295c;
  --paper: #fffdf5;
  --paper-2: #eef3ff;
  --pink: #ff4f8b;
  --gold: #ffcf3f;
  --yellow: #ffcf3f;
  --green: #22c983;
  --check: #2fe39a;
  --red: #ff3b47;
  --strike: #ff3b47;
  --blue: #3b82f6;
  --cyan: #38d6ff;
  --purple: #8b5cf6;
  --orange: #ff8a1f;
  --opt-0: #ff4f8b;
  --opt-1: #3b82f6;
  --opt-2: #f5a70a;
  --opt-3: #16b364;
  --flap: #17181d;
  --flap-2: #24262e;
  --flap-ink: #ffd65c;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(3, 8, 24, 0.6);
  --shadow-sm: 0 3px 0 rgba(3, 8, 24, 0.6);
  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-flap: 'Bebas Neue', 'Oswald', 'Fredoka', sans-serif;
  --font-hand: 'Caveat', 'Fredoka', cursive;
}

/* ------------------------------------------------------------ Hintergrund: Studio mit Karoraster und Scheinwerfern */
body[data-mode="abgehakt"] .bg {
  background:
    radial-gradient(ellipse 55% 45% at 50% 30%, rgba(56, 120, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 115%, rgba(47, 227, 154, 0.18), transparent 70%),
    linear-gradient(180deg, #0c1a40 0%, #0a1430 55%, #060c20 100%);
}
body[data-mode="abgehakt"] .bg::before {
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 44px 44px;
  animation: abgGrid 40s linear infinite;
  opacity: 1;
}
@keyframes abgGrid { to { background-position: 44px 44px, 44px 44px; } }
/* Zwei Scheinwerferkegel */
body[data-mode="abgehakt"] .bg::after {
  content: '';
  position: absolute;
  inset: -10% -20%;
  background:
    conic-gradient(from 160deg at 12% -5%, transparent 0deg, rgba(255, 238, 180, 0.13) 12deg, transparent 26deg),
    conic-gradient(from 174deg at 88% -5%, transparent 0deg, rgba(180, 220, 255, 0.12) 12deg, transparent 26deg);
  animation: abgSpots 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes abgSpots { from { transform: translateX(-3%) rotate(-2deg); } to { transform: translateX(3%) rotate(2deg); } }
body[data-mode="abgehakt"] .bg .blob { opacity: 0.32; }
body[data-mode="abgehakt"] .bg .blob.b1 { background: #2f6bff; }
body[data-mode="abgehakt"] .bg .blob.b2 { background: #22c983; }
body[data-mode="abgehakt"] .bg .blob.b3 { background: #ffcf3f; }

/* ------------------------------------------------------------ Logo: Buchstaben auf Fallblatt-Kacheln */
body[data-mode="abgehakt"] .logo { -webkit-text-stroke: 0; text-shadow: none; font-family: var(--font-flap); font-weight: 400; letter-spacing: 0.02em; }
body[data-mode="abgehakt"] .logo span {
  position: relative;
  color: var(--flap-ink) !important;
  background: linear-gradient(180deg, var(--flap-2) 0 49%, #0c0d10 49% 51%, var(--flap) 51%);
  border-radius: 0.1em;
  padding: 0.06em 0.09em 0;
  margin: 0 0.035em;
  box-shadow: 0 0.06em 0 #000, inset 0 0 0 0.02em rgba(255, 255, 255, 0.08);
  animation: abgLogoFlip 6s ease-in-out infinite;
}
body[data-mode="abgehakt"] .logo span:nth-child(2n) { animation-delay: -0.6s; }
body[data-mode="abgehakt"] .logo span:nth-child(3n) { animation-delay: -1.3s; }
@keyframes abgLogoFlip { 0%, 86%, 100% { transform: rotateX(0); } 90% { transform: rotateX(80deg); } 94% { transform: rotateX(-30deg); } }
body[data-mode="abgehakt"] .logo-sub, body[data-mode="abgehakt"] .editionbadge {
  font-family: var(--font-hand);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--check);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
body[data-mode="abgehakt"] .splash .logo-sub { font-size: clamp(2.4rem, min(4vw, 7vh), 4.4rem); opacity: 1; transform: rotate(-4deg); margin-top: -0.2em; animation: stamp 0.6s 0.3s var(--ease-back) both; }
body[data-mode="abgehakt"] .editionbadge { display: inline-block; position: absolute; left: calc(6.5rem + 1.6rem); bottom: -1.5rem; font-size: 2.3rem; line-height: 1; white-space: nowrap; transform: rotate(-4deg); animation: stamp 0.5s var(--ease-back) both; pointer-events: none; }
body[data-mode="abgehakt"] .lobby .brand { position: relative; }
body[data-mode="abgehakt"] .intro .rname, body[data-mode="abgehakt"] .scores h1, body[data-mode="abgehakt"] .podium h1 { font-family: var(--font-flap); font-weight: 400; letter-spacing: 0.04em; }
body[data-mode="abgehakt"] .card { border-width: 3px; }
body[data-mode="abgehakt"] .insertcoin { display: block; font-family: var(--font-hand); font-weight: 700; font-size: 1.9rem; line-height: 1; color: #11975e; margin-top: 0.7rem; transform: rotate(-2deg); }
body[data-mode="abgehakt"] .lobby .joincard { background: var(--paper) linear-gradient(90deg, transparent 2.6rem, rgba(255, 59, 71, 0.35) 2.6rem 2.75rem, transparent 2.75rem); }

/* Quizzly als Listen-Showmaster: Klemmbrett und Bleistift hinterm Ohr */
body[data-mode="abgehakt"] .quizzly .qz-pencil, body[data-mode="abgehakt"] .quizzly .qz-clipboard { display: inline; }
body[data-mode="abgehakt"] .quizzly .qz-cap { display: none; }
body[data-mode="abgehakt"] .quizzly .qz-bow path:not([stroke-opacity]) { fill: #22c983; }
body[data-mode="abgehakt"] .quizzly .qz-bow rect { fill: #8ff0c4; }
body[data-mode="abgehakt"] .quizzly .qz-clipboard > g { transform-origin: 52px 210px; animation: abgClip 3.4s ease-in-out infinite; }
@keyframes abgClip { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-4deg) translateY(-3px); } }

/* Handy-Lobby */
.lobbyv .abgnote { display: none; font-family: var(--font-hand); font-weight: 700; color: var(--check); font-size: 30px; line-height: 1; transform: rotate(-3deg); }
body.play[data-mode="abgehakt"] .lobbyv .abgnote { display: block; }
body.play[data-mode="abgehakt"] .lobbyv .gamingnote, body.play[data-mode="abgehakt"] .lobbyv .filmnote, body.play[data-mode="abgehakt"] .lobbyv .musicnote, body.play[data-mode="abgehakt"] .lobbyv .pricenote { display: none; }

/* Rundenintro: Fallblatt-Tafel mit Rundennummer */

/* Niedrige Fenster: die Klapptafel rückt nach unten rechts, statt über „Runde 1 von 10“ zu liegen */

/* ================================================================ Bausteine (Host + Handy) */

/* Fallblatt-Kachel */
.flap {
  --pc: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.12em 0.45em 0.04em;
  background: linear-gradient(180deg, var(--flap-2, #24262e) 0 49%, #08090b 49% 51%, var(--flap, #17181d) 51%);
  color: var(--flap-ink, #ffd65c);
  font-family: var(--font-flap);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0.18em;
  box-shadow: 0 0.12em 0 #000, inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: 50% 50%;
}
.flap .ft { overflow: hidden; text-overflow: ellipsis; }
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.7); }
.flap.in { animation: flapIn 0.45s cubic-bezier(.3, 1.4, .6, 1) both; }
@keyframes flapIn { 0% { transform: rotateX(-90deg); filter: brightness(2); } 60% { transform: rotateX(15deg); } 100% { transform: rotateX(0); filter: none; } }
.flap.empty { color: rgba(255, 214, 92, 0.18); }
.flap.mine { box-shadow: 0 0.12em 0 #000, inset 0 -0.18em 0 var(--pc); }
.flap.found { box-shadow: 0 0.12em 0 #000, inset 0.22em 0 0 var(--pc); padding-left: 0.6em; }
.flap.missing { color: #9aa3b8; background: linear-gradient(180deg, #2b2f3a 0 49%, #08090b 49% 51%, #22252e 51%); }
.flap.bad { color: #fff; background: linear-gradient(180deg, #d22c37 0 49%, #7a0d14 49% 51%, #b71c27 51%); }
.flap.good { color: #052c1c; background: linear-gradient(180deg, #4ff0b0 0 49%, #0b5a3a 49% 51%, #2fe39a 51%); }
.flap.gap { color: var(--flap-ink); animation: gapBlink 1.6s ease-in-out infinite; }
@keyframes gapBlink { 50% { color: rgba(255, 214, 92, 0.25); } }

/* Abhak-Häkchen (wird gezeichnet) und dickes Kreuz */
.chk { position: absolute; pointer-events: none; }
.chk path { fill: none; stroke: var(--check, #2fe39a); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: chkDraw 0.45s 0.1s ease-out forwards; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)); }
@keyframes chkDraw { to { stroke-dashoffset: 0; } }
.xbig { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; }
.xbig b { font-family: var(--font-flap); font-size: min(46vh, 40vw); line-height: 1; color: var(--strike, #ff3b47); text-shadow: 0 0 0.06em #000, 0 0.05em 0 #5c0007, 0 0 0.3em rgba(255, 59, 71, 0.6); animation: xIn 1.1s cubic-bezier(.2, 1.5, .5, 1) both; }
@keyframes xIn { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 18% { transform: scale(0.95) rotate(3deg); opacity: 1; } 30% { transform: scale(1.04); } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } }
.hearts { display: inline-flex; gap: 0.1em; font-size: 1em; line-height: 1; }
.hearts i { font-style: normal; transition: transform 0.3s var(--ease-back), filter 0.3s, opacity 0.3s; }
.hearts i.lost { filter: grayscale(1); opacity: 0.35; transform: scale(0.8); }
.strikes { display: inline-flex; gap: 0.18em; }
.strikes i { font-style: normal; font-family: var(--font-flap); color: rgba(255, 255, 255, 0.2); font-size: 1.25em; line-height: 1; width: 1em; text-align: center; border-radius: 0.15em; background: rgba(0, 0, 0, 0.25); }
.strikes i.on { color: var(--strike, #ff3b47); background: rgba(255, 59, 71, 0.15); animation: pop 0.35s var(--ease-back) both; }

/* ================================================================ Host */

/* Die Tafel */
.abg-board {
  position: relative;
  background: linear-gradient(180deg, #2b3550, #1a2138);
  border: 4px solid #0a0f20;
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 60px rgba(56, 120, 255, 0.18);
  padding: 0.9rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 0;
}
.abg-board::before, .abg-board::after { content: ''; position: absolute; top: 0.55rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9aa6c8, #3b4566); }
.abg-board::before { left: 0.55rem; }
.abg-board::after { right: 0.55rem; }
.abg-btitle { display: flex; align-items: center; gap: 0.8rem; padding: 0 0.6rem; }
.abg-btitle b { font-family: var(--font-flap); font-weight: 400; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: 0.04em; color: #fff; line-height: 1; flex: 1; min-width: 0; }
.abg-btitle .cat { font-family: var(--font-head); font-size: 0.95rem; background: var(--rc, #3b82f6); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 0.1rem 0.7rem; white-space: nowrap; }
.abg-btitle .cnt { font-family: var(--font-flap); font-size: clamp(1.6rem, 2.6vw, 2.6rem); color: var(--flap-ink); background: var(--flap); border-radius: 10px; padding: 0.1rem 0.6rem; box-shadow: 0 3px 0 #000; white-space: nowrap; }
.abg-note { font-size: 1rem; opacity: 0.7; padding: 0 0.6rem; margin-top: -0.5rem; }
.abg-grid { --cols: 4; --fs: 1.5rem; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0.45rem 0.55rem; align-content: start; min-height: 0; overflow: hidden; }
.abg-grid .flap { font-size: var(--fs); width: 100%; justify-content: flex-start; }
.abg-grid .flap .who { margin-left: auto; padding-left: 0.3em; display: inline-flex; flex: none; }
.abg-grid .flap .who .avatar { --size: 1.25em !important; border-width: 2px; }

/* Reihum */
.turnwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(17rem, 26vw, 26rem); gap: 1.3rem; }
.turnwrap .abg-board { min-height: 0; }
.turnwrap .abg-grid { flex: 1; }
.turnside { display: flex; flex-direction: column; gap: 0.9rem; min-height: 0; }
.turnnow { position: relative; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1rem 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.turnnow .who { position: relative; }
.turnnow .who .avatar { --size: clamp(5rem, 8vw, 7.5rem) !important; }
.turnnow .nm { font-family: var(--font-head); font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.05; }
.turnnow .nm small { display: block; font-family: var(--font-hand); font-size: 1.5rem; color: var(--ink-soft); }
.turnnow .hearts { font-size: 1.6rem; }
.turnnow .tt { width: 100%; height: 14px; border-radius: 99px; background: #e3e7f2; border: 2px solid var(--ink); overflow: hidden; }
.turnnow .tt i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3b47, #ffcf3f 40%, #22c983 70%); transform-origin: left; }
.turnnow .secs { position: absolute; top: 0.5rem; right: 0.7rem; font-family: var(--font-flap); font-size: 2.4rem; line-height: 1; color: var(--ink); }
.turnnow .secs.urgent { color: var(--red); animation: pulse 0.5s ease-in-out infinite alternate; }
.turnnow.done .tt, .turnnow.done .secs { visibility: hidden; }
.turnnow .cycle { font-size: 0.9rem; color: var(--ink-soft); font-weight: 800; }
.turnnow.enter { animation: turnIn 0.45s var(--ease-back) both; }
@keyframes turnIn { from { transform: translateX(30px) rotate(3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ticker { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem; }
.ticker .tk { display: flex; align-items: center; gap: 0.5rem; background: rgba(8, 14, 34, 0.6); border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 0.35rem 0.6rem; font-size: 1.05rem; animation: tkIn 0.35s var(--ease-back) both; }
.ticker .tk .avatar { --size: 1.9rem !important; border-width: 2px; }
.ticker .tk .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-hand); font-size: 1.55rem; line-height: 1; }
.ticker .tk .rs { font-family: var(--font-head); white-space: nowrap; font-size: 0.95rem; }
.ticker .tk.ok { border-color: rgba(47, 227, 154, 0.6); }
.ticker .tk.ok .rs { color: var(--check); }
.ticker .tk.bad { border-color: rgba(255, 59, 71, 0.6); }
.ticker .tk.bad .rs { color: #ff8a92; }
.ticker .tk.close .rs { color: var(--gold); }
.ticker .tk.accepted { border-color: rgba(47, 227, 154, 0.9); }
.ticker .tk.accepted .tx { text-decoration: none; }
.ticker .tk.old { opacity: 0.55; }
@keyframes tkIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.giltbtn { align-self: stretch; font-family: var(--font-head); font-size: 1.05rem; background: var(--check); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 0.45rem 0.8rem; animation: popIn 0.35s var(--ease-back) both; }
body.viewer .giltbtn { display: none; }
.turnsdone { font-family: var(--font-flap); font-size: clamp(2rem, 3.4vw, 3.4rem); color: var(--gold); text-align: center; line-height: 1; letter-spacing: 0.04em; animation: stamp 0.5s var(--ease-back) both; }
/* Spielerleiste unten: Leben und wer dran ist */
#strip .sp .abg-lives { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); font-size: 0.95rem; white-space: nowrap; background: rgba(8, 14, 34, 0.75); border-radius: 99px; padding: 0 0.3rem; z-index: 3; }
#strip .sp.abg-out .avatar { filter: grayscale(1) brightness(0.6); }
#strip .sp.abg-out .abg-lives::after { content: ' RAUS'; font-family: var(--font-flap); color: var(--red); letter-spacing: 0.05em; }
#strip .sp.abg-turn .avatar { transform: translateY(-0.9rem) scale(1.18); box-shadow: 0 0 0 4px var(--gold), 0 0 24px var(--gold); }
#strip .sp.abg-turn .nm { background: var(--gold); color: var(--ink); }

/* 100 Leute haben wir gefragt: die Umfragetafel */
.survwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.survq { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.7rem 1.6rem 0.9rem; text-align: center; max-width: 64rem; }
.survq small { display: block; font-family: var(--font-hand); font-size: 1.6rem; color: #2563eb; line-height: 1; }
.survq b { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.12; }
.survboard { --rows: 4; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); gap: 0.6rem 1rem; width: min(78rem, 100%); background: linear-gradient(180deg, #1f4fbf, #163a8f); border: 5px solid #0a1f55; border-radius: 22px; padding: 1rem; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(255, 255, 255, 0.12), 0 0 50px rgba(59, 130, 246, 0.35); }
.survboard.one { grid-template-columns: 1fr; width: min(52rem, 100%); }
.srow { position: relative; display: flex; align-items: center; gap: 0.7rem; height: clamp(3.2rem, calc(6.4 * var(--vq)), 4.6rem); background: linear-gradient(180deg, #0f2a6b, #0b1f50); border: 3px solid #071233; border-radius: 14px; padding: 0 0.5rem 0 0.4rem; overflow: hidden; perspective: 600px; }
.srow .num { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #6fa0ff, #2457d6); border: 3px solid #071233; font-family: var(--font-flap); font-size: 1.7rem; color: #fff; }
.srow .ans { flex: 1; min-width: 0; font-family: var(--font-flap); font-size: clamp(1.5rem, 2.4vw, 2.4rem); letter-spacing: 0.04em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.srow .cnt { flex: none; min-width: 3.6rem; text-align: center; font-family: var(--font-flap); font-size: clamp(1.6rem, 2.6vw, 2.6rem); color: var(--ink); background: var(--gold); border-radius: 10px; border: 3px solid #071233; padding: 0 0.3rem; }
.srow .who { position: absolute; right: 4.6rem; top: 50%; transform: translateY(-50%); display: flex; }
.srow .who .avatar { --size: 2.1rem !important; margin-left: -0.5rem; border-width: 2px; }
.srow.closed .ans, .srow.closed .cnt, .srow.closed .who { visibility: hidden; }
.srow.closed { background: repeating-linear-gradient(135deg, #0f2a6b 0 14px, #0d2560 14px 28px); }
.srow.open { animation: srowFlip 0.55s ease both; }
.srow.top { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(255, 207, 63, 0.6); }
.srow.nobody .ans { color: #9fb7ef; }
@keyframes srowFlip { 0% { transform: rotateX(90deg); } 70% { transform: rotateX(-12deg); } 100% { transform: rotateX(0); } }
.survprog { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
.survprog .sp2 { display: flex; align-items: center; gap: 0.4rem; background: rgba(8, 14, 34, 0.55); border-radius: 99px; padding: 0.2rem 0.7rem 0.2rem 0.25rem; font-family: var(--font-head); }
.survprog .sp2 .avatar { --size: 2rem !important; border-width: 2px; }
.survprog .sp2 .hits { color: var(--check); }
.survprog .sp2.out { opacity: 0.55; }
.misses { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.misses .ms { display: flex; align-items: center; gap: 0.4rem; background: rgba(255, 59, 71, 0.15); border: 2px solid rgba(255, 59, 71, 0.5); border-radius: 12px; padding: 0.2rem 0.6rem 0.2rem 0.25rem; animation: popIn 0.4s var(--ease-back) both; }
.misses .ms .avatar { --size: 1.8rem !important; border-width: 2px; }
.misses .ms span { font-family: var(--font-hand); font-size: 1.55rem; line-height: 1; text-decoration: line-through; text-decoration-color: var(--red); }
.srcnote { font-size: 0.8rem; opacity: 0.6; margin-top: 0.2rem; }

/* Blitzumfrage */
.blitzwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.blitzsteps { display: flex; gap: 0.5rem; }
.blitzsteps i { width: 3rem; height: 0.7rem; border-radius: 99px; background: rgba(255, 255, 255, 0.2); }
.blitzsteps i.done { background: var(--check); }
.blitzsteps i.cur { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.blitzq { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 2rem; text-align: center; max-width: 60rem; font-family: var(--font-head); font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: 1.12; animation: popIn 0.4s var(--ease-back) both; }
.blitztarget { font-family: var(--font-flap); font-size: 2rem; letter-spacing: 0.04em; color: var(--gold); }
.blitztable { width: min(100%, 92rem); border-collapse: separate; border-spacing: 0.35rem; table-layout: fixed; }
.blitztable th { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; line-height: 1.1; color: #cfdaff; padding: 0 0.2rem 0.3rem; vertical-align: bottom; }
.blitztable th small { display: block; color: var(--gold); font-size: 0.85rem; }
.blitztable th.pl { width: 11rem; }
.blitztable th.sum { width: 6rem; }
.blitztable td { background: rgba(8, 14, 34, 0.6); border-radius: 10px; padding: 0.25rem 0.4rem; height: 2.6rem; vertical-align: middle; }
.blitztable td.pl { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-head); white-space: nowrap; overflow: hidden; }
.blitztable td.pl .avatar { --size: 1.9rem !important; border-width: 2px; flex: none; }
.blitztable td.cell { position: relative; }
.blitztable td.cell .tx { display: block; font-family: var(--font-hand); font-size: 1.35rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2.2rem; }
.blitztable td.cell .c { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); font-family: var(--font-flap); font-size: 1.5rem; color: var(--ink); background: var(--gold); border-radius: 7px; padding: 0 0.3rem; min-width: 1.8rem; text-align: center; visibility: hidden; }
.blitztable td.cell.shown .c { visibility: visible; animation: pop 0.35s var(--ease-back) both; }
.blitztable td.cell.shown.zero .c { background: var(--red); color: #fff; }
.blitztable td.cell.empty .tx { opacity: 0.35; }
.blitztable td.sum { font-family: var(--font-flap); font-size: 1.9rem; text-align: center; color: #fff; }
.blitztable tr.win td.sum { color: var(--ink); background: var(--check); }
.blitztable.many td { height: 2.1rem; }
.blitztable.many td.cell .tx { font-size: 1.15rem; }

/* Top 10 */
.t10wrap { flex: 1; min-height: 0; display: flex; justify-content: center; }
.t10wrap .abg-board { width: min(70rem, 100%); container-type: size; }
.t10list { display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); gap: 0.4rem; flex: 1; min-height: 0; }
.t10row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; min-height: 0; }
.t10row .rk { font-family: var(--font-flap); font-size: clamp(1.6rem, calc(3 * var(--vq)), 2.4rem); color: #fff; text-align: right; }
.t10row .flap { font-size: clamp(1.3rem, calc(3 * var(--vq)), 2.1rem); justify-content: flex-start; height: 100%; }
.t10row .v { font-family: var(--font-flap); font-size: clamp(1.1rem, calc(2.4 * var(--vq)), 1.7rem); color: #cfdaff; white-space: nowrap; min-width: 0; }
.t10row .who { display: flex; gap: 0.15rem; min-width: 5rem; }
.t10row .who .dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--pc); border: 2px solid var(--ink); animation: pop 0.3s var(--ease-back) both; }
.t10row .who .avatar { --size: 1.7rem !important; margin-left: -0.35rem; border-width: 2px; }
.t10row .pts { font-family: var(--font-head); font-size: 0.85rem; color: var(--gold); }
/* Wenig Höhe (PC mit Antwortleiste): zehn Plätze in zwei Spalten zu je fünf statt zehn gequetschter Zeilen */
@container (max-height: 23rem) {
  .t10list { grid-template-rows: repeat(5, minmax(0, 1fr)); grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 1.2rem; gap: 0.25rem 1.2rem; }
  .t10row .rk { font-size: min(1.6rem, 8cqh); }
  .t10row .flap { font-size: min(1.3rem, 6.5cqh); }
  .t10row .v { font-size: min(1.1rem, 6cqh); }
  /* Quelle einzeilig – die volle Angabe steht in der Auflösung */
  .t10wrap .abg-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Einzelstück */
.uwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.uprompt { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 2.2rem; text-align: center; font-family: var(--font-head); font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1.1; max-width: 62rem; }
.uprompt small { display: block; font-family: var(--font-hand); color: #db2777; font-size: 0.6em; }
.uhint { font-family: var(--font-hand); font-size: 2.1rem; color: var(--gold); }
.ugroups { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; max-width: 96rem; }
.ug { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 0.55rem 0.9rem 0.6rem; animation: popIn 0.45s var(--ease-back) both; }
.ug b { font-family: var(--font-hand); font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1; }
.ug .who { display: flex; }
.ug .who .avatar { --size: 2.3rem !important; margin-left: -0.45rem; border-width: 2px; }
.ug.unique { background: linear-gradient(135deg, #fff1f8, #f1e8ff); box-shadow: 0 0 0 3px #ec4899, 0 0 28px rgba(236, 72, 153, 0.6), var(--shadow-sm); }
.ug.unique::after { content: '🦄 EINZELSTÜCK'; position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%) rotate(-3deg); font-family: var(--font-flap); font-size: 1rem; letter-spacing: 0.06em; background: #ec4899; color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 0 0.4rem; white-space: nowrap; }
.ug.shared { opacity: 0.92; }
.unnamed { max-width: 80rem; text-align: center; font-size: 1.05rem; opacity: 0.85; }
.unnamed b { font-family: var(--font-head); color: var(--gold); }
.unnamed span { font-family: var(--font-hand); font-size: 1.5rem; margin: 0 0.35rem; display: inline-block; white-space: nowrap; }
.lockcount { font-family: var(--font-flap); font-size: 2.2rem; letter-spacing: 0.04em; color: #fff; }

/* Wer fehlt? */
.gapwrap { flex: 1; min-height: 0; display: flex; }
.gapwrap .abg-board { flex: 1; }
.gapwrap .abg-grid { flex: 1; }
.gapwrap .flap.gap { box-shadow: 0 0.12em 0 #000, 0 0 0 2px var(--gold); }
.gapwrap .flap .who .avatar { margin-left: -0.3em; }
.gapfound { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-family: var(--font-head); font-size: 1.1rem; color: #cfdaff; padding: 0 0.6rem; min-height: 2rem; }
.gapwrap .abg-grid { align-content: center; }

/* Einspruch! */
.objwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(14rem, 22vw, 22rem); gap: 1.4rem; }
.objlist { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-height: 0; }
.objrow { display: flex; align-items: center; gap: 0.7rem; min-height: 0; }
.objrow .k { font-family: var(--font-flap); font-size: 1.6rem; width: 2rem; text-align: right; color: #8ea0cf; }
.objrow .flap { font-size: clamp(1.4rem, calc(3.4 * var(--vq)), 2.4rem); justify-content: flex-start; flex: 1; }
.objrow .flap.empty { visibility: hidden; }
.objrow .who { display: flex; min-width: 4rem; }
.objrow .who .avatar { --size: 2.2rem !important; margin-left: -0.45rem; border-width: 2px; animation: pop 0.35s var(--ease-back) both; }
.objrow .why { font-size: 0.95rem; color: #ffd0d4; max-width: 18rem; line-height: 1.15; }
.objbig { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; }
.objbig .hand { font-size: clamp(5rem, 9vw, 9rem); line-height: 1; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.4)); }
.objbig .hand.pump { animation: handPump 0.5s var(--ease-back); }
@keyframes handPump { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-12deg); } 100% { transform: scale(1); } }
.objbig b { font-family: var(--font-flap); font-size: clamp(2rem, 3.4vw, 3.4rem); letter-spacing: 0.05em; color: var(--red); text-shadow: 0 3px 0 #000; line-height: 1; }
.objbig small { font-family: var(--font-hand); font-size: 1.7rem; color: #cfdaff; }
.objstamp { font-family: var(--font-flap); letter-spacing: 0.05em; font-size: 1.2rem; padding: 0 0.5rem; border-radius: 8px; border: 2px solid var(--ink); animation: stamp 0.45s var(--ease-back) both; white-space: nowrap; }
.objstamp.bad { background: var(--red); color: #fff; }
.objstamp.ok { background: var(--check); color: var(--ink); }

/* Von A bis Z */
.abcwrap { flex: 1; min-height: 0; display: flex; }
.abcwrap .abg-board { flex: 1; }
.abcgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0.55rem; }
.abct { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; background: linear-gradient(180deg, var(--flap-2) 0 49%, #08090b 49% 51%, var(--flap) 51%); border-radius: 12px; box-shadow: 0 4px 0 #000; min-height: 0; padding: 0.2rem; overflow: hidden; }
.abct .L { font-family: var(--font-flap); font-size: clamp(2rem, calc(5.2 * var(--vq)), 3.6rem); line-height: 1; color: var(--flap-ink); }
.abct .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; max-width: 100%; }
.abct .dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--pc); border: 1.5px solid #000; animation: pop 0.3s var(--ease-back) both; }
.abct.na { opacity: 0.22; }
.abct.na .L { text-decoration: line-through; }
.abct.solo { box-shadow: 0 4px 0 #000, 0 0 0 3px #22c983; }
.abct .ex { font-family: var(--font-hand); font-size: clamp(1rem, calc(2.2 * var(--vq)), 1.45rem); line-height: 1; color: #fff; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abct .avs { display: flex; }
.abct .avs .avatar { --size: 1.45rem !important; margin-left: -0.3rem; border-width: 1.5px; }
.abct.flipin { animation: flapIn 0.45s cubic-bezier(.3, 1.4, .6, 1) both; }

/* Die Mega-Liste (Finale): Riesentafel links, rechts Uhr + Wert je Begriff, Wertstufen und Live-Rangliste.
   Alles bemisst sich an der freien Bühne (--vq); die Tafel passt ihre Kacheln selbst ein (fitGrid). */
.mlwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(12.5rem, 22%, 21rem); gap: clamp(0.6rem, calc(1.6 * var(--vq)), 1.3rem); }
.mlboard { min-height: 0; min-width: 0; padding: clamp(0.5rem, calc(1.3 * var(--vq)), 0.9rem) clamp(0.6rem, calc(1.5 * var(--vq)), 1.1rem); gap: clamp(0.35rem, calc(1 * var(--vq)), 0.8rem); }
.mlboard .abg-btitle b { font-size: clamp(1.3rem, calc(4 * var(--vq)), 3rem); }
.mlboard .abg-btitle .cnt { font-size: clamp(1.2rem, calc(3.6 * var(--vq)), 2.6rem); }
.mlboard .abg-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(0.75rem, calc(1.9 * var(--vq)), 1rem); margin-top: -0.3rem; }
.mlgrid { flex: 1; }
.flap.mlt { justify-content: flex-start; }
.flap.mlt.claimed {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 80%, #000) 0 49%, #08090b 49% 51%, color-mix(in srgb, var(--pc) 62%, #000) 51%);
}
.flap.mlt.claimed::after { background: rgba(0, 0, 0, 0.3); }
/* Goldene Begriffe: leuchten erst beim Abhaken auf */
.flap.mlt.gold { color: #3a2400; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background: linear-gradient(180deg, #ffe58a 0 49%, #8a5a00 49% 51%, #ffc933 51%); box-shadow: 0 0.12em 0 #000, 0 0 0 2px #fff3b0, 0 0 0.9em rgba(255, 207, 63, 0.85); z-index: 1; }
.flap.mlt.gold.in { animation: flapIn 0.45s cubic-bezier(.3, 1.4, .6, 1) both, mlGlow 1.3s 0.45s ease-in-out infinite alternate; }
.flap.mlt.gold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%) 0 0 / 260% 100%; animation: mlShine 2.2s linear infinite; pointer-events: none; }
@keyframes mlGlow { from { box-shadow: 0 0.12em 0 #000, 0 0 0 2px #fff3b0, 0 0 0.5em rgba(255, 207, 63, 0.6); } to { box-shadow: 0 0.12em 0 #000, 0 0 0 2px #fff3b0, 0 0 1.4em rgba(255, 207, 63, 1); } }
@keyframes mlShine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.flap.mlt.goldmiss { color: var(--flap-ink); box-shadow: 0 0.12em 0 #000, 0 0 0 2px var(--gold); }
.flap.mlt.goldmiss .ft::before { content: '🌟 '; }
/* „schon vergeben“: Das Feld wackelt kurz */
.flap.mlt.bump { animation: mlBump 0.42s ease both; }
@keyframes mlBump { 20% { transform: translateX(-5%) rotate(-2deg); } 50% { transform: translateX(4%) rotate(2deg); } 80% { transform: translateX(-2%); } }
/* Banner über der Tafel: Vorsprung, „Alle – los!“, Gold */
.mlbanner { position: absolute; left: 50%; top: 50%; z-index: 5; max-width: 92%; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow), 0 0 40px rgba(0, 0, 0, 0.5); padding: clamp(0.5rem, calc(1.4 * var(--vq)), 1rem) clamp(1rem, calc(3 * var(--vq)), 2.2rem); opacity: 0; transform: translate(-50%, -50%) scale(0.6); pointer-events: none; transition: opacity 0.25s, transform 0.4s var(--ease-back); }
.mlbanner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mlbanner > b { font-family: var(--font-flap); font-weight: 400; font-size: clamp(1.8rem, calc(6 * var(--vq)), 4.2rem); letter-spacing: 0.05em; line-height: 1; }
.mlbanner > b.g { color: #b07800; text-shadow: 0 2px 0 #fff3b0; }
.mlbanner > span { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.9rem; }
.mlbanner > span em { font-style: normal; font-family: var(--font-flap); font-size: clamp(1.4rem, calc(4 * var(--vq)), 2.8rem); letter-spacing: 0.03em; }
.mlbanner .hd { display: inline-flex; align-items: center; gap: 0.3rem; }
.mlbanner .hd em { color: #11975e; }
.mlbanner small { font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.2rem, calc(3.2 * var(--vq)), 2.1rem); line-height: 1; color: var(--ink-soft); }
.mlbanner small em { font-style: normal; color: var(--red); }
.mlbanner .gl { gap: 0.35rem 0.6rem; }
.mlbanner .gb { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-flap); font-size: clamp(1.1rem, calc(3 * var(--vq)), 2rem); letter-spacing: 0.03em; padding: 0.05em 0.45em; border-radius: 10px; background: #eef0f6; color: #8a93ab; }
.mlbanner .gb.got { background: linear-gradient(180deg, #ffe58a, #ffc933); color: #3a2400; }
.mlbanner .gb i { font-style: normal; color: var(--red); }
.mlbanner .gb .avatar { --size: 1.5em !important; border-width: 2px; }

.mlside { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(0.4rem, calc(1.1 * var(--vq)), 0.8rem); }
.mlhud { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(0.35rem, calc(1 * var(--vq)), 0.7rem) clamp(0.5rem, calc(1.2 * var(--vq)), 0.9rem); }
.mlclock { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-right: 0.5rem; border-right: 2px dashed rgba(13, 21, 48, 0.25); }
.mlclock .secs { font-family: var(--font-flap); font-weight: 400; font-size: clamp(2rem, calc(7 * var(--vq)), 4.6rem); line-height: 0.95; min-width: 1.6em; text-align: center; }
.mlclock .secs.urgent { color: var(--red); animation: pulse 0.5s ease-in-out infinite alternate; }
.mlclock small, .mlval > small:first-child { font-weight: 800; font-size: clamp(0.7rem, calc(1.7 * var(--vq)), 0.95rem); color: var(--ink-soft); white-space: nowrap; }
.mlval { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
.mlval .v { font-family: var(--font-flap); font-weight: 400; font-size: clamp(1.8rem, calc(6 * var(--vq)), 4rem); line-height: 0.95; color: #b07800; text-shadow: 0 2px 0 #fff3b0; }
.mlval .v.up { animation: stamp 0.5s var(--ease-back) both; }
.mlval .nx { font-weight: 800; font-size: clamp(0.7rem, calc(1.7 * var(--vq)), 0.95rem); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlhud.max { border-color: var(--orange); box-shadow: var(--shadow-sm), 0 0 24px rgba(255, 138, 31, 0.7); }
.mlhud.max .v { color: #e5530b; }
.mlnext { height: 7px; border-radius: 99px; background: rgba(13, 21, 48, 0.15); overflow: hidden; }
.mlnext i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #22c983, #ffcf3f); transform-origin: left; transform: scaleX(0); }
.mlsteps { flex: none; display: flex; gap: 0.25rem; }
.mlsteps i { flex: 1; font-style: normal; text-align: center; font-family: var(--font-flap); font-size: clamp(0.85rem, calc(2.2 * var(--vq)), 1.3rem); line-height: 1.3; border-radius: 7px; background: rgba(8, 14, 34, 0.6); color: rgba(255, 255, 255, 0.45); }
.mlsteps i.on { background: rgba(47, 227, 154, 0.25); color: var(--check); text-decoration: line-through; }
.mlsteps i.cur { background: var(--gold); color: var(--ink); box-shadow: 0 0 12px rgba(255, 207, 63, 0.7); }

/* Live-Rangliste: Punkte im Finale; viele Spieler → eine dichte Spalte, Name bleibt, Häkchen-Zähler fällt weg */
.mlrank { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: clamp(0.2rem, calc(0.6 * var(--vq)), 0.4rem); }
.mlr { display: grid; grid-template-columns: 1.3em auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.4rem; background: rgba(8, 14, 34, 0.6); border: 2px solid rgba(255, 255, 255, 0.12); border-left: 6px solid var(--pc); border-radius: 12px; padding: 0.15rem 0.5rem 0.15rem 0.3rem; font-size: clamp(0.8rem, calc(2.3 * var(--vq)), 1.2rem); animation: tkIn 0.3s var(--ease-back) both; }
.mlr .pl { font-family: var(--font-flap); text-align: center; color: #8ea0cf; }
.mlr .avatar { --size: 1.8em !important; border-width: 2px; }
.mlr .nm { font-family: var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr .n { font-weight: 800; color: var(--check); white-space: nowrap; }
.mlr .n i { font-style: normal; font-size: 0.8em; }
.mlr b { font-family: var(--font-flap); font-weight: 400; font-size: 1.25em; color: #fff; min-width: 2.6em; text-align: right; }
.mlr.top { border-color: var(--gold); border-left-color: var(--pc); box-shadow: 0 0 14px rgba(255, 207, 63, 0.45); }
.mlr.top .pl { color: var(--gold); }
.mlrank.many { gap: clamp(0.12rem, calc(0.35 * var(--vq)), 0.3rem); }
.mlrank.many .mlr { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.3rem; padding: 0.05rem 0.4rem 0.05rem 0.2rem; border-left-width: 4px; font-size: clamp(0.72rem, calc(1.85 * var(--vq)), 1.05rem); }
.mlrank.many .mlr .avatar { --size: 1.45em !important; }
.mlrank.many .mlr :is(.pl, .n) { display: none; }
.mlrank.many .mlr b { min-width: 2.2em; font-size: 1.1em; }
/* schmale Spalte (kleines Fenster): auch mit wenigen Spielern die dichte Zeile – der Name geht vor */
.mlrank { container-type: inline-size; }
@container (max-width: 15rem) {
  .mlr { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.3rem; padding: 0.05rem 0.4rem 0.05rem 0.2rem; }
  .mlr :is(.pl, .n) { display: none; }
  .mlr b { min-width: 2.2em; font-size: 1.1em; }
}
.mlempty { font-family: var(--font-hand); font-size: 1.5rem; color: #8ea0cf; text-align: center; padding-top: 0.5rem; }

/* Bereit-Schirm: Titel auf der Klapptafel, Eckdaten, Vorsprung der Spitze */
.mlready { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.5rem, calc(1.8 * var(--vq)), 1.3rem); text-align: center; }
.mltitle .flap { font-size: clamp(1.8rem, calc(6.5 * var(--vq)), 4.6rem); max-width: 100%; }
.mlinfo { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.8rem; }
.mlinfo span { font-family: var(--font-head); font-size: clamp(1rem, calc(2.8 * var(--vq)), 1.7rem); background: rgba(8, 14, 34, 0.6); border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 99px; padding: 0.1rem 0.9rem; }
.mlnote { max-width: 60rem; font-size: clamp(0.85rem, calc(2.1 * var(--vq)), 1.15rem); opacity: 0.75; }
.mlrule { font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.6rem, calc(4.6 * var(--vq)), 3rem); line-height: 1; color: var(--gold); }
.mlrule b { color: var(--check); }
.mlheads { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.2rem; }
.mlheads > small { width: 100%; font-weight: 800; color: #cfdaff; font-size: clamp(0.9rem, calc(2.2 * var(--vq)), 1.2rem); }
.mlheads .hd { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; animation: popIn 0.45s var(--ease-back) both; }
.mlheads .hd .avatar { --size: clamp(2.6rem, calc(8 * var(--vq)), 4.4rem) !important; }
.mlheads .hd b { font-family: var(--font-head); font-weight: 600; font-size: clamp(0.9rem, calc(2.4 * var(--vq)), 1.3rem); }
.mlheads .hd em { font-style: normal; font-family: var(--font-flap); font-size: clamp(1.3rem, calc(3.6 * var(--vq)), 2.2rem); color: var(--check); line-height: 1; }
/* Schmale Bühne (PC mit Antwortleiste / kleines Fenster): Seitenleiste schmaler, Wertstufen ausblenden */
@media (max-width: 1100px) { .mlwrap { grid-template-columns: minmax(0, 1fr) clamp(13.5rem, 27%, 16rem); } .mlhud { grid-template-columns: 1fr; } .mlclock { flex-direction: row; gap: 0.4rem; padding: 0 0 0.3rem; border-right: 0; border-bottom: 2px dashed rgba(13, 21, 48, 0.25); } }

/* ================================================================ Handy */
body.play[data-mode="abgehakt"] .view .card.qtxt { font-family: var(--font-head); }
.notepad {
  position: relative;
  background: var(--paper) repeating-linear-gradient(180deg, transparent 0 29px, rgba(59, 130, 246, 0.22) 29px 30px);
  background-position: 0 10px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.8rem 0.6rem 2.6rem;
}
.notepad::before { content: ''; position: absolute; left: 1.9rem; top: 0; bottom: 0; width: 2px; background: rgba(255, 59, 71, 0.55); }
.notepad .nh { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.2; margin-left: -1.8rem; display: flex; align-items: center; gap: 0.4rem; }
.notepad .nh small { margin-left: auto; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.notepad .nsub { font-size: 0.85rem; color: var(--ink-soft); margin-left: -1.8rem; }
.notes { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.9rem; }
.notes li { position: relative; font-family: var(--font-hand); font-size: 25px; line-height: 30px; color: #1d2a55; white-space: nowrap; }
.notes li.mine { color: #0f7a4d; }
.notes li.mine::before { content: '✓'; position: absolute; left: -1.25rem; color: var(--green); font-family: var(--font-head); font-size: 18px; }
.notes li.fresh { animation: noteIn 0.4s var(--ease-back) both; }
.notes li.gapline { color: #c43; letter-spacing: 0.1em; }
.notes li.missing { color: #9aa3b8; }
.notes li.col { width: 100%; }
.notes.cols li { width: calc(50% - 0.5rem); overflow: hidden; text-overflow: ellipsis; }
@keyframes noteIn { from { transform: translateX(-8px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.notes .empty { font-family: var(--font-hand); font-size: 23px; color: #8b95b3; }

.abg-input { display: flex; gap: 0.5rem; }
.abg-input .input { flex: 1; min-width: 0; font-size: 20px; }
.abg-input .btn { padding: 0 1.1rem; font-size: 1.4rem; }
.abg-input.off { opacity: 0.55; }
.abg-fb { min-height: 1.6rem; text-align: center; font-weight: 800; font-size: 1.05rem; }
.abg-fb.hit, .abg-fb.correct, .abg-fb.ok { color: var(--check); animation: pop 0.35s var(--ease-back) both; }
.abg-fb.strike, .abg-fb.wrong, .abg-fb.rejected { color: #ff8a92; animation: shake 0.4s both; }
.abg-fb.close, .abg-fb.dup, .abg-fb.shown, .abg-fb.nope { color: var(--gold); animation: pop 0.35s var(--ease-back) both; }
.abg-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.abg-row .hearts { font-size: 1.5rem; }
.abg-big { font-family: var(--font-flap); letter-spacing: 0.04em; line-height: 1; }

/* Reihum am Handy */
.turnbanner { text-align: center; border-radius: 16px; border: 3px solid var(--ink); padding: 0.6rem 0.8rem; background: rgba(8, 14, 34, 0.6); }
.turnbanner b { display: block; font-family: var(--font-flap); font-size: 2.1rem; letter-spacing: 0.04em; line-height: 1; }
.turnbanner small { font-weight: 700; opacity: 0.85; }
.turnbanner.me { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 207, 63, 0.35), 0 0 30px rgba(255, 207, 63, 0.5); animation: meTurn 0.9s ease-in-out infinite alternate; }
.turnbanner.out { background: rgba(255, 59, 71, 0.2); border-color: var(--red); }
@keyframes meTurn { from { transform: scale(1); } to { transform: scale(1.03); } }
.tturn { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.tturn i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; }
.tturn.me i { background: linear-gradient(90deg, #ff3b47, #ffcf3f 45%, #22c983); }

/* Einspruch am Handy */
.objbtn { width: 100%; aspect-ratio: 1.6; max-height: 40vh; border-radius: 26px; border: 4px solid var(--ink); background: radial-gradient(circle at 50% 35%, #ff6b74, #d01c29 70%); color: #fff; font-family: var(--font-flap); font-size: 2.6rem; letter-spacing: 0.06em; box-shadow: 0 9px 0 #6a0710, 0 0 30px rgba(255, 59, 71, 0.45); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.objbtn:active { transform: translateY(6px); box-shadow: 0 3px 0 #6a0710; }
.objbtn[disabled] { filter: grayscale(0.6) brightness(0.8); }
.objbtn small { display: block; font-family: var(--font-head); font-size: 1rem; letter-spacing: 0; }
.objlive { display: flex; flex-direction: column; gap: 0.3rem; }
.objlive .flap { font-size: 1.25rem; justify-content: flex-start; min-height: 1.45em; }
.objlive .flap.empty { visibility: hidden; }
.objlive .flap.locked { box-shadow: 0 0.12em 0 #000, 0 0 0 3px var(--red); }

/* A–Z am Handy */
.abcmini { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.abcmini i { font-style: normal; font-family: var(--font-flap); font-size: 1.25rem; text-align: center; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.45); padding: 2px 0 0; }
.abcmini i.na { opacity: 0.25; text-decoration: line-through; }
.abcmini i.on { background: var(--check); color: var(--ink); animation: pop 0.3s var(--ease-back) both; }

/* Mega-Liste am Handy */
.mlbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.15rem 0.7rem; background: rgba(8, 14, 34, 0.6); border: 3px solid var(--ink); border-radius: 16px; padding: 0.35rem 0.8rem 0.5rem; }
.mlbar .v { grid-row: span 2; font-family: var(--font-flap); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--gold); min-width: 2.2em; text-align: center; }
.mlbar .tx { font-weight: 800; font-size: 0.9rem; line-height: 1.2; }
.mlbar .mlnext { background: rgba(255, 255, 255, 0.15); }
.mlbar.wait { background: rgba(255, 59, 71, 0.18); border-color: var(--red); }
.mlbar.max { border-color: var(--orange); box-shadow: 0 0 18px rgba(255, 138, 31, 0.5); }
.mlbar.max .v { color: var(--orange); }
.mlothers { min-height: 1.3rem; font-size: 0.9rem; line-height: 1.35; color: #cfdaff; }
.mlothers small { font-weight: 800; }
.mlothers span { display: inline-block; margin-right: 0.5rem; font-family: var(--font-hand); font-size: 1.3rem; text-decoration: line-through; text-decoration-color: rgba(255, 59, 71, 0.8); white-space: nowrap; }
.mlothers span i { font-style: normal; font-family: var(--font-head); font-size: 0.7rem; text-decoration: none; opacity: 0.75; }
.notes li.gold { color: #a06a00; }
.abg-fb.taken { color: var(--gold); animation: shake 0.4s both; }
.abg-fb.early { color: #ff8a92; animation: pop 0.35s var(--ease-back) both; }
.mlres .rrow.gold { color: #a06a00; }
.mlres .rrow small { font-weight: 800; color: var(--ink-soft); white-space: nowrap; }

/* Ergebnis-Karten (Handy) */
.abgres { text-align: left; }
.abgres .rrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0; border-bottom: 1px dashed rgba(13, 21, 48, 0.15); }
.abgres .rrow:last-child { border-bottom: 0; }
.abgres .rrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abgres .rrow b { font-family: var(--font-flap); font-size: 1.25rem; font-weight: 400; }
.abgres .rrow.mine { color: #0f7a4d; font-weight: 800; }
.abgres .rrow.mine span::before { content: '✓ '; }
.abgres .rh { font-family: var(--font-head); font-weight: 700; margin-bottom: 0.2rem; }
.abgres .rq { font-size: 0.85rem; color: var(--ink-soft); }

/* Runden mit eigener Anzeige: kein „✔ x/y fertig“ oben */
.screen.noans .answered-count { display: none !important; }
/* Auf farbigen Kacheln soll die Mittellinie nicht wie Durchstreichen aussehen */
.flap.good::after, .flap.bad::after, .flap.missing::after { background: rgba(0, 0, 0, 0.18); }

/* Reihum: Ehrenrunde & Schattenlisten */
.turnnow.lap { border-color: var(--gold); box-shadow: var(--shadow), 0 0 26px rgba(255, 207, 63, 0.55); }
.turnnow.lap .cycle { color: #a06a00; font-size: 1.05rem; }
.shadowbox { display: flex; flex-direction: column; gap: 0.45rem; background: rgba(8, 14, 34, 0.7); border: 2px dashed rgba(255, 255, 255, 0.25); border-radius: 14px; padding: 0.6rem 0.7rem; animation: tkIn 0.35s var(--ease-back) both; }
.shadowbox > b { font-family: var(--font-head); font-size: 1.1rem; }
.shadowbox .shrow { display: flex; align-items: flex-start; gap: 0.5rem; }
.shadowbox .shrow .avatar { --size: 1.8rem !important; border-width: 2px; flex: none; }
.shadowbox .shrow i { font-style: normal; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.1; }
.shadowbox .shrow i.ok { color: var(--check); }
.shadowbox .shrow i.gone { color: #8a96b8; text-decoration: line-through; }
.shadowpad { border-style: dashed; opacity: 0.92; }
/* Einspruch: „Alles korrekt!“ */
.objclean { width: 100%; margin-top: 0.6rem; font-family: var(--font-head); }
.objbig .cleans { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; min-height: 1.6rem; }

/* Lobby: Spielplan auf dem Klemmbrett */
body[data-mode="abgehakt"] :is(.lobby, .votescreen) { --lacc: var(--check); --lacc-ink: var(--ink); --lpanel: rgba(10, 20, 48, 0.64); --lline: rgba(255, 255, 255, 0.14); }

/* ------------------------------------------------ Rundenintro: Requisit (intro-props.js) */
/* Abgehakt!: Klemmbrett mit der Liste des Abends – Erledigtes durchgestrichen, die aktuelle Runde markiert */
.rp-clip { width: 40em; height: 56em; transform: rotate(-3deg); }
.rp-clip .board { position: absolute; inset: 0; background: linear-gradient(160deg, #c99a5e, #a87439); border: 0.5em solid var(--ink); border-radius: 2.4em; box-shadow: 0 1.3em 0 rgba(3, 8, 24, 0.55); }
.rp-clip .paper { position: absolute; left: 2.6em; right: 2.6em; top: 5.4em; bottom: 2.6em; padding: 3.6em 2.4em 2em 4em; overflow: hidden; background: var(--paper) repeating-linear-gradient(transparent 0 4.6em, rgba(59, 130, 246, 0.25) 4.6em 4.8em); border-radius: 0.6em; box-shadow: 0 0.4em 0 rgba(0, 0, 0, 0.18); font-family: var(--font-hand); color: var(--ink); }
.rp-clip .paper::before { content: ''; position: absolute; left: 2.6em; top: 0; bottom: 0; width: 0.25em; background: rgba(255, 59, 71, 0.45); }
.rp-clip .clamp { position: absolute; z-index: 2; left: 50%; top: -2.2em; width: 18em; height: 8em; margin-left: -9em; background: linear-gradient(#eef1f6, #a9b1c0); border: 0.45em solid var(--ink); border-radius: 1.6em 1.6em 1em 1em; }
.rp-clip .clamp::after { content: ''; position: absolute; left: 50%; top: 1.2em; width: 5em; height: 2.2em; margin-left: -2.5em; border-radius: 2em; background: var(--ink); }
.rp-clip .hd { display: flex; align-items: baseline; gap: 0.5em; font-weight: 700; }
.rp-clip .hd span { font-size: 4.6em; }
.rp-clip .hd b { font-size: 10em; line-height: 0.8; color: var(--strike); }
.rp-clip ul { list-style: none; margin: 1.6em 0 0; padding: 0; }
.rp-clip li { position: relative; padding-left: 1.3em; font-size: 2.9em; line-height: 1.655; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-clip li::before { content: '☐'; position: absolute; left: 0; opacity: 0.6; }
.rp-clip li.done::before { content: '✔'; color: var(--green); opacity: 1; }
.rp-clip li.done span { opacity: 0.55; text-decoration: line-through; text-decoration-color: var(--strike); text-decoration-thickness: 0.12em; }
.rp-clip li.now::before { content: '➜'; color: var(--strike); opacity: 1; }
.rp-clip li.now span { padding: 0 0.25em; border-radius: 0.2em; background: linear-gradient(transparent 20%, rgba(255, 207, 63, 0.75) 20% 85%, transparent 85%); }
.rp-clip .rp-ic { left: -6em; top: -4em; transform: rotate(-12deg); }