/* style.css - LumenJoy XP polished update 4.1 */

/* variables */
:root{
  --xp-deep:#031925;
  --xp-mid:#04293f;
  --xp-accent:#0b67b2;
  --window-border:#173b6a;
  --taskbar:#0b4d86;
  --text-light:#ffffff;
  --muted:#cfe0f1;
  --font: "Segoe UI", Tahoma, Arial, sans-serif;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font);background:linear-gradient(180deg,var(--xp-deep) 0%, #071b33 60%); color:var(--text-light); overflow:hidden}

/* centered huge background title (más centrado) */
body::before{
  content:"LUMENJOY ENTERTAINMENT";
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:96px;
  font-weight:900;
  color:rgba(255,255,255,0.045);
  letter-spacing:6px;
  pointer-events:none;
  white-space:nowrap;
  z-index:0;
}

/* desktop */
#desktop{position:relative;height:calc(100% - 44px);padding:24px 36px 12px 36px;z-index:2}

/* explorer icons */
#explorer{
  display:flex;
  gap:28px;
  align-items:flex-start;
  padding-top:12px;
  flex-wrap:wrap;
  z-index:3;
}
.folder{
  width:120px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease;
}
.folder img{width:96px;height:96px;display:block;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.45))}
.folder p{margin-top:8px;font-size:13px;color:var(--muted);text-shadow:0 1px 0 rgba(0,0,0,0.35)}
.folder:hover{transform:translateY(-6px) scale(1.04);filter:brightness(1.12)}

/* windows */
.window{
  position:absolute;
  width:560px;
  height:380px;
  background: linear-gradient(#fbfdff,#f3f7fb);
  color:#0b2b3a;
  border:4px solid var(--window-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  border-radius:4px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:80;
  animation:pop .14s ease;
}
@keyframes pop{from{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}

/* titlebar */
.window-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  background: linear-gradient(var(--xp-accent), #0a4f97);
  color:white;
  cursor:grab;
  user-select:none;
}
.window-header .title{font-weight:700;font-size:13px}
.window-header .controls{display:flex; gap:6px}
.window-header button{
  width:28px;height:22px;border:none;border-radius:3px;background:transparent;color:#fff;cursor:pointer;font-weight:700;
}
.window-header button:hover{background:rgba(255,255,255,0.12)}

/* content */
.window-content{flex:1;padding:12px;overflow:auto;background: linear-gradient(#fff,#f1f5fb);}

/* file grid */
.file-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
  align-items:start;
}
.file-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;border-radius:6px;cursor:pointer;transition: transform .12s, background .12s}
.file-item:hover{transform:translateY(-6px);background:rgba(11,103,178,0.06)}
.file-item img.thumb{width:92px;height:92px;object-fit:cover;border-radius:4px;border:1px solid rgba(0,0,0,0.06)}
.file-item img.icon{width:48px;height:48px}
.file-item span{font-size:13px;color:#12324a;text-align:center;word-break:break-word}

/* preview */
.preview-img{max-width:100%;max-height:100%;display:block;margin:0 auto}
audio{width:100%;outline:none}

/* minimized */
.window.minimized{height:40px;overflow:visible}
.window.minimized .window-content{display:none}

/* maximized */
.window.maximized{left:12px !important;top:12px !important;width:calc(100% - 24px) !important;height:calc(100% - 72px) !important;border-radius:4px}

/* taskbar */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:44px;background:linear-gradient(#0b4d86,#063b6a);display:flex;align-items:center;padding:6px 10px;gap:10px;z-index:9999;box-shadow:0 -4px 16px rgba(0,0,0,0.45)}
#start-area{display:flex;align-items:center}
#start-button{background:#0b67b2;color:white;border:none;padding:6px 12px;border-radius:6px;margin-right:6px;cursor:pointer;font-weight:800}
#taskbar-windows{display:flex;gap:8px;align-items:center;flex:1;overflow:auto;padding-left:6px}
.taskbtn{background:#0d74c8;color:white;padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:700;border:none;display:flex;align-items:center;gap:8px}
#taskbar-right{display:flex;align-items:center;gap:18px}
#clock{font-weight:700;color:#fff;background:rgba(255,255,255,0.04);padding:6px 8px;border-radius:6px}
#copyright{color:rgba(255,255,255,0.6);font-size:13px}

/* search overlay (start menu) */
#search-panel{
  position:fixed;left:12px;bottom:56px;width:360px;background:#f6fbff;border:2px solid #9ec7ff;border-radius:6px;padding:10px;box-shadow:0 8px 30px rgba(0,0,0,0.35);z-index:10000;color:#0b2b3a;display:none;
}
#search-panel input{width:100%;padding:8px;border:1px solid #bcd9ff;border-radius:4px;font-size:14px}
#search-results{margin-top:8px;max-height:260px;overflow:auto}
.search-item{display:flex;gap:8px;align-items:center;padding:6px;border-radius:4px;cursor:pointer}
.search-item:hover{background:#e6f2ff}

/* splash screen */
#splash{
  position:fixed;left:0;top:0;right:0;bottom:0;background:black;display:flex;align-items:center;justify-content:center;z-index:99999;color:#00ff7a;flex-direction:column;font-family:monospace;font-size:16px;
}
.splash-box{width:520px;height:180px;border:2px solid #0b7a3a;padding:18px;background:#020202}
.progress{height:12px;background:#002b16;border-radius:6px;margin-top:14px;overflow:hidden}
.progress > i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#00ff7a,#3be6a0);transition:width 1.2s linear}
.splash-hidden{display:none}

/* responsive */
@media (max-width:900px){
  .window{width:92%;height:62vh}
  .file-item img.thumb{width:80px;height:80px}
}