/*


 * Calm Chaos - Styles


 *


 * @author      Mike Fairbrother


 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.


 */





/* ---- Title & Logo ---- */


.cc-title {


    font-size: 52px;


    font-weight: 900;


    line-height: 1;


    margin-bottom: 6px;


    background: linear-gradient(135deg, #ff6b6b, #ffd93d, #2ed573, #45b7ff, #a66bff);


    background-size: 200% 200%;


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    animation: cc-title-shift 6s ease-in-out infinite;


}


@keyframes cc-title-shift {


    0%, 100% { background-position: 0% 50%; }


    50% { background-position: 100% 50%; }


}





.cc-subtitle {


    color: var(--gp-text-secondary);


    font-size: 15px;


    font-weight: 500;


    margin-bottom: 24px;


    letter-spacing: 0.5px;


}





.cc-logo {


    position: relative;


    width: 120px;


    height: 120px;


    margin: 0 auto 16px;


}


.cc-logo-orb {


    position: absolute;


    border-radius: 50%;


    animation: cc-logo-float 4s ease-in-out infinite;


}


.cc-logo-orb-1 {


    width: 36px; height: 36px;


    background: radial-gradient(circle at 35% 35%, #ff9a9e, #ff6b6b);


    top: 10px; left: 10px;


    animation-delay: 0s;


}


.cc-logo-orb-2 {


    width: 28px; height: 28px;


    background: radial-gradient(circle at 35% 35%, #ffe066, #ffd93d);


    top: 5px; right: 18px;


    animation-delay: 0.6s;


}


.cc-logo-orb-3 {


    width: 32px; height: 32px;


    background: radial-gradient(circle at 35% 35%, #6bffa6, #2ed573);


    bottom: 25px; left: 42px;


    animation-delay: 1.2s;


}


.cc-logo-orb-4 {


    width: 24px; height: 24px;


    background: radial-gradient(circle at 35% 35%, #74b9ff, #45b7ff);


    bottom: 10px; left: 8px;


    animation-delay: 1.8s;


}


.cc-logo-orb-5 {


    width: 30px; height: 30px;


    background: radial-gradient(circle at 35% 35%, #c9a6ff, #a66bff);


    bottom: 8px; right: 12px;


    animation-delay: 2.4s;


}


@keyframes cc-logo-float {


    0%, 100% { transform: translate(0, 0) scale(1); }


    25% { transform: translate(4px, -6px) scale(1.05); }


    50% { transform: translate(-3px, -10px) scale(0.95); }


    75% { transform: translate(5px, -4px) scale(1.02); }


}





/* ---- Menu ---- */


.cc-best-score {


    font-size: 14px;


    color: var(--gp-text-secondary);


    margin-bottom: 20px;


    font-weight: 600;


}


.cc-best-score span {


    color: var(--gp-accent);


}





.cc-difficulty-selector {


    display: flex;


    gap: 8px;


    margin-bottom: 20px;


}


.cc-diff-btn {


    padding: 8px 18px;


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


    border-radius: var(--gp-radius-sm);


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


    color: var(--gp-text-secondary);


    font-size: 13px;


    font-weight: 700;


    cursor: pointer;


    transition: all 0.2s ease;


    font-family: var(--gp-font-stack);


}


.cc-diff-btn.active {


    background: linear-gradient(135deg, rgba(255,217,61,0.15), rgba(255,159,67,0.15));


    border-color: var(--gp-accent);


    color: var(--gp-accent);


}





.cc-menu-row {


    margin-top: 16px;


    display: flex;


    gap: 12px;


    justify-content: center;


}





/* ---- Game Area ---- */


#game-area {


    position: relative;


    flex: 1;


    overflow: hidden;


    touch-action: none;


}





/* ---- Zones ---- */


.cc-zone {


    position: absolute;


    border-radius: 50%;


    border: 2px dashed rgba(255,255,255,0.2);


    display: flex;


    align-items: center;


    justify-content: center;


    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;


    z-index: 1;


}


.cc-zone-label {


    font-size: 10px;


    font-weight: 700;


    text-transform: uppercase;


    letter-spacing: 1px;


    color: rgba(255,255,255,0.35);


    pointer-events: none;


}


.cc-zone.cc-zone-highlight {


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


    transform: scale(1.04);


}


.cc-zone.cc-zone-full {


    border-style: solid;


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


    box-shadow: 0 0 30px var(--zone-glow), inset 0 0 20px var(--zone-glow);


    animation: cc-zone-pulse 3s ease-in-out infinite;


}


@keyframes cc-zone-pulse {


    0%, 100% { box-shadow: 0 0 20px var(--zone-glow), inset 0 0 15px var(--zone-glow); }


    50% { box-shadow: 0 0 35px var(--zone-glow), inset 0 0 25px var(--zone-glow); }


}





/* ---- Orbs ---- */


.cc-orb {


    position: absolute;


    border-radius: 50%;


    cursor: grab;


    z-index: 10;


    transition: box-shadow 0.3s, transform 0.15s;


    will-change: transform;


    touch-action: none;


}


.cc-orb::after {


    content: '';


    position: absolute;


    top: 18%;


    left: 22%;


    width: 30%;


    height: 25%;


    background: radial-gradient(ellipse, rgba(255,255,255,0.55), transparent);


    border-radius: 50%;


    pointer-events: none;


}


.cc-orb.cc-orb-floating {


    animation: cc-orb-drift var(--drift-duration, 4s) ease-in-out infinite;


    animation-delay: var(--drift-delay, 0s);


}


@keyframes cc-orb-drift {


    0%, 100% { transform: translate(0, 0) rotate(0deg); }


    25% { transform: translate(var(--dx1, 5px), var(--dy1, -8px)) rotate(3deg); }


    50% { transform: translate(var(--dx2, -4px), var(--dy2, -12px)) rotate(-2deg); }


    75% { transform: translate(var(--dx3, 6px), var(--dy3, -5px)) rotate(4deg); }


}





.cc-orb.cc-orb-dragging {


    cursor: grabbing;


    z-index: 100;


    animation: none !important;


    box-shadow: 0 0 25px var(--orb-glow), 0 8px 32px rgba(0,0,0,0.4);


    transform: scale(1.15);


}





.cc-orb.cc-orb-sorted {


    cursor: default;


    animation: none !important;


    box-shadow: 0 0 18px var(--orb-glow), 0 0 40px var(--orb-glow-wide);


    z-index: 5;


}


.cc-orb.cc-orb-sorted::before {


    content: '';


    position: absolute;


    inset: -4px;


    border-radius: 50%;


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


    animation: cc-sorted-ring 2s ease-in-out infinite;


}


@keyframes cc-sorted-ring {


    0%, 100% { transform: scale(1); opacity: 0.6; }


    50% { transform: scale(1.15); opacity: 0.2; }


}





.cc-orb.cc-orb-reject {


    animation: cc-reject-shake 0.4s ease !important;


}


@keyframes cc-reject-shake {


    0%, 100% { transform: translateX(0); }


    20% { transform: translateX(-8px); }


    40% { transform: translateX(8px); }


    60% { transform: translateX(-5px); }


    80% { transform: translateX(5px); }


}





/* ---- Timer Bar ---- */


#level-timer {


    height: 3px;


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


    position: relative;


}


#level-timer-bar {


    height: 100%;


    background: linear-gradient(90deg, #2ed573, #ffd93d, #ff6b6b);


    width: 100%;


    transition: width 0.5s linear;


    border-radius: 0 2px 2px 0;


}





/* ---- Level Complete ---- */


.cc-harmony-title {


    background: linear-gradient(135deg, #ff6b6b, #ffd93d, #2ed573, #45b7ff, #a66bff);


    background-size: 200% 200%;


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    animation: cc-title-shift 3s ease-in-out infinite;


    font-size: 36px;


}





.cc-harmony-burst {


    position: absolute;


    width: 200px;


    height: 200px;


    border-radius: 50%;


    background: radial-gradient(circle, rgba(255,217,61,0.15), transparent 70%);


    animation: cc-burst-pulse 2s ease-in-out infinite;


    pointer-events: none;


}


@keyframes cc-burst-pulse {


    0%, 100% { transform: scale(1); opacity: 0.6; }


    50% { transform: scale(1.3); opacity: 0.3; }


}





.cc-level-stats {


    display: flex;


    gap: 20px;


    margin: 16px 0 24px;


}


.cc-level-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.cc-level-stat-label {


    font-size: 10px;


    color: var(--gp-text-secondary);


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


}


.cc-level-stat-value {


    font-size: 24px;


    font-weight: 800;


    color: var(--gp-accent);


}





/* ---- Complete Screen ---- */


.cc-complete-glow {


    position: absolute;


    top: 10%;


    left: 50%;


    transform: translateX(-50%);


    width: 300px;


    height: 300px;


    border-radius: 50%;


    background: radial-gradient(circle,


        rgba(255,107,107,0.08),


        rgba(255,217,61,0.06),


        rgba(46,213,115,0.04),


        transparent 70%);


    animation: cc-burst-pulse 4s ease-in-out infinite;


    pointer-events: none;


}





.cc-complete-title {


    font-size: 36px;


    font-weight: 900;


    background: linear-gradient(135deg, #ff6b6b, #ffd93d, #2ed573, #45b7ff, #a66bff);


    background-size: 200% 200%;


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    animation: cc-title-shift 4s ease-in-out infinite;


    margin-bottom: 4px;


}





.cc-complete-sub {


    color: var(--gp-text-secondary);


    font-size: 14px;


    margin-bottom: 28px;


}





.cc-final-stats {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 16px;


    margin-bottom: 24px;


    width: 100%;


    max-width: 280px;


}


.cc-final-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


    padding: 14px 8px;


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


    border-radius: var(--gp-radius-md);


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


}


.cc-final-stat-value {


    font-size: 28px;


    font-weight: 800;


    color: var(--gp-accent);


    line-height: 1.1;


}


.cc-final-stat-label {


    font-size: 10px;


    color: var(--gp-text-secondary);


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


    margin-top: 4px;


}





.cc-new-best {


    font-size: 16px;


    font-weight: 800;


    color: var(--gp-accent);


    margin-bottom: 20px;


    animation: gp-badge-pop 0.5s ease forwards;


    text-shadow: 0 0 20px var(--gp-accent-glow);


}





/* ---- Help Modal ---- */


.cc-help-body {


    display: flex;


    flex-direction: column;


    gap: 16px;


    text-align: left;


}


.cc-help-step {


    display: flex;


    align-items: flex-start;


    gap: 14px;


}


.cc-help-icon {


    font-size: 24px;


    flex-shrink: 0;


    width: 36px;


    text-align: center;


}


.cc-help-step p {


    font-size: 14px;


    color: var(--gp-text-secondary);


    line-height: 1.5;


}





/* ---- Harmony Particles ---- */


.cc-particle {


    position: absolute;


    border-radius: 50%;


    pointer-events: none;


    z-index: 200;


}





/* ---- Orb snap animation ---- */


.cc-orb.cc-orb-snapping {


    transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),


                top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),


                box-shadow 0.4s ease;


    animation: none !important;


}





/* ---- Sound muted indicator ---- */


.cc-muted {


    opacity: 0.5;


}





/* ---- Responsive ---- */


@media (max-height: 600px) {


    .cc-title { font-size: 40px; }


    .cc-logo { width: 90px; height: 90px; margin-bottom: 10px; }


    .gp-screen-content { padding: 20px 16px; }


}