/* Schriften lokal gehostet (keine Verbindung zu Google beim Seitenaufruf). Lizenz: SIL Open Font License */
@font-face { font-family: 'Luckiest Guy'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/luckiest-guy-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Luckiest Guy'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/luckiest-guy-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url(fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url(fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #1d1b3a;
  --paper: #fffdf6;
  --paper2: #f3eefc;
  --line: #e4dcf5;
  --muted: #7a7398;
  --bg: #5b3cd6;
  --bg-deep: #3f25a8;
  --yellow: #ffd43b;
  --pink: #ff5c9a;
  --blue: #4dabf7;
  --green: #51cf66;
  --red: #ff6b6b;
  --orange: #ffa94d;
  --violet: #9775fa;
  --radius: 22px;
  --shadow: 0 6px 0 var(--ink);
  --title: 'Luckiest Guy', 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  background-color: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* Kritzel-Muster, wird per JS als --doodle gesetzt */
body::before {
  content: ''; position: fixed; inset: -240px; z-index: -1; pointer-events: none;
  background-image: var(--doodle); background-size: 240px 240px; opacity: .14;
  animation: drift 60s linear infinite; will-change: transform;
}
/* Verlauf als eigene fixierte Ebene statt background-attachment: fixed (das zwingt den Browser bei jedem Frame zum Neuzeichnen) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle at 50% 0%, #7255f0 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(240px, 240px, 0); } }

#decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#decor .deco { position: absolute; color: rgba(255,255,255,.22); animation: decoFloat var(--t, 9s) ease-in-out infinite; will-change: transform; }
#decor .deco svg { width: 100%; height: 100%; }
@keyframes decoFloat { 50% { transform: translateY(-26px) rotate(var(--r, 12deg)); } }

/* ---------- Icons ---------- */
.i { width: 1.2em; height: 1.2em; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -0.22em; }

/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1040px; margin: 0 auto; padding: 14px 16px 6px; }
.mini-logo { display: flex; align-items: center; gap: 4px; text-decoration: none; font-family: var(--title); font-size: 30px; color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); transition: transform .2s; }
.mini-logo .i { color: #fff; width: 28px; height: 28px; stroke-width: 3; animation: wavePulse 1.6s ease-in-out infinite; }
.mini-logo:hover { transform: rotate(-4deg) scale(1.05); }
body.on-home .mini-logo { visibility: hidden; }
.top-right { display: flex; gap: 10px; align-items: center; }
.room-badge { background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 900; letter-spacing: 2px; box-shadow: 0 4px 0 var(--ink); }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; transition: transform .1s; }
.icon-btn .i { width: 22px; height: 22px; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.hidden { display: none !important; }

/* ---------- Streamer-Modus ---------- */
#streamerBtn[aria-pressed="true"] { background: var(--pink); color: #fff; }
body.streamer .code-input { -webkit-text-security: disc; }
#revealCode { color: var(--ink); margin: -4px auto 8px; }

#app { max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; }
.screen { display: none; }
.screen.active { display: block; animation: screenIn .35s cubic-bezier(.2,1.4,.4,1); }
.screen.narrow { max-width: 620px; margin: 0 auto; }
@keyframes screenIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Panels ---------- */
.panel { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px; position: relative; }
.panel-title { display: flex; align-items: center; gap: 8px; font-family: var(--title); font-size: 22px; letter-spacing: .5px; margin-bottom: 12px; }
.center { text-align: center; }
.label { font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); font-weight: 900; margin: 2px 0 8px; display: block; }
.hint { color: var(--muted); font-size: 15px; margin: 10px 0 0; line-height: 1.4; }
.error { color: #e03131; min-height: 1.2em; margin: 10px 0 0; font-weight: 800; }
.row { display: flex; gap: 10px; align-items: center; }
.title { font-family: var(--title); font-size: 30px; letter-spacing: .5px; margin: 6px 0; font-weight: 400; }
.title.sm { font-size: 22px; margin: 0; }
.title.big { font-size: 44px; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); margin: 6px 0 18px; }
.title.big .i { color: var(--paper); stroke-width: 3; }
.pill { display: inline-block; background: var(--paper2); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; font-size: 14px; font-family: 'Nunito', sans-serif; font-weight: 900; }

input {
  width: 100%; font: inherit; font-weight: 800; color: var(--ink); background: #fff; border: 3px solid var(--ink);
  border-radius: 14px; padding: 12px 14px; outline: none; margin-bottom: 14px; transition: box-shadow .15s;
}
input:focus { box-shadow: 0 0 0 4px rgba(255, 212, 59, .7); }
input::placeholder { color: #b3abc9; }
.row input { margin-bottom: 0; }
.code-input { text-transform: uppercase; letter-spacing: 8px; text-align: center; font-family: var(--title); font-size: 22px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-family: var(--title); font-size: 19px; letter-spacing: .6px; color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 11px 18px; cursor: pointer;
  box-shadow: 0 5px 0 var(--ink); transition: transform .1s, box-shadow .1s, filter .15s; white-space: nowrap; text-decoration: none;
}
.btn .i { width: 1.15em; height: 1.15em; stroke-width: 3; }
.btn:hover:not(:disabled) { filter: brightness(1.06); animation: wiggle .4s ease; }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); animation: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.yellow { background: var(--yellow); }
.btn.green { background: var(--green); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.blue { background: var(--blue); }
.btn.big { width: 100%; padding: 15px; font-size: 24px; }
.btn.small { padding: 8px 14px; font-size: 16px; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: rgba(255,255,255,.85); font-family: 'Nunito', sans-serif; font-weight: 800; }
.panel .btn.ghost { color: var(--muted); }
.center-btn { display: flex; margin: 10px auto 0; }
@keyframes wiggle { 25% { transform: rotate(-2deg) scale(1.02); } 75% { transform: rotate(2deg) scale(1.02); } }

/* ---------- Logo / Hero ---------- */
.hero { text-align: center; padding: 6px 0 4px; }
.logo { display: inline-flex; align-items: center; margin: 0; font-family: var(--title); font-weight: 400; font-size: clamp(76px, 16vw, 136px); line-height: 1; }
.logo span {
  display: inline-block; color: var(--c); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  text-shadow: 0 9px 0 var(--ink); animation: letterBob 2.2s ease-in-out infinite; animation-delay: var(--d);
}
.logo span:hover { animation: letterJump .5s ease; }
@keyframes letterBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes letterJump { 40% { transform: translateY(-30px) scale(1.15) rotate(-8deg); } }
.logo-waves { width: .48em; height: .8em; margin-left: .05em; overflow: visible; }
.logo-waves path { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 6px 0 var(--ink)); animation: wavePulse 1.5s ease-in-out infinite; }
.logo-waves path:nth-child(2) { animation-delay: .2s; }
.logo-waves path:nth-child(3) { animation-delay: .4s; }
@keyframes wavePulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.tagline { color: #fff; font-size: clamp(18px, 3.4vw, 24px); font-weight: 800; margin: 10px 0 22px; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.tagline b { color: var(--yellow); }

/* ---------- Startseite ---------- */
.home-panel { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 820px; margin: 0 auto 40px; padding: 22px; }
@media (min-width: 760px) { .home-panel { grid-template-columns: 300px 1fr; align-items: center; padding: 28px; } }
.builder { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--paper2); border: 3px dashed #cbbfe8; border-radius: 18px; padding: 16px; }
.builder-stage { display: flex; align-items: center; gap: 6px; }
.builder-avatar { width: 150px; height: 165px; display: grid; place-items: center; }
.builder-avatar .avatar { width: 150px; height: 165px; }
.builder-avatar.pop .avatar { animation: avPop .35s cubic-bezier(.2,1.8,.4,1); }
@keyframes avPop { 0% { transform: scale(.8) rotate(-6deg); } 100% { transform: none; } }
.builder-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.brow { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 3px; }
.brow span { font-weight: 900; font-size: 15px; }
.arrow-btn { width: 40px; height: 40px; border-radius: 12px; border: 3px solid var(--ink); background: var(--yellow); cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink); color: var(--ink); padding: 0; }
.arrow-btn .i { stroke-width: 3.5; }
.arrow-btn.sm { width: 32px; height: 30px; border-width: 2px; border-radius: 9px; box-shadow: none; }
.arrow-btn:active { transform: translateY(2px); box-shadow: none; }
.or { text-align: center; color: var(--muted); margin: 16px 0 12px; font-size: 14px; position: relative; font-weight: 800; }
.or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dotted #d6cdee; }
.or span { background: var(--paper); padding: 0 10px; position: relative; }
.invite { background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; font-weight: 900; transform: rotate(-1.5deg); animation: wiggle 1.8s ease-in-out infinite; }

/* Landing */
.landing { max-width: 960px; margin: 0 auto; }
.block { margin: 0 0 56px; }
.section-title { font-family: var(--title); font-weight: 400; text-align: center; color: #fff; font-size: clamp(34px, 6vw, 48px); margin: 0 0 22px;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.how { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 18px; text-align: center; transform: rotate(var(--tilt)); position: relative; transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.how:hover { transform: rotate(0) translateY(-6px) scale(1.03); }
.how h3 { font-family: var(--title); font-weight: 400; font-size: 22px; margin: 12px 0 6px; letter-spacing: .5px; }
.how p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.how-num { position: absolute; top: -16px; left: -12px; width: 42px; height: 42px; border-radius: 50%; background: var(--pink); color: #fff; border: 3px solid var(--ink); font-family: var(--title); font-size: 22px; display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink); }
.how-art { width: 84px; height: 84px; margin: 4px auto 0; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; }
.how-art .i { width: 44px; height: 44px; stroke-width: 2.6; }
.how-secret { background: var(--yellow); } .how-secret .i { animation: shake 2.4s ease-in-out infinite; }
.how-mic { background: var(--pink); color: #fff; } .how-mic .i { animation: bob 1.4s ease-in-out infinite; }
.how-echo { background: var(--blue); } .how-echo .i { animation: wavePulse 1.2s ease-in-out infinite; }
.how-laugh { background: var(--green); } .how-laugh .i { animation: spinWobble 2.6s ease-in-out infinite; }
@keyframes shake { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 85% { transform: rotate(14deg); } 92% { transform: rotate(-8deg); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes spinWobble { 0%, 60%, 100% { transform: rotate(0); } 80% { transform: rotate(20deg) scale(1.15); } }

.modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.mode-card { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; overflow: hidden; position: relative; transition: transform .2s; }
.mode-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--mc); opacity: .35; }
.mode-card:hover { transform: translateY(-5px) rotate(-1deg); }
.mode-card h3 { font-family: var(--title); font-weight: 400; font-size: 24px; margin: 12px 0 6px; }
.mode-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.mode-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--mc); border: 3px solid var(--ink); display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink); }
.mode-ico .i { width: 32px; height: 32px; stroke-width: 2.8; }
.mode-ico.spin .i { animation: flip 2.4s ease-in-out infinite; }
.mode-ico.float .i { animation: bob 1.8s ease-in-out infinite; }
@keyframes flip { 0%, 40% { transform: scaleX(1); } 50%, 90% { transform: scaleX(-1); } }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--yellow); border: 3px solid var(--ink); border-radius: 18px; padding: 14px 16px; box-shadow: 0 5px 0 var(--ink); }
.fact:nth-child(2) { background: var(--green); } .fact:nth-child(3) { background: var(--blue); } .fact:nth-child(4) { background: var(--pink); }
.fact .i { grid-row: span 2; width: 34px; height: 34px; stroke-width: 2.6; }
.fact b { font-family: var(--title); font-weight: 400; font-size: 20px; letter-spacing: .4px; }
.fact span { font-size: 14px; }

.faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 0 16px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 900; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--title); font-size: 26px; transition: transform .25s; color: var(--pink); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }

.footer { text-align: center; color: rgba(255,255,255,.85); padding: 20px 0 10px; }
.footer-logo { font-family: var(--title); font-size: 34px; color: var(--yellow); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.footer-logo .i { color: #fff; stroke-width: 3; }
.footer p { margin: 6px 0 10px; }
.footer nav { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.footer a { color: #fff; }

/* ---------- Avatare ---------- */
.avatar { display: block; overflow: visible; }
.avatar .eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.avatar .mouth { transform-box: fill-box; transform-origin: center top; transform: scaleY(calc(1 + var(--talk, 0) * 1.6)); }
.avatar .bodyg { transform-box: fill-box; transform-origin: center bottom; transform: scale(calc(1 + var(--talk, 0) * .08), calc(1 - var(--talk, 0) * .05)); }
/* --sync: negative Verzögerung, damit neu gerenderte Avatare nicht von vorn anfangen und springen */
.avatar.idle { animation: idleBob 3s ease-in-out var(--sync, 0ms) infinite; will-change: transform; }
@keyframes idleBob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } }

/* ---------- Lobby ---------- */
.lobby-grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .lobby-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.lobby-side .panel { margin-bottom: 16px; }
.code-panel { background: var(--yellow); }
.bigcode { font-family: var(--title); font-size: 64px; letter-spacing: 10px; line-height: 1; margin: 0 0 12px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.player-grid.small { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.ptile { position: relative; background: var(--paper2); border: 3px solid var(--ink); border-radius: 18px; padding: 10px 6px 8px; text-align: center; font: inherit; color: inherit; }
.ptile.new { animation: tileIn .45s cubic-bezier(.2,1.8,.4,1) backwards; }
.ptile .avatar { width: 70px; height: 77px; margin: 0 auto; }
.player-grid.small .ptile .avatar { width: 56px; height: 62px; }
.ptile .pname { font-weight: 900; font-size: 15px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile.me { background: #fff4c2; }
.ptile.off { opacity: .4; filter: grayscale(1); }
.ptile .crown { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: var(--yellow); width: 30px; height: 30px; stroke: var(--ink); stroke-width: 1.8; filter: drop-shadow(0 2px 0 var(--ink)); animation: crownBob 2s ease-in-out infinite; }
@keyframes crownBob { 50% { transform: translateX(-50%) rotate(8deg) translateY(-3px); } }
.ptile .badge { position: absolute; top: -10px; right: -8px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; background: var(--green); animation: badgePop .4s cubic-bezier(.2,2,.4,1); }
.ptile .badge .i { width: 18px; height: 18px; stroke-width: 3.5; }
.ptile .badge.wait { background: var(--paper); animation: none; }
.ptile .score { font-size: 13px; color: var(--muted); }
.ptile.empty { border-style: dashed; border-color: #c9bde6; background: transparent; color: #b2a6d4; display: grid; place-items: center; min-height: 118px; cursor: pointer; transition: transform .15s; }
.ptile.empty:hover { transform: scale(1.04) rotate(-2deg); border-color: var(--yellow); color: var(--yellow); }
.ptile.empty .i { width: 30px; height: 30px; animation: wavePulse 1.8s ease-in-out infinite; }
.ptile.done { animation: doneBounce .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes tileIn { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
@keyframes badgePop { from { transform: scale(0); } }
@keyframes doneBounce { 40% { transform: translateY(-10px) scale(1.06); } }

.modes { display: grid; gap: 10px; }
.mode { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 12px; cursor: pointer; transition: transform .15s; }
.mode .mode-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; }
.mode .mode-ico .i { width: 24px; height: 24px; }
.mode b { display: block; font-family: var(--title); font-weight: 400; font-size: 19px; letter-spacing: .4px; }
.mode small { color: var(--muted); font-size: 14px; }
.mode.sel { background: #fff4c2; box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); }
.mode:not(:disabled):hover { transform: translateY(-2px); }
.mode:disabled { cursor: default; }
.mode:disabled:not(.sel) { opacity: .5; }

.bars { flex: 1; height: 40px; display: flex; align-items: center; gap: 4px; }
.bars i { flex: 1; height: 6px; border-radius: 4px; background: var(--line); transition: height .06s; }
.bars.live i { background: var(--pink); }

/* ---------- Spiel ---------- */
.game-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.round-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.round-dots i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); background: rgba(255,255,255,.35); }
.round-dots i.past { background: var(--green); }
.round-dots i.now { background: var(--yellow); transform: scale(1.3); animation: bob 1s ease-in-out infinite; }
.clock { display: flex; align-items: center; gap: 6px; background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-family: var(--title); font-size: 20px; box-shadow: 0 4px 0 var(--ink); min-width: 92px; justify-content: center; }
.clock.urgent { background: var(--red); color: #fff; animation: shakeFast .5s ease-in-out infinite; }
@keyframes shakeFast { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.timer { height: 14px; background: rgba(255,255,255,.25); border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.timer div { height: 100%; width: 100%; background: var(--yellow); transition: width .25s linear; }
.timer.urgent div { background: var(--red); }

.prompt-panel { background: var(--yellow); padding-top: 26px; transform: rotate(-.8deg); animation: promptIn .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes promptIn { from { transform: rotate(-8deg) scale(.6); opacity: 0; } }
.sticker { position: absolute; top: -16px; left: 18px; background: var(--pink); color: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 3px 12px; font-family: var(--title); font-size: 16px; letter-spacing: .5px; transform: rotate(-4deg); display: flex; gap: 6px; align-items: center; box-shadow: 0 3px 0 var(--ink); }
.sticker .i { stroke-width: 3; }
.sticker.blue { background: var(--blue); color: var(--ink); }
.sticker.green { background: var(--green); color: var(--ink); }
.prompt { font-family: var(--title); font-weight: 400; font-size: clamp(26px, 6vw, 34px); line-height: 1.15; letter-spacing: .4px; }
.mode-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; margin-left: 6px; vertical-align: middle; font-family: 'Nunito', sans-serif; }
.mode-tag .i { width: 14px; height: 14px; }

.speaker { display: flex; align-items: center; gap: 12px; }
.speaker .avatar { width: 64px; height: 70px; flex-shrink: 0; }
.speaker .who { font-weight: 900; }

/* Aufnahme */
.rec { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 2px; }
.mic-wrap { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.mic-wrap .ring { position: absolute; inset: 10px; border-radius: 50%; border: 4px solid var(--pink); opacity: 0; }
.mic-wrap.on .ring { animation: ring 1.4s ease-out infinite; }
.mic-wrap.on .ring:nth-child(2) { animation-delay: .7s; }
@keyframes ring { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
.mic {
  --p: 0; position: relative; width: 128px; height: 128px; border-radius: 50%; border: 4px solid var(--ink); cursor: pointer; color: #fff;
  background: conic-gradient(var(--yellow) calc(var(--p) * 1turn), var(--pink) 0); box-shadow: 0 7px 0 var(--ink); transition: transform .12s;
  display: grid; place-items: center; padding: 0;
}
.mic::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); }
.mic .i { position: relative; width: 54px; height: 54px; stroke-width: 2.6; }
.mic:hover { transform: scale(1.05) rotate(-3deg); }
.mic:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.mic-wrap.on .mic::before { background: var(--red); }
.rec-time { font-weight: 900; color: var(--muted); text-align: center; }
.rec-time.err { color: #e03131; }
.btn-row { display: flex; gap: 10px; width: 100%; margin-top: 14px; }
.btn-row .btn { flex: 1; }

/* Wellenform-Player */
.wave { display: flex; align-items: center; gap: 10px; width: 100%; }
.wave canvas { flex: 1; height: 56px; width: 100%; min-width: 0; display: block; }
.play { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--ink); background: var(--blue); color: var(--ink); cursor: pointer; flex-shrink: 0; display: grid; place-items: center; box-shadow: 0 4px 0 var(--ink); padding: 0; transition: transform .1s; }
.play .i { width: 22px; height: 22px; }
.play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.play.on { background: var(--yellow); animation: bob .6s ease-in-out infinite; }
.play.alt { width: 40px; height: 40px; background: var(--paper2); box-shadow: 0 3px 0 var(--ink); }
.play.alt .i { width: 18px; height: 18px; }
.wave-alt { font-size: 13px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 8px; font-weight: 800; }
.silence { color: var(--muted); padding: 10px 0; font-weight: 800; }

/* Warten */
.wait-panel { padding: 26px 18px; }
.wait-art { width: 96px; height: 96px; margin: 0 auto 6px; border-radius: 50%; background: var(--blue); border: 3px solid var(--ink); display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink); animation: bob 1.4s ease-in-out infinite; }
.wait-art .i { width: 52px; height: 52px; stroke-width: 2.6; }
.dots i { font-style: normal; animation: dot 1.2s infinite; display: inline-block; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Replay (Album) ---------- */
.album-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.album-owner .avatar { width: 56px; height: 62px; }
.album-meta { flex: 1; min-width: 0; }
.album { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.entry { display: flex; gap: 10px; align-items: flex-end; animation: entryIn .5s cubic-bezier(.2,1.5,.4,1); }
.entry.right { flex-direction: row-reverse; }
.entry .avatar { width: 58px; height: 64px; flex-shrink: 0; }
@keyframes entryIn { from { transform: translateY(24px) scale(.9); opacity: 0; } }
.bubble { position: relative; flex: 1; min-width: 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; padding: 10px 14px 12px; box-shadow: 0 5px 0 var(--ink); }
.entry.left .bubble { border-bottom-left-radius: 6px; }
.entry.right .bubble { border-bottom-right-radius: 6px; }
.entry.current .bubble { background: #fff4c2; }
.bubble-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 900; }
.kind { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.kind .i { width: 15px; height: 15px; }
.guess-text { font-family: var(--title); font-size: 26px; letter-spacing: .4px; line-height: 1.15; }

.reveal { text-align: center; padding: 24px 18px 20px; overflow: hidden; }
.reveal .label { margin-top: 4px; }
.reveal .orig { font-family: var(--title); font-size: clamp(24px, 5vw, 30px); letter-spacing: .4px; margin: 4px 0 12px; line-height: 1.15; }
.stamp { display: inline-block; font-family: var(--title); font-size: 34px; letter-spacing: 1px; padding: 4px 18px; border: 5px solid; border-radius: 14px; transform: rotate(-8deg); margin-bottom: 10px; animation: stamp .5s cubic-bezier(.2,1.6,.4,1); }
.stamp.ok { color: #2b8a3e; border-color: #2b8a3e; background: #ebfbee; }
.stamp.no { color: #e03131; border-color: #e03131; background: #fff0f0; }
.reveal.suspense .stamp { animation-delay: .9s; animation-fill-mode: backwards; }
.reveal.suspense .orig, .reveal.suspense .hint, .reveal.suspense .label { animation: fadeUp .4s .9s backwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes stamp { from { transform: rotate(-30deg) scale(3); opacity: 0; } }

.reactions { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.reactions button { font-size: 30px; width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .1s; padding: 0; }
.reactions button:hover { transform: scale(1.1) rotate(-6deg); }
.reactions button:active { transform: translateY(3px) scale(1.2); box-shadow: 0 1px 0 var(--ink); }
.controls { display: flex; flex-direction: column; gap: 12px; }
.controls .hint { color: rgba(255,255,255,.85); }

#floaters, #confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.floater { position: absolute; bottom: -70px; font-size: 42px; animation: floatUp 2.6s ease-out forwards; text-align: center; }
.floater small { display: block; font-size: 12px; font-weight: 900; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; }
@keyframes floatUp { to { transform: translateY(-85vh) rotate(var(--r)); opacity: 0; } }
.conf { position: absolute; top: -20px; width: 12px; height: 18px; border: 2px solid var(--ink); border-radius: 3px; animation: confFall var(--t, 2.4s) cubic-bezier(.3,.6,.6,1) forwards; }
@keyframes confFall { to { transform: translate(var(--x), 105vh) rotate(var(--r)); } }

/* ---------- Ergebnis ---------- */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 10px 0 22px; min-height: 250px; }
.pod { display: flex; flex-direction: column; align-items: center; width: 31%; max-width: 160px; animation: podIn .7s cubic-bezier(.2,1.5,.4,1) backwards; }
.pod .avatar { width: 74px; height: 82px; margin-bottom: 4px; }
.pod.p1 .avatar { width: 96px; height: 106px; animation: idleBob 1.4s ease-in-out infinite; }
.pod .pn { color: #fff; font-weight: 900; text-shadow: 0 2px 0 var(--ink); margin-bottom: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .block-ped { width: 100%; border: 3px solid var(--ink); border-radius: 14px 14px 0 0; box-shadow: 0 5px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8px; font-family: var(--title); font-size: 34px; }
.pod .block-ped small { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 900; }
.pod.p1 .block-ped { height: 130px; background: var(--yellow); }
.pod.p2 .block-ped { height: 96px; background: #dee2e6; }
.pod.p3 .block-ped { height: 70px; background: var(--orange); }
.pod.p1 { animation-delay: .5s; } .pod.p2 { animation-delay: .25s; }
@keyframes podIn { from { transform: translateY(80px); opacity: 0; } }
.scores { display: flex; flex-direction: column; gap: 8px; }
.score-row { display: flex; align-items: center; gap: 10px; background: var(--paper2); border: 2px solid var(--ink); border-radius: 14px; padding: 6px 14px; font-weight: 900; }
.score-row .rank { width: 28px; font-family: var(--title); font-size: 20px; text-align: center; color: var(--muted); }
.score-row .avatar { width: 40px; height: 44px; }
.score-row .pts { margin-left: auto; font-family: var(--title); font-size: 22px; }

/* ---------- Toast / Overlay ---------- */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140px); background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 12px 18px; border-radius: 16px; transition: transform .3s cubic-bezier(.2,1.5,.4,1); z-index: 80; max-width: calc(100% - 32px); font-weight: 900; word-break: break-all; }
#toast.show { transform: translateX(-50%) translateY(0); }
.overlay { position: fixed; inset: 0; background: rgba(29,27,58,.75); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; animation: screenIn .3s; }
.overlay .panel { max-width: 420px; width: 100%; text-align: center; }
.overlay canvas, .overlay video { width: 100%; max-width: 230px; border-radius: 16px; border: 3px solid var(--ink); margin: 10px auto; display: block; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .panel { padding: 14px; }
  .bigcode { font-size: 50px; }
  .reactions button { width: 54px; height: 54px; font-size: 26px; }
  .entry .avatar { width: 46px; height: 51px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}