/*
    PARTY-MODUS
    Alle Regeln hängen an body.party-mode und lassen sich im Menü abschalten.
    Die passenden Effekte aus JavaScript liegen in js/party.js.
*/

/*
    schwebende Konfetti-Punkte im Hintergrund
    Die Ebene wandert pro Durchlauf um genau 900px: Die Punktmuster (300px-Kachel) und die
    Skin-Motive (900px-Kachel) liegen danach wieder exakt gleich, der Neustart ist unsichtbar.
    Die Ebene ist links und unten um 900px größer, damit beim Wandern nie ein Rand sichtbar wird.
    Skins ersetzen die Motive über --party-bg, --party-size und --party-opacity, siehe css/skins.css.
*/
body.party-mode::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: -900px;
    left: -900px;
    z-index: -1;
    pointer-events: none;
    background-image: var(--party-bg,
        radial-gradient(circle at 20px 30px, var(--yellow) 0 5px, transparent 6px),
        radial-gradient(circle at 170px 90px, var(--accent) 0 4px, transparent 5px),
        radial-gradient(circle at 90px 190px, var(--green) 0 4px, transparent 5px),
        radial-gradient(circle at 250px 230px, var(--purple) 0 3px, transparent 4px),
        radial-gradient(circle at 230px 20px, var(--blue) 0 4px, transparent 5px),
        radial-gradient(circle at 40px 270px, var(--orange) 0 3px, transparent 4px));
    background-size: var(--party-size, 300px 300px);
    opacity: var(--party-opacity, 0.35);
    will-change: transform;
    animation: partyDrift 140s linear infinite;
}

@keyframes partyDrift {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(900px, -900px, 0);
    }
}

/*
    LOGO: schwebt, dreht sich beim Drüberfahren
*/

.party-mode .logo-sticker {
    animation: partyFloat 3.2s ease-in-out infinite;
}

.party-mode .logo-sticker img {
    transition: transform .6s cubic-bezier(.34, 1.4, .5, 1), filter .3s ease;
}

/* nur die Glühbirne dreht sich: der Sticker selbst bleibt stehen,
   sonst rutscht er unter dem Mauszeiger weg und das Hover flackert */
@media (hover: hover) {
    .party-mode .logo-sticker:hover img {
        transform: rotate(360deg) scale(1.2);
        filter: drop-shadow(0 0 5px #fff);
    }
}

@keyframes partyFloat {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(-1deg) translateY(-3px); }
}

/*
    BUTTONS: hüpfen, kippen, Icons drehen sich
*/

@media (hover: hover) {
    .party-mode .icon-btn:hover {
        transform: translate(-2px, -3px) rotate(-4deg);
        box-shadow: 4px 5px 0 var(--ink);
    }

    .party-mode .icon-btn:hover i {
        animation: partyIconSpin .6s cubic-bezier(.34, 1.6, .5, 1);
    }

    .party-mode .icon-btn.hot:hover i {
        animation: partyWiggle .5s ease-in-out infinite;
    }

    .party-mode .btn:not(.dropdown-item):hover {
        transform: translate(-2px, -3px) rotate(-1.5deg) scale(1.04);
        box-shadow: 5px 6px 0 var(--ink);
    }

    .party-mode .vote-btn:hover {
        transform: rotate(-6deg) scale(1.1);
    }

    .party-mode .vote-btn:hover i {
        animation: partyWiggle .45s ease-in-out infinite;
    }

    .party-mode .sticker-menu .dropdown-item:hover {
        transform: translateX(6px);
    }

    .party-mode #header3:hover {
        display: inline-block;
        animation: partyIconSpin .6s cubic-bezier(.34, 1.6, .5, 1);
    }
}

.party-mode .sticker-menu .dropdown-item {
    transition: transform .15s cubic-bezier(.34, 1.8, .5, 1), background-color .15s ease;
}

.party-mode .icon-btn,
.party-mode .btn,
.party-mode .vote-btn {
    transition: transform .18s cubic-bezier(.34, 1.8, .5, 1), box-shadow .18s ease;
}

.party-mode .icon-btn:active,
.party-mode .btn:active,
.party-mode .vote-btn:active {
    transform: translate(3px, 3px) scale(0.92) !important;
    box-shadow: 0 0 0 var(--ink) !important;
}

@keyframes partyIconSpin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(200deg) scale(1.3); }
    to   { transform: rotate(360deg) scale(1); }
}

@keyframes partyWiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-14deg) scale(1.1); }
    75%      { transform: rotate(14deg) scale(1.1); }
}

/* nach dem Spiel: "Neues Spiel" lockt */
.party-mode #new-game-button {
    animation: partyBeg 1.6s ease-in-out infinite;
}

.party-mode #new-game-button:hover {
    animation: none;
}

@keyframes partyBeg {
    0%, 100% { transform: scale(1) rotate(0deg); box-shadow: var(--shadow); }
    10%      { transform: scale(1.08) rotate(-3deg); }
    20%      { transform: scale(1.08) rotate(3deg); }
    30%      { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 6px rgba(255, 90, 95, 0.35), var(--shadow); }
}

/*
    SPIELBRETT
*/

/* das Brett kippt dem Mauszeiger hinterher (Werte aus party.js) */
.party-mode #board-table {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .25s ease-out;
    transform-style: preserve-3d;
}

@media (hover: hover) {
    .party-mode .cell.active-row:hover {
        transform: translateY(-4px) rotate(-3deg) scale(1.05);
        box-shadow: 4px 7px 0 var(--ink);
    }

    .party-mode .cell.active-row.active-cell:hover {
        box-shadow: 4px 7px 0 var(--accent);
    }
}

/* aktives Feld pulsiert */
.party-mode .cell.active-cell {
    animation: partyCursor 1.1s ease-in-out infinite;
}

@keyframes partyCursor {
    0%, 100% { transform: translateY(-2px) scale(1); }
    50%      { transform: translateY(-4px) scale(1.06); }
}

/* Buchstabe getippt */
.party-mode .cell.party-pop {
    animation: partyLetter .28s cubic-bezier(.34, 1.8, .5, 1);
}

@keyframes partyLetter {
    0%   { transform: scale(0.6) rotate(-12deg); }
    60%  { transform: scale(1.18) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Auswertung: Plättchen drehen sich um */
.party-mode .cell.green,
.party-mode .cell.yellow,
.party-mode .cell.gray {
    animation: partyFlip .55s cubic-bezier(.34, 1.4, .5, 1);
}

@keyframes partyFlip {
    0%   { transform: perspective(400px) rotateX(0deg) scale(1); }
    45%  { transform: perspective(400px) rotateX(90deg) scale(1.1); }
    75%  { transform: perspective(400px) rotateX(-12deg) scale(1.08); }
    100% { transform: perspective(400px) rotateX(0deg) scale(1); }
}

/* falsches Wort: kräftig schütteln und rot aufblitzen (Klasse sitzt auf der Tabellenzeile) */
.party-mode tr.shake-horizontal {
    animation: partyShake .5s cubic-bezier(.36, .07, .19, .97);
}

.party-mode tr.shake-horizontal .cell {
    border-color: var(--red) !important;
    box-shadow: 3px 3px 0 var(--red) !important;
}

@keyframes partyShake {
    10%, 90% { transform: translateX(-3px) rotate(-2deg); }
    20%, 80% { transform: translateX(6px) rotate(3deg); }
    30%, 50%, 70% { transform: translateX(-12px) rotate(-5deg); }
    40%, 60% { transform: translateX(12px) rotate(5deg); }
}

/* Sieg: Welle über die Gewinnerreihe */
.party-mode .cell.party-dance {
    animation: partyDance .7s cubic-bezier(.34, 1.6, .5, 1);
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes partyDance {
    0%   { transform: translateY(0) rotate(0deg); }
    40%  { transform: translateY(-28px) rotate(-12deg) scale(1.15); }
    70%  { transform: translateY(4px) rotate(4deg) scale(0.95); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/*
    TASTATUR
*/

@media (hover: hover) {
    .party-mode .key:hover {
        transform: translateY(-3px) rotate(-3deg);
        box-shadow: 0 5px 0 var(--ink);
    }

    .party-mode .keyboard-row .key:nth-child(even):hover {
        transform: translateY(-3px) rotate(3deg);
    }
}

.party-mode .key {
    transition: transform .15s cubic-bezier(.34, 1.8, .5, 1), box-shadow .1s ease;
}

.party-mode .key:active,
.party-mode .key.party-press {
    transform: translateY(3px) scale(0.88) !important;
    box-shadow: 0 0 0 var(--ink) !important;
    background-color: var(--yellow);
}

.party-mode .key.green.party-press,
.party-mode .key.yellow.party-press,
.party-mode .key.gray.party-press {
    filter: brightness(0.85);
}

/*
    DIALOGE & SPIELENDE
*/

.party-mode dialog[open] {
    animation: partyDialog .45s cubic-bezier(.34, 1.5, .5, 1);
}

@media (max-width: 767px) {
    .party-mode dialog[open] {
        animation: partySheet .45s cubic-bezier(.34, 1.3, .5, 1);
    }
}

@keyframes partyDialog {
    0%   { opacity: 0; transform: scale(0.7) rotate(-6deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes partySheet {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

.party-mode #solution {
    animation: partySolution 2.4s ease-in-out infinite;
}

@keyframes partySolution {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    50%      { transform: rotate(2deg) scale(1.06); }
}

.party-mode .modal-stats-kpi-card,
.party-mode #friends-list .friend-card,
.party-mode #custom-stats-others .friend-card {
    transition: transform .2s cubic-bezier(.34, 1.8, .5, 1);
}

@media (hover: hover) {
    .party-mode .modal-stats-kpi-card:hover {
        transform: rotate(-3deg) scale(1.05);
    }

    .party-mode #friends-list .friend-card:hover,
    .party-mode #custom-stats-others .friend-card:hover {
        transform: translateX(6px) rotate(-1deg);
    }
}

/*
    PARTIKEL & SPRÜCHE (Elemente erzeugt party.js)
*/

#party-layer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    overflow: hidden;
}

.party-bit {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border: 2px solid var(--ink);
    border-radius: 3px;
    will-change: transform, opacity;
}

.party-bit.round {
    border-radius: 50%;
}

.party-bit.star {
    width: auto;
    height: auto;
    border: 0;
    font-size: 18px;
    line-height: 1;
}

.party-shout {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    color: var(--ink);
    background: var(--yellow);
    border: var(--stroke) solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 0.1em 0.6em;
    white-space: nowrap;
    will-change: transform, opacity;
}

.party-shout.hot  { background: var(--accent); color: #fff; }
.party-shout.win  { background: var(--green); }
.party-shout.cold { background: var(--sky); }

/* Bewegung reduziert: Party-Modus bleibt bunt, aber ohne Animationen */
@media (prefers-reduced-motion: reduce) {
    body.party-mode::before {
        animation: none;
    }
    .party-mode #board-table {
        transform: none;
    }
}