/* Big 8-bit style title */
h1.fun-zone-title {
    font-family: 'Press Start 2P', monospace; /* 8-bit, retro style */
    text-align: center;
    color: #ffffff;
    font-size: 2.5em;
    margin: 0;
    padding: 20px;
    letter-spacing: 2px;
    /* optional background or border, e.g.:
       background: #333;
       border-bottom: 2px solid #ff0080;
    */
}

/* Fill window, no scroll */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
}

/* Top-level wrapper: vertical stack by default */
#wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Top pane: ~60% by default (vertical) */
#top-pane {
    flex: 0 0 60%;
    position: relative;
    background: #000;
    box-sizing: border-box;
}

/* Bottom pane: ~40% by default, but is itself a flex container
   that splits side-by-side #three-container & #kruskal-container */
#bottom-pane {
    flex: 1;             /* leftover 40% */
    display: flex;       /* NESTED flex to hold 3D & kruskal side by side */
    flex-direction: row;
    position: relative;
    background: #000;
    box-sizing: border-box;

    height: 100%;        /* so it matches the parent's height, rather than auto */
    min-height: 0;       /* prevents default 'min-content' sizing from ballooning */
}

/* On wider screens, flip the entire #wrapper horizontally */
@media (min-width: 1000px) {
    #wrapper {
        flex-direction: row;  /* top pane => left, bottom pane => right */
    }

    /* If you want the left half for top-pane, right half for bottom-pane: */
    #top-pane {
        flex: 0 0 50%;
        height: 100%;
    }
    #bottom-pane {
        flex: 1;
        height: 100%;
    }
}

/* The 2D canvas in the top pane (we size it in JS) */
#canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: black;
    touch-action: none; /* prevent scroll on mobile */
}

/* Icons float above the 2D canvas */
#icon-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* clicks pass through to canvas */
}

/* Icons greyed out by default */
.zone-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

/* Label for active zone */
#zone-label {
    position: absolute;
    color: white;
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px;
    text-align: center;
    pointer-events: none;
    /* If you were pinning it to the bottom, remove or comment out:
       bottom: 10px;
    */
    left: 50%;
    transform: translateX(-50%);
}

/* The 3D corkscrew container */
#three-container {
    flex: 1;
    position: relative;
    background: #222;
    box-sizing: border-box;
}

/* The Kruskal animation container (new) */
#kruskal-container {
    flex: 1; /* so #three-container & #kruskal-container split bottom pane equally */
    position: relative;
    background: #111; /* pick a color distinct from #222 if you like */
    box-sizing: border-box;
}

/* Optional: style for the Kruskal canvas if you want it to fill #kruskal-container */
#kruskal-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #111; /* or any other color or none */
}