:root { --radius: 16px; }

/* ================================================================== */
/* Designs – jede:r wählt im Header unter „Design“ selbst              */
/* Farben als RGB-Tripel, damit Transparenz (rgb(… / .5)) funktioniert */
/* ================================================================== */

:root, [data-design="party"] {
  --c-bg: 15 14 23; --c-panel: 26 25 38; --c-panel2: 35 33 54;
  --c-pink: 255 42 133; --c-blue: 0 240 255; --c-sun: 255 214 0; --c-mint: 0 245 212;
  --c-ink: 255 255 254; --c-ink-accent: 15 14 23; --c-on-pink: 255 255 255; --c-on-blue: 15 14 23;
  --c-line: 0 0 0; --c-shadow: 255 255 255;
  --font-display: 'Fredoka', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bg-pattern: radial-gradient(rgb(var(--c-ink) / .055) 1px, transparent 1px); --bg-size: 22px 22px;
}
[data-design="light"] {
  --c-bg: 255 246 228; --c-panel: 255 255 255; --c-panel2: 246 236 214;
  --c-pink: 255 64 129; --c-blue: 0 150 230; --c-sun: 245 170 0; --c-mint: 0 176 146;
  --c-ink: 24 20 33; --c-ink-accent: 24 20 33; --c-on-pink: 255 255 255; --c-on-blue: 255 255 255;
  --c-line: 24 20 33; --c-shadow: 24 20 33;
  --bg-pattern: radial-gradient(rgb(var(--c-ink) / .09) 1px, transparent 1px); --bg-size: 20px 20px;
}
[data-design="synthwave"] {
  --c-bg: 18 6 36; --c-panel: 34 12 60; --c-panel2: 50 20 84;
  --c-pink: 255 56 200; --c-blue: 70 225 255; --c-sun: 255 150 60; --c-mint: 185 125 255;
  --c-ink: 255 238 255; --c-ink-accent: 18 6 36; --c-on-pink: 255 255 255; --c-on-blue: 18 6 36;
  --c-line: 8 0 20; --c-shadow: 255 56 200;
  --font-display: 'Orbitron', system-ui, sans-serif; --display-tracking: .02em;
  --bg-pattern: linear-gradient(transparent 0 calc(100% - 1px), rgb(var(--c-pink) / .14) 0), linear-gradient(90deg, transparent 0 calc(100% - 1px), rgb(var(--c-pink) / .14) 0);
  --bg-size: 48px 48px;
}
[data-design="kneipe"] {
  --c-bg: 30 21 14; --c-panel: 47 34 23; --c-panel2: 64 46 31;
  --c-pink: 205 58 42; --c-blue: 236 180 60; --c-sun: 255 216 130; --c-mint: 140 180 90;
  --c-ink: 248 236 214; --c-ink-accent: 30 21 14; --c-on-pink: 255 245 230; --c-on-blue: 30 21 14;
  --c-line: 10 6 3; --c-shadow: 236 180 60;
  --font-display: 'Bitter', Georgia, serif; --display-tracking: .005em;
  --bg-pattern: repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, rgb(255 220 160 / .025) 0 1px, transparent 1px 7px);
  --bg-size: auto;
}
[data-design="oktoberfest"] {
  --c-bg: 238 245 253; --c-panel: 255 255 255; --c-panel2: 226 238 250;
  --c-pink: 196 30 58; --c-blue: 0 98 175; --c-sun: 236 170 0; --c-mint: 30 132 80;
  --c-ink: 18 32 60; --c-ink-accent: 18 32 60; --c-on-pink: 255 255 255; --c-on-blue: 255 255 255;
  --c-line: 18 32 60; --c-shadow: 0 98 175;
  --font-display: 'Grenze Gotisch', Georgia, serif; --display-tracking: .01em;
  --bg-pattern: linear-gradient(45deg, rgb(0 98 175 / .07) 25%, transparent 25%, transparent 75%, rgb(0 98 175 / .07) 75%), linear-gradient(-45deg, rgb(0 98 175 / .07) 25%, transparent 25%, transparent 75%, rgb(0 98 175 / .07) 75%);
  --bg-size: 44px 44px;
}
[data-design="arcade"] {
  --c-bg: 4 10 6; --c-panel: 9 22 13; --c-panel2: 14 34 20;
  --c-pink: 255 70 130; --c-blue: 40 255 140; --c-sun: 255 228 0; --c-mint: 0 210 255;
  --c-ink: 190 255 200; --c-ink-accent: 4 10 6; --c-on-pink: 4 10 6; --c-on-blue: 4 10 6;
  --c-line: 40 255 140; --c-shadow: 20 120 60;
  --font-display: 'VT323', ui-monospace, monospace; --font-body: 'Space Mono', ui-monospace, monospace; --display-tracking: .04em;
  --bg-pattern: repeating-linear-gradient(0deg, rgb(var(--c-blue) / .05) 0 1px, transparent 1px 4px);
  --bg-size: auto;
}
[data-design="pastell"] {
  --c-bg: 250 244 255; --c-panel: 255 255 255; --c-panel2: 241 233 252;
  --c-pink: 255 120 165; --c-blue: 100 170 255; --c-sun: 245 185 60; --c-mint: 70 200 165;
  --c-ink: 64 52 86; --c-ink-accent: 64 52 86; --c-on-pink: 255 255 255; --c-on-blue: 255 255 255;
  --c-line: 64 52 86; --c-shadow: 196 176 232;
  --bg-pattern: radial-gradient(rgb(var(--c-pink) / .12) 1.5px, transparent 1.5px); --bg-size: 26px 26px;
}

/* Abgeleitete Variablen – auf jedem Design-Element neu berechnet (auch in Vorschauen) */
:root, [data-design] {
  --bg: rgb(var(--c-bg)); --panel: rgb(var(--c-panel)); --panel2: rgb(var(--c-panel2));
  --pink: rgb(var(--c-pink)); --blue: rgb(var(--c-blue)); --sun: rgb(var(--c-sun)); --mint: rgb(var(--c-mint));
  --ink: rgb(var(--c-ink)); --cream: var(--ink); --night: var(--bg); --ink-accent: rgb(var(--c-ink-accent));
  --on-pink: rgb(var(--c-on-pink)); --on-blue: rgb(var(--c-on-blue));
  --line: rgb(var(--c-line)); --shadow: rgb(var(--c-shadow));
}
[data-design="arcade"] .game-card .card-text, [data-design="arcade"] .btn { letter-spacing: .02em; }
[data-design="arcade"] h1, [data-design="arcade"] h2, [data-design="arcade"] h3, [data-design="arcade"] .font-display, [data-design="arcade"] .btn { font-size-adjust: 0.62; }
[data-design="oktoberfest"] .code-pill, [data-design="synthwave"] .code-pill { font-family: 'Fredoka', system-ui, sans-serif; }

/* Design-Wähler */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.design-card { text-align: left; border-radius: 16px; border: 2.5px solid var(--line); overflow: hidden; background: var(--bg); background-image: var(--bg-pattern); background-size: var(--bg-size); color: var(--ink); transition: transform .12s; }
.design-card:hover { animation: wobble .45s; }
.design-card.active { outline: 4px solid var(--blue); outline-offset: 2px; }
.design-card .dc-body { padding: .7rem; }
.design-card .dc-panel { background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: .5rem; box-shadow: 3px 3px 0 var(--shadow); }
.design-card .dc-dots { display: flex; gap: 4px; margin-top: .45rem; }
.design-card .dc-dots span { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line); }
.design-card .dc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding: .45rem .7rem; background: var(--panel); border-top: 2px solid var(--line); }


html { -webkit-tap-highlight-color: transparent; }
html { overflow-x: hidden; overflow-x: clip; }
body { background: var(--bg); overflow-x: hidden; overflow-x: clip; }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--c-ink) / .25) transparent; }
h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: var(--display-tracking, normal); }
body { font-family: var(--font-body); color: var(--ink); }

/* ---------- Hintergrund ---------- */
body {
  background-color: var(--ink-accent);
  background-image: var(--bg-pattern);
  background-size: var(--bg-size);
}
body.has-bg-image { background-size: cover; background-position: center; background-attachment: fixed; }

/* ---------- Karten / Panels (Neo-Brutalismus) ---------- */
.nb-card {
  background: var(--panel);
  border: 2.5px solid var(--line);
  outline: 1px solid rgb(var(--c-ink) / .07);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 0 rgb(var(--c-ink) / .08);
}
.nb-shadow-pink { box-shadow: 7px 7px 0 0 var(--pink); }
.nb-shadow-blue { box-shadow: 7px 7px 0 0 var(--blue); }
.nb-shadow-sun { box-shadow: 7px 7px 0 0 var(--sun); }
.nb-shadow-mint { box-shadow: 7px 7px 0 0 var(--mint); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--panel2); --fg: var(--cream); --sh: rgb(var(--c-ink) / .18);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  padding: .8rem 1.2rem; border-radius: 14px;
  background: var(--bg); color: var(--fg);
  border: 2.5px solid var(--line);
  box-shadow: 4px 4px 0 0 var(--sh);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  user-select: none; cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { animation: wobble .45s ease; filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--sh); animation: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn-pink { --bg: var(--pink); --fg: var(--on-pink); --sh: var(--shadow); }
.btn-blue { --bg: var(--blue); --fg: var(--on-blue); --sh: var(--shadow); }
.btn-sun { --bg: var(--sun); --fg: var(--ink-accent); --sh: var(--shadow); }
.btn-mint { --bg: var(--mint); --fg: var(--ink-accent); --sh: var(--shadow); }
.btn-ghost { --bg: rgb(var(--c-ink) / .06); --sh: rgb(var(--c-ink) / .1); }
.btn-danger { --bg: #3b1020; --fg: #ff8db8; --sh: var(--pink); }
.btn-sm { padding: .55rem .9rem; font-size: .95rem; border-radius: 12px; }
.btn-xs { padding: .3rem .6rem; font-size: .8rem; border-radius: 10px; box-shadow: 2px 2px 0 0 var(--sh); border-width: 2px; }
.btn-lg { padding: .95rem 1.4rem; font-size: 1.15rem; border-radius: 16px; }
.btn-xl { padding: 1.1rem 1.6rem; font-size: 1.3rem; border-radius: 18px; }
.btn.active { --bg: var(--cream); --fg: var(--ink-accent); }

@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg) scale(1.03); }
  50% { transform: rotate(2.5deg) scale(1.03); }
  75% { transform: rotate(-1.5deg); }
}
@keyframes bounce { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }

/* ---------- Inputs ---------- */
.input {
  background: var(--bg); color: var(--cream);
  border: 2.5px solid #2f2c45; border-radius: 14px;
  padding: .8rem 1rem; font-weight: 600; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgb(var(--c-blue) / .15); }
.input::placeholder { color: rgb(var(--c-ink) / .3); }
textarea.input { resize: vertical; min-height: 110px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
input[type=range] { accent-color: var(--pink); width: 100%; }

.avatar-btn {
  position: relative; width: 64px; flex-shrink: 0; border-radius: 16px;
  background: var(--sun); border: 2.5px solid var(--line); box-shadow: 3px 3px 0 var(--shadow);
  font-size: 1.55rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.avatar-btn:hover { animation: wobble .45s; }
.avatar-btn .dice { position: absolute; right: -8px; bottom: -8px; font-size: 1rem; background: var(--bg); border-radius: 999px; padding: 2px; border: 2px solid var(--sun); }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-weight: 700; font-size: .85rem; border: 2px solid var(--line); background: var(--panel2); }
.chip-pink { background: rgb(var(--c-pink) / .16); color: color-mix(in srgb, var(--pink) 62%, var(--ink)); border-color: rgb(var(--c-pink) / .5); }
.chip-blue { background: rgb(var(--c-blue) / .12); color: color-mix(in srgb, var(--blue) 62%, var(--ink)); border-color: rgb(var(--c-blue) / .45); }
.chip-sun { background: rgb(var(--c-sun) / .13); color: color-mix(in srgb, var(--sun) 62%, var(--ink)); border-color: rgb(var(--c-sun) / .45); }
.chip-mint { background: rgb(var(--c-mint) / .12); color: color-mix(in srgb, var(--mint) 62%, var(--ink)); border-color: rgb(var(--c-mint) / .45); }

.code-pill { font-family: var(--font-display); font-weight: 700; letter-spacing: .22em; background: var(--sun); color: var(--ink-accent); border: 2.5px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); border-radius: 12px; padding: .2rem .65rem .2rem .85rem; font-size: 1.25rem; cursor: pointer; }
.code-pill:hover { animation: wobble .45s; }

/* ---------- Spieler ---------- */
.player-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 12px; background: rgb(var(--c-ink) / .03); border: 1.5px solid transparent; }
.player-row.me { border-color: rgb(var(--c-blue) / .35); background: rgb(var(--c-blue) / .05); }
.player-row.offline { opacity: .45; }
.avatar { font-size: 1.35rem; line-height: 1; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 12px; background: var(--panel2); border: 2px solid var(--line); flex-shrink: 0; letter-spacing: -.12em; }
.avatar-lg { width: 4rem; height: 4rem; font-size: 2rem; border-radius: 18px; }
.dot { width: .6rem; height: .6rem; border-radius: 999px; background: #555; flex-shrink: 0; }
.dot.on { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.sip-count { font-family: var(--font-display); font-weight: 700; min-width: 1.6rem; text-align: right; }
.icon-btn { width: 1.9rem; height: 1.9rem; border-radius: 9px; display: grid; place-items: center; background: rgb(var(--c-ink) / .06); border: 2px solid var(--line); font-size: .85rem; font-weight: 800; transition: transform .1s; }
.icon-btn:hover { animation: wobble .4s; background: rgb(var(--c-ink) / .12); }
.icon-btn.plus { background: var(--pink); color: var(--on-pink); }

/* ---------- Spielkarte (Frage/Aufgabe) ---------- */
.game-card {
  --c: var(--pink);
  position: relative; background: var(--c); color: var(--ink-accent);
  border: 3px solid var(--line); border-radius: 22px;
  box-shadow: 8px 8px 0 0 var(--shadow);
  padding: 2rem 1.6rem; text-align: center;
}
.game-card .type-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--bg); color: var(--c); border: 2.5px solid var(--line); border-radius: 999px; padding: .25rem 1rem; font-family: var(--font-display); font-weight: 700; white-space: nowrap; font-size: .95rem; }
.game-card .card-text { font-family: var(--font-body); font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.3; }
.game-card .card-emoji { font-size: 3rem; line-height: 1; margin-bottom: .6rem; }

.flip-in { animation: flipIn .65s cubic-bezier(.2,.9,.3,1.25) both; transform-origin: center; }
@keyframes flipIn {
  0% { transform: perspective(900px) rotateY(-95deg) scale(.85); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: perspective(900px) rotateY(0) scale(1); opacity: 1; }
}
.pop-in { animation: popIn .45s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.slide-up { animation: slideUp .45s ease both; }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.stagger > * { animation: slideUp .45s ease both; }
.stagger > *:nth-child(2) { animation-delay: .06s; } .stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .18s; } .stagger > *:nth-child(5) { animation-delay: .24s; }
.stagger > *:nth-child(6) { animation-delay: .3s; } .stagger > *:nth-child(n+7) { animation-delay: .36s; }

/* ---------- Timer ---------- */
.timer { position: relative; height: 16px; border-radius: 999px; background: rgb(var(--c-ink) / .07); border: 2px solid var(--line); overflow: hidden; }
.timer-fill { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, var(--mint), var(--blue)); border-radius: 999px; transition: background .3s; }
.timer.warn .timer-fill { background: linear-gradient(90deg, var(--sun), #ff9d00); }
.timer.danger .timer-fill { background: linear-gradient(90deg, var(--pink), #ff5b5b); animation: pulse .5s ease-in-out infinite alternate; }
.timer-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; font-size: .7rem; color: var(--ink-accent); mix-blend-mode: normal; }
@keyframes pulse { to { filter: brightness(1.3); } }

/* ---------- Abstimmung ---------- */
.vote-btn { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .7rem .8rem; border-radius: 14px; background: var(--panel2); border: 2.5px solid var(--line); box-shadow: 3px 3px 0 rgb(var(--c-ink) / .12); font-weight: 700; transition: transform .1s; }
.vote-btn:hover { animation: wobble .45s; }
.vote-btn.selected { background: var(--blue); color: var(--ink-accent); box-shadow: 3px 3px 0 var(--shadow); }
.vote-btn:disabled { opacity: .5; }
.bar-row { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; gap: .7rem; align-items: center; }
.bar { height: 2.2rem; border-radius: 12px; background: rgb(var(--c-ink) / .05); border: 2px solid var(--line); overflow: hidden; }
.bar > span { display: flex; align-items: center; gap: 2px; height: 100%; padding-left: .4rem; background: var(--blue); width: var(--w); animation: grow 1.1s cubic-bezier(.2,.9,.3,1) both; font-size: 1rem; white-space: nowrap; overflow: hidden; }
.bar.win > span { background: var(--pink); }
@keyframes grow { from { width: 0; } }

.answer-btn { flex: 1; min-width: 0; min-height: 120px; flex-direction: column; font-size: 1.35rem; white-space: normal; text-align: center; }
@media (max-width: 480px) { .answer-btn { font-size: 1.1rem; padding-left: .5rem; padding-right: .5rem; } }
.answer-btn .big { font-size: 2.6rem; line-height: 1; }

/* ---------- Spielkarten (Deck) ---------- */
.pcard {
  --w: 3.6rem; width: var(--w); height: calc(var(--w) * 1.4); border-radius: calc(var(--w) * .14);
  border: 2.5px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; line-height: 1; position: relative; flex-shrink: 0;
  box-shadow: 3px 3px 0 rgb(var(--c-ink) / .18); transition: transform .15s, box-shadow .15s;
}
.pcard.sm { --w: 2.5rem; } .pcard.lg { --w: 5.2rem; } .pcard.xl { --w: 7rem; }
.pcard.face { background: #fffaf0; }
.pcard.face .r { font-size: calc(var(--w) * .42); }
.pcard.face .s { font-size: calc(var(--w) * .42); }
.pcard.red { color: #e11d48; } .pcard.black { color: #111; }
.pcard.back { background: repeating-linear-gradient(45deg, var(--pink) 0 6px, #c4166a 6px 12px); }
.pcard.back::after { content: '🍻'; font-size: calc(var(--w) * .38); filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.pcard.current { box-shadow: 0 0 0 3px var(--sun), 0 0 26px var(--sun); transform: translateY(-4px) scale(1.06); }
.pcard.playable { cursor: pointer; box-shadow: 0 0 0 3px var(--mint), 0 0 18px var(--mint); animation: hop 1s ease-in-out infinite; }
.pcard.selected { transform: translateY(-12px) rotate(-4deg); box-shadow: 0 0 0 4px var(--pink), 0 0 26px var(--pink); animation: none; }
.pcard.dim { opacity: .55; }
.pcard .badge { position: absolute; top: -9px; right: -9px; background: var(--pink); color: var(--on-pink); border: 2px solid var(--line); font-size: .7rem; border-radius: 999px; padding: 2px 6px; }
@keyframes hop { 50% { transform: translateY(-5px); } }
.pcard.blink { animation: blink .25s ease-in-out 5 alternate; }
@keyframes blink { from { box-shadow: 0 0 0 4px var(--pink), 0 0 30px var(--pink); transform: scale(1.12); } to { box-shadow: 0 0 0 0 transparent; transform: scale(1); } }

.pyr-row { display: flex; gap: .55rem; justify-content: center; align-items: center; }
.pyr-label { width: 4.2rem; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: rgb(var(--c-ink) / .5); }

/* ---------- Pferderennen ---------- */
.track { position: relative; }
.lane { position: relative; height: 4.6rem; border-radius: 14px; background: repeating-linear-gradient(90deg, rgb(var(--c-ink) / .035) 0 calc(100%/8), rgb(var(--c-ink) / .07) calc(100%/8) calc(200%/8)); border: 2px solid var(--line); margin-bottom: .5rem; }
.lane .finish { position: absolute; right: 0; top: 0; bottom: 0; width: calc(100% / 8); border-left: 3px dashed rgb(var(--c-ink) / .35); display: grid; place-items: center; font-size: 1.4rem; }
.horse { position: absolute; top: 50%; transform: translateY(-50%); transition: left .7s cubic-bezier(.3,1.4,.5,1); display: flex; align-items: center; gap: .25rem; }
.horse .pcard { --w: 2.6rem; }
.horse.leader .pcard { box-shadow: 0 0 0 3px var(--sun), 0 0 18px var(--sun); }
.sideline { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; margin-top: .25rem; }
.sideline > div { display: flex; justify-content: center; }
.sideline .pcard { --w: 2.3rem; }
.suit-btn { font-size: 2rem; min-width: 4.5rem; }
.suit-btn.red { color: #ff4d6d; }

/* ---------- Regeln ---------- */
.rule-pill { display: flex; align-items: flex-start; gap: .5rem; background: rgb(var(--c-mint) / .08); border: 2px solid rgb(var(--c-mint) / .35); color: #b8fff4; border-radius: 12px; padding: .45rem .7rem; font-size: .88rem; font-weight: 600; }

/* ---------- Mode-Kacheln ---------- */
.mode-tile { --c: var(--pink); text-align: left; padding: 1.2rem; border-radius: 18px; background: var(--panel); border: 2.5px solid var(--line); box-shadow: 5px 5px 0 var(--c); transition: transform .15s; display: flex; flex-direction: column; gap: .4rem; }
.mode-tile:hover:not(:disabled) { animation: wobble .45s; transform: translate(-2px, -2px); }
.mode-tile .em { font-size: 2.4rem; line-height: 1; }
.mode-tile:disabled { cursor: default; }
.mode-pill { padding: .35rem .7rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; background: rgb(var(--c-ink) / .05); border: 2px solid var(--line); white-space: nowrap; }
.mode-pill:hover { animation: wobble .45s; background: rgb(var(--c-ink) / .1); }
.mode-pill.active { background: var(--sun); color: var(--ink-accent); }

/* ---------- Reaktionen ---------- */
.reaction-bar { display: flex; gap: .3rem; padding: .45rem; border-radius: 999px; background: rgb(var(--c-panel) / .92); backdrop-filter: blur(10px); border: 2.5px solid var(--line); box-shadow: 4px 4px 0 var(--pink); }
.reaction-bar button { font-size: 1.6rem; width: 3rem; height: 3rem; border-radius: 999px; transition: transform .12s, background .12s; }
.reaction-bar button:hover { transform: translateY(-5px) scale(1.18); background: rgb(var(--c-ink) / .08); }
.reaction-bar button:active { transform: scale(.9); }
#reactions-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.floater { position: absolute; bottom: -80px; display: flex; flex-direction: column; align-items: center; animation: floatUp 3.4s ease-out forwards; }
.floater .e { font-size: 2.8rem; animation: sway 1.1s ease-in-out infinite alternate; }
.floater .n { font-size: .72rem; font-weight: 800; background: rgb(var(--c-bg) / .85); padding: 1px 8px; border-radius: 999px; border: 1.5px solid rgb(var(--c-ink) / .2); margin-top: 2px; white-space: nowrap; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 10% { opacity: 1; transform: translateY(-60px) scale(1.1); } 80% { opacity: 1; } 100% { transform: translateY(-75vh) scale(1); opacity: 0; } }
@keyframes sway { from { transform: translateX(-12px) rotate(-10deg); } to { transform: translateX(12px) rotate(10deg); } }

/* ---------- Toasts, Flash, Modal ---------- */
#toasts { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; width: min(92vw, 440px); }
.toast { pointer-events: auto; background: var(--panel); border: 2.5px solid var(--line); box-shadow: 4px 4px 0 var(--blue); border-radius: 14px; padding: .65rem 1rem; font-weight: 700; font-size: .92rem; animation: toastIn .35s cubic-bezier(.2,.9,.3,1.3) both; }
.toast.error { box-shadow: 4px 4px 0 var(--pink); }
.toast.success { box-shadow: 4px 4px 0 var(--mint); }
.toast.warn { box-shadow: 4px 4px 0 var(--sun); }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { transform: translateY(-20px) scale(.9); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-14px); opacity: 0; } }

#flash-layer { position: fixed; left: 0; right: 0; top: 34%; z-index: 55; display: flex; justify-content: center; pointer-events: none; }
.flash { background: var(--pink); color: var(--on-pink); border: 3px solid var(--line); box-shadow: 7px 7px 0 var(--shadow); border-radius: 20px; padding: 1rem 1.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; text-align: center; animation: flashIn 2.6s ease forwards; max-width: 92vw; }
@keyframes flashIn { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 12% { transform: scale(1.08) rotate(2deg); opacity: 1; } 20% { transform: scale(1) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(5,5,10,.72); backdrop-filter: blur(4px); z-index: 70; display: grid; place-items: center; padding: 1rem; animation: fadeIn .2s ease; }
.modal { width: min(100%, 480px); max-height: 90vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; animation: popIn .35s cubic-bezier(.2,.9,.3,1.3); }
@keyframes fadeIn { from { opacity: 0; } }

#conn-status { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); z-index: 65; background: var(--sun); color: var(--ink-accent); font-weight: 800; padding: .5rem 1rem; border-radius: 999px; border: 2.5px solid var(--line); }

.result-banner { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; padding: .9rem 1.2rem; border-radius: 16px; border: 3px solid var(--line); background: var(--sun); color: var(--ink-accent); box-shadow: 5px 5px 0 var(--shadow); text-align: center; }
.muted { color: rgb(var(--c-ink) / .55); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* Reaktionen trotzdem zeigen – ruhig ein- und ausblenden statt hochfliegen */
  .floater { bottom: 22vh !important; animation: floatFade 2.8s ease forwards !important; }
  .floater .e { animation: none !important; }
  .event-progress { animation: shrink 8s linear forwards !important; }
}
@keyframes floatFade { 0% { opacity: 0; transform: scale(.85); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Fixes / Responsive ---------- */
.btn.hidden, .chip.hidden { display: none; }
.avatar, .avatar-btn, .code-pill, .chip { white-space: nowrap; }
.avatar { font-size: 1.05rem; letter-spacing: -.18em; padding-right: .18em; }
.avatar-lg { font-size: 1.7rem; }
.avatar-btn { font-size: 1.35rem; letter-spacing: -.12em; }
@media (max-width: 480px) {
  .code-pill { font-size: 1rem; letter-spacing: .14em; padding: .15rem .5rem; }
  .reaction-bar button { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; }
  .game-card { padding: 1.7rem 1.1rem; }
}

/* ---------- Eigene Assets ---------- */
.pcard.back.custom { background: var(--card-back) center / cover no-repeat, var(--pink); }
.pcard.back.custom::after { content: none; }
img.mode-icon { display: inline-block; object-fit: contain; }
img.mode-icon.em { width: 3rem; height: 3rem; }
img.mode-icon.text-3xl { width: 2.2rem; height: 2.2rem; }
img.mode-icon.pill-icon { width: 1.2rem; height: 1.2rem; vertical-align: -3px; }
.mode-li { display: flex; align-items: center; gap: .55rem; }
.mode-li::before { content: ''; width: .7rem; height: .7rem; border-radius: 3px; background: var(--c); border: 2px solid var(--line); flex-shrink: 0; }

/* ---------- Statusleiste, Strafen, Events ---------- */
.status-strip { display: flex; gap: .5rem; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.status-strip::-webkit-scrollbar { display: none; }
.status-chip { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; padding: .35rem .65rem; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); outline: 1px solid rgb(var(--c-ink) / .07); font-size: .85rem; }
.status-chip.me { outline-color: rgb(var(--c-blue) / .5); }
.status-chip.offline { opacity: .45; }
.status-chip .sips { font-family: var(--font-display); font-weight: 700; background: var(--pink); color: var(--on-pink); border-radius: 8px; padding: 0 .4rem; min-width: 1.5rem; text-align: center; }
.ycard { display: inline-block; width: .55rem; height: .8rem; border-radius: 2px; background: var(--sun); border: 1.5px solid var(--line); transform: rotate(-6deg); }
.curse-dot { width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #FF5E5B; color: #fff; font-weight: 800; font-size: .7rem; display: grid; place-items: center; border: 1.5px solid var(--line); }

.curse-pill { display: flex; align-items: flex-start; gap: .55rem; border-radius: 12px; padding: .45rem .6rem; font-size: .88rem; font-weight: 600; background: rgba(255,94,91,.09); border: 2px solid rgba(255,94,91,.4); color: #ffd1d0; }
.curse-pill.kind-buddy { background: rgb(var(--c-blue) / .07); border-color: rgb(var(--c-blue) / .35); color: #c9fbff; }
.curse-pill.kind-buff { background: rgb(var(--c-mint) / .08); border-color: rgb(var(--c-mint) / .35); color: #c2fff5; }

#event-layer { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 58; width: min(94vw, 520px); }
.event-banner { --c: var(--sun); position: relative; overflow: hidden; cursor: pointer; background: var(--c); color: var(--ink-accent); border: 3px solid var(--line); box-shadow: 7px 7px 0 var(--shadow); border-radius: 18px; padding: 1rem 1.2rem 1.3rem; animation: eventIn .55s cubic-bezier(.2,.9,.3,1.3) both; }
.event-banner.out { animation: toastOut .3s ease forwards; }
.event-banner.kind-curse, .event-banner.kind-red { --c: #FF5E5B; color: #fff; }
.event-banner.kind-red { --c: #e0002f; }
.event-banner.kind-lucky, .event-banner.kind-buff { --c: var(--mint); }
.event-banner.kind-duel, .event-banner.kind-buddy { --c: var(--blue); }
.event-banner.kind-all, .event-banner.kind-thirst { --c: var(--pink); color: var(--on-pink); }
.event-tag { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; opacity: .75; margin-bottom: .2rem; }
.event-progress { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: rgba(0,0,0,.35); transform-origin: left; animation: shrink 8s linear forwards; }
@keyframes shrink { to { transform: scaleX(0); } }
@keyframes eventIn { 0% { transform: translateY(30px) rotate(-3deg) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }

.mix-tile { flex-direction: column; background: linear-gradient(0deg, rgb(var(--c-sun) / .06), rgb(var(--c-sun) / .06)), var(--panel); }
.mix-option { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 12px; background: var(--panel2); border: 2px solid var(--line); border-left: 6px solid var(--c); cursor: pointer; }
.mix-option input { accent-color: var(--c); }
.mode-pill.mix-current { outline: 2px dashed var(--sun); outline-offset: 1px; }
.btn-danger { --bg: #3b1020; --fg: #ff8db8; --sh: var(--pink); }

@media (max-width: 480px) {
  header .btn-sm { padding: .4rem .55rem; font-size: .8rem; }
  #event-layer { bottom: 84px; }
}

/* ---------- Neue Spiele ---------- */
.shots { font-family: var(--font-display); font-weight: 700; background: #FFB347; color: var(--ink-accent); border-radius: 8px; padding: 0 .4rem; }

.bomb { font-size: 7rem; line-height: 1; display: inline-block; filter: drop-shadow(6px 6px 0 rgb(var(--c-ink) / .15)); }
.bomb.burning { animation: shake .35s ease-in-out infinite; }
.bomb.burning.mine { animation-duration: .18s; filter: drop-shadow(0 0 30px var(--pink)); }
.bomb.exploded { animation: popIn .4s cubic-bezier(.2,.9,.3,1.6); font-size: 9rem; }
@keyframes shake { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }
.pass-btn { animation: pulseBtn .8s ease-in-out infinite; }
@keyframes pulseBtn { 50% { transform: scale(1.05); } }

.quiz-opt { justify-content: flex-start; white-space: normal; text-align: left; min-height: 4rem; }
.quiz-letter { font-family: var(--font-display); font-weight: 700; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 10px; background: rgba(0,0,0,.18); flex-shrink: 0; }
.quiz-opt:disabled { opacity: 1; cursor: default; }
.quiz-opt.quiz-dim { opacity: .35 !important; }
.quiz-opt.quiz-right { --bg: #22c55e !important; --fg: var(--on-pink); box-shadow: 0 0 0 4px #22c55e, 5px 5px 0 var(--shadow); opacity: 1 !important; }
.quiz-opt.quiz-wrong { --bg: #ef4444 !important; --fg: var(--on-pink); opacity: 1 !important; text-decoration: line-through; }

.draw-wrap { width: 100%; max-width: 100%; background: #fff; border-radius: 16px; border: 3px solid var(--line); box-shadow: 6px 6px 0 rgb(var(--c-ink) / .18); overflow: hidden; touch-action: none; }
.draw-wrap canvas { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; }
.draw-wrap.can-draw canvas { cursor: crosshair; }
.swatch { width: 1.8rem; height: 1.8rem; border-radius: 8px; border: 2.5px solid var(--line); box-shadow: 0 0 0 1px rgb(var(--c-ink) / .25); }
.swatch.active { outline: 3px solid var(--blue); outline-offset: 2px; }
.size-btn { width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--panel2); border: 2px solid var(--line); display: grid; place-items: center; }
.size-btn span { background: var(--ink); border-radius: 999px; display: block; }
.size-btn.active { outline: 3px solid var(--blue); }
.guess-log { max-height: 16rem; overflow-y: auto; }

.odds-num { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 1; background: var(--panel2); border: 3px solid var(--line); border-radius: 18px; padding: .8rem 1.6rem; box-shadow: 5px 5px 0 var(--sun); }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgb(var(--c-ink) / .07); flex-wrap: wrap; }
.seg { display: inline-flex; flex-wrap: wrap; border: 2.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel2); }
.seg-btn { padding: .4rem .75rem; font-family: var(--font-display); font-weight: 600; font-size: .9rem; border-right: 2px solid var(--line); }
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover:not(:disabled) { background: rgb(var(--c-ink) / .08); }
.seg-btn.active, .seg-btn.active:hover:not(:disabled) { background: var(--sun); color: var(--ink-accent); }
.seg-btn:disabled { cursor: default; }
.game-toggle { padding: .4rem .8rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .92rem; border: 2.5px solid var(--line); background: var(--panel2); color: rgb(var(--c-ink) / .5); transition: transform .1s; }
.game-toggle.on { background: var(--c); color: var(--ink-accent); box-shadow: 3px 3px 0 var(--shadow); }
.game-toggle:hover:not(:disabled) { animation: wobble .45s; }
.game-toggle:disabled { cursor: default; }
.team-col { background: var(--panel2); border: 2px solid var(--line); border-top: 5px solid var(--c); border-radius: 12px; padding: .7rem; }

/* ---------- Endstand ---------- */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: .8rem; }
.podium-col { display: flex; flex-direction: column; align-items: center; width: 9rem; text-align: center; }
.podium-block { width: 100%; margin-top: .5rem; border: 3px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--sun); box-shadow: 5px 0 0 var(--shadow); display: grid; place-items: start center; padding-top: .5rem; font-size: 2rem; }
.podium-col:nth-child(1) .podium-block { background: var(--blue); }
.podium-col:nth-child(3) .podium-block { background: var(--pink); }
.sum-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sum-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--c-ink) / .55); padding: .4rem .6rem; border-bottom: 2px solid rgb(var(--c-ink) / .12); }
.sum-table td { padding: .5rem .6rem; border-bottom: 1px solid rgb(var(--c-ink) / .07); }
.sum-table tr.me td { background: rgb(var(--c-blue) / .08); }
@media (max-width: 480px) { .podium-col { width: 6.2rem; } }

/* ---------- Avatare & Konto ---------- */
.av-img { display: inline-block; width: 1.5em; height: 1.5em; border-radius: .35em; object-fit: cover; vertical-align: middle; }
.avatar .av-img, .avatar-btn .av-img { width: 100%; height: 100%; border-radius: inherit; }
.avatar { overflow: hidden; }
.avatar-btn { overflow: hidden; }
.avatar-btn #avatar-preview { width: 100%; height: 100%; display: grid; place-items: center; }
button.avatar { cursor: pointer; }
button.avatar:hover { outline: 2px solid var(--blue); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: .5rem; }
.av-pick { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .2rem; border-radius: 12px; background: var(--panel2); border: 2px solid var(--line); transition: transform .1s; }
.av-pick:hover { animation: wobble .45s; }
.av-pick.active { outline: 3px solid var(--blue); outline-offset: 1px; }
.av-pick .av-emoji { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.12em; white-space: nowrap; }
.av-pick .av-label { font-size: .62rem; font-weight: 700; text-align: center; line-height: 1.1; color: rgb(var(--c-ink) / .7); }
.stat-tile { background: var(--panel2); border: 2px solid var(--line); border-radius: 12px; padding: .6rem; text-align: center; }
.acct-badge { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; background: var(--mint); color: var(--ink-accent); font-size: .6rem; font-weight: 800; vertical-align: middle; }

/* ---------- Soundboard ---------- */
.reaction-bar .sb-open { border-left: 2px solid rgb(var(--c-ink) / .15); border-radius: 0 999px 999px 0; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.sb-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 6.2rem; padding: .6rem .4rem; border-radius: 14px; background: var(--panel2); border: 2.5px solid var(--line); box-shadow: 3px 3px 0 var(--shadow); text-align: center; transition: transform .1s; }
button.sb-tile:hover { animation: wobble .45s; }
button.sb-tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.sb-tile.played { background: var(--sun); color: var(--ink-accent); }
.sb-tile.locked { opacity: .6; box-shadow: none; }
.sb-emoji { font-size: 1.9rem; line-height: 1; }
.sb-name { font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1.1; }
.sb-req { font-size: .66rem; font-weight: 700; color: rgb(var(--c-ink) / .65); }
.sb-bar { width: 80%; height: 6px; border-radius: 999px; background: rgb(var(--c-ink) / .12); overflow: hidden; }
.sb-bar > span { display: block; height: 100%; background: var(--mint); }

/* ---------- Admin ---------- */
.admin-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 12px; background: var(--panel2); border: 2px solid var(--line); flex-wrap: wrap; }
.admin-row.off { opacity: .55; }

/* ---------- Kein Markieren / kein Zoom ---------- */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
@media (max-width: 640px) { input, textarea, select { font-size: 16px; } } /* iOS zoomt sonst beim Antippen */

.stake-chip.double { background: var(--pink); color: var(--on-pink); animation: wobble .6s ease 2; }

/* ---------- Abstimmung ---------- */
.vote-bar { background: var(--blue); color: var(--ink-accent); border: 3px solid var(--line); border-radius: 18px; padding: .9rem 1rem; box-shadow: 6px 6px 0 var(--shadow); }
.vote-bar .avatar { background: rgb(255 255 255 / .35); }
.vote-bar .btn-ghost { --fg: var(--ink-accent); --bg: rgb(255 255 255 / .35); }

/* ---------- Schocken ---------- */
.die { width: 4.2rem; height: 4.2rem; display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: .55rem; gap: .15rem; border-radius: 14px; background: #fff; border: 3px solid #000; box-shadow: 4px 4px 0 var(--sun); transition: transform .15s, box-shadow .15s; }
.die i { display: block; border-radius: 50%; }
.die i.pip { background: #111; }
.die.empty { background: var(--panel); border-style: dashed; box-shadow: none; }
button.die:hover { transform: translateY(-3px); }
.die.held { transform: translateY(-8px) rotate(-4deg); box-shadow: 4px 4px 0 var(--pink), 0 0 0 4px var(--pink); }
.die-sm { width: 1.7rem; height: 1.7rem; padding: .22rem; gap: .05rem; border-width: 2px; border-radius: 6px; box-shadow: none; }
.roll-in { animation: rollIn .45s ease-out; }
@keyframes rollIn { 0% { transform: rotate(-200deg) scale(.4); opacity: 0; } 70% { transform: rotate(15deg) scale(1.1); opacity: 1; } 100% { transform: none; } }
.schock-player { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; padding: .5rem .7rem; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); }
.schock-player.turn { border-color: rgb(var(--c-sun)); box-shadow: 3px 3px 0 var(--sun); }
.schock-player.out { opacity: .45; }
@media (max-width: 480px) { .die:not(.die-sm) { width: 3.4rem; height: 3.4rem; padding: .45rem; } .die-sm { width: 1.3rem; height: 1.3rem; padding: .15rem; } }

/* ---------- Trink-Alarm ---------- */
#drink-layer { position: fixed; top: 16vh; left: 50%; transform: translateX(-50%); z-index: 95; display: none; pointer-events: none; }
#drink-layer.show { display: block; }
.drink-alert { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: .9rem 1.6rem .9rem 1.1rem; border: 3px solid; border-radius: 22px; animation: drinkPop .45s cubic-bezier(.2,.9,.3,1.4); white-space: nowrap; }
.drink-emoji { font-size: 3.4rem; line-height: 1; animation: wobble .6s .3s 2; }
.drink-title { font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; line-height: 1; letter-spacing: var(--display-tracking, 0); }
.drink-amount { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-top: .2rem; }
@keyframes drinkPop { 0% { transform: scale(.3) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Pause ---------- */
.pause-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-radius: 18px; border: 3px solid var(--line); background: var(--sun); color: var(--ink-accent); box-shadow: 6px 6px 0 var(--shadow); }

/* ---------- Chat ---------- */
.chat-log { max-height: 15rem; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; overscroll-behavior: contain; }
.chat-msg { display: flex; align-items: flex-start; gap: .45rem; font-size: .9rem; line-height: 1.35; padding: .35rem .6rem; border-radius: 10px; background: rgb(var(--c-ink) / .06); overflow-wrap: anywhere; }
.chat-msg.mine { background: rgb(var(--c-blue) / .16); }
.chat-name { font-weight: 800; margin-right: .25rem; }
.chat-open { position: relative; }
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px; background: var(--pink); color: var(--on-pink); font-size: .7rem; font-weight: 800; line-height: 1.15rem; text-align: center; border: 2px solid var(--line); }

/* ---------- Kings Cup, Höher/Tiefer, Wort-Bombe, Mäxchen ---------- */
.race-btn { font-size: 4.5rem; width: 9rem; height: 9rem; border-radius: 999px; background: var(--sun); border: 4px solid var(--line); box-shadow: 6px 6px 0 var(--shadow); animation: pulseBtn .8s infinite; }
.race-btn.done { animation: none; opacity: .5; filter: grayscale(.6); }
.hilo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; }
.bomb-big { font-size: 5.5rem; line-height: 1; display: inline-block; }
.bomb-big.ticking { animation: shake .35s infinite; }
.syllable { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 14vw, 5rem); color: var(--pink); letter-spacing: .08em; line-height: 1.1; }
.maex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .4rem; max-width: 34rem; margin: 0 auto; }
.weight-badge { margin-left: .35rem; font-size: .68rem; padding: .05rem .35rem; border-radius: 999px; background: var(--ink-accent); color: var(--c); }
.report-btn { padding: .2rem .45rem; font-size: .9rem; }

/* ---------- Admin-Statistik ---------- */
.stat-bar { display: flex; align-items: center; gap: .6rem; }
.stat-fill { display: block; height: .7rem; border-radius: 999px; background: var(--blue); }
.drink-img { width: 4.5rem; height: 4.5rem; object-fit: contain; display: block; }
.pause-img { width: 3rem; height: 3rem; object-fit: contain; }
.hl-icon { width: 3rem; height: 3rem; object-fit: contain; flex-shrink: 0; }
.hl-emoji { font-size: 2rem; width: 3rem; text-align: center; flex-shrink: 0; }
.bar-names { font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; color: var(--on-blue); }

.avatar-xs { width: 1.6rem; height: 1.6rem; font-size: .8rem; border-radius: 8px; border-width: 1.5px; }
.avatar-xs .av-img { width: 100%; height: 100%; border-radius: 6px; }
.floater .n { display: inline-flex; align-items: center; gap: .3rem; }
.floater .n .avatar-xs { width: 1.3rem; height: 1.3rem; font-size: .7rem; border-radius: 6px; }

/* Kneipe: kräftige Slab-Schrift, aber gut lesbar; mehr Kontrast auf dem dunklen Holz */
[data-design="kneipe"] .font-semibold { font-weight: 600; }
[data-design="kneipe"] .font-bold { font-weight: 700; }
[data-design="kneipe"] .muted { color: rgb(var(--c-ink) / .74); }
[data-design="kneipe"] .start-label { filter: brightness(1.45) saturate(1.1); }
.section-title { text-shadow: 0 1px 2px rgb(var(--c-bg)), 0 0 12px rgb(var(--c-bg) / .9); }
.emoji-pop { position: fixed; z-index: 100; width: 288px; max-height: 250px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: .4rem; background: var(--panel); border: 2.5px solid var(--line); border-radius: 14px; box-shadow: 5px 5px 0 var(--shadow); }
.emoji-pop button { font-size: 1.35rem; line-height: 1; padding: .3rem 0; border-radius: 8px; }
.emoji-pop button:hover { background: rgb(var(--c-ink) / .1); }
.emoji-btn { font-size: 1.5rem; width: 2.4rem; height: 2.4rem; border-radius: 10px; flex-shrink: 0; }
.emoji-btn:hover { background: rgb(var(--c-ink) / .1); }
.modal.no-anim { animation: none; }

/* ---------- Lobby-Einstellungen: Gruppen & gleich große Kacheln ---------- */
.set-section { padding-top: 1.1rem; margin-top: 1.1rem; border-top: 1px solid rgb(var(--c-ink) / .08); container-type: inline-size; }
.set-section:first-of-type { border-top: 0; margin-top: .4rem; padding-top: 0; }
.set-title { font-family: var(--font-body); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--c-ink) / .6); margin-bottom: .6rem; }
.set-grid { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-tile { display: flex; flex-direction: column; gap: .3rem; padding: .8rem; border-radius: 14px; background: var(--panel2); border: 2px solid rgb(var(--c-ink) / .08); min-width: 0; }
.set-tile.full { grid-column: 1 / -1; }
.set-hint { font-size: .75rem; line-height: 1.3; color: rgb(var(--c-ink) / .6); min-height: 2.6em; flex: 1; }
.set-tile .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.set-tile .seg-btn { text-align: center; padding-left: .15rem; padding-right: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; width: 100%; border: 2.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel2); }
.stepper .seg-btn { border-right: 0; font-size: 1.1rem; }
.stepper .seg-btn:disabled { opacity: .35; }
.stepper-val { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; border-left: 2px solid var(--line); border-right: 2px solid var(--line); padding: .3rem 0; }
@container (max-width: 640px) { .set-grid, .set-grid.two { grid-template-columns: minmax(0, 1fr); } .set-hint { min-height: 0; } }
.split-chip { display: inline-flex; border: 2.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.split-chip.on { background: var(--sun); color: var(--ink-accent); }
.split-add { padding: .35rem .75rem; font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.split-add:disabled { opacity: .55; cursor: default; }
.split-chip.on .split-add:disabled { opacity: 1; }
.split-sub { padding: .35rem .6rem; font-weight: 800; border-left: 2px solid var(--line); }

/* ---------- Übergänge: Runden, Spiele, Fenster ---------- */
@keyframes sceneIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
#game.scene-in > * { animation: sceneIn .38s cubic-bezier(.2,.8,.3,1) both; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes popOut { to { opacity: 0; transform: scale(.94) translateY(8px); } }
.modal-backdrop.closing { animation: fadeOut .18s ease forwards; pointer-events: none; }
.modal-backdrop.closing .modal { animation: popOut .18s ease forwards; }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal.swap > * { animation: swapIn .22s ease both; }
#intro-layer { position: fixed; inset: 0; z-index: 85; display: none; place-items: center; pointer-events: none; }
#intro-layer.show { display: grid; animation: introBg 1.7s ease both; }
@keyframes introBg { 0% { background: rgb(var(--c-bg) / 0); } 15%, 75% { background: rgb(var(--c-bg) / .55); } 100% { background: rgb(var(--c-bg) / 0); } }
.intro-card { text-align: center; padding: 1.4rem 2.4rem; border-radius: 26px; background: var(--panel); border: 3px solid var(--line); box-shadow: 8px 8px 0 var(--c); animation: introCard 1.7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes introCard { 0% { opacity: 0; transform: scale(.6) rotate(-4deg); } 18% { opacity: 1; transform: scale(1.04) rotate(1deg); } 26%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.92) translateY(-16px); } }
.intro-kicker { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--c-ink) / .6); }
.intro-icon { font-size: 4rem; line-height: 1; margin: .5rem 0 .3rem; display: flex; justify-content: center; }
.intro-img { width: 5.5rem; height: 5.5rem; object-fit: contain; }
.intro-name { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--c); }
.give-card { padding: 1rem 1.1rem; border-radius: 18px; border: 3px solid var(--line); background: var(--panel); box-shadow: 6px 6px 0 var(--mint); }
.ready-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 18px; border: 3px solid var(--line); background: var(--panel); box-shadow: 6px 6px 0 var(--sun); }
/* Verteil-Kasten schwebt unten – immer sichtbar, egal wo man gerade scrollt */
#give-bar { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(5, 5, 10, .62); backdrop-filter: blur(3px); overflow-y: auto; }
#give-bar > div { width: min(94vw, 480px); }
#give-bar .give-card + .give-card { margin-top: .8rem; }
#give-bar:empty { display: none; }
#give-bar .give-card { box-shadow: 6px 6px 0 var(--mint), 0 10px 40px rgb(0 0 0 / .45); }

/* ---------- Regeln, Verteil-Liste, Sieger, Countdown ---------- */
@keyframes ruleNew { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 20%, 60% { box-shadow: 0 0 0 4px var(--mint), 0 0 24px var(--mint); transform: scale(1.03); } }
.rule-new { animation: ruleNew 2.4s ease 2; }
.event-banner.kind-rule { --c: var(--mint); }
.give-log-row { padding: .3rem .55rem; border-radius: 10px; background: rgb(var(--c-ink) / .05); line-height: 1.35; overflow-wrap: anywhere; }
.winner-banner { text-align: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; padding: .8rem 1rem; margin: 0 auto 1.5rem; max-width: 36rem; border-radius: 18px; background: var(--sun); color: var(--ink-accent); border: 3px solid var(--line); box-shadow: 5px 5px 0 var(--shadow); }
.auto-banner { margin-bottom: .6rem; padding: .7rem 1rem; border-radius: 16px; background: var(--mint); color: var(--ink-accent); border: 3px solid var(--line); box-shadow: 5px 5px 0 var(--shadow); text-align: center; }
.auto-banner .auto-next { font-size: 1.35rem; font-weight: 700; }
.auto-bar { height: 8px; border-radius: 999px; background: rgb(0 0 0 / .18); margin-top: .45rem; overflow: hidden; }
.auto-bar > span { display: block; height: 100%; background: var(--ink-accent); border-radius: 999px; }

/* ---------- Stadt-Land-Suff ---------- */
.slf-letter { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 16vw, 6rem); line-height: 1; color: var(--blue); }
.slf-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.slf-field { display: flex; flex-direction: column; gap: .3rem; }
.slf-cat { font-weight: 800; font-size: .9rem; }
.slf-full { grid-column: 1 / -1; }
.slf-table-wrap { overflow-x: auto; max-width: 100%; }
.slf-table { width: 100%; border-collapse: separate; border-spacing: .3rem; font-size: .9rem; }
.slf-table th { text-align: left; font-weight: 800; padding: .2rem .4rem; white-space: nowrap; }
.slf-table td { padding: .45rem .55rem; border-radius: 10px; border: 2px solid var(--line); background: var(--panel2); vertical-align: top; min-width: 7rem; }
.slf-table td.ok { background: rgb(var(--c-mint) / .16); }
.slf-table td.bad { background: rgb(var(--c-pink) / .16); }
.slf-table td.slf-sum { min-width: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; background: transparent; border-color: transparent; }
.slf-name { display: flex; align-items: center; gap: .4rem; max-width: 10rem; }
.slf-ans { font-weight: 700; word-break: break-word; }
.slf-why { display: block; font-size: .72rem; font-weight: 800; color: var(--pink); }
.slf-veto { margin-left: .35rem; font-size: .75rem; opacity: .6; border-radius: 999px; padding: 0 .3rem; }
.slf-veto:hover, .slf-veto.on { opacity: 1; }
.slf-veto.on { background: rgb(var(--c-pink) / .25); }
.avatar.avatar-sm { width: 1.7rem; height: 1.7rem; font-size: .85rem; flex: none; }

/* ---------- Paranoia ---------- */
.para-q { max-width: 36rem; margin: .5rem auto 0; padding: 1rem 1.2rem; border-radius: 16px; border: 3px solid var(--line); background: var(--pink); color: var(--on-pink); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 3.5vw, 1.5rem); box-shadow: 5px 5px 0 var(--shadow); }
.para-secret { font-size: clamp(3.5rem, 14vw, 5rem); line-height: 1; }

/* ---------- Grenzen & Zuschauer ---------- */
.limit-badge { display: inline-block; margin-left: .3rem; padding: 0 .35rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel2); font-size: .65rem; font-weight: 800; vertical-align: middle; }
.spectate-banner { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; padding: .8rem 1.1rem; border-radius: 16px; border: 3px solid var(--line); background: var(--blue); color: var(--on-blue); box-shadow: 5px 5px 0 var(--shadow); font-size: 1.05rem; }
@media (max-width: 640px) {
  .slf-table, .slf-table tbody { display: block; }
  .slf-table thead { display: none; }
  .slf-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .9rem; }
  .slf-table th.slf-name { grid-column: 1; max-width: none; }
  .slf-table td.slf-sum { grid-column: 2; grid-row: 1; text-align: right; }
  .slf-table td { min-width: 0; }
  .slf-table td[data-cat]::before { content: attr(data-cat); display: block; font-size: .68rem; font-weight: 700; opacity: .7; margin-bottom: .1rem; }
}
.host-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .7rem; padding: .8rem 1.1rem; border-radius: 16px; border: 3px solid var(--line); background: var(--sun); color: var(--ink-accent); box-shadow: 5px 5px 0 var(--shadow); }

/* ---------- Zahlen-Schätzen ---------- */
.est-q { background: var(--sun); color: var(--ink-accent); }
.est-answer { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1.1; color: var(--mint); }
.est-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 14px; border: 2.5px solid var(--line); background: var(--panel2); }
.est-row.win { background: rgb(var(--c-mint) / .2); }
.est-row.lose { background: rgb(var(--c-pink) / .2); }
@media (max-width: 640px) { .est-row { flex-wrap: wrap; } .est-row .w-20 { width: auto; } }

/* ---------- Lange Spiele, Info-Buttons, SLF-Punkte ---------- */
.mode-tile-wrap { position: relative; display: flex; }
.mode-tile-wrap > .mode-tile { flex: 1; padding-right: 3rem; }
.tile-info { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border-radius: 999px; border: 2.5px solid var(--line); background: var(--panel2); font-family: Georgia, serif; font-style: italic; font-weight: 800; font-size: 1rem; line-height: 1; box-shadow: 2px 2px 0 var(--shadow); }
.tile-info:hover { background: var(--sun); color: var(--ink-accent); }
.long-badge { display: inline-block; vertical-align: middle; margin-left: .25rem; padding: .05rem .45rem; border-radius: 999px; border: 2px solid var(--line); background: var(--panel2); font-family: var(--font-body); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.long-row { margin-top: .9rem; padding-top: .8rem; border-top: 2px dashed rgb(var(--c-ink) / .15); }
.game-toggle.long:not(.on) { opacity: .55; border-style: dashed; }
.rules-list { list-style: decimal; padding-left: 1.3rem; display: grid; gap: .55rem; line-height: 1.45; }
.slf-table td { position: relative; }
.slf-table td.half { background: rgb(var(--c-sun) / .16); }
.slf-pts { float: right; margin-left: .4rem; font-family: var(--font-display); font-weight: 800; font-size: .8rem; opacity: .8; }
.slf-table td.slf-points { font-size: 1rem; white-space: nowrap; }
@media (max-width: 640px) { .slf-table td.slf-points { grid-column: 2; grid-row: 1; text-align: right; } .slf-table td.slf-sum:not(.slf-points) { grid-column: 1; text-align: left; } }
.slf-table thead th { white-space: normal; vertical-align: bottom; font-size: .82rem; line-height: 1.2; }
.slf-table td { min-width: 5.5rem; }
.slf-table th.slf-name { white-space: nowrap; }
.slf-table td.slf-sum { white-space: nowrap; }
@media (max-width: 640px) {
  .slf-table th.slf-name { grid-column: 1; grid-row: 1; }
  .slf-table td.slf-points { grid-column: 2; grid-row: 1; text-align: right; }
  .slf-table td.slf-sum:not(.slf-points) { display: none; }
}

/* ---------- Werwolf ---------- */
.role-card { --c: var(--panel2); display: flex; align-items: center; gap: .9rem; max-width: 26rem; margin: 0 auto 1rem; padding: .8rem 1.1rem; border-radius: 16px; border: 3px solid var(--line); background: var(--c); color: var(--ink-accent); box-shadow: 5px 5px 0 var(--shadow); }
.role-card.dead { filter: grayscale(.8); opacity: .8; }
.role-emoji { font-size: 2.6rem; line-height: 1; }
.is-night { background: linear-gradient(180deg, rgb(20 24 60 / .55), transparent 70%), var(--panel); }
.night-box .vote-btn.selected, .vote-btn.selected { outline: 3px solid var(--pink); }
.seer-box { display: inline-block; padding: .5rem .9rem; border-radius: 12px; border: 2px solid var(--line); background: rgb(var(--c-blue) / .18); }
.chip-dead { opacity: .65; text-decoration: line-through; }

/* ---------- Lügen-Würfel ---------- */
.liar-bid { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-radius: 14px; border: 2.5px solid var(--line); background: var(--panel2); font-family: var(--font-display); font-size: 1.6rem; }
.liar-face { border-radius: 10px; padding: .2rem; border: 2.5px solid transparent; }
.liar-face.on { border-color: var(--pink); background: rgb(var(--c-pink) / .2); }
.die-miss { opacity: .35; }
.die-hit .die { box-shadow: 0 0 0 3px var(--mint); }

/* ---------- Saufpoker ---------- */
.pcard.xs { --w: 1.8rem; }
.est-row.turn { outline: 3px solid var(--sun); }
.poker-table .est-row { flex-wrap: wrap; }

/* ---------- Tabu & Codenames ---------- */
.tabu-score { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.tabu-team { --c: var(--pink); padding: .7rem .9rem; border-radius: 16px; border: 3px solid var(--line); background: var(--panel2); text-align: center; opacity: .75; }
.tabu-team.active { background: var(--c); color: var(--ink-accent); opacity: 1; box-shadow: 4px 4px 0 var(--shadow); }
.tabu-points { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.tabu-card { max-width: 20rem; margin: 0 auto; border-radius: 18px; border: 3px solid var(--line); background: #fff; color: #111; box-shadow: 6px 6px 0 var(--pink); overflow: hidden; }
.tabu-word { background: var(--pink); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; padding: .7rem; }
.tabu-card ul { padding: .7rem; display: grid; gap: .25rem; font-weight: 700; font-size: 1.05rem; }
.codes-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; max-width: 46rem; margin: 0 auto; }
.code-tile { min-height: 3.4rem; padding: .3rem; border-radius: 12px; border: 2.5px solid var(--line); background: #f3ead6; color: #222; font-weight: 800; font-size: clamp(.68rem, 2.4vw, .95rem); word-break: break-word; box-shadow: 3px 3px 0 var(--shadow); transition: transform .1s; }
.code-tile:not(:disabled):hover { transform: translate(-1px, -2px); }
.code-tile.hint.c-0 { box-shadow: inset 0 -6px 0 rgb(var(--c-pink)); }
.code-tile.hint.c-1 { box-shadow: inset 0 -6px 0 rgb(var(--c-blue)); }
.code-tile.hint.c-x { box-shadow: inset 0 -6px 0 #000; }
.code-tile.revealed.c-0 { background: var(--pink); color: #fff; }
.code-tile.revealed.c-1 { background: var(--blue); color: #111; }
.code-tile.revealed.c-n { background: #bdb6a6; color: #444; text-decoration: line-through; }
.code-tile.revealed.c-x { background: #111; color: #fff; }
.code-tile:disabled { cursor: default; }
.codes-clue { display: inline-block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; padding: .3rem 1rem; border-radius: 14px; border: 3px solid var(--line); background: var(--sun); color: var(--ink-accent); }

/* ---------- Kniffel ---------- */
.kn-die { border-radius: 16px; display: inline-block; }
.kn-die.held .die { transform: translateY(-6px); box-shadow: 0 0 0 4px var(--pink), 4px 4px 0 var(--sun); }
.kn-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kn-table th, .kn-table td { padding: .3rem .45rem; border-bottom: 1px solid rgb(var(--c-ink) / .12); text-align: center; white-space: nowrap; }
.kn-table tbody th { text-align: left; font-weight: 700; }
.kn-table thead th.turn { color: var(--sun); }
.kn-table td.zero { color: var(--pink); }
.kn-table tr.sub td, .kn-table tr.sub th { font-size: .78rem; opacity: .8; }
.kn-table tr.sum td, .kn-table tr.sum th { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--line); }
.kn-opt { min-width: 2.4rem; padding: .1rem .4rem; border-radius: 8px; border: 2px solid var(--line); background: var(--mint); color: var(--ink-accent); font-weight: 800; }
.kn-opt.strike { background: var(--panel2); color: var(--pink); }
@media (max-width: 480px) { .codes-grid { gap: .3rem; } .code-tile { min-height: 2.9rem; border-radius: 9px; } }
.code-tile { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } @media (max-width: 480px) { .code-tile { font-size: .62rem; padding: .2rem; } }

/* ---------- Tatort Tresen ---------- */
.tatort-case { max-width: 40rem; margin: 0 auto 1rem; padding: 1.2rem 1.4rem; border-radius: 18px; border: 3px solid var(--line); background: #15131c; color: #f4efe4; box-shadow: 6px 6px 0 var(--blue); }
.tatort-text { font-family: Georgia, 'Bitter', serif; font-size: clamp(1.1rem, 3vw, 1.35rem); line-height: 1.45; margin: .5rem 0; }
.tatort-solution { max-width: 40rem; margin: 0 auto 1rem; padding: .8rem 1.1rem; border-radius: 14px; border: 2.5px dashed var(--mint); background: rgb(var(--c-mint) / .12); }
.tatort-voice { max-width: 40rem; margin: 0 auto; padding: .8rem 1rem; border-radius: 14px; border: 2px solid var(--line); background: var(--panel2); }
.tatort-log { max-width: 40rem; margin: 0 auto; display: grid; gap: .35rem; max-height: 22rem; overflow-y: auto; }
.tatort-q { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border-radius: 12px; background: var(--panel2); font-size: .92rem; }
.tatort-q.open { outline: 2px solid var(--sun); }
.tatort-guess { font-family: Georgia, serif; font-size: 1.15rem; max-width: 36rem; margin: .6rem auto 0; }
@media (max-width: 480px) { .tatort-q { flex-wrap: wrap; } }
.tatort-tick { max-width: 40rem; margin: 0 auto 1rem; padding: .5rem .9rem; border-radius: 12px; border: 2.5px solid var(--line); background: var(--sun); color: var(--ink-accent); font-weight: 800; text-align: center; }
.level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin-top: .5rem; }
.level-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .2rem; border-radius: 12px; border: 2.5px solid var(--line); background: var(--panel2); font-family: var(--font-display); font-weight: 700; font-size: .85rem; line-height: 1.1; }
.level-btn.active { background: var(--sun); color: var(--ink-accent); box-shadow: 3px 3px 0 var(--shadow); }
.level-btn:disabled { opacity: .7; }
.level-btn.active:disabled { opacity: 1; }
@media (max-width: 420px) { .level-btn { font-size: .72rem; padding: .45rem .1rem; } }
.count-badge { align-self: flex-start; display: inline-block; padding: .1rem .55rem; border-radius: 999px; border: 2px solid var(--line); background: var(--panel2); font-size: .75rem; font-weight: 800; }
.count-line { margin: -.3rem 0 .9rem; padding: .45rem .7rem; border-radius: 10px; background: var(--panel2); font-size: .9rem; }
.level-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 560px) { .level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Würfelbecher-Animation ---------- */
#dice-layer { position: fixed; left: 50%; top: 22%; z-index: 85; width: 9rem; height: 9rem; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2, 1.4, .4, 1); }
#dice-layer.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dice-sprite { width: 100%; height: 100%; background-size: 800% 100%; background-repeat: no-repeat; background-position: 0 0; }
#dice-layer.show .dice-sprite { animation: diceRoll 1.15s steps(7) forwards; }
@keyframes diceRoll { from { background-position: 0 0; } to { background-position: 100% 0; } }
@media (max-width: 480px) { #dice-layer { width: 7rem; height: 7rem; } }

/* ---------- Wort-Bombe als Animation ---------- */
.bomb-sprite { width: clamp(8rem, 30vw, 11rem); aspect-ratio: 1; margin: 0 auto; background-size: 400% 100%; background-repeat: no-repeat; background-position: 0 0; }
.bomb-sprite.tick { animation: bombTick .7s steps(4) infinite; }
.bomb-sprite.boom { animation: bombBoom 1.4s steps(1, end) forwards; }
.bomb-sprite.end { background-position: 66.6667% 0; }
@keyframes bombTick { from { background-position: 0 0; } to { background-position: 133.333% 0; } }
/* rot glühend → Blitz → Wolke → Rauch, am Ende bleibt die Wolke stehen */
@keyframes bombBoom { 0% { background-position: 0 0; } 18% { background-position: 33.3333% 0; } 36% { background-position: 66.6667% 0; } 62% { background-position: 100% 0; } 82%, 100% { background-position: 66.6667% 0; } }

/* ---------- Sprite-Animationen (8 Bilder nebeneinander) ---------- */
.sprite8 { display: inline-block; aspect-ratio: 1; background-size: 800% 100%; background-repeat: no-repeat; background-position: 0 0; vertical-align: middle; }
.sprite8.loop { animation: sprite8 1.6s steps(8) infinite; }
.sprite8.once { animation: sprite8once 1.6s steps(7) forwards; }
.sprite8.end { background-position: 100% 0; }
@keyframes sprite8 { from { background-position: 0 0; } to { background-position: 114.2857% 0; } }
@keyframes sprite8once { from { background-position: 0 0; } to { background-position: 100% 0; } }
.wait-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.25rem; text-align: left; }
.wait-mascot { width: 3.2rem; flex: none; animation-duration: 2.2s !important; }
.horse-sprite { width: 2.6rem; margin-left: .2rem; }
.horse-sprite.loop { animation-duration: .75s; }
.trophy-sprite { width: 7rem; margin-bottom: -.4rem; }
.trophy-sprite.loop { animation-duration: 1.5s; }
.wolf-sprite { display: block; width: 8rem; margin: 0 auto; }
.wolf-sprite.once { animation-duration: 2s; }
.pause-sprite { width: 3.6rem; }
.pause-sprite.loop { animation-duration: 2.6s; }
.potato-sprite { display: block; width: clamp(8rem, 30vw, 11rem); margin: 0 auto; }
.potato-wrap.mine .potato-sprite { animation: potatoShake .25s infinite; }
@keyframes potatoShake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-3deg); } 75% { transform: translate(2px, -1px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .potato-wrap.mine .potato-sprite { animation: none; } }
.sprite8.loop5 { animation: sprite5 1.4s steps(5) infinite; }
@keyframes sprite5 { from { background-position: 0 0; } to { background-position: 71.4286% 0; } }
.kings-sprite { width: 6.5rem; }
.detector-sprite { width: 7rem; }
.tatort-sprite { width: 7.5rem; }
.ct-lvl { font-size: .68rem; max-width: 7.2rem; padding: .1rem .2rem; border-radius: 8px; border: 2px solid var(--line); background: var(--panel2); color: inherit; }
.ct-lvl.set { background: var(--sun); color: var(--ink-accent); }
.tile-wish { position: absolute; bottom: .7rem; right: .7rem; min-width: 2.2rem; height: 2rem; padding: 0 .5rem; border-radius: 999px; border: 2.5px solid var(--line); background: var(--panel2); font-weight: 800; font-size: .9rem; box-shadow: 2px 2px 0 var(--shadow); }
.tile-wish.on { background: var(--pink); color: var(--on-pink); }
.tile-wish:hover { transform: scale(1.06); }
.wish-badge { margin-left: .3rem; padding: 0 .35rem; border-radius: 999px; background: var(--pink); color: var(--on-pink); font-size: .7rem; font-weight: 800; }
.wish-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; }

/* Ein-Gerät-Modus */
.local-row { display: flex; align-items: center; gap: .5rem; }
.local-row .seg-btn { padding: .4rem .6rem; }
.local-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; border: 2.5px solid var(--line); border-radius: 14px; background: rgb(var(--c-sun) / .14); }
.local-bar .chip { cursor: pointer; font-size: .8rem; padding: .2rem .6rem; }
#handoff-layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: var(--bg); }
.handoff-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.handoff-avatar { width: 6rem; height: 6rem; font-size: 3.6rem; margin: .8rem auto .2rem; display: grid; place-items: center; border-radius: 999px; border: 3px solid var(--line); background: var(--panel2); overflow: hidden; }
.handoff-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lr-spacer { width: 1.9rem; flex-shrink: 0; }

.quiz-buzzer { display: flex; justify-content: center; margin: -.5rem 0 .75rem; }
.quiz-buzzer .sprite8 { width: 5.5rem; height: 5.5rem; }
#conn-status:not(.hidden) { display: flex; align-items: center; gap: .5rem; padding-left: .4rem; }
#conn-status .conn-sprite { width: 2.8rem; height: 2.8rem; margin: -.7rem 0; flex-shrink: 0; }
#conn-status span:last-child { white-space: nowrap; }

.sprite8.anim-sm { width: 3rem; height: 3rem; flex-shrink: 0; }
.sprite8.anim-md { width: 6.5rem; height: 6.5rem; }
.sprite8.anim-side { width: 4.2rem; height: 4.2rem; flex-shrink: 0; }
.sprite8.loop.anim-sm, .sprite8.loop.anim-md, .sprite8.loop.anim-side { animation-duration: 2s; }
.sprite8.anim-lg { width: 8rem; height: 8rem; }
.sprite8.loop.anim-lg { animation-duration: 2.1s; }
.hilo-stake { text-align: center; font-size: .9rem; margin: 0 auto 1rem; max-width: 34rem; padding: .5rem .8rem; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); }
.hilo-stake.mine { background: rgb(var(--c-pink) / .16); border-color: rgb(var(--c-pink) / .6); }
.schock-cup { font-size: 4.5rem; line-height: 1; margin: .2rem 0 .6rem; display: inline-block; }
.cup-shake { animation: cupShake .5s ease-in-out 2; }
@keyframes cupShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) translateY(-4px); } 75% { transform: rotate(14deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cup-shake { animation: none; } }

.mini-card { text-align: center; margin: -.2rem 0 .8rem; padding: .9rem 1rem; border-radius: 16px; border: 3px solid var(--line); background: var(--panel); box-shadow: 5px 5px 0 var(--blue); }
.mini-react { width: 100%; max-width: 22rem; height: 7rem; border-radius: 18px; border: 3px solid var(--line); font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: #fff; }
.mini-react.wait { background: #E11D48; }
.mini-react.go { background: #16A34A; }
.mini-coin { font-size: 3.4rem; animation: coinFlip .7s ease-out; }
@keyframes coinFlip { from { transform: rotateY(0) scale(.6); } to { transform: rotateY(1080deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .mini-coin { animation: none; } }
.slf-stop { max-width: 42rem; margin: 0 auto 1rem; text-align: center; padding: .7rem 1rem; border-radius: 14px; border: 3px solid var(--line); background: var(--pink); color: var(--on-pink); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }