/* Weather Machine - Main Styles */

:root {
    /* Colors */
    --sky-blue: #87CEEB;
    --sky-dark: #4A90A4;
    --grass-green: #7CB342;
    --sun-yellow: #FFD54F;
    --cloud-white: #ECEFF1;
    --rain-blue: #64B5F6;
    --snow-white: #FAFAFA;

    /* Temperature colors */
    --temp-freezing: #4FC3F7;
    --temp-cold: #81D4FA;
    --temp-warm: #FFD54F;
    --temp-hot: #FF8A65;
    --temp-volcanic: #EF5350;

    /* Wetness colors */
    --wet-dry: #FFE082;
    --wet-drizzle: #90CAF9;
    --wet-rain: #42A5F5;
    --wet-monsoon: #1565C0;

    /* Wind colors */
    --wind-still: #A5D6A7;
    --wind-breeze: #81C784;
    --wind-windy: #66BB6A;
    --wind-strong: #43A047;
    --wind-hurricane: #2E7D32;

    /* UI colors */
    --ui-bg: #FFFFFF;
    --ui-border: #E0E0E0;
    --ui-text: #333333;
    --ui-accent: #FF7043;
    --ui-success: #66BB6A;

    /* Spacing */
    --header-height: 50px;
    --controls-height: 180px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* Touch targets */
    --min-touch-target: 44px;
    --slider-handle-size: 50px;
}

/* Reset and base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ui-text);
    background: var(--sky-blue);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Game wrapper - full screen layout */
#game-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
}

/* Header */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding: 0 var(--spacing-md);
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    border-bottom: 2px solid var(--ui-border);
    flex-shrink: 0;
    z-index: 100;
}

.game-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ui-accent);
    text-shadow: 1px 1px 0 white;
}

.header-right {
    display: flex;
    gap: var(--spacing-sm);
}

.weather-fact {
    flex: 1;
    text-align: center;
    padding: 0 var(--spacing-md);
    overflow: hidden;
}

.fact-text {
    font-size: 0.85rem;
    color: #555;
    font-style: italic;
    display: inline-block;
    animation: factFadeIn 0.5s ease-out;
}

@keyframes factFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.icon-btn {
    min-width: var(--min-touch-target);
    min-height: var(--min-touch-target);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.2rem;
    background: var(--ui-bg);
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, background 0.2s;
}

.icon-btn:hover, .icon-btn:focus {
    background: #f5f5f5;
}

.icon-btn:active {
    transform: scale(0.95);
}

/* Game container (Pixi canvas) */
#game-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--sky-blue) 0%, var(--sky-dark) 100%);
}

#game-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Controls panel */
#controls-panel {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: var(--spacing-md);
    background: linear-gradient(0deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%);
    border-top: 3px solid var(--ui-border);
    flex-shrink: 0;
    z-index: 100;
}

/* Slider groups */
.slider-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    max-width: 300px;
}

.slider-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    font-size: 1.1rem;
}

.slider-icon {
    font-size: 1.5rem;
}

/* Custom slider */
.slider-container {
    width: 100%;
    padding: 0 var(--spacing-md);
}

.slider-track {
    position: relative;
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg,
        var(--temp-freezing) 0%,
        var(--temp-cold) 25%,
        var(--temp-warm) 50%,
        var(--temp-hot) 75%,
        var(--temp-volcanic) 100%
    );
    border-radius: 10px;
    border: 3px solid var(--ui-border);
    touch-action: none;
}

.slider-group[data-type="wetness"] .slider-track {
    background: linear-gradient(90deg,
        var(--wet-dry) 0%,
        var(--wet-dry) 25%,
        var(--wet-drizzle) 50%,
        var(--wet-rain) 75%,
        var(--wet-monsoon) 100%
    );
}

.slider-group[data-type="wind"] .slider-track {
    background: linear-gradient(90deg,
        var(--wind-still) 0%,
        var(--wind-breeze) 25%,
        var(--wind-windy) 50%,
        var(--wind-strong) 75%,
        var(--wind-hurricane) 100%
    );
}

.slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 7px;
    pointer-events: none;
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--slider-handle-size);
    height: var(--slider-handle-size);
    margin-top: calc(var(--slider-handle-size) / -2);
    margin-left: calc(var(--slider-handle-size) / -2);
    background: white;
    border: 4px solid var(--ui-accent);
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: grab;
    touch-action: none;
    transition: transform 0.1s, box-shadow 0.1s;
}

.slider-handle:hover, .slider-handle:focus {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    outline: none;
}

.slider-handle:active, .slider-handle.dragging {
    transform: scale(1.15);
    cursor: grabbing;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    font-size: 0.7rem;
    color: #666;
}

.slider-labels span {
    text-align: center;
    width: 20%;
}

.slider-value {
    margin-top: var(--spacing-sm);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ui-accent);
    min-height: 1.5em;
}

/* Challenge panel */
#challenge-panel {
    position: absolute;
    bottom: calc(var(--controls-height) + var(--spacing-md));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border: 3px solid var(--ui-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
    text-align: center;
}

.challenge-text {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.challenge-checks {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.check {
    font-size: 1.1rem;
    padding: var(--spacing-sm);
}

.check.correct {
    color: var(--ui-success);
}

.check.correct::before {
    content: '\2611 ';
}

.check:not(.correct)::before {
    content: '\2610 ';
}

/* Overlays */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay-content {
    background: white;
    padding: var(--spacing-lg) calc(var(--spacing-lg) * 2);
    border-radius: 20px;
    text-align: center;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.overlay-content h1 {
    font-size: 2.5rem;
    color: var(--ui-accent);
    margin-bottom: var(--spacing-md);
}

.overlay-content p {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
    color: #666;
}

.big-button {
    min-width: 200px;
    min-height: 60px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(180deg, var(--ui-accent) 0%, #E64A19 100%);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 6px 0 #BF360C, 0 8px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s, box-shadow 0.1s;
}

.big-button:hover, .big-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #BF360C, 0 10px 16px rgba(0, 0, 0, 0.25);
}

.big-button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #BF360C, 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.modal-content {
    background: white;
    padding: var(--spacing-lg);
    border-radius: 16px;
    max-width: 500px;
    width: 90vw;
    max-height: 85vh;
    overflow: auto;
}

.modal-content h2 {
    font-size: 1.8rem;
    color: var(--ui-accent);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.mode-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.mode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background: #f5f5f5;
    border: 3px solid var(--ui-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: var(--min-touch-target);
}

.mode-option:hover, .mode-option:focus {
    border-color: var(--ui-accent);
    background: #fff;
}

.mode-option:active {
    background: #eee;
}

.mode-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.mode-name {
    font-size: 1.2rem;
    font-weight: 700;
}

.mode-desc {
    font-size: 0.9rem;
    color: #666;
}

.close-modal {
    display: block;
    width: 100%;
    padding: var(--spacing-md);
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    background: var(--ui-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    min-height: var(--min-touch-target);
}

.close-modal:hover, .close-modal:focus {
    background: #E64A19;
}

/* Help modal */
.help-text {
    text-align: left;
    margin-bottom: var(--spacing-lg);
}

.help-text p {
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

.help-text h3 {
    margin: var(--spacing-md) 0 var(--spacing-sm);
    color: var(--ui-accent);
}

.help-text ul {
    margin-left: var(--spacing-lg);
}

.help-text li {
    margin-bottom: var(--spacing-sm);
}

/* Success overlay */
.celebration h2 {
    font-size: 2.5rem;
    color: var(--ui-success);
}

.success-message {
    font-size: 1.3rem;
}

/* Hidden utility */
.hidden {
    display: none !important;
}

/* Sound button states */
#sound-btn .sound-off {
    color: #999;
}

/* Build Toolbar */
#build-toolbar {
    position: absolute;
    left: var(--spacing-md);
    top: calc(var(--header-height) + var(--spacing-md));
    z-index: 200;
}

.toolbar-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(180deg, #FF7043 0%, #E64A19 100%);
    color: white;
    border: 3px solid #BF360C;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 0 #BF360C, 0 6px 12px rgba(0,0,0,0.2);
    transition: transform 0.1s, box-shadow 0.1s;
}

.toolbar-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #BF360C, 0 8px 16px rgba(0,0,0,0.25);
}

.toolbar-toggle:active, .toolbar-toggle.active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #BF360C, 0 4px 8px rgba(0,0,0,0.2);
}

.toolbar-toggle.active {
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 100%);
    border-color: #2E7D32;
    box-shadow: 0 2px 0 #2E7D32, 0 4px 8px rgba(0,0,0,0.2);
}

.toggle-icon {
    font-size: 1.3rem;
}

#build-palette {
    margin-top: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid var(--ui-border);
    border-radius: 12px;
    padding: var(--spacing-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 70vh;
    overflow-y: auto;
    min-width: 220px;
}

.palette-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--ui-border);
    padding-bottom: var(--spacing-sm);
}

.palette-tab {
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f0f0f0;
    border: 2px solid var(--ui-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.palette-tab:hover {
    background: #e0e0e0;
}

.palette-tab.active {
    background: var(--ui-accent);
    color: white;
    border-color: var(--ui-accent);
}

.palette-content {
    min-height: 80px;
}

.palette-section {
    margin-bottom: var(--spacing-sm);
}

.palette-section:last-of-type {
    margin-bottom: 0;
}

.palette-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-left: 4px;
}

.palette-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.palette-item {
    width: 54px;
    height: 62px;
    font-size: 1.5rem;
    background: #f5f5f5;
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    cursor: grab;
    transition: transform 0.1s, border-color 0.1s, background 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
    position: relative;
}

.palette-item::after {
    content: attr(data-label);
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    font-size: 0.5rem;
    font-weight: 700;
    text-align: center;
    color: #333;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    margin: 0 2px;
}

.palette-item:hover {
    background: #fff;
    border-color: var(--ui-accent);
    transform: scale(1.1);
}

.palette-item:active, .palette-item.selected {
    cursor: grabbing;
    transform: scale(1.15);
    border-color: var(--ui-accent);
    background: #FFE0B2;
}

.palette-item.selected {
    box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.4);
}

.block-item[data-object="block-red"] { background: linear-gradient(135deg, #EF5350 0%, #C62828 100%); border-color: #B71C1C; }
.block-item[data-object="block-blue"] { background: linear-gradient(135deg, #42A5F5 0%, #1565C0 100%); border-color: #0D47A1; }
.block-item[data-object="block-green"] { background: linear-gradient(135deg, #66BB6A 0%, #2E7D32 100%); border-color: #1B5E20; }
.block-item[data-object="block-yellow"] { background: linear-gradient(135deg, #FFCA28 0%, #F9A825 100%); border-color: #F57F17; }
.block-item[data-object="block-purple"] { background: linear-gradient(135deg, #AB47BC 0%, #7B1FA2 100%); border-color: #4A148C; }
.block-item[data-object="block-orange"] { background: linear-gradient(135deg, #FF7043 0%, #E64A19 100%); border-color: #BF360C; }
.block-item[data-object="crate"] { background: linear-gradient(135deg, #A1887F 0%, #6D4C41 100%); border-color: #4E342E; }
.block-item[data-object="cardboard"] { background: linear-gradient(135deg, #BCAAA4 0%, #8D6E63 100%); border-color: #5D4037; border-style: dashed; }
.block-item[data-object="balloon-box"] { background: linear-gradient(135deg, #F8BBD9 0%, #F48FB1 100%); border-color: #EC407A; }

.block-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.light-block {
    position: relative;
}

.light-block::after {
    content: '~';
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 12px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Object palette item icons */
.palette-item[data-object="snowman"] { background: linear-gradient(135deg, #fff 60%, #e3f2fd 100%); }
.palette-item[data-object="snowman"]::before { content: '⛄'; font-size: 20px; }

.palette-item[data-object="ice-block"] { background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%); }
.palette-item[data-object="igloo"] { background: linear-gradient(135deg, #ECEFF1 0%, #B0BEC5 100%); }
.palette-item[data-object="igloo"]::before { content: '🏠'; font-size: 18px; filter: grayscale(1) brightness(1.5); }

.palette-item[data-object="sandcastle"] { background: linear-gradient(135deg, #DEB887 0%, #D2B48C 100%); }
.palette-item[data-object="beach-ball"] { background: conic-gradient(#FF4444, #FFFF44, #4444FF, #FFFFFF, #FF4444); border-radius: 50%; }
.palette-item[data-object="umbrella"] { background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%); }
.palette-item[data-object="surfboard"] { background: linear-gradient(180deg, #00BCD4 0%, #0097A7 100%); }

.palette-item[data-object="flower"] { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); }
.palette-item[data-object="flower"]::before { content: '🌸'; font-size: 20px; }
.palette-item[data-object="potted-plant"] { background: linear-gradient(135deg, #A5D6A7 0%, #81C784 100%); }
.palette-item[data-object="garden-gnome"] { background: linear-gradient(135deg, #BBDEFB 0%, #64B5F6 100%); }
.palette-item[data-object="scarecrow"] { background: linear-gradient(135deg, #D7CCC8 0%, #A1887F 100%); }
.palette-item[data-object="birdhouse"] { background: linear-gradient(135deg, #FFCC80 0%, #FFB74D 100%); }

.palette-item[data-object="tent"] { background: linear-gradient(135deg, #FF7043 0%, #E64A19 100%); }
.palette-item[data-object="campfire"] { background: linear-gradient(0deg, #5D4037 30%, #FF6D00 60%, #FFD600 100%); }
.palette-item[data-object="flag"] { background: linear-gradient(90deg, #9E9E9E 20%, #F44336 20%); }
.palette-item[data-object="kite"] { background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%); }
.palette-item[data-object="pinwheel"] { background: conic-gradient(#F44336, #2196F3, #FFEB3B, #4CAF50, #F44336); }
.palette-item[data-object="windmill"] { background: linear-gradient(135deg, #BCAAA4 0%, #8D6E63 100%); }

.palette-item[data-object="barrel"] { background: linear-gradient(135deg, #8D6E63 0%, #5D4037 100%); }
.palette-item[data-object="trash-can"] { background: linear-gradient(135deg, #78909C 0%, #546E7A 100%); }
.palette-item[data-object="mailbox"] { background: linear-gradient(135deg, #42A5F5 0%, #1976D2 100%); }
.palette-item[data-object="lawn-chair"] { background: repeating-linear-gradient(0deg, #4CAF50, #4CAF50 4px, #fff 4px, #fff 8px); }
.palette-item[data-object="picnic-table"] { background: linear-gradient(135deg, #A1887F 0%, #795548 100%); }

.palette-item[data-object="boat"] { background: linear-gradient(180deg, #90CAF9 50%, #795548 50%); }
.palette-item[data-object="rubber-duck"] { background: linear-gradient(135deg, #FFEB3B 0%, #FDD835 100%); }

.palette-item[data-object="balloon-bunch"] { background: linear-gradient(180deg, #F44336 0%, #2196F3 33%, #FFEB3B 66%, #4CAF50 100%); }
.palette-item[data-object="paper-airplane"] { background: linear-gradient(135deg, #FAFAFA 0%, #E0E0E0 100%); }
.palette-item[data-object="house-of-cards"] { background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%); border: 2px solid #F44336; }
.palette-item[data-object="hay-bale"] { background: linear-gradient(135deg, #DDBF55 0%, #C9A642 100%); }

/* Tornado button */
.tornado-section {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--ui-border);
}

.tornado-btn {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #37474F 0%, #263238 50%, #455A64 100%);
    border: 3px solid #1a1a2e;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 0 #1a1a2e, 0 6px 12px rgba(0,0,0,0.3);
    animation: tornado-pulse 2s infinite;
}

.tornado-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1a1a2e, 0 8px 16px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #455A64 0%, #37474F 50%, #546E7A 100%);
}

.tornado-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #1a1a2e, 0 2px 4px rgba(0,0,0,0.3);
}

.tornado-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

.tornado-btn.active {
    background: linear-gradient(135deg, #c62828 0%, #b71c1c 50%, #d32f2f 100%);
    border-color: #7f0000;
    box-shadow: 0 4px 0 #7f0000, 0 6px 12px rgba(0,0,0,0.3);
    animation: none;
}

.tornado-btn.active:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #c62828 50%, #e53935 100%);
}

.tornado-btn.cooldown {
    background: linear-gradient(135deg, #616161 0%, #424242 50%, #757575 100%);
    border-color: #212121;
    box-shadow: 0 4px 0 #212121, 0 6px 12px rgba(0,0,0,0.3);
    animation: none;
    cursor: wait;
    pointer-events: none;
}

.tornado-icon {
    font-size: 1.5rem;
    animation: spin 3s linear infinite;
}

@keyframes tornado-pulse {
    0%, 100% { box-shadow: 0 4px 0 #1a1a2e, 0 6px 12px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 4px 0 #1a1a2e, 0 6px 20px rgba(69, 90, 100, 0.5); }
}

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

.palette-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--ui-border);
}

.action-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #f5f5f5;
    border: 2px solid var(--ui-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.action-btn:hover {
    background: #FFCDD2;
    border-color: #EF5350;
}

#tower-height {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ui-accent);
}

/* Dragging ghost cursor */
#drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 2.5rem;
    opacity: 0.8;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Placement preview */
.placement-preview {
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    border: 2px dashed var(--ui-accent);
    border-radius: 8px;
}

/* Flying animation for chaos mode */
@keyframes fly-away {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-200vh) translateX(100vw) rotate(720deg);
    }
}

.flying-away {
    animation: fly-away 2s ease-in forwards;
}

/* Responsive adjustments for build toolbar */
@media (max-width: 600px) {
    #build-toolbar {
        left: var(--spacing-sm);
        top: calc(var(--header-height) + var(--spacing-sm));
    }

    .toolbar-toggle {
        padding: 6px 10px;
        font-size: 1rem;
    }

    .toggle-text {
        display: none;
    }

    #build-palette {
        max-width: 180px;
    }

    .palette-item {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .palette-label {
        font-size: 0.65rem;
    }

    .palette-item {
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }

    #tower-height {
        font-size: 0.75rem;
    }
}