html,
 body {
     margin: 0;
     padding: 0;
     background: #111418;
     color: #e8ecf1;
     font-family: Arial, Helvetica, sans-serif;
     overflow: hidden;
     width: 100%;
     height: 100%;
 }

 #app {
     position: relative;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
 }

 #game {
     width: 100%;
     height: 100%;
 }

 #uiOverlay {
     position: absolute;
     top: 16px;
     left: 16px;
     right: 16px;
     z-index: 10;
     pointer-events: none;
 }

 #clearBtn {
     height: 40px;
     padding: 0 14px;
     border: 1px solid #415063;
     border-radius: 8px;
     background: #3a4452;
     color: #eef3f8;
     font-size: 14px;
     cursor: pointer;
     transition: 0.2s;
 }

 #clearBtn:hover {
     background: #4a5666;
 }

 #toolbar {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
     background: rgba(26, 31, 38, 0.94);
     border: 1px solid #34404f;
     border-radius: 12px;
     padding: 12px;
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
     pointer-events: auto;
 }

 #title {
     font-size: 22px;
     font-weight: 700;
     margin-right: 12px;
     color: #f4f7fb;
     white-space: nowrap;
 }

 #searchInput,
 #genreSelect,
 #settingSelect,
 #sortSelect {
     height: 40px;
     border: 1px solid #415063;
     border-radius: 8px;
     background: #27303b;
     color: #eef3f8;
     font-size: 15px;
     padding: 0 12px;
     outline: none;
 }

 #searchInput {
     min-width: 260px;
     flex: 1 1 260px;
 }

 #genreSelect,
 #settingSelect,
 #sortSelect {
     min-width: 160px;
     flex: 0 0 auto;
 }

 #songCount {
     margin-left: auto;
     font-size: 14px;
     color: #b4beca;
     white-space: nowrap;
 }

 @media (max-width: 900px) {
     #songCount {
         width: 100%;
         margin-left: 0;
     }

     #title {
         width: 100%;
     }
 }
