/* ==========================================================================
 * solarsystem.css — Solar system canvas container styling
 * ========================================================================== */

.solarsystem-wrap {
    width: 100%;
    max-width: var(--content-max-width, 800px);
    margin: 0 auto 1.5rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0 0;
}

#solarsystem-canvas {
    display: block;
    /* NOTE: Do NOT set max-width or height:auto on the canvas.
       JS (solarsystem-init.js → computeCanvasSize / resize) explicitly sets
       both canvas.style.width and canvas.style.height.  A CSS max-width
       without a matching height constraint squishes the canvas horizontally,
       distorting circles into vertical ovals on mobile. */
    cursor: default;
}

/* ---- Mobile: scale down to ~50 % ---- */
@media (max-width: 600px) {
    .solarsystem-wrap {
        padding: 0.5rem 0 0;
    }

    #solarsystem-canvas {
        /* Canvas sizing is handled entirely by JS; see note above. */
    }
}