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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* new "heaven" gradient: soft sky tones */
    background: linear-gradient(180deg, #f7fbff 0%, #e7f6ff 45%, #d6eefc 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#canvas-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* New background centered pixel text behind canvas */
.bg-text {
    position: absolute;
    z-index: 0;
    font-family: 'Press Start 2P', 'Space Mono', monospace;
    font-size: clamp(28px, 6vw, 96px);
    /* darker, higher-contrast text for better readability */
    color: rgba(24,36,56,0.92); /* deep navy with high opacity */
    text-shadow: 0 8px 22px rgba(12,20,36,0.45), 0 2px 4px rgba(255,255,255,0.06);
    text-align: center;
    pointer-events: none;
    letter-spacing: 6px;
    transform: translateY(-25%); /* raised a bit higher */
    user-select: none;
}

/* New small base instruction text placed behind the tree but above the bg-text in DOM order */
.base-text {
    position: absolute;
    z-index: 0; /* keep behind canvas (canvas z-index:1) so it's beneath the drawn tree */
    left: 50%;
    bottom: 8vh;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', 'Space Mono', monospace;
    font-size: clamp(10px, 1.7vw, 14px);
    color: rgba(20,28,40,0.95); /* changed to a darker, high-contrast color */
    text-shadow: 0 4px 10px rgba(180,210,255,0.12), 0 1px 1px rgba(255,255,255,0.25);
    pointer-events: none;
    user-select: none;
    letter-spacing: 3px;
    text-align: center;
}

/* new top-right twitter link and bottom-left description */
.top-right {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2;
}
.top-right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255,255,255,0.85);
    color: #1da1f2;
    box-shadow: 0 6px 20px rgba(120,160,200,0.12);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.top-right a:hover, .top-right a:focus {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(120,160,200,0.18);
}

/* bottom-left descriptive text */
.bottom-left {
    position: absolute;
    bottom: 18px;
    left: 20px;
    z-index: 2;
    max-width: 36ch;
}
.bottom-left p {
    font-family: 'Press Start 2P', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(25,40,60,0.86);
    background: rgba(255,255,255,0.72);
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(120,160,200,0.08);
    margin: 0;
}

/* Canvas styling */
canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: transparent;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    canvas {
    }
    
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
}

@media (max-width: 480px) {
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
}