/* =========================================================
   RHYTHMCREST — CIRCLE OF FIFTHS
   Music App UI
   ========================================================= */

.rhythmcrest-circle-app {
    --bg-1: #11152f;
    --bg-2: #1d1740;
    --panel: rgba(255, 255, 255, 0.08);
    --panel-border: rgba(255, 255, 255, 0.14);

    --text: #ffffff;
    --muted: #aeb4d0;

    --major: #ffd84d;
    --major-hover: #ffe77d;
    --major-selected: #ff9f1c;

    --minor: #58c7ff;
    --minor-hover: #86d9ff;
    --minor-selected: #9b6cff;

    --family: #8f7cff;

    width: 100%;
    max-width: 1100px;

    min-height: min(680px, 92vh);

    margin: 20px auto;

    padding: 18px;

    box-sizing: border-box;

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(112, 78, 255, 0.25),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(0, 201, 255, 0.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--bg-1),
            var(--bg-2)
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.12);
}


/* =========================================================
   APP HEADER
   ========================================================= */

.rc-app-header {
    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 4px 8px 15px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);
}


.rc-brand {
    display: flex;

    align-items: center;

    gap: 11px;
}


.rc-brand-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #ffd84d,
            #ff9f1c
        );

    color: #15162f;

    font-size: 21px;

    font-weight: 900;

    box-shadow:
        0 5px 18px rgba(255, 191, 0, 0.25);
}


.rc-brand-name {
    font-size: 17px;

    font-weight: 800;

    letter-spacing: 0.2px;
}


.rc-brand-subtitle {
    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.rc-tool-title {
    color: #dfe3ff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =========================================================
   MAIN APP BODY
   ========================================================= */

.rc-app-body {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(270px, 0.85fr);

    align-items: center;

    gap: 18px;

    min-height: 0;

    padding: 12px 0;
}


/* =========================================================
   CIRCLE SECTION
   ========================================================= */

.rc-circle-section {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;
}


.rc-circle-wrapper {
    position: relative;

    width: min(
        520px,
        100%
    );

    max-width: 520px;

    aspect-ratio: 1 / 1;

    margin: 0 auto;
}


.rc-circle-svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;

    user-select: none;
}


/* =========================================================
   CIRCLE SEGMENTS
   ========================================================= */

.rc-major-segment {
    fill: var(--major);

    stroke: rgba(17, 21, 47, 0.8);

    stroke-width: 3;

    cursor: pointer;

    transition:
        fill 0.16s ease,
        filter 0.16s ease,
        transform 0.16s ease;
}


.rc-minor-segment {
    fill: var(--minor);

    stroke: rgba(17, 21, 47, 0.8);

    stroke-width: 3;

    cursor: pointer;

    transition:
        fill 0.16s ease,
        filter 0.16s ease,
        transform 0.16s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.rc-major-group:hover .rc-major-segment {
    fill: var(--major-hover);

    filter:
        drop-shadow(
            0 0 12px
            rgba(255, 216, 77, 0.65)
        );
}


.rc-minor-group:hover .rc-minor-segment {
    fill: var(--minor-hover);

    filter:
        drop-shadow(
            0 0 12px
            rgba(88, 199, 255, 0.65)
        );
}


/* =========================================================
   KEY LABELS
   ========================================================= */

.rc-key-label {
    pointer-events: none;

    text-anchor: middle;

    dominant-baseline: middle;

    fill: #15162f;

    font-family: inherit;

    user-select: none;
}


.rc-major-label {
    font-size: 25px;

    font-weight: 900;
}


.rc-minor-label {
    font-size: 17px;

    font-weight: 800;
}


/* =========================================================
   SELECTED KEY
   ========================================================= */

.rc-selected .rc-major-segment {
    fill: var(--major-selected);

    stroke: #ffffff;

    stroke-width: 5;

    filter:
        drop-shadow(
            0 0 15px
            rgba(255, 159, 28, 0.8)
        );
}


.rc-selected .rc-minor-segment {
    fill: var(--minor-selected);

    stroke: #ffffff;

    stroke-width: 5;

    filter:
        drop-shadow(
            0 0 15px
            rgba(155, 108, 255, 0.8)
        );
}


.rc-selected .rc-key-label {
    fill: #ffffff;
}


/* =========================================================
   FAMILY HIGHLIGHT
   ========================================================= */

.rc-family-member .rc-major-segment,
.rc-family-member .rc-minor-segment {
    filter:
        brightness(1.06)
        drop-shadow(
            0 0 7px
            rgba(143, 124, 255, 0.45)
        );
}


/* =========================================================
   RELATIVE KEY
   ========================================================= */

.rc-relative .rc-major-segment,
.rc-relative .rc-minor-segment {
    stroke: #ffffff;

    stroke-width: 4;
}


/* =========================================================
   CHORD ROOT
   ========================================================= */

.rc-chord-root .rc-major-segment,
.rc-chord-root .rc-minor-segment {
    stroke: #ffffff;

    stroke-width: 7;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255, 255, 255, 0.65)
        );
}


/* =========================================================
   CENTER
   ========================================================= */

.rc-center-background {
    fill:
        rgba(
            12,
            15,
            40,
            0.96
        );

    stroke:
        rgba(
            255,
            255,
            255,
            0.2
        );

    stroke-width: 2;

    filter:
        drop-shadow(
            0 8px 20px
            rgba(0, 0, 0, 0.35)
        );
}


.rc-center-label {
    fill: #9ea5c7;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-anchor: middle;

    pointer-events: none;
}


.rc-center-key {
    fill: #ffffff;

    font-size: 39px;

    font-weight: 900;

    text-anchor: middle;

    pointer-events: none;
}


/* =========================================================
   LEGEND
   ========================================================= */

.rc-circle-legend {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-top: -3px;
}


.rc-legend-item {
    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 600;
}


.rc-legend-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.rc-legend-major {
    background: var(--major);
}


.rc-legend-minor {
    background: var(--minor);
}


/* =========================================================
   CONTROL PANEL
   ========================================================= */

.rc-control-panel {
    min-width: 0;

    padding: 22px;

    box-sizing: border-box;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.055)
        );

    border:
        1px solid
        var(--panel-border);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.08),
        0 15px 40px
        rgba(0, 0, 0, 0.16);

    backdrop-filter: blur(16px);
}


/* =========================================================
   SELECTED KEY
   ========================================================= */

.rc-selected-label {
    color: var(--muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.rc-selected-key {
    margin-top: 5px;

    font-size: 45px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1px;
}


.rc-selected-type {
    margin-top: 5px;

    color: #bfc5df;

    font-size: 13px;
}


/* =========================================================
   FAMILY
   ========================================================= */

.rc-family-title {
    margin-top: 23px;

    font-size: 18px;

    font-weight: 800;
}


.rc-family-description {
    margin: 6px 0 15px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.45;
}


.rc-chord-family {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;
}


.rc-family-chord {
    min-width: 0;

    padding: 10px 5px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    color: #ffffff;

    cursor: pointer;

    font-family: inherit;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.rc-family-chord:hover {
    transform: translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    box-shadow:
        0 6px 16px
        rgba(0, 0, 0, 0.18);
}


.rc-family-chord-name {
    display: block;

    font-size: 16px;

    font-weight: 800;
}


.rc-family-degree {
    display: block;

    margin-top: 3px;

    color: #939ab9;

    font-size: 9px;
}


.rc-chord-selected {
    background:
        linear-gradient(
            135deg,
            #8f7cff,
            #6247db
        ) !important;

    border-color:
        rgba(
            255,
            255,
            255,
            0.45
        ) !important;

    box-shadow:
        0 0 18px
        rgba(
            143,
            124,
            255,
            0.35
        );
}


.rc-chord-selected .rc-family-degree {
    color: #e3dfff;
}


/* =========================================================
   RELATED KEYS
   ========================================================= */

.rc-related-keys {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 17px;
}


.rc-related-box {
    padding: 10px;

    border-radius: 9px;

    background:
        rgba(
            0,
            0,
            0,
            0.12
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );
}


.rc-related-label {
    display: block;

    color: #8f96b4;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.rc-related-value {
    display: block;

    margin-top: 3px;

    font-size: 17px;

    font-weight: 800;
}


/* =========================================================
   RESET BUTTON
   ========================================================= */

.rc-reset {
    width: 100%;

    margin-top: 17px;

    padding: 10px 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    color: #d9ddf1;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.rc-reset:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.28
        );
}


/* =========================================================
   FOOTER
   ========================================================= */

.rc-app-footer {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 26px;

    color: #858ba8;

    font-size: 10px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    letter-spacing: 0.2px;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.rc-key-segment:focus-visible {
    outline: none;
}


.rc-key-segment:focus-visible + .rc-key-label {
    fill: #ffffff;
}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (max-height: 760px) and (min-width: 701px) {

    .rhythmcrest-circle-app {
        min-height: 0;

        margin: 10px auto;

        padding: 12px;

        border-radius: 20px;
    }


    .rc-app-header {
        min-height: 45px;

        padding-bottom: 10px;
    }


    .rc-circle-wrapper {
        width: min(
            430px,
            70vh
        );
    }


    .rc-control-panel {
        padding: 17px;
    }


    .rc-selected-key {
        font-size: 38px;
    }


    .rc-family-title {
        margin-top: 15px;
    }


    .rc-related-keys {
        margin-top: 11px;
    }


    .rc-reset {
        margin-top: 11px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .rhythmcrest-circle-app {
        max-width: 680px;

        min-height: 0;

        padding: 15px;
    }


    .rc-app-body {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(235px, 0.75fr);

        gap: 12px;
    }


    .rc-circle-wrapper {
        width: min(
            430px,
            100%
        );
    }


    .rc-control-panel {
        padding: 17px;
    }


    .rc-major-label {
        font-size: 22px;
    }


    .rc-minor-label {
        font-size: 15px;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px) {

    .rhythmcrest-circle-app {
        width: 100%;

        min-height: 0;

        margin: 0;

        padding: 10px;

        border-radius: 18px;
    }


    .rc-app-header {
        min-height: 40px;

        padding-bottom: 9px;
    }


    .rc-brand-icon {
        width: 32px;
        height: 32px;

        font-size: 17px;
    }


    .rc-brand-name {
        font-size: 14px;
    }


    .rc-brand-subtitle {
        font-size: 8px;
    }


    .rc-tool-title {
        font-size: 9px;
    }


    .rc-app-body {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 8px 0;
    }


    .rc-circle-wrapper {
        width: min(
            88vw,
            390px
        );
    }


    .rc-control-panel {
        padding: 13px;

        border-radius: 15px;
    }


    .rc-selected-key {
        font-size: 32px;
    }


    .rc-family-title {
        margin-top: 11px;

        font-size: 15px;
    }


    .rc-family-description {
        margin-bottom: 9px;

        font-size: 10px;
    }


    .rc-chord-family {
        grid-template-columns:
            repeat(7, minmax(0, 1fr));

        gap: 4px;
    }


    .rc-family-chord {
        padding: 7px 2px;

        border-radius: 7px;
    }


    .rc-family-chord-name {
        font-size: 12px;
    }


    .rc-family-degree {
        font-size: 7px;
    }


    .rc-related-keys {
        margin-top: 9px;

        gap: 5px;
    }


    .rc-related-box {
        padding: 7px;
    }


    .rc-related-value {
        font-size: 14px;
    }


    .rc-reset {
        margin-top: 8px;

        padding: 7px;
    }


    .rc-app-footer {
        min-height: 21px;

        font-size: 8px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .rhythmcrest-circle-app {
        padding: 7px;
    }


    .rc-circle-wrapper {
        width: 91vw;
    }


    .rc-major-label {
        font-size: 19px;
    }


    .rc-minor-label {
        font-size: 13px;
    }


    .rc-center-key {
        font-size: 29px;
    }


    .rc-center-label {
        font-size: 8px;
    }


    .rc-control-panel {
        padding: 10px;
    }


    .rc-selected-key {
        font-size: 28px;
    }


    .rc-family-chord-name {
        font-size: 11px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .rc-major-segment,
    .rc-minor-segment,
    .rc-family-chord,
    .rc-reset {
        transition: none;
    }

}