:root {
    --bg-color: #050508;
    --primary-glow: #00f3ff;
    /* Cyan */
    --secondary-glow: #bc13fe;
    /* Purple */
    --node-bg: rgba(255, 255, 255, 0.05);
    --node-border: rgba(255, 255, 255, 0.2);

    --font-display: 'Orbitron', sans-serif;
    --font-ui: 'Rajdhani', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: #fff;
    font-family: var(--font-ui);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 50% 50%, #1a1a3a 0%, #050508 70%);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 8, 0.95);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    transition: opacity 0.5s ease;
}

.overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.overlay-content {
    max-width: 700px;
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overlay-content h1 {
    font-family: var(--font-display);
    font-size: 3.5rem;
    margin-bottom: 25px;
    color: var(--primary-glow);
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

.overlay-content .description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.overlay-content .requirement {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--secondary-glow);
    border: 1px solid rgba(188, 19, 254, 0.3);
    padding: 8px 16px;
    margin-bottom: 40px;
    letter-spacing: 2px;
    border-radius: 4px;
    background: rgba(188, 19, 254, 0.05);
}

#start-btn {
    padding: 15px 40px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--primary-glow);
    color: var(--primary-glow);
    transition: 0.3s;
}

#start-btn:hover {
    background: var(--primary-glow);
    color: #000;
    box-shadow: 0 0 20px var(--primary-glow);
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

header {
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.back-link {
    font-family: var(--font-ui);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    font-size: 0.9rem;
    transition: 0.3s;
    text-transform: uppercase;
}

.back-link:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.version {
    font-size: 0.8rem;
    color: var(--secondary-glow);
    margin-left: 10px;
}

.status-panel {
    display: flex;
    gap: 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.status-item span {
    color: var(--primary-glow);
    margin-left: 8px;
}

/* SPHERE UI */
.instrument-interface {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.sphere-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.controllers-container {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

/* Update sphere container to be slightly smaller or responsive if needed, 
   but 500px is fine for large screens. */
.sphere-container {
    width: 400px;
    /* Reduced from 500px to better fit two side-by-side */
    height: 400px;
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.8));
    box-shadow:
        0 0 60px rgba(0, 243, 255, 0.05),
        inset 0 0 40px rgba(0, 0, 0, 0.8),
        inset 2px 2px 10px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CENTRAL CORE */
.core-node {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(188, 19, 254, 0.3);
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    transition: all 0.1s ease;
}

.core-inner {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(188, 19, 254, 0.2), transparent);
    opacity: 0.5;
}

.core-node.pulse {
    transform: scale(0.95);
    border-color: var(--secondary-glow);
    box-shadow: 0 0 50px rgba(188, 19, 254, 0.5);
}

.core-node.pulse .core-inner {
    background: radial-gradient(circle, rgba(188, 19, 254, 0.8), transparent);
    opacity: 1;
}

.core-node.kick-pulse {
    transform: scale(1.1);
    border-color: #fff;
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
}

.core-node.kick-pulse .core-inner {
    background: radial-gradient(circle, #fff, transparent);
    opacity: 1;
}

/* RADIAL NODES */
.node-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: spinAppearance 1s ease-out;
    pointer-events: none;
    /* Let clicks pass through if needed, but we put pointer events on note-node */
}

/* Mathematics for pentagon positions:
   Radius is roughly 150px-180px?
   Container width 500px, radius 250px.
   Node placement radius approx 160px from center.
   
   Rotation:
   Nodes at 0, 72, 144, 216, 288 degrees.
   Start at -90deg (top) for first node? Or standard geometric.
   Let's place them evenly.
*/

.node-wrapper {
    transform: rotate(calc(var(--i) * 72deg - 90deg));
    /* -90deg offset puts the first item (i=0) at the TOP */
    display: flex;
    justify-content: center;
    /* Centers items horizontally */
}

.note-node {
    /* Translate it OUT from the center to the rim */
    margin-top: 40px;
    /* Adjust distance from edge or center? */
    /* Wait, the wrapper rotates, if I position absolute inside... */
    /* Easier: wrapper rotates, child translates along Y axis? 
       Actually, standard "clock" layout: 
    */
    position: absolute;
    top: 50px;
    /* Distance from outer edge of circle toward center */
    /* Correct approach: 
       Wrapper is 500x500 centered. 
       We want node at radius R.
       Just use translateX in the wrapper? No.
       
       Let's assume the wrapper rotates the coordinate system.
       Position an element at (Radius, 0)
    */
    right: 50px;
    /* Aligns to right edge of rotated wrapper? NO. */

    /* Let's try transform on child */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 243, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;

    /* Rotate the node BACK so text is upright */
    transform: rotate(calc((var(--i) * 72deg - 90deg) * -1));

    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    transition: all 0.1s;
}

/* Positioning fix: The wrapper is full size.
   If I rotate the wrapper, the top is 0deg.
   To place item at top edge:
   top: 40px; left: 50% transform: translateX(-50%);
*/
.node-wrapper {
    /* Reset layout */
    display: block;
}

.note-node {
    position: absolute;
    left: 50%;
    top: 60px;
    /* Distance from outer rim to center is 250px radius. 
                  So 60px from top puts it at radius ~190px */
    transform-origin: center center;
    transform: translateX(-50%) rotate(calc((var(--i) * 72deg - 90deg) * -1));
}


.note-node .note-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dim);
}

.note-node.active {
    background: rgba(0, 243, 255, 0.2);
    border-color: var(--primary-glow);
    box-shadow:
        0 0 30px rgba(0, 243, 255, 0.4),
        inset 0 0 10px rgba(0, 243, 255, 0.6);
    transform: translateX(-50%) rotate(calc((var(--i) * 72deg - 90deg) * -1)) scale(1.1);
}

.note-node.active .note-label {
    color: #fff;
    text-shadow: 0 0 10px #fff;
}


/* OCTAVE BTNS */
.octave-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    transition: 0.2s;
    background: rgba(0, 0, 0, 0.3);
}

.octave-btn:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.octave-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    transform: scale(0.95);
}

.instructions {
    margin-top: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
    .sphere-container {
        width: 320px;
        height: 320px;
    }

    .core-node {
        width: 80px;
        height: 80px;
    }

    .note-node {
        width: 60px;
        height: 60px;
        top: 30px;
    }

    .sphere-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .octave-btn {
        width: 50px;
        height: 50px;
    }
}

/* Header Controls */
.header-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-btn {
    background: transparent;
    border: 1px solid var(--primary-glow);
    color: var(--primary-glow);
    padding: 8px 20px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
}

.nav-btn:hover {
    background: var(--primary-glow);
    color: #000;
    box-shadow: 0 0 15px var(--primary-glow);
}

/* Controls Modal */
.controls-modal {
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid var(--primary-glow);
    padding: 40px;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.2);
    /* Ensure text is selectable/readable */
    color: #fff;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.close-btn:hover {
    color: var(--secondary-glow);
}

.controls-modal h2 {
    font-family: var(--font-display);
    text-align: center;
    color: var(--primary-glow);
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.control-group {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.control-group h3 {
    font-family: var(--font-display);
    color: var(--secondary-glow);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.control-group p {
    font-family: var(--font-ui);
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    font-size: 0.8rem;
}

.key-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.key-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.key-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.key {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 10px;
    border-radius: 4px;
    font-family: var(--font-display);
    color: #fff;
    min-width: 30px;
    display: inline-block;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Footer Copyright */
.footer-copyright {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.2);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* BPM Control */
.bpm-control {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    color: rgba(255, 255, 255, 0.4);
    transition: opacity 0.3s;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bpm-control:hover {
    color: rgba(243, 243, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

.bpm-control label {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bpm-control input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--primary-glow);
    font-family: var(--font-display);
    font-size: 1rem;
    width: 60px;
    text-align: center;
    padding: 2px;
}

.bpm-control input:focus {
    outline: none;
    border-color: var(--primary-glow);
}

/* Chrome/Safari/Edge - Remove spin buttons */
.bpm-control input::-webkit-outer-spin-button,
.bpm-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.bpm-control input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Morphing Styles */
.nav-btn.morph-highlight {
    border-color: var(--secondary-glow);
    color: var(--secondary-glow);
    position: relative;
    overflow: hidden;
}

.nav-btn.morph-highlight:hover {
    background: var(--secondary-glow);
    color: #fff;
    box-shadow: 0 0 20px var(--secondary-glow);
}

.nav-btn.active {
    background: var(--primary-glow);
    color: #000;
    box-shadow: 0 0 20px var(--primary-glow);
}

.status-panel {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

#morph-display {
    color: var(--secondary-glow);
    font-weight: 700;
}

.morph-glow {
    animation: morphPulse 0.5s ease-out;
}

@keyframes morphPulse {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    50% {
        filter: hue-rotate(90deg) brightness(2);
    }

    100% {
        filter: hue-rotate(0deg) brightness(1);
    }
}