/* ============================================
   CSS Reset and Base Styles
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================
   Design Tokens (Brutalist Theme)
   ============================================ */

:root {
    /* Colors - High contrast, no subtlety */
    --color-bg: #ffffff;
    --color-text: #000000;
    --color-border: #000000;
    --color-accent: #ff0000; /* For hover states, optional */

    /* Typography - Monospace only */
    --font-main: 'Courier New', Courier, monospace;

    /* Spacing - Deliberately chunky */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;

    /* Borders - Thick and visible */
    --border-width: 3px;
    --border-style: solid;
    --border: var(--border-width) var(--border-style) var(--color-border);
}

/* ============================================
   Body and Container
   ============================================ */

html {
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    line-height: 1.4;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-md);
    position: relative;
    z-index: 10;
}

/* ============================================
   Controls Section
   ============================================ */

.controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    border-bottom: var(--border);
}

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

.title {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.02em;
}

.subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/* ============================================
   Form Elements - Brutalist Style
   ============================================ */

.selector-group {
    width: 100%;
    max-width: 300px;
}

.select-brutal {
    width: 100%;
    padding: var(--space-sm);
    font-family: var(--font-main);
    font-size: 1.25rem;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: var(--border);
    border-radius: 0; /* No rounded corners - this is brutalism */
    cursor: pointer;
    appearance: none; /* Remove default styling */

    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    padding-right: calc(var(--space-sm) * 3);
}

.select-brutal:focus {
    outline: var(--border);
    outline-offset: 2px;
}

.select-brutal:disabled {
    /* Make disabled look the same as enabled - part of the joke */
    opacity: 1;
    cursor: not-allowed;
    background-color: var(--color-bg);
}

/* ============================================
   Text Input - Brutalist Style
   ============================================ */

.input-brutal {
    width: 100%;
    padding: var(--space-sm);
    font-family: var(--font-main);
    font-size: 1.25rem;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: var(--border);
    border-radius: 0;
}

.input-brutal:focus {
    outline: var(--border);
    outline-offset: 2px;
}

.input-brutal::placeholder {
    color: #666;
    opacity: 1;
}

.custom-input-group {
    animation: fadeIn 0.15s ease-out;
}

.custom-input-group[hidden] {
    display: none;
}

/* ============================================
   Button - THE Button
   ============================================ */

.button-brutal {
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-main);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--color-text);
    color: var(--color-bg);
    border: var(--border);
    border-radius: 0;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.button-brutal:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--color-text);
}

.button-brutal:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.button-brutal:focus {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Button state when animation is running */
.button-brutal.is-active {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* ============================================
   Output Section
   ============================================ */

.output {
    padding: var(--space-md) 0;
    max-height: 60vh;
    overflow-y: auto;

    /* Hide scrollbar but keep functionality (optional brutalist choice) */
    scrollbar-width: thin;
    scrollbar-color: var(--color-text) var(--color-bg);
}

.output::-webkit-scrollbar {
    width: 8px;
}

.output::-webkit-scrollbar-track {
    background: var(--color-bg);
    border: 1px solid var(--color-text);
}

.output::-webkit-scrollbar-thumb {
    background: var(--color-text);
}

/* Individual phrase styling */
.phrase {
    font-size: 1.125rem;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
    animation: fadeIn 0.15s ease-out;
}

.phrase:last-child {
    border-bottom: none;
}

/* Recursive phrase gets special treatment */
.phrase--recursive {
    font-weight: 700;
}

/* Scatter mode - random viewport positioning */
.phrase--scatter {
    position: fixed;
    border-bottom: none;
    padding: var(--space-xs);
    background-color: var(--color-bg);
    z-index: 1;
    pointer-events: none;
    animation: scatterFadeOut 30s ease-out forwards;
}

@keyframes scatterFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

/* Z-fall mode - falling into the screen */
.phrase--zfall {
    position: fixed;
    border-bottom: none;
    padding: var(--space-xs);
    background-color: var(--color-bg);
    z-index: 1;
    pointer-events: none;
    font-size: 3rem;
    transform-origin: center center;
    animation: zFallShrink 3s ease-in forwards;
}

@keyframes zFallShrink {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: scale(0.02);
    }
}

/* Vortex mode - spiral drain into center */
.phrase--vortex {
    position: fixed;
    border-bottom: none;
    padding: var(--space-xs);
    background-color: var(--color-bg);
    z-index: 1;
    pointer-events: none;
    font-size: 1.25rem;
    animation: vortexSpiral 4s ease-in forwards;
}

@keyframes vortexSpiral {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        opacity: 1;
        transform: translate(calc(var(--vortex-x) * 0.3), calc(var(--vortex-y) * 0.3)) rotate(180deg) scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: translate(calc(var(--vortex-x) * 0.6), calc(var(--vortex-y) * 0.6)) rotate(360deg) scale(0.5);
    }
    75% {
        opacity: 0.5;
        transform: translate(calc(var(--vortex-x) * 0.85), calc(var(--vortex-y) * 0.85)) rotate(540deg) scale(0.25);
    }
    100% {
        opacity: 0;
        transform: translate(var(--vortex-x), var(--vortex-y)) rotate(720deg) scale(0);
    }
}

/* Burst mode - explode outward from center */
.phrase--burst {
    position: fixed;
    border-bottom: none;
    padding: var(--space-xs);
    background-color: var(--color-bg);
    z-index: 1;
    pointer-events: none;
    font-size: 0.5rem;
    transform: translate(-50%, -50%);
    animation: burstExplode 3s ease-out forwards;
}

@keyframes burstExplode {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.5);
        font-size: 0.5rem;
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--burst-x) * 0.1), calc(var(--burst-y) * 0.1)) scale(1);
        font-size: 1rem;
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) translate(calc(var(--burst-x) * 0.5), calc(var(--burst-y) * 0.5)) scale(1.5);
        font-size: 1.5rem;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--burst-x), var(--burst-y)) scale(2);
        font-size: 2rem;
    }
}

/* Animation for new phrases */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 480px) {
    .title {
        font-size: 1.75rem;
    }

    .subtitle {
        font-size: 1.25rem;
    }

    .button-brutal {
        font-size: 1.25rem;
        width: 100%;
    }

    .controls {
        padding: var(--space-md) 0;
    }
}

/* ============================================
   Print Styles (for the truly unhinged)
   ============================================ */

@media print {
    .controls {
        display: none;
    }

    .output {
        max-height: none;
        overflow: visible;
    }
}

/* ============================================
   Reduced Motion Preference
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .phrase {
        animation: none;
    }

    .phrase--scatter,
    .phrase--zfall,
    .phrase--vortex,
    .phrase--burst {
        animation: none;
        opacity: 0.5;
    }

    .button-brutal {
        transition: none;
    }
}