.closebutton {
    cursor: pointer;
    background:#ff5f56;
    color:white;
    border-radius:50%;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content: center;
    font-size:12px;
}
.window{
    position:absolute;
    top:150px;
    left:35%;
    padding: 17px;
    border:solid;
    width:450px;
    border-radius:17px;
    background-color: rgba(0,0,0,0.4);
    box-sizing:border-box;
}
.windowheader{
    background:rgba(250,128,114,0.3);
    padding: 5px;
    margin:0;
    cursor:move;
    font-weight:bold;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.selected{
    border-color:rgba(250,128,114,0.8) !important;
    background:rgba(250,128,114,0.25) !important;
    box-shadow:0 0 12px rgba(250,128,114,0.5);
}
#desktopApps div{
    transition:all 0.2s ease;
    cursor:pointer;
}
#robotics{
    width:750px !important;
    height:520px !important;
    background-color:rgba(20,20,30,0.9);
    top:120px;
    left:25%;
}
.sidebar-tab{
    background:rgba(250,128,114,0.1);
    padding:10px;
    border-radius:8px;
    cursor:pointer;
    border:1px solid rgba(250,128,114,0.2);
    transition:all 0.2s ease-in-out;
}
.sidebar-tab.active-tab{
    background:rgba(250,128,114,0.4);
    border-color:rgba(250,128,114,0.9);
    box-shadow:0 0 8px rgba(250,128,114,0.4);
}
.project-card{
    background:rgba(255,255,255,0.05);
    border-left:4px solid salmon;
    padding:12px;
    margin:12px 0;
    border-radius:4px;
}
.goal-card{
    background:rgba(0,255,150,0.05);
    border-left:4px solid#00ff96;
    padding:12px;
    margin:12px 0;
    border-radius:4px;
}
.sidebar-tab:hover{
    background:rgba(250,128,114,0.25);
    border-color:rgba(250,128,114,0.6);
    transform:scale(1.02);
}
#adventureApp{
    width:880px!important;
    height:600px!important;
    background-color:rgba(20,20,30,0.9);
    top:90px;
    left:15%;
    overflow:hidden!important;
}
#adventureContent{
    overflow-y:auto!important;
    height:100%!important;
    padding-bottom:20px;
}
.wheel-container{
    width:260px;
    height:260px;
    border-radius:50%;
    border:6px solid #fff;
    position:relative;
    overflow:hidden;
    background:linear-gradient(90deg,salmon 50%,#00ff96 50%);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition:transform 3s cubic-bezier(0.1,0.8,0.3,1);
}
.wheel-center-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:65px;
    height:65px;
    background:#1e293b;
    border:3px solid #fff;
    border-radius:50%;
    color:#38bdf8;
    font-weight:bold;
    font-size:12px;
    cursor:pointer;
    display:flex;
    align-items:center;
    box-shadow:0 4px 10px rgba(0,0,0,0.4);
    z-index:99;
    transition:transform 0.1s;
}
.wheel-center-btn-active{
    transform:translate(-50%,-50%) scale(0.92);
}
.wheel-pointer{
    width:0;
    height:0;
    border-left:14px solid transparent;
    border-right:14px solid transparent;
    border-top:20px solid #fff;
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%);
    z-index:102;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
#musicApp{
    width:440px!important;
    height:560px!important;
    background-color:rgba(25,20,20,0.95);
    top:100px;
    left:40%;
}
.vinyl-disc{
    width:200px;
    height:200px;
    border-radius:50%;
    background:
        radial-gradient(circle,#262626 2px,#0d0d0d 4px,#1a1a1a 8px,#000 20px,#111 40px,#000 80px),
        conic-gradient(from 0deg,#111 0deg,#333 45deg,#111 90deg,#333 135deg,#111 180deg, #333 225deg,#111 270deg,#333 315deg,#111 360deg);
    position:relative;
    box-shadow:0 8px 25px rgba(0,0,0,0.6),inset 0 0 4px rgba(255,255,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    animation:spinRecord 4s linear infinite;
    animation-play-state:paused;
}
.vinyl-disc::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:2px;
    height:100%;
    background:linear-gradient(to bottom,rgba(255,255,255,0.4) 0%,transparent 40%,transparent 60%,rgba(255,255,255,0.4)100%);
    z-index:3;
    pointer-events:none;
}
.vinyl-center-label{
    width:60px;
    height:60px;
    border-radius:50%;
    background-color:salmon;
    display:flex;
    align-items:center;
    font-size:24px;
    border:3px solid #111;
    box-shadow:inset 0 0 8px rgba(0,0,0,0.5);
    color:#fff;
}
.turntable-arm{
    position:absolute;
    top:20px;
    right:65px;
    width:12px;
    height:155px;
    background:linear-gradient(90deg,#888,#ddd,#555);
    border-radius:4px;
    transform:rotate(0deg);
    transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
    z-index:5;
    box-shadow:-4px 4px 10px rgba(0,0,0,0.4);
}
.turntable-arm::after{
    content:"";
    position:absolute;
    bottom:0;
    left:-5px;
    width:25px;
    height:15px;
    background:#222;
    border-radius:2px;
    border:1px solid #666;
}
.music-btn, .music-btn-main{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    color:white;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s;
    text-shadow:none;
}
.music-btn{
    width:45px;
    height:45px;
    font-size:16px;
}
.music-btn-main{
    width:60px;
    height:60px;
    font-size:24px;
    background:salmon;
    border-color: rgba(255,255,255,0.2);
    box-shadow:0 4px 12px rgba(250,128,114,0.4);
}
.music-btn:hover,.music-btn-main:hover{
    transform:scale(1.06);
}
.music-btn:active,.music-btn-main:active{
    transform:scale(0.95);
}
@keyframes spinRecord{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}