/* PlayPredict Custom Styles */

/* Bet slip animations */
.bet-slip-enter {
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Odds button styles */
.odds-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid #e5e7eb;
    transition: all 150ms;
    cursor: pointer;
    user-select: none;
}

.dark .odds-btn {
    border-color: #4b5563;
}

.odds-btn:hover {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.dark .odds-btn:hover {
    background-color: rgba(59, 130, 246, 0.2);
}

.odds-btn.selected {
    border-color: #3b82f6;
    background-color: #3b82f6;
    color: white;
}

/* Card styles */
.card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
}

.dark .card {
    background-color: #1f2937;
    border-color: #374151;
}

/* Widget styles */
.widget {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    padding: 1rem;
}

.dark .widget {
    background-color: #1f2937;
    border-color: #374151;
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.dark .badge-pending {
    background-color: rgba(146, 64, 14, 0.3);
    color: #fbbf24;
}

.badge-won {
    background-color: #d1fae5;
    color: #065f46;
}

.dark .badge-won {
    background-color: rgba(6, 95, 70, 0.3);
    color: #34d399;
}

.badge-lost {
    background-color: #fee2e2;
    color: #991b1b;
}

.dark .badge-lost {
    background-color: rgba(153, 27, 27, 0.3);
    color: #f87171;
}

.badge-void {
    background-color: #f3f4f6;
    color: #1f2937;
}

.dark .badge-void {
    background-color: #374151;
    color: #9ca3af;
}

/* Loading spinner */
.spinner {
    animation: spin 1s linear infinite;
    height: 1.25rem;
    width: 1.25rem;
    border: 2px solid #3b82f6;
    border-top-color: transparent;
    border-radius: 9999px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* htmx loading indicator */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

.dark ::-webkit-scrollbar-track {
    background-color: #1f2937;
}

::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

/* ============================================================
   XP Bar Styles (Story 04.16)
   ============================================================ */

/* XP Bar shimmer animation */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

.xp-bar-widget .animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Progress bar glow on level up */
.xp-progress-fill.level-up {
    box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.6);
}

/* XP gain floating animation */
@keyframes xpGain {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
}

.xp-gain-animation {
    animation: xpGain 1s ease-out forwards;
}

/* Level badge pulse on hover */
.level-badge:hover > div:first-child {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Progress track subtle inner shadow */
.xp-progress-track {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark .xp-progress-track {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Gradient animation for max level */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.xp-progress-fill.max-level {
    background: linear-gradient(90deg, #ffd700, #ff6b6b, #c678dd, #61afef, #ffd700);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

/* ============================================================
   Level Progress Styles (Story 04.17)
   ============================================================ */

.level-progress-widget .level-circle {
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.level-progress-widget .level-circle:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* Max level gradient for progress bars */
.max-level-gradient {
    background: linear-gradient(90deg, #ffd700, #ff6b6b, #c678dd, #61afef, #ffd700);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

/* ============================================================
   Achievement Styles (Story 04.18)
   ============================================================ */

.achievement-card {
    position: relative; /* Required for ::after pseudo-element positioning */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.achievement-card:hover {
    transform: translateY(-2px);
}

/* Achievement locked state */
.achievement-locked {
    filter: saturate(0.5);
}

.achievement-locked:hover {
    filter: saturate(0.7);
}

/* Tier badge glow effect */
.achievement-tier-badge {
    position: relative;
}

/* Line clamp for descriptions */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Achievement unlock animation */
@keyframes achievementUnlock {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.achievement-unlocked {
    animation: achievementUnlock 0.5s ease-out;
}

/* Tier colors */
.tier-bronze { color: #CD7F32; }
.tier-silver { color: #C0C0C0; }
.tier-gold { color: #FFD700; }
.tier-platinum { color: #E5E4E2; }
.tier-diamond { color: #B9F2FF; }

/* Progress bar tier colors */
.progress-bronze { background: linear-gradient(90deg, #CD7F32, #8B4513); }
.progress-silver { background: linear-gradient(90deg, #C0C0C0, #A9A9A9); }
.progress-gold { background: linear-gradient(90deg, #FFD700, #FFA500); }
.progress-platinum { background: linear-gradient(90deg, #E5E4E2, #00CED1); }
.progress-diamond { background: linear-gradient(90deg, #B9F2FF, #9370DB); }

/* Achievement card hover effect */
.achievement-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
}

.achievement-card:hover::after {
    opacity: 1;
}

/* Grayscale for locked achievements */
.grayscale {
    filter: grayscale(100%);
}

/* ============================================================
   Daily Wheel Styles (Story 04.22-04.23)
   ============================================================ */

.wheel-stage {
    position: relative;
    width: 220px;
    height: 220px;
    display: grid;
    place-items: center;
}

@media (min-width: 1024px) {
    .wheel-stage {
        width: 240px;
        height: 240px;
    }
}

.wheel {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    border: 6px solid #e5e7eb;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    transition: transform 4s cubic-bezier(0.22, 0.61, 0.36, 1);
    background: conic-gradient(#e5e7eb 0deg, #e5e7eb 360deg);
}

.dark .wheel {
    border-color: #374151;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid #ef4444;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.wheel-center {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: #ffffff;
    border: 4px solid #e5e7eb;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.dark .wheel-center {
    background: #111827;
    border-color: #374151;
}

/* ============================================================
   Story 04.34: Mobile Responsive Styles for New Components
   ============================================================ */

/* Referral Stats Component */
.referral-stats {
    width: 100%;
}

.referral-stats .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .referral-stats .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Referral List Component */
.referral-list {
    width: 100%;
    overflow-x: auto;
}

.referral-list table {
    min-width: 600px;
}

@media (max-width: 768px) {
    .referral-list table {
        font-size: 0.875rem;
    }

    .referral-list th,
    .referral-list td {
        padding: 0.5rem;
    }
}

/* Daily Login Button */
.daily-login-button {
    width: 100%;
}

@media (max-width: 640px) {
    .daily-login-button .btn-claim {
        width: 100%;
        padding: 0.75rem;
    }
}

/* Level Up Modal */
.level-up-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.level-up-modal .modal-content {
    max-width: 28rem;
    width: 100%;
}

@media (max-width: 640px) {
    .level-up-modal .modal-content {
        max-width: 100%;
        margin: 0 1rem;
    }
}

/* Achievement Unlock Popup */
.achievement-unlock-popup {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    max-width: 20rem;
}

@media (max-width: 640px) {
    .achievement-unlock-popup {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }
}

/* Leaderboard Rewards */
.leaderboard-rewards {
    width: 100%;
}

.leaderboard-rewards .rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .leaderboard-rewards .rewards-grid {
        grid-template-columns: 1fr;
    }
}

.leaderboard-rewards .reward-card {
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
}

.dark .leaderboard-rewards .reward-card {
    background: #1f2937;
    border-color: #374151;
}

/* Custom Referral Code */
.custom-referral-code {
    width: 100%;
}

.custom-referral-code .code-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .custom-referral-code .code-display {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-referral-code .btn-customize {
        width: 100%;
    }
}

/* Wheel Leaderboard */
.wheel-leaderboard {
    width: 100%;
}

.wheel-leaderboard .winners-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wheel-leaderboard .winner-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
}

.dark .wheel-leaderboard .winner-item {
    background: #1f2937;
    border-color: #374151;
}

@media (max-width: 640px) {
    .wheel-leaderboard .winner-item {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .wheel-leaderboard .winner-rewards {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
}

/* Referral Code Application Modal */
.referral-code-prompt {
    position: fixed;
    inset: 0;
    z-index: 50;
}

@media (max-width: 640px) {
    .referral-code-prompt .bg-white {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}

/* Share Buttons (Story 04.27) */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-buttons button {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
}

@media (max-width: 640px) {
    .share-buttons {
        flex-direction: column;
    }

    .share-buttons button {
        width: 100%;
        min-width: auto;
    }
}

/* Loading States */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.dark .spinner {
    border-color: #374151;
    border-top-color: #60a5fa;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error States */
.error-state {
    padding: 1rem;
    border-radius: 0.5rem;
    background: #fef2f2;
    color: #991b1b;
    text-align: center;
}

.dark .error-state {
    background: rgba(153, 27, 27, 0.2);
    color: #fca5a5;
}

/* Empty States */
.empty-state {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

.dark .empty-state {
    color: #9ca3af;
}

/* Responsive Typography */
@media (max-width: 640px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }
}

/* Responsive Spacing */
@media (max-width: 640px) {
    .widget {
        padding: 0.75rem;
    }

    .space-y-6 > * + * {
        margin-top: 1rem;
    }
}

/* Button Responsive Styles */
@media (max-width: 640px) {
    .btn-claim,
    .btn-submit,
    .btn-retry {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* Table Responsive Wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table-responsive table {
        font-size: 0.875rem;
    }
}

/* Modal Responsive Adjustments */
@media (max-width: 640px) {
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Grid Responsive Adjustments */
@media (max-width: 1024px) {
    .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 640px) {
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Confetti Animation for Level Up */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confetti-fall 3s linear infinite;
}

/* Pulse Animation for Notifications */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Slide-in Animation for Popups */
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}

/* Fade-in Animation */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in 0.3s ease-in;
}

/* Accessibility: Focus Styles */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .share-buttons,
    .btn-claim,
    .btn-submit,
    .btn-retry,
    .modal-content {
        display: none;
    }
}

/* ============================
   Sprint 6: Frontend Polish
   ============================ */

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 24rem;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.toast.visible {
    transform: translateX(0);
    opacity: 1;
}

.toast-success {
    background: #ecfdf5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.toast-error {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.toast-warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.toast-info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

.dark .toast-success { background: #064e3b; color: #d1fae5; }
.dark .toast-error { background: #7f1d1d; color: #fecaca; }
.dark .toast-warning { background: #78350f; color: #fde68a; }
.dark .toast-info { background: #1e3a5f; color: #bfdbfe; }

.toast-close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

/* --- Skeleton Loaders --- */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}

.dark .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text-sm {
    height: 0.75rem;
    width: 60%;
}

.skeleton-card {
    height: 8rem;
    border-radius: 0.75rem;
}

.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
}

.skeleton-btn {
    height: 2.5rem;
    width: 6rem;
    border-radius: 0.5rem;
}

/* --- Empty States --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.dark .empty-state-icon {
    color: #6b7280;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.dark .empty-state-title {
    color: #e5e7eb;
}

.empty-state-description {
    font-size: 0.875rem;
    color: #6b7280;
    max-width: 20rem;
}

/* --- Inline Spinner --- */
.spinner-inline {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* --- Odds Change Animations --- */
.odds-up {
    animation: odds-flash-up 0.5s ease;
    color: #16a34a !important;
}

.odds-down {
    animation: odds-flash-down 0.5s ease;
    color: #dc2626 !important;
}

@keyframes odds-flash-up {
    0% { background-color: rgba(22, 163, 74, 0.3); }
    100% { background-color: transparent; }
}

@keyframes odds-flash-down {
    0% { background-color: rgba(220, 38, 38, 0.3); }
    100% { background-color: transparent; }
}

/* --- Market Suspended Overlay --- */
.market-suspended {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.market-suspended::after {
    content: 'SUSPENDED';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.625rem;
    font-weight: 700;
    color: #dc2626;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --- Page Transition --- */
.htmx-swapping {
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 0.15s ease;
}