/*
Main stylesheet for the game.
All styling is now handled by Tailwind CSS utility classes via CDN in base.html.
Custom keyframes or components can be placed here if Tailwind classes aren't sufficient.
*/

:root {
    --theme-ink: #f5efe2;
    --theme-muted: #a1a8bb;
    --theme-border: rgba(206, 179, 123, 0.18);
    --theme-card: rgba(12, 19, 34, 0.74);
    --theme-card-strong: rgba(15, 24, 42, 0.92);
    --theme-panel: rgba(18, 29, 49, 0.82);
    --theme-primary: #b89658;
    --theme-primary-light: #d5bd89;
    --theme-accent: #7c8db8;
    --theme-accent-light: #9eadd3;
    --theme-danger: #f08a8a;
}

body {
    -webkit-tap-highlight-color: transparent; /* better for mobile */
    background:
        radial-gradient(circle at top right, rgba(212, 176, 110, 0.16), transparent 24%),
        radial-gradient(circle at top left, rgba(94, 117, 176, 0.15), transparent 22%),
        linear-gradient(135deg, #060b16 0%, #0c1628 45%, #101d34 100%);
    color: var(--theme-ink);
}

body::before,
body::after {
    content: "";
    position: fixed;
    border-radius: 9999px;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

body::before {
    width: 280px;
    height: 280px;
    top: -80px;
    right: -60px;
    background: rgba(212, 176, 110, 0.24);
}

body::after {
    width: 340px;
    height: 340px;
    left: -120px;
    bottom: -140px;
    background: rgba(95, 118, 177, 0.2);
}

.theme-card {
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    box-shadow: 0 30px 70px rgba(3, 6, 14, 0.45);
    backdrop-filter: blur(18px);
}

.theme-card-strong {
    background: var(--theme-card-strong);
    border: 1px solid rgba(203, 176, 121, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.theme-panel {
    background: var(--theme-panel);
    border: 1px solid rgba(191, 165, 114, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.theme-glow-top {
    background: radial-gradient(circle, rgba(212, 176, 110, 0.18), rgba(212, 176, 110, 0));
}

.theme-glow-bottom {
    background: radial-gradient(circle, rgba(95, 118, 177, 0.18), rgba(95, 118, 177, 0));
}

.theme-title {
    color: var(--theme-ink);
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.theme-muted {
    color: var(--theme-muted);
}

.theme-input {
    background: rgba(14, 24, 42, 0.92);
    border: 1px solid rgba(186, 160, 111, 0.14);
    color: #f5efe2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.theme-input::placeholder {
    color: #73819b;
}

.theme-input:focus {
    outline: none;
    border-color: rgba(212, 176, 110, 0.54);
    box-shadow: 0 0 0 3px rgba(212, 176, 110, 0.12);
}

.theme-tab-strip {
    background: rgba(10, 17, 31, 0.72);
    border: 1px solid rgba(183, 156, 108, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.theme-tab-btn {
    color: #9ba7bc;
}

.theme-tab-btn.active {
    background: linear-gradient(135deg, #9f8047, #ccb07b);
    color: #090f1b;
    box-shadow: 0 12px 24px rgba(185, 150, 88, 0.22);
}

.theme-btn-primary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    color: #0c1424;
    box-shadow: 0 18px 30px rgba(184, 150, 88, 0.24);
}

.theme-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 34px rgba(184, 150, 88, 0.28);
}

.theme-btn-accent {
    background: linear-gradient(135deg, #283550, #3b4a6b);
    color: #f5efe2;
    box-shadow: 0 18px 30px rgba(59, 74, 107, 0.28);
}

.theme-btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 34px rgba(59, 74, 107, 0.34);
}

.theme-btn-outline {
    background: rgba(18, 27, 45, 0.72);
    border: 1px solid rgba(183, 156, 108, 0.16);
    color: var(--theme-ink);
}

.theme-btn-outline:hover {
    background: rgba(27, 39, 62, 0.86);
}

.theme-btn-danger {
    background: rgba(34, 20, 30, 0.78);
    border: 1px solid rgba(240, 138, 138, 0.28);
    color: var(--theme-danger);
}

.theme-chip {
    background: rgba(18, 27, 45, 0.78);
    border: 1px solid rgba(183, 156, 108, 0.12);
    color: var(--theme-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.theme-chip-success {
    background: rgba(17, 44, 38, 0.88);
    border: 1px solid rgba(52, 211, 153, 0.18);
    color: #8ee6bf;
}

.theme-chip-info {
    background: rgba(22, 34, 60, 0.88);
    border: 1px solid rgba(125, 153, 223, 0.18);
    color: #b9c8f2;
}

.theme-chip-danger {
    background: rgba(52, 22, 28, 0.88);
    border: 1px solid rgba(240, 138, 138, 0.18);
    color: #f3b0b0;
}

.theme-spinner {
    border-color: rgba(148, 163, 184, 0.18);
    border-left-color: var(--theme-primary);
}

.leaderboard-row {
    position: relative;
    overflow: hidden;
}

.leaderboard-row::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.leaderboard-self {
    border-color: rgba(212, 176, 110, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(212, 176, 110, 0.14), 0 18px 32px rgba(3, 6, 14, 0.24);
    transform: scale(1.015);
}

.leaderboard-self::before {
    opacity: 1;
    background: linear-gradient(90deg, rgba(212, 176, 110, 0.08), rgba(212, 176, 110, 0));
}

.leaderboard-self::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 8px;
    width: 4px;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(212, 176, 110, 0.95), rgba(212, 176, 110, 0.2));
    box-shadow: 0 0 12px rgba(212, 176, 110, 0.28);
}

.leaderboard-self-name {
    color: #f6deb2;
}

.leaderboard-you-pill {
    background: rgba(212, 176, 110, 0.16);
    border: 1px solid rgba(212, 176, 110, 0.3);
    color: #f6deb2;
    box-shadow: 0 0 0 1px rgba(212, 176, 110, 0.08);
}

.leaderboard-first {
    border-color: rgba(212, 176, 110, 0.44) !important;
    box-shadow: 0 0 0 1px rgba(212, 176, 110, 0.16), 0 0 28px rgba(212, 176, 110, 0.12);
    animation: leaderboard-first-glow 2.4s ease-in-out infinite;
}

.leaderboard-first::before {
    opacity: 1;
    background: linear-gradient(120deg, rgba(212, 176, 110, 0.18), rgba(212, 176, 110, 0), rgba(212, 176, 110, 0.1));
    animation: leaderboard-first-shine 2.8s linear infinite;
}

.leaderboard-first-badge {
    position: relative;
    box-shadow: 0 0 18px rgba(212, 176, 110, 0.26);
    animation: leaderboard-crown-bounce 2s ease-in-out infinite;
}

.winner-spotlight {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212, 176, 110, 0.28);
    background:
        radial-gradient(circle at top, rgba(212, 176, 110, 0.16), transparent 58%),
        rgba(15, 24, 42, 0.92);
    box-shadow: 0 0 0 1px rgba(212, 176, 110, 0.08), 0 20px 44px rgba(3, 6, 14, 0.26);
}

.winner-spotlight::before {
    content: "";
    position: absolute;
    inset: -20% -30%;
    background: linear-gradient(110deg, transparent 35%, rgba(212, 176, 110, 0.22) 50%, transparent 65%);
    animation: leaderboard-first-shine 3.6s linear infinite;
    pointer-events: none;
}

.player-spotlight {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212, 176, 110, 0.26);
    background:
        linear-gradient(135deg, rgba(212, 176, 110, 0.1), rgba(212, 176, 110, 0.02)),
        rgba(15, 24, 42, 0.92);
    box-shadow: 0 18px 36px rgba(3, 6, 14, 0.24);
}

.player-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(212, 176, 110, 0.1), transparent 35%);
    pointer-events: none;
}

@keyframes leaderboard-first-glow {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 1px rgba(212, 176, 110, 0.16), 0 0 24px rgba(212, 176, 110, 0.1);
    }
    50% {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 0 0 1px rgba(212, 176, 110, 0.18), 0 0 34px rgba(212, 176, 110, 0.18);
    }
}

@keyframes leaderboard-first-shine {
    0% {
        transform: translateX(-60%);
    }
    100% {
        transform: translateX(60%);
    }
}

@keyframes leaderboard-crown-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.answer-effect-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

.answer-effect-overlay.correct {
    animation: answer-overlay-correct 1.35s ease-out forwards;
}

.answer-effect-overlay.wrong {
    animation: answer-overlay-wrong 1.25s ease-out forwards;
}

.answer-effect-flash {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    border-radius: 1.5rem;
    animation: answer-flash 1.05s ease-out forwards;
}

.answer-effect-flash.correct {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.28), rgba(16, 185, 129, 0));
}

.answer-effect-flash.wrong {
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.24), rgba(239, 68, 68, 0));
}

.answer-effect-badge {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    z-index: 4;
    transform: translateX(-50%) translateY(10px) scale(0.85);
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.02em;
    opacity: 0;
    color: white;
    animation: answer-badge 1.2s cubic-bezier(0.18, 0.88, 0.2, 1) forwards;
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.28);
}

.answer-effect-badge.correct {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.96), rgba(74, 222, 128, 0.9));
}

.answer-effect-badge.wrong {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.96), rgba(248, 113, 113, 0.92));
}

.answer-effect-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: answer-particle 1.2s ease-out forwards;
}

.answer-effect-particle.correct {
    background: linear-gradient(135deg, #6ee7b7, #10b981);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6);
}

.answer-effect-particle.wrong {
    background: linear-gradient(135deg, #fca5a5, #ef4444);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.55);
}

.answer-center-correct {
    animation: answer-correct-pop 1.1s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.answer-center-wrong {
    animation: answer-wrong-shake 900ms ease-out;
}

.answer-petals-correct > div > div {
    animation: answer-petal-celebrate 1.1s ease-out;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.4);
}

.answer-petals-wrong > div > div {
    animation: answer-petal-stumble 950ms ease-out;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.28);
}

@keyframes answer-flash {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@keyframes answer-badge {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px) scale(0.78);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes answer-particle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--tx, 0px)),
                calc(-50% + var(--ty, 0px))
            )
            scale(1.4);
    }
}

@keyframes answer-overlay-correct {
    0% {
        background: radial-gradient(circle at center, rgba(16, 185, 129, 0.22), transparent 60%);
    }
    100% {
        background: radial-gradient(circle at center, rgba(16, 185, 129, 0), transparent 70%);
    }
}

@keyframes answer-overlay-wrong {
    0% {
        background: radial-gradient(circle at center, rgba(239, 68, 68, 0.18), transparent 60%);
    }
    100% {
        background: radial-gradient(circle at center, rgba(239, 68, 68, 0), transparent 70%);
    }
}

@keyframes answer-correct-pop {
    0% {
        transform: scale(0.9);
    }
    45% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.05);
    }
}

@keyframes answer-wrong-shake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(8px);
    }
    60% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(6px);
    }
}

@keyframes answer-petal-celebrate {
    0% {
        transform: scale(1);
        filter: saturate(1);
    }
    35% {
        transform: scale(1.08);
        filter: saturate(1.35);
    }
    100% {
        transform: scale(1.02);
        filter: saturate(1.1);
    }
}

@keyframes answer-petal-stumble {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-3deg) scale(0.98);
    }
    50% {
        transform: rotate(3deg) scale(1.01);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}