:root{
  --bg:#faf7f2;
  --accent:#8b5e3c;
  --muted:#5b5b5b;
}
*{box-sizing:border-box}
body{font-family:Inter, Roboto, system-ui, Arial, sans-serif; margin:0; background:var(--bg); color:#222}

/* Loading Screen */
.loading-screen{position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999; opacity:1; transition:opacity 0.5s; pointer-events:auto}
.loading-screen.hidden{opacity:0; pointer-events:none}
.loading-spinner{width:60px; height:60px; border:4px solid #f0e8e0; border-top:4px solid var(--accent); border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-screen p{margin-top:1.5rem; font-size:1.1rem; color:var(--accent); font-weight:600}

/* Quote Banner */
.quote-banner{background:linear-gradient(90deg, var(--accent), #a67c52); padding:1rem; text-align:center; color:#fff; font-style:italic; box-shadow:0 2px 8px rgba(0,0,0,0.1); animation:slideInDown 0.6s ease}
.banner-content{display:flex; justify-content:center; align-items:center; gap:2rem; position:relative}
#rotatingQuote{margin:0; font-size:1.1rem; font-weight:500; letter-spacing:0.5px; transition:opacity 0.3s ease; flex:1}
.dark-mode-btn{background:transparent; border:none; font-size:1.5rem; cursor:pointer; transition:transform 0.2s}
.dark-mode-btn:hover{transform:scale(1.2)}
body.dark-mode{--bg:#1a1a1a; --accent:#d4a574; --muted:#ccc; background:#1a1a1a; color:#fff}
body.dark-mode .modal-content{background:#222}
body.dark-mode .quote-banner{background:linear-gradient(90deg, #2a2a2a, #3a3a3a)}
body.dark-mode .music-player{background:linear-gradient(135deg, #2a2a2a, #1a1a1a)}

@keyframes slideInDown{from{transform:translateY(-100%); opacity:0} to{transform:translateY(0); opacity:1}}
.stage{max-width:1100px;margin:3rem auto;padding:1rem}
.throne-area{position:relative; width:100%; max-width:500px; margin:0 auto 2rem; height:0;padding-bottom:55%;}
.throne{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0.95}
.portrait{position:absolute; left:50%; top:28%; transform:translateX(-50%); width:40%; max-width:360px; border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,0.25); border:6px solid rgba(255,255,255,0.6); transition:transform 0.2s}
.portrait:hover{transform:translateX(-50%) scale(1.05)}

.tribute{background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95)); padding:1.6rem; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.tribute h1{color:var(--accent); margin-top:0}
.tribute p{line-height:1.6; color:var(--muted); margin:0 0 1rem}
.tribute .note{font-size:0.9rem; color:#444}

/* Modal Styles */
.modal{display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); overflow:auto}
.modal-content{background:#fff; margin:2rem auto; padding:0; width:90%; max-width:900px; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden}
.close-modal{position:absolute; top:1rem; right:1rem; color:#999; font-size:2rem; font-weight:bold; cursor:pointer; line-height:1; z-index:10}
.close-modal:hover{color:#000}

/* Tab Navigation */
.modal-tabs{display:flex; background:linear-gradient(90deg, #f5f0e8, #f9f5f0); border-bottom:2px solid #ddd}
.tab-btn{flex:1; padding:1rem; background:transparent; border:none; cursor:pointer; font-size:1rem; font-weight:600; color:#666; transition:all 0.3s; border-bottom:3px solid transparent}
.tab-btn:hover{color:var(--accent); background:#f9f5f0}
.tab-btn.active{color:var(--accent); border-bottom-color:var(--accent)}

.tab-content{display:none; padding:2rem; animation:fadeIn 0.3s}
.tab-content.active{display:block}

@keyframes fadeIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

.tab-content h2{color:var(--accent); margin-top:0}

.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; margin-bottom:2rem}
.gallery-item{text-align:center; border-radius:8px; overflow:hidden; background:#f5f5f5; padding:0; opacity:1; max-height:none; transition:all 0.2s}
.gallery-item.hidden{display:none}
.gallery-item:hover{transform:translateY(-5px)}

.gallery-img-wrapper{position:relative; overflow:hidden; height:250px}
.gallery-img{width:100%; height:100%; object-fit:cover; border-radius:8px 8px 0 0; display:block}
.gallery-overlay{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); display:flex; gap:1rem; justify-content:center; align-items:center; opacity:0; transition:opacity 0.3s}
.gallery-item:hover .gallery-overlay{opacity:1}
.overlay-btn{background:#fff; border:none; padding:0.8rem 1rem; border-radius:6px; cursor:pointer; font-size:1.2rem; transition:all 0.2s}
.overlay-btn:hover{transform:scale(1.1); background:var(--accent); color:#fff}

.gallery-item p{margin:0.8rem; color:#555; font-size:0.95rem}

.gallery-actions{padding:0.8rem; display:flex; flex-direction:column; gap:0.8rem; border-top:1px solid #ddd}
.like-btn{background:#fff; border:2px solid #ff6b9d; color:#ff6b9d; padding:0.6rem; border-radius:6px; cursor:pointer; font-weight:bold; transition:all 0.2s; width:100%}
.like-btn:hover{background:#ff6b9d; color:#fff; transform:scale(1.05)}
.like-btn.liked{background:#ff6b9d; color:#fff}
.like-count{margin-left:0.3rem}

.rating-stars{display:flex; justify-content:center; gap:0.4rem}
.star{cursor:pointer; font-size:1.5rem; transition:all 0.2s; opacity:0.5}
.star:hover, .star.active{opacity:1; transform:scale(1.1)}

/* Search Container */
.search-container{text-align:center; margin-bottom:1.5rem}
.search-input{width:100%; max-width:400px; padding:0.8rem 1rem; font-size:1rem; border:2px solid #ddd; border-radius:8px; transition:all 0.3s}
.search-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 8px rgba(139,94,60,0.2)}

/* Music Player */
.music-player{background:linear-gradient(135deg, #f9f5f0, #f0e8e0); padding:1.5rem; border-radius:10px; margin-top:0}

/* Visualizer */
.visualizer-container{margin-bottom:2rem; text-align:center}
.visualizer{width:100%; height:150px; background:linear-gradient(180deg, #f0e8e0, #e8dfd7); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1)}

.progress-container{margin-bottom:1.5rem}
.progress-bar{margin-bottom:0.5rem; display:flex; align-items:center}
.progress-slider{flex:1; height:6px; border-radius:3px; background:#ddd; outline:none; -webkit-appearance:none; appearance:none; cursor:pointer}
.progress-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer}
.progress-slider::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; border:none}
#timeDisplay{font-size:0.85rem; color:#999; text-align:right; margin-left:0.5rem; min-width:60px}

.player-controls{display:flex; gap:1.5rem; justify-content:center; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap}
.control-btn{padding:0; border:none; cursor:pointer; transition:all 0.2s; font-size:1.2rem; display:flex; align-items:center; justify-content:center}
.spotify-btn{width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; font-weight:bold}
.spotify-btn:hover{background:#6b3e1e; transform:scale(1.1)}
.play-pause-btn{width:56px; height:56px; font-size:1.4rem}
.play-pause-btn:hover{transform:scale(1.15)}

.volume-container{display:flex; align-items:center; gap:0.8rem; justify-content:center; margin-bottom:1.5rem}
.volume-slider{width:140px; height:6px; border-radius:3px; background:#ddd; outline:none; -webkit-appearance:none; appearance:none}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer}
.volume-slider::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; border:none}
.volume-indicator{font-size:0.85rem; color:#666; min-width:40px; text-align:right; font-weight:bold}

/* Equalizer */
.equalizer-container{display:flex; gap:0.8rem; justify-content:center; margin-bottom:1.5rem; flex-wrap:wrap}
.eq-btn{padding:0.6rem 1rem; background:#e8dfd7; color:#333; border:2px solid #d0c4ba; border-radius:6px; cursor:pointer; font-size:0.9rem; transition:all 0.2s; font-weight:500}
.eq-btn:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px)}
.eq-btn.active{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 10px rgba(139,94,60,0.4)}
.eq-btn span{margin-right:0.3rem}

.song-info{text-align:center; margin-bottom:1rem}
.song-info p{color:#666; margin:0 0 1rem; font-weight:bold; font-size:0.95rem}

.song-list{display:flex; flex-direction:column; gap:0.8rem; align-items:center}
.song-btn{padding:0.8rem 1.5rem; background:#e8dfd7; color:#333; border:2px solid #d0c4ba; border-radius:8px; cursor:pointer; font-size:0.95rem; transition:all 0.2s; text-align:center; font-weight:500; min-width:200px}
.song-btn:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.song-btn:active{transform:translateY(0)}
.song-btn.playing{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 12px rgba(139,94,60,0.4)}

.progress-bar{margin:1rem 0; display:flex; flex-direction:column; gap:0.5rem}
.progress-slider{width:100%; height:6px; border-radius:3px; background:#ddd; outline:none; -webkit-appearance:none; appearance:none}
.progress-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer}
.progress-slider::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; border:none}
#timeDisplay{font-size:0.85rem; color:#999; text-align:right}

@media (max-width:640px){
  .throne-area{padding-bottom:120%}
  .portrait{top:30%; width:55%; max-width:none}
  .modal-content{width:95%; margin:1rem auto; padding:1rem}
  .gallery-grid{grid-template-columns:repeat(2, 1fr); gap:1rem}
  .player-controls{gap:0.5rem}
  .volume-slider{width:80px}
}