/* Lawless Activity Tracker Styles */

body {
    background: linear-gradient(180deg, rgba(18,23,28,.75), transparent),
                url('https://www.destinythegame.com/content/dam/destiny/year-of-prophecy/key-art/year-of-prophecy/Year-Of_Prophecy_Key_Art_SIMPLE_KZ-JB_1920x11801.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: NeueHaasGroteskTextPro, -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.activity-card {
    background: rgba(35,41,47,.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(183, 140, 37, 0.2);
    transition: all 0.3s ease;
}

.activity-card:hover {
    border-color: #b78c25;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(183, 140, 37, 0.2);
}

.target-card {
    border: 2px solid #b78c25;
    background: rgba(183, 140, 37, 0.1);
    backdrop-filter: blur(10px);
}

.activity-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
}

.progress-bar {
    background: linear-gradient(90deg, #b78c25 0%, #b78c25 var(--progress, 0%), rgba(183, 140, 37, 0.2) var(--progress, 0%), rgba(183, 140, 37, 0.2) 100%);
    height: 4px;
}

/* Enhanced button styles */
button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Smooth transitions for button state changes */
button {
    transition: all 0.2s ease-in-out;
}

/* Pulsing animation for loading state */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

/* Grid Cards */
.grid-card {
    background: rgba(35,41,47,.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(183, 140, 37, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.grid-card:hover {
    border-color: #b78c25;
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(183, 140, 37, 0.3);
}

.grid-card.target-card {
    border: 2px solid #b78c25;
    background: rgba(183, 140, 37, 0.1);
}

.grid-card-image {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.grid-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
}

.grid-card-content {
    position: relative;
    z-index: 1;
}

/* View Toggle Buttons */
.view-toggle-active {
    background-color: #b78c25 !important;
    color: #14191e !important;
}

.view-toggle-inactive {
    background-color: transparent !important;
    color: #f5f5f5 !important;
}

.view-toggle-inactive:hover {
    background-color: rgba(183, 140, 37, 0.2) !important;
}
.destiny-spinner {
    position: relative;
    width: 32px;
    height: 32px;
    pointer-events: none;
    opacity: 0.7;
    transition: all 250ms;
}

.destiny-spinner svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Destiny Spinner Keyframes */
@keyframes destinySpinnerStep0 {
    0% { opacity: 0; }
    14.2857142857% { opacity: 1; }
    28.5714285714% { opacity: 0; }
    42.8571428571% { opacity: 0; }
    57.1428571429% { opacity: 0; }
    71.4285714286% { opacity: 0; }
    85.7142857143% { opacity: 0; }
    to { opacity: 0; }
}

@keyframes destinySpinnerStep1 {
    0% { opacity: 0; }
    14.2857142857% { opacity: 0; }
    28.5714285714% { opacity: 1; }
    42.8571428571% { opacity: 0; }
    57.1428571429% { opacity: 0; }
    71.4285714286% { opacity: 0; }
    85.7142857143% { opacity: 0; }
    to { opacity: 0; }
}

@keyframes destinySpinnerStep2 {
    0% { opacity: 0; }
    14.2857142857% { opacity: 0; }
    28.5714285714% { opacity: 0; }
    42.8571428571% { opacity: 1; }
    57.1428571429% { opacity: 0; }
    71.4285714286% { opacity: 0; }
    85.7142857143% { opacity: 0; }
    to { opacity: 0; }
}

@keyframes destinySpinnerStep3 {
    0% { opacity: 0; }
    14.2857142857% { opacity: 0; }
    28.5714285714% { opacity: 0; }
    42.8571428571% { opacity: 0; }
    57.1428571429% { opacity: 1; }
    71.4285714286% { opacity: 0; }
    85.7142857143% { opacity: 0; }
    to { opacity: 0; }
}

@keyframes destinySpinnerStep4 {
    0% { opacity: 0; }
    14.2857142857% { opacity: 0; }
    28.5714285714% { opacity: 0; }
    42.8571428571% { opacity: 0; }
    57.1428571429% { opacity: 0; }
    71.4285714286% { opacity: 1; }
    85.7142857143% { opacity: 0; }
    to { opacity: 0; }
}

@keyframes destinySpinnerStep5 {
    0% { opacity: 0; }
    14.2857142857% { opacity: 0; }
    28.5714285714% { opacity: 0; }
    42.8571428571% { opacity: 0; }
    57.1428571429% { opacity: 0; }
    71.4285714286% { opacity: 0; }
    85.7142857143% { opacity: 1; }
    to { opacity: 0; }
}

/* Outer animations (4s) */
.animate-destinySpinnerStep0-outer { animation: destinySpinnerStep0 4s linear infinite; }
.animate-destinySpinnerStep1-outer { animation: destinySpinnerStep1 4s linear infinite; }
.animate-destinySpinnerStep2-outer { animation: destinySpinnerStep2 4s linear infinite; }
.animate-destinySpinnerStep3-outer { animation: destinySpinnerStep3 4s linear infinite; }
.animate-destinySpinnerStep4-outer { animation: destinySpinnerStep4 4s linear infinite; }
.animate-destinySpinnerStep5-outer { animation: destinySpinnerStep5 4s linear infinite; }

/* Inner animations (2.2s) */
.animate-destinySpinnerStep0-inner { animation: destinySpinnerStep0 2.2s linear infinite; }
.animate-destinySpinnerStep1-inner { animation: destinySpinnerStep1 2.2s linear infinite; }
.animate-destinySpinnerStep2-inner { animation: destinySpinnerStep2 2.2s linear infinite; }
.animate-destinySpinnerStep3-inner { animation: destinySpinnerStep3 2.2s linear infinite; }
.animate-destinySpinnerStep4-inner { animation: destinySpinnerStep4 2.2s linear infinite; }
.animate-destinySpinnerStep5-inner { animation: destinySpinnerStep5 2.2s linear infinite; }