* { box-sizing: border-box; touch-action: none; /* Prevents scroll on drag */ }

body {
    background: #1e1e1e; color: white;
    font-family: system-ui, sans-serif;
    margin: 0; height: 100vh;
    display: flex; flex-direction: column;
}

#controls {
    padding: 1rem; background: #2a2a2a;
    display: flex; gap: 20px; align-items: center; justify-content: center;
}

#groovebox {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 2rem;
}

.row { display: flex; gap: 2rem; }
.ring-container { width: 150px; height: 150px; position: relative; }

/* SVG Styling */
.segment { fill: #333; stroke: #1e1e1e; stroke-width: 2; cursor: pointer; }
.segment.active { fill: #4CAF50; }
.segment.playing { fill: #81c784; stroke: white; }
.center-drag { fill: #2a2a2a; cursor: ns-resize; }
.center-text { fill: white; font-size: 24px; text-anchor: middle; dominant-baseline: middle; pointer-events: none;}

.ring-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    /* removed width/height 150px here so it can grow to fit the label */
}
.ring-label {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #888;
}