/*
 * Party mode (layouts/_party.blade.php), ported from OPQuests and recoloured
 * for KeyJoker's light pages. A plain file rather than part of the compiled
 * app.css, loaded only while a party is on. All of it sits over the page with
 * pointer-events off, except the bar. Nothing flashes: colours drift slowly,
 * and the beat (twice a second, only with the music on) is a soft pulse.
 */

@property --party-glow {
    syntax: '<color>';
    inherits: true;
    initial-value: #10b981;
}

@keyframes party-glow-cycle {
    0%   { --party-glow: #10b981; }
    25%  { --party-glow: #ec4899; }
    50%  { --party-glow: #3b82f6; }
    75%  { --party-glow: #f59e0b; }
    100% { --party-glow: #10b981; }
}

/* Coloured spots of light drifting over the page. */
.party-lights {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
    /* 'screen' vanishes on a white page; 'multiply' tints it instead. */
    mix-blend-mode: multiply;
    opacity: 0.22;
    transition: opacity 0.12s ease-out;
}

.party-beat .party-lights {
    opacity: 0.3;
}

.party-lights span {
    position: absolute;
    width: 55vmax;
    height: 55vmax;
    border-radius: 9999px;
    background: radial-gradient(circle, var(--spot) 0%, transparent 65%);
    animation: party-drift var(--drift, 16s) ease-in-out infinite alternate;
}

.party-lights span:nth-child(1) { --spot: #10b981; --drift: 15s; left: -15vmax; top: -10vmax; }
.party-lights span:nth-child(2) { --spot: #ec4899; --drift: 19s; right: -20vmax; top: 5vmax; animation-delay: -6s; }
.party-lights span:nth-child(3) { --spot: #3b82f6; --drift: 22s; left: 10vmax; bottom: -25vmax; animation-delay: -11s; }
.party-lights span:nth-child(4) { --spot: #f59e0b; --drift: 17s; right: 5vmax; bottom: -20vmax; animation-delay: -3s; }

@keyframes party-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(18vw, 12vh) scale(1.15); }
    100% { transform: translate(-12vw, 22vh) scale(0.9); }
}

/* The mirror ball, hanging from under the navbar near the credits: 40px in
   from the right edge of the 1140px page column, so it stays with the page on
   wide screens. Narrower screens have a narrower column, and 7% of the width
   takes over there. */
.party-ball-wrap {
    position: fixed;
    top: 81px;
    right: max(7%, calc((100% - 1140px) / 2 + 40px));
    z-index: 35;
    pointer-events: none;
    animation: party-sway 5s ease-in-out infinite alternate;
    transform-origin: top center;
}

.party-ball-wrap::before {
    content: '';
    display: block;
    width: 2px;
    height: 34px;
    margin: 0 auto;
    background: #adb5bd;
}

.party-ball {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 5%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(90deg, rgba(17, 24, 39, 0.6) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(rgba(17, 24, 39, 0.6) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(135deg, #f3f4f6, #9ca3af 30%, #e5e7eb 50%, #6b7280 70%, #d1d5db);
    box-shadow: 0 0 22px 2px rgba(255, 255, 255, 0.35), inset -9px -11px 18px rgba(0, 0, 0, 0.5);
    animation: party-spin 3s linear infinite;
    transition: box-shadow 0.12s ease-out;
}

.party-beat .party-ball {
    box-shadow: 0 0 34px 6px rgba(255, 255, 255, 0.5), inset -9px -11px 18px rgba(0, 0, 0, 0.5);
}

@keyframes party-spin {
    to { background-position: 0 0, 64px 0, 64px 0, 0 0; }
}

@keyframes party-sway {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}

/* The bar: the one part of the party you can click. */
.party-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    /* Over the page, under Bootstrap's modals (1040+). */
    z-index: 1020;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 8px 8px 8px 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.97);
    color: #212529;
    box-shadow: 0 0 18px 2px var(--party-glow);
    font-size: 14px;
    white-space: nowrap;
    animation: party-glow-cycle 8s linear infinite;
}

.party-bar-title {
    font-weight: 700;
}

.party-bar-button {
    padding: 4px 12px;
    border: 0;
    border-radius: 9999px;
    background: #e9ecef;
    color: #212529;
    cursor: pointer;
}

.party-bar-button:hover {
    background: #dee2e6;
}

.party-bar-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.35);
}

.party-bar-button-main {
    background: #2196f3;
    color: #fff;
    font-weight: 700;
}

.party-bar-button-main:hover {
    background: #0c83e2;
}

/* On phones the site's round button sits in the bottom-right corner, so the
   bar moves left, clear of it, and keeps just the ball for a title. */
@media (max-width: 639px) {
    .party-bar {
        left: 16px;
        transform: none;
        max-width: calc(100vw - 104px);
        gap: 8px;
        padding-left: 12px;
    }

    .party-bar-title-text {
        display: none;
    }
}

/* Falling confetti, added from script. */
.party-confetti {
    position: fixed;
    top: -40px;
    z-index: 35;
    pointer-events: none;
    font-size: 22px;
    line-height: 1;
    will-change: transform, opacity;
}

/* The game cards and the logo join in. */
.party-on {
    animation: party-glow-cycle 8s linear infinite;
}

.party-on .game-card {
    box-shadow: 0 0 12px 2px var(--party-glow) !important;
}

.party-on .logo-main {
    animation: party-wiggle 2.4s ease-in-out infinite;
}

@keyframes party-wiggle {
    0%, 70%, 100% { transform: rotate(0deg); }
    78% { transform: rotate(-6deg); }
    86% { transform: rotate(6deg); }
    94% { transform: rotate(-3deg); }
}

/* Themes (App\Models\Party::THEMES). The disco colours above are the
   default; these swap the colours and what hangs from the navbar. */

@keyframes party-glow-christmas {
    0%   { --party-glow: #ef4444; }
    33%  { --party-glow: #22c55e; }
    66%  { --party-glow: #facc15; }
    100% { --party-glow: #ef4444; }
}

@keyframes party-glow-halloween {
    0%   { --party-glow: #f97316; }
    50%  { --party-glow: #a855f7; }
    100% { --party-glow: #f97316; }
}

.party-on-christmas,
.party-theme-christmas .party-bar {
    animation-name: party-glow-christmas;
}

.party-on-halloween,
.party-theme-halloween .party-bar {
    animation-name: party-glow-halloween;
}

.party-theme-christmas .party-lights span:nth-child(1) { --spot: #ef4444; }
.party-theme-christmas .party-lights span:nth-child(2) { --spot: #22c55e; }
.party-theme-christmas .party-lights span:nth-child(3) { --spot: #facc15; }
.party-theme-christmas .party-lights span:nth-child(4) { --spot: #bae6fd; }

.party-theme-halloween .party-lights span:nth-child(1) { --spot: #f97316; }
.party-theme-halloween .party-lights span:nth-child(2) { --spot: #a855f7; }
.party-theme-halloween .party-lights span:nth-child(3) { --spot: #84cc16; }
.party-theme-halloween .party-lights span:nth-child(4) { --spot: #7c2d12; }

/* A red Christmas bauble with a gold cap. */
.party-bauble {
    position: relative;
    width: 56px;
    height: 56px;
    margin-top: 10px;
    border-radius: 9999px;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0 6%, rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 50% 55%, #ef4444, #991b1b 75%);
    box-shadow: 0 0 20px 2px rgba(239, 68, 68, 0.45), inset -8px -10px 16px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.12s ease-out;
}

.party-bauble::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 16px;
    height: 12px;
    margin-left: -8px;
    border-radius: 3px 3px 2px 2px;
    background: linear-gradient(90deg, #a16207, #facc15, #a16207);
}

.party-beat .party-bauble {
    box-shadow: 0 0 32px 6px rgba(250, 204, 21, 0.55), inset -8px -10px 16px rgba(0, 0, 0, 0.35);
}

/* A spider letting itself down on its thread and climbing back up. The
   thread is long and starts under the navbar, so only its lower end shows. */
.party-theme-halloween .party-ball-wrap {
    top: 0;
    animation: party-spider-drop 7s ease-in-out infinite alternate;
    transform-origin: top center;
}

.party-theme-halloween .party-ball-wrap::before {
    height: 150px;
    width: 1px;
    background: rgba(108, 117, 125, 0.6);
}

.party-spider {
    margin-top: -6px;
    font-size: 40px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
    transition: filter 0.12s ease-out;
}

.party-beat .party-spider {
    filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.9));
}

@keyframes party-spider-drop {
    0%   { transform: translateY(-40px); }
    60%  { transform: translateY(60px); }
    100% { transform: translateY(40px); }
}

@keyframes party-glow-valentine {
    0%   { --party-glow: #ec4899; }
    50%  { --party-glow: #ef4444; }
    100% { --party-glow: #ec4899; }
}

@keyframes party-glow-alien {
    0%   { --party-glow: #84cc16; }
    33%  { --party-glow: #22d3ee; }
    66%  { --party-glow: #a855f7; }
    100% { --party-glow: #84cc16; }
}

.party-on-valentine,
.party-theme-valentine .party-bar {
    animation-name: party-glow-valentine;
}

.party-on-alien,
.party-theme-alien .party-bar {
    animation-name: party-glow-alien;
}

.party-theme-valentine .party-lights span:nth-child(1) { --spot: #ec4899; }
.party-theme-valentine .party-lights span:nth-child(2) { --spot: #f43f5e; }
.party-theme-valentine .party-lights span:nth-child(3) { --spot: #f9a8d4; }
.party-theme-valentine .party-lights span:nth-child(4) { --spot: #a855f7; }

.party-theme-alien .party-lights span:nth-child(1) { --spot: #84cc16; }
.party-theme-alien .party-lights span:nth-child(2) { --spot: #22d3ee; }
.party-theme-alien .party-lights span:nth-child(3) { --spot: #a855f7; }
.party-theme-alien .party-lights span:nth-child(4) { --spot: #4ade80; }

/* Winter is only the snow: the game cards and the logo stay as they are,
   and the bar gets a cool blue glow. */
.party-on-winter {
    animation: none;
}

.party-on-winter .game-card {
    box-shadow: none !important;
}

.party-on-winter .logo-main {
    animation: none;
}

.party-theme-winter .party-bar {
    animation: none;
    box-shadow: 0 0 18px 2px rgba(186, 230, 253, 0.45);
}

/* A heart that beats with the music. */
.party-heart {
    margin-top: -4px;
    font-size: 44px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.8));
    transition: transform 0.12s ease-out;
}

.party-beat .party-heart {
    transform: scale(1.15);
}

/* A UFO hovering from side to side with its tractor beam on. It has no
   string to hang from. */
.party-theme-alien .party-ball-wrap {
    top: 76px;
    animation: party-hover 6s ease-in-out infinite alternate;
}

.party-theme-alien .party-ball-wrap::before {
    display: none;
}

.party-ufo {
    position: relative;
    font-size: 52px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 0 8px rgba(132, 204, 22, 0.7));
    animation: party-bob 1.6s ease-in-out infinite alternate;
}

.party-ufo::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    width: 90px;
    height: 150px;
    margin-left: -45px;
    background: linear-gradient(rgba(163, 230, 53, 0.45), rgba(163, 230, 53, 0));
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    transition: opacity 0.12s ease-out;
    opacity: 0.7;
}

.party-beat .party-ufo::after {
    opacity: 1;
}

@keyframes party-hover {
    from { transform: translateX(-60px); }
    to   { transform: translateX(40px); }
}

@keyframes party-bob {
    from { transform: translateY(0); }
    to   { transform: translateY(8px); }
}

/* Pride Month: the rainbow, in the lights, the glow and the bar's name. */
@keyframes party-glow-pride {
    0%    { --party-glow: #ef4444; }
    16.6% { --party-glow: #f97316; }
    33.3% { --party-glow: #facc15; }
    50%   { --party-glow: #22c55e; }
    66.6% { --party-glow: #3b82f6; }
    83.3% { --party-glow: #a855f7; }
    100%  { --party-glow: #ef4444; }
}

.party-on-pride,
.party-theme-pride .party-bar {
    animation-name: party-glow-pride;
}

.party-theme-pride .party-lights span:nth-child(1) { --spot: #ef4444; }
.party-theme-pride .party-lights span:nth-child(2) { --spot: #facc15; }
.party-theme-pride .party-lights span:nth-child(3) { --spot: #22c55e; }
.party-theme-pride .party-lights span:nth-child(4) { --spot: #6366f1; }

.party-theme-pride .party-bar-title-text {
    background: linear-gradient(90deg, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #9333ea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* The flag hangs from its string and flutters. */
.party-flag {
    margin-top: -4px;
    font-size: 48px;
    line-height: 1;
    text-align: center;
    transform-origin: top center;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.15));
    animation: party-flutter 1.4s ease-in-out infinite alternate;
    transition: filter 0.12s ease-out;
}

.party-beat .party-flag {
    filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.8));
}

@keyframes party-flutter {
    from { transform: skewY(-4deg) rotate(-3deg); }
    to   { transform: skewY(4deg) rotate(3deg); }
}

/* New Year's Eve: gold and silver, fireworks, and the ball drop. */
@keyframes party-glow-newyear {
    0%   { --party-glow: #facc15; }
    33%  { --party-glow: #e5e7eb; }
    66%  { --party-glow: #a855f7; }
    100% { --party-glow: #facc15; }
}

.party-on-newyear,
.party-theme-newyear .party-bar {
    animation-name: party-glow-newyear;
}

.party-theme-newyear .party-lights span:nth-child(1) { --spot: #facc15; }
.party-theme-newyear .party-lights span:nth-child(2) { --spot: #e5e7eb; }
.party-theme-newyear .party-lights span:nth-child(3) { --spot: #a855f7; }
.party-theme-newyear .party-lights span:nth-child(4) { --spot: #3b82f6; }

.party-ball-gold {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 5%, rgba(255, 255, 255, 0) 24%),
        linear-gradient(90deg, rgba(17, 24, 39, 0.55) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(rgba(17, 24, 39, 0.55) 1px, transparent 1px) 0 0 / 8px 8px,
        linear-gradient(135deg, #fef9c3, #ca8a04 30%, #fde047 50%, #a16207 70%, #fcd34d);
    box-shadow: 0 0 24px 4px rgba(250, 204, 21, 0.5), inset -9px -11px 18px rgba(0, 0, 0, 0.45);
}

.party-beat .party-ball-gold {
    box-shadow: 0 0 36px 8px rgba(250, 204, 21, 0.7), inset -9px -11px 18px rgba(0, 0, 0, 0.45);
}

/* The ball drop: down the string and back, slowly, all party long. */
.party-theme-newyear .party-ball-wrap {
    animation: party-ball-drop 12s ease-in-out infinite alternate;
}

@keyframes party-ball-drop {
    from { transform: translateY(0); }
    to   { transform: translateY(70px); }
}

/* A firework spark, added from script. */
.party-spark {
    position: fixed;
    z-index: 34;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 9999px;
    pointer-events: none;
    will-change: transform, opacity;
}

/* The last ten seconds, and "Happy New Year!" at midnight. It changes once
   a second, softly - no flashing. */
.party-countdown {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1020;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    font-weight: 800;
    line-height: 1;
    color: #1f2937;
    text-shadow: 0 0 24px rgba(250, 204, 21, 0.9), 0 0 60px rgba(168, 85, 247, 0.6);
    white-space: nowrap;
}

.party-countdown-number {
    font-size: 28vh;
}

.party-countdown-message {
    font-size: min(12vw, 14vh);
}

.party-countdown > span {
    display: inline-block;
    animation: party-count-in 0.45s ease-out;
}

@keyframes party-count-in {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .party-lights,
    .party-ball-wrap {
        display: none !important;
    }

    .party-on,
    .party-bar,
    .party-theme-christmas .party-bar,
    .party-theme-halloween .party-bar,
    .party-theme-valentine .party-bar,
    .party-theme-alien .party-bar,
    .party-theme-pride .party-bar,
    .party-theme-newyear .party-bar,
    .party-countdown > span,
    .party-ufo,
    .party-flag,
    .party-on .logo-main {
        animation: none;
    }
}