body { overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#app { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
.top .who { flex: 1; min-width: 0; }
.top .who b { display: block; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .who span { color: var(--dim); font-size: .85rem; }
.top .score { font-family: var(--display); font-size: 1.5rem; color: var(--yellow); text-align: right; line-height: 1; }
.top .score small { display: block; font-family: var(--body); font-size: .7rem; color: var(--dim); font-weight: 600; }
.main { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 20px; padding: 16px; }
.hint { color: var(--dim); font-size: .95rem; }
.big-emoji { font-size: 5rem; line-height: 1; animation: floaty 2.4s ease-in-out infinite; }
h1 { font-size: 2rem; } h2 { font-size: 1.4rem; }

/* Beitritt */
.join .logo { font-size: 5.2rem; text-align: center; margin: 18px 0 6px; }
.field { width: 100%; padding: .8em 1em; border-radius: 16px; border: 3px solid var(--line); background: var(--dark); font-size: 1.3rem; font-weight: 600; outline: none; user-select: text; -webkit-user-select: text; }
.field:focus { border-color: var(--yellow); }
.emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.emojis button { font-size: 1.6rem; aspect-ratio: 1; border-radius: 12px; background: var(--panel2); transition: transform .1s; }
.emojis button.on { background: var(--yellow); transform: scale(1.15); box-shadow: 0 4px 0 #b8960a; }
.err { color: var(--red); font-weight: 700; text-align: center; }

/* Startseite */
.rank { display: flex; align-items: center; gap: 14px; }
.rank .place { font-family: var(--display); font-size: 3.4rem; color: var(--yellow); line-height: 1; text-shadow: 0 4px 0 #b8960a; }
.sounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.sounds button { background: var(--panel2); border-radius: 14px; padding: 10px 4px; font-weight: 600; font-size: .9rem; border: 3px solid transparent; }
.sounds button span { display: block; font-size: 1.6rem; }
.sounds button.on { border-color: var(--yellow); background: #4a2a9a; }
.plan { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.plan div { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--panel2); font-weight: 600; }
.plan .done { opacity: .45; text-decoration: line-through; }
.plan .active { background: var(--pink); }

/* Frage */
.qhead { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qtext { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.timer { height: 12px; border-radius: 99px; background: var(--dark); overflow: hidden; }
.timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--yellow)); border-radius: 99px; transition: width .2s linear; }
.timer.hot i { background: var(--red); }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 18px; background: var(--c); color: var(--dark); font-weight: 700; font-size: 1.1rem; box-shadow: 0 6px 0 rgba(0,0,0,.4); transition: transform .08s, box-shadow .08s, opacity .2s; min-height: 62px; }
.opt:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.opt .l { font-family: var(--display); font-size: 1.4rem; width: 38px; height: 38px; flex: none; border-radius: 12px; background: rgba(0,0,0,.25); color: #fff; display: grid; place-items: center; }
.opt.on { outline: 5px solid #fff; transform: scale(1.02); }
.opt.dim { opacity: .35; }
.opt.good { outline: 5px solid var(--green); }
.opt.bad { opacity: .3; }
.numfield { font-family: var(--display); font-size: 2.4rem; text-align: center; }
.unit { text-align: center; color: var(--dim); font-weight: 600; }

.sortlist { display: flex; flex-direction: column; gap: 8px; position: relative; }
.sortrow { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 58px; border-radius: 16px; background: var(--panel2); border: 2px solid var(--line); font-weight: 700; touch-action: none; transition: transform .15s; }
.sortrow .n { font-family: var(--display); color: var(--yellow); width: 24px; font-size: 1.3rem; }
.sortrow .t { flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
.sortrow .grip { font-size: 1.4rem; opacity: .6; }
.sortrow.drag { background: var(--yellow); color: var(--dark); border-color: #fff; transform: scale(1.04); box-shadow: 0 12px 24px rgba(0,0,0,.5); z-index: 2; transition: none; }
.sortrow.drag .n { color: var(--dark); }

.slots { display: flex; flex-direction: column; gap: 4px; }
.slot { padding: 8px; border-radius: 12px; border: 3px dashed var(--line); color: var(--dim); font-weight: 700; }
.slot.on { border: 3px solid var(--yellow); background: var(--yellow); color: var(--dark); font-size: 1.1rem; padding: 14px 8px; }
.item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--panel2); font-weight: 700; }
.item span:last-child { color: var(--yellow); font-family: var(--display); }
.target { background: var(--pink); border-radius: 16px; padding: 12px 14px; font-weight: 700; text-align: center; font-size: 1.15rem; }

/* Joker und Wetten */
.jokers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.joker { background: var(--panel2); border: 3px solid var(--line); border-radius: 16px; padding: 10px 4px; font-weight: 700; position: relative; }
.joker span { display: block; font-size: 2rem; }
.joker i { position: absolute; top: -8px; right: -6px; background: var(--yellow); color: var(--dark); font-style: normal; font-family: var(--display); border-radius: 99px; min-width: 24px; height: 24px; display: grid; place-items: center; }
.joker.on { background: var(--pink); border-color: #fff; animation: wiggle .5s ease-in-out infinite; }
.joker:disabled { opacity: .35; }
.victims { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.victims button { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 14px; padding: 8px; font-weight: 700; text-align: left; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { font-family: var(--display); font-size: 1.3rem; width: 74px; height: 74px; border-radius: 50%; background: var(--panel2); border: 5px dashed var(--line); }
.chip.on { background: var(--yellow); color: var(--dark); border: 5px dashed var(--dark); transform: scale(1.12); box-shadow: 0 6px 0 #b8960a; }

/* Buzzer */
.buzz-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.buzzer { position: relative; width: min(78vw, 340px); aspect-ratio: 1; touch-action: none; }
.buzzer .base { position: absolute; inset: 6% 0 0 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #555 0%, #1a1a1a 70%); box-shadow: 0 18px 0 #050505, 0 34px 40px rgba(0,0,0,.6), inset 0 6px 10px rgba(255,255,255,.2); }
.buzzer .dome { position: absolute; inset: 0 9% 18% 9%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ff9a9a 0%, #ff2b2b 34%, #b30000 78%, #7a0000 100%); box-shadow: 0 22px 0 #6b0000, 0 30px 26px rgba(0,0,0,.5), inset 0 -14px 24px rgba(0,0,0,.35), inset 0 10px 18px rgba(255,255,255,.35); transition: transform .06s, box-shadow .06s; display: grid; place-items: center; font-family: var(--display); font-size: 2.6rem; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.buzzer .dome::after { content: ''; position: absolute; left: 20%; top: 12%; width: 34%; height: 20%; border-radius: 50%; background: rgba(255,255,255,.45); transform: rotate(-24deg); }
.buzzer.live .dome { animation: buzzglow 1s ease-in-out infinite; }
.buzzer.down .dome, .buzzer:active .dome { transform: translateY(18px); box-shadow: 0 4px 0 #6b0000, 0 8px 10px rgba(0,0,0,.5), inset 0 -14px 24px rgba(0,0,0,.35), inset 0 10px 18px rgba(255,255,255,.35); animation: none; }
.buzzer.off .dome { background: radial-gradient(circle at 35% 28%, #aaa 0%, #666 40%, #333 100%); box-shadow: 0 22px 0 #222, inset 0 -14px 24px rgba(0,0,0,.35); }
.buzzer.mine .dome { background: radial-gradient(circle at 35% 28%, #fff7b0 0%, #ffe14d 40%, #c79a00 100%); box-shadow: 0 22px 0 #8a6a00, 0 0 80px #ffe14d; color: var(--dark); text-shadow: none; animation: pulse .5s ease-in-out infinite; }
@keyframes buzzglow { 0%, 100% { filter: drop-shadow(0 0 0 #ff2b2b); } 50% { filter: drop-shadow(0 0 34px #ff2b2b); } }

/* Ergebnis */
.result .pts { font-family: var(--display); font-size: 5.5rem; line-height: 1; }
.result.good .pts { color: var(--green); text-shadow: 0 6px 0 #14a35a; }
.result.bad .pts { color: var(--red); text-shadow: 0 6px 0 #9c1f1f; }
.result.zero .pts { color: var(--dim); }
.notes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.locked-in { font-family: var(--display); font-size: 2.2rem; color: var(--green); }

.chaos { animation: chaos 1.1s ease-in-out infinite; }
@keyframes chaos { 0%, 100% { transform: rotate(180deg) translateX(-10px) skewX(-6deg); } 50% { transform: rotate(180deg) translateX(10px) skewX(6deg) scale(.94); } }
.chaos-note { background: var(--pink); border-radius: 14px; padding: 8px 12px; font-weight: 700; text-align: center; animation: shake .5s; }