:root {
    --bg-day: #fbfbad;
    --bg-night: #2c3e50; /* Dark night color */
    --bg-morning: #d4e0ef; /* Soft, overcast morning color */
    --line-color: #333;
    --pastel-blue: #a2d2ff;
    --pastel-pink: #ffc8dd;
    --pastel-green: #caffbf;
    --pastel-teal: #99d9d9;
    --pastel-purple: #e2d2ff;
    --font-thin: 'Quicksand', sans-serif;

    /* Dynamic colors for placed shapes, defaults to Major scale */
    --circle-color: var(--pastel-blue);
    --triangle-color: var(--pastel-green);
    --square-color: var(--pastel-pink);
    --rectangle-color: var(--pastel-blue);
    --diamond-color: var(--pastel-teal);
    --pentagon-color: var(--pastel-purple);
    --octagon-color: var(--pastel-pink);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden;
    font-family: var(--font-thin);
}

#start-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--bg-day);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity 2s ease-in-out 1s;
}

#start-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#click-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    animation: pulse 3s infinite ease-in-out;
    background-color: transparent;
    border: 2px solid rgba(0, 0, 0, 0.2);
}

#click-indicator.ripple-out {
    animation: ripple-out 1s ease-out forwards;
}

@keyframes pulse {
    0% { transform: scale(1); border-color: rgba(0, 0, 0, 0.2); }
    50% { transform: scale(1.2); border-color: rgba(0, 0, 0, 0.4); }
    100% { transform: scale(1); border-color: rgba(0, 0, 0, 0.2); }
}

@keyframes ripple-out {
    0% { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(8); opacity: 0; }
}

.title-container, .lore {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.title-container {
    font-size: 3.5rem;
    font-weight: 300;
    letter-spacing: 5px;
    color: var(--line-color);
    line-height: 1.1;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.lore {
    font-size: 1.1rem;
    color: #555;
    max-width: 450px;
    line-height: 1.8;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

.lore span {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.title-container.visible, .lore.fade-out, .lore span.visible {
    opacity: 1;
}

/* --- Main Layout (Desktop / Landscape) --- */
#game-world {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-day);
    transition: background-color 3s ease-in-out;
}

/* Theme styling */
#game-world.night-theme { background-color: var(--bg-night); }
#game-world.morning-theme { background-color: var(--bg-morning); }

#aetherstream {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 50%;
    max-width: 400px;
    height: 100%;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

/* UI elements are positioned absolutely on desktop */
#landscape-container {
    position: absolute;
    left: calc(50% - 200px - 20px - 200px - 20px - 460px); /* Adjusted for wider palette */
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 460px;
    z-index: 10;
}

#palette-master-container {
    position: absolute;
    left: calc(50% - 200px - 20px - 200px); /* Adjusted for wider palette */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.palettes-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

#last-boy-container {
    position: absolute;
    top: 50%;
    left: calc(50% + 200px + 30px);
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

#boy-icon {
    width: 150px;
    height: 150px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#landscape-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.palette-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#scale-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--line-color);
    transition: color 3s ease-in-out;
}

.night-theme #scale-controls { color: #fff; }

.scale-arrow {
    background: transparent;
    border: 1px solid var(--line-color);
    color: var(--line-color);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 28px;
    transition: all 0.3s ease;
}

.night-theme .scale-arrow { border-color: #fff; color: #fff; }
.morning-theme .scale-arrow { border-color: var(--line-color); color: var(--line-color); }

.scale-arrow:hover {
    background: var(--line-color);
    color: var(--bg-day);
}
.night-theme .scale-arrow:hover { background: #fff; color: var(--bg-night); }
.morning-theme .scale-arrow:hover { background: var(--line-color); color: var(--bg-morning); }

#scale-name {
    font-size: 0.8rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    letter-spacing: 1px;
    font-weight: 300;
}

#echo-palette, #special-palette {
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

#clear-all-button {
    font-family: var(--font-thin);
    font-weight: 300;
    font-size: 1rem;
    padding: 5px 15px;
    background: transparent;
    color: var(--line-color);
    border: 1px solid var(--line-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.night-theme #clear-all-button { border-color: #fff; color: #fff; }
.morning-theme #clear-all-button { border-color: var(--line-color); color: var(--line-color); }

#clear-all-button:hover {
    background: var(--line-color);
    color: var(--bg-day);
}
.night-theme #clear-all-button:hover { background: #fff; color: var(--bg-night); }
.morning-theme #clear-all-button:hover { background: var(--line-color); color: var(--bg-morning); }

.echo-shape {
    width: 50px;
    height: 50px;
    cursor: grab;
    transition: transform 0.2s ease, filter 0.3s ease;
    animation: gentleFloat 8s infinite ease-in-out alternate;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
}

.echo-shape::before, .echo-shape::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    clip-path: inherit;
    border-radius: inherit;
    transition: all 0.2s ease-in-out, background-color 3s ease-in-out;
}

.echo-shape::before {
    background-color: var(--line-color);
    z-index: 1;
}
.night-theme .echo-shape::before { background-color: #fff; }
.morning-theme .echo-shape::before { background-color: var(--line-color); }


.echo-shape::after {
    background-color: var(--bg-day);
    /* --- THICKER LINE --- */
    top: 2.5px; 
    left: 2.5px;
    width: calc(100% - 5px); 
    height: calc(100% - 5px);
    z-index: 2;
}
.night-theme .echo-shape::after { background-color: var(--bg-night); }
.morning-theme .echo-shape::after { background-color: var(--bg-morning); }


.echo-shape.placed::before { background-color: transparent; }
.echo-shape.placed::after {
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: background-color 0.5s ease;
}
.echo-shape.placed { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); }

.echo-shape.circle.placed::after { background-color: var(--circle-color); }
.echo-shape.triangle.placed::after { background-color: var(--triangle-color); }
.echo-shape.square.placed::after { background-color: var(--square-color); }
.echo-shape.rectangle.placed::after { background-color: var(--rectangle-color); }
.echo-shape.diamond.placed::after { background-color: var(--diamond-color); }
.echo-shape.pentagon.placed::after { background-color: var(--pentagon-color); }
.echo-shape.octagon.placed::after { background-color: var(--octagon-color); }
.echo-shape.wave.placed::after { background-color: #f5f3ce; }
.echo-shape.cloud.placed::after { background-color: #f0f8ff; }
.echo-shape.sun.placed::after { background-color: #ffdf70; }


.circle { border-radius: 50%; }
.square { border-radius: 4px; }
.triangle { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.rectangle { clip-path: inset(0 15% 0 15% round 4px); }
.diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.wave { clip-path: path("M 0 25 C 10 0, 15 0, 25 25 S 40 50, 50 25 V 50 H 0 Z"); }
.cloud { clip-path: path("M 36.62,13.3 C 35.53,5.65 28.62,0 20.8,0 13.56,0 7.42,5.13 6.2,12.2 2.65,12.9 0,15.93 0,19.55 0,23.66 3.4,27.05 7.5,27.05 l 28.5,0 c 4.4,0 8,-3.36 8,-7.5 0,-3.75 -2.75,-6.85 -6.38,-7.25 z"); transform: scale(1.1) translate(2px, 8px); }
.sun { clip-path: path("M25 0 L31.25 18.75 L50 18.75 L34.375 31.25 L40.625 50 L25 37.5 L9.375 50 L15.625 31.25 L0 18.75 L18.75 18.75 Z"); }

#special-palette .echo-shape { display: none; }
#game-world.freeplay-mode #special-palette .echo-shape { display: flex; }


#wind-canvas, #rain-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
#rain-canvas { display: none; }

#drop-zone {
    position: relative;
    width: 100%; height: 100%; z-index: 2;
    display: flex; justify-content: center; align-items: center;
}

#explore-button {
    font-family: var(--font-thin);
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 3px;
    color: var(--line-color);
    background: transparent;
    border: 1px solid var(--line-color);
    padding: 15px 40px;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 2s forwards 1s;
    transition: all 0.3s ease;
}
#explore-button:hover {
    background: var(--line-color);
    color: var(--bg-day);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#drop-zone .echo-shape {
    position: absolute; z-index: 3; animation: none;
}
.hint-shape {
    position: absolute; pointer-events: none; opacity: 0; z-index: 5;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
    width: 40px; height: 40px; transform: translate(-50%, -50%); background: transparent;
}
.hint-shape.circle { background-color: var(--pastel-blue); }
.hint-shape.square { background-color: var(--pastel-pink); }
.hint-shape.triangle { background-color: var(--pastel-green); }
.hint-shape.rectangle { background-color: var(--pastel-blue); clip-path: inset(0 15% 0 15% round 4px); }
.hint-shape.diamond { background-color: var(--pastel-teal); }
.hint-shape.pentagon { background-color: var(--pastel-purple); }
.hint-shape.octagon { background-color: var(--pastel-pink); }
.hint-shape.wave { background-color: #f5f3ce; }

@keyframes hint-float-down {
    from { transform: translate(var(--start-x-offset), var(--start-y-offset)) scale(0.1); opacity: 0; }
    60% { opacity: 0.9; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}
@keyframes hint-fade-out {
    from { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    to { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
}

@media (orientation: portrait), (max-width: 1000px) {
    #game-world { display: flex; flex-direction: column; justify-content: flex-start; }
    #aetherstream {
        position: relative; order: 1; width: 100%; height: 60vh;
        max-width: none; left: 0; top: 0; transform: none; border: none;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .night-theme #aetherstream { border-bottom-color: rgba(255,255,255,0.2); }
    #ui-container {
        order: 2; position: relative; display: flex; flex-direction: row;
        justify-content: space-evenly; align-items: center;
        width: 100%; height: 40vh; padding: 5px; gap: 10px;
    }
    #landscape-container, #last-boy-container {
        position: relative; left: auto; top: auto; transform: none;
        z-index: 1; height: 100%; display: flex; align-items: center;
        justify-content: center; width: 25%; max-width: 150px;
    }
    #palette-master-container {
        position: relative; left: auto; top: auto; transform: none;
        height: 100%; flex-grow: 1; max-width: 500px;
        flex-direction: column; justify-content: center;
    }
    .palettes-wrapper, .palette-group, #echo-palette, #special-palette {
        flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 5px;
    }
    #special-palette {
        gap: 15px; /* Add more gap for mobile special palette */
    }
    .echo-shape { width: 38px; height: 38px; }
    #scale-controls { flex-direction: row; gap: 8px; align-items: center; }
    #scale-name { writing-mode: initial; order: 2; }
    #scale-up { order: 3; }
    #scale-down { order: 1; }
    .scale-arrow { width: 24px; height: 24px; line-height: 24px; }
    #boy-icon { width: 100%; height: auto; max-width: 100px; }
    #clear-all-button { margin-top: 10px; }
}