{ margin:0; padding:0; box-sizing:border-box; font-family:Arial; }  body{ overflow:hidden; background:black; color:white; }  /* ROTATE */  #rotateScreen{ position:fixed; inset:0; background:black; display:none; justify-content:center; align-items:center; z-index:999999; text-align:center; }  @media (orientation:portrait){ #rotateScreen{ display:flex; } }  /* LOADING */  #loadingScreen{ position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:black; z-index:99999; }  .overlay{ position:absolute; inset:0; background: linear-gradient( 45deg, #000, #111, #222, #000 ); animation:bg 5s linear infinite; }  @keyframes bg{ 0%{filter:hue-rotate(0deg);} 100%{filter:hue-rotate(360deg);} }  .logo{ font-size:70px; z-index:2; color:white; text-shadow:0 0 30px gold; }  .loadingText{ margin-top:30px; font-size:30px; z-index:2; }  .loader{ width:140px; height:140px; border-radius:50%; border:8px solid #ffffff33; border-top:8px solid gold; animation:spin 1s linear infinite; z-index:2; margin-top:40px; }  @keyframes spin{ 100%{ transform:rotate(360deg); } }  /* MENU */  #menu{ position:fixed; inset:0; display:none; justify-content:center; align-items:center; background:url('https://images.unsplash.com/photo-1507089947368-19c1da9775ae?q=80&w=2070') center/cover; }  .menuOverlay{ position:absolute; inset:0; background:#000000bb; backdrop-filter:blur(10px); }  .menuBox{ position:relative; z-index:5; display:flex; flex-direction:column; gap:20px; width:400px; }  .menuBox h1{ font-size:60px; text-align:center; margin-bottom:20px; }  .menuBox button{ height:70px; border:none; border-radius:20px; font-size:24px; background:linear-gradient(gold,orange); color:black; font-weight:bold; }  /* GAME */  #gameContainer{ display:none; width:100vw; height:100vh; position:relative; background:black; }  #gameCanvas{ width:100%; height:100%; display:block; }  /* TOPBAR */  #topBar{ position:absolute; top:20px; left:20px; display:flex; gap:20px; background:#00000099; padding:15px 25px; border-radius:20px; backdrop-filter:blur(10px); }  /* JOYSTICK */  #joystick{ position:absolute; left:30px; bottom:30px; width:140px; height:140px; background:#ffffff22; border-radius:50%; backdrop-filter:blur(10px); }  /* ACTIONS */  #actions{ position:absolute; right:20px; bottom:20px; display:flex; flex-direction:column; gap:15px; }  #actions button{ width:80px; height:80px; border:none; border-radius:50%; font-size:35px; background:#00000088; color:white; backdrop-filter:blur(10px); }  /* SHOP */  #shopSystem{ position:absolute; bottom:20px; left:240px; display:flex; gap:20px; }  .product{ width:160px; background:#000000aa; padding:15px; border-radius:20px; text-align:center; backdrop-filter:blur(10px); }  .product p{ margin-top:10px; font-size:20px; }  .product span{ display:block; margin-top:10px; color:gold; }  .product button{ margin-top:10px; width:100%; height:45px; border:none; border-radius:10px; background:gold; font-weight:bold; }  /* ROOMS */  #rooms{ position:absolute; top:120px; right:20px; width:300px; background:#00000099; padding:20px; border-radius:20px; backdrop-filter:blur(10px); }  .room{ margin-top:15px; padding:15px; background:#ffffff11; border-radius:10px; }  /* LOGIN */  #loginBox{ display:none; position:fixed; inset:0; background:#000000dd; justify-content:center; align-items:center; z-index:9999; }  .loginPanel{ width:400px; background:#111; padding:30px; border-radius:20px; display:flex; flex-direction:column; gap:15px; }  .loginPanel input{ height:55px; padding-left:15px; border:none; border-radius:10px; font-size:18px; }  .loginPanel button{ height:55px; border:none; border-radius:10px; background:gold; font-weight:bold; }  /* SETTINGS */  #settingsPanel{ display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#111; padding:30px; border-radius:20px; z-index:9999; }  .settingRow{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }  .settingRow button{ padding:15px; border:none; border-radius:10px; background:#222; color:white; }