:root {
    --gelb: #ffd23f;
    --gelb-dunkel: #ffb703;
    --orange: #ff8c1a;
    --rot: #ff3d5a;
    --pink: #ff4fa3;
    --lila: #7b5cff;
    --blau: #3a86ff;
    --tuerkis: #00c2a8;
    --gruen: #4cc94c;
    --grau: #9aa0a6;
    --schwarz: #161616;
    --weiss: #fffdf6;
    --papier: #fff6dc;
    --rand: 4px solid var(--schwarz);
    --schatten: 6px 6px 0 var(--schwarz);
    --schatten-klein: 3px 3px 0 var(--schwarz);
    --radius: 18px;
    --schrift-titel: 'Bangers', 'Impact', 'Arial Black', sans-serif;
    --schrift-text: 'Fredoka', 'Nunito', 'Segoe UI', 'Comic Sans MS', sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--schrift-text);
    color: var(--schwarz);
    background: var(--gelb);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

input, textarea {
    user-select: text;
    -webkit-user-select: text;
}

.comic-hintergrund {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background: var(--gelb);
}

.comic-hintergrund::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 300vmax;
    height: 300vmax;
    margin-left: -150vmax;
    margin-top: -150vmax;
    background: repeating-conic-gradient(from 0deg, #ffd84f 0deg 7.5deg, #ffc727 7.5deg 15deg);
    animation: sonnenstrahlen 90s linear infinite;
    will-change: transform;
}

.comic-hintergrund::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%),
        radial-gradient(rgba(0, 0, 0, 0.10) 1.4px, transparent 1.6px) 0 0 / 14px 14px;
}

.comic-hintergrund.stil-dunkel {
    background: #1d1b3a;
}

.comic-hintergrund.stil-dunkel::before {
    background: repeating-conic-gradient(from 0deg, #2a2660 0deg 7.5deg, #221f4f 7.5deg 15deg);
}

.comic-hintergrund.stil-dunkel::after {
    background:
        radial-gradient(circle at 50% 45%, rgba(123, 92, 255, 0.35), rgba(0, 0, 0, 0) 50%),
        radial-gradient(rgba(255, 255, 255, 0.06) 1.4px, transparent 1.6px) 0 0 / 14px 14px;
}

@keyframes sonnenstrahlen {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.comic-panel {
    background: var(--weiss);
    border: var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 20px;
    position: relative;
}

.comic-panel.papier {
    background: var(--papier);
}

.comic-titel {
    font-family: var(--schrift-titel);
    letter-spacing: 2px;
    color: var(--weiss);
    -webkit-text-stroke: 2px var(--schwarz);
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 var(--schwarz), 5px 5px 0 rgba(0, 0, 0, 0.25);
    margin: 0;
    line-height: 1;
}

.comic-titel.gross {
    font-size: clamp(42px, 7vw, 120px);
    -webkit-text-stroke: 3px var(--schwarz);
    text-shadow: 5px 5px 0 var(--schwarz), 9px 9px 0 rgba(0, 0, 0, 0.2);
}

.comic-titel.rot { color: var(--rot); }
.comic-titel.blau { color: var(--blau); }
.comic-titel.gelb { color: var(--gelb); }
.comic-titel.pink { color: var(--pink); }
.comic-titel.gruen { color: var(--gruen); }
.comic-titel.lila { color: var(--lila); }

.comic-knopf {
    font-family: var(--schrift-titel);
    font-size: 26px;
    letter-spacing: 1.5px;
    color: var(--weiss);
    -webkit-text-stroke: 1.5px var(--schwarz);
    paint-order: stroke fill;
    text-shadow: 2px 2px 0 var(--schwarz);
    background: var(--rot);
    border: var(--rand);
    border-radius: 16px;
    box-shadow: var(--schatten);
    line-height: 1.15;
    padding: 12px 26px 13px;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
    position: relative;
    outline: none;
    touch-action: manipulation;
}

.comic-knopf::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 5px;
    height: 30%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

.comic-knopf:hover {
    filter: brightness(1.07);
    transform: translate(-1px, -2px) rotate(-0.6deg);
    box-shadow: 8px 8px 0 var(--schwarz);
}

.comic-knopf:active, .comic-knopf.gedrueckt {
    transform: translate(5px, 5px);
    box-shadow: 1px 1px 0 var(--schwarz);
}

.comic-knopf:disabled, .comic-knopf.deaktiviert {
    filter: grayscale(0.85) brightness(0.95);
    cursor: not-allowed;
    opacity: 0.6;
}

.comic-knopf.k-blau { background: var(--blau); }
.comic-knopf.k-gruen { background: var(--gruen); }
.comic-knopf.k-lila { background: var(--lila); }
.comic-knopf.k-pink { background: var(--pink); }
.comic-knopf.k-orange { background: var(--orange); }
.comic-knopf.k-tuerkis { background: var(--tuerkis); }
.comic-knopf.k-grau { background: var(--grau); }
.comic-knopf.k-gelb { background: var(--gelb); color: var(--schwarz); -webkit-text-stroke: 0; text-shadow: none; }
.comic-knopf.k-weiss { background: var(--weiss); color: var(--schwarz); -webkit-text-stroke: 0; text-shadow: none; }
.comic-knopf.klein { font-size: 18px; padding: 7px 14px; border-width: 3px; box-shadow: var(--schatten-klein); border-radius: 12px; }
.comic-knopf.klein:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--schwarz); }
.comic-knopf.riesig { font-size: 40px; padding: 22px 30px; border-radius: 22px; }

.sprechblase {
    position: relative;
    background: var(--weiss);
    border: var(--rand);
    border-radius: 22px;
    padding: 12px 18px;
    font-weight: 700;
    box-shadow: var(--schatten-klein);
}

.sprechblase::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 28px;
    border-width: 16px 12px 0 0;
    border-style: solid;
    border-color: var(--schwarz) transparent transparent transparent;
}

.sprechblase::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 32px;
    border-width: 10px 7px 0 0;
    border-style: solid;
    border-color: var(--weiss) transparent transparent transparent;
    z-index: 1;
}

.abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--schwarz);
    color: var(--weiss);
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 15px;
}

.abzeichen.hell {
    background: var(--weiss);
    color: var(--schwarz);
    border: 3px solid var(--schwarz);
}

.stempel {
    font-family: var(--schrift-titel);
    color: var(--rot);
    border: 5px solid var(--rot);
    border-radius: 12px;
    padding: 4px 14px;
    font-size: 34px;
    letter-spacing: 2px;
    transform: rotate(-14deg);
    background: rgba(255, 255, 255, 0.7);
    animation: stempelAufdruck 0.45s cubic-bezier(.2, 1.8, .4, 1) both;
}

@keyframes stempelAufdruck {
    0% { transform: rotate(-14deg) scale(3); opacity: 0; }
    60% { transform: rotate(-14deg) scale(0.9); opacity: 1; }
    100% { transform: rotate(-14deg) scale(1); opacity: 1; }
}

@keyframes reinploppen {
    0% { transform: scale(0.2) rotate(-8deg); opacity: 0; }
    60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes reinRutschen {
    0% { transform: translateY(40px) rotate(-2deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes ansichtRein {
    0% { transform: scale(0.85) rotate(-2.5deg); opacity: 0; }
    65% { transform: scale(1.02) rotate(0.5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes ansichtRaus {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.1) rotate(2deg); opacity: 0; }
}

@keyframes schweben {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes wippen {
    0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
    45% { transform: translateY(-6px) scaleY(1.03) scaleX(0.98); }
    90% { transform: translateY(0) scaleY(0.95) scaleX(1.04); }
}

@keyframes huepfen {
    0% { transform: translateY(0) scale(1, 1); }
    15% { transform: translateY(0) scale(1.15, 0.85); }
    45% { transform: translateY(-48px) scale(0.92, 1.1) rotate(-6deg); }
    70% { transform: translateY(0) scale(1.12, 0.88); }
    85% { transform: translateY(-8px) scale(0.97, 1.03); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes wackeln {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-4deg); }
    75% { transform: rotate(4deg); }
}

@keyframes pulsieren {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes schuetteln {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px) rotate(-1deg); }
    40% { transform: translateX(8px) rotate(1deg); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

@keyframes blinken {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.anim-reinploppen { animation: reinploppen 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
.anim-schweben { animation: schweben 3s ease-in-out infinite; }
.anim-wackeln { animation: wackeln 1.2s ease-in-out infinite; }
.anim-pulsieren { animation: pulsieren 1.2s ease-in-out infinite; }
.anim-schuetteln { animation: schuetteln 0.45s ease-in-out; }
.anim-blinken { animation: blinken 1s ease-in-out infinite; }

.avatar {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.avatar-figur {
    position: relative;
    display: inline-block;
}

.avatar-figur .avatar-koerper {
    transform-origin: 50% 100%;
    animation: wippen 1.6s ease-in-out infinite;
}

.avatar-figur.huepft .avatar-koerper {
    animation: huepfen 0.65s ease-out;
    animation-delay: 0s !important;
}

.avatar-figur.offline {
    filter: grayscale(1) opacity(0.45);
}

.burst-ebene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.burst {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: burstAnim 1.1s cubic-bezier(.2, 1.5, .4, 1) both;
}

.burst svg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.burst span {
    position: relative;
    font-family: var(--schrift-titel);
    color: var(--weiss);
    -webkit-text-stroke: 3px var(--schwarz);
    paint-order: stroke fill;
    text-shadow: 4px 4px 0 var(--schwarz);
    letter-spacing: 3px;
    white-space: nowrap;
}

@keyframes burstAnim {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    25% { transform: scale(1.15) rotate(4deg); opacity: 1; }
    40% { transform: scale(1) rotate(0deg); opacity: 1; }
    80% { transform: scale(1.03) rotate(-1deg); opacity: 1; }
    100% { transform: scale(1.5) rotate(6deg); opacity: 0; }
}

.toast-ebene {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: max-content;
    max-width: 92vw;
}

.toast {
    background: var(--weiss);
    border: var(--rand);
    border-radius: 16px;
    box-shadow: var(--schatten-klein);
    padding: 10px 18px;
    font-weight: 700;
    font-size: 18px;
    animation: toastRein 0.4s cubic-bezier(.2, 1.6, .4, 1) both;
    text-align: center;
}

.toast.warnung {
    background: #ffe0e5;
}

.toast.raus {
    animation: toastRaus 0.3s ease-in both;
}

@keyframes toastRein {
    0% { transform: translateY(-40px) scale(0.7); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes toastRaus {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-30px) scale(0.8); opacity: 0; }
}

.konfetti-leinwand {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 800;
}


.umschalter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.umschalter .comic-knopf {
    font-size: 22px;
    padding: 8px 18px;
}

.umschalter .comic-knopf:not(.aktiv) {
    background: var(--weiss);
    color: var(--schwarz);
    -webkit-text-stroke: 0;
    text-shadow: none;
    box-shadow: var(--schatten-klein);
}

.einstellungs-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 3px dashed rgba(0, 0, 0, 0.15);
}

.einstellungs-zeile .beschriftung b {
    display: block;
    font-size: 20px;
}

.einstellungs-zeile .beschriftung span {
    font-size: 14px;
    opacity: 0.75;
}

.schalter {
    width: 74px;
    height: 40px;
    border: 3px solid var(--schwarz);
    border-radius: 999px;
    background: var(--grau);
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s ease;
}

.schalter::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--schwarz);
    transition: left 0.2s cubic-bezier(.2, 1.6, .4, 1);
}

.schalter.an {
    background: var(--gruen);
}

.schalter.an::after {
    left: 36px;
}

.mini-zaehler {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-zaehler .wert {
    font-family: var(--schrift-titel);
    font-size: 28px;
    min-width: 66px;
    text-align: center;
}

.versteckt {
    display: none !important;
}

.bs-uhr {
    position: relative;
    width: clamp(110px, 10vw, 180px);
    height: clamp(84px, 7.5vw, 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.bs-uhr svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bs-uhr span {
    position: relative;
    font-family: var(--schrift-titel);
    font-size: clamp(40px, 4vw, 70px);
    color: var(--weiss);
    -webkit-text-stroke: 3px var(--schwarz);
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 var(--schwarz);
}

.bs-uhr.knapp span {
    color: var(--rot);
    animation: pulsieren 0.5s ease-in-out infinite;
}

.bs-zeit-balken {
    width: 100%;
    max-width: 420px;
    height: 20px;
    border: 4px solid var(--schwarz);
    border-radius: 999px;
    overflow: hidden;
    background: var(--weiss);
    flex: 0 0 auto;
}

.bs-zeit-balken div {
    height: 100%;
    width: 100%;
    background: var(--blau);
}

.bs-zeit-balken.knapp div {
    background: var(--rot);
}

.bs-status-leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
}

.bs-status-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.bs-status-karte.fertig {
    opacity: 1;
}

.bs-status-karte .avatar-figur {
    width: var(--bs-figur, 64px);
}

.bs-status-name {
    font-weight: 700;
    font-size: 14px;
    background: var(--weiss);
    border: 2px solid var(--schwarz);
    border-radius: 8px;
    padding: 0 6px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-haken {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--schwarz);
    background: var(--gruen);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(.2, 1.6, .4, 1);
}

.bs-status-karte.fertig .bs-haken {
    transform: scale(1);
}

.bs-rangliste {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 16px;
    width: min(1100px, 100%);
    margin: 0 auto;
    align-content: start;
}

.bs-rangliste.kompakt {
    grid-template-columns: 1fr 1fr;
}

.bs-rang-zeile {
    display: grid;
    grid-template-columns: 42px 48px minmax(90px, 180px) 1fr 70px 80px;
    align-items: center;
    gap: 10px;
    background: var(--weiss);
    border: 3px solid var(--schwarz);
    border-radius: 14px;
    box-shadow: var(--schatten-klein);
    padding: 4px 12px;
    animation: reinRutschen 0.4s ease-out both;
}

.bs-rang-nummer {
    font-family: var(--schrift-titel);
    font-size: 28px;
}

.bs-rang-name {
    font-weight: 700;
    font-size: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-rang-balken {
    height: 20px;
    border: 3px solid var(--schwarz);
    border-radius: 999px;
    background: var(--papier);
    overflow: hidden;
}

.bs-rang-balken div {
    height: 100%;
    width: 0;
    border-right: 3px solid var(--schwarz);
    transition: width 1.2s cubic-bezier(.2, 1, .3, 1);
}

.bs-rang-plus {
    font-family: var(--schrift-titel);
    font-size: 22px;
    color: var(--gruen);
    -webkit-text-stroke: 1px var(--schwarz);
    paint-order: stroke fill;
    text-align: right;
}

.bs-rang-wert {
    font-family: var(--schrift-titel);
    font-size: 28px;
    text-align: right;
}

.bs-texteingabe {
    width: 100%;
    max-width: 420px;
    font-family: var(--schrift-text);
    font-size: 22px;
    font-weight: 700;
    padding: 14px;
    border: var(--rand);
    border-radius: 14px;
    box-shadow: var(--schatten-klein);
    background: var(--weiss);
    outline: none;
    resize: none;
}

.bs-texteingabe:focus {
    box-shadow: 4px 4px 0 var(--blau);
}

.bs-zeichen {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.7;
    margin-top: -10px;
    align-self: flex-end;
    max-width: 420px;
}

.sg-buehne {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 1.2vh 2vw 1.6vh;
    gap: 1.4vh;
}

.sg-kopf {
    display: flex;
    align-items: center;
    gap: 1.6vw;
}

.sg-kopf .comic-titel {
    font-size: clamp(40px, 4.4vw, 78px);
    color: var(--gelb);
    transform: rotate(-2deg);
}

.sg-kopf .abzeichen {
    font-size: 18px;
}

.sg-doppelt {
    background: var(--pink);
    color: #fff;
    border: 3px solid var(--schwarz);
    animation: pulsieren 1s ease-in-out infinite;
}

.sg-kopf .bs-uhr {
    margin-left: auto;
}

.sg-haupt {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4vh;
}

.sg-fuss {
    min-height: 90px;
}

.sg-titel {
    font-size: clamp(44px, 5vw, 90px);
    color: var(--gelb);
}

.sg-frage {
    max-width: 1150px;
    width: 92%;
    font-size: clamp(30px, 3.6vw, 62px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    padding: 2.6vh 3vw;
    transform: rotate(-1deg);
    animation: ansichtRein 0.6s cubic-bezier(.2, 1.4, .4, 1) both;
}

.sg-frage.klein {
    font-size: clamp(22px, 2.3vw, 38px);
    padding: 1.4vh 2vw;
}

.sg-hinweis {
    font-size: clamp(20px, 2vw, 32px);
    max-width: 1000px;
    text-align: center;
}

.sg-controller {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px 16px 28px;
    text-align: center;
}

.sg-controller .sg-box {
    width: 100%;
    max-width: 420px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    padding: 14px;
}

.sg-controller > .comic-knopf {
    width: 100%;
    max-width: 420px;
}

.sg-gross {
    font-family: var(--schrift-titel);
    font-size: 64px;
    line-height: 1;
    animation: reinploppen 0.5s cubic-bezier(.2, 1.6, .4, 1) both;
}