/* Field canvas — container styles. Rendering is handled by js/field.js,
   which also consumes the --shimmer-* tokens declared in core.css. */

.field {
    position: relative;
    display: block;
}

.field canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Variants — size hints only; field.js reads the container box */
.field--full {
    width: min(380px, 44vw);
    height: min(380px, 44vw, 36vh);
}

.field--band {
    width: 100%;
    height: clamp(40px, 6vh, 56px);
}

.field--cluster {
    width: clamp(120px, 18vw, 180px);
    height: clamp(120px, 18vw, 180px);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .field--full {
        width: 60vw;
        height: 60vw;
    }
}

@media (max-width: 640px) {
    .field--full {
        width: 70vw;
        height: 70vw;
    }
}