@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Merriweather:ital,wght@0,300;0,400;1,300&family=Fira+Code:wght@400&display=swap');

:root {
    --bg: #1a0f0f;
    --text-primary: #fff8e7;
    --text-secondary: #d1c4b8;
    --accent-cyan: #ffd700;
    --accent-warm: #ffb000;
    --accent-error: #ff5f5f;
    --glass: rgba(40, 20, 20, 0.7);
    --border: rgba(255, 215, 0, 0.2);
}

* {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--bg);
    background-image: url('../assets/christmas_bg.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: soft-light;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* Background Canvas */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Main Container */
.container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

/* Introduction Screen */
.intro-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    transition: opacity 0.8s ease;
}

.intro-screen.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    /* Take out of flow */
}

h1 {
    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    margin: 0;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(165, 180, 252, 0.2);
}

.subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.6;
}

/* Greeting Display */
.greeting-display {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 5;
    pointer-events: none;
}

.greeting-content {
    width: 100%;
    padding: 2rem 15rem 2rem 4rem;
    text-align: left;
}

.greeting-block {
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 1s forwards;
    will-change: transform, opacity;
}

.greeting-text {
    font-family: 'Merriweather', serif;
    font-size: 2rem;
    line-height: 1.6;
    color: var(--text-primary);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* No breathing animation for stream, too distracting? */
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Specific styling for new text vs old can be added here */

/* Status / Progress - Centered */
.status-bar-center {
    font-family: 'Fira Code', monospace;
    font-size: 1.1rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.progress-track {
    width: 300px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    display: none;
}

.progress-track.visible {
    display: block;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-cyan);
    transition: width 0.2s ease;
}

/* Pause Overlay */
.pause-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Slight dim */
    backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.pause-overlay.visible {
    opacity: 1;
}

.pause-icon {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 60px solid rgba(255, 255, 255, 0.8);
    /* This makes a play button, wait, pause is usually two bars.
       Actually user asked for "pause effect like full screen players" which usually SHOWS the pause icon when you pause?
       Or the Play icon when paused? Typically "Pause" icon flashes then "Play" icon stays or vice versa.
       Let's make a Pause icon symbol (||) */
}

/* CSS Pause Icon (Double Bar) */
.pause-overlay.paused .pause-icon {
    border: none;
    width: 60px;
    height: 80px;
    border-left: 20px solid rgba(255, 255, 255, 0.8);
    border-right: 20px solid rgba(255, 255, 255, 0.8);
    box-sizing: content-box;
    /* ensure border width adds up */
    padding-right: 0;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .greeting-text {
        font-size: 1.5rem;
    }

    .container {
        padding: 1.5rem;
    }

    .greeting-content {
        padding: 2rem 10rem 2rem 1.5rem;
        /* Adjusted for mobile to still clear statistics if possible */
    }
}

/* App Header & Language Selector */
.app-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    /* Let clicks pass through, but re-enable for children */
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    pointer-events: auto;
    cursor: default;
}

.logo-img {
    height: 32px;
    width: 32px;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
    object-fit: contain;
}

.logo-text {
    font-family: 'Merriweather', serif;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.glass-select {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(40, 20, 20, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--text-secondary);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 150px;
    /* Limit width as requested */

    /* Custom Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23d1c4b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.glass-select:hover {
    background-color: rgba(60, 30, 30, 0.6);
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

.glass-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

/* Option styling is limited in standard select, but basic colors work */
.glass-select option {
    background-color: #1a0f0f;
    color: var(--text-primary);
}

/* Thinking Indicator (Dots) */
.thinking-indicator {
    display: flex;
    gap: 8px;
    padding: 2rem 4rem;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    pointer-events: none;
    margin-bottom: 2rem;
}

.thinking-indicator.visible {
    opacity: 1;
    visibility: visible;
}

.thinking-indicator span {
    width: 8px;
    height: 8px;
    background-color: var(--accent-cyan);
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
    box-shadow: 0 0 10px var(--accent-cyan);
}

.thinking-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.thinking-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.3;
    }

    40% {
        transform: scale(1.0);
        opacity: 1;
    }
}

/* Glass Button */
.glass-button {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--accent-cyan);
    padding: 1rem 2.5rem;
    font-family: 'Merriweather', serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    border-radius: 50px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 0 rgba(255, 215, 0, 0);
    text-transform: uppercase;
}

.glass-button:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: var(--accent-cyan);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.2), inset 0 0 10px rgba(255, 215, 0, 0.2);
}

.glass-button:active {
    transform: translateY(0) scale(0.98);
}

.hidden {
    display: none !important;
}

.error-message {
    color: var(--accent-error);
    background: rgba(255, 95, 95, 0.1);
    border: 1px solid rgba(255, 95, 95, 0.3);
    padding: 1.5rem;
    border-radius: 12px;
    max-width: 400px;
    margin: 1rem 0;
    line-height: 1.5;
    font-size: 0.95rem;
    text-align: center;
    backdrop-filter: blur(5px);
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.glass-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
    transform: none !important;
    box-shadow: none !important;
}

/* Debug Link */
.debug-link {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0.5;
    z-index: 1000;
    transition: opacity 0.3s ease, color 0.3s ease;
    pointer-events: auto;
}

.debug-link:hover {
    opacity: 1;
    color: var(--accent-cyan);
}

/* Resource Monitor */
.resource-monitor {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: rgba(40, 20, 20, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 1rem;
    z-index: 1000;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 180px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.monitor-row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}

.monitor-row .label {
    opacity: 0.6;
    letter-spacing: 0.05em;
}

.monitor-row .value {
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.monitor-row .unit {
    border-bottom: 1px dotted var(--accent-cyan);
    cursor: help;
    margin-left: 4px;
    opacity: 0.8;
    pointer-events: auto;
    /* Enable hover/tooltip since parent is pointer-events: none */
}