/* Global Styles */
:root{--bg:#0a0a0e;--ink:#f5f5f7;--muted:#c8c8d2;--accent:#ffd166;--community-color:#38bdf8;--skill-color:#ef4444;--glass:rgba(26,26,34,.34);--glass-strong:rgba(23,23,30,.40);--border:#4b4b55;--hdr:72px}*{box-sizing:border-box}html,body{overflow-x:hidden;width:100%}body{margin:0;background:var(--bg);color:var(--ink);font:clamp(14px,1.6vw,16px)/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%;user-select:none;-webkit-user-select:none;transition:background 500ms ease}

/* HERO UPDATE: Center Video with Black Fallback */
#hero {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100dvh; /* Fixes centering on mobile browsers with dynamic URL bars */
    background-color: #000000; /* Pure black fallback if video fails */
    overflow: hidden;
}

#hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Scales video to fill container while maintaining aspect ratio */
    object-position: center center; /* Centers the video content */
    display: block;
    opacity: 0.6; /* Optional: Slight dim to make text pop, adjust as needed */
}

#hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 700px at 50% 8%,rgba(0,0,0,0.05),rgba(0,0,0,0.3)),linear-gradient(to bottom,rgba(8,8,12,.25),rgba(8,8,12,.55));backdrop-filter:blur(1px);transition:background 260ms ease}

.app{position:relative;z-index:1}header{position:sticky;top:0;z-index:7;background:rgba(10,10,14,.55);backdrop-filter:blur(10px);border-bottom:1px solid #24242e;height:var(--hdr);display:flex;align-items:center}.wrap{max-width:min(1100px,100%);width:100%;margin:0 auto;padding:0 18px}@media (max-width:640px){.wrap{padding:0 12px}}.logo{margin:0;font-family:"Oswald","Anton","Bebas Neue","Arial Black",Impact,Haettenschweiler,sans-serif;font-weight:900;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(22px,6vw,36px);cursor:pointer}.row{display:flex;gap:10px;align-items:center;height:100%}.btn{background:#22232b;color:var(--ink);border:1px solid #333547;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}.btn.primary{background:var(--accent);color:#161616;border-color:#0000}.header-action{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:8px;gap:2px}.header-count{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}.community-btn{padding:6px 10px;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--community-color);border:1px solid var(--community-color);border-radius:10px;cursor:pointer;transition:all 200ms ease;height:36px;width:42px}.community-btn:hover{background:rgba(56,189,248,0.1)}.community-btn.active{background:var(--community-color);color:#161616;border-color:var(--community-color);box-shadow:0 0 15px rgba(56,189,248,0.4)}.community-btn svg{fill:none;transition:stroke 200ms ease,fill 200ms ease}.community-btn.active svg{fill:currentColor;stroke:currentColor}.fav-header-btn{padding:6px 10px;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:10px;cursor:pointer;transition:all 200ms ease;height:36px;width:42px}.fav-header-btn:hover{background:rgba(255,209,102,0.1)}.fav-header-btn.active{background:var(--accent);color:#161616;border-color:var(--accent);box-shadow:0 0 15px rgba(255,209,102,0.4)}main{padding:26px 18px 44px}.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.panel{background:var(--glass-strong);border:2px solid var(--border);border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.35);max-width:100%;transition:border-color 500ms ease,box-shadow 200ms ease,background 500ms ease}

/* Utility to stop scrolling when Game Menu is open */
body.noscroll { overflow: hidden !important; }

/* UPDATED NOW PLAYING LAYOUT */
.now{position:sticky;top:var(--hdr);z-index:6;padding:18px 16px;border-bottom:1px solid var(--border);background:rgba(16,16,22,.46);backdrop-filter:blur(6px);border-radius:14px;display:grid;gap:14px;grid-template-columns:84px 1fr;grid-template-areas:"art title" "audio audio" "controls controls";align-items:center;min-height:160px;transition:border-color 200ms ease,background 500ms ease}
#cover{grid-area:art;width:84px;height:84px;border-radius:14px;object-fit:cover;background:#111;border:1px solid #2c2c34;box-shadow:0 10px 24px rgba(0,0,0,.35);cursor:zoom-in;transition:transform 200ms ease}
#cover:hover{transform:scale(1.05)}
.now .title{grid-area:title;display:flex;flex-direction:column;gap:4px;min-width:0;justify-content:center;overflow:hidden}
.t-main{font-size:clamp(20px, 5vw, 32px);font-weight:900;line-height:1.1;white-space:normal;word-break:break-word;text-shadow:0 2px 18px rgba(0,0,0,.35);transition:color 500ms ease;display:block;width:100%}
.t-sub{color:var(--muted);font-size:clamp(13px,3.4vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#toggleGroup{display:flex;gap:12px;align-items:center;justify-content:flex-start;margin-top:6px}
.toggle-icon{font-size:24px;padding:4px 6px;background:transparent;border:none;cursor:pointer;text-shadow:0 0 12px rgba(0,0,0,.6);transition:transform 120ms ease,text-shadow 160ms ease,opacity 160ms ease, color 500ms ease;display:flex;align-items:center;justify-content:center}.toggle-icon:hover{transform:scale(1.12);text-shadow:0 0 20px rgba(0,0,0,.9)}#favToggle{color:var(--accent)}#communityToggle{color:var(--community-color)}#skillToggle{color:var(--skill-color);font-size:26px}.now audio{grid-area:audio;width:100%;max-width:100%}.controls{grid-area:controls;display:flex;gap:10px;justify-content:flex-start;align-items:center;flex-wrap:nowrap;overflow:hidden}.tbtn{appearance:none;background:#1f2028;border:1px solid #343645;color:var(--ink);border-radius:10px;padding:11px 16px;font-weight:800;font-size:clamp(13px,3.4vw,15px);cursor:pointer;white-space:nowrap;transition:background 500ms ease, color 500ms ease}.tbtn.primary{background:var(--accent);color:#151515;border-color:#0000}.tbtn[aria-pressed="true"]{outline:2px solid var(--accent);background:#2b2b3a;color:var(--ink)}

@media(max-width:540px){.now{grid-template-columns:72px 1fr;grid-template-areas:"art title" "audio audio" "controls controls";padding:14px 12px;gap:12px;min-height:150px}#cover{width:72px;height:72px;border-radius:12px}#toggleGroup{gap:8px}}
audio{display:block;width:100%}.list{overflow:auto;padding:10px;max-height:min(44svh,400px)}@media(max-height:740px){.list{max-height:min(40svh,360px)}}.track{display:grid;grid-template-columns:34px 48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:pointer;transition:background 150ms ease,transform 120ms ease;user-select:text;-webkit-user-select:text}.track:hover{background:rgba(35,35,48,.42)}.track.active{background:rgba(43,43,58,.52)}.num,.dur{color:var(--muted);font-variant-numeric:tabular-nums}.thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;background:#111;border:1px solid #2c2c34}.track-count{padding:8px 14px 0;font-size:12px;color:var(--muted);transition:color 200ms ease}.searchbar{padding:10px 14px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--glass);backdrop-filter:blur(6px);border-radius:14px;margin-bottom:16px;border:1px solid var(--border);}.searchbar input{flex:1 1 auto;min-width:200px;background:#1e1f27;border:1px solid #333547;border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit}.searchbar .hint{color:#9ca3af;font-size:12px}@media (max-width:540px){.searchbar{flex-wrap:nowrap;gap:6px}.searchbar input{min-width:0}.searchbar .btn{padding:6px 8px;font-size:12px;white-space:nowrap;flex:0 0 auto}}

/* Modes Overrides */
body.fav-mode #hero::before{background:radial-gradient(1200px 700px at 50% 8%,rgba(0,0,0,0.05),rgba(0,0,0,0.3)),linear-gradient(to bottom,rgba(28,18,4,.35),rgba(10,8,6,.55))}
body.fav-mode .panel{border-color:rgba(255,209,102,.35);box-shadow:0 14px 32px rgba(0,0,0,.45)}body.fav-mode .now{background:rgba(32,25,14,.72);border-color:rgba(255,209,102,.45)}body.fav-mode .track.active{background:rgba(255,209,102,.18)}body.fav-mode .track:hover{background:rgba(255,209,102,.10)}body.fav-mode .t-main{color:var(--accent)}body.fav-mode #trackCount{color:var(--accent)}

body.community-mode #hero::before{background:radial-gradient(1200px 700px at 50% 8%,rgba(0,0,0,0.05),rgba(0,0,0,0.3)),linear-gradient(to bottom,rgba(14,21,30,.35),rgba(8,10,14,.55))}
body.community-mode .panel{border-color:rgba(56,189,248,.35);box-shadow:0 14px 32px rgba(0,0,0,.45)}body.community-mode .now{background:rgba(14,24,34,.72);border-color:rgba(56,189,248,.45)}body.community-mode .track.active{background:rgba(56,189,248,.18)}body.community-mode .track:hover{background:rgba(56,189,248,.10)}body.community-mode .t-main{color:var(--community-color)}body.community-mode #trackCount{color:var(--community-color)}

#gameOverlay{position:fixed;inset:0;z-index:100;background:#000;display:none;flex-direction:column;overflow:hidden}#gameCanvas{width:100%;flex:1;touch-action:none;background:#000}
#gameHeader{position:absolute;top:0;left:0;right:0;height:60px;background:rgba(0,0,0,0.8);border-bottom:1px solid #333;display:flex;justify-content:center;align-items:center;gap:10px;z-index:112;pointer-events:auto}
#diffGroup{display:flex;gap:10px;align-items:center}#instrHeaderGroup{display:flex;gap:10px;align-items:center}
@media (max-width: 600px) {#gameHeader { height: auto; min-height: 60px; flex-wrap: wrap; padding: 8px; gap: 8px; }#instrHeaderGroup { width: 100%; justify-content: center; flex-wrap: wrap; }#instrHeaderGroup select { flex: 1 1 auto; min-width: 80px; margin: 0 !important; }}

/* --- MOBILE FRIENDLY SLIDERS --- */
#gameSliders {
    position: absolute; 
    top: 60px; 
    left: 0; 
    right: 0;
    height: auto;
    min-height: 60px;
    background: rgba(20,20,25,0.95);
    border-bottom: 1px solid #333;
    display: none;
    justify-content: center; 
    align-items: center;
    gap: 12px; 
    z-index: 111;
    padding: 10px;
    flex-wrap: wrap; /* Allow wrapping */
}

@media (max-width: 600px) {
    #gameSliders { 
        top: 100px; 
        gap: 10px;
    } 
    .slider-box {
        flex: 1 1 45%; /* 2 per row on mobile */
        min-width: 120px;
        justify-content: space-between;
    }
    .slider-box input[type=range] {
        width: 100%; /* Fill container */
    }
}

.diff-btn{background:transparent;border:none;color:#888;padding:6px 12px;cursor:pointer;font-weight:bold;border-radius:6px;transition:all 150ms;font-size:14px}.diff-btn.active{background:#333;color:#fff;box-shadow:0 0 10px rgba(255,255,255,0.2)}.diff-btn[data-lvl="Easy"].active{color:#4ade80;text-shadow:0 0 8px #4ade80}.diff-btn[data-lvl="Medium"].active{color:#fbbf24;text-shadow:0 0 8px #fbbf24}.diff-btn[data-lvl="Hard"].active{color:#ef4444;text-shadow:0 0 8px #ef4444}.menu-btn{background:rgba(255,255,255,0.1);color:#fff;border:1px solid #444;padding:6px 10px;border-radius:6px;font-weight:bold;cursor:pointer;margin-right:5px;font-size:12px;text-transform:uppercase}.menu-btn.on{background:var(--accent);color:#000;border-color:var(--accent)}.menu-btn.active{background:#a855f7;color:#fff;border-color:#a855f7}
#closeGame, #pauseGame{background:rgba(239,68,68,0.2);color:#ef4444;border:1px solid #ef4444;padding:6px 12px;border-radius:6px;font-weight:bold;cursor:pointer;transition:all 200ms;margin-left:10px}#pauseGame{background:rgba(255,209,102,0.2);color:var(--accent);border-color:var(--accent)}#closeGame:hover{background:#ef4444;color:#fff}#pauseGame:hover{background:var(--accent);color:#000}
@media (max-width: 600px) {#closeGame, #pauseGame { padding: 6px 8px; font-size: 12px; margin-left: 4px; }}
#gameStats{position:absolute;top:160px;left:0; right:0;display:flex; flex-direction:column; align-items:center;gap:4px; pointer-events:none; z-index:110;text-shadow:0 0 10px rgba(0,0,0,1)}.score-row{display:flex;gap:20px;align-items:baseline}.g-label{font-family:"Oswald",sans-serif;font-size:14px;color:#888;text-transform:uppercase;letter-spacing:1px}.g-val{font-family:"Oswald",sans-serif;font-size:36px;color:#fff;text-shadow:0 0 15px #fff;font-weight:bold}.g-combo{font-family:"Oswald",sans-serif;font-size:24px;color:var(--accent)}.high-score-row{margin-top:5px;font-family:"Oswald",sans-serif;font-size:16px;color:#fff;background:rgba(255,255,255,0.1);padding:2px 10px;border-radius:12px;text-shadow:0 0 5px #fff}
select {background: #111; color: #fff; border: 1px solid #444;padding: 4px 8px; border-radius: 4px;font-family: "Oswald", sans-serif;font-size: 14px; text-transform: uppercase;cursor: pointer;}
.slider-box { display: flex; align-items: center; gap: 8px; }.slider-label { font-size: 11px; color: #ccc; text-transform: uppercase; font-weight: bold; font-family: sans-serif; letter-spacing: 0.5px; }input[type=range] { -webkit-appearance: none; width: 120px; height: 4px; background: #333; border-radius: 2px; outline: none; }input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #a855f7; cursor: pointer; border: 2px solid #fff; }
#loadingOverlay{position:absolute;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;z-index:101;flex-direction:column;gap:15px}.loader{width:40px;height:40px;border:4px solid #333;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* MENU STYLES */
#gameMenu{position:absolute;inset:0;z-index:120;background:rgba(10,10,14,0.95);display:none;flex-direction:column;align-items:center;justify-content:center;gap:30px}
#gameMenu h2{font-family:"Oswald",sans-serif;font-size:42px;margin:0;text-transform:uppercase;background:linear-gradient(to right,#fff,#888);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.menu-cards{display:flex;gap:20px;flex-direction: row;flex-wrap: wrap; justify-content:center;align-items: center;width: 100%;max-width: 1000px;padding: 10px;}
.game-card{width:240px;height:320px;background:rgba(30,30,40,0.6);border:2px solid #333;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 200ms ease;padding:20px;text-align:center;position:relative;overflow:hidden}
@media (max-width: 760px) {.menu-cards {gap: 10px;}.game-card {width: 160px; height: 220px;}.card-icon { font-size: 32px; }.card-title { font-size: 18px; }}
.game-card:hover{transform:translateY(-5px);border-color:var(--accent);background:rgba(40,40,50,0.8);box-shadow:0 10px 30px rgba(0,0,0,0.5)}.game-card.instr:hover{border-color:#a855f7;box-shadow:0 0 20px rgba(168,85,247,0.2)}.card-title{font-family:"Oswald";font-size:24px;margin-top:10px;color:#fff}.card-icon{font-size:48px;margin-bottom:10px}

#scoreModal {position: absolute; inset: 0; z-index: 200;background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);display: none; flex-direction: column; align-items: center; justify-content: center;}
.score-card {background: #16161e; border: 1px solid var(--accent); border-radius: 16px;padding: 30px; width: min(90%, 360px); text-align: center;box-shadow: 0 0 40px rgba(255,209,102,0.15);}
.score-card h2 { color: var(--accent); font-family: "Oswald"; margin: 0 0 10px; font-size: 32px; text-transform: uppercase; }
.score-card p { color: #ccc; margin-bottom: 20px; }
.score-input { background: #000; border: 1px solid #333; color: #fff; font-size: 24px; text-align: center; padding: 10px; width: 100%; border-radius: 8px; text-transform: uppercase; letter-spacing: 4px; font-family: monospace; margin-bottom: 20px;}
.score-btn { width: 100%; background: var(--accent); color: #000; font-weight: 900; padding: 12px; border: none; border-radius: 8px; cursor: pointer; text-transform: uppercase; font-family: "Oswald"; font-size: 18px; }

#settingsModal {position: fixed; inset: 0; z-index: 300;background: rgba(0,0,0,0.3); backdrop-filter: blur(2px);display: none; align-items: center; justify-content: center;}
.settings-content {background: rgba(10, 10, 14, 0.65); border: 1px solid var(--border);border-radius: 18px; padding: 20px; width: 300px; max-width: 90%;box-shadow: 0 20px 50px rgba(0,0,0,0.5);color: #fff; text-align: center;backdrop-filter: blur(8px); transition: background 200ms ease;}
.settings-content h3 { margin-top: 0; font-family: "Oswald"; text-transform: uppercase; color: var(--muted); font-size: 18px; letter-spacing: 1px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 10px; }
.setting-row span { font-size: 14px; font-weight: 500; color: #ddd; }
.btn.full { width: 100%; margin-top: 10px; }

#artModal {position: fixed; inset: 0; z-index: 400;background: rgba(0,0,0,0.85);backdrop-filter: blur(15px);display: none; align-items: center; justify-content: center;cursor: zoom-out;}
#artModal img {max-width: 90vw; max-height: 90vh;border-radius: 12px;box-shadow: 0 0 50px rgba(0,0,0,0.8);border: 1px solid #333;}

.panel-header {padding: 14px; border-bottom: 1px solid var(--border);font-family: "Oswald", sans-serif; font-size: 18px; text-transform: uppercase;color: var(--muted); letter-spacing: 1px;}
#historyList .track {grid-template-columns: 48px 1fr auto;}

/* === CLOUD / WAVEFORM MODULE STYLES === */

#waveCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Waveform on top half */
    z-index: 105;
    cursor: crosshair;
    background: radial-gradient(circle at center, #1a1a24 0%, #000 100%);
}

#cloudControls {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0;
    height: 50%; 
    display: none; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    gap: 20px;
    z-index: 115; 
    padding: 20px 30px;
    background: linear-gradient(to top, #0a0a0e 95%, transparent);
    pointer-events: auto;
}

.cloud-slider-group {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spacing between label and fader */
}

.cloud-slider-group label {
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.cloud-slider-group label span {
    color: var(--accent);
}

/* Custom Dropdown */
.cloud-select {
    background: #111;
    color: var(--community-color);
    border: 1px solid #333;
    padding: 12px;
    border-radius: 6px;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    width: 100%;
    max-width: 700px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
}

/* LARGE MIXING BOARD FADER STYLE */
.fader-slider {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
    padding: 15px 0; /* Hit area */
    margin: 0;
}

/* Track */
.fader-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 16px;
    background: #161618;
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}

/* Thumb */
.fader-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 36px; 
    width: 60px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #444, #222);
    border: 1px solid #555;
    border-top: 1px solid #777;
    margin-top: -11px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    position: relative;
    z-index: 2;
}

.fader-slider::-webkit-slider-thumb::after {
    content: '';
    position: absolute;
    top: 20%; left: 50%; bottom: 20%;
    width: 2px;
    background: #fff;
    transform: translateX(-50%);
}

/* Colors for specific sliders */
#cloudSpeed::-webkit-slider-thumb { border-bottom: 4px solid var(--accent); }
#cloudVenue::-webkit-slider-thumb { border-bottom: 4px solid var(--community-color); }