/* ============================================
   Hunt Dashboard — Scoped Styles
   All classes prefixed under .hunt-dashboard
   ============================================ */

:root {
    --color-background: #1a1410;
    --color-surface: #1a1410;
    --color-surface-bright: #3d3530;
    --color-surface-container: #28221d;
    --color-surface-container-low: #231d19;
    --color-surface-container-lowest: #120e0b;
    --color-surface-container-high: #332c26;
    --color-surface-container-highest: #3d3630;
    --color-surface-dim: #1a1410;
    --color-surface-variant: #3d3530;
    --color-on-surface: #e6ddd4;
    --color-on-surface-variant: #b5a695;
    --color-on-background: #e6ddd4;
    --color-primary: #e8c34a;
    --color-on-primary: #2c2100;
    --color-primary-container: #c9a635;
    --color-on-primary-container: #4a3b00;
    --color-primary-fixed: #f5da6e;
    --color-primary-fixed-dim: #d9b540;
    --color-on-primary-fixed: #1a1300;
    --color-on-primary-fixed-variant: #4a3b00;
    --color-secondary: #b4533a;
    --color-secondary-container: #7a2e1c;
    --color-on-secondary: #3a1208;
    --color-on-secondary-container: #e8a088;
    --color-secondary-fixed: #f0c0b0;
    --color-secondary-fixed-dim: #d48a74;
    --color-on-secondary-fixed: #2a0c04;
    --color-on-secondary-fixed-variant: #7a2e1c;
    --color-error: #e85a4a;
    --color-on-error: #4a1208;
    --color-error-container: #8a2012;
    --color-on-error-container: #f5b0a8;
    --color-tertiary: #7a9a7a;
    --color-tertiary-container: #4a6a4a;
    --color-tertiary-fixed: #b0d0b0;
    --color-tertiary-fixed-dim: #8ab08a;
    --color-on-tertiary: #1a2a1a;
    --color-on-tertiary-container: #3a4a3a;
    --color-on-tertiary-fixed: #0a1a0a;
    --color-on-tertiary-fixed-variant: #3a4a3a;
    --color-outline: #8a7a6a;
    --color-outline-variant: #5a4a3a;
    --color-inverse-surface: #e6ddd4;
    --color-inverse-primary: #8a7020;
    --color-inverse-on-surface: #2a2420;
    --color-surface-tint: #d9b540;
    --font-display-lg: "Libre Caslon Text", serif;
    --font-body-md: "Work Sans", sans-serif;
    --font-label-sm: "Geist", sans-serif;
    --font-ui-button: "Work Sans", sans-serif;
    --font-headline-lg: "Libre Caslon Text", serif;
    --fs-display-lg: 48px;
    --lh-display-lg: 56px;
    --ls-display-lg: -0.02em;
    --fw-display-lg: 700;
    --fs-headline-lg: 32px;
    --lh-headline-lg: 40px;
    --fw-headline-lg: 600;
    --fs-body-md: 16px;
    --lh-body-md: 24px;
    --fw-body-md: 400;
    --fs-label-sm: 12px;
    --lh-label-sm: 16px;
    --ls-label-sm: 0.05em;
    --fw-label-sm: 600;
    --fs-ui-button: 14px;
    --lh-ui-button: 20px;
    --fw-ui-button: 700;
    --radius: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
}

/* ============================================
   Base wrapper — all dashboard styles scoped here
   ============================================ */

.hunt-dashboard {
    background-color: var(--color-background);
    color: var(--color-on-surface);
    font-family: var(--font-body-md);
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
}

.hunt-dashboard ::selection {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* ============================================
   Utility classes — Hunt design system tokens
   Scoped so they don't leak to other pages
   ============================================ */

.hunt-dashboard .bg-background {
    background-color: var(--color-background);
}
.hunt-dashboard .bg-surface-container {
    background-color: var(--color-surface-container);
}
.hunt-dashboard .bg-surface-container-low {
    background-color: var(--color-surface-container-low);
}
.hunt-dashboard .bg-surface-container-lowest {
    background-color: var(--color-surface-container-lowest);
}
.hunt-dashboard .bg-surface-container-high {
    background-color: var(--color-surface-container-high);
}
.hunt-dashboard .bg-surface-container-low\/40 {
    background-color: color-mix(
        in srgb,
        var(--color-surface-container-low) 40%,
        transparent
    );
}
.hunt-dashboard .bg-surface-container\/40 {
    background-color: color-mix(
        in srgb,
        var(--color-surface-container) 40%,
        transparent
    );
}
.hunt-dashboard .bg-surface-container-lowest\/60 {
    background-color: color-mix(
        in srgb,
        var(--color-surface-container-lowest) 60%,
        transparent
    );
}
.hunt-dashboard .bg-background\/80 {
    background-color: color-mix(
        in srgb,
        var(--color-background) 80%,
        transparent
    );
}
.hunt-dashboard .bg-background\/40 {
    background-color: color-mix(
        in srgb,
        var(--color-background) 40%,
        transparent
    );
}
.hunt-dashboard .bg-primary {
    background-color: var(--color-primary);
}
.hunt-dashboard .bg-primary\/5 {
    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.hunt-dashboard .bg-primary\/20 {
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.hunt-dashboard .bg-secondary\/20 {
    background-color: color-mix(
        in srgb,
        var(--color-secondary) 20%,
        transparent
    );
}
.hunt-dashboard .bg-secondary-container\/5 {
    background-color: color-mix(
        in srgb,
        var(--color-secondary-container) 5%,
        transparent
    );
}
.hunt-dashboard .bg-secondary-container\/20 {
    background-color: color-mix(
        in srgb,
        var(--color-secondary-container) 20%,
        transparent
    );
}
.hunt-dashboard .bg-outline-variant {
    background-color: var(--color-outline-variant);
}
.hunt-dashboard .bg-green-500\/70 {
    background-color: color-mix(in srgb, #22c55e 70%, transparent);
}

.hunt-dashboard .text-on-surface {
    color: var(--color-on-surface);
}
.hunt-dashboard .text-on-surface-variant {
    color: var(--color-on-surface-variant);
}
.hunt-dashboard .text-on-surface-variant\/30 {
    color: color-mix(in srgb, var(--color-on-surface-variant) 30%, transparent);
}
.hunt-dashboard .text-on-surface-variant\/40 {
    color: color-mix(in srgb, var(--color-on-surface-variant) 40%, transparent);
}
.hunt-dashboard .text-on-surface-variant\/50 {
    color: color-mix(in srgb, var(--color-on-surface-variant) 50%, transparent);
}
.hunt-dashboard .text-on-surface-variant\/60 {
    color: color-mix(in srgb, var(--color-on-surface-variant) 60%, transparent);
}
.hunt-dashboard .text-on-surface-variant\/70 {
    color: color-mix(in srgb, var(--color-on-surface-variant) 70%, transparent);
}
.hunt-dashboard .text-primary {
    color: var(--color-primary);
}
.hunt-dashboard .text-primary\/70 {
    color: color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.hunt-dashboard .text-secondary {
    color: var(--color-secondary);
}
.hunt-dashboard .text-on-primary {
    color: var(--color-on-primary);
}

.hunt-dashboard .border-outline-variant {
    border-color: var(--color-outline-variant);
}
.hunt-dashboard .border-primary {
    border-color: var(--color-primary);
}
.hunt-dashboard .border-primary\/30 {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.hunt-dashboard .border-primary\/40 {
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.hunt-dashboard .border-secondary {
    border-color: var(--color-secondary);
}
.hunt-dashboard .border-secondary\/20 {
    border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.hunt-dashboard .hover\:text-primary:hover {
    color: var(--color-primary);
}
.hunt-dashboard .hover\:text-on-surface:hover {
    color: var(--color-on-surface);
}
.hunt-dashboard .hover\:border-primary:hover {
    border-color: var(--color-primary);
}
.hunt-dashboard .hover\:border-primary\/30:hover {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.hunt-dashboard .hover\:bg-surface-container\/40:hover {
    background-color: color-mix(
        in srgb,
        var(--color-surface-container) 40%,
        transparent
    );
}
.hunt-dashboard .hover\:bg-primary-container\/20:hover {
    background-color: color-mix(
        in srgb,
        var(--color-primary-container) 20%,
        transparent
    );
}
.hunt-dashboard .hover\:bg-secondary-container\/20:hover {
    background-color: color-mix(
        in srgb,
        var(--color-secondary-container) 20%,
        transparent
    );
}

/* ============================================
   Typography
   ============================================ */

.hunt-dashboard .font-display-lg {
    font-family: var(--font-display-lg);
}
.hunt-dashboard .font-label-sm {
    font-family: var(--font-label-sm);
}
.hunt-dashboard .font-body-md {
    font-family: var(--font-body-md);
}
.hunt-dashboard .font-ui-button {
    font-family: var(--font-ui-button);
}
.hunt-dashboard .font-headline-lg {
    font-family: var(--font-headline-lg);
}

.hunt-dashboard .text-display-lg {
    font-size: var(--fs-display-lg);
    line-height: var(--lh-display-lg);
    letter-spacing: var(--ls-display-lg);
    font-weight: var(--fw-display-lg);
}
.hunt-dashboard .text-headline-lg {
    font-size: var(--fs-headline-lg);
    line-height: var(--lh-headline-lg);
    font-weight: var(--fw-headline-lg);
}
.hunt-dashboard .text-body-md {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
}
.hunt-dashboard .text-label-sm {
    font-size: var(--fs-label-sm);
    line-height: var(--lh-label-sm);
    letter-spacing: var(--ls-label-sm);
    font-weight: var(--fw-label-sm);
}
.hunt-dashboard .text-ui-button {
    font-size: var(--fs-ui-button);
    line-height: var(--lh-ui-button);
    font-weight: var(--fw-ui-button);
}
.hunt-dashboard .text-\[9px\] {
    font-size: 9px;
    line-height: 1.2;
}
.hunt-dashboard .text-\[10px\] {
    font-size: 10px;
    line-height: 1.2;
}

/* ============================================
   Atmospheric backgrounds
   ============================================ */

.hunt-dashboard .grain-overlay {
    background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
    opacity: 0.05;
    pointer-events: none;
}

.hunt-dashboard .vignette {
    background: radial-gradient(
        circle,
        transparent 20%,
        rgba(0, 0, 0, 0.8) 100%
    );
    pointer-events: none;
}

.hunt-dashboard .scanline {
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
}

/* ============================================
   Queue components
   ============================================ */

.hunt-dashboard .queue-entry-active {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.hunt-dashboard .result-badge {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
}

/* ============================================
   Animations
   ============================================ */

.hunt-dashboard .fade-in {
    animation: hunt-fadeIn 0.25s ease-out;
}

@keyframes hunt-fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hunt-dashboard .slide-up {
    animation: hunt-slideUp 0.2s ease-out;
}

@keyframes hunt-slideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Scrollbar
   ============================================ */

.hunt-dashboard ::-webkit-scrollbar {
    width: 6px;
}
.hunt-dashboard ::-webkit-scrollbar-track {
    background: transparent;
}
.hunt-dashboard ::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: 3px;
}
.hunt-dashboard ::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline);
}